sass-zero 1.3.0 → 1.3.2

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: b7ebc6d459fe63526c843f3d2d0fd1b9623ae8a483f8d34d4c5f48ffba0a07ee
4
- data.tar.gz: 94aeedd8ddbfaae27157f6b22810d54e70f811c64f42934a4d35139b4989587b
3
+ metadata.gz: 52757fc96f9e5a53855b56448f7e018de29ca3140d03e6b71640fdebd13c1de3
4
+ data.tar.gz: 9fb81ca3d6590f4941ca2c66fa458801f74e45d275ebab376dd02e1ecf803ce6
5
5
  SHA512:
6
- metadata.gz: '009d8b25d79f018878e725bdcf66006c48967b57074ccdd0081fb715dbca30a27224c8b2ef5ce51f06ade5ed02da864460818a6c363c2bce09faa54a67014e29'
7
- data.tar.gz: aa6d4b392b5f08cdd47d92452f8a09ad13f6885bec2a7401caaaa0e6a216aa2b058ddbde685dd55ecb58615ded6c0d346d507f3645280cc4a36652a708e492fc
6
+ metadata.gz: a3d6a8a06e5fce7a0c94e2d04bb254ef23ca6efec6021276a260e665c5130af140452d28e3f1eff0a2b4430c849a3e98cc843b46e34210352a9817054a00e283
7
+ data.tar.gz: 9cac737a7dd2d6888cec6099c3d4c78ff8c1d410206e8c5fd6b2a1899bd315401effda9edaa250e44066793c88dfeb494597cc7049cfdbdd70cb0c597774bd6a
@@ -725,7 +725,37 @@ $z-50: 50;
725
725
  @mixin antialiased {}
726
726
  @mixin subpixel-antialiased {}
727
727
  @mixin progress-bar {}
728
+
729
+ // *******************************************************************
730
+ // Animations
731
+ // *******************************************************************
732
+
728
733
  @mixin animate-spin {}
729
734
  @mixin animate-ping {}
730
735
  @mixin animate-pulse {}
731
736
  @mixin animate-bounce {}
737
+ @mixin animate-pop-open {}
738
+ @mixin animate-appear {}
739
+ @mixin animate-fade-out {}
740
+ @mixin animate-fade-in-out {}
741
+ @mixin animate-appear-then-fade {}
742
+ @mixin animate-appear-then-fade-extended {}
743
+ @mixin animate-slide-up-then-down {}
744
+ @mixin animate-wiggle {}
745
+ @mixin animate-fade-in-up {}
746
+ @mixin animate-fade-in-down {}
747
+ @mixin animate-fade-out-up {}
748
+ @mixin animate-fade-out-down {}
749
+ @mixin animate-flip-up {}
750
+ @mixin animate-slide-right {}
751
+ @mixin animate-slide-left {}
752
+ @mixin animate-slide-in-from-left {}
753
+ @mixin animate-slide-in-from-bottom {}
754
+ @mixin animate-slide-in-from-bottom-no-fade {}
755
+ @mixin animate-slide-in-from-bottom-no-bounce {}
756
+ @mixin animate-slide-in-tilt-left {}
757
+ @mixin animate-slide-in-tilt-right {}
758
+ @mixin animate-pop {}
759
+ @mixin animate-burst {}
760
+ @mixin animate-bubble-burst {}
761
+ @mixin animate-shake {}
data/Gemfile.lock CHANGED
@@ -1,7 +1,7 @@
1
1
  PATH
2
2
  remote: .
3
3
  specs:
4
- sass-zero (1.3.0)
4
+ sass-zero (1.3.2)
5
5
 
6
6
  GEM
7
7
  remote: https://rubygems.org/
data/README.md CHANGED
@@ -19,7 +19,7 @@ Add these lines to your application.css:
19
19
  *= require sass-zero/breadboard
