timequake 1.0.9 → 2.0.3

Sign up to get free protection for your applications and to get access to all the features.
Files changed (52) hide show
  1. checksums.yaml +4 -4
  2. data/Gemfile.lock +34 -33
  3. data/app/assets/stylesheets/hamburgers/_base.scss +86 -0
  4. data/app/assets/stylesheets/hamburgers/hamburgers.scss +118 -0
  5. data/app/assets/stylesheets/hamburgers/types/_3dx-r.scss +35 -0
  6. data/app/assets/stylesheets/hamburgers/types/_3dx.scss +35 -0
  7. data/app/assets/stylesheets/hamburgers/types/_3dxy-r.scss +35 -0
  8. data/app/assets/stylesheets/hamburgers/types/_3dxy.scss +35 -0
  9. data/app/assets/stylesheets/hamburgers/types/_3dy-r.scss +35 -0
  10. data/app/assets/stylesheets/hamburgers/types/_3dy.scss +35 -0
  11. data/app/assets/stylesheets/hamburgers/types/_arrow-r.scss +16 -0
  12. data/app/assets/stylesheets/hamburgers/types/_arrow.scss +16 -0
  13. data/app/assets/stylesheets/hamburgers/types/_arrowalt-r.scss +36 -0
  14. data/app/assets/stylesheets/hamburgers/types/_arrowalt.scss +36 -0
  15. data/app/assets/stylesheets/hamburgers/types/_arrowturn-r.scss +18 -0
  16. data/app/assets/stylesheets/hamburgers/types/_arrowturn.scss +18 -0
  17. data/app/assets/stylesheets/hamburgers/types/_boring.scss +30 -0
  18. data/app/assets/stylesheets/hamburgers/types/_collapse-r.scss +47 -0
  19. data/app/assets/stylesheets/hamburgers/types/_collapse.scss +47 -0
  20. data/app/assets/stylesheets/hamburgers/types/_elastic-r.scss +41 -0
  21. data/app/assets/stylesheets/hamburgers/types/_elastic.scss +41 -0
  22. data/app/assets/stylesheets/hamburgers/types/_emphatic-r.scss +53 -0
  23. data/app/assets/stylesheets/hamburgers/types/_emphatic.scss +53 -0
  24. data/app/assets/stylesheets/hamburgers/types/_minus.scss +34 -0
  25. data/app/assets/stylesheets/hamburgers/types/_slider-r.scss +38 -0
  26. data/app/assets/stylesheets/hamburgers/types/_slider.scss +38 -0
  27. data/app/assets/stylesheets/hamburgers/types/_spin-r.scss +43 -0
  28. data/app/assets/stylesheets/hamburgers/types/_spin.scss +43 -0
  29. data/app/assets/stylesheets/hamburgers/types/_spring-r.scss +47 -0
  30. data/app/assets/stylesheets/hamburgers/types/_spring.scss +44 -0
  31. data/app/assets/stylesheets/hamburgers/types/_squeeze.scss +43 -0
  32. data/app/assets/stylesheets/hamburgers/types/_stand-r.scss +45 -0
  33. data/app/assets/stylesheets/hamburgers/types/_stand.scss +45 -0
  34. data/app/assets/stylesheets/hamburgers/types/_vortex-r.scss +48 -0
  35. data/app/assets/stylesheets/hamburgers/types/_vortex.scss +48 -0
  36. data/app/assets/stylesheets/timequake/_index.scss +7 -1
  37. data/app/assets/stylesheets/timequake/buttons.scss +3 -1
  38. data/app/assets/stylesheets/timequake/colors.scss +1 -0
  39. data/app/assets/stylesheets/timequake/display.scss +163 -0
  40. data/app/assets/stylesheets/timequake/flex.scss +128 -0
  41. data/app/assets/stylesheets/timequake/forms.scss +17 -0
  42. data/app/assets/stylesheets/timequake/layout.scss +59 -0
  43. data/app/assets/stylesheets/timequake/margin.scss +246 -0
  44. data/app/assets/stylesheets/timequake/padding.scss +246 -0
  45. data/app/assets/stylesheets/timequake/typography.scss +58 -0
  46. data/app/assets/stylesheets/timequake/universal.scss +23 -1
  47. data/app/assets/stylesheets/timequake/visibility.scss +39 -0
  48. data/lib/generators/timequake/templates/timequake_overrides.scss +79 -0
  49. data/lib/timequake/version.rb +1 -1
  50. data/timequake-2.0.1.gem +0 -0
  51. data/timequake-2.0.2.gem +0 -0
  52. metadata +44 -3
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 15f79eee3d85c33cdfefdb0c1619f59d2303e7a64c59b16c05164e04a395cb78
4
- data.tar.gz: 7e9120932bfb40c722c774232fd4d5cb80b03ae44525783ee354376caceaeac1
3
+ metadata.gz: ac66455fc011a8ae762b92073692e5331f351da56dee906d15df3b7a7a97e21a
4
+ data.tar.gz: ca9a906ed205278a6b4c1a4f74f083325fb865ab39db9ba2a83285e21026d510
5
5
  SHA512:
6
- metadata.gz: 3556afeb6f4bb034ec5991a5da31ab9b5bf2b89145a939a6451b3adbf4e142603467038bf6bd2703edb559040a1c6014c6c4e64e0a72937115578877af1b9b1f
7
- data.tar.gz: eded1a631a670936a65c1a35849e5db202af026ee2cdf6928ce29b29c5cb3a28b8e39f2b434c6dae6ad2863ea91914eb127b7c48772ab88ec377ff61120d2ea4
6
+ metadata.gz: ce01b3be80a9673056c44d379817502e7e098228ce34bd28ace99e789463b3e6057a16147b5b88f0cd3b2b77ccfdebc6b9ff472f46746847a8e5cd6da708e905
7
+ data.tar.gz: 43bf76bed054f714f457be1911a7db0b434334866de3166f0040f878a53e5e96ca2d9f68bb06d1b97d43dbe79a6e333444b0c4c3eb62c3c40f196cdd8930ea3b
data/Gemfile.lock CHANGED
@@ -1,66 +1,68 @@
1
1
  PATH
