/*! Material Components for the web Copyright (c) 2017 Google Inc. License: Apache-2.0 */ /* TODO(sgomes): Figure out what to do about desktop font sizes. */ /* TODO(sgomes): Figure out what to do about i18n and i18n font sizes. */ /** * Creates a rule that will be applied when an MDC-Web component is within the context of an RTL layout. * * Usage Example: * ```scss * .mdc-foo { * position: absolute; * left: 0; * * @include mdc-rtl { * left: auto; * right: 0; * } * * &__bar { * margin-left: 4px; * @include mdc-rtl(".mdc-foo") { * margin-left: auto; * margin-right: 4px; * } * } * } * * .mdc-foo--mod { * padding-left: 4px; * * @include mdc-rtl { * padding-left: auto; * padding-right: 4px; * } * } * ``` * * Note that this works by checking for [dir="rtl"] on an ancestor element. While this will work * in most cases, it will in some cases lead to false negatives, e.g. * * ```html * * *
*
Styled incorrectly as RTL!
*
* * ``` * * In the future, selectors such as :dir (http://mdn.io/:dir) will help us mitigate this. */ /** * Takes a base box-model property - e.g. margin / border / padding - along with a default * direction and value, and emits rules which apply the value to the * "-" property by default, but flips the direction * when within an RTL context. * * For example: * * ```scss * .mdc-foo { * @include mdc-rtl-reflexive-box(margin, left, 8px); * } * ``` * is equivalent to: * * ```scss * .mdc-foo { * margin-left: 8px; * * @include mdc-rtl { * margin-right: 8px; * margin-left: 0; * } * } * ``` * whereas: * * ```scss * .mdc-foo { * @include mdc-rtl-reflexive-box(margin, right, 8px); * } * ``` * is equivalent to: * * ```scss * .mdc-foo { * margin-right: 8px; * * @include mdc-rtl { * margin-right: 0; * margin-left: 8px; * } * } * ``` * * You can also pass a 4th optional $root-selector argument which will be forwarded to `mdc-rtl`, * e.g. `@include mdc-rtl-reflexive-box(margin, left, 8px, ".mdc-component")`. * * Note that this function will always zero out the original value in an RTL context. If you're * trying to flip the values, use mdc-rtl-reflexive-property(). */ /** * Takes a base property and emits rules that assign -left to and * -right to in a LTR context, and vice versa in a RTL context. * For example: * * ```scss * .mdc-foo { * @include mdc-rtl-reflexive-property(margin, auto, 12px); * } * ``` * is equivalent to: * * ```scss * .mdc-foo { * margin-left: auto; * margin-right: 12px; * * @include mdc-rtl { * margin-left: 12px; * margin-right: auto; * } * } * ``` * * A 4th optional $root-selector argument can be given, which will be passed to `mdc-rtl`. */ /** * Takes an argument specifying a horizontal position property (either "left" or "right") as well * as a value, and applies that value to the specified position in a LTR context, and flips it in a * RTL context. For example: * * ```scss * .mdc-foo { * @include mdc-rtl-reflexive-position(left, 0); * position: absolute; * } * ``` * is equivalent to: * * ```scss * .mdc-foo { * position: absolute; * left: 0; * right: initial; * * @include mdc-rtl { * right: 0; * left: initial; * } * } * ``` * An optional third $root-selector argument may also be given, which is passed to `mdc-rtl`. */ @-webkit-keyframes mdc-slider-emphasize { 0% { -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 50% { -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; -webkit-transform: scale(0.85); transform: scale(0.85); } 100% { -webkit-transform: scale(0.571); transform: scale(0.571); } } @keyframes mdc-slider-emphasize { 0% { -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 50% { -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; -webkit-transform: scale(0.85); transform: scale(0.85); } 100% { -webkit-transform: scale(0.571); transform: scale(0.571); } } .mdc-slider { position: relative; width: 100%; height: 48px; cursor: pointer; -ms-touch-action: pan-x; touch-action: pan-x; -webkit-tap-highlight-color: transparent; } .mdc-slider:focus { outline: none; } .mdc-slider__track-container { position: absolute; top: 50%; width: 100%; height: 2px; background-color: #bdbdbd; overflow: hidden; } .mdc-slider--theme-dark .mdc-slider__track-container, .mdc-theme--dark .mdc-slider__track-container { background-color: #5c5c5c; } .mdc-slider__track { /* @alternate */ background-color: #3f51b5; background-color: var(--mdc-theme-primary, #3f51b5); position: absolute; width: 100%; height: 100%; -webkit-transform-origin: left top; transform-origin: left top; will-change: transform; } [dir="rtl"] .mdc-slider .mdc-slider__track, .mdc-slider[dir="rtl"] .mdc-slider__track { -webkit-transform-origin: right top; transform-origin: right top; } .mdc-slider__track-marker-container { display: -webkit-box; display: -ms-flexbox; display: flex; margin-right: 0; margin-left: -1px; visibility: hidden; } [dir="rtl"] .mdc-slider .mdc-slider__track-marker-container, .mdc-slider[dir="rtl"] .mdc-slider__track-marker-container { margin-right: -1px; margin-left: 0; } .mdc-slider__track-marker-container::after { display: block; width: 2px; height: 2px; background-color: #5c5c5c; content: ""; } .mdc-slider--theme-dark.mdc-slider__track-marker-container::after, .mdc-theme--dark .mdc-slider__track-marker-container::after { background-color: #bdbdbd; } .mdc-slider__track-marker { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; } .mdc-slider__track-marker::after { display: block; width: 2px; height: 2px; background-color: #5c5c5c; content: ""; } .mdc-slider--theme-dark.mdc-slider__track-marker::after, .mdc-theme--dark .mdc-slider__track-marker::after { background-color: #bdbdbd; } .mdc-slider__track-marker:first-child::after { width: 3px; } .mdc-slider__thumb-container { position: absolute; top: 15px; left: 0; width: 21px; height: 100%; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; will-change: transform; } .mdc-slider__thumb { /* @alternate */ fill: #3f51b5; fill: var(--mdc-theme-primary, #3f51b5); /* @alternate */ stroke: #3f51b5; stroke: var(--mdc-theme-primary, #3f51b5); position: absolute; top: 0; left: 0; -webkit-transform: scale(0.571); transform: scale(0.571); -webkit-transition: fill 100ms ease-out, stroke 100ms ease-out, -webkit-transform 100ms ease-out; transition: fill 100ms ease-out, stroke 100ms ease-out, -webkit-transform 100ms ease-out; transition: transform 100ms ease-out, fill 100ms ease-out, stroke 100ms ease-out; transition: transform 100ms ease-out, fill 100ms ease-out, stroke 100ms ease-out, -webkit-transform 100ms ease-out; stroke-width: 3.5; } .mdc-slider__focus-ring { /* @alternate */ background-color: #3f51b5; background-color: var(--mdc-theme-primary, #3f51b5); width: 21px; height: 21px; -webkit-transition: opacity 266.67ms ease-out, background-color 266.67ms ease-out, -webkit-transform 266.67ms ease-out; transition: opacity 266.67ms ease-out, background-color 266.67ms ease-out, -webkit-transform 266.67ms ease-out; transition: transform 266.67ms ease-out, opacity 266.67ms ease-out, background-color 266.67ms ease-out; transition: transform 266.67ms ease-out, opacity 266.67ms ease-out, background-color 266.67ms ease-out, -webkit-transform 266.67ms ease-out; border-radius: 50%; opacity: 0; } .mdc-slider__pin { /* @alternate */ background-color: #3f51b5; background-color: var(--mdc-theme-primary, #3f51b5); /* @alternate */ color: white; color: var(--mdc-theme-text-primary-on-primary, white); display: -webkit-box; display: -ms-flexbox; display: flex; position: absolute; top: 0; left: 0; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 26px; height: 26px; margin-top: -2px; margin-left: -2px; -webkit-transform: rotate(-45deg) scale(0) translate(0, 0); transform: rotate(-45deg) scale(0) translate(0, 0); -webkit-transition: -webkit-transform 100ms ease-out; transition: -webkit-transform 100ms ease-out; transition: transform 100ms ease-out; transition: transform 100ms ease-out, -webkit-transform 100ms ease-out; border-radius: 50% 50% 50% 0%; /** * Ensuring that the pin is higher than the thumb in the stacking order * removes some rendering jank observed in Chrome. */ z-index: 1; } .mdc-slider__pin-value-marker { font-family: Roboto, sans-serif; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; font-size: 0.75rem; font-weight: 400; letter-spacing: 0.08em; line-height: 1.25rem; text-decoration: inherit; text-transform: inherit; -webkit-transform: rotate(45deg); transform: rotate(45deg); } .mdc-slider--active .mdc-slider__thumb { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } .mdc-slider--focus .mdc-slider__thumb { -webkit-animation: mdc-slider-emphasize 266.67ms linear; animation: mdc-slider-emphasize 266.67ms linear; } .mdc-slider--focus .mdc-slider__focus-ring { -webkit-transform: scale3d(1.55, 1.55, 1.55); transform: scale3d(1.55, 1.55, 1.55); opacity: .25; } .mdc-slider--disabled { cursor: auto; } .mdc-slider--disabled .mdc-slider__track { background-color: #bdbdbd; } .mdc-slider--theme-dark.mdc-slider--disabled .mdc-slider__track, .mdc-theme--dark .mdc-slider--disabled .mdc-slider__track { background-color: #5c5c5c; } .mdc-slider--disabled .mdc-slider__thumb { fill: #bdbdbd !important; stroke: white !important; stroke: var(--mdc-slider-bg-color-behind-component, white) !important; } .mdc-slider--theme-dark.mdc-slider--disabled .mdc-slider__thumb, .mdc-theme--dark .mdc-slider--disabled .mdc-slider__thumb { fill: #5c5c5c !important; stroke: #333 !important; stroke: var(--mdc-slider-bg-color-behind-component, #333) !important; } .mdc-slider--off .mdc-slider__track { opacity: 0; } .mdc-slider--off .mdc-slider__thumb { fill: white; fill: var(--mdc-slider-bg-color-behind-component, white); stroke: #bdbdbd; } .mdc-slider--theme-dark.mdc-slider--off .mdc-slider__thumb, .mdc-theme--dark .mdc-slider--off .mdc-slider__thumb { fill: #333; fill: var(--mdc-slider-bg-color-behind-component, #333); stroke: #5c5c5c; } .mdc-slider--off .mdc-slider__pin { background-color: #bdbdbd; } .mdc-slider--theme-dark.mdc-slider--off .mdc-slider__pin, .mdc-theme--dark .mdc-slider--off .mdc-slider__pin { background-color: #5c5c5c; } .mdc-slider--off.mdc-slider--focus .mdc-slider__thumb { fill: #dedede; } .mdc-slider--theme-dark.mdc-slider--off.mdc-slider--focus .mdc-slider__thumb, .mdc-theme--dark .mdc-slider--off.mdc-slider--focus .mdc-slider__thumb { fill: #82848c; stroke: #82848c; } .mdc-slider--off.mdc-slider--active.mdc-slider--focus .mdc-slider__thumb { stroke: #8c8c8c; } .mdc-slider--theme-dark.mdc-slider--off.mdc-slider--active.mdc-slider--focus .mdc-slider__thumb, .mdc-theme--dark .mdc-slider--off.mdc-slider--active.mdc-slider--focus .mdc-slider__thumb { stroke: #5c5c5c; } .mdc-slider--off .mdc-slider__focus-ring { background-color: #bdbdbd; } .mdc-slider--in-transit .mdc-slider__thumb { -webkit-transition-delay: 140ms; transition-delay: 140ms; } .mdc-slider--in-transit .mdc-slider__thumb-container, .mdc-slider--in-transit .mdc-slider__track, .mdc-slider:focus:not(.mdc-slider--active) .mdc-slider__thumb-container, .mdc-slider:focus:not(.mdc-slider--active) .mdc-slider__track { -webkit-transition: -webkit-transform 80ms ease; transition: -webkit-transform 80ms ease; transition: transform 80ms ease; transition: transform 80ms ease, -webkit-transform 80ms ease; } .mdc-slider--discrete.mdc-slider--active .mdc-slider__thumb { -webkit-transform: scale(calc(12 / 21)); transform: scale(calc(12 / 21)); } .mdc-slider--discrete.mdc-slider--active .mdc-slider__pin { -webkit-transform: rotate(-45deg) scale(1) translate(19px, -20px); transform: rotate(-45deg) scale(1) translate(19px, -20px); } .mdc-slider--discrete.mdc-slider--focus .mdc-slider__thumb { -webkit-animation: none; animation: none; } .mdc-slider--discrete.mdc-slider--focus .mdc-slider__focus-ring { -webkit-transform: none; transform: none; opacity: 0; } .mdc-slider--discrete.mdc-slider--display-markers .mdc-slider__track-marker-container { visibility: visible; }