anc 0.1.0 → 0.1.1

Sign up to get free protection for your applications and to get access to all the features.
Files changed (49) hide show
  1. checksums.yaml +4 -4
  2. data/_sass/anc.scss +9 -0
  3. data/_sass/anc/_base.scss +144 -0
  4. data/_sass/anc/_layout.scss +0 -0
  5. data/_sass/anc/_materialize.scss +42 -0
  6. data/_sass/anc/_syntax-highlighting.scss +78 -0
  7. data/_sass/anc/components/_variables.scss +343 -0
  8. data/_sass/materialize/components/_badges.scss +47 -0
  9. data/_sass/materialize/components/_buttons.scss +291 -0
  10. data/_sass/materialize/components/_cards.scss +196 -0
  11. data/_sass/materialize/components/_carousel.scss +90 -0
  12. data/_sass/materialize/components/_chips.scss +89 -0
  13. data/_sass/materialize/components/_collapsible.scss +84 -0
  14. data/_sass/materialize/components/_color.scss +412 -0
  15. data/_sass/materialize/components/_dropdown.scss +68 -0
  16. data/_sass/materialize/components/_global.scss +734 -0
  17. data/_sass/materialize/components/_grid.scss +156 -0
  18. data/_sass/materialize/components/_icons-material-design.scss +5 -0
  19. data/_sass/materialize/components/_materialbox.scss +43 -0
  20. data/_sass/materialize/components/_modal.scss +90 -0
  21. data/_sass/materialize/components/_navbar.scss +208 -0
  22. data/_sass/materialize/components/_normalize.scss +424 -0
  23. data/_sass/materialize/components/_preloader.scss +334 -0
  24. data/_sass/materialize/components/_pulse.scss +34 -0
  25. data/_sass/materialize/components/_roboto.scss +39 -0
  26. data/_sass/materialize/components/_sideNav.scss +214 -0
  27. data/_sass/materialize/components/_slider.scss +92 -0
  28. data/_sass/materialize/components/_table_of_contents.scss +33 -0
  29. data/_sass/materialize/components/_tabs.scss +93 -0
  30. data/_sass/materialize/components/_tapTarget.scss +103 -0
  31. data/_sass/materialize/components/_toast.scss +59 -0
  32. data/_sass/materialize/components/_tooltip.scss +31 -0
  33. data/_sass/materialize/components/_transitions.scss +13 -0
  34. data/_sass/materialize/components/_typography.scss +61 -0
  35. data/_sass/materialize/components/_variables.scss +343 -0
  36. data/_sass/materialize/components/_waves.scss +114 -0
  37. data/_sass/materialize/components/date_picker/_default.date.scss +456 -0
  38. data/_sass/materialize/components/date_picker/_default.scss +212 -0
  39. data/_sass/materialize/components/date_picker/_default.time.scss +267 -0
  40. data/_sass/materialize/components/forms/_checkboxes.scss +210 -0
  41. data/_sass/materialize/components/forms/_file-input.scss +44 -0
  42. data/_sass/materialize/components/forms/_forms.scss +22 -0
  43. data/_sass/materialize/components/forms/_input-fields.scss +333 -0
  44. data/_sass/materialize/components/forms/_radio-buttons.scss +115 -0
  45. data/_sass/materialize/components/forms/_range.scss +160 -0
  46. data/_sass/materialize/components/forms/_select.scss +182 -0
  47. data/_sass/materialize/components/forms/_switches.scss +89 -0
  48. data/_sass/materialize/materialize.scss +42 -0
  49. metadata +48 -1
