minimaterialize 1.1.0 → 1.1.1

Sign up to get free protection for your applications and to get access to all the features.
Files changed (45) hide show
  1. checksums.yaml +4 -4
  2. data/README.md +5 -27
  3. data/_layouts/default.html +1 -1
  4. data/_sass/components/_badges.scss +55 -0
  5. data/_sass/components/_buttons.scss +322 -0
  6. data/_sass/components/_cards.scss +195 -0
  7. data/_sass/components/_carousel.scss +90 -0
  8. data/_sass/components/_chips.scss +90 -0
  9. data/_sass/components/_collapsible.scss +91 -0
  10. data/_sass/components/_color-classes.scss +32 -0
  11. data/_sass/components/_color-variables.scss +370 -0
  12. data/_sass/components/_datepicker.scss +191 -0
  13. data/_sass/components/_dropdown.scss +85 -0
  14. data/_sass/components/_global.scss +769 -0
  15. data/_sass/components/_grid.scss +156 -0
  16. data/_sass/components/_icons-material-design.scss +5 -0
  17. data/_sass/components/_materialbox.scss +43 -0
  18. data/_sass/components/_modal.scss +90 -0
  19. data/_sass/components/_navbar.scss +208 -0
  20. data/_sass/components/_normalize.scss +447 -0
  21. data/_sass/components/_preloader.scss +334 -0
  22. data/_sass/components/_pulse.scss +34 -0
  23. data/_sass/components/_sidenav.scss +216 -0
  24. data/_sass/components/_slider.scss +92 -0
  25. data/_sass/components/_table_of_contents.scss +33 -0
  26. data/_sass/components/_tabs.scss +99 -0
  27. data/_sass/components/_tapTarget.scss +103 -0
  28. data/_sass/components/_timepicker.scss +183 -0
  29. data/_sass/components/_toast.scss +58 -0
  30. data/_sass/components/_tooltip.scss +32 -0
  31. data/_sass/components/_transitions.scss +13 -0
  32. data/_sass/components/_typography.scss +60 -0
  33. data/_sass/components/_variables.scss +349 -0
  34. data/_sass/components/_waves.scss +114 -0
  35. data/_sass/components/forms/_checkboxes.scss +200 -0
  36. data/_sass/components/forms/_file-input.scss +44 -0
  37. data/_sass/components/forms/_forms.scss +22 -0
  38. data/_sass/components/forms/_input-fields.scss +354 -0
  39. data/_sass/components/forms/_radio-buttons.scss +115 -0
  40. data/_sass/components/forms/_range.scss +161 -0
  41. data/_sass/components/forms/_select.scss +180 -0
  42. data/_sass/components/forms/_switches.scss +89 -0
  43. data/assets/javascript/materialize.min.js +6 -0
  44. data/package.json +3 -2
  45. metadata +41 -1
