timequake 1.0.8 → 2.0.2

Sign up to get free protection for your applications and to get access to all the features.
Files changed (50) hide show
  1. checksums.yaml +4 -4
  2. data/app/assets/stylesheets/hamburgers/_base.scss +86 -0
  3. data/app/assets/stylesheets/hamburgers/hamburgers.scss +118 -0
  4. data/app/assets/stylesheets/hamburgers/types/_3dx-r.scss +35 -0
  5. data/app/assets/stylesheets/hamburgers/types/_3dx.scss +35 -0
  6. data/app/assets/stylesheets/hamburgers/types/_3dxy-r.scss +35 -0
  7. data/app/assets/stylesheets/hamburgers/types/_3dxy.scss +35 -0
  8. data/app/assets/stylesheets/hamburgers/types/_3dy-r.scss +35 -0
  9. data/app/assets/stylesheets/hamburgers/types/_3dy.scss +35 -0
  10. data/app/assets/stylesheets/hamburgers/types/_arrow-r.scss +16 -0
  11. data/app/assets/stylesheets/hamburgers/types/_arrow.scss +16 -0
  12. data/app/assets/stylesheets/hamburgers/types/_arrowalt-r.scss +36 -0
  13. data/app/assets/stylesheets/hamburgers/types/_arrowalt.scss +36 -0
  14. data/app/assets/stylesheets/hamburgers/types/_arrowturn-r.scss +18 -0
  15. data/app/assets/stylesheets/hamburgers/types/_arrowturn.scss +18 -0
  16. data/app/assets/stylesheets/hamburgers/types/_boring.scss +30 -0
  17. data/app/assets/stylesheets/hamburgers/types/_collapse-r.scss +47 -0
  18. data/app/assets/stylesheets/hamburgers/types/_collapse.scss +47 -0
  19. data/app/assets/stylesheets/hamburgers/types/_elastic-r.scss +41 -0
  20. data/app/assets/stylesheets/hamburgers/types/_elastic.scss +41 -0
  21. data/app/assets/stylesheets/hamburgers/types/_emphatic-r.scss +53 -0
  22. data/app/assets/stylesheets/hamburgers/types/_emphatic.scss +53 -0
  23. data/app/assets/stylesheets/hamburgers/types/_minus.scss +34 -0
  24. data/app/assets/stylesheets/hamburgers/types/_slider-r.scss +38 -0
  25. data/app/assets/stylesheets/hamburgers/types/_slider.scss +38 -0
  26. data/app/assets/stylesheets/hamburgers/types/_spin-r.scss +43 -0
  27. data/app/assets/stylesheets/hamburgers/types/_spin.scss +43 -0
  28. data/app/assets/stylesheets/hamburgers/types/_spring-r.scss +47 -0
  29. data/app/assets/stylesheets/hamburgers/types/_spring.scss +44 -0
  30. data/app/assets/stylesheets/hamburgers/types/_squeeze.scss +43 -0
  31. data/app/assets/stylesheets/hamburgers/types/_stand-r.scss +45 -0
  32. data/app/assets/stylesheets/hamburgers/types/_stand.scss +45 -0
  33. data/app/assets/stylesheets/hamburgers/types/_vortex-r.scss +48 -0
  34. data/app/assets/stylesheets/hamburgers/types/_vortex.scss +48 -0
  35. data/app/assets/stylesheets/timequake/_index.scss +7 -1
  36. data/app/assets/stylesheets/timequake/buttons.scss +3 -1
  37. data/app/assets/stylesheets/timequake/colors.scss +1 -0
  38. data/app/assets/stylesheets/timequake/display.scss +143 -0
  39. data/app/assets/stylesheets/timequake/flex.scss +128 -0
  40. data/app/assets/stylesheets/timequake/forms.scss +18 -0
  41. data/app/assets/stylesheets/timequake/layout.scss +59 -0
  42. data/app/assets/stylesheets/timequake/margin.scss +246 -0
  43. data/app/assets/stylesheets/timequake/padding.scss +246 -0
  44. data/app/assets/stylesheets/timequake/typography.scss +58 -0
  45. data/app/assets/stylesheets/timequake/universal.scss +17 -1
  46. data/app/assets/stylesheets/timequake/visibility.scss +39 -0
  47. data/lib/generators/timequake/templates/timequake_overrides.scss +77 -0
  48. data/lib/timequake/version.rb +1 -1
  49. data/timequake-2.0.1.gem +0 -0
  50. metadata +43 -3
