@material/textfield
Version:
The Material Components for the web text field component
1 lines • 204 kB
Source Map (JSON)
{"version":3,"sources":["webpack:///./packages/mdc-textfield/mdc-text-field.scss","webpack:///./packages/material-components-web/node_modules/@material/typography/_typography.scss","webpack:///./packages/material-components-web/node_modules/@material/theme/_css.scss","webpack:///./packages/material-components-web/node_modules/@material/line-ripple/_mixins.scss","webpack:///./packages/material-components-web/node_modules/@material/notched-outline/_mixins.scss","webpack:///./packages/material-components-web/node_modules/@material/rtl/_rtl.scss","webpack:///./packages/material-components-web/node_modules/@material/notched-outline/_variables.scss","webpack:///./packages/material-components-web/node_modules/@material/ripple/_ripple.scss","webpack:///./packages/material-components-web/node_modules/@material/animation/_animation.scss","webpack:///./packages/mdc-textfield/_mixins.scss","webpack:///./packages/mdc-textfield/helper-text/_mixins.scss","webpack:///./packages/mdc-textfield/character-counter/_mixins.scss","webpack:///./packages/mdc-textfield/icon/_mixins.scss","webpack:///./packages/mdc-textfield/_variables.scss","webpack:///./packages/material-components-web/node_modules/@material/ripple/_ripple-theme.scss","webpack:///./packages/material-components-web/node_modules/@material/dom/_dom.scss"],"names":[],"mappings":"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AEA,sJAIF,IACE,8JAOA,wJAIF,KAEE,qJA5BJ,iFACE,GAEE,oJAIF,IACE,8IAEA,sJAIF,IACE,8JAOA,wJAIF,KAEE,qJAsCN,iMAEI,wLApEF,6FACE,GAEE,sJAIF,IACE,8IAEA,wJAIF,IACE,8JAOA,0JAIF,KAEE,uJA5BJ,qFACE,GAEE,sJAIF,IACE,8IAEA,wJAIF,IACE,8JAOA,0JAIF,KAEE,uJSkDN,oCP5IE,kCGEE,2FHFF,kCOmsDF,+ETxjDE,2BS6pDA,CAjGF,4FT5jDE,yCS6qDA,CLpiDF,6HAEI,2BKmgDF,CAjoDF,sEA8sCE,eAEA,gBA8WF,iHT3kDE,2BS6pDA,CA9EF,8HT/kDE,yCS6qDA,CArpDF,4BAEI,aACA,8BACA,sBAGF,4CAEI,kBIjIc,CJkId,iBIlIc,CJ4IpB,sCAEI,sBAsuEJ,4EP/5EE,6BE8DF,oKAII,gBShDkB,CJgoDtB,kIAGI,ULtkDJ,4GAEI,eS/DkB,CT6DtB,qIAEI,aKilDyC,CNxoD3C,uFDtCE,4BAYF,oDCgBA,gFD5BE,4BAYF,oDO+5EF,4EP36EI,cAYF,sCQ+BF,wJR3CI,cAYF,sCOo5BF,gDPh6BI,oBAYF,4CUsFF,wFVlGI,cAYF,sCC0BA,iFDtCE,4BAYF,oDEkDF,iQF9DI,qBAYF,6CEkDF,4aF9DI,qBAYF,6CEkDF,yUF9DI,qBAYF,6COgoDF,iGAEI,UAn7CJ,0BA43CE,oBA+wBF,iDP11EE,0BOi8EF,WAGE,4EPp8EA,0BOo8EA,uEPp8EA,0BOo8EA,wEPp8EA,0BOo8EA,8DPp8EA,2BOy8EF,WAGE,uEP58EA,2BO+5EF,8CP/5EE,0BQqBF,kFRrBE,0BSqBF,oJTrBE,0BU4EF,yDV5EE,yBUsFF,0DVtFE,yBOw6EA,yDPx6EA,0BOk7EA,yDPl7EA,0BC0BA,mDD1BA,wCEkDF,uKFlDE,iCOi8EF,sEAGE,4EPp8EA,eOo8EA,uEPp8EA,eOo8EA,wEPp8EA,eOo8EA,8DPp8EA,gBOy8EF,sEAGE,uEP58EA,gBaoBA,sEN24EF,8CP/5EE,gBaoBA,sELCF,kFRrBE,gBaoBA,sEJCF,oJTrBE,gBaoBA,sEHwDF,yDV5EE,gBaoBA,sEHkEF,0DVtFE,gBaoBA,sENo5EA,yDPx6EA,gBaoBA,sEN85EA,yDPl7EA,gBaoBA,sEZMA,mDD1BA,8BaoBA,sEX8BF,uKFlDE,uBagBA,0CN6iDA,iDAEI,wBAIJ,8CAEI,WASN,8CAEI,eA93CF,iDPlNA,yBOomDF,yEAII,aAl5CF,iDAq4CA,oBAwpBF,oDAII,iBJrvEA,2HI2vEE,gBAaF,0OAGE,cAGF,qIAEE,eAEA,iBIpqES,CJuqEX,qIAEE,iBIvqES,CJyqET,gBAKF,qIACE,QAGF,qIACE,QAGF,qHACE,QAGF,qIACE,QAGF,uIACE,QAcF,6KAIE,iBAGF,6LAGE,kBIxtEqB,CJ2tEvB,6LAEE,gBI3tEqB,CH1J3B,4BTiSE,kCACA,mCCvQE,+BAYF,6GAZE,kBAYF,2DAZE,oBAYF,+DAZE,gBAYF,2DAZE,8BAYF,4EAZE,wBAYF,sJAZE,uBAYF,qEDsSA,aA2CQ,CAoBN,aAEA,mBSzYA,SACA,UACA,oBAIA,0DToZJ,oCAyCA,qBACA,QACA,WSxc0C,CTyc1C,WAxCI,iBSpZJ,wCAEI,gBAIA,UACA,oBCxBJ,kCVmSE,kCACA,mCCvQE,+BAYF,6GAZE,kBAYF,2DAZE,oBAYF,+DAZE,gBAYF,2DAZE,8BAYF,4EAZE,wBAYF,sJAZE,uBAYF,qEDsSA,aA2CQ,CAoBN,aAEA,mBCvWF,kEShCE,mBVwZJ,0CAyCA,qBACA,QACA,WU1c0C,CV2c1C,WAxCI,iBI1XA,uFHFF,gCGEE,uFHFF,kCU5CF,sBAoEE,kBACA,eAGF,2EAGI,eACA,oBAzEF,0BAqFA,cAhFF,+BVoCE,kCGEE,iFHFF,kCUhCF,gCAoGE,YAJU,CVhEV,iCGEE,mFHFF,iC","file":"mdc.textfield.min.css","sourcesContent":["//\n// Copyright 2018 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// stylelint-disable selector-class-pattern --\n// Selector '.mdc-*' should only be used in this project.\n\n@use '@material/rtl/rtl';\n@use '@material/theme/theme-color';\n@use '@material/theme/theme';\n@use '@material/feature-targeting/feature-targeting';\n@use '@material/animation/variables' as animation-variables;\n@use '@material/typography/typography';\n@use './variables';\n\n@mixin core-styles($query: feature-targeting.all()) {\n $feat-structure: feature-targeting.create-target($query, structure);\n $feat-animation: feature-targeting.create-target($query, animation);\n\n // postcss-bem-linter: define floating-label\n .mdc-floating-label {\n @include typography.typography(\n subtitle1,\n $exclude-props: (line-height),\n $query: $query\n );\n\n @include feature-targeting.targets($feat-structure) {\n position: absolute;\n @include rtl.ignore-next-line();\n left: 0;\n @include rtl.ignore-next-line();\n -webkit-transform-origin: left top;\n @include rtl.ignore-next-line();\n transform-origin: left top;\n line-height: 1.15rem;\n text-align: left;\n text-overflow: ellipsis;\n white-space: nowrap;\n cursor: text;\n overflow: hidden;\n\n /* @alternate */\n // Force the label into its own layer to prevent visible layer promotion adjustments\n // when the ripple is activated behind it.\n will-change: transform;\n\n @include rtl.rtl {\n @include rtl.ignore-next-line();\n right: 0;\n @include rtl.ignore-next-line();\n left: auto;\n @include rtl.ignore-next-line();\n -webkit-transform-origin: right top;\n @include rtl.ignore-next-line();\n transform-origin: right top;\n @include rtl.ignore-next-line();\n text-align: right;\n }\n }\n\n @include feature-targeting.targets($feat-animation) {\n transition: transform variables.$transition-duration\n animation-variables.$standard-curve-timing-function,\n color variables.$transition-duration\n animation-variables.$standard-curve-timing-function;\n }\n }\n\n .mdc-floating-label--float-above {\n @include feature-targeting.targets($feat-structure) {\n cursor: auto;\n }\n }\n\n .mdc-floating-label--required {\n &::after {\n @include _required-content($query);\n }\n\n @include rtl.rtl {\n &::after {\n @include _required-content-rtl($query);\n }\n }\n }\n\n @at-root {\n @include float-position(variables.$position-y, $query: $query);\n @include shake-animation(standard, $query: $query);\n }\n\n @include shake-keyframes(standard, variables.$position-y, $query: $query);\n}\n\n@mixin ink-color($color, $query: feature-targeting.all()) {\n $feat-color: feature-targeting.create-target($query, color);\n\n @include feature-targeting.targets($feat-color) {\n @include theme.property(color, $color);\n }\n}\n\n// Used for textarea in case of scrolling\n@mixin fill-color($color, $query: feature-targeting.all()) {\n $feat-color: feature-targeting.create-target($query, color);\n\n @include feature-targeting.targets($feat-color) {\n @include theme.property(background-color, $color);\n }\n}\n\n@mixin shake-keyframes(\n $modifier,\n $positionY,\n $positionX: 0%,\n $scale: variables.$float-scale,\n $query: feature-targeting.all()\n) {\n $feat-animation: feature-targeting.create-target($query, animation);\n\n @include feature-targeting.targets($feat-animation) {\n @keyframes mdc-floating-label-shake-float-above-#{$modifier} {\n 0% {\n @include rtl.ignore-next-line();\n transform: translateX(calc(0 - #{$positionX}))\n translateY(-#{$positionY}) scale(#{$scale});\n }\n\n 33% {\n animation-timing-function: cubic-bezier(0.5, 0, 0.701732, 0.495819);\n @include rtl.ignore-next-line();\n transform: translateX(calc(4% - #{$positionX}))\n translateY(-#{$positionY}) scale(#{$scale});\n }\n\n 66% {\n animation-timing-function: cubic-bezier(\n 0.302435,\n 0.381352,\n 0.55,\n 0.956352\n );\n @include rtl.ignore-next-line();\n transform: translateX(calc(-4% - #{$positionX}))\n translateY(-#{$positionY}) scale(#{$scale});\n }\n\n 100% {\n @include rtl.ignore-next-line();\n transform: translateX(calc(0 - #{$positionX}))\n translateY(-#{$positionY}) scale(#{$scale});\n }\n }\n }\n}\n\n@mixin float-position(\n $positionY,\n $positionX: 0%,\n $scale: variables.$float-scale,\n $query: feature-targeting.all()\n) {\n $feat-structure: feature-targeting.create-target($query, structure);\n\n .mdc-floating-label--float-above {\n @include feature-targeting.targets($feat-structure) {\n @if $positionX > 0 or $positionX < 0 {\n @include rtl.ignore-next-line();\n transform: translateY(-1 * $positionY)\n translateX(-1 * $positionX)\n scale($scale);\n\n @include rtl.rtl {\n @include rtl.ignore-next-line();\n transform: translateY(-1 * $positionY) translateX($positionX)\n scale($scale);\n }\n } @else {\n transform: translateY(-1 * $positionY) scale($scale);\n }\n }\n }\n}\n\n@mixin shake-animation($modifier, $query: feature-targeting.all()) {\n $feat-animation: feature-targeting.create-target($query, animation);\n\n .mdc-floating-label--shake {\n @include feature-targeting.targets($feat-animation) {\n animation: mdc-floating-label-shake-float-above-#{$modifier} 250ms 1;\n }\n }\n}\n\n@mixin max-width($max-width, $query: feature-targeting.all()) {\n $feat-structure: feature-targeting.create-target($query, structure);\n\n @include feature-targeting.targets($feat-structure) {\n max-width: $max-width;\n }\n}\n\n///\n/// Sets the CSS transition for the floating animation.\n///\n/// @param {Number} $duration-ms - Duration (in ms) of the animation.\n/// @param {String} $timing-function - Optionally overrides the default animation timing function.\n///\n@mixin float-transition(\n $duration-ms,\n $timing-function: animation-variables.$standard-curve-timing-function,\n $query: feature-targeting.all()\n) {\n $feat-animation: feature-targeting.create-target($query, animation);\n\n @include feature-targeting.targets($feat-animation) {\n transition: color $duration-ms $timing-function,\n transform $duration-ms $timing-function;\n }\n}\n\n@mixin _required-content($query: feature-targeting.all()) {\n $feat-structure: feature-targeting.create-target($query, structure);\n\n @include feature-targeting.targets($feat-structure) {\n @include rtl.ignore-next-line();\n margin-left: 1px;\n @include rtl.ignore-next-line();\n margin-right: 0px;\n content: '*';\n }\n}\n\n// Need to specify LTR/RTL manually since rtl mixins will add ::after[dir=rtl]\n// selector and that breaks some browsers\n@mixin _required-content-rtl($query: feature-targeting.all()) {\n $feat-structure: feature-targeting.create-target($query, structure);\n\n @include feature-targeting.targets($feat-structure) {\n @include rtl.ignore-next-line();\n margin-left: 0;\n @include rtl.ignore-next-line();\n margin-right: 1px;\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// stylelint-disable selector-class-pattern --\n// Selector '.mdc-*' should only be used in this project.\n\n@use 'sass:math';\n@use 'sass:list';\n@use 'sass:map';\n@use 'sass:string';\n@use '@material/feature-targeting/feature-targeting';\n@use '@material/theme/custom-properties';\n@use '@material/theme/keys';\n@use '@material/theme/theme';\n\n/// @deprecated Avoid calling this function directly. Instead, configure the\n/// `$styles-<style>` variable Maps.\n@function set-styles_($base-styles, $scale-styles, $override-styles) {\n $options: (\n custom-property-prefix: typography,\n );\n\n $base-styles: keys.set-values($base-styles, $options: $options);\n\n @each $style, $style-props in $scale-styles {\n @each $base-key in map.keys($base-styles) {\n // Ignore the return result, it's not needed\n $unused: keys.add-link(keys.combine($style, $base-key), $base-key);\n }\n\n // Merge base properties for all styles.\n $style-props: map.merge($base-styles, $style-props);\n\n // Merge overrides onto each style.\n $style-props: map.merge($style-props, map.get($override-styles, $style));\n\n // Register keys for this style\n @each $property, $value in $style-props {\n $unused: keys.set-value(\n keys.combine($style, $property),\n $value,\n $options: $options\n );\n }\n\n // Override original styles with new styles.\n $scale-styles: map.merge($scale-styles, (#{$style}: $style-props));\n }\n\n @return $scale-styles;\n}\n\n@function get-letter-spacing_($tracking, $font-size) {\n @return math.div($tracking, $font-size * 16) * 1em;\n}\n\n@function px-to-rem($px) {\n @if custom-properties.is-custom-prop($px) {\n @return custom-properties.set-fallback(\n $px,\n _px-to-rem(custom-properties.get-fallback($px))\n );\n }\n @return _px-to-rem($px);\n}\n\n@function _px-to-rem($px) {\n @if $px == null {\n @return null;\n }\n @return math.div($px, 16px) * 1rem;\n}\n\n$font-family: string.unquote('Roboto, sans-serif') !default;\n\n// Override styles\n$styles-headline1: () !default;\n$styles-headline2: () !default;\n$styles-headline3: () !default;\n$styles-headline4: () !default;\n$styles-headline5: () !default;\n$styles-headline6: () !default;\n$styles-subtitle1: () !default;\n$styles-subtitle2: () !default;\n$styles-body1: () !default;\n$styles-body2: () !default;\n$styles-caption: () !default;\n$styles-button: () !default;\n$styles-overline: () !default;\n\n/// @deprecated Do not override this variable. Use the $styles-<style> override\n/// Map variables instead, or $font-family to set the base font family.\n$base: (\n font-family: $font-family,\n) !default;\n\n$font-weight-values: (\n thin: 100,\n light: 300,\n regular: 400,\n medium: 500,\n bold: 700,\n black: 900,\n) !default;\n\n/// @deprecated Do not override this variable. Use the $styles-<style> override\n/// Map variables instead.\n$styles: set-styles_(\n $base,\n (\n headline1: (\n font-size: px-to-rem(96px),\n line-height: px-to-rem(96px),\n font-weight: map.get($font-weight-values, light),\n letter-spacing: get-letter-spacing_(-1.5, 6),\n text-decoration: inherit,\n text-transform: inherit,\n ),\n headline2: (\n font-size: px-to-rem(60px),\n line-height: px-to-rem(60px),\n font-weight: map.get($font-weight-values, light),\n letter-spacing: get-letter-spacing_(-0.5, 3.75),\n text-decoration: inherit,\n text-transform: inherit,\n ),\n headline3: (\n font-size: px-to-rem(48px),\n line-height: px-to-rem(50px),\n font-weight: map.get($font-weight-values, regular),\n letter-spacing: normal,\n text-decoration: inherit,\n text-transform: inherit,\n ),\n headline4: (\n font-size: px-to-rem(34px),\n line-height: px-to-rem(40px),\n font-weight: map.get($font-weight-values, regular),\n letter-spacing: get-letter-spacing_(0.25, 2.125),\n text-decoration: inherit,\n text-transform: inherit,\n ),\n headline5: (\n font-size: px-to-rem(24px),\n line-height: px-to-rem(32px),\n font-weight: map.get($font-weight-values, regular),\n letter-spacing: normal,\n text-decoration: inherit,\n text-transform: inherit,\n ),\n headline6: (\n font-size: px-to-rem(20px),\n line-height: px-to-rem(32px),\n font-weight: map.get($font-weight-values, medium),\n letter-spacing: get-letter-spacing_(0.25, 1.25),\n text-decoration: inherit,\n text-transform: inherit,\n ),\n subtitle1: (\n font-size: px-to-rem(16px),\n line-height: px-to-rem(28px),\n font-weight: map.get($font-weight-values, regular),\n letter-spacing: get-letter-spacing_(0.15, 1),\n text-decoration: inherit,\n text-transform: inherit,\n ),\n subtitle2: (\n font-size: px-to-rem(14px),\n line-height: px-to-rem(22px),\n font-weight: map.get($font-weight-values, medium),\n letter-spacing: get-letter-spacing_(0.1, 0.875),\n text-decoration: inherit,\n text-transform: inherit,\n ),\n body1: (\n font-size: px-to-rem(16px),\n line-height: px-to-rem(24px),\n font-weight: map.get($font-weight-values, regular),\n letter-spacing: get-letter-spacing_(0.5, 1),\n text-decoration: inherit,\n text-transform: inherit,\n ),\n body2: (\n font-size: px-to-rem(14px),\n line-height: px-to-rem(20px),\n font-weight: map.get($font-weight-values, regular),\n letter-spacing: get-letter-spacing_(0.25, 0.875),\n text-decoration: inherit,\n text-transform: inherit,\n ),\n caption: (\n font-size: px-to-rem(12px),\n line-height: px-to-rem(20px),\n font-weight: map.get($font-weight-values, regular),\n letter-spacing: get-letter-spacing_(0.4, 0.75),\n text-decoration: inherit,\n text-transform: inherit,\n ),\n button: (\n font-size: px-to-rem(14px),\n line-height: px-to-rem(36px),\n font-weight: map.get($font-weight-values, medium),\n letter-spacing: get-letter-spacing_(1.25, 0.875),\n text-decoration: none,\n text-transform: uppercase,\n ),\n overline: (\n font-size: px-to-rem(12px),\n line-height: px-to-rem(32px),\n font-weight: map.get($font-weight-values, medium),\n letter-spacing: get-letter-spacing_(2, 0.75),\n text-decoration: none,\n text-transform: uppercase,\n ),\n ),\n (\n headline1: $styles-headline1,\n headline2: $styles-headline2,\n headline3: $styles-headline3,\n headline4: $styles-headline4,\n headline5: $styles-headline5,\n headline6: $styles-headline6,\n subtitle1: $styles-subtitle1,\n subtitle2: $styles-subtitle2,\n body1: $styles-body1,\n body2: $styles-body2,\n caption: $styles-caption,\n button: $styles-button,\n overline: $styles-overline,\n )\n) !default;\n\n// A copy of the styles Map that is used to detect compile-time changes for\n// Angular support.\n$_styles-copy: $styles;\n\n@function is-typography-style($style) {\n @return map.has-key($styles, $style);\n}\n\n@function get-typography-styles() {\n @return map.keys($styles);\n}\n\n@mixin core-styles($query: feature-targeting.all()) {\n .mdc-typography {\n @include base($query: $query);\n }\n\n @each $style in get-typography-styles() {\n .mdc-typography--#{$style} {\n @include typography($style, $query: $query);\n }\n }\n}\n\n@mixin base($query: feature-targeting.all()) {\n $feat-typography: feature-targeting.create-target($query, typography);\n\n @include smooth-font($query: $query);\n @include feature-targeting.targets($feat-typography) {\n @include theme.property(font-family, font-family);\n }\n}\n\n@mixin typography($style, $query: feature-targeting.all(), $exclude-props: ()) {\n $feat-typography: feature-targeting.create-target($query, typography);\n\n @if not is-typography-style($style) {\n @error \"Invalid style specified! #{$style} doesn't exist. Choose one of #{get-typography-styles()}\";\n }\n\n @include smooth-font($query: $query);\n @include feature-targeting.targets($feat-typography) {\n @each $key in keys.get-keys($style) {\n // <style>-<property>: headline1-font-size\n // Slice the string past the first key separator to retrieve the\n // property name\n $property: string.slice($key, string.index($key, '-') + 1);\n @if list.index($exclude-props, $property) == null {\n $current-global-value: map.get($styles, $style, $property);\n $configured-global-value: map.get($_styles-copy, $style, $property);\n @if $current-global-value != $configured-global-value {\n // A compile time change was made to $mdc-typography-styles. To\n // support Angular, use this value instead of the key's value.\n @if $current-global-value {\n // Only emit if the overridden value exists\n $custom-prop: keys.create-custom-property($key);\n $custom-prop: custom-properties.set-fallback(\n $custom-prop,\n $current-global-value\n );\n @include theme.property($property, $custom-prop);\n }\n } @else {\n // Otherwise, use the key, which may be different from the original\n // configured global value.\n @include theme.property($property, $key);\n }\n }\n }\n }\n}\n\n/// Applies antialiasing via font-smoothing to text.\n@mixin smooth-font($query: feature-targeting.all()) {\n $feat-typography: feature-targeting.create-target($query, typography);\n\n @include feature-targeting.targets($feat-typography) {\n -moz-osx-font-smoothing: grayscale;\n -webkit-font-smoothing: antialiased;\n }\n}\n\n// Element must be `display: block` or `display: inline-block` for this to work.\n@mixin overflow-ellipsis($query: feature-targeting.all()) {\n $feat-structure: feature-targeting.create-target($query, structure);\n\n @include feature-targeting.targets($feat-structure) {\n text-overflow: ellipsis;\n white-space: nowrap;\n overflow: hidden;\n }\n}\n\n/// Sets a container's baseline that text content will align to.\n///\n/// If the `$display` is set to a flexbox display, only `$top` baseline may be\n/// set. A separate element must be added as a child of the container with a\n/// `$bottom` baseline.\n///\n/// @param {Number} $top - the distance from the top of the container to the\n/// text's baseline.\n/// @param {Number} $bottom - the distance from the text's baseline to the\n/// bottom of the container.\n/// @param {String} $display - the display type of the container. May be `flex`,\n/// `inline-flex`, `block`, or `inline-block`.\n@mixin baseline(\n $top: 0,\n $bottom: 0,\n $display: block,\n $query: feature-targeting.all()\n) {\n $validDisplayTypes: (flex, inline-flex, block, inline-block);\n\n @if list.index($validDisplayTypes, $display) == null {\n @error \"mdc-typography: invalid display specified! #{$display} must be one of #{$validDisplayTypes}\";\n }\n\n $isFlexbox: $display == 'flex' or $display == 'inline-flex';\n $feat-structure: feature-targeting.create-target($query, structure);\n\n @include feature-targeting.targets($feat-structure) {\n display: $display;\n\n @if $isFlexbox {\n align-items: baseline;\n }\n }\n\n @if $top > 0 {\n @include baseline-top($top, $query: $query);\n }\n\n @if $bottom > 0 {\n @if $isFlexbox {\n @error \"mdc-typography: invalid baseline with display type. #{$display} cannot specifiy $bottom. Add a separate child element with its own $bottom.\";\n }\n\n @include baseline-bottom($bottom, $query: $query);\n }\n}\n\n/// Sets the baseline of flow text content.\n///\n/// Separate `$top` and `$bottom` baselines may be specified. You should ensure\n/// that the `$top` baseline matches the previous text content's $bottom\n/// baseline to ensure text is positioned appropriately.\n///\n/// See go/css-baseline for reference on how this mixin works.\n///\n/// This is intended for text flow content only (e.g. `<h1>`, `<p>`, `<span>`,\n/// or `<div>` with only text content). Use `baseline()` to set the baseline of\n/// containers that are flexbox or have non-flow content children.\n///\n/// @param {Number} $top - the distance from the top of the container to the\n/// text's baseline.\n/// @param {Number} $bottom - the distance from the text's baseline to the\n/// bottom of the container.\n/// @param {Boolean} $lineHeight - the line-height to use for the text. This\n/// is the distance between baselines of multiple lines of text.\n/// @param {String} $display - the display type of the container. May be `block`\n/// or `inline-block`.\n@mixin text-baseline(\n $top: 0,\n $bottom: 0,\n $display: block,\n $lineHeight: normal,\n $query: feature-targeting.all()\n) {\n $validDisplayTypes: (block, inline-block);\n\n @if list.index($validDisplayTypes, $display) == null {\n @error \"mdc-typography: invalid display specified! #{$display} must be one of #{$validDisplayTypes}\";\n }\n\n $feat-structure: feature-targeting.create-target($query, structure);\n\n @include baseline(\n $display: $display,\n $top: $top,\n $bottom: $bottom,\n $query: $query\n );\n @include feature-targeting.targets($feat-structure) {\n @if $top > 0 {\n margin-top: 0;\n /* @alternate */\n line-height: #{$lineHeight};\n }\n\n @if $bottom > 0 {\n margin-bottom: -1 * $bottom;\n }\n }\n}\n\n/// Creates a baseline strut from the top of a container. This mixin is for\n/// advanced users, prefer `baseline()`.\n///\n/// @param {Number} $distance - The distance from the top of the container to\n/// the text's baseline.\n@mixin baseline-top($distance, $query: feature-targeting.all()) {\n $feat-structure: feature-targeting.create-target($query, structure);\n\n &::before {\n @include feature-targeting.targets($feat-structure) {\n @include baseline-strut_($distance);\n\n vertical-align: 0;\n }\n }\n}\n\n/// Creates a baseline strut from the baseline to the bottom of a container.\n/// This mixin is for advanced users, prefer `baseline()`.\n///\n/// @param {Number} $distance - The distance from the text's baseline to the\n/// bottom of the container.\n@mixin baseline-bottom($distance, $query: feature-targeting.all()) {\n $feat-structure: feature-targeting.create-target($query, structure);\n\n &::after {\n @include feature-targeting.targets($feat-structure) {\n @include baseline-strut_($distance);\n\n vertical-align: -1 * $distance;\n }\n }\n}\n\n/// Adds an invisible, zero-width prefix to a container's text.\n/// This ensures that the baseline is always where the text would be, instead\n/// of defaulting to the container bottom when text is empty. Do not use this\n/// mixin if the `baseline` mixin is already applied.\n@mixin zero-width-prefix($query: feature-targeting.all()) {\n $feat-structure: feature-targeting.create-target($query, structure);\n\n &::before {\n @include feature-targeting.targets($feat-structure) {\n content: '\\200b';\n }\n }\n}\n\n@mixin baseline-strut_($distance) {\n display: inline-block;\n width: 0;\n height: $distance;\n content: '';\n}\n\n@function get-font($typography) {\n @return map.get($styles, $typography, font-family);\n}\n\n@function get-line-height($typography) {\n @return map.get($styles, $typography, line-height);\n}\n\n@function get-size($typography) {\n @return map.get($styles, $typography, font-size);\n}\n\n@function get-weight($typography) {\n @return map.get($styles, $typography, font-weight);\n}\n\n@function get-tracking($typography) {\n @return map.get($styles, $typography, letter-spacing);\n}\n\n$_typography-theme: (\n font: null,\n line-height: null,\n size: null,\n weight: null,\n tracking: null,\n);\n\n@mixin theme-styles($theme) {\n @include theme.validate-theme-keys($_typography-theme, $theme);\n\n @include theme.property(font-family, map.get($theme, font));\n @include theme.property(line-height, map.get($theme, line-height));\n @include theme.property(font-size, map.get($theme, size));\n @include theme.property(font-weight, map.get($theme, weight));\n @include theme.property(letter-spacing, map.get($theme, tracking));\n}\n","//\n// Copyright 2020 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:list';\n@use 'sass:map';\n@use 'sass:meta';\n@use './gss';\n\n/// When true, add an additional property/value declaration before declarations\n/// that use advanced features such as custom properties or CSS functions. This\n/// adds fallback support for older browsers such as IE11 that do not support\n/// these features at the cost of additional CSS. Set this variable to false to\n/// disable generating fallback declarations.\n$enable-fallback-declarations: true !default;\n\n/// Writes a CSS property/value declaration. This mixin is used throughout the\n/// theme package for consistency for dynamically setting CSS property values.\n///\n/// This mixin may optionally take a fallback value. For advanced features such\n/// as custom properties or CSS functions like min and max, a fallback value is\n/// recommended to support older browsers.\n///\n/// @param {String} $property - The CSS property of the declaration.\n/// @param {*} $value - The value of the CSS declaration. The value should be\n/// resolved by other theme functions first (i.e. custom property Maps and\n/// Material theme keys are not supported in this mixin). If the value is\n/// null, no declarations will be emitted.\n/// @param {*} $fallback - An optional fallback value for older browsers. If\n/// provided, a second property/value declaration will be added before the\n/// main property/value declaration.\n/// @param {Map} $gss - An optional Map of GSS annotations to add.\n/// @param {Bool} $important - If true, add `!important` to the declaration.\n@mixin declaration(\n $property,\n $value,\n $fallback-value: null,\n $gss: (),\n $important: false\n) {\n // Normally setting a null value to a property will not emit CSS, so mixins\n // wouldn't need to check this. However, Sass will throw an error if the\n // interpolated property is a custom property.\n @if $value != null {\n $important-rule: if($important, ' !important', '');\n\n @if $fallback-value and $enable-fallback-declarations {\n @include gss.annotate($gss);\n #{$property}: #{$fallback-value} #{$important-rule};\n\n // Add @alternate to annotations.\n $gss: map.merge(\n $gss,\n (\n alternate: true,\n )\n );\n }\n\n @include gss.annotate($gss);\n #{$property}: #{$value}#{$important-rule};\n }\n}\n\n/// Unpacks shorthand values for CSS properties (i.e. lists of 1-3 values).\n/// If a list of 4 values is given, it is returned as-is.\n///\n/// Examples:\n///\n/// unpack-value(4px) => 4px 4px 4px 4px\n/// unpack-value(4px 2px) => 4px 2px 4px 2px\n/// unpack-value(4px 2px 2px) => 4px 2px 2px 2px\n/// unpack-value(4px 2px 0 2px) => 4px 2px 0 2px\n///\n/// @param {Number | Map | List} $value - List of 1 to 4 value numbers.\n/// @return {List} a List of 4 value numbers.\n@function unpack-value($value) {\n @if meta.type-of($value) == 'map' or list.length($value) == 1 {\n @return $value $value $value $value;\n } @else if list.length($value) == 4 {\n @return $value;\n } @else if list.length($value) == 3 {\n @return list.nth($value, 1) list.nth($value, 2) list.nth($value, 3)\n list.nth($value, 2);\n } @else if list.length($value) == 2 {\n @return list.nth($value, 1) list.nth($value, 2) list.nth($value, 1)\n list.nth($value, 2);\n }\n\n @error \"Invalid CSS property value: '#{$value}' is more than 4 values\";\n}\n","//\n// Copyright 2018 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// stylelint-disable selector-class-pattern --\n// Selector '.mdc-*' should only be used in this project.\n\n@use '@material/feature-targeting/feature-targeting';\n@use '@material/theme/theme';\n@use './functions';\n\n// Public\n\n@mixin core-styles($query: feature-targeting.all()) {\n $feat-structure: feature-targeting.create-target($query, structure);\n $feat-animation: feature-targeting.create-target($query, animation);\n\n // postcss-bem-linter: define line-ripple\n .mdc-line-ripple {\n @include feature-targeting.targets($feat-structure) {\n &::before,\n &::after {\n position: absolute;\n bottom: 0;\n left: 0;\n width: 100%;\n border-bottom-style: solid;\n content: '';\n }\n\n @include height(1px);\n\n &::before {\n z-index: 1;\n }\n\n &::after {\n transform: scaleX(0);\n border-bottom-width: 2px;\n opacity: 0;\n z-index: 2;\n }\n }\n\n @include feature-targeting.targets($feat-animation) {\n &::after {\n transition: functions.transition-value(transform),\n functions.transition-value(opacity);\n }\n }\n }\n\n .mdc-line-ripple--active::after {\n @include feature-targeting.targets($feat-structure) {\n transform: scaleX(1);\n opacity: 1;\n }\n }\n\n .mdc-line-ripple--deactivating::after {\n @include feature-targeting.targets($feat-structure) {\n opacity: 0;\n }\n }\n}\n\n@mixin height($height) {\n &::before {\n border-bottom-width: $height;\n }\n}\n\n@mixin active-color($color, $query: feature-targeting.all()) {\n $feat-color: feature-targeting.create-target($query, color);\n\n @include feature-targeting.targets($feat-color) {\n &::after {\n @include theme.property(border-bottom-color, $color);\n }\n }\n}\n\n@mixin inactive-color($color, $query: feature-targeting.all()) {\n $feat-color: feature-targeting.create-target($query, color);\n\n @include feature-targeting.targets($feat-color) {\n &::before {\n @include theme.property(border-bottom-color, $color);\n }\n }\n}\n","//\n// Copyright 2018 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// stylelint-disable selector-class-pattern --\n// Selector '.mdc-*' should only be used in this project.\n\n@use 'sass:list';\n@use '@material/theme/custom-properties';\n@use '@material/theme/theme';\n@use '@material/shape/functions' as shape-functions;\n@use '@material/shape/mixins' as shape-mixins;\n@use '@material/floating-label/mixins' as floating-label-mixins;\n@use '@material/feature-targeting/feature-targeting';\n@use '@material/rtl/rtl';\n@use './variables';\n\n@mixin core-styles($query: feature-targeting.all()) {\n $feat-structure: feature-targeting.create-target($query, structure);\n\n .mdc-notched-outline {\n @include base_($query);\n\n &__leading,\n &__notch,\n &__trailing {\n @include feature-targeting.targets($feat-structure) {\n box-sizing: border-box;\n height: 100%;\n border-top: variables.$border-width solid;\n border-bottom: variables.$border-width solid;\n pointer-events: none;\n }\n }\n\n &__leading {\n @include feature-targeting.targets($feat-structure) {\n @include rtl.reflexive-property(\n border,\n variables.$border-width solid,\n none\n );\n\n width: variables.$leading-width;\n }\n }\n\n &__trailing {\n @include feature-targeting.targets($feat-structure) {\n @include rtl.reflexive-property(\n border,\n none,\n variables.$border-width solid\n );\n\n flex-grow: 1;\n }\n }\n\n &__notch {\n @include feature-targeting.targets($feat-structure) {\n flex: 0 0 auto;\n width: auto;\n max-width: calc(100% - #{variables.$leading-width} * 2);\n }\n }\n\n .mdc-floating-label {\n @include feature-targeting.targets($feat-structure) {\n display: inline-block;\n position: relative;\n max-width: 100%;\n }\n }\n\n .mdc-floating-label--float-above {\n @include feature-targeting.targets($feat-structure) {\n text-overflow: clip;\n }\n }\n\n &--upgraded .mdc-floating-label--float-above {\n @include feature-targeting.targets($feat-structure) {\n max-width: calc(100% / 0.75);\n }\n }\n }\n\n .mdc-notched-outline--notched {\n .mdc-notched-outline__notch {\n @include feature-targeting.targets($feat-structure) {\n @include rtl.reflexive-box(padding, right, 8px);\n\n border-top: none;\n }\n }\n }\n\n .mdc-notched-outline--no-label {\n .mdc-notched-outline__notch {\n @include feature-targeting.targets($feat-structure) {\n display: none;\n }\n }\n }\n}\n\n@mixin color($color, $query: feature-targeting.all()) {\n $feat-color: feature-targeting.create-target($query, color);\n\n .mdc-notched-outline__leading,\n .mdc-notched-outline__notch,\n .mdc-notched-outline__trailing {\n @include feature-targeting.targets($feat-color) {\n @include theme.property(border-color, $color);\n }\n }\n}\n\n@mixin stroke-width($width, $query: feature-targeting.all()) {\n $feat-structure: feature-targeting.create-target($query, structure);\n\n .mdc-notched-outline__leading,\n .mdc-notched-outline__notch,\n .mdc-notched-outline__trailing {\n @include feature-targeting.targets($feat-structure) {\n border-width: $width;\n }\n }\n}\n\n///\n/// Adds top offset to compensate for border width box size when it is notched.\n/// Use this when floating label is aligned to center to prevent label jump on focus.\n/// @param {Number} $stroke-width Stroke width of notched outline that needs to be offset.\n///\n@mixin notch-offset($stroke-width, $query: feature-targeting.all()) {\n $feat-structure: feature-targeting.create-target($query, structure);\n\n .mdc-notched-outline--notched .mdc-notched-outline__notch {\n @include feature-targeting.targets($feat-structure) {\n padding-top: $stroke-width;\n }\n }\n}\n\n@mixin shape-radius(\n $radius,\n $rtl-reflexive: false,\n $component-height: null,\n $query: feature-targeting.all()\n) {\n $feat-structure: feature-targeting.create-target($query, structure);\n // Resolve the radius relative to the notched outline component's height. The\n // component should provide its current height from its density. The resolved\n // radius allows percentage radii to be converted to pixels.\n $resolved-radius: shape-functions.resolve-radius(\n $radius,\n $component-height: $component-height\n );\n\n // Grab the top-left radius. We'll need it to adjust the leading for the\n // label notch if the resulting radius shape is larger than the default\n // leading.\n $top-left-radius: list.nth(\n shape-functions.unpack-radius($resolved-radius),\n 1\n );\n $top-left-is-custom-prop: custom-properties.is-custom-prop($top-left-radius);\n $top-left-radius-px: $top-left-radius;\n @if ($top-left-is-custom-prop) {\n $top-left-radius-px: custom-properties.get-fallback($top-left-radius);\n }\n\n .mdc-notched-outline__leading {\n // mask the leading to apply the top-left and bottom-left corners\n @include shape-mixins.radius(\n shape-functions.mask-radius($radius, 1 0 0 1),\n $rtl-reflexive: true,\n $component-height: $component-height,\n $query: $query\n );\n\n @include feature-targeting.targets($feat-structure) {\n @if ($top-left-radius-px > variables.$leading-width) {\n // If the radius is bigger than the default leading width, we need to\n // increase the leading width\n width: $top-left-radius-px;\n @if ($top-left-is-custom-prop) {\n // The radius may be a custom property, in which case the above width\n // is the IE11 fallback value.\n /* @alternate */\n }\n }\n\n @if ($top-left-is-custom-prop) {\n // If the top-left radius is dynamic, the width of the leading is\n // the max of whichever is larger: the default leading width or the\n // value of the custom property.\n $var: custom-properties.create-var($top-left-radius);\n // Interpolation is a workaround for sass/sass#3259.\n @supports (top: max(#{0%})) {\n width: max(#{variables.$leading-width}, #{$var});\n }\n }\n }\n }\n\n // Similar to above, adjust the max-width of the notch if we adjusted the\n // leading's width.\n .mdc-notched-outline__notch {\n @include feature-targeting.targets($feat-structure) {\n @if ($top-left-radius-px > variables.$leading-width) {\n max-width: calc(100% - #{$top-left-radius-px} * 2);\n @if ($top-left-is-custom-prop) {\n /* @alternate