| 1 | {"version":3,"sources":["webpack:///./packages/mdc-toolbar/mdc-toolbar.scss","webpack:///./packages/material-components-web/node_modules/@material/theme/_mixins.scss","webpack:///./packages/mdc-toolbar/_mixins.scss","webpack:///./packages/material-components-web/node_modules/@material/ripple/_mixins.scss","webpack:///./packages/mdc-toolbar/_variables.scss","webpack:///./packages/material-components-web/node_modules/@material/rtl/_mixins.scss","webpack:///./packages/material-components-web/node_modules/@material/typography/_mixins.scss","webpack:///./packages/material-components-web/node_modules/@material/elevation/_mixins.scss","webpack:///./packages/material-components-web/node_modules/@material/elevation/_variables.scss"],"names":[],"mappings":";;;;;;;AA+BA,aCsFM,yBAoBE,mDArDF,WDlDJ,aACA,kBACA,sBACA,8BACA,sBACA,WEEA,gCD2CI,UC1CkC,CCkJtC,+EFxGI,qBC1CkC,CCoKtC,8CAGI,WAkL8B,CA7JlC,wJAII,yBAIA,WAuJF,CA1IA,iEAEI,gCAIJ,wEAEI,yBAKA,WAiI4B,CA5HlC,oDAEI,8BHtOJ,kBACE,aACA,kBACA,mBACA,sBACA,WACA,YACA,eI1BqB,CJ6BrB,qDAVF,kBAWI,eI5BoC,EJgCtC,yBAfF,kBAgBI,eIlC0B,EJsC9B,sBACE,oBACA,OACA,kBACA,uBACA,sBACA,YACA,YACA,YACA,UAEA,qDAXF,sBAYI,WAGF,yBAfF,sBAgBI,eAGF,mCKmLF,kBAEA,gBLlLI,2BACA,SKPF,yFA4LA,eAEA,kBDnOqC,CJ8CnC,qDANF,mCKmLF,iBAEA,eAtHc,CAlEZ,yFA4LA,eAEA,iBDlO4C,EJiD1C,yBAVF,mCKmLF,iBAEA,eAtHc,CAlEZ,yFA4LA,eAEA,iBDlO4C,EJsD5C,iCKoKF,eAEA,mBLnKI,yBACA,QKtBF,qFA4LA,kBAEA,eAzHa,CL7CX,qDANF,iCKoKF,eAEA,iBD5N8C,CCoC5C,qFA4LA,iBAEA,eAzHa,ELzCX,yBAVF,iCKoKF,eAEA,iBD5N8C,CCoC5C,qFA4LA,iBAEA,eAzHa,ELnCf,oBMrDI,6NAUF,uBACA,mBACA,gBD6LF,iBAEA,eLjJE,kBACA,eACA,mBACA,UK1CA,2DA4LA,cAEA,iBD9O6C,CJ6F/C,2CGjBE,wBACA,qBACA,oBACA,yBACA,iCACA,mCAEA,0CDhDF,aACA,kBACA,kBACA,uBACA,sBACA,WACA,YACA,aACA,YACA,aACA,6BACA,kBACA,cACA,qBACA,eCqCA,oHAGI,kBACA,kBACA,UACA,oBACA,WAIJ,2DAGI,4DAMA,UAMJ,mGAEI,sGAIJ,iGAEI,MAEA,OACA,8CACA,sEAIJ,uHAEI,6BAEA,+BAIJ,+IAEI,uLACE,CAKN,mJAEI,4FAKA,wMA0KJ,oHAGI,oBAEA,qBACA,WACA,WAVsC,CAc1C,oMAGI,2CAEA,6CACA,sCACA,uCAIJ,iGAEI,sCACA,uCHvPN,4CKmIE,gBAEA,cAtHc,CAlEZ,2GA4LA,cAEA,gBD5O4C,CJqGhD,yBACE,oBK8HA,iBAEA,cAtHc,CAlEZ,2DA4LA,cAEA,iBD7O4C,EJ4GhD,oBOhEI,oHPmEF,eACA,MACA,OACA,UAGF,uBAGE,0CAEA,qDACE,aACA,oEACE,CAKF,yBARF,qDASI,aACA,oEACE,EAMJ,4DAEE,kBACA,WAOF,4DMzHE,6NN4HA,oBACA,mBAGF,6EACE,MACA,OACA,WACA,YACA,4BACA,UAIA,mHACE,UAGF,kGACE,gBAON,2COtIE,kHPyIA,yDACA,sBQhGqB,CRkGrB,iFO5IA,mHACE,CPgJA,iHOjJF,iHACE,CPoJA,0GOrJF,mHACE,CP6JN,0BACE,gBInNuB,CJqNvB,gDAHF,0BAII,gBIpNsC,EJuNxC,yBAPF,0BAQI,gBIzN4B,EJ6NhC,qCACE","file":"mdc.toolbar.min.css","sourcesContent":["//\n// Copyright 2017 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n@import \"@material/elevation/mixins\";\n@import \"@material/ripple/mixins\";\n@import \"@material/rtl/mixins\";\n@import \"@material/theme/mixins\";\n@import \"@material/typography/mixins\";\n@import \"./mixins\";\n@import \"./variables\";\n\n// postcss-bem-linter: define toolbar\n.mdc-toolbar {\n @include mdc-toolbar-fill-color-accessible(primary);\n\n display: flex;\n position: relative;\n flex-direction: column;\n justify-content: space-between;\n box-sizing: border-box;\n width: 100%;\n\n &__row {\n display: flex;\n position: relative;\n align-items: center;\n box-sizing: border-box;\n width: 100%;\n height: auto;\n min-height: $mdc-toolbar-row-height;\n\n // TODO: refactor this out when #23 is implemented\n @media (max-width: $mdc-toolbar-mobile-landscape-width-breakpoint) and (orientation: landscape) {\n min-height: $mdc-toolbar-mobile-landscape-row-height;\n }\n\n // TODO: refactor this out when #23 is implemented\n @media (max-width: $mdc-toolbar-mobile-breakpoint) {\n min-height: $mdc-toolbar-mobile-row-height;\n }\n }\n\n &__section {\n display: inline-flex;\n flex: 1;\n align-items: start;\n justify-content: center;\n box-sizing: border-box;\n min-width: 0;\n height: 100%;\n padding: $mdc-toolbar-element-section-padding;\n z-index: 1;\n\n @media (max-width: $mdc-toolbar-mobile-landscape-width-breakpoint) and (orientation: landscape) {\n padding: 0;\n }\n\n @media (max-width: $mdc-toolbar-mobile-breakpoint) {\n padding: $mdc-toolbar-element-mobile-section-padding 0;\n }\n\n &--align-start {\n @include mdc-rtl-reflexive-box(padding, \"left\", $mdc-toolbar-section-horizontal-padding);\n\n justify-content: flex-start;\n order: -1;\n\n @media (max-width: $mdc-toolbar-mobile-landscape-width-breakpoint) and (orientation: landscape) {\n @include mdc-rtl-reflexive-box(padding, \"left\", $mdc-toolbar-mobile-section-horizontal-padding);\n }\n\n @media (max-width: $mdc-toolbar-mobile-breakpoint) {\n @include mdc-rtl-reflexive-box(padding, \"left\", $mdc-toolbar-mobile-section-horizontal-padding);\n }\n }\n\n &--align-end {\n @include mdc-rtl-reflexive-box(padding, \"right\", $mdc-toolbar-section-horizontal-padding);\n\n justify-content: flex-end;\n order: 1;\n\n @media (max-width: $mdc-toolbar-mobile-landscape-width-breakpoint) and (orientation: landscape) {\n @include mdc-rtl-reflexive-box(padding, \"right\", $mdc-toolbar-mobile-section-horizontal-padding);\n }\n\n @media (max-width: $mdc-toolbar-mobile-breakpoint) {\n @include mdc-rtl-reflexive-box(padding, \"right\", $mdc-toolbar-mobile-section-horizontal-padding);\n }\n }\n }\n\n &__title {\n @include mdc-typography(headline6);\n @include mdc-typography-overflow-ellipsis;\n @include mdc-rtl-reflexive-box(margin, left, $mdc-toolbar-element-horizontal-padding-desktop);\n\n align-self: center;\n padding: 12px 0;\n line-height: 1.5rem;\n z-index: 1;\n }\n\n &__icon,\n &__menu-icon {\n @include mdc-toolbar-icon_;\n }\n}\n\n.mdc-toolbar__menu-icon + .mdc-toolbar__title {\n @include mdc-rtl-reflexive-box(margin, left, $mdc-toolbar-title-margin-to-menu-icon-desktop);\n}\n\n@media (max-width: $mdc-toolbar-mobile-breakpoint) {\n .mdc-toolbar__title {\n @include mdc-rtl-reflexive-box(margin, left, $mdc-toolbar-element-horizontal-padding-mobile);\n }\n}\n\n.mdc-toolbar--fixed {\n @include mdc-elevation(4);\n\n position: fixed;\n top: 0;\n left: 0;\n z-index: 4;\n}\n\n.mdc-toolbar--flexible {\n // bem linter is disabled because it cannot correctly reconcile mdc prefix for css variables.\n // stylelint-disable-next-line plugin/selector-bem-pattern\n --mdc-toolbar-ratio-to-extend-flexible: #{$mdc-toolbar-ratio-to-extend-flexible};\n\n .mdc-toolbar__row:first-child {\n height: $mdc-toolbar-row-height * $mdc-toolbar-ratio-to-extend-flexible;\n height:\n calc(\n #{$mdc-toolbar-row-height} *\n var(--mdc-toolbar-ratio-to-extend-flexible, #{$mdc-toolbar-ratio-to-extend-flexible})\n );\n\n @media (max-width: $mdc-toolbar-mobile-breakpoint) {\n height: $mdc-toolbar-mobile-row-height * $mdc-toolbar-ratio-to-extend-flexible;\n height:\n calc(\n #{$mdc-toolbar-mobile-row-height} *\n var(--mdc-toolbar-ratio-to-extend-flexible, #{$mdc-toolbar-ratio-to-extend-flexible})\n );\n }\n\n &::after {\n // The style ensures the pseudo element will be defined and can easily be styled\n position: absolute;\n content: \"\";\n }\n }\n\n // stylelint-disable plugin/selector-bem-pattern\n // bem linter is disabled because it cannot handle multiple top level selector\n &-default-behavior {\n .mdc-toolbar__title {\n @include mdc-typography(headline6);\n\n align-self: flex-end;\n line-height: 1.5rem;\n }\n\n .mdc-toolbar__row:first-child::after {\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n transition: opacity .2s ease;\n opacity: 1;\n }\n\n &.mdc-toolbar--flexible-space-minimized {\n .mdc-toolbar__row:first-child::after {\n opacity: 0;\n }\n\n .mdc-toolbar__title {\n font-weight: #{map-get($mdc-typography-font-weight-values, medium)};\n }\n }\n }\n}\n\n.mdc-toolbar--waterfall {\n &.mdc-toolbar--fixed {\n @include mdc-elevation(0);\n\n transition: mdc-elevation-transition-value();\n will-change: $mdc-elevation-property;\n\n &.mdc-toolbar--flexible-space-minimized {\n @include mdc-elevation(4);\n }\n\n &.mdc-toolbar--fixed-lastrow-only {\n &.mdc-toolbar--flexible-space-minimized {\n @include mdc-elevation(0);\n }\n\n &.mdc-toolbar--fixed-at-last-row {\n @include mdc-elevation(4);\n }\n }\n }\n}\n// postcss-bem-linter: end\n// stylelint-enable plugin/selector-bem-pattern\n\n.mdc-toolbar-fixed-adjust {\n padding-top: $mdc-toolbar-row-height;\n\n @media (max-width: $mdc-toolbar-mobile-landscape-width-breakpoint) and (max-height: $mdc-toolbar-mobile-breakpoint) {\n padding-top: $mdc-toolbar-mobile-landscape-row-height;\n }\n\n @media (max-width: $mdc-toolbar-mobile-breakpoint) {\n padding-top: $mdc-toolbar-mobile-row-height;\n }\n}\n\n.mdc-toolbar__section--shrink-to-fit {\n flex: none;\n}\n\n\n\n// WEBPACK FOOTER //\n// ./packages/mdc-toolbar/mdc-toolbar.scss","//\n// Copyright 2017 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n@import \"@material/feature-targeting/functions\";\n@import \"@material/feature-targeting/mixins\";\n@import \"./variables\";\n@import \"./functions\";\n\n@mixin mdc-theme-core-styles($query: mdc-feature-all()) {\n $feat-color: mdc-feature-create-target($query, color);\n\n :root {\n @include mdc-feature-targets($feat-color) {\n @each $style in map-keys($mdc-theme-property-values) {\n --mdc-theme-#{$style}: #{map-get($mdc-theme-property-values, $style)};\n }\n }\n }\n\n @each $style in map-keys($mdc-theme-property-values) {\n @if $style != \"background\" and $style != \"surface\" {\n .mdc-theme--#{$style} {\n @include mdc-feature-targets($feat-color) {\n @include mdc-theme-prop(color, $style, true);\n }\n }\n } @else {\n .mdc-theme--#{$style} {\n @include mdc-feature-targets($feat-color) {\n @include mdc-theme-prop(background-color, $style);\n }\n }\n }\n }\n\n // CSS rules for using primary and secondary (plus light/dark variants) as background colors.\n @each $style in (\"primary\", \"secondary\") {\n .mdc-theme--#{$style}-bg {\n @include mdc-feature-targets($feat-color) {\n @include mdc-theme-prop(background-color, $style, true);\n }\n }\n }\n}\n\n// Applies the correct theme color style to the specified property.\n// $property is typically color or background-color, but can be any CSS property that accepts color values.\n// $style should be one of the map keys in $mdc-theme-property-values (_variables.scss), or a color value.\n// $edgeOptOut controls whether to feature-detect around Edge to avoid emitting CSS variables for it,\n// intended for use in cases where interactions with pseudo-element styles cause problems due to Edge bugs.\n@mixin mdc-theme-prop($property, $style, $important: false, $edgeOptOut: false) {\n @if mdc-theme-is-var-with-fallback_($style) {\n @if $important {\n #{$property}: mdc-theme-get-var-fallback_($style) !important;\n /* @alternate */\n #{$property}: mdc-theme-var_($style) !important;\n } @else {\n #{$property}: mdc-theme-get-var-fallback_($style);\n /* @alternate */\n #{$property}: mdc-theme-var_($style);\n }\n } @else if mdc-theme-is-valid-theme-prop-value_($style) {\n @if $important {\n #{$property}: $style !important;\n } @else {\n #{$property}: $style;\n }\n } @else {\n @if not map-has-key($mdc-theme-property-values, $style) {\n @error \"Invalid style: '#{$style}'. Choose one of: #{map-keys($mdc-theme-property-values)}\";\n }\n\n $value: map-get($mdc-theme-property-values, $style);\n\n @if $important {\n #{$property}: $value !important;\n\n @if $edgeOptOut {\n // stylelint-disable max-nesting-depth\n @at-root {\n // IE 11 doesn't understand this syntax and ignores the entire block.\n // Edge understands this syntax and skips the entire block to avoid a nasty :before/:after pseudo-element bug.\n // All other browsers apply the styles within the block.\n @supports not (-ms-ime-align: auto) {\n // stylelint-disable scss/selector-no-redundant-nesting-selector\n & {\n /* @alternate */\n #{$property}: var(--mdc-theme-#{$style}, $value) !important;\n }\n // stylelint-enable scss/selector-no-redundant-nesting-selector\n }\n }\n // stylelint-enable max-nesting-depth\n } @else {\n /* @alternate */\n #{$property}: var(--mdc-theme-#{$style}, $value) !important;\n }\n } @else {\n #{$property}: $value;\n\n @if $edgeOptOut {\n // stylelint-disable max-nesting-depth\n @at-root {\n // IE 11 doesn't understand this syntax and ignores the entire block.\n // Edge understands this syntax and skips the entire block to avoid a nasty :before/:after pseudo-element bug.\n // All other browsers apply the styles within the block.\n @supports not (-ms-ime-align: auto) {\n // stylelint-disable scss/selector-no-redundant-nesting-selector\n & {\n /* @alternate */\n #{$property}: var(--mdc-theme-#{$style}, $value);\n }\n // stylelint-enable scss/selector-no-redundant-nesting-selector\n }\n }\n // stylelint-enable max-nesting-depth\n } @else {\n /* @alternate */\n #{$property}: var(--mdc-theme-#{$style}, $value);\n }\n }\n }\n}\n\n\n\n// WEBPACK FOOTER //\n// ./packages/material-components-web/node_modules/@material/theme/_mixins.scss","//\n// Copyright 2017 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n@import \"@material/theme/variables\"; // for mdc-theme-accessible-ink-color\n@import \"./variables\";\n\n//\n// Public\n//\n\n@mixin mdc-toolbar-ink-color($color) {\n @include mdc-theme-prop(color, $color);\n}\n\n@mixin mdc-toolbar-fill-color($color) {\n @include mdc-theme-prop(background-color, $color);\n}\n\n@mixin mdc-toolbar-fill-color-accessible($color) {\n @include mdc-toolbar-fill-color($color);\n @include mdc-toolbar-ink-color(mdc-theme-accessible-ink-color($color));\n\n .mdc-toolbar__icon {\n @include mdc-toolbar-icon-ink-color(mdc-theme-accessible-ink-color($color));\n }\n}\n\n@mixin mdc-toolbar-icon-ink-color($color) {\n @include mdc-theme-prop(color, $color);\n @include mdc-states($color);\n}\n\n//\n// Private\n//\n\n// Applies styles to the different types of icons that can exist in toolbars.\n// Both .mdc-toolbar__icon and .mdc-toolbar__menu-icon share all styles except for\n// horizontal padding.\n@mixin mdc-toolbar-icon_() {\n @include mdc-ripple-surface;\n @include mdc-ripple-radius-unbounded;\n\n // mdc-states is included within the mdc-toolbar-icon-ink-color mixin\n\n display: flex;\n position: relative;\n align-items: start;\n justify-content: center;\n box-sizing: border-box;\n width: $mdc-toolbar-icon-size + $mdc-toolbar-icon-padding * 2;\n height: $mdc-toolbar-icon-size + $mdc-toolbar-icon-padding * 2;\n padding: $mdc-toolbar-icon-padding;\n border: none;\n outline: none;\n background-color: transparent;\n fill: currentColor;\n color: inherit;\n text-decoration: none;\n cursor: pointer;\n}\n\n\n\n// WEBPACK FOOTER //\n// ./packages/mdc-toolbar/_mixins.scss","//\n// Copyright 2016 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n@import \"@material/animation/functions\";\n@import \"@material/animation/variables\";\n@import \"@material/base/mixins\";\n@import \"@material/feature-targeting/functions\";\n@import \"@material/feature-targeting/mixins\";\n@import \"@material/theme/mixins\";\n@import \"./functions\";\n@import \"./keyframes\";\n@import \"./variables\";\n\n@mixin mdc-ripple-core-styles($query: mdc-feature-all()) {\n // postcss-bem-linter: define ripple-surface\n\n $feat-structure: mdc-feature-create-target($query, structure);\n\n .mdc-ripple-surface {\n @include mdc-ripple-surface($query: $query);\n @include mdc-states($query: $query);\n @include mdc-ripple-radius-bounded($query: $query);\n\n @include mdc-feature-targets($feat-structure) {\n position: relative;\n outline: none;\n overflow: hidden;\n }\n\n &[data-mdc-ripple-is-unbounded] {\n @include mdc-ripple-radius-unbounded($query: $query);\n\n @include mdc-feature-targets($feat-structure) {\n overflow: visible;\n }\n }\n\n &--primary {\n @include mdc-states(primary, $query: $query);\n }\n\n &--accent {\n @include mdc-states(secondary, $query: $query);\n }\n }\n\n // postcss-bem-linter: end\n}\n\n@mixin mdc-ripple-common($query: mdc-feature-all()) {\n $feat-animation: mdc-feature-create-target($query, animation);\n $feat-structure: mdc-feature-create-target($query, structure);\n\n // Ensure that styles needed by any component using MDC Ripple are emitted, but only once.\n // (Every component using MDC Ripple imports these mixins, but doesn't necessarily import\n // mdc-ripple.scss.)\n @include mdc-feature-targets($feat-animation) {\n @include mdc-base-emit-once(\"mdc-ripple/common/animation\") {\n @include mdc-ripple-keyframes_;\n }\n }\n\n @include mdc-feature-targets($feat-structure) {\n @include mdc-base-emit-once(\"mdc-ripple/common/structure\") {\n // Styles used to detect buggy behavior of CSS custom properties in Edge.\n // See: https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/11495448/\n // This is included in _mixins.scss rather than mdc-ripple.scss so that it will be\n // present for other components which rely on ripple as well as mdc-ripple itself.\n .mdc-ripple-surface--test-edge-var-bug {\n --mdc-ripple-surface-test-edge-var: 1px solid #000;\n\n visibility: hidden;\n\n &::before {\n border: var(--mdc-ripple-surface-test-edge-var);\n }\n }\n }\n }\n}\n\n@mixin mdc-ripple-surface($query: mdc-feature-all()) {\n $feat-animation: mdc-feature-create-target($query, animation);\n $feat-structure: mdc-feature-create-target($query, structure);\n\n @include mdc-feature-targets($feat-structure) {\n --mdc-ripple-fg-size: 0;\n --mdc-ripple-left: 0;\n --mdc-ripple-top: 0;\n --mdc-ripple-fg-scale: 1;\n --mdc-ripple-fg-translate-end: 0;\n --mdc-ripple-fg-translate-start: 0;\n\n -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n }\n\n &::before,\n &::after {\n @include mdc-feature-targets($feat-structure) {\n position: absolute;\n border-radius: 50%;\n opacity: 0;\n pointer-events: none;\n content: \"\";\n }\n }\n\n &::before {\n @include mdc-feature-targets($feat-animation) {\n // Also transition background-color to avoid unnatural color flashes when toggling activated/selected state\n transition:\n opacity $mdc-states-wash-duration linear,\n background-color $mdc-states-wash-duration linear;\n }\n\n @include mdc-feature-targets($feat-structure) {\n z-index: 1; // Ensure that the ripple wash for hover/focus states is displayed on top of positioned child elements\n }\n }\n\n // Common styles for upgraded surfaces (some of these depend on custom properties set via JS or other mixins)\n\n &.mdc-ripple-upgraded::before {\n @include mdc-feature-targets($feat-structure) {\n transform: scale(var(--mdc-ripple-fg-scale, 1));\n }\n }\n\n &.mdc-ripple-upgraded::after {\n @include mdc-feature-targets($feat-structure) {\n top: 0;\n /* @noflip */\n left: 0;\n transform: scale(0);\n transform-origin: center center;\n }\n }\n\n &.mdc-ripple-upgraded--unbounded::after {\n @include mdc-feature-targets($feat-structure) {\n top: var(--mdc-ripple-top, 0);\n /* @noflip */\n left: var(--mdc-ripple-left, 0);\n }\n }\n\n &.mdc-ripple-upgraded--foreground-activation::after {\n @include mdc-feature-targets($feat-animation) {\n animation:\n mdc-ripple-fg-radius-in $mdc-ripple-translate-duration forwards,\n mdc-ripple-fg-opacity-in $mdc-ripple-fade-in-duration forwards;\n }\n }\n\n &.mdc-ripple-upgraded--foreground-deactivation::after {\n @include mdc-feature-targets($feat-animation) {\n animation: mdc-ripple-fg-opacity-out $mdc-ripple-fade-out-duration;\n }\n\n @include mdc-feature-targets($feat-structure) {\n // Retain transform from mdc-ripple-fg-radius-in activation\n transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1));\n }\n }\n}\n\n@mixin mdc-states-base-color($color, $query: mdc-feature-all()) {\n $feat-color: mdc-feature-create-target($query, color);\n\n &::before,\n &::after {\n @include mdc-feature-targets($feat-color) {\n @if alpha(mdc-theme-prop-value($color)) > 0 {\n @include mdc-theme-prop(background-color, $color, $edgeOptOut: true);\n } @else {\n // If a color with 0 alpha is specified, don't render the ripple pseudo-elements at all.\n // This avoids unnecessary transitions and overflow.\n content: none;\n }\n }\n }\n}\n\n@mixin mdc-states-hover-opacity($opacity, $query: mdc-feature-all()) {\n $feat-color: mdc-feature-create-target($query, color);\n\n // Background wash styles, for both CSS-only and upgraded stateful surfaces\n &:hover::before {\n // Opacity falls under color because the chosen opacity is color-dependent in typical usage\n @include mdc-feature-targets($feat-color) {\n opacity: $opacity;\n }\n }\n}\n\n@mixin mdc-states-focus-opacity($opacity, $has-nested-focusable-element: false, $query: mdc-feature-all()) {\n $feat-animation: mdc-feature-create-target($query, animation);\n // Opacity falls under color because the chosen opacity is color-dependent in typical usage\n $feat-color: mdc-feature-create-target($query, color);\n\n // Focus overrides hover by reusing the ::before pseudo-element.\n // :focus-within generally works on non-MS browsers and matches when a *child* of the element has focus.\n // It is useful for cases where a component has a focusable element within the root node, e.g. text field,\n // but undesirable in general in case of nested stateful components.\n // We use a modifier class for JS-enabled surfaces to support all use cases in all browsers.\n $cssOnlyFocusSelector: if(\n $has-nested-focusable-element,\n \"&:not(.mdc-ripple-upgraded):focus::before, &:not(.mdc-ripple-upgraded):focus-within::before\",\n \"&:not(.mdc-ripple-upgraded):focus::before\"\n );\n\n #{$cssOnlyFocusSelector},\n &.mdc-ripple-upgraded--background-focused::before {\n // Note that this duration is only effective on focus, not blur\n @include mdc-feature-targets($feat-animation) {\n transition-duration: 75ms;\n }\n\n @include mdc-feature-targets($feat-color) {\n opacity: $opacity;\n }\n }\n}\n\n@mixin mdc-states-press-opacity($opacity, $query: mdc-feature-all()) {\n $feat-animation: mdc-feature-create-target($query, animation);\n $feat-color: mdc-feature-create-target($query, color);\n\n // Styles for non-upgraded (CSS-only) stateful surfaces\n\n &:not(.mdc-ripple-upgraded) {\n // Apply press additively by using the ::after pseudo-element\n &::after {\n @include mdc-feature-targets($feat-animation) {\n transition: opacity $mdc-ripple-fade-out-duration linear;\n }\n }\n\n &:active::after {\n @include mdc-feature-targets($feat-animation) {\n transition-duration: $mdc-ripple-fade-in-duration;\n }\n\n // Opacity falls under color because the chosen opacity is color-dependent in typical usage\n @include mdc-feature-targets($feat-color) {\n opacity: $opacity;\n }\n }\n }\n\n &.mdc-ripple-upgraded {\n @include mdc-feature-targets($feat-color) {\n --mdc-ripple-fg-opacity: #{$opacity};\n }\n }\n}\n\n// Simple mixin for base states which automatically selects opacity values based on whether the ink color is\n// light or dark.\n@mixin mdc-states(\n $color: mdc-theme-prop-value(on-surface),\n $has-nested-focusable-element: false,\n $query: mdc-feature-all()\n) {\n @include mdc-states-interactions_($color, $has-nested-focusable-element, 0, $query);\n}\n\n// Simple mixin for activated states which automatically selects opacity values based on whether the ink color is\n// light or dark.\n@mixin mdc-states-activated($color, $has-nested-focusable-element: false, $query: mdc-feature-all()) {\n $feat-color: mdc-feature-create-target($query, color);\n $activated-opacity: mdc-states-opacity($color, activated);\n\n &--activated {\n // Stylelint seems to think that '&' qualifies as a type selector here?\n // stylelint-disable-next-line selector-max-type\n &::before {\n // Opacity falls under color because the chosen opacity is color-dependent.\n @include mdc-feature-targets($feat-color) {\n opacity: $activated-opacity;\n }\n }\n\n @include mdc-states-interactions_($color, $has-nested-focusable-element, $activated-opacity, $query);\n }\n}\n\n// Simple mixin for selected states which automatically selects opacity values based on whether the ink color is\n// light or dark.\n@mixin mdc-states-selected($color, $has-nested-focusable-element: false, $query: mdc-feature-all()) {\n $feat-color: mdc-feature-create-target($query, color);\n $selected-opacity: mdc-states-opacity($color, selected);\n\n &--selected {\n // stylelint-disable-next-line selector-max-type\n &::before {\n // Opacity falls under color because the chosen opacity is color-dependent.\n @include mdc-feature-targets($feat-color) {\n opacity: $selected-opacity;\n }\n }\n\n @include mdc-states-interactions_($color, $has-nested-focusable-element, $selected-opacity, $query);\n }\n}\n\n@mixin mdc-ripple-radius-bounded($radius: 100%, $query: mdc-feature-all()) {\n $feat-struture: mdc-feature-create-target($query, structure);\n\n &::before,\n &::after {\n @include mdc-feature-targets($feat-struture) {\n top: calc(50% - #{$radius});\n /* @noflip */\n left: calc(50% - #{$radius});\n width: $radius * 2;\n height: $radius * 2;\n }\n }\n\n &.mdc-ripple-upgraded::after {\n @include mdc-feature-targets($feat-struture) {\n width: var(--mdc-ripple-fg-size, $radius);\n height: var(--mdc-ripple-fg-size, $radius);\n }\n }\n}\n\n@mixin mdc-ripple-radius-unbounded($radius: 100%, $query: mdc-feature-all()) {\n $feat-struture: mdc-feature-create-target($query, structure);\n\n &::before,\n &::after {\n @include mdc-feature-targets($feat-struture) {\n top: calc(50% - #{$radius / 2});\n /* @noflip */\n left: calc(50% - #{$radius / 2});\n width: $radius;\n height: $radius;\n }\n }\n\n &.mdc-ripple-upgraded::before,\n &.mdc-ripple-upgraded::after {\n @include mdc-feature-targets($feat-struture) {\n top: var(--mdc-ripple-top, calc(50% - #{$radius / 2}));\n /* @noflip */\n left: var(--mdc-ripple-left, calc(50% - #{$radius / 2}));\n width: var(--mdc-ripple-fg-size, $radius);\n height: var(--mdc-ripple-fg-size, $radius);\n }\n }\n\n &.mdc-ripple-upgraded::after {\n @include mdc-feature-targets($feat-struture) {\n width: var(--mdc-ripple-fg-size, $radius);\n height: var(--mdc-ripple-fg-size, $radius);\n }\n }\n}\n\n@mixin mdc-states-interactions_(\n $color,\n $has-nested-focusable-element,\n $opacity-modifier: 0,\n $query: mdc-feature-all()\n) {\n @include mdc-states-base-color($color, $query);\n @include mdc-states-hover-opacity(mdc-states-opacity($color, hover) + $opacity-modifier, $query);\n @include mdc-states-focus-opacity(\n mdc-states-opacity($color, focus) + $opacity-modifier,\n $has-nested-focusable-element,\n $query\n );\n @include mdc-states-press-opacity(mdc-states-opacity($color, press) + $opacity-modifier, $query);\n}\n\n\n\n// WEBPACK FOOTER //\n// ./packages/material-components-web/node_modules/@material/ripple/_mixins.scss","//\n// Copyright 2017 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n$mdc-toolbar-row-height: 64px !default;\n$mdc-toolbar-mobile-row-height: 56px !default;\n$mdc-toolbar-mobile-landscape-row-height: 48px !default;\n\n$mdc-toolbar-element-section-padding: 8px !default;\n$mdc-toolbar-element-mobile-section-padding: 4px !default;\n\n$mdc-toolbar-element-horizontal-padding-desktop: 24px !default;\n$mdc-toolbar-element-horizontal-padding-mobile: 16px !default;\n$mdc-toolbar-title-margin-to-menu-icon-desktop: 8px !default;\n$mdc-toolbar-title-margin-to-menu-icon-mobile: 16px !default;\n\n$mdc-toolbar-ratio-to-extend-flexible: 4 !default;\n\n$mdc-toolbar-mobile-landscape-width-breakpoint: 959px !default;\n$mdc-toolbar-mobile-breakpoint: 599px !default;\n\n$mdc-toolbar-icon-padding: 12px !default;\n$mdc-toolbar-section-horizontal-padding: 12px !default;\n$mdc-toolbar-mobile-section-horizontal-padding: 4px !default;\n\n$mdc-toolbar-icon-size: 24px !default;\n\n\n\n// WEBPACK FOOTER //\n// ./packages/mdc-toolbar/_variables.scss","//\n// Copyright 2017 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n// Creates a rule that will be applied when an MDC Web component is within the context of an RTL layout.\n//\n// Usage Example:\n//\n// ```scss\n// .mdc-foo {\n// position: absolute;\n// left: 0;\n//\n// @include mdc-rtl {\n// left: auto;\n// right: 0;\n// }\n//\n// &__bar {\n// margin-left: 4px;\n// @include mdc-rtl(\".mdc-foo\") {\n// margin-left: auto;\n// margin-right: 4px;\n// }\n// }\n// }\n//\n// .mdc-foo--mod {\n// padding-left: 4px;\n//\n// @include mdc-rtl {\n// padding-left: auto;\n// padding-right: 4px;\n// }\n// }\n// ```\n//\n// Note that this mixin works by checking for an ancestor element with `[dir=\"rtl\"]`.\n// As a result, nested `dir` values are not supported:\n//\n// ```html\n// <html dir=\"rtl\">\n// <!-- ... -->\n// <div dir=\"ltr\">\n// <div class=\"mdc-foo\">Styled incorrectly as RTL!</div>\n// </div>\n// </html>\n// ```\n//\n// In the future, selectors such as the `:dir` pseudo-class (http://mdn.io/css/:dir) will help us mitigate this.\n@mixin mdc-rtl($root-selector: null) {\n @if ($root-selector) {\n @at-root {\n #{$root-selector}[dir=\"rtl\"] &,\n [dir=\"rtl\"] #{$root-selector} & {\n @content;\n }\n }\n } @else {\n [dir=\"rtl\"] &,\n &[dir=\"rtl\"] {\n @content;\n }\n }\n}\n\n// Takes a base box-model property name (`margin`, `border`, `padding`, etc.) along with a\n// default direction (`left` or `right`) and value, and emits rules which apply the given value to the\n// specified direction by default and the opposite direction in RTL.\n//\n// For example:\n//\n// ```scss\n// .mdc-foo {\n// @include mdc-rtl-reflexive-box(margin, left, 8px);\n// }\n// ```\n//\n// is equivalent to:\n//\n// ```scss\n// .mdc-foo {\n// margin-left: 8px;\n// margin-right: 0;\n//\n// @include mdc-rtl {\n// margin-left: 0;\n// margin-right: 8px;\n// }\n// }\n// ```\n//\n// whereas:\n//\n// ```scss\n// .mdc-foo {\n// @include mdc-rtl-reflexive-box(margin, right, 8px);\n// }\n// ```\n//\n// is equivalent to:\n//\n// ```scss\n// .mdc-foo {\n// margin-left: 0;\n// margin-right: 8px;\n//\n// @include mdc-rtl {\n// margin-left: 8px;\n// margin-right: 0;\n// }\n// }\n// ```\n//\n// You can also pass an optional 4th `$root-selector` argument which will be forwarded to `mdc-rtl`,\n// e.g. `@include mdc-rtl-reflexive-box(margin, left, 8px, \".mdc-component\")`.\n//\n// Note that this function will always zero out the original value in an RTL context.\n// If you're trying to flip the values, use `mdc-rtl-reflexive-property()` instead.\n@mixin mdc-rtl-reflexive-box($base-property, $default-direction, $value, $root-selector: null) {\n @if (index((right, left), $default-direction) == null) {\n @error \"Invalid default direction: '#{$default-direction}'. Please specifiy either 'right' or 'left'.\";\n }\n\n $left-value: $value;\n $right-value: 0;\n\n @if ($default-direction == right) {\n $left-value: 0;\n $right-value: $value;\n }\n\n @include mdc-rtl-reflexive-property($base-property, $left-value, $right-value, $root-selector);\n}\n\n// Takes a base property and emits rules that assign <base-property>-left to <left-value> and\n// <base-property>-right to <right-value> in a LTR context, and vice versa in a RTL context.\n// For example:\n//\n// ```scss\n// .mdc-foo {\n// @include mdc-rtl-reflexive-property(margin, auto, 12px);\n// }\n// ```\n//\n// is equivalent to:\n//\n// ```scss\n// .mdc-foo {\n// margin-left: auto;\n// margin-right: 12px;\n//\n// @include mdc-rtl {\n// margin-left: 12px;\n// margin-right: auto;\n// }\n// }\n// ```\n//\n// An optional 4th `$root-selector` argument can be given, which will be passed to `mdc-rtl`.\n@mixin mdc-rtl-reflexive-property($base-property, $left-value, $right-value, $root-selector: null) {\n $prop-left: #{$base-property}-left;\n $prop-right: #{$base-property}-right;\n\n @include mdc-rtl-reflexive($prop-left, $left-value, $prop-right, $right-value, $root-selector);\n}\n\n// Takes an argument specifying a horizontal position property (either \"left\" or \"right\") as well\n// as a value, and applies that value to the specified position in a LTR context, and flips it in a\n// RTL context. For example:\n//\n// ```scss\n// .mdc-foo {\n// @include mdc-rtl-reflexive-position(left, 0);\n// }\n// ```\n//\n// is equivalent to:\n//\n// ```scss\n// .mdc-foo {\n// left: 0;\n// right: initial;\n//\n// @include mdc-rtl {\n// left: initial;\n// right: 0;\n// }\n// }\n// ```\n//\n// An optional third $root-selector argument may also be given, which is passed to `mdc-rtl`.\n@mixin mdc-rtl-reflexive-position($position-property, $value, $root-selector: null) {\n @if (index((right, left), $position-property) == null) {\n @error \"Invalid position #{position-property}. Please specifiy either right or left\";\n }\n\n // TODO: \"initial\" is not supported in IE 11. https://caniuse.com/#feat=css-initial-value\n $left-value: $value;\n $right-value: initial;\n\n @if ($position-property == right) {\n $right-value: $value;\n $left-value: initial;\n }\n\n @include mdc-rtl-reflexive(left, $left-value, right, $right-value, $root-selector);\n}\n\n// Takes pair of properties with values as arguments and flips it in RTL context.\n// For example:\n//\n// ```scss\n// .mdc-foo {\n// @include mdc-rtl-reflexive(left, 2px, right, 5px);\n// }\n// ```\n//\n// is equivalent to:\n//\n// ```scss\n// .mdc-foo {\n// left: 2px;\n// right: 5px;\n//\n// @include mdc-rtl {\n// right: 2px;\n// left: 5px;\n// }\n// }\n// ```\n//\n// An optional fifth `$root-selector` argument may also be given, which is passed to `mdc-rtl`.\n@mixin mdc-rtl-reflexive(\n $left-property,\n $left-value,\n $right-property,\n $right-value,\n $root-selector: null\n) {\n /* @noflip */\n #{$left-property}: $left-value;\n /* @noflip */\n #{$right-property}: $right-value;\n\n @include mdc-rtl($root-selector) {\n /* @noflip */\n #{$left-property}: $right-value;\n /* @noflip */\n #{$right-property}: $left-value;\n }\n}\n\n\n\n// WEBPACK FOOTER //\n// ./packages/material-components-web/node_modules/@material/rtl/_mixins.scss","//\n// Copyright 2017 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n@import \"@material/feature-targeting/functions\";\n@import \"@material/feature-targeting/mixins\";\n@import \"./variables\";\n\n@mixin mdc-typography-core-styles($query: mdc-feature-all()) {\n .mdc-typography {\n @include mdc-typography-base($query: $query);\n }\n\n @each $style in map-keys($mdc-typography-styles) {\n .mdc-typography--#{$style} {\n @include mdc-typography($style, $query: $query);\n }\n }\n}\n\n@mixin mdc-typography-base($query: mdc-feature-all()) {\n $feat-typography: mdc-feature-create-target($query, typography);\n\n @include mdc-feature-targets($feat-typography) {\n @each $key, $value in $mdc-typography-base {\n #{$key}: $value;\n }\n }\n}\n\n@mixin mdc-typography($style, $query: mdc-feature-all()) {\n $feat-typography: mdc-feature-create-target($query, typography);\n $style-props: map-get($mdc-typography-styles, $style);\n\n @if not map-has-key($mdc-typography-styles, $style) {\n @error \"Invalid style specified! #{$style} doesn't exist. Choose one of #{map-keys($mdc-typography-styles)}\";\n }\n\n @include mdc-feature-targets($feat-typography) {\n @each $key, $value in $style-props {\n #{$key}: $value;\n }\n }\n}\n\n// Element must be `display: block` or `display: inline-block` for this to work.\n@mixin mdc-typography-overflow-ellipsis($query: mdc-feature-all()) {\n $feat-structure: mdc-feature-create-target($query, structure);\n\n @include mdc-feature-targets($feat-structure) {\n text-overflow: ellipsis;\n white-space: nowrap;\n overflow: hidden;\n }\n}\n\n@mixin mdc-typography-baseline-top($distance, $query: mdc-feature-all()) {\n $feat-structure: mdc-feature-create-target($query, structure);\n\n @include mdc-feature-targets($feat-structure) {\n display: block;\n margin-top: 0;\n /* @alternate */\n line-height: normal;\n }\n\n &::before {\n @include mdc-feature-targets($feat-structure) {\n @include mdc-typography-baseline-strut_($distance);\n\n vertical-align: 0;\n }\n }\n}\n\n@mixin mdc-typography-baseline-bottom($distance, $query: mdc-feature-all()) {\n $feat-structure: mdc-feature-create-target($query, structure);\n\n @include mdc-feature-targets($feat-structure) {\n margin-bottom: -1 * $distance;\n }\n\n &::after {\n @include mdc-feature-targets($feat-structure) {\n @include mdc-typography-baseline-strut_($distance);\n\n vertical-align: -1 * $distance;\n }\n }\n}\n\n@mixin mdc-typography-baseline-strut_($distance) {\n display: inline-block;\n width: 0;\n height: $distance;\n content: \"\";\n}\n\n\n\n// WEBPACK FOOTER //\n// ./packages/material-components-web/node_modules/@material/typography/_mixins.scss","//\n// Copyright 2017 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n@import \"@material/feature-targeting/functions\";\n@import \"@material/feature-targeting/mixins\";\n@import \"@material/theme/variables\";\n@import \"./variables\";\n\n@mixin mdc-elevation-core-styles($query: mdc-feature-all()) {\n $feat-animation: mdc-feature-create-target($query, animation);\n $feat-structure: mdc-feature-create-target($query, structure);\n\n @for $z-value from 0 through 24 {\n .mdc-elevation--z#{$z-value} {\n @include mdc-elevation($z-value, $query: $query);\n }\n }\n\n .mdc-elevation-transition {\n @include mdc-feature-targets($feat-animation) {\n transition: mdc-elevation-transition-value();\n }\n\n @include mdc-feature-targets($feat-structure) {\n will-change: $mdc-elevation-property;\n }\n }\n}\n\n// Applies the correct CSS rules to an element to give it the elevation specified by $z-value.\n// The $z-value must be between 0 and 24.\n// If $color has an alpha channel, it will be ignored and overridden. To increase the opacity of the shadow, use\n// $opacity-boost.\n@mixin mdc-elevation($z-value, $color: $mdc-elevation-baseline-color, $opacity-boost: 0, $query: mdc-feature-all()) {\n @if type-of($z-value) != number or not unitless($z-value) {\n @error \"$z-value must be a unitless number, but received '#{$z-value}'\";\n }\n\n @if $z-value < 0 or $z-value > 24 {\n @error \"$z-value must be between 0 and 24, but received '#{$z-value}'\";\n }\n\n $feat-color: mdc-feature-create-target($query, color);\n\n $color: mdc-theme-prop-value($color);\n\n $umbra-z-value: map-get($mdc-elevation-umbra-map, $z-value);\n $penumbra-z-value: map-get($mdc-elevation-penumbra-map, $z-value);\n $ambient-z-value: map-get($mdc-elevation-ambient-map, $z-value);\n\n $umbra-color: rgba($color, $mdc-elevation-umbra-opacity + $opacity-boost);\n $penumbra-color: rgba($color, $mdc-elevation-penumbra-opacity + $opacity-boost);\n $ambient-color: rgba($color, $mdc-elevation-ambient-opacity + $opacity-boost);\n\n @include mdc-feature-targets($feat-color) {\n box-shadow:\n #{\"#{$umbra-z-value} #{$umbra-color}\"},\n #{\"#{$penumbra-z-value} #{$penumbra-color}\"},\n #{$ambient-z-value} $ambient-color;\n }\n}\n\n// Returns a string that can be used as the value for a `transition` property for elevation.\n// Calling this function directly is useful in situations where a component needs to transition\n// more than one property.\n//\n// ```scss\n// .foo {\n// transition: mdc-elevation-transition-value(), opacity 100ms ease;\n// will-change: $mdc-elevation-property, opacity;\n// }\n// ```\n@function mdc-elevation-transition-value(\n $duration: $mdc-elevation-transition-duration,\n $easing: $mdc-elevation-transition-timing-function\n) {\n @return #{$mdc-elevation-property} #{$duration} #{$easing};\n}\n\n\n\n// WEBPACK FOOTER //\n// ./packages/material-components-web/node_modules/@material/elevation/_mixins.scss","//\n// Copyright 2017 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n@import \"@material/animation/variables\";\n\n$mdc-elevation-baseline-color: black !default;\n$mdc-elevation-umbra-opacity: .2 !default;\n$mdc-elevation-penumbra-opacity: .14 !default;\n$mdc-elevation-ambient-opacity: .12 !default;\n\n$mdc-elevation-umbra-map: (\n 0: \"0px 0px 0px 0px\",\n 1: \"0px 2px 1px -1px\",\n 2: \"0px 3px 1px -2px\",\n 3: \"0px 3px 3px -2px\",\n 4: \"0px 2px 4px -1px\",\n 5: \"0px 3px 5px -1px\",\n 6: \"0px 3px 5px -1px\",\n 7: \"0px 4px 5px -2px\",\n 8: \"0px 5px 5px -3px\",\n 9: \"0px 5px 6px -3px\",\n 10: \"0px 6px 6px -3px\",\n 11: \"0px 6px 7px -4px\",\n 12: \"0px 7px 8px -4px\",\n 13: \"0px 7px 8px -4px\",\n 14: \"0px 7px 9px -4px\",\n 15: \"0px 8px 9px -5px\",\n 16: \"0px 8px 10px -5px\",\n 17: \"0px 8px 11px -5px\",\n 18: \"0px 9px 11px -5px\",\n 19: \"0px 9px 12px -6px\",\n 20: \"0px 10px 13px -6px\",\n 21: \"0px 10px 13px -6px\",\n 22: \"0px 10px 14px -6px\",\n 23: \"0px 11px 14px -7px\",\n 24: \"0px 11px 15px -7px\"\n) !default;\n\n$mdc-elevation-penumbra-map: (\n 0: \"0px 0px 0px 0px\",\n 1: \"0px 1px 1px 0px\",\n 2: \"0px 2px 2px 0px\",\n 3: \"0px 3px 4px 0px\",\n 4: \"0px 4px 5px 0px\",\n 5: \"0px 5px 8px 0px\",\n 6: \"0px 6px 10px 0px\",\n 7: \"0px 7px 10px 1px\",\n 8: \"0px 8px 10px 1px\",\n 9: \"0px 9px 12px 1px\",\n 10: \"0px 10px 14px 1px\",\n 11: \"0px 11px 15px 1px\",\n 12: \"0px 12px 17px 2px\",\n 13: \"0px 13px 19px 2px\",\n 14: \"0px 14px 21px 2px\",\n 15: \"0px 15px 22px 2px\",\n 16: \"0px 16px 24px 2px\",\n 17: \"0px 17px 26px 2px\",\n 18: \"0px 18px 28px 2px\",\n 19: \"0px 19px 29px 2px\",\n 20: \"0px 20px 31px 3px\",\n 21: \"0px 21px 33px 3px\",\n 22: \"0px 22px 35px 3px\",\n 23: \"0px 23px 36px 3px\",\n 24: \"0px 24px 38px 3px\"\n) !default;\n\n$mdc-elevation-ambient-map: (\n 0: \"0px 0px 0px 0px\",\n 1: \"0px 1px 3px 0px\",\n 2: \"0px 1px 5px 0px\",\n 3: \"0px 1px 8px 0px\",\n 4: \"0px 1px 10px 0px\",\n 5: \"0px 1px 14px 0px\",\n 6: \"0px 1px 18px 0px\",\n 7: \"0px 2px 16px 1px\",\n 8: \"0px 3px 14px 2px\",\n 9: \"0px 3px 16px 2px\",\n 10: \"0px 4px 18px 3px\",\n 11: \"0px 4px 20px 3px\",\n 12: \"0px 5px 22px 4px\",\n 13: \"0px 5px 24px 4px\",\n 14: \"0px 5px 26px 4px\",\n 15: \"0px 6px 28px 5px\",\n 16: \"0px 6px 30px 5px\",\n 17: \"0px 6px 32px 5px\",\n 18: \"0px 7px 34px 6px\",\n 19: \"0px 7px 36px 6px\",\n 20: \"0px 8px 38px 7px\",\n 21: \"0px 8px 40px 7px\",\n 22: \"0px 8px 42px 7px\",\n 23: \"0px 9px 44px 8px\",\n 24: \"0px 9px 46px 8px\"\n) !default;\n\n// The css property used for elevation. In most cases this should not be changed. It is exposed\n// as a variable for abstraction / easy use when needing to reference the property directly, for\n// example in a `will-change` rule.\n$mdc-elevation-property: box-shadow !default;\n\n// The default duration value for elevation transitions.\n$mdc-elevation-transition-duration: 280ms !default;\n\n// The default easing value for elevation transitions.\n$mdc-elevation-transition-timing-function: $mdc-animation-standard-curve-timing-function !default;\n\n\n\n// WEBPACK FOOTER //\n// ./packages/material-components-web/node_modules/@material/elevation/_variables.scss"],"sourceRoot":""} |