WebCompDev / COMPONENTS

Commit e53330c0a9c942559cb35b4342f22b01b6ab6b29

Authored by Renato De Donato
1 parent 25201c03

spinner

Inline Side-by-side
Showing 1 changed file with 0 additions and 330 deletions
bower_components/paper-spinner/paper-spinner.css deleted
View file @25201c0
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.github.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/CONTRIBUTORS.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/PATENTS.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 avoid using
88   - * animation-delay and instead set custom keyframes for each color (as layer-2undant 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 recognize 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) infinite 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 both, 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) infinite 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 both, 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) infinite 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 both, 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) infinite 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 both, 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 the
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 both;
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 both;
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 cubic-bezier(0.4, 0.0, 0.2, 1);
319   - animation: container-rotate 1568ms linear infinite, fade-out 400ms cubic-bezier(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   -}