quasar-framework
Version:
Simultaneously build desktop/mobile SPA websites & phone/tablet apps with VueJS
82 lines (68 loc) • 2.01 kB
text/stylus
$toggle-size ?= $generic-input-size
$toggle-width-factor ?= 1.5
$toggle-height = $toggle-size
$toggle-width = $toggle-width-factor * $toggle-size
$toggle-border-size = 1px
$toggle-handle-size = ($toggle-size - 2 * $toggle-border-size)
$toggle-handle-top = $toggle-border-size
$toggle-handle-left = $toggle-border-size
$toggle-area-width = ($toggle-width - $toggle-border-size)
$toggle-area-height = $toggle-height
$toggle-area-active-left = ($toggle-width - $toggle-handle-size - 2 * $toggle-border-size)
.quasar-toggle
display inline-block
height $toggle-height
width $toggle-width
vertical-align middle
position relative
input
display none
i
color $grey-6
line-height $toggle-size
font-size (.65 * $toggle-size)
position absolute
top 0
bottom 0
left (.17 * $toggle-handle-size)
transition all .3s ease
div
position relative
&:before, &:after
content ''
position absolute
transition all .3s ease
background white
&:before
vertical-align middle
top 0
left 0
width $toggle-area-width
height $toggle-area-height
border-radius $toggle-handle-size
border $toggle-border-size solid $form-lighter-color
&:after
border-radius 50%
top $toggle-handle-top
left 0
width $toggle-handle-size
height $toggle-handle-size
box-shadow $form-shadow
transform translateX($toggle-handle-left)
input:checked + div
&:before
background $form-active-color
border $toggle-border-size solid $form-active-color
&:after
box-shadow $shadow-1
transform translateX($toggle-area-active-left)
input:checked ~ i
color $form-active-color
transform translateX($toggle-area-active-left)
for $name, $color in $colors
&.{$name} input:checked
& + div:before
background $color
border-color $color
& ~ i
color $color