PatAlcala9/ocbo-esign
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Added switch component

Browse source
This commit is contained in:
Patrick Alvin Alcala 2026-01-05 17:32:18 +08:00
parent bfeab157bc
commit 49675cc75d
3 changed files with 65 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

39
src/components/Switch/Switch.sass Normal file
View file

@ -0,0 +1,39 @@
.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