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.
Files changed (35) hide show
  1. checksums.yaml +4 -4
  2. data/CHANGELOG.md +5 -0
  3. data/README.md +28 -17
  4. data/_sass/hamburgers/hamburgers.scss +2 -2
  5. data/_sass/hamburgers/types/_3dx-r.scss +1 -1
  6. data/_sass/hamburgers/types/_3dx.scss +1 -1
  7. data/_sass/hamburgers/types/_3dy-r.scss +1 -1
  8. data/_sass/hamburgers/types/_3dy.scss +1 -1
  9. data/_sass/hamburgers/types/_arrowalt-r.scss +6 -6
  10. data/_sass/hamburgers/types/_arrowalt.scss +6 -6
  11. data/_sass/hamburgers/types/_collapse-r.scss +10 -10
  12. data/_sass/hamburgers/types/_collapse.scss +10 -10
  13. data/_sass/hamburgers/types/_elastic-r.scss +5 -5
  14. data/_sass/hamburgers/types/_elastic.scss +5 -5
  15. data/_sass/hamburgers/types/_emphatic-r.scss +13 -13
  16. data/_sass/hamburgers/types/_emphatic.scss +13 -13
  17. data/_sass/hamburgers/types/_slider-r.scss +1 -1
  18. data/_sass/hamburgers/types/_slider.scss +1 -1
  19. data/_sass/hamburgers/types/_spin-r.scss +7 -7
  20. data/_sass/hamburgers/types/_spin.scss +7 -7
  21. data/_sass/hamburgers/types/_spring-r.scss +9 -9
  22. data/_sass/hamburgers/types/_spring.scss +10 -10
  23. data/_sass/hamburgers/types/_squeeze.scss +10 -10
  24. data/_sass/hamburgers/types/_stand-r.scss +12 -12
  25. data/_sass/hamburgers/types/_stand.scss +12 -12
  26. data/_sass/hamburgers/types/_vortex-r.scss +1 -1
  27. data/_sass/hamburgers/types/_vortex.scss +1 -1
  28. data/bower.json +1 -1
  29. data/dist/example.html +72 -0
  30. data/dist/hamburgers.css +92 -92
  31. data/dist/hamburgers.min.css +1 -1
  32. data/gulpfile.js +1 -0
  33. data/lib/hamburgers/version.rb +1 -1
  34. data/package.json +10 -10
  35. metadata +2 -2
data/_sass/hamburgers/types/_slider-r.scss CHANGED
@@ -10,7 +10,7 @@
10
10
  top: $hamburger-layer-height + $hamburger-layer-spacing;
11
11
  transition-property: transform, opacity;
12
12
  transition-timing-function: ease;
13
- transition-duration: 0.2s;
13
+ transition-duration: 0.15s;
14
14
  }
15
15
 
16
16
  &::after {
data/_sass/hamburgers/types/_slider.scss CHANGED
@@ -10,7 +10,7 @@
10
10
  top: $hamburger-layer-height + $hamburger-layer-spacing;
11
11
  transition-property: transform, opacity;
12
12
  transition-timing-function: ease;
13
- transition-duration: 0.2s;
13
+ transition-duration: 0.15s;
14
14
  }
15
15
 
