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
|
bsw/jbe@1309
|
20 .mdl-spinner {
|
bsw/jbe@1309
|
21 display: inline-block;
|
bsw/jbe@1309
|
22 position: relative;
|
bsw/jbe@1309
|
23 width: $spinner-size;
|
bsw/jbe@1309
|
24 height: $spinner-size;
|
bsw/jbe@1309
|
25
|
bsw/jbe@1309
|
26 &:not(.is-upgraded).is-active:after {
|
bsw/jbe@1309
|
27 content: "Loading...";
|
bsw/jbe@1309
|
28 }
|
bsw/jbe@1309
|
29
|
bsw/jbe@1309
|
30 &.is-upgraded.is-active {
|
bsw/jbe@1309
|
31 animation: mdl-spinner__container-rotate $spinner-duration linear infinite;
|
bsw/jbe@1309
|
32 }
|
bsw/jbe@1309
|
33 }
|
bsw/jbe@1309
|
34
|
bsw/jbe@1309
|
35 @keyframes mdl-spinner__container-rotate {
|
bsw/jbe@1309
|
36 to { transform: rotate(360deg) }
|
bsw/jbe@1309
|
37 }
|
bsw/jbe@1309
|
38
|
bsw/jbe@1309
|
39 .mdl-spinner__layer {
|
bsw/jbe@1309
|
40 position: absolute;
|
bsw/jbe@1309
|
41 width: 100%;
|
bsw/jbe@1309
|
42 height: 100%;
|
bsw/jbe@1309
|
43 opacity: 0;
|
bsw/jbe@1309
|
44 }
|
bsw/jbe@1309
|
45
|
bsw/jbe@1309
|
46 .mdl-spinner__layer-1 {
|
bsw/jbe@1309
|
47 border-color: $spinner-color-1;
|
bsw/jbe@1309
|
48
|
bsw/jbe@1309
|
49 .mdl-spinner--single-color & {
|
bsw/jbe@1309
|
50 border-color: $spinner-single-color;
|
bsw/jbe@1309
|
51 }
|
bsw/jbe@1309
|
52
|
bsw/jbe@1309
|
53 .mdl-spinner.is-active & {
|
bsw/jbe@1309
|
54 animation:
|
bsw/jbe@1309
|
55 mdl-spinner__fill-unfill-rotate (4 * $spinner-arc-time)
|
bsw/jbe@1309
|
56 $animation-curve-fast-out-slow-in infinite both,
|
bsw/jbe@1309
|
57 mdl-spinner__layer-1-fade-in-out (4 * $spinner-arc-time)
|
bsw/jbe@1309
|
58 $animation-curve-fast-out-slow-in infinite both;
|
bsw/jbe@1309
|
59 }
|
bsw/jbe@1309
|
60 }
|
bsw/jbe@1309
|
61
|
bsw/jbe@1309
|
62 .mdl-spinner__layer-2 {
|
bsw/jbe@1309
|
63 border-color: $spinner-color-2;
|
bsw/jbe@1309
|
64
|
bsw/jbe@1309
|
65 .mdl-spinner--single-color & {
|
bsw/jbe@1309
|
66 border-color: $spinner-single-color;
|
bsw/jbe@1309
|
67 }
|
bsw/jbe@1309
|
68
|
bsw/jbe@1309
|
69 .mdl-spinner.is-active & {
|
bsw/jbe@1309
|
70 animation:
|
bsw/jbe@1309
|
71 mdl-spinner__fill-unfill-rotate (4 * $spinner-arc-time)
|
bsw/jbe@1309
|
72 $animation-curve-fast-out-slow-in infinite both,
|
bsw/jbe@1309
|
73 mdl-spinner__layer-2-fade-in-out (4 * $spinner-arc-time)
|
bsw/jbe@1309
|
74 $animation-curve-fast-out-slow-in infinite both;
|
bsw/jbe@1309
|
75 }
|
bsw/jbe@1309
|
76 }
|
bsw/jbe@1309
|
77
|
bsw/jbe@1309
|
78 .mdl-spinner__layer-3 {
|
bsw/jbe@1309
|
79 border-color: $spinner-color-3;
|
bsw/jbe@1309
|
80
|
bsw/jbe@1309
|
81 .mdl-spinner--single-color & {
|
bsw/jbe@1309
|
82 border-color: $spinner-single-color;
|
bsw/jbe@1309
|
83 }
|
bsw/jbe@1309
|
84
|
bsw/jbe@1309
|
85 .mdl-spinner.is-active & {
|
bsw/jbe@1309
|
86 animation:
|
bsw/jbe@1309
|
87 mdl-spinner__fill-unfill-rotate (4 * $spinner-arc-time)
|
bsw/jbe@1309
|
88 $animation-curve-fast-out-slow-in infinite both,
|
bsw/jbe@1309
|
89 mdl-spinner__layer-3-fade-in-out (4 * $spinner-arc-time)
|
bsw/jbe@1309
|
90 $animation-curve-fast-out-slow-in infinite both;
|
bsw/jbe@1309
|
91 }
|
bsw/jbe@1309
|
92 }
|
bsw/jbe@1309
|
93
|
bsw/jbe@1309
|
94 .mdl-spinner__layer-4 {
|
bsw/jbe@1309
|
95 border-color: $spinner-color-4;
|
bsw/jbe@1309
|
96
|
bsw/jbe@1309
|
97 .mdl-spinner--single-color & {
|
bsw/jbe@1309
|
98 border-color: $spinner-single-color;
|
bsw/jbe@1309
|
99 }
|
bsw/jbe@1309
|
100
|
bsw/jbe@1309
|
101 .mdl-spinner.is-active & {
|
bsw/jbe@1309
|
102 animation:
|
bsw/jbe@1309
|
103 mdl-spinner__fill-unfill-rotate (4 * $spinner-arc-time)
|
bsw/jbe@1309
|
104 $animation-curve-fast-out-slow-in infinite both,
|
bsw/jbe@1309
|
105 mdl-spinner__layer-4-fade-in-out (4 * $spinner-arc-time)
|
bsw/jbe@1309
|
106 $animation-curve-fast-out-slow-in infinite both;
|
bsw/jbe@1309
|
107 }
|
bsw/jbe@1309
|
108 }
|
bsw/jbe@1309
|
109
|
bsw/jbe@1309
|
110 @keyframes mdl-spinner__fill-unfill-rotate {
|
bsw/jbe@1309
|
111 12.5% { transform: rotate(0.5 * $spinner-arc-size); }
|
bsw/jbe@1309
|
112 25% { transform: rotate($spinner-arc-size); }
|
bsw/jbe@1309
|
113 37.5% { transform: rotate(1.5 * $spinner-arc-size); }
|
bsw/jbe@1309
|
114 50% { transform: rotate(2 * $spinner-arc-size); }
|
bsw/jbe@1309
|
115 62.5% { transform: rotate(2.5 * $spinner-arc-size); }
|
bsw/jbe@1309
|
116 75% { transform: rotate(3 * $spinner-arc-size); }
|
bsw/jbe@1309
|
117 87.5% { transform: rotate(3.5 * $spinner-arc-size); }
|
bsw/jbe@1309
|
118 to { transform: rotate(4 * $spinner-arc-size); }
|
bsw/jbe@1309
|
119 }
|
bsw/jbe@1309
|
120
|
bsw/jbe@1309
|
121 /**
|
bsw/jbe@1309
|
122 * HACK: Even though the intention is to have the current .mdl-spinner__layer-N
|
bsw/jbe@1309
|
123 * at `opacity: 1`, we set it to `opacity: 0.99` instead since this forces Chrome
|
bsw/jbe@1309
|
124 * to do proper subpixel rendering for the elements being animated. This is
|
bsw/jbe@1309
|
125 * especially visible in Chrome 39 on Ubuntu 14.04. See:
|
bsw/jbe@1309
|
126 *
|
bsw/jbe@1309
|
127 * - https://github.com/Polymer/paper-spinner/issues/9
|
bsw/jbe@1309
|
128 * - https://code.google.com/p/chromium/issues/detail?id=436255
|
bsw/jbe@1309
|
129 */
|
bsw/jbe@1309
|
130 @keyframes mdl-spinner__layer-1-fade-in-out {
|
bsw/jbe@1309
|
131 from { opacity: 0.99; }
|
bsw/jbe@1309
|
132 25% { opacity: 0.99; }
|
bsw/jbe@1309
|
133 26% { opacity: 0; }
|
bsw/jbe@1309
|
134 89% { opacity: 0; }
|
bsw/jbe@1309
|
135 90% { opacity: 0.99; }
|
bsw/jbe@1309
|
136 100% { opacity: 0.99; }
|
bsw/jbe@1309
|
137 }
|
bsw/jbe@1309
|
138
|
bsw/jbe@1309
|
139 @keyframes mdl-spinner__layer-2-fade-in-out {
|
bsw/jbe@1309
|
140 from { opacity: 0; }
|
bsw/jbe@1309
|
141 15% { opacity: 0; }
|
bsw/jbe@1309
|
142 25% { opacity: 0.99; }
|
bsw/jbe@1309
|
143 50% { opacity: 0.99; }
|
bsw/jbe@1309
|
144 51% { opacity: 0; }
|
bsw/jbe@1309
|
145 }
|
bsw/jbe@1309
|
146
|
bsw/jbe@1309
|
147 @keyframes mdl-spinner__layer-3-fade-in-out {
|
bsw/jbe@1309
|
148 from { opacity: 0; }
|
bsw/jbe@1309
|
149 40% { opacity: 0; }
|
bsw/jbe@1309
|
150 50% { opacity: 0.99; }
|
bsw/jbe@1309
|
151 75% { opacity: 0.99; }
|
bsw/jbe@1309
|
152 76% { opacity: 0; }
|
bsw/jbe@1309
|
153 }
|
bsw/jbe@1309
|
154
|
bsw/jbe@1309
|
155 @keyframes mdl-spinner__layer-4-fade-in-out {
|
bsw/jbe@1309
|
156 from { opacity: 0; }
|
bsw/jbe@1309
|
157 65% { opacity: 0; }
|
bsw/jbe@1309
|
158 75% { opacity: 0.99; }
|
bsw/jbe@1309
|
159 90% { opacity: 0.99; }
|
bsw/jbe@1309
|
160 100% { opacity: 0; }
|
bsw/jbe@1309
|
161 }
|
bsw/jbe@1309
|
162
|
bsw/jbe@1309
|
163 /**
|
bsw/jbe@1309
|
164 * Patch the gap that appear between the two adjacent
|
bsw/jbe@1309
|
165 * div.mdl-spinner__circle-clipper while the spinner is rotating
|
bsw/jbe@1309
|
166 * (appears on Chrome 38, Safari 7.1, and IE 11).
|
bsw/jbe@1309
|
167 *
|
bsw/jbe@1309
|
168 * Update: the gap no longer appears on Chrome when .mdl-spinner__layer-N's
|
bsw/jbe@1309
|
169 * opacity is 0.99, but still does on Safari and IE.
|
bsw/jbe@1309
|
170 */
|
bsw/jbe@1309
|
171 .mdl-spinner__gap-patch {
|
bsw/jbe@1309
|
172 position: absolute;
|
bsw/jbe@1309
|
173 box-sizing: border-box;
|
bsw/jbe@1309
|
174 top: 0;
|
bsw/jbe@1309
|
175 left: 45%;
|
bsw/jbe@1309
|
176 width: 10%;
|
bsw/jbe@1309
|
177 height: 100%;
|
bsw/jbe@1309
|
178 overflow: hidden;
|
bsw/jbe@1309
|
179 border-color: inherit;
|
bsw/jbe@1309
|
180
|
bsw/jbe@1309
|
181 & .mdl-spinner__circle {
|
bsw/jbe@1309
|
182 width: 1000%;
|
bsw/jbe@1309
|
183 left: -450%;
|
bsw/jbe@1309
|
184 }
|
bsw/jbe@1309
|
185 }
|
bsw/jbe@1309
|
186
|
bsw/jbe@1309
|
187 .mdl-spinner__circle-clipper {
|
bsw/jbe@1309
|
188 display: inline-block;
|
bsw/jbe@1309
|
189 position: relative;
|
bsw/jbe@1309
|
190 width: 50%;
|
bsw/jbe@1309
|
191 height: 100%;
|
bsw/jbe@1309
|
192 overflow: hidden;
|
bsw/jbe@1309
|
193 border-color: inherit;
|
bsw/jbe@1309
|
194
|
bsw/jbe@1309
|
195 & .mdl-spinner__circle {
|
bsw/jbe@1309
|
196 width: 200%;
|
bsw/jbe@1309
|
197 }
|
bsw/jbe@1309
|
198 }
|
bsw/jbe@1309
|
199
|
bsw/jbe@1309
|
200 .mdl-spinner__circle {
|
bsw/jbe@1309
|
201 box-sizing: border-box;
|
bsw/jbe@1309
|
202 height: 100%;
|
bsw/jbe@1309
|
203 border-width: $spinner-stroke-width;
|
bsw/jbe@1309
|
204 border-style: solid;
|
bsw/jbe@1309
|
205 border-color: inherit;
|
bsw/jbe@1309
|
206 border-bottom-color: transparent !important;
|
bsw/jbe@1309
|
207 border-radius: 50%;
|
bsw/jbe@1309
|
208 animation: none;
|
bsw/jbe@1309
|
209
|
bsw/jbe@1309
|
210 position: absolute;
|
bsw/jbe@1309
|
211 top: 0;
|
bsw/jbe@1309
|
212 right: 0;
|
bsw/jbe@1309
|
213 bottom: 0;
|
bsw/jbe@1309
|
214 left: 0;
|
bsw/jbe@1309
|
215
|
bsw/jbe@1309
|
216 .mdl-spinner__left & {
|
bsw/jbe@1309
|
217 border-right-color: transparent !important;
|
bsw/jbe@1309
|
218 transform: rotate(129deg);
|
bsw/jbe@1309
|
219
|
bsw/jbe@1309
|
220 .mdl-spinner.is-active & {
|
bsw/jbe@1309
|
221 animation: mdl-spinner__left-spin $spinner-arc-time
|
bsw/jbe@1309
|
222 $animation-curve-fast-out-slow-in infinite both;
|
bsw/jbe@1309
|
223 }
|
bsw/jbe@1309
|
224 }
|
bsw/jbe@1309
|
225
|
bsw/jbe@1309
|
226 .mdl-spinner__right & {
|
bsw/jbe@1309
|
227 left: -100%;
|
bsw/jbe@1309
|
228 border-left-color: transparent !important;
|
bsw/jbe@1309
|
229 transform: rotate(-129deg);
|
bsw/jbe@1309
|
230
|
bsw/jbe@1309
|
231 .mdl-spinner.is-active & {
|
bsw/jbe@1309
|
232 animation: mdl-spinner__right-spin $spinner-arc-time
|
bsw/jbe@1309
|
233 $animation-curve-fast-out-slow-in infinite both;
|
bsw/jbe@1309
|
234 }
|
bsw/jbe@1309
|
235 }
|
bsw/jbe@1309
|
236 }
|
bsw/jbe@1309
|
237
|
bsw/jbe@1309
|
238 @keyframes mdl-spinner__left-spin {
|
bsw/jbe@1309
|
239 from { transform: rotate(130deg); }
|
bsw/jbe@1309
|
240 50% { transform: rotate(-5deg); }
|
bsw/jbe@1309
|
241 to { transform: rotate(130deg); }
|
bsw/jbe@1309
|
242 }
|
bsw/jbe@1309
|
243
|
bsw/jbe@1309
|
244 @keyframes mdl-spinner__right-spin {
|
bsw/jbe@1309
|
245 from { transform: rotate(-130deg); }
|
bsw/jbe@1309
|
246 50% { transform: rotate(5deg); }
|
bsw/jbe@1309
|
247 to { transform: rotate(-130deg); }
|
bsw/jbe@1309
|
248 }
|