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

Side by Side Diff: polymer_1.0.4/bower_components/paper-spinner/paper-spinner.css

Issue 1205703007: Add polymer 1.0 to npm_modules (Closed) Base URL: https://chromium.googlesource.com/infra/third_party/npm_modules.git@master
Patch Set: Renamed folder to 1.0.4 Created 5 years, 6 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) 2014 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://polym er.github.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/CO NTRIBUTORS.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/P ATENTS.txt 8 subject to an additional IP rights grant found at http://polymer.github.io/PATEN TS.txt
9 */
10 9
10 */
11 /**************************/ 11 /**************************/
12 /* STYLES FOR THE SPINNER */ 12 /* STYLES FOR THE SPINNER */
13 /**************************/ 13 /**************************/
14 14
15 /* 15 /*
16 * Constants: 16 * Constants:
17 * STROKEWIDTH = 3px 17 * STROKEWIDTH = 3px
18 * ARCSIZE = 270 degrees (amount of circle the arc takes up) 18 * ARCSIZE = 270 degrees (amount of circle the arc takes up)
19 * ARCTIME = 1333ms (time it takes to expand and contract arc) 19 * ARCTIME = 1333ms (time it takes to expand and contract arc)
20 * ARCSTARTROT = 216 degrees (how much the start location of the arc 20 * ARCSTARTROT = 216 degrees (how much the start location of the arc
21 * should rotate each time, 216 gives us a 21 * should rotate each time, 216 gives us a
22 * 5 pointed star shape (it's 360/5 * 3). 22 * 5 pointed star shape (it's 360/5 * 3).
23 * For a 7 pointed star, we might do 23 * For a 7 pointed star, we might do
24 * 360/7 * 3 = 154.286) 24 * 360/7 * 3 = 154.286)
25 * CONTAINERWIDTH = 28px 25 * CONTAINERWIDTH = 28px
26 * SHRINK_TIME = 400ms 26 * SHRINK_TIME = 400ms
27 */ 27 */
28 28
29 :host { 29 :host {
30 display: inline-block; 30 display: inline-block;
31 position: relative; 31 position: relative;
32 width: 28px; /* CONTAINERWIDTH */ 32 width: 28px; /* CONTAINERWIDTH */
33 height: 28px; /* CONTAINERWIDTH */ 33 height: 28px; /* CONTAINERWIDTH */
34 } 34 }
35 35
36 #spinnerContainer { 36 #spinnerContainer {
37 width: 100%; 37 width: 100%;
38 height: 100%; 38 height: 100%;
39 } 39 }
(...skipping 12 matching lines...) Expand all
52 to { transform: rotate(360deg) } 52 to { transform: rotate(360deg) }
53 } 53 }
54 54
55 .spinner-layer { 55 .spinner-layer {
56 position: absolute; 56 position: absolute;
57 width: 100%; 57 width: 100%;
58 height: 100%; 58 height: 100%;
59 opacity: 0; 59 opacity: 0;
60 } 60 }
61 61
62 .blue { 62 .layer-1 {
63 border-color: #4285f4; 63 border-color: var(--paper-spinner-layer-1-color, --google-blue-500);
64 } 64 }
65 65
66 .red { 66 .layer-2 {
67 border-color: #db4437; 67 border-color: var(--paper-spinner-layer-2-color, --google-red-500);
68 } 68 }
69 69
70 .yellow { 70 .layer-3 {
71 border-color: #f4b400; 71 border-color: var(--paper-spinner-layer-3-color, --google-yellow-500);
72 } 72 }
73 73
74 .green { 74 .layer-4 {
75 border-color: #0f9d58; 75 border-color: var(--paper-spinner-layer-4-color, --google-blue-500);
76 } 76 }
77 77
78 /** 78 /**
79 * IMPORTANT NOTE ABOUT CSS ANIMATION PROPERTIES (keanulee): 79 * IMPORTANT NOTE ABOUT CSS ANIMATION PROPERTIES (keanulee):
80 * 80 *
81 * iOS Safari (tested on iOS 8.1) does not handle animation-delay very well - it doesn't 81 * iOS Safari (tested on iOS 8.1) does not handle animation-delay very well - it doesn't
82 * guarantee that the animation will start _exactly_ after that value. So we avo id using 82 * guarantee that the animation will start _exactly_ after that value. So we avo id using
83 * animation-delay and instead set custom keyframes for each color (as redundant as it 83 * animation-delay and instead set custom keyframes for each color (as layer-2un dant as it
84 * seems). 84 * seems).
85 * 85 *
86 * We write out each animation in full (instead of separating animation-name, 86 * We write out each animation in full (instead of separating animation-name,
87 * animation-duration, etc.) because under the polyfill, Safari does not recogni ze those 87 * animation-duration, etc.) because under the polyfill, Safari does not recogni ze those
88 * specific properties properly, treats them as -webkit-animation, and overrides the 88 * specific properties properly, treats them as -webkit-animation, and overrides the
89 * other animation rules. See https://github.com/Polymer/platform/issues/53. 89 * other animation rules. See https://github.com/Polymer/platform/issues/53.
90 */ 90 */
91 .active .spinner-layer.blue { 91 .active .spinner-layer.layer-1 {
92 /* durations: 4 * ARCTIME */ 92 /* durations: 4 * ARCTIME */
93 -webkit-animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) in finite both, blue-fade-in-out 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite bot h; 93 -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;
94 animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite b oth, blue-fade-in-out 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both; 94 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;
95 } 95 }
96 96
97 .active .spinner-layer.red { 97 .active .spinner-layer.layer-2 {
98 /* durations: 4 * ARCTIME */ 98 /* durations: 4 * ARCTIME */
99 -webkit-animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) in finite both, red-fade-in-out 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both ; 99 -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;
100 animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite b oth, red-fade-in-out 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both; 100 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;
101 } 101 }
102 102
103 .active .spinner-layer.yellow { 103 .active .spinner-layer.layer-3 {
104 /* durations: 4 * ARCTIME */ 104 /* durations: 4 * ARCTIME */
105 -webkit-animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) in finite both, yellow-fade-in-out 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite b oth; 105 -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;
106 animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite b oth, yellow-fade-in-out 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both; 106 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;
107 } 107 }
108 108
109 .active .spinner-layer.green { 109 .active .spinner-layer.layer-4 {
110 /* durations: 4 * ARCTIME */ 110 /* durations: 4 * ARCTIME */
111 -webkit-animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) in finite both, green-fade-in-out 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite bo th; 111 -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;
112 animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite b oth, green-fade-in-out 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both; 112 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;
113 } 113 }
114 114
115 @-webkit-keyframes fill-unfill-rotate { 115 @-webkit-keyframes fill-unfill-rotate {
116 12.5% { -webkit-transform: rotate(135deg); } /* 0.5 * ARCSIZE */ 116 12.5% { -webkit-transform: rotate(135deg); } /* 0.5 * ARCSIZE */
117 25% { -webkit-transform: rotate(270deg); } /* 1 * ARCSIZE */ 117 25% { -webkit-transform: rotate(270deg); } /* 1 * ARCSIZE */
118 37.5% { -webkit-transform: rotate(405deg); } /* 1.5 * ARCSIZE */ 118 37.5% { -webkit-transform: rotate(405deg); } /* 1.5 * ARCSIZE */
119 50% { -webkit-transform: rotate(540deg); } /* 2 * ARCSIZE */ 119 50% { -webkit-transform: rotate(540deg); } /* 2 * ARCSIZE */
120 62.5% { -webkit-transform: rotate(675deg); } /* 2.5 * ARCSIZE */ 120 62.5% { -webkit-transform: rotate(675deg); } /* 2.5 * ARCSIZE */
121 75% { -webkit-transform: rotate(810deg); } /* 3 * ARCSIZE */ 121 75% { -webkit-transform: rotate(810deg); } /* 3 * ARCSIZE */
122 87.5% { -webkit-transform: rotate(945deg); } /* 3.5 * ARCSIZE */ 122 87.5% { -webkit-transform: rotate(945deg); } /* 3.5 * ARCSIZE */
(...skipping 13 matching lines...) Expand all
136 136
137 /** 137 /**
138 * HACK: Even though the intention is to have the current .spinner-layer at 138 * HACK: Even though the intention is to have the current .spinner-layer at
139 * `opacity: 1`, we set it to `opacity: 0.99` instead since this forces Chrome 139 * `opacity: 1`, we set it to `opacity: 0.99` instead since this forces Chrome
140 * to do proper subpixel rendering for the elements being animated. This is 140 * to do proper subpixel rendering for the elements being animated. This is
141 * especially visible in Chrome 39 on Ubuntu 14.04. See: 141 * especially visible in Chrome 39 on Ubuntu 14.04. See:
142 * 142 *
143 * - https://github.com/Polymer/paper-spinner/issues/9 143 * - https://github.com/Polymer/paper-spinner/issues/9
144 * - https://code.google.com/p/chromium/issues/detail?id=436255 144 * - https://code.google.com/p/chromium/issues/detail?id=436255
145 */ 145 */
146 @-webkit-keyframes blue-fade-in-out { 146 @-webkit-keyframes layer-1-fade-in-out {
147 from { opacity: 0.99; } 147 from { opacity: 0.99; }
148 25% { opacity: 0.99; } 148 25% { opacity: 0.99; }
149 26% { opacity: 0; } 149 26% { opacity: 0; }
150 89% { opacity: 0; } 150 89% { opacity: 0; }
151 90% { opacity: 0.99; } 151 90% { opacity: 0.99; }
152 100% { opacity: 0.99; } 152 100% { opacity: 0.99; }
153 } 153 }
154 154
155 @keyframes blue-fade-in-out { 155 @keyframes layer-1-fade-in-out {
156 from { opacity: 0.99; } 156 from { opacity: 0.99; }
157 25% { opacity: 0.99; } 157 25% { opacity: 0.99; }
158 26% { opacity: 0; } 158 26% { opacity: 0; }
159 89% { opacity: 0; } 159 89% { opacity: 0; }
160 90% { opacity: 0.99; } 160 90% { opacity: 0.99; }
161 100% { opacity: 0.99; } 161 100% { opacity: 0.99; }
162 } 162 }
163 163
164 @-webkit-keyframes red-fade-in-out { 164 @-webkit-keyframes layer-2-fade-in-out {
165 from { opacity: 0; } 165 from { opacity: 0; }
166 15% { opacity: 0; } 166 15% { opacity: 0; }
167 25% { opacity: 0.99; } 167 25% { opacity: 0.99; }
168 50% { opacity: 0.99; } 168 50% { opacity: 0.99; }
169 51% { opacity: 0; } 169 51% { opacity: 0; }
170 } 170 }
171 171
172 @keyframes red-fade-in-out { 172 @keyframes layer-2-fade-in-out {
173 from { opacity: 0; } 173 from { opacity: 0; }
174 15% { opacity: 0; } 174 15% { opacity: 0; }
175 25% { opacity: 0.99; } 175 25% { opacity: 0.99; }
176 50% { opacity: 0.99; } 176 50% { opacity: 0.99; }
177 51% { opacity: 0; } 177 51% { opacity: 0; }
178 } 178 }
179 179
180 @-webkit-keyframes yellow-fade-in-out { 180 @-webkit-keyframes layer-3-fade-in-out {
181 from { opacity: 0; } 181 from { opacity: 0; }
182 40% { opacity: 0; } 182 40% { opacity: 0; }
183 50% { opacity: 0.99; } 183 50% { opacity: 0.99; }
184 75% { opacity: 0.99; } 184 75% { opacity: 0.99; }
185 76% { opacity: 0; } 185 76% { opacity: 0; }
186 } 186 }
187 187
188 @keyframes yellow-fade-in-out { 188 @keyframes layer-3-fade-in-out {
189 from { opacity: 0; } 189 from { opacity: 0; }
190 40% { opacity: 0; } 190 40% { opacity: 0; }
191 50% { opacity: 0.99; } 191 50% { opacity: 0.99; }
192 75% { opacity: 0.99; } 192 75% { opacity: 0.99; }
193 76% { opacity: 0; } 193 76% { opacity: 0; }
194 } 194 }
195 195
196 @-webkit-keyframes green-fade-in-out { 196 @-webkit-keyframes layer-4-fade-in-out {
197 from { opacity: 0; } 197 from { opacity: 0; }
198 65% { opacity: 0; } 198 65% { opacity: 0; }
199 75% { opacity: 0.99; } 199 75% { opacity: 0.99; }
200 90% { opacity: 0.99; } 200 90% { opacity: 0.99; }
201 100% { opacity: 0; } 201 100% { opacity: 0; }
202 } 202 }
203 203
204 @keyframes green-fade-in-out { 204 @keyframes layer-4-fade-in-out {
205 from { opacity: 0; } 205 from { opacity: 0; }
206 65% { opacity: 0; } 206 65% { opacity: 0; }
207 75% { opacity: 0.99; } 207 75% { opacity: 0.99; }
208 90% { opacity: 0.99; } 208 90% { opacity: 0.99; }
209 100% { opacity: 0; } 209 100% { opacity: 0; }
210 } 210 }
211 211
212 /** 212 /**
213 * Patch the gap that appear between the two adjacent div.circle-clipper while t he 213 * Patch the gap that appear between the two adjacent div.circle-clipper while t he
214 * spinner is rotating (appears on Chrome 38, Safari 7.1, and IE 11). 214 * spinner is rotating (appears on Chrome 38, Safari 7.1, and IE 11).
(...skipping 33 matching lines...) Expand 10 before | Expand all | Expand 10 after
248 .circle { 248 .circle {
249 box-sizing: border-box; 249 box-sizing: border-box;
250 height: 100%; 250 height: 100%;
251 border-width: 3px; /* STROKEWIDTH */ 251 border-width: 3px; /* STROKEWIDTH */
252 border-style: solid; 252 border-style: solid;
253 border-color: inherit; 253 border-color: inherit;
254 border-bottom-color: transparent !important; 254 border-bottom-color: transparent !important;
255 border-radius: 50%; 255 border-radius: 50%;
256 -webkit-animation: none; 256 -webkit-animation: none;
257 animation: none; 257 animation: none;
258
259 @apply(--layout-fit);
258 } 260 }
259 261
260 .circle-clipper.left .circle { 262 .circle-clipper.left .circle {
261 border-right-color: transparent !important; 263 border-right-color: transparent !important;
262 -webkit-transform: rotate(129deg); 264 -webkit-transform: rotate(129deg);
263 transform: rotate(129deg); 265 transform: rotate(129deg);
264 } 266 }
265 267
266 .circle-clipper.right .circle { 268 .circle-clipper.right .circle {
267 left: -100%; 269 left: -100%;
(...skipping 46 matching lines...) Expand 10 before | Expand all | Expand 10 after
314 316
315 @-webkit-keyframes fade-out { 317 @-webkit-keyframes fade-out {
316 from { opacity: 0.99; } 318 from { opacity: 0.99; }
317 to { opacity: 0; } 319 to { opacity: 0; }
318 } 320 }
319 321
320 @keyframes fade-out { 322 @keyframes fade-out {
321 from { opacity: 0.99; } 323 from { opacity: 0.99; }
322 to { opacity: 0; } 324 to { opacity: 0; }
323 } 325 }
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698