bullet_train-themes-tester 1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (61) hide show
  1. checksums.yaml +7 -0
  2. data/.bt-link +0 -0
  3. data/MIT-LICENSE +20 -0
  4. data/README.md +28 -0
  5. data/Rakefile +8 -0
  6. data/app/assets/config/bullet_train_themes_tester_manifest.js +0 -0
  7. data/app/assets/stylesheets/tailwindcss/base.css +1 -0
  8. data/app/assets/stylesheets/tailwindcss/components.css +1 -0
  9. data/app/assets/stylesheets/tailwindcss/utilities.css +1 -0
  10. data/app/assets/stylesheets/tester/actiontext.css +26 -0
  11. data/app/assets/stylesheets/tester/application.css +33 -0
  12. data/app/assets/stylesheets/tester/electron.css +46 -0
  13. data/app/assets/stylesheets/tester/fields/cloudinary_image.css +58 -0
  14. data/app/assets/stylesheets/tester/fields/date_field.css +19 -0
  15. data/app/assets/stylesheets/tester/fields/index.css +5 -0
  16. data/app/assets/stylesheets/tester/fields/phone_field.css +7 -0
  17. data/app/assets/stylesheets/tester/fields/super_select.css +103 -0
  18. data/app/assets/stylesheets/tester/fields/trix_editor.css +90 -0
  19. data/app/assets/stylesheets/tester/mailer.scss +359 -0
  20. data/app/assets/stylesheets/tester/tailwind/colors.css +100 -0
  21. data/app/assets/stylesheets/tester/tailwind/components.css +151 -0
  22. data/app/assets/stylesheets/tester/tailwind/dark-mode.css +218 -0
  23. data/app/assets/stylesheets/tester/tailwind/utilities.css +49 -0
  24. data/app/assets/stylesheets/tester/turn.css +44 -0
  25. data/app/assets/stylesheets/tester.tailwind.css +5 -0
  26. data/app/javascript/application.tester.js +0 -0
  27. data/app/views/themes/tester/_alert.html.erb +13 -0
  28. data/app/views/themes/tester/_box.html.erb +66 -0
  29. data/app/views/themes/tester/_breadcrumb.html.erb +23 -0
  30. data/app/views/themes/tester/_cell.html.erb +41 -0
  31. data/app/views/themes/tester/_decision_line.html.erb +12 -0
  32. data/app/views/themes/tester/_line.html.erb +3 -0
  33. data/app/views/themes/tester/_notices.html.erb +15 -0
  34. data/app/views/themes/tester/_page.html.erb +12 -0
  35. data/app/views/themes/tester/_title.html.erb +18 -0
  36. data/app/views/themes/tester/attributes/_base.html.erb +30 -0
  37. data/app/views/themes/tester/attributes/_block.html.erb +9 -0
  38. data/app/views/themes/tester/breadcrumbs/_actions.html.erb +22 -0
  39. data/app/views/themes/tester/commentary/_box.html.erb +13 -0
  40. data/app/views/themes/tester/conversations/_card.html.erb +21 -0
  41. data/app/views/themes/tester/conversations/_comment.html.erb +26 -0
  42. data/app/views/themes/tester/conversations/_message.html.erb +136 -0
  43. data/app/views/themes/tester/conversations/_thread_border.html.erb +3 -0
  44. data/app/views/themes/tester/fields/_field.html.erb +81 -0
  45. data/app/views/themes/tester/forms/_errors.html.erb +14 -0
  46. data/app/views/themes/tester/layouts/_account.html.erb +138 -0
  47. data/app/views/themes/tester/layouts/_devise.html.erb +11 -0
  48. data/app/views/themes/tester/layouts/_head.html.erb +8 -0
  49. data/app/views/themes/tester/layouts/_mailer.html.erb +429 -0
  50. data/app/views/themes/tester/memberships/_photos.html.erb +18 -0
  51. data/app/views/themes/tester/menu/_heading.html.erb +3 -0
  52. data/app/views/themes/tester/menu/_item.html.erb +16 -0
  53. data/app/views/themes/tester/menu/_section.html.erb +7 -0
  54. data/app/views/themes/tester/workflow/_box.html.erb +30 -0
  55. data/config/routes.rb +2 -0
  56. data/lib/bullet_train/themes/tester/engine.rb +12 -0
  57. data/lib/bullet_train/themes/tester/version.rb +7 -0
  58. data/lib/bullet_train/themes/tester.rb +15 -0
  59. data/lib/tasks/bullet_train/themes/tester_tasks.rake +53 -0
  60. data/tailwind.tester.config.js +80 -0
  61. metadata +132 -0
