sass-zero 1.2.3 → 1.3.0

Sign up to get free protection for your applications and to get access to all the features.
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 84173599a7ae3ffc66d95c5bab33233de6b442e02a00b9f26e892b14299cecc1
4
- data.tar.gz: fe998cb32f53eefcdf8f40269edf81a498df0b9d2ff432ff292b3729a09749b7
3
+ metadata.gz: b7ebc6d459fe63526c843f3d2d0fd1b9623ae8a483f8d34d4c5f48ffba0a07ee
4
+ data.tar.gz: 94aeedd8ddbfaae27157f6b22810d54e70f811c64f42934a4d35139b4989587b
5
5
  SHA512:
6
- metadata.gz: 74bbff3409ab08ef848afb0ddb1102c466ed311adaa85bf51fa64b13992ad7eb336edee625739d195398366687ddace5e2e7e57a1a8d4b111b2c82ea8683b618
7
- data.tar.gz: 4621f01917e6d3abdf8c256b03159af28fe303f2b2c6cfdc74458e1593333e300cbf8f66f84a9d62d1d71b3511e74041cee910f6c549e9dc9c3f86e4f17c60e3
6
+ metadata.gz: '009d8b25d79f018878e725bdcf66006c48967b57074ccdd0081fb715dbca30a27224c8b2ef5ce51f06ade5ed02da864460818a6c363c2bce09faa54a67014e29'
7
+ data.tar.gz: aa6d4b392b5f08cdd47d92452f8a09ad13f6885bec2a7401caaaa0e6a216aa2b058ddbde685dd55ecb58615ded6c0d346d507f3645280cc4a36652a708e492fc
@@ -720,9 +720,12 @@ $z-50: 50;
720
720
  // Mixins
721
721
  // *******************************************************************
722
722
 
723
+ @mixin make-container($padding-x: $size-4) {}
724
+ @mixin ellipsis {}
723
725
  @mixin antialiased {}
724
726
  @mixin subpixel-antialiased {}
725
- @mixin ellipsis {}
726
- @mixin outline-none {}
727
727
  @mixin progress-bar {}
728
- @mixin make-container($padding-x: $size-4) {}
728
+ @mixin animate-spin {}
729
+ @mixin animate-ping {}
730
+ @mixin animate-pulse {}
731
+ @mixin animate-bounce {}
data/Gemfile.lock CHANGED
@@ -1,7 +1,7 @@
1
1
  PATH
2
2
  remote: .
3
3
  specs:
4
- sass-zero (1.2.3)
4
+ sass-zero (1.3.0)
5
5
 
6
6
  GEM
7
7
  remote: https://rubygems.org/
data/README.md CHANGED
@@ -25,55 +25,60 @@ Instead of hand-picking values from a limitless pool any time you need to make a
25
25
 
26
26
  #### Essential
27
27
 
28
- - [Border](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/variables/_border.scss)
29
- - [Colors](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/variables/_colors.scss)
30
- - [Effects](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/variables/_effects.scss)
31
- - [Height](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/variables/_height.scss)
32
- - [Sizing](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/variables/_sizing.scss)
33
- - [Typography](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/variables/_typography.scss)
34
- - [Width](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/variables/_width.scss)
35
- - [Z-Index](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/variables/_zindex.scss)
28
+ - [Border](app/assets/stylesheets/sass-zero/variables/_border.scss)
29
+ - [Colors](app/assets/stylesheets/sass-zero/variables/_colors.scss)
30
+ - [Effects](app/assets/stylesheets/sass-zero/variables/_effects.scss)
31
+ - [Height](app/assets/stylesheets/sass-zero/variables/_height.scss)
32
+ - [Sizing](app/assets/stylesheets/sass-zero/variables/_sizing.scss)
33
+ - [Typography](app/assets/stylesheets/sass-zero/variables/_typography.scss)
34
+ - [Width](app/assets/stylesheets/sass-zero/variables/_width.scss)
35
+ - [Z-Index](app/assets/stylesheets/sass-zero/variables/_zindex.scss)
36
36
 
37
37
  #### Others
38
38
 
