liquid_feedback_frontend

annotate style/mdl/progress/_progress.scss @ 1583:202876945a6c

find changesets by author, revision, files, or words in the commit message
merge
author jbe
date Tue Jan 26 18:19:13 2021 +0100 (2021-01-26)
parents 32cc544d5a5b
children
rev   line source
bsw/jbe@1309 1 /**
bsw/jbe@1309 2 * Copyright 2015 Google Inc. All Rights Reserved.
bsw/jbe@1309 3 *
bsw/jbe@1309 4 * Licensed under the Apache License, Version 2.0 (the "License");
bsw/jbe@1309 5 * you may not use this file except in compliance with the License.
bsw/jbe@1309 6 * You may obtain a copy of the License at
bsw/jbe@1309 7 *
bsw/jbe@1309 8 * http://www.apache.org/licenses/LICENSE-2.0
bsw/jbe@1309 9 *
bsw/jbe@1309 10 * Unless required by applicable law or agreed to in writing, software
bsw/jbe@1309 11 * distributed under the License is distributed on an "AS IS" BASIS,
bsw/jbe@1309 12 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
bsw/jbe@1309 13 * See the License for the specific language governing permissions and
bsw/jbe@1309 14 * limitations under the License.
bsw/jbe@1309 15 */
bsw/jbe@1309 16
bsw/jbe@1309 17 @import "../variables";
bsw/jbe@1309 18
bsw/jbe@1309 19 .mdl-progress {
bsw/jbe@1309 20 display: block;
bsw/jbe@1309 21 position: relative;
bsw/jbe@1309 22 height: $bar-height;
bsw/jbe@1309 23 width: 500px;
bsw/jbe@1309 24 max-width: 100%;
bsw/jbe@1309 25 }
bsw/jbe@1309 26
bsw/jbe@1309 27 .mdl-progress > .bar {
bsw/jbe@1309 28 display: block;
bsw/jbe@1309 29 position: absolute;
bsw/jbe@1309 30 top: 0;
bsw/jbe@1309 31 bottom: 0;
bsw/jbe@1309 32 width: 0%;
bsw/jbe@1309 33 transition: width 0.2s $animation-curve-default;
bsw/jbe@1309 34 }
bsw/jbe@1309 35
bsw/jbe@1309 36 .mdl-progress > .progressbar {
bsw/jbe@1309 37 background-color: $progress-main-color;
bsw/jbe@1309 38 z-index: 1;
bsw/jbe@1309 39 left: 0;
bsw/jbe@1309 40 }
bsw/jbe@1309 41
bsw/jbe@1309 42 .mdl-progress > .bufferbar {
bsw/jbe@1309 43 background-image: linear-gradient(to right, $progress-secondary-color, $progress-secondary-color),
bsw/jbe@1309 44 linear-gradient(to right, $progress-main-color, $progress-main-color);
bsw/jbe@1309 45 z-index: 0;
bsw/jbe@1309 46 left: 0;
bsw/jbe@1309 47 }
bsw/jbe@1309 48
bsw/jbe@1309 49 .mdl-progress > .auxbar {
bsw/jbe@1309 50 right: 0;
bsw/jbe@1309 51 }
bsw/jbe@1309 52
bsw/jbe@1309 53 // Webkit only
bsw/jbe@1309 54 @supports (-webkit-appearance:none) {
bsw/jbe@1309 55 .mdl-progress:not(.mdl-progress--indeterminate):not(.mdl-progress--indeterminate) > .auxbar,
bsw/jbe@1309 56 .mdl-progress:not(.mdl-progress__indeterminate):not(.mdl-progress__indeterminate) > .auxbar {
bsw/jbe@1309 57 background-image: linear-gradient(to right, $progress-secondary-color, $progress-secondary-color),
bsw/jbe@1309 58 linear-gradient(to right, $progress-main-color, $progress-main-color);
bsw/jbe@1309 59 mask: url('#{$progress-image-path}/buffer.svg?embed');
bsw/jbe@1309 60 }
bsw/jbe@1309 61 }
bsw/jbe@1309 62
bsw/jbe@1309 63 .mdl-progress:not(.mdl-progress--indeterminate) > .auxbar,
bsw/jbe@1309 64 .mdl-progress:not(.mdl-progress__indeterminate) > .auxbar {
bsw/jbe@1309 65 background-image: linear-gradient(to right, $progress-fallback-buffer-color, $progress-fallback-buffer-color),
bsw/jbe@1309 66 linear-gradient(to right, $progress-main-color, $progress-main-color);
bsw/jbe@1309 67 }
bsw/jbe@1309 68
bsw/jbe@1309 69 .mdl-progress.mdl-progress--indeterminate > .bar1,
bsw/jbe@1309 70 .mdl-progress.mdl-progress__indeterminate > .bar1 {
bsw/jbe@1309 71 background-color: $progress-main-color;
bsw/jbe@1309 72 animation-name: indeterminate1;
bsw/jbe@1309 73 animation-duration: 2s;
bsw/jbe@1309 74 animation-iteration-count: infinite;
bsw/jbe@1309 75 animation-timing-function: linear;
bsw/jbe@1309 76 }
bsw/jbe@1309 77
bsw/jbe@1309 78 .mdl-progress.mdl-progress--indeterminate > .bar3,
bsw/jbe@1309 79 .mdl-progress.mdl-progress__indeterminate > .bar3 {
bsw/jbe@1309 80 background-image: none;
bsw/jbe@1309 81 background-color: $progress-main-color;
bsw/jbe@1309 82 animation-name: indeterminate2;
bsw/jbe@1309 83 animation-duration: 2s;
bsw/jbe@1309 84 animation-iteration-count: infinite;
bsw/jbe@1309 85 animation-timing-function: linear;
bsw/jbe@1309 86 }
bsw/jbe@1309 87
bsw/jbe@1309 88 @keyframes indeterminate1 {
bsw/jbe@1309 89 0% {
bsw/jbe@1309 90 left: 0%;
bsw/jbe@1309 91 width: 0%;
bsw/jbe@1309 92 }
bsw/jbe@1309 93 50% {
bsw/jbe@1309 94 left: 25%;
bsw/jbe@1309 95 width: 75%;
bsw/jbe@1309 96 }
bsw/jbe@1309 97 75% {
bsw/jbe@1309 98 left: 100%;
bsw/jbe@1309 99 width: 0%;
bsw/jbe@1309 100 }
bsw/jbe@1309 101 }
bsw/jbe@1309 102
bsw/jbe@1309 103 @keyframes indeterminate2 {
bsw/jbe@1309 104 0% {
bsw/jbe@1309 105 left: 0%;
bsw/jbe@1309 106 width: 0%;
bsw/jbe@1309 107 }
bsw/jbe@1309 108 50% {
bsw/jbe@1309 109 left: 0%;
bsw/jbe@1309 110 width: 0%;
bsw/jbe@1309 111 }
bsw/jbe@1309 112 75% {
bsw/jbe@1309 113 left: 0%;
bsw/jbe@1309 114 width: 25%;
bsw/jbe@1309 115 }
bsw/jbe@1309 116 100% {
bsw/jbe@1309 117 left: 100%;
bsw/jbe@1309 118 width: 0%;
bsw/jbe@1309 119 }
bsw/jbe@1309 120 }

Impressum / About Us