coveragebook_components 0.16.0 → 0.17.1

Sign up to get free protection for your applications and to get access to all the features.
Files changed (87) hide show
  1. checksums.yaml +4 -4
  2. data/app/assets/build/coco/coco.css +1 -3
  3. data/app/assets/build/coco/coco.js +11224 -10972
  4. data/app/assets/build/coco/tailwind.preset.js +7 -6
  5. data/app/assets/css/base/setup.css +0 -32
  6. data/app/assets/css/coco.css +33 -2
  7. data/app/assets/js/base/alpine/directives/dropdown.js +2 -2
  8. data/app/assets/js/base/tippy/plugins/hide_on_esc.js +3 -1
  9. data/app/assets/js/coco/coco.js +0 -9
  10. data/app/assets/js/coco.js +5 -0
  11. data/app/assets/js/helpers/index.js +10 -2
  12. data/app/components/coco/buttons/layout_picker_button/layout_picker_button.html.erb +5 -1
  13. data/app/components/coco/buttons/layout_picker_button/layout_picker_button.rb +2 -2
  14. data/app/components/coco/component.rb +1 -1
  15. data/app/components/coco/concerns/acts_as_field_with_options.rb +0 -1
  16. data/app/components/coco/fields/button_component.rb +1 -1
  17. data/app/components/coco/fields/submit_component.rb +1 -1
  18. data/app/helpers/coco/components_helper.rb +253 -3
  19. data/app/helpers/coco/integration_helper.rb +6 -6
  20. data/config/locales/coco.en.yml +0 -18
  21. data/config/tailwind.preset.js +7 -6
  22. data/lib/coco/engine.rb +0 -4
  23. data/lib/coco.rb +1 -1
  24. metadata +2 -65
  25. data/app/assets/build/coco/app.css +0 -9619
  26. data/app/assets/build/coco/app.js +0 -25150
  27. data/app/assets/build/coco/book.css +0 -7453
  28. data/app/assets/build/coco/book.js +0 -16552
  29. data/app/assets/css/app.css +0 -3
  30. data/app/assets/css/book.css +0 -3
  31. data/app/assets/js/app.js +0 -11
  32. data/app/assets/js/book.js +0 -9
  33. data/app/assets/js/helpers/screenshot.js +0 -42
  34. data/app/assets/js/helpers/turbo_events.js +0 -13
  35. data/app/components/coco/app/application_layout/application_layout.css +0 -122
  36. data/app/components/coco/app/application_layout/application_layout.html.erb +0 -32
  37. data/app/components/coco/app/application_layout/application_layout.js +0 -36
  38. data/app/components/coco/app/application_layout/application_layout.rb +0 -16
  39. data/app/components/coco/app/contact_callout/contact_callout.css +0 -119
  40. data/app/components/coco/app/contact_callout/contact_callout.html.erb +0 -28
  41. data/app/components/coco/app/contact_callout/contact_callout.rb +0 -21
  42. data/app/components/coco/app/faqs/faqs.css +0 -38
  43. data/app/components/coco/app/faqs/faqs.html.erb +0 -12
  44. data/app/components/coco/app/faqs/faqs.rb +0 -14
  45. data/app/components/coco/app/header/header.css +0 -47
  46. data/app/components/coco/app/header/header.html.erb +0 -30
  47. data/app/components/coco/app/header/header.js +0 -11
  48. data/app/components/coco/app/header/header.rb +0 -33
  49. data/app/components/coco/app/nav_drawer/nav_drawer.css +0 -58
  50. data/app/components/coco/app/nav_drawer/nav_drawer.html.erb +0 -16
  51. data/app/components/coco/app/nav_drawer/nav_drawer.js +0 -24
  52. data/app/components/coco/app/nav_drawer/nav_drawer.rb +0 -32
  53. data/app/components/coco/app/plan_card/plan_card.css +0 -132
  54. data/app/components/coco/app/plan_card/plan_card.html.erb +0 -36
  55. data/app/components/coco/app/plan_card/plan_card.rb +0 -66
  56. data/app/components/coco/app/plan_confirmation/plan_confirmation.css +0 -53
  57. data/app/components/coco/app/plan_confirmation/plan_confirmation.html.erb +0 -16
  58. data/app/components/coco/app/plan_confirmation/plan_confirmation.rb +0 -18
  59. data/app/components/coco/app/plan_picker/plan_picker.css +0 -128
  60. data/app/components/coco/app/plan_picker/plan_picker.html.erb +0 -69
  61. data/app/components/coco/app/plan_picker/plan_picker.js +0 -56
  62. data/app/components/coco/app/plan_picker/plan_picker.rb +0 -25
  63. data/app/components/coco/app/sidebar_nav/item/item.css +0 -121
  64. data/app/components/coco/app/sidebar_nav/item/item.html.erb +0 -9
  65. data/app/components/coco/app/sidebar_nav/item/item.js +0 -80
  66. data/app/components/coco/app/sidebar_nav/item/item.rb +0 -48
  67. data/app/components/coco/app/sidebar_nav/menu/menu.css +0 -138
  68. data/app/components/coco/app/sidebar_nav/menu/menu.html.erb +0 -24
  69. data/app/components/coco/app/sidebar_nav/menu/menu.js +0 -12
  70. data/app/components/coco/app/sidebar_nav/menu/menu.rb +0 -46
  71. data/app/components/coco/app/sidebar_nav/navbar/navbar.css +0 -75
  72. data/app/components/coco/app/sidebar_nav/navbar/navbar.html.erb +0 -29
  73. data/app/components/coco/app/sidebar_nav/navbar/navbar.js +0 -28
  74. data/app/components/coco/app/sidebar_nav/navbar/navbar.rb +0 -50
  75. data/app/components/coco/app/slide_editor/slide_editor.css +0 -149
  76. data/app/components/coco/app/slide_editor/slide_editor.html.erb +0 -302
  77. data/app/components/coco/app/slide_editor/slide_editor.js +0 -269
  78. data/app/components/coco/app/slide_editor/slide_editor.rb +0 -114
  79. data/app/components/coco/book/editable_slide/editable_slide.css +0 -332
  80. data/app/components/coco/book/editable_slide/editable_slide.html.erb +0 -48
  81. data/app/components/coco/book/editable_slide/editable_slide.rb +0 -72
  82. data/app/components/coco/book/media_slide/media_slide.css +0 -7
  83. data/app/components/coco/book/media_slide/media_slide.html.erb +0 -3
  84. data/app/components/coco/book/media_slide/media_slide.rb +0 -12
  85. data/app/helpers/coco/app_components_helper.rb +0 -39
  86. data/app/helpers/coco/book_components_helper.rb +0 -11
  87. data/app/helpers/coco/core_components_helper.rb +0 -257