@@ -0,0 +1,47 @@
1
+ @if index($hamburger-types, collapse) {
2
+ /*
3
+ * Collapse
4
+ */
5
+ .hamburger--collapse {
6
+ .hamburger-inner {
7
+ top: auto;
8
+ bottom: 0;
9
+ transition-duration: 0.13s;
10
+ transition-delay: 0.13s;
11
+ transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
12
+
13
+ &::after {
14
+ top: ($hamburger-layer-spacing * 2 + $hamburger-layer-height * 2) * -1;
15
+ transition: top 0.2s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1),
16
+ opacity 0.1s linear;
17
+ }
18
+
19
+ &::before {
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
+ }
23
+ }
24
+
25
+ &.is-active {
26
+ .hamburger-inner {
27
+ transform: translate3d(0, ($hamburger-layer-spacing + $hamburger-layer-height) * -1, 0) rotate(-45deg);
28
+ transition-delay: 0.22s;
29
+ transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
30
+
31
+ &::after {
32
+ top: 0;
33
+ opacity: 0;
34
+ transition: top 0.2s cubic-bezier(0.33333, 0, 0.66667, 0.33333),
35
+ opacity 0.1s 0.22s linear;
36
+ }
37
+
38
+ &::before {
39
+ top: 0;
40
+ transform: rotate(-90deg);
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
+ }
44
+ }
45
+ }
46
+ }
47
+ }
@@ -0,0 +1,41 @@
1
+ @if index($hamburger-types, elastic-r) {
2
+ /*
3
+ * Elastic Reverse
4
+ */
5
+ .hamburger--elastic-r {
6
+ .hamburger-inner {
7
+ top: $hamburger-layer-height / 2;
8
+ transition-duration: 0.275s;
9
+ transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
10
+
11
+ &::before {
12
+ top: $hamburger-layer-height + $hamburger-layer-spacing;
13
+ transition: opacity 0.125s 0.275s ease;
14
+ }
15
+
16
+ &::after {
17
+ top: ($hamburger-layer-height * 2) + ($hamburger-layer-spacing * 2);
18
+ transition: transform 0.275s cubic-bezier(0.68, -0.55, 0.265, 1.55);
19
+ }
20
+ }
21
+
22
+ &.is-active {
23
+ .hamburger-inner {
24
+ $y-offset: $hamburger-layer-spacing + $hamburger-layer-height;
25
+
26
+ transform: translate3d(0, $y-offset, 0) rotate(-135deg);
27
+ transition-delay: 0.075s;
28
+
29
+ &::before {
30
+ transition-delay: 0s;
31
+ opacity: 0;
32
+ }
33
+
34
+ &::after {
35
+ transform: translate3d(0, $y-offset * -2, 0) rotate(270deg);
36
+ transition-delay: 0.075s;
37
+ }
38
+ }
39
+ }
40
+ }
41
+ }
@@ -0,0 +1,41 @@
1
+ @if index($hamburger-types, elastic) {
2
+ /*
3
+ * Elastic
4
+ */
5
+ .hamburger--elastic {
6
+ .hamburger-inner {
7
+ top: $hamburger-layer-height / 2;
8
+ transition-duration: 0.275s;
9
+ transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
10
+
11
+ &::before {
12
+ top: $hamburger-layer-height + $hamburger-layer-spacing;
13
+ transition: opacity 0.125s 0.275s ease;
14
+ }
15
+
16
+ &::after {
17
+ top: ($hamburger-layer-height * 2) + ($hamburger-layer-spacing * 2);
18
+ transition: transform 0.275s cubic-bezier(0.68, -0.55, 0.265, 1.55);
19
+ }
20
+ }
21
+
22
+ &.is-active {
23
+ .hamburger-inner {
24
+ $y-offset: $hamburger-layer-spacing + $hamburger-layer-height;
25
+
26
+ transform: translate3d(0, $y-offset, 0) rotate(135deg);
27
+ transition-delay: 0.075s;
28
+
29
+ &::before {
30
+ transition-delay: 0s;
31
+ opacity: 0;
32
+ }
33
+
34
+ &::after {
35
+ transform: translate3d(0, $y-offset * -2, 0) rotate(-270deg);
36
+ transition-delay: 0.075s;
37
+ }
38
+ }
39
+ }
40
+ }
41
+ }
@@ -0,0 +1,53 @@
1
+ @if index($hamburger-types, emphatic-r) {
2
+ /*
3
+ * Emphatic Reverse
4
+ */
5
+ .hamburger--emphatic-r {
6
+ overflow: hidden;
7
+
8
+ .hamburger-inner {
9
+ transition: background-color 0.125s 0.175s ease-in;
10
+
11
+ &::before {
12
+ 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
+ }
17
+
18
+ &::after {
19
+ top: ($hamburger-layer-height) + ($hamburger-layer-spacing);
20
+ 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
+ }
25
+ }
26
+
27
+ &.is-active {
28
+ .hamburger-inner {
29
+ transition-delay: 0s;
30
+ transition-timing-function: ease-out;
31
+ background-color: transparent !important;
32
+
33
+ &::before {
34
+ left: $hamburger-layer-width * -2;
35
+ top: $hamburger-layer-width * 2;
36
+ transform: translate3d($hamburger-layer-width * 2, $hamburger-layer-width * -2, 0) rotate(-45deg);
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
+ }
41
+
42
+ &::after {
43
+ right: $hamburger-layer-width * -2;
44
+ top: $hamburger-layer-width * 2;
45
+ transform: translate3d($hamburger-layer-width * -2, $hamburger-layer-width * -2, 0) rotate(45deg);
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
+ }
50
+ }
51
+ }
52
+ }
53
+ }
@@ -0,0 +1,53 @@
1
+ @if index($hamburger-types, emphatic) {
2
+ /*
3
+ * Emphatic
4
+ */
5
+ .hamburger--emphatic {
6
+ overflow: hidden;
7
+
8
+ .hamburger-inner {
9
+ transition: background-color 0.125s 0.175s ease-in;
10
+
11
+ &::before {
12
+ 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
+ }
17
+
18
+ &::after {
19
+ top: ($hamburger-layer-height) + ($hamburger-layer-spacing);
20
+ 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
+ }
25
+ }
26
+
27
+ &.is-active {
28
+ .hamburger-inner {
29
+ transition-delay: 0s;
30
+ transition-timing-function: ease-out;
31
+ background-color: transparent !important;
32
+
33
+ &::before {
34
+ left: $hamburger-layer-width * -2;
35
+ top: $hamburger-layer-width * -2;
36
+ transform: translate3d($hamburger-layer-width * 2, $hamburger-layer-width * 2, 0) rotate(45deg);
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
+ }
41
+
42
+ &::after {
43
+ right: $hamburger-layer-width * -2;
44
+ top: $hamburger-layer-width * -2;
45
+ transform: translate3d($hamburger-layer-width * -2, $hamburger-layer-width * 2, 0) rotate(-45deg);
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
+ }
50
+ }
51
+ }
52
+ }
53
+ }
@@ -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
+ }
@@ -0,0 +1,38 @@
1
+ @if index($hamburger-types, slider-r) {
2
+ /*
3
+ * Slider Reverse
4
+ */
5
+ .hamburger--slider-r {
6
+ .hamburger-inner {
7
+ top: $hamburger-layer-height / 2;
8
+
9
+ &::before {
10
+ top: $hamburger-layer-height + $hamburger-layer-spacing;
11
+ transition-property: transform, opacity;
12
+ transition-timing-function: ease;
13
+ transition-duration: 0.15s;
14
+ }
15
+
16
+ &::after {
17
+ top: ($hamburger-layer-height * 2) + ($hamburger-layer-spacing * 2);
18
+ }
19
+ }
20
+
21
+ &.is-active {
22
+ .hamburger-inner {
23
+ $y-offset: $hamburger-layer-spacing + $hamburger-layer-height;
24
+
25
+ transform: translate3d(0, $y-offset, 0) rotate(-45deg);
26
+
27
+ &::before {
28
+ transform: rotate(45deg) translate3d($hamburger-layer-width / 7, $hamburger-layer-spacing * -1, 0);
29
+ opacity: 0;
30
+ }
31
+
32
+ &::after {
33
+ transform: translate3d(0, $y-offset * -2, 0) rotate(90deg);
34
+ }
35
+ }
36
+ }
37
+ }
38
+ }
@@ -0,0 +1,38 @@
1
+ @if index($hamburger-types, slider) {
2
+ /*
3
+ * Slider
4
+ */
5
+ .hamburger--slider {
6
+ .hamburger-inner {
7
+ top: $hamburger-layer-height / 2;
8
+
9
+ &::before {
10
+ top: $hamburger-layer-height + $hamburger-layer-spacing;
11
+ transition-property: transform, opacity;
12
+ transition-timing-function: ease;
13
+ transition-duration: 0.15s;
14
+ }
15
+
16
+ &::after {
17
+ top: ($hamburger-layer-height * 2) + ($hamburger-layer-spacing * 2);
18
+ }
19
+ }
20
+
21
+ &.is-active {
22
+ .hamburger-inner {
23
+ $y-offset: $hamburger-layer-spacing + $hamburger-layer-height;
24
+
25
+ transform: translate3d(0, $y-offset, 0) rotate(45deg);
26
+
27
+ &::before {
28
+ transform: rotate(-45deg) translate3d($hamburger-layer-width / -7, $hamburger-layer-spacing * -1, 0);
29
+ opacity: 0;
30
+ }
31
+
32
+ &::after {
33
+ transform: translate3d(0, $y-offset * -2, 0) rotate(-90deg);
34
+ }
35
+ }
36
+ }
37
+ }
38
+ }
@@ -0,0 +1,43 @@
1
+ @if index($hamburger-types, spin-r) {
2
+ /*
3
+ * Spin Reverse
4
+ */
5
+ .hamburger--spin-r {
6
+ .hamburger-inner {
7
+ transition-duration: 0.22s;
8
+ transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
9
+
10
+ &::before {
11
+ transition: top 0.1s 0.25s ease-in,
12
+ opacity 0.1s ease-in;
13
+ }
14
+
15
+ &::after {
16
+ transition: bottom 0.1s 0.25s ease-in,
17
+ transform 0.22s cubic-bezier(0.55, 0.055, 0.675, 0.19);
18
+ }
19
+ }
20
+
21
+ &.is-active {
22
+ .hamburger-inner {
23
+ transform: rotate(-225deg);
24
+ transition-delay: 0.12s;
25
+ transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
26
+
27
+ &::before {
28
+ top: 0;
29
+ opacity: 0;
30
+ transition: top 0.1s ease-out,
31
+ opacity 0.1s 0.12s ease-out;
32
+ }
33
+
34
+ &::after {
35
+ bottom: 0;
36
+ transform: rotate(90deg);
37
+ transition: bottom 0.1s ease-out,
38
+ transform 0.22s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1);
39
+ }
40
+ }
41
+ }
42
+ }
43
+ }
@@ -0,0 +1,43 @@
1
+ @if index($hamburger-types, spin) {
2
+ /*
3
+ * Spin
4
+ */
5
+ .hamburger--spin {
6
+ .hamburger-inner {
7
+ transition-duration: 0.22s;
8
+ transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
9
+
10
+ &::before {
11
+ transition: top 0.1s 0.25s ease-in,
12
+ opacity 0.1s ease-in;
13
+ }
14
+
15
+ &::after {
16
+ transition: bottom 0.1s 0.25s ease-in,
17
+ transform 0.22s cubic-bezier(0.55, 0.055, 0.675, 0.19);
18
+ }
19
+ }
20
+
21
+ &.is-active {
22
+ .hamburger-inner {
23
+ transform: rotate(225deg);
24
+ transition-delay: 0.12s;
25
+ transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
26
+
27
+ &::before {
28
+ top: 0;
29
+ opacity: 0;
30
+ transition: top 0.1s ease-out,
31
+ opacity 0.1s 0.12s ease-out;
32
+ }
33
+
34
+ &::after {
35
+ bottom: 0;
36
+ transform: rotate(-90deg);
37
+ transition: bottom 0.1s ease-out,
38
+ transform 0.22s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1);
39
+ }
40
+ }
41
+ }
42
+ }
43
+ }
@@ -0,0 +1,47 @@
1
+ @if index($hamburger-types, spring-r) {
2
+ /*
3
+ * Spring Reverse
4
+ */
5
+ .hamburger--spring-r {
6
+ .hamburger-inner {
7
+ top: auto;
8
+ bottom: 0;
9
+ transition-duration: 0.13s;
10
+ transition-delay: 0s;
11
+ transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
12
+
13
+ &::after {
14
+ top: ($hamburger-layer-spacing * 2 + $hamburger-layer-height * 2) * -1;
15
+ transition: top 0.2s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1),
16
+ opacity 0s linear;
17
+ }
18
+
19
+ &::before {
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
+ }
23
+ }
24
+
25
+ &.is-active {
26
+ .hamburger-inner {
27
+ transform: translate3d(0, ($hamburger-layer-spacing + $hamburger-layer-height) * -1, 0) rotate(-45deg);
28
+ transition-delay: 0.22s;
29
+ transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
30
+
31
+ &::after {
32
+ top: 0;
33
+ opacity: 0;
34
+ transition: top 0.2s cubic-bezier(0.33333, 0, 0.66667, 0.33333),
35
+ opacity 0s 0.22s linear;
36
+ }
37
+
38
+ &::before {
39
+ top: 0;
40
+ transform: rotate(90deg);
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
+ }
44
+ }
45
+ }
46
+ }
47
+ }
@@ -0,0 +1,44 @@
1
+ @if index($hamburger-types, spring) {
2
+ /*
3
+ * Spring
4
+ */
5
+ .hamburger--spring {
6
+ .hamburger-inner {
7
+ top: $hamburger-layer-height / 2;
8
+ transition: background-color 0s 0.13s linear;
9
+
10
+ &::before {
11
+ top: $hamburger-layer-height + $hamburger-layer-spacing;
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
+ }
15
+
16
+ &::after {
17
+ top: ($hamburger-layer-height * 2) + ($hamburger-layer-spacing * 2);
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
+ }
21
+ }
22
+
23
+ &.is-active {
24
+ .hamburger-inner {
25
+ transition-delay: 0.22s;
26
+ background-color: transparent !important;
27
+
28
+ &::before {
29
+ top: 0;
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
+ transform: translate3d(0, $hamburger-layer-spacing + $hamburger-layer-height, 0) rotate(45deg);
33
+ }
34
+
35
+ &::after {
36
+ top: 0;
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
+ transform: translate3d(0, $hamburger-layer-spacing + $hamburger-layer-height, 0) rotate(-45deg);
40
+ }
41
+ }
42
+ }
43
+ }
44
+ }
@@ -0,0 +1,43 @@
1
+ @if index($hamburger-types, squeeze) {
2
+ /*
3
+ * Squeeze
4
+ */
5
+ .hamburger--squeeze {
6
+ .hamburger-inner {
7
+ transition-duration: 0.075s;
8
+ transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
9
+
10
+ &::before {
11
+ transition: top 0.075s 0.12s ease,
12
+ opacity 0.075s ease;
13
+ }
14
+
15
+ &::after {
16
+ transition: bottom 0.075s 0.12s ease,
17
+ transform 0.075s cubic-bezier(0.55, 0.055, 0.675, 0.19);
18
+ }
19
+ }
20
+
21
+ &.is-active {
22
+ .hamburger-inner {
23
+ transform: rotate(45deg);
24
+ transition-delay: 0.12s;
25
+ transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
26
+
27
+ &::before {
28
+ top: 0;
29
+ opacity: 0;
30
+ transition: top 0.075s ease,
31
+ opacity 0.075s 0.12s ease;
32
+ }
33
+
34
+ &::after {
35
+ bottom: 0;
36
+ transform: rotate(-90deg);
37
+ transition: bottom 0.075s ease,
38
+ transform 0.075s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1);
39
+ }
40
+ }
41
+ }
42
+ }
43
+ }
@@ -0,0 +1,45 @@
1
+ @if index($hamburger-types, stand-r) {
2
+ /*
3
+ * Stand Reverse
4
+ */
5
+ .hamburger--stand-r {
6
+ .hamburger-inner {
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
+
10
+ &::before {
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
+ }
14
+
15
+ &::after {
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
+ }
19
+ }
20
+
21
+ &.is-active {
22
+ .hamburger-inner {
23
+ transform: rotate(-90deg);
24
+ background-color: transparent !important;
25
+
26
+ transition: transform 0.075s 0s cubic-bezier(0.215, 0.61, 0.355, 1),
27
+ background-color 0s 0.15s linear;
28
+
29
+ &::before {
30
+ top: 0;
31
+ transform: rotate(-45deg);
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
+ }
35
+
36
+ &::after {
37
+ bottom: 0;
38
+ transform: rotate(45deg);
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
+ }
42
+ }
43
+ }
44
+ }
45
+ }
@@ -0,0 +1,45 @@
1
+ @if index($hamburger-types, stand) {
2
+ /*
3
+ * Stand
4
+ */
5
+ .hamburger--stand {
6
+ .hamburger-inner {
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
+
10
+ &::before {
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
+ }
14
+
15
+ &::after {
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
+ }
19
+ }
20
+
21
+ &.is-active {
22
+ .hamburger-inner {
23
+ transform: rotate(90deg);
24
+ background-color: transparent !important;
25
+
26
+ transition: transform 0.075s 0s cubic-bezier(0.215, 0.61, 0.355, 1),
27
+ background-color 0s 0.15s linear;
28
+
29
+ &::before {
30
+ top: 0;
31
+ transform: rotate(-45deg);
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
+ }
35
+
36
+ &::after {
37
+ bottom: 0;
38
+ transform: rotate(45deg);
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
+ }
42
+ }
43
+ }
44
+ }
45
+ }