timequake 1.0.7 → 2.0.1

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 +25 -0
  41. data/app/assets/stylesheets/timequake/layout.scss +57 -0
  42. data/app/assets/stylesheets/timequake/margin.scss +246 -0
  43. data/app/assets/stylesheets/timequake/modals.scss +3 -7
  44. data/app/assets/stylesheets/timequake/padding.scss +246 -0
  45. data/app/assets/stylesheets/timequake/typography.scss +62 -2
  46. data/app/assets/stylesheets/timequake/universal.scss +14 -1
  47. data/app/assets/stylesheets/timequake/visibility.scss +39 -0
  48. data/lib/generators/timequake/templates/timequake_overrides.scss +81 -3
  49. data/lib/timequake/version.rb +1 -1
  50. metadata +42 -3
@@ -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
+ }
@@ -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
+ }