hamburgers 0.8.1 → 0.9.0
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/CHANGELOG.md +8 -0
- data/README.md +10 -0
- data/_sass/hamburgers/hamburgers.scss +12 -2
- data/_sass/hamburgers/types/_3dxy-r.scss +35 -0
- data/_sass/hamburgers/types/_3dxy.scss +35 -0
- data/_sass/hamburgers/types/_arrowturn-r.scss +16 -0
- data/_sass/hamburgers/types/_arrowturn.scss +16 -0
- data/_sass/hamburgers/types/_minus.scss +34 -0
- data/bower.json +1 -1
- data/dist/example.html +49 -4
- data/dist/hamburgers.css +122 -48
- data/dist/hamburgers.min.css +1 -1
- data/gulpfile.js +0 -1
- data/lib/hamburgers/version.rb +1 -1
- data/package-lock.json +4568 -0
- data/package.json +3 -3
- metadata +9 -3
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA1:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 2cee75ac7c2ae66a254bedd298b9f666f34ff0cc
|
|
4
|
+
data.tar.gz: 04aeb1c8a4f9a8afaea8e7cb45fa964127e4b8ba
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: afe349270abb8a5f2d2385ee0b53d1bf30a15a3ab33b13e34cbadc90b12dfc33429d5be02fd7badce3870dbb7a01a6f46ab76441793d474495c6bf4f781a58a3
|
|
7
|
+
data.tar.gz: ffe65bd463036701e4fa115982690149c20759bc4c4a5d516201cb6a818df815605f47dd8a9b9fba5e27953410a69abdf85d8e9d397dd0728bf0b863288e10ff
|
data/CHANGELOG.md
CHANGED
|
@@ -2,6 +2,14 @@
|
|
|
2
2
|
|
|
3
3
|
Changelog for Hamburgers.
|
|
4
4
|
|
|
5
|
+
## [0.9.0] - 7/6/2017
|
|
6
|
+
### Added
|
|
7
|
+
- Add new types: `3dxy`, `3dxy-r`, `arrowturn`, `arrowturn-r`, `minus`
|
|
8
|
+
|
|
9
|
+
### Updated
|
|
10
|
+
- Include missing and new types in `dist/example.html`.
|
|
11
|
+
- Update dependencies and include `package-lock.json`.
|
|
12
|
+
|
|
5
13
|
## [0.8.1] - 3/16/2017
|
|
6
14
|
### Updated
|
|
7
15
|
- Faster animations.
|
data/README.md
CHANGED
|
@@ -57,10 +57,14 @@ Hamburgers is a collection of tasty CSS-animated hamburger icons. Also included
|
|
|
57
57
|
hamburger--3dx-r
|
|
58
58
|
hamburger--3dy
|
|
59
59
|
hamburger--3dy-r
|
|
60
|
+
hamburger--3dxy
|
|
61
|
+
hamburger--3dxy-r
|
|
60
62
|
hamburger--arrow
|
|
61
63
|
hamburger--arrow-r
|
|
62
64
|
hamburger--arrowalt
|
|
63
65
|
hamburger--arrowalt-r
|
|
66
|
+
hamburger--arrowturn
|
|
67
|
+
hamburger--arrowturn-r
|
|
64
68
|
hamburger--boring
|
|
65
69
|
hamburger--collapse
|
|
66
70
|
hamburger--collapse-r
|
|
@@ -68,6 +72,7 @@ Hamburgers is a collection of tasty CSS-animated hamburger icons. Also included
|
|
|
68
72
|
hamburger--elastic-r
|
|
69
73
|
hamburger--emphatic
|
|
70
74
|
hamburger--emphatic-r
|
|
75
|
+
hamburger--minus
|
|
71
76
|
hamburger--slider
|
|
72
77
|
hamburger--slider-r
|
|
73
78
|
hamburger--spin
|
|
@@ -188,10 +193,14 @@ $hamburger-types: (
|
|
|
188
193
|
3dx-r,
|
|
189
194
|
3dy,
|
|
190
195
|
3dy-r,
|
|
196
|
+
3dxy,
|
|
197
|
+
3dxy-r,
|
|
191
198
|
arrow,
|
|
192
199
|
arrow-r,
|
|
193
200
|
arrowalt,
|
|
194
201
|
arrowalt-r,
|
|
202
|
+
arrowturn,
|
|
203
|
+
arrowturn-r,
|
|
195
204
|
boring,
|
|
196
205
|
collapse,
|
|
197
206
|
collapse-r,
|
|
@@ -199,6 +208,7 @@ $hamburger-types: (
|
|
|
199
208
|
elastic-r,
|
|
200
209
|
emphatic,
|
|
201
210
|
emphatic-r,
|
|
211
|
+
minus,
|
|
202
212
|
slider,
|
|
203
213
|
slider-r,
|
|
204
214
|
spring,
|
|
@@ -33,10 +33,14 @@ $hamburger-types: (
|
|
|
33
33
|
3dx-r,
|
|
34
34
|
3dy,
|
|
35
35
|
3dy-r,
|
|
36
|
+
3dxy,
|
|
37
|
+
3dxy-r,
|
|
36
38
|
arrow,
|
|
37
39
|
arrow-r,
|
|
38
40
|
arrowalt,
|
|
39
41
|
arrowalt-r,
|
|
42
|
+
arrowturn,
|
|
43
|
+
arrowturn-r,
|
|
40
44
|
boring,
|
|
41
45
|
collapse,
|
|
42
46
|
collapse-r,
|
|
@@ -44,6 +48,7 @@ $hamburger-types: (
|
|
|
44
48
|
elastic-r,
|
|
45
49
|
emphatic,
|
|
46
50
|
emphatic-r,
|
|
51
|
+
minus,
|
|
47
52
|
slider,
|
|
48
53
|
slider-r,
|
|
49
54
|
spin,
|
|
@@ -67,10 +72,14 @@ $hamburger-types: (
|
|
|
67
72
|
@import "types/3dx-r";
|
|
68
73
|
@import "types/3dy";
|
|
69
74
|
@import "types/3dy-r";
|
|
75
|
+
@import "types/3dxy";
|
|
76
|
+
@import "types/3dxy-r";
|
|
70
77
|
@import "types/arrow";
|
|
71
78
|
@import "types/arrow-r";
|
|
72
79
|
@import "types/arrowalt";
|
|
73
80
|
@import "types/arrowalt-r";
|
|
81
|
+
@import "types/arrowturn";
|
|
82
|
+
@import "types/arrowturn-r";
|
|
74
83
|
@import "types/boring";
|
|
75
84
|
@import "types/collapse";
|
|
76
85
|
@import "types/collapse-r";
|
|
@@ -78,14 +87,15 @@ $hamburger-types: (
|
|
|
78
87
|
@import "types/elastic-r";
|
|
79
88
|
@import "types/emphatic";
|
|
80
89
|
@import "types/emphatic-r";
|
|
90
|
+
@import "types/minus";
|
|
81
91
|
@import "types/slider";
|
|
82
92
|
@import "types/slider-r";
|
|
93
|
+
@import "types/spin";
|
|
94
|
+
@import "types/spin-r";
|
|
83
95
|
@import "types/spring";
|
|
84
96
|
@import "types/spring-r";
|
|
85
97
|
@import "types/stand";
|
|
86
98
|
@import "types/stand-r";
|
|
87
|
-
@import "types/spin";
|
|
88
|
-
@import "types/spin-r";
|
|
89
99
|
@import "types/squeeze";
|
|
90
100
|
@import "types/vortex";
|
|
91
101
|
@import "types/vortex-r";
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
@if index($hamburger-types, 3dxy-r) {
|
|
2
|
+
/*
|
|
3
|
+
* 3DXY Reverse
|
|
4
|
+
*/
|
|
5
|
+
.hamburger--3dxy-r {
|
|
6
|
+
.hamburger-box {
|
|
7
|
+
perspective: $hamburger-layer-width * 2;
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
.hamburger-inner {
|
|
11
|
+
transition: transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1),
|
|
12
|
+
background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1);
|
|
13
|
+
|
|
14
|
+
&::before,
|
|
15
|
+
&::after {
|
|
16
|
+
transition: transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1);
|
|
17
|
+
}
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
&.is-active {
|
|
21
|
+
.hamburger-inner {
|
|
22
|
+
background-color: transparent;
|
|
23
|
+
transform: rotateX(180deg) rotateY(180deg) rotateZ(-180deg);
|
|
24
|
+
|
|
25
|
+
&::before {
|
|
26
|
+
transform: translate3d(0, $hamburger-layer-height + $hamburger-layer-spacing, 0) rotate(45deg);
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
&::after {
|
|
30
|
+
transform: translate3d(0, ($hamburger-layer-height + $hamburger-layer-spacing) * -1, 0) rotate(-45deg);
|
|
31
|
+
}
|
|
32
|
+
}
|
|
33
|
+
}
|
|
34
|
+
}
|
|
35
|
+
}
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
@if index($hamburger-types, 3dxy) {
|
|
2
|
+
/*
|
|
3
|
+
* 3DXY
|
|
4
|
+
*/
|
|
5
|
+
.hamburger--3dxy {
|
|
6
|
+
.hamburger-box {
|
|
7
|
+
perspective: $hamburger-layer-width * 2;
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
.hamburger-inner {
|
|
11
|
+
transition: transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1),
|
|
12
|
+
background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1);
|
|
13
|
+
|
|
14
|
+
&::before,
|
|
15
|
+
&::after {
|
|
16
|
+
transition: transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1);
|
|
17
|
+
}
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
&.is-active {
|
|
21
|
+
.hamburger-inner {
|
|
22
|
+
background-color: transparent;
|
|
23
|
+
transform: rotateX(180deg) rotateY(180deg);
|
|
24
|
+
|
|
25
|
+
&::before {
|
|
26
|
+
transform: translate3d(0, $hamburger-layer-height + $hamburger-layer-spacing, 0) rotate(45deg);
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
&::after {
|
|
30
|
+
transform: translate3d(0, ($hamburger-layer-height + $hamburger-layer-spacing) * -1, 0) rotate(-45deg);
|
|
31
|
+
}
|
|
32
|
+
}
|
|
33
|
+
}
|
|
34
|
+
}
|
|
35
|
+
}
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
/*
|
|
2
|
+
* Arrow Turn Right
|
|
3
|
+
*/
|
|
4
|
+
.hamburger--arrowturn-r.is-active {
|
|
5
|
+
.hamburger-inner {
|
|
6
|
+
transform: rotate(-180deg);
|
|
7
|
+
|
|
8
|
+
&::before {
|
|
9
|
+
transform: translate3d(-8px, 0, 0) rotate(-45deg) scale(0.7, 1);
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
&::after {
|
|
13
|
+
transform: translate3d(-8px, 0, 0) rotate(45deg) scale(0.7, 1);
|
|
14
|
+
}
|
|
15
|
+
}
|
|
16
|
+
}
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
/*
|
|
2
|
+
* Arrow Turn
|
|
3
|
+
*/
|
|
4
|
+
.hamburger--arrowturn.is-active {
|
|
5
|
+
.hamburger-inner {
|
|
6
|
+
transform: rotate(-180deg);
|
|
7
|
+
|
|
8
|
+
&::before {
|
|
9
|
+
transform: translate3d(8px, 0, 0) rotate(45deg) scale(0.7, 1);
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
&::after {
|
|
13
|
+
transform: translate3d(8px, 0, 0) rotate(-45deg) scale(0.7, 1);
|
|
14
|
+
}
|
|
15
|
+
}
|
|
16
|
+
}
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
@if index($hamburger-types, minus) {
|
|
2
|
+
/*
|
|
3
|
+
* Minus
|
|
4
|
+
*/
|
|
5
|
+
.hamburger--minus {
|
|
6
|
+
.hamburger-inner {
|
|
7
|
+
&::before,
|
|
8
|
+
&::after {
|
|
9
|
+
transition: bottom 0.08s 0s ease-out,
|
|
10
|
+
top 0.08s 0s ease-out,
|
|
11
|
+
opacity 0s linear;
|
|
12
|
+
}
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
&.is-active {
|
|
16
|
+
.hamburger-inner {
|
|
17
|
+
&::before,
|
|
18
|
+
&::after {
|
|
19
|
+
opacity: 0;
|
|
20
|
+
transition: bottom 0.08s ease-out,
|
|
21
|
+
top 0.08s ease-out,
|
|
22
|
+
opacity 0s 0.08s linear;
|
|
23
|
+
}
|
|
24
|
+
&::before {
|
|
25
|
+
top: 0;
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
&::after {
|
|
29
|
+
bottom: 0;
|
|
30
|
+
}
|
|
31
|
+
}
|
|
32
|
+
}
|
|
33
|
+
}
|
|
34
|
+
}
|
data/bower.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "css-hamburgers",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.9.0",
|
|
4
4
|
"description": "Collection of tasty CSS-animated hamburger icons. Includes Sass files (modular and customizable), so cook up your own hamburger.",
|
|
5
5
|
"homepage": "https://jonsuh.com/hamburgers",
|
|
6
6
|
"license": "MIT",
|
data/dist/example.html
CHANGED
|
@@ -52,6 +52,24 @@
|
|
|
52
52
|
|
|
53
53
|
<br>
|
|
54
54
|
|
|
55
|
+
<div class="hamburger hamburger--3dxy">
|
|
56
|
+
<div class="hamburger-box">
|
|
57
|
+
<div class="hamburger-inner"></div>
|
|
58
|
+
</div>
|
|
59
|
+
</div>
|
|
60
|
+
<code>hamburger--3dxy</code>
|
|
61
|
+
|
|
62
|
+
<br>
|
|
63
|
+
|
|
64
|
+
<div class="hamburger hamburger--3dxy-r">
|
|
65
|
+
<div class="hamburger-box">
|
|
66
|
+
<div class="hamburger-inner"></div>
|
|
67
|
+
</div>
|
|
68
|
+
</div>
|
|
69
|
+
<code>hamburger--3dxy-r</code>
|
|
70
|
+
|
|
71
|
+
<br>
|
|
72
|
+
|
|
55
73
|
<div class="hamburger hamburger--arrow">
|
|
56
74
|
<div class="hamburger-box">
|
|
57
75
|
<div class="hamburger-inner"></div>
|
|
@@ -88,6 +106,24 @@
|
|
|
88
106
|
|
|
89
107
|
<br>
|
|
90
108
|
|
|
109
|
+
<div class="hamburger hamburger--arrowturn">
|
|
110
|
+
<div class="hamburger-box">
|
|
111
|
+
<div class="hamburger-inner"></div>
|
|
112
|
+
</div>
|
|
113
|
+
</div>
|
|
114
|
+
<code>hamburger--arrowturn</code>
|
|
115
|
+
|
|
116
|
+
<br>
|
|
117
|
+
|
|
118
|
+
<div class="hamburger hamburger--arrowturn-r">
|
|
119
|
+
<div class="hamburger-box">
|
|
120
|
+
<div class="hamburger-inner"></div>
|
|
121
|
+
</div>
|
|
122
|
+
</div>
|
|
123
|
+
<code>hamburger--arrowturn-r</code>
|
|
124
|
+
|
|
125
|
+
<br>
|
|
126
|
+
|
|
91
127
|
<div class="hamburger hamburger--boring">
|
|
92
128
|
<div class="hamburger-box">
|
|
93
129
|
<div class="hamburger-inner"></div>
|
|
@@ -151,6 +187,15 @@
|
|
|
151
187
|
|
|
152
188
|
<br>
|
|
153
189
|
|
|
190
|
+
<div class="hamburger hamburger--minus">
|
|
191
|
+
<div class="hamburger-box">
|
|
192
|
+
<div class="hamburger-inner"></div>
|
|
193
|
+
</div>
|
|
194
|
+
</div>
|
|
195
|
+
<code>hamburger--minus</code>
|
|
196
|
+
|
|
197
|
+
<br>
|
|
198
|
+
|
|
154
199
|
<div class="hamburger hamburger--slider">
|
|
155
200
|
<div class="hamburger-box">
|
|
156
201
|
<div class="hamburger-inner"></div>
|
|
@@ -187,21 +232,21 @@
|
|
|
187
232
|
|
|
188
233
|
<br>
|
|
189
234
|
|
|
190
|
-
<div class="hamburger hamburger--
|
|
235
|
+
<div class="hamburger hamburger--spring">
|
|
191
236
|
<div class="hamburger-box">
|
|
192
237
|
<div class="hamburger-inner"></div>
|
|
193
238
|
</div>
|
|
194
239
|
</div>
|
|
195
|
-
<code>hamburger--
|
|
240
|
+
<code>hamburger--spring</code>
|
|
196
241
|
|
|
197
242
|
<br>
|
|
198
243
|
|
|
199
|
-
<div class="hamburger hamburger--
|
|
244
|
+
<div class="hamburger hamburger--spring-r">
|
|
200
245
|
<div class="hamburger-box">
|
|
201
246
|
<div class="hamburger-inner"></div>
|
|
202
247
|
</div>
|
|
203
248
|
</div>
|
|
204
|
-
<code>hamburger--
|
|
249
|
+
<code>hamburger--spring-r</code>
|
|
205
250
|
|
|
206
251
|
<br>
|
|
207
252
|
|
data/dist/hamburgers.css
CHANGED
|
@@ -125,6 +125,44 @@
|
|
|
125
125
|
.hamburger--3dy-r.is-active .hamburger-inner::after {
|
|
126
126
|
transform: translate3d(0, -10px, 0) rotate(-45deg); }
|
|
127
127
|
|
|
128
|
+
/*
|
|
129
|
+
* 3DXY
|
|
130
|
+
*/
|
|
131
|
+
.hamburger--3dxy .hamburger-box {
|
|
132
|
+
perspective: 80px; }
|
|
133
|
+
|
|
134
|
+
.hamburger--3dxy .hamburger-inner {
|
|
135
|
+
transition: transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1), background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); }
|
|
136
|
+
.hamburger--3dxy .hamburger-inner::before, .hamburger--3dxy .hamburger-inner::after {
|
|
137
|
+
transition: transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); }
|
|
138
|
+
|
|
139
|
+
.hamburger--3dxy.is-active .hamburger-inner {
|
|
140
|
+
background-color: transparent;
|
|
141
|
+
transform: rotateX(180deg) rotateY(180deg); }
|
|
142
|
+
.hamburger--3dxy.is-active .hamburger-inner::before {
|
|
143
|
+
transform: translate3d(0, 10px, 0) rotate(45deg); }
|
|
144
|
+
.hamburger--3dxy.is-active .hamburger-inner::after {
|
|
145
|
+
transform: translate3d(0, -10px, 0) rotate(-45deg); }
|
|
146
|
+
|
|
147
|
+
/*
|
|
148
|
+
* 3DXY Reverse
|
|
149
|
+
*/
|
|
150
|
+
.hamburger--3dxy-r .hamburger-box {
|
|
151
|
+
perspective: 80px; }
|
|
152
|
+
|
|
153
|
+
.hamburger--3dxy-r .hamburger-inner {
|
|
154
|
+
transition: transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1), background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); }
|
|
155
|
+
.hamburger--3dxy-r .hamburger-inner::before, .hamburger--3dxy-r .hamburger-inner::after {
|
|
156
|
+
transition: transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); }
|
|
157
|
+
|
|
158
|
+
.hamburger--3dxy-r.is-active .hamburger-inner {
|
|
159
|
+
background-color: transparent;
|
|
160
|
+
transform: rotateX(180deg) rotateY(180deg) rotateZ(-180deg); }
|
|
161
|
+
.hamburger--3dxy-r.is-active .hamburger-inner::before {
|
|
162
|
+
transform: translate3d(0, 10px, 0) rotate(45deg); }
|
|
163
|
+
.hamburger--3dxy-r.is-active .hamburger-inner::after {
|
|
164
|
+
transform: translate3d(0, -10px, 0) rotate(-45deg); }
|
|
165
|
+
|
|
128
166
|
/*
|
|
129
167
|
* Arrow
|
|
130
168
|
*/
|
|
@@ -181,6 +219,26 @@
|
|
|
181
219
|
transform: translate3d(8px, 10px, 0) rotate(-45deg) scale(0.7, 1);
|
|
182
220
|
transition: bottom 0.1s ease, transform 0.1s 0.1s cubic-bezier(0.895, 0.03, 0.685, 0.22); }
|
|
183
221
|
|
|
222
|
+
/*
|
|
223
|
+
* Arrow Turn
|
|
224
|
+
*/
|
|
225
|
+
.hamburger--arrowturn.is-active .hamburger-inner {
|
|
226
|
+
transform: rotate(-180deg); }
|
|
227
|
+
.hamburger--arrowturn.is-active .hamburger-inner::before {
|
|
228
|
+
transform: translate3d(8px, 0, 0) rotate(45deg) scale(0.7, 1); }
|
|
229
|
+
.hamburger--arrowturn.is-active .hamburger-inner::after {
|
|
230
|
+
transform: translate3d(8px, 0, 0) rotate(-45deg) scale(0.7, 1); }
|
|
231
|
+
|
|
232
|
+
/*
|
|
233
|
+
* Arrow Turn Right
|
|
234
|
+
*/
|
|
235
|
+
.hamburger--arrowturn-r.is-active .hamburger-inner {
|
|
236
|
+
transform: rotate(-180deg); }
|
|
237
|
+
.hamburger--arrowturn-r.is-active .hamburger-inner::before {
|
|
238
|
+
transform: translate3d(-8px, 0, 0) rotate(-45deg) scale(0.7, 1); }
|
|
239
|
+
.hamburger--arrowturn-r.is-active .hamburger-inner::after {
|
|
240
|
+
transform: translate3d(-8px, 0, 0) rotate(45deg) scale(0.7, 1); }
|
|
241
|
+
|
|
184
242
|
/*
|
|
185
243
|
* Boring
|
|
186
244
|
*/
|
|
@@ -358,6 +416,22 @@
|
|
|
358
416
|
transform: translate3d(-80px, -80px, 0) rotate(45deg);
|
|
359
417
|
transition: right 0.125s ease-out, top 0.05s 0.125s linear, transform 0.125s 0.175s cubic-bezier(0.075, 0.82, 0.165, 1); }
|
|
360
418
|
|
|
419
|
+
/*
|
|
420
|
+
* Minus
|
|
421
|
+
*/
|
|
422
|
+
.hamburger--minus .hamburger-inner::before, .hamburger--minus .hamburger-inner::after {
|
|
423
|
+
transition: bottom 0.08s 0s ease-out, top 0.08s 0s ease-out, opacity 0s linear; }
|
|
424
|
+
|
|
425
|
+
.hamburger--minus.is-active .hamburger-inner::before, .hamburger--minus.is-active .hamburger-inner::after {
|
|
426
|
+
opacity: 0;
|
|
427
|
+
transition: bottom 0.08s ease-out, top 0.08s ease-out, opacity 0s 0.08s linear; }
|
|
428
|
+
|
|
429
|
+
.hamburger--minus.is-active .hamburger-inner::before {
|
|
430
|
+
top: 0; }
|
|
431
|
+
|
|
432
|
+
.hamburger--minus.is-active .hamburger-inner::after {
|
|
433
|
+
bottom: 0; }
|
|
434
|
+
|
|
361
435
|
/*
|
|
362
436
|
* Slider
|
|
363
437
|
*/
|
|
@@ -400,6 +474,54 @@
|
|
|
400
474
|
.hamburger--slider-r.is-active .hamburger-inner::after {
|
|
401
475
|
transform: translate3d(0, -20px, 0) rotate(90deg); }
|
|
402
476
|
|
|
477
|
+
/*
|
|
478
|
+
* Spin
|
|
479
|
+
*/
|
|
480
|
+
.hamburger--spin .hamburger-inner {
|
|
481
|
+
transition-duration: 0.22s;
|
|
482
|
+
transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }
|
|
483
|
+
.hamburger--spin .hamburger-inner::before {
|
|
484
|
+
transition: top 0.1s 0.25s ease-in, opacity 0.1s ease-in; }
|
|
485
|
+
.hamburger--spin .hamburger-inner::after {
|
|
486
|
+
transition: bottom 0.1s 0.25s ease-in, transform 0.22s cubic-bezier(0.55, 0.055, 0.675, 0.19); }
|
|
487
|
+
|
|
488
|
+
.hamburger--spin.is-active .hamburger-inner {
|
|
489
|
+
transform: rotate(225deg);
|
|
490
|
+
transition-delay: 0.12s;
|
|
491
|
+
transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
|
|
492
|
+
.hamburger--spin.is-active .hamburger-inner::before {
|
|
493
|
+
top: 0;
|
|
494
|
+
opacity: 0;
|
|
495
|
+
transition: top 0.1s ease-out, opacity 0.1s 0.12s ease-out; }
|
|
496
|
+
.hamburger--spin.is-active .hamburger-inner::after {
|
|
497
|
+
bottom: 0;
|
|
498
|
+
transform: rotate(-90deg);
|
|
499
|
+
transition: bottom 0.1s ease-out, transform 0.22s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1); }
|
|
500
|
+
|
|
501
|
+
/*
|
|
502
|
+
* Spin Reverse
|
|
503
|
+
*/
|
|
504
|
+
.hamburger--spin-r .hamburger-inner {
|
|
505
|
+
transition-duration: 0.22s;
|
|
506
|
+
transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }
|
|
507
|
+
.hamburger--spin-r .hamburger-inner::before {
|
|
508
|
+
transition: top 0.1s 0.25s ease-in, opacity 0.1s ease-in; }
|
|
509
|
+
.hamburger--spin-r .hamburger-inner::after {
|
|
510
|
+
transition: bottom 0.1s 0.25s ease-in, transform 0.22s cubic-bezier(0.55, 0.055, 0.675, 0.19); }
|
|
511
|
+
|
|
512
|
+
.hamburger--spin-r.is-active .hamburger-inner {
|
|
513
|
+
transform: rotate(-225deg);
|
|
514
|
+
transition-delay: 0.12s;
|
|
515
|
+
transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
|
|
516
|
+
.hamburger--spin-r.is-active .hamburger-inner::before {
|
|
517
|
+
top: 0;
|
|
518
|
+
opacity: 0;
|
|
519
|
+
transition: top 0.1s ease-out, opacity 0.1s 0.12s ease-out; }
|
|
520
|
+
.hamburger--spin-r.is-active .hamburger-inner::after {
|
|
521
|
+
bottom: 0;
|
|
522
|
+
transform: rotate(90deg);
|
|
523
|
+
transition: bottom 0.1s ease-out, transform 0.22s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1); }
|
|
524
|
+
|
|
403
525
|
/*
|
|
404
526
|
* Spring
|
|
405
527
|
*/
|
|
@@ -499,54 +621,6 @@
|
|
|
499
621
|
transform: rotate(45deg);
|
|
500
622
|
transition: bottom 0.075s 0.1s ease-out, transform 0.075s 0.15s cubic-bezier(0.215, 0.61, 0.355, 1); }
|
|
501
623
|
|
|
502
|
-
/*
|
|
503
|
-
* Spin
|
|
504
|
-
*/
|
|
505
|
-
.hamburger--spin .hamburger-inner {
|
|
506
|
-
transition-duration: 0.22s;
|
|
507
|
-
transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }
|
|
508
|
-
.hamburger--spin .hamburger-inner::before {
|
|
509
|
-
transition: top 0.1s 0.25s ease-in, opacity 0.1s ease-in; }
|
|
510
|
-
.hamburger--spin .hamburger-inner::after {
|
|
511
|
-
transition: bottom 0.1s 0.25s ease-in, transform 0.22s cubic-bezier(0.55, 0.055, 0.675, 0.19); }
|
|
512
|
-
|
|
513
|
-
.hamburger--spin.is-active .hamburger-inner {
|
|
514
|
-
transform: rotate(225deg);
|
|
515
|
-
transition-delay: 0.12s;
|
|
516
|
-
transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
|
|
517
|
-
.hamburger--spin.is-active .hamburger-inner::before {
|
|
518
|
-
top: 0;
|
|
519
|
-
opacity: 0;
|
|
520
|
-
transition: top 0.1s ease-out, opacity 0.1s 0.12s ease-out; }
|
|
521
|
-
.hamburger--spin.is-active .hamburger-inner::after {
|
|
522
|
-
bottom: 0;
|
|
523
|
-
transform: rotate(-90deg);
|
|
524
|
-
transition: bottom 0.1s ease-out, transform 0.22s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1); }
|
|
525
|
-
|
|
526
|
-
/*
|
|
527
|
-
* Spin Reverse
|
|
528
|
-
*/
|
|
529
|
-
.hamburger--spin-r .hamburger-inner {
|
|
530
|
-
transition-duration: 0.22s;
|
|
531
|
-
transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }
|
|
532
|
-
.hamburger--spin-r .hamburger-inner::before {
|
|
533
|
-
transition: top 0.1s 0.25s ease-in, opacity 0.1s ease-in; }
|
|
534
|
-
.hamburger--spin-r .hamburger-inner::after {
|
|
535
|
-
transition: bottom 0.1s 0.25s ease-in, transform 0.22s cubic-bezier(0.55, 0.055, 0.675, 0.19); }
|
|
536
|
-
|
|
537
|
-
.hamburger--spin-r.is-active .hamburger-inner {
|
|
538
|
-
transform: rotate(-225deg);
|
|
539
|
-
transition-delay: 0.12s;
|
|
540
|
-
transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
|
|
541
|
-
.hamburger--spin-r.is-active .hamburger-inner::before {
|
|
542
|
-
top: 0;
|
|
543
|
-
opacity: 0;
|
|
544
|
-
transition: top 0.1s ease-out, opacity 0.1s 0.12s ease-out; }
|
|
545
|
-
.hamburger--spin-r.is-active .hamburger-inner::after {
|
|
546
|
-
bottom: 0;
|
|
547
|
-
transform: rotate(90deg);
|
|
548
|
-
transition: bottom 0.1s ease-out, transform 0.22s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1); }
|
|
549
|
-
|
|
550
624
|
/*
|
|
551
625
|
* Squeeze
|
|
552
626
|
*/
|