| 1 | {"version":3,"sources":["webpack:///./packages/mdc-tabs/mdc-tabs.scss","webpack:///./packages/material-components-web/node_modules/@material/ripple/_mixins.scss","webpack:///./packages/mdc-tabs/tab/mdc-tab.scss","webpack:///./packages/material-components-web/node_modules/@material/typography/_mixins.scss","webpack:///./packages/material-components-web/node_modules/@material/theme/_mixins.scss","webpack:///./packages/mdc-tabs/tab/_mixins.scss","webpack:///./packages/mdc-tabs/_mixins.scss","webpack:///./packages/mdc-tabs/tab-bar/_mixins.scss","webpack:///./packages/mdc-tabs/tab-bar/mdc-tab-bar.scss","webpack:///./packages/mdc-tabs/tab-bar-scroller/mdc-tab-bar-scroller.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,WC0BA,uCACE,mDAEA,kBAEA,+CACE,+CCtDV,SCmBM,qOC2DA,sBAoBE,yEHhCJ,wBACA,qBACA,oBACA,yBACA,iCACA,mCAEA,0CClEF,mBACA,kBACA,sBACA,gBACA,gBACA,eACA,kBACA,qBACA,mBACA,eACA,gBACA,sBG7CA,wBDyGI,sBAoBE,yEHtBN,iCAGI,kBACA,kBACA,UACA,oBACA,WAIJ,iBAGI,4DAMA,UAMJ,qCAEI,sGAIJ,oCAEI,MAEA,OACA,8CACA,sEAIJ,+CAEI,6BAEA,+BAIJ,2DAEI,uLACE,CAKN,6DAEI,4FAKA,wMAQJ,iCGxGI,qBHmMI,CAzER,uBAGI,WAkL8B,CA7JlC,0GAII,yBAIA,WAuJF,CA1IA,0CAEI,gCAIJ,iDAEI,yBAKA,WAiI4B,CA5HlC,6BAEI,8BAyDJ,iCAGI,qBAEA,sBACA,WACA,YAIJ,oCAEI,sCACA,uCC3RJ,eE0DI,sBAoBE,uEC7HN,8BDyGI,sBAoBE,uEF1EN,eACE,aAIF,qCA7BF,SA8BI,eACA,gBAGF,eAxCA,cACA,cA0CE,WACA,YAGA,6CACE,eAIJ,oBApDA,cACA,cAwDA,mCACE,gBAIJ,iBEsBM,sBAoBE,uEC7HN,gCDyGI,sBAoBE,uEFvCN,yBACE,SAIJ,oBEcM,iCAoBE,6EEtIN,kBACA,SACA,WACA,kBJoGA,SACA,uBAQE,oOACE,mBAIJ,iGACE,YAGF,2JAEE,YK3HF,4CHkHI,iCAoBE,kFIvGR,aACE,cACA,kBACA,YACA,cACA,yBAGF,wBJ2EM,iCAoBE,6EEtIN,kBACA,SACA,WACA,kBEuCA,OACA,WACA,4DACA,8OACA,sBAGF,8BACE,YCvBF,sBACE,aACA,mBACA,sBACA,WACA,yBACA,gBAEA,oCACE,aACA,kBACA,OACA,2BACA,gBAEA,0CACE,8OACA,sBAIJ,iCLkEI,sBAoBE,yEK/EJ,aACA,mBACA,uBACA,WACA,eACA,kBATA,uCL+DE,sBAoBE,uEKxEJ,wCACE,cACA,wBACA,eAEA,8CACE,qKAIA,0DAIJ,8CACE,cAIJ,0CACE","file":"mdc.tabs.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@import \"@material/animation/variables\";\n@import \"./variables\";\n\n@mixin mdc-ripple-keyframes_ {\n @keyframes mdc-ripple-fg-radius-in {\n from {\n animation-timing-function: $mdc-animation-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\n\n// WEBPACK FOOTER //\n// ./packages/mdc-tabs/mdc-tabs.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@import \"@material/animation/functions\";\n@import \"@material/typography/mixins\";\n@import \"@material/ripple/common\";\n@import \"@material/ripple/mixins\";\n@import \"./mixins\";\n@import \"../mixins\";\n\n$mdc-tab-with-text-height: 48px;\n$mdc-tab-with-icon-and-text-height: 72px;\n\n@mixin mdc-tabs-icon-tab-content {\n display: block;\n margin: 0 auto;\n}\n\n// postcss-bem-linter: define tab\n\n.mdc-tab {\n @include mdc-typography(button);\n @include mdc-tab-ink-color(text-secondary-on-background);\n @include mdc-ripple-surface;\n @include mdc-states;\n @include mdc-ripple-radius-bounded;\n\n display: table-cell;\n position: relative;\n box-sizing: border-box;\n min-width: 160px;\n min-height: $mdc-tab-with-text-height;\n padding: 0 24px;\n text-align: center;\n text-decoration: none;\n white-space: nowrap;\n cursor: pointer;\n overflow: hidden;\n vertical-align: middle;\n\n &:hover {\n @include mdc-tab-ink-color(text-primary-on-background);\n }\n\n &:focus {\n outline: none;\n }\n\n // TODO: Replace with breakpoint variable\n @media screen and (max-width: 600px) {\n min-width: 72px;\n padding: 0 12px;\n }\n\n &__icon {\n @include mdc-tabs-icon-tab-content;\n\n width: 24px;\n height: 24px;\n\n // postcss-bem-linter: ignore\n .mdc-tab-bar--icons-with-text & {\n margin-top: 4px;\n }\n }\n\n &__icon-text {\n @include mdc-tabs-icon-tab-content;\n }\n\n // postcss-bem-linter: ignore\n &__icon + &__icon-text {\n padding-top: 6px;\n }\n}\n\n.mdc-tab--active {\n @include mdc-tab-ink-color(text-primary-on-background);\n\n &::before {\n bottom: 0;\n }\n}\n\n.mdc-tab__indicator {\n @include mdc-tab-bar-indicator-mixin_;\n\n left: 2px;\n width: calc(100% - 4px);\n}\n\n// stylelint-disable plugin/selector-bem-pattern, selector-max-specificity\n.mdc-tab-bar:not(.mdc-tab-bar-upgraded) {\n .mdc-tab--active,\n .mdc-tab:hover,\n .mdc-tab:active {\n .mdc-tab__indicator {\n visibility: visible;\n }\n }\n\n .mdc-tab:not(.mdc-tab--active):hover .mdc-tab__indicator {\n opacity: .38;\n }\n\n .mdc-tab--active,\n .mdc-tab:not(.mdc-tab--active):active .mdc-tab__indicator {\n opacity: .87;\n }\n}\n// stylelint-enable plugin/selector-bem-pattern, selector-max-specificity\n\n// postcss-bem-linter: end\n\n\n\n// WEBPACK FOOTER //\n// ./packages/mdc-tabs/tab/mdc-tab.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 \"./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","@import \"@material/theme/mixins\";\n\n@mixin mdc-tab-ink-color($color) {\n @include mdc-tab-label-ink-color($color);\n @include mdc-tab-icon-ink-color($color);\n}\n\n@mixin mdc-tab-label-ink-color($color) {\n @include mdc-theme-prop(color, $color);\n}\n\n@mixin mdc-tab-icon-ink-color($color) {\n .mdc-tab__icon {\n @include mdc-theme-prop(color, $color);\n }\n}\n\n\n\n// WEBPACK FOOTER //\n// ./packages/mdc-tabs/tab/_mixins.scss","@mixin mdc-tab-bar-indicator-mixin_ {\n @include mdc-theme-prop(background-color, text-primary-on-light);\n\n position: absolute;\n bottom: 0;\n height: 2px;\n visibility: hidden;\n}\n\n\n\n// WEBPACK FOOTER //\n// ./packages/mdc-tabs/_mixins.scss","@import \"@material/theme/mixins\";\n\n@mixin mdc-tab-bar-indicator-ink-color($color) {\n .mdc-tab-bar__indicator,\n .mdc-tab__indicator {\n @include mdc-theme-prop(background-color, $color);\n }\n}\n\n\n\n// WEBPACK FOOTER //\n// ./packages/mdc-tabs/tab-bar/_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/functions\";\n@import \"@material/theme/mixins\";\n@import \"@material/rtl/mixins\";\n@import \"./mixins\";\n@import \"../mixins\";\n\n// postcss-bem-linter: define tab-bar\n\n@at-root {\n @include mdc-tab-bar-indicator-ink-color(text-primary-on-background);\n}\n\n.mdc-tab-bar {\n display: table;\n position: relative;\n height: 48px;\n margin: 0 auto;\n text-transform: uppercase;\n}\n\n.mdc-tab-bar__indicator {\n @include mdc-tab-bar-indicator-mixin_;\n\n left: 0;\n width: 100%;\n transform-origin: left top;\n transition: mdc-animation-enter(transform, 240ms);\n will-change: transform;\n}\n\n.mdc-tab-bar--icons-with-text {\n height: 72px;\n}\n\n\n\n// WEBPACK FOOTER //\n// ./packages/mdc-tabs/tab-bar/mdc-tab-bar.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/functions\";\n@import \"@material/theme/mixins\";\n@import \"@material/rtl/mixins\";\n\n$mdc-tab-bar-scroller-indicator-width: 48px;\n\n// postcss-bem-linter: define tab-bar-scroller\n\n.mdc-tab-bar-scroller {\n display: flex;\n align-items: center;\n box-sizing: border-box;\n width: 100%;\n background-color: inherit;\n overflow: hidden;\n\n &__scroll-frame {\n display: flex;\n position: relative;\n flex: 1;\n justify-content: flex-start;\n overflow: hidden;\n\n &__tabs {\n transition: mdc-animation-enter(transform, 240ms);\n will-change: transform;\n }\n }\n\n &__indicator {\n @include mdc-theme-prop(color, text-secondary-on-background);\n\n &:hover {\n @include mdc-theme-prop(color, text-primary-on-background);\n }\n\n display: flex;\n align-items: center;\n justify-content: center;\n width: $mdc-tab-bar-scroller-indicator-width;\n cursor: pointer;\n visibility: hidden;\n\n &__inner {\n color: inherit;\n text-decoration: inherit;\n cursor: inherit;\n\n &:focus {\n outline-color: inherit;\n }\n\n @include mdc-rtl(\".mdc-tab-bar-scroller\") {\n transform: rotate(180deg);\n }\n }\n\n &__inner:hover {\n color: inherit;\n }\n }\n\n &__indicator--enabled {\n visibility: visible;\n }\n}\n\n// postcss-bem-linter: end\n\n\n\n// WEBPACK FOOTER //\n// ./packages/mdc-tabs/tab-bar-scroller/mdc-tab-bar-scroller.scss"],"sourceRoot":""} |