JSDM

HTML

164
 
1
<div class="header">
2
  <h1>Wavy Loading Animations</h1>
3
  <p>By: Kyle Brumm</p>
4
</div>
5
​
6
<div class="shaft-load">
7
  <div class="shaft1"></div>
8
  <div class="shaft2"></div>
9
  <div class="shaft3"></div>
10
  <div class="shaft4"></div>
11
  <div class="shaft5"></div>
12
  <div class="shaft6"></div>
13
  <div class="shaft7"></div>
14
  <div class="shaft8"></div>
15
  <div class="shaft9"></div>
16
  <div class="shaft10"></div>
17
</div>
18
​
19
<div class="shaft-load2">
20
  <div class="shaft1"></div>
21
  <div class="shaft2"></div>
22
  <div class="shaft3"></div>
23
  <div class="shaft4"></div>
24
  <div class="shaft5"></div>
25
  <div class="shaft6"></div>
26
  <div class="shaft7"></div>
27
  <div class="shaft8"></div>
28
  <div class="shaft9"></div>
29
  <div class="shaft10"></div>
30
</div>
31
​
32
<div class="shaft-load3">
33
  <div class="shaft1"></div>
34
  <div class="shaft2"></div>
35
  <div class="shaft3"></div>
36
  <div class="shaft4"></div>
37
  <div class="shaft5"></div>
38
  <div class="shaft6"></div>
39
  <div class="shaft7"></div>
40
  <div class="shaft8"></div>
41
  <div class="shaft9"></div>
42
  <div class="shaft10"></div>
43
</div>
44
​
45
<div class="shaft-load4">
46
  <div class="shaft1"></div>
47
  <div class="shaft2"></div>
48
  <div class="shaft3"></div>
49
  <div class="shaft4"></div>
50
  <div class="shaft5"></div>
51
  <div class="shaft6"></div>
52
  <div class="shaft7"></div>
53
  <div class="shaft8"></div>
54
  <div class="shaft9"></div>
55
  <div class="shaft10"></div>
56
</div>
57
​
58
<div class="shaft-load5">
59
  <div class="shaft1"></div>
60
  <div class="shaft2"></div>
61
  <div class="shaft3"></div>
62
  <div class="shaft4"></div>
63
  <div class="shaft5"></div>
64
  <div class="shaft6"></div>
65
  <div class="shaft7"></div>
66
  <div class="shaft8"></div>
67
  <div class="shaft9"></div>
68
  <div class="shaft10"></div>
69
</div>
70
​
71
<div class="shaft-load6">
72
  <div class="shaft1"></div>
73
  <div class="shaft2"></div>
74
  <div class="shaft3"></div>
75
  <div class="shaft4"></div>
76
  <div class="shaft5"></div>
77
  <div class="shaft6"></div>
78
  <div class="shaft7"></div>
79
  <div class="shaft8"></div>
80
  <div class="shaft9"></div>
81
  <div class="shaft10"></div>
82
</div>
83
​
84
​
85
<div class="shaft-load7">
86
  <div class="shaft1"></div>
87
  <div class="shaft2"></div>
88
  <div class="shaft3"></div>
89
  <div class="shaft4"></div>
90
  <div class="shaft5"></div>
91
  <div class="shaft6"></div>
92
  <div class="shaft7"></div>
93
  <div class="shaft8"></div>
94
  <div class="shaft9"></div>
95
  <div class="shaft10"></div>
96
</div>
97
​
98
<div class="shaft-load8">
99
  <div class="shaft1"></div>
100
  <div class="shaft2"></div>
101
  <div class="shaft3"></div>
102
  <div class="shaft4"></div>
103
  <div class="shaft5"></div>
104
  <div class="shaft6"></div>
105
  <div class="shaft7"></div>
106
  <div class="shaft8"></div>
107
  <div class="shaft9"></div>
108
  <div class="shaft10"></div>
109
</div>
110
​
111
<div class="shaft-load9">
112
  <div class="shaft1"></div>
113
  <div class="shaft2"></div>
114
  <div class="shaft3"></div>
115
  <div class="shaft4"></div>
116
  <div class="shaft5"></div>
117
  <div class="shaft6"></div>
118
  <div class="shaft7"></div>
119
  <div class="shaft8"></div>
120
  <div class="shaft9"></div>
121
  <div class="shaft10"></div>
122
</div>
123
​
124
<div class="shaft-load10">
125
  <div class="shaft1"></div>
126
  <div class="shaft2"></div>
127
  <div class="shaft3"></div>
128
  <div class="shaft4"></div>
129
  <div class="shaft5"></div>
130
  <div class="shaft6"></div>
131
  <div class="shaft7"></div>
132
  <div class="shaft8"></div>
133
  <div class="shaft9"></div>
134
  <div class="shaft10"></div>
135
</div>
136
​
137
<div class="shaft-load11">
138
  <div class="shaft1"></div>
139
  <div class="shaft2"></div>
140
  <div class="shaft3"></div>
141
  <div class="shaft4"></div>
142
  <div class="shaft5"></div>
143
  <div class="shaft6"></div>
144
  <div class="shaft7"></div>
145
  <div class="shaft8"></div>
146
  <div class="shaft9"></div>
147
  <div class="shaft10"></div>
148
</div>
149
​
150
***Work In Progress***
151
<div class="shaft-load12">
152
  <div class="shaft1"></div>
153
  <div class="shaft2"></div>
154
  <div class="shaft3"></div>
155
  <div class="shaft4"></div>
156
  <!--<div class="shaft5"></div>
157
  <div class="shaft6"></div>
158
  <div class="shaft7"></div>
159
  <div class="shaft8"></div>
160
  <div class="shaft9"></div>
161
  <div class="shaft10"></div>-->
162
</div>
163
​
164
​
!

CSS

xxxxxxxxxx
1637
 
