mirror of
https://github.com/dataarts/dat.gui.git
synced 2024-12-12 04:08:27 +00:00
88 lines
1.5 KiB
Stylus
88 lines
1.5 KiB
Stylus
@import '../shared/shared'
|
|
|
|
track-size = 1px
|
|
fill-size = 1px
|
|
knob-size = 0.6em
|
|
|
|
#container
|
|
height 100%
|
|
|
|
#track-container
|
|
height 100%
|
|
padding 0 padding
|
|
|
|
#track
|
|
width 100%
|
|
height track-size
|
|
border-radius track-size
|
|
display inline-block
|
|
position relative
|
|
background light
|
|
|
|
#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
|
|
|
|
#knob
|
|
|
|
width knob-size
|
|
height knob-size
|
|
|
|
margin-left -( knob-size / 2 )
|
|
margin-top -( knob-size / 2 )
|
|
|
|
transition transform 0.1s ease
|
|
|
|
pointer-events none
|
|
position absolute
|
|
|
|
background-color color-number
|
|
border-radius 100%
|
|
|
|
#track-container
|
|
+hover()
|
|
#knob
|
|
transform scale( 2 )
|
|
|
|
#track-container:active #knob
|
|
transform scale( 1.5 )
|
|
|
|
// .transition #knob
|
|
// transition left 0.2s ease, transform 0.1s ease
|
|
//
|
|
|
|
// .transition #fill
|
|
// transition left 0.2s ease, right 0.2s ease, width 0.2s ease
|
|
//
|
|
|
|
input
|
|
|
|
color color-number
|
|
|
|
&::selection
|
|
background-color light
|
|
|
|
|
|
.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
|
|
|