@@ -0,0 +1,447 @@
1
+ /*! normalize.css v7.0.0 | MIT License | github.com/necolas/normalize.css */
2
+
3
+ /* Document
4
+ ========================================================================== */
5
+
6
+ /**
7
+ * 1. Correct the line height in all browsers.
8
+ * 2. Prevent adjustments of font size after orientation changes in
9
+ * IE on Windows Phone and in iOS.
10
+ */
11
+
12
+ html {
13
+ line-height: 1.15; /* 1 */
14
+ -ms-text-size-adjust: 100%; /* 2 */
15
+ -webkit-text-size-adjust: 100%; /* 2 */
16
+ }
17
+
18
+ /* Sections
19
+ ========================================================================== */
20
+
21
+ /**
22
+ * Remove the margin in all browsers (opinionated).
23
+ */
24
+
25
+ body {
26
+ margin: 0;
27
+ }
28
+
29
+ /**
30
+ * Add the correct display in IE 9-.
31
+ */
32
+
33
+ article,
34
+ aside,
35
+ footer,
36
+ header,
37
+ nav,
38
+ section {
39
+ display: block;
40
+ }
41
+
42
+ /**
43
+ * Correct the font size and margin on `h1` elements within `section` and
44
+ * `article` contexts in Chrome, Firefox, and Safari.
45
+ */
46
+
47
+ h1 {
48
+ font-size: 2em;
49
+ margin: 0.67em 0;
50
+ }
51
+
52
+ /* Grouping content
53
+ ========================================================================== */
54
+
55
+ /**
56
+ * Add the correct display in IE 9-.
57
+ * 1. Add the correct display in IE.
58
+ */
59
+
60
+ figcaption,
61
+ figure,
62
+ main { /* 1 */
63
+ display: block;
64
+ }
65
+
66
+ /**
67
+ * Add the correct margin in IE 8.
68
+ */
69
+
70
+ figure {
71
+ margin: 1em 40px;
72
+ }
73
+
74
+ /**
75
+ * 1. Add the correct box sizing in Firefox.
76
+ * 2. Show the overflow in Edge and IE.
77
+ */
78
+
79
+ hr {
80
+ box-sizing: content-box; /* 1 */
81
+ height: 0; /* 1 */
82
+ overflow: visible; /* 2 */
83
+ }
84
+
85
+ /**
86
+ * 1. Correct the inheritance and scaling of font size in all browsers.
87
+ * 2. Correct the odd `em` font sizing in all browsers.
88
+ */
89
+
90
+ pre {
91
+ font-family: monospace, monospace; /* 1 */
92
+ font-size: 1em; /* 2 */
93
+ }
94
+
95
+ /* Text-level semantics
96
+ ========================================================================== */
97
+
98
+ /**
99
+ * 1. Remove the gray background on active links in IE 10.
100
+ * 2. Remove gaps in links underline in iOS 8+ and Safari 8+.
101
+ */
102
+
103
+ a {
104
+ background-color: transparent; /* 1 */
105
+ -webkit-text-decoration-skip: objects; /* 2 */
106
+ }
107
+
108
+ /**
109
+ * 1. Remove the bottom border in Chrome 57- and Firefox 39-.
110
+ * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
111
+ */
112
+
113
+ abbr[title] {
114
+ border-bottom: none; /* 1 */
115
+ text-decoration: underline; /* 2 */
116
+ text-decoration: underline dotted; /* 2 */
117
+ }
118
+
119
+ /**
120
+ * Prevent the duplicate application of `bolder` by the next rule in Safari 6.
121
+ */
122
+
123
+ b,
124
+ strong {
125
+ font-weight: inherit;
126
+ }
127
+
128
+ /**
129
+ * Add the correct font weight in Chrome, Edge, and Safari.
130
+ */
131
+
132
+ b,
133
+ strong {
134
+ font-weight: bolder;
135
+ }
136
+
137
+ /**
138
+ * 1. Correct the inheritance and scaling of font size in all browsers.
139
+ * 2. Correct the odd `em` font sizing in all browsers.
140
+ */
141
+
142
+ code,
143
+ kbd,
144
+ samp {
145
+ font-family: monospace, monospace; /* 1 */
146
+ font-size: 1em; /* 2 */
147
+ }
148
+
149
+ /**
150
+ * Add the correct font style in Android 4.3-.
151
+ */
152
+
153
+ dfn {
154
+ font-style: italic;
155
+ }
156
+
157
+ /**
158
+ * Add the correct background and color in IE 9-.
159
+ */
160
+
161
+ mark {
162
+ background-color: #ff0;
163
+ color: #000;
164
+ }
165
+
166
+ /**
167
+ * Add the correct font size in all browsers.
168
+ */
169
+
170
+ small {
171
+ font-size: 80%;
172
+ }
173
+
174
+ /**
175
+ * Prevent `sub` and `sup` elements from affecting the line height in
176
+ * all browsers.
177
+ */
178
+
179
+ sub,
180
+ sup {
181
+ font-size: 75%;
182
+ line-height: 0;
183
+ position: relative;
184
+ vertical-align: baseline;
185
+ }
186
+
187
+ sub {
188
+ bottom: -0.25em;
189
+ }
190
+
191
+ sup {
192
+ top: -0.5em;
193
+ }
194
+
195
+ /* Embedded content
196
+ ========================================================================== */
197
+
198
+ /**
199
+ * Add the correct display in IE 9-.
200
+ */
201
+
202
+ audio,
203
+ video {
204
+ display: inline-block;
205
+ }
206
+
207
+ /**
208
+ * Add the correct display in iOS 4-7.
209
+ */
210
+
211
+ audio:not([controls]) {
212
+ display: none;
213
+ height: 0;
214
+ }
215
+
216
+ /**
217
+ * Remove the border on images inside links in IE 10-.
218
+ */
219
+
220
+ img {
221
+ border-style: none;
222
+ }
223
+
224
+ /**
225
+ * Hide the overflow in IE.
226
+ */
227
+
228
+ svg:not(:root) {
229
+ overflow: hidden;
230
+ }
231
+
232
+ /* Forms
233
+ ========================================================================== */
234
+
235
+ /**
236
+ * 1. Change the font styles in all browsers (opinionated).
237
+ * 2. Remove the margin in Firefox and Safari.
238
+ */
239
+
240
+ button,
241
+ input,
242
+ optgroup,
243
+ select,
244
+ textarea {
245
+ font-family: sans-serif; /* 1 */
246
+ font-size: 100%; /* 1 */
247
+ line-height: 1.15; /* 1 */
248
+ margin: 0; /* 2 */
249
+ }
250
+
251
+ /**
252
+ * Show the overflow in IE.
253
+ * 1. Show the overflow in Edge.
254
+ */
255
+
256
+ button,
257
+ input { /* 1 */
258
+ overflow: visible;
259
+ }
260
+
261
+ /**
262
+ * Remove the inheritance of text transform in Edge, Firefox, and IE.
263
+ * 1. Remove the inheritance of text transform in Firefox.
264
+ */
265
+
266
+ button,
267
+ select { /* 1 */
268
+ text-transform: none;
269
+ }
270
+
271
+ /**
272
+ * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
273
+ * controls in Android 4.
274
+ * 2. Correct the inability to style clickable types in iOS and Safari.
275
+ */
276
+
277
+ button,
278
+ html [type="button"], /* 1 */
279
+ [type="reset"],
280
+ [type="submit"] {
281
+ -webkit-appearance: button; /* 2 */
282
+ }
283
+
284
+ /**
285
+ * Remove the inner border and padding in Firefox.
286
+ */
287
+
288
+ button::-moz-focus-inner,
289
+ [type="button"]::-moz-focus-inner,
290
+ [type="reset"]::-moz-focus-inner,
291
+ [type="submit"]::-moz-focus-inner {
292
+ border-style: none;
293
+ padding: 0;
294
+ }
295
+
296
+ /**
297
+ * Restore the focus styles unset by the previous rule.
298
+ */
299
+
300
+ button:-moz-focusring,
301
+ [type="button"]:-moz-focusring,
302
+ [type="reset"]:-moz-focusring,
303
+ [type="submit"]:-moz-focusring {
304
+ outline: 1px dotted ButtonText;
305
+ }
306
+
307
+ /**
308
+ * Correct the padding in Firefox.
309
+ */
310
+
311
+ fieldset {
312
+ padding: 0.35em 0.75em 0.625em;
313
+ }
314
+
315
+ /**
316
+ * 1. Correct the text wrapping in Edge and IE.
317
+ * 2. Correct the color inheritance from `fieldset` elements in IE.
318
+ * 3. Remove the padding so developers are not caught out when they zero out
319
+ * `fieldset` elements in all browsers.
320
+ */
321
+
322
+ legend {
323
+ box-sizing: border-box; /* 1 */
324
+ color: inherit; /* 2 */
325
+ display: table; /* 1 */
326
+ max-width: 100%; /* 1 */
327
+ padding: 0; /* 3 */
328
+ white-space: normal; /* 1 */
329
+ }
330
+
331
+ /**
332
+ * 1. Add the correct display in IE 9-.
333
+ * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera.
334
+ */
335
+
336
+ progress {
337
+ display: inline-block; /* 1 */
338
+ vertical-align: baseline; /* 2 */
339
+ }
340
+
341
+ /**
342
+ * Remove the default vertical scrollbar in IE.
343
+ */
344
+
345
+ textarea {
346
+ overflow: auto;
347
+ }
348
+
349
+ /**
350
+ * 1. Add the correct box sizing in IE 10-.
351
+ * 2. Remove the padding in IE 10-.
352
+ */
353
+
354
+ [type="checkbox"],
355
+ [type="radio"] {
356
+ box-sizing: border-box; /* 1 */
357
+ padding: 0; /* 2 */
358
+ }
359
+
360
+ /**
361
+ * Correct the cursor style of increment and decrement buttons in Chrome.
362
+ */
363
+
364
+ [type="number"]::-webkit-inner-spin-button,
365
+ [type="number"]::-webkit-outer-spin-button {
366
+ height: auto;
367
+ }
368
+
369
+ /**
370
+ * 1. Correct the odd appearance in Chrome and Safari.
371
+ * 2. Correct the outline style in Safari.
372
+ */
373
+
374
+ [type="search"] {
375
+ -webkit-appearance: textfield; /* 1 */
376
+ outline-offset: -2px; /* 2 */
377
+ }
378
+
379
+ /**
380
+ * Remove the inner padding and cancel buttons in Chrome and Safari on macOS.
381
+ */
382
+
383
+ [type="search"]::-webkit-search-cancel-button,
384
+ [type="search"]::-webkit-search-decoration {
385
+ -webkit-appearance: none;
386
+ }
387
+
388
+ /**
389
+ * 1. Correct the inability to style clickable types in iOS and Safari.
390
+ * 2. Change font properties to `inherit` in Safari.
391
+ */
392
+
393
+ ::-webkit-file-upload-button {
394
+ -webkit-appearance: button; /* 1 */
395
+ font: inherit; /* 2 */
396
+ }
397
+
398
+ /* Interactive
399
+ ========================================================================== */
400
+
401
+ /*
402
+ * Add the correct display in IE 9-.
403
+ * 1. Add the correct display in Edge, IE, and Firefox.
404
+ */
405
+
406
+ details, /* 1 */
407
+ menu {
408
+ display: block;
409
+ }
410
+
411
+ /*
412
+ * Add the correct display in all browsers.
413
+ */
414
+
415
+ summary {
416
+ display: list-item;
417
+ }
418
+
419
+ /* Scripting
420
+ ========================================================================== */
421
+
422
+ /**
423
+ * Add the correct display in IE 9-.
424
+ */
425
+
426
+ canvas {
427
+ display: inline-block;
428
+ }
429
+
430
+ /**
431
+ * Add the correct display in IE.
432
+ */
433
+
434
+ template {
435
+ display: none;
436
+ }
437
+
438
+ /* Hidden
439
+ ========================================================================== */
440
+
441
+ /**
442
+ * Add the correct display in IE 10-.
443
+ */
444
+
445
+ [hidden] {
446
+ display: none;
447
+ }
@@ -0,0 +1,334 @@
1
+ /*
2
+ @license
3
+ Copyright (c) 2014 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
+
30
+ .preloader-wrapper {
31
+ display: inline-block;
32
+ position: relative;
33
+ width: 50px;
34
+ height: 50px;
35
+
36
+ &.small {
37
+ width: 36px;
38
+ height: 36px;
39
+ }
40
+
41
+ &.big {
42
+ width: 64px;
43
+ height: 64px;
44
+ }
45
+
46
+ &.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
+
53
+ @-webkit-keyframes container-rotate {
54
+ to { -webkit-transform: rotate(360deg) }
55
+ }
56
+
57
+ @keyframes container-rotate {
58
+ to { transform: rotate(360deg) }
59
+ }
60
+
61
+ .spinner-layer {
62
+ position: absolute;
63
+ width: 100%;
64
+ height: 100%;
65
+ opacity: 0;
66
+ border-color: $spinner-default-color;
67
+ }
68
+
69
+ .spinner-blue,
70
+ .spinner-blue-only {
71
+ border-color: #4285f4;
72
+ }
73
+
74
+ .spinner-red,
75
+ .spinner-red-only {
76
+ border-color: #db4437;
77
+ }
78
+
79
+ .spinner-yellow,
80
+ .spinner-yellow-only {
81
+ border-color: #f4b400;
82
+ }
83
+
84
+ .spinner-green,
85
+ .spinner-green-only {
86
+ border-color: #0f9d58;
87
+ }
88
+
89
+ /**
90
+ * IMPORTANT NOTE ABOUT CSS ANIMATION PROPERTIES (keanulee):
91
+ *
92
+ * iOS Safari (tested on iOS 8.1) does not handle animation-delay very well - it doesn't
93
+ * guarantee that the animation will start _exactly_ after that value. So we avoid using
94
+ * animation-delay and instead set custom keyframes for each color (as redundant as it
95
+ * seems).
96
+ *
97
+ * We write out each animation in full (instead of separating animation-name,
98
+ * animation-duration, etc.) because under the polyfill, Safari does not recognize those
99
+ * specific properties properly, treats them as -webkit-animation, and overrides the
100
+ * other animation rules. See https://github.com/Polymer/platform/issues/53.
101
+ */
102
+ .active .spinner-layer.spinner-blue {
103
+ /* durations: 4 * ARCTIME */
104
+ -webkit-animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both, blue-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, blue-fade-in-out 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
106
+ }
107
+
108
+ .active .spinner-layer.spinner-red {
109
+ /* durations: 4 * ARCTIME */
110
+ -webkit-animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both, red-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, red-fade-in-out 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
112
+ }
113
+
114
+ .active .spinner-layer.spinner-yellow {
115
+ /* durations: 4 * ARCTIME */
116
+ -webkit-animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both, yellow-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, yellow-fade-in-out 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
118
+ }
119
+
120
+ .active .spinner-layer.spinner-green {
121
+ /* durations: 4 * ARCTIME */
122
+ -webkit-animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both, green-fade-in-out 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
123
+ animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both, green-fade-in-out 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
124
+ }
125
+
126
+ .active .spinner-layer,
127
+ .active .spinner-layer.spinner-blue-only,
128
+ .active .spinner-layer.spinner-red-only,
129
+ .active .spinner-layer.spinner-yellow-only,
130
+ .active .spinner-layer.spinner-green-only {
131
+ /* durations: 4 * ARCTIME */
132
+ opacity: 1;
133
+ -webkit-animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
134
+ animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
135
+ }
136
+
137
+ @-webkit-keyframes fill-unfill-rotate {
138
+ 12.5% { -webkit-transform: rotate(135deg); } /* 0.5 * ARCSIZE */
139
+ 25% { -webkit-transform: rotate(270deg); } /* 1 * ARCSIZE */
140
+ 37.5% { -webkit-transform: rotate(405deg); } /* 1.5 * ARCSIZE */
141
+ 50% { -webkit-transform: rotate(540deg); } /* 2 * ARCSIZE */
142
+ 62.5% { -webkit-transform: rotate(675deg); } /* 2.5 * ARCSIZE */
143
+ 75% { -webkit-transform: rotate(810deg); } /* 3 * ARCSIZE */
144
+ 87.5% { -webkit-transform: rotate(945deg); } /* 3.5 * ARCSIZE */
145
+ to { -webkit-transform: rotate(1080deg); } /* 4 * ARCSIZE */
146
+ }
147
+
148
+ @keyframes fill-unfill-rotate {
149
+ 12.5% { transform: rotate(135deg); } /* 0.5 * ARCSIZE */
150
+ 25% { transform: rotate(270deg); } /* 1 * ARCSIZE */
151
+ 37.5% { transform: rotate(405deg); } /* 1.5 * ARCSIZE */
152
+ 50% { transform: rotate(540deg); } /* 2 * ARCSIZE */
153
+ 62.5% { transform: rotate(675deg); } /* 2.5 * ARCSIZE */
154
+ 75% { transform: rotate(810deg); } /* 3 * ARCSIZE */
155
+ 87.5% { transform: rotate(945deg); } /* 3.5 * ARCSIZE */
156
+ to { transform: rotate(1080deg); } /* 4 * ARCSIZE */
157
+ }
158
+
159
+ @-webkit-keyframes blue-fade-in-out {
160
+ from { opacity: 1; }
161
+ 25% { opacity: 1; }
162
+ 26% { opacity: 0; }
163
+ 89% { opacity: 0; }
164
+ 90% { opacity: 1; }
165
+ 100% { opacity: 1; }
166
+ }
167
+
168
+ @keyframes blue-fade-in-out {
169
+ from { opacity: 1; }
170
+ 25% { opacity: 1; }
171
+ 26% { opacity: 0; }
172
+ 89% { opacity: 0; }
173
+ 90% { opacity: 1; }
174
+ 100% { opacity: 1; }
175
+ }
176
+
177
+ @-webkit-keyframes red-fade-in-out {
178
+ from { opacity: 0; }
179
+ 15% { opacity: 0; }
180
+ 25% { opacity: 1; }
181
+ 50% { opacity: 1; }
182
+ 51% { opacity: 0; }
183
+ }
184
+
185
+ @keyframes red-fade-in-out {
186
+ from { opacity: 0; }
187
+ 15% { opacity: 0; }
188
+ 25% { opacity: 1; }
189
+ 50% { opacity: 1; }
190
+ 51% { opacity: 0; }
191
+ }
192
+
193
+ @-webkit-keyframes yellow-fade-in-out {
194
+ from { opacity: 0; }
195
+ 40% { opacity: 0; }
196
+ 50% { opacity: 1; }
197
+ 75% { opacity: 1; }
198
+ 76% { opacity: 0; }
199
+ }
200
+
201
+ @keyframes yellow-fade-in-out {
202
+ from { opacity: 0; }
203
+ 40% { opacity: 0; }
204
+ 50% { opacity: 1; }
205
+ 75% { opacity: 1; }
206
+ 76% { opacity: 0; }
207
+ }
208
+
209
+ @-webkit-keyframes green-fade-in-out {
210
+ from { opacity: 0; }
211
+ 65% { opacity: 0; }
212
+ 75% { opacity: 1; }
213
+ 90% { opacity: 1; }
214
+ 100% { opacity: 0; }
215
+ }
216
+
217
+ @keyframes green-fade-in-out {
218
+ from { opacity: 0; }
219
+ 65% { opacity: 0; }
220
+ 75% { opacity: 1; }
221
+ 90% { opacity: 1; }
222
+ 100% { opacity: 0; }
223
+ }
224
+
225
+ /**
226
+ * Patch the gap that appear between the two adjacent div.circle-clipper while the
227
+ * spinner is rotating (appears on Chrome 38, Safari 7.1, and IE 11).
228
+ */
229
+ .gap-patch {
230
+ position: absolute;
231
+ top: 0;
232
+ left: 45%;
233
+ width: 10%;
234
+ height: 100%;
235
+ overflow: hidden;
236
+ border-color: inherit;
237
+ }
238
+
239
+ .gap-patch .circle {
240
+ width: 1000%;
241
+ left: -450%;
242
+ }
243
+
244
+ .circle-clipper {
245
+ display: inline-block;
246
+ position: relative;
247
+ width: 50%;
248
+ height: 100%;
249
+ overflow: hidden;
250
+ border-color: inherit;
251
+
252
+ .circle {
253
+ width: 200%;
254
+ height: 100%;
255
+ border-width: 3px; /* STROKEWIDTH */
256
+ border-style: solid;
257
+ border-color: inherit;
258
+ border-bottom-color: transparent !important;
259
+ border-radius: 50%;
260
+ -webkit-animation: none;
261
+ animation: none;
262
+ position: absolute;
263
+ top: 0;
264
+ right: 0;
265
+ bottom: 0;
266
+ }
267
+
268
+ &.left .circle {
269
+ left: 0;
270
+ border-right-color: transparent !important;
271
+ -webkit-transform: rotate(129deg);
272
+ transform: rotate(129deg);
273
+ }
274
+ &.right .circle {
275
+ left: -100%;
276
+ border-left-color: transparent !important;
277
+ -webkit-transform: rotate(-129deg);
278
+ transform: rotate(-129deg);
279
+ }
280
+ }
281
+
282
+
283
+
284
+ .active .circle-clipper.left .circle {
285
+ /* duration: ARCTIME */
286
+ -webkit-animation: left-spin 1333ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
287
+ animation: left-spin 1333ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
288
+ }
289
+
290
+ .active .circle-clipper.right .circle {
291
+ /* duration: ARCTIME */
292
+ -webkit-animation: right-spin 1333ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
293
+ animation: right-spin 1333ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
294
+ }
295
+
296
+ @-webkit-keyframes left-spin {
297
+ from { -webkit-transform: rotate(130deg); }
298
+ 50% { -webkit-transform: rotate(-5deg); }
299
+ to { -webkit-transform: rotate(130deg); }
300
+ }
301
+
302
+ @keyframes left-spin {
303
+ from { transform: rotate(130deg); }
304
+ 50% { transform: rotate(-5deg); }
305
+ to { transform: rotate(130deg); }
306
+ }
307
+
308
+ @-webkit-keyframes right-spin {
309
+ from { -webkit-transform: rotate(-130deg); }
310
+ 50% { -webkit-transform: rotate(5deg); }
311
+ to { -webkit-transform: rotate(-130deg); }
312
+ }
313
+
314
+ @keyframes right-spin {
315
+ from { transform: rotate(-130deg); }
316
+ 50% { transform: rotate(5deg); }
317
+ to { transform: rotate(-130deg); }
318
+ }
319
+
320
+ #spinnerContainer.cooldown {
321
+ /* duration: SHRINK_TIME */
322
+ -webkit-animation: container-rotate 1568ms linear infinite, fade-out 400ms cubic-bezier(0.4, 0.0, 0.2, 1);
323
+ animation: container-rotate 1568ms linear infinite, fade-out 400ms cubic-bezier(0.4, 0.0, 0.2, 1);
324
+ }
325
+
326
+ @-webkit-keyframes fade-out {
327
+ from { opacity: 1; }
328
+ to { opacity: 0; }
329
+ }
330
+
331
+ @keyframes fade-out {
332
+ from { opacity: 1; }
333
+ to { opacity: 0; }
334
+ }