| 1 |
- {"version":3,"sources":["webpack:///./packages/mdc-ripple/mdc-ripple.scss","webpack:///./packages/mdc-ripple/_mixins.scss","webpack:///./packages/material-components-web/node_modules/@material/theme/_mixins.scss"],"names":[],"mappings":";;;;;;;AA4BE,2CACE,KACE,sHAKA,oJAGF,GACE,yMAXJ,mCACE,KACE,sHAKA,oJAGF,GACE,yMAIJ,4CACE,KACE,0EACA,UAGF,GACE,yCAPJ,oCACE,KACE,0EACA,UAGF,GACE,yCAIJ,6CACE,KACE,0EACA,wCAGF,GACE,WAPJ,qCACE,KACE,0EACA,wCAGF,GACE,WCrBJ,oBAiDE,wBACA,qBACA,oBACA,yBACA,iCACA,mCAEA,0CAlDE,kBACA,aACA,gBAoDJ,uDAGI,kBACA,kBACA,UACA,oBACA,WAIJ,4BAGI,4DAMA,UAOF,gDAEI,sGAIJ,+CAEI,MAEA,OACA,8CACA,sEAMJ,0DAEI,6BAEA,+BAMJ,sEAEI,uLACE,CAON,wEAEI,4FAKA,wMAUN,uDC1GE,sBDkJA,kCAGI,WA0OM,CAxMR,gIAeF,yBAIA,WAyLU,CA7KV,qDAEI,gCAKF,4DAEI,yBAKA,WAqKI,CA/JZ,wCAEI,8BA8EJ,uDAGI,qBAEA,sBACA,WACA,YAKF,+CAEI,sCACA,uCAlWJ,kDAII,iBAwWN,mHAGI,oBAEA,qBACA,WACA,WAVK,CAeP,2JAGI,2CAEA,6CACA,sCACA,uCAIJ,6EAEI,sCACA,uCAnQN,yECnGE,yBAEA,mDDyIA,2CAGI,WA0OM,CAxMR,kJAeF,yBAIA,WAyLU,CA7KV,8DAEI,gCAKF,qEAEI,yBAKA,WAqKI,CA/JZ,iDAEI,8BAlIJ,uECnGE,yBAEA,qDDyIA,0CAGI,WA0OM,CAxMR,gJAeF,yBAIA,WAyLU,CA7KV,6DAEI,gCAKF,oEAEI,yBAKA,WAqKI,CA/JZ,gDAEI,8B","file":"mdc.ripple.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// MDC Ripple keyframes are split into their own file so that _mixins.scss can rely on them.\n\n@use \"@material/animation/variables\";\n@use \"./variables\" as variables2;\n\n@mixin keyframes_ {\n @keyframes mdc-ripple-fg-radius-in {\n from {\n animation-timing-function: variables.$standard-curve-timing-function;\n // NOTE: For these keyframes, we do not need custom property fallbacks because they are only\n // used in conjunction with `.mdc-ripple-upgraded`. Since MDCRippleFoundation checks to ensure\n // that custom properties are supported within the browser before adding this class, we can\n // safely use them without a fallback.\n transform: translate(var(--mdc-ripple-fg-translate-start, 0)) scale(1);\n }\n\n to {\n transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1));\n }\n }\n\n @keyframes mdc-ripple-fg-opacity-in {\n from {\n animation-timing-function: linear;\n opacity: 0;\n }\n\n to {\n opacity: var(--mdc-ripple-fg-opacity, 0);\n }\n }\n\n @keyframes mdc-ripple-fg-opacity-out {\n from {\n animation-timing-function: linear;\n opacity: var(--mdc-ripple-fg-opacity, 0);\n }\n\n to {\n opacity: 0;\n }\n }\n}\n","//\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@use \"sass:color\";\n@use \"sass:map\";\n@use \"@material/animation/functions\" as functions2;\n@use \"@material/animation/variables\" as variables2;\n@use \"@material/base/mixins\" as base-mixins;\n@use \"@material/feature-targeting/functions\" as feature-targeting-functions;\n@use \"@material/feature-targeting/mixins\" as feature-targeting-mixins;\n@use \"@material/theme/mixins\" as theme-mixins;\n@use \"./functions\";\n@use \"./keyframes\";\n@use \"./variables\";\n@use \"@material/theme/variables\" as theme-variables;\n\n@mixin core-styles($query: feature-targeting-functions.all()) {\n // postcss-bem-linter: define ripple-surface\n\n $feat-structure: feature-targeting-functions.create-target($query, structure);\n\n .mdc-ripple-surface {\n @include surface($query: $query);\n @include states($query: $query);\n @include radius-bounded($query: $query);\n\n @include feature-targeting-mixins.targets($feat-structure) {\n position: relative;\n outline: none;\n overflow: hidden;\n }\n\n &[data-mdc-ripple-is-unbounded] {\n @include radius-unbounded($query: $query);\n\n @include feature-targeting-mixins.targets($feat-structure) {\n overflow: visible;\n }\n }\n\n &--primary {\n @include states(primary, $query: $query);\n }\n\n &--accent {\n @include states(secondary, $query: $query);\n }\n }\n\n // postcss-bem-linter: end\n}\n\n@mixin common($query: feature-targeting-functions.all()) {\n $feat-animation: feature-targeting-functions.create-target($query, animation);\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 feature-targeting-mixins.targets($feat-animation) {\n @include base-mixins.emit-once(\"mdc-ripple/common/animation\") {\n @include keyframes.keyframes_;\n }\n }\n}\n\n@mixin surface($query: feature-targeting-functions.all(), $ripple-target: \"&\") {\n $feat-animation: feature-targeting-functions.create-target($query, animation);\n $feat-structure: feature-targeting-functions.create-target($query, structure);\n\n @include feature-targeting-mixins.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 // !!DO NOT REMOVE!! mdc-ripple-will-change-replacer\n }\n\n #{$ripple-target}::before,\n #{$ripple-target}::after {\n @include feature-targeting-mixins.targets($feat-structure) {\n position: absolute;\n border-radius: 50%;\n opacity: 0;\n pointer-events: none;\n content: \"\";\n }\n }\n\n #{$ripple-target}::before {\n @include feature-targeting-mixins.targets($feat-animation) {\n // Also transition background-color to avoid unnatural color flashes when toggling activated/selected state\n transition:\n opacity variables.$states-wash-duration linear,\n background-color variables.$states-wash-duration linear;\n }\n\n @include feature-targeting-mixins.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 {\n #{$ripple-target}::before {\n @include feature-targeting-mixins.targets($feat-structure) {\n transform: scale(var(--mdc-ripple-fg-scale, 1));\n }\n }\n\n #{$ripple-target}::after {\n @include feature-targeting-mixins.targets($feat-structure) {\n top: 0;\n /* @noflip */\n left: 0;\n transform: scale(0);\n transform-origin: center center;\n }\n }\n }\n\n &.mdc-ripple-upgraded--unbounded {\n #{$ripple-target}::after {\n @include feature-targeting-mixins.targets($feat-structure) {\n top: var(--mdc-ripple-top, 0);\n /* @noflip */\n left: var(--mdc-ripple-left, 0);\n }\n }\n }\n\n &.mdc-ripple-upgraded--foreground-activation {\n #{$ripple-target}::after {\n @include feature-targeting-mixins.targets($feat-animation) {\n animation:\n mdc-ripple-fg-radius-in variables.$translate-duration forwards,\n mdc-ripple-fg-opacity-in variables.$fade-in-duration forwards;\n }\n }\n }\n\n &.mdc-ripple-upgraded--foreground-deactivation {\n #{$ripple-target}::after {\n @include feature-targeting-mixins.targets($feat-animation) {\n animation: mdc-ripple-fg-opacity-out variables.$fade-out-duration;\n }\n\n @include feature-targeting-mixins.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\n@mixin states-base-color(\n $color, $query: feature-targeting-functions.all(), $ripple-target: \"&\") {\n $feat-color: feature-targeting-functions.create-target($query, color);\n\n #{$ripple-target}::before,\n #{$ripple-target}::after {\n @include feature-targeting-mixins.targets($feat-color) {\n @if color.alpha(theme-variables.prop-value($color)) > 0 {\n @include theme-mixins.prop(background-color, $color);\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///\n/// Customizes ripple opacities in `hover`, `focus`, or `press` states\n/// @param {map} $opacity-map - map specifying custom opacity of zero or more states\n/// @param {bool} $has-nested-focusable-element - whether the component contains a focusable element in the root\n///\n@mixin states-opacities($opacity-map: (), $has-nested-focusable-element: false, $query: feature-targeting-functions.all()) {\n // Ensure sufficient specificity to override base state opacities\n @if map.has-key($opacity-map, hover) {\n @include states-hover-opacity(map.get($opacity-map, hover), $query: $query);\n }\n\n @if map.has-key($opacity-map, focus) {\n @include states-focus-opacity(map.get($opacity-map, focus), $has-nested-focusable-element, $query: $query);\n }\n\n @if map.has-key($opacity-map, press) {\n @include states-press-opacity(map.get($opacity-map, press), $query: $query);\n }\n}\n\n@mixin states-hover-opacity(\n $opacity, $query: feature-targeting-functions.all(), $ripple-target: \"&\") {\n $feat-color: feature-targeting-functions.create-target($query, color);\n\n // Background wash styles, for both CSS-only and upgraded stateful surfaces\n &:hover {\n #{$ripple-target}::before {\n // Opacity falls under color because the chosen opacity is color-dependent in typical usage\n @include feature-targeting-mixins.targets($feat-color) {\n opacity: $opacity;\n }\n }\n }\n}\n\n@mixin states-focus-opacity(\n $opacity,\n $has-nested-focusable-element: false,\n $query: feature-targeting-functions.all(),\n $ripple-target: \"&\") {\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 @if $has-nested-focusable-element {\n // JS-enabled selectors.\n &.mdc-ripple-upgraded--background-focused,\n &.mdc-ripple-upgraded:focus-within,\n // CSS-only selectors.\n &:not(.mdc-ripple-upgraded):focus,\n &:not(.mdc-ripple-upgraded):focus-within {\n #{$ripple-target}::before {\n @include states-focus-opacity-properties_(\n $opacity: $opacity, $query: $query);\n }\n }\n } @else {\n // JS-enabled selectors.\n &.mdc-ripple-upgraded--background-focused,\n // CSS-only selectors.\n &:not(.mdc-ripple-upgraded):focus {\n #{$ripple-target}::before {\n @include states-focus-opacity-properties_(\n $opacity: $opacity, $query: $query);\n }\n }\n }\n}\n\n@mixin states-focus-opacity-properties_($opacity, $query) {\n $feat-animation: feature-targeting-functions.create-target($query, animation);\n // Opacity falls under color because the chosen opacity is color-dependent in typical usage\n $feat-color: feature-targeting-functions.create-target($query, color);\n\n // Note that this duration is only effective on focus, not blur\n @include feature-targeting-mixins.targets($feat-animation) {\n transition-duration: 75ms;\n }\n\n @include feature-targeting-mixins.targets($feat-color) {\n opacity: $opacity;\n }\n}\n\n@mixin states-press-opacity($opacity, $query: feature-targeting-functions.all(), $ripple-target: \"&\") {\n $feat-animation: feature-targeting-functions.create-target($query, animation);\n $feat-color: feature-targeting-functions.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 #{$ripple-target}::after {\n @include feature-targeting-mixins.targets($feat-animation) {\n transition: opacity variables.$fade-out-duration linear;\n }\n }\n\n &:active {\n #{$ripple-target}::after {\n @include feature-targeting-mixins.targets($feat-animation) {\n transition-duration: variables.$fade-in-duration;\n }\n\n // Opacity falls under color because the chosen opacity is color-dependent in typical usage\n @include feature-targeting-mixins.targets($feat-color) {\n opacity: $opacity;\n }\n }\n }\n }\n\n &.mdc-ripple-upgraded {\n @include feature-targeting-mixins.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 states(\n $color: theme-variables.prop-value(on-surface),\n $has-nested-focusable-element: false,\n $query: feature-targeting-functions.all(),\n $ripple-target: \"&\",\n) {\n @include states-interactions_(\n $color: $color,\n $has-nested-focusable-element: $has-nested-focusable-element,\n $query: $query,\n $ripple-target: $ripple-target);\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 states-activated(\n $color, $has-nested-focusable-element: false, $query: feature-targeting-functions.all(), $ripple-target: \"&\") {\n $feat-color: feature-targeting-functions.create-target($query, color);\n $activated-opacity: functions.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 #{$ripple-target}::before {\n // Opacity falls under color because the chosen opacity is color-dependent.\n @include feature-targeting-mixins.targets($feat-color) {\n opacity: $activated-opacity;\n }\n }\n\n @include states-interactions_(\n $color: $color,\n $has-nested-focusable-element: $has-nested-focusable-element,\n $opacity-modifier: $activated-opacity,\n $query: $query,\n $ripple-target: $ripple-target);\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 states-selected(\n $color,\n $has-nested-focusable-element: false,\n $query: feature-targeting-functions.all(),\n $ripple-target: \"&\") {\n $feat-color: feature-targeting-functions.create-target($query, color);\n $selected-opacity: functions.states-opacity($color, selected);\n\n &--selected {\n // stylelint-disable-next-line selector-max-type\n #{$ripple-target}::before {\n // Opacity falls under color because the chosen opacity is color-dependent.\n @include feature-targeting-mixins.targets($feat-color) {\n opacity: $selected-opacity;\n }\n }\n\n @include states-interactions_(\n $color: $color,\n $has-nested-focusable-element: $has-nested-focusable-element,\n $opacity-modifier: $selected-opacity,\n $query: $query,\n $ripple-target: $ripple-target);\n }\n}\n\n@mixin radius-bounded(\n $radius: 100%, $query: feature-targeting-functions.all(), $ripple-target: \"&\") {\n $feat-struture: feature-targeting-functions.create-target($query, structure);\n\n #{$ripple-target}::before,\n #{$ripple-target}::after {\n @include feature-targeting-mixins.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 {\n #{$ripple-target}::after {\n @include feature-targeting-mixins.targets($feat-struture) {\n width: var(--mdc-ripple-fg-size, $radius);\n height: var(--mdc-ripple-fg-size, $radius);\n }\n }\n }\n}\n\n@mixin radius-unbounded(\n $radius: 100%, $query: feature-targeting-functions.all(), $ripple-target: \"&\") {\n $feat-struture: feature-targeting-functions.create-target($query, structure);\n\n #{$ripple-target}::before,\n #{$ripple-target}::after {\n @include feature-targeting-mixins.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 {\n #{$ripple-target}::before,\n #{$ripple-target}::after {\n @include feature-targeting-mixins.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 #{$ripple-target}::after {\n @include feature-targeting-mixins.targets($feat-struture) {\n width: var(--mdc-ripple-fg-size, $radius);\n height: var(--mdc-ripple-fg-size, $radius);\n }\n }\n }\n}\n\n@mixin states-interactions_(\n $color,\n $has-nested-focusable-element,\n $opacity-modifier: 0,\n $query: feature-targeting-functions.all(),\n $ripple-target: \"&\",\n) {\n @include target-selector($ripple-target) {\n @include states-base-color($color, $query);\n }\n\n @include states-hover-opacity(\n $opacity: functions.states-opacity($color, hover) + $opacity-modifier,\n $query: $query,\n $ripple-target: $ripple-target);\n @include states-focus-opacity(\n $opacity: functions.states-opacity($color, focus) + $opacity-modifier,\n $has-nested-focusable-element: $has-nested-focusable-element,\n $query: $query,\n $ripple-target: $ripple-target,\n );\n @include states-press-opacity(\n $opacity: functions.states-opacity($color, press) + $opacity-modifier,\n $query: $query,\n $ripple-target: $ripple-target);\n}\n\n// Wraps content in the `ripple-target` selector if it exists.\n@mixin target-selector($ripple-target: \"&\") {\n @if $ripple-target == \"&\" {\n @content;\n } @else {\n #{$ripple-target} {\n @content;\n }\n }\n}\n\n// Common styles for a ripple target element.\n// Used for components which have an inner ripple target element.\n@mixin target-common($query: feature-targeting-functions.all()) {\n $feat-structure: feature-targeting-functions.create-target($query, structure);\n\n @include feature-targeting-mixins.targets($feat-structure) {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n // Necessary for clicks on other inner elements (e.g. close icon in chip)\n // to go through.\n pointer-events: none;\n }\n}\n","//\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@use \"sass:map\";\n@use \"@material/feature-targeting/functions\" as feature-targeting-functions;\n@use \"@material/feature-targeting/mixins\";\n@use \"./variables\";\n@use \"./functions\";\n\n@mixin core-styles($query: feature-targeting-functions.all()) {\n $feat-color: feature-targeting-functions.create-target($query, color);\n\n :root {\n @include mixins.targets($feat-color) {\n @each $style in map.keys(variables.$property-values) {\n --mdc-theme-#{$style}: #{map.get(variables.$property-values, $style)};\n }\n }\n }\n\n @each $style in map.keys(variables.$property-values) {\n @if $style != \"background\" and $style != \"surface\" {\n .mdc-theme--#{$style} {\n @include mixins.targets($feat-color) {\n @include prop(color, $style, true);\n }\n }\n } @else {\n .mdc-theme--#{$style} {\n @include mixins.targets($feat-color) {\n @include 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 mixins.targets($feat-color) {\n @include 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@mixin prop($property, $style, $important: false) {\n $important-rule: if($important, \"!important\", \"\");\n\n @if functions.is-var-with-fallback_($style) {\n #{$property}: functions.get-var-fallback_($style) #{$important-rule};\n /* @alternate */\n #{$property}: functions.var_($style) #{$important-rule};\n } @else if variables.is-valid-theme-prop-value_($style) {\n #{$property}: $style #{$important-rule};\n } @else {\n @if not map.has-key(variables.$property-values, $style) {\n @error \"Invalid style: '#{$style}'. Choose one of: #{map.keys(variables.$property-values)}\";\n }\n $value: map.get(variables.$property-values, $style);\n\n #{$property}: $value #{$important-rule};\n /* @alternate */\n #{$property}: var(--mdc-theme-#{$style}, $value) #{$important-rule};\n }\n}\n"],"sourceRoot":""}
|
