/** * Source: w3schools https://www.w3schools.com/howto/howto_css_switch.asp */ /* The switch - the box around the slider */ .switch { position: relative; display: inline-block; width: 2em; height: 1em; } /* Hide default HTML checkbox */ .switch input { opacity: 0; width: 0; height: 0; } /* The slider */ .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; transition: translate .4s; } .slider::before { position: absolute; content: ""; height: .8em; width: .8em; left: .1em; bottom: .1em; background-color: white; -webkit-transition: .4s; transition: .4s; } input:checked + .slider { background-color: $text-primary-color; } input:focus + .slider { box-shadow: 0 0 1px #2196F3; } input:checked + .slider::before { transform: translateX(1em); } /* Rounded sliders */ .slider.round { border-radius: 1em; } .slider.round::before { border-radius: 50%; }