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