dat.gui/elements/dat-gui-number/dat-gui-number.styl

88 lines
1.5 KiB
Stylus
Raw Normal View History

2014-09-03 18:47:32 +00:00
@import '../shared/shared'
2014-08-27 00:01:15 +00:00
2014-09-03 18:47:32 +00:00
track-size = 1px
fill-size = 1px
knob-size = 0.6em
2014-08-27 00:01:15 +00:00
2014-09-03 18:47:32 +00:00
#container
height 100%
2014-08-27 00:01:15 +00:00
2014-09-03 18:47:32 +00:00
#track-container
height 100%
padding 0 padding
2014-08-27 00:01:15 +00:00
2014-09-03 18:47:32 +00:00
#track
width 100%
height track-size
border-radius track-size
display inline-block
position relative
background light
2014-08-27 00:01:15 +00:00
2014-09-03 18:47:32 +00:00
#fill
height fill-size
margin-top ( ( track-size - fill-size ) / 2 )
margin-left 1px
border-radius 100%
position absolute
background color-number
pointer-events none
2014-08-27 00:01:15 +00:00
2014-09-03 18:47:32 +00:00
#knob
2014-08-27 00:01:15 +00:00
2014-09-03 18:47:32 +00:00
width knob-size
height knob-size
2014-08-27 00:01:15 +00:00
2014-09-03 18:47:32 +00:00
margin-left -( knob-size / 2 )
margin-top -( knob-size / 2 )
2014-08-27 00:01:15 +00:00
2014-09-03 18:47:32 +00:00
transition transform 0.1s ease
2014-08-27 00:01:15 +00:00
2014-09-03 18:47:32 +00:00
pointer-events none
position absolute
2014-08-27 00:01:15 +00:00
2014-09-03 18:47:32 +00:00
background-color color-number
border-radius 100%
2014-08-27 00:01:15 +00:00
2014-09-03 18:47:32 +00:00
#track-container
+hover()
#knob
transform scale( 2 )
2014-08-27 00:01:15 +00:00
2014-09-03 18:47:32 +00:00
#track-container:active #knob
transform scale( 1.5 )
2014-08-27 00:01:15 +00:00
2014-09-03 18:47:32 +00:00
// .transition #knob
// transition left 0.2s ease, transform 0.1s ease
//
2014-08-27 00:01:15 +00:00
2014-09-03 18:47:32 +00:00
// .transition #fill
// transition left 0.2s ease, right 0.2s ease, width 0.2s ease
//
2014-08-27 00:01:15 +00:00
2014-09-03 18:47:32 +00:00
input
2014-08-27 00:01:15 +00:00
2014-09-03 18:47:32 +00:00
color color-number
2014-08-27 00:01:15 +00:00
2014-09-03 18:47:32 +00:00
&::selection
background-color light
2014-08-27 00:01:15 +00:00
2014-09-03 18:47:32 +00:00
.slider-true &
text-align center
width 26%
transition width 0.2s ease
padding 0
+hover()
width 35%
&:focus
width 50%
.slider-false &
// border-bottom 1px solid color-number
padding-left padding