16
16
  &::after {
data/_sass/hamburgers/types/_spin-r.scss CHANGED
@@ -4,38 +4,38 @@
4
4
  */
5
5
  .hamburger--spin-r {
6
6
  .hamburger-inner {
7
- transition-duration: 0.3s;
7
+ transition-duration: 0.22s;
8
8
  transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
9
9
 
10
10
  &::before {
11
- transition: top 0.1s 0.34s ease-in,
11
+ transition: top 0.1s 0.25s ease-in,
12
12
  opacity 0.1s ease-in;
13
13
  }
14
14
 
15
15
  &::after {
16
- transition: bottom 0.1s 0.34s ease-in,
17
- transform 0.3s cubic-bezier(0.55, 0.055, 0.675, 0.19);
16
+ transition: bottom 0.1s 0.25s ease-in,
17
+ transform 0.22s cubic-bezier(0.55, 0.055, 0.675, 0.19);
18
18
  }
19
19
  }
20
20
 
21
21
  &.is-active {
22
22
  .hamburger-inner {
23
23
  transform: rotate(-225deg);
24
- transition-delay: 0.14s;
24
+ transition-delay: 0.12s;
25
25
  transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
26
26
 
27
27
  &::before {
28
28
  top: 0;
29
29
  opacity: 0;
30
30
  transition: top 0.1s ease-out,
31
- opacity 0.1s 0.14s ease-out;
31
+ opacity 0.1s 0.12s ease-out;
32
32
  }
33
33
 
34
34
  &::after {
35
35
  bottom: 0;
36
36
  transform: rotate(90deg);
37
37
  transition: bottom 0.1s ease-out,
38
- transform 0.3s 0.14s cubic-bezier(0.215, 0.61, 0.355, 1);
38
+ transform 0.22s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1);
39
39
  }
40
40
  }
41
41
  }
data/_sass/hamburgers/types/_spin.scss CHANGED
@@ -4,38 +4,38 @@
4
4
  */
5
5
  .hamburger--spin {
6
6
  .hamburger-inner {
7
- transition-duration: 0.3s;
7
+ transition-duration: 0.22s;
8
8
  transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
9
9
 
10
10
  &::before {
11
- transition: top 0.1s 0.34s ease-in,
11
+ transition: top 0.1s 0.25s ease-in,
12
12
  opacity 0.1s ease-in;
13
13
  }
14
14
 
15
15
  &::after {
16
- transition: bottom 0.1s 0.34s ease-in,
17
- transform 0.3s cubic-bezier(0.55, 0.055, 0.675, 0.19);
16
+ transition: bottom 0.1s 0.25s ease-in,
17
+ transform 0.22s cubic-bezier(0.55, 0.055, 0.675, 0.19);
18
18
  }
19
19
  }
20
20
 
21
21
  &.is-active {
22
22
  .hamburger-inner {
23
23
  transform: rotate(225deg);
24
- transition-delay: 0.14s;
24
+ transition-delay: 0.12s;
25
25
  transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
26
26
 
27
27
  &::before {
28
28
  top: 0;
29
29
  opacity: 0;
30
30
  transition: top 0.1s ease-out,
31
- opacity 0.1s 0.14s ease-out;
31
+ opacity 0.1s 0.12s ease-out;
32
32
  }
33
33
 
34
34
  &::after {
35
35
  bottom: 0;
36
36
  transform: rotate(-90deg);
37
37
  transition: bottom 0.1s ease-out,
38
- transform 0.3s 0.14s cubic-bezier(0.215, 0.61, 0.355, 1);
38
+ transform 0.22s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1);
39
39
  }
40
40
  }
41
41
  }
data/_sass/hamburgers/types/_spring-r.scss CHANGED
@@ -6,40 +6,40 @@
6
6
  .hamburger-inner {
7
7
  top: auto;
8
8
  bottom: 0;
9
- transition-duration: 0.15s;
9
+ transition-duration: 0.13s;
10
10
  transition-delay: 0s;
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.3s 0.3s cubic-bezier(0.33333, 0.66667, 0.66667, 1),
15
+ transition: top 0.2s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1),
16
16
  opacity 0s linear;
17
17
  }
18
18
 
19
19
  &::before {
20
- transition: top 0.12s 0.3s cubic-bezier(0.33333, 0.66667, 0.66667, 1),
21
- transform 0.15s cubic-bezier(0.55, 0.055, 0.675, 0.19);
20
+ transition: top 0.1s 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.32s;
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.3s cubic-bezier(0.33333, 0, 0.66667, 0.33333),
35
- opacity 0s 0.32s linear;
34
+ transition: top 0.2s cubic-bezier(0.33333, 0, 0.66667, 0.33333),
35
+ opacity 0s 0.22s linear;
36
36
  }
37
37
 
38
38
  &::before {
39
39
  top: 0;
40
40
  transform: rotate(90deg);
41
- transition: top 0.12s 0.18s cubic-bezier(0.33333, 0, 0.66667, 0.33333),
42
- transform 0.15s 0.32s cubic-bezier(0.215, 0.61, 0.355, 1);
41
+ transition: top 0.1s 0.15s cubic-bezier(0.33333, 0, 0.66667, 0.33333),
42
+ transform 0.13s 0.22s cubic-bezier(0.215, 0.61, 0.355, 1);
43
43
  }
44
44
  }
45
45
  }
