bullet_train-themes-custom 1.0

Sign up to get free protection for your applications and to get access to all the features.
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_custom_manifest.js +0 -0
  7. data/app/assets/stylesheets/custom/actiontext.css +26 -0
  8. data/app/assets/stylesheets/custom/application.css +33 -0
  9. data/app/assets/stylesheets/custom/electron.css +46 -0
  10. data/app/assets/stylesheets/custom/fields/cloudinary_image.css +58 -0
  11. data/app/assets/stylesheets/custom/fields/date_field.css +19 -0
  12. data/app/assets/stylesheets/custom/fields/index.css +5 -0
  13. data/app/assets/stylesheets/custom/fields/phone_field.css +7 -0
  14. data/app/assets/stylesheets/custom/fields/super_select.css +103 -0
  15. data/app/assets/stylesheets/custom/fields/trix_editor.css +90 -0
  16. data/app/assets/stylesheets/custom/mailer.scss +359 -0
  17. data/app/assets/stylesheets/custom/tailwind/colors.css +100 -0
  18. data/app/assets/stylesheets/custom/tailwind/components.css +151 -0
  19. data/app/assets/stylesheets/custom/tailwind/dark-mode.css +218 -0
  20. data/app/assets/stylesheets/custom/tailwind/utilities.css +49 -0
  21. data/app/assets/stylesheets/custom/turn.css +44 -0
  22. data/app/assets/stylesheets/custom.tailwind.css +5 -0
  23. data/app/assets/stylesheets/tailwindcss/base.css +1 -0
  24. data/app/assets/stylesheets/tailwindcss/components.css +1 -0
  25. data/app/assets/stylesheets/tailwindcss/utilities.css +1 -0
  26. data/app/javascript/application.custom.js +0 -0
  27. data/app/views/themes/custom/_alert.html.erb +13 -0
  28. data/app/views/themes/custom/_box.html.erb +66 -0
  29. data/app/views/themes/custom/_breadcrumb.html.erb +23 -0
  30. data/app/views/themes/custom/_cell.html.erb +41 -0
  31. data/app/views/themes/custom/_decision_line.html.erb +12 -0
  32. data/app/views/themes/custom/_line.html.erb +3 -0
  33. data/app/views/themes/custom/_notices.html.erb +15 -0
  34. data/app/views/themes/custom/_page.html.erb +12 -0
  35. data/app/views/themes/custom/_title.html.erb +18 -0
  36. data/app/views/themes/custom/attributes/_base.html.erb +30 -0
  37. data/app/views/themes/custom/attributes/_block.html.erb +9 -0
  38. data/app/views/themes/custom/breadcrumbs/_actions.html.erb +22 -0
  39. data/app/views/themes/custom/commentary/_box.html.erb +13 -0
  40. data/app/views/themes/custom/conversations/_card.html.erb +21 -0
  41. data/app/views/themes/custom/conversations/_comment.html.erb +26 -0
  42. data/app/views/themes/custom/conversations/_message.html.erb +136 -0
  43. data/app/views/themes/custom/conversations/_thread_border.html.erb +3 -0
  44. data/app/views/themes/custom/fields/_field.html.erb +81 -0
  45. data/app/views/themes/custom/forms/_errors.html.erb +14 -0
  46. data/app/views/themes/custom/layouts/_account.html.erb +138 -0
  47. data/app/views/themes/custom/layouts/_devise.html.erb +11 -0
  48. data/app/views/themes/custom/layouts/_head.html.erb +8 -0
  49. data/app/views/themes/custom/layouts/_mailer.html.erb +429 -0
  50. data/app/views/themes/custom/memberships/_photos.html.erb +18 -0
  51. data/app/views/themes/custom/menu/_heading.html.erb +3 -0
  52. data/app/views/themes/custom/menu/_item.html.erb +16 -0
  53. data/app/views/themes/custom/menu/_section.html.erb +7 -0
  54. data/app/views/themes/custom/workflow/_box.html.erb +30 -0
  55. data/config/routes.rb +2 -0
  56. data/lib/bullet_train/themes/custom/engine.rb +12 -0
  57. data/lib/bullet_train/themes/custom/version.rb +7 -0
  58. data/lib/bullet_train/themes/custom.rb +16 -0
  59. data/lib/tasks/bullet_train/themes/custom_tasks.rake +53 -0
  60. data/tailwind.custom.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: #c3f7f4;
3
+ --primary-400: #a6fffb;
4
+ --primary-500: #7cfff8;
5
+ --primary-600: #6de4da;
6
+ --primary-700: #51dfd8;
7
+ --primary-800: #3cafaf;
8
+ --primary-900: #317b7e;
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: #c0e2e2;
21
+ --light-gradient-to: #65f1e5;
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
+ }