20
20
  ```
21
21
 
22
- ### Variables
22
+ ### Variables / Mixins
23
23
 
24
24
  Instead of hand-picking values from a limitless pool any time you need to make a decision, start with a smaller set of options.
25
25
 
@@ -70,12 +70,6 @@ These default styles ensure that even without custom styling, the content is usa
70
70
  - [Screenshot](screenshot.png)
71
71
  - [Example](example.html)
72
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)
78
-
79
73
  ## Using variables
80
74
 
81
75
  Create some stylesheet using [BEM](http://getbem.com/naming) and [SASS-ZERO Variables](app/assets/stylesheets/sass-zero/_variables.scss):
@@ -52,24 +52,6 @@
52
52
  }
53
53
  }
54
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
55
  @keyframes appear {
74
56
  from {
75
57
  opacity: 0;
@@ -124,14 +106,6 @@
124
106
  }
125
107
  }
126
108
 
127
- @keyframes hide {
128
- to {
129
- max-height: 0;
130
- max-width: 0;
131
- visibility: hidden;
132
- }
133
- }
134
-
135
109
  @keyframes wiggle {
136
110
  0% {
137
111
  transform: rotate(0deg);
@@ -153,23 +127,6 @@
153
127
  }
154
128
  }
155
129
 
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
130
  @keyframes fade-in-up {
174
131
  0% {
175
132
  transform: translateY(50px);
@@ -420,15 +377,6 @@
420
377
  }
421
378
  }
422
379
 
423
- @keyframes bump {
424
- 0%, 100% {
425
- transform: scale(1);
426
- }
427
- 50% {
428
- transform: scale(1.2);
429
- }
430
- }
431
-
432
380
  @keyframes shake {
433
381
  0% {
434
382
  transform: translateX(-2rem);
@@ -444,11 +392,10 @@
444
392
  }
445
393
  }
446
394
 
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;
395
+ @keyframes hide {
396
+ to {
397
+ max-height: 0;
398
+ max-width: 0;
399
+ visibility: hidden;
453
400
  }
454
401
  }
@@ -1,4 +1,5 @@
1
1
  @import "variables/sizing";
2
+ @import "animations";
2
3
 
3
4
  // *******************************************************************
4
5
  // General
@@ -50,10 +51,110 @@
50
51
  animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
51
52
  }
52
53
 
53
- @mixin animate-pulse {
54
+ @mixin animate-pulse {
54
55
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
55
56
  }
56
57
 
57
58
  @mixin animate-bounce {
58
59
  animation: bounce 1s infinite;
59
60
  }
61
+
62
+ @mixin animate-pop-open {
63
+ animation: pop-open .1s both;
64
+ }
65
+
66
+ @mixin animate-appear {
67
+ animation: appear .3s ease-out both;
68
+ }
69
+
70
+ @mixin animate-fade-out {
71
+ animation: fade-out 2s .3s both;
72
+ }
73
+
74
+ @mixin animate-fade-in-out {
75
+ animation: fade-in-out 1.5s infinite both;
76
+ }
77
+
78
+ @mixin animate-appear-then-fade {
79
+ animation: appear-then-fade 4s .3s both;
80
+ }
81
+
82
+ @mixin animate-appear-then-fade-extended {
83
+ animation: appear-then-fade-extended 12s .3s both;
84
+ }
85
+
86
+ @mixin animate-slide-up-then-down {
87
+ animation: slide-up-then-down 2s both;
88
+ }
89
+
90
+ @mixin animate-wiggle {
91
+ animation: wiggle .4s both;
92
+ }
93
+
94
+ @mixin animate-fade-in-up {
95
+ animation: fade-in-up .5s both;
96
+ }
97
+
98
+ @mixin animate-fade-in-down {
99
+ animation: fade-in-down .3s both ease-in-out;
100
+ }
101
+
102
+ @mixin animate-fade-out-up {
103
+ animation: fade-out-up .3s both;
104
+ }
105
+
106
+ @mixin animate-fade-out-down {
107
+ animation: fade-out-down .3s ease-in both;
108
+ }
109
+
110
+ @mixin animate-flip-up {
111
+ animation: flip-up .1s ease;
112
+ }
113
+
114
+ @mixin animate-slide-right {
115
+ animation: slide-right 2.5s ease-in infinite;
116
+ }
117
+
118
+ @mixin animate-slide-left {
119
+ animation: slide-left 2.5s ease-in infinite;
120
+ }
121
+
122
+ @mixin animate-slide-in-from-left {
123
+ animation: slide-in-from-left .5s both;
124
+ }
125
+
126
+ @mixin animate-slide-in-from-bottom {
127
+ animation: slide-in-from-bottom .5s .5s both;
128
+ }
129
+
130
+ @mixin animate-slide-in-from-bottom-no-fade {
131
+ animation: slide-in-from-bottom-no-fade .33s ease both;
132
+ }
133
+
134
+ @mixin animate-slide-in-from-bottom-no-bounce {
135
+ animation: slide-in-from-bottom-no-bounce .5s ease-out both;
136
+ }
137
+
138
+ @mixin animate-slide-in-tilt-left {
139
+ animation: slide-in-tilt-left .5s both;
140
+ }
141
+
142
+ @mixin animate-slide-in-tilt-right {
143
+ animation: slide-in-tilt-right .5s both;
144
+ }
145
+
146
+ @mixin animate-pop {
147
+ animation: pop 2.5s ease infinite;
148
+ }
149
+
150
+ @mixin animate-burst {
151
+ animation: burst 2.5s 2.2s ease infinite;
152
+ }
153
+
154
+ @mixin animate-bubble-burst {
155
+ animation: bubble-burst .16s ease-out .16s forwards;
156
+ }
157
+
158
+ @mixin animate-shake {
159
+ animation: shake .3s both;
160
+ }
@@ -1,5 +1,5 @@
1
1
  module Sass
2
2
  module Zero
3
- VERSION = "1.3.0"
3
+ VERSION = "1.3.2"
4
4
  end
5
5
  end
metadata CHANGED
@@ -1,14 +1,14 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: sass-zero
3
3
  version: !ruby/object:Gem::Version
4
- version: 1.3.0
4
+ version: 1.3.2
5
5
  platform: ruby
6
6
  authors:
7
7
  - lazaronixon
8
8
  autorequire:
9
9
  bindir: bin
10
10
  cert_chain: []
11
- date: 2023-07-10 00:00:00.000000000 Z
11
+ date: 2023-07-11 00:00:00.000000000 Z
12
12
  dependencies: []
13
13
  description:
14
14
  email:
@@ -25,9 +25,9 @@ files:
25
25
  - Gemfile.lock
26
26
  - README.md
27
27
  - Rakefile
28
+ - app/assets/stylesheets/sass-zero/_animations.scss
28
29
  - app/assets/stylesheets/sass-zero/_mixins.scss
29
30
  - app/assets/stylesheets/sass-zero/_variables.scss
30
- - app/assets/stylesheets/sass-zero/animations.scss
31
31
  - app/assets/stylesheets/sass-zero/base.scss
32
32
  - app/assets/stylesheets/sass-zero/breadboard.scss
33
33
  - app/assets/stylesheets/sass-zero/utilities.scss