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
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: dc6ad3f780c6be47d8dd8b092f6abb0072fcd215c90cb5294923eb6bbd6f0211
4
- data.tar.gz: d8f4dec0b0e793af54e63616445fec22cb1fecafe206262d51b81005bb578202
3
+ metadata.gz: 0b92cb66523dd4ab7bfadcb33fb97e67e372d286f481823987c8c281c8f05c54
4
+ data.tar.gz: 1ee63a1c634f52a0bf641e44ba0736dfb49e47763e96735cf1234ab3840405e2
5
5
  SHA512:
6
- metadata.gz: 12a489fb2fcf13a93a4cadf6daca3e1ee83642824d942efc44c7bcfeb2f3dfb6aed6278b326ba41c4997295f6f291ed32c0b9e6c8f090e4d710e30793c6d814b
7
- data.tar.gz: 3b35ca728ff971933587b66924d0a1f4f87efcf03eba8eb1c5d3549f51ae324c2ff701818f570576f2ddabda8d0a2037d27d805b5ec396a7121a0075d9f56e84
6
+ metadata.gz: 10ee1d30db753803783fbfc9550d294ec786edb2c2fef45439d032e50b5c288cd0fe150d58c288ee1109d330e270b1142024d73567d1aa85d9744d85b398cea4
7
+ data.tar.gz: b3b0821410c61121428086f08da0551abbbc7f6c94cad0410fdf6d3c7930c2b8e2f073e6a8d2bc61f5a244e997e8cda8f8acbce9a02e7c1bf8c527ab9c5dd9d8
@@ -0,0 +1,86 @@
1
+ // Hamburger
2
+ // ==================================================
3
+ .hamburger {
4
+ padding: $hamburger-padding-y $hamburger-padding-x;
5
+ display: inline-block;
6
+ cursor: pointer;
7
+
8
+ transition-property: opacity, filter;
9
+ transition-duration: 0.15s;
10
+ transition-timing-function: linear;
11
+
12
+ // Normalize (<button>)
13
+ font: inherit;
14
+ color: inherit;
15
+ text-transform: none;
16
+ background-color: transparent;
17
+ border: 0;
18
+ margin: 0;
19
+ overflow: visible;
20
+
21
+ &:hover {
22
+ @if $hamburger-hover-use-filter == true {
23
+ filter: $hamburger-hover-filter;
24
+ }
25
+ @else {
26
+ opacity: $hamburger-hover-opacity;
27
+ }
28
+ }
29
+
30
+ &.is-active {
31
+ &:hover {
32
+ @if $hamburger-hover-use-filter == true {
33
+ filter: $hamburger-active-hover-filter;
34
+ }
35
+ @else {
36
+ opacity: $hamburger-active-hover-opacity;
37
+ }
38
+ }
39
+
40
+ .hamburger-inner,
41
+ .hamburger-inner::before,
42
+ .hamburger-inner::after {
43
+ background-color: $hamburger-active-layer-color;
44
+ }
45
+ }
46
+ }
47
+
48
+ .hamburger-box {
49
+ width: $hamburger-layer-width;
50
+ height: $hamburger-layer-height * 3 + $hamburger-layer-spacing * 2;
51
+ display: inline-block;
52
+ position: relative;
53
+ }
54
+
55
+ .hamburger-inner {
56
+ display: block;
57
+ top: 50%;
58
+ margin-top: $hamburger-layer-height / -2;
59
+
60
+ &,
61
+ &::before,
62
+ &::after {
63
+ width: $hamburger-layer-width;
64
+ height: $hamburger-layer-height;
65
+ background-color: $hamburger-layer-color;
66
+ border-radius: $hamburger-layer-border-radius;
67
+ position: absolute;
68
+ transition-property: transform;
69
+ transition-duration: 0.15s;
70
+ transition-timing-function: ease;
71
+ }
72
+
73
+ &::before,
74
+ &::after {
75
+ content: "";
76
+ display: block;
77
+ }
78
+
79
+ &::before {
80
+ top: ($hamburger-layer-spacing + $hamburger-layer-height) * -1;
81
+ }
82
+
83
+ &::after {
84
+ bottom: ($hamburger-layer-spacing + $hamburger-layer-height) * -1;
85
+ }
86
+ }
@@ -0,0 +1,118 @@
1
+ @charset "UTF-8";
2
+ /*!
3
+ * Hamburgers
4
+ * @description Tasty CSS-animated hamburgers
5
+ * @author Jonathan Suh @jonsuh
6
+ * @site https://jonsuh.com/hamburgers
7
+ * @link https://github.com/jonsuh/hamburgers
8
+ */
9
+
10
+ // Settings
11
+ // ==================================================
12
+ $hamburger-padding-x : 15px !default;
13
+ $hamburger-padding-y : 15px !default;
14
+ $hamburger-layer-width : 40px !default;
15
+ $hamburger-layer-height : 4px !default;
16
+ $hamburger-layer-spacing : 6px !default;
17
+ $hamburger-layer-color : #000 !default;
18
+ $hamburger-layer-border-radius : 4px !default;
19
+ $hamburger-hover-opacity : 0.7 !default;
20
+ $hamburger-active-layer-color : $hamburger-layer-color !default;
21
+ $hamburger-active-hover-opacity: $hamburger-hover-opacity !default;
22
+
23
+ // To use CSS filters as the hover effect instead of opacity,
24
+ // set $hamburger-hover-use-filter as true and
25
+ // change the value of $hamburger-hover-filter accordingly.
26
+ $hamburger-hover-use-filter : false !default;
27
+ $hamburger-hover-filter : opacity(50%) !default;
28
+ $hamburger-active-hover-filter: $hamburger-hover-filter !default;
29
+
30
+ // Types (Remove or comment out what you don’t need)
31
+ // ==================================================
32
+ $hamburger-types: (
33
+ 3dx,
34
+ 3dx-r,
35
+ 3dy,
36
+ 3dy-r,
37
+ 3dxy,
38
+ 3dxy-r,
39
+ arrow,
40
+ arrow-r,
41
+ arrowalt,
42
+ arrowalt-r,
43
+ arrowturn,
44
+ arrowturn-r,
45
+ boring,
46
+ collapse,
47
+ collapse-r,
48
+ elastic,
49
+ elastic-r,
50
+ emphatic,
51
+ emphatic-r,
52
+ minus,
53
+ slider,
54
+ slider-r,
55
+ spin,
56
+ spin-r,
57
+ spring,
58
+ spring-r,
59
+ stand,
60
+ stand-r,
61
+ squeeze,
62
+ vortex,
63
+ vortex-r
64
+ ) !default;
65
+
66
+ // Base Hamburger (We need this)
67
+ // ==================================================
68
+ @import "base";
69
+
70
+ // Hamburger types
71
+ // ==================================================
72
+ @import "types/3dx";
73
+ @import "types/3dx-r";
74
+ @import "types/3dy";
75
+ @import "types/3dy-r";
76
+ @import "types/3dxy";
77
+ @import "types/3dxy-r";
78
+ @import "types/arrow";
79
+ @import "types/arrow-r";
80
+ @import "types/arrowalt";
81
+ @import "types/arrowalt-r";
82
+ @import "types/arrowturn";
83
+ @import "types/arrowturn-r";
84
+ @import "types/boring";
85
+ @import "types/collapse";
86
+ @import "types/collapse-r";
87
+ @import "types/elastic";
88
+ @import "types/elastic-r";
89
+ @import "types/emphatic";
90
+ @import "types/emphatic-r";
91
+ @import "types/minus";
92
+ @import "types/slider";
93
+ @import "types/slider-r";
94
+ @import "types/spin";
95
+ @import "types/spin-r";
96
+ @import "types/spring";
97
+ @import "types/spring-r";
98
+ @import "types/stand";
99
+ @import "types/stand-r";
100
+ @import "types/squeeze";
101
+ @import "types/vortex";
102
+ @import "types/vortex-r";
103
+
104
+ // ==================================================
105
+ // Cooking up additional types:
106
+ //
107
+ // The Sass for each hamburger type should be nested
108
+ // inside an @if directive to check whether or not
109
+ // it exists in $hamburger-types so only the CSS for
110
+ // included types are generated.
111
+ //
112
+ // e.g. hamburgers/types/_new-type.scss
113
+ //
114
+ // @if index($hamburger-types, new-type) {
115
+ // .hamburger--new-type {
116
+ // ...
117
+ // }
118
+ // }
@@ -0,0 +1,35 @@
1
+ @if index($hamburger-types, 3dx-r) {
2
+ /*
3
+ * 3DX Reverse
4
+ */
5
+ .hamburger--3dx-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 !important;
23
+ transform: 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,35 @@
1
+ @if index($hamburger-types, 3dx) {
2
+ /*
3
+ * 3DX
4
+ */
5
+ .hamburger--3dx {
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 !important;
23
+ transform: 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,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 !important;
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 !important;
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,35 @@
1
+ @if index($hamburger-types, 3dy-r) {
2
+ /*
3
+ * 3DY Reverse
4
+ */
5
+ .hamburger--3dy-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 !important;
23
+ transform: rotateX(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, 3dy) {
2
+ /*
3
+ * 3DY
4
+ */
5
+ .hamburger--3dy {
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 !important;
23
+ transform: rotateX(-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
+ @if index($hamburger-types, arrow-r) {
2
+ /*
3
+ * Arrow Right
4
+ */
5
+ .hamburger--arrow-r.is-active {
6
+ .hamburger-inner {
7
+ &::before {
8
+ transform: translate3d($hamburger-layer-width * 0.2, 0, 0) rotate(45deg) scale(0.7, 1);
9
+ }
10
+
11
+ &::after {
12
+ transform: translate3d($hamburger-layer-width * 0.2, 0, 0) rotate(-45deg) scale(0.7, 1);
13
+ }
14
+ }
15
+ }
16
+ }
@@ -0,0 +1,16 @@
1
+ @if index($hamburger-types, arrow) {
2
+ /*
3
+ * Arrow
4
+ */
5
+ .hamburger--arrow.is-active {
6
+ .hamburger-inner {
7
+ &::before {
8
+ transform: translate3d($hamburger-layer-width * -0.2, 0, 0) rotate(-45deg) scale(0.7, 1);
9
+ }
10
+
11
+ &::after {
12
+ transform: translate3d($hamburger-layer-width * -0.2, 0, 0) rotate(45deg) scale(0.7, 1);
13
+ }
14
+ }
15
+ }
16
+ }
@@ -0,0 +1,36 @@
1
+ @if index($hamburger-types, arrowalt-r) {
2
+ /*
3
+ * Arrow Alt Right
4
+ */
5
+ .hamburger--arrowalt-r {
6
+ .hamburger-inner {
7
+ &::before {
8
+ transition: top 0.1s 0.1s ease,
9
+ transform 0.1s cubic-bezier(0.165, 0.84, 0.44, 1);
10
+ }
11
+
12
+ &::after {
13
+ transition: bottom 0.1s 0.1s ease,
14
+ transform 0.1s cubic-bezier(0.165, 0.84, 0.44, 1);
15
+ }
16
+ }
17
+
18
+ &.is-active {
19
+ .hamburger-inner {
20
+ &::before {
21
+ top: 0;
22
+ transform: translate3d($hamburger-layer-width * 0.2, $hamburger-layer-width * -0.25, 0) rotate(45deg) scale(0.7, 1);
23
+ transition: top 0.1s ease,
24
+ transform 0.1s 0.1s cubic-bezier(0.895, 0.03, 0.685, 0.22);
25
+ }
26
+
27
+ &::after {
28
+ bottom: 0;
29
+ transform: translate3d($hamburger-layer-width * 0.2, $hamburger-layer-width * 0.25, 0) rotate(-45deg) scale(0.7, 1);
30
+ transition: bottom 0.1s ease,
31
+ transform 0.1s 0.1s cubic-bezier(0.895, 0.03, 0.685, 0.22);
32
+ }
33
+ }
34
+ }
35
+ }
36
+ }
@@ -0,0 +1,36 @@
1
+ @if index($hamburger-types, arrowalt) {
2
+ /*
3
+ * Arrow Alt
4
+ */
5
+ .hamburger--arrowalt {
6
+ .hamburger-inner {
7
+ &::before {
8
+ transition: top 0.1s 0.1s ease,
9
+ transform 0.1s cubic-bezier(0.165, 0.84, 0.44, 1);
10
+ }
11
+
12
+ &::after {
13
+ transition: bottom 0.1s 0.1s ease,
14
+ transform 0.1s cubic-bezier(0.165, 0.84, 0.44, 1);
15
+ }
16
+ }
17
+
18
+ &.is-active {
19
+ .hamburger-inner {
20
+ &::before {
21
+ top: 0;
22
+ transform: translate3d($hamburger-layer-width * -0.2, $hamburger-layer-width * -0.25, 0) rotate(-45deg) scale(0.7, 1);
23
+ transition: top 0.1s ease,
24
+ transform 0.1s 0.1s cubic-bezier(0.895, 0.03, 0.685, 0.22);
25
+ }
26
+
27
+ &::after {
28
+ bottom: 0;
29
+ transform: translate3d($hamburger-layer-width * -0.2, $hamburger-layer-width * 0.25, 0) rotate(45deg) scale(0.7, 1);
30
+ transition: bottom 0.1s ease,
31
+ transform 0.1s 0.1s cubic-bezier(0.895, 0.03, 0.685, 0.22);
32
+ }
33
+ }
34
+ }
35
+ }
36
+ }
@@ -0,0 +1,18 @@
1
+ @if index($hamburger-types, arrowturn-r) {
2
+ /*
3
+ * Arrow Turn Right
4
+ */
5
+ .hamburger--arrowturn-r.is-active {
6
+ .hamburger-inner {
7
+ transform: rotate(-180deg);
8
+
9
+ &::before {
10
+ transform: translate3d(-8px, 0, 0) rotate(-45deg) scale(0.7, 1);
11
+ }
12
+
13
+ &::after {
14
+ transform: translate3d(-8px, 0, 0) rotate(45deg) scale(0.7, 1);
15
+ }
16
+ }
17
+ }
18
+ }
@@ -0,0 +1,18 @@
1
+ @if index($hamburger-types, arrowturn) {
2
+ /*
3
+ * Arrow Turn
4
+ */
5
+ .hamburger--arrowturn.is-active {
6
+ .hamburger-inner {
7
+ transform: rotate(-180deg);
8
+
9
+ &::before {
10
+ transform: translate3d(8px, 0, 0) rotate(45deg) scale(0.7, 1);
11
+ }
12
+
13
+ &::after {
14
+ transform: translate3d(8px, 0, 0) rotate(-45deg) scale(0.7, 1);
15
+ }
16
+ }
17
+ }
18
+ }
@@ -0,0 +1,30 @@
1
+ @if index($hamburger-types, boring) {
2
+ /*
3
+ * Boring
4
+ */
5
+ .hamburger--boring {
6
+ .hamburger-inner {
7
+ &,
8
+ &::before,
9
+ &::after {
10
+ transition-property: none;
11
+ }
12
+ }
13
+
14
+ &.is-active {
15
+ .hamburger-inner {
16
+ transform: rotate(45deg);
17
+
18
+ &::before {
19
+ top: 0;
20
+ opacity: 0;
21
+ }
22
+
23
+ &::after {
24
+ bottom: 0;
25
+ transform: rotate(-90deg);
26
+ }
27
+ }
28
+ }
29
+ }
30
+ }
@@ -0,0 +1,47 @@
1
+ @if index($hamburger-types, collapse-r) {
2
+ /*
3
+ * Collapse Reverse
4
+ */
5
+ .hamburger--collapse-r {
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
+ }