Skip to content

Instantly share code, notes, and snippets.

@GoodNew5
Created April 13, 2023 22:56
Show Gist options
  • Save GoodNew5/986c504b18d1c1d0333b57a609b81ffe to your computer and use it in GitHub Desktop.
Save GoodNew5/986c504b18d1c1d0333b57a609b81ffe to your computer and use it in GitHub Desktop.
switch scss
.switch {
--track-size: calc(var(--thumb-size) * 2);
--track-padding: .2rem;
--track-inactive: hsl(80 0% 80%);
--track-active: hsl(80 60% 45%);
--track-color-inactive: var(--track-inactive);
--track-color-active: var(--track-active);
@media (prefers-color-scheme: dark) {
--track-inactive: hsl(80 0% 35%);
--track-active: hsl(80 60% 60%);
}
--thumb-size: 2rem;
--thumb: hsl(0 0% 100%);
--thumb-highlight: hsl(0 0% 0% / 25%);
--thumb-color: var(--thumb);
--thumb-color-highlight: var(--thumb-highlight);
@media (prefers-color-scheme: dark) {
--thumb: hsl(0 0% 5%);
--thumb-highlight: hsl(0 0% 100% / 25%);
}
display: flex;
align-items: center;
gap: 2ch;
justify-content: space-between;
cursor: pointer;
user-select: none;
-webkit-tap-highlight-color: transparent;
}
.input {
appearance: none;
border: none;
outline-offset: .5rem;
box-sizing: content-box;
inline-size: var(--track-size);
block-size: var(--thumb-size);
padding: var(--track-padding);
border-radius: var(--track-size);
background: var(--track-color-inactive);
flex-shrink: 0;
display: grid;
align-items: center;
grid: [track] 1fr / [track] 1fr;
--thumb-position: 0%;
--thumb-transition-duration: .3s;
&:checked {
--thumb-position: calc(var(--track-size) - 100%);
}
@media (hover: hover) {
&:not(:disabled):hover {
&:before {
--highlight-size: .5rem;
}
}
}
&:disabled {
cursor: not-allowed;
--thumb-color: transparent;
&:before {
cursor: not-allowed;
@media (prefers-color-scheme: dark) {
box-shadow: inset 0 0 0 2px hsl(0 0% 0% / 50%);
}
}
}
&:before {
content: "";
grid-area: track;
inline-size: var(--thumb-size);
block-size: var(--thumb-size);
background: var(--thumb-color);
border-radius: 50%;
box-shadow: 0 0 0 var(--highlight-size) var(--thumb-color-highlight);
transform: translateX(var(--thumb-position));
@media (prefers-reduced-motion: no-preference) {
transition:
transform var(--thumb-transition-duration) ease,
box-shadow .25s ease;
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment