timequake 2.1.0 → 3.0.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (47) hide show
  1. checksums.yaml +4 -4
  2. data/Gemfile +0 -3
  3. data/Gemfile.lock +1 -96
  4. data/README.md +5 -22
  5. data/app/assets/stylesheets/timequake/layout.scss +10 -10
  6. data/lib/generators/timequake/install_generator.rb +0 -3
  7. data/lib/generators/timequake/templates/timequake_overrides.scss +1 -58
  8. data/lib/timequake/version.rb +1 -1
  9. data/lib/timequake.rb +0 -2
  10. data/timequake.gemspec +0 -3
  11. metadata +4 -68
  12. data/app/assets/config/timequake_manifest.js +0 -1
  13. data/app/assets/javascripts/timequake/modals.js +0 -17
  14. data/app/assets/javascripts/timequake.js +0 -4
  15. data/app/assets/stylesheets/hamburgers/_base.scss +0 -86
  16. data/app/assets/stylesheets/hamburgers/hamburgers.scss +0 -118
  17. data/app/assets/stylesheets/hamburgers/types/_3dx-r.scss +0 -35
  18. data/app/assets/stylesheets/hamburgers/types/_3dx.scss +0 -35
  19. data/app/assets/stylesheets/hamburgers/types/_3dxy-r.scss +0 -35
  20. data/app/assets/stylesheets/hamburgers/types/_3dxy.scss +0 -35
  21. data/app/assets/stylesheets/hamburgers/types/_3dy-r.scss +0 -35
  22. data/app/assets/stylesheets/hamburgers/types/_3dy.scss +0 -35
  23. data/app/assets/stylesheets/hamburgers/types/_arrow-r.scss +0 -16
  24. data/app/assets/stylesheets/hamburgers/types/_arrow.scss +0 -16
  25. data/app/assets/stylesheets/hamburgers/types/_arrowalt-r.scss +0 -36
  26. data/app/assets/stylesheets/hamburgers/types/_arrowalt.scss +0 -36
  27. data/app/assets/stylesheets/hamburgers/types/_arrowturn-r.scss +0 -18
  28. data/app/assets/stylesheets/hamburgers/types/_arrowturn.scss +0 -18
  29. data/app/assets/stylesheets/hamburgers/types/_boring.scss +0 -30
  30. data/app/assets/stylesheets/hamburgers/types/_collapse-r.scss +0 -47
  31. data/app/assets/stylesheets/hamburgers/types/_collapse.scss +0 -47
  32. data/app/assets/stylesheets/hamburgers/types/_elastic-r.scss +0 -41
  33. data/app/assets/stylesheets/hamburgers/types/_elastic.scss +0 -41
  34. data/app/assets/stylesheets/hamburgers/types/_emphatic-r.scss +0 -53
  35. data/app/assets/stylesheets/hamburgers/types/_emphatic.scss +0 -53
  36. data/app/assets/stylesheets/hamburgers/types/_minus.scss +0 -34
  37. data/app/assets/stylesheets/hamburgers/types/_slider-r.scss +0 -38
  38. data/app/assets/stylesheets/hamburgers/types/_slider.scss +0 -38
  39. data/app/assets/stylesheets/hamburgers/types/_spin-r.scss +0 -43
  40. data/app/assets/stylesheets/hamburgers/types/_spin.scss +0 -43
  41. data/app/assets/stylesheets/hamburgers/types/_spring-r.scss +0 -47
  42. data/app/assets/stylesheets/hamburgers/types/_spring.scss +0 -44
  43. data/app/assets/stylesheets/hamburgers/types/_squeeze.scss +0 -43
  44. data/app/assets/stylesheets/hamburgers/types/_stand-r.scss +0 -45
  45. data/app/assets/stylesheets/hamburgers/types/_stand.scss +0 -45
  46. data/app/assets/stylesheets/hamburgers/types/_vortex-r.scss +0 -48
  47. data/app/assets/stylesheets/hamburgers/types/_vortex.scss +0 -48
@@ -1,35 +0,0 @@
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
- }
@@ -1,35 +0,0 @@
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
- }
@@ -1,35 +0,0 @@
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
- }
@@ -1,35 +0,0 @@
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
- }
@@ -1,35 +0,0 @@
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
- }
@@ -1,35 +0,0 @@
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
- }
@@ -1,16 +0,0 @@
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
- }
@@ -1,16 +0,0 @@
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
- }
@@ -1,36 +0,0 @@
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
- }
@@ -1,36 +0,0 @@
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
- }
@@ -1,18 +0,0 @@
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
- }
@@ -1,18 +0,0 @@
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
- }
@@ -1,30 +0,0 @@
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
- }
@@ -1,47 +0,0 @@
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
- }
@@ -1,47 +0,0 @@
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
- }
@@ -1,41 +0,0 @@
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
- }
@@ -1,41 +0,0 @@
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
- }
@@ -1,53 +0,0 @@
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
- }
@@ -1,53 +0,0 @@
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
- }