@material/linear-progress
Version:
The Material Components for the web linear progress indicator component
1 lines • 21.5 kB
Source Map (JSON)
{"version":3,"sources":["webpack:///./packages/mdc-linear-progress/mdc-linear-progress.scss","webpack:///./packages/mdc-linear-progress/_mixins.scss","webpack:///./packages/material-components-web/node_modules/@material/theme/_mixins.scss"],"names":[],"mappings":";;;;;;;AAuBE,mDACE,GACE,wDAGF,IACE,8IACA,wDAGF,OACE,8JACA,wEAGF,KACE,6EAhBJ,2CACE,GACE,wDAGF,IACE,8IACA,wDAGF,OACE,8JACA,wEAGF,KACE,6EAMJ,+CACE,GACE,sDAGF,OACE,sJACA,sDAGF,OACE,8HACA,8DAGF,KACE,uDAhBJ,uCACE,GACE,sDAGF,OACE,sJACA,sDAGF,OACE,8HACA,8DAGF,KACE,uDAMJ,qDACE,GACE,gJACA,wDAGF,IACE,0JACA,0EAGF,OACE,kJACA,0EAGF,KACE,6EAjBJ,6CACE,GACE,gJACA,wDAGF,IACE,0JACA,0EAGF,OACE,kJACA,0EAGF,KACE,6EAMJ,iDACE,GACE,oKACA,sDAGF,OACE,sKACA,8DAGF,OACE,sKACA,4DAGF,KACE,uDAjBJ,yCACE,GACE,oKACA,sDAGF,OACE,sKACA,8DAGF,OACE,sKACA,4DAGF,KACE,uDAMJ,6BACE,GACE,iEAFJ,qBACE,GACE,iEAMJ,2DACE,GACE,wDAGF,IACE,8IACA,wDAGF,OACE,8JACA,0EAGF,KACE,+EAhBJ,mDACE,GACE,wDAGF,IACE,8IACA,wDAGF,OACE,8JACA,0EAGF,KACE,+EAMJ,6DACE,GACE,gJACA,wDAGF,IACE,0JACA,4EAGF,OACE,kJACA,4EAGF,KACE,+EAjBJ,qDACE,GACE,gJACA,wDAGF,IACE,0JACA,4EAGF,OACE,kJACA,4EAGF,KACE,+EAMJ,qCACE,GACE,+DAFJ,6BACE,GACE,+DCzHJ,qBAEI,kBACA,WACA,WACA,wDACA,gBAIA,0DAGF,0BAEI,kBACA,WACA,YACA,sCACA,4DAIA,sPAIJ,gCAEI,qBACA,kBACA,WACA,YACA,sCAIJ,qCAEI,kBACA,WACA,YACA,2BACA,yBAIA,4FAIJ,6BAEI,kBACA,WACA,YACA,4DAIA,sPAIJ,kCAEI,gDAIJ,oCAEI,kBAgFJ,8DAEI,gBAIJ,sEAEI,kBAIA,kIAGF,sGAEI,0HAKN,wEAEI,iBACA,mBAIA,sIAGF,wGAEI,8HAYN,qHAGI,QACA,oEAIJ,iEAEI,sHAIJ,mEAEI,0HAIJ,oEAEI,4GA7IJ,6BAEI,UAIA,sCA8BN,gCC7CI,yBAoBE,mDDsCN,qCAII,qUAIJ,6BAEI,wBAdkB,CA5BpB,oGAEI,mBACA,UAIJ,sGAEI,kBACA,U","file":"mdc.linear-progress.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@mixin mdc-linear-progress-primary-indeterminate-translate-keyframes_ {\n @keyframes primary-indeterminate-translate {\n 0% {\n transform: translateX(0);\n }\n\n 20% {\n animation-timing-function: cubic-bezier(.5, 0, .701732, .495819);\n transform: translateX(0);\n }\n\n 59.15% {\n animation-timing-function: cubic-bezier(.302435, .381352, .55, .956352);\n transform: translateX(83.67142%);\n }\n\n 100% {\n transform: translateX(200.611057%);\n }\n }\n}\n\n@mixin mdc-linear-progress-primary-indeterminate-scale-keyframes_ {\n @keyframes primary-indeterminate-scale {\n 0% {\n transform: scaleX(.08);\n }\n\n 36.65% {\n animation-timing-function: cubic-bezier(.334731, .12482, .785844, 1);\n transform: scaleX(.08);\n }\n\n 69.15% {\n animation-timing-function: cubic-bezier(.06, .11, .6, 1);\n transform: scaleX(.661479);\n }\n\n 100% {\n transform: scaleX(.08);\n }\n }\n}\n\n@mixin mdc-linear-progress-secondary-indeterminate-translate-keyframes_ {\n @keyframes secondary-indeterminate-translate {\n 0% {\n animation-timing-function: cubic-bezier(.15, 0, .515058, .409685);\n transform: translateX(0);\n }\n\n 25% {\n animation-timing-function: cubic-bezier(.31033, .284058, .8, .733712);\n transform: translateX(37.651913%);\n }\n\n 48.35% {\n animation-timing-function: cubic-bezier(.4, .627035, .6, .902026);\n transform: translateX(84.386165%);\n }\n\n 100% {\n transform: translateX(160.277782%);\n }\n }\n}\n\n@mixin mdc-linear-progress-secondary-indeterminate-scale-keyframes_ {\n @keyframes secondary-indeterminate-scale {\n 0% {\n animation-timing-function: cubic-bezier(.205028, .057051, .57661, .453971);\n transform: scaleX(.08);\n }\n\n 19.15% {\n animation-timing-function: cubic-bezier(.152313, .196432, .648374, 1.004315);\n transform: scaleX(.457104);\n }\n\n 44.15% {\n animation-timing-function: cubic-bezier(.257759, -.003163, .211762, 1.38179);\n transform: scaleX(.72796);\n }\n\n 100% {\n transform: scaleX(.08);\n }\n }\n}\n\n@mixin mdc-linear-progress-buffering-keyframes_ {\n @keyframes buffering {\n to {\n transform: translateX(-10px);\n }\n }\n}\n\n@mixin mdc-linear-progress-primary-indeterminate-translate-reverse-keyframes_ {\n @keyframes primary-indeterminate-translate-reverse {\n 0% {\n transform: translateX(0);\n }\n\n 20% {\n animation-timing-function: cubic-bezier(.5, 0, .701732, .495819);\n transform: translateX(0);\n }\n\n 59.15% {\n animation-timing-function: cubic-bezier(.302435, .381352, .55, .956352);\n transform: translateX(-83.67142%);\n }\n\n 100% {\n transform: translateX(-200.611057%);\n }\n }\n}\n\n@mixin mdc-linear-progress-secondary-indeterminate-translate-reverse-keyframes_ {\n @keyframes secondary-indeterminate-translate-reverse {\n 0% {\n animation-timing-function: cubic-bezier(.15, 0, .515058, .409685);\n transform: translateX(0);\n }\n\n 25% {\n animation-timing-function: cubic-bezier(.31033, .284058, .8, .733712);\n transform: translateX(-37.651913%);\n }\n\n 48.35% {\n animation-timing-function: cubic-bezier(.4, .627035, .6, .902026);\n transform: translateX(-84.386165%);\n }\n\n 100% {\n transform: translateX(-160.277782%);\n }\n }\n}\n\n@mixin mdc-linear-progress-buffering-reverse-keyframes_ {\n @keyframes buffering-reverse {\n to {\n transform: translateX(10px);\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@import \"@material/animation/functions\";\n@import \"@material/feature-targeting/functions\";\n@import \"@material/feature-targeting/mixins\";\n@import \"@material/theme/mixins\";\n@import \"@material/theme/variables\"; // for mdc-theme-prop-value\n@import \"./variables\";\n@import \"./keyframes\";\n\n//\n// Public\n//\n\n@mixin mdc-linear-progress-core-styles($query: mdc-feature-all()) {\n $feat-structure: mdc-feature-create-target($query, structure);\n $feat-animation: mdc-feature-create-target($query, animation);\n\n @include mdc-feature-targets($feat-animation) {\n @include mdc-linear-progress-primary-indeterminate-translate-keyframes_;\n @include mdc-linear-progress-primary-indeterminate-scale-keyframes_;\n @include mdc-linear-progress-secondary-indeterminate-translate-keyframes_;\n @include mdc-linear-progress-secondary-indeterminate-scale-keyframes_;\n @include mdc-linear-progress-buffering-keyframes_;\n @include mdc-linear-progress-primary-indeterminate-translate-reverse-keyframes_;\n @include mdc-linear-progress-secondary-indeterminate-translate-reverse-keyframes_;\n @include mdc-linear-progress-buffering-reverse-keyframes_;\n }\n\n .mdc-linear-progress {\n @include mdc-feature-targets($feat-structure) {\n position: relative;\n width: 100%;\n height: 4px;\n transform: translateZ(0);\n overflow: hidden;\n }\n\n @include mdc-feature-targets($feat-animation) {\n transition: mdc-animation-exit-temporary(opacity, 250ms);\n }\n\n &__bar {\n @include mdc-feature-targets($feat-structure) {\n position: absolute;\n width: 100%;\n height: 100%;\n animation: none;\n transform-origin: top left;\n }\n\n @include mdc-feature-targets($feat-animation) {\n transition: mdc-animation-exit-temporary(transform, 250ms);\n }\n }\n\n &__bar-inner {\n @include mdc-feature-targets($feat-structure) {\n display: inline-block;\n position: absolute;\n width: 100%;\n height: 100%;\n animation: none;\n }\n }\n\n &__buffering-dots {\n @include mdc-feature-targets($feat-structure) {\n position: absolute;\n width: 100%;\n height: 100%;\n background-repeat: repeat-x;\n background-size: 10px 4px;\n }\n\n @include mdc-feature-targets($feat-animation) {\n animation: buffering 250ms infinite linear;\n }\n }\n\n &__buffer {\n @include mdc-feature-targets($feat-structure) {\n position: absolute;\n width: 100%;\n height: 100%;\n transform-origin: top left;\n }\n\n @include mdc-feature-targets($feat-animation) {\n transition: mdc-animation-exit-temporary(transform, 250ms);\n }\n }\n\n &__primary-bar {\n @include mdc-feature-targets($feat-structure) {\n transform: scaleX(0);\n }\n }\n\n &__secondary-bar {\n @include mdc-feature-targets($feat-structure) {\n visibility: hidden;\n }\n }\n\n @include mdc-linear-progress-indeterminate_($query: $query);\n @include mdc-linear-progress-reversed_($query: $query);\n\n &--closed {\n @include mdc-feature-targets($feat-structure) {\n opacity: 0;\n }\n\n @include mdc-feature-targets($feat-animation) {\n animation: none;\n }\n }\n }\n\n @at-root {\n @include mdc-linear-progress-bar-color(primary, $query: $query);\n @include mdc-linear-progress-buffer-color($mdc-linear-progress-baseline-buffer-color, $query: $query);\n }\n\n .mdc-linear-progress--indeterminate.mdc-linear-progress--reversed {\n .mdc-linear-progress__primary-bar {\n @include mdc-feature-targets($feat-structure) {\n right: -145.166611%;\n left: auto;\n }\n }\n\n .mdc-linear-progress__secondary-bar {\n @include mdc-feature-targets($feat-structure) {\n right: -54.888891%;\n left: auto;\n }\n }\n }\n}\n\n@mixin mdc-linear-progress-bar-color($color, $query: mdc-feature-all()) {\n $feat-color: mdc-feature-create-target($query, color);\n\n .mdc-linear-progress__bar-inner {\n @include mdc-feature-targets($feat-color) {\n @include mdc-theme-prop(background-color, $color);\n }\n }\n}\n\n@mixin mdc-linear-progress-buffer-color($color, $query: mdc-feature-all()) {\n // We need to escape the '#' character as \"%23\" for SVG because '#' is a reserved character in URIs.\n $color-value-for-css: mdc-theme-prop-value($color);\n $color-value-for-svg: mdc-linear-progress-str-replace_(unquote(\"#{$color-value-for-css}\"), \"#\", \"%23\");\n $feat-color: mdc-feature-create-target($query, color);\n\n .mdc-linear-progress__buffering-dots {\n @include mdc-feature-targets($feat-color) {\n // SVG is optimized for data URI (https://codepen.io/tigt/post/optimizing-svgs-in-data-uris)\n // stylelint-disable-next-line function-url-quotes\n background-image: url(\"data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' enable-background='new 0 0 5 2' xml:space='preserve' viewBox='0 0 5 2' preserveAspectRatio='none slice'%3E%3Ccircle cx='1' cy='1' r='1' fill='#{$color-value-for-svg}'/%3E%3C/svg%3E\");\n }\n }\n\n .mdc-linear-progress__buffer {\n @include mdc-feature-targets($feat-color) {\n background-color: $color-value-for-css;\n }\n }\n}\n\n//\n// Private\n//\n\n@mixin mdc-linear-progress-indeterminate_($query: mdc-feature-all()) {\n $feat-structure: mdc-feature-create-target($query, structure);\n $feat-animation: mdc-feature-create-target($query, animation);\n\n &--indeterminate {\n .mdc-linear-progress__bar {\n @include mdc-feature-targets($feat-structure) {\n transition: none;\n }\n }\n\n .mdc-linear-progress__primary-bar {\n @include mdc-feature-targets($feat-structure) {\n left: -145.166611%;\n }\n\n @include mdc-feature-targets($feat-animation) {\n animation: primary-indeterminate-translate 2s infinite linear;\n }\n\n > .mdc-linear-progress__bar-inner {\n @include mdc-feature-targets($feat-animation) {\n animation: primary-indeterminate-scale 2s infinite linear;\n }\n }\n }\n\n .mdc-linear-progress__secondary-bar {\n @include mdc-feature-targets($feat-structure) {\n left: -54.888891%;\n visibility: visible;\n }\n\n @include mdc-feature-targets($feat-animation) {\n animation: secondary-indeterminate-translate 2s infinite linear;\n }\n\n > .mdc-linear-progress__bar-inner {\n @include mdc-feature-targets($feat-animation) {\n animation: secondary-indeterminate-scale 2s infinite linear;\n }\n }\n }\n }\n}\n\n@mixin mdc-linear-progress-reversed_($query: mdc-feature-all()) {\n $feat-structure: mdc-feature-create-target($query, structure);\n $feat-animation: mdc-feature-create-target($query, animation);\n\n &--reversed {\n .mdc-linear-progress__bar,\n .mdc-linear-progress__buffer {\n @include mdc-feature-targets($feat-structure) {\n right: 0;\n transform-origin: center right;\n }\n }\n\n .mdc-linear-progress__primary-bar {\n @include mdc-feature-targets($feat-animation) {\n animation-name: primary-indeterminate-translate-reverse;\n }\n }\n\n .mdc-linear-progress__secondary-bar {\n @include mdc-feature-targets($feat-animation) {\n animation-name: secondary-indeterminate-translate-reverse;\n }\n }\n\n .mdc-linear-progress__buffering-dots {\n @include mdc-feature-targets($feat-animation) {\n animation: buffering-reverse 250ms infinite linear;\n }\n }\n }\n}\n\n// Based on https://css-tricks.com/snippets/sass/str-replace-function/\n@function mdc-linear-progress-str-replace_($string, $search, $replace) {\n $index: str-index($string, $search);\n\n @if $index {\n $head: str-slice($string, 1, $index - 1);\n $tail: mdc-linear-progress-str-replace_(str-slice($string, $index + str-length($search)), $search, $replace);\n\n @return $head + $replace + $tail;\n }\n\n @return $string;\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@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"],"sourceRoot":""}