2
2
  remote: .
3
3
  specs:
4
- timequake (1.0.0beta)
4
+ timequake (2.0.3)
5
5
  jquery-rails (~> 4.4)
6
6
  sass-rails (~> 6.0)
7
7
 
8
8
  GEM
9
9
  remote: https://rubygems.org/
10
10
  specs:
11
- actionpack (6.0.3.2)
12
- actionview (= 6.0.3.2)
13
- activesupport (= 6.0.3.2)
14
- rack (~> 2.0, >= 2.0.8)
11
+ actionpack (6.1.4.1)
12
+ actionview (= 6.1.4.1)
13
+ activesupport (= 6.1.4.1)
14
+ rack (~> 2.0, >= 2.0.9)
15
15
  rack-test (>= 0.6.3)
16
16
  rails-dom-testing (~> 2.0)
17
17
  rails-html-sanitizer (~> 1.0, >= 1.2.0)
18
- actionview (6.0.3.2)
19
- activesupport (= 6.0.3.2)
18
+ actionview (6.1.4.1)
19
+ activesupport (= 6.1.4.1)
20
20
  builder (~> 3.1)
21
21
  erubi (~> 1.4)
22
22
  rails-dom-testing (~> 2.0)
23
23
  rails-html-sanitizer (~> 1.1, >= 1.2.0)
24
- activesupport (6.0.3.2)
24
+ activesupport (6.1.4.1)
25
25
  concurrent-ruby (~> 1.0, >= 1.0.2)
26
- i18n (>= 0.7, < 2)
27
- minitest (~> 5.1)
28
- tzinfo (~> 1.1)
29
- zeitwerk (~> 2.2, >= 2.2.2)
26
+ i18n (>= 1.6, < 2)
27
+ minitest (>= 5.1)
28
+ tzinfo (~> 2.0)
29
+ zeitwerk (~> 2.3)
30
30
  builder (3.2.4)
31
- concurrent-ruby (1.1.6)
31
+ concurrent-ruby (1.1.9)
32
32
  crass (1.0.6)
33
33
  diff-lcs (1.4.4)
34
- erubi (1.9.0)
35
- ffi (1.13.1)
36
- i18n (1.8.4)
34
+ erubi (1.10.0)
35
+ ffi (1.15.4)
36
+ i18n (1.8.11)
37
37
  concurrent-ruby (~> 1.0)
38
38
  jquery-rails (4.4.0)
39
39
  rails-dom-testing (>= 1, < 3)
40
40
  railties (>= 4.2.0)
41
41
  thor (>= 0.14, < 2.0)
42
- loofah (2.6.0)
42
+ loofah (2.12.0)
43
43
  crass (~> 1.0.2)
44
44
  nokogiri (>= 1.5.9)
45
45
  method_source (1.0.0)
46
- mini_portile2 (2.4.0)
47
- minitest (5.14.1)
48
- nokogiri (1.10.10)
49
- mini_portile2 (~> 2.4.0)
46
+ mini_portile2 (2.6.1)
47
+ minitest (5.14.4)
48
+ nokogiri (1.12.5)
49
+ mini_portile2 (~> 2.6.1)
50
+ racc (~> 1.4)
51
+ racc (1.6.0)
50
52
  rack (2.2.3)
51
53
  rack-test (1.1.0)
52
54
  rack (>= 1.0, < 3)
53
55
  rails-dom-testing (2.0.3)
54
56
  activesupport (>= 4.2.0)
55
57
  nokogiri (>= 1.6)
56
- rails-html-sanitizer (1.3.0)
58
+ rails-html-sanitizer (1.4.2)
57
59
  loofah (~> 2.3)
58
- railties (6.0.3.2)
59
- actionpack (= 6.0.3.2)
60
- activesupport (= 6.0.3.2)
60
+ railties (6.1.4.1)
61
+ actionpack (= 6.1.4.1)
62
+ activesupport (= 6.1.4.1)
61
63
  method_source
62
- rake (>= 0.8.7)
63
- thor (>= 0.20.3, < 2.0)
64
+ rake (>= 0.13)
65
+ thor (~> 1.0)
64
66
  rake (12.3.3)
65
67
  rspec (3.9.0)
66
68
  rspec-core (~> 3.9.0)
@@ -88,16 +90,15 @@ GEM
88
90
  sprockets (4.0.2)
89
91
  concurrent-ruby (~> 1.0)
90
92
  rack (> 1, < 3)
91
- sprockets-rails (3.2.1)
93
+ sprockets-rails (3.2.2)
92
94
  actionpack (>= 4.0)
93
95
  activesupport (>= 4.0)
94
96
  sprockets (>= 3.0.0)
95
- thor (1.0.1)
96
- thread_safe (0.3.6)
97
+ thor (1.1.0)
97
98
  tilt (2.0.10)
98
- tzinfo (1.2.7)
99
- thread_safe (~> 0.1)
100
- zeitwerk (2.4.0)
99
+ tzinfo (2.0.4)
100
+ concurrent-ruby (~> 1.0)
101
+ zeitwerk (2.5.1)
101
102
 
102
103
  PLATFORMS
103
104
  ruby
@@ -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
+ }