1
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
2
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
3
// SASS Mixin Collection            ////////////////////////////////////////////////////////////////////////////////
4
// By: Kyle Brumm                   ////////////////////////////////////////////////////////////////////////////////
5
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
6
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
7
​
8
​
9
// --------------------------------------------------
10
// BREAKPOINTS
11
// --------------------------------------------------
12
$breakpoints: ( // Breakpoint settings
13
  'xxlarge':   (min-width: 120.0625em),                       // >= 1921px
14
  'xlarge':    (min-width: 90.0625em) and (max-width: 120em), // 1441px - 1920px
15
  'large':     (min-width: 64.0625em) and (max-width: 90em),  // 1025px - 1440px
16
  'medium':    (min-width: 40.0625em) and (max-width: 64em),  // 641px - 1024px
17
  'small':     (max-width: 40em),                             // <= 640px
18
  'not-small': (min-width: 40.0625em)                         // >= 641px
19
);
20
​
21
@mixin bp($break, $viewport1: null) {
22
  // Check if we are just passing a default value
23
  @if not $viewport1 {
24
    @if map-has-key($breakpoints, $break) {
25
      @media only screen and #{inspect(map-get($breakpoints, $break))} { @content; }
26
    }
27
    @else {
28
      @warn "Couldn't find a breakpoint named `#{$break}`.";
29
    }
30
  }
31
  @else {
32
    // Min breakpoint
33
    @if $break == min {
34
      @media screen and (min-width: $viewport1) { @content; }
35
    }
36
    // Max breakpoint
37
    @else if $break == max {
38
      @media screen and (max-width: $viewport1) { @content; }
39
    }
40
    // Custom breakpoint
41
    @else {
42
      @media screen and (min-width: $break) and (max-width: $viewport1) { @content; }
43
    }
44
  }
45
}
46
​
47
// --------------------------------------------------
48
// FONTS
49
// --------------------------------------------------
50
​
51
​
52
// --------------------------------------------------
53
// FORMS
54
// --------------------------------------------------
55
​
56
// Placeholder text
57
// ----------------
58
@mixin placeholder-color($color: #555555) {
59
 &:-moz-placeholder {
60
   color: $color;
61
 }
62
 &:-ms-input-placeholder {
63
   color: $color;
64
 }
65
 &::-webkit-input-placeholder {
66
   color: $color;
67
 }
68
}
69
​
70
​
71
// --------------------------------------------------
72
// BORDERS
73
// --------------------------------------------------
74
​
75
// Border radius
76
// -------------
77
@mixin border-radius($radius) {
78
  -webkit-border-radius: $radius;
79
     -moz-border-radius: $radius;
80
          border-radius: $radius;
81
}
82
​
83
// Single corner border radius
84
// ---------------------------
85
@mixin border-top-left-radius($radius) {
86
 -webkit-border-top-left-radius: $radius;
87
     -moz-border-radius-topleft: $radius;
88
         border-top-left-radius: $radius;
89
}
90
@mixin border-top-right-radius($radius) {
91
 -webkit-border-top-right-radius: $radius;
92
     -moz-border-radius-topright: $radius;
93
         border-top-right-radius: $radius;
94
}
95
@mixin border-bottom-right-radius($radius) {
96
 -webkit-border-bottom-right-radius: $radius;
97
     -moz-border-radius-bottomright: $radius;
98
         border-bottom-right-radius: $radius;
99
}
100
@mixin border-bottom-left-radius($radius) {
101
 -webkit-border-bottom-left-radius: $radius;
102
     -moz-border-radius-bottomleft: $radius;
103
         border-bottom-left-radius: $radius;
104
}
105
​
106
// Single side border radius
107
// -------------------------
108
@mixin border-top-radius($radius) {
109
 @include border-top-right-radius($radius);
110
 @include border-top-left-radius($radius);
111
}
112
@mixin border-right-radius($radius) {
113
 @include border-top-right-radius($radius);
114
 @include border-bottom-right-radius($radius);
115
}
116
@mixin border-bottom-radius($radius) {
117
 @include border-bottom-right-radius($radius);
118
 @include border-bottom-left-radius($radius);
119
}
120
@mixin border-left-radius($radius) {
121
 @include border-top-left-radius($radius);
122
 @include border-bottom-left-radius($radius);
123
}
124
​
125
// Border image
126
// -------------------------
127
@mixin border-image($border-image...) {
128
 -webkit-border-image: $border-image;
129
    -moz-border-image: $border-image;
130
      -o-border-image: $border-image;
131
         border-image: $border-image;
132
}
133
​
134
​
135
// --------------------------------------------------
136
// ANIMATIONS
137
// --------------------------------------------------
138
@mixin animation($animation...) {
139
 -webkit-animation: $animation;
140
    -moz-animation: $animation;
141
      -o-animation: $animation;
142
         animation: $animation;
143
}
144
@mixin animation-name($animation-name) {
145
 -webkit-animation-name: $animation-name;
146
    -moz-animation-name: $animation-name;
147
      -o-animation-name: $animation-name;
148
         animation-name: $animation-name;
149
}
150
@mixin animation-delay($animation-delay) {
151
 -webkit-animation-delay: $animation-delay;
152
    -moz-animation-delay: $animation-delay;
153
      -o-animation-delay: $animation-delay;
154
         animation-delay: $animation-delay;
155
}
156
@mixin animation-direction($animation-direction) {
157
 -webkit-animation-direction: $animation-direction;
158
    -moz-animation-direction: $animation-direction;
159
      -o-animation-direction: $animation-direction;
160
         animation-direction: $animation-direction;
161
}
162
@mixin animation-duration($animation-duration) {
163
 -webkit-animation-duration: $animation-duration;
164
    -moz-animation-duration: $animation-duration;
165
      -o-animation-duration: $animation-duration;
166
         animation-duration: $animation-duration;
167
}
168
@mixin animation-fill-mode($animation-fill-mode) {
169
 -webkit-animation-fill-mode: $animation-fill-mode;
170
    -moz-animation-fill-mode: $animation-fill-mode;
171
      -o-animation-fill-mode: $animation-fill-mode;
172
         animation-fill-mode: $animation-fill-mode;
173
}
174
@mixin animation-iteration-count($animation-iteration-count) {
175
 -webkit-animation-iteration-count: $animation-iteration-count;
176
    -moz-animation-iteration-count: $animation-iteration-count;
177
      -o-animation-iteration-count: $animation-iteration-count;
178
         animation-iteration-count: $animation-iteration-count;
179
}
180
@mixin animation-play-state($animation-play-state) {
181
 -webkit-animation-play-state: $animation-play-state;
182
    -moz-animation-play-state: $animation-play-state;
183
      -o-animation-play-state: $animation-play-state;
184
         animation-play-state: $animation-play-state;
185
}
186
@mixin animation-timing-function($animation-timing-function) {
187
 -webkit-animation-timing-function: $animation-timing-function;
188
    -moz-animation-timing-function: $animation-timing-function;
189
      -o-animation-timing-function: $animation-timing-function;
190
         animation-timing-function: $animation-timing-function;
191
}
192
​
193
​
194
// --------------------------------------------------
195
// KEYFRAMES
196
// --------------------------------------------------
197
@mixin keyframes($animationName) {
198
 @-webkit-keyframes #{$animationName} { @content; }
199
 @-moz-keyframes #{$animationName} { @content; }
200
 @-o-keyframes #{$animationName} { @content; }
201
 @keyframes #{$animationName} { @content; }
202
}
203
​
204
​
205
// --------------------------------------------------
206
// TRANSITIONS
207
// --------------------------------------------------
208
@mixin transition($transition...) {
209
 -webkit-transition: $transition;
210
    -moz-transition: $transition;
211
      -o-transition: $transition;
212
         transition: $transition;
213
}
214
@mixin transition-delay($transition-delay) {
215
 -webkit-transition-delay: $transition-delay;
216
    -moz-transition-delay: $transition-delay;
217
      -o-transition-delay: $transition-delay;
218
         transition-delay: $transition-delay;
219
}
220
@mixin transition-duration($transition-duration) {
221
 -webkit-transition-duration: $transition-duration;
222
    -moz-transition-duration: $transition-duration;
223
      -o-transition-duration: $transition-duration;
224
         transition-duration: $transition-duration;
225
}
226
@mixin transition-property($transition-property) {
227
 -webkit-transition-property: $transition-property;
228
    -moz-transition-property: $transition-property;
229
      -o-transition-property: $transition-property;
230
         transition-property: $transition-property;
231
}
232
@mixin transition-timing-function($transition-timing-function) {
233
 -webkit-transition-timing-function: $transition-timing-function;
234
    -moz-transition-timing-function: $transition-timing-function;
235
      -o-transition-timing-function: $transition-timing-function;
236
         transition-timing-function: $transition-timing-function;
237
}
238
​
239
​
240
// --------------------------------------------------
241
// TRANSFORMATIONS
242
// --------------------------------------------------
243
@mixin transform($transform...) {
244
 -webkit-transform: $transform;
245
    -moz-transform: $transform;
246
     -ms-transform: $transform;
247
      -o-transform: $transform;
248
         transform: $transform;
249
}
250
@mixin transform-origin($transform-origin...) {
251
 -webkit-transform-origin: $transform-origin;
252
    -moz-transform-origin: $transform-origin;
253
     -ms-transform-origin: $transform-origin;
254
      -o-transform-origin: $transform-origin;
255
         transform-origin: $transform-origin;
256
}
257
@mixin transform-style($transform-style) {
258
 -webkit-transform-style: $transform-style;
259
    -moz-transform-style: $transform-style;
260
     -ms-transform-style: $transform-style;
261
      -o-transform-style: $transform-style;
262
         transform-style: $transform-style;
263
}
264
@mixin rotate($deg) {
265
  -webkit-transform: rotate($deg);
266
     -moz-transform: rotate($deg);
267
      -ms-transform: rotate($deg);
268
       -o-transform: rotate($deg);
269
          transform: rotate($deg);
270
}
271
@mixin rotateX($deg) {
272
  -webkit-transform: rotateX($deg);
273
     -moz-transform: rotateX($deg);
274
      -ms-transform: rotateX($deg);
275
       -o-transform: rotateX($deg);
276
          transform: rotateX($deg);
277
}
278
@mixin rotateY($deg) {
279
  -webkit-transform: rotateY($deg);
280
     -moz-transform: rotateY($deg);
281
      -ms-transform: rotateY($deg);
282
       -o-transform: rotateY($deg);
283
          transform: rotateY($deg);
284
}
285
@mixin rotateZ($deg) {
286
  -webkit-transform: rotateZ($deg);
287
     -moz-transform: rotateZ($deg);
288
      -ms-transform: rotateZ($deg);
289
       -o-transform: rotateZ($deg);
290
          transform: rotateZ($deg);
291
}
292
@mixin rotate3d($rotate3d...) {
293
  -webkit-transform: rotate3d($rotate3d);
294
     -moz-transform: rotate3d($rotate3d);
295
      -ms-transform: rotate3d($rotate3d);
296
       -o-transform: rotate3d($rotate3d);
297
          transform: rotate3d($rotate3d);
298
}
299
@mixin scale($ratio) {
300
  -webkit-transform: scale($ratio);
301
     -moz-transform: scale($ratio);
302
      -ms-transform: scale($ratio);
303
       -o-transform: scale($ratio);
304
          transform: scale($ratio);
305
}
306
@mixin scaleX($ratio) {
307
  -webkit-transform: scaleX($ratio);
308
     -moz-transform: scaleX($ratio);
309
      -ms-transform: scaleX($ratio);
310
       -o-transform: scaleX($ratio);
311
          transform: scaleX($ratio);
312
}
313
@mixin scaleY($ratio) {
314
  -webkit-transform: scaleY($ratio);
315
     -moz-transform: scaleY($ratio);
316
      -ms-transform: scaleY($ratio);
317
       -o-transform: scaleY($ratio);
318
          transform: scaleY($ratio);
319
}
320
@mixin scaleZ($ratio) {
321
  -webkit-transform: scaleZ($ratio);
322
     -moz-transform: scaleZ($ratio);
323
      -ms-transform: scaleZ($ratio);
324
       -o-transform: scaleZ($ratio);
325
          transform: scaleZ($ratio);
326
}
327
@mixin scale3d($x, $y, $z) {
328
  -webkit-transform: scale3d($x, $y, $z);
329
     -moz-transform: scale3d($x, $y, $z);
330
      -ms-transform: scale3d($x, $y, $z);
331
       -o-transform: scale3d($x, $y, $z);
332
          transform: scale3d($x, $y, $z);
333
}
334
@mixin skew($x, $y) {
335
  -webkit-transform: skew($x, $y);
336
     -moz-transform: skew($x, $y);
337
      -ms-transform: skewX($x) skewY($y);
338
       -o-transform: skew($x, $y);
339
          transform: skew($x, $y);
340
  -webkit-backface-visibility: hidden;
341
}
342
@mixin skewX($deg) {
343
  -webkit-transform: skewX($deg);
344
     -moz-transform: skewX($deg);
345
      -ms-transform: skewX($deg);
346
       -o-transform: skewX($deg);
347
          transform: skewX($deg);
348
  -webkit-backface-visibility: hidden;
349
}
350
@mixin skewY($deg) {
351
  -webkit-transform: skewY($deg);
352
     -moz-transform: skewY($deg);
353
      -ms-transform: skewY($deg);
354
       -o-transform: skewY($deg);
355
          transform: skewY($deg);
356
  -webkit-backface-visibility: hidden;
357
}
358
@mixin translate($x, $y) {
359
  -webkit-transform: translate($x, $y);
360
     -moz-transform: translate($x, $y);
361
      -ms-transform: translate($x, $y);
362
       -o-transform: translate($x, $y);
363
          transform: translate($x, $y);
364
}
365
@mixin translateX($x) {
366
  -webkit-transform: translateX($x);
367
     -moz-transform: translateX($x);
368
      -ms-transform: translateX($x);
369
       -o-transform: translateX($x);
370
          transform: translateX($x);
371
}
372
@mixin translateY($y) {
373
  -webkit-transform: translateY($y);
374
     -moz-transform: translateY($y);
375
      -ms-transform: translateY($y);
376
       -o-transform: translateY($y);
377
          transform: translateY($y);
378
}
379
@mixin translateZ($z) {
380
  -webkit-transform: translateZ($z);
381
     -moz-transform: translateZ($z);
382
      -ms-transform: translateZ($z);
383
       -o-transform: translateZ($z);
384
          transform: translateZ($z);
385
}
386
@mixin translate3d($x, $y, $z) {
387
  -webkit-transform: translate3d($x, $y, $z);
388
     -moz-transform: translate3d($x, $y, $z);
389
       -o-transform: translate3d($x, $y, $z);
390
          transform: translate3d($x, $y, $z);
391
}
392
​
393
​
394
// --------------------------------------------------
395
// FILTERS
396
// --------------------------------------------------
397
@mixin filter($filter...) {
398
  -webkit-filter: $filter;
399
     -moz-filter: $filter;
400
       -o-filter: $filter;
401
          filter: $filter;
402
}
403
@mixin filter-blur($blur) {
404
  -webkit-filter: blur($blur);
405
     -moz-filter: blur($blur);
406
       -o-filter: blur($blur);
407
          filter: blur($blur);
408
}
409
@mixin filter-brightness($brightness) {
410
  -webkit-filter: brightness($brightness);
411
     -moz-filter: brightness($brightness);
412
       -o-filter: brightness($brightness);
413
          filter: brightness($brightness);
414
}
415
@mixin filter-contrast($contrast) {
416
  -webkit-filter: contrast($contrast);
417
     -moz-filter: contrast($contrast);
418
       -o-filter: contrast($contrast);
419
          filter: contrast($contrast);
420
}
421
@mixin filter-grayscale($grayscale) {
422
  -webkit-filter: grayscale($grayscale);
423
     -moz-filter: grayscale($grayscale);
424
       -o-filter: grayscale($grayscale);
425
          filter: grayscale($grayscale);
426
}
427
@mixin filter-hue-rotate($hue-rotate) {
428
  -webkit-filter: hue-rotate($hue-rotate);
429
     -moz-filter: hue-rotate($hue-rotate);
430
       -o-filter: hue-rotate($hue-rotate);
431
          filter: hue-rotate($hue-rotate);
432
}
433
@mixin filter-invert($invert) {
434
  -webkit-filter: invert($invert);
435
     -moz-filter: invert($invert);
436
       -o-filter: invert($invert);
437
          filter: invert($invert);
438
}
439
@mixin filter-saturate($saturate) {
440
  -webkit-filter: saturate($saturate);
441
     -moz-filter: saturate($saturate);
442
       -o-filter: saturate($saturate);
443
          filter: saturate($saturate);
444
}
445
@mixin filter-sepia($sepia) {
446
  -webkit-filter: sepia($sepia);
447
     -moz-filter: sepia($sepia);
448
       -o-filter: sepia($sepia);
449
          filter: sepia($sepia);
450
}
451
​
452
​
453
// --------------------------------------------------
454
// BACKGROUND
455
// --------------------------------------------------
456
@mixin background-size($size) {
457
 -webkit-background-size: $size;
458
    -moz-background-size: $size;
459
      -o-background-size: $size;
460
         background-size: $size;
461
}
462
@mixin background-origin($origin) {
463
  -webkit-background-origin: $origin;
464
     -moz-background-origin: $origin;
465
          background-origin: $origin;
466
}
467
@mixin background-clip($clip) {
468
  -webkit-background-clip: $clip;
469
     -moz-background-clip: $clip;
470
          background-clip: $clip;
471
}
472
​
473
​
474
// --------------------------------------------------
475
// GRADIENTS
476
// --------------------------------------------------
477
@mixin gradient-horizontal($startColor: #555, $endColor: #333) {
478
  background-color: $endColor;
479
  background-image: -moz-linear-gradient(left, $startColor, $endColor); // FF 3.6+
480
  background-image: -webkit-gradient(linear, 0 0, 100% 0, from($startColor), to($endColor)); // Safari 4+, Chrome 2+
481
  background-image: -webkit-linear-gradient(left, $startColor, $endColor); // Safari 5.1+, Chrome 10+
482
  background-image: -o-linear-gradient(left, $startColor, $endColor); // Opera 11.10
483
  background-image: linear-gradient(to right, $startColor, $endColor); // Standard, IE10
484
  background-repeat: repeat-x;
485
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{ie-hex-str($startColor)}', endColorstr='#{ie-hex-str($endColor)}', GradientType=1); // IE9 and down
486
}
487
@mixin gradient-vertical($startColor: #555, $endColor: #333) {
488
  background-color: mix($startColor, $endColor, 60%);
489
  background-image: -moz-linear-gradient(top, $startColor, $endColor); // FF 3.6+
490
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from($startColor), to($endColor)); // Safari 4+, Chrome 2+
491
  background-image: -webkit-linear-gradient(top, $startColor, $endColor); // Safari 5.1+, Chrome 10+
