/*! 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`. */ .mdc-select { font-family: Roboto, sans-serif; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; font-size: 1rem; font-weight: 400; letter-spacing: 0.04em; line-height: 1.75rem; text-decoration: inherit; text-transform: inherit; /* @alternate */ color: rgba(0, 0, 0, 0.87); color: var(--mdc-theme-text-primary-on-light, rgba(0, 0, 0, 0.87)); padding-left: 0; padding-right: 24px; background-image: url(data:image/svg+xml,%3Csvg%20width%3D%2210px%22%20height%3D%225px%22%20viewBox%3D%227%2010%2010%205%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%3E%0A%20%20%20%20%3Cpolygon%20id%3D%22Shape%22%20stroke%3D%22none%22%20fill%3D%22%230%22%20fill-rule%3D%22evenodd%22%20opacity%3D%220.54%22%20points%3D%227%2010%2012%2015%2017%2010%22%3E%3C%2Fpolygon%3E%0A%3C%2Fsvg%3E); display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; max-width: calc(100% - 24px); height: 32px; -webkit-transition: border-bottom-color 150ms 0ms cubic-bezier(0.4, 0, 0.6, 1), background-color 150ms 0ms cubic-bezier(0.4, 0, 0.6, 1); transition: border-bottom-color 150ms 0ms cubic-bezier(0.4, 0, 0.6, 1), background-color 150ms 0ms cubic-bezier(0.4, 0, 0.6, 1); border: none; border-bottom: 1px solid rgba(0, 0, 0, 0.12); border-radius: 0; background-repeat: no-repeat; background-position: right center; font-family: Roboto, sans-serif; font-size: .936rem; cursor: pointer; -webkit-appearance: none; -moz-appearance: none; appearance: none; } [dir="rtl"] .mdc-select, .mdc-select[dir="rtl"] { padding-left: 24px; padding-right: 0; } .mdc-select::-ms-expand { display: none; } .mdc-select:focus { /* @alternate */ border-bottom-color: #3f51b5; border-bottom-color: var(--mdc-theme-primary, #3f51b5); outline: none; background-color: rgba(0, 0, 0, 0.06); } [dir="rtl"] .mdc-select, .mdc-select[dir="rtl"] { background-position: left center; } .mdc-select--theme-dark, .mdc-theme--dark .mdc-select { /* @alternate */ color: white; color: var(--mdc-theme-text-primary-on-dark, white); background-image: url(data:image/svg+xml,%3Csvg%20width%3D%2210px%22%20height%3D%225px%22%20viewBox%3D%227%2010%2010%205%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%3E%0A%20%20%20%20%3Cpolygon%20id%3D%22Shape%22%20stroke%3D%22none%22%20fill%3D%22%23ffffff%22%20fill-rule%3D%22evenodd%22%20opacity%3D%220.54%22%20points%3D%227%2010%2012%2015%2017%2010%22%3E%3C%2Fpolygon%3E%0A%3C%2Fsvg%3E); border-bottom: 1px solid rgba(255, 255, 255, 0.12); } .mdc-select--theme-dark:focus, .mdc-theme--dark .mdc-select:focus { /* @alternate */ border-bottom-color: #3f51b5; border-bottom-color: var(--mdc-theme-primary, #3f51b5); background-color: rgba(255, 255, 255, 0.09); } .mdc-select__menu { position: fixed; top: 0; left: 0; max-height: 100%; -webkit-transform-origin: center center; transform-origin: center center; z-index: 4; } .mdc-select__selected-text { -webkit-transition: opacity 125ms 0ms cubic-bezier(0.4, 0, 0.6, 1), -webkit-transform 125ms 0ms cubic-bezier(0.4, 0, 0.6, 1); transition: opacity 125ms 0ms cubic-bezier(0.4, 0, 0.6, 1), -webkit-transform 125ms 0ms cubic-bezier(0.4, 0, 0.6, 1); transition: opacity 125ms 0ms cubic-bezier(0.4, 0, 0.6, 1), transform 125ms 0ms cubic-bezier(0.4, 0, 0.6, 1); transition: opacity 125ms 0ms cubic-bezier(0.4, 0, 0.6, 1), transform 125ms 0ms cubic-bezier(0.4, 0, 0.6, 1), -webkit-transform 125ms 0ms cubic-bezier(0.4, 0, 0.6, 1); white-space: nowrap; overflow: hidden; } .mdc-select--open .mdc-select__selected-text { -webkit-transform: translateY(8px); transform: translateY(8px); -webkit-transition: opacity 125ms 125ms cubic-bezier(0, 0, 0.2, 1), -webkit-transform 125ms 125ms cubic-bezier(0, 0, 0.2, 1); transition: opacity 125ms 125ms cubic-bezier(0, 0, 0.2, 1), -webkit-transform 125ms 125ms cubic-bezier(0, 0, 0.2, 1); transition: opacity 125ms 125ms cubic-bezier(0, 0, 0.2, 1), transform 125ms 125ms cubic-bezier(0, 0, 0.2, 1); transition: opacity 125ms 125ms cubic-bezier(0, 0, 0.2, 1), transform 125ms 125ms cubic-bezier(0, 0, 0.2, 1), -webkit-transform 125ms 125ms cubic-bezier(0, 0, 0.2, 1); opacity: 0; } .mdc-select--disabled, .mdc-select[disabled] { /* @alternate */ color: rgba(0, 0, 0, 0.38); color: var(--mdc-theme-text-disabled-on-light, rgba(0, 0, 0, 0.38)); background-image: url(data:image/svg+xml,%3Csvg%20width%3D%2210px%22%20height%3D%225px%22%20viewBox%3D%227%2010%2010%205%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%3E%0A%20%20%20%20%3Cpolygon%20id%3D%22Shape%22%20stroke%3D%22none%22%20fill%3D%22%230%22%20fill-rule%3D%22evenodd%22%20opacity%3D%220.38%22%20points%3D%227%2010%2012%2015%2017%2010%22%3E%3C%2Fpolygon%3E%0A%3C%2Fsvg%3E); border-bottom-style: dotted; cursor: default; pointer-events: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .mdc-select--theme-dark.mdc-select--disabled, .mdc-theme--dark .mdc-select--disabled { /* @alternate */ color: rgba(255, 255, 255, 0.5); color: var(--mdc-theme-text-disabled-on-dark, rgba(255, 255, 255, 0.5)); background-image: url(data:image/svg+xml,%3Csvg%20width%3D%2210px%22%20height%3D%225px%22%20viewBox%3D%227%2010%2010%205%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%3E%0A%20%20%20%20%3Cpolygon%20id%3D%22Shape%22%20stroke%3D%22none%22%20fill%3D%22%23ffffff%22%20fill-rule%3D%22evenodd%22%20opacity%3D%220.38%22%20points%3D%227%2010%2012%2015%2017%2010%22%3E%3C%2Fpolygon%3E%0A%3C%2Fsvg%3E); border-bottom: 1px dotted rgba(255, 255, 255, 0.38); } .mdc-select--theme-dark.mdc-select[disabled], .mdc-theme--dark .mdc-select[disabled] { /* @alternate */ color: rgba(255, 255, 255, 0.5); color: var(--mdc-theme-text-disabled-on-dark, rgba(255, 255, 255, 0.5)); background-image: url(data:image/svg+xml,%3Csvg%20width%3D%2210px%22%20height%3D%225px%22%20viewBox%3D%227%2010%2010%205%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%3E%0A%20%20%20%20%3Cpolygon%20id%3D%22Shape%22%20stroke%3D%22none%22%20fill%3D%22%23ffffff%22%20fill-rule%3D%22evenodd%22%20opacity%3D%220.38%22%20points%3D%227%2010%2012%2015%2017%2010%22%3E%3C%2Fpolygon%3E%0A%3C%2Fsvg%3E); border-bottom: 1px dotted rgba(255, 255, 255, 0.38); } .mdc-select__menu .mdc-list-item { font-family: Roboto, sans-serif; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; font-size: 1rem; font-weight: 400; letter-spacing: 0.04em; line-height: 1.75rem; text-decoration: inherit; text-transform: inherit; /* @alternate */ color: rgba(0, 0, 0, 0.54); color: var(--mdc-theme-text-secondary-on-light, rgba(0, 0, 0, 0.54)); } .mdc-select__menu .mdc-list-item[aria-selected="true"] { /* @alternate */ color: rgba(0, 0, 0, 0.87); color: var(--mdc-theme-text-primary-on-light, rgba(0, 0, 0, 0.87)); } .mdc-select--theme-dark .mdc-select__menu .mdc-list-item, .mdc-theme--dark .mdc-select__menu .mdc-list-item { /* @alternate */ color: rgba(255, 255, 255, 0.7); color: var(--mdc-theme-text-secondary-on-dark, rgba(255, 255, 255, 0.7)); } .mdc-select--theme-dark .mdc-select__menu .mdc-list-item[aria-selected="true"], .mdc-theme--dark .mdc-select__menu .mdc-list-item[aria-selected="true"] { /* @alternate */ color: white; color: var(--mdc-theme-text-primary-on-dark, white); } .mdc-select__menu .mdc-list-group, .mdc-select__menu .mdc-list-group > .mdc-list-item:first-child { margin-top: 12px; } .mdc-select__menu .mdc-list-group { /* @alternate */ color: rgba(0, 0, 0, 0.38); color: var(--mdc-theme-text-hint-on-light, rgba(0, 0, 0, 0.38)); font-weight: normal; } .mdc-select__menu .mdc-list-group .mdc-list-item { /* @alternate */ color: rgba(0, 0, 0, 0.87); color: var(--mdc-theme-text-primary-on-light, rgba(0, 0, 0, 0.87)); } .mdc-select--theme-dark .mdc-select__menu .mdc-list-group, .mdc-theme--dark .mdc-select__menu .mdc-list-group { /* @alternate */ color: rgba(255, 255, 255, 0.5); color: var(--mdc-theme-text-hint-on-dark, rgba(255, 255, 255, 0.5)); } .mdc-select--theme-dark .mdc-select__menu .mdc-list-group .mdc-list-item, .mdc-theme--dark .mdc-select__menu .mdc-list-group .mdc-list-item { /* @alternate */ color: white; color: var(--mdc-theme-text-primary-on-dark, white); } .mdc-multi-select { /* @alternate */ border-color: rgba(0, 0, 0, 0.38); border-color: var(--mdc-theme-text-hint-on-light, rgba(0, 0, 0, 0.38)); width: 250px; padding: 0; border-width: 1px; border-style: solid; outline: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; } .mdc-multi-select--theme-dark, .mdc-theme--dark .mdc-multi-select { /* @alternate */ border-color: rgba(255, 255, 255, 0.5); border-color: var(--mdc-theme-text-hint-on-dark, rgba(255, 255, 255, 0.5)); } .mdc-multi-select .mdc-list-group { /* @alternate */ color: rgba(0, 0, 0, 0.38); color: var(--mdc-theme-text-hint-on-light, rgba(0, 0, 0, 0.38)); margin: 16px 0 0; padding: 0 0 0 16px; font-weight: normal; } .mdc-multi-select .mdc-list-group--theme-dark, .mdc-theme--dark .mdc-multi-select .mdc-list-group { /* @alternate */ color: rgba(255, 255, 255, 0.5); color: var(--mdc-theme-text-hint-on-dark, rgba(255, 255, 255, 0.5)); } .mdc-multi-select .mdc-list-group:last-child { margin-bottom: 16px; } .mdc-multi-select .mdc-list-group .mdc-list-divider { margin-left: -16px; } .mdc-multi-select .mdc-list-item { /* @alternate */ color: rgba(0, 0, 0, 0.87); color: var(--mdc-theme-text-primary-on-light, rgba(0, 0, 0, 0.87)); margin: 0 0 0 -16px; padding: 0 16px; } .mdc-multi-select .mdc-list-item--theme-dark, .mdc-theme--dark .mdc-multi-select .mdc-list-item { /* @alternate */ color: white; color: var(--mdc-theme-text-primary-on-dark, white); } .mdc-multi-select .mdc-list-item:first-child { margin-top: 12px; } .mdc-multi-select .mdc-list-item:last-child { margin-bottom: 8px; } .mdc-multi-select .mdc-list-item:checked { /* @alternate */ background-color: #fff; background-color: var(--mdc-theme-background, #fff); } .mdc-multi-select .mdc-list-item:checked--theme-dark, .mdc-theme--dark .mdc-multi-select .mdc-list-item:checked { /* @alternate */ background-color: white; background-color: var(--mdc-theme-text-primary-on-dark, white); } .mdc-multi-select .mdc-list-divider { margin-bottom: 8px; padding-top: 8px; font-size: 0; } .mdc-multi-select:focus .mdc-list-item:checked { /* @alternate */ background-color: #3f51b5; background-color: var(--mdc-theme-primary, #3f51b5); } .mdc-multi-select:focus .mdc-list-item:checked--theme-dark, .mdc-theme--dark .mdc-multi-select:focus .mdc-list-item:checked { /* @alternate */ background-color: white; background-color: var(--mdc-theme-text-primary-on-dark, white); }