timequake 1.0.5 → 2.0.0

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 +10 -8
  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 +15 -0
  41. data/app/assets/stylesheets/timequake/layout.scss +51 -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 +12 -1
  47. data/app/assets/stylesheets/timequake/visibility.scss +39 -0
  48. data/lib/generators/timequake/templates/timequake_overrides.scss +78 -3
  49. data/lib/timequake/version.rb +1 -1
  50. metadata +41 -2
@@ -9,17 +9,20 @@ $heading-3-font-size: 1.17rem !default;
9
9
  $heading-4-font-size: 1.12rem !default;
10
10
  $heading-5-font-size: .83rem !default;
11
11
  $heading-6-font-size: .75rem !default;
12
+ $heading-margin: 0 0 .5rem 0 !default;
13
+ $copy-margin: 0 0 .5rem 0 !default;
12
14
  $btn-font: $copy-font !default;
13
15
 
14
16
  html {
15
17
  font-family: $body-font;
16
18
  font-size: $body-font-size;
19
+ color: $heading-color;
17
20
  }
18
21
 
19
22
  .copy {
20
23
  font-family: $copy-font;
21
24
  color: $copy-color;
22
- margin: 0 0 .5rem 0;
25
+ margin: $copy-margin;
23
26
  font-size: $copy-font-size;
24
27
  }
25
28
 