492
  background-image: -o-linear-gradient(top, $startColor, $endColor); // Opera 11.10
493
  background-image: linear-gradient(to bottom, $startColor, $endColor); // Standard, IE10
494
  background-repeat: repeat-x;
495
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{ie-hex-str($startColor)}', endColorstr='#{ie-hex-str($endColor)}', GradientType=0); // IE9 and down
496
}
497
@mixin gradient-directional($startColor: #555, $endColor: #333, $deg: 45deg) {
498
  background-color: $endColor;
499
  background-repeat: repeat-x;
500
  background-image: -moz-linear-gradient($deg, $startColor, $endColor); // FF 3.6+
501
  background-image: -webkit-linear-gradient($deg, $startColor, $endColor); // Safari 5.1+, Chrome 10+
502
  background-image: -o-linear-gradient($deg, $startColor, $endColor); // Opera 11.10
503
  background-image: linear-gradient($deg, $startColor, $endColor); // Standard, IE10
504
}
505
// Only works for webkit?
506
@mixin gradient-vertical-three-colors($startColor: #00b3ee, $midColor: #7a43b6, $colorStop: 50%, $endColor: #c3325f) {
507
  background-color: mix($midColor, $endColor, 80%);
508
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from($startColor), color-stop($colorStop, $midColor), to($endColor));
509
  background-image: -webkit-linear-gradient($startColor, $midColor $colorStop, $endColor);