data/_sass/hamburgers/types/_spring.scss CHANGED
@@ -5,37 +5,37 @@
5
5
  .hamburger--spring {
6
6
  .hamburger-inner {
7
7
  top: $hamburger-layer-height / 2;
8
- transition: background-color 0s 0.15s linear;
8
+ transition: background-color 0s 0.13s linear;
9
9
 
10
10
  &::before {
11
11
  top: $hamburger-layer-height + $hamburger-layer-spacing;
12
- transition: top 0.12s 0.3s cubic-bezier(0.33333, 0.66667, 0.66667, 1),
13
- transform 0.15s cubic-bezier(0.55, 0.055, 0.675, 0.19);
12
+ transition: top 0.1s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1),
13
+ transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19);
14
14
  }
15
15
 
16
16
  &::after {
17
17
  top: ($hamburger-layer-height * 2) + ($hamburger-layer-spacing * 2);
18
- transition: top 0.3s 0.3s cubic-bezier(0.33333, 0.66667, 0.66667, 1),
19
- transform 0.15s cubic-bezier(0.55, 0.055, 0.675, 0.19);
18
+ transition: top 0.2s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1),
19
+ transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19);
20
20
  }
21
21
  }
22
22
 
23
23
  &.is-active {
24
24
  .hamburger-inner {
25
- transition-delay: 0.32s;
25
+ transition-delay: 0.22s;
26
26
  background-color: transparent;
27
27
 
28
28
  &::before {
29
29
  top: 0;
30
- transition: top 0.12s 0.18s cubic-bezier(0.33333, 0, 0.66667, 0.33333),
31
- transform 0.15s 0.32s cubic-bezier(0.215, 0.61, 0.355, 1);
30
+ transition: top 0.1s 0.15s cubic-bezier(0.33333, 0, 0.66667, 0.33333),
31
+ transform 0.13s 0.22s cubic-bezier(0.215, 0.61, 0.355, 1);
32
32
  transform: translate3d(0, $hamburger-layer-spacing + $hamburger-layer-height, 0) rotate(45deg);
33
33
  }
34
34
 
35
35
  &::after {
36
36
  top: 0;
37
- transition: top 0.3s cubic-bezier(0.33333, 0, 0.66667, 0.33333),
38
- transform 0.15s 0.32s cubic-bezier(0.215, 0.61, 0.355, 1);
37
+ transition: top 0.2s cubic-bezier(0.33333, 0, 0.66667, 0.33333),
38
+ transform 0.13s 0.22s cubic-bezier(0.215, 0.61, 0.355, 1);
39
39
  transform: translate3d(0, $hamburger-layer-spacing + $hamburger-layer-height, 0) rotate(-45deg);
40
40
  }
41
41
  }
data/_sass/hamburgers/types/_squeeze.scss CHANGED
@@ -4,38 +4,38 @@
4
4
  */
5
5
  .hamburger--squeeze {
6
6
  .hamburger-inner {
7
- transition-duration: 0.1s;
7
+ transition-duration: 0.075s;
8
8
  transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
9
9
 
10
10
  &::before {
11
- transition: top 0.1s 0.14s ease,
12
- opacity 0.1s ease;
11
+ transition: top 0.075s 0.12s ease,
12
+ opacity 0.075s ease;
13
13
  }
14
14
 
15
15
  &::after {
16
- transition: bottom 0.1s 0.14s ease,
17
- transform 0.1s cubic-bezier(0.55, 0.055, 0.675, 0.19);
16
+ transition: bottom 0.075s 0.12s ease,
17
+ transform 0.075s cubic-bezier(0.55, 0.055, 0.675, 0.19);
18
18
  }
19
19
  }
20
20
 
21
21
  &.is-active {
22
22
  .hamburger-inner {
23
23
  transform: rotate(45deg);
24
- transition-delay: 0.14s;
24
+ transition-delay: 0.12s;
25
25
  transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
26
26
 
27
27
  &::before {
28
28
  top: 0;
29
29
  opacity: 0;
30
- transition: top 0.1s ease,
31
- opacity 0.1s 0.14s ease;
30
+ transition: top 0.075s ease,
31
+ opacity 0.075s 0.12s ease;
32
32
  }
33
33
 
34
34
  &::after {
35
35
  bottom: 0;
36
36
  transform: rotate(-90deg);
37
- transition: bottom 0.1s ease,
38
- transform 0.1s 0.14s cubic-bezier(0.215, 0.61, 0.355, 1);
37
+ transition: bottom 0.075s ease,
38
+ transform 0.075s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1);
39
39
  }
40
40
  }
41
41
  }
data/_sass/hamburgers/types/_stand-r.scss CHANGED
@@ -4,17 +4,17 @@
4
4
  */
5
5
  .hamburger--stand-r {
6
6
  .hamburger-inner {
7
- transition: transform 0.1s 0.22s cubic-bezier(0.55, 0.055, 0.675, 0.19),
8
- background-color 0s 0.1s linear;
7
+ transition: transform 0.075s 0.15s cubic-bezier(0.55, 0.055, 0.675, 0.19),
8
+ background-color 0s 0.075s linear;
9
9
 
10
10
  &::before {
11
- transition: top 0.1s 0.1s ease-in,
12
- transform 0.1s 0s cubic-bezier(0.55, 0.055, 0.675, 0.19);
11
+ transition: top 0.075s 0.075s ease-in,
12
+ transform 0.075s 0s cubic-bezier(0.55, 0.055, 0.675, 0.19);
13
13
  }
14
14
 
15
15
  &::after {
16
- transition: bottom 0.1s 0.1s ease-in,
17
- transform 0.1s 0s cubic-bezier(0.55, 0.055, 0.675, 0.19);
16
+ transition: bottom 0.075s 0.075s ease-in,
17
+ transform 0.075s 0s cubic-bezier(0.55, 0.055, 0.675, 0.19);
18
18
  }
19
19
  }
20
20
 
@@ -23,21 +23,21 @@
23
23
  transform: rotate(-90deg);
24
24
  background-color: transparent;
25
25
 
26
- transition: transform 0.1s 0s cubic-bezier(0.215, 0.61, 0.355, 1),
27
- background-color 0s 0.22s linear;
26
+ transition: transform 0.075s 0s cubic-bezier(0.215, 0.61, 0.355, 1),
27
+ background-color 0s 0.15s linear;
28
28
 
29
29
  &::before {
30
30
  top: 0;
31
31
  transform: rotate(-45deg);
32
- transition: top 0.1s 0.12s ease-out,
33
- transform 0.1s 0.22s cubic-bezier(0.215, 0.61, 0.355, 1);
32
+ transition: top 0.075s 0.1s ease-out,
33
+ transform 0.075s 0.15s cubic-bezier(0.215, 0.61, 0.355, 1);
34
34
  }
35
35
 
36
36
  &::after {
37
37
  bottom: 0;
38
38
  transform: rotate(45deg);
39
- transition: bottom 0.1s 0.12s ease-out,
40
- transform 0.1s 0.22s cubic-bezier(0.215, 0.61, 0.355, 1);
39
+ transition: bottom 0.075s 0.1s ease-out,
40
+ transform 0.075s 0.15s cubic-bezier(0.215, 0.61, 0.355, 1);
41
41
  }
42
42
  }
43
43
  }
