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

Side by Side Diff: third_party/polymer/v1_0/components-chromium/paper-spinner/paper-spinner-styles.html

Issue 1633603004: Add script to remove prefixed CSS from third_party/polymer. (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: add missing files Created 3 years, 9 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
1 <!-- 1 <!--
2 @license 2 @license
3 Copyright (c) 2015 The Polymer Project Authors. All rights reserved. 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 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 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 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 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 8 subject to an additional IP rights grant found at http://polymer.github.io/PATEN TS.txt
9 --> 9 -->
10 10
(...skipping 40 matching lines...) Expand 10 before | Expand all | Expand 10 after
51 width: 100%; 51 width: 100%;
52 height: 100%; 52 height: 100%;
53 53
54 /* The spinner does not have any contents that would have to be 54 /* The spinner does not have any contents that would have to be
55 * flipped if the direction changes. Always use ltr so that the 55 * flipped if the direction changes. Always use ltr so that the
56 * style works out correctly in both cases. */ 56 * style works out correctly in both cases. */
57 direction: ltr; 57 direction: ltr;
58 } 58 }
59 59
60 #spinnerContainer.active { 60 #spinnerContainer.active {
61 -webkit-animation: container-rotate var(--paper-spinner-container-rotati on-duration) linear infinite;
62 animation: container-rotate var(--paper-spinner-container-rotation-durat ion) linear infinite; 61 animation: container-rotate var(--paper-spinner-container-rotation-durat ion) linear infinite;
63 } 62 }
64 63
65 @-webkit-keyframes container-rotate {
66 to { -webkit-transform: rotate(360deg) }
67 }
68 64
69 @keyframes container-rotate { 65 @keyframes container-rotate {
70 to { transform: rotate(360deg) } 66 to { transform: rotate(360deg) }
71 } 67 }
72 68
73 .spinner-layer { 69 .spinner-layer {
74 position: absolute; 70 position: absolute;
75 width: 100%; 71 width: 100%;
76 height: 100%; 72 height: 100%;
77 opacity: 0; 73 opacity: 0;
(...skipping 19 matching lines...) Expand all
97 93
98 /** 94 /**
99 * IMPORTANT NOTE ABOUT CSS ANIMATION PROPERTIES (keanulee): 95 * IMPORTANT NOTE ABOUT CSS ANIMATION PROPERTIES (keanulee):
100 * 96 *
101 * iOS Safari (tested on iOS 8.1) does not handle animation-delay very wel l - it doesn't 97 * iOS Safari (tested on iOS 8.1) does not handle animation-delay very wel l - it doesn't
102 * guarantee that the animation will start _exactly_ after that value. So we avoid using 98 * guarantee that the animation will start _exactly_ after that value. So we avoid using
103 * animation-delay and instead set custom keyframes for each color (as lay er-2undant as it 99 * animation-delay and instead set custom keyframes for each color (as lay er-2undant as it
104 * seems). 100 * seems).
105 */ 101 */
106 .active .spinner-layer { 102 .active .spinner-layer {
107 -webkit-animation-name: fill-unfill-rotate;
108 -webkit-animation-duration: var(--paper-spinner-full-cycle-duration);
109 -webkit-animation-timing-function: cubic-bezier(0.4, 0.0, 0.2, 1);
110 -webkit-animation-iteration-count: infinite;
111 animation-name: fill-unfill-rotate; 103 animation-name: fill-unfill-rotate;
112 animation-duration: var(--paper-spinner-full-cycle-duration); 104 animation-duration: var(--paper-spinner-full-cycle-duration);
113 animation-timing-function: cubic-bezier(0.4, 0.0, 0.2, 1); 105 animation-timing-function: cubic-bezier(0.4, 0.0, 0.2, 1);
114 animation-iteration-count: infinite; 106 animation-iteration-count: infinite;
115 opacity: 1; 107 opacity: 1;
116 } 108 }
117 109
118 .active .spinner-layer.layer-1 { 110 .active .spinner-layer.layer-1 {
119 -webkit-animation-name: fill-unfill-rotate, layer-1-fade-in-out;
120 animation-name: fill-unfill-rotate, layer-1-fade-in-out; 111 animation-name: fill-unfill-rotate, layer-1-fade-in-out;
121 } 112 }
122 113
123 .active .spinner-layer.layer-2 { 114 .active .spinner-layer.layer-2 {
124 -webkit-animation-name: fill-unfill-rotate, layer-2-fade-in-out;
125 animation-name: fill-unfill-rotate, layer-2-fade-in-out; 115 animation-name: fill-unfill-rotate, layer-2-fade-in-out;
126 } 116 }
127 117
128 .active .spinner-layer.layer-3 { 118 .active .spinner-layer.layer-3 {
129 -webkit-animation-name: fill-unfill-rotate, layer-3-fade-in-out;
130 animation-name: fill-unfill-rotate, layer-3-fade-in-out; 119 animation-name: fill-unfill-rotate, layer-3-fade-in-out;
131 } 120 }
132 121
133 .active .spinner-layer.layer-4 { 122 .active .spinner-layer.layer-4 {
134 -webkit-animation-name: fill-unfill-rotate, layer-4-fade-in-out;
135 animation-name: fill-unfill-rotate, layer-4-fade-in-out; 123 animation-name: fill-unfill-rotate, layer-4-fade-in-out;
136 } 124 }
137 125
138 @-webkit-keyframes fill-unfill-rotate {
139 12.5% { -webkit-transform: rotate(135deg) } /* 0.5 * ARCSIZE */
140 25% { -webkit-transform: rotate(270deg) } /* 1 * ARCSIZE */
141 37.5% { -webkit-transform: rotate(405deg) } /* 1.5 * ARCSIZE */
142 50% { -webkit-transform: rotate(540deg) } /* 2 * ARCSIZE */
143 62.5% { -webkit-transform: rotate(675deg) } /* 2.5 * ARCSIZE */
144 75% { -webkit-transform: rotate(810deg) } /* 3 * ARCSIZE */
145 87.5% { -webkit-transform: rotate(945deg) } /* 3.5 * ARCSIZE */
146 to { -webkit-transform: rotate(1080deg) } /* 4 * ARCSIZE */
147 }
148 126
149 @keyframes fill-unfill-rotate { 127 @keyframes fill-unfill-rotate {
150 12.5% { transform: rotate(135deg) } /* 0.5 * ARCSIZE */ 128 12.5% { transform: rotate(135deg) } /* 0.5 * ARCSIZE */
151 25% { transform: rotate(270deg) } /* 1 * ARCSIZE */ 129 25% { transform: rotate(270deg) } /* 1 * ARCSIZE */
152 37.5% { transform: rotate(405deg) } /* 1.5 * ARCSIZE */ 130 37.5% { transform: rotate(405deg) } /* 1.5 * ARCSIZE */
153 50% { transform: rotate(540deg) } /* 2 * ARCSIZE */ 131 50% { transform: rotate(540deg) } /* 2 * ARCSIZE */
154 62.5% { transform: rotate(675deg) } /* 2.5 * ARCSIZE */ 132 62.5% { transform: rotate(675deg) } /* 2.5 * ARCSIZE */
155 75% { transform: rotate(810deg) } /* 3 * ARCSIZE */ 133 75% { transform: rotate(810deg) } /* 3 * ARCSIZE */
156 87.5% { transform: rotate(945deg) } /* 3.5 * ARCSIZE */ 134 87.5% { transform: rotate(945deg) } /* 3.5 * ARCSIZE */
157 to { transform: rotate(1080deg) } /* 4 * ARCSIZE */ 135 to { transform: rotate(1080deg) } /* 4 * ARCSIZE */
158 } 136 }
159 137
160 @-webkit-keyframes layer-1-fade-in-out {
161 0% { opacity: 1 }
162 25% { opacity: 1 }
163 26% { opacity: 0 }
164 89% { opacity: 0 }
165 90% { opacity: 1 }
166 to { opacity: 1 }
167 }
168 138
169 @keyframes layer-1-fade-in-out { 139 @keyframes layer-1-fade-in-out {
170 0% { opacity: 1 } 140 0% { opacity: 1 }
171 25% { opacity: 1 } 141 25% { opacity: 1 }
172 26% { opacity: 0 } 142 26% { opacity: 0 }
173 89% { opacity: 0 } 143 89% { opacity: 0 }
174 90% { opacity: 1 } 144 90% { opacity: 1 }
175 to { opacity: 1 } 145 to { opacity: 1 }
176 } 146 }
177 147
178 @-webkit-keyframes layer-2-fade-in-out {
179 0% { opacity: 0 }
180 15% { opacity: 0 }
181 25% { opacity: 1 }
182 50% { opacity: 1 }
183 51% { opacity: 0 }
184 to { opacity: 0 }
185 }
186 148
187 @keyframes layer-2-fade-in-out { 149 @keyframes layer-2-fade-in-out {
188 0% { opacity: 0 } 150 0% { opacity: 0 }
189 15% { opacity: 0 } 151 15% { opacity: 0 }
190 25% { opacity: 1 } 152 25% { opacity: 1 }
191 50% { opacity: 1 } 153 50% { opacity: 1 }
192 51% { opacity: 0 } 154 51% { opacity: 0 }
193 to { opacity: 0 } 155 to { opacity: 0 }
194 } 156 }
195 157
196 @-webkit-keyframes layer-3-fade-in-out {
197 0% { opacity: 0 }
198 40% { opacity: 0 }
199 50% { opacity: 1 }
200 75% { opacity: 1 }
201 76% { opacity: 0 }
202 to { opacity: 0 }
203 }
204 158
205 @keyframes layer-3-fade-in-out { 159 @keyframes layer-3-fade-in-out {
206 0% { opacity: 0 } 160 0% { opacity: 0 }
207 40% { opacity: 0 } 161 40% { opacity: 0 }
208 50% { opacity: 1 } 162 50% { opacity: 1 }
209 75% { opacity: 1 } 163 75% { opacity: 1 }
210 76% { opacity: 0 } 164 76% { opacity: 0 }
211 to { opacity: 0 } 165 to { opacity: 0 }
212 } 166 }
213 167
214 @-webkit-keyframes layer-4-fade-in-out {
215 0% { opacity: 0 }
216 65% { opacity: 0 }
217 75% { opacity: 1 }
218 90% { opacity: 1 }
219 to { opacity: 0 }
220 }
221 168
222 @keyframes layer-4-fade-in-out { 169 @keyframes layer-4-fade-in-out {
223 0% { opacity: 0 } 170 0% { opacity: 0 }
224 65% { opacity: 0 } 171 65% { opacity: 0 }
225 75% { opacity: 1 } 172 75% { opacity: 1 }
226 90% { opacity: 1 } 173 90% { opacity: 1 }
227 to { opacity: 0 } 174 to { opacity: 0 }
228 } 175 }
229 176
230 .circle-clipper { 177 .circle-clipper {
(...skipping 29 matching lines...) Expand all
260 .circle-clipper::after { 207 .circle-clipper::after {
261 bottom: 0; 208 bottom: 0;
262 width: 200%; 209 width: 200%;
263 border-style: solid; 210 border-style: solid;
264 border-bottom-color: transparent !important; 211 border-bottom-color: transparent !important;
265 } 212 }
266 213
267 .circle-clipper.left::after { 214 .circle-clipper.left::after {
268 left: 0; 215 left: 0;
269 border-right-color: transparent !important; 216 border-right-color: transparent !important;
270 -webkit-transform: rotate(129deg);
271 transform: rotate(129deg); 217 transform: rotate(129deg);
272 } 218 }
273 219
274 .circle-clipper.right::after { 220 .circle-clipper.right::after {
275 left: -100%; 221 left: -100%;
276 border-left-color: transparent !important; 222 border-left-color: transparent !important;
277 -webkit-transform: rotate(-129deg);
278 transform: rotate(-129deg); 223 transform: rotate(-129deg);
279 } 224 }
280 225
281 .active .gap-patch::after, 226 .active .gap-patch::after,
282 .active .circle-clipper::after { 227 .active .circle-clipper::after {
283 -webkit-animation-duration: var(--paper-spinner-expand-contract-duration );
284 -webkit-animation-timing-function: cubic-bezier(0.4, 0.0, 0.2, 1);
285 -webkit-animation-iteration-count: infinite;
286 animation-duration: var(--paper-spinner-expand-contract-duration); 228 animation-duration: var(--paper-spinner-expand-contract-duration);
287 animation-timing-function: cubic-bezier(0.4, 0.0, 0.2, 1); 229 animation-timing-function: cubic-bezier(0.4, 0.0, 0.2, 1);
288 animation-iteration-count: infinite; 230 animation-iteration-count: infinite;
289 } 231 }
290 232
291 .active .circle-clipper.left::after { 233 .active .circle-clipper.left::after {
292 -webkit-animation-name: left-spin;
293 animation-name: left-spin; 234 animation-name: left-spin;
294 } 235 }
295 236
296 .active .circle-clipper.right::after { 237 .active .circle-clipper.right::after {
297 -webkit-animation-name: right-spin;
298 animation-name: right-spin; 238 animation-name: right-spin;
299 } 239 }
300 240
301 @-webkit-keyframes left-spin {
302 0% { -webkit-transform: rotate(130deg) }
303 50% { -webkit-transform: rotate(-5deg) }
304 to { -webkit-transform: rotate(130deg) }
305 }
306 241
307 @keyframes left-spin { 242 @keyframes left-spin {
308 0% { transform: rotate(130deg) } 243 0% { transform: rotate(130deg) }
309 50% { transform: rotate(-5deg) } 244 50% { transform: rotate(-5deg) }
310 to { transform: rotate(130deg) } 245 to { transform: rotate(130deg) }
311 } 246 }
312 247
313 @-webkit-keyframes right-spin {
314 0% { -webkit-transform: rotate(-130deg) }
315 50% { -webkit-transform: rotate(5deg) }
316 to { -webkit-transform: rotate(-130deg) }
317 }
318 248
319 @keyframes right-spin { 249 @keyframes right-spin {
320 0% { transform: rotate(-130deg) } 250 0% { transform: rotate(-130deg) }
321 50% { transform: rotate(5deg) } 251 50% { transform: rotate(5deg) }
322 to { transform: rotate(-130deg) } 252 to { transform: rotate(-130deg) }
323 } 253 }
324 254
325 #spinnerContainer.cooldown { 255 #spinnerContainer.cooldown {
326 -webkit-animation: container-rotate var(--paper-spinner-container-rotati on-duration) linear infinite, fade-out var(--paper-spinner-cooldown-duration) cu bic-bezier(0.4, 0.0, 0.2, 1);
327 animation: container-rotate var(--paper-spinner-container-rotation-durat ion) linear infinite, fade-out var(--paper-spinner-cooldown-duration) cubic-bezi er(0.4, 0.0, 0.2, 1); 256 animation: container-rotate var(--paper-spinner-container-rotation-durat ion) linear infinite, fade-out var(--paper-spinner-cooldown-duration) cubic-bezi er(0.4, 0.0, 0.2, 1);
328 } 257 }
329 258
330 @-webkit-keyframes fade-out {
331 0% { opacity: 1 }
332 to { opacity: 0 }
333 }
334 259
335 @keyframes fade-out { 260 @keyframes fade-out {
336 0% { opacity: 1 } 261 0% { opacity: 1 }
337 to { opacity: 0 } 262 to { opacity: 0 }
338 } 263 }
339 </style> 264 </style>
340 </template> 265 </template>
341 </dom-module> 266 </dom-module>
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698