@@ -1,269 +0,0 @@
1
- import { CocoComponent } from "@assets/js/coco/component";
2
- import { getData } from "@helpers/alpine";
3
- import { captureElementScreenshot } from "@helpers/screenshot";
4
- import { isDark } from "@helpers/color";
5
- import { wasSuccessful } from "@helpers/turbo_events";
6
-
7
- export default CocoComponent("appSlideEditor", (data) => {
8
- const initialData = {
9
- layout: data.layout,
10
- title: data.title,
11
- text1: data.text1,
12
- text2: data.text2,
13
- bgColor: data.bgColor,
14
- textColor: data.textColor,
15
- bgImage: {
16
- name: data.bgImage,
17
- data: data.bgImage,
18
- },
19
- image1: {
20
- name: data.image1,
21
- data: data.image1,
22
- },
23
- image2: {
24
- name: data.image2,
25
- data: data.image2,
26
- },
27
- };
28
-
29
- return {
30
- ...initialData,
31
-
32
- saved: { ...initialData },
33
-
34
- saving: false,
35
- ready: false,
36
- dragging: false,
37
- errors: [],
38
-
39
- thumbnailFile: null,
40
-
41
- get bgImagePicker() {
42
- return getData(this.$root.querySelector("[data-role='bg-image-picker']"));
43
- },
44
-
45
- get layoutPicker() {
46
- return getData(this.$root.querySelector("[data-role='layout-picker']"));
47
- },
48
-
49
- init() {
50
- this.$watch("errors", (errors) => {
51
- errors.forEach((error) => console.error(error.message)); // TODO display errors properly!
52
- });
53
-
54
- this.$nextTick(() => {
55
- // Add property changes to the undo/redo history
56
- this._fields.forEach((name) => {
57
- this.$watch(name, (value, oldValue) =>
58
- this.history.add(name, value, oldValue)
59
- );
60
- });
61
-
62
- // Stop navigation when changes have not been saved
63
- this.$watch("history.undoable", (undoable) => {
64
- if (undoable) {
65
- window.onbeforeunload = () => true;
66
- } else {
67
- window.onbeforeunload = null;
68
- }
69
- });
70
-
71
- this.ready = true;
72
- });
73
- },
74
-
75
- undo(name, value) {
76
- this[name] = value;
77
- this.$nextTick(() => this.updateTextareaSizes());
78
- },
79
-
80
- redo(name, value) {
81
- this[name] = value;
82
- this.$nextTick(() => this.updateTextareaSizes());
83
- },
84
-
85
- updateTextareaSizes() {
86
- const inputs = this.$root.querySelectorAll(
87
- "[data-component='seamless-textarea']"
88
- );
89
- Array.from(inputs).forEach((el) => getData(el).onResize());
90
- },
91
-
92
- setLayout(layout) {
93
- this.layout = layout;
94
- },
95
-
96
- handleImageDrop(event) {
97
- this.dragging = false;
98
-
99
- if (this.bgImagePicker) {
100
- this.bgImagePicker.handleExternalDrop(event);
101
- } else {
102
- event.preventDefault();
103
- }
104
- },
105
-
106
- async save() {
107
- this.clearErrors();
108
- this.saving = true;
109
-
110
- if (this.$refs.thumbnail) {
111
- try {
112
- await this._generateThumbnail();
113
- } catch (error) {
114
- this.thumbnailFile = null;
115
- message = error.message || "Error generating slide thumbnail";
116
- this.handleSaveError(message, { error });
117
- return;
118
- }
119
- }
120
-
121
- const form = this.$refs.form && this.$refs.form.querySelector("form");
122
-
123
- if (form && form.dataset.submit !== "false") {
124
- const submitButton = form.querySelector("[type='submit']");
125
- if (submitButton) {
126
- submitButton.click();
127
- } else {
128
- this.handleSaveError("Slide form is missing a submit button");
129
- }
130
- } else {
131
- this.submitSuccess();
132
- }
133
- },
134
-
135
- submitEnd($event) {
136
- this[wasSuccessful($event) ? "submitSuccess" : "submitError"]($event);
137
- },
138
-
139
- submitSuccess($event) {
140
- this.history.clear();
141
- this._fields.forEach((name) => (this.saved[name] = this[name]));
142
- this.saving = false;
143
-
144
- console.info("Slide changes saved");
145
- this.$dispatch("slide:save-end", { success: true });
146
- },
147
-
148
- submitError($event) {
149
- const message = "Error saving slide - form could not be submitted";
150
- this.handleSaveError(message, { event: $event });
151
- },
152
-
153
- directUploadError($event) {
154
- $event.preventDefault(); // prevent generic alert dialog error
155
-
156
- const message = $event.detail.error || "Error uploading file to storage";
157
- this.handleSaveError(message, { event: $event });
158
- },
159
-
160
- handleSaveError(message = "Error saving slide", context = {}) {
161
- this.errors.push({ message, context });
162
- this.saving = false;
163
-
164
- this.$dispatch("slide:save-end", { success: false });
165
- },
166
-
167
- clearErrors() {
168
- this.errors.length = 0;
169
- },
170
-
171
- syncFileInput(input, file) {
172
- const dataTransfer = new DataTransfer();
173
- if (file && file instanceof File) {
174
- dataTransfer.items.add(file);
175
- }
176
- input.files = dataTransfer.files;
177
- },
178
-
179
- handleSlideClick(event) {
180
- if (Array.from(event.target.classList).includes("slide-text")) {
181
- event.target.querySelector("textarea").focus();
182
- }
183
- },
184
-
185
- get blankTextAreasList() {
186
- return ["title", "text1", "text2"]
187
- .map((textareaName) => (this[textareaName] === "" ? textareaName : ""))
188
- .join(" ")
189
- .trim();
190
- },
191
-
192
- get hasBgImage() {
193
- return !!(this.bgImage && this.bgImage.data);
194
- },
195
-
196
- get hasImage1() {
197
- return !!(this.image1 && this.image1.data);
198
- },
199
-
200
- get hasImage2() {
201
- return !!(this.image2 && this.image2.data);
202
- },
203
-
204
- get bgColorHex() {
205
- return this.bgColor.replace("#", "");
206
- },
207
-
208
- get textColorHex() {
209
- return this.textColor.replace("#", "");
210
- },
211
-
212
- get isDarkBg() {
213
- return this.hasBgImage || this.bgColor ? isDark(this.bgColor) : false;
214
- },
215
-
216
- get _fields() {
217
- return Object.keys(initialData);
218
- },
219
-
220
- async _generateThumbnail() {
221
- this.thumbnailFile = await captureElementScreenshot(
222
- this.$refs.thumbnail.firstElementChild,
223
- "slide-thumbnail"
224
- );
225
-
226
- console.info(
227
- "Slide thumbnail generated",
228
- `${this.thumbnailFile.size / 1000}KiB`
229
- );
230
- },
231
-
232
- /* bindings */
233
-
234
- slide: {
235
- [":style"]() {
236
- return {
237
- backgroundColor: this.bgColor,
238
- color: this.textColor,
239
- backgroundImage: this.hasBgImage
240
- ? `url('${this.bgImage.data}')`
241
- : "none",
242
- };
243
- },
244
- [":class"]() {
245
- return {
246
- "slide-bg-dark": this.isDarkBg,
247
- "slide-bg-light": !this.isDarkBg,
248
- };
249
- },
250
- [":data-layout"]: "layout",
251
- },
252
-
253
- input: {
254
- layout: { "x-model.fill": "layout.replace(/-/g,'_')" },
255
- title: { "x-model.fill": "title" },
256
- text1: { "x-model.fill": "text1" },
257
- text2: { "x-model.fill": "text2" },
258
- bgColor: { "x-model.fill": "bgColorHex" },
259
- textColor: { "x-model.fill": "textColorHex" },
260
- bgImage: { "x-effect": "syncFileInput($el, bgImage.file)" },
261
- bgImagePurge: { ":checked": "!hasBgImage" },
262
- image1: { "x-effect": "syncFileInput($el, image1.file)" },
263
- image1Purge: { ":checked": "!hasImage1" },
264
- image2: { "x-effect": "syncFileInput($el, image2.file)" },
265
- image2Purge: { ":checked": "!hasImage2" },
266
- thumbnailImage: { "x-effect": "syncFileInput($el, thumbnailFile)" },
267
- },
268
- };
269
- });
@@ -1,114 +0,0 @@
1
- module Coco
2
- module App
3
- class SlideEditor < Coco::Component
4
- include Coco::AppComponentsHelper
5
- include Coco::BookComponentsHelper
6
- include Coco::FormatHelper
7
-
8
- DEFAULT_LAYOUT = "one-col-title"
9
-
10
- renders_one :title, ->(value = nil, **textarea_options) do
11
- Coco::SeamlessTextarea.new(**textarea_options,
12
- value: value,
13
- multiline: false,
14
- focus: true,
15
- data: {role: "title-editor"},
16
- x: {modelable: "value", model: "title"})
17
- end
18
-
19
- renders_one :text_1, ->(value = nil, **textarea_options) do
20
- Coco::SeamlessTextarea.new(**textarea_options,
21
- value: value,
22
- multiline: true,
23
- data: {role: "text-1-editor"},
24
- x: {modelable: "value", model: "text1"})
25
- end
26
-
27
- renders_one :text_2, ->(value = nil, **textarea_options) do
28
- Coco::SeamlessTextarea.new(**textarea_options,
29
- value: value,
30
- multiline: true,
31
- data: {role: "text-2-editor"},
32
- x: {modelable: "value", model: "text2"})
33
- end
34
-
35
- renders_one :image_1, ->(src = nil, **image_options) do
36
- @image_1_options = {src: src, **image_options}
37
- end
38
-
39
- renders_one :image_2, ->(src = nil, **image_options) do
40
- @image_2_options = {src: src, **image_options}
41
- end
42
-
43
- renders_one :bg_color, ->(value = nil, **input_options) do
44
- @bg_color_options = {selected: value, **input_options}
45
- end
46
-
47
- renders_one :text_color, ->(value = nil, **input_options) do
48
- @text_color_options = {selected: value, **input_options}
49
- end
50
-
51
- renders_one :bg_image, ->(src = nil, **input_options) do
52
- @bg_image_options = {src: src, **input_options}
53
- end
54
-
55
- renders_one :layout, ->(value = DEFAULT_LAYOUT, **input_options) do
56
- @layout_options = {selected: value&.to_s&.tr("_", "-"), **input_options}
57
- end
58
-
59
- def initialize(generate_thumbnail: true, **kwargs)
60
- @generate_thumbnail = generate_thumbnail
61
- end
62
-
63
- def generate_thumbnail? = @generate_thumbnail
64
-
65
- def slide_args
66
- {
67
- bg_image: bg_image_src,
68
- bg_color_hex: bg_color_css,
69
- text_color_hex: text_color_css,
70
- layout: current_layout,
71
- render_empty: true
72
- }
73
- end
74
-
75
- def alpine_props
76
- {
77
- bg_color: bg_color_css,
78
- text_color: text_color_css,
79
- title: title&.value,
80
- text_1: text_1&.value,
81
- text_2: text_2&.value,
82
- image_1: image_1_src,
83
- image_2: image_2_src,
84
- bg_image: bg_image_src,
85
- layout: current_layout
86
- }
87
- end
88
-
89
- def bg_color_css
90
- @bg_color_options[:selected] if @bg_color_options
91
- end
92
-
93
- def text_color_css
94
- @text_color_options[:selected] if @text_color_options
95
- end
96
-
97
- def bg_image_src
98
- @bg_image_options[:src] if @bg_image_options
99
- end
100
-
101
- def image_1_src
102
- @image_1_options[:src] if @image_1_options
103
- end
104
-
105
- def image_2_src
106
- @image_2_options[:src] if @image_2_options
107
- end
108
-
109
- def current_layout
110
- @layout_options&.fetch(:selected, DEFAULT_LAYOUT) || DEFAULT_LAYOUT
111
- end
112
- end
113
- end
114
- end
@@ -1,332 +0,0 @@
1
- @layer components {
2
- [data-coco][data-component="book-editable-slide"] {
3
- /*
4
- * slide-padding-lg at max (1480px): 240px (16.2%)
5
- * slide-padding-lg at min (320px): 16.2% x 320px = 52px
6
- */
7
- --slide-padding-lg: clamp(52px, 16.2cqw, 240px);
8
-
9
- /*
10
- * slide-padding-md at max (1480px): 120px (8.1%)
11
- * slide-padding-md at min (320px): 8.1% x 320px = 26px
12
- */
13
- --slide-padding-md: clamp(26px, 8.1cqw, 120px);
14
-
15
- /*
16
- * slide-padding-sm at max (1480px): 80px (5.4%)
17
- * slide-padding-sm at min (320px): 5.4% x 320px = 17px
18
- */
19
- --slide-padding-sm: max(24px, clamp(17px, 5.4cqw, 80px));
20
-
21
- /* Visually-adjusted small padding size for grid gap and header spacing */
22
- --slide-padding-sm-internal: max(20px, clamp(16px, 4.9cqw, 72px));
23
-
24
- /*
25
- * Small title font size at max (1480px): 64px (4.3%)
26
- * Small title font size at min (320px): 4.3% x 320px = 13.8px
27
- */
28
- --title-font-size: max(
29
- 32px,
30
- clamp(13.8px, 4.3cqw, theme(fontSize.display-3))
31
- );
32
-
33
- /*
34
- * Text font size at max (1480px): 24px / 1.62%
35
- * Text font size at min (320px): 1.62% x 320px = 5.2px
36
- */
37
- --text-font-size: max(12px, clamp(6.1px, 1.86cqw, 28px));
38
-
39
- /* ------------- */
40
-
41
- @apply relative rounded-md @container;
42
- @apply bg-white bg-no-repeat bg-cover bg-center;
43
-
44
- min-width: 320px;
45
-
46
- .slide-aspect {
47
- @apply @slide-fluid:aspect-slide min-h-[62.5cqw] grid grid-cols-1 grid-rows-1;
48
- }
49
-
50
- .slide-container {
51
- @apply @slide-fluid:absolute @slide-fluid:inset-0 overflow-hidden;
52
- @apply px-6 py-10 @slide-fluid:px-[var(--slide-padding-md)] @slide-fluid:py-[var(--slide-padding-md)];
53
- }
54
-
55
- .slide-layout {
56
- @apply @slide-fluid:grid h-full w-full;
57
- }
58
-
59
- .slide-header,
60
- .slide-text,
61
- .slide-media {
62
- @apply hidden;
63
- }
64
-
65
- .slide-group {
66
- @apply contents;
67
- }
68
-
69
- .slide-header {
70
- @apply w-full;
71
- }
72
-
73
- .slide-title {
74
- @apply font-bold text-current w-full;
75
- overflow-wrap: anywhere;
76
- line-height: 1.1;
77
- font-size: var(--title-font-size);
78
- }
79
-
80
- .slide-text {
81
- @apply text-current text-base w-full overflow-hidden;
82
- line-height: 1.5;
83
- }
84
-
85
- .slide-media {
86
- @apply w-full text-current relative text-base;
87
- }
88
-
89
- @container (min-width: 700px) {
90
- .slide-text,
91
- .slide-media {
92
- font-size: var(--text-font-size);
93
- }
94
- }
95
-
96
- .slide-media-wrapper {
97
- @apply @slide-fluid:absolute @slide-fluid:inset-0 @slide-fluid:w-full @slide-fluid:h-full;
98
-
99
- img {
100
- @apply w-full h-full object-contain object-center;
101
- }
102
- }
103
-
104
- /* layouts */
105
-
106
- &[data-layout="one-col-title"] {
107
- /*
108
- * Title font size at max (1480px): 80px (5.4%)
109
- * Title font size at min (320px): 5.4% x 320px = 17px
110
- */
111
- --title-font-size: max(
112
- 38px,
113
- clamp(17px, 5.4cqw, theme(fontSize.display-2))
114
- );
115
-
116
- /*
117
- * Text font size at max (1480px): 32px / 2.16%
118
- * Text font size at min (320px): 2.16% x 320px = 7px
119
- */
120
- --text-font-size: max(
121
- 15px,
122
- clamp(7px, 2.16cqw, theme(fontSize.subheading-1))
123
- );
124
-
125
- .slide-container {
126
- @apply py-12 @slide-fluid:px-[var(--slide-padding-lg)] @slide-fluid:py-[var(--slide-padding-md)];
127
- }
128
-
129
- .slide-layout {
130
- @apply mx-auto max-w-[475px] @slide-fluid:max-w-full;
131
- grid-template-areas: "content";
132
- }
133
-
134
- [data-role="group-primary-text"] {
135
- @apply flex flex-col items-center justify-center text-center h-full;
136
- grid-area: content;
137
- }
138
-
139
- [data-role="header"],
140
- [data-role="text-primary"] {
141
- @apply block;
142
- }
143
-
144
- .slide-text {
145
- line-height: 1.4;
146
- }
147
-
148
- &.with-title .slide-text {
149
- margin-top: 0.875em;
150
- }
151
- }
152
-
153
- &[data-layout="one-col-text"] {
154
- .slide-container {
155
- @apply py-10 @slide-fluid:py-[var(--slide-padding-sm)];
156
- }
157
-
158
- .slide-layout {
159
- @apply @slide-fluid:py-[4.8cqw];
160
- grid-template-areas: "content";
161
- grid-template-rows: auto;
162
- }
163
-
164
- &.with-title .slide-layout {
165
- @apply py-0;
166
- grid-template-areas:
167
- "header"
168
- "content";
169
- grid-template-rows: min-content auto;
170
- grid-gap: var(--slide-padding-sm-internal);
171
- }
172
-
173
- [data-role="header"],
174
- [data-role="text-primary"] {
175
- @apply block;
176
- }
177
-
178
- [data-role="header"] {
179
- grid-area: header;
180
- @apply mb-5 @slide-fluid:mb-0;
181
- }
182
-
183
- [data-role="text-primary"] {
184
- grid-area: content;
185
- }
186
- }
187
-
188
- &[data-layout="one-col-media"] {
189
- .slide-container {
190
- @apply p-6 @slide-fluid:p-[var(--slide-padding-sm)];
191
- }
192
-
193
- .slide-layout {
194
- grid-template-areas: "content";
195
- grid-template-rows: 100%;
196
- }
197
-
198
- [data-role="media-primary"] {
199
- @apply block h-full;
200
- grid-area: content;
201
- }
202
-
203
- .slide-media-wrapper {
204
- @apply h-full;
205
- }
206
- }
207
-
208
- &[data-layout="two-col-mixed"] {
209
- .slide-container {
210
- @apply py-10 @slide-fluid:p-[var(--slide-padding-md)];
211
- }
212
-
213
- .slide-layout {
214
- grid-template-areas: "text media";
215
- grid-template-rows: 100%;
216
- grid-template-columns: 1fr 1fr;
217
- grid-gap: var(--slide-padding-sm-internal);
218
- }
219
-
220
- [data-role="header"],
221
- [data-role="text-primary"],
222
- [data-role="media-primary"],
223
- [data-role="group-primary-text"] {
224
- @apply block;
225
- }
226
-
227
- [data-role="group-primary-text"] {
228
- grid-area: text;
229
- @apply @slide-fluid:flex @slide-fluid:flex-col @slide-fluid:justify-center @slide-fluid:h-full;
230
- }
231
-
232
- [data-role="media-primary"] {
233
- @apply mt-6 @slide-fluid:mt-0;
234
- grid-area: media;
235
- }
236
-
237
- &.with-title .slide-text {
238
- margin-top: 0.875em;
239
- }
240
- }
241
-
242
- &[data-layout="two-col-text"] {
243
- .slide-container {
244
- @apply py-10 @slide-fluid:p-[var(--slide-padding-sm)];
245
- }
246
-
247
- .slide-layout {
248
- @apply @slide-fluid:py-[4.8cqw];
249
- grid-template-areas: "primary secondary";
250
- grid-template-rows: auto;
251
- grid-template-columns: 1fr 1fr;
252
- grid-gap: var(--slide-padding-sm-internal);
253
- }
254
-
255
- &.with-title .slide-layout {
256
- @apply py-0;
257
- grid-template-areas:
258
- "header header"
259
- "primary secondary";
260
- grid-template-rows: min-content auto;
261
- }
262
-
263
- [data-role="header"],
264
- [data-role="text-primary"],
265
- [data-role="text-secondary"] {
266
- @apply block;
267
- }
268
-
269
- [data-role="header"] {
270
- grid-area: header;
271
- }
272
-
273
- [data-role="text-primary"] {
274
- grid-area: primary;
275
- }
276
-
277
- [data-role="text-secondary"] {
278
- grid-area: secondary;
279
- }
280
-
281
- .slide-header,
282
- [data-role="text-primary"] {
283
- @apply mb-6 @slide-fluid:mb-0;
284
- }
285
- }
286
-
287
- &[data-layout="two-col-media"] {
288
- .slide-container {
289
- @apply py-10 @slide-fluid:p-[var(--slide-padding-sm)];
290
- }
291
-
292
- .slide-layout {
293
- @apply @slide-fluid:py-[4.8cqw];
294
- grid-template-areas: "primary secondary";
295
- grid-template-rows: auto;
296
- grid-template-columns: 1fr 1fr;
297
- grid-gap: var(--slide-padding-sm-internal);
298
- }
299
-
300
- &.with-title .slide-layout {
301
- @apply py-0;
302
- grid-template-areas:
303
- "header header"
304
- "primary secondary";
305
- grid-template-rows: min-content auto;
306
- }
307
-
308
- [data-role="header"],
309
- [data-role="media-primary"],
310
- [data-role="media-secondary"] {
311
- @apply block;
312
- }
313
-
314
- [data-role="header"] {
315
- grid-area: header;
316
- }
317
-
318
- [data-role="media-primary"] {
319
- grid-area: primary;
320
- }
321
-
322
- [data-role="media-secondary"] {
323
- grid-area: secondary;
324
- }
325
-
326
- .slide-header,
327
- [data-role="media-primary"] {
328
- @apply mb-6 @slide-fluid:mb-0;
329
- }
330
- }
331
- }
332
- }