/* Range
========================================================================== */
.range-field {
position: relative;
}
@extend .no-select; cursor: pointer;
}
input {
position: relative; background-color: transparent; border: none; outline: none; width: 100%; margin: 15px 0; padding: 0; &:focus { outline: none; }
}
input + .thumb {
position: absolute; top: 10px; left: 0; border: none; height: 0; width: 0; border-radius: 50%; background-color: $radio-fill-color; margin-left: 7px; transform-origin: 50% 50%; transform: rotate(-45deg); .value { display: block; width: 30px; text-align: center; color: $radio-fill-color; font-size: 0; transform: rotate(45deg); } &.active { border-radius: 50% 50% 50% 0; .value { color: $input-background; margin-left: -1px; margin-top: 8px; font-size: 10px; } }
}
// Shared @mixin range-track {
height: $track-height; background: #c2c0c2; border: none;
}
@mixin range-thumb {
border: none; height: $range-height; width: $range-width; border-radius: 50%; background: $radio-fill-color; transition: box-shadow .3s;
}
// WebKit input {
-webkit-appearance: none;
}
input::-webkit-slider-runnable-track {
@include range-track;
}
input::-webkit-slider-thumb {
@include range-thumb; -webkit-appearance: none; background-color: $radio-fill-color; transform-origin: 50% 50%; margin: -5px 0 0 0;
}
input.focused:focus:not(.active)::-webkit-slider-thumb {
box-shadow: 0 0 0 10px rgba($radio-fill-color, .26);
}
// FireFox input {
/* fix for FF unable to apply focus style bug */ border: 1px solid white; /*required for proper track sizing in FF*/
}
input::-moz-range-track {
@include range-track;
}
input::-moz-focus-inner {
border: 0;
}
input::-moz-range-thumb {
@include range-thumb; margin-top: -5px;
}
// hide the outline behind the border input:-moz-focusring {
outline: 1px solid #fff; outline-offset: -1px;
}
input.focused:focus:not(.active)::-moz-range-thumb {
box-shadow: 0 0 0 10px rgba($radio-fill-color, .26);
}
// IE 10+ input::-ms-track {
height: $track-height; // remove bg colour from the track, we'll use ms-fill-lower and ms-fill-upper instead background: transparent; // leave room for the larger thumb to overflow with a transparent border */ border-color: transparent; border-width: 6px 0; /*remove default tick marks*/ color: transparent;
}
input::-ms-fill-lower {
background: #777;
}
input::-ms-fill-upper {
background: #ddd;
}
input::-ms-thumb {
@include range-thumb;
}
input.focused:focus:not(.active)::-ms-thumb {
box-shadow: 0 0 0 10px rgba($radio-fill-color, .26);
}