spacedeck-open/styles/form-range.scss
2017-04-07 01:29:05 +02:00

64 lines
1.2 KiB
SCSS

@import "vars";
@import "mixins";
.range-wrapper {
@include user-select(none);
display: inline-block;
position: relative;
width: 100%;
height: 26px;
padding-top: 24px;
}
input[type='range'] {
display: inline-block;
-webkit-appearance: none !important;
background-color: rgba(0,0,0,0.05);
height: 2px;
border-radius: $radius*10 !important;
outline: 0;
vertical-align: middle;
width: 100%;
}
input[type='range']::-webkit-slider-thumb {
background-color: $medium;
border-radius: $radius;
-webkit-appearance: none !important;
height:44px;
width:44px;
border-radius: 100%;
background-clip: content-box;
border: 13px solid transparent;
// &:after {
// content: "100%";
// display: block;
// }
&:active{
background-color: $darker !important;
}
}
.output-wrapper {
position: absolute;
top: 0px;
left: 0px;
right: 60px;
width: auto;
}
output {
font-size: 11px;
line-height: 1;
background-clip: padding-box;
color: #999;
font-family: Avenir;
position: absolute;
display: inline-block;
top: 0;
right: 0;
pointer-events: none;
vertical-align: middle;
letter-spacing: 0.1em;
}