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.
- checksums.yaml +7 -0
- data/.gitignore +9 -0
- data/Gemfile +4 -0
- data/LICENSE.txt +21 -0
- data/README.md +41 -0
- data/Rakefile +13 -0
- data/bin/console +14 -0
- data/bin/setup +7 -0
- data/foundation_apps_styles.gemspec +24 -0
- data/lib/foundation_apps_styles.rb +6 -0
- data/lib/foundation_apps_styles/version.rb +3 -0
- data/vendor/assets/iconic/account.svg +44 -0
- data/vendor/assets/iconic/action.svg +38 -0
- data/vendor/assets/iconic/ban.svg +17 -0
- data/vendor/assets/iconic/bell.svg +22 -0
- data/vendor/assets/iconic/bookmark.svg +14 -0
- data/vendor/assets/iconic/cart.svg +35 -0
- data/vendor/assets/iconic/chevron.svg +28 -0
- data/vendor/assets/iconic/circle-check.svg +25 -0
- data/vendor/assets/iconic/circle-x.svg +25 -0
- data/vendor/assets/iconic/cog.svg +17 -0
- data/vendor/assets/iconic/comment-square.svg +14 -0
- data/vendor/assets/iconic/dashboard.svg +38 -0
- data/vendor/assets/iconic/document.svg +28 -0
- data/vendor/assets/iconic/envelope.svg +44 -0
- data/vendor/assets/iconic/flag.svg +24 -0
- data/vendor/assets/iconic/home.svg +28 -0
- data/vendor/assets/iconic/lock.svg +55 -0
- data/vendor/assets/iconic/magnifying-glass.svg +26 -0
- data/vendor/assets/iconic/person.svg +62 -0
- data/vendor/assets/iconic/reload.svg +19 -0
- data/vendor/assets/iconic/share-boxed.svg +17 -0
- data/vendor/assets/iconic/star.svg +14 -0
- data/vendor/assets/iconic/thumb.svg +38 -0
- data/vendor/assets/iconic/zoom.svg +56 -0
- data/vendor/assets/stylesheets/_global.scss +131 -0
- data/vendor/assets/stylesheets/_includes.scss +33 -0
- data/vendor/assets/stylesheets/_settings.scss +614 -0
- data/vendor/assets/stylesheets/components/_accordion.scss +72 -0
- data/vendor/assets/stylesheets/components/_action-sheet.scss +265 -0
- data/vendor/assets/stylesheets/components/_block-list.scss +360 -0
- data/vendor/assets/stylesheets/components/_button-group.scss +197 -0
- data/vendor/assets/stylesheets/components/_button.scss +205 -0
- data/vendor/assets/stylesheets/components/_card.scss +93 -0
- data/vendor/assets/stylesheets/components/_extras.scss +54 -0
- data/vendor/assets/stylesheets/components/_forms.scss +460 -0
- data/vendor/assets/stylesheets/components/_grid.scss +422 -0
- data/vendor/assets/stylesheets/components/_iconic.scss +95 -0
- data/vendor/assets/stylesheets/components/_label.scss +134 -0
- data/vendor/assets/stylesheets/components/_list.scss +19 -0
- data/vendor/assets/stylesheets/components/_menu-bar.scss +382 -0
- data/vendor/assets/stylesheets/components/_modal.scss +129 -0
- data/vendor/assets/stylesheets/components/_motion.scss +525 -0
- data/vendor/assets/stylesheets/components/_notification.scss +207 -0
- data/vendor/assets/stylesheets/components/_off-canvas.scss +169 -0
- data/vendor/assets/stylesheets/components/_panel.scss +134 -0
- data/vendor/assets/stylesheets/components/_popup.scss +68 -0
- data/vendor/assets/stylesheets/components/_switch.scss +134 -0
- data/vendor/assets/stylesheets/components/_tabs.scss +100 -0
- data/vendor/assets/stylesheets/components/_title-bar.scss +135 -0
- data/vendor/assets/stylesheets/components/_typography.scss +345 -0
- data/vendor/assets/stylesheets/components/_utilities.scss +160 -0
- data/vendor/assets/stylesheets/foundation-apps.css +6146 -0
- data/vendor/assets/stylesheets/foundation.scss +50 -0
- data/vendor/assets/stylesheets/helpers/_breakpoints.scss +154 -0
- data/vendor/assets/stylesheets/helpers/_functions.scss +343 -0
- data/vendor/assets/stylesheets/helpers/_images.scss +19 -0
- data/vendor/assets/stylesheets/helpers/_mixins.scss +123 -0
- data/vendor/assets/stylesheets/vendor/_normalize.scss +424 -0
- 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
|
+
}
|