39
- - [Breakpoints](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/variables/_breakpoints.scss)
40
- - [Filters](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/variables/_filters.scss)
41
- - [Flex](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/variables/_flex.scss)
42
- - [Grid](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/variables/_grid.scss)
43
- - [Transform](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/variables/_transform.scss)
44
- - [Transition](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/variables/_transition.scss)
45
- - [Mixins](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/_mixins.scss)
39
+ - [Breakpoints](app/assets/stylesheets/sass-zero/variables/_breakpoints.scss)
40
+ - [Filters](app/assets/stylesheets/sass-zero/variables/_filters.scss)
41
+ - [Flex](app/assets/stylesheets/sass-zero/variables/_flex.scss)
42
+ - [Grid](app/assets/stylesheets/sass-zero/variables/_grid.scss)
43
+ - [Transform](app/assets/stylesheets/sass-zero/variables/_transform.scss)
44
+ - [Transition](app/assets/stylesheets/sass-zero/variables/_transition.scss)
45
+ - [Mixins](app/assets/stylesheets/sass-zero/_mixins.scss)
46
46
 
47
47
  ### Utility classes
48
48
 
49
49
  This can be useful for dealing with similar components, and positioning.
50
50
 
51
- - [Align](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/utilities/_align.scss)
52
- - [Animation](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/utilities/_animation.scss)
53
- - [Border](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/utilities/_border.scss)
54
- - [Container](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/utilities/_container.scss)
55
- - [Flex Utilities](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/utilities/_flex.scss)
56
- - [Layout Utilities](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/utilities/_layout.scss)
57
- - [List Utilities](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/utilities/_list.scss)
58
- - [Margin Pull](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/utilities/_pull.scss)
59
- - [Margin Push](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/utilities/_push.scss)
60
- - [Margin Reset](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/utilities/_flush.scss)
61
- - [Padding](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/utilities/_pad.scss)
62
- - [Padding Reset](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/utilities/_unpad.scss)
63
- - [Position Utilities](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/utilities/_position.scss)
64
- - [Text Utilities](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/utilities/_text.scss)
51
+ - [Align](app/assets/stylesheets/sass-zero/utilities/_align.scss)
52
+ - [Border](app/assets/stylesheets/sass-zero/utilities/_border.scss)
53
+ - [Container](app/assets/stylesheets/sass-zero/utilities/_container.scss)
54
+ - [Flex Utilities](app/assets/stylesheets/sass-zero/utilities/_flex.scss)
55
+ - [Layout Utilities](app/assets/stylesheets/sass-zero/utilities/_layout.scss)
56
+ - [List Utilities](app/assets/stylesheets/sass-zero/utilities/_list.scss)
57
+ - [Margin Pull](app/assets/stylesheets/sass-zero/utilities/_pull.scss)
58
+ - [Margin Push](app/assets/stylesheets/sass-zero/utilities/_push.scss)
59
+ - [Margin Reset](app/assets/stylesheets/sass-zero/utilities/_flush.scss)
60
+ - [Padding](app/assets/stylesheets/sass-zero/utilities/_pad.scss)
61
+ - [Padding Reset](app/assets/stylesheets/sass-zero/utilities/_unpad.scss)
62
+ - [Position Utilities](app/assets/stylesheets/sass-zero/utilities/_position.scss)
63
+ - [Text Utilities](app/assets/stylesheets/sass-zero/utilities/_text.scss)
65
64
 
66
65
  ## Breadboard
67
66
 
68
67
  These default styles ensure that even without custom styling, the content is usable and understandable, if your development process is mostly reproducing Figma designs, you might don't need it.
69
68
 
70
- - [Breadboard](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/breadboard.scss)
69
+ - [Breadboard](app/assets/stylesheets/sass-zero/breadboard.scss)
71
70
  - [Screenshot](screenshot.png)