@@ -0,0 +1,359 @@
1
+ // TODO there is a ton of duplicate here that we can clean up!
2
+
3
+ *:not(br):not(tr):not(html) {
4
+ font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
5
+ box-sizing: border-box;
6
+ }
7
+
8
+ body {
9
+ width: 100% !important;
10
+ height: 100%;
11
+ margin: 0;
12
+ line-height: 1.4;
13
+ background-color: #F6F7F8;
14
+ color: #3E4B5B;
15
+ font-size: 16px;
16
+ -webkit-text-size-adjust: none;
17
+ }
18
+
19
+ p,
20
+ ul,
21
+ ol,
22
+ blockquote {
23
+ line-height: 1.4;
24
+ text-align: left;
25
+ }
26
+
27
+ a {
28
+ color: #047BF8;
29
+ }
30
+
31
+ a img {
32
+ border: none;
33
+ }
34
+ /* Layout ------------------------------ */
35
+
36
+ .email-wrapper {
37
+ width: 100%;
38
+ margin: 0;
39
+ padding: 0;
40
+ background-color: #F6F7F8;
41
+ }
42
+
43
+ .email-content {
44
+ width: 100%;
45
+ margin: 0;
46
+ padding: 0;
47
+ }
48
+ /* Masthead ----------------------- */
49
+
50
+ .email-masthead {
51
+ padding: 25px 0;
52
+ text-align: center;
53
+ }
54
+
55
+ .email-masthead_logo {
56
+ width: 94px;
57
+ }
58
+
59
+ .email-masthead_name {
60
+ font-size: 16px;
61
+ /*font-weight: bold;*/
62
+ color: #bbbfc3;
63
+ text-decoration: none;
64
+ /*text-shadow: 0 1px 0 white;*/
65
+ }
66
+ /* Body ------------------------------ */
67
+
68
+ .email-body {
69
+ width: 100%;
70
+ margin: 0;
71
+ padding: 0;
72
+ border-top: 1px solid #EDEFF2;
73
+ border-bottom: 1px solid #EDEFF2;
74
+ background-color: #FFFFFF;
75
+
76
+ }
77
+
78
+ .email-body_inner {
79
+ width: 570px;
80
+ margin: 0 auto;
81
+ padding: 0;
82
+ background-color: #FFFFFF;
83
+ }
84
+
85
+ .email-footer {
86
+ width: 570px;
87
+ margin: 0 auto;
88
+ padding: 0;
89
+ text-align: center;
90
+ }
91
+
92
+ .email-footer p {
93
+ color: #AAAAAA;
94
+ }
95
+
96
+ .body-action {
97
+ width: 100%;
98
+ margin: 30px auto;
99
+ padding: 0;
100
+ text-align: center;
101
+ }
102
+
103
+ .body-sub {
104
+ margin-top: 25px;
105
+ padding-top: 25px;
106
+ border-top: 1px solid #EDEFF2;
107
+ }
108
+
109
+ .content-cell {
110
+ padding: 35px;
111
+ }
112
+
113
+ .preheader {
114
+ display: none !important;
115
+ }
116
+ /* Attribute list ------------------------------ */
117
+
118
+ .attributes {
119
+ margin: 0 0 21px;
120
+ }
121
+
122
+ .attributes_content {
123
+ background-color: #EDEFF2;
124
+ padding: 16px;
125
+ }
126
+
127
+ .attributes_item {
128
+ padding: 0;
129
+ }
130
+ /* Related Items ------------------------------ */
131
+
132
+ .related {
133
+ width: 100%;
134
+ margin: 0;
135
+ padding: 25px 0 0 0;
136
+ }
137
+
138
+ .related_item {
139
+ padding: 10px 0;
140
+ color: #3E4B5B;
141
+ font-size: 15px;
142
+ line-height: 18px;
143
+ }
144
+
145
+ .related_item-title {
146
+ display: block;
147
+ margin: .5em 0 0;
148
+ }
149
+
150
+ .related_item-thumb {
151
+ display: block;
152
+ padding-bottom: 10px;
153
+ }
154
+
155
+ .related_heading {
156
+ border-top: 1px solid #EDEFF2;
157
+ text-align: center;
158
+ padding: 25px 0 10px;
159
+ }
160
+ /* Discount Code ------------------------------ */
161
+
162
+ .discount {
163
+ width: 100%;
164
+ margin: 0;
165
+ padding: 24px;
166
+ background-color: #EDEFF2;
167
+ border: 2px dashed #9BA2AB;
168
+ }
169
+
170
+ .discount_heading {
171
+ text-align: center;
172
+ }
173
+
174
+ .discount_body {
175
+ text-align: center;
176
+ font-size: 15px;
177
+ }
178
+ /* Social Icons ------------------------------ */
179
+
180
+ .social {
181
+ width: auto;
182
+ }
183
+
184
+ .social td {
185
+ padding: 0;
186
+ width: auto;
187
+ }
188
+
189
+ .social_icon {
190
+ height: 20px;
191
+ margin: 0 8px 10px 8px;
192
+ padding: 0;
193
+ }
194
+ /* Data table ------------------------------ */
195
+
196
+ .purchase {
197
+ width: 100%;
198
+ margin: 0;
199
+ padding: 35px 0;
200
+ }
201
+
202
+ .purchase_content {
203
+ width: 100%;
204
+ margin: 0;
205
+ padding: 25px 0 0 0;
206
+ }
207
+
208
+ .purchase_item {
209
+ padding: 10px 0;
210
+ color: #3E4B5B;
211
+ font-size: 15px;
212
+ line-height: 18px;
213
+ }
214
+
215
+ .purchase_heading {
216
+ padding-bottom: 8px;
217
+ border-bottom: 1px solid #EDEFF2;
218
+ }
219
+
220
+ .purchase_heading p {
221
+ margin: 0;
222
+ color: #9BA2AB;
223
+ font-size: 12px;
224
+ }
225
+
226
+ .purchase_footer {
227
+ padding-top: 15px;
228
+ border-top: 1px solid #EDEFF2;
229
+ }
230
+
231
+ .purchase_total {
232
+ margin: 0;
233
+ text-align: right;
234
+ /*font-weight: bold;*/
235
+ color: #3E4B5B;
236
+ }
237
+
238
+ .purchase_total--label {
239
+ padding: 0 15px 0 0;
240
+ }
241
+ /* Utilities ------------------------------ */
242
+
243
+ .align-right {
244
+ text-align: right;
245
+ }
246
+
247
+ .align-left {
248
+ text-align: left;
249
+ }
250
+
251
+ .align-center {
252
+ text-align: center;
253
+ }
254
+ /*Media Queries ------------------------------ */
255
+
256
+ @media only screen and (max-width: 600px) {
257
+ .email-body_inner,
258
+ .email-footer {
259
+ width: 100% !important;
260
+ }
261
+ }
262
+
263
+ @media only screen and (max-width: 500px) {
264
+ .button {
265
+ width: 100% !important;
266
+ }
267
+ }
268
+ /* Buttons ------------------------------ */
269
+
270
+ .button {
271
+ background-color: #047BF8;
272
+ border-top: 10px solid #047BF8;
273
+ border-right: 18px solid #047BF8;
274
+ border-bottom: 10px solid #047BF8;
275
+ border-left: 18px solid #047BF8;
276
+ display: inline-block;
277
+ color: #FFF;
278
+ text-decoration: none;
279
+ border-radius: 3px;
280
+ -webkit-text-size-adjust: none;
281
+ line-height: 22px;
282
+ font-size: 16px;
283
+ color: #FFF;
284
+ }
285
+
286
+ .button--link {
287
+ background-color: transparent;
288
+ border-top: 10px solid transparent;
289
+ border-right: 18px solid transparent;
290
+ border-bottom: 10px solid transparent;
291
+ border-left: 18px solid transparent;
292
+ display: inline-block;
293
+ color: #047BF8;
294
+ text-decoration: underline;
295
+ border-radius: 3px;
296
+ /*box-shadow: 0 2px 3px rgba(0, 0, 0, 0.16);*/
297
+ -webkit-text-size-adjust: none;
298
+ }
299
+
300
+ .button--green {
301
+ background-color: #22BC66;
302
+ border-top: 10px solid #22BC66;
303
+ border-right: 18px solid #22BC66;
304
+ border-bottom: 10px solid #22BC66;
305
+ border-left: 18px solid #22BC66;
306
+ }
307
+
308
+ .button--red {
309
+ background-color: #FF6136;
310
+ border-top: 10px solid #FF6136;
311
+ border-right: 18px solid #FF6136;
312
+ border-bottom: 10px solid #FF6136;
313
+ border-left: 18px solid #FF6136;
314
+ }
315
+ /* Type ------------------------------ */
316
+
317
+ h1 {
318
+ margin-top: 0;
319
+ color: #3E4B5B;
320
+ font-size: 19px;
321
+ font-weight: bold;
322
+ text-align: left;
323
+ }
324
+
325
+ h2 {
326
+ margin-top: 0;
327
+ color: #3E4B5B;
328
+ font-size: 16px;
329
+ font-weight: bold;
330
+ text-align: left;
331
+ }
332
+
333
+ h3 {
334
+ margin-top: 0;
335
+ color: #3E4B5B;
336
+ font-size: 14px;
337
+ font-weight: bold;
338
+ text-align: left;
339
+ }
340
+
341
+ p {
342
+ margin-top: 0;
343
+ color: #3E4B5B;
344
+ font-size: 16px;
345
+ line-height: 1.5em;
346
+ text-align: left;
347
+ }
348
+
349
+ p.sub {
350
+ font-size: 12px;
351
+ }
352
+
353
+ p.center {
354
+ text-align: center;
355
+ }
356
+
357
+ .body-action.less-footer {
358
+ margin-bottom: 10px;
359
+ }
@@ -0,0 +1,100 @@
1
+ :root, .theme-blue {
2
+ --primary-300: #95acff;
3
+ --primary-400: #448eef;
4
+ --primary-500: #047bf8;
5
+ --primary-600: #0362c6;
6
+ --primary-700: #1c4cc3;
7
+ --primary-800: #0e369a;
8
+ --primary-900: #00369D;
9
+
10
+ --dark-primary-300: #ccd9e8;
11
+ --dark-primary-400: #9facc7;
12
+ --dark-primary-500: #777E94;
13
+ --dark-primary-600: #4D566F;
14
+ --dark-primary-700: #323c58;
15
+ --dark-primary-800: #2b344e;
16
+ --dark-primary-900: #232942;
17
+
18
+ --dark-accent-200: #b3bcde;
19
+
20
+ --light-gradient-from: #D7BBEA;
21
+ --light-gradient-to: #65A8F1;
22
+ --dark-gradient-from: #633d7d;
23
+ --dark-gradient-to: #2867ab;
24
+ }
25
+
26
+ .theme-purple {
27
+ --primary-300: #ac95ff;
28
+ --primary-400: #8e44ef;
29
+ --primary-500: #7b04f8;
30
+ --primary-600: #6203c6;
31
+ --primary-700: #4c1cc3;
32
+ --primary-800: #360e9a;
33
+ --primary-900: #36009D;
34
+
35
+ --dark-primary-300: #d9cce8;
36
+ --dark-primary-400: #ac9fc7;
37
+ --dark-primary-500: #7E7794;
38
+ --dark-primary-600: #564D6F;
39
+ --dark-primary-700: #3c3258;
40
+ --dark-primary-800: #342b4e;
41
+ --dark-primary-900: #292342;
42
+
43
+ --dark-accent-200: #bcb3de;
44
+
45
+ --light-gradient-from: #EABBD7;
46
+ --light-gradient-to: #A865F1;
47
+ --dark-gradient-from: #7d3d63;
48
+ --dark-gradient-to: #6728ab;
49
+ }
50
+
51
+ .theme-orange {
52
+ --primary-300: #ffac95;
53
+ --primary-400: #ef8e44;
54
+ --primary-500: #f87b04;
55
+ --primary-600: #c66203;
56
+ --primary-700: #c34c1c;
57
+ --primary-800: #9a360e;
58
+ --primary-900: #9D3600;
59
+
60
+ /* TOOD Kind of yuck? */
61
+ --dark-primary-300: #e8d9cc;
62
+ --dark-primary-400: #c7ac9f;
63
+ --dark-primary-500: #947E77;
64
+ --dark-primary-600: #6F564D;
65
+ --dark-primary-700: #583c32;
66
+ --dark-primary-800: #4e342b;
67
+ --dark-primary-900: #422923;
68
+
69
+ --dark-accent-200: #debcb3;
70
+
71
+ --light-gradient-from: #EABBD7;
72
+ --light-gradient-to: #F1A865;
73
+ --dark-gradient-from: #7d3d63;
74
+ --dark-gradient-to: #ab6728;
75
+ }
76
+
77
+ .theme-pink {
78
+ --primary-300: #ff95ac;
79
+ --primary-400: #ef448e;
80
+ --primary-500: #f8047b;
81
+ --primary-600: #c60362;
82
+ --primary-700: #c31c4c;
83
+ --primary-800: #9a0e36;
84
+ --primary-900: #9D0036;
85
+
86
+ --dark-primary-300: #d9cce8;
87
+ --dark-primary-400: #ac9fc7;
88
+ --dark-primary-500: #7E7794;
89
+ --dark-primary-600: #564D6F;
90
+ --dark-primary-700: #3c3258;
91
+ --dark-primary-800: #342b4e;
92
+ --dark-primary-900: #292342;
93
+
94
+ --dark-accent-200: #bcb3de;
95
+
96
+ --light-gradient-from: #D7BBEA;
97
+ --light-gradient-to: #F165A8;
98
+ --dark-gradient-from: #6728ab;
99
+ --dark-gradient-to: #633d7d;
100
+ }
@@ -0,0 +1,151 @@
1
+ @layer components {
2
+ a {
3
+ @apply text-primary-500 hover:text-primary-600 hover:underline;
4
+ }
5
+
6
+ b, strong {
7
+ @apply font-medium;
8
+ }
9
+
10
+ .buttons {
11
+ @apply space-x;
12
+ }
13
+
14
+ .button {
15
+ @apply shadow-sm text-white hover:text-white bg-primary-500 hover:bg-primary-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-600 hover:no-underline;
16
+ }
17
+
18
+ .button-secondary {
19
+ @apply text-primary-500 hover:text-primary-600 hover:underline;
20
+ }
21
+
22
+ .button, .button-secondary, .button-alternative {
23
+ @apply py-2 px-4 border border-transparent rounded-md;
24
+ @apply inline-flex items-center whitespace-nowrap;
25
+ &.button-smaller {
26
+ @apply py-1 px-3 text-xs;
27
+ }
28
+ }
29
+
30
+ .button-alternative {
31
+ @apply border-gray-300 rounded-md shadow-sm bg-white text-gray-500 hover:bg-gray-50 no-underline hover:no-underline;
32
+ }
33
+
34
+ .button-color {
35
+ @extend .button;
36
+ @apply rounded-full;
37
+ }
38
+
39
+ .btn-toggle {
40
+ input[type=checkbox], input[type=radio] {
41
+ display: none;
42
+ &:checked {
43
+ & + button {
44
+ @extend .button;
45
+ }
46
+ }
47
+ }
48
+
49
+ &.btn-color-picker {
50
+ input[type=checkbox], input[type=radio] {
51
+ &:checked {
52
+ & + button {
53
+ @apply ring ring-offset-2 rounded-full;
54
+ }
55
+ }
56
+ }
57
+ }
58
+ }
59
+
60
+ .full {
61
+ @apply w-full flex justify-center;
62
+ }
63
+
64
+ form.form {
65
+ @apply space-y-5;
66
+
67
+ /*
68
+ This is the best way I know how to solve the problem of Tailwind's `space-y-5` creating extra space at the top
69
+ because Rails injects hidden fields at the top of our forms. However, we don't need this on `get` forms, because
70
+ no extra element is injected into the form.
71
+ */
72
+ &[method="post" i], &[method="patch" i] {
73
+ @apply -mt-5;
74
+ }
75
+
76
+ .buttons {
77
+ @apply pt-1 space-x;
78
+ }
79
+ }
80
+
81
+ .table {
82
+ @apply w-full divide-y divide-gray-900 divide-opacity-5 text-left;
83
+
84
+ & th {
85
+ @apply px-3 py-3 text-2xs font-semibold font-normal;
86
+
87
+ &:first-child {
88
+ @apply pl-5;
89
+ }
90
+
91
+ &:last-child {
92
+ @apply pr-5;
93
+ }
94
+ }
95
+
96
+ & tbody {
97
+ @apply divide-y divide-gray-900 divide-opacity-5;
98
+ }
99
+
100
+ & td {
101
+ @apply px-3 py-3.5;
102
+
103
+ &:first-child {
104
+ @apply pl-5;
105
+ }
106
+
107
+ &:last-child {
108
+ @apply pr-5;
109
+ }
110
+
111
+ &.buttons {
112
+ @apply pr-3;
113
+ @apply text-right space-x-2;
114
+
115
+ /* just having a cell with buttons shouldn't expand the height of a table row. */
116
+ & > * {
117
+ @apply -mt-5 -mb-5;
118
+ }
119
+ }
120
+ }
121
+ }
122
+
123
+ .box-table {
124
+ .table {
125
+ & th, & td {
126
+ &:first-child {
127
+ @apply pl-8;
128
+ }
129
+
130
+ &:last-child {
131
+ @apply pr-8;
132
+ }
133
+ }
134
+ }
135
+ }
136
+
137
+ .pagy-nav .page a,
138
+ .pagy-nav .page.active {
139
+ @apply button-alternative;
140
+ }
141
+
142
+ .pagy-nav .page.prev.disabled,
143
+ .pagy-nav .page.next.disabled {
144
+ @apply hidden;
145
+ }
146
+
147
+ .pagy-nav .page.active,
148
+ .pagy-nav-js .page.active {
149
+ @apply button;
150
+ }
151
+ }