bullet_train-themes-light 1.0.8 → 1.0.11

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 (30) hide show
  1. checksums.yaml +4 -4
  2. data/MIT-LICENSE +1 -1
  3. data/app/assets/stylesheets/light/actiontext.css +26 -0
  4. data/app/assets/stylesheets/light/application.css +31 -0
  5. data/app/assets/stylesheets/light/electron.css +46 -0
  6. data/app/assets/stylesheets/light/fields/cloudinary_image.css +58 -0
  7. data/app/assets/stylesheets/light/fields/date_field.css +19 -0
  8. data/app/assets/stylesheets/light/fields/index.css +5 -0
  9. data/app/assets/stylesheets/light/fields/phone_field.css +7 -0
  10. data/app/assets/stylesheets/light/fields/super_select.css +103 -0
  11. data/app/assets/stylesheets/light/fields/trix_editor.css +88 -0
  12. data/app/assets/stylesheets/light/mailer.scss +359 -0
  13. data/app/assets/stylesheets/light/tailwind/components.css +136 -0
  14. data/app/assets/stylesheets/light/tailwind/dark-mode.css +205 -0
  15. data/app/assets/stylesheets/light/tailwind/utilities.css +49 -0
  16. data/app/assets/stylesheets/light.tailwind.css +5 -3
  17. data/app/assets/stylesheets/tailwindcss/base.css +1 -0
  18. data/app/assets/stylesheets/tailwindcss/components.css +1 -0
  19. data/app/assets/stylesheets/tailwindcss/utilities.css +1 -0
  20. data/app/views/themes/light/conversations/_card.html.erb +21 -0
  21. data/app/views/themes/light/conversations/_comment.html.erb +26 -0
  22. data/app/views/themes/light/conversations/_message.html.erb +127 -0
  23. data/app/views/themes/light/conversations/_thread_border.html.erb +3 -0
  24. data/app/views/themes/light/layouts/_account.html.erb +1 -1
  25. data/app/views/themes/light/layouts/_head.html.erb +6 -4
  26. data/app/views/themes/light/workflow/_box.html.erb +1 -1
  27. data/lib/bullet_train/themes/light/engine.rb +1 -0
  28. data/lib/bullet_train/themes/light/version.rb +1 -1
  29. data/tailwind.light.config.js +5 -1
  30. metadata +22 -2