data/_sass/hamburgers/types/_stand.scss CHANGED
@@ -4,17 +4,17 @@
4
4
  */
5
5
  .hamburger--stand {
6
6
  .hamburger-inner {
7
- transition: transform 0.1s 0.22s cubic-bezier(0.55, 0.055, 0.675, 0.19),
8
- background-color 0s 0.1s linear;
7
+ transition: transform 0.075s 0.15s cubic-bezier(0.55, 0.055, 0.675, 0.19),
8
+ background-color 0s 0.075s linear;
9
9
 
10
10
  &::before {
11
- transition: top 0.1s 0.1s ease-in,
12
- transform 0.1s 0s cubic-bezier(0.55, 0.055, 0.675, 0.19);
11
+ transition: top 0.075s 0.075s ease-in,
12
+ transform 0.075s 0s cubic-bezier(0.55, 0.055, 0.675, 0.19);
13
13
  }
14
14
 
15
15
  &::after {
16
- transition: bottom 0.1s 0.1s ease-in,
17
- transform 0.1s 0s cubic-bezier(0.55, 0.055, 0.675, 0.19);
16
+ transition: bottom 0.075s 0.075s ease-in,
17
+ transform 0.075s 0s cubic-bezier(0.55, 0.055, 0.675, 0.19);
18
18
  }
19
19
  }
20
20
 
@@ -23,21 +23,21 @@
23
23
  transform: rotate(90deg);
24
24
  background-color: transparent;
25
25
 
26
- transition: transform 0.1s 0s cubic-bezier(0.215, 0.61, 0.355, 1),
27
- background-color 0s 0.22s linear;
26
+ transition: transform 0.075s 0s cubic-bezier(0.215, 0.61, 0.355, 1),
27
+ background-color 0s 0.15s linear;
28
28
 
29
29
  &::before {
30
30
  top: 0;
31
31
  transform: rotate(-45deg);
32
- transition: top 0.1s 0.12s ease-out,
33
- transform 0.1s 0.22s cubic-bezier(0.215, 0.61, 0.355, 1);
32
+ transition: top 0.075s 0.1s ease-out,
33
+ transform 0.075s 0.15s cubic-bezier(0.215, 0.61, 0.355, 1);
34
34
  }
35
35
 
36
36
  &::after {
37
37
  bottom: 0;
38
38
  transform: rotate(45deg);
39
- transition: bottom 0.1s 0.12s ease-out,
40
- transform 0.1s 0.22s cubic-bezier(0.215, 0.61, 0.355, 1);
39
+ transition: bottom 0.075s 0.1s ease-out,
40
+ transform 0.075s 0.15s cubic-bezier(0.215, 0.61, 0.355, 1);
41
41
  }
42
42
  }
