UNPKG

@material-git/all

Version:
1 lines 14.7 kB
{"version":3,"file":"progress-bar/progress-bar.css","sources":["progress-bar/progress-bar.scss","core/style/_variables.scss","core/typography/_typography.scss"],"sourcesContent":["@import '../core/style/variables';\r\n\r\n\r\n$md-progress-bar-height: 5px !default;\r\n$md-progress-bar-full-animation-duration: 2000ms !default;\r\n$md-progress-bar-piece-animation-duration: 250ms !default;\r\n\r\n\r\n:host {\r\n display: block;\r\n // Height is provided for md-progress-bar to act as a default.\r\n height: $md-progress-bar-height;\r\n overflow: hidden;\r\n position: relative;\r\n // translateZ is added to force the md-progress-bar into its own GPU layer.\r\n transform: translateZ(0);\r\n transition: opacity $md-progress-bar-piece-animation-duration linear;\r\n width: 100%;\r\n\r\n // The progress bar background is used to show the bubble animation scrolling behind a\r\n // buffering progress bar.\r\n .md-progress-bar-background {\r\n background-repeat: repeat-x;\r\n background-size: 10px 4px;\r\n height: 100%;\r\n position: absolute;\r\n visibility: hidden;\r\n width: 100%;\r\n }\r\n\r\n // The progress bar buffer is the bar indicator showing the buffer value and is only visible\r\n // beyond the current value of the primary progress bar.\r\n .md-progress-bar-buffer {\r\n height: 100%;\r\n position: absolute;\r\n transform-origin: top left;\r\n transition: transform $md-progress-bar-piece-animation-duration ease;\r\n width: 100%;\r\n }\r\n\r\n // The secondary progress bar is only used in the indeterminate animation, because of this it\r\n // is hidden in other uses.\r\n .md-progress-bar-secondary {\r\n visibility: hidden;\r\n }\r\n\r\n // The progress bar fill fills the progress bar with the indicator color.\r\n .md-progress-bar-fill {\r\n animation: none;\r\n height: 100%;\r\n position: absolute;\r\n transform-origin: top left;\r\n transition: transform $md-progress-bar-piece-animation-duration ease;\r\n width: 100%;\r\n }\r\n\r\n // A pseudo element is created for each progress bar bar that fills with the indicator color.\r\n .md-progress-bar-fill::after {\r\n animation: none;\r\n content: '';\r\n display: inline-block;\r\n height: 100%;\r\n position: absolute;\r\n width: 100%;\r\n }\r\n\r\n &[mode='query'] {\r\n transform: rotateZ(180deg);\r\n }\r\n\r\n &[mode='indeterminate'],\r\n &[mode='query'] {\r\n .md-progress-bar-fill {\r\n transition: none;\r\n }\r\n .md-progress-bar-primary {\r\n animation: md-progress-bar-primary-indeterminate-translate $md-progress-bar-full-animation-duration infinite linear;\r\n left: -145.166611%;\r\n }\r\n .md-progress-bar-primary.md-progress-bar-fill::after {\r\n animation: md-progress-bar-primary-indeterminate-scale $md-progress-bar-full-animation-duration infinite linear;\r\n }\r\n .md-progress-bar-secondary {\r\n animation: md-progress-bar-secondary-indeterminate-translate $md-progress-bar-full-animation-duration infinite linear;\r\n left: -54.888891%;\r\n visibility: visible;\r\n }\r\n .md-progress-bar-secondary.md-progress-bar-fill::after {\r\n animation: md-progress-bar-secondary-indeterminate-scale $md-progress-bar-full-animation-duration infinite linear;\r\n }\r\n }\r\n\r\n &[mode='buffer'] {\r\n .md-progress-bar-background {\r\n animation: md-progress-bar-background-scroll $md-progress-bar-piece-animation-duration infinite linear;\r\n visibility: visible;\r\n }\r\n }\r\n}\r\n\r\n\r\n// Reverse the apparent directionality of progress vars for rtl.\r\n:host-context([dir='rtl']) {\r\n transform: rotateY(180deg);\r\n}\r\n\r\n// The values used for animations in md-progress-bar, both timing and transformation, can be\r\n// considered magic values. They are sourced from the Material Design example spec and duplicate\r\n// the values of the original designers definitions.\r\n//\r\n// The indeterminate state is essentially made up of two progress bars, one primary (the one that\r\n// is shown in both the determinate and indeterminate states) and one secondary, which essentially\r\n// mirrors the primary progress bar in appearance but is only shown to assist with the\r\n// indeterminate animations.\r\n\r\n// KEYFRAME BLOCK\t DESCRIPTION\r\n// primary-indeterminate-translate Translation of the primary progressbar across the screen\r\n// primary-indeterminate-scale Scaling of the primary bar as it's being translated across the screen\r\n// secondary-indeterminate-translate Translation of the secondary bar across the screen\r\n// secondary-indeterminate-scale Scaling of the secondary bar as it's being translated across the screen\r\n//\r\n// Because two different transform animations need to be applied at once, the translation is\r\n// applied to the outer element and the scaling is applied to the inner element, which provides the\r\n// illusion necessary to make the animation work.\r\n\r\n\r\n// Progress Bar Timing functions:\r\n// $md-progress-bar-primary-indeterminate-translate-step-1 has no timing function.\r\n$md-progress-bar-primary-indeterminate-translate-step-2: cubic-bezier(0.5, 0, 0.701732, 0.495819) !default;\r\n$md-progress-bar-primary-indeterminate-translate-step-3: cubic-bezier(0.302435, 0.381352, 0.55, 0.956352) !default;\r\n// $md-progress-bar-primary-indeterminate-translate-step-4 has no timing function.\r\n\r\n// $md-progress-bar-primary-indeterminate-scale-step-1 has no timing function\r\n$md-progress-bar-primary-indeterminate-scale-step-2: cubic-bezier(0.334731, 0.12482, 0.785844, 1) !default;\r\n$md-progress-bar-primary-indeterminate-scale-step-3: cubic-bezier(0.06, 0.11, 0.6, 1) !default;\r\n// $md-progress-bar-primary-indeterminate-scale-step-4 has no timing function\r\n\r\n$md-progress-bar-secondary-indeterminate-translate-step-1: cubic-bezier(0.15, 0, 0.515058, 0.409685) !default;\r\n$md-progress-bar-secondary-indeterminate-translate-step-2: cubic-bezier(0.31033, 0.284058, 0.8, 0.733712) !default;\r\n$md-progress-bar-secondary-indeterminate-translate-step-3: cubic-bezier(0.4, 0.627035, 0.6, 0.902026) !default;\r\n// $md-progress-bar-secondary-indeterminate-translate-step-4 has no timing function\r\n\r\n$md-progress-bar-secondary-indeterminate-scale-step-1: cubic-bezier(0.15, 0, 0.515058, 0.409685) !default;\r\n$md-progress-bar-secondary-indeterminate-scale-step-2: cubic-bezier(0.31033, 0.284058, 0.8, 0.733712) !default;\r\n$md-progress-bar-secondary-indeterminate-scale-step-3: cubic-bezier(0.4, 0.627035, 0.6, 0.902026) !default;\r\n// $md-progress-bar-secondary-indeterminate-scale-step-4 has no timing function\r\n\r\n\r\n// Animations for indeterminate and query mode.\r\n\r\n// Primary indicator.\r\n@keyframes md-progress-bar-primary-indeterminate-translate {\r\n 0% {\r\n transform: translateX(0);\r\n }\r\n 20% {\r\n animation-timing-function: $md-progress-bar-primary-indeterminate-translate-step-2;\r\n transform: translateX(0);\r\n }\r\n 59.15% {\r\n animation-timing-function: $md-progress-bar-primary-indeterminate-translate-step-3;\r\n transform: translateX(83.67142%);\r\n }\r\n 100% {\r\n transform: translateX(200.611057%);\r\n }\r\n}\r\n\r\n@keyframes md-progress-bar-primary-indeterminate-scale {\r\n 0% {\r\n transform: scaleX(0.08);\r\n }\r\n 36.65% {\r\n animation-timing-function: $md-progress-bar-primary-indeterminate-scale-step-2;\r\n transform: scaleX(0.08);\r\n }\r\n 69.15% {\r\n animation-timing-function: $md-progress-bar-primary-indeterminate-scale-step-3;\r\n transform: scaleX(0.661479);\r\n }\r\n 100% {\r\n transform: scaleX(0.08);\r\n }\r\n}\r\n\r\n// Secondary indicator.\r\n@keyframes md-progress-bar-secondary-indeterminate-translate {\r\n 0% {\r\n animation-timing-function: $md-progress-bar-secondary-indeterminate-translate-step-1;\r\n transform: translateX(0);\r\n }\r\n 25% {\r\n animation-timing-function: $md-progress-bar-secondary-indeterminate-translate-step-2;\r\n\r\n transform: translateX(37.651913%);\r\n }\r\n 48.35% {\r\n animation-timing-function: $md-progress-bar-secondary-indeterminate-translate-step-3;\r\n transform: translateX(84.386165%);\r\n }\r\n 100% {\r\n transform: translateX(160.277782%);\r\n }\r\n}\r\n\r\n@keyframes md-progress-bar-secondary-indeterminate-scale {\r\n 0% {\r\n animation-timing-function: $md-progress-bar-secondary-indeterminate-scale-step-1;\r\n transform: scaleX(0.08);\r\n }\r\n 19.15% {\r\n animation-timing-function: $md-progress-bar-secondary-indeterminate-scale-step-2;\r\n transform: scaleX(0.457104);\r\n }\r\n 44.15% {\r\n animation-timing-function: $md-progress-bar-secondary-indeterminate-scale-step-3;\r\n transform: scaleX(0.72796);\r\n }\r\n 100% {\r\n transform: scaleX(0.08);\r\n }\r\n}\r\n\r\n// Animation for buffer mode.\r\n@keyframes md-progress-bar-background-scroll {\r\n to {\r\n transform: translateX(-10px);\r\n }\r\n}\r\n","@import '../typography/typography';\r\n\r\n\r\n// Typography\r\n$md-body-font-size-base: rem(1.4) !default;\r\n$md-font-family: Roboto, 'Helvetica Neue', sans-serif !default;\r\n\r\n// Media queries\r\n$md-xsmall: 'max-width: 600px';\r\n\r\n// TODO: Revisit all z-indices before beta\r\n// z-index master list\r\n\r\n$z-index-fab: 20 !default;\r\n$z-index-drawer: 100 !default;\r\n\r\n// Overlay z indices.\r\n$md-z-index-overlay: 1000;\r\n$md-z-index-overlay-container: 1;\r\n$md-z-index-overlay-backdrop: 1;\r\n\r\n\r\n// Global constants\r\n$pi: 3.14159265;\r\n\r\n// Padding between input toggles and their labels\r\n$md-toggle-padding: 8px !default;\r\n// Width and height of input toggles\r\n$md-toggle-size: 20px !default;\r\n\r\n// Easing Curves\r\n// TODO(jelbourn): all of these need to be revisited\r\n\r\n// The default animation curves used by material design.\r\n$md-linear-out-slow-in-timing-function: cubic-bezier(0, 0, 0.2, 0.1) !default;\r\n$md-fast-out-slow-in-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !default;\r\n$md-fast-out-linear-in-timing-function: cubic-bezier(0.4, 0, 1, 1) !default;\r\n\r\n$ease-in-out-curve-function: cubic-bezier(0.35, 0, 0.25, 1) !default;\r\n\r\n$swift-ease-out-duration: 400ms !default;\r\n$swift-ease-out-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1) !default;\r\n$swift-ease-out: all $swift-ease-out-duration $swift-ease-out-timing-function !default;\r\n\r\n$swift-ease-in-duration: 300ms !default;\r\n$swift-ease-in-timing-function: cubic-bezier(0.55, 0, 0.55, 0.2) !default;\r\n$swift-ease-in: all $swift-ease-in-duration $swift-ease-in-timing-function !default;\r\n\r\n$swift-ease-in-out-duration: 500ms !default;\r\n$swift-ease-in-out-timing-function: $ease-in-out-curve-function !default;\r\n$swift-ease-in-out: all $swift-ease-in-out-duration $swift-ease-in-out-timing-function !default;\r\n\r\n$swift-linear-duration: 80ms !default;\r\n$swift-linear-timing-function: linear !default;\r\n$swift-linear: all $swift-linear-duration $swift-linear-timing-function !default;\r\n","// Implement the rem unit with SCSS so we don't have to actually set a font-size on\r\n// the user's body element.\r\n@function rem($multiplier) {\r\n $font-size: 10px;\r\n @return $multiplier * $font-size;\r\n}\r\n"],"mappings":"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","names":[],"sourceRoot":"/source/"}