@@ -31,7 +34,7 @@ html {
31
34
  .heading-5,
32
35
  .heading-6, {
33
36
  font-family: $heading-font;
34
- margin: 0 0 .5rem 0;
37
+ margin: $heading-margin;
35
38
  }
36
39
 
37
40
  .heading-1 { font-size: $heading-1-font-size; }
@@ -40,3 +43,60 @@ html {
40
43
  .heading-4 { font-size: $heading-4-font-size; }
41
44
  .heading-5 { font-size: $heading-5-font-size; }
42
45
  .heading-6 { font-size: $heading-6-font-size; }
46
+
47
+ @for $i from 1 through 100 {
48
+ .fz-#{$i} { font-size: #{$i}px; }
49
+ }
50
+
51
+ .fw-100 { font-weight: 100 !important; }
52
+ .fw-200 { font-weight: 200 !important; }
53
+ .fw-300 { font-weight: 300 !important; }
54
+ .fw-400 { font-weight: 400 !important; }
55
+ .fw-500 { font-weight: 500 !important; }
56
+ .fw-600 { font-weight: 600 !important; }
57
+ .fw-700 { font-weight: 700 !important; }
58
+ .fw-800 { font-weight: 800 !important; }
59
+ .fw-900 { font-weight: 900 !important; }
60
+
61
+ /* TEXT HELPERS */
62
+ .bold { font-weight: bold !important; }
63
+ .italic { font-style: italic !important; }
64
+ .uppercase { text-transform: uppercase !important; }
65
+ .lowercase { text-transform: lowercase !important; }
66
+ .capitalize { text-transform: capitalize !important; }
67
+ .nowrap { white-space: nowrap !important; }
68
+ .underline { text-decoration: underline !important; }
69
+ .line-through { text-decoration: line-through !important; }
70
+
71
+ .text-center { text-align: center !important; }
72
+ .text-right { text-align: right !important; }
73
+ .text-left { text-align: left !important; }
74
+ .text-justify { text-align: justify !important; }
75
+
76
+ @media (min-width: $medium) {
77
+ .md-text-center { text-align: center !important; }
78
+ .md-text-right { text-align: right !important; }
79
+ .md-text-left { text-align: left !important; }
80
+ .md-text-justify { text-align: justify !important; }
81
+ }
82
+
83
+ @media (min-width: $large) {
84
+ .lg-text-center { text-align: center !important; }
85
+ .lg-text-right { text-align: right !important; }
86
+ .lg-text-left { text-align: left !important; }
87
+ .lg-text-justify { text-align: justify !important; }
88
+ }
89
+
90
+ @media (min-width: $xlarge) {
91
+ .xlg-text-center { text-align: center !important; }
92
+ .xlg-text-right { text-align: right !important; }
93
+ .xlg-text-left { text-align: left !important; }
94
+ .xlg-text-justify { text-align: justify !important; }
95
+ }
96
+
97
+ @media (min-width: $xxlarge) {
98
+ .xxlg-text-center { text-align: center !important; }
99
+ .xxlg-text-right { text-align: right !important; }
100
+ .xxlg-text-left { text-align: left !important; }
101
+ .xxlg-text-justify { text-align: justify !important; }
102
+ }
@@ -2,12 +2,18 @@ $main-overflow: hidden !default;
2
2
  $section-padding-desktop: 2rem 0 !default;
3
3
  $section-padding-mobile: 1rem 0 !default;
4
4
 
5
+ * {
6
+ box-sizing: border-box;
7
+ padding: 0;
8
+ margin: 0;
9
+ }
10
+
5
11
  main { overflow: $main-overflow; }
6
12
 
7
13
  section {
8
14
  padding: $section-padding-mobile;
9
15
 
10
- @include breakpoint('large') {
16
+ @media (min-width: $large) {
11
17
  padding: $section-padding-desktop;
12
18
  }
13
19
  }
@@ -15,11 +21,16 @@ section {
15
21
  a {
16
22
  color: inherit;
17
23
  text-decoration: none;
24
+ transition: 300ms;
18
25
  }
19
26
 
20
27
  ul,
21
28
  ol {
22
29
  &.no-style { list-style-type: none; }
30
+ &.circle { list-style-type: circle; }
31
+ &.square { list-style-type: square; }
32
+ &.upper-roman { list-style-type: upper-roman; }
33
+ &.lower-alpha { list-style-type: lower-alpha; }
23
34
  }
24
35
 
25
36
  img {
@@ -0,0 +1,39 @@
1
+ /* VISIBILITY HELPERS */
2
+ .hide { display: none !important; }
3
+ .md-show { display: none !important; }
4
+ .md-show-inline { display: none !important; }
5
+ .lg-show { display: none !important; }
6
+ .lg-show-inline { display: none !important; }
7
+ .xlg-show { display: none !important; }
8
+ .xlg-show-inline { display: none !important; }
9
+ .xxlg-show { display: none !important; }
10
+ .xxlg-show-inline { display: none !important; }
11
+ .invisible { visibility: hidden !important; }
12
+
13
+ @media (min-width: $medium) {
14
+ .md-hide { display: none !important; }
15
+ .md-show { display: block !important; }
16
+ .md-show-inline { display: inline-block !important; }
17
+ .md-invisible { visibility: hidden !important; }
18
+ }
19
+
20
+ @media (min-width: $large) {
21
+ .lg-hide { display: none !important; }
22
+ .lg-show { display: block !important; }
23
+ .lg-show-inline { display: inline-block !important; }
24
+ .lg-invisible { visibility: hidden !important; }
25
+ }
26
+
27
+ @media (min-width: $xlarge) {
28
+ .xlg-hide { display: none !important; }
29
+ .xlg-show { display: block !important; }
30
+ .xlg-show-inline { display: inline-block !important; }
31
+ .xlg-invisible { visibility: hidden !important; }
32
+ }
33
+
34
+ @media (min-width: $xxlarge) {
35
+ .xxlg-hide { display: none !important; }
36
+ .xxlg-show { display: block !important; }
37
+ .xxlg-show-inline { display: inline-block !important; }
38
+ .xxlg-invisible { visibility: hidden !important; }
39
+ }
@@ -1,3 +1,15 @@
1
+ //FONTS add fonts here
2
+ // e.g.
3
+ // @font-face {
4
+ // font-family: 'Butler Black';
5
+ // src: font-url('butler_black.otf')
6
+ // }
7
+ //
8
+ // @import url('https://fonts.googleapis.com/css2?family=Raleway:wght@200;900&display=swap');
9
+ //
10
+ // $butler_black: 'Butler Black', serif;
11
+ // $raleway: 'Raleway', sans-serif;
12
+
1
13
  // BREAKPOINTS
2
14
  $medium: 600px;
3
15
  $large: 800px;
@@ -23,6 +35,7 @@ $teal: #2D9FA2;
23
35
  $primary-color: $red;
24
36
  $secondary-color: $yellow;
25
37
  $tertiary-color: $blue;
38
+ $heading-color: #333;
26
39
  $copy-color: #333;
27
40
  $success-color: #2FAC58;
28
41
  $info-color: #25327C;
@@ -42,6 +55,8 @@ $heading-3-font-size: 1.17rem;
42
55
  $heading-4-font-size: 1.12rem;
43
56
  $heading-5-font-size: .83rem;
44
57
  $heading-6-font-size: .75rem;
58
+ $heading-margin: 0 0 .5rem 0;
59
+ $copy-margin: 0 0 .5rem 0;
45
60
 
46
61
  // BUTTONS
47
62
  $btn-min-width: 145px;
@@ -50,6 +65,7 @@ $btn-border-radius: 5px;
50
65
  $btn-border-width: 1px;
51
66
  $btn-padding: 11px 5px;
52
67
  $btn-font-size: 16px;
68
+ $btn-font-weight: 700;
53
69
  $btn-font: $copy-font;
54
70
  $btn-color: $primary-color;
55
71
  $btn-border-color: $primary-color;
@@ -77,15 +93,17 @@ $label-font: $form-font;
77
93
  $input-font-size: $copy-font-size;
78
94
  $label-font-size: $copy-font-size;
79
95
  $file-font-size: 14px;
96
+ $checkbox-width: 16px;
97
+ $checkbox-margin-bottom: 8px;
98
+ $radio-width: 13px;
99
+ $radio-margin-bottom: 8px;
80
100
 
81
101
  // MODALS
82
102
  $modal-bg-color: $white;
83
103
  $modal-max-width: 1200px;
84
104
  $modal-content-padding: 20px;
85
105
  $modal-border-radius: 5px;
86
- $modal-border-color: $white;
87
- $modal-border-width: 5px;
88
- $modal-border-style: solid;
106
+ $modal-border: 5px solid $white;
89
107
  $modal-close-size: 30px;
90
108
  $modal-close-color: $copy-color;
91
109
  $modal-close-transform: rotate(45deg);
@@ -106,3 +124,60 @@ $section-padding-desktop: 2rem 0;
106
124
  $section-padding-mobile: 1rem 0;
107
125
 
108
126
  @import 'timequake/index';
127
+
128
+ // HAMBURGERS
129
+ $hamburger-padding-x : 15px;
130
+ $hamburger-padding-y : 15px;
131
+ $hamburger-layer-width : 40px;
132
+ $hamburger-layer-height : 4px;
133
+ $hamburger-layer-spacing : 6px;
134
+ $hamburger-layer-color : #789798;
135
+ $hamburger-layer-border-radius : 4px;
136
+ $hamburger-hover-opacity : 0.7;
137
+ $hamburger-active-layer-color : $hamburger-layer-color;
138
+ $hamburger-active-hover-opacity: $hamburger-hover-opacity;
139
+
140
+ // To use CSS filters as the hover effect instead of opacity,
141
+ // set $hamburger-hover-use-filter as true and
142
+ // change the value of $hamburger-hover-filter accordingly.
143
+ $hamburger-hover-use-filter : false;
144
+ $hamburger-hover-filter : opacity(0%);
145
+ $hamburger-active-hover-filter: $hamburger-hover-filter;
146
+
147
+ // Remove or comment out the hamburger types you don’t want
148
+ // or need, so they get excluded from the compiled CSS.
149
+ $hamburger-types: (
150
+ 3dx,
151
+ 3dx-r,
152
+ 3dy,
153
+ 3dy-r,
154
+ 3dxy,
155
+ 3dxy-r,
156
+ arrow,
157
+ arrow-r,
158
+ arrowalt,
159
+ arrowalt-r,
160
+ arrowturn,
161
+ arrowturn-r,
162
+ boring,
163
+ collapse,
164
+ collapse-r,
165
+ elastic,
166
+ elastic-r,
167
+ emphatic,
168
+ emphatic-r,
169
+ minus,
170
+ slider,
171
+ slider-r,
172
+ spring,
173
+ spring-r,
174
+ stand,
175
+ stand-r,
176
+ spin,
177
+ spin-r,
178
+ squeeze,
179
+ vortex,
180
+ vortex-r
181
+ );
182
+
183
+ @import "hamburgers/hamburgers"
@@ -1,3 +1,3 @@
1
1
  module Timequake
2
- VERSION = "1.0.5"
2
+ VERSION = "2.0.0"
3
3
  end
metadata CHANGED
@@ -1,14 +1,14 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: timequake
3
3
  version: !ruby/object:Gem::Version
4
- version: 1.0.5
4
+ version: 2.0.0
5
5
  platform: ruby
6
6
  authors:
7
7
  - George Morris
8
8
  autorequire:
9
9
  bindir: exe
10
10
  cert_chain: []
11
- date: 2020-07-29 00:00:00.000000000 Z
11
+ date: 2020-10-15 00:00:00.000000000 Z
12
12
  dependencies:
13
13
  - !ruby/object:Gem::Dependency
14
14
  name: jquery-rails
@@ -57,16 +57,55 @@ files:
57
57
  - app/assets/config/timequake_manifest.js
58
58
  - app/assets/javascripts/timequake.js
59
59
  - app/assets/javascripts/timequake/modals.js
60
+ - app/assets/stylesheets/hamburgers/_base.scss
61
+ - app/assets/stylesheets/hamburgers/hamburgers.scss
62
+ - app/assets/stylesheets/hamburgers/types/_3dx-r.scss
63
+ - app/assets/stylesheets/hamburgers/types/_3dx.scss
64
+ - app/assets/stylesheets/hamburgers/types/_3dxy-r.scss
65
+ - app/assets/stylesheets/hamburgers/types/_3dxy.scss
66
+ - app/assets/stylesheets/hamburgers/types/_3dy-r.scss
67
+ - app/assets/stylesheets/hamburgers/types/_3dy.scss
68
+ - app/assets/stylesheets/hamburgers/types/_arrow-r.scss
69
+ - app/assets/stylesheets/hamburgers/types/_arrow.scss
70
+ - app/assets/stylesheets/hamburgers/types/_arrowalt-r.scss
71
+ - app/assets/stylesheets/hamburgers/types/_arrowalt.scss
72
+ - app/assets/stylesheets/hamburgers/types/_arrowturn-r.scss
73
+ - app/assets/stylesheets/hamburgers/types/_arrowturn.scss
74
+ - app/assets/stylesheets/hamburgers/types/_boring.scss
75
+ - app/assets/stylesheets/hamburgers/types/_collapse-r.scss
76
+ - app/assets/stylesheets/hamburgers/types/_collapse.scss
77
+ - app/assets/stylesheets/hamburgers/types/_elastic-r.scss
78
+ - app/assets/stylesheets/hamburgers/types/_elastic.scss
79
+ - app/assets/stylesheets/hamburgers/types/_emphatic-r.scss
80
+ - app/assets/stylesheets/hamburgers/types/_emphatic.scss
81
+ - app/assets/stylesheets/hamburgers/types/_minus.scss
82
+ - app/assets/stylesheets/hamburgers/types/_slider-r.scss
83
+ - app/assets/stylesheets/hamburgers/types/_slider.scss
84
+ - app/assets/stylesheets/hamburgers/types/_spin-r.scss
85
+ - app/assets/stylesheets/hamburgers/types/_spin.scss
86
+ - app/assets/stylesheets/hamburgers/types/_spring-r.scss
87
+ - app/assets/stylesheets/hamburgers/types/_spring.scss
88
+ - app/assets/stylesheets/hamburgers/types/_squeeze.scss
89
+ - app/assets/stylesheets/hamburgers/types/_stand-r.scss
90
+ - app/assets/stylesheets/hamburgers/types/_stand.scss
91
+ - app/assets/stylesheets/hamburgers/types/_vortex-r.scss
92
+ - app/assets/stylesheets/hamburgers/types/_vortex.scss
60
93
  - app/assets/stylesheets/timequake/_index.scss
61
94
  - app/assets/stylesheets/timequake/breakpoints.scss
62
95
  - app/assets/stylesheets/timequake/buttons.scss
63
96
  - app/assets/stylesheets/timequake/colors.scss
97
+ - app/assets/stylesheets/timequake/display.scss
98
+ - app/assets/stylesheets/timequake/flex.scss
64
99
  - app/assets/stylesheets/timequake/forms.scss
100
+ - app/assets/stylesheets/timequake/layout.scss
101
+ - app/assets/stylesheets/timequake/margin.scss
65
102
  - app/assets/stylesheets/timequake/modals.scss
103
+ - app/assets/stylesheets/timequake/padding.scss
66
104
  - app/assets/stylesheets/timequake/settings.scss
67
105
  - app/assets/stylesheets/timequake/tables.scss
68
106
  - app/assets/stylesheets/timequake/typography.scss
69
107
  - app/assets/stylesheets/timequake/universal.scss
108
+ - app/assets/stylesheets/timequake/visibility.scss
70
109
  - bin/console
71
110
  - bin/setup
72
111
  - lib/generators/timequake/install_generator.rb