materialize-sass 0.95.2 → 0.95.3

Sign up to get free protection for your applications and to get access to all the features.
Files changed (16) hide show
  1. checksums.yaml +7 -0
  2. data/app/assets/javascripts/materialize.js +5692 -5641
  3. data/app/assets/stylesheets/materialize/components/_cards.scss +151 -150
  4. data/app/assets/stylesheets/materialize/components/_form.scss +700 -698
  5. data/app/assets/stylesheets/materialize/components/_global.scss +707 -632
  6. data/app/assets/stylesheets/materialize/components/_grid.scss +119 -119
  7. data/app/assets/stylesheets/materialize/components/_icons-material-design.scss +2247 -2247
  8. data/app/assets/stylesheets/materialize/components/_navbar.scss +154 -134
  9. data/app/assets/stylesheets/materialize/components/_preloader.scss +338 -320
  10. data/app/assets/stylesheets/materialize/components/_slider.scss +92 -91
  11. data/app/assets/stylesheets/materialize/components/_variables.scss +135 -132
  12. data/app/assets/stylesheets/materialize/components/_waves.scss +168 -167
  13. data/app/assets/stylesheets/materialize/components/date_picker/_default.date.scss +462 -431
  14. data/lib/materialize-sass/version.rb +6 -6
  15. data/materialize-sass.gemspec +27 -27
  16. metadata +9 -17
