2014-09-03 18:47:32 +00:00
|
|
|
@import '../shared/shared'
|
|
|
|
|
|
|
|
|
|
height = 0.8em
|
|
|
|
|
width = round( height * 2.5 )
|
|
|
|
|
border-radius = height
|
|
|
|
|
|
|
|
|
|
#container
|
|
|
|
|
height 100%
|
|
|
|
|
cursor pointer
|
|
|
|
|
|
|
|
|
|
#switch-track
|
|
|
|
|
width width
|
|
|
|
|
height height
|
|
|
|
|
background light
|
|
|
|
|
border-radius 999px
|
|
|
|
|
transition background 0.1s linear
|
|
|
|
|
|
|
|
|
|
#switch-knob
|
|
|
|
|
height height
|
|
|
|
|
width height
|
|
|
|
|
border-radius 100%
|
|
|
|
|
background color-font
|
|
|
|
|
transition transform 0.15s ease
|
|
|
|
|
|
|
|
|
|
.value-true
|
|
|
|
|
#switch-track
|
|
|
|
|
background color-boolean
|
|
|
|
|
#switch-knob
|
|
|
|
|
transform translate3d( width - height, 0, 0 )
|
|
|
|
|
|
|
|
|
|
.value-false
|
|
|
|
|
+hover()
|
|
|
|
|
#switch-knob
|
|
|
|
|
transform scale( 1.5 )
|
|
|
|
|
|
|
|
|
|
.value-true
|
|
|
|
|
+hover()
|
|
|
|
|
#switch-knob
|
|
|
|
|
transform translate3d( width - height, 0, 0 ) scale( 1.5 )
|
|
|
|
|
|
|
|
|
|
#text
|
|
|
|
|
margin-left padding
|
|
|
|
|
.value-true &
|
|
|
|
|
// color color-boolean
|
|
|
|
|
.value-false &
|
|
|
|
|
color light
|
|
|
|
|
|
