dat.gui/elements/controller-boolean/controller-boolean.styl
2014-09-03 14:47:32 -04:00

49 lines
909 B
Stylus

@import '../shared/shared'
height = 0.8em
width = round( height * 2.5 )
border-radius = height
#container
height 100%
cursor pointer
padding-left padding
#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