foundation_apps_styles 1.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (70) hide show
  1. checksums.yaml +7 -0
  2. data/.gitignore +9 -0
  3. data/Gemfile +4 -0
  4. data/LICENSE.txt +21 -0
  5. data/README.md +41 -0
  6. data/Rakefile +13 -0
  7. data/bin/console +14 -0
  8. data/bin/setup +7 -0
  9. data/foundation_apps_styles.gemspec +24 -0
  10. data/lib/foundation_apps_styles.rb +6 -0
  11. data/lib/foundation_apps_styles/version.rb +3 -0
  12. data/vendor/assets/iconic/account.svg +44 -0
  13. data/vendor/assets/iconic/action.svg +38 -0
  14. data/vendor/assets/iconic/ban.svg +17 -0
  15. data/vendor/assets/iconic/bell.svg +22 -0
  16. data/vendor/assets/iconic/bookmark.svg +14 -0
  17. data/vendor/assets/iconic/cart.svg +35 -0
  18. data/vendor/assets/iconic/chevron.svg +28 -0
  19. data/vendor/assets/iconic/circle-check.svg +25 -0
  20. data/vendor/assets/iconic/circle-x.svg +25 -0
  21. data/vendor/assets/iconic/cog.svg +17 -0
  22. data/vendor/assets/iconic/comment-square.svg +14 -0
  23. data/vendor/assets/iconic/dashboard.svg +38 -0
  24. data/vendor/assets/iconic/document.svg +28 -0
  25. data/vendor/assets/iconic/envelope.svg +44 -0
  26. data/vendor/assets/iconic/flag.svg +24 -0
  27. data/vendor/assets/iconic/home.svg +28 -0
  28. data/vendor/assets/iconic/lock.svg +55 -0
  29. data/vendor/assets/iconic/magnifying-glass.svg +26 -0
  30. data/vendor/assets/iconic/person.svg +62 -0
  31. data/vendor/assets/iconic/reload.svg +19 -0
  32. data/vendor/assets/iconic/share-boxed.svg +17 -0
  33. data/vendor/assets/iconic/star.svg +14 -0
  34. data/vendor/assets/iconic/thumb.svg +38 -0
  35. data/vendor/assets/iconic/zoom.svg +56 -0
  36. data/vendor/assets/stylesheets/_global.scss +131 -0
  37. data/vendor/assets/stylesheets/_includes.scss +33 -0
  38. data/vendor/assets/stylesheets/_settings.scss +614 -0
  39. data/vendor/assets/stylesheets/components/_accordion.scss +72 -0
  40. data/vendor/assets/stylesheets/components/_action-sheet.scss +265 -0
  41. data/vendor/assets/stylesheets/components/_block-list.scss +360 -0
  42. data/vendor/assets/stylesheets/components/_button-group.scss +197 -0
  43. data/vendor/assets/stylesheets/components/_button.scss +205 -0
  44. data/vendor/assets/stylesheets/components/_card.scss +93 -0
  45. data/vendor/assets/stylesheets/components/_extras.scss +54 -0
  46. data/vendor/assets/stylesheets/components/_forms.scss +460 -0
  47. data/vendor/assets/stylesheets/components/_grid.scss +422 -0
  48. data/vendor/assets/stylesheets/components/_iconic.scss +95 -0
  49. data/vendor/assets/stylesheets/components/_label.scss +134 -0
  50. data/vendor/assets/stylesheets/components/_list.scss +19 -0
  51. data/vendor/assets/stylesheets/components/_menu-bar.scss +382 -0
  52. data/vendor/assets/stylesheets/components/_modal.scss +129 -0
  53. data/vendor/assets/stylesheets/components/_motion.scss +525 -0
  54. data/vendor/assets/stylesheets/components/_notification.scss +207 -0
  55. data/vendor/assets/stylesheets/components/_off-canvas.scss +169 -0
  56. data/vendor/assets/stylesheets/components/_panel.scss +134 -0
  57. data/vendor/assets/stylesheets/components/_popup.scss +68 -0
  58. data/vendor/assets/stylesheets/components/_switch.scss +134 -0
  59. data/vendor/assets/stylesheets/components/_tabs.scss +100 -0
  60. data/vendor/assets/stylesheets/components/_title-bar.scss +135 -0
  61. data/vendor/assets/stylesheets/components/_typography.scss +345 -0
  62. data/vendor/assets/stylesheets/components/_utilities.scss +160 -0
  63. data/vendor/assets/stylesheets/foundation-apps.css +6146 -0
  64. data/vendor/assets/stylesheets/foundation.scss +50 -0
  65. data/vendor/assets/stylesheets/helpers/_breakpoints.scss +154 -0
  66. data/vendor/assets/stylesheets/helpers/_functions.scss +343 -0
  67. data/vendor/assets/stylesheets/helpers/_images.scss +19 -0
  68. data/vendor/assets/stylesheets/helpers/_mixins.scss +123 -0
  69. data/vendor/assets/stylesheets/vendor/_normalize.scss +424 -0
  70. metadata +140 -0
