@terrahq/wysiwyg 1.0.0 → 1.0.1

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 (33) hide show
  1. package/README.md +661 -746
  2. package/content/wordpress-content.html +193 -152
  3. package/dist/content/wordpress-content.html +185 -154
  4. package/dist/wordpress-starter/assets/icons/ArrowRight.svg +3 -0
  5. package/package.json +1 -1
  6. package/public/wordpress-starter/assets/icons/ArrowRight.svg +3 -0
  7. package/readme/blocks/Button.md +33 -13
  8. package/readme/blocks/Columns.md +28 -13
  9. package/readme/blocks/Links.md +2 -0
  10. package/readme/blocks/Quote.md +12 -0
  11. package/readme/blocks/Separator.md +25 -0
  12. package/readme/blocks/Table.md +96 -103
  13. package/readme/blocks/Video.md +80 -11
  14. package/readme/properties/Background.md +74 -0
  15. package/readme/properties/Font.md +15 -0
  16. package/readme/properties/Media.md +33 -0
  17. package/src/assets/icons/ArrowRight.svg +3 -0
  18. package/src/scss/_paths.scss +2 -1
  19. package/src/scss/framework/_var/_vars.scss +1 -1
  20. package/src/scss/framework/components/btn/_c--btn-a.scss +1 -0
  21. package/src/scss/framework/components/content/_c--content-a.scss +405 -455
  22. package/src/scss/framework/components/link/_c--link-a.scss +38 -7
  23. package/src/scss/global-content/_global-mixins/blocks/_content-block-btn.scss +25 -6
  24. package/src/scss/global-content/_global-mixins/blocks/_content-block-columns.scss +11 -0
  25. package/src/scss/global-content/_global-mixins/blocks/_content-block-quote.scss +23 -6
  26. package/src/scss/global-content/_global-mixins/blocks/_content-block-separator.scss +49 -3
  27. package/src/scss/global-content/_global-mixins/blocks/_content-block-table.scss +79 -7
  28. package/src/scss/global-content/_global-mixins/blocks/_content-links.scss +9 -2
  29. package/src/scss/global-content/_global-mixins/properties/_background.scss +50 -0
  30. package/src/scss/global-content/_global-mixins/properties/_font.scss +18 -6
  31. package/src/scss/global-content/_global-mixins/properties/_properties.scss +1 -0
  32. package/src/scss/sanity.scss +17 -1
  33. package/src/scss/wp.scss +441 -256
package/README.md CHANGED
@@ -50,27 +50,23 @@ Each block has its own set of options for customization. If you want to learn mo
50
50
 
51
51
  This table shows which blocks are compatible with Gutenberg (WordPress), classic WYSIWYG content (like ACF fields or raw HTML editors), and Sanity:
52
52
 
53
- | Block | Gutenberg (WP) | Classic WYSIWYG WP | Sanity |
54
- |---------------|---------------------|-----------------------|-----------------------|
55
- | Headings | ✅ | ✅ | ✅ |
56
- | Paragraphs | ✅ | ✅ | ✅ |
57
- | Lists | ✅ | ✅ | ✅ |
58
- | Links | ✅ | ✅ | ✅ |
59
- | Images | ✅ (with zoom) | ✅ (no zoom, no cite) | ✅ (no zoom, no cite) |
60
- | Quote | ✅ (with cite) | ✅ (no cite) | ✅ (no cite) |
61
- | Footnote | ✅ | ❌ | ❌ |
62
- | Highlighted | ✅ | ❌ | ❌ |
63
- | Button | ✅ | ❌ | ❌ |
64
- | Columns | ✅ | ❌ | ❌ |
65
- | Separator | ✅ | ❌ | ❌ |
66
- | Table | ✅ | ✅ | ❌ |
67
- | Video | ✅ | ✅ | ❌ |
68
- | Utilities | ✅ | ❌ | ❌ |
69
- | Custom | ✅ | ✅ | ✅ |
70
-
71
-
72
-
73
-
53
+ | Block | Gutenberg (WP) | Classic WYSIWYG WP | Sanity |
54
+ | ----------- | -------------- | --------------------- | --------------------- |
55
+ | Headings | ✅ | ✅ | ✅ |
56
+ | Paragraphs | ✅ | ✅ | ✅ |
57
+ | Lists | ✅ | ✅ | ✅ |
58
+ | Links | ✅ | ✅ | ✅ |
59
+ | Images | ✅ (with zoom) | ✅ (no zoom, no cite) | ✅ (no zoom, no cite) |
60
+ | Quote | ✅ (with cite) | ✅ (no cite) | ✅ (no cite) |
61
+ | Footnote | ✅ | ❌ | ❌ |
62
+ | Highlighted | ✅ | ❌ | ❌ |
63
+ | Button | ✅ | ❌ | ❌ |
64
+ | Columns | ✅ | ❌ | ❌ |
65
+ | Separator | ✅ | ❌ | ❌ |
66
+ | Table | ✅ | ✅ | ❌ |
67
+ | Video | ✅ | ✅ | ❌ |
68
+ | Utilities | ✅ | ❌ | ❌ |
69
+ | Custom | ✅ | ✅ | ✅ |
74
70
 
75
71
  ### WP
76
72
 
@@ -82,477 +78,419 @@ This table shows which blocks are compatible with Gutenberg (WordPress), classic
82
78
 
83
79
  #### SCSS code
84
80
 
