39 lines
843 B
Sass
39 lines
843 B
Sass
.switch
|
|
display: inline-flex
|
|
align-items: center
|
|
cursor: pointer
|
|
|
|
&__control
|
|
display: inline-flex
|
|
align-items: center
|
|
height: 24px
|
|
width: 44px
|
|
border: 1px solid rgba(195, 195, 195, 0.9)
|
|
border-radius: 12px
|
|
padding: 0 2px
|
|
background-color: rgba(202, 202, 202, 0.9)
|
|
transition: 250ms background-color
|
|
|
|
&__input:focus-visible + &__control
|
|
outline: 2px solid hsl(200 98% 39%)
|
|
outline-offset: 2px
|
|
|
|
&__control[data-checked]
|
|
border-color: rgb(75, 117, 158)
|
|
background-color: rgb(72, 111, 149)
|
|
|
|
&__thumb
|
|
height: 20px
|
|
width: 20px
|
|
border-radius: 10px
|
|
background-color: white
|
|
transition: 250ms transform
|
|
|
|
&__thumb[data-checked]
|
|
transform: translateX(calc(100% - 1px))
|
|
|
|
&__label
|
|
margin-right: 1rem
|
|
color: white
|
|
font-size: 1rem
|
|
user-select: none
|