timequake 1.0.9 → 2.0.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (48) 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/layout.scss +51 -0
  41. data/app/assets/stylesheets/timequake/margin.scss +246 -0
  42. data/app/assets/stylesheets/timequake/padding.scss +246 -0
  43. data/app/assets/stylesheets/timequake/typography.scss +58 -0
  44. data/app/assets/stylesheets/timequake/universal.scss +12 -1
  45. data/app/assets/stylesheets/timequake/visibility.scss +39 -0
  46. data/lib/generators/timequake/templates/timequake_overrides.scss +71 -0
  47. data/lib/timequake/version.rb +1 -1
  48. metadata +41 -2
@@ -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
+ }
@@ -0,0 +1,48 @@
1
+ @if index($hamburger-types, vortex-r) {
2
+ /*
3
+ * Vortex Reverse
4
+ */
5
+ .hamburger--vortex-r {
6
+ .hamburger-inner {
7
+ transition-duration: 0.2s;
8
+ transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
9
+
10
+ &::before,
11
+ &::after {
12
+ transition-duration: 0s;
13
+ transition-delay: 0.1s;
14
+ transition-timing-function: linear;
15
+ }
16
+
17
+ &::before {
18
+ transition-property: top, opacity;
19
+ }
20
+
21
+ &::after {
22
+ transition-property: bottom, transform;
23
+ }
24
+ }
25
+
26
+ &.is-active {
27
+ .hamburger-inner {
28
+ transform: rotate(-765deg);
29
+ transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
30
+
31
+ &::before,
32
+ &::after {
33
+ transition-delay: 0s;
34
+ }
35
+
36
+ &::before {
37
+ top: 0;
38
+ opacity: 0;
39
+ }
40
+
41
+ &::after {
42
+ bottom: 0;
43
+ transform: rotate(-90deg);
44
+ }
45
+ }
46
+ }
47
+ }
48
+ }