85
- ```scss
81
+ ```SCSS
86
82
  .c--content-a {
87
- @include make-content();
88
- @include make-content-modifier(
89
- $headings-options: (
90
- // "h1": (
91
- // "className": f--font-a,
92
- // "color": #638c1d,
93
- // "font-family": arial,
94
- // "font-size": 2rem,
95
- // "font-style": italic,
96
- // "font-weight": 400,
97
- // "letter-spacing": 1px,
98
- // "line-height": 1.5,
99
- // "max-lines": 3,
100
- // "text-decoration": underline,
101
- // "text-decoration-color": #000000,
102
- // "text-underline-position": under,
103
- // "margin-bottom": $measure*3,
104
- // "padding-top": $measure*5,
105
- // "text-align": center,
106
- // "margin-bottom-before-lists": 24px,
107
- // "bold-font-weight": 800,
108
- // ),
109
- "h2":
110
- (
111
- // "className": f--font-a,
112
- // "color": #638c1d,
113
- // "font-family": arial,
114
- // "font-size": 2rem,
115
- // "font-style": italic,
116
- // "font-weight": 400,
117
- // "letter-spacing": 1px,
118
- // "line-height": 1.5,
119
- // "max-lines": 3,
120
- // "text-decoration": underline,
121
- // "text-decoration-color": #000000,
122
- // "text-underline-position": under,
123
- "margin-bottom": $measure * 3,
124
- "padding-top": $measure * 5,
125
- // "text-align": center,
126
- // "margin-bottom-before-lists": 24px,
127
- // "bold-font-weight": 800,
128
- ),
129
- "h3": (
130
- // "className": f--font-a,
131
- // "color": #638c1d,
132
- // "font-family": arial,
133
- // "font-size": 2rem,
134
- // "font-style": italic,
135
- // "font-weight": 400,
136
- // "letter-spacing": 1px,
137
- // "line-height": 1.5,
138
- // "max-lines": 3,
139
- // "text-decoration": underline,
140
- // "text-decoration-color": #000000,
141
- // "text-underline-position": under,
142
- "margin-bottom": $measure * 3,
143
- "padding-top": $measure * 5,
144
- // "text-align": center,
145
- // "margin-bottom-before-lists": 24px,
146
- // "bold-font-weight": 800,
147
- ),
148
- "h4": (
149
- // "className": f--font-a,
150
- // "color": #638c1d,
151
- // "font-family": arial,
152
- // "font-size": 2rem,
153
- // "font-style": italic,
154
- // "font-weight": 400,
155
- // "letter-spacing": 1px,
156
- // "line-height": 1.5,
157
- // "max-lines": 3,
158
- // "text-decoration": underline,
159
- // "text-decoration-color": #000000,
160
- // "text-underline-position": under,
161
- "margin-bottom": $measure * 2,
162
- "padding-top": $measure * 5,
163
- // "text-align": center,
164
- // "margin-bottom-before-lists": 24px,
165
- // "bold-font-weight": 800,
166
- ),
167
- "h5": (
168
- // "className": f--font-a,
169
- // "color": #638c1d,
170
- // "font-family": arial,
171
- // "font-size": 2rem,
172
- // "font-style": italic,
173
- // "font-weight": 400,
174
- // "letter-spacing": 1px,
175
- // "line-height": 1.5,
176
- // "max-lines": 3,
177
- // "text-decoration": underline,
178
- // "text-decoration-color": #000000,
179
- // "text-underline-position": under,
180
- "margin-bottom": $measure * 2,
181
- "padding-top": $measure * 5,
182
- // "text-align": center,
183
- // "margin-bottom-before-lists": 24px,
184
- // "bold-font-weight": 800,
185
- ),
186
- "h6": (
187
- // "className": f--font-a,
188
- // "color": #638c1d,
189
- // "font-family": arial,
190
- // "font-size": 2rem,
191
- // "font-style": italic,
192
- // "font-weight": 400,
193
- // "letter-spacing": 1px,
194
- // "line-height": 1.5,
195
- // "max-lines": 3,
196
- // "text-decoration": underline,
197
- // "text-decoration-color": #000000,
198
- // "text-underline-position": under,
199
- "margin-bottom": $measure,
200
- "padding-top": $measure * 5,
201
- // "text-align": center,
202
- // "margin-bottom-before-lists": 24px,
203
- // "bold-font-weight": 800,
204
- ),
205
- ),
206
- $image-options: (
207
- // "border-color": red,
208
- // "border-radius": 20px,
209
- // "border-style": solid,
210
- // "border-width": 2px,
211
- // "object-fit": cover,
212
- // "max-height": 700px,
213
- // "min-height": 0,
214
- // "object-position": center,
215
- // "max-width": 100%,
216
- // "min-width": 30px,
217
- "margin-bottom": $measure * 5,
218
- "caption": (
219
- // "className": f--font-a,
220
- // "color": #638c1d,
221
- // "font-family": arial,
222
- // "font-size": 2rem,
223
- // "font-style": italic,
224
- // "font-weight": 400,
225
- // "letter-spacing": 1px,
226
- // "line-height": 1.5,
227
- // "max-lines": 3,
228
- // "text-decoration": underline,
229
- // "text-decoration-color": #000000,
230
- // "text-underline-position": under,
231
- // "margin-bottom": $measure*2,
232
- "padding-top": $measure * 2,
233
- "text-align": right,
234
- // "margin-bottom-before-lists": 24px,
235
- // "bold-font-weight": 800,
236
- // "zoom-button-background-color": red,
237
- // "zoom-button-bottom": 0px,
238
- // "zoom-button-right": 0px,
239
- // "zoom-button-border-radius": 0 0 8px 0,
240
- ),
241
- ),
242
- $link-options: (
243
- // "className": g--link-01 g--link-01--second,
244
- ),
245
- $lists-options: (
246
- // "number-font": (
247
- // "className": f--font-a,
248
- // "color": #638c1d,
249
- // "font-family": arial,
250
- // "font-size": 2rem,
251
- // "font-style": italic,
252
- // "font-weight": 400,
253
- // "letter-spacing": 1px,
254
- // "line-height": 1.5,
255
- // "max-lines": 3,
256
- // "text-decoration": underline,
257
- // "text-decoration-color": #000000,
258
- // "text-underline-position": under,
259
- // "margin-bottom": $measure*2,
260
- // "padding-top": $measure*2,
261
- // "text-align": right,
262
- // "margin-bottom-before-lists": 24px,
263
- // "bold-font-weight": 800,
264
- // ),
265
- // "first-number-width": 14px,
266
- // "first-level-number-color": map.get($color-options, d),
267
- // "first-level-artwork-width": 8px,
268
- // "first-level-artwork-top": 8px,
269
- // "first-level-artwork-image": '(../img/artwork.png)',
270
- // "first-level-artwork-background": map.get($color-options, d),
271
- // "first-level-artwork-border-radius": 50%,
272
- // "first-level-artwork-border-width": 1px,
273
- // "first-level-artwork-border-color": map.get($color-options, d),
274
- // "second-level-number-color": map.get($color-options, d),
275
- // "second-level-artwork-width": 8px,
276
- // "second-level-artwork-top": 8px,
277
- // "second-level-artwork-image": '(../img/artwork.png)',
278
- // "second-level-artwork-background": map.get($color-options, d),
279
- // "second-level-artwork-border-radius": 50%,
280
- // "second-level-artwork-border-width": 1px,
281
- // "second-level-artwork-border-color": map.get($color-options, d),
282
- // "third-level-number-color": map.get($color-options, d),
283
- // "third-level-artwork-width": 8px,
284
- // "third-level-artwork-top": 8px,
285
- // "third-level-artwork-image": '(../img/artwork.png)',
286
- // "third-level-artwork-background": map.get($color-options, d),
287
- // "third-level-artwork-border-radius": 50%,
288
- // "third-level-artwork-border-width": 1px,
289
- // "third-level-artwork-border-color": map.get($color-options, d),
290
- "margin-bottom": $measure * 4,
291
- // "nested-list-spacing": $measure,
292
- "font-styles": (
293
- // "className": f--font-a,
294
- // "color": #638c1d,
295
- // "font-family": arial,
296
- // "font-size": 2rem,
297
- // "font-style": italic,
298
- // "font-weight": 400,
299
- // "letter-spacing": 1px,
300
- // "line-height": 1.5,
301
- // "max-lines": 3,
302
- // "text-decoration": underline,
303
- // "text-decoration-color": #000000,
304
- // "text-underline-position": under,
305
- "margin-bottom": $measure * 2,
306
- // "padding-top": $measure*2,
307
- // "text-align": right,
308
- // "margin-bottom-before-lists": 24px,
309
- // "bold-font-weight": 800,
310
- ),
311
- ),
312
- $paragraphs-options: (
313
- // "className": f--font-a,
314
- // "color": #638c1d,
315
- // "font-family": arial,
316
- // "font-size": 2rem,
317
- // "font-style": italic,
318
- // "font-weight": 400,
319
- // "letter-spacing": 1px,
320
- // "line-height": 1.5,
321
- // "max-lines": 3,
322
- // "text-decoration": underline,
323
- // "text-decoration-color": #000000,
324
- // "text-underline-position": under,
325
- "margin-bottom": $measure * 4,
326
- // "padding-top": $measure*2,
327
- // "text-align": right,
328
- "margin-bottom-before-lists": $measure * 3,
329
- // "bold-font-weight": 800,
330
- ),
331
- $quote-options: (
332
- "padding": $measure * 3 0,
333
- "margin-top": $measure * 5,
334
- "margin-bottom": $measure * 6,
335
- // "border": (
336
- // "border-color": red,
337
- // "border-radius": 0,
338
- // "border-style": solid,
339
- // "border-width": 2px 0,
340
- // ),
341
- // "paragraph": (
342
- // "className": f--font-a,
343
- // "color": #638c1d,
344
- // "font-family": arial,
345
- // "font-size": 2rem,
346
- // "font-style": italic,
347
- // "font-weight": 400,
348
- // "letter-spacing": 1px,
349
- // "line-height": 1.5,
350
- // "max-lines": 3,
351
- // "text-decoration": underline,
352
- // "text-decoration-color": #000000,
353
- // "text-underline-position": under,
354
- // "margin-bottom": $measure*2,
355
- // "padding-top": $measure*2,
356
- // "text-align": right,
357
- // "margin-bottom-before-lists": 24px,
358
- // "bold-font-weight": 800,
359
- // ),
360
- "cite":
361
- (
362
- // "className": f--font-a,
363
- // "color": #638c1d,
364
- // "font-family": arial,
365
- // "font-size": 2rem,
366
- // "font-style": italic,
367
- // "font-weight": 400,
368
- // "letter-spacing": 1px,
369
- // "line-height": 1.5,
370
- // "max-lines": 3,
371
- // "text-decoration": underline,
372
- // "text-decoration-color": #000000,
373
- // "text-underline-position": under,
374
- // "margin-bottom": $measure*2,
375
- "padding-top": $measure * 3,
376
- // "text-align": right,
377
- // "margin-bottom-before-lists": 24px,
378
- // "bold-font-weight": 800,
379
- ),
380
- ),
381
- $footnote-options: (
382
- // "className": f--font-a,
383
- // "color": #638c1d,
384
- // "font-family": arial,
385
- // "font-size": 2rem,
386
- // "font-style": italic,
387
- // "font-weight": 400,
388
- // "letter-spacing": 1px,
389
- // "line-height": 1.5,
390
- // "max-lines": 3,
391
- // "text-decoration": underline,
392
- // "text-decoration-color": #000000,
393
- // "text-underline-position": under,
394
- "margin-bottom": $measure * 2,
395
- // "padding-top": $measure*2,
396
- // "text-align": right,
397
- // "margin-bottom-before-lists": 24px,
398
- // "bold-font-weight": 800,
399
- ),
400
- $highlighted-options: (
401
- // "className": f--font-a,
402
- // "color": #638c1d,
403
- // "font-family": arial,
404
- // "font-size": 2rem,
405
- // "font-style": italic,
406
- // "font-weight": 400,
407
- // "letter-spacing": 1px,
408
- // "line-height": 1.5,
409
- // "max-lines": 3,
410
- // "text-decoration": underline,
411
- // "text-decoration-color": #000000,
412
- // "text-underline-position": under,
413
- "margin-bottom": $measure * 4,
414
- // "padding-top": $measure*2,
415
- // "text-align": right,
416
- // "margin-bottom-before-lists": 24px,
417
- // "bold-font-weight": 800,
418
- ),
419
- $btn-options: (
420
- // "className": g--btn-01,
421
- "margin-bottom": $measure * 4,
422
- ),
423
- $columns-options: (
424
- "breakpoint": $tablets,
425
- "margin-bottom": $measure * 4,
426
- ),
427
- $separator-options: (
428
- "margin": $measure * 6 auto,
429
- // "width": 60%,
430
- // "color": orange,
431
- // "height": 2px,
432
- ),
433
- $table-options: (
434
- "margin-bottom": $measure * 4,
435
- "header-cells-padding": $measure * 2,
436
- "body-cells-padding": $measure $measure * 2,
437
- // "header-font-styles": (
438
- // "className": f--font-a,
439
- // "color": #638c1d,
440
- // "font-family": arial,
441
- // "font-size": 2rem,
442
- // "font-style": italic,
443
- // "font-weight": 400,
444
- // "letter-spacing": 1px,
445
- // "line-height": 1.5,
446
- // "max-lines": 3,
447
- // "text-decoration": underline,
448
- // "text-decoration-color": #000000,
449
- // "text-underline-position": under,
450
- // "margin-bottom": $measure*2,
451
- // "padding-top": $measure*2,
452
- // "text-align": right,
453
- // "margin-bottom-before-lists": 24px,
454
- // "bold-font-weight": 800,
455
- // ),
456
- // "header-border": (
457
- // "border-radius": 1px,
458
- // "border-width": 1px,
459
- // "border-style": solid,
460
- // "border-color": map.get($color-options, a)
461
- // ),
462
- // "header-background": map.get($color-options, a),
463
- // "body-font-styles": (
464
- // "className": f--font-a,
465
- // "color": #638c1d,
466
- // "font-family": arial,
467
- // "font-size": 2rem,
468
- // "font-style": italic,
469
- // "font-weight": 400,
470
- // "letter-spacing": 1px,
471
- // "line-height": 1.5,
472
- // "max-lines": 3,
473
- // "text-decoration": underline,
474
- // "text-decoration-color": #000000,
475
- // "text-underline-position": under,
476
- // "margin-bottom": $measure*2,
477
- // "padding-top": $measure*2,
478
- // "text-align": right,
479
- // "margin-bottom-before-lists": 24px,
480
- // "bold-font-weight": 800,
481
- // ),
482
- // "body-border": (
483
- // "border-radius": 1px,
484
- // "border-width": 1px,
485
- // "border-style": solid,
486
- // "border-color": map.get($color-options, a)
487
- // ),
488
- // "body-background": map.get($color-options, a),
489
- // "odd-rows-background": map.get($color-options, c),
490
- // "odd-rows-text-color": map.get($color-options, d),
491
- // "caption": (
492
- // "className": f--font-a,
493
- // "color": #638c1d,
494
- // "font-family": arial,
495
- // "font-size": 2rem,
496
- // "font-style": italic,
497
- // "font-weight": 400,
498
- // "letter-spacing": 1px,
499
- // "line-height": 1.5,
500
- // "max-lines": 3,
501
- // "text-decoration": underline,
502
- // "text-decoration-color": #000000,
503
- // "text-underline-position": under,
504
- // "margin-bottom": $measure*2,
505
- "padding-top": $measure * 2,
506
- "text-align": right,
507
- // "margin-bottom-before-lists": 24px,
508
- // "bold-font-weight": 800,
509
- // ),,,,,,,,,,,,,
510
- ),
511
- $video-options: (
512
- // "border-color": red,
513
- // "border-radius": 20px,
514
- // "border-style": solid,
515
- // "border-width": 2px,
516
- // "object-fit": cover,
517
- // "max-height": 700px,
518
- // "min-height": 0,
519
- // "object-position": center,
520
- // "max-width": 100%,
521
- // "min-width": 30px,
522
- "margin-bottom": $measure * 5,
523
- "caption": (
524
- // "className": f--font-a,
525
- // "color": #638c1d,
526
- // "font-family": arial,
527
- // "font-size": 2rem,
528
- // "font-style": italic,
529
- // "font-weight": 400,
530
- // "letter-spacing": 1px,
531
- // "line-height": 1.5,
532
- // "max-lines": 3,
533
- // "text-decoration": underline,
534
- // "text-decoration-color": #000000,
535
- // "text-underline-position": under,
536
- // "margin-bottom": $measure*2,
537
- "padding-top": $measure * 2,
538
- "text-align": right,
539
- // "margin-bottom-before-lists": 24px,
540
- // "bold-font-weight": 800,
541
- ),
542
- ),
543
- $utilities-options: (
544
- "media-text-aligned-margin-x": $measure * 5,
545
- )
546
- );
83
+ &--wp {
84
+ @include make-content();
85
+ @include make-content-modifier(
86
+ $btn-options: (
87
+ //"className": c--btn-a c--btn-a--second,
88
+ //"even-className": c--btn-a,
89
+ //"margin-bottom": $measure * 3,
90
+ //"column-gap": $measure * 2,
91
+ //"row-gap": $measure,
92
+ ),
93
+ $columns-options: (
94
+ //"breakpoint": $tablets,
95
+ //"column-gap": $measure * 4,
96
+ //"margin-bottom": $measure * 3,
97
+ //"row-gap": $measure * 4,
98
+ ),
99
+ $footnote-options: (
100
+ //"className": f--font-f,
101
+ //"color": map.get($color-options, h),
102
+ //"bold-color": red,
103
+ //"bold-font-weight": 600,
104
+ //"font-weight": 300,
105
+ //"font-style": italic,
106
+ //"margin-bottom": $measure * 3,
107
+ //"margin-bottom-before-lists": $measure * 2,
108
+ //"max-lines": 1,
109
+ //"padding-top": $measure*9,
110
+ //"text-align": left,
111
+ //"text-decoration": underline,
112
+ //"text-decoration-color": map.get($color-options, g),
113
+ //"text-underline-position": above,
114
+ ),
115
+ $headings-options: (
116
+ "h1": (
117
+ //"bold-color": red,
118
+ //"bold-font-weight": 600,
119
+ //"className": f--font-a,
120
+ //"color": orange,
121
+ //"font-style": italic,
122
+ //"font-weight": 400,
123
+ //"margin-bottom": $measure * 3,
124
+ //"margin-bottom-before-lists": $measure * 2,
125
+ //"padding-top": $measure * 2,
126
+ //"text-align": left,
127
+ //"text-decoration": none,
128
+ //"text-decoration-color": #000000,
129
+ //"text-underline-position": under,
130
+ ),
131
+ "h2": (
132
+ //"bold-color": map.get($color-options, e),
133
+ //"bold-font-weight": 600,
134
+ //"className": f--font-a,
135
+ //"color": map.get($color-options, h),
136
+ //"font-style": italic,
137
+ //"font-weight": 400,
138
+ //"margin-bottom": $measure * 3,
139
+ //"margin-bottom-before-lists": $measure * 2,
140
+ //"padding-top": $measure * 2,
141
+ //"text-align": left,
142
+ //"text-decoration": none,
143
+ //"text-decoration-color": #000000,
144
+ //"text-underline-position": under,
145
+ ),
146
+ "h3": (
147
+ //"bold-color": map.get($color-options, e),
148
+ //"bold-font-weight": 600,
149
+ //"className": f--font-b,
150
+ //"color": map.get($color-options, h),
151
+ //"font-style": italic,
152
+ //"font-weight": 400,
153
+ //"margin-bottom": $measure * 3,
154
+ //"margin-bottom-before-lists": $measure * 2,
155
+ //"padding-top": $measure * 2,
156
+ //"text-align": left,
157
+ //"text-decoration": none,
158
+ //"text-decoration-color": #000000,
159
+ //"text-underline-position": under,
160
+ ),
161
+ "h4": (
162
+ //"bold-color": map.get($color-options, f),
163
+ //"bold-font-weight": 600,
164
+ //"className": f--font-c,
165
+ //"color": map.get($color-options, i),
166
+ //"font-style": italic,
167
+ //"font-weight": 400,
168
+ //"margin-bottom": $measure * 3,
169
+ //"margin-bottom-before-lists": $measure * 2,
170
+ //"padding-top": $measure * 2,
171
+ //"text-align": left,
172
+ //"text-decoration": none,
173
+ //"text-decoration-color": #000000,
174
+ //"text-underline-position": under,
175
+ ),
176
+ "h5": (
177
+ //"bold-color": map.get($color-options, f),
178
+ //"bold-font-weight": 600,
179
+ //"className": f--font-d,
180
+ //"color": map.get($color-options, i),
181
+ //"font-style": italic,
182
+ //"font-weight": 400,
183
+ //"margin-bottom": $measure * 3,
184
+ //"margin-bottom-before-lists": $measure * 2,
185
+
186
+ //"padding-top": $measure * 2,
187
+ //"text-align": left,
188
+ //"text-decoration": none,
189
+ //"text-decoration-color": #000000,
190
+ //"text-underline-position": under,
191
+ ),
192
+ "h6": (
193
+ //"bold-color": map.get($color-options, h),
194
+ //"bold-font-weight": 600,
195
+ //"className": f--font-e,
196
+ //"color": map.get($color-options, g),
197
+ //"font-style": italic,
198
+ //"font-weight": 400,
199
+ //"margin-bottom": $measure * 3,
200
+ //"margin-bottom-before-lists": $measure * 2,
201
+
202
+ //"padding-top": $measure * 2,
203
+ //"text-align": left,
204
+ //"text-decoration": none,
205
+ //"text-decoration-color": #000000,
206
+ //"text-underline-position": under,
207
+ ),
208
+ ),
209
+ $highlighted-options: (
210
+ //"bold-color": map.get($color-options, i),
211
+ //"bold-font-weight": 600,
212
+ //"className": f--font-d f--color-a,
213
+ //"color": red,
214
+ //"font-style": italic,
215
+ //"font-weight": 400,
216
+ //"margin-bottom": $measure * 3,
217
+ //"margin-bottom-before-lists": $measure * 2,
218
+ //"padding-top": $measure,
219
+ //"text-align": center,
220
+ //"text-decoration": none,
221
+ //"text-decoration-color": #000000,
222
+ //"text-underline-position": under,
223
+ ),
224
+ $image-options: (
225
+ //"border-color": red,
226
+ //"border-radius": $measure*2,
227
+ //"border-style": solid,
228
+ //"border-width": 2px,
229
+ "caption": (
230
+ //"bold-color": map.get($color-options, f),
231
+ //"bold-font-weight": 600,
232
+ //"className": f--font-f,
233
+ //"color": red,
234
+ //"font-style": italic,
235
+ //"font-weight": 400,
236
+ //"margin-bottom": $measure * 3,
237
+ //"margin-bottom-before-lists": $measure * 2,
238
+ //"padding-top": $measure*2,
239
+ //"text-align": right,
240
+ //"text-decoration": none,
241
+ //"text-decoration-color": #000000,
242
+ //"text-underline-position": under,
243
+ ),
244
+ //"margin-bottom": $measure * 3,
245
+ //"max-height": 700px,
246
+ //"max-width": 100%,
247
+ //"min-height": 0,
248
+ //"min-width": 30px,
249
+ //"object-fit": cover,
250
+ //"object-position": center,
251
+ //"zoom-button-background-color": map.get($color-options, f),
252
+ //"zoom-button-border-radius": 4px,
253
+ //"zoom-button-bottom": 16px,
254
+ //"zoom-button-right": 16px,
255
+ ),
256
+ $link-options: (
257
+ //"className": c--link-a,
258
+ ),
259
+ $lists-options: (
260
+ //"first-level-artwork-background": map.get($color-options, i),
261
+ //"first-level-artwork-border-color": map.get($color-options, f),
262
+ //"first-level-artwork-border-radius": 50%,
263
+ //"first-level-artwork-border-width": 2px,
264
+ //"first-level-artwork-image": null,
265
+ //"first-level-artwork-top": 6px,
266
+ //"first-level-artwork-width": 10px,
267
+ //"first-level-number-color": map.get($color-options, f),
268
+ //"first-number-width": 14px,
269
+ "font-styles": (
270
+ //"bold-color": map.get($color-options, f),
271
+ //"bold-font-weight": 600,
272
+ //"className": f--font-e f--color-a,
273
+ //"color": red,
274
+ //"font-style": italic,
275
+ //"font-weight": 400,
276
+ //"margin-bottom": $measure,
277
+ //"margin-bottom-before-lists": $measure * 2,
278
+ //"padding-top": $measure,
279
+ //"text-align": left,
280
+ //"text-decoration": none,
281
+ //"text-decoration-color": #000000,
282
+ //"text-underline-position": under,
283
+ ),
284
+ "number-font": (
285
+ //"bold-color": red,
286
+ //"bold-font-weight": 600,
287
+ //"className": f--font-e,
288
+ //"color": red,
289
+ //"font-style": italic,
290
+ //"font-weight": 600,
291
+ //"margin-bottom": $measure,
292
+ //"margin-bottom-before-lists": $measure * 2,
293
+ //"padding-top": $measure,
294
+ //"text-align": left,
295
+ //"text-decoration": none,
296
+ //"text-decoration-color": #000000,
297
+ //"text-underline-position": under,
298
+ ),
299
+ //"second-level-artwork-background": null,
300
+ //"second-level-artwork-border-color": transparent,
301
+ //"second-level-artwork-border-radius": null,
302
+ //"second-level-artwork-border-width": null,
303
+ //"second-level-artwork-image": null,
304
+ //"second-level-artwork-top": null,
305
+ //"second-level-artwork-width": null,
306
+ //"second-level-number-color": map.get($color-options, g),
307
+ //"third-level-artwork-background": map.get($color-options, f),
308
+ //"third-level-artwork-border-color": null,
309
+ //"third-level-artwork-border-radius": null,
310
+ //"third-level-artwork-border-width": 2px,
311
+ //"third-level-artwork-image": null,
312
+ //"third-level-artwork-top": 8px,
313
+ //"third-level-artwork-width": 8px,
314
+ //"third-level-number-color": map.get($color-options, f),
315
+ //"margin-bottom": $measure * 3,
316
+ //"nested-list-spacing": $measure,
317
+ ),
318
+ $paragraphs-options: (
319
+ //"bold-color": map.get($color-options, e),
320
+ //"bold-font-weight": 600,
321
+ //"className": f--font-e f--color-a,
322
+ //"color": red,
323
+ //"font-style": italic,
324
+ //"font-weight": 400,
325
+ //"margin-bottom": $measure * 3,
326
+ //"margin-bottom-before-lists": $measure * 2,
327
+ //"padding-top": $measure,
328
+ //"text-align": left,
329
+ //"text-decoration": none,
330
+ //"text-decoration-color": #000000,
331
+ //"text-underline-position": under,
332
+ ),
333
+ $quote-options: (
334
+ //"background-color": color.adjust(map.get($color-options, e), $lightness: 50%),
335
+ //"background-image": url("/images/quote-bg.jpg"),
336
+ //"background-size": cover,
337
+ //"background-position": center,
338
+ //"background-repeat": no-repeat,
339
+ //"overlay": linear-gradient(rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.55)),
340
+ //"margin-bottom": $measure * 5,
341
+ //"margin-top": $measure,
342
+ //"padding": $measure * 5,
343
+ "border": (
344
+ //"border-color": color.adjust(map.get($color-options, e), $lightness: 45%),
345
+ //"border-radius": $measure*2,
346
+ //"border-style": solid,
347
+ //"border-width": 2px 0,
348
+ ),
349
+ "cite": (
350
+ //"bold-color": red,
351
+ //"bold-font-weight": 600,
352
+ //"className": f--font-f,
353
+ //"color": map.get($color-options, e),
354
+ //"font-weight": 400,
355
+ //"font-style": italic,
356
+ //"margin-bottom": $measure * 3,
357
+ //"padding-top": $measure * 2,
358
+ //"text-align": right,
359
+ //"text-decoration": none,
360
+ //"text-decoration-color": #000000,
361
+ //"text-underline-position": under,
362
+ ),
363
+ "paragraph": (
364
+ //"bold-color": red,
365
+ //"bold-font-weight": 600,
366
+ //"className": f--font-d,
367
+ //"color": color.adjust(map.get($color-options, e), $lightness: -20%),
368
+ //"font-style": italic,
369
+ //"font-weight": 400,
370
+ //"margin-bottom": $measure * 3,
371
+ //"padding-top": $measure,
372
+ //"text-align": right,
373
+ //"text-decoration": none,
374
+ //"text-decoration-color": #000000,
375
+ //"text-underline-position": under,
376
+ ),
377
+ ),
378
+ $separator-options: (
379
+ //"color": color.adjust(map.get($color-options, e), $lightness: -10%),
380
+ //"height": 7px,
381
+ //"margin": $measure * 10 0,
382
+ //"width": 100%,
383
+ //"dots-color": map.get($color-options, h),
384
+ //"dots-size": 8rem,
385
+ //"dots-spacing": 1em,
386
+ ),
387
+ $table-options: (
388
+ //"body-background": rgba(map.get($color-options, e), 0.3),
389
+ //"body-border-right": 1px solid map.get($color-options, e),
390
+ //"body-border-bottom": 1px solid map.get($color-options, e),
391
+ //"table-border": 3px solid map.get($color-options, e),
392
+ //"table-border-radius": $measure * 2,
393
+ //"scroll-breakpoint": 700px,
394
+ //"body-cells-padding": $measure $measure * 2,
395
+ //"odd-rows-background": rgba(map.get($color-options, e), 0.5),
396
+ //"odd-rows-text-color": map.get($color-options, i),
397
+ "body-font-styles": (
398
+ //"bold-color": map.get($color-options, h),
399
+ //"bold-font-weight": 600,
400
+ //"className": f--font-d,
401
+ //"color": red,
402
+ //"font-style": italic,
403
+ //"font-weight": 600,
404
+ //"margin-bottom": $measure * 3,
405
+ //"margin-bottom-before-lists": $measure * 2,
406
+ //"padding-top": $measure,
407
+ //"text-align": right,
408
+ //"text-decoration": none,
409
+ //"text-decoration-color": #000000,
410
+ //"text-underline-position": under,
411
+ ),
412
+ //"header-background": rgba(map.get($color-options, e), 0.1),
413
+ //"header-border-right": 1px solid map.get($color-options, e),
414
+ //"header-border-bottom": 2px solid map.get($color-options, e),
415
+ //"header-cells-padding": $measure * 2,
416
+ "header-font-styles": (
417
+ //"bold-color": red,
418
+ //"bold-font-weight": 600,
419
+ //"className": f--font-d,
420
+ //"color": map.get($color-options, e),
421
+ //"font-style": italic,
422
+ //"font-weight": 600,
423
+ //"margin-bottom": $measure * 3,
424
+ //"margin-bottom-before-lists": $measure * 2,
425
+ //"padding-top": $measure,
426
+ //"text-align": center,
427
+ //"text-decoration": none,
428
+ //"text-decoration-color": #000000,
429
+ //"text-underline-position": under,
430
+ ),
431
+ "caption": (
432
+ //"bold-color": map.get($color-options, h),
433
+ // "bold-font-weight": 600,
434
+ //"className": f--font-f,
435
+ // "color": map.get($color-options, a),
436
+ // "font-style": italic,
437
+ // "font-weight": 600,
438
+ // "margin-bottom": $measure,
439
+ // "margin-bottom-before-lists": $measure * 2,
440
+ //"padding-top": $measure,
441
+ // "text-align": right,
442
+ // "text-decoration": none,
443
+ // "text-decoration-color": #000000,
444
+ // "text-underline-position": under,
445
+ ),
446
+ //"margin-bottom": $measure * 4,
447
+
448
+ ),
449
+ $utilities-options: (
450
+ //"media-text-aligned-margin-x": 32px,
451
+ ),
452
+ $video-options: (
453
+ //"border-color": map.get($color-options, e),
454
+ //"border-radius": $measure*2,
455
+ //"border-style": solid,
456
+ //"border-width": 4px,
457
+ "caption": (
458
+ //"bold-color": map.get($color-options, e),
459
+ //"bold-font-weight": 600,
460
+ //"className": f--font-f,
461
+ //"color": red,
462
+ //"font-style": italic,
463
+ //"font-weight": 400,
464
+ //"margin-bottom": $measure * 3,
465
+ //"margin-bottom-before-lists": $measure * 2,
466
+
467
+ //"padding-top": $measure*1.5,
468
+ //"text-align": right,
469
+ //"text-decoration": none,
470
+ //"text-decoration-color": #000000,
471
+ //"text-underline-position": under,
472
+ ),
473
+ //"margin-bottom": $measure * 3,
474
+ //"max-height": 700px,
475
+ //"max-width": 100%,
476
+ //"min-height": 0,
477
+ //"min-width": 30px,
478
+ //"object-fit": cover,
479
+ //"object-position": center,
480
+ ),
481
+ $custom-options: (
482
+ //".mi-selector": (
483
+ //"class": f--font-e f--color-f,
484
+ //"color": red,
485
+ // ),
486
+ //"parent": (
487
+ // "background": map.get($color-options, i),
488
+ // "padding": $measure * 2,
489
+ // ),
490
+ ),
491
+ );
492
+ }
547
493
  }
