hamburgers 0.7.0 → 0.8.1
Sign up to get free protection for your applications and to get access to all the features.
- 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
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA1:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: d31babdae846ddc3ac32c1f04fbde227cbb9e662
|
|
4
|
+
data.tar.gz: 2bb907056462598c1967db9cf112386699db918e
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 9a99d51934af3429e3e5276bdc55e6b65c306e37f26dafbba288a330e36d4027a9869b74d8d37d612c93c15db56c2ae7ad57115f4361979bb905fb62d26609c9
|
|
7
|
+
data.tar.gz: 41ce1ee9698f99461a2af45cde8c3213963bd07daabed3234012c19fd52c716f49d2f94edaa28edda9eaca666d562866220bb1b095db1b5ff5ca3a3406b0016c
|
data/CHANGELOG.md
CHANGED
|
@@ -2,6 +2,11 @@
|
|
|
2
2
|
|
|
3
3
|
Changelog for Hamburgers.
|
|
4
4
|
|
|
5
|
+
## [0.8.1] - 3/16/2017
|
|
6
|
+
### Updated
|
|
7
|
+
- Faster animations.
|
|
8
|
+
- Improved accessibility documentation thanks to @scottaohara [#baf5b5e](https://github.com/jonsuh/hamburgers/pull/34/commits/baf5b5ea3cf9bba155c8e74dc5b95e48e3384c4d).
|
|
9
|
+
|
|
5
10
|
## [0.7.0] - 11/29/2016
|
|
6
11
|
### Added
|
|
7
12
|
- [Eyeglass](http://eyeglass.rocks/) support.
|
data/README.md
CHANGED
|
@@ -228,32 +228,43 @@ Hamburger menu icons can be useful in the right context, but they’re not the m
|
|
|
228
228
|
ARIA will help make it accessible to people with disabilities.
|
|
229
229
|
|
|
230
230
|
```html
|
|
231
|
-
<
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
<span class="hamburger-
|
|
235
|
-
|
|
236
|
-
</
|
|
237
|
-
|
|
238
|
-
|
|
231
|
+
<nav>
|
|
232
|
+
<button class="hamburger hamburger--elastic" type="button"
|
|
233
|
+
aria-label="Menu" aria-controls="navigation" aria-expanded="true/false">
|
|
234
|
+
<span class="hamburger-box">
|
|
235
|
+
<span class="hamburger-inner"></span>
|
|
236
|
+
</span>
|
|
237
|
+
</button>
|
|
238
|
+
|
|
239
|
+
<div id="navigation">
|
|
240
|
+
<!--navigation goes here-->
|
|
241
|
+
</div>
|
|
239
242
|
</nav>
|
|
240
243
|
```
|
|
241
244
|
|
|
242
|
-
|
|
245
|
+
You will need JavaScript to toggle between `aria-expanded` attribute being set to `true` and `false`, as this will indicate to visually impaired users whether the menu is opened or closed.
|
|
246
|
+
|
|
247
|
+
The hamburger button belongs __inside__ the `<nav>` so that assistive technologies will be able to locate the navigation, and to allow these users to easily locatate the hamburger button, without having to search up and down the DOM, once they realize they've found themselves in an empty navigation.
|
|
248
|
+
|
|
249
|
+
If you insist on using `<div>`s, by default they’re not focusable (i.e. via keyboard or assistive technology). Add the `tabindex` attribute alongside ARIA. You will also need to recreate expected keyboard functionality for these `<div>`s. Using JavaScript, you will need to make sure that both <kbd>Space</kbd> and <kbd>Enter</kbd> will toggle the hamburger states.
|
|
243
250
|
|
|
244
251
|
```html
|
|
245
|
-
<div class="hamburger hamburger--elastic" tabindex="0"
|
|
246
|
-
aria-label="Menu" role="button" aria-controls="navigation">
|
|
247
|
-
<div class="hamburger-box">
|
|
248
|
-
<div class="hamburger-inner"></div>
|
|
249
|
-
</div>
|
|
250
|
-
</div>
|
|
251
252
|
<nav id="navigation">
|
|
252
|
-
|
|
253
|
+
|
|
254
|
+
<div class="hamburger hamburger--elastic" tabindex="0"
|
|
255
|
+
aria-label="Menu" role="button" aria-controls="navigation" aria-expanded="true/false">
|
|
256
|
+
<div class="hamburger-box">
|
|
257
|
+
<div class="hamburger-inner"></div>
|
|
258
|
+
</div>
|
|
259
|
+
</div>
|
|
260
|
+
|
|
261
|
+
<div id="navigation">
|
|
262
|
+
<!--navigation goes here-->
|
|
263
|
+
</div>
|
|
253
264
|
</nav>
|
|
254
265
|
```
|
|
255
266
|
|
|
256
|
-
A label
|
|
267
|
+
A label will help make it more obvious that it toggles a menu.
|
|
257
268
|
|
|
258
269
|
```html
|
|
259
270
|
<button class="hamburger hamburger--collapse" type="button">
|
|
@@ -5,13 +5,13 @@
|
|
|
5
5
|
.hamburger--arrowalt-r {
|
|
6
6
|
.hamburger-inner {
|
|
7
7
|
&::before {
|
|
8
|
-
transition: top 0.1s 0.
|
|
9
|
-
transform 0.
|
|
8
|
+
transition: top 0.1s 0.1s ease,
|
|
9
|
+
transform 0.1s cubic-bezier(0.165, 0.84, 0.44, 1);
|
|
10
10
|
}
|
|
11
11
|
|
|
12
12
|
&::after {
|
|
13
|
-
transition: bottom 0.1s 0.
|
|
14
|
-
transform 0.
|
|
13
|
+
transition: bottom 0.1s 0.1s ease,
|
|
14
|
+
transform 0.1s cubic-bezier(0.165, 0.84, 0.44, 1);
|
|
15
15
|
}
|
|
16
16
|
}
|
|
17
17
|
|
|
@@ -21,14 +21,14 @@
|
|
|
21
21
|
top: 0;
|
|
22
22
|
transform: translate3d($hamburger-layer-width * 0.2, $hamburger-layer-width * -0.25, 0) rotate(45deg) scale(0.7, 1);
|
|
23
23
|
transition: top 0.1s ease,
|
|
24
|
-
transform 0.
|
|
24
|
+
transform 0.1s 0.1s cubic-bezier(0.895, 0.03, 0.685, 0.22);
|
|
25
25
|
}
|
|
26
26
|
|
|
27
27
|
&::after {
|
|
28
28
|
bottom: 0;
|
|
29
29
|
transform: translate3d($hamburger-layer-width * 0.2, $hamburger-layer-width * 0.25, 0) rotate(-45deg) scale(0.7, 1);
|
|
30
30
|
transition: bottom 0.1s ease,
|
|
31
|
-
transform 0.
|
|
31
|
+
transform 0.1s 0.1s cubic-bezier(0.895, 0.03, 0.685, 0.22);
|
|
32
32
|
}
|
|
33
33
|
}
|
|
34
34
|
}
|
|
@@ -5,13 +5,13 @@
|
|
|
5
5
|
.hamburger--arrowalt {
|
|
6
6
|
.hamburger-inner {
|
|
7
7
|
&::before {
|
|
8
|
-
transition: top 0.1s 0.
|
|
9
|
-
transform 0.
|
|
8
|
+
transition: top 0.1s 0.1s ease,
|
|
9
|
+
transform 0.1s cubic-bezier(0.165, 0.84, 0.44, 1);
|
|
10
10
|
}
|
|
11
11
|
|
|
12
12
|
&::after {
|
|
13
|
-
transition: bottom 0.1s 0.
|
|
14
|
-
transform 0.
|
|
13
|
+
transition: bottom 0.1s 0.1s ease,
|
|
14
|
+
transform 0.1s cubic-bezier(0.165, 0.84, 0.44, 1);
|
|
15
15
|
}
|
|
16
16
|
}
|
|
17
17
|
|
|
@@ -21,14 +21,14 @@
|
|
|
21
21
|
top: 0;
|
|
22
22
|
transform: translate3d($hamburger-layer-width * -0.2, $hamburger-layer-width * -0.25, 0) rotate(-45deg) scale(0.7, 1);
|
|
23
23
|
transition: top 0.1s ease,
|
|
24
|
-
transform 0.
|
|
24
|
+
transform 0.1s 0.1s cubic-bezier(0.895, 0.03, 0.685, 0.22);
|
|
25
25
|
}
|
|
26
26
|
|
|
27
27
|
&::after {
|
|
28
28
|
bottom: 0;
|
|
29
29
|
transform: translate3d($hamburger-layer-width * -0.2, $hamburger-layer-width * 0.25, 0) rotate(45deg) scale(0.7, 1);
|
|
30
30
|
transition: bottom 0.1s ease,
|
|
31
|
-
transform 0.
|
|
31
|
+
transform 0.1s 0.1s cubic-bezier(0.895, 0.03, 0.685, 0.22);
|
|
32
32
|
}
|
|
33
33
|
}
|
|
34
34
|
}
|
|
@@ -6,40 +6,40 @@
|
|
|
6
6
|
.hamburger-inner {
|
|
7
7
|
top: auto;
|
|
8
8
|
bottom: 0;
|
|
9
|
-
transition-duration: 0.
|
|
10
|
-
transition-delay: 0.
|
|
9
|
+
transition-duration: 0.13s;
|
|
10
|
+
transition-delay: 0.13s;
|
|
11
11
|
transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
|
|
12
12
|
|
|
13
13
|
&::after {
|
|
14
14
|
top: ($hamburger-layer-spacing * 2 + $hamburger-layer-height * 2) * -1;
|
|
15
|
-
transition: top 0.
|
|
15
|
+
transition: top 0.2s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1),
|
|
16
16
|
opacity 0.1s linear;
|
|
17
17
|
}
|
|
18
18
|
|
|
19
19
|
&::before {
|
|
20
|
-
transition: top 0.12s 0.
|
|
21
|
-
transform 0.
|
|
20
|
+
transition: top 0.12s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1),
|
|
21
|
+
transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19);
|
|
22
22
|
}
|
|
23
23
|
}
|
|
24
24
|
|
|
25
25
|
&.is-active {
|
|
26
26
|
.hamburger-inner {
|
|
27
27
|
transform: translate3d(0, ($hamburger-layer-spacing + $hamburger-layer-height) * -1, 0) rotate(45deg);
|
|
28
|
-
transition-delay: 0.
|
|
28
|
+
transition-delay: 0.22s;
|
|
29
29
|
transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
|
|
30
30
|
|
|
31
31
|
&::after {
|
|
32
32
|
top: 0;
|
|
33
33
|
opacity: 0;
|
|
34
|
-
transition: top 0.
|
|
35
|
-
opacity 0.1s 0.
|
|
34
|
+
transition: top 0.2s cubic-bezier(0.33333, 0, 0.66667, 0.33333),
|
|
35
|
+
opacity 0.1s 0.22s linear;
|
|
36
36
|
}
|
|
37
37
|
|
|
38
38
|
&::before {
|
|
39
39
|
top: 0;
|
|
40
40
|
transform: rotate(90deg);
|
|
41
|
-
transition: top 0.
|
|
42
|
-
transform 0.
|
|
41
|
+
transition: top 0.1s 0.16s cubic-bezier(0.33333, 0, 0.66667, 0.33333),
|
|
42
|
+
transform 0.13s 0.25s cubic-bezier(0.215, 0.61, 0.355, 1);
|
|
43
43
|
}
|
|
44
44
|
}
|
|
45
45
|
}
|
|
@@ -6,40 +6,40 @@
|
|
|
6
6
|
.hamburger-inner {
|
|
7
7
|
top: auto;
|
|
8
8
|
bottom: 0;
|
|
9
|
-
transition-duration: 0.
|
|
10
|
-
transition-delay: 0.
|
|
9
|
+
transition-duration: 0.13s;
|
|
10
|
+
transition-delay: 0.13s;
|
|
11
11
|
transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
|
|
12
12
|
|
|
13
13
|
&::after {
|
|
14
14
|
top: ($hamburger-layer-spacing * 2 + $hamburger-layer-height * 2) * -1;
|
|
15
|
-
transition: top 0.
|
|
15
|
+
transition: top 0.2s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1),
|
|
16
16
|
opacity 0.1s linear;
|
|
17
17
|
}
|
|
18
18
|
|
|
19
19
|
&::before {
|
|
20
|
-
transition: top 0.12s 0.
|
|
21
|
-
transform 0.
|
|
20
|
+
transition: top 0.12s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1),
|
|
21
|
+
transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19);
|
|
22
22
|
}
|
|
23
23
|
}
|
|
24
24
|
|
|
25
25
|
&.is-active {
|
|
26
26
|
.hamburger-inner {
|
|
27
27
|
transform: translate3d(0, ($hamburger-layer-spacing + $hamburger-layer-height) * -1, 0) rotate(-45deg);
|
|
28
|
-
transition-delay: 0.
|
|
28
|
+
transition-delay: 0.22s;
|
|
29
29
|
transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
|
|
30
30
|
|
|
31
31
|
&::after {
|
|
32
32
|
top: 0;
|
|
33
33
|
opacity: 0;
|
|
34
|
-
transition: top 0.
|
|
35
|
-
opacity 0.1s 0.
|
|
34
|
+
transition: top 0.2s cubic-bezier(0.33333, 0, 0.66667, 0.33333),
|
|
35
|
+
opacity 0.1s 0.22s linear;
|
|
36
36
|
}
|
|
37
37
|
|
|
38
38
|
&::before {
|
|
39
39
|
top: 0;
|
|
40
40
|
transform: rotate(-90deg);
|
|
41
|
-
transition: top 0.
|
|
42
|
-
transform 0.
|
|
41
|
+
transition: top 0.1s 0.16s cubic-bezier(0.33333, 0, 0.66667, 0.33333),
|
|
42
|
+
transform 0.13s 0.25s cubic-bezier(0.215, 0.61, 0.355, 1);
|
|
43
43
|
}
|
|
44
44
|
}
|
|
45
45
|
}
|
|
@@ -5,17 +5,17 @@
|
|
|
5
5
|
.hamburger--elastic-r {
|
|
6
6
|
.hamburger-inner {
|
|
7
7
|
top: $hamburger-layer-height / 2;
|
|
8
|
-
transition-duration: 0.
|
|
8
|
+
transition-duration: 0.275s;
|
|
9
9
|
transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
|
|
10
10
|
|
|
11
11
|
&::before {
|
|
12
12
|
top: $hamburger-layer-height + $hamburger-layer-spacing;
|
|
13
|
-
transition: opacity 0.
|
|
13
|
+
transition: opacity 0.125s 0.275s ease;
|
|
14
14
|
}
|
|
15
15
|
|
|
16
16
|
&::after {
|
|
17
17
|
top: ($hamburger-layer-height * 2) + ($hamburger-layer-spacing * 2);
|
|
18
|
-
transition: transform 0.
|
|
18
|
+
transition: transform 0.275s cubic-bezier(0.68, -0.55, 0.265, 1.55);
|
|
19
19
|
}
|
|
20
20
|
}
|
|
21
21
|
|
|
@@ -24,7 +24,7 @@
|
|
|
24
24
|
$y-offset: $hamburger-layer-spacing + $hamburger-layer-height;
|
|
25
25
|
|
|
26
26
|
transform: translate3d(0, $y-offset, 0) rotate(-135deg);
|
|
27
|
-
transition-delay: 0.
|
|
27
|
+
transition-delay: 0.075s;
|
|
28
28
|
|
|
29
29
|
&::before {
|
|
30
30
|
transition-delay: 0s;
|
|
@@ -33,7 +33,7 @@
|
|
|
33
33
|
|
|
34
34
|
&::after {
|
|
35
35
|
transform: translate3d(0, $y-offset * -2, 0) rotate(270deg);
|
|
36
|
-
transition-delay: 0.
|
|
36
|
+
transition-delay: 0.075s;
|
|
37
37
|
}
|
|
38
38
|
}
|
|
39
39
|
}
|
|
@@ -5,17 +5,17 @@
|
|
|
5
5
|
.hamburger--elastic {
|
|
6
6
|
.hamburger-inner {
|
|
7
7
|
top: $hamburger-layer-height / 2;
|
|
8
|
-
transition-duration: 0.
|
|
8
|
+
transition-duration: 0.275s;
|
|
9
9
|
transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
|
|
10
10
|
|
|
11
11
|
&::before {
|
|
12
12
|
top: $hamburger-layer-height + $hamburger-layer-spacing;
|
|
13
|
-
transition: opacity 0.
|
|
13
|
+
transition: opacity 0.125s 0.275s ease;
|
|
14
14
|
}
|
|
15
15
|
|
|
16
16
|
&::after {
|
|
17
17
|
top: ($hamburger-layer-height * 2) + ($hamburger-layer-spacing * 2);
|
|
18
|
-
transition: transform 0.
|
|
18
|
+
transition: transform 0.275s cubic-bezier(0.68, -0.55, 0.265, 1.55);
|
|
19
19
|
}
|
|
20
20
|
}
|
|
21
21
|
|
|
@@ -24,7 +24,7 @@
|
|
|
24
24
|
$y-offset: $hamburger-layer-spacing + $hamburger-layer-height;
|
|
25
25
|
|
|
26
26
|
transform: translate3d(0, $y-offset, 0) rotate(135deg);
|
|
27
|
-
transition-delay: 0.
|
|
27
|
+
transition-delay: 0.075s;
|
|
28
28
|
|
|
29
29
|
&::before {
|
|
30
30
|
transition-delay: 0s;
|
|
@@ -33,7 +33,7 @@
|
|
|
33
33
|
|
|
34
34
|
&::after {
|
|
35
35
|
transform: translate3d(0, $y-offset * -2, 0) rotate(-270deg);
|
|
36
|
-
transition-delay: 0.
|
|
36
|
+
transition-delay: 0.075s;
|
|
37
37
|
}
|
|
38
38
|
}
|
|
39
39
|
}
|
|
@@ -6,21 +6,21 @@
|
|
|
6
6
|
overflow: hidden;
|
|
7
7
|
|
|
8
8
|
.hamburger-inner {
|
|
9
|
-
transition: background-color 0.
|
|
9
|
+
transition: background-color 0.125s 0.175s ease-in;
|
|
10
10
|
|
|
11
11
|
&::before {
|
|
12
12
|
left: 0;
|
|
13
|
-
transition: transform 0.
|
|
14
|
-
top 0.05s 0.
|
|
15
|
-
left 0.
|
|
13
|
+
transition: transform 0.125s cubic-bezier(0.6, 0.04, 0.98, 0.335),
|
|
14
|
+
top 0.05s 0.125s linear,
|
|
15
|
+
left 0.125s 0.175s ease-in;
|
|
16
16
|
}
|
|
17
17
|
|
|
18
18
|
&::after {
|
|
19
19
|
top: ($hamburger-layer-height) + ($hamburger-layer-spacing);
|
|
20
20
|
right: 0;
|
|
21
|
-
transition: transform 0.
|
|
22
|
-
top 0.05s 0.
|
|
23
|
-
right 0.
|
|
21
|
+
transition: transform 0.125s cubic-bezier(0.6, 0.04, 0.98, 0.335),
|
|
22
|
+
top 0.05s 0.125s linear,
|
|
23
|
+
right 0.125s 0.175s ease-in;
|
|
24
24
|
}
|
|
25
25
|
}
|
|
26
26
|
|
|
@@ -34,18 +34,18 @@
|
|
|
34
34
|
left: $hamburger-layer-width * -2;
|
|
35
35
|
top: $hamburger-layer-width * 2;
|
|
36
36
|
transform: translate3d($hamburger-layer-width * 2, $hamburger-layer-width * -2, 0) rotate(-45deg);
|
|
37
|
-
transition: left 0.
|
|
38
|
-
top 0.05s 0.
|
|
39
|
-
transform 0.
|
|
37
|
+
transition: left 0.125s ease-out,
|
|
38
|
+
top 0.05s 0.125s linear,
|
|
39
|
+
transform 0.125s 0.175s cubic-bezier(0.075, 0.82, 0.165, 1);
|
|
40
40
|
}
|
|
41
41
|
|
|
42
42
|
&::after {
|
|
43
43
|
right: $hamburger-layer-width * -2;
|
|
44
44
|
top: $hamburger-layer-width * 2;
|
|
45
45
|
transform: translate3d($hamburger-layer-width * -2, $hamburger-layer-width * -2, 0) rotate(45deg);
|
|
46
|
-
transition: right 0.
|
|
47
|
-
top 0.05s 0.
|
|
48
|
-
transform 0.
|
|
46
|
+
transition: right 0.125s ease-out,
|
|
47
|
+
top 0.05s 0.125s linear,
|
|
48
|
+
transform 0.125s 0.175s cubic-bezier(0.075, 0.82, 0.165, 1);
|
|
49
49
|
}
|
|
50
50
|
}
|
|
51
51
|
}
|
|
@@ -6,21 +6,21 @@
|
|
|
6
6
|
overflow: hidden;
|
|
7
7
|
|
|
8
8
|
.hamburger-inner {
|
|
9
|
-
transition: background-color 0.
|
|
9
|
+
transition: background-color 0.125s 0.175s ease-in;
|
|
10
10
|
|
|
11
11
|
&::before {
|
|
12
12
|
left: 0;
|
|
13
|
-
transition: transform 0.
|
|
14
|
-
top 0.05s 0.
|
|
15
|
-
left 0.
|
|
13
|
+
transition: transform 0.125s cubic-bezier(0.6, 0.04, 0.98, 0.335),
|
|
14
|
+
top 0.05s 0.125s linear,
|
|
15
|
+
left 0.125s 0.175s ease-in;
|
|
16
16
|
}
|
|
17
17
|
|
|
18
18
|
&::after {
|
|
19
19
|
top: ($hamburger-layer-height) + ($hamburger-layer-spacing);
|
|
20
20
|
right: 0;
|
|
21
|
-
transition: transform 0.
|
|
22
|
-
top 0.05s 0.
|
|
23
|
-
right 0.
|
|
21
|
+
transition: transform 0.125s cubic-bezier(0.6, 0.04, 0.98, 0.335),
|
|
22
|
+
top 0.05s 0.125s linear,
|
|
23
|
+
right 0.125s 0.175s ease-in;
|
|
24
24
|
}
|
|
25
25
|
}
|
|
26
26
|
|
|
@@ -34,18 +34,18 @@
|
|
|
34
34
|
left: $hamburger-layer-width * -2;
|
|
35
35
|
top: $hamburger-layer-width * -2;
|
|
36
36
|
transform: translate3d($hamburger-layer-width * 2, $hamburger-layer-width * 2, 0) rotate(45deg);
|
|
37
|
-
transition: left 0.
|
|
38
|
-
top 0.05s 0.
|
|
39
|
-
transform 0.
|
|
37
|
+
transition: left 0.125s ease-out,
|
|
38
|
+
top 0.05s 0.125s linear,
|
|
39
|
+
transform 0.125s 0.175s cubic-bezier(0.075, 0.82, 0.165, 1);
|
|
40
40
|
}
|
|
41
41
|
|
|
42
42
|
&::after {
|
|
43
43
|
right: $hamburger-layer-width * -2;
|
|
44
44
|
top: $hamburger-layer-width * -2;
|
|
45
45
|
transform: translate3d($hamburger-layer-width * -2, $hamburger-layer-width * 2, 0) rotate(-45deg);
|
|
46
|
-
transition: right 0.
|
|
47
|
-
top 0.05s 0.
|
|
48
|
-
transform 0.
|
|
46
|
+
transition: right 0.125s ease-out,
|
|
47
|
+
top 0.05s 0.125s linear,
|
|
48
|
+
transform 0.125s 0.175s cubic-bezier(0.075, 0.82, 0.165, 1);
|
|
49
49
|
}
|
|
50
50
|
}
|
|
51
51
|
}
|