hamburgers 0.7.0 → 0.8.1
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 +5 -0
- data/README.md +28 -17
- data/_sass/hamburgers/hamburgers.scss +2 -2
- data/_sass/hamburgers/types/_3dx-r.scss +1 -1
- data/_sass/hamburgers/types/_3dx.scss +1 -1
- data/_sass/hamburgers/types/_3dy-r.scss +1 -1
- data/_sass/hamburgers/types/_3dy.scss +1 -1
- data/_sass/hamburgers/types/_arrowalt-r.scss +6 -6
- data/_sass/hamburgers/types/_arrowalt.scss +6 -6
- data/_sass/hamburgers/types/_collapse-r.scss +10 -10
- data/_sass/hamburgers/types/_collapse.scss +10 -10
- data/_sass/hamburgers/types/_elastic-r.scss +5 -5
- data/_sass/hamburgers/types/_elastic.scss +5 -5
- data/_sass/hamburgers/types/_emphatic-r.scss +13 -13
- data/_sass/hamburgers/types/_emphatic.scss +13 -13
- data/_sass/hamburgers/types/_slider-r.scss +1 -1
- data/_sass/hamburgers/types/_slider.scss +1 -1
- data/_sass/hamburgers/types/_spin-r.scss +7 -7
- data/_sass/hamburgers/types/_spin.scss +7 -7
- data/_sass/hamburgers/types/_spring-r.scss +9 -9
- data/_sass/hamburgers/types/_spring.scss +10 -10
- data/_sass/hamburgers/types/_squeeze.scss +10 -10
- data/_sass/hamburgers/types/_stand-r.scss +12 -12
- data/_sass/hamburgers/types/_stand.scss +12 -12
- data/_sass/hamburgers/types/_vortex-r.scss +1 -1
- data/_sass/hamburgers/types/_vortex.scss +1 -1
- data/bower.json +1 -1
- data/dist/example.html +72 -0
- data/dist/hamburgers.css +92 -92
- data/dist/hamburgers.min.css +1 -1
- data/gulpfile.js +1 -0
- data/lib/hamburgers/version.rb +1 -1
- data/package.json +10 -10
- metadata +2 -2
data/dist/hamburgers.css
CHANGED
@@ -56,7 +56,7 @@
|
|
56
56
|
perspective: 80px; }
|
57
57
|
|
58
58
|
.hamburger--3dx .hamburger-inner {
|
59
|
-
transition: transform 0.
|
59
|
+
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); }
|
60
60
|
.hamburger--3dx .hamburger-inner::before, .hamburger--3dx .hamburger-inner::after {
|
61
61
|
transition: transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); }
|
62
62
|
|
@@ -75,7 +75,7 @@
|
|
75
75
|
perspective: 80px; }
|
76
76
|
|
77
77
|
.hamburger--3dx-r .hamburger-inner {
|
78
|
-
transition: transform 0.
|
78
|
+
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); }
|
79
79
|
.hamburger--3dx-r .hamburger-inner::before, .hamburger--3dx-r .hamburger-inner::after {
|
80
80
|
transition: transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); }
|
81
81
|
|
@@ -94,7 +94,7 @@
|
|
94
94
|
perspective: 80px; }
|
95
95
|
|
96
96
|
.hamburger--3dy .hamburger-inner {
|
97
|
-
transition: transform 0.
|
97
|
+
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); }
|
98
98
|
.hamburger--3dy .hamburger-inner::before, .hamburger--3dy .hamburger-inner::after {
|
99
99
|
transition: transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); }
|
100
100
|
|
@@ -113,7 +113,7 @@
|
|
113
113
|
perspective: 80px; }
|
114
114
|
|
115
115
|
.hamburger--3dy-r .hamburger-inner {
|
116
|
-
transition: transform 0.
|
116
|
+
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); }
|
117
117
|
.hamburger--3dy-r .hamburger-inner::before, .hamburger--3dy-r .hamburger-inner::after {
|
118
118
|
transition: transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); }
|
119
119
|
|
@@ -147,39 +147,39 @@
|
|
147
147
|
* Arrow Alt
|
148
148
|
*/
|
149
149
|
.hamburger--arrowalt .hamburger-inner::before {
|
150
|
-
transition: top 0.1s 0.
|
150
|
+
transition: top 0.1s 0.1s ease, transform 0.1s cubic-bezier(0.165, 0.84, 0.44, 1); }
|
151
151
|
|
152
152
|
.hamburger--arrowalt .hamburger-inner::after {
|
153
|
-
transition: bottom 0.1s 0.
|
153
|
+
transition: bottom 0.1s 0.1s ease, transform 0.1s cubic-bezier(0.165, 0.84, 0.44, 1); }
|
154
154
|
|
155
155
|
.hamburger--arrowalt.is-active .hamburger-inner::before {
|
156
156
|
top: 0;
|
157
157
|
transform: translate3d(-8px, -10px, 0) rotate(-45deg) scale(0.7, 1);
|
158
|
-
transition: top 0.1s ease, transform 0.
|
158
|
+
transition: top 0.1s ease, transform 0.1s 0.1s cubic-bezier(0.895, 0.03, 0.685, 0.22); }
|
159
159
|
|
160
160
|
.hamburger--arrowalt.is-active .hamburger-inner::after {
|
161
161
|
bottom: 0;
|
162
162
|
transform: translate3d(-8px, 10px, 0) rotate(45deg) scale(0.7, 1);
|
163
|
-
transition: bottom 0.1s ease, transform 0.
|
163
|
+
transition: bottom 0.1s ease, transform 0.1s 0.1s cubic-bezier(0.895, 0.03, 0.685, 0.22); }
|
164
164
|
|
165
165
|
/*
|
166
166
|
* Arrow Alt Right
|
167
167
|
*/
|
168
168
|
.hamburger--arrowalt-r .hamburger-inner::before {
|
169
|
-
transition: top 0.1s 0.
|
169
|
+
transition: top 0.1s 0.1s ease, transform 0.1s cubic-bezier(0.165, 0.84, 0.44, 1); }
|
170
170
|
|
171
171
|
.hamburger--arrowalt-r .hamburger-inner::after {
|
172
|
-
transition: bottom 0.1s 0.
|
172
|
+
transition: bottom 0.1s 0.1s ease, transform 0.1s cubic-bezier(0.165, 0.84, 0.44, 1); }
|
173
173
|
|
174
174
|
.hamburger--arrowalt-r.is-active .hamburger-inner::before {
|
175
175
|
top: 0;
|
176
176
|
transform: translate3d(8px, -10px, 0) rotate(45deg) scale(0.7, 1);
|
177
|
-
transition: top 0.1s ease, transform 0.
|
177
|
+
transition: top 0.1s ease, transform 0.1s 0.1s cubic-bezier(0.895, 0.03, 0.685, 0.22); }
|
178
178
|
|
179
179
|
.hamburger--arrowalt-r.is-active .hamburger-inner::after {
|
180
180
|
bottom: 0;
|
181
181
|
transform: translate3d(8px, 10px, 0) rotate(-45deg) scale(0.7, 1);
|
182
|
-
transition: bottom 0.1s ease, transform 0.
|
182
|
+
transition: bottom 0.1s ease, transform 0.1s 0.1s cubic-bezier(0.895, 0.03, 0.685, 0.22); }
|
183
183
|
|
184
184
|
/*
|
185
185
|
* Boring
|
@@ -202,27 +202,27 @@
|
|
202
202
|
.hamburger--collapse .hamburger-inner {
|
203
203
|
top: auto;
|
204
204
|
bottom: 0;
|
205
|
-
transition-duration: 0.
|
206
|
-
transition-delay: 0.
|
205
|
+
transition-duration: 0.13s;
|
206
|
+
transition-delay: 0.13s;
|
207
207
|
transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }
|
208
208
|
.hamburger--collapse .hamburger-inner::after {
|
209
209
|
top: -20px;
|
210
|
-
transition: top 0.
|
210
|
+
transition: top 0.2s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), opacity 0.1s linear; }
|
211
211
|
.hamburger--collapse .hamburger-inner::before {
|
212
|
-
transition: top 0.12s 0.
|
212
|
+
transition: top 0.12s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19); }
|
213
213
|
|
214
214
|
.hamburger--collapse.is-active .hamburger-inner {
|
215
215
|
transform: translate3d(0, -10px, 0) rotate(-45deg);
|
216
|
-
transition-delay: 0.
|
216
|
+
transition-delay: 0.22s;
|
217
217
|
transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
|
218
218
|
.hamburger--collapse.is-active .hamburger-inner::after {
|
219
219
|
top: 0;
|
220
220
|
opacity: 0;
|
221
|
-
transition: top 0.
|
221
|
+
transition: top 0.2s cubic-bezier(0.33333, 0, 0.66667, 0.33333), opacity 0.1s 0.22s linear; }
|
222
222
|
.hamburger--collapse.is-active .hamburger-inner::before {
|
223
223
|
top: 0;
|
224
224
|
transform: rotate(-90deg);
|
225
|
-
transition: top 0.
|
225
|
+
transition: top 0.1s 0.16s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.13s 0.25s cubic-bezier(0.215, 0.61, 0.355, 1); }
|
226
226
|
|
227
227
|
/*
|
228
228
|
* Collapse Reverse
|
@@ -230,75 +230,75 @@
|
|
230
230
|
.hamburger--collapse-r .hamburger-inner {
|
231
231
|
top: auto;
|
232
232
|
bottom: 0;
|
233
|
-
transition-duration: 0.
|
234
|
-
transition-delay: 0.
|
233
|
+
transition-duration: 0.13s;
|
234
|
+
transition-delay: 0.13s;
|
235
235
|
transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }
|
236
236
|
.hamburger--collapse-r .hamburger-inner::after {
|
237
237
|
top: -20px;
|
238
|
-
transition: top 0.
|
238
|
+
transition: top 0.2s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), opacity 0.1s linear; }
|
239
239
|
.hamburger--collapse-r .hamburger-inner::before {
|
240
|
-
transition: top 0.12s 0.
|
240
|
+
transition: top 0.12s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19); }
|
241
241
|
|
242
242
|
.hamburger--collapse-r.is-active .hamburger-inner {
|
243
243
|
transform: translate3d(0, -10px, 0) rotate(45deg);
|
244
|
-
transition-delay: 0.
|
244
|
+
transition-delay: 0.22s;
|
245
245
|
transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
|
246
246
|
.hamburger--collapse-r.is-active .hamburger-inner::after {
|
247
247
|
top: 0;
|
248
248
|
opacity: 0;
|
249
|
-
transition: top 0.
|
249
|
+
transition: top 0.2s cubic-bezier(0.33333, 0, 0.66667, 0.33333), opacity 0.1s 0.22s linear; }
|
250
250
|
.hamburger--collapse-r.is-active .hamburger-inner::before {
|
251
251
|
top: 0;
|
252
252
|
transform: rotate(90deg);
|
253
|
-
transition: top 0.
|
253
|
+
transition: top 0.1s 0.16s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.13s 0.25s cubic-bezier(0.215, 0.61, 0.355, 1); }
|
254
254
|
|
255
255
|
/*
|
256
256
|
* Elastic
|
257
257
|
*/
|
258
258
|
.hamburger--elastic .hamburger-inner {
|
259
259
|
top: 2px;
|
260
|
-
transition-duration: 0.
|
260
|
+
transition-duration: 0.275s;
|
261
261
|
transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55); }
|
262
262
|
.hamburger--elastic .hamburger-inner::before {
|
263
263
|
top: 10px;
|
264
|
-
transition: opacity 0.
|
264
|
+
transition: opacity 0.125s 0.275s ease; }
|
265
265
|
.hamburger--elastic .hamburger-inner::after {
|
266
266
|
top: 20px;
|
267
|
-
transition: transform 0.
|
267
|
+
transition: transform 0.275s cubic-bezier(0.68, -0.55, 0.265, 1.55); }
|
268
268
|
|
269
269
|
.hamburger--elastic.is-active .hamburger-inner {
|
270
270
|
transform: translate3d(0, 10px, 0) rotate(135deg);
|
271
|
-
transition-delay: 0.
|
271
|
+
transition-delay: 0.075s; }
|
272
272
|
.hamburger--elastic.is-active .hamburger-inner::before {
|
273
273
|
transition-delay: 0s;
|
274
274
|
opacity: 0; }
|
275
275
|
.hamburger--elastic.is-active .hamburger-inner::after {
|
276
276
|
transform: translate3d(0, -20px, 0) rotate(-270deg);
|
277
|
-
transition-delay: 0.
|
277
|
+
transition-delay: 0.075s; }
|
278
278
|
|
279
279
|
/*
|
280
280
|
* Elastic Reverse
|
281
281
|
*/
|
282
282
|
.hamburger--elastic-r .hamburger-inner {
|
283
283
|
top: 2px;
|
284
|
-
transition-duration: 0.
|
284
|
+
transition-duration: 0.275s;
|
285
285
|
transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55); }
|
286
286
|
.hamburger--elastic-r .hamburger-inner::before {
|
287
287
|
top: 10px;
|
288
|
-
transition: opacity 0.
|
288
|
+
transition: opacity 0.125s 0.275s ease; }
|
289
289
|
.hamburger--elastic-r .hamburger-inner::after {
|
290
290
|
top: 20px;
|
291
|
-
transition: transform 0.
|
291
|
+
transition: transform 0.275s cubic-bezier(0.68, -0.55, 0.265, 1.55); }
|
292
292
|
|
293
293
|
.hamburger--elastic-r.is-active .hamburger-inner {
|
294
294
|
transform: translate3d(0, 10px, 0) rotate(-135deg);
|
295
|
-
transition-delay: 0.
|
295
|
+
transition-delay: 0.075s; }
|
296
296
|
.hamburger--elastic-r.is-active .hamburger-inner::before {
|
297
297
|
transition-delay: 0s;
|
298
298
|
opacity: 0; }
|
299
299
|
.hamburger--elastic-r.is-active .hamburger-inner::after {
|
300
300
|
transform: translate3d(0, -20px, 0) rotate(270deg);
|
301
|
-
transition-delay: 0.
|
301
|
+
transition-delay: 0.075s; }
|
302
302
|
|
303
303
|
/*
|
304
304
|
* Emphatic
|
@@ -306,14 +306,14 @@
|
|
306
306
|
.hamburger--emphatic {
|
307
307
|
overflow: hidden; }
|
308
308
|
.hamburger--emphatic .hamburger-inner {
|
309
|
-
transition: background-color 0.
|
309
|
+
transition: background-color 0.125s 0.175s ease-in; }
|
310
310
|
.hamburger--emphatic .hamburger-inner::before {
|
311
311
|
left: 0;
|
312
|
-
transition: transform 0.
|
312
|
+
transition: transform 0.125s cubic-bezier(0.6, 0.04, 0.98, 0.335), top 0.05s 0.125s linear, left 0.125s 0.175s ease-in; }
|
313
313
|
.hamburger--emphatic .hamburger-inner::after {
|
314
314
|
top: 10px;
|
315
315
|
right: 0;
|
316
|
-
transition: transform 0.
|
316
|
+
transition: transform 0.125s cubic-bezier(0.6, 0.04, 0.98, 0.335), top 0.05s 0.125s linear, right 0.125s 0.175s ease-in; }
|
317
317
|
.hamburger--emphatic.is-active .hamburger-inner {
|
318
318
|
transition-delay: 0s;
|
319
319
|
transition-timing-function: ease-out;
|
@@ -322,12 +322,12 @@
|
|
322
322
|
left: -80px;
|
323
323
|
top: -80px;
|
324
324
|
transform: translate3d(80px, 80px, 0) rotate(45deg);
|
325
|
-
transition: left 0.
|
325
|
+
transition: left 0.125s ease-out, top 0.05s 0.125s linear, transform 0.125s 0.175s cubic-bezier(0.075, 0.82, 0.165, 1); }
|
326
326
|
.hamburger--emphatic.is-active .hamburger-inner::after {
|
327
327
|
right: -80px;
|
328
328
|
top: -80px;
|
329
329
|
transform: translate3d(-80px, 80px, 0) rotate(-45deg);
|
330
|
-
transition: right 0.
|
330
|
+
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); }
|
331
331
|
|
332
332
|
/*
|
333
333
|
* Emphatic Reverse
|
@@ -335,14 +335,14 @@
|
|
335
335
|
.hamburger--emphatic-r {
|
336
336
|
overflow: hidden; }
|
337
337
|
.hamburger--emphatic-r .hamburger-inner {
|
338
|
-
transition: background-color 0.
|
338
|
+
transition: background-color 0.125s 0.175s ease-in; }
|
339
339
|
.hamburger--emphatic-r .hamburger-inner::before {
|
340
340
|
left: 0;
|
341
|
-
transition: transform 0.
|
341
|
+
transition: transform 0.125s cubic-bezier(0.6, 0.04, 0.98, 0.335), top 0.05s 0.125s linear, left 0.125s 0.175s ease-in; }
|
342
342
|
.hamburger--emphatic-r .hamburger-inner::after {
|
343
343
|
top: 10px;
|
344
344
|
right: 0;
|
345
|
-
transition: transform 0.
|
345
|
+
transition: transform 0.125s cubic-bezier(0.6, 0.04, 0.98, 0.335), top 0.05s 0.125s linear, right 0.125s 0.175s ease-in; }
|
346
346
|
.hamburger--emphatic-r.is-active .hamburger-inner {
|
347
347
|
transition-delay: 0s;
|
348
348
|
transition-timing-function: ease-out;
|
@@ -351,12 +351,12 @@
|
|
351
351
|
left: -80px;
|
352
352
|
top: 80px;
|
353
353
|
transform: translate3d(80px, -80px, 0) rotate(-45deg);
|
354
|
-
transition: left 0.
|
354
|
+
transition: left 0.125s ease-out, top 0.05s 0.125s linear, transform 0.125s 0.175s cubic-bezier(0.075, 0.82, 0.165, 1); }
|
355
355
|
.hamburger--emphatic-r.is-active .hamburger-inner::after {
|
356
356
|
right: -80px;
|
357
357
|
top: 80px;
|
358
358
|
transform: translate3d(-80px, -80px, 0) rotate(45deg);
|
359
|
-
transition: right 0.
|
359
|
+
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
360
|
|
361
361
|
/*
|
362
362
|
* Slider
|
@@ -367,7 +367,7 @@
|
|
367
367
|
top: 10px;
|
368
368
|
transition-property: transform, opacity;
|
369
369
|
transition-timing-function: ease;
|
370
|
-
transition-duration: 0.
|
370
|
+
transition-duration: 0.15s; }
|
371
371
|
.hamburger--slider .hamburger-inner::after {
|
372
372
|
top: 20px; }
|
373
373
|
|
@@ -388,7 +388,7 @@
|
|
388
388
|
top: 10px;
|
389
389
|
transition-property: transform, opacity;
|
390
390
|
transition-timing-function: ease;
|
391
|
-
transition-duration: 0.
|
391
|
+
transition-duration: 0.15s; }
|
392
392
|
.hamburger--slider-r .hamburger-inner::after {
|
393
393
|
top: 20px; }
|
394
394
|
|
@@ -405,24 +405,24 @@
|
|
405
405
|
*/
|
406
406
|
.hamburger--spring .hamburger-inner {
|
407
407
|
top: 2px;
|
408
|
-
transition: background-color 0s 0.
|
408
|
+
transition: background-color 0s 0.13s linear; }
|
409
409
|
.hamburger--spring .hamburger-inner::before {
|
410
410
|
top: 10px;
|
411
|
-
transition: top 0.
|
411
|
+
transition: top 0.1s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19); }
|
412
412
|
.hamburger--spring .hamburger-inner::after {
|
413
413
|
top: 20px;
|
414
|
-
transition: top 0.
|
414
|
+
transition: top 0.2s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19); }
|
415
415
|
|
416
416
|
.hamburger--spring.is-active .hamburger-inner {
|
417
|
-
transition-delay: 0.
|
417
|
+
transition-delay: 0.22s;
|
418
418
|
background-color: transparent; }
|
419
419
|
.hamburger--spring.is-active .hamburger-inner::before {
|
420
420
|
top: 0;
|
421
|
-
transition: top 0.
|
421
|
+
transition: top 0.1s 0.15s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.13s 0.22s cubic-bezier(0.215, 0.61, 0.355, 1);
|
422
422
|
transform: translate3d(0, 10px, 0) rotate(45deg); }
|
423
423
|
.hamburger--spring.is-active .hamburger-inner::after {
|
424
424
|
top: 0;
|
425
|
-
transition: top 0.
|
425
|
+
transition: top 0.2s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.13s 0.22s cubic-bezier(0.215, 0.61, 0.355, 1);
|
426
426
|
transform: translate3d(0, 10px, 0) rotate(-45deg); }
|
427
427
|
|
428
428
|
/*
|
@@ -431,151 +431,151 @@
|
|
431
431
|
.hamburger--spring-r .hamburger-inner {
|
432
432
|
top: auto;
|
433
433
|
bottom: 0;
|
434
|
-
transition-duration: 0.
|
434
|
+
transition-duration: 0.13s;
|
435
435
|
transition-delay: 0s;
|
436
436
|
transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }
|
437
437
|
.hamburger--spring-r .hamburger-inner::after {
|
438
438
|
top: -20px;
|
439
|
-
transition: top 0.
|
439
|
+
transition: top 0.2s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), opacity 0s linear; }
|
440
440
|
.hamburger--spring-r .hamburger-inner::before {
|
441
|
-
transition: top 0.
|
441
|
+
transition: top 0.1s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19); }
|
442
442
|
|
443
443
|
.hamburger--spring-r.is-active .hamburger-inner {
|
444
444
|
transform: translate3d(0, -10px, 0) rotate(-45deg);
|
445
|
-
transition-delay: 0.
|
445
|
+
transition-delay: 0.22s;
|
446
446
|
transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
|
447
447
|
.hamburger--spring-r.is-active .hamburger-inner::after {
|
448
448
|
top: 0;
|
449
449
|
opacity: 0;
|
450
|
-
transition: top 0.
|
450
|
+
transition: top 0.2s cubic-bezier(0.33333, 0, 0.66667, 0.33333), opacity 0s 0.22s linear; }
|
451
451
|
.hamburger--spring-r.is-active .hamburger-inner::before {
|
452
452
|
top: 0;
|
453
453
|
transform: rotate(90deg);
|
454
|
-
transition: top 0.
|
454
|
+
transition: top 0.1s 0.15s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.13s 0.22s cubic-bezier(0.215, 0.61, 0.355, 1); }
|
455
455
|
|
456
456
|
/*
|
457
457
|
* Stand
|
458
458
|
*/
|
459
459
|
.hamburger--stand .hamburger-inner {
|
460
|
-
transition: transform 0.
|
460
|
+
transition: transform 0.075s 0.15s cubic-bezier(0.55, 0.055, 0.675, 0.19), background-color 0s 0.075s linear; }
|
461
461
|
.hamburger--stand .hamburger-inner::before {
|
462
|
-
transition: top 0.
|
462
|
+
transition: top 0.075s 0.075s ease-in, transform 0.075s 0s cubic-bezier(0.55, 0.055, 0.675, 0.19); }
|
463
463
|
.hamburger--stand .hamburger-inner::after {
|
464
|
-
transition: bottom 0.
|
464
|
+
transition: bottom 0.075s 0.075s ease-in, transform 0.075s 0s cubic-bezier(0.55, 0.055, 0.675, 0.19); }
|
465
465
|
|
466
466
|
.hamburger--stand.is-active .hamburger-inner {
|
467
467
|
transform: rotate(90deg);
|
468
468
|
background-color: transparent;
|
469
|
-
transition: transform 0.
|
469
|
+
transition: transform 0.075s 0s cubic-bezier(0.215, 0.61, 0.355, 1), background-color 0s 0.15s linear; }
|
470
470
|
.hamburger--stand.is-active .hamburger-inner::before {
|
471
471
|
top: 0;
|
472
472
|
transform: rotate(-45deg);
|
473
|
-
transition: top 0.
|
473
|
+
transition: top 0.075s 0.1s ease-out, transform 0.075s 0.15s cubic-bezier(0.215, 0.61, 0.355, 1); }
|
474
474
|
.hamburger--stand.is-active .hamburger-inner::after {
|
475
475
|
bottom: 0;
|
476
476
|
transform: rotate(45deg);
|
477
|
-
transition: bottom 0.
|
477
|
+
transition: bottom 0.075s 0.1s ease-out, transform 0.075s 0.15s cubic-bezier(0.215, 0.61, 0.355, 1); }
|
478
478
|
|
479
479
|
/*
|
480
480
|
* Stand Reverse
|
481
481
|
*/
|
482
482
|
.hamburger--stand-r .hamburger-inner {
|
483
|
-
transition: transform 0.
|
483
|
+
transition: transform 0.075s 0.15s cubic-bezier(0.55, 0.055, 0.675, 0.19), background-color 0s 0.075s linear; }
|
484
484
|
.hamburger--stand-r .hamburger-inner::before {
|
485
|
-
transition: top 0.
|
485
|
+
transition: top 0.075s 0.075s ease-in, transform 0.075s 0s cubic-bezier(0.55, 0.055, 0.675, 0.19); }
|
486
486
|
.hamburger--stand-r .hamburger-inner::after {
|
487
|
-
transition: bottom 0.
|
487
|
+
transition: bottom 0.075s 0.075s ease-in, transform 0.075s 0s cubic-bezier(0.55, 0.055, 0.675, 0.19); }
|
488
488
|
|
489
489
|
.hamburger--stand-r.is-active .hamburger-inner {
|
490
490
|
transform: rotate(-90deg);
|
491
491
|
background-color: transparent;
|
492
|
-
transition: transform 0.
|
492
|
+
transition: transform 0.075s 0s cubic-bezier(0.215, 0.61, 0.355, 1), background-color 0s 0.15s linear; }
|
493
493
|
.hamburger--stand-r.is-active .hamburger-inner::before {
|
494
494
|
top: 0;
|
495
495
|
transform: rotate(-45deg);
|
496
|
-
transition: top 0.
|
496
|
+
transition: top 0.075s 0.1s ease-out, transform 0.075s 0.15s cubic-bezier(0.215, 0.61, 0.355, 1); }
|
497
497
|
.hamburger--stand-r.is-active .hamburger-inner::after {
|
498
498
|
bottom: 0;
|
499
499
|
transform: rotate(45deg);
|
500
|
-
transition: bottom 0.
|
500
|
+
transition: bottom 0.075s 0.1s ease-out, transform 0.075s 0.15s cubic-bezier(0.215, 0.61, 0.355, 1); }
|
501
501
|
|
502
502
|
/*
|
503
503
|
* Spin
|
504
504
|
*/
|
505
505
|
.hamburger--spin .hamburger-inner {
|
506
|
-
transition-duration: 0.
|
506
|
+
transition-duration: 0.22s;
|
507
507
|
transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }
|
508
508
|
.hamburger--spin .hamburger-inner::before {
|
509
|
-
transition: top 0.1s 0.
|
509
|
+
transition: top 0.1s 0.25s ease-in, opacity 0.1s ease-in; }
|
510
510
|
.hamburger--spin .hamburger-inner::after {
|
511
|
-
transition: bottom 0.1s 0.
|
511
|
+
transition: bottom 0.1s 0.25s ease-in, transform 0.22s cubic-bezier(0.55, 0.055, 0.675, 0.19); }
|
512
512
|
|
513
513
|
.hamburger--spin.is-active .hamburger-inner {
|
514
514
|
transform: rotate(225deg);
|
515
|
-
transition-delay: 0.
|
515
|
+
transition-delay: 0.12s;
|
516
516
|
transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
|
517
517
|
.hamburger--spin.is-active .hamburger-inner::before {
|
518
518
|
top: 0;
|
519
519
|
opacity: 0;
|
520
|
-
transition: top 0.1s ease-out, opacity 0.1s 0.
|
520
|
+
transition: top 0.1s ease-out, opacity 0.1s 0.12s ease-out; }
|
521
521
|
.hamburger--spin.is-active .hamburger-inner::after {
|
522
522
|
bottom: 0;
|
523
523
|
transform: rotate(-90deg);
|
524
|
-
transition: bottom 0.1s ease-out, transform 0.
|
524
|
+
transition: bottom 0.1s ease-out, transform 0.22s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1); }
|
525
525
|
|
526
526
|
/*
|
527
527
|
* Spin Reverse
|
528
528
|
*/
|
529
529
|
.hamburger--spin-r .hamburger-inner {
|
530
|
-
transition-duration: 0.
|
530
|
+
transition-duration: 0.22s;
|
531
531
|
transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }
|
532
532
|
.hamburger--spin-r .hamburger-inner::before {
|
533
|
-
transition: top 0.1s 0.
|
533
|
+
transition: top 0.1s 0.25s ease-in, opacity 0.1s ease-in; }
|
534
534
|
.hamburger--spin-r .hamburger-inner::after {
|
535
|
-
transition: bottom 0.1s 0.
|
535
|
+
transition: bottom 0.1s 0.25s ease-in, transform 0.22s cubic-bezier(0.55, 0.055, 0.675, 0.19); }
|
536
536
|
|
537
537
|
.hamburger--spin-r.is-active .hamburger-inner {
|
538
538
|
transform: rotate(-225deg);
|
539
|
-
transition-delay: 0.
|
539
|
+
transition-delay: 0.12s;
|
540
540
|
transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
|
541
541
|
.hamburger--spin-r.is-active .hamburger-inner::before {
|
542
542
|
top: 0;
|
543
543
|
opacity: 0;
|
544
|
-
transition: top 0.1s ease-out, opacity 0.1s 0.
|
544
|
+
transition: top 0.1s ease-out, opacity 0.1s 0.12s ease-out; }
|
545
545
|
.hamburger--spin-r.is-active .hamburger-inner::after {
|
546
546
|
bottom: 0;
|
547
547
|
transform: rotate(90deg);
|
548
|
-
transition: bottom 0.1s ease-out, transform 0.
|
548
|
+
transition: bottom 0.1s ease-out, transform 0.22s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1); }
|
549
549
|
|
550
550
|
/*
|
551
551
|
* Squeeze
|
552
552
|
*/
|
553
553
|
.hamburger--squeeze .hamburger-inner {
|
554
|
-
transition-duration: 0.
|
554
|
+
transition-duration: 0.075s;
|
555
555
|
transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }
|
556
556
|
.hamburger--squeeze .hamburger-inner::before {
|
557
|
-
transition: top 0.
|
557
|
+
transition: top 0.075s 0.12s ease, opacity 0.075s ease; }
|
558
558
|
.hamburger--squeeze .hamburger-inner::after {
|
559
|
-
transition: bottom 0.
|
559
|
+
transition: bottom 0.075s 0.12s ease, transform 0.075s cubic-bezier(0.55, 0.055, 0.675, 0.19); }
|
560
560
|
|
561
561
|
.hamburger--squeeze.is-active .hamburger-inner {
|
562
562
|
transform: rotate(45deg);
|
563
|
-
transition-delay: 0.
|
563
|
+
transition-delay: 0.12s;
|
564
564
|
transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
|
565
565
|
.hamburger--squeeze.is-active .hamburger-inner::before {
|
566
566
|
top: 0;
|
567
567
|
opacity: 0;
|
568
|
-
transition: top 0.
|
568
|
+
transition: top 0.075s ease, opacity 0.075s 0.12s ease; }
|
569
569
|
.hamburger--squeeze.is-active .hamburger-inner::after {
|
570
570
|
bottom: 0;
|
571
571
|
transform: rotate(-90deg);
|
572
|
-
transition: bottom 0.
|
572
|
+
transition: bottom 0.075s ease, transform 0.075s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1); }
|
573
573
|
|
574
574
|
/*
|
575
575
|
* Vortex
|
576
576
|
*/
|
577
577
|
.hamburger--vortex .hamburger-inner {
|
578
|
-
transition-duration: 0.
|
578
|
+
transition-duration: 0.2s;
|
579
579
|
transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1); }
|
580
580
|
.hamburger--vortex .hamburger-inner::before, .hamburger--vortex .hamburger-inner::after {
|
581
581
|
transition-duration: 0s;
|
@@ -602,7 +602,7 @@
|
|
602
602
|
* Vortex Reverse
|
603
603
|
*/
|
604
604
|
.hamburger--vortex-r .hamburger-inner {
|
605
|
-
transition-duration: 0.
|
605
|
+
transition-duration: 0.2s;
|
606
606
|
transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1); }
|
607
607
|
.hamburger--vortex-r .hamburger-inner::before, .hamburger--vortex-r .hamburger-inner::after {
|
608
608
|
transition-duration: 0s;
|