43
43
  }
data/_sass/hamburgers/types/_vortex-r.scss CHANGED
@@ -4,7 +4,7 @@
4
4
  */
5
5
  .hamburger--vortex-r {
6
6
  .hamburger-inner {
7
- transition-duration: 0.3s;
7
+ transition-duration: 0.2s;
8
8
  transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
9
9
 
10
10
  &::before,
data/_sass/hamburgers/types/_vortex.scss CHANGED
@@ -4,7 +4,7 @@
4
4
  */
5
5
  .hamburger--vortex {
6
6
  .hamburger-inner {
7
- transition-duration: 0.3s;
7
+ transition-duration: 0.2s;
8
8
  transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
9
9
 
10
10
  &::before,
data/bower.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "css-hamburgers",
3
- "version": "0.7.0",
3
+ "version": "0.8.1",
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
@@ -16,6 +16,42 @@
16
16
  </style>
17
17
  </head>
18
18
  <body>
19
+ <div class="hamburger hamburger--3dx">
20
+ <div class="hamburger-box">
21
+ <div class="hamburger-inner"></div>
22
+ </div>
23
+ </div>
24
+ <code>hamburger--3dx</code>
25
+
26
+ <br>
27
+
28
+ <div class="hamburger hamburger--3dx-r">
29
+ <div class="hamburger-box">
30
+ <div class="hamburger-inner"></div>
31
+ </div>
32
+ </div>
33
+ <code>hamburger--3dx-r</code>
34
+
35
+ <br>
36
+
37
+ <div class="hamburger hamburger--3dy">
38
+ <div class="hamburger-box">
39
+ <div class="hamburger-inner"></div>
40
+ </div>
41
+ </div>
42
+ <code>hamburger--3dy</code>
43
+
44
+ <br>
45
+
46
+ <div class="hamburger hamburger--3dy-r">
47
+ <div class="hamburger-box">
48
+ <div class="hamburger-inner"></div>
49
+ </div>
50
+ </div>
51
+ <code>hamburger--3dy-r</code>
52
+
53
+ <br>
54
+
19
55
  <div class="hamburger hamburger--arrow">
20
56
  <div class="hamburger-box">
21
57
  <div class="hamburger-inner"></div>
@@ -151,6 +187,42 @@
151
187
 
152
188
  <br>
153
189
 
190
+ <div class="hamburger hamburger--stand">
191
+ <div class="hamburger-box">
192
+ <div class="hamburger-inner"></div>
193
+ </div>
194
+ </div>
195
+ <code>hamburger--stand</code>
196
+
197
+ <br>
198
+
199
+ <div class="hamburger hamburger--stand-r">
200
+ <div class="hamburger-box">
201
+ <div class="hamburger-inner"></div>
202
+ </div>
203
+ </div>
204
+ <code>hamburger--stand-r</code>
205
+
206
+ <br>
207
+
208
+ <div class="hamburger hamburger--stand">
209
+ <div class="hamburger-box">
210
+ <div class="hamburger-inner"></div>
211
+ </div>
212
+ </div>
213
+ <code>hamburger--stand</code>
214
+
215
+ <br>
216
+
217
+ <div class="hamburger hamburger--stand-r">
218
+ <div class="hamburger-box">
219
+ <div class="hamburger-inner"></div>
220
+ </div>
221
+ </div>
222
+ <code>hamburger--stand-r</code>
223
+
224
+ <br>
225
+
154
226
  <div class="hamburger hamburger--squeeze">
155
227
  <div class="hamburger-box">
156
228
  <div class="hamburger-inner"></div>