quasar
Version:
Build high-performance VueJS user interfaces (SPA, PWA, SSR, Mobile and Desktop) in record time
107 lines (88 loc) • 2.04 kB
text/stylus
$toggle-transition = .22s cubic-bezier(.4,0,.2,1)
.q-toggle
vertical-align middle
&__label
font-size 14px
line-height 20px
&__native
width 1px
height 1px
&__track
height 14px
border-radius 7px
opacity .38
background-color currentColor
&__thumb-container
left 10px
right auto
top 10px
transform translate3d(0, 0, 0)
transition transform $toggle-transition
user-select none
&__thumb
width 20px
height 20px
border 10px solid
border-radius 50%
border-color #fff
box-shadow 0 3px 1px -2px rgba(0,0,0,.2), 0 2px 2px 0 rgba(0,0,0,.14), 0 1px 5px 0 rgba(0,0,0,.12)
.q-icon
font-size 12px
width 20px
height 0
line-height 0
color black
opacity .54
&__inner
width 56px
min-width 56px
height 40px
padding 13px 12px
&--active
color $primary
color var(--q-color-primary)
.q-toggle__track
opacity .54
.q-toggle__thumb-container
transform translate3d(16px, 0, 0)
.q-toggle__thumb
background-color currentColor
border-color currentColor
.q-icon
color #fff
opacity 1
&.disabled
opacity .75 !important
&--dark
.q-toggle__inner
color #fff
&--active
color $primary
color var(--q-color-primary)
.q-toggle__thumb:before
opacity .32 !important
&--dense
.q-toggle__inner
height 20px
padding 3px 12px
.q-toggle__thumb-container
top 0
body.desktop
.q-toggle
&__thumb:before
content ''
z-index -1
position absolute
top 0
right 0
bottom 0
left 0
border-radius 50%
background currentColor
opacity .12
transform scale3d(0, 0, 0)
transition transform $option-focus-transition
&:focus:not(.disabled) .q-toggle__thumb:before
transform scale3d(2, 2, 2)
&--dense:focus:not(.disabled) .q-toggle__thumb:before
transform scale3d(1.5, 1.5, 1.5)