510
  background-image: -moz-linear-gradient(top, $startColor, $midColor $colorStop, $endColor);
511
  background-image: -o-linear-gradient($startColor, $midColor $colorStop, $endColor);
512
  background-image: linear-gradient($startColor, $midColor $colorStop, $endColor);
513
  background-repeat: no-repeat;
514
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{ie-hex-str($startColor)}', endColorstr='#{ie-hex-str($endColor)}', GradientType=0); // IE9 and down, gets no color-stop at all for proper fallback
515
}
516
@mixin gradient-radial($innerColor: #555, $outerColor: #333)  {
517
  background-color: $outerColor;
518
  background-image: -webkit-gradient(radial, center center, 0, center center, 460, from($innerColor), to($outerColor));
519
  background-image: -webkit-radial-gradient(circle, $innerColor, $outerColor);
520
  background-image: -moz-radial-gradient(circle, $innerColor, $outerColor);
521
  background-image: -o-radial-gradient(circle, $innerColor, $outerColor);
522
  background-repeat: no-repeat;
523
}
524
@mixin gradient-striped($color: #555, $angle: 45deg) {
525
  background-color: $color;
526
  background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.25, rgba(255,255,255,.15)), color-stop(.25, transparent), color-stop(.5, transparent), color-stop(.5, rgba(255,255,255,.15)), color-stop(.75, rgba(255,255,255,.15)), color-stop(.75, transparent), to(transparent));
527
  background-image: -webkit-linear-gradient($angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent);
528
  background-image: -moz-linear-gradient($angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent);
529
  background-image: -o-linear-gradient($angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent);
530
  background-image: linear-gradient($angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent);
531
}
532
​
533
​
534
// --------------------------------------------------
535
// CONTENT COLUMNS
536
// --------------------------------------------------
537
@mixin columns($columns...) {
538
 -webkit-columns: $columns;
539
    -moz-columns: $columns;
540
         columns: $columns;
541
}
542
@mixin column-count($column-count) {
543
 -webkit-column-count: $column-count;
544
    -moz-column-count: $column-count;
545
         column-count: $column-count;
546
}
547
@mixin column-gap($column-gap) {
548
 -webkit-column-gap: $column-gap;
549
    -moz-column-gap: $column-gap;
550
         column-gap: $column-gap;
551
}
552
@mixin column-width($column-width) {
553
 -webkit-column-width: $column-width;
554
    -moz-column-width: $column-width;
555
         column-width: $column-width;
556
}
557
@mixin column-span($column-span) {
558
 -webkit-column-span: $column-span;
559
    -moz-column-span: $column-span;
560
         column-span: $column-span;
561
}
562
@mixin column-fill($column-fill) {
563
 -webkit-column-fill: $column-fill;
564
    -moz-column-fill: $column-fill;
565
         column-fill: $column-fill;
566
}
567
@mixin column-rule($column-rule) {
568
 -webkit-column-rule: $column-rule;
569
    -moz-column-rule: $column-rule;
570
         column-rule: $column-rule;
571
}
572
@mixin column-rule-color($column-rule-color) {
573
 -webkit-column-rule-color: $column-rule-color;
574
    -moz-column-rule-color: $column-rule-color;
575
         column-rule-color: $column-rule-color;
576
}
577
@mixin column-rule-style($column-rule-style) {
578
 -webkit-column-rule-style: $column-rule-style;
579
    -moz-column-rule-style: $column-rule-style;
580
         column-rule-style: $column-rule-style;
581
}
582
@mixin column-rule-width($column-rule-width) {
583
 -webkit-column-rule-width: $column-rule-width;
584
    -moz-column-rule-width: $column-rule-width;
585
         column-rule-width: $column-rule-width;
586
}
587
​
588
​
589
// --------------------------------------------------
590
// Flexbox Mixins
591
// http://philipwalton.github.io/solved-by-flexbox/
592
// https://github.com/philipwalton/solved-by-flexbox
593
// --------------------------------------------------
594
​
595
// Flexbox Containers
596
//
597
// The 'flex' value causes an element to generate a block-level flex
598
// container box.
599
//
600
// The 'inline-flex' value causes an element to generate a inline-level
601
// flex container box.
602
//
603
// display: flex | inline-flex
604
//
605
// http://w3.org/tr/css3-flexbox/#flex-containers
606
//
607
// (Placeholder selectors for each type, for those who rather @extend)
608
​
609
@mixin flexbox {
610
  display: -webkit-box;
611
  display: -webkit-flex;
612
  display: -moz-flex;
613
  display: -ms-flexbox;
614
  display: flex;
615
}
616
​
617
//----------------------------------
618
​
619
@mixin inline-flex {
620
  display: -webkit-inline-box;
621
  display: -webkit-inline-flex;
622
  display: -moz-inline-flex;
623
  display: -ms-inline-flexbox;
624
  display: inline-flex;
625
}
626
​
627
//----------------------------------------------------------------------
628
​
629
// Flexbox Direction
630
//
631
// The 'flex-direction' property specifies how flex items are placed in
632
// the flex container, by setting the direction of the flex container's
633
// main axis. This determines the direction that flex items are laid out in.
634
//
635
// Values: row | row-reverse | column | column-reverse
636
// Default: row
637
//
638
// http://w3.org/tr/css3-flexbox/#flex-direction-property
639
​
640
@mixin flex-direction($value: row) {
641
  @if $value == row-reverse {
642
    -webkit-box-direction: reverse;
643
    -webkit-box-orient: horizontal;
644
  } @else if $value == column {
645
    -webkit-box-direction: normal;
646
    -webkit-box-orient: vertical;
647
  } @else if $value == column-reverse {
648
    -webkit-box-direction: reverse;
649
    -webkit-box-orient: vertical;
650
  } @else {
651
    -webkit-box-direction: normal;
652
    -webkit-box-orient: horizontal;
653
  }
654
  -webkit-flex-direction: $value;
655
  -moz-flex-direction: $value;
656
  -ms-flex-direction: $value;
657
  flex-direction: $value;
658
}
659
  // Shorter version:
660
  @mixin flex-dir($value: false) { @include flex-direction($value); }
