Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(15)

Side by Side Diff: third_party/polymer/v1_0/components/paper-spinner/paper-spinner.css

Issue 1269803005: Remove third_party/polymer from .gitignore (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: Created 5 years, 4 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch
OLDNEW
(Empty)
1 /**
2 @license
3 Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
4 This code may only be used under the BSD style license found at http://polymer.g ithub.io/LICENSE.txt
5 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
6 The complete set of contributors may be found at http://polymer.github.io/CONTRI BUTORS.txt
7 Code distributed by Google as part of the polymer project is also
8 subject to an additional IP rights grant found at http://polymer.github.io/PATEN TS.txt
9
10 */
11 /**************************/
12 /* STYLES FOR THE SPINNER */
13 /**************************/
14
15 /*
16 * Constants:
17 * STROKEWIDTH = 3px
18 * ARCSIZE = 270 degrees (amount of circle the arc takes up)
19 * ARCTIME = 1333ms (time it takes to expand and contract arc)
20 * ARCSTARTROT = 216 degrees (how much the start location of the arc
21 * should rotate each time, 216 gives us a
22 * 5 pointed star shape (it's 360/5 * 3).
23 * For a 7 pointed star, we might do
24 * 360/7 * 3 = 154.286)
25 * CONTAINERWIDTH = 28px
26 * SHRINK_TIME = 400ms
27 */
28
29 :host {
30 display: inline-block;
31 position: relative;
32 width: 28px; /* CONTAINERWIDTH */
33 height: 28px; /* CONTAINERWIDTH */
34 }
35
36 #spinnerContainer {
37 width: 100%;
38 height: 100%;
39
40 /* The spinner does not have any contents that would have to be
41 * flipped if the direction changes. Always use ltr so that the
42 * style works out correctly in both cases. */
43 direction: ltr;
44 }
45
46 #spinnerContainer.active {
47 /* duration: 360 * ARCTIME / (ARCSTARTROT + (360-ARCSIZE)) */
48 -webkit-animation: container-rotate 1568ms linear infinite;
49 animation: container-rotate 1568ms linear infinite;
50 }
51
52 @-webkit-keyframes container-rotate {
53 to { -webkit-transform: rotate(360deg) }
54 }
55
56 @keyframes container-rotate {
57 to { transform: rotate(360deg) }
58 }
59
60 .spinner-layer {
61 position: absolute;
62 width: 100%;
63 height: 100%;
64 opacity: 0;
65 }
66
67 .layer-1 {
68 border-color: var(--paper-spinner-layer-1-color, --google-blue-500);
69 }
70
71 .layer-2 {
72 border-color: var(--paper-spinner-layer-2-color, --google-red-500);
73 }
74
75 .layer-3 {
76 border-color: var(--paper-spinner-layer-3-color, --google-yellow-500);
77 }
78
79 .layer-4 {
80 border-color: var(--paper-spinner-layer-4-color, --google-blue-500);
81 }
82
83 /**
84 * IMPORTANT NOTE ABOUT CSS ANIMATION PROPERTIES (keanulee):
85 *
86 * iOS Safari (tested on iOS 8.1) does not handle animation-delay very well - it doesn't
87 * guarantee that the animation will start _exactly_ after that value. So we avo id using
88 * animation-delay and instead set custom keyframes for each color (as layer-2un dant as it
89 * seems).
90 *
91 * We write out each animation in full (instead of separating animation-name,
92 * animation-duration, etc.) because under the polyfill, Safari does not recogni ze those
93 * specific properties properly, treats them as -webkit-animation, and overrides the
94 * other animation rules. See https://github.com/Polymer/platform/issues/53.
95 */
96 .active .spinner-layer.layer-1 {
97 /* durations: 4 * ARCTIME */
98 -webkit-animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) in finite both, layer-1-fade-in-out 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
99 animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite b oth, layer-1-fade-in-out 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
100 }
101
102 .active .spinner-layer.layer-2 {
103 /* durations: 4 * ARCTIME */
104 -webkit-animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) in finite both, layer-2-fade-in-out 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
105 animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite b oth, layer-2-fade-in-out 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
106 }
107
108 .active .spinner-layer.layer-3 {
109 /* durations: 4 * ARCTIME */
110 -webkit-animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) in finite both, layer-3-fade-in-out 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
111 animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite b oth, layer-3-fade-in-out 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
112 }
113
114 .active .spinner-layer.layer-4 {
115 /* durations: 4 * ARCTIME */
116 -webkit-animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) in finite both, layer-4-fade-in-out 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
117 animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite b oth, layer-4-fade-in-out 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
118 }
119
120 @-webkit-keyframes fill-unfill-rotate {
121 12.5% { -webkit-transform: rotate(135deg); } /* 0.5 * ARCSIZE */
122 25% { -webkit-transform: rotate(270deg); } /* 1 * ARCSIZE */
123 37.5% { -webkit-transform: rotate(405deg); } /* 1.5 * ARCSIZE */
124 50% { -webkit-transform: rotate(540deg); } /* 2 * ARCSIZE */
125 62.5% { -webkit-transform: rotate(675deg); } /* 2.5 * ARCSIZE */
126 75% { -webkit-transform: rotate(810deg); } /* 3 * ARCSIZE */
127 87.5% { -webkit-transform: rotate(945deg); } /* 3.5 * ARCSIZE */
128 to { -webkit-transform: rotate(1080deg); } /* 4 * ARCSIZE */
129 }
130
131 @keyframes fill-unfill-rotate {
132 12.5% { transform: rotate(135deg); } /* 0.5 * ARCSIZE */
133 25% { transform: rotate(270deg); } /* 1 * ARCSIZE */
134 37.5% { transform: rotate(405deg); } /* 1.5 * ARCSIZE */
135 50% { transform: rotate(540deg); } /* 2 * ARCSIZE */
136 62.5% { transform: rotate(675deg); } /* 2.5 * ARCSIZE */
137 75% { transform: rotate(810deg); } /* 3 * ARCSIZE */
138 87.5% { transform: rotate(945deg); } /* 3.5 * ARCSIZE */
139 to { transform: rotate(1080deg); } /* 4 * ARCSIZE */
140 }
141
142 /**
143 * HACK: Even though the intention is to have the current .spinner-layer at
144 * `opacity: 1`, we set it to `opacity: 0.99` instead since this forces Chrome
145 * to do proper subpixel rendering for the elements being animated. This is
146 * especially visible in Chrome 39 on Ubuntu 14.04. See:
147 *
148 * - https://github.com/Polymer/paper-spinner/issues/9
149 * - https://code.google.com/p/chromium/issues/detail?id=436255
150 */
151 @-webkit-keyframes layer-1-fade-in-out {
152 from { opacity: 0.99; }
153 25% { opacity: 0.99; }
154 26% { opacity: 0; }
155 89% { opacity: 0; }
156 90% { opacity: 0.99; }
157 100% { opacity: 0.99; }
158 }
159
160 @keyframes layer-1-fade-in-out {
161 from { opacity: 0.99; }
162 25% { opacity: 0.99; }
163 26% { opacity: 0; }
164 89% { opacity: 0; }
165 90% { opacity: 0.99; }
166 100% { opacity: 0.99; }
167 }
168
169 @-webkit-keyframes layer-2-fade-in-out {
170 from { opacity: 0; }
171 15% { opacity: 0; }
172 25% { opacity: 0.99; }
173 50% { opacity: 0.99; }
174 51% { opacity: 0; }
175 }
176
177 @keyframes layer-2-fade-in-out {
178 from { opacity: 0; }
179 15% { opacity: 0; }
180 25% { opacity: 0.99; }
181 50% { opacity: 0.99; }
182 51% { opacity: 0; }
183 }
184
185 @-webkit-keyframes layer-3-fade-in-out {
186 from { opacity: 0; }
187 40% { opacity: 0; }
188 50% { opacity: 0.99; }
189 75% { opacity: 0.99; }
190 76% { opacity: 0; }
191 }
192
193 @keyframes layer-3-fade-in-out {
194 from { opacity: 0; }
195 40% { opacity: 0; }
196 50% { opacity: 0.99; }
197 75% { opacity: 0.99; }
198 76% { opacity: 0; }
199 }
200
201 @-webkit-keyframes layer-4-fade-in-out {
202 from { opacity: 0; }
203 65% { opacity: 0; }
204 75% { opacity: 0.99; }
205 90% { opacity: 0.99; }
206 100% { opacity: 0; }
207 }
208
209 @keyframes layer-4-fade-in-out {
210 from { opacity: 0; }
211 65% { opacity: 0; }
212 75% { opacity: 0.99; }
213 90% { opacity: 0.99; }
214 100% { opacity: 0; }
215 }
216
217 /**
218 * Patch the gap that appear between the two adjacent div.circle-clipper while t he
219 * spinner is rotating (appears on Chrome 38, Safari 7.1, and IE 11).
220 *
221 * Update: the gap no longer appears on Chrome when .spinner-layer's opacity is 0.99,
222 * but still does on Safari and IE.
223 */
224 .gap-patch {
225 position: absolute;
226 box-sizing: border-box;
227 top: 0;
228 left: 45%;
229 width: 10%;
230 height: 100%;
231 overflow: hidden;
232 border-color: inherit;
233 }
234
235 .gap-patch .circle {
236 width: 1000%;
237 left: -450%;
238 }
239
240 .circle-clipper {
241 display: inline-block;
242 position: relative;
243 width: 50%;
244 height: 100%;
245 overflow: hidden;
246 border-color: inherit;
247 }
248
249 .circle-clipper .circle {
250 width: 200%;
251 }
252
253 .circle {
254 box-sizing: border-box;
255 height: 100%;
256 border-width: 3px; /* STROKEWIDTH */
257 border-style: solid;
258 border-color: inherit;
259 border-bottom-color: transparent !important;
260 border-radius: 50%;
261 -webkit-animation: none;
262 animation: none;
263
264 @apply(--layout-fit);
265 }
266
267 .circle-clipper.left .circle {
268 border-right-color: transparent !important;
269 -webkit-transform: rotate(129deg);
270 transform: rotate(129deg);
271 }
272
273 .circle-clipper.right .circle {
274 left: -100%;
275 border-left-color: transparent !important;
276 -webkit-transform: rotate(-129deg);
277 transform: rotate(-129deg);
278 }
279
280 .active .circle-clipper.left .circle {
281 /* duration: ARCTIME */
282 -webkit-animation: left-spin 1333ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite bo th;
283 animation: left-spin 1333ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
284 }
285
286 .active .circle-clipper.right .circle {
287 /* duration: ARCTIME */
288 -webkit-animation: right-spin 1333ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite b oth;
289 animation: right-spin 1333ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
290 }
291
292 @-webkit-keyframes left-spin {
293 from { -webkit-transform: rotate(130deg); }
294 50% { -webkit-transform: rotate(-5deg); }
295 to { -webkit-transform: rotate(130deg); }
296 }
297
298 @keyframes left-spin {
299 from { transform: rotate(130deg); }
300 50% { transform: rotate(-5deg); }
301 to { transform: rotate(130deg); }
302 }
303
304 @-webkit-keyframes right-spin {
305 from { -webkit-transform: rotate(-130deg); }
306 50% { -webkit-transform: rotate(5deg); }
307 to { -webkit-transform: rotate(-130deg); }
308 }
309
310 @keyframes right-spin {
311 from { transform: rotate(-130deg); }
312 50% { transform: rotate(5deg); }
313 to { transform: rotate(-130deg); }
314 }
315
316 #spinnerContainer.cooldown {
317 /* duration: SHRINK_TIME */
318 -webkit-animation: container-rotate 1568ms linear infinite, fade-out 400ms cub ic-bezier(0.4, 0.0, 0.2, 1);
319 animation: container-rotate 1568ms linear infinite, fade-out 400ms cubic-bezie r(0.4, 0.0, 0.2, 1);
320 }
321
322 @-webkit-keyframes fade-out {
323 from { opacity: 0.99; }
324 to { opacity: 0; }
325 }
326
327 @keyframes fade-out {
328 from { opacity: 0.99; }
329 to { opacity: 0; }
330 }
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698