72
- - [Example](https://github.com/lazaronixon/sass-zero/blob/master/example.html)
71
+ - [Example](example.html)
72
+
73
+ ## Animations
74
+
75
+ Pre-built keyframes you can use to create your animations.
76
+
77
+ - [Animations](app/assets/stylesheets/sass-zero/animations.scss)
73
78
 
74
79
  ## Using variables
75
80
 
76
- Create some stylesheet using [BEM](http://getbem.com/naming) and [SASS-ZERO Variables](https://github.com/lazaronixon/sass-zero/blob/master/vendor/assets/stylesheets/sass-zero/_variables.scss):
81
+ Create some stylesheet using [BEM](http://getbem.com/naming) and [SASS-ZERO Variables](app/assets/stylesheets/sass-zero/_variables.scss):
77
82
 
78
83
  ```scss
79
84
  @import "sass-zero/variables";
@@ -81,11 +86,11 @@ Create some stylesheet using [BEM](http://getbem.com/naming) and [SASS-ZERO Vari
81
86
  .block {
82
87
  color: $rose-500;
83
88
 
84
- &__element_one {
89
+ &__element-one {
85
90
  color: $fuchsia-500;
86
91
  }
87
92
 
88
- &__element_two {
93
+ &__element-two {
89
94
  color: $purple-500;
90
95
  }
91
96
 
@@ -97,13 +102,13 @@ Create some stylesheet using [BEM](http://getbem.com/naming) and [SASS-ZERO Vari
97
102
 
98
103
  ```html
99
104
  <div class="block">
100
- <div class="block__element_one" />
101
- <div class="block__element_two" />
105
+ <div class="block__element-one" />
106
+ <div class="block__element-two" />
102
107
  </div>
103
108
 
104
109
  <div class="block block--modifier">
105
- <div class="block__element_one" />
106
- <div class="block__element_two" />
110
+ <div class="block__element-one" />
111
+ <div class="block__element-two" />
107
112
  </div>
108
113
  ```
109
114
 
@@ -1,13 +1,15 @@
1
1
  @import "variables/sizing";
2
2
 
3
- @mixin antialiased {
4
- -webkit-font-smoothing: antialiased;
5
- -moz-osx-font-smoothing: grayscale;
6
- }
3
+ // *******************************************************************
4
+ // General
5
+ // *******************************************************************
7
6
 
8
- @mixin subpixel-antialiased {
9
- -webkit-font-smoothing: auto;
10
- -moz-osx-font-smoothing: auto;
7
+ @mixin make-container($padding-x: $size-4) {
8
+ width: 100%;
9
+ padding-right: $padding-x;
10
+ padding-left: $padding-x;
11
+ margin-right: auto;
12
+ margin-left: auto;
11
13
  }
12
14
 
13
15
  @mixin ellipsis {
@@ -16,9 +18,14 @@
16
18
  overflow: hidden;
17
19
  }
18
20
 
19
- @mixin outline-none {
20
- outline: 2px solid transparent;
21
- outline-offset: 2px;
21
+ @mixin antialiased {
22
+ -webkit-font-smoothing: antialiased;
23
+ -moz-osx-font-smoothing: grayscale;
24
+ }
25
+
26
+ @mixin subpixel-antialiased {
27
+ -webkit-font-smoothing: auto;
28
+ -moz-osx-font-smoothing: auto;
22
29
  }
23
30
 
24
31
  @mixin progress-bar {
@@ -31,10 +38,22 @@
31
38
  }
32
39
  }
33
40
 
34
- @mixin make-container($padding-x: $size-4) {
35
- width: 100%;
36
- padding-right: $padding-x;
37
- padding-left: $padding-x;
38
- margin-right: auto;
39
- margin-left: auto;
41
+ // *******************************************************************
42
+ // Animations
43
+ // *******************************************************************
44
+
45
+ @mixin animate-spin {
46
+ animation: spin 1s linear infinite;
47
+ }
48
+
49
+ @mixin animate-ping {
50
+ animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
51
+ }
52
+
53
+ @mixin animate-pulse {
54
+ animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
55
+ }
56
+
57
+ @mixin animate-bounce {
58
+ animation: bounce 1s infinite;
40
59
  }
@@ -0,0 +1,454 @@
1
+ @keyframes spin {
2
+ from {
3
+ transform: rotate(0deg);
4
+ }
5
+ to {
6
+ transform: rotate(360deg);
7
+ }
8
+ }
9
+
10
+ @keyframes ping {
11
+ 0% {
12
+ transform: scale(1);
13
+ opacity: 1;
14
+ }
15
+ 75%, 100% {
16
+ transform: scale(2);
17
+ opacity: 0;
18
+ }
19
+ }
20
+
21
+ @keyframes pulse {
22
+ 0%, 100% {
23
+ opacity: 1;
24
+ }
25
+ 50% {
26
+ opacity: 0.5;
27
+ }
28
+ }
29
+
30
+ @keyframes bounce {
31
+ 0%, 100% {
32
+ transform: translateY(-25%);
33
+ animationTimingFunction: cubic-bezier(0.8, 0, 1, 1); // scss-lint:disable all
34
+ }
35
+ 50% {
36
+ transform: translateY(0);
37
+ animationTimingFunction: cubic-bezier(0, 0, 0.2, 1); // scss-lint:disable all
38
+ }
39
+ }
40
+
41
+ @keyframes pop-open {
42
+ 0% {
43
+ transform: scale(0.3);
44
+ opacity: 0;
45
+ }
46
+ 75% {
47
+ transform: scale(1.05);
48
+ opacity: 1;
49
+ }
50
+ 100% {
51
+ transform: scale(1);
52
+ }
53
+ }
54
+
55
+ @keyframes blind-open {
56
+ from {
57
+ max-height: 0;
58
+ }
59
+ to {
60
+ max-height: 100rem;
61
+ }
62
+ }
63
+
64
+ @keyframes blind-close {
65
+ from {
66
+ max-height: 100rem;
67
+ }
68
+ to {
69
+ max-height: 0;
70
+ }
71
+ }
72
+
73
+ @keyframes appear {
74
+ from {
75
+ opacity: 0;
76
+ transform: scale(0.8);
77
+ }
78
+ to {
79
+ opacity: 1;
80
+ }
81
+ }
82
+
83
+ @keyframes fade-out {
84
+ 100% {
85
+ opacity: 0;
86
+ }
87
+ }
88
+
89
+ @keyframes fade-in-out {
90
+ 50% {
91
+ opacity: 0;
92
+ }
93
+ 100% {
94
+ opacity: 1;
95
+ }
96
+ }
97
+
98
+ @keyframes appear-then-fade {
99
+ 0%, 100% {
100
+ opacity: 0;
101
+ }
102
+ 5%, 60% {
103
+ opacity: 1;
104
+ }
105
+ }
106
+
107
+ @keyframes appear-then-fade-extended {
108
+ 0%, 100% {
109
+ opacity: 0;
110
+ }
111
+ 2%, 90% {
112
+ opacity: 1;
113
+ }
114
+ }
115
+
116
+ @keyframes slide-up-then-down {
117
+ 0%, 100% {
118
+ transform: translateY(100px);
119
+ opacity: 0;
120
+ }
121
+ 5%, 95% {
122
+ transform: translateY(0);
123
+ opacity: 1;
124
+ }
125
+ }
126
+
127
+ @keyframes hide {
128
+ to {
129
+ max-height: 0;
130
+ max-width: 0;
131
+ visibility: hidden;
132
+ }
133
+ }
134
+
135
+ @keyframes wiggle {
136
+ 0% {
137
+ transform: rotate(0deg);
138
+ }
139
+ 20% {
140
+ transform: rotate(3deg);
141
+ }
142
+ 40% {
143
+ transform: rotate(-3deg);
144
+ }
145
+ 60% {
146
+ transform: rotate(3deg);
147
+ }
148
+ 80% {
149
+ transform: rotate(-3deg);
150
+ }
151
+ 100% {
152
+ transform: rotate(0deg);
153
+ }
154
+ }
155
+
156
+ @keyframes pop-visible {
157
+ 0% {
158
+ transform: scale(0.75);
159
+ text-indent: 0;
160
+ }
161
+ 33% {
162
+ transform: scale(0.85);
163
+ }
164
+ 67% {
165
+ transform: scale(1.25);
166
+ }
167
+ 100% {
168
+ transform: scale(1);
169
+ text-indent: 2.3em;
170
+ }
171
+ }
172
+
173
+ @keyframes fade-in-up {
174
+ 0% {
175
+ transform: translateY(50px);
176
+ opacity: 0;
177
+ }
178
+ 100% {
179
+ transform: translateY(0);
180
+ opacity: 1;
181
+ }
182
+ }
183
+
184
+ @keyframes fade-in-down {
185
+ 0% {
186
+ transform: translateY(-50px);
187
+ opacity: 0;
188
+ }
189
+ 100% {
190
+ transform: translateY(0);
191
+ opacity: 1;
192
+ }
193
+ }
194
+
195
+ @keyframes fade-out-up {
196
+ 0% {
197
+ transform: translateY(0);
198
+ opacity: 1;
199
+ }
200
+ 100% {
201
+ transform: translateY(-50px);
202
+ opacity: 0;
203
+ }
204
+ }
205
+
206
+ @keyframes fade-out-down {
207
+ 0% {
208
+ transform: translateY(0);
209
+ opacity: 1;
210
+ }
211
+ 100% {
212
+ transform: translateY(500px);
213
+ opacity: 0;
214
+ }
215
+ }
216
+
217
+ @keyframes flip-up {
218
+ 0% {
219
+ transform: rotateX(90deg) translateY(50px);
220
+ opacity: 0;
221
+ }
222
+ 100% {
223
+ transform: rotateX(0deg) translateY(0px);
224
+ opacity: 1;
225
+ }
226
+ }
227
+
228
+ @keyframes slide-right {
229
+ 0% {
230
+ transform: translateX(0);
231
+ }
232
+ 10% {
233
+ transform: translateX(0);
234
+ }
235
+ 40% {
236
+ transform: translateX(0);
237
+ }
238
+ 80% {
239
+ transform: translateX(116px);
240
+ opacity: 1;
241
+ }
242
+ 90% {
243
+ transform: translateX(116px);
244
+ opacity: 0;
245
+ }
246
+ 100% {
247
+ transform:translateX(116px);
248
+ opacity: 0;
249
+ }
250
+ }
251
+
252
+ @keyframes slide-left {
253
+ 0% {
254
+ transform: translateX(0);
255
+ }
256
+ 10% {
257
+ transform: translateX(0);
258
+ }
259
+ 40% {
260
+ transform: translateX(0);
261
+ }
262
+ 80% {
263
+ transform: translateX(-116px);
264
+ opacity: 1;
265
+ }
266
+ 90% {
267
+ transform: translateX(-116px);
268
+ opacity: 0;
269
+ }
270
+ 100% {
271
+ transform: translateX(-116px);
272
+ opacity: 0;
273
+ }
274
+ }
275
+
276
+ @keyframes slide-in-from-left {
277
+ 0% {
278
+ opacity: 0;
279
+ }
280
+ 40% {
281
+ transform:translateX(320px);
282
+ opacity: 0;
283
+ }
284
+ 80% {
285
+ transform: translateX(0);
286
+ opacity: 1;
287
+ }
288
+ }
289
+
290
+ @keyframes slide-in-from-bottom {
291
+ 0% {
292
+ transform: translateY(10rem);
293
+ opacity: 0;
294
+ }
295
+ 50% {
296
+ transform:translateY(-1rem);
297
+ opacity: .5;
298
+ }
299
+ 100% {
300
+ transform:translateY(0);
301
+ opacity: 1;
302
+ }
303
+ }
304
+
305
+ @keyframes slide-in-from-bottom-no-fade {
306
+ 0% {
307
+ transform: translateY(20rem);
308
+ }
309
+ 50% {
310
+ transform: translateY(-1rem);
311
+ }
312
+ 100% {
313
+ transform: translateY(0);
314
+ }
315
+ }
316
+
317
+ @keyframes slide-in-from-bottom-no-bounce {
318
+ 0% {
319
+ transform: translateY(10rem);
320
+ opacity: 0;
321
+ }
322
+ 50% {
323
+ opacity: .5;
324
+ }
325
+ 100% {
326
+ transform: translateY(0);
327
+ opacity: 1;
328
+ }
329
+ }
330
+
331
+ @keyframes slide-in-tilt-left {
332
+ 0% {
333
+ transform: translateY(100rem) rotate(0);
334
+ opacity: 0;
335
+ }
336
+ 50% {
337
+ transform: translateY(-1rem) rotate(-3deg);
338
+ opacity: 1;
339
+ }
340
+ 100% {
341
+ transform: translateY(0) rotate(-1deg);
342
+ opacity: 1;
343
+ }
344
+ }
345
+
346
+ @keyframes slide-in-tilt-right {
347
+ 0% {
348
+ transform: translateY(100rem) rotate(0);
349
+ opacity: 0;
350
+ }
351
+ 50% {
352
+ transform: translateY(-1rem) rotate(3deg);
353
+ opacity: 1;
354
+ }
355
+ 100% {
356
+ transform: translateY(0) rotate(1deg);
357
+ opacity: 1;
358
+ }
359
+ }
360
+
361
+ @keyframes pop {
362
+ 0% {
363
+ transform: scale(1);
364
+ }
365
+ 50% {
366
+ transform: scale(1);
367
+ }
368
+ 80% {
369
+ transform: scale(1.1);
370
+ }
371
+ 85% {
372
+ transform: scale(1.1);
373
+ }
374
+ 90% {
375
+ transform: scale(0.95);
376
+ }
377
+ 95% {
378
+ transform: scale(1);
379
+ }
380
+ 100% {
381
+ transform: scale(1);
382
+ }
383
+ }
384
+
385
+ @keyframes burst {
386
+ 0% {
387
+ opacity: 0;
388
+ transform: scale(0.2);
389
+ }
390
+ 30% {
391
+ opacity: 1;
392
+ }
393
+ 50% {
394
+ opacity: 0;
395
+ transform: scale(1);
396
+ }
397
+ 52% {
398
+ opacity: 0;
399
+ transform: scale(0.2);
400
+ }
401
+ 100% {
402
+ opacity: 0;
403
+ transform: scale(0.2);
404
+ }
405
+ }
406
+
407
+ @keyframes bubble-burst {
408
+ 0% {
409
+ opacity: 0;
410
+ transform: scale(0.6);
411
+ transform-origin: center;
412
+ }
413
+ 33% {
414
+ opacity: 1;
415
+ transform: scale(1);
416
+ }
417
+ 100% {
418
+ opacity: 0;
419
+ transform: scale(1.6);
420
+ }
421
+ }
422
+
423
+ @keyframes bump {
424
+ 0%, 100% {
425
+ transform: scale(1);
426
+ }
427
+ 50% {
428
+ transform: scale(1.2);
429
+ }
430
+ }
431
+
432
+ @keyframes shake {
433
+ 0% {
434
+ transform: translateX(-2rem);
435
+ }
436
+ 25% {
437
+ transform: translateX(2rem);
438
+ }
439
+ 50% {
440
+ transform: translateX(-1rem);
441
+ }
442
+ 75% {
443
+ transform: translateX(1rem);
444
+ }
445
+ }
446
+
447
+ @keyframes dancing-ants {
448
+ 0% {
449
+ background-position: left top,right bottom,left bottom,right top;
450
+ }
451
+ 100% {
452
+ background-position: left 1.5rem top,right 1.5rem bottom,left bottom 1.5rem,right top 1.5rem;
453
+ }
454
+ }
@@ -1,5 +1,4 @@
1
1
  @import "utilities/align";
2
- @import "utilities/animation";
3
2
  @import "utilities/border";
4
3
  @import "utilities/container";
5
4
  @import "utilities/flex";
@@ -1,5 +1,5 @@
1
1
  module Sass
2
2
  module Zero
3
- VERSION = "1.2.3"
3
+ VERSION = "1.3.0"
4
4
  end
5
5
  end
metadata CHANGED
@@ -1,7 +1,7 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: sass-zero
3
3
  version: !ruby/object:Gem::Version
4
- version: 1.2.3
4
+ version: 1.3.0
5
5
  platform: ruby
6
6
  authors:
7
7
  - lazaronixon
@@ -27,11 +27,11 @@ files:
27
27
  - Rakefile
28
28
  - app/assets/stylesheets/sass-zero/_mixins.scss
29
29
  - app/assets/stylesheets/sass-zero/_variables.scss
30
+ - app/assets/stylesheets/sass-zero/animations.scss
30
31
  - app/assets/stylesheets/sass-zero/base.scss
31
32
  - app/assets/stylesheets/sass-zero/breadboard.scss
32
33
  - app/assets/stylesheets/sass-zero/utilities.scss
33
34
  - app/assets/stylesheets/sass-zero/utilities/_align.scss
34
- - app/assets/stylesheets/sass-zero/utilities/_animation.scss
35
35
  - app/assets/stylesheets/sass-zero/utilities/_border.scss
36
36
  - app/assets/stylesheets/sass-zero/utilities/_container.scss
37
37
  - app/assets/stylesheets/sass-zero/utilities/_flex.scss
@@ -1,59 +0,0 @@
1
- .animate-none {
2
- animation: none;
3
- }
4
-
5
- .animate-spin {
6
- animation: spin 1s linear infinite;
7
- }
8
-
9
- .animate-ping {
10
- animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
11
- }
12
-
13
- .animate-pulse {
14
- animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
15
- }
16
-
17
- .animate-bounce {
18
- animation: bounce 1s infinite;
19
- }
20
-
21
- @keyframes spin {
22
- from {
23
- transform: rotate(0deg);
24
- }
25
- to {
26
- transform: rotate(360deg);
27
- }
28
- }
29
-
30
- @keyframes ping {
31
- 0% {
32
- transform: scale(1);
33
- opacity: 1;
34
- }
35
- 75%, 100% {
36
- transform: scale(2);
37
- opacity: 0;
38
- }
39
- }
40
-
41
- @keyframes pulse {
42
- 0%, 100% {
43
- opacity: 1;
44
- }
45
- 50% {
46
- opacity: 0.5;
47
- }
48
- }
49
-
50
- @keyframes bounce {
51
- 0%, 100% {
52
- transform: translateY(-25%);
53
- animationTimingFunction: cubic-bezier(0.8, 0, 1, 1); // scss-lint:disable all
54
- }
55
- 50% {
56
- transform: translateY(0);
57
- animationTimingFunction: cubic-bezier(0, 0, 0.2, 1); // scss-lint:disable all
58
- }
59
- }