661
​
662
//----------------------------------------------------------------------
663
​
664
// Flexbox Wrap
665
//
666
// The 'flex-wrap' property controls whether the flex container is single-line
667
// or multi-line, and the direction of the cross-axis, which determines
668
// the direction new lines are stacked in.
669
//
670
// Values: nowrap | wrap | wrap-reverse
671
// Default: nowrap
672
//
673
// http://w3.org/tr/css3-flexbox/#flex-wrap-property
674
​
675
@mixin flex-wrap($value: nowrap) {
676
  // No Webkit Box fallback.
677
  -webkit-flex-wrap: $value;
678
  -moz-flex-wrap: $value;
679
  @if $value == nowrap {
680
    -ms-flex-wrap: none;
681
  } @else {
682
    -ms-flex-wrap: $value;
683
  }
684
  flex-wrap: $value;
685
}
686
​
687
//----------------------------------------------------------------------
688
​
689
// Flexbox Flow (shorthand)
690
//
691
// The 'flex-flow' property is a shorthand for setting the 'flex-direction'
692
// and 'flex-wrap' properties, which together define the flex container's
693
// main and cross axes.
694
//
695
// Values: <flex-direction> | <flex-wrap>
696
// Default: row nowrap
697
//
698
// http://w3.org/tr/css3-flexbox/#flex-flow-property
699
​
700
@mixin flex-flow($values: (row nowrap)) {
701
  // No Webkit Box fallback.
702
  -webkit-flex-flow: $values;
703
  -moz-flex-flow: $values;
704
  -ms-flex-flow: $values;
705
  flex-flow: $values;
706
}
707
​
708
//----------------------------------------------------------------------
709
​
710
// Flexbox Order
711
//
712
// The 'order' property controls the order in which flex items appear within
713
// their flex container, by assigning them to ordinal groups.
714
//
715
// Default: 0
716
//
717
// http://w3.org/tr/css3-flexbox/#order-property
718
​
719
@mixin order($int: 0) {
720
  -webkit-box-ordinal-group: $int + 1;
721
  -webkit-order: $int;
722
  -moz-order: $int;
723
  -ms-flex-order: $int;
724
  order: $int;
725
}
726
​
727
//----------------------------------------------------------------------
728
​
729
// Flexbox Grow
730
//
731
// The 'flex-grow' property sets the flex grow factor. Negative numbers
732
// are invalid.
733
//
734
// Default: 0
735
//
736
// http://w3.org/tr/css3-flexbox/#flex-grow-property
737
​
738
@mixin flex-grow($int: 0) {
739
  -webkit-box-flex: $int;
740
  -webkit-flex-grow: $int;
741
  -moz-flex-grow: $int;
742
  -ms-flex-positive: $int;
743
  flex-grow: $int;
744
}
745
​
746
//----------------------------------------------------------------------
747
​
748
// Flexbox Shrink
749
//
750
// The 'flex-shrink' property sets the flex shrink factor. Negative numbers
751
// are invalid.
752
//
753
// Default: 1
754
//
755
// http://w3.org/tr/css3-flexbox/#flex-shrink-property
756
​
757
@mixin flex-shrink($int: 1) {
758
  -webkit-flex-shrink: $int;
759
  -moz-flex-shrink: $int;
760
  -ms-flex-negative: $int;
761
  flex-shrink: $int;
762
}
763
​
764
//----------------------------------------------------------------------
765
​
766
// Flexbox Basis
767
//
768
// The 'flex-basis' property sets the flex basis. Negative lengths are invalid.
769
//
770
// Values: Like "width"
771
// Default: auto
772
//
773
// http://www.w3.org/TR/css3-flexbox/#flex-basis-property
774
​
775
@mixin flex-basis($value: auto) {
776
  -webkit-flex-basis: $value;
777
  -moz-flex-basis: $value;
778
  -ms-flex-preferred-size: $value;
779
  flex-basis: $value;
780
}
781
​
782
//----------------------------------------------------------------------
783
​
784
// Flexbox "Flex" (shorthand)
785
//
786
// The 'flex' property specifies the components of a flexible length: the
787
// flex grow factor and flex shrink factor, and the flex basis. When an
788
// element is a flex item, 'flex' is consulted instead of the main size
789
// property to determine the main size of the element. If an element is
790
// not a flex item, 'flex' has no effect.
791
//
792
// Values: none | <flex-grow> <flex-shrink> || <flex-basis>
793
// Default: See individual properties (1 1 0).
794
//
795
// http://w3.org/tr/css3-flexbox/#flex-property
796
​
797
@mixin flex($fg: 1, $fs: null, $fb: null) {
798
799
  // Set a variable to be used by box-flex properties
800
  $fg-boxflex: $fg;
801
​
802
  // Box-Flex only supports a flex-grow value so let's grab the
803
  // first item in the list and just return that.
804
  @if type-of($fg) == 'list' {
805
    $fg-boxflex: nth($fg, 1);
806
  }
807
​
808
  -webkit-box-flex: $fg-boxflex;
809
  -webkit-flex: $fg $fs $fb;
810
  -moz-box-flex: $fg-boxflex;
811
  -moz-flex: $fg $fs $fb;
812
  -ms-flex: $fg $fs $fb;
813
  flex: $fg $fs $fb;
814
}
815
​
816
//----------------------------------------------------------------------
817
​
818
// Flexbox Justify Content
819
//
820
// The 'justify-content' property aligns flex items along the main axis
821
// of the current line of the flex container. This is done after any flexible
822
// lengths and any auto margins have been resolved. Typically it helps distribute
823
// extra free space leftover when either all the flex items on a line are
824
// inflexible, or are flexible but have reached their maximum size. It also
825
// exerts some control over the alignment of items when they overflow the line.
826
//
827
// Note: 'space-*' values not supported in older syntaxes.
828
//
829
// Values: flex-start | flex-end | center | space-between | space-around
830
// Default: flex-start
831
//
832
// http://w3.org/tr/css3-flexbox/#justify-content-property
833
​
834
@mixin justify-content($value: flex-start) {
835
  @if $value == flex-start {
836
    -webkit-box-pack: start;
837
    -ms-flex-pack: start;
838
  } @else if $value == flex-end {
839
    -webkit-box-pack: end;
840
    -ms-flex-pack: end;
841
  } @else if $value == space-between {
842
    -webkit-box-pack: justify;
843
    -ms-flex-pack: justify;
844
  } @else if $value == space-around {
845
    -ms-flex-pack: distribute;
846
  } @else {
847
    -webkit-box-pack: $value;
848
    -ms-flex-pack: $value;
849
  }
850
  -webkit-justify-content: $value;
851
  -moz-justify-content: $value;
852
  justify-content: $value;
853
}
854
  // Shorter version:
855
  @mixin flex-just($value: flex-start) { @include justify-content($value); }
