@material/icon-toggle
Version:
The Material Components for the web icon toggle component
1 lines • 22.5 kB
Source Map (JSON)
{"version":3,"sources":["webpack:///./packages/mdc-icon-toggle/mdc-icon-toggle.scss","webpack:///./packages/material-components-web/node_modules/@material/ripple/_mixins.scss","webpack:///./stdin","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,WCXA,uCACE,mDAEA,kBAEA,+CACE,+CC1BV,iBDsCI,wBACA,qBACA,oBACA,yBACA,iCACA,mCAEA,0CACA,8BEZE,sBAiBE,kED7CN,aACA,kBACA,mBACA,uBACA,sBACA,WACA,YACA,aACA,aACA,iBACA,eACA,qFAGA,oBD6BA,iDAGI,kBACA,kBACA,UACA,oBACA,WAIJ,yBAGI,4DAMA,UAMJ,6CAEI,sGAIJ,4CAEI,MAEA,OACA,8CACA,sEAIJ,uDAEI,6BAEA,+BAIJ,mEAEI,uLACE,CAKN,qEAEI,4FAKA,wMA0KJ,iDAGI,oBAEA,qBACA,WACA,WAVsC,CAc1C,yFAGI,2CAEA,6CACA,sCACA,uCAIJ,4CAEI,sCACA,uCA3LJ,iDEtHI,qBDDgB,CDyIpB,+BAGI,WAkL8B,CA7JlC,0HAII,yBAIA,WAuJF,CA1IA,kDAEI,gCAIJ,yDAEI,yBAKA,WAiI4B,CA5HlC,qCAEI,8BCvLJ,wBACE,kBACA,kBACA,UACA,oBACA,WAIJ,2BCGM,sBAiBE,mEDjBN","file":"mdc.icon-toggle.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-icon-toggle/mdc-icon-toggle.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/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-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 will-change: transform, opacity;\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// postcss-bem-linter: define icon-toggle\n\n@import \"@material/animation/functions\";\n@import \"@material/ripple/common\";\n@import \"@material/ripple/mixins\";\n@import \"@material/theme/mixins\";\n@import \"./mixins\";\n\n.mdc-icon-toggle {\n @include mdc-ripple-surface;\n @include mdc-ripple-radius-unbounded;\n @include mdc-states(black);\n @include mdc-icon-toggle-ink-color(text-primary-on-light);\n\n display: flex;\n position: relative;\n align-items: center;\n justify-content: center;\n box-sizing: border-box;\n width: 48px;\n height: 48px;\n padding: 12px;\n outline: none;\n font-size: 1.5rem;\n cursor: pointer;\n user-select: none;\n // For some reason, GPU layer promotion makes ripples look terrible on Chrome\n /* @alternate */\n will-change: initial;\n\n &::after {\n position: absolute;\n border-radius: 50%;\n opacity: 0;\n pointer-events: none;\n content: \"\";\n }\n}\n\n.mdc-icon-toggle--disabled {\n @include mdc-theme-prop(color, text-disabled-on-light);\n\n pointer-events: none;\n}\n\n// postcss-bem-linter: end\n\n\n\n// WEBPACK FOOTER //\n// ./stdin","//\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 \"./variables\";\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-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 @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 @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"],"sourceRoot":""}