548
-
549
- @include zoom-modal-image();
550
- @include zoom-modal-image-modifier(
551
- $option: (
552
- // "zoom-modal-bg-overlay": red,
553
- // "zoom-close-btn-color": yellow,
554
- )
555
- );
556
494
  ```
557
495
 
558
496
  Now for WP (implemented on WordPress 6.4), we have another option to add a zoom to the image, when you click a modal appears and the image have a button.
@@ -564,8 +502,8 @@ Example:
564
502
  @include zoom-modal-image();
565
503
  @include zoom-modal-image-modifier(
566
504
  $option: (
567
- // "zoom-modal-bg-overlay": red,
568
- // "zoom-close-btn-color": yellow,
505
+ //"zoom-modal-bg-overlay": red,
506
+ //"zoom-close-btn-color": yellow,
569
507
  )
570
508
  );
571
509
  ```
@@ -585,272 +523,249 @@ Example:
585
523
  @include make-content();
586
524
  @include make-content-modifier(
587
525
  $headings-options: (
588
- // "h1": (
589
- // "className": f--font-a,
590
- // "color": #638c1d,
591
- // "font-family": arial,
592
- // "font-size": 2rem,
593
- // "font-style": italic,
594
- // "font-weight": 400,
595
- // "letter-spacing": 1px,
596
- // "line-height": 1.5,
597
- // "max-lines": 3,
598
- // "text-decoration": underline,
599
- // "text-decoration-color": #000000,
600
- // "text-underline-position": under,
601
- // "margin-bottom": $measure*2,
602
- // "padding-top": $measure*2,
603
- // "text-align": right,
604
- // "margin-bottom-before-lists": 24px,
605
- // "bold-font-weight": 800,
606
- // ),
607
- "h2":
608
- (
609
- // "className": f--font-a,
610
- // "color": #638c1d,
611
- // "font-family": arial,
612
- // "font-size": 2rem,
613
- // "font-style": italic,
614
- // "font-weight": 400,
615
- // "letter-spacing": 1px,
616
- // "line-height": 1.5,
617
- // "max-lines": 3,
618
- // "text-decoration": underline,
619
- // "text-decoration-color": #000000,
620
- // "text-underline-position": under,
621
- "margin-bottom": $measure * 3,
622
- "padding-top": $measure * 5,
623
- // "text-align": right,
624
- // "margin-bottom-before-lists": 24px,
625
- // "bold-font-weight": 800,
526
+ "h1": (
527
+ //"className": f--font-a,
528
+ //"color": #638c1d,
529
+ //"font-style": italic,
530
+ //"font-weight": 400,
531
+ //"text-decoration": underline,
532
+ //"text-decoration-color": #000000,
533
+ //"text-underline-position": under,
534
+ //"margin-bottom": $measure*2,
535
+ //"padding-top": $measure*2,
536
+ //"text-align": right,
537
+ //"margin-bottom-before-lists": 24px,
538
+ //"bold-font-weight": 800,
539
+ //"bold-color": red,
540
+ ),
541
+ "h2": (
542
+ //"className": f--font-a,
543
+ //"color": #638c1d,
544
+ //"font-style": italic,
545
+ //"font-weight": 400,
546
+ //"text-decoration": underline,
547
+ //"text-decoration-color": #000000,
548
+ //"text-underline-position": under,
549
+ //"margin-bottom": $measure * 3,
550
+ //"padding-top": $measure * 5,
551
+ //"text-align": right,
552
+ //"margin-bottom-before-lists": 24px,
553
+ //"bold-font-weight": 800,
554
+ //"bold-color": red,
626
555
  ),
627
- "h3": (
628
- // "className": f--font-a,
629
- // "color": #638c1d,
630
- // "font-family": arial,
631
- // "font-size": 2rem,
632
- // "font-style": italic,
633
- // "font-weight": 400,
634
- // "letter-spacing": 1px,
635
- // "line-height": 1.5,
636
- // "max-lines": 3,
637
- // "text-decoration": underline,
638
- // "text-decoration-color": #000000,
639
- // "text-underline-position": under,
640
- "margin-bottom": $measure * 3,
641
- "padding-top": $measure * 5,
642
- // "text-align": right,
643
- // "margin-bottom-before-lists": 24px,
644
- // "bold-font-weight": 800,
645
- ),
646
- "h4": (
647
- // "className": f--font-a,
648
- // "color": #638c1d,
649
- // "font-family": arial,
650
- // "font-size": 2rem,
651
- // "font-style": italic,
652
- // "font-weight": 400,
653
- // "letter-spacing": 1px,
654
- // "line-height": 1.5,
655
- // "max-lines": 3,
656
- // "text-decoration": underline,
657
- // "text-decoration-color": #000000,
658
- // "text-underline-position": under,
659
- "margin-bottom": $measure * 2,
660
- "padding-top": $measure * 5,
661
- // "text-align": right,
662
- // "margin-bottom-before-lists": 24px,
663
- // "bold-font-weight": 800,
664
- ),
665
- "h5": (
666
- // "className": f--font-a,
667
- // "color": #638c1d,
668
- // "font-family": arial,
669
- // "font-size": 2rem,
670
- // "font-style": italic,
671
- // "font-weight": 400,
672
- // "letter-spacing": 1px,
673
- // "line-height": 1.5,
674
- // "max-lines": 3,
675
- // "text-decoration": underline,
676
- // "text-decoration-color": #000000,
677
- // "text-underline-position": under,
678
- "margin-bottom": $measure * 2,
679
- "padding-top": $measure * 5,
680
- // "text-align": right,
681
- // "margin-bottom-before-lists": 24px,
682
- // "bold-font-weight": 800,
683
- ),
684
- "h6": (
685
- // "className": f--font-a,
686
- // "color": #638c1d,
687
- // "font-family": arial,
688
- // "font-size": 2rem,
689
- // "font-style": italic,
690
- // "font-weight": 400,
691
- // "letter-spacing": 1px,
692
- // "line-height": 1.5,
693
- // "max-lines": 3,
694
- // "text-decoration": underline,
695
- // "text-decoration-color": #000000,
696
- // "text-underline-position": under,
697
- "margin-bottom": $measure,
698
- "padding-top": $measure * 5,
699
- // "text-align": right,
700
- // "margin-bottom-before-lists": 24px,
701
- // "bold-font-weight": 800,
702
- ),
556
+ "h3": (
557
+ //"className": f--font-a,
558
+ //"color": #638c1d,
559
+ //"font-style": italic,
560
+ //"font-weight": 400,
561
+ //"text-decoration": underline,
562
+ //"text-decoration-color": #000000,
563
+ //"text-underline-position": under,
564
+ //"margin-bottom": $measure * 3,
565
+ //"padding-top": $measure * 5,
566
+ //"text-align": right,
567
+ //"margin-bottom-before-lists": 24px,
568
+ //"bold-font-weight": 800,
569
+ //"bold-color": red,
570
+ ),
571
+ "h4": (
572
+ //"className": f--font-a,
573
+ //"color": #638c1d,
574
+ //"font-style": italic,
575
+ //"font-weight": 400,
576
+ //"text-decoration": underline,
577
+ //"text-decoration-color": #000000,
578
+ //"text-underline-position": under,
579
+ //"margin-bottom": $measure * 2,
580
+ //"padding-top": $measure * 5,
581
+ //"text-align": right,
582
+ //"margin-bottom-before-lists": 24px,
583
+ //"bold-font-weight": 800,
584
+ //"bold-color": red,
585
+ ),
586
+ "h5": (
587
+ //"className": f--font-a,
588
+ //"color": #638c1d,
589
+ //"font-style": italic,
590
+ //"font-weight": 400,
591
+ //"text-decoration": underline,
592
+ //"text-decoration-color": #000000,
593
+ //"text-underline-position": under,
594
+ //"margin-bottom": $measure * 2,
595
+ //"padding-top": $measure * 5,
596
+ //"text-align": right,
597
+ //"margin-bottom-before-lists": 24px,
598
+ //"bold-font-weight": 800,
599
+ //"bold-color": red,
600
+ ),
601
+ "h6": (
602
+ //"className": f--font-a,
603
+ //"color": #638c1d,
604
+ //"font-style": italic,
605
+ //"font-weight": 400,
606
+ //"text-decoration": underline,
607
+ //"text-decoration-color": #000000,
608
+ //"text-underline-position": under,
609
+ //"margin-bottom": $measure,
610
+ //"padding-top": $measure * 5,
611
+ //"text-align": right,
612
+ //"margin-bottom-before-lists": 24px,
613
+ //"bold-font-weight": 800,
614
+ //"bold-color": red,
615
+ ),
703
616
  ),
704
617
  $image-options: (
705
- // "border-color": red,
706
- // "border-radius": 20px,
707
- // "border-style": solid,
708
- // "border-width": 2px,
709
- // "object-fit": cover,
710
- // "max-height": 700px,
711
- // "min-height": 0,
712
- // "object-position": center,
713
- // "max-width": 100%,
714
- // "min-width": 30px,
715
- "margin-bottom": $measure * 5,
716
- "caption": (
717
- // "className": f--font-a,
718
- // "color": #638c1d,
719
- // "font-family": arial,
720
- // "font-size": 2rem,
721
- // "font-style": italic,
722
- // "font-weight": 400,
723
- // "letter-spacing": 1px,
724
- // "line-height": 1.5,
725
- // "max-lines": 3,
726
- // "text-decoration": underline,
727
- // "text-decoration-color": #000000,
728
- // "text-underline-position": under,
729
- // "margin-bottom": $measure*2,
730
- "padding-top": $measure * 2,
731
- "text-align": right,
732
- // "margin-bottom-before-lists": 24px,
733
- // "bold-font-weight": 800,
734
- ),
618
+ //"border-color": red,
619
+ //"border-radius": 20px,
620
+ //"border-style": solid,
621
+ //"border-width": 2px,
622
+ //"object-fit": cover,
623
+ //"max-height": 700px,
624
+ //"min-height": 0,
625
+ //"object-position": center,
626
+ //"max-width": 100%,
627
+ //"min-width": 30px,
628
+ //"margin-bottom": $measure * 5,
629
+ "caption": (
630
+ //"className": f--font-a,
631
+ //"color": #638c1d,
632
+ //"font-style": italic,
633
+ //"font-weight": 400,
634
+ //"text-decoration": underline,
635
+ //"text-decoration-color": #000000,
636
+ //"text-underline-position": under,
637
+ //"margin-bottom": $measure*2,
638
+ //"padding-top": $measure * 2,
639
+ //"text-align": right,
640
+ //"margin-bottom-before-lists": 24px,
641
+ //"bold-font-weight": 800,
642
+ //"bold-color": red,
643
+ ),
735
644
  ),
736
645
  $link-options: (
737
- // "className": g--link-01 g--link-01--second,
646
+ //"className": g--link-01 g--link-01--second,
738
647
  ),
739
648
  $lists-options: (
740
- // "number-font": (
741
- // "className": f--font-a,
742
- // "color": #638c1d,
743
- // "font-family": arial,
744
- // "font-size": 2rem,
745
- // "font-style": italic,
746
- // "font-weight": 400,
747
- // "letter-spacing": 1px,
748
- // "line-height": 1.5,
749
- // "max-lines": 3,
750
- // "text-decoration": underline,
751
- // "text-decoration-color": #000000,
752
- // "text-underline-position": under,
753
- // "margin-bottom": $measure*2,
754
- // "padding-top": $measure*5,
755
- // "text-align": right,
756
- // "margin-bottom-before-lists": 24px,
757
- // "bold-font-weight": 800,
758
- // ),
759
- // "first-number-width": 14px,
760
- // "first-level-number-color": map.get($color-options, d),
761
- // "first-level-artwork-width": 8px,
762
- // "first-level-artwork-top": 8px,
763
- // "first-level-artwork-image": '(../img/artwork.png)',
764
- // "first-level-artwork-background": map.get($color-options, d),
765
- // "first-level-artwork-border-radius": 50%,
766
- // "first-level-artwork-border-width": 1px,
767
- // "first-level-artwork-border-color": map.get($color-options, d),
768
- // "second-level-number-color": map.get($color-options, d),
769
- // "second-level-artwork-width": 8px,
770
- // "second-level-artwork-top": 8px,
771
- // "second-level-artwork-image": '(../img/artwork.png)',
772
- // "second-level-artwork-background": map.get($color-options, d),
773
- // "second-level-artwork-border-radius": 50%,
774
- // "second-level-artwork-border-width": 1px,
775
- // "second-level-artwork-border-color": map.get($color-options, d),
776
- // "third-level-number-color": map.get($color-options, d),
777
- // "third-level-artwork-width": 8px,
778
- // "third-level-artwork-top": 8px,
779
- // "third-level-artwork-image": '(../img/artwork.png)',
780
- // "third-level-artwork-background": map.get($color-options, d),
781
- // "third-level-artwork-border-radius": 50%,
782
- // "third-level-artwork-border-width": 1px,
783
- // "third-level-artwork-border-color": map.get($color-options, d),
784
- "margin-bottom": $measure * 4,
785
- // "nested-list-spacing": $measure,
649
+ //"number-font": (
650
+ //"className": f--font-a,
651
+ //"color": #638c1d,
652
+ //"font-style": italic,
653
+ //"font-weight": 400,
654
+ //"text-decoration": underline,
655
+ //"text-decoration-color": #000000,
656
+ //"text-underline-position": under,
657
+ //"margin-bottom": $measure*2,
658
+ //"padding-top": $measure*5,
659
+ //"text-align": right,
660
+ //"margin-bottom-before-lists": 24px,
661
+ //"bold-font-weight": 800,
662
+ //"bold-color": red,
663
+ // ),
664
+ //"first-number-width": 14px,
665
+ //"first-level-number-color": map.get($color-options, d),
666
+ //"first-level-artwork-width": 8px,
667
+ //"first-level-artwork-top": 8px,
668
+ //"first-level-artwork-image": '(../img/artwork.png)',
669
+ //"first-level-artwork-background": map.get($color-options, d),
670
+ //"first-level-artwork-border-radius": 50%,
671
+ //"first-level-artwork-border-width": 1px,
672
+ //"first-level-artwork-border-color": map.get($color-options, d),
673
+ //"second-level-number-color": map.get($color-options, d),
674
+ //"second-level-artwork-width": 8px,
675
+ //"second-level-artwork-top": 8px,
676
+ //"second-level-artwork-image": '(../img/artwork.png)',
677
+ //"second-level-artwork-background": map.get($color-options, d),
678
+ //"second-level-artwork-border-radius": 50%,
679
+ //"second-level-artwork-border-width": 1px,
680
+ //"second-level-artwork-border-color": map.get($color-options, d),
681
+ //"third-level-number-color": map.get($color-options, d),
682
+ //"third-level-artwork-width": 8px,
683
+ //"third-level-artwork-top": 8px,
684
+ //"third-level-artwork-image": '(../img/artwork.png)',
685
+ //"third-level-artwork-background": map.get($color-options, d),
686
+ //"third-level-artwork-border-radius": 50%,
687
+ //"third-level-artwork-border-width": 1px,
688
+ //"third-level-artwork-border-color": map.get($color-options, d),
689
+ //"margin-bottom": $measure * 4,
690
+ //"nested-list-spacing": $measure,
786
691
  "font-styles": (
787
- // "className": f--font-a,
788
- // "color": #638c1d,
789
- // "font-family": arial,
790
- // "font-size": 2rem,
791
- // "font-style": italic,
792
- // "font-weight": 400,
793
- // "letter-spacing": 1px,
794
- // "line-height": 1.5,
795
- // "max-lines": 3,
796
- // "text-decoration": underline,
797
- // "text-decoration-color": #000000,
798
- // "text-underline-position": under,
799
- "margin-bottom": $measure * 2,
800
- // "padding-top": $measure*5,
801
- // "text-align": right,
802
- // "margin-bottom-before-lists": 24px,
803
- // "bold-font-weight": 800,
804
- ),
692
+ //"className": f--font-a,
693
+ //"color": #638c1d,
694
+ //"font-style": italic,
695
+ //"font-weight": 400,
696
+ //"text-decoration": underline,
697
+ //"text-decoration-color": #000000,
698
+ //"text-underline-position": under,
699
+ //"margin-bottom": $measure * 2,
700
+ //"padding-top": $measure*5,
701
+ //"text-align": right,
702
+ //"margin-bottom-before-lists": 24px,
703
+ //"bold-font-weight": 800,
704
+ //"bold-color": red,
705
+ ),
805
706
  ),
806
707
  $paragraphs-options: (
807
- // "className": f--font-a,
808
- // "color": #638c1d,
809
- // "font-family": arial,
810
- // "font-size": 2rem,
811
- // "font-style": italic,
812
- // "font-weight": 400,
813
- // "letter-spacing": 1px,
814
- // "line-height": 1.5,
815
- // "max-lines": 3,
816
- // "text-decoration": underline,
817
- // "text-decoration-color": #000000,
818
- // "text-underline-position": under,
819
- "margin-bottom": $measure * 4,
820
- // "padding-top": $measure*5,
821
- // "text-align": right,
822
- "margin-bottom-before-lists": $measure * 3,
823
- // "bold-font-weight": 800,
708
+ //"className": f--font-a,
709
+ //"color": #638c1d,
710
+ //"font-style": italic,
711
+ //"font-weight": 400,
712
+ //"text-decoration": underline,
713
+ //"text-decoration-color": #000000,
714
+ //"text-underline-position": under,
715
+ //"margin-bottom": $measure * 4,
716
+ //"padding-top": $measure*5,
717
+ //"text-align": right,
718
+ //"margin-bottom-before-lists": $measure * 3,
719
+ //"bold-font-weight": 800,
720
+ //"bold-color": red,
824
721
  ),
825
722
  $quote-options: (
826
- "padding": $measure * 3 0,
827
- "margin-top": $measure * 5,
828
- "margin-bottom": $measure * 6,
829
- // "border": (
830
- // "border-color": red,
831
- // "border-radius": 0,
832
- // "border-style": solid,
833
- // "border-width": 2px 0,
834
- // ),
835
- // "paragraph": (
836
- // "className": f--font-a,
837
- // "color": #638c1d,
838
- // "font-family": arial,
839
- // "font-size": 2rem,
840
- // "font-style": italic,
841
- // "font-weight": 400,
842
- // "letter-spacing": 1px,
843
- // "line-height": 1.5,
844
- // "max-lines": 3,
845
- // "text-decoration": underline,
846
- // "text-decoration-color": #000000,
847
- // "text-underline-position": under,
848
- // "margin-bottom": $measure*2,
849
- // "padding-top": $measure*5,
850
- // "text-align": right,
851
- // "margin-bottom-before-lists": 24px,
852
- // "bold-font-weight": 800,
853
- // ),
723
+ //"padding": $measure * 3 0,
724
+ //"margin-top": $measure * 5,
725
+ //"margin-bottom": $measure * 6,
726
+ "background": (
727
+ //"background-color": color.adjust(map.get($color-options, e), $lightness: 50%),
728
+ //"background-image": url("http://placeholder.terrahq.com/img-16by9.webp"),
729
+ //"background-size": cover,
730
+ //"background-position": center,
731
+ //"background-repeat": no-repeat,
732
+ //"overlay": linear-gradient(rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.55)),
733
+ ),
734
+ "border": (
735
+ //"border-color": red,
736
+ //"border-radius": 0,
737
+ //"border-style": solid,
738
+ //"border-width": 2px 0,
739
+ ),
740
+ "paragraph": (
741
+ //"className": f--font-a,
742
+ //"color": #638c1d,
743
+ //"font-style": italic,
744
+ //"font-weight": 400,
745
+ //"text-decoration": underline,
746
+ //"text-decoration-color": #000000,
747
+ //"text-underline-position": under,
748
+ //"margin-bottom": $measure*2,
749
+ //"padding-top": $measure*5,
750
+ //"text-align": right,
751
+ //"margin-bottom-before-lists": 24px,
752
+ //"bold-font-weight": 800,
753
+ //"bold-color": red,
754
+ ),
755
+ "cite": (
756
+ //"bold-color": red,
757
+ //"bold-font-weight": 600,
758
+ "className": f--font-f,
759
+ "color": map.get($color-options, b),
760
+ //"font-weight": 400,
761
+ //"font-style": italic,
762
+ //"margin-bottom": $measure * 3,
763
+ //"padding-top": $measure * 2,
764
+ //"text-align": right,
765
+ //"text-decoration": none,
766
+ //"text-decoration-color": #000000,
767
+ //"text-underline-position": under,
768
+ ),
854
769
  )
855
770
  );
856
771
  }