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