github.com/outbrain/consul@v1.4.5/ui-v2/app/styles/components/toggle/layout.scss (about) 1 %toggle label { 2 position: relative; 3 } 4 %toggle input { 5 display: none; 6 } 7 %toggle label span { 8 display: inline-block; 9 padding-left: 34px; 10 } 11 %toggle label span::before, 12 %toggle label span::after { 13 position: absolute; 14 display: block; 15 content: ''; 16 top: 50%; 17 } 18 %toggle label span::before { 19 left: 0px; 20 width: 24px; 21 height: 12px; 22 margin-top: -5px; 23 } 24 %toggle label span::after { 25 margin-top: -3px; 26 width: 8px; 27 height: 8px; 28 } 29 %toggle label input:checked + span::after, 30 %toggle-negative label input + span::after { 31 left: 14px; 32 } 33 %toggle label span::after, 34 %toggle-negative label input:checked + span::after { 35 left: 2px; 36 }