liquid_feedback_frontend

annotate style/mdl/slider/_slider.scss @ 1380:276718aedd90

find changesets by author, revision, files, or words in the commit message
Show label for drop down boxes
author bsw
date Wed Aug 08 17:38:23 2018 +0200 (2018-08-08)
parents 32cc544d5a5b
children
rev   line source
bsw/jbe@1309 1 /**
bsw/jbe@1309 2 * Copyright 2015 Google Inc. All Rights Reserved.
bsw/jbe@1309 3 *
bsw/jbe@1309 4 * Licensed under the Apache License, Version 2.0 (the "License");
bsw/jbe@1309 5 * you may not use this file except in compliance with the License.
bsw/jbe@1309 6 * You may obtain a copy of the License at
bsw/jbe@1309 7 *
bsw/jbe@1309 8 * http://www.apache.org/licenses/LICENSE-2.0
bsw/jbe@1309 9 *
bsw/jbe@1309 10 * Unless required by applicable law or agreed to in writing, software
bsw/jbe@1309 11 * distributed under the License is distributed on an "AS IS" BASIS,
bsw/jbe@1309 12 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
bsw/jbe@1309 13 * See the License for the specific language governing permissions and
bsw/jbe@1309 14 * limitations under the License.
bsw/jbe@1309 15 */
bsw/jbe@1309 16
bsw/jbe@1309 17 @import "../variables";
bsw/jbe@1309 18
bsw/jbe@1309 19 // Some CSS magic to target only IE.
bsw/jbe@1309 20 _:-ms-input-placeholder, :root .mdl-slider.mdl-slider.is-upgraded {
bsw/jbe@1309 21 -ms-appearance: none;
bsw/jbe@1309 22 // The thumb can't overflow the track or the rest of the control in IE, so we
bsw/jbe@1309 23 // need to make it tall enough to contain the largest version of the thumb.
bsw/jbe@1309 24 height: 32px;
bsw/jbe@1309 25 margin: 0;
bsw/jbe@1309 26 }
bsw/jbe@1309 27
bsw/jbe@1309 28 // Slider component (styled input[type=range]).
bsw/jbe@1309 29 .mdl-slider {
bsw/jbe@1309 30 width: calc(100% - 40px);
bsw/jbe@1309 31 margin: 0 20px;
bsw/jbe@1309 32
bsw/jbe@1309 33 &.is-upgraded {
bsw/jbe@1309 34 -webkit-appearance: none;
bsw/jbe@1309 35 -moz-appearance: none;
bsw/jbe@1309 36 appearance: none;
bsw/jbe@1309 37 height: 2px;
bsw/jbe@1309 38 background: transparent;
bsw/jbe@1309 39 -webkit-user-select: none;
bsw/jbe@1309 40 -moz-user-select: none;
bsw/jbe@1309 41 user-select: none;
bsw/jbe@1309 42 outline: 0;
bsw/jbe@1309 43 padding: 0;
bsw/jbe@1309 44 color: $range-color;
bsw/jbe@1309 45 align-self: center;
bsw/jbe@1309 46 z-index: 1;
bsw/jbe@1309 47 cursor: pointer;
bsw/jbe@1309 48
bsw/jbe@1309 49
bsw/jbe@1309 50 // Disable default focus on Firefox.
bsw/jbe@1309 51 &::-moz-focus-outer {
bsw/jbe@1309 52 border: 0;
bsw/jbe@1309 53 }
bsw/jbe@1309 54
bsw/jbe@1309 55 // Disable tooltip on IE.
bsw/jbe@1309 56 &::-ms-tooltip {
bsw/jbe@1309 57 display: none;
bsw/jbe@1309 58 }
bsw/jbe@1309 59
bsw/jbe@1309 60
bsw/jbe@1309 61 /**************************** Tracks ****************************/
bsw/jbe@1309 62 &::-webkit-slider-runnable-track {
bsw/jbe@1309 63 background: transparent;
bsw/jbe@1309 64 }
bsw/jbe@1309 65
bsw/jbe@1309 66 &::-moz-range-track {
bsw/jbe@1309 67 background: transparent;
bsw/jbe@1309 68 border: none;
bsw/jbe@1309 69 }
bsw/jbe@1309 70
bsw/jbe@1309 71 &::-ms-track {
bsw/jbe@1309 72 background: none;
bsw/jbe@1309 73 color: transparent;
bsw/jbe@1309 74 height: 2px;
bsw/jbe@1309 75 width: 100%;
bsw/jbe@1309 76 border: none;
bsw/jbe@1309 77 }
bsw/jbe@1309 78
bsw/jbe@1309 79 &::-ms-fill-lower {
bsw/jbe@1309 80 padding: 0;
bsw/jbe@1309 81 // Margin on -ms-track doesn't work right, so we use gradients on the
bsw/jbe@1309 82 // fills.
bsw/jbe@1309 83 background: linear-gradient(to right,
bsw/jbe@1309 84 transparent,
bsw/jbe@1309 85 transparent 16px,
bsw/jbe@1309 86 $range-color 16px,
bsw/jbe@1309 87 $range-color 0);
bsw/jbe@1309 88 }
bsw/jbe@1309 89
bsw/jbe@1309 90 &::-ms-fill-upper {
bsw/jbe@1309 91 padding: 0;
bsw/jbe@1309 92 // Margin on -ms-track doesn't work right, so we use gradients on the
bsw/jbe@1309 93 // fills.
bsw/jbe@1309 94 background: linear-gradient(to left,
bsw/jbe@1309 95 transparent,
bsw/jbe@1309 96 transparent 16px,
bsw/jbe@1309 97 $range-bg-color 16px,
bsw/jbe@1309 98 $range-bg-color 0);
bsw/jbe@1309 99 }
bsw/jbe@1309 100
bsw/jbe@1309 101
bsw/jbe@1309 102 /**************************** Thumbs ****************************/
bsw/jbe@1309 103 &::-webkit-slider-thumb {
bsw/jbe@1309 104 -webkit-appearance: none;
bsw/jbe@1309 105 width: 12px;
bsw/jbe@1309 106 height: 12px;
bsw/jbe@1309 107 box-sizing: border-box;
bsw/jbe@1309 108 border-radius: 50%;
bsw/jbe@1309 109 background: $range-color;
bsw/jbe@1309 110 border: none;
bsw/jbe@1309 111 transition: transform 0.18s $animation-curve-default,
bsw/jbe@1309 112 border 0.18s $animation-curve-default,
bsw/jbe@1309 113 box-shadow 0.18s $animation-curve-default,
bsw/jbe@1309 114 background 0.28s $animation-curve-default;
bsw/jbe@1309 115 }
bsw/jbe@1309 116
bsw/jbe@1309 117 &::-moz-range-thumb {
bsw/jbe@1309 118 -moz-appearance: none;
bsw/jbe@1309 119 width: 12px;
bsw/jbe@1309 120 height: 12px;
bsw/jbe@1309 121 box-sizing: border-box;
bsw/jbe@1309 122 border-radius: 50%;
bsw/jbe@1309 123 background-image: none;
bsw/jbe@1309 124 background: $range-color;
bsw/jbe@1309 125 border: none;
bsw/jbe@1309 126 // -moz-range-thumb doesn't currently support transitions.
bsw/jbe@1309 127 }
bsw/jbe@1309 128
bsw/jbe@1309 129 &:focus:not(:active)::-webkit-slider-thumb {
bsw/jbe@1309 130 box-shadow: 0 0 0 10px $range-faded-color;
bsw/jbe@1309 131 }
bsw/jbe@1309 132
bsw/jbe@1309 133 &:focus:not(:active)::-moz-range-thumb {
bsw/jbe@1309 134 box-shadow: 0 0 0 10px $range-faded-color;
bsw/jbe@1309 135 }
bsw/jbe@1309 136
bsw/jbe@1309 137 &:active::-webkit-slider-thumb {
bsw/jbe@1309 138 background-image: none;
bsw/jbe@1309 139 background: $range-color;
bsw/jbe@1309 140 transform: scale(1.5);
bsw/jbe@1309 141 }
bsw/jbe@1309 142
bsw/jbe@1309 143 &:active::-moz-range-thumb {
bsw/jbe@1309 144 background-image: none;
bsw/jbe@1309 145 background: $range-color;
bsw/jbe@1309 146 transform: scale(1.5);
bsw/jbe@1309 147 }
bsw/jbe@1309 148
bsw/jbe@1309 149 &::-ms-thumb {
bsw/jbe@1309 150 width: 32px;
bsw/jbe@1309 151 height: 32px;
bsw/jbe@1309 152 border: none;
bsw/jbe@1309 153 border-radius: 50%;
bsw/jbe@1309 154 background: $range-color;
bsw/jbe@1309 155 transform: scale(0.375);
bsw/jbe@1309 156 // -ms-thumb doesn't currently support transitions, but leaving this here
bsw/jbe@1309 157 // in case support ever gets added.
bsw/jbe@1309 158 transition: transform 0.18s $animation-curve-default,
bsw/jbe@1309 159 background 0.28s $animation-curve-default;
bsw/jbe@1309 160 }
bsw/jbe@1309 161
bsw/jbe@1309 162 &:focus:not(:active)::-ms-thumb {
bsw/jbe@1309 163 background: radial-gradient(circle closest-side,
bsw/jbe@1309 164 $range-color 0%,
bsw/jbe@1309 165 $range-color 37.5%,
bsw/jbe@1309 166 $range-faded-color 37.5%,
bsw/jbe@1309 167 $range-faded-color 100%);
bsw/jbe@1309 168 transform: scale(1);
bsw/jbe@1309 169 }
bsw/jbe@1309 170
bsw/jbe@1309 171 &:active::-ms-thumb {
bsw/jbe@1309 172 background: $range-color;
bsw/jbe@1309 173 transform: scale(0.5625);
bsw/jbe@1309 174 }
bsw/jbe@1309 175
bsw/jbe@1309 176
bsw/jbe@1309 177 /**************************** 0-value ****************************/
bsw/jbe@1309 178 &.is-lowest-value::-webkit-slider-thumb {
bsw/jbe@1309 179 border: 2px solid $range-bg-color;
bsw/jbe@1309 180 background: transparent;
bsw/jbe@1309 181 }
bsw/jbe@1309 182
bsw/jbe@1309 183 &.is-lowest-value::-moz-range-thumb {
bsw/jbe@1309 184 border: 2px solid $range-bg-color;
bsw/jbe@1309 185 background: transparent;
bsw/jbe@1309 186 }
bsw/jbe@1309 187
bsw/jbe@1309 188 &.is-lowest-value +
bsw/jbe@1309 189 .mdl-slider__background-flex > .mdl-slider__background-upper {
bsw/jbe@1309 190 left: 6px;
bsw/jbe@1309 191 }
bsw/jbe@1309 192
bsw/jbe@1309 193 &.is-lowest-value:focus:not(:active)::-webkit-slider-thumb {
bsw/jbe@1309 194 box-shadow: 0 0 0 10px $range-bg-focus-color;
bsw/jbe@1309 195 background: $range-bg-focus-color;
bsw/jbe@1309 196 }
bsw/jbe@1309 197
bsw/jbe@1309 198 &.is-lowest-value:focus:not(:active)::-moz-range-thumb {
bsw/jbe@1309 199 box-shadow: 0 0 0 10px $range-bg-focus-color;
bsw/jbe@1309 200 background: $range-bg-focus-color;
bsw/jbe@1309 201 }
bsw/jbe@1309 202
bsw/jbe@1309 203 &.is-lowest-value:active::-webkit-slider-thumb {
bsw/jbe@1309 204 border: 1.6px solid $range-bg-color;
bsw/jbe@1309 205 transform: scale(1.5);
bsw/jbe@1309 206 }
bsw/jbe@1309 207
bsw/jbe@1309 208 &.is-lowest-value:active +
bsw/jbe@1309 209 .mdl-slider__background-flex > .mdl-slider__background-upper {
bsw/jbe@1309 210 left: 9px;
bsw/jbe@1309 211 }
bsw/jbe@1309 212
bsw/jbe@1309 213 &.is-lowest-value:active::-moz-range-thumb {
bsw/jbe@1309 214 border: 1.5px solid $range-bg-color;
bsw/jbe@1309 215 transform: scale(1.5);
bsw/jbe@1309 216 }
bsw/jbe@1309 217
bsw/jbe@1309 218 &.is-lowest-value::-ms-thumb {
bsw/jbe@1309 219 background: radial-gradient(circle closest-side,
bsw/jbe@1309 220 transparent 0%,
bsw/jbe@1309 221 transparent 66.67%,
bsw/jbe@1309 222 $range-bg-color 66.67%,
bsw/jbe@1309 223 $range-bg-color 100%);
bsw/jbe@1309 224 }
bsw/jbe@1309 225
bsw/jbe@1309 226 &.is-lowest-value:focus:not(:active)::-ms-thumb {
bsw/jbe@1309 227 background: radial-gradient(circle closest-side,
bsw/jbe@1309 228 $range-bg-focus-color 0%,
bsw/jbe@1309 229 $range-bg-focus-color 25%,
bsw/jbe@1309 230 $range-bg-color 25%,
bsw/jbe@1309 231 $range-bg-color 37.5%,
bsw/jbe@1309 232 $range-bg-focus-color 37.5%,
bsw/jbe@1309 233 $range-bg-focus-color 100%);
bsw/jbe@1309 234 transform: scale(1);
bsw/jbe@1309 235 }
bsw/jbe@1309 236
bsw/jbe@1309 237 &.is-lowest-value:active::-ms-thumb {
bsw/jbe@1309 238 transform: scale(0.5625);
bsw/jbe@1309 239 background: radial-gradient(circle closest-side,
bsw/jbe@1309 240 transparent 0%,
bsw/jbe@1309 241 transparent 77.78%,
bsw/jbe@1309 242 $range-bg-color 77.78%,
bsw/jbe@1309 243 $range-bg-color 100%);
bsw/jbe@1309 244 }
bsw/jbe@1309 245
bsw/jbe@1309 246 &.is-lowest-value::-ms-fill-lower {
bsw/jbe@1309 247 background: transparent;
bsw/jbe@1309 248 }
bsw/jbe@1309 249
bsw/jbe@1309 250 &.is-lowest-value::-ms-fill-upper {
bsw/jbe@1309 251 margin-left: 6px;
bsw/jbe@1309 252 }
bsw/jbe@1309 253
bsw/jbe@1309 254 &.is-lowest-value:active::-ms-fill-upper {
bsw/jbe@1309 255 margin-left: 9px;
bsw/jbe@1309 256 }
bsw/jbe@1309 257
bsw/jbe@1309 258 /**************************** Disabled ****************************/
bsw/jbe@1309 259
bsw/jbe@1309 260 &:disabled:focus::-webkit-slider-thumb,
bsw/jbe@1309 261 &:disabled:active::-webkit-slider-thumb,
bsw/jbe@1309 262 &:disabled::-webkit-slider-thumb {
bsw/jbe@1309 263 transform: scale(0.667);
bsw/jbe@1309 264 background: $range-bg-color;
bsw/jbe@1309 265 }
bsw/jbe@1309 266
bsw/jbe@1309 267 &:disabled:focus::-moz-range-thumb,
bsw/jbe@1309 268 &:disabled:active::-moz-range-thumb,
bsw/jbe@1309 269 &:disabled::-moz-range-thumb {
bsw/jbe@1309 270 transform: scale(0.667);
bsw/jbe@1309 271 background: $range-bg-color;
bsw/jbe@1309 272 }
bsw/jbe@1309 273
bsw/jbe@1309 274 &:disabled +
bsw/jbe@1309 275 .mdl-slider__background-flex > .mdl-slider__background-lower {
bsw/jbe@1309 276 background-color: $range-bg-color;
bsw/jbe@1309 277 left: -6px;
bsw/jbe@1309 278 }
bsw/jbe@1309 279
bsw/jbe@1309 280 &:disabled +
bsw/jbe@1309 281 .mdl-slider__background-flex > .mdl-slider__background-upper {
bsw/jbe@1309 282 left: 6px;
bsw/jbe@1309 283 }
bsw/jbe@1309 284
bsw/jbe@1309 285 &.is-lowest-value:disabled:focus::-webkit-slider-thumb,
bsw/jbe@1309 286 &.is-lowest-value:disabled:active::-webkit-slider-thumb,
bsw/jbe@1309 287 &.is-lowest-value:disabled::-webkit-slider-thumb {
bsw/jbe@1309 288 border: 3px solid $range-bg-color;
bsw/jbe@1309 289 background: transparent;
bsw/jbe@1309 290 transform: scale(0.667);
bsw/jbe@1309 291 }
bsw/jbe@1309 292
bsw/jbe@1309 293 &.is-lowest-value:disabled:focus::-moz-range-thumb,
bsw/jbe@1309 294 &.is-lowest-value:disabled:active::-moz-range-thumb,
bsw/jbe@1309 295 &.is-lowest-value:disabled::-moz-range-thumb {
bsw/jbe@1309 296 border: 3px solid $range-bg-color;
bsw/jbe@1309 297 background: transparent;
bsw/jbe@1309 298 transform: scale(0.667);
bsw/jbe@1309 299 }
bsw/jbe@1309 300
bsw/jbe@1309 301 &.is-lowest-value:disabled:active +
bsw/jbe@1309 302 .mdl-slider__background-flex > .mdl-slider__background-upper {
bsw/jbe@1309 303 left: 6px;
bsw/jbe@1309 304 }
bsw/jbe@1309 305
bsw/jbe@1309 306 &:disabled:focus::-ms-thumb,
bsw/jbe@1309 307 &:disabled:active::-ms-thumb,
bsw/jbe@1309 308 &:disabled::-ms-thumb {
bsw/jbe@1309 309 transform: scale(0.25);
bsw/jbe@1309 310 background: $range-bg-color;
bsw/jbe@1309 311 }
bsw/jbe@1309 312
bsw/jbe@1309 313 &.is-lowest-value:disabled:focus::-ms-thumb,
bsw/jbe@1309 314 &.is-lowest-value:disabled:active::-ms-thumb,
bsw/jbe@1309 315 &.is-lowest-value:disabled::-ms-thumb {
bsw/jbe@1309 316 transform: scale(0.25);
bsw/jbe@1309 317 background: radial-gradient(circle closest-side,
bsw/jbe@1309 318 transparent 0%,
bsw/jbe@1309 319 transparent 50%,
bsw/jbe@1309 320 $range-bg-color 50%,
bsw/jbe@1309 321 $range-bg-color 100%);
bsw/jbe@1309 322 }
bsw/jbe@1309 323
bsw/jbe@1309 324 &:disabled::-ms-fill-lower {
bsw/jbe@1309 325 margin-right: 6px;
bsw/jbe@1309 326 background: linear-gradient(to right,
bsw/jbe@1309 327 transparent,
bsw/jbe@1309 328 transparent 25px,
bsw/jbe@1309 329 $range-bg-color 25px,
bsw/jbe@1309 330 $range-bg-color 0);
bsw/jbe@1309 331 }
bsw/jbe@1309 332
bsw/jbe@1309 333 &:disabled::-ms-fill-upper {
bsw/jbe@1309 334 margin-left: 6px;
bsw/jbe@1309 335 }
bsw/jbe@1309 336
bsw/jbe@1309 337 &.is-lowest-value:disabled:active::-ms-fill-upper {
bsw/jbe@1309 338 margin-left: 6px;
bsw/jbe@1309 339 }
bsw/jbe@1309 340 }
bsw/jbe@1309 341 }
bsw/jbe@1309 342
bsw/jbe@1309 343 // Since we need to specify a height of 32px in IE, we add a class here for a
bsw/jbe@1309 344 // container that brings it back to a reasonable height.
bsw/jbe@1309 345 .mdl-slider__ie-container {
bsw/jbe@1309 346 height: 18px;
bsw/jbe@1309 347 overflow: visible;
bsw/jbe@1309 348 border: none;
bsw/jbe@1309 349 margin: none;
bsw/jbe@1309 350 padding: none;
bsw/jbe@1309 351 }
bsw/jbe@1309 352
bsw/jbe@1309 353 // We use a set of divs behind the track to style it in all non-IE browsers.
bsw/jbe@1309 354 // This one contains both the background and the slider.
bsw/jbe@1309 355 .mdl-slider__container {
bsw/jbe@1309 356 height: 18px;
bsw/jbe@1309 357 position: relative;
bsw/jbe@1309 358 background: none;
bsw/jbe@1309 359 display: flex;
bsw/jbe@1309 360 flex-direction: row;
bsw/jbe@1309 361 }
bsw/jbe@1309 362
bsw/jbe@1309 363 // This one sets up a flex box for the styled upper and lower portions of the
bsw/jbe@1309 364 // the slider track.
bsw/jbe@1309 365 .mdl-slider__background-flex {
bsw/jbe@1309 366 background: transparent;
bsw/jbe@1309 367 position: absolute;
bsw/jbe@1309 368 height: 2px;
bsw/jbe@1309 369 width: calc(100% - 52px);
bsw/jbe@1309 370 top: 50%;
bsw/jbe@1309 371 left: 0;
bsw/jbe@1309 372 margin: 0 26px;
bsw/jbe@1309 373 display: flex;
bsw/jbe@1309 374 overflow: hidden;
bsw/jbe@1309 375 border: 0;
bsw/jbe@1309 376 padding: 0;
bsw/jbe@1309 377 transform: translate(0, -1px);
bsw/jbe@1309 378 }
bsw/jbe@1309 379
bsw/jbe@1309 380 // This one styles the lower part of the slider track.
bsw/jbe@1309 381 .mdl-slider__background-lower {
bsw/jbe@1309 382 background: $range-color;
bsw/jbe@1309 383 flex: 0;
bsw/jbe@1309 384 position: relative;
bsw/jbe@1309 385 border: 0;
bsw/jbe@1309 386 padding: 0;
bsw/jbe@1309 387 }
bsw/jbe@1309 388
bsw/jbe@1309 389 // This one styles the upper part of the slider track.
bsw/jbe@1309 390 .mdl-slider__background-upper {
bsw/jbe@1309 391 background: $range-bg-color;
bsw/jbe@1309 392 flex: 0;
bsw/jbe@1309 393 position: relative;
bsw/jbe@1309 394 border: 0;
bsw/jbe@1309 395 padding: 0;
bsw/jbe@1309 396 transition: left 0.18s $animation-curve-default
bsw/jbe@1309 397 }

Impressum / About Us