materialize-sass 0.95.3 → 0.95.3.1

Sign up to get free protection for your applications and to get access to all the features.
Files changed (18) hide show
  1. checksums.yaml +4 -4
  2. data/README.md +59 -59
  3. data/app/assets/javascripts/materialize.js +5692 -5692
  4. data/app/assets/stylesheets/materialize/components/_cards.scss +152 -151
  5. data/app/assets/stylesheets/materialize/components/_form.scss +702 -700
  6. data/app/assets/stylesheets/materialize/components/_global.scss +665 -707
  7. data/app/assets/stylesheets/materialize/components/_grid.scss +118 -119
  8. data/app/assets/stylesheets/materialize/components/_icons-material-design.scss +2247 -2247
  9. data/app/assets/stylesheets/materialize/components/_navbar.scss +154 -154
  10. data/app/assets/stylesheets/materialize/components/_preloader.scss +338 -338
  11. data/app/assets/stylesheets/materialize/components/_slider.scss +92 -92
  12. data/app/assets/stylesheets/materialize/components/_typography.scss +6 -6
  13. data/app/assets/stylesheets/materialize/components/_variables.scss +135 -135
  14. data/app/assets/stylesheets/materialize/components/_waves.scss +168 -168
  15. data/app/assets/stylesheets/materialize/components/date_picker/_default.date.scss +462 -462
  16. data/lib/materialize-sass/version.rb +6 -6
  17. data/materialize-sass.gemspec +27 -27
  18. metadata +2 -2
data/app/assets/stylesheets/materialize/components/_navbar.scss CHANGED
@@ -1,154 +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
- 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
- }
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,338 +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
- -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
- }
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
+ }