@@ -0,0 +1,424 @@
1
+ /*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */
2
+
3
+ /**
4
+ * 1. Set default font family to sans-serif.
5
+ * 2. Prevent iOS and IE text size adjust after device orientation change,
6
+ * without disabling user zoom.
7
+ */
8
+
9
+ html {
10
+ font-family: sans-serif; /* 1 */
11
+ -ms-text-size-adjust: 100%; /* 2 */
12
+ -webkit-text-size-adjust: 100%; /* 2 */
13
+ }
14
+
15
+ /**
16
+ * Remove default margin.
17
+ */
18
+
19
+ body {
20
+ margin: 0;
21
+ }
22
+
23
+ /* HTML5 display definitions
24
+ ========================================================================== */
25
+
26
+ /**
27
+ * Correct `block` display not defined for any HTML5 element in IE 8/9.
28
+ * Correct `block` display not defined for `details` or `summary` in IE 10/11
29
+ * and Firefox.
30
+ * Correct `block` display not defined for `main` in IE 11.
31
+ */
32
+
33
+ article,
34
+ aside,
35
+ details,
36
+ figcaption,
37
+ figure,
38
+ footer,
39
+ header,
40
+ hgroup,
41
+ main,
42
+ menu,
43
+ nav,
44
+ section,
45
+ summary {
46
+ display: block;
47
+ }
48
+
49
+ /**
50
+ * 1. Correct `inline-block` display not defined in IE 8/9.
51
+ * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
52
+ */
53
+
54
+ audio,
55
+ canvas,
56
+ progress,
57
+ video {
58
+ display: inline-block; /* 1 */
59
+ vertical-align: baseline; /* 2 */
60
+ }
61
+
62
+ /**
63
+ * Prevent modern browsers from displaying `audio` without controls.
64
+ * Remove excess height in iOS 5 devices.
65
+ */
66
+
67
+ audio:not([controls]) {
68
+ display: none;
69
+ height: 0;
70
+ }
71
+
72
+ /**
73
+ * Address `[hidden]` styling not present in IE 8/9/10.
74
+ * Hide the `template` element in IE 8/9/10/11, Safari, and Firefox < 22.
75
+ */
76
+
77
+ [hidden],
78
+ template {
79
+ display: none;
80
+ }
81
+
82
+ /* Links
83
+ ========================================================================== */
84
+
85
+ /**
86
+ * Remove the gray background color from active links in IE 10.
87
+ */
88
+
89
+ a {
90
+ background-color: transparent;
91
+ }
92
+
93
+ /**
94
+ * Improve readability of focused elements when they are also in an
95
+ * active/hover state.
96
+ */
97
+
98
+ a:active,
99
+ a:hover {
100
+ outline: 0;
101
+ }
102
+
103
+ /* Text-level semantics
104
+ ========================================================================== */
105
+
106
+ /**
107
+ * Address styling not present in IE 8/9/10/11, Safari, and Chrome.
108
+ */
109
+
110
+ abbr[title] {
111
+ border-bottom: 1px dotted;
112
+ }
113
+
114
+ /**
115
+ * Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
116
+ */
117
+
118
+ b,
119
+ strong {
120
+ font-weight: bold;
121
+ }
122
+
123
+ /**
124
+ * Address styling not present in Safari and Chrome.
125
+ */
126
+
127
+ dfn {
128
+ font-style: italic;
129
+ }
130
+
131
+ /**
132
+ * Address variable `h1` font-size and margin within `section` and `article`
133
+ * contexts in Firefox 4+, Safari, and Chrome.
134
+ */
135
+
136
+ h1 {
137
+ font-size: 2em;
138
+ margin: 0.67em 0;
139
+ }
140
+
141
+ /**
142
+ * Address styling not present in IE 8/9.
143
+ */
144
+
145
+ mark {
146
+ background: #ff0;
147
+ color: #000;
148
+ }
149
+
150
+ /**
151
+ * Address inconsistent and variable font size in all browsers.
152
+ */
153
+
154
+ small {
155
+ font-size: 80%;
156
+ }
157
+
158
+ /**
159
+ * Prevent `sub` and `sup` affecting `line-height` in all browsers.
160
+ */
161
+
162
+ sub,
163
+ sup {
164
+ font-size: 75%;
165
+ line-height: 0;
166
+ position: relative;
167
+ vertical-align: baseline;
168
+ }
169
+
170
+ sup {
171
+ top: -0.5em;
172
+ }
173
+
174
+ sub {
175
+ bottom: -0.25em;
176
+ }
177
+
178
+ /* Embedded content
179
+ ========================================================================== */
180
+
181
+ /**
182
+ * Remove border when inside `a` element in IE 8/9/10.
183
+ */
184
+
185
+ img {
186
+ border: 0;
187
+ }
188
+
189
+ /**
190
+ * Correct overflow not hidden in IE 9/10/11.
191
+ */
192
+
193
+ svg:not(:root) {
194
+ overflow: hidden;
195
+ }
196
+
197
+ /* Grouping content
198
+ ========================================================================== */
199
+
200
+ /**
201
+ * Address margin not present in IE 8/9 and Safari.
202
+ */
203
+
204
+ figure {
205
+ margin: 1em 40px;
206
+ }
207
+
208
+ /**
209
+ * Address differences between Firefox and other browsers.
210
+ */
211
+
212
+ hr {
213
+ box-sizing: content-box;
214
+ height: 0;
215
+ }
216
+
217
+ /**
218
+ * Contain overflow in all browsers.
219
+ */
220
+
221
+ pre {
222
+ overflow: auto;
223
+ }
224
+
225
+ /**
226
+ * Address odd `em`-unit font size rendering in all browsers.
227
+ */
228
+
229
+ code,
230
+ kbd,
231
+ pre,
232
+ samp {
233
+ font-family: monospace, monospace;
234
+ font-size: 1em;
235
+ }
236
+
237
+ /* Forms
238
+ ========================================================================== */
239
+
240
+ /**
241
+ * Known limitation: by default, Chrome and Safari on OS X allow very limited
242
+ * styling of `select`, unless a `border` property is set.
243
+ */
244
+
245
+ /**
246
+ * 1. Correct color not being inherited.
247
+ * Known issue: affects color of disabled elements.
248
+ * 2. Correct font properties not being inherited.
249
+ * 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
250
+ */
251
+
252
+ button,
253
+ input,
254
+ optgroup,
255
+ select,
256
+ textarea {
257
+ color: inherit; /* 1 */
258
+ font: inherit; /* 2 */
259
+ margin: 0; /* 3 */
260
+ }
261
+
262
+ /**
263
+ * Address `overflow` set to `hidden` in IE 8/9/10/11.
264
+ */
265
+
266
+ button {
267
+ overflow: visible;
268
+ }
269
+
270
+ /**
271
+ * Address inconsistent `text-transform` inheritance for `button` and `select`.
272
+ * All other form control elements do not inherit `text-transform` values.
273
+ * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
274
+ * Correct `select` style inheritance in Firefox.
275
+ */
276
+
277
+ button,
278
+ select {
279
+ text-transform: none;
280
+ }
281
+
282
+ /**
283
+ * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
284
+ * and `video` controls.
285
+ * 2. Correct inability to style clickable `input` types in iOS.
286
+ * 3. Improve usability and consistency of cursor style between image-type
287
+ * `input` and others.
288
+ */
289
+
290
+ button,
291
+ html input[type="button"], /* 1 */
292
+ input[type="reset"],
293
+ input[type="submit"] {
294
+ -webkit-appearance: button; /* 2 */
295
+ cursor: pointer; /* 3 */
296
+ }
297
+
298
+ /**
299
+ * Re-set default cursor for disabled elements.
300
+ */
301
+
302
+ button[disabled],
303
+ html input[disabled] {
304
+ cursor: default;
305
+ }
306
+
307
+ /**
308
+ * Remove inner padding and border in Firefox 4+.
309
+ */
310
+
311
+ button::-moz-focus-inner,
312
+ input::-moz-focus-inner {
313
+ border: 0;
314
+ padding: 0;
315
+ }
316
+
317
+ /**
318
+ * Address Firefox 4+ setting `line-height` on `input` using `!important` in
319
+ * the UA stylesheet.
320
+ */
321
+
322
+ input {
323
+ line-height: normal;
324
+ }
325
+
326
+ /**
327
+ * It's recommended that you don't attempt to style these elements.
328
+ * Firefox's implementation doesn't respect box-sizing, padding, or width.
329
+ *
330
+ * 1. Address box sizing set to `content-box` in IE 8/9/10.
331
+ * 2. Remove excess padding in IE 8/9/10.
332
+ */
333
+
334
+ input[type="checkbox"],
335
+ input[type="radio"] {
336
+ box-sizing: border-box; /* 1 */
337
+ padding: 0; /* 2 */
338
+ }
339
+
340
+ /**
341
+ * Fix the cursor style for Chrome's increment/decrement buttons. For certain
342
+ * `font-size` values of the `input`, it causes the cursor style of the
343
+ * decrement button to change from `default` to `text`.
344
+ */
345
+
346
+ input[type="number"]::-webkit-inner-spin-button,
347
+ input[type="number"]::-webkit-outer-spin-button {
348
+ height: auto;
349
+ }
350
+
351
+ /**
352
+ * 1. Address `appearance` set to `searchfield` in Safari and Chrome.
353
+ * 2. Address `box-sizing` set to `border-box` in Safari and Chrome.
354
+ */
355
+
356
+ input[type="search"] {
357
+ -webkit-appearance: textfield; /* 1 */
358
+ box-sizing: content-box; /* 2 */
359
+ }
360
+
361
+ /**
362
+ * Remove inner padding and search cancel button in Safari and Chrome on OS X.
363
+ * Safari (but not Chrome) clips the cancel button when the search input has
364
+ * padding (and `textfield` appearance).
365
+ */
366
+
367
+ input[type="search"]::-webkit-search-cancel-button,
368
+ input[type="search"]::-webkit-search-decoration {
369
+ -webkit-appearance: none;
370
+ }
371
+
372
+ /**
373
+ * Define consistent border, margin, and padding.
374
+ */
375
+
376
+ fieldset {
377
+ border: 1px solid #c0c0c0;
378
+ margin: 0 2px;
379
+ padding: 0.35em 0.625em 0.75em;
380
+ }
381
+
382
+ /**
383
+ * 1. Correct `color` not being inherited in IE 8/9/10/11.
384
+ * 2. Remove padding so people aren't caught out if they zero out fieldsets.
385
+ */
386
+
387
+ legend {
388
+ border: 0; /* 1 */
389
+ padding: 0; /* 2 */
390
+ }
391
+
392
+ /**
393
+ * Remove default vertical scrollbar in IE 8/9/10/11.
394
+ */
395
+
396
+ textarea {
397
+ overflow: auto;
398
+ }
399
+
400
+ /**
401
+ * Don't inherit the `font-weight` (applied by a rule above).
402
+ * NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
403
+ */
404
+
405
+ optgroup {
406
+ font-weight: bold;
407
+ }
408
+
409
+ /* Tables
410
+ ========================================================================== */
411
+
412
+ /**
413
+ * Remove most spacing between table cells.
414
+ */
415
+
416
+ table {
417
+ border-collapse: collapse;
418
+ border-spacing: 0;
419
+ }
420
+
421
+ td,
422
+ th {
423
+ padding: 0;
424
+ }
@@ -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
+ }