@@ -0,0 +1,129 @@
1
+ /*
2
+ MODAL
3
+ -----
4
+
5
+ The humble modal hides off-canvas until summoned with an fa-open directive. Modals appear over an overlay that darkens the rest of the page, and have a maxmimum width. You can construct a grid inside a modal, or attach panels to it.
6
+
7
+ Note that the modal overlay is hardcoded into the CSS, because whether or not you build your modal semantically, the overlay is always required and will always look the same.
8
+ */
9
+
10
+ /// @Foundation.settings
11
+ // Modal
12
+ $modal-background: #fff !default;
13
+ $modal-border: 0 !default;
14
+ $modal-radius: 0px !default;
15
+ $modal-shadow: none !default;
16
+ $modal-zindex: 1000 !default;
17
+ $modal-sizes: (
18
+ tiny: 300px,
19
+ small: 500px,
20
+ medium: 600px,
21
+ large: 800px,
22
+ ) !default;
23
+
24
+ $modal-overlay-class: 'modal-overlay' !default;
25
+ $modal-overlay-background: rgba(#333, 0.7) !default;
26
+ ///
27
+
28
+ %modal {
29
+ position: relative;
30
+ z-index: $modal-zindex + 1;
31
+ background: $modal-background;
32
+ flex: 0 0 auto;
33
+ width: 100%;
34
+ height: 100vh;
35
+ max-height: 100%;
36
+ overflow: hidden;
37
+ padding: $global-padding;
38
+
39
+ @include breakpoint(medium) {
40
+ height: auto;
41
+ max-width: map-get($modal-sizes, medium);
42
+ }
43
+
44
+ .grid-content, .grid-block {
45
+ margin: 0;
46
+ }
47
+
48
+ .close-button, [fa-close] {
49
+ z-index: $modal-zindex + 1;
50
+ }
51
+ }
52
+
53
+ @mixin modal-dialog() {
54
+ height: auto;
55
+ }
56
+ @mixin modal-layout(
57
+ $width: map-get($modal-sizes, medium),
58
+ $dialog: false
59
+ ) {
60
+ max-width: $width;
61
+ }
62
+ @mixin modal-style(
63
+ $border: $modal-border,
64
+ $radius: $modal-radius,
65
+ $shadow: $modal-shadow
66
+ ) {
67
+ @if $border != 0 {
68
+ border: $border;
69
+ }
70
+ @if $radius != 0 {
71
+ border-radius: $radius;
72
+ }
73
+ @if $shadow != none {
74
+ box-shadow: $shadow;
75
+ }
76
+ }
77
+
78
+ @mixin modal(
79
+ $width: map-get($modal-sizes, medium),
80
+ $border: $modal-border,
81
+ $radius: $modal-radius,
82
+ $shadow: $modal-shadow
83
+ ) {
84
+ @extend %modal;
85
+ @include modal-layout($width);
86
+ @include modal-style($border, $radius, $shadow);
87
+ }
88
+
89
+ @include exports(modal) {
90
+ .modal {
91
+ @include modal;
92
+
93
+ @each $size in map-keys($modal-sizes) {
94
+ $width: map-get($modal-sizes, $size);
95
+ @if $size != medium {
96
+ .#{$size} > & { @include modal-layout($width); }
97
+ }
98
+ }
99
+
100
+ .dialog > & {
101
+ @include modal-dialog;
102
+ }
103
+ .collapse > & {
104
+ padding: 0;
105
+ }
106
+ }
107
+
108
+ .#{$modal-overlay-class} {
109
+ position: fixed;
110
+ top: 0;
111
+ right: 0;
112
+ bottom: 0;
113
+ left: 0;
114
+ z-index: $modal-zindex;
115
+ display: none;
116
+ background-color: $modal-overlay-background;
117
+
118
+ // Horizontally and vertically center the modal
119
+ align-items: center;
120
+ justify-content: center;
121
+
122
+ // Prevent z-index issue in Mobile Safari
123
+ -webkit-transform: translate3d(0,0,0);
124
+
125
+ &.is-active {
126
+ display: flex;
127
+ }
128
+ }
129
+ }
@@ -0,0 +1,525 @@
1
+ // FOUNDATION MOTION UI
2
+ // Table of Contents
3
+ //
4
+ // 0. Variables
5
+ // 1. Base Transitions
6
+ // a. Slide
7
+ // b. Fade
8
+ // c. Hinge
9
+ // d. Scale
10
+ // e. Spin
11
+ // 2. Base Animations
12
+ // a. Shake
13
+ // b. Spinners
14
+ // c. Wiggle
15
+ // 3. HTML Attributes
16
+
17
+ // 0. Variables
18
+ // - - - - - - - - - - - - - - - - - - - - - - - - -
19
+
20
+ /// @Foundation.settings
21
+ // Motion UI
22
+ // Classes to use when triggering in/out animations
23
+ $motion-class: (
24
+ in: "ng-enter",
25
+ out: "ng-leave",
26
+ ) !default;
27
+ $motion-class-active: (
28
+ in: "ng-enter-active",
29
+ out: "ng-leave-active",
30
+ ) !default;
31
+ $motion-class-stagger: (
32
+ in: "ng-enter-stagger",
33
+ out: "ng-leave-stagger",
34
+ ) !default;
35
+ $motion-class-showhide: (
36
+ in: "ng-hide-remove",
37
+ out: "ng-hide-add",
38
+ );
39
+ $motion-class-showhide-active: (
40
+ in: "ng-hide-remove-active",
41
+ out: "ng-hide-add-active",
42
+ );
43
+
44
+ // Set if movement-based transitions should also fade the element in and out
45
+ $motion-slide-and-fade: false !default;
46
+ $motion-hinge-and-fade: true !default;
47
+ $motion-scale-and-fade: true !default;
48
+ $motion-spin-and-fade: true !default;
49
+
50
+ // Default speed for transitions and animations
51
+ $motion-duration-default: 500ms !default;
52
+
53
+ // Slow and fast modifiders
54
+ $motion-duration-slow: 750ms !default;
55
+ $motion-duration-fast: 250ms !default;
56
+ $motion-stagger-duration-default: 150ms !default;
57
+ $motion-stagger-duration-short: 50ms !default;
58
+ $motion-stagger-duration-long: 300ms !default;
59
+
60
+ // Default timing function for transitions and animations
61
+ $motion-timing-default: ease !default;
62
+
63
+ // Built-in and custom easing functions
64
+ // Every item in this map becomes a CSS class
65
+ $motion-timings: (
66
+ linear: linear,
67
+ ease: ease,
68
+ easeIn: ease-in,
69
+ easeOut: ease-out,
70
+ easeInOut: ease-in-out,
71
+ bounceIn: cubic-bezier(0.485, 0.155, 0.240, 1.245),
72
+ bounceOut: cubic-bezier(0.485, 0.155, 0.515, 0.845),
73
+ bounceInOut: cubic-bezier(0.760, -0.245, 0.240, 1.245),
74
+ ) !default;
75
+
76
+ // Default delay for all transitions and animations
77
+ $motion-delay-default: 0 !default;
78
+ // Short and long delay modifiers
79
+ $motion-delay-short: 300ms !default;
80
+ $motion-delay-long: 700ms !default;
81
+ ///
82
+
83
+ // Looks for a timing function in the list of presets
84
+ // If none are found, returns the value as-is.
85
+ @function get-timing($timing) {
86
+ @if map-has-key($motion-timings, $timing) {
87
+ @return map-get($motion-timings, $timing);
88
+ }
89
+ @else {
90
+ @return $timing;
91
+ }
92
+ }
93
+
94
+ // Applies transition settings common to all mixins
95
+ @mixin transition-basics(
96
+ $duration: $motion-duration-default,
97
+ $timing: $motion-timing-default,
98
+ $delay: $motion-delay-default
99
+ ) {
100
+ transition-duration: $duration;
101
+ transition-timing-function: get-timing($timing);
102
+ transition-delay: $delay;
103
+ }
104
+
105
+ // Wraps content in an enter/leave class, chained to the parent selector
106
+ // Define the initial state of a transition here
107
+ @mixin transition-start($dir) {
108
+ $sel1: map-get($motion-class, $dir);
109
+ $sel2: map-get($motion-class-showhide, $dir);
110
+
111
+ &.#{$sel1},
112
+ &.#{$sel2} {
113
+ @content;
114
+ }
115
+ }
116
+
117
+ // Wraps content in an enter/leave active class, chained to the matching
118
+ // enter/leave class, chained to the parent selector
119
+ // Define the end state of a transition here
120
+ @mixin transition-end($dir) {
121
+ $sel1: map-get($motion-class, $dir);
122
+ $sel1A: map-get($motion-class-active, $dir);
123
+
124
+ $sel2: map-get($motion-class-showhide, $dir);
125
+ $sel2A: map-get($motion-class-showhide-active, $dir);
126
+
127
+ &.#{$sel1}.#{$sel1A},
128
+ &.#{$sel2}.#{$sel2A} {
129
+ @content;
130
+ }
131
+ }
132
+
133
+ @mixin stagger($delay-amount) {
134
+ transition-delay: $delay-amount;
135
+ // this is to avoid accidental CSS inheritance
136
+ transition-duration:0;
137
+ }
138
+
139
+
140
+ // 1. Base Transitions
141
+ // - - - - - - - - - - - - - - - - - - - - - - - - -
142
+
143
+ // SLIDE
144
+ @mixin slide (
145
+ $dir: in,
146
+ $from: left,
147
+ $fade: $motion-slide-and-fade,
148
+ $duration: $motion-duration-default,
149
+ $timing: $motion-timing-default,
150
+ $delay: $motion-delay-default
151
+ ) {
152
+ $slideDirections: (
153
+ top: translateY(-100%),
154
+ right: translateX(100%),
155
+ bottom: translateY(100%),
156
+ left: translateX(-100%),
157
+ );
158
+ $start: '';
159
+ $end: '';
160
+
161
+ @if $dir == in {
162
+ $start: map-get($slideDirections, $from);
163
+ $end: translateX(0) translateY(0);
164
+ }
165
+ @else {
166
+ $start: translateX(0) translateY(0);
167
+ $end: map-get($slideDirections, $from);
168
+ }
169
+
170
+ // CSS Output
171
+ @include transition-start($dir) {
172
+ @include transition-basics($duration, $timing, $delay);
173
+ transition-property: transform, opacity;
174
+ backface-visibility: hidden;
175
+ transform: $start;
176
+
177
+ @if $fade { opacity: if($dir == in, 0, 1); }
178
+ }
179
+ @include transition-end($dir) {
180
+ transform: $end;
181
+
182
+ @if $fade { opacity: if($dir == in, 1, 0); }
183
+ }
184
+ }
185
+
186
+ // FADE
187
+ @mixin fade(
188
+ $dir: in,
189
+ $from: 0,
190
+ $to: 1,
191
+ $duration: $motion-duration-default,
192
+ $timing: $motion-timing-default,
193
+ $delay: $motion-delay-default
194
+ ) {
195
+ @include transition-start($dir) {
196
+ @include transition-basics($duration, $timing, $delay);
197
+ transition-property: opacity;
198
+ opacity: $from;
199
+ }
200
+ @include transition-end($dir) {
201
+ opacity: $to;
202
+ }
203
+ }
204
+
205
+ // HINGE
206
+ @mixin hinge (
207
+ $dir: in,
208
+ $from: left,
209
+ $axis: edge,
210
+ $perspective: 2000px,
211
+ $turn-origin: from-back,
212
+ $fade: $motion-hinge-and-fade,
213
+ $duration: $motion-duration-default,
214
+ $timing: $motion-timing-default,
215
+ $delay: $motion-delay-default
216
+ ) {
217
+
218
+ // Rotation directions when hinging from back vs. front
219
+ $rotationAmount: 90deg;
220
+ $rotationsBack: (
221
+ top: rotateX($rotationAmount * -1),
222
+ right: rotateY($rotationAmount * -1),
223
+ bottom: rotateX($rotationAmount),
224
+ left: rotateY($rotationAmount),
225
+ );
226
+ $rotationsFrom: (
227
+ top: rotateX($rotationAmount),
228
+ right: rotateY($rotationAmount),
229
+ bottom: rotateX($rotationAmount * -1),
230
+ left: rotateY($rotationAmount * -1),
231
+ );
232
+
233
+ // Rotation origin
234
+ $rotation: '';
235
+ @if $turn-origin == from-front {
236
+ $rotation: map-get($rotationsFrom, $from);
237
+ }
238
+ @else if $turn-origin == from-back {
239
+ $rotation: map-get($rotationsBack, $from);
240
+ }
241
+ @else {
242
+ @warn "`$turn-origin` must be either `from-back` or `from-front`";
243
+ }
244
+
245
+ // Start and end state
246
+ $start: '';
247
+ $end: '';
248
+ @if $dir == in {
249
+ $start: perspective($perspective) $rotation;
250
+ $end: rotate(0deg);
251
+ }
252
+ @else {
253
+ $start: rotate(0deg);
254
+ $end: perspective($perspective) $rotation;
255
+ }
256
+
257
+ // Turn axis
258
+ $origin: '';
259
+ @if $axis == edge {
260
+ $origin: $from;
261
+ }
262
+ @else {
263
+ $origin: center;
264
+ }
265
+
266
+ @include transition-start($dir) {
267
+ @include transition-basics($duration, $timing, $delay);
268
+ transition-property: transform, opacity;
269
+ transform: $start;
270
+ transform-origin: $origin;
271
+ @if $fade { opacity: if($dir == in, 0, 1); }
272
+ }
273
+ @include transition-end($dir) {
274
+ transform: $end;
275
+ @if $fade { opacity: if($dir == in, 1, 0); }
276
+ }
277
+ }
278
+
279
+ // SCALE
280
+ @mixin scale(
281
+ $dir: in,
282
+ $from: 1.5,
283
+ $to: 1,
284
+ $fade: $motion-scale-and-fade,
285
+ $duration: $motion-duration-default,
286
+ $timing: $motion-timing-default,
287
+ $delay: $motion-delay-default
288
+ ) {
289
+ @include transition-start($dir) {
290
+ @include transition-basics($duration, $timing, $delay);
291
+ transition-property: transform, property;
292
+ transform: scale($from);
293
+ @if $fade { opacity: if($dir == in, 0, 1) }
294
+ }
295
+ @include transition-end($dir) {
296
+ transform: scale($to);
297
+ @if $fade { opacity: if($dir == in, 1, 0) }
298
+ }
299
+ }
300
+
301
+ // SPIN
302
+ @mixin spin(
303
+ $dir: in,
304
+ $amount: 0.75turn,
305
+ $ccw: false,
306
+ $fade: $motion-spin-and-fade,
307
+ $duration: $motion-duration-default,
308
+ $timing: $motion-timing-default,
309
+ $delay: $motion-delay-default
310
+ ) {
311
+ $amount: turn-to-deg($amount);
312
+ $start: 0;
313
+ $end: 0;
314
+
315
+ @if $dir == in {
316
+ $start: if($ccw, $amount, $amount * -1);
317
+ $end: 0;
318
+ }
319
+ @else {
320
+ $start: 0;
321
+ $end: if($ccw, $amount * -1, $amount);
322
+ }
323
+
324
+ @include transition-start($dir) {
325
+ @include transition-basics($duration, $timing, $delay);
326
+ transition-property: transform, opacity;
327
+ transform: rotate($start);
328
+ @if $fade { opacity: if($dir == in, 0, 1); }
329
+ }
330
+ @include transition-end($dir) {
331
+ transform: rotate($end);
332
+ @if $fade { opacity: if($dir == in, 1, 0); }
333
+ }
334
+ }
335
+
336
+
337
+ // 2. Base Animations
338
+ // - - - - - - - - - - - - - - - - - - - - - - - - -
339
+
340
+ // SHAKE
341
+ @keyframes shake {
342
+ 0%, 10%, 20%, 30%, 40%, 50%, 60%, 70%, 80%, 90% {
343
+ transform: translateX(7%);
344
+ }
345
+ 5%, 15%, 25%, 35%, 45%, 55%, 65%, 75%, 85%, 95% {
346
+ transform: translateX(-7%);
347
+ }
348
+ 100% { transform: translateX(0); }
349
+ }
350
+
351
+ // SPINNERS
352
+ @keyframes spin-cw {
353
+ 0% { transform: rotate(0deg); }
354
+ 100% { transform: rotate(360deg); }
355
+ }
356
+
357
+ @keyframes spin-ccw {
358
+ 0% { transform: rotate(0deg); }
359
+ 100% { transform: rotate(-360deg); }
360
+ }
361
+
362
+ // WIGGLE
363
+ @keyframes wiggle {
364
+ 40%, 50%, 60% {
365
+ transform: rotate(7deg);
366
+ }
367
+ 35%, 45%, 55%, 65% {
368
+ transform: rotate(-7deg);
369
+ }
370
+ 0%, 30%, 70%, 100% { transform: rotate(0); }
371
+ }
372
+
373
+ @mixin animation(
374
+ $animation,
375
+ $duration: $motion-duration-default,
376
+ $timing: $motion-timing-default,
377
+ $delay: $motion-delay-default,
378
+ $iterations: null
379
+ ) {
380
+
381
+ animation-name: $animation;
382
+ animation-duration: $duration;
383
+ animation-timing-function: $timing;
384
+
385
+ backface-visibility: hidden;
386
+ transform: translate3d(0,0,0);
387
+
388
+ @if $delay != null {
389
+ animation-delay: $delay;
390
+ }
391
+ @if $iterations != null {
392
+ animation-iteration-count: $iterations;
393
+ }
394
+
395
+ @if $animation == null {
396
+ @warn "Please include an animation name";
397
+ }
398
+ }
399
+
400
+ // 3. HTML Exports
401
+ // - - - - - - - - - - - - - - - - - - - - - - - - -
402
+
403
+ @include exports(motion) {
404
+ /*
405
+ Transitions
406
+ */
407
+
408
+ // Slide
409
+ .slideInUp { @include slide($from: bottom); }
410
+ .slideInRight { @include slide($from: left); }
411
+ .slideInDown { @include slide($from: top); }
412
+ .slideInLeft { @include slide($from: right); }
413
+ .slideOutUp { @include slide($dir: out, $from: top); }
414
+ .slideOutRight { @include slide($dir: out, $from: right); }
415
+ .slideOutDown { @include slide($dir: out, $from: bottom); }
416
+ .slideOutLeft { @include slide($dir: out, $from: left); }
417
+
418
+ // Fade
419
+ .fadeIn { @include fade(in, 0, 1); }
420
+ .fadeOut { @include fade(out, 1, 0); }
421
+
422
+ // Hinge
423
+ .hingeInFromTop { @include hinge($dir: in, $from: top); }
424
+ .hingeInFromRight { @include hinge($dir: in, $from: right); }
425
+ .hingeInFromBottom { @include hinge($dir: in, $from: bottom); }
426
+ .hingeInFromLeft { @include hinge($dir: in, $from: left); }
427
+ .hingeInFromMiddleX { @include hinge($dir: in, $from: top, $axis: center); }
428
+ .hingeInFromMiddleY { @include hinge($dir: in, $from: right, $axis: center); }
429
+ .hingeOutFromTop { @include hinge($dir: out, $from: top); }
430
+ .hingeOutFromRight { @include hinge($dir: out, $from: right); }
431
+ .hingeOutFromBottom { @include hinge($dir: out, $from: bottom); }
432
+ .hingeOutFromLeft { @include hinge($dir: out, $from: left); }
433
+ .hingeOutFromMiddleX { @include hinge($dir: out, $from: top, $axis: center); }
434
+ .hingeOutFromMiddleY { @include hinge($dir: out, $from: right, $axis: center); }
435
+
436
+ // Scale
437
+ .zoomIn { @include scale(in, 1.5, 1); }
438
+ .zoomOut { @include scale(out, 0.5, 1); }
439
+
440
+ // Spin
441
+ .spinIn { @include spin(in, 0.75turn); }
442
+ .spinOut { @include spin(out, 0.75turn); }
443
+ .spinInCCW { @include spin(in, 0.75turn, true); }
444
+ .spinOutCCW { @include spin(out, 0.75turn, true); }
445
+
446
+ /*
447
+ Transition modifiers
448
+ */
449
+
450
+ // Duration
451
+ .slow { transition-duration: $motion-duration-slow !important; }
452
+ .fast { transition-duration: $motion-duration-fast !important; }
453
+
454
+ // Easing
455
+ @each $easing in map-keys($motion-timings) {
456
+ .#{$easing} {
457
+ transition-timing-function: map-get($motion-timings, $easing) !important;
458
+ }
459
+ }
460
+
461
+ // Delay
462
+ .delay { transition-delay: $motion-delay-short !important; }
463
+ .long-delay { transition-delay: $motion-delay-long !important; }
464
+
465
+ /*
466
+ Animations
467
+ */
468
+
469
+ .shake { @include animation(shake); }
470
+ .spin-cw { @include animation(spin-cw); }
471
+ .spin-ccw { @include animation(spin-ccw); }
472
+ .wiggle { @include animation(wiggle); }
473
+
474
+ /*
475
+ Animation modifiers
476
+ */
477
+
478
+ .shake,
479
+ .spin-cw,
480
+ .spin-ccw,
481
+ .wiggle {
482
+ // Repeat
483
+ &.infinite { animation-iteration-count: infinite; }
484
+
485
+ // Easing
486
+ @each $timing in map-keys($motion-timings) {
487
+ &.#{$timing} {
488
+ animation-timing-function: map-get($motion-timings, $timing) !important;
489
+ }
490
+ }
491
+
492
+ // Duration
493
+ &.slow { animation-duration: $motion-duration-slow !important; }
494
+ &.fast { animation-duration: $motion-duration-fast !important; }
495
+
496
+ // Delay
497
+ &.delay { animation-delay: $motion-delay-short !important; }
498
+ &.long-delay { animation-delay: $motion-delay-long !important; }
499
+ }
500
+ .stagger { @include stagger($motion-stagger-duration-default); }
501
+ .stort-stagger { @include stagger($motion-stagger-duration-default); }
502
+ .long-stagger { @include stagger($motion-stagger-duration-default); }
503
+ }
504
+
505
+ // View animation classes
506
+ // - - - - - - - - - - - - - - - - - - - -
507
+
508
+ // Applied to the immediate parent of the animating views
509
+ .position-absolute {
510
+ overflow: hidden;
511
+ position: relative;
512
+ }
513
+
514
+ // Applied to the animating views
515
+ [ui-view] {
516
+ &.ng-enter-active, &.ng-leave-active {
517
+ position: absolute !important;
518
+ backface-visibility: hidden;
519
+ -webkit-transform-style: preserve-3d;
520
+ top: 0;
521
+ right: 0;
522
+ bottom: 0;
523
+ left: 0;
524
+ }
525
+ }