1/*!
2 * Ladda
3 * http://lab.hakim.se/ladda
4 * MIT licensed
5 *
6 * Copyright (C) 2013 Hakim El Hattab, http://hakim.se
7 */
8
9
10// CONFIG
11$spinnerSize: 32px;
12
13// MIXINS
14@mixin prefix( $property, $value ) {
15  -webkit-#{$property}: $value;
16  -moz-#{$property}: $value;
17  -ms-#{$property}: $value;
18  -o-#{$property}: $value;
19  $property: $value;
20}
21
22@mixin transition( $value ) {
23  -webkit-transition: $value !important;
24  -moz-transition: $value !important;
25  -ms-transition: $value !important;
26  -o-transition: $value !important;
27  transition: $value !important;
28}
29
30@mixin vendor-transform( $value ) {
31  @include prefix( transform, $value );
32}
33
34@mixin transform-origin( $value ) {
35  @include prefix( transform-origin, $value );
36}
37
38@mixin buttonColor( $name, $color ) {
39  &[data-color=#{$name}] {
40    background: $color;
41
42    &:hover {
43      background-color: lighten($color, 5%);
44    }
45  }
46}
47
48// BUTTON BASE
49.ladda-button {
50  position: relative;
51
52  .ladda-spinner {
53    position: absolute;
54    top: 50%;
55    z-index: 2;
56    display: inline-block;
57    width: $spinnerSize;
58    height: $spinnerSize;
59    margin-top: -$spinnerSize / 2;
60    pointer-events: none;
61    opacity: 0;
62  }
63
64  .ladda-label {
65    position: relative;
66    z-index: 3;
67  }
68
69  .ladda-progress {
70    position: absolute;
71    top: 0;
72    width: 0;
73    height: 100%;
74    visibility: hidden;
75    background: rgba(0, 0, 0, 0.2);
76    opacity: 0;
77    @include left(0);
78    @include transition( 0.1s linear all );
79
80    &[data-loading] .ladda-progress {
81      visibility: visible;
82      opacity: 1;
83    }
84  }
85
86  &[disabled],
87  &[data-loading] {
88    cursor: default;
89    background-color: #999;
90    border-color: rgba(0, 0, 0, 0.07);
91
92    &:hover {
93      cursor: default;
94      background-color: #999;
95    }
96  }
97
98  &[data-size="xs"] {
99    padding: 4px 8px;
100
101    .ladda-label {
102      font-size: 0.7em;
103    }
104  }
105
106  &[data-size="s"] {
107    padding: 6px 10px;
108
109    .ladda-label {
110      font-size: 0.9em;
111    }
112  }
113
114  &[data-size="l"] .ladda-label {
115    font-size: 1.2em;
116  }
117
118  &[data-size="xl"] .ladda-label {
119    font-size: 1.5em;
120  }
121}
122
123// EASING
124.ladda-button,
125.ladda-button .ladda-spinner,
126.ladda-button .ladda-label {
127  @include transition( 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) background-color );
128}
129
130.ladda-button[data-style="zoom-in"],
131.ladda-button[data-style="zoom-in"] .ladda-spinner,
132.ladda-button[data-style="zoom-in"] .ladda-label,
133.ladda-button[data-style="zoom-out"],
134.ladda-button[data-style="zoom-out"] .ladda-spinner,
135.ladda-button[data-style="zoom-out"] .ladda-label {
136  @include transition( 0.3s ease all );
137}
138
139// EXPAND LEFT
140.ladda-button[data-style="expand-right"] {
141  .ladda-spinner {
142    @include right(14px);
143  }
144
145  &[data-size="s"] .ladda-spinner,
146  &[data-size="xs"] .ladda-spinner {
147    @include right(4px);
148  }
149
150  &[data-loading] {
151    @include padding-right(56px);
152
153    .ladda-spinner {
154      opacity: 1;
155    }
156
157    &[data-size="s"],
158    &[data-size="xs"] {
159      @include padding-right(40px);
160    }
161  }
162}
163
164// EXPAND RIGHT
165.ladda-button[data-style="expand-left"] {
166  .ladda-spinner {
167    @include left(14px);
168  }
169
170  &[data-size="s"] .ladda-spinner,
171  &[data-size="xs"] .ladda-spinner {
172    @include left(4px);
173  }
174
175  &[data-loading] {
176    @include padding-left(56px);
177
178    .ladda-spinner {
179      opacity: 1;
180    }
181
182    &[data-size="s"],
183    &[data-size="xs"] {
184      @include padding-left(40px);
185    }
186  }
187}
188
189// EXPAND UP
190.ladda-button[data-style="expand-up"] {
191  overflow: hidden;
192
193  .ladda-spinner {
194    top: -$spinnerSize;
195    @include margin-left(-$spinnerSize / 2);
196    @include left(50%);
197  }
198
199  &[data-loading] {
200    padding-top: 54px;
201
202    .ladda-spinner {
203      top: 14px;
204      margin-top: 0;
205      opacity: 1;
206    }
207
208    &[data-size="s"],
209    &[data-size="xs"] {
210      padding-top: 32px;
211
212      .ladda-spinner {
213        top: 4px;
214      }
215    }
216  }
217}
218
219// EXPAND DOWN
220.ladda-button[data-style="expand-down"] {
221  overflow: hidden;
222
223  .ladda-spinner {
224    top: 62px;
225    @include left(50%);
226    margin-left: -$spinnerSize / 2;
227  }
228
229  &[data-size="s"] .ladda-spinner,
230  &[data-size="xs"] .ladda-spinner {
231    top: 40px;
232  }
233
234  &[data-loading] {
235    padding-bottom: 54px;
236
237    .ladda-spinner {
238      opacity: 1;
239    }
240  }
241
242  &[data-size="s"],
243  &[data-size="xs"] {
244    padding-bottom: 32px;
245  }
246}
247
248// SLIDE LEFT
249.ladda-button[data-style="slide-left"] {
250  overflow: hidden;
251
252  .ladda-label {
253    position: relative;
254  }
255
256  .ladda-spinner {
257    @include left(100%);
258    @include margin-left(-$spinnerSize / 2);
259  }
260
261  &[data-loading] {
262    .ladda-label {
263      opacity: 0;
264      @include left(-100%);
265    }
266
267    .ladda-spinner {
268      opacity: 1;
269      @include left(50%);
270    }
271  }
272}
273
274// SLIDE RIGHT
275.ladda-button[data-style="slide-right"] {
276  overflow: hidden;
277
278  .ladda-label {
279    position: relative;
280  }
281
282  .ladda-spinner {
283    @include right(100%);
284    @include margin-left(-$spinnerSize / 2);
285  }
286
287  &[data-loading] {
288    .ladda-label {
289      opacity: 0;
290      @include left(100%);
291    }
292
293    .ladda-spinner {
294      opacity: 1;
295      @include left(50%);
296    }
297  }
298}
299
300// SLIDE UP
301.ladda-button[data-style="slide-up"] {
302  overflow: hidden;
303
304  .ladda-label {
305    position: relative;
306  }
307
308  .ladda-spinner {
309    margin-top: 1em;
310    @include left(50%);
311    @include margin-left(-$spinnerSize / 2);
312  }
313
314  &[data-loading] {
315    .ladda-label {
316      top: -1em;
317      opacity: 0;
318    }
319
320    .ladda-spinner {
321      margin-top: -$spinnerSize / 2;
322      opacity: 1;
323    }
324  }
325}
326
327// SLIDE DOWN
328.ladda-button[data-style="slide-down"] {
329  overflow: hidden;
330
331  .ladda-label {
332    position: relative;
333  }
334
335  .ladda-spinner {
336    margin-top: -2em;
337    @include margin-left(-$spinnerSize / 2);
338    @include left(50%);
339  }
340
341  &[data-loading] {
342    .ladda-label {
343      top: 1em;
344      opacity: 0;
345    }
346
347    .ladda-spinner {
348      margin-top: -$spinnerSize / 2;
349      opacity: 1;
350    }
351  }
352}
353
354// ZOOM-OUT
355.ladda-button[data-style="zoom-out"] {
356  overflow: hidden;
357
358  .ladda-spinner {
359    @include left(50%);
360    @include margin-left(-$spinnerSize / 2);
361    @include vendor-transform( scale( 2.5 ) );
362  }
363
364  .ladda-label {
365    position: relative;
366    display: inline-block;
367  }
368
369  &[data-loading] .ladda-label {
370    opacity: 0;
371    @include vendor-transform( scale( 0.5 ) );
372  }
373
374  &[data-loading] .ladda-spinner {
375    opacity: 1;
376    @include vendor-transform( none );
377  }
378}
379
380// ZOOM-IN
381.ladda-button[data-style="zoom-in"] {
382  overflow: hidden;
383
384  .ladda-spinner {
385    @include margin-left(-$spinnerSize / 2);
386    @include left(50%);
387    @include vendor-transform( scale( 0.2 ) );
388  }
389
390  .ladda-label {
391    position: relative;
392    display: inline-block;
393  }
394
395  &[data-loading] .ladda-label {
396    opacity: 0;
397    @include vendor-transform( scale( 2.2 ) );
398  }
399
400  &[data-loading] .ladda-spinner {
401    opacity: 1;
402    @include vendor-transform( none );
403  }
404}
405
406// CONTRACT
407.ladda-button[data-style="contract"] {
408  width: 100px;
409  overflow: hidden;
410
411  .ladda-spinner {
412    @include left(50%);
413    @include margin-left(-16px);
414  }
415}
416
417.ladda-button[data-style="contract"][data-loading] {
418  width: 52px;
419  border-radius: 50%;
420
421  .ladda-label {
422    opacity: 0;
423  }
424
425  .ladda-spinner {
426    opacity: 1;
427  }
428}
429
430// OVERLAY
431.ladda-button[data-style="contract-overlay"] {
432  width: 100px;
433  overflow: hidden;
434
435  @include ltr () {
436    box-shadow: 0 0 0 3000px rgba(0, 0, 0, 0);
437  }
438
439  @include rtl () {
440    box-shadow: 0 3000px 0 0 rgba(0, 0, 0, 0);
441  }
442
443  .ladda-spinner {
444    @include left(50%);
445    @include margin-left(-16px);
446  }
447
448  &[data-loading] {
449    width: 52px;
450    border-radius: 50%;
451
452    @include ltr () {
453      box-shadow: 0 0 0 3000px rgba(0, 0, 0, 0.8);
454    }
455
456    @include rtl () {
457      box-shadow: 0 3000px 0 0 rgba(0, 0, 0, 0.8);
458    }
459
460    .ladda-label {
461      opacity: 0;
462    }
463
464    .ladda-spinner {
465      opacity: 1;
466    }
467  }
468}
469
470