bsw/jbe@1309: /**
bsw/jbe@1309:  * Copyright 2015 Google Inc. All Rights Reserved.
bsw/jbe@1309:  *
bsw/jbe@1309:  * Licensed under the Apache License, Version 2.0 (the "License");
bsw/jbe@1309:  * you may not use this file except in compliance with the License.
bsw/jbe@1309:  * You may obtain a copy of the License at
bsw/jbe@1309:  *
bsw/jbe@1309:  *      http://www.apache.org/licenses/LICENSE-2.0
bsw/jbe@1309:  *
bsw/jbe@1309:  * Unless required by applicable law or agreed to in writing, software
bsw/jbe@1309:  * distributed under the License is distributed on an "AS IS" BASIS,
bsw/jbe@1309:  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
bsw/jbe@1309:  * See the License for the specific language governing permissions and
bsw/jbe@1309:  * limitations under the License.
bsw/jbe@1309:  */
bsw/jbe@1309: 
bsw/jbe@1309: @import "../variables";
bsw/jbe@1309: 
bsw/jbe@1309: // Some CSS magic to target only IE.
bsw/jbe@1309: _:-ms-input-placeholder, :root .mdl-slider.mdl-slider.is-upgraded {
bsw/jbe@1309:   -ms-appearance: none;
bsw/jbe@1309:   // The thumb can't overflow the track or the rest of the control in IE, so we
bsw/jbe@1309:   // need to make it tall enough to contain the largest version of the thumb.
bsw/jbe@1309:   height: 32px;
bsw/jbe@1309:   margin: 0;
bsw/jbe@1309: }
bsw/jbe@1309: 
bsw/jbe@1309: // Slider component (styled input[type=range]).
bsw/jbe@1309: .mdl-slider {
bsw/jbe@1309:   width: calc(100% - 40px);
bsw/jbe@1309:   margin: 0 20px;
bsw/jbe@1309: 
bsw/jbe@1309:   &.is-upgraded {
bsw/jbe@1309:     -webkit-appearance: none;
bsw/jbe@1309:     -moz-appearance: none;
bsw/jbe@1309:     appearance: none;
bsw/jbe@1309:     height: 2px;
bsw/jbe@1309:     background: transparent;
bsw/jbe@1309:     -webkit-user-select: none;
bsw/jbe@1309:     -moz-user-select: none;
bsw/jbe@1309:     user-select: none;
bsw/jbe@1309:     outline: 0;
bsw/jbe@1309:     padding: 0;
bsw/jbe@1309:     color: $range-color;
bsw/jbe@1309:     align-self: center;
bsw/jbe@1309:     z-index: 1;
bsw/jbe@1309:     cursor: pointer;
bsw/jbe@1309: 
bsw/jbe@1309: 
bsw/jbe@1309:     // Disable default focus on Firefox.
bsw/jbe@1309:     &::-moz-focus-outer {
bsw/jbe@1309:       border: 0;
bsw/jbe@1309:     }
bsw/jbe@1309: 
bsw/jbe@1309:     // Disable tooltip on IE.
bsw/jbe@1309:     &::-ms-tooltip {
bsw/jbe@1309:       display: none;
bsw/jbe@1309:     }
bsw/jbe@1309: 
bsw/jbe@1309: 
bsw/jbe@1309:     /**************************** Tracks ****************************/
bsw/jbe@1309:     &::-webkit-slider-runnable-track {
bsw/jbe@1309:       background: transparent;
bsw/jbe@1309:     }
bsw/jbe@1309: 
bsw/jbe@1309:     &::-moz-range-track {
bsw/jbe@1309:       background: transparent;
bsw/jbe@1309:       border: none;
bsw/jbe@1309:     }
bsw/jbe@1309: 
bsw/jbe@1309:     &::-ms-track {
bsw/jbe@1309:       background: none;
bsw/jbe@1309:       color: transparent;
bsw/jbe@1309:       height: 2px;
bsw/jbe@1309:       width: 100%;
bsw/jbe@1309:       border: none;
bsw/jbe@1309:     }
bsw/jbe@1309: 
bsw/jbe@1309:     &::-ms-fill-lower {
bsw/jbe@1309:       padding: 0;
bsw/jbe@1309:       // Margin on -ms-track doesn't work right, so we use gradients on the
bsw/jbe@1309:       // fills.
bsw/jbe@1309:       background: linear-gradient(to right,
bsw/jbe@1309:       transparent,
bsw/jbe@1309:       transparent 16px,
bsw/jbe@1309:       $range-color 16px,
bsw/jbe@1309:       $range-color 0);
bsw/jbe@1309:     }
bsw/jbe@1309: 
bsw/jbe@1309:     &::-ms-fill-upper {
bsw/jbe@1309:       padding: 0;
bsw/jbe@1309:       // Margin on -ms-track doesn't work right, so we use gradients on the
bsw/jbe@1309:       // fills.
bsw/jbe@1309:       background: linear-gradient(to left,
bsw/jbe@1309:       transparent,
bsw/jbe@1309:       transparent 16px,
bsw/jbe@1309:       $range-bg-color 16px,
bsw/jbe@1309:       $range-bg-color 0);
bsw/jbe@1309:     }
bsw/jbe@1309: 
bsw/jbe@1309: 
bsw/jbe@1309:     /**************************** Thumbs ****************************/
bsw/jbe@1309:     &::-webkit-slider-thumb {
bsw/jbe@1309:       -webkit-appearance: none;
bsw/jbe@1309:       width: 12px;
bsw/jbe@1309:       height: 12px;
bsw/jbe@1309:       box-sizing: border-box;
bsw/jbe@1309:       border-radius: 50%;
bsw/jbe@1309:       background: $range-color;
bsw/jbe@1309:       border: none;
bsw/jbe@1309:       transition: transform 0.18s $animation-curve-default,
bsw/jbe@1309:       border 0.18s $animation-curve-default,
bsw/jbe@1309:       box-shadow 0.18s $animation-curve-default,
bsw/jbe@1309:       background 0.28s $animation-curve-default;
bsw/jbe@1309:     }
bsw/jbe@1309: 
bsw/jbe@1309:     &::-moz-range-thumb {
bsw/jbe@1309:       -moz-appearance: none;
bsw/jbe@1309:       width: 12px;
bsw/jbe@1309:       height: 12px;
bsw/jbe@1309:       box-sizing: border-box;
bsw/jbe@1309:       border-radius: 50%;
bsw/jbe@1309:       background-image: none;
bsw/jbe@1309:       background: $range-color;
bsw/jbe@1309:       border: none;
bsw/jbe@1309:       // -moz-range-thumb doesn't currently support transitions.
bsw/jbe@1309:     }
bsw/jbe@1309: 
bsw/jbe@1309:     &:focus:not(:active)::-webkit-slider-thumb {
bsw/jbe@1309:       box-shadow: 0 0 0 10px $range-faded-color;
bsw/jbe@1309:     }
bsw/jbe@1309: 
bsw/jbe@1309:     &:focus:not(:active)::-moz-range-thumb {
bsw/jbe@1309:       box-shadow: 0 0 0 10px $range-faded-color;
bsw/jbe@1309:     }
bsw/jbe@1309: 
bsw/jbe@1309:     &:active::-webkit-slider-thumb {
bsw/jbe@1309:       background-image: none;
bsw/jbe@1309:       background: $range-color;
bsw/jbe@1309:       transform: scale(1.5);
bsw/jbe@1309:     }
bsw/jbe@1309: 
bsw/jbe@1309:     &:active::-moz-range-thumb {
bsw/jbe@1309:       background-image: none;
bsw/jbe@1309:       background: $range-color;
bsw/jbe@1309:       transform: scale(1.5);
bsw/jbe@1309:     }
bsw/jbe@1309: 
bsw/jbe@1309:     &::-ms-thumb {
bsw/jbe@1309:       width: 32px;
bsw/jbe@1309:       height: 32px;
bsw/jbe@1309:       border: none;
bsw/jbe@1309:       border-radius: 50%;
bsw/jbe@1309:       background: $range-color;
bsw/jbe@1309:       transform: scale(0.375);
bsw/jbe@1309:       // -ms-thumb doesn't currently support transitions, but leaving this here
bsw/jbe@1309:       // in case support ever gets added.
bsw/jbe@1309:       transition: transform 0.18s $animation-curve-default,
bsw/jbe@1309:       background 0.28s $animation-curve-default;
bsw/jbe@1309:     }
bsw/jbe@1309: 
bsw/jbe@1309:     &:focus:not(:active)::-ms-thumb {
bsw/jbe@1309:       background: radial-gradient(circle closest-side,
bsw/jbe@1309:       $range-color 0%,
bsw/jbe@1309:       $range-color 37.5%,
bsw/jbe@1309:       $range-faded-color 37.5%,
bsw/jbe@1309:       $range-faded-color 100%);
bsw/jbe@1309:       transform: scale(1);
bsw/jbe@1309:     }
bsw/jbe@1309: 
bsw/jbe@1309:     &:active::-ms-thumb {
bsw/jbe@1309:       background: $range-color;
bsw/jbe@1309:       transform: scale(0.5625);
bsw/jbe@1309:     }
bsw/jbe@1309: 
bsw/jbe@1309: 
bsw/jbe@1309:     /**************************** 0-value ****************************/
bsw/jbe@1309:     &.is-lowest-value::-webkit-slider-thumb {
bsw/jbe@1309:       border: 2px solid $range-bg-color;
bsw/jbe@1309:       background: transparent;
bsw/jbe@1309:     }
bsw/jbe@1309: 
bsw/jbe@1309:     &.is-lowest-value::-moz-range-thumb {
bsw/jbe@1309:       border: 2px solid $range-bg-color;
bsw/jbe@1309:       background: transparent;
bsw/jbe@1309:     }
bsw/jbe@1309: 
bsw/jbe@1309:     &.is-lowest-value +
bsw/jbe@1309:         .mdl-slider__background-flex > .mdl-slider__background-upper {
bsw/jbe@1309:       left: 6px;
bsw/jbe@1309:     }
bsw/jbe@1309: 
bsw/jbe@1309:     &.is-lowest-value:focus:not(:active)::-webkit-slider-thumb {
bsw/jbe@1309:       box-shadow: 0 0 0 10px $range-bg-focus-color;
bsw/jbe@1309:       background: $range-bg-focus-color;
bsw/jbe@1309:     }
bsw/jbe@1309: 
bsw/jbe@1309:     &.is-lowest-value:focus:not(:active)::-moz-range-thumb {
bsw/jbe@1309:       box-shadow: 0 0 0 10px $range-bg-focus-color;
bsw/jbe@1309:       background: $range-bg-focus-color;
bsw/jbe@1309:     }
bsw/jbe@1309: 
bsw/jbe@1309:     &.is-lowest-value:active::-webkit-slider-thumb {
bsw/jbe@1309:       border: 1.6px solid $range-bg-color;
bsw/jbe@1309:       transform: scale(1.5);
bsw/jbe@1309:     }
bsw/jbe@1309: 
bsw/jbe@1309:     &.is-lowest-value:active +
bsw/jbe@1309:         .mdl-slider__background-flex > .mdl-slider__background-upper {
bsw/jbe@1309:       left: 9px;
bsw/jbe@1309:     }
bsw/jbe@1309: 
bsw/jbe@1309:     &.is-lowest-value:active::-moz-range-thumb {
bsw/jbe@1309:       border: 1.5px solid $range-bg-color;
bsw/jbe@1309:       transform: scale(1.5);
bsw/jbe@1309:     }
bsw/jbe@1309: 
bsw/jbe@1309:     &.is-lowest-value::-ms-thumb {
bsw/jbe@1309:       background: radial-gradient(circle closest-side,
bsw/jbe@1309:       transparent 0%,
bsw/jbe@1309:       transparent 66.67%,
bsw/jbe@1309:       $range-bg-color 66.67%,
bsw/jbe@1309:       $range-bg-color 100%);
bsw/jbe@1309:     }
bsw/jbe@1309: 
bsw/jbe@1309:     &.is-lowest-value:focus:not(:active)::-ms-thumb {
bsw/jbe@1309:       background: radial-gradient(circle closest-side,
bsw/jbe@1309:       $range-bg-focus-color 0%,
bsw/jbe@1309:       $range-bg-focus-color 25%,
bsw/jbe@1309:       $range-bg-color 25%,
bsw/jbe@1309:       $range-bg-color 37.5%,
bsw/jbe@1309:       $range-bg-focus-color 37.5%,
bsw/jbe@1309:       $range-bg-focus-color 100%);
bsw/jbe@1309:       transform: scale(1);
bsw/jbe@1309:     }
bsw/jbe@1309: 
bsw/jbe@1309:     &.is-lowest-value:active::-ms-thumb {
bsw/jbe@1309:       transform: scale(0.5625);
bsw/jbe@1309:       background: radial-gradient(circle closest-side,
bsw/jbe@1309:       transparent 0%,
bsw/jbe@1309:       transparent 77.78%,
bsw/jbe@1309:       $range-bg-color 77.78%,
bsw/jbe@1309:       $range-bg-color 100%);
bsw/jbe@1309:     }
bsw/jbe@1309: 
bsw/jbe@1309:     &.is-lowest-value::-ms-fill-lower {
bsw/jbe@1309:       background: transparent;
bsw/jbe@1309:     }
bsw/jbe@1309: 
bsw/jbe@1309:     &.is-lowest-value::-ms-fill-upper {
bsw/jbe@1309:       margin-left: 6px;
bsw/jbe@1309:     }
bsw/jbe@1309: 
bsw/jbe@1309:     &.is-lowest-value:active::-ms-fill-upper {
bsw/jbe@1309:       margin-left: 9px;
bsw/jbe@1309:     }
bsw/jbe@1309: 
bsw/jbe@1309:     /**************************** Disabled ****************************/
bsw/jbe@1309: 
bsw/jbe@1309:     &:disabled:focus::-webkit-slider-thumb,
bsw/jbe@1309:     &:disabled:active::-webkit-slider-thumb,
bsw/jbe@1309:     &:disabled::-webkit-slider-thumb {
bsw/jbe@1309:       transform: scale(0.667);
bsw/jbe@1309:       background: $range-bg-color;
bsw/jbe@1309:     }
bsw/jbe@1309: 
bsw/jbe@1309:     &:disabled:focus::-moz-range-thumb,
bsw/jbe@1309:     &:disabled:active::-moz-range-thumb,
bsw/jbe@1309:     &:disabled::-moz-range-thumb {
bsw/jbe@1309:       transform: scale(0.667);
bsw/jbe@1309:       background: $range-bg-color;
bsw/jbe@1309:     }
bsw/jbe@1309: 
bsw/jbe@1309:     &:disabled +
bsw/jbe@1309:         .mdl-slider__background-flex > .mdl-slider__background-lower {
bsw/jbe@1309:       background-color: $range-bg-color;
bsw/jbe@1309:       left: -6px;
bsw/jbe@1309:     }
bsw/jbe@1309: 
bsw/jbe@1309:     &:disabled +
bsw/jbe@1309:         .mdl-slider__background-flex > .mdl-slider__background-upper {
bsw/jbe@1309:       left: 6px;
bsw/jbe@1309:     }
bsw/jbe@1309: 
bsw/jbe@1309:     &.is-lowest-value:disabled:focus::-webkit-slider-thumb,
bsw/jbe@1309:     &.is-lowest-value:disabled:active::-webkit-slider-thumb,
bsw/jbe@1309:     &.is-lowest-value:disabled::-webkit-slider-thumb {
bsw/jbe@1309:       border: 3px solid $range-bg-color;
bsw/jbe@1309:       background: transparent;
bsw/jbe@1309:       transform: scale(0.667);
bsw/jbe@1309:     }
bsw/jbe@1309: 
bsw/jbe@1309:     &.is-lowest-value:disabled:focus::-moz-range-thumb,
bsw/jbe@1309:     &.is-lowest-value:disabled:active::-moz-range-thumb,
bsw/jbe@1309:     &.is-lowest-value:disabled::-moz-range-thumb {
bsw/jbe@1309:       border: 3px solid $range-bg-color;
bsw/jbe@1309:       background: transparent;
bsw/jbe@1309:       transform: scale(0.667);
bsw/jbe@1309:     }
bsw/jbe@1309: 
bsw/jbe@1309:     &.is-lowest-value:disabled:active +
bsw/jbe@1309:         .mdl-slider__background-flex > .mdl-slider__background-upper {
bsw/jbe@1309:       left: 6px;
bsw/jbe@1309:     }
bsw/jbe@1309: 
bsw/jbe@1309:     &:disabled:focus::-ms-thumb,
bsw/jbe@1309:     &:disabled:active::-ms-thumb,
bsw/jbe@1309:     &:disabled::-ms-thumb {
bsw/jbe@1309:       transform: scale(0.25);
bsw/jbe@1309:       background: $range-bg-color;
bsw/jbe@1309:     }
bsw/jbe@1309: 
bsw/jbe@1309:     &.is-lowest-value:disabled:focus::-ms-thumb,
bsw/jbe@1309:     &.is-lowest-value:disabled:active::-ms-thumb,
bsw/jbe@1309:     &.is-lowest-value:disabled::-ms-thumb {
bsw/jbe@1309:       transform: scale(0.25);
bsw/jbe@1309:       background: radial-gradient(circle closest-side,
bsw/jbe@1309:       transparent 0%,
bsw/jbe@1309:       transparent 50%,
bsw/jbe@1309:       $range-bg-color 50%,
bsw/jbe@1309:       $range-bg-color 100%);
bsw/jbe@1309:     }
bsw/jbe@1309: 
bsw/jbe@1309:     &:disabled::-ms-fill-lower {
bsw/jbe@1309:       margin-right: 6px;
bsw/jbe@1309:       background: linear-gradient(to right,
bsw/jbe@1309:       transparent,
bsw/jbe@1309:       transparent 25px,
bsw/jbe@1309:       $range-bg-color 25px,
bsw/jbe@1309:       $range-bg-color 0);
bsw/jbe@1309:     }
bsw/jbe@1309: 
bsw/jbe@1309:     &:disabled::-ms-fill-upper {
bsw/jbe@1309:       margin-left: 6px;
bsw/jbe@1309:     }
bsw/jbe@1309: 
bsw/jbe@1309:     &.is-lowest-value:disabled:active::-ms-fill-upper {
bsw/jbe@1309:       margin-left: 6px;
bsw/jbe@1309:     }
bsw/jbe@1309:   }
bsw/jbe@1309: }
bsw/jbe@1309: 
bsw/jbe@1309:   // Since we need to specify a height of 32px in IE, we add a class here for a
bsw/jbe@1309:   // container that brings it back to a reasonable height.
bsw/jbe@1309:   .mdl-slider__ie-container {
bsw/jbe@1309:     height: 18px;
bsw/jbe@1309:     overflow: visible;
bsw/jbe@1309:     border: none;
bsw/jbe@1309:     margin: none;
bsw/jbe@1309:     padding: none;
bsw/jbe@1309:   }
bsw/jbe@1309: 
bsw/jbe@1309:   // We use a set of divs behind the track to style it in all non-IE browsers.
bsw/jbe@1309:   // This one contains both the background and the slider.
bsw/jbe@1309:   .mdl-slider__container {
bsw/jbe@1309:     height: 18px;
bsw/jbe@1309:     position: relative;
bsw/jbe@1309:     background: none;
bsw/jbe@1309:     display: flex;
bsw/jbe@1309:     flex-direction: row;
bsw/jbe@1309:   }
bsw/jbe@1309: 
bsw/jbe@1309:   // This one sets up a flex box for the styled upper and lower portions of the
bsw/jbe@1309:   // the slider track.
bsw/jbe@1309:   .mdl-slider__background-flex {
bsw/jbe@1309:     background: transparent;
bsw/jbe@1309:     position: absolute;
bsw/jbe@1309:     height: 2px;
bsw/jbe@1309:     width: calc(100% - 52px);
bsw/jbe@1309:     top: 50%;
bsw/jbe@1309:     left: 0;
bsw/jbe@1309:     margin: 0 26px;
bsw/jbe@1309:     display: flex;
bsw/jbe@1309:     overflow: hidden;
bsw/jbe@1309:     border: 0;
bsw/jbe@1309:     padding: 0;
bsw/jbe@1309:     transform: translate(0, -1px);
bsw/jbe@1309:   }
bsw/jbe@1309: 
bsw/jbe@1309:   // This one styles the lower part of the slider track.
bsw/jbe@1309:   .mdl-slider__background-lower {
bsw/jbe@1309:     background: $range-color;
bsw/jbe@1309:     flex: 0;
bsw/jbe@1309:     position: relative;
bsw/jbe@1309:     border: 0;
bsw/jbe@1309:     padding: 0;
bsw/jbe@1309:   }
bsw/jbe@1309: 
bsw/jbe@1309:   // This one styles the upper part of the slider track.
bsw/jbe@1309:   .mdl-slider__background-upper {
bsw/jbe@1309:     background: $range-bg-color;
bsw/jbe@1309:     flex: 0;
bsw/jbe@1309:     position: relative;
bsw/jbe@1309:     border: 0;
bsw/jbe@1309:     padding: 0;
bsw/jbe@1309:     transition: left 0.18s $animation-curve-default
bsw/jbe@1309:   }