mirror of
https://github.com/dataarts/dat.gui.git
synced 2024-12-12 04:08:27 +00:00
106 lines
1.6 KiB
Stylus
106 lines
1.6 KiB
Stylus
@import 'shared';
|
|
|
|
fill-color = number-color
|
|
track-color = light
|
|
|
|
track-height = 30px
|
|
track-size = 1px;
|
|
fill-size = 1px;
|
|
knob-size = 6px
|
|
|
|
:host {
|
|
display: block;
|
|
font-size: 0;
|
|
height: 100%;
|
|
user-select: none;
|
|
}
|
|
|
|
|
|
#track-container {
|
|
width: 100%;
|
|
height: track-height;
|
|
}
|
|
|
|
#track {
|
|
width: 100%;
|
|
height: track-size;
|
|
border-radius: track-size;
|
|
display: inline-block;
|
|
position: relative;
|
|
background: track-color;
|
|
}
|
|
|
|
#fill {
|
|
height: fill-size;
|
|
margin-top: ( ( track-size - fill-size ) / 2 );
|
|
margin-left: 1px;
|
|
border-radius: fill-size;
|
|
position: absolute;
|
|
background: fill-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: fill-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 {
|
|
|
|
font();
|
|
|
|
height: track-height;
|
|
|
|
margin-left: 5px;
|
|
display: inline-block;
|
|
background: transparent;
|
|
border: 0;
|
|
text-align: center;
|
|
outline: none;
|
|
width: 20%;
|
|
transition: width 0.2s ease;
|
|
|
|
}
|
|
|
|
input:hover {
|
|
width: 28%;
|
|
}
|
|
|
|
input:focus {
|
|
width: 50%;
|
|
}
|
|
|
|
input::selection {
|
|
background-color: light;
|
|
}
|