@@ -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,136 @@
1
+ @layer components {
2
+ a {
3
+ @apply text-blue hover:text-blue-dark 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-blue hover:bg-blue-dark focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-dark hover:no-underline;
16
+ }
17
+
18
+ .button-secondary {
19
+ @apply text-blue hover:text-blue-dark 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
+ }
@@ -0,0 +1,205 @@
1
+ @layer utilities {
2
+ @media (prefers-color-scheme: dark) {
3
+ /**
4
+ * Color overrides
5
+ **/
6
+ .bg-blue-darker {
7
+ background-color: rgba(0, 0, 0, 0.15);
8
+ }
9
+
10
+ @variants dark {
11
+ .bg-dark-blue-gradient {
12
+ &:before {
13
+ background: linear-gradient(to bottom right, #633d7d, #2867ab 100%);
14
+ }
15
+ background: linear-gradient(to bottom right, #633d7d, #2867ab 100%);
16
+ }
17
+ }
18
+
19
+ /**
20
+ * General
21
+ **/
22
+ .button {
23
+ @apply ring-offset-sealBlue-400;
24
+ }
25
+
26
+ .table {
27
+ th {
28
+ @apply text-sealBlue-700;
29
+ }
30
+
31
+ tbody {
32
+ @apply border-gray-500;
33
+
34
+ tr {
35
+ border-top: 1px solid theme('colors.sealBlue.600');
36
+ }
37
+
38
+ td {
39
+ @apply text-gray-400;
40
+
41
+ a,
42
+ input[type="submit"] {
43
+ @apply text-sealBlue-800;
44
+ }
45
+ }
46
+ }
47
+ }
48
+
49
+ /**
50
+ * Form components
51
+ **/
52
+ .button-secondary {
53
+ @apply text-sealBlue-800;
54
+ }
55
+
56
+ .button-alternative {
57
+ @apply bg-black-400 border-black-400 text-white;
58
+
59
+ &:hover {
60
+ @apply bg-black-300 border-black-200 text-white;
61
+ }
62
+ }
63
+
64
+ /**
65
+ * Custom components
66
+ **/
67
+ /* Color picker */
68
+ .pcr-app {
69
+ @apply bg-sealBlue-300 border border-solid border-sealBlue-100;
70
+
71
+ .pcr-interaction .pcr-result {
72
+ @apply text-sealBlue-900 border border-solid border-sealBlue-100 bg-sealBlue-300;
73
+
74
+ &:focus {
75
+ box-shadow: 0 0 0 1px theme('colors.blue.500'), 0 0 0 3px theme('colors.blue.500');
76
+ }
77
+ }
78
+ }
79
+
80
+ /* Date range picker */
81
+ .daterangepicker {
82
+ @apply bg-sealBlue-300 border-sealBlue-100;
83
+
84
+ &::before {
85
+ border-bottom-color: theme('colors.sealBlue.100');
86
+ }
87
+
88
+ &::after {
89
+ border-bottom-color: theme('colors.sealBlue.300');
90
+ }
91
+
92
+ .calendar-table {
93
+ @apply bg-sealBlue-300 text-sealBlue-900;
94
+
95
+ /* navigation arrows */
96
+ .available {
97
+ span {
98
+ @apply border-blue-500;
99
+ }
100
+ }
101
+ }
102
+
103
+ /* Clear and Apply buttons wrapper */
104
+ .drp-buttons {
105
+ border-top-color: theme('colors.sealBlue.100');
106
+ @apply text-sealBlue-900;
107
+ }
108
+
109
+ th {
110
+ &.available:hover {
111
+ @apply bg-sealBlue-500;
112
+ }
113
+ }
114
+
115
+ td {
116
+ &.off {
117
+ @apply bg-sealBlue-300 text-white;
118
+ }
119
+
120
+ &.available:hover {
121
+ @apply bg-sealBlue-500;
122
+ }
123
+ }
124
+
125
+ .hourselect, .minuteselect, .ampmselect {
126
+ @apply text-sealBlue-900 border-sealBlue-100 bg-sealBlue-300 !important;
127
+ }
128
+ }
129
+
130
+ /* Phone field */
131
+ .iti__country-list {
132
+ @apply bg-sealBlue-300 border border-solid border-sealBlue-100;
133
+ }
134
+
135
+ /* Select2 */
136
+ .select2-container {
137
+ .select2-selection__rendered {
138
+ @apply text-sealBlue-900 !important;
139
+ }
140
+
141
+ .select2-dropdown {
142
+ @apply bg-sealBlue-400;
143
+ }
144
+
145
+ .select2-search__field {
146
+ @apply bg-sealBlue-300 border-sealBlue-100 !important;
147
+ }
148
+
149
+ .select2-selection--multiple, .select2-selection--single {
150
+ @apply bg-sealBlue-300 focus:ring-blue border-sealBlue-100 !important;
151
+ @apply text-sealBlue-900;
152
+ }
153
+
154
+ /* For the selected options in the multiple select2 component */
155
+ .select2-selection__choice {
156
+ @apply bg-blue-500 border-blue-500 !important;
157
+ @apply text-white;
158
+
159
+ .select2-selection__choice__remove {
160
+ @apply text-white;
161
+
162
+ &:hover {
163
+ @apply text-white;
164
+ }
165
+ }
166
+ }
167
+
168
+ .select2-results__option {
169
+ @apply text-sealBlue-900;
170
+ }
171
+ }
172
+
173
+ /* Trix Editor */
174
+ trix-editor {
175
+ @apply bg-sealBlue-300 border-sealBlue-100 !important;
176
+
177
+ &:focus, &:active {
178
+ @apply border-blue !important;
179
+ }
180
+ }
181
+
182
+ trix-toolbar {
183
+ .trix-button-group, .trix-button {
184
+ @apply border-sealBlue-100 !important;
185
+ }
186
+ }
187
+
188
+ /* CKEditor */
189
+ .ck {
190
+ --ck-color-base-background: theme('colors.sealBlue.300');
191
+ --ck-color-base-border: theme('colors.sealBlue.100');
192
+ --ck-color-toolbar-background: theme('colors.sealBlue.200');
193
+ --ck-color-toolbar-border: theme('colors.sealBlue.100');
194
+ --ck-color-text: theme('colors.sealBlue.900');
195
+
196
+ .ck-editor__editable:not(.ck-editor__nested-editable) {
197
+ @apply shadow-none;
198
+
199
+ &.ck-focused {
200
+ @apply shadow-none;
201
+ }
202
+ }
203
+ }
204
+ }
205
+ }