data/app/assets/stylesheets/materialize/components/_navbar.scss CHANGED
@@ -1,134 +1,154 @@
1
- nav {
2
- color: #fff;
3
- @extend .z-depth-1;
4
- background-color: $primary-color;
5
- width: 100%;
6
- height: $navbar-height-mobile;
7
- line-height: $navbar-height-mobile;
8
-
9
- .nav-wrapper {
10
- position: relative;
11
- height: 100%;
12
- }
13
-
14
- a { color: #fff; }
15
-
16
- @media #{$large-and-up} {
17
- a.button-collapse { display: none; }
18
- }
19
-
20
-
21
- a.button-collapse {
22
- float: left;
23
- position: relative;
24
- z-index: 1;
25
- height: $navbar-height-mobile;
26
-
27
- i {
28
- font-size: 2.7rem;
29
- height: $navbar-height-mobile;
30
- line-height: $navbar-height-mobile;
31
- }
32
- }
33
-
34
- .brand-logo {
35
- position: absolute;
36
- color: #fff;
37
- display: inline-block;
38
- font-size: 2.1rem;
39
- padding: 0;
40
-
41
- @media #{$medium-and-down} {
42
- left: 0;
43
- width: 100%;
44
- text-align: center;
45
- z-index: 0;
46
- }
47
-
48
- &.right {
49
- right: 0.5rem;
50
- padding: 0;
51
- }
52
- }
53
-
54
- ul {
55
- margin: 0;
56
-
57
- li {
58
- float: left;
59
- padding: 0px;
60
- @include transition(background-color .3s);
61
-
62
- &:hover, &.active {
63
- background-color: rgba(0,0,0,.1);
64
- }
65
- }
66
- a {
67
- font-size: 1rem;
68
- color: #fff;
69
- display: inline-block;
70
- padding: 0px 15px;
71
- }
72
-
73
- &.left {
74
- float: left;
75
- }
76
- }
77
-
78
- // Navbar Search Form
79
- .input-field {
80
- margin: 0;
81
-
82
- input {
83
- height: 100%;
84
- font-size: 1.2rem;
85
- border: none;
86
- padding-left: 2rem;
87
- @include box-sizing(border-box);
88
-
89
- &:focus, &[type=text]:valid, &[type=password]:valid,
90
- &[type=email]:valid, &[type=url]:valid, &[type=date]:valid {
91
- border: none;
92
- @include box-shadow(none);
93
- }
94
- }
95
- label {
96
- top: 0;
97
- left: 0;
98
-
99
- i {
100
- color: rgba(255,255,255,.7);
101
- @include transition(color .3s);
102
- }
103
- &.active i { color: #fff; }
104
- &.active {
105
- @include transform(translateY(0));
106
- }
107
- }
108
-
109
- }
110
-
111
- }
112
-
113
- // Fixed Navbar
114
- .navbar-fixed {
115
- position: relative;
116
- height: $navbar-height-mobile;
117
- z-index: 998;
118
-
119
- nav {
120
- position: fixed;
121
- }
122
- }
123
- @media #{$medium-and-up} {
124
- nav, nav .nav-wrapper i, nav a.button-collapse, nav a.button-collapse i {
125
- height: $navbar-height;
126
- line-height: $navbar-height;
127
- }
128
- nav .nav-wrapper i {
129
- font-size: 2rem;
130
- }
131
- .navbar-fixed {
132
- height: $navbar-height;
133
- }
134
- }
1
+ nav {
2
+ color: #fff;
3
+ @extend .z-depth-1;
4
+ background-color: $primary-color;
5
+ width: 100%;
6
+ height: $navbar-height-mobile;
7
+ line-height: $navbar-height-mobile;
8
+
9
+ .nav-wrapper {
10
+ position: relative;
11
+ height: 100%;
12
+ i {
13
+ font-size: 2rem;
14
+ }
15
+ }
16
+
17
+ a { color: #fff; }
18
+
19
+ @media #{$large-and-up} {
20
+ a.button-collapse { display: none; }
21
+ }
22
+
23
+
24
+ a.button-collapse {
25
+ float: left;
26
+ position: relative;
27
+ z-index: 1;
28
+ height: $navbar-height-mobile;
29
+ color: #fff;
30
+
31
+ i {
32
+ font-size: 2.7rem;
33
+ height: $navbar-height-mobile;
34
+ line-height: $navbar-height-mobile;
35
+ }
36
+ }
37
+
38
+ .brand-logo {
39
+ position: absolute;
40
+ color: #fff;
41
+ display: inline-block;
42
+ font-size: 2.1rem;
43
+ padding: 0;
44
+ &.center {
45
+ top: 50%;
46
+ left: 50%;
47
+ -webkit-transform: translate(-50%, -50%);
48
+ -moz-transform: translate(-50%, -50%);
49
+ -ms-transform: translate(-50%, -50%);
50
+ -o-transform: translate(-50%, -50%);
51
+ transform: translate(-50%, -50%);
52
+ }
53
+
54
+ @media #{$medium-and-down} {
55
+ // left: 0;
56
+ // width: 100%;
57
+ // text-align: center;
58
+ // z-index: 0;
59
+ top: 50%;
60
+ left: 50%;
61
+ -webkit-transform: translate(-50%, -50%);
62
+ -moz-transform: translate(-50%, -50%);
63
+ -ms-transform: translate(-50%, -50%);
64
+ -o-transform: translate(-50%, -50%);
65
+ transform: translate(-50%, -50%);
66
+ }
67
+
68
+ &.right {
69
+ right: 0.5rem;
70
+ padding: 0;
71
+ }
72
+ }
73
+
74
+ ul {
75
+ margin: 0;
76
+
77
+ li {
78
+ float: left;
79
+ padding: 0px;
80
+ @include transition(background-color .3s);
81
+
82
+ &:hover, &.active {
83
+ background-color: rgba(0,0,0,.1);
84
+ }
85
+ }
86
+ a {
87
+ font-size: 1rem;
88
+ color: #fff;
89
+ display: inline-block;
90
+ padding: 0px 15px;
91
+ }
92
+
93
+ &.left {
94
+ float: left;
95
+ }
96
+ }
97
+
98
+ // Navbar Search Form
99
+ .input-field {
100
+ margin: 0;
101
+
102
+ input {
103
+ height: 100%;
104
+ font-size: 1.2rem;
105
+ border: none;
106
+ padding-left: 2rem;
107
+ @include box-sizing(border-box);
108
+
109
+ &:focus, &[type=text]:valid, &[type=password]:valid,
110
+ &[type=email]:valid, &[type=url]:valid, &[type=date]:valid {
111
+ border: none;
112
+ @include box-shadow(none);
113
+ }
114
+ }
115
+ label {
116
+ top: 0;
117
+ left: 0;
118
+
119
+ i {
120
+ color: rgba(255,255,255,.7);
121
+ @include transition(color .3s);
122
+ }
123
+ &.active i { color: #fff; }
124
+ &.active {
125
+ @include transform(translateY(0));
126
+ }
127
+ }
128
+
129
+ }
130
+
131
+ }
132
+
133
+ // Fixed Navbar
134
+ .navbar-fixed {
135
+ position: relative;
136
+ height: $navbar-height-mobile;
137
+ z-index: 998;
138
+
139
+ nav {
140
+ position: fixed;
141
+ }
142
+ }
143
+ @media #{$medium-and-up} {
144
+ nav, nav .nav-wrapper i, nav a.button-collapse, nav a.button-collapse i {
145
+ height: $navbar-height;
146
+ line-height: $navbar-height;
147
+ }
148
+ // nav .nav-wrapper i {
149
+ // font-size: 2rem;
150
+ // }
151
+ .navbar-fixed {
152
+ height: $navbar-height;
153
+ }
154
+ }
data/app/assets/stylesheets/materialize/components/_preloader.scss CHANGED
@@ -1,320 +1,338 @@
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: 48px;
34
- height: 48px;
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
- }
67
-
68
- .spinner-blue {
69
- border-color: #4285f4;
70
- }
71
-
72
- .spinner-red {
73
- border-color: #db4437;
74
- }
75
-
76
- .spinner-yellow {
77
- border-color: #f4b400;
78
- }
79
-
80
- .spinner-green {
81
- border-color: #0f9d58;
82
- }
83
-
84
- /**
85
- * IMPORTANT NOTE ABOUT CSS ANIMATION PROPERTIES (keanulee):
86
- *
87
- * iOS Safari (tested on iOS 8.1) does not handle animation-delay very well - it doesn't
88
- * guarantee that the animation will start _exactly_ after that value. So we avoid using
89
- * animation-delay and instead set custom keyframes for each color (as redundant as it
90
- * seems).
91
- *
92
- * We write out each animation in full (instead of separating animation-name,
93
- * animation-duration, etc.) because under the polyfill, Safari does not recognize those
94
- * specific properties properly, treats them as -webkit-animation, and overrides the
95
- * other animation rules. See https://github.com/Polymer/platform/issues/53.
96
- */
97
- .active .spinner-layer.spinner-blue {
98
- /* durations: 4 * ARCTIME */
99
- -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;
100
- 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;
101
- }
102
-
103
- .active .spinner-layer.spinner-red {
104
- /* durations: 4 * ARCTIME */
105
- -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;
106
- 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;
107
- }
108
-
109
- .active .spinner-layer.spinner-yellow {
110
- /* durations: 4 * ARCTIME */
111
- -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;
112
- 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;
113
- }
114
-
115
- .active .spinner-layer.spinner-green {
116
- /* durations: 4 * ARCTIME */
117
- -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;
118
- 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;
119
- }
120
-
121
- @-webkit-keyframes fill-unfill-rotate {
122
- 12.5% { -webkit-transform: rotate(135deg); } /* 0.5 * ARCSIZE */
123
- 25% { -webkit-transform: rotate(270deg); } /* 1 * ARCSIZE */
124
- 37.5% { -webkit-transform: rotate(405deg); } /* 1.5 * ARCSIZE */
125
- 50% { -webkit-transform: rotate(540deg); } /* 2 * ARCSIZE */
126
- 62.5% { -webkit-transform: rotate(675deg); } /* 2.5 * ARCSIZE */
127
- 75% { -webkit-transform: rotate(810deg); } /* 3 * ARCSIZE */
128
- 87.5% { -webkit-transform: rotate(945deg); } /* 3.5 * ARCSIZE */
129
- to { -webkit-transform: rotate(1080deg); } /* 4 * ARCSIZE */
130
- }
131
-
132
- @keyframes fill-unfill-rotate {
133
- 12.5% { transform: rotate(135deg); } /* 0.5 * ARCSIZE */
134
- 25% { transform: rotate(270deg); } /* 1 * ARCSIZE */
135
- 37.5% { transform: rotate(405deg); } /* 1.5 * ARCSIZE */
136
- 50% { transform: rotate(540deg); } /* 2 * ARCSIZE */
137
- 62.5% { transform: rotate(675deg); } /* 2.5 * ARCSIZE */
138
- 75% { transform: rotate(810deg); } /* 3 * ARCSIZE */
139
- 87.5% { transform: rotate(945deg); } /* 3.5 * ARCSIZE */
140
- to { transform: rotate(1080deg); } /* 4 * ARCSIZE */
141
- }
142
-
143
- @-webkit-keyframes blue-fade-in-out {
144
- from { opacity: 1; }
145
- 25% { opacity: 1; }
146
- 26% { opacity: 0; }
147
- 89% { opacity: 0; }
148
- 90% { opacity: 1; }
149
- 100% { opacity: 1; }
150
- }
151
-
152
- @keyframes blue-fade-in-out {
153
- from { opacity: 1; }
154
- 25% { opacity: 1; }
155
- 26% { opacity: 0; }
156
- 89% { opacity: 0; }
157
- 90% { opacity: 1; }
158
- 100% { opacity: 1; }
159
- }
160
-
161
- @-webkit-keyframes red-fade-in-out {
162
- from { opacity: 0; }
163
- 15% { opacity: 0; }
164
- 25% { opacity: 1; }
165
- 50% { opacity: 1; }
166
- 51% { opacity: 0; }
167
- }
168
-
169
- @keyframes red-fade-in-out {
170
- from { opacity: 0; }
171
- 15% { opacity: 0; }
172
- 25% { opacity: 1; }
173
- 50% { opacity: 1; }
174
- 51% { opacity: 0; }
175
- }
176
-
177
- @-webkit-keyframes yellow-fade-in-out {
178
- from { opacity: 0; }
179
- 40% { opacity: 0; }
180
- 50% { opacity: 1; }
181
- 75% { opacity: 1; }
182
- 76% { opacity: 0; }
183
- }
184
-
185
- @keyframes yellow-fade-in-out {
186
- from { opacity: 0; }
187
- 40% { opacity: 0; }
188
- 50% { opacity: 1; }
189
- 75% { opacity: 1; }
190
- 76% { opacity: 0; }
191
- }
192
-
193
- @-webkit-keyframes green-fade-in-out {
194
- from { opacity: 0; }
195
- 65% { opacity: 0; }
196
- 75% { opacity: 1; }
197
- 90% { opacity: 1; }
198
- 100% { opacity: 0; }
199
- }
200
-
201
- @keyframes green-fade-in-out {
202
- from { opacity: 0; }
203
- 65% { opacity: 0; }
204
- 75% { opacity: 1; }
205
- 90% { opacity: 1; }
206
- 100% { opacity: 0; }
207
- }
208
-
209
- /**
210
- * Patch the gap that appear between the two adjacent div.circle-clipper while the
211
- * spinner is rotating (appears on Chrome 38, Safari 7.1, and IE 11).
212
- */
213
- .gap-patch {
214
- position: absolute;
215
- box-sizing: border-box;
216
- top: 0;
217
- left: 45%;
218
- width: 10%;
219
- height: 100%;
220
- overflow: hidden;
221
- border-color: inherit;
222
- }
223
-
224
- .gap-patch .circle {
225
- width: 1000%;
226
- left: -450%;
227
- }
228
-
229
- .circle-clipper {
230
- display: inline-block;
231
- position: relative;
232
- width: 50%;
233
- height: 100%;
234
- overflow: hidden;
235
- border-color: inherit;
236
-
237
- .circle {
238
- width: 200%;
239
- box-sizing: border-box;
240
- height: 100%;
241
- border-width: 3px; /* STROKEWIDTH */
242
- border-style: solid;
243
- border-color: inherit;
244
- border-bottom-color: transparent !important;
245
- border-radius: 50%;
246
- -webkit-animation: none;
247
- animation: none;
248
- position: absolute;
249
- top: 0;
250
- right: 0;
251
- bottom: 0;
252
- }
253
-
254
- &.left .circle {
255
- left: 0;
256
- border-right-color: transparent !important;
257
- -webkit-transform: rotate(129deg);
258
- transform: rotate(129deg);
259
- }
260
- &.right .circle {
261
- left: -100%;
262
- border-left-color: transparent !important;
263
- -webkit-transform: rotate(-129deg);
264
- transform: rotate(-129deg);
265
- }
266
- }
267
-
268
-
269
-
270
- .active .circle-clipper.left .circle {
271
- /* duration: ARCTIME */
272
- -webkit-animation: left-spin 1333ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
273
- animation: left-spin 1333ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
274
- }
275
-
276
- .active .circle-clipper.right .circle {
277
- /* duration: ARCTIME */
278
- -webkit-animation: right-spin 1333ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
279
- animation: right-spin 1333ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
280
- }
281
-
282
- @-webkit-keyframes left-spin {
283
- from { -webkit-transform: rotate(130deg); }
284
- 50% { -webkit-transform: rotate(-5deg); }
285
- to { -webkit-transform: rotate(130deg); }
286
- }
287
-
288
- @keyframes left-spin {
289
- from { transform: rotate(130deg); }
290
- 50% { transform: rotate(-5deg); }
291
- to { transform: rotate(130deg); }
292
- }
293
-
294
- @-webkit-keyframes right-spin {
295
- from { -webkit-transform: rotate(-130deg); }
296
- 50% { -webkit-transform: rotate(5deg); }
297
- to { -webkit-transform: rotate(-130deg); }
298
- }
299
-
300
- @keyframes right-spin {
301
- from { transform: rotate(-130deg); }
302
- 50% { transform: rotate(5deg); }
303
- to { transform: rotate(-130deg); }
304
- }
305
-
306
- #spinnerContainer.cooldown {
307
- /* duration: SHRINK_TIME */
308
- -webkit-animation: container-rotate 1568ms linear infinite, fade-out 400ms cubic-bezier(0.4, 0.0, 0.2, 1);
309
- animation: container-rotate 1568ms linear infinite, fade-out 400ms cubic-bezier(0.4, 0.0, 0.2, 1);
310
- }
311
-
312
- @-webkit-keyframes fade-out {
313
- from { opacity: 1; }
314
- to { opacity: 0; }
315
- }
316
-
317
- @keyframes fade-out {
318
- from { opacity: 1; }
319
- to { opacity: 0; }
320
- }
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: 48px;
34
+ height: 48px;
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
+ -ms-filter: "progid:DXImageTransform@mixin Microsoft@mixin Alpha(Opacity=${iefactor})";
66
+ filter: "alpha(opacity=(${iefactor}))";
67
+ -moz-opacity: 0;
68
+ -khtml-opacity: 0;
69
+ opacity: 0;
70
+ }
71
+
72
+ .spinner-blue, .spinner-blue-only {
73
+ border-color: #4285f4;
74
+ }
75
+
76
+ .spinner-red, .spinner-red-only {
77
+ border-color: #db4437;
78
+ }
79
+
80
+ .spinner-yellow, .spinner-yellow-only {
81
+ border-color: #f4b400;
82
+ }
83
+
84
+ .spinner-green, .spinner-green-only {
85
+ border-color: #0f9d58;
86
+ }
87
+
88
+ /**
89
+ * IMPORTANT NOTE ABOUT CSS ANIMATION PROPERTIES (keanulee):
90
+ *
91
+ * iOS Safari (tested on iOS 8.1) does not handle animation-delay very well - it doesn't
92
+ * guarantee that the animation will start _exactly_ after that value. So we avoid using
93
+ * animation-delay and instead set custom keyframes for each color (as redundant as it
94
+ * seems).
95
+ *
96
+ * We write out each animation in full (instead of separating animation-name,
97
+ * animation-duration, etc.) because under the polyfill, Safari does not recognize those
98
+ * specific properties properly, treats them as -webkit-animation, and overrides the
99
+ * other animation rules. See https://github.com/Polymer/platform/issues/53.
100
+ */
101
+ .active .spinner-layer.spinner-blue-only,
102
+ .active .spinner-layer.spinner-red-only,
103
+ .active .spinner-layer.spinner-yellow-only,
104
+ .active .spinner-layer.spinner-green-only {
105
+ /* durations: 4 * ARCTIME */
106
+ -ms-filter: "progid:DXImageTransform@mixin Microsoft@mixin Alpha(Opacity=${iefactor})";
107
+ filter: "alpha(opacity=(${iefactor}))";
108
+ -moz-opacity: 1;
109
+ -khtml-opacity: 1;
110
+ opacity: 1;
111
+ -webkit-animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
112
+ animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
113
+ }
114
+
115
+ .active .spinner-layer.spinner-blue {
116
+ /* durations: 4 * ARCTIME */
117
+ -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;
118
+ 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;
119
+ }
120
+
121
+ .active .spinner-layer.spinner-red {
122
+ /* durations: 4 * ARCTIME */
123
+ -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;
124
+ 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;
125
+ }
126
+
127
+ .active .spinner-layer.spinner-yellow {
128
+ /* durations: 4 * ARCTIME */
129
+ -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;
130
+ 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;
131
+ }
132
+
133
+ .active .spinner-layer.spinner-green {
134
+ /* durations: 4 * ARCTIME */
135
+ -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;
136
+ 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;
137
+ }
138
+
139
+ @-webkit-keyframes fill-unfill-rotate {
140
+ 12.5% { -webkit-transform: rotate(135deg); } /* 0.5 * ARCSIZE */
141
+ 25% { -webkit-transform: rotate(270deg); } /* 1 * ARCSIZE */
142
+ 37.5% { -webkit-transform: rotate(405deg); } /* 1.5 * ARCSIZE */
143
+ 50% { -webkit-transform: rotate(540deg); } /* 2 * ARCSIZE */
144
+ 62.5% { -webkit-transform: rotate(675deg); } /* 2.5 * ARCSIZE */
145
+ 75% { -webkit-transform: rotate(810deg); } /* 3 * ARCSIZE */
146
+ 87.5% { -webkit-transform: rotate(945deg); } /* 3.5 * ARCSIZE */
147
+ to { -webkit-transform: rotate(1080deg); } /* 4 * ARCSIZE */
148
+ }
149
+
150
+ @keyframes fill-unfill-rotate {
151
+ 12.5% { transform: rotate(135deg); } /* 0.5 * ARCSIZE */
152
+ 25% { transform: rotate(270deg); } /* 1 * ARCSIZE */
153
+ 37.5% { transform: rotate(405deg); } /* 1.5 * ARCSIZE */
154
+ 50% { transform: rotate(540deg); } /* 2 * ARCSIZE */
155
+ 62.5% { transform: rotate(675deg); } /* 2.5 * ARCSIZE */
156
+ 75% { transform: rotate(810deg); } /* 3 * ARCSIZE */
157
+ 87.5% { transform: rotate(945deg); } /* 3.5 * ARCSIZE */
158
+ to { transform: rotate(1080deg); } /* 4 * ARCSIZE */
159
+ }
160
+
161
+ @-webkit-keyframes blue-fade-in-out {
162
+ from { opacity: 1; }
163
+ 25% { opacity: 1; }
164
+ 26% { opacity: 0; }
165
+ 89% { opacity: 0; }
166
+ 90% { opacity: 1; }
167
+ 100% { opacity: 1; }
168
+ }
169
+
170
+ @keyframes blue-fade-in-out {
171
+ from { opacity: 1; }
172
+ 25% { opacity: 1; }
173
+ 26% { opacity: 0; }
174
+ 89% { opacity: 0; }
175
+ 90% { opacity: 1; }
176
+ 100% { opacity: 1; }
177
+ }
178
+
179
+ @-webkit-keyframes red-fade-in-out {
180
+ from { opacity: 0; }
181
+ 15% { opacity: 0; }
182
+ 25% { opacity: 1; }
183
+ 50% { opacity: 1; }
184
+ 51% { opacity: 0; }
185
+ }
186
+
187
+ @keyframes red-fade-in-out {
188
+ from { opacity: 0; }
189
+ 15% { opacity: 0; }
190
+ 25% { opacity: 1; }
191
+ 50% { opacity: 1; }
192
+ 51% { opacity: 0; }
193
+ }
194
+
195
+ @-webkit-keyframes yellow-fade-in-out {
196
+ from { opacity: 0; }
197
+ 40% { opacity: 0; }
198
+ 50% { opacity: 1; }
199
+ 75% { opacity: 1; }
200
+ 76% { opacity: 0; }
201
+ }
202
+
203
+ @keyframes yellow-fade-in-out {
204
+ from { opacity: 0; }
205
+ 40% { opacity: 0; }
206
+ 50% { opacity: 1; }
207
+ 75% { opacity: 1; }
208
+ 76% { opacity: 0; }
209
+ }
210
+
211
+ @-webkit-keyframes green-fade-in-out {
212
+ from { opacity: 0; }
213
+ 65% { opacity: 0; }
214
+ 75% { opacity: 1; }
215
+ 90% { opacity: 1; }
216
+ 100% { opacity: 0; }
217
+ }
218
+
219
+ @keyframes green-fade-in-out {
220
+ from { opacity: 0; }
221
+ 65% { opacity: 0; }
222
+ 75% { opacity: 1; }
223
+ 90% { opacity: 1; }
224
+ 100% { opacity: 0; }
225
+ }
226
+
227
+ /**
228
+ * Patch the gap that appear between the two adjacent div.circle-clipper while the
229
+ * spinner is rotating (appears on Chrome 38, Safari 7.1, and IE 11).
230
+ */
231
+ .gap-patch {
232
+ position: absolute;
233
+ box-sizing: border-box;
234
+ top: 0;
235
+ left: 45%;
236
+ width: 10%;
237
+ height: 100%;
238
+ overflow: hidden;
239
+ border-color: inherit;
240
+ }
241
+
242
+ .gap-patch .circle {
243
+ width: 1000%;
244
+ left: -450%;
245
+ }
246
+
247
+ .circle-clipper {
248
+ display: inline-block;
249
+ position: relative;
250
+ width: 50%;
251
+ height: 100%;
252
+ overflow: hidden;
253
+ border-color: inherit;
254
+
255
+ .circle {
256
+ width: 200%;
257
+ box-sizing: border-box;
258
+ height: 100%;
259
+ border-width: 3px; /* STROKEWIDTH */
260
+ border-style: solid;
261
+ border-color: inherit;
262
+ border-bottom-color: transparent !important;
263
+ border-radius: 50%;
264
+ -webkit-animation: none;
265
+ animation: none;
266
+ position: absolute;
267
+ top: 0;
268
+ right: 0;
269
+ bottom: 0;
270
+ }
271
+
272
+ &.left .circle {
273
+ left: 0;
274
+ border-right-color: transparent !important;
275
+ -webkit-transform: rotate(129deg);
276
+ transform: rotate(129deg);
277
+ }
278
+ &.right .circle {
279
+ left: -100%;
280
+ border-left-color: transparent !important;
281
+ -webkit-transform: rotate(-129deg);
282
+ transform: rotate(-129deg);
283
+ }
284
+ }
285
+
286
+
287
+
288
+ .active .circle-clipper.left .circle {
289
+ /* duration: ARCTIME */
290
+ -webkit-animation: left-spin 1333ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
291
+ animation: left-spin 1333ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
292
+ }
293
+
294
+ .active .circle-clipper.right .circle {
295
+ /* duration: ARCTIME */
296
+ -webkit-animation: right-spin 1333ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
297
+ animation: right-spin 1333ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
298
+ }
299
+
300
+ @-webkit-keyframes left-spin {
301
+ from { -webkit-transform: rotate(130deg); }
302
+ 50% { -webkit-transform: rotate(-5deg); }
303
+ to { -webkit-transform: rotate(130deg); }
304
+ }
305
+
306
+ @keyframes left-spin {
307
+ from { transform: rotate(130deg); }
308
+ 50% { transform: rotate(-5deg); }
309
+ to { transform: rotate(130deg); }
310
+ }
311
+
312
+ @-webkit-keyframes right-spin {
313
+ from { -webkit-transform: rotate(-130deg); }
314
+ 50% { -webkit-transform: rotate(5deg); }
315
+ to { -webkit-transform: rotate(-130deg); }
316
+ }
317
+
318
+ @keyframes right-spin {
319
+ from { transform: rotate(-130deg); }
320
+ 50% { transform: rotate(5deg); }
321
+ to { transform: rotate(-130deg); }
322
+ }
323
+
324
+ #spinnerContainer.cooldown {
325
+ /* duration: SHRINK_TIME */
326
+ -webkit-animation: container-rotate 1568ms linear infinite, fade-out 400ms cubic-bezier(0.4, 0.0, 0.2, 1);
327
+ animation: container-rotate 1568ms linear infinite, fade-out 400ms cubic-bezier(0.4, 0.0, 0.2, 1);
328
+ }
329
+
330
+ @-webkit-keyframes fade-out {
331
+ from { opacity: 1; }
332
+ to { opacity: 0; }
333
+ }
334
+
335
+ @keyframes fade-out {
336
+ from { opacity: 1; }
337
+ to { opacity: 0; }
338
+ }