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