856
​
857
//----------------------------------------------------------------------
858
​
859
// Flexbox Align Items
860
//
861
// Flex items can be aligned in the cross axis of the current line of the
862
// flex container, similar to 'justify-content' but in the perpendicular
863
// direction. 'align-items' sets the default alignment for all of the flex
864
// container's items, including anonymous flex items. 'align-self' allows
865
// this default alignment to be overridden for individual flex items. (For
866
// anonymous flex items, 'align-self' always matches the value of 'align-items'
867
// on their associated flex container.)
868
//
869
// Values: flex-start | flex-end | center | baseline | stretch
870
// Default: stretch
871
//
872
// http://w3.org/tr/css3-flexbox/#align-items-property
873
​
874
@mixin align-items($value: stretch) {
875
  @if $value == flex-start {
876
    -webkit-box-align: start;
877
    -ms-flex-align: start;
878
  } @else if $value == flex-end {
879
    -webkit-box-align: end;
880
    -ms-flex-align: end;
881
  } @else {
882
    -webkit-box-align: $value;
883
    -ms-flex-align: $value;
884
  }
885
  -webkit-align-items: $value;
886
  -moz-align-items: $value;
887
  align-items: $value;
888
}
889
​
890
//----------------------------------
891
​
892
// Flexbox Align Self
893
//
894
// Values: auto | flex-start | flex-end | center | baseline | stretch
895
// Default: auto
896
​
897
@mixin align-self($value: auto) {
898
  // No Webkit Box Fallback.
899
  -webkit-align-self: $value;
900
  -moz-align-self: $value;
901
  @if $value == flex-start {
902
    -ms-flex-item-align: start;
903
  } @else if $value == flex-end {
904
    -ms-flex-item-align: end;
905
  } @else {
906
    -ms-flex-item-align: $value;
907
  }
908
  align-self: $value;
909
}
910
​
911
//----------------------------------------------------------------------
912
​
913
// Flexbox Align Content
914
//
915
// The 'align-content' property aligns a flex container's lines within the
916
// flex container when there is extra space in the cross-axis, similar to
917
// how 'justify-content' aligns individual items within the main-axis. Note,
918
// this property has no effect when the flexbox has only a single line.
919
//
920
// Values: flex-start | flex-end | center | space-between | space-around | stretch
921
// Default: stretch
922
//
923
// http://w3.org/tr/css3-flexbox/#align-content-property
924
​
925
@mixin align-content($value: stretch) {
926
  // No Webkit Box Fallback.
927
  -webkit-align-content: $value;
928
  -moz-align-content: $value;
929
  @if $value == flex-start {
930
    -ms-flex-line-pack: start;
931
  } @else if $value == flex-end {
932
    -ms-flex-line-pack: end;
933
  } @else {
934
    -ms-flex-line-pack: $value;
935
  }
936
  align-content: $value;
937
}
938
​
939
​
940
// --------------------------------------------------
941
// UTILITIES / EXTRAS
942
// --------------------------------------------------
943
​
944
// Backface visibility
945
// Prevent browsers from flickering when using CSS 3D transforms.
946
// Default value is `visible`, but can be changed to `hidden
947
// --------------------------------------------------------------
948
@mixin backface-visibility($visibility){
949
  -webkit-backface-visibility: $visibility;
950
     -moz-backface-visibility: $visibility;
951
       -o-backface-visibility: $visibility;
952
          backface-visibility: $visibility;
953
}
954
​
955
// Drop shadows
956
// ------------
957
@mixin box-shadow($shadow...) {
958
  -webkit-box-shadow: $shadow;
959
     -moz-box-shadow: $shadow;
960
          box-shadow: $shadow;
961
}
962
​
963
// Box sizing
964
// ----------
965
@mixin box-sizing($boxmodel) {
966
 -webkit-box-sizing: $boxmodel;
967
    -moz-box-sizing: $boxmodel;
968
         box-sizing: $boxmodel;
969
}
970
​
971
// Perspective
972
// -----------
973
@mixin perspective($perspective) {
974
 -webkit-perspective: $perspective;
975
    -moz-perspective: $perspective;
976
         perspective: $perspective;
977
}
978
​
979
// Perspective origin
980
// ------------------
981
@mixin perspective-origin($perspective-origin...) {
982
 -webkit-perspective-origin: $perspective-origin;
983
    -moz-perspective-origin: $perspective-origin;
984
         perspective-origin: $perspective-origin;
985
}
986
​
987
// User select
988
// For selecting text on the page
989
// ------------------------------
990
@mixin user-select($select) {
991
 -webkit-user-select: $select;
992
    -moz-user-select: $select;
993
     -ms-user-select: $select;
994
      -o-user-select: $select;
995
         user-select: $select;
996
}
997
​
998
// Resize anything
999
// ---------------
1000
@mixin resizable($direction) {
1001
  resize: $direction; // Options: horizontal, vertical, both
1002
  overflow: auto; // Safari fix
1003
}
1004
​
1005
// Hyphenation
1006
// --------------------
1007
@mixin hyphens($mode: auto) {
1008
 word-wrap: break-word;
1009
 -webkit-hyphens: $mode;
1010
    -moz-hyphens: $mode;
1011
     -ms-hyphens: $mode;
1012
      -o-hyphens: $mode;
1013
         hyphens: $mode;
1014
}
1015
​
1016
// Opacity
1017
// -------
1018
@mixin opacity($opacity) {
1019
  opacity: $opacity / 100;
1020
  filter: alpha(opacity=$opacity);
1021
}
1022
​
1023
// Center-align a block level element
1024
// ----------------------------------
1025
@mixin center-block() {
1026
  display: block;
1027
  margin-left: auto;
1028
  margin-right: auto;
1029
}
1030
​
1031
// Sizing
1032
// ------
1033
@mixin size($width, $height: $width) {
1034
 width: $width;
1035
 height: $height;
1036
}
1037
@mixin square($size) {
1038
 @include size($size, $size);
1039
}
1040
​
1041
// Reset filters for IE
1042
// --------------------
1043
@mixin reset-filter() {
1044
  filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
1045
}
1046
​
1047
// Hide text
1048
// ---------
1049
@mixin hide-text {
1050
 font: 0/0 a;
1051
 color: transparent;
1052
 text-shadow: none;
1053
 background-color: transparent;
1054
 border: 0;
1055
}
1056
​
1057
// Add an emboss effect to a box
1058
// -----------------------------
1059
@mixin box-emboss($opacity, $opacity2){
1060
  @include box-shadow(rgba($white,$opacity) 0 1px 0, inset rgba($black,$opacity2) 0 1px 0);
1061
}
1062
​
1063
// Add a letterpress effect
1064
// ------------------------
1065
@mixin letterpress($opacity){
1066
  text-shadow: rgba($white,$opacity) 0 1px 0;
1067
}
1068
// Center an element
1069
// -----------------
1070
@mixin centerer {
1071
  position: absolute;
1072
  top: 50%;
1073
  left: 50%;
1074
  transform: translate(-50%, -50%);
1075
}
1076
​
1077
// Cover everything
1078
// ----------------
1079
@mixin coverer {
1080
  position: absolute;
1081
  top: 0;
1082
  left: 0;
1083
  width: 100%;
1084
  height: 100%;
1085
}
1086
​
1087
// Add hover state
1088
// ---------------
1089
@mixin hoverer($attr, $normal, $hovered) {
1090
  #{$attr}: #{$normal};
1091
  &:hover {
1092
    #{$attr}: #{$hovered};
1093
  }
1094
}
1095
​
1096
// Add responsive styling for multiple widths
1097
// ------------------------------------------
1098
@mixin responsive($attr, $full, $medium:false, $small:false) {
1099
  #{$attr}: #{$full};
1100
  @include bp(medium) {
1101
    #{$attr}: #{$medium};
1102
  }
1103
  @include bp(small) {
1104
    #{$attr}: #{$small};
1105
  }
1106
}
1107
​
1108
// Position Mixin
1109
// Original: http://hugogiraudel.com/2013/08/05/offsets-sass-mixin/
1110
// Modified: http://codepen.io/piouPiouM/pen/bLmkz
1111
// ------------------------------------------------------
1112
$top-default:    null !default;
1113
$right-default:  null !default;
1114
$bottom-default: null !default;
1115
$left-default:   null !default;
1116
​
1117
@mixin position($type, $top: $top-default, $right: $right-default, $bottom: $bottom-default, $left: $left-default) {
1118
  position: $type;
1119
​
1120
  $allowed_types: 'absolute' 'relative' 'fixed';
1121
  @if not index($allowed_types, $type) {
1122
    @warn "Unknow position: #{$type}.";
1123
  }
1124
  @each $data in top $top, right $right, bottom $bottom, left $left {
1125
    #{nth($data, 1)}: nth($data, 2);
1126
  }
1127
}
1128
@mixin absolute($top: $top-default, $right: $right-default, $bottom: $bottom-default, $left: $left-default) {
1129
  @include position(absolute, $top, $right, $bottom, $left);
1130
}
1131
@mixin relative($top: $top-default, $right: $right-default, $bottom: $bottom-default, $left: $left-default) {
1132
  @include position(relative, $top, $right, $bottom, $left);
1133
}
1134
@mixin fixed($top: $top-default, $right: $right-default, $bottom: $bottom-default, $left: $left-default) {
1135
  @include position(fixed, $top, $right, $bottom, $left);
1136
}
1137
​
1138
// Clearfix
1139
// --------
1140
// For clearing floats like a boss h5bp.com/q
1141
@mixin clearfix {
1142
 *zoom: 1;
1143
 &:before,
1144
 &:after {
1145
   display: table;
1146
   content: "";
1147
   line-height: 0;
1148
 }
1149
 &:after {
1150
   clear: both;
1151
 }
1152
}
1153
​
1154
​
1155
​
1156
$teal:       #56D7C6 !default;
1157
$purple:     #B96CFF !default;
1158
$dark-blue:  #222232 !default;
1159
​
1160
html {
1161
  background: $dark-blue;
1162
  text-align: center;
1163
  color: $teal;
1164
  *,
1165
  *:before,
1166
  *:after {
1167
    @include box-sizing(border-box);
1168
  }
1169
}
1170
​
1171
/* Universal styling */
1172
[class^="shaft-load"] {
1173
  margin: 50px auto;
1174
  @include size(60px, 30px);
1175
  > div {
1176
    float: left;
1177
    background: $purple;
1178
    height: 100%;
1179
    width: 5px;
1180
    margin-right: 1px;
1181
    display: inline-block;
1182
  }
1183
  .shaft1 { @include animation-delay(0.05s); }
1184
  .shaft2 { @include animation-delay(0.1s); }
1185
  .shaft3 { @include animation-delay(0.15s); }
1186
  .shaft4 { @include animation-delay(0.2s); }
1187
  .shaft5 { @include animation-delay(0.25s); }
1188
  .shaft6 { @include animation-delay(0.3s); }
1189
  .shaft7 { @include animation-delay(0.35s); }
1190
  .shaft8 { @include animation-delay(0.4s); }
1191
  .shaft9 { @include animation-delay(0.45s); }
1192
  .shaft10 { @include animation-delay(0.5s); }
1193
}
1194
​
1195
​
1196
/* Shaft 1 */
1197
.shaft-load {
1198
  > div {
1199
    @include animation(loading 1.5s infinite ease-in-out);
1200
    @include transform(scaleY(0.05) translateX(-10px));
1201
  }
1202
}
1203
​
1204
@include keyframes(loading) {
1205
  50% {
1206
    @include transform(scaleY(1.2) translateX(10px));
1207
    background: $teal;
1208
  }
1209
}
1210
​
1211
​
1212
/* Shaft 2 */
1213
.shaft-load2 {
1214
  > div {
1215
    @include animation(loading2 1.5s infinite ease-in-out);
1216
    @include transform(scaleY(0.05) translateX(-5px));
1217
  }
1218
}
1219
​
1220
@include keyframes(loading2) {
1221
  10% {
1222
    background: $teal;
1223
  }
1224
  15% {
1225
    @include transform(scaleY(1.2) translateX(10px));
1226
    background: $teal;
1227
  }
1228
  90%, 100% {
1229
    @include transform(scaleY(0.05) translateX(-5px));
1230
  }
1231
}
1232
​
1233
​
1234
/* Shaft 3 */
1235
.shaft-load3 {
1236
  position: relative;
1237
  @include square(100px);
1238
  > div {
1239
    background: transparent;
1240
    border: 4px solid transparent;
1241
    border-color: transparent transparent transparent $purple;
1242
    @include border-radius(100%);
1243
    @include centerer;
1244
    @include transform( translate(-50%, -50%) rotate(0));
1245
    @include animation(loading3 2s infinite ease-in-out);
1246
  }
1247
  .shaft1 { @include animation-delay(0.1s); @include square(20px); }
1248
  .shaft2 { @include animation-delay(0.2s); @include square(25px); }
1249
  .shaft3 { @include animation-delay(0.3s); @include square(30px); }
1250
  .shaft4 { @include animation-delay(0.4s); @include square(35px); }
1251
  .shaft5 { @include animation-delay(0.5s); @include square(40px); }
1252
  .shaft6 { @include animation-delay(0.6s); @include square(45px); }
1253
  .shaft7 { @include animation-delay(0.7s); @include square(50px); }
1254
  .shaft8 { @include animation-delay(0.8s); @include square(55px); }
1255
  .shaft9 { @include animation-delay(0.9s); @include square(60px); }
1256
  .shaft10 { @include animation-delay(1.0s); @include square(65px); }
1257
}
1258
​
1259
@include keyframes(loading3) {
1260
  50% {
1261
    @include transform( translate(-50%, -50%) rotate(360deg));
1262
    border-color: transparent transparent rgba($teal, 0.10) $teal;
1263
  }
1264
  75% {
1265
    border-color: rgba($teal, 0.10) transparent transparent $teal;
1266
  }
1267
}
1268
​
1269
​
1270
/* Shaft 4 */
1271
.shaft-load4 {
1272
  margin-top: 80px;
1273
  width: 80px;
1274
  > div {
1275
    margin-right: 0;
1276
    @include animation(loading4 1.5s infinite ease-in-out);
1277
    width: 8px;
1278
    @include opacity(0);
1279
    @include transform(scaleY(0.1));
1280
  }
1281
}
1282
​
1283
@include keyframes(loading4) {
1284
  50% {
1285
    @include transform(scaleY(1.5));
1286
    background: $teal;
1287
    @include opacity(100);
1288
  }
1289
}
1290
​
1291
​
1292
/* Shaft 5 */
1293
$height-start5: 5px;
1294
$height-end5: 40px;
1295
.shaft-load5 {
1296
  height: $height-end5;
1297
  > div {
1298
    @include relative(null, null, 0);
1299
    margin-top: $height-end5 - $height-start5;
1300
    height: $height-start5;
1301
    @include animation(loading5 1.5s infinite ease-in-out);
1302
  }
1303
  .shaft1 { @include animation-delay(-1.5s); }
1304
  .shaft2 { @include animation-delay(-1.4s); }
1305
  .shaft3 { @include animation-delay(-1.3s); }
1306
  .shaft4 { @include animation-delay(-1.2s); }
1307
  .shaft5 { @include animation-delay(-1.1s); }
1308
  .shaft6 { @include animation-delay(-1.0s); }
1309
  .shaft7 { @include animation-delay(-0.9s); }
1310
  .shaft8 { @include animation-delay(-0.8s); }
1311
  .shaft9 { @include animation-delay(-0.7s); }
1312
  .shaft10 { @include animation-delay(-0.6s); }
1313
  .shaft11 { @include animation-delay(-0.5s); }
1314
}
1315
​
1316
@include keyframes(loading5) {
1317
  50% {
1318
    height: 100%;
1319
    margin-top: 0;
1320
    background: $teal;
1321
  }
1322
}
1323
​
1324
​
1325
/* Shaft 6 */
1326
$height-start6: 3px;
1327
$height-end6: 40px;
1328
.shaft-load6 {
1329
  height: $height-end6;
1330
  width: 90px;
1331
  overflow: hidden;
1332
  > div {
1333
    width: 8px;
1334
    @include relative(null, null, -2px);
1335
    margin-top: $height-end6 - $height-start6;
1336
    height: $height-start6;
1337
    @include skewY(0deg);
1338
    @include animation(loading6 1.5s infinite ease-in-out);
1339
  }
1340
}
1341
​
1342
@include keyframes(loading6) {
1343
  25% {
1344
    @include skewY(25deg);
1345
  }
1346
  75% {
1347
    @include skewY(-25deg);
1348
  }
1349
  50% {
1350
    height: 100%;
1351
    margin-top: 0;
1352
    background: $teal;
1353
  }
1354
}
1355
​
1356
​
1357
/* Shaft 7 */
1358
.shaft-load7 {
1359
  > div {
1360
    height: 2px;
1361
    @include animation(loading7 1s infinite ease-in-out);
1362
    @include translateY(-10px);
1363
  }
1364
}
1365
​
1366
@include keyframes(loading7) {
1367
  50% {
1368
    background: $teal;
1369
    @include translateY(10px);
1370
  }
1371
}
1372
​
1373
​
1374
/* Shaft 8 */
1375
.shaft-load8 {
1376
  width: 92px;
1377
  > div {
1378
    height: 5px;
1379
    margin-right: 0;
1380
    @include animation(loading8 1s infinite ease-in-out);
1381
  }
1382
}
1383
​
1384
@include keyframes(loading8) {
1385
  80% {
1386
    background: $teal;
1387
    margin-right: 5px;
1388
    @include translateX(-10px);
1389
  }
1390
}
1391
​
1392
​
1393
/* Shaft 9 */
1394
.shaft-load9 {
1395
  position: relative;
1396
  @include square(100px);
1397
  > div {
1398
    background: transparent;
1399
    @include opacity(0);
1400
    border: 1px solid $purple;
1401
    @include border-radius(100%);
1402
    @include centerer;
1403
    @include translate(-50%, -50%);
1404
    @include animation(loading9 1.2s infinite ease-in-out);
1405
  }
1406
  .shaft1 {
1407
    background: $teal;
1408
    @include animation-delay(0.1s);
1409
    @include square(3px);
1410
  }
1411
  .shaft2 { @include animation-delay(0.2s); @include square(10px); }
1412
  .shaft3 { @include animation-delay(0.3s); @include square(20px); }
1413
  .shaft4 { @include animation-delay(0.4s); @include square(30px); }
1414
  .shaft5 { @include animation-delay(0.5s); @include square(40px); }
1415
  .shaft6 { @include animation-delay(0.6s); @include square(50px); }
1416
  .shaft7 { @include animation-delay(0.7s); @include square(60px); }
1417
  .shaft8 { @include animation-delay(0.8s); @include square(70px); }
1418
  .shaft9 { @include animation-delay(0.9s); @include square(80px); }
1419
  .shaft10 { @include animation-delay(1.0s); @include square(90px); }
1420
}
1421
​
1422
@include keyframes(loading9) {
1423
  25% {
1424
    border-color: $teal;
1425
    @include opacity(100);
1426
  }
1427
  50% {
1428
    @include opacity(0);
1429
  }
1430
}
1431
​
1432
​
1433
/* Shaft 10 */
1434
.shaft-load10 {
1435
  > div {
1436
    @include animation(loading10 1.5s infinite ease-in-out);
1437
    @include transform(scaleY(0.05));
1438
  }
1439
  .shaft1 { height: 100%; }
1440
  .shaft2 { height: 110%; }
1441
  .shaft3 { height: 120%; }
1442
  .shaft4 { height: 130%; }
1443
  .shaft5 { height: 140%; }
1444
  .shaft6 { height: 150%; }
1445
  .shaft7 { height: 160%; }
1446
  .shaft8 { height: 170%; }
1447
  .shaft9 { height: 180%; }
1448
  .shaft10 { height: 190%; }
1449
}
1450
​
1451
@include keyframes(loading10) {
1452
  50% {
1453
    @include transform(scaleY(1.2));
1454
    background: $teal;
1455
  }
1456
}
1457
​
1458
​
1459
/* Shaft 11 */
1460
.shaft-load11 {
1461
  position: relative;
1462
  @include square(100px);
1463
  > div {
1464
    background: transparent;
1465
    border: 8px solid transparent;
1466
    border-color: rgba($purple, 0.5) transparent;
1467
    @include border-radius(100%);
1468
    @include centerer;
1469
    @include transform( translate(-50%, -50%) rotate(0));
1470
    @include animation(loading11 2s infinite ease-in-out);
1471
  }
1472
  .shaft1 { @include animation-delay(0.1s); @include square(20px); }
1473
  .shaft2 { @include animation-delay(0.2s); @include square(25px); }
1474
  .shaft3 { @include animation-delay(0.3s); @include square(35px); }
1475
  .shaft4 { @include animation-delay(0.4s); @include square(45px); }
1476
  .shaft5 { @include animation-delay(0.5s); @include square(55px); }
1477
  .shaft6 { @include animation-delay(0.6s); @include square(65px); }
1478
  .shaft7 { @include animation-delay(0.7s); @include square(75px); }
1479
  .shaft8 { @include animation-delay(0.8s); @include square(80px); }
1480
  .shaft9 { @include animation-delay(0.9s); @include square(85px); }
1481
  .shaft10 { @include animation-delay(1.0s); @include square(90px); }
1482
}
1483
​
1484
@include keyframes(loading11) {
1485
  50% {
1486
    @include transform( translate(-50%, -50%) rotate(360deg));
1487
    border-color: rgba($teal, 0.5) transparent;
1488
  }
1489
}
1490
​
1491
/* Shaft 12 */
1492
.shaft-load12 {
1493
  position: relative;
1494
  @include size(20px, 100px);
1495
  > div {
1496
    background: $teal;
1497
    border: 4px solid lighten($teal, 15%);
1498
    @include absolute(0);
1499
    @include rotate(45deg);
1500
    @include square(20px);
1501
    @include border-radius(100%);
1502
    @include animation-delay(0 !important);
1503
  }
1504
  .shaft1 {
1505
    @include animation(loading12-1 3s infinite ease);
1506
  }
1507
  .shaft2 {
1508
    @include animation(loading12-2 3s infinite ease);
1509
/*     background: green; */
1510
  }
1511
  .shaft3 {
1512
    @include animation(loading12-3 3s infinite ease);
1513
/*     background: blue; */
1514
  }
1515
  .shaft4 {
1516
    @include animation(loading12-4 3s infinite ease);
1517
/*     background: teal; */
1518
  }
1519
}
1520
​
1521
@include keyframes(loading12-1) {
1522
  5% {
1523
    @include border-radius(0 100% 100% 100%);  
1524
  }
1525
  10% {
1526
    @include border-radius(0 100% 100% 100%);
1527
    @include rotate(45deg);
1528
  }
1529
  12% {
1530
    @include border-radius(100%);
1531
    height: 20px;
1532
  }
1533
  15% {
1534
    @include rotate(0);
1535
    @include box-shadow(none);
1536
  }
1537
  18% {
1538
    @include size(20px, 10px);
1539
  }
1540
  22% {
1541
    top: 100%;
1542
    @include box-shadow(0 0 5px 5px rgba(white, 0.5));
1543
  }
1544
  24% {
1545
    @include translate(-35px, -16px);
1546
    @include square(8px);
1547
  }
1548
}
1549
​
1550
@include keyframes(loading12-2) {
1551
  5% {
1552
    @include border-radius(0 100% 100% 100%);  
1553
  }
1554
  10% {
1555
    @include border-radius(0 100% 100% 100%);
1556
    @include rotate(45deg);
1557
  }
1558
  12% {
1559
    @include border-radius(100%);
1560
    height: 20px;
1561
  }
1562
  15% {
1563
    @include rotate(0);
1564
    @include box-shadow(none);
1565
  }
1566
  18% {
1567
    @include size(20px, 10px);
1568
  }
1569
  22% {
1570
    top: 100%;
1571
    @include box-shadow(0 0 5px 5px rgba(white, 0.5));
1572
  }
1573
  24% {
1574
    @include translate(48px, -25px);
1575
    @include square(14px);
1576
  }
1577
}
1578
​
1579
@include keyframes(loading12-3) {
1580
  5% {
1581
    @include border-radius(0 100% 100% 100%);  
1582
  }
1583
  10% {
1584
    @include border-radius(0 100% 100% 100%);
1585
    @include rotate(45deg);
1586
  }
1587
  12% {
1588
    @include border-radius(100%);
1589
    height: 20px;
1590
  }
1591
  15% {
1592
    @include rotate(0);
1593
    @include box-shadow(none);
1594
  }
1595
  18% {
1596
    @include size(20px, 10px);
1597
  }
1598
  22% {
1599
    top: 100%;
1600
    @include box-shadow(0 0 5px 5px rgba(white, 0.5));
1601
  }
1602
  24% {
1603
    @include translate(-60px, -8px);
1604
    @include square(5px);
1605
  }
1606
}
1607
​
1608
@include keyframes(loading12-4) {
1609
  5% {
1610
    @include border-radius(0 100% 100% 100%);  
1611
  }
1612
  10% {
1613
    @include border-radius(0 100% 100% 100%);
1614
    @include rotate(45deg);
1615
  }
1616
  12% {
1617
    @include border-radius(100%);
1618
    height: 20px;
1619
  }
1620
  15% {
1621
    @include rotate(0);
1622
    @include box-shadow(none);
1623
  }
1624
  18% {
1625
    @include size(20px, 10px);
1626
  }
1627
  22% {
1628
    top: 100%;
1629
    @include box-shadow(0 0 5px 5px rgba(white, 0.5));
1630
  }
1631
  24% {
1632
    @include translate(15px, -5px);
1633
    @include square(8px);
1634
  }
1635
}
1636
​
1637
​
!
?   ?  
?   ?  
必须是有效的URL
+ 添加另一个资源

JS

1
 
1
​
!
必须是有效的URL
+ 添加另一个资源
Close

文件管理 点击文件查看URL

图片

  1. 暂无文件

CSS

  1. 暂无文件

JavaScript

  1. 暂无文件

其他

  1. 暂无文件
拖动文件到上面的区域或者:
加载中 ..................