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,48 @@
1
+ @if index($hamburger-types, vortex) {
2
+ /*
3
+ * Vortex
4
+ */
5
+ .hamburger--vortex {
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
+ }
@@ -1,9 +1,15 @@
1
1
  @import 'breakpoints';
2
2
  @import 'colors';
3
3
  @import 'typography';
4
+ @import 'visibility';
5
+ @import 'display';
6
+ @import 'flex';
7
+ @import 'margin';
8
+ @import 'padding';
4
9
  @import 'buttons';
5
10
  @import 'forms';
6
11
  @import 'modals';
7
12
  @import 'tables';
8
13
  @import 'universal';
9
- @import 'settings.scss';
14
+ @import 'layout';
15
+ // @import 'settings.scss';
@@ -4,6 +4,7 @@ $btn-border-radius: 5px !default;
4
4
  $btn-border-width: 1px !default;
5
5
  $btn-padding: 11px 5px !default;
6
6
  $btn-font-size: 16px !default;
7
+ $btn-font-weight: 700 !default;
7
8
  $btn-font: $copy-font !default;
8
9
  $btn-color: $primary-color !default;
9
10
  $btn-border-color: $primary-color !default;
@@ -34,9 +35,10 @@ $btn-mini-padding: 8px !default;
34
35
  cursor: pointer;
35
36
  transition: 300ms all;
36
37
  font-size: $btn-font-size;
38
+ font-weight: $btn-font-weight;
37
39
 
38
40
  &:hover { background-color: lighten($btn-color, 5%); }
39
- &:active { transform: scale(.95); }
41
+ &:active { transform: scale(.97); }
40
42
 
41
43
  &.clear {
42
44
  color: $btn-color;
@@ -11,6 +11,7 @@ $indigo: #31457D !default;
11
11
  $violet: #973999 !default;
12
12
  $teal: #2D9FA2 !default;
13
13
 
14
+ $heading-color: #333 !default;
14
15
  $copy-color: #333 !default;
15
16
  $primary-color: $red !default;
16
17
  $secondary-color: $yellow !default;
@@ -0,0 +1,143 @@
1
+ /* DISPLAY HELPERS */
2
+ .inline-block { display: inline-block !important; }
3
+ .block { display: block !important; }
4
+
5
+
6
+ @media (min-width: $medium) {
7
+ .md-inline-block { display: inline-block !important; }
8
+ .md-block { display: block !important; }
9
+ }
10
+
11
+ @media (min-width: $large) {
12
+ .lg-inline-block { display: inline-block !important; }
13
+ .lg-block { display: block !important; }
14
+ }
15
+
16
+ @media (min-width: $xlarge) {
17
+ .xlg-inline-block { display: inline-block !important; }
18
+ .xlg-block { display: block !important; }
19
+ }
20
+
21
+ @media (min-width: $xxlarge) {
22
+ .xxlg-inline-block { display: inline-block !important; }
23
+ .xxlg-block { display: block !important; }
24
+ }
25
+
26
+ /* POSITION HELPERS */
27
+ .relative { position: relative !important; }
28
+ .absolute { position: absolute !important; }
29
+ .fixed { position: fixed !important; }
30
+ .static { position: static !important; }
31
+ .float-right { float: right !important; }
32
+ .float-left { float: left !important; }
33
+
34
+ .vert-horz-center {
35
+ display: flex;
36
+ justify-content: center;
37
+ align-items: center;
38
+ }
39
+
40
+ .vert-center {
41
+ display: flex;
42
+ align-items: center;
43
+ }
44
+
45
+ @media (min-width: $medium) {
46
+ .md-relative { position: relative !important; }
47
+ .md-absolute { position: absolute !important; }
48
+ .md-fixed { position: fixed !important; }
49
+ .md-static { position: static !important; }
50
+ .md-float-right { float: right !important; }
51
+ .md-float-left { float: left !important; }
52
+ }
53
+
54
+ @media (min-width: $large) {
55
+ .lg-relative { position: relative !important; }
56
+ .lg-absolute { position: absolute !important; }
57
+ .lg-fixed { position: fixed !important; }
58
+ .lg-static { position: static !important; }
59
+ .lg-float-right { float: right !important; }
60
+ .lg-float-left { float: left !important; }
61
+ }
62
+
63
+ @media (min-width: $xlarge) {
64
+ .xlg-relative { position: relative !important; }
65
+ .xlg-absolute { position: absolute !important; }
66
+ .xlg-fixed { position: fixed !important; }
67
+ .xlg-static { position: static !important; }
68
+ .xlg-float-right { float: right !important; }
69
+ .xlg-float-left { float: left !important; }
70
+ }
71
+
72
+ @media (min-width: $xxlarge) {
73
+ .xxlg-relative { position: relative !important; }
74
+ .xxlg-absolute { position: absolute !important; }
75
+ .xxlg-fixed { position: fixed !important; }
76
+ .xxlg-static { position: static !important; }
77
+ .xxlg-float-right { float: right !important; }
78
+ .xxlg-float-left { float: left !important; }
79
+ }
80
+
81
+ /* SIZE HELPERS */
82
+ .width-100 { width: 100% !important; }
83
+ .width-50 { width: 50% !important; }
84
+ .width-33 { width: 33.33% !important; }
85
+ .width-25 { width: 25% !important; }
86
+ .width-auto { width: auto !important; }
87
+ .height-100 { height: 100% !important; }
88
+ .height-50 { height: 50% !important; }
89
+ .height-33 { height: 33.33% !important; }
90
+ .height-25 { height: 25% !important; }
91
+ .height-auto { height: auto !important; }
92
+
93
+ @media (min-width: $medium) {
94
+ .md-width-100 { width: 100% !important; }
95
+ .md-width-50 { width: 50% !important; }
96
+ .md-width-33 { width: 33.33% !important; }
97
+ .md-width-25 { width: 25% !important; }
98
+ .md-width-auto { width: auto !important; }
99
+ .md-height-100 { height: 100% !important; }
100
+ .md-height-50 { height: 50% !important; }
101
+ .md-height-33 { height: 33.33% !important; }
102
+ .md-height-25 { height: 25% !important; }
103
+ .md-height-auto { height: auto !important; }
104
+ }
105
+
106
+ @media (min-width: $large) {
107
+ .lg-width-100 { width: 100% !important; }
108
+ .lg-width-50 { width: 50% !important; }
109
+ .lg-width-33 { width: 33.33% !important; }
110
+ .lg-width-25 { width: 25% !important; }
111
+ .lg-width-auto { width: auto !important; }
112
+ .lg-height-100 { height: 100% !important; }
113
+ .lg-height-50 { height: 50% !important; }
114
+ .lg-height-33 { height: 33.33% !important; }
115
+ .lg-height-25 { height: 25% !important; }
116
+ .lg-height-auto { height: auto !important; }
117
+ }
118
+
119
+ @media (min-width: $xlarge) {
120
+ .xlg-width-100 { width: 100% !important; }
121
+ .xlg-width-50 { width: 50% !important; }
122
+ .xlg-width-33 { width: 33.33% !important; }
123
+ .xlg-width-25 { width: 25% !important; }
124
+ .xlg-width-auto { width: auto !important; }
125
+ .xlg-height-100 { height: 100% !important; }
126
+ .xlg-height-50 { height: 50% !important; }
127
+ .xlg-height-33 { height: 33.33% !important; }
128
+ .xlg-height-25 { height: 25% !important; }
129
+ .xlg-height-auto { height: auto !important; }
130
+ }
131
+
132
+ @media (min-width: $xxlarge) {
133
+ .xxlg-width-100 { width: 100% !important; }
134
+ .xxlg-width-50 { width: 50% !important; }
135
+ .xxlg-width-33 { width: 33.33% !important; }
136
+ .xxlg-width-25 { width: 25% !important; }
137
+ .xxlg-width-auto { width: auto !important; }
138
+ .xxlg-height-100 { height: 100% !important; }
139
+ .xxlg-height-50 { height: 50% !important; }
140
+ .xxlg-height-33 { height: 33.33% !important; }
141
+ .xxlg-height-25 { height: 25% !important; }
142
+ .xxlg-height-auto { height: auto !important; }
143
+ }
@@ -0,0 +1,128 @@
1
+ /* FLEX HELPERS */
2
+ .flex { display: flex !important; }
3
+ .no-flex-wrap { flex-wrap: nowrap !important; }
4
+ .flex-wrap { flex-wrap: wrap !important; }
5
+ .flex-dir-col { flex-direction: column !important; }
6
+ .flex-dir-row { flex-direction: row !important; }
7
+
8
+ .jc-start { justify-content: flex-start !important; }
9
+ .jc-end { justify-content: flex-end !important; }
10
+ .jc-center { justify-content: center !important; }
11
+ .jc-space-around { justify-content: space-around !important; }
12
+ .jc-space-between { justify-content: space-between !important; }
13
+ .jc-space-evenly { justify-content: space-evenly !important; }
14
+
15
+ .ai-start { align-items: flex-start !important; }
16
+ .ai-end { align-items: flex-end !important; }
17
+ .ai-center { align-items: center !important; }
18
+ .ai-stretch { align-items: stretch !important; }
19
+ .ai-baseline { align-items: baseline !important; }
20
+
21
+ .as-start { align-self: flex-start !important; }
22
+ .as-end { align-self: flex-end !important; }
23
+ .as-center { align-self: center !important; }
24
+ .as-stretch { align-self: stretch !important; }
25
+
26
+ @media (min-width: $medium) {
27
+ .md-flex { display: flex !important; }
28
+ .md-no-flex-wrap { flex-wrap: nowrap !important; }
29
+ .md-flex-wrap { flex-wrap: wrap !important; }
30
+ .md-flex-dir-col { flex-direction: column !important; }
31
+ .md-flex-dir-row { flex-direction: row !important; }
32
+
33
+ .md-jc-start { justify-content: flex-start !important; }
34
+ .md-jc-end { justify-content: flex-end !important; }
35
+ .md-jc-center { justify-content: center !important; }
36
+ .md-jc-space-around { justify-content: space-around !important; }
37
+ .md-jc-space-between { justify-content: space-between !important; }
38
+ .md-jc-space-evenly { justify-content: space-evenly !important; }
39
+
40
+ .md-ai-start { align-items: flex-start !important; }
41
+ .md-ai-end { align-items: flex-end !important; }
42
+ .md-ai-center { align-items: center !important; }
43
+ .md-ai-stretch { align-items: stretch !important; }
44
+ .md-ai-baseline { align-items: baseline !important; }
45
+
46
+ .md-as-start { align-self: flex-start !important; }
47
+ .md-as-end { align-self: flex-end !important; }
48
+ .md-as-center { align-self: center !important; }
49
+ .md-as-stretch { align-self: stretch !important; }
50
+ }
51
+
52
+ @media (min-width: $large) {
53
+ .lg-flex { display: flex !important; }
54
+ .lg-no-flex-wrap { flex-wrap: nowrap !important; }
55
+ .lg-flex-wrap { flex-wrap: wrap !important; }
56
+ .lg-flex-dir-col { flex-direction: column !important; }
57
+ .lg-flex-dir-row { flex-direction: row !important; }
58
+
59
+ .lg-jc-start { justify-content: flex-start !important; }
60
+ .lg-jc-end { justify-content: flex-end !important; }
61
+ .lg-jc-center { justify-content: center !important; }
62
+ .lg-jc-space-around { justify-content: space-around !important; }
63
+ .lg-jc-space-between { justify-content: space-between !important; }
64
+ .lg-jc-space-evenly { justify-content: space-evenly !important; }
65
+
66
+ .lg-ai-start { align-items: flex-start !important; }
67
+ .lg-ai-end { align-items: flex-end !important; }
68
+ .lg-ai-center { align-items: center !important; }
69
+ .lg-ai-stretch { align-items: stretch !important; }
70
+ .lg-ai-baseline { align-items: baseline !important; }
71
+
72
+ .lg-as-start { align-self: flex-start !important; }
73
+ .lg-as-end { align-self: flex-end !important; }
74
+ .lg-as-center { align-self: center !important; }
75
+ .lg-as-stretch { align-self: stretch !important; }
76
+ }
77
+
78
+ @media (min-width: $xlarge) {
79
+ .xlg-flex { display: flex !important; }
80
+ .xlg-no-flex-wrap { flex-wrap: nowrap !important; }
81
+ .xlg-flex-wrap { flex-wrap: wrap !important; }
82
+ .xlg-flex-dir-col { flex-direction: column !important; }
83
+ .xlg-flex-dir-row { flex-direction: row !important; }
84
+
85
+ .xlg-jc-start { justify-content: flex-start !important; }
86
+ .xlg-jc-end { justify-content: flex-end !important; }
87
+ .xlg-jc-center { justify-content: center !important; }
88
+ .xlg-jc-space-around { justify-content: space-around !important; }
89
+ .xlg-jc-space-between { justify-content: space-between !important; }
90
+ .xlg-jc-space-evenly { justify-content: space-evenly !important; }
91
+
92
+ .xlg-ai-start { align-items: flex-start !important; }
93
+ .xlg-ai-end { align-items: flex-end !important; }
94
+ .xlg-ai-center { align-items: center !important; }
95
+ .xlg-ai-stretch { align-items: stretch !important; }
96
+ .xlg-ai-baseline { align-items: baseline !important; }
97
+
98
+ .xlg-as-start { align-self: flex-start !important; }
99
+ .xlg-as-end { align-self: flex-end !important; }
100
+ .xlg-as-center { align-self: center !important; }
101
+ .xlg-as-stretch { align-self: stretch !important; }
102
+ }
103
+
104
+ @media (min-width: $xxlarge) {
105
+ .xxlg-flex { display: flex !important; }
106
+ .xxlg-no-flex-wrap { flex-wrap: nowrap !important; }
107
+ .xxlg-flex-wrap { flex-wrap: wrap !important; }
108
+ .xxlg-flex-dir-col { flex-direction: column !important; }
109
+ .xxlg-flex-dir-row { flex-direction: row !important; }
110
+
111
+ .xxlg-jc-start { justify-content: flex-start !important; }
112
+ .xxlg-jc-end { justify-content: flex-end !important; }
113
+ .xxlg-jc-center { justify-content: center !important; }
114
+ .xxlg-jc-space-around { justify-content: space-around !important; }
115
+ .xxlg-jc-space-between { justify-content: space-between !important; }
116
+ .xxlg-jc-space-evenly { justify-content: space-evenly !important; }
117
+
118
+ .xxlg-ai-start { align-items: flex-start !important; }
119
+ .xxlg-ai-end { align-items: flex-end !important; }
120
+ .xxlg-ai-center { align-items: center !important; }
121
+ .xxlg-ai-stretch { align-items: stretch !important; }
122
+ .xxlg-ai-baseline { align-items: baseline !important; }
123
+
124
+ .xxlg-as-start { align-self: flex-start !important; }
125
+ .xxlg-as-end { align-self: flex-end !important; }
126
+ .xxlg-as-center { align-self: center !important; }
127
+ .xxlg-as-stretch { align-self: stretch !important; }
128
+ }
@@ -13,6 +13,8 @@ $label-font-size: $copy-font-size !default;
13
13
  $file-font-size: 14px !default;
14
14
  $checkbox-width: 16px !default;
15
15
  $checkbox-margin-bottom: 8px !default;
16
+ $radio-width: 13px !default;
17
+ $radio-margin-bottom: 8px !default;
16
18
 
17
19
  form {
18
20
  input,
@@ -46,6 +48,12 @@ form {
46
48
  margin-bottom: $checkbox-margin-bottom;
47
49
  }
48
50
 
51
+ input[type='radio'] {
52
+ width: $radio-width;
53
+ height: auto;
54
+ margin-bottom: $radio-margin-bottom;
55
+ }
56
+
49
57
  label {
50
58
  display: inline-block;
51
59
  margin-bottom: $label-margin-bottom;
@@ -54,4 +62,21 @@ form {
54
62
  font-weight: bold;
55
63
  text-transform: capitalize;
56
64
  }
65
+
66
+ .radio-btn {
67
+ display: flex;
68
+ align-items: center;
69
+
70
+ label { font-weight: normal; }
71
+
72
+ input {
73
+ margin-right: 5px;
74
+ }
75
+ }
76
+
77
+ .radio-btn-group {
78
+ display: flex;
79
+ align-items: center;
80
+ justify-content: space-between;
81
+ }
57
82
  }
@@ -0,0 +1,57 @@
1
+ $row-width: 1200px !default;
2
+ $mobile-gutter: 0 10px !default;
3
+ $desktop-gutter: 0 10px !default;
4
+
5
+ .row {
6
+ display: flex;
7
+ flex-wrap: wrap;
8
+ max-width: $row-width;
9
+ margin: 0 auto;
10
+ }
11
+
12
+ .column {
13
+ width: 100%;
14
+ padding: $mobile-gutter;
15
+
16
+ @media (min-width: $large) { padding: $desktop-gutter; }
17
+
18
+ &.no-gutters { padding: 0; }
19
+ }
20
+
21
+ @for $i from 1 through 12 {
22
+ .sm-#{$i} { width: 100% / 12 * $i; }
23
+ .sm-offset-#{$i} { margin-left: 100% / 12 * $i; }
24
+ .sm-order-#{$i} { order: $i; }
25
+ }
26
+
27
+ @media (min-width: $medium) {
28
+ @for $i from 1 through 12 {
29
+ .md-#{$i} { width: 100% / 12 * $i; }
30
+ .md-offset-#{$i} { margin-left: 100% / 12 * $i; }
31
+ .md-order-#{$i} { order: $i; }
32
+ }
33
+ }
34
+
35
+ @media (min-width: $large) {
36
+ @for $i from 1 through 12 {
37
+ .lg-#{$i} { width: 100% / 12 * $i; }
38
+ .lg-offset-#{$i} { margin-left: 100% / 12 * $i; }
39
+ .lg-order-#{$i} { order: $i; }
40
+ }
41
+ }
42
+
43
+ @media (min-width: $xlarge) {
44
+ @for $i from 1 through 12 {
45
+ .xlg-#{$i} { width: 100% / 12 * $i; }
46
+ .xlg-offset-#{$i} { margin-left: 100% / 12 * $i; }
47
+ .xlg-order-#{$i} { order: $i; }
48
+ }
49
+ }
50
+
51
+ @media (min-width: $xxlarge) {
52
+ @for $i from 1 through 12 {
53
+ .xxlg-#{$i} { width: 100% / 12 * $i; }
54
+ .xxlg-offset-#{$i} { margin-left: 100% / 12 * $i; }
55
+ .xxlg-order-#{$i} { order: $i; }
56
+ }
57
+ }