1.1 --- /dev/null	Thu Jan 01 00:00:00 1970 +0000
     1.2 +++ b/style/mdl/slider/_slider.scss	Sun Jul 15 14:07:29 2018 +0200
     1.3 @@ -0,0 +1,397 @@
     1.4 +/**
     1.5 + * Copyright 2015 Google Inc. All Rights Reserved.
     1.6 + *
     1.7 + * Licensed under the Apache License, Version 2.0 (the "License");
     1.8 + * you may not use this file except in compliance with the License.
     1.9 + * You may obtain a copy of the License at
    1.10 + *
    1.11 + *      http://www.apache.org/licenses/LICENSE-2.0
    1.12 + *
    1.13 + * Unless required by applicable law or agreed to in writing, software
    1.14 + * distributed under the License is distributed on an "AS IS" BASIS,
    1.15 + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
    1.16 + * See the License for the specific language governing permissions and
    1.17 + * limitations under the License.
    1.18 + */
    1.19 +
    1.20 +@import "../variables";
    1.21 +
    1.22 +// Some CSS magic to target only IE.
    1.23 +_:-ms-input-placeholder, :root .mdl-slider.mdl-slider.is-upgraded {
    1.24 +  -ms-appearance: none;
    1.25 +  // The thumb can't overflow the track or the rest of the control in IE, so we
    1.26 +  // need to make it tall enough to contain the largest version of the thumb.
    1.27 +  height: 32px;
    1.28 +  margin: 0;
    1.29 +}
    1.30 +
    1.31 +// Slider component (styled input[type=range]).
    1.32 +.mdl-slider {
    1.33 +  width: calc(100% - 40px);
    1.34 +  margin: 0 20px;
    1.35 +
    1.36 +  &.is-upgraded {
    1.37 +    -webkit-appearance: none;
    1.38 +    -moz-appearance: none;
    1.39 +    appearance: none;
    1.40 +    height: 2px;
    1.41 +    background: transparent;
    1.42 +    -webkit-user-select: none;
    1.43 +    -moz-user-select: none;
    1.44 +    user-select: none;
    1.45 +    outline: 0;
    1.46 +    padding: 0;
    1.47 +    color: $range-color;
    1.48 +    align-self: center;
    1.49 +    z-index: 1;
    1.50 +    cursor: pointer;
    1.51 +
    1.52 +
    1.53 +    // Disable default focus on Firefox.
    1.54 +    &::-moz-focus-outer {
    1.55 +      border: 0;
    1.56 +    }
    1.57 +
    1.58 +    // Disable tooltip on IE.
    1.59 +    &::-ms-tooltip {
    1.60 +      display: none;
    1.61 +    }
    1.62 +
    1.63 +
    1.64 +    /**************************** Tracks ****************************/
    1.65 +    &::-webkit-slider-runnable-track {
    1.66 +      background: transparent;
    1.67 +    }
    1.68 +
    1.69 +    &::-moz-range-track {
    1.70 +      background: transparent;
    1.71 +      border: none;
    1.72 +    }
    1.73 +
    1.74 +    &::-ms-track {
    1.75 +      background: none;
    1.76 +      color: transparent;
    1.77 +      height: 2px;
    1.78 +      width: 100%;
    1.79 +      border: none;
    1.80 +    }
    1.81 +
    1.82 +    &::-ms-fill-lower {
    1.83 +      padding: 0;
    1.84 +      // Margin on -ms-track doesn't work right, so we use gradients on the
    1.85 +      // fills.
    1.86 +      background: linear-gradient(to right,
    1.87 +      transparent,
    1.88 +      transparent 16px,
    1.89 +      $range-color 16px,
    1.90 +      $range-color 0);
    1.91 +    }
    1.92 +
    1.93 +    &::-ms-fill-upper {
    1.94 +      padding: 0;
    1.95 +      // Margin on -ms-track doesn't work right, so we use gradients on the
    1.96 +      // fills.
    1.97 +      background: linear-gradient(to left,
    1.98 +      transparent,
    1.99 +      transparent 16px,
   1.100 +      $range-bg-color 16px,
   1.101 +      $range-bg-color 0);
   1.102 +    }
   1.103 +
   1.104 +
   1.105 +    /**************************** Thumbs ****************************/
   1.106 +    &::-webkit-slider-thumb {
   1.107 +      -webkit-appearance: none;
   1.108 +      width: 12px;
   1.109 +      height: 12px;
   1.110 +      box-sizing: border-box;
   1.111 +      border-radius: 50%;
   1.112 +      background: $range-color;
   1.113 +      border: none;
   1.114 +      transition: transform 0.18s $animation-curve-default,
   1.115 +      border 0.18s $animation-curve-default,
   1.116 +      box-shadow 0.18s $animation-curve-default,
   1.117 +      background 0.28s $animation-curve-default;
   1.118 +    }
   1.119 +
   1.120 +    &::-moz-range-thumb {
   1.121 +      -moz-appearance: none;
   1.122 +      width: 12px;
   1.123 +      height: 12px;
   1.124 +      box-sizing: border-box;
   1.125 +      border-radius: 50%;
   1.126 +      background-image: none;
   1.127 +      background: $range-color;
   1.128 +      border: none;
   1.129 +      // -moz-range-thumb doesn't currently support transitions.
   1.130 +    }
   1.131 +
   1.132 +    &:focus:not(:active)::-webkit-slider-thumb {
   1.133 +      box-shadow: 0 0 0 10px $range-faded-color;
   1.134 +    }
   1.135 +
   1.136 +    &:focus:not(:active)::-moz-range-thumb {
   1.137 +      box-shadow: 0 0 0 10px $range-faded-color;
   1.138 +    }
   1.139 +
   1.140 +    &:active::-webkit-slider-thumb {
   1.141 +      background-image: none;
   1.142 +      background: $range-color;
   1.143 +      transform: scale(1.5);
   1.144 +    }
   1.145 +
   1.146 +    &:active::-moz-range-thumb {
   1.147 +      background-image: none;
   1.148 +      background: $range-color;
   1.149 +      transform: scale(1.5);
   1.150 +    }
   1.151 +
   1.152 +    &::-ms-thumb {
   1.153 +      width: 32px;
   1.154 +      height: 32px;
   1.155 +      border: none;
   1.156 +      border-radius: 50%;
   1.157 +      background: $range-color;
   1.158 +      transform: scale(0.375);
   1.159 +      // -ms-thumb doesn't currently support transitions, but leaving this here
   1.160 +      // in case support ever gets added.
   1.161 +      transition: transform 0.18s $animation-curve-default,
   1.162 +      background 0.28s $animation-curve-default;
   1.163 +    }
   1.164 +
   1.165 +    &:focus:not(:active)::-ms-thumb {
   1.166 +      background: radial-gradient(circle closest-side,
   1.167 +      $range-color 0%,
   1.168 +      $range-color 37.5%,
   1.169 +      $range-faded-color 37.5%,
   1.170 +      $range-faded-color 100%);
   1.171 +      transform: scale(1);
   1.172 +    }
   1.173 +
   1.174 +    &:active::-ms-thumb {
   1.175 +      background: $range-color;
   1.176 +      transform: scale(0.5625);
   1.177 +    }
   1.178 +
   1.179 +
   1.180 +    /**************************** 0-value ****************************/
   1.181 +    &.is-lowest-value::-webkit-slider-thumb {
   1.182 +      border: 2px solid $range-bg-color;
   1.183 +      background: transparent;
   1.184 +    }
   1.185 +
   1.186 +    &.is-lowest-value::-moz-range-thumb {
   1.187 +      border: 2px solid $range-bg-color;
   1.188 +      background: transparent;
   1.189 +    }
   1.190 +
   1.191 +    &.is-lowest-value +
   1.192 +        .mdl-slider__background-flex > .mdl-slider__background-upper {
   1.193 +      left: 6px;
   1.194 +    }
   1.195 +
   1.196 +    &.is-lowest-value:focus:not(:active)::-webkit-slider-thumb {
   1.197 +      box-shadow: 0 0 0 10px $range-bg-focus-color;
   1.198 +      background: $range-bg-focus-color;
   1.199 +    }
   1.200 +
   1.201 +    &.is-lowest-value:focus:not(:active)::-moz-range-thumb {
   1.202 +      box-shadow: 0 0 0 10px $range-bg-focus-color;
   1.203 +      background: $range-bg-focus-color;
   1.204 +    }
   1.205 +
   1.206 +    &.is-lowest-value:active::-webkit-slider-thumb {
   1.207 +      border: 1.6px solid $range-bg-color;
   1.208 +      transform: scale(1.5);
   1.209 +    }
   1.210 +
   1.211 +    &.is-lowest-value:active +
   1.212 +        .mdl-slider__background-flex > .mdl-slider__background-upper {
   1.213 +      left: 9px;
   1.214 +    }
   1.215 +
   1.216 +    &.is-lowest-value:active::-moz-range-thumb {
   1.217 +      border: 1.5px solid $range-bg-color;
   1.218 +      transform: scale(1.5);
   1.219 +    }
   1.220 +
   1.221 +    &.is-lowest-value::-ms-thumb {
   1.222 +      background: radial-gradient(circle closest-side,
   1.223 +      transparent 0%,
   1.224 +      transparent 66.67%,
   1.225 +      $range-bg-color 66.67%,
   1.226 +      $range-bg-color 100%);
   1.227 +    }
   1.228 +
   1.229 +    &.is-lowest-value:focus:not(:active)::-ms-thumb {
   1.230 +      background: radial-gradient(circle closest-side,
   1.231 +      $range-bg-focus-color 0%,
   1.232 +      $range-bg-focus-color 25%,
   1.233 +      $range-bg-color 25%,
   1.234 +      $range-bg-color 37.5%,
   1.235 +      $range-bg-focus-color 37.5%,
   1.236 +      $range-bg-focus-color 100%);
   1.237 +      transform: scale(1);
   1.238 +    }
   1.239 +
   1.240 +    &.is-lowest-value:active::-ms-thumb {
   1.241 +      transform: scale(0.5625);
   1.242 +      background: radial-gradient(circle closest-side,
   1.243 +      transparent 0%,
   1.244 +      transparent 77.78%,
   1.245 +      $range-bg-color 77.78%,
   1.246 +      $range-bg-color 100%);
   1.247 +    }
   1.248 +
   1.249 +    &.is-lowest-value::-ms-fill-lower {
   1.250 +      background: transparent;
   1.251 +    }
   1.252 +
   1.253 +    &.is-lowest-value::-ms-fill-upper {
   1.254 +      margin-left: 6px;
   1.255 +    }
   1.256 +
   1.257 +    &.is-lowest-value:active::-ms-fill-upper {
   1.258 +      margin-left: 9px;
   1.259 +    }
   1.260 +
   1.261 +    /**************************** Disabled ****************************/
   1.262 +
   1.263 +    &:disabled:focus::-webkit-slider-thumb,
   1.264 +    &:disabled:active::-webkit-slider-thumb,
   1.265 +    &:disabled::-webkit-slider-thumb {
   1.266 +      transform: scale(0.667);
   1.267 +      background: $range-bg-color;
   1.268 +    }
   1.269 +
   1.270 +    &:disabled:focus::-moz-range-thumb,
   1.271 +    &:disabled:active::-moz-range-thumb,
   1.272 +    &:disabled::-moz-range-thumb {
   1.273 +      transform: scale(0.667);
   1.274 +      background: $range-bg-color;
   1.275 +    }
   1.276 +
   1.277 +    &:disabled +
   1.278 +        .mdl-slider__background-flex > .mdl-slider__background-lower {
   1.279 +      background-color: $range-bg-color;
   1.280 +      left: -6px;
   1.281 +    }
   1.282 +
   1.283 +    &:disabled +
   1.284 +        .mdl-slider__background-flex > .mdl-slider__background-upper {
   1.285 +      left: 6px;
   1.286 +    }
   1.287 +
   1.288 +    &.is-lowest-value:disabled:focus::-webkit-slider-thumb,
   1.289 +    &.is-lowest-value:disabled:active::-webkit-slider-thumb,
   1.290 +    &.is-lowest-value:disabled::-webkit-slider-thumb {
   1.291 +      border: 3px solid $range-bg-color;
   1.292 +      background: transparent;
   1.293 +      transform: scale(0.667);
   1.294 +    }
   1.295 +
   1.296 +    &.is-lowest-value:disabled:focus::-moz-range-thumb,
   1.297 +    &.is-lowest-value:disabled:active::-moz-range-thumb,
   1.298 +    &.is-lowest-value:disabled::-moz-range-thumb {
   1.299 +      border: 3px solid $range-bg-color;
   1.300 +      background: transparent;
   1.301 +      transform: scale(0.667);
   1.302 +    }
   1.303 +
   1.304 +    &.is-lowest-value:disabled:active +
   1.305 +        .mdl-slider__background-flex > .mdl-slider__background-upper {
   1.306 +      left: 6px;
   1.307 +    }
   1.308 +
   1.309 +    &:disabled:focus::-ms-thumb,
   1.310 +    &:disabled:active::-ms-thumb,
   1.311 +    &:disabled::-ms-thumb {
   1.312 +      transform: scale(0.25);
   1.313 +      background: $range-bg-color;
   1.314 +    }
   1.315 +
   1.316 +    &.is-lowest-value:disabled:focus::-ms-thumb,
   1.317 +    &.is-lowest-value:disabled:active::-ms-thumb,
   1.318 +    &.is-lowest-value:disabled::-ms-thumb {
   1.319 +      transform: scale(0.25);
   1.320 +      background: radial-gradient(circle closest-side,
   1.321 +      transparent 0%,
   1.322 +      transparent 50%,
   1.323 +      $range-bg-color 50%,
   1.324 +      $range-bg-color 100%);
   1.325 +    }
   1.326 +
   1.327 +    &:disabled::-ms-fill-lower {
   1.328 +      margin-right: 6px;
   1.329 +      background: linear-gradient(to right,
   1.330 +      transparent,
   1.331 +      transparent 25px,
   1.332 +      $range-bg-color 25px,
   1.333 +      $range-bg-color 0);
   1.334 +    }
   1.335 +
   1.336 +    &:disabled::-ms-fill-upper {
   1.337 +      margin-left: 6px;
   1.338 +    }
   1.339 +
   1.340 +    &.is-lowest-value:disabled:active::-ms-fill-upper {
   1.341 +      margin-left: 6px;
   1.342 +    }
   1.343 +  }
   1.344 +}
   1.345 +
   1.346 +  // Since we need to specify a height of 32px in IE, we add a class here for a
   1.347 +  // container that brings it back to a reasonable height.
   1.348 +  .mdl-slider__ie-container {
   1.349 +    height: 18px;
   1.350 +    overflow: visible;
   1.351 +    border: none;
   1.352 +    margin: none;
   1.353 +    padding: none;
   1.354 +  }
   1.355 +
   1.356 +  // We use a set of divs behind the track to style it in all non-IE browsers.
   1.357 +  // This one contains both the background and the slider.
   1.358 +  .mdl-slider__container {
   1.359 +    height: 18px;
   1.360 +    position: relative;
   1.361 +    background: none;
   1.362 +    display: flex;
   1.363 +    flex-direction: row;
   1.364 +  }
   1.365 +
   1.366 +  // This one sets up a flex box for the styled upper and lower portions of the
   1.367 +  // the slider track.
   1.368 +  .mdl-slider__background-flex {
   1.369 +    background: transparent;
   1.370 +    position: absolute;
   1.371 +    height: 2px;
   1.372 +    width: calc(100% - 52px);
   1.373 +    top: 50%;
   1.374 +    left: 0;
   1.375 +    margin: 0 26px;
   1.376 +    display: flex;
   1.377 +    overflow: hidden;
   1.378 +    border: 0;
   1.379 +    padding: 0;
   1.380 +    transform: translate(0, -1px);
   1.381 +  }
   1.382 +
   1.383 +  // This one styles the lower part of the slider track.
   1.384 +  .mdl-slider__background-lower {
   1.385 +    background: $range-color;
   1.386 +    flex: 0;
   1.387 +    position: relative;
   1.388 +    border: 0;
   1.389 +    padding: 0;
   1.390 +  }
   1.391 +
   1.392 +  // This one styles the upper part of the slider track.
   1.393 +  .mdl-slider__background-upper {
   1.394 +    background: $range-bg-color;
   1.395 +    flex: 0;
   1.396 +    position: relative;
   1.397 +    border: 0;
   1.398 +    padding: 0;
   1.399 +    transition: left 0.18s $animation-curve-default
   1.400 +  }