Switch by Adir-SL
#e8e8e8
1/* The switch - the box around the slider */ 2.switch { 3 --sizeVar: 2em; 4 --color-primary: #dedede; 5 --color-secondary: #aaaaaa; 6 --color-primary-on: #1d9bf0; 7 --color-secondary-on: #ffffff; 8 position: absolute; 9 width: calc(var(--sizeVar) * 2); 10 height: var(--sizeVar); 11 background-color: var(--color-primary); 12 border-radius: var(--sizeVar); 13 box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05) inset; 14 cursor: pointer; 15 transform: translate(-50%, -50%); 16 transition: background-color 150ms ease-out; 17} 18 19.switch::after { 20 content: ""; 21 position: absolute; 22 margin: calc(var(--sizeVar) / 10); 23 height: calc(var(--sizeVar) - calc(var(--sizeVar) / 5)); 24 width: calc(var(--sizeVar) - calc(var(--sizeVar) / 5)); 25 background-color: var(--color-secondary); 26 border-radius: var(--sizeVar); 27 box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05) inset, 0 2px 4px rgba(0, 0, 0, 0.3); 28 transition: transform 150ms ease-out, background-color 150ms ease-out; 29} 30 31.switch:has(input:checked)::after { 32 transform: translateX(var(--sizeVar)); 33 background-color: var(--color-secondary-on); 34} 35 36.switch:has(input:checked) { 37 background-color: var(--color-primary-on); 38} 39 40/* Hide default HTML checkbox */ 41.switch input { 42 opacity: 0; 43 width: 0; 44 height: 0; 45}
472 views
472 views
MIT License