mirror of
https://github.com/dataarts/dat.gui.git
synced 2024-12-12 04:08:27 +00:00
104 lines
1.6 KiB
Stylus
104 lines
1.6 KiB
Stylus
@import '../shared';
|
|
|
|
track-size = 1px;
|
|
fill-size = 1px;
|
|
knob-size = 6px
|
|
|
|
#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: fill-size;
|
|
position: absolute;
|
|
background: number-color;
|
|
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: number-color;
|
|
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 {
|
|
|
|
input( number-color );
|
|
|
|
.slider-true & {
|
|
|
|
text-align: center;
|
|
width: 25%;
|
|
transition: width 0.2s ease;
|
|
padding: 0;
|
|
|
|
|
|
&:hover {
|
|
width: 33%;
|
|
}
|
|
|
|
&:focus {
|
|
width: 50%;
|
|
}
|
|
|
|
}
|
|
|
|
|
|
.slider-false & {
|
|
// border-bottom: 1px solid number-color;
|
|
padding-left: padding
|
|
width: 100%;
|
|
}
|
|
|
|
}
|
|
|
|
input::selection {
|
|
background-color: light;
|
|
}
|