hamburgers 0.8.1 → 0.9.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 +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
|
*/
|