120 lines
3 KiB
SCSS
120 lines
3 KiB
SCSS
/**
|
|
* Copyright 2015 Google Inc. All Rights Reserved.
|
|
*
|
|
* Licensed under the Apache License, Version 2.0 (the "License");
|
|
* you may not use this file except in compliance with the License.
|
|
* You may obtain a copy of the License at
|
|
*
|
|
* http://www.apache.org/licenses/LICENSE-2.0
|
|
*
|
|
* Unless required by applicable law or agreed to in writing, software
|
|
* distributed under the License is distributed on an "AS IS" BASIS,
|
|
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
* See the License for the specific language governing permissions and
|
|
* limitations under the License.
|
|
*/
|
|
|
|
@import "../variables";
|
|
|
|
.mdl-progress {
|
|
display: block;
|
|
position: relative;
|
|
height: $bar-height;
|
|
width: 500px;
|
|
max-width: 100%;
|
|
}
|
|
|
|
.mdl-progress > .bar {
|
|
display: block;
|
|
position: absolute;
|
|
top: 0;
|
|
bottom: 0;
|
|
width: 0%;
|
|
transition: width 0.2s $animation-curve-default;
|
|
}
|
|
|
|
.mdl-progress > .progressbar {
|
|
background-color: $progress-main-color;
|
|
z-index: 1;
|
|
left: 0;
|
|
}
|
|
|
|
.mdl-progress > .bufferbar {
|
|
background-image: linear-gradient(to right, $progress-secondary-color, $progress-secondary-color),
|
|
linear-gradient(to right, $progress-main-color, $progress-main-color);
|
|
z-index: 0;
|
|
left: 0;
|
|
}
|
|
|
|
.mdl-progress > .auxbar {
|
|
right: 0;
|
|
}
|
|
|
|
// Webkit only
|
|
@supports (-webkit-appearance:none) {
|
|
.mdl-progress:not(.mdl-progress--indeterminate):not(.mdl-progress--indeterminate) > .auxbar,
|
|
.mdl-progress:not(.mdl-progress__indeterminate):not(.mdl-progress__indeterminate) > .auxbar {
|
|
background-image: linear-gradient(to right, $progress-secondary-color, $progress-secondary-color),
|
|
linear-gradient(to right, $progress-main-color, $progress-main-color);
|
|
mask: url('#{$progress-image-path}/buffer.svg?embed');
|
|
}
|
|
}
|
|
|
|
.mdl-progress:not(.mdl-progress--indeterminate) > .auxbar,
|
|
.mdl-progress:not(.mdl-progress__indeterminate) > .auxbar {
|
|
background-image: linear-gradient(to right, $progress-fallback-buffer-color, $progress-fallback-buffer-color),
|
|
linear-gradient(to right, $progress-main-color, $progress-main-color);
|
|
}
|
|
|
|
.mdl-progress.mdl-progress--indeterminate > .bar1,
|
|
.mdl-progress.mdl-progress__indeterminate > .bar1 {
|
|
background-color: $progress-main-color;
|
|
animation-name: indeterminate1;
|
|
animation-duration: 2s;
|
|
animation-iteration-count: infinite;
|
|
animation-timing-function: linear;
|
|
}
|
|
|
|
.mdl-progress.mdl-progress--indeterminate > .bar3,
|
|
.mdl-progress.mdl-progress__indeterminate > .bar3 {
|
|
background-image: none;
|
|
background-color: $progress-main-color;
|
|
animation-name: indeterminate2;
|
|
animation-duration: 2s;
|
|
animation-iteration-count: infinite;
|
|
animation-timing-function: linear;
|
|
}
|
|
|
|
@keyframes indeterminate1 {
|
|
0% {
|
|
left: 0%;
|
|
width: 0%;
|
|
}
|
|
50% {
|
|
left: 25%;
|
|
width: 75%;
|
|
}
|
|
75% {
|
|
left: 100%;
|
|
width: 0%;
|
|
}
|
|
}
|
|
|
|
@keyframes indeterminate2 {
|
|
0% {
|
|
left: 0%;
|
|
width: 0%;
|
|
}
|
|
50% {
|
|
left: 0%;
|
|
width: 0%;
|
|
}
|
|
75% {
|
|
left: 0%;
|
|
width: 25%;
|
|
}
|
|
100% {
|
|
left: 100%;
|
|
width: 0%;
|
|
}
|
|
}
|