@terrahq/wysiwyg 1.0.0 → 1.0.2

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