Gecko - switches

by Petr Haluza

HTML

<section>

<div class="check-to-switch">
  <span class="bef">Vypnout</span>
  <label><input type="checkbox" id="switch" /></label>
  <span class="aft">Zapnout</span>
</div>

<div class="check-to-switch">
  <!--span class="bef">HTML</span-->
  <label data-text-on="zapnuto"><input type="checkbox" id="switch" /></label>
  <span class="aft">Povolit funkci převaděče spojitosti</span>
</div>

<div class="check-to-switch">
  <label><input type="checkbox" id="switch" disabled/></label>
  <span class="aft">Zobrazovat počet extraterestriálních událostí</span>
</div>


</section>

CSS

:root { --switchSize: 1.35em }
.check-to-switch { display: flex; align-items: center; gap: .75em; }
.check-to-switch label { position: relative; transition: .2s; background: #b8d8f8; box-shadow: 0 0 0 2px #91c9f7 inset;	cursor: pointer; text-indent: -9999px;	width: calc(var(--switchSize) * 1.65);	height:  calc(var(--switchSize) * 0.7);	display: block;	border-radius: var(--switchSize)}
.check-to-switch input[type=checkbox] { height: 0;	width: 0;	visibility: hidden; display:none}
.check-to-switch label:after { position: absolute; transition: .2s; content: ''; 	width: var(--switchSize);	height: var(--switchSize);	background: #ffffff; box-shadow: 0 .5px 3px #456 ;	border-radius: 50%; top: calc(calc(calc(var(--switchSize) - calc(var(--switchSize) * 0.7)) / 2) * -1); left: calc(calc(calc(var(--switchSize) - calc(var(--switchSize) * 0.7)) / 2) * -1)}
.check-to-switch label:has(input:checked)  {	background: #91c9f7;}
.check-to-switch label:has(input:checked):after { background: #4172dd; box-shadow: -2px 0 2px -1px #456; left: calc( calc(var(--switchSize) * 1.65) + calc(calc(var(--switchSize) - calc(var(--switchSize) * 0.7)) / 2) - var(--switchSize));	}
.check-to-switch label:has(input:disabled) { filter: saturate(0) contrast(0.5) brightness(1.3);  cursor: not-allowed}


/* demo */
* { font-family: sans-serif; }
section { display: flex; margin: 50px 0 0 100px; flex-direction: column; gap: 2em;}