@sc-360-v2/storefront-cms-library 0.2.73 → 0.2.76

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 (106) hide show
  1. package/dist/add-order.scss +69 -0
  2. package/dist/allocationDetails.scss +335 -0
  3. package/dist/allocations.scss +546 -2
  4. package/dist/amount-estimator.scss +733 -187
  5. package/dist/brand-basic-elements.scss +142 -61
  6. package/dist/brand.scss +66 -16
  7. package/dist/breadcrumbs.scss +379 -88
  8. package/dist/builder.js +1 -1
  9. package/dist/bulk-variant-picker.scss +525 -121
  10. package/dist/bundle-basic-elements.scss +283 -121
  11. package/dist/bundle.scss +74 -15
  12. package/dist/buyFor.scss +153 -0
  13. package/dist/cart-details.scss +387 -0
  14. package/dist/cart-summary.scss +175 -0
  15. package/dist/cart.scss +178 -44
  16. package/dist/cartDropdownOverlay.scss +118 -0
  17. package/dist/cartGrouping.scss +89 -0
  18. package/dist/category.scss +38 -7
  19. package/dist/categoryDetails.scss +24 -6
  20. package/dist/categoryWidget.scss +11 -6
  21. package/dist/code-temp.scss +6 -4
  22. package/dist/contact-us.scss +19 -147
  23. package/dist/container.scss +22 -1
  24. package/dist/countdown.scss +372 -112
  25. package/dist/editCartItem.scss +111 -0
  26. package/dist/embed-temp.scss +29 -14
  27. package/dist/faq.scss +3 -6
  28. package/dist/filters.scss +11 -2
  29. package/dist/form-preview.scss +128 -93
  30. package/dist/gallery-slider-temp.scss +548 -135
  31. package/dist/grid.scss +24 -0
  32. package/dist/hotspot.scss +27 -25
  33. package/dist/icon-library.scss +26 -15
  34. package/dist/icons.js +1 -1
  35. package/dist/image-temp.scss +45 -17
  36. package/dist/index.js +1 -1
  37. package/dist/item-stock.scss +125 -0
  38. package/dist/layouter-item.scss +26 -2
  39. package/dist/layouter.scss +26 -1
  40. package/dist/light-box-v2.scss +29 -3
  41. package/dist/lightbox.scss +18 -2
  42. package/dist/line.scss +165 -0
  43. package/dist/login.scss +15 -23
  44. package/dist/map.scss +495 -119
  45. package/dist/marchandiserSets.scss +35 -18
  46. package/dist/menu.scss +121 -33
  47. package/dist/modal.scss +4 -0
  48. package/dist/past-orders.scss +11 -2
  49. package/dist/payment-methods.scss +29 -13
  50. package/dist/pickup-locations.scss +884 -244
  51. package/dist/product-actions.scss +2223 -418
  52. package/dist/product-basic-elements.scss +273 -122
  53. package/dist/product-highlights.scss +22 -14
  54. package/dist/product-image.scss +535 -136
  55. package/dist/product-inventory.scss +1105 -283
  56. package/dist/product-options.scss +378 -94
  57. package/dist/product-price.scss +1386 -316
  58. package/dist/product-promotions.scss +2252 -601
  59. package/dist/product.scss +68 -14
  60. package/dist/productDetails.scss +29 -2
  61. package/dist/profile.scss +19 -4
  62. package/dist/quantity-selector.scss +5 -4
  63. package/dist/quick-links.scss +277 -0
  64. package/dist/quotes.scss +11 -2
  65. package/dist/repeater-item.scss +26 -2
  66. package/dist/repeater.scss +60 -7
  67. package/dist/rfqs.scss +11 -2
  68. package/dist/scroll.scss +112 -47
  69. package/dist/search-results-heading.scss +282 -0
  70. package/dist/search.scss +84 -23
  71. package/dist/section.scss +25 -1
  72. package/dist/shareCartSideBar.scss +230 -0
  73. package/dist/shipping-estimator.scss +7 -3
  74. package/dist/social.scss +148 -38
  75. package/dist/sort.scss +11 -2
  76. package/dist/stack.scss +23 -3
  77. package/dist/static-text.scss +0 -1
  78. package/dist/store-locations.scss +887 -244
  79. package/dist/sub-category.scss +50 -19
  80. package/dist/tab-container-item.scss +80 -0
  81. package/dist/tab-container.scss +89 -0
  82. package/dist/tab-v2.scss +579 -0
  83. package/dist/table.scss +370 -91
  84. package/dist/tabs.scss +334 -74
  85. package/dist/text-temp-v2.scss +21 -9
  86. package/dist/types/builder/elements/add-order/index.d.ts +27 -0
  87. package/dist/types/builder/elements/create-form/index.d.ts +27 -0
  88. package/dist/types/builder/elements/form-builder/index.d.ts +7 -0
  89. package/dist/types/builder/elements/image/index.d.ts +13 -0
  90. package/dist/types/builder/elements/quick-links/index.d.ts +36 -0
  91. package/dist/types/builder/enums/index.d.ts +9 -1
  92. package/dist/types/builder/index.d.ts +4 -1
  93. package/dist/types/builder/interfaces/global.d.ts +5 -0
  94. package/dist/types/builder/tools/element-edit/addOrder.d.ts +28 -0
  95. package/dist/types/builder/tools/element-edit/createForm.d.ts +15 -0
  96. package/dist/types/builder/tools/element-edit/index.d.ts +4 -1
  97. package/dist/types/builder/tools/element-edit/quickLinks.d.ts +360 -0
  98. package/dist/uom-selector.scss +1569 -383
  99. package/dist/variant-picker.scss +1593 -481
  100. package/dist/video.scss +212 -53
  101. package/dist/volume-pricing.scss +775 -196
  102. package/dist/widget.scss +14 -0
  103. package/package.json +1 -1
  104. package/dist/editor-core.scss +0 -537
  105. package/dist/tab-panel.scss +0 -93
  106. package/dist/text-editor.scss +0 -331
package/dist/bundle-basic-elements.scss CHANGED
@@ -9,8 +9,17 @@
9
9
  // padding: var(--_lt-pg);
10
10
  // width: var(--_ctm-lt-wh, var(--_tst-lt-wh));
11
11
  // width: var(--_sf-nw-wh, var(--_tst-lt-wh));
12
- width: var(--_sf-el-wh-st-mx, calc(1% * var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh))));
13
- margin: var(--_ctm-lt-mn, --_tst-lt-mn);
12
+ width: var(
13
+ --_sf-el-wh-st-mx,
14
+ calc(
15
+ 1% *
16
+ var(
17
+ --_ctm-mob-ele-nw-wh-vl,
18
+ var(--_ctm-tab-ele-nw-wh-vl, var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh)))
19
+ )
20
+ )
21
+ );
22
+ margin: var(--_ctm-mob-lt-mn, var(--_ctm-tab-lt-mn, var(--_ctm-lt-mn)));
14
23
  // height: var(--_ctm-lt-ht, var(--_tst-lt-ht));
15
24
  // height: ;
16
25
  // aspect-ratio: 1 / var(--_sf-aspect-ratio);
@@ -37,8 +46,8 @@
37
46
  cursor: pointer;
38
47
  }
39
48
  .text-element {
40
- background-color: var(--_ctm-dn-bd-cr, var(--_tst-dn-bd-cr));
41
- padding: var(--_ctm-lt-pg, var(--_tst-lt-pg));
49
+ background-color: var(--_ctm-mob-dn-bd-cr, var(--_ctm-tab-dn-bd-cr, var(--_ctm-dn-bd-cr)));
50
+ padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
42
51
  display: flex;
43
52
  flex-direction: column;
44
53
  --_sf-gp: 16px;
@@ -46,25 +55,43 @@
46
55
  row-gap: var(--_sf-gp);
47
56
  width: 100%;
48
57
  // height: var(--_ctm-lt-ht, var(--_tst-lt-ht));
49
- border-color: var(--_show-border, var(--_ctm-dn-br-cr, var(--_tst-dn-br-cr)));
50
- border-style: var(--_show-border, var(--_ctm-dn-br-se, var(--_tst-dn-br-se)));
51
- border-width: var(--_show-border, var(--_ctm-dn-br-wh, var(--_tst-dn-br-wh)));
52
- border-radius: var(--_ctm-dn-br-rs, var(--_tst-dn-br-rs));
58
+ border-color: var(
59
+ --_show-border,
60
+ var(--_ctm-mob-dn-br-cr, var(--_ctm-tab-dn-br-cr, var(--_ctm-dn-br-cr)))
61
+ );
62
+ border-style: var(
63
+ --_show-border,
64
+ var(--_ctm-mob-dn-br-se, var(--_ctm-tab-dn-br-se, var(--_ctm-dn-br-se)))
65
+ );
66
+ border-width: var(
67
+ --_show-border,
68
+ var(--_ctm-mob-dn-br-wh, var(--_ctm-tab-dn-br-wh, var(--_ctm-dn-br-wh)))
69
+ );
70
+ border-radius: var(--_ctm-mob-dn-br-rs, var(--_ctm-tab-dn-br-rs, var(--_ctm-dn-br-rs)));
53
71
  box-shadow: var(
54
72
  --_show-shadow,
55
- var(--_ctm-dn-sw-ae, var(--_tst-dn-sw-ae)) var(--_ctm-dn-sw-br, var(--_tst-dn-sw-br))
56
- var(--_ctm-dn-sw-sd, var(--_tst-dn-sw-sd)) var(--_ctm-dn-sw-cr, var(--_tst-dn-sw-cr))
73
+ var(--_ctm-mob-dn-sw-ae, var(--_ctm-tab-dn-sw-ae, var(--_ctm-dn-sw-ae)))
74
+ var(--_ctm-mob-dn-sw-br, var(--_ctm-tab-dn-sw-br, var(--_ctm-dn-sw-br)))
75
+ var(--_ctm-mob-dn-sw-sd, var(--_ctm-tab-dn-sw-sd, var(--_ctm-dn-sw-sd)))
76
+ var(--_ctm-mob-dn-sw-cr, var(--_ctm-tab-dn-sw-cr, var(--_ctm-dn-sw-cr)))
57
77
  );
58
- color: var(--_ctm-dn-cr, var(--_tst-dn-dt-se-cr));
59
- font-family: var(--_ctm-dn-ft-fy, var(--_tst-dn-dt-se-ft-fy)), sans-serif;
60
- font-size: var(--_ctm-dn-ft-se, var(--_tst-dn-dt-se-ft-se));
61
- font-weight: var(--_ctm-dn-ft-wt, var(--_tst-dn-dt-se-ft-wt));
62
- font-style: var(--_ctm-dn-ft-se-ic, var(--_tst-dn-dt-se-ft-se-ic));
63
- text-align: var(--_ctm-dn-tt-an, var(--_tst-dn-dt-se-tt-an));
64
- letter-spacing: var(-_ctm-dn-lr-sg, var(--_tst-dn-dt-se-lr-sg));
65
- line-height: var(--_ctm-dn-le-ht, var(--_tst-dn-dt-se-le-ht));
66
- text-decoration: var(--_sf-hr-tt-dn, var(--_ctm-dn-dt-se-ue, var(--_tst-dn-dt-se-le-ht)));
67
- scale: var(--_ctm-dn-zm-ie);
78
+ color: var(--_ctm-mob-dn-cr, var(--_ctm-tab-dn-cr, var(--_ctm-dn-cr)));
79
+ font-family: var(--_ctm-mob-dn-ft-fy, var(--_ctm-tab-dn-ft-fy, var(--_ctm-dn-ft-fy))),
80
+ sans-serif;
81
+ font-size: var(--_ctm-mob-dn-ft-se, var(--_ctm-tab-dn-ft-se, var(--_ctm-dn-ft-se)));
82
+ font-weight: var(--_ctm-mob-dn-ft-wt, var(--_ctm-tab-dn-ft-wt, var(--_ctm-dn-ft-wt)));
83
+ font-style: var(--_ctm-mob-dn-ft-se-ic, var(--_ctm-tab-dn-ft-se-ic, var(--_ctm-dn-ft-se-ic)));
84
+ text-align: var(--_ctm-mob-dn-tt-an, var(--_ctm-tab-dn-tt-an, var(--_ctm-dn-tt-an)));
85
+ letter-spacing: var(--_ctm-mob-dn-lr-sg, var(--_ctm-tab-dn-lr-sg, var(--_ctm-dn-lr-sg)));
86
+ line-height: var(--_ctm-mob-dn-le-ht, var(--_ctm-tab-dn-le-ht, var(--_ctm-dn-le-ht)));
87
+ text-decoration: var(
88
+ --_sf-hr-tt-dn,
89
+ var(
90
+ --_ctm-mob-dn-dt-se-ue,
91
+ var(--_ctm-tab-dn-dt-se-ue, var(--_ctm-dn-dt-se-ue, var(--_ctm-dn-ue)))
92
+ )
93
+ );
94
+ scale: var(--_ctm-mob-dn-zm-ie, var(--_ctm-tab-dn-zm-ie, var(--_ctm-dn-zm-ie)));
68
95
  &[data-flip-x="true"] {
69
96
  transform: scaleX(-1);
70
97
  }
@@ -80,8 +107,17 @@
80
107
  // padding: var(--_lt-pg);
81
108
  // width: var(--_ctm-lt-wh, var(--_tst-lt-wh));
82
109
  // width: var(--_sf-nw-wh, var(--_tst-lt-wh));
83
- width: var(--_sf-el-wh-st-mx, calc(1% * var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh))));
84
- margin: var(--_ctm-lt-mn, --_tst-lt-mn);
110
+ width: var(
111
+ --_sf-el-wh-st-mx,
112
+ calc(
113
+ 1% *
114
+ var(
115
+ --_ctm-mob-ele-nw-wh-vl,
116
+ var(--_ctm-tab-ele-nw-wh-vl, var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh)))
117
+ )
118
+ )
119
+ );
120
+ margin: var(--_ctm-mob-lt-mn, var(--_ctm-tab-lt-mn, var(--_ctm-lt-mn)));
85
121
  // height: var(--_ctm-lt-ht, var(--_tst-lt-ht));
86
122
  // height: ;
87
123
  // aspect-ratio: 1 / var(--_sf-aspect-ratio);
@@ -106,8 +142,8 @@
106
142
  color: rgba(75, 69, 70, 1);
107
143
  }
108
144
  .text-element {
109
- background-color: var(--_ctm-dn-bd-cr, var(--_tst-dn-bd-cr));
110
- padding: var(--_ctm-lt-pg, var(--_tst-lt-pg));
145
+ background-color: var(--_ctm-mob-dn-bd-cr, var(--_ctm-tab-dn-bd-cr, var(--_ctm-dn-bd-cr)));
146
+ padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
111
147
  display: flex;
112
148
  flex-direction: column;
113
149
  --_sf-gp: 16px;
@@ -115,25 +151,43 @@
115
151
  row-gap: var(--_sf-gp);
116
152
  width: 100%;
117
153
  // height: var(--_ctm-lt-ht, var(--_tst-lt-ht));
118
- border-color: var(--_show-border, var(--_ctm-dn-br-cr, var(--_tst-dn-br-cr)));
119
- border-style: var(--_show-border, var(--_ctm-dn-br-se, var(--_tst-dn-br-se)));
120
- border-width: var(--_show-border, var(--_ctm-dn-br-wh, var(--_tst-dn-br-wh)));
121
- border-radius: var(--_ctm-dn-br-rs, var(--_tst-dn-br-rs));
154
+ border-color: var(
155
+ --_show-border,
156
+ var(--_ctm-mob-dn-br-cr, var(--_ctm-tab-dn-br-cr, var(--_ctm-dn-br-cr)))
157
+ );
158
+ border-style: var(
159
+ --_show-border,
160
+ var(--_ctm-mob-dn-br-se, var(--_ctm-tab-dn-br-se, var(--_ctm-dn-br-se)))
161
+ );
162
+ border-width: var(
163
+ --_show-border,
164
+ var(--_ctm-mob-dn-br-wh, var(--_ctm-tab-dn-br-wh, var(--_ctm-dn-br-wh)))
165
+ );
166
+ border-radius: var(--_ctm-mob-dn-br-rs, var(--_ctm-tab-dn-br-rs, var(--_ctm-dn-br-rs)));
122
167
  box-shadow: var(
123
168
  --_show-shadow,
124
- var(--_ctm-dn-sw-ae, var(--_tst-dn-sw-ae)) var(--_ctm-dn-sw-br, var(--_tst-dn-sw-br))
125
- var(--_ctm-dn-sw-sd, var(--_tst-dn-sw-sd)) var(--_ctm-dn-sw-cr, var(--_tst-dn-sw-cr))
169
+ var(--_ctm-mob-dn-sw-ae, var(--_ctm-tab-dn-sw-ae, var(--_ctm-dn-sw-ae)))
170
+ var(--_ctm-mob-dn-sw-br, var(--_ctm-tab-dn-sw-br, var(--_ctm-dn-sw-br)))
171
+ var(--_ctm-mob-dn-sw-sd, var(--_ctm-tab-dn-sw-sd, var(--_ctm-dn-sw-sd)))
172
+ var(--_ctm-mob-dn-sw-cr, var(--_ctm-tab-dn-sw-cr, var(--_ctm-dn-sw-cr)))
173
+ );
174
+ color: var(--_ctm-mob-dn-cr, var(--_ctm-tab-dn-cr, var(--_ctm-dn-cr)));
175
+ font-family: var(--_ctm-mob-dn-ft-fy, var(--_ctm-tab-dn-ft-fy, var(--_ctm-dn-ft-fy))),
176
+ sans-serif;
177
+ font-size: var(--_ctm-mob-dn-ft-se, var(--_ctm-tab-dn-ft-se, var(--_ctm-dn-ft-se)));
178
+ font-weight: var(--_ctm-mob-dn-ft-wt, var(--_ctm-tab-dn-ft-wt, var(--_ctm-dn-ft-wt)));
179
+ font-style: var(--_ctm-mob-dn-ft-se-ic, var(--_ctm-tab-dn-ft-se-ic, var(--_ctm-dn-ft-se-ic)));
180
+ text-align: var(--_ctm-mob-dn-tt-an, var(--_ctm-tab-dn-tt-an, var(--_ctm-dn-tt-an)));
181
+ letter-spacing: var(--_ctm-mob-dn-lr-sg, var(--_ctm-tab-dn-lr-sg, var(--_ctm-dn-lr-sg)));
182
+ line-height: var(--_ctm-mob-dn-le-ht, var(--_ctm-tab-dn-le-ht, var(--_ctm-dn-le-ht)));
183
+ text-decoration: var(
184
+ --_sf-hr-tt-dn,
185
+ var(
186
+ --_ctm-mob-dn-dt-se-ue,
187
+ var(--_ctm-tab-dn-dt-se-ue, var(--_ctm-dn-dt-se-ue, var(--_ctm-dn-ue)))
188
+ )
126
189
  );
127
- color: var(--_ctm-dn-cr, var(--_tst-dn-dt-se-cr));
128
- font-family: var(--_ctm-dn-ft-fy, var(--_tst-dn-dt-se-ft-fy)), sans-serif;
129
- font-size: var(--_ctm-dn-ft-se, var(--_tst-dn-dt-se-ft-se));
130
- font-weight: var(--_ctm-dn-ft-wt, var(--_tst-dn-dt-se-ft-wt));
131
- font-style: var(--_ctm-dn-ft-se-ic, var(--_tst-dn-dt-se-ft-se-ic));
132
- text-align: var(--_ctm-dn-tt-an, var(--_tst-dn-dt-se-tt-an));
133
- letter-spacing: var(-_ctm-dn-lr-sg, var(--_tst-dn-dt-se-lr-sg));
134
- line-height: var(--_ctm-dn-le-ht, var(--_tst-dn-dt-se-le-ht));
135
- text-decoration: var(--_sf-hr-tt-dn, var(--_ctm-dn-dt-se-ue, var(--_tst-dn-dt-se-le-ht)));
136
- scale: var(--_ctm-dn-zm-ie);
190
+ scale: var(--_ctm-mob-dn-zm-ie, var(--_ctm-tab-dn-zm-ie, var(--_ctm-dn-zm-ie)));
137
191
  &[data-flip-x="true"] {
138
192
  transform: scaleX(-1);
139
193
  }
@@ -149,8 +203,17 @@
149
203
  // padding: var(--_lt-pg);
150
204
  // width: var(--_ctm-lt-wh, var(--_tst-lt-wh));
151
205
  // width: var(--_sf-nw-wh, var(--_tst-lt-wh));
152
- width: var(--_sf-el-wh-st-mx, calc(1% * var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh))));
153
- margin: var(--_ctm-lt-mn, --_tst-lt-mn);
206
+ width: var(
207
+ --_sf-el-wh-st-mx,
208
+ calc(
209
+ 1% *
210
+ var(
211
+ --_ctm-mob-ele-nw-wh-vl,
212
+ var(--_ctm-tab-ele-nw-wh-vl, var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh)))
213
+ )
214
+ )
215
+ );
216
+ margin: var(--_ctm-mob-lt-mn, var(--_ctm-tab-lt-mn, var(--_ctm-lt-mn)));
154
217
  // height: var(--_ctm-lt-ht, var(--_tst-lt-ht));
155
218
  // height: ;
156
219
  // aspect-ratio: 1 / var(--_sf-aspect-ratio);
@@ -175,8 +238,8 @@
175
238
  color: rgba(75, 69, 70, 1);
176
239
  }
177
240
  .text-element {
178
- background-color: var(--_ctm-dn-bd-cr, var(--_tst-dn-bd-cr));
179
- padding: var(--_ctm-lt-pg, var(--_tst-lt-pg));
241
+ background-color: var(--_ctm-mob-dn-bd-cr, var(--_ctm-tab-dn-bd-cr, var(--_ctm-dn-bd-cr)));
242
+ padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
180
243
  display: flex;
181
244
  flex-direction: column;
182
245
  --_sf-gp: 16px;
@@ -184,25 +247,43 @@
184
247
  row-gap: var(--_sf-gp);
185
248
  width: 100%;
186
249
  // height: var(--_ctm-lt-ht, var(--_tst-lt-ht));
187
- border-color: var(--_show-border, var(--_ctm-dn-br-cr, var(--_tst-dn-br-cr)));
188
- border-style: var(--_show-border, var(--_ctm-dn-br-se, var(--_tst-dn-br-se)));
189
- border-width: var(--_show-border, var(--_ctm-dn-br-wh, var(--_tst-dn-br-wh)));
190
- border-radius: var(--_ctm-dn-br-rs, var(--_tst-dn-br-rs));
250
+ border-color: var(
251
+ --_show-border,
252
+ var(--_ctm-mob-dn-br-cr, var(--_ctm-tab-dn-br-cr, var(--_ctm-dn-br-cr)))
253
+ );
254
+ border-style: var(
255
+ --_show-border,
256
+ var(--_ctm-mob-dn-br-se, var(--_ctm-tab-dn-br-se, var(--_ctm-dn-br-se)))
257
+ );
258
+ border-width: var(
259
+ --_show-border,
260
+ var(--_ctm-mob-dn-br-wh, var(--_ctm-tab-dn-br-wh, var(--_ctm-dn-br-wh)))
261
+ );
262
+ border-radius: var(--_ctm-mob-dn-br-rs, var(--_ctm-tab-dn-br-rs, var(--_ctm-dn-br-rs)));
191
263
  box-shadow: var(
192
264
  --_show-shadow,
193
- var(--_ctm-dn-sw-ae, var(--_tst-dn-sw-ae)) var(--_ctm-dn-sw-br, var(--_tst-dn-sw-br))
194
- var(--_ctm-dn-sw-sd, var(--_tst-dn-sw-sd)) var(--_ctm-dn-sw-cr, var(--_tst-dn-sw-cr))
265
+ var(--_ctm-mob-dn-sw-ae, var(--_ctm-tab-dn-sw-ae, var(--_ctm-dn-sw-ae)))
266
+ var(--_ctm-mob-dn-sw-br, var(--_ctm-tab-dn-sw-br, var(--_ctm-dn-sw-br)))
267
+ var(--_ctm-mob-dn-sw-sd, var(--_ctm-tab-dn-sw-sd, var(--_ctm-dn-sw-sd)))
268
+ var(--_ctm-mob-dn-sw-cr, var(--_ctm-tab-dn-sw-cr, var(--_ctm-dn-sw-cr)))
269
+ );
270
+ color: var(--_ctm-mob-dn-cr, var(--_ctm-tab-dn-cr, var(--_ctm-dn-cr)));
271
+ font-family: var(--_ctm-mob-dn-ft-fy, var(--_ctm-tab-dn-ft-fy, var(--_ctm-dn-ft-fy))),
272
+ sans-serif;
273
+ font-size: var(--_ctm-mob-dn-ft-se, var(--_ctm-tab-dn-ft-se, var(--_ctm-dn-ft-se)));
274
+ font-weight: var(--_ctm-mob-dn-ft-wt, var(--_ctm-tab-dn-ft-wt, var(--_ctm-dn-ft-wt)));
275
+ font-style: var(--_ctm-mob-dn-ft-se-ic, var(--_ctm-tab-dn-ft-se-ic, var(--_ctm-dn-ft-se-ic)));
276
+ text-align: var(--_ctm-mob-dn-tt-an, var(--_ctm-tab-dn-tt-an, var(--_ctm-dn-tt-an)));
277
+ letter-spacing: var(--_ctm-mob-dn-lr-sg, var(--_ctm-tab-dn-lr-sg, var(--_ctm-dn-lr-sg)));
278
+ line-height: var(--_ctm-mob-dn-le-ht, var(--_ctm-tab-dn-le-ht, var(--_ctm-dn-le-ht)));
279
+ text-decoration: var(
280
+ --_sf-hr-tt-dn,
281
+ var(
282
+ --_ctm-mob-dn-dt-se-ue,
283
+ var(--_ctm-tab-dn-dt-se-ue, var(--_ctm-dn-dt-se-ue, var(--_ctm-dn-ue)))
284
+ )
195
285
  );
196
- color: var(--_ctm-dn-cr, var(--_tst-dn-dt-se-cr));
197
- font-family: var(--_ctm-dn-ft-fy, var(--_tst-dn-dt-se-ft-fy)), sans-serif;
198
- font-size: var(--_ctm-dn-ft-se, var(--_tst-dn-dt-se-ft-se));
199
- font-weight: var(--_ctm-dn-ft-wt, var(--_tst-dn-dt-se-ft-wt));
200
- font-style: var(--_ctm-dn-ft-se-ic, var(--_tst-dn-dt-se-ft-se-ic));
201
- text-align: var(--_ctm-dn-tt-an, var(--_tst-dn-dt-se-tt-an));
202
- letter-spacing: var(-_ctm-dn-lr-sg, var(--_tst-dn-dt-se-lr-sg));
203
- line-height: var(--_ctm-dn-le-ht, var(--_tst-dn-dt-se-le-ht));
204
- text-decoration: var(--_sf-hr-tt-dn, var(--_ctm-dn-dt-se-ue, var(--_tst-dn-dt-se-le-ht)));
205
- scale: var(--_ctm-dn-zm-ie);
286
+ scale: var(--_ctm-mob-dn-zm-ie, var(--_ctm-tab-dn-zm-ie, var(--_ctm-dn-zm-ie)));
206
287
  &[data-flip-x="true"] {
207
288
  transform: scaleX(-1);
208
289
  }
@@ -218,9 +299,18 @@
218
299
  // padding: var(--_lt-pg);
219
300
  // width: var(--_ctm-lt-wh, var(--_tst-lt-wh));
220
301
  // width: var(--_sf-nw-wh, var(--_tst-lt-wh));
221
- width: var(--_sf-el-wh-st-mx, calc(1% * var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh))));
222
- margin: var(--_ctm-lt-mn, --_tst-lt-mn);
223
- height: var(--_ctm-lt-ht, var(--_tst-lt-ht));
302
+ width: var(
303
+ --_sf-el-wh-st-mx,
304
+ calc(
305
+ 1% *
306
+ var(
307
+ --_ctm-mob-ele-nw-wh-vl,
308
+ var(--_ctm-tab-ele-nw-wh-vl, var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh)))
309
+ )
310
+ )
311
+ );
312
+ margin: var(--_ctm-mob-lt-mn, var(--_ctm-tab-lt-mn, var(--_ctm-lt-mn)));
313
+ height: var(--_ctm-mob-lt-ht, var(--_ctm-tab-lt-ht, var(--_ctm-lt-ht)));
224
314
  // height: ;
225
315
  // aspect-ratio: 1 / var(--_sf-aspect-ratio);
226
316
  // --_aspect-ratio: calc(
@@ -244,8 +334,8 @@
244
334
  color: rgba(75, 69, 70, 1);
245
335
  }
246
336
  .text-element {
247
- background-color: var(--_ctm-dn-bd-cr, var(--_tst-dn-bd-cr));
248
- padding: var(--_ctm-lt-pg, var(--_tst-lt-pg));
337
+ background-color: var(--_ctm-mob-dn-bd-cr, var(--_ctm-tab-dn-bd-cr, var(--_ctm-dn-bd-cr)));
338
+ padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
249
339
  display: flex;
250
340
  flex-direction: column;
251
341
  --_sf-gp: 16px;
@@ -253,25 +343,43 @@
253
343
  row-gap: var(--_sf-gp);
254
344
  width: 100%;
255
345
  // height: var(--_ctm-lt-ht, var(--_tst-lt-ht));
256
- border-color: var(--_show-border, var(--_ctm-dn-br-cr, var(--_tst-dn-br-cr)));
257
- border-style: var(--_show-border, var(--_ctm-dn-br-se, var(--_tst-dn-br-se)));
258
- border-width: var(--_show-border, var(--_ctm-dn-br-wh, var(--_tst-dn-br-wh)));
259
- border-radius: var(--_ctm-dn-br-rs, var(--_tst-dn-br-rs));
346
+ border-color: var(
347
+ --_show-border,
348
+ var(--_ctm-mob-dn-br-cr, var(--_ctm-tab-dn-br-cr, var(--_ctm-dn-br-cr)))
349
+ );
350
+ border-style: var(
351
+ --_show-border,
352
+ var(--_ctm-mob-dn-br-se, var(--_ctm-tab-dn-br-se, var(--_ctm-dn-br-se)))
353
+ );
354
+ border-width: var(
355
+ --_show-border,
356
+ var(--_ctm-mob-dn-br-wh, var(--_ctm-tab-dn-br-wh, var(--_ctm-dn-br-wh)))
357
+ );
358
+ border-radius: var(--_ctm-mob-dn-br-rs, var(--_ctm-tab-dn-br-rs, var(--_ctm-dn-br-rs)));
260
359
  box-shadow: var(
261
360
  --_show-shadow,
262
- var(--_ctm-dn-sw-ae, var(--_tst-dn-sw-ae)) var(--_ctm-dn-sw-br, var(--_tst-dn-sw-br))
263
- var(--_ctm-dn-sw-sd, var(--_tst-dn-sw-sd)) var(--_ctm-dn-sw-cr, var(--_tst-dn-sw-cr))
361
+ var(--_ctm-mob-dn-sw-ae, var(--_ctm-tab-dn-sw-ae, var(--_ctm-dn-sw-ae)))
362
+ var(--_ctm-mob-dn-sw-br, var(--_ctm-tab-dn-sw-br, var(--_ctm-dn-sw-br)))
363
+ var(--_ctm-mob-dn-sw-sd, var(--_ctm-tab-dn-sw-sd, var(--_ctm-dn-sw-sd)))
364
+ var(--_ctm-mob-dn-sw-cr, var(--_ctm-tab-dn-sw-cr, var(--_ctm-dn-sw-cr)))
264
365
  );
265
- color: var(--_ctm-dn-cr, var(--_tst-dn-dt-se-cr));
266
- font-family: var(--_ctm-dn-ft-fy, var(--_tst-dn-dt-se-ft-fy)), sans-serif;
267
- font-size: var(--_ctm-dn-ft-se, var(--_tst-dn-dt-se-ft-se));
268
- font-weight: var(--_ctm-dn-ft-wt, var(--_tst-dn-dt-se-ft-wt));
269
- font-style: var(--_ctm-dn-ft-se-ic, var(--_tst-dn-dt-se-ft-se-ic));
270
- text-align: var(--_ctm-dn-tt-an, var(--_tst-dn-dt-se-tt-an));
271
- letter-spacing: var(-_ctm-dn-lr-sg, var(--_tst-dn-dt-se-lr-sg));
272
- line-height: var(--_ctm-dn-le-ht, var(--_tst-dn-dt-se-le-ht));
273
- text-decoration: var(--_sf-hr-tt-dn, var(--_ctm-dn-dt-se-ue, var(--_tst-dn-dt-se-le-ht)));
274
- scale: var(--_ctm-dn-zm-ie);
366
+ color: var(--_ctm-mob-dn-cr, var(--_ctm-tab-dn-cr, var(--_ctm-dn-cr)));
367
+ font-family: var(--_ctm-mob-dn-ft-fy, var(--_ctm-tab-dn-ft-fy, var(--_ctm-dn-ft-fy))),
368
+ sans-serif;
369
+ font-size: var(--_ctm-mob-dn-ft-se, var(--_ctm-tab-dn-ft-se, var(--_ctm-dn-ft-se)));
370
+ font-weight: var(--_ctm-mob-dn-ft-wt, var(--_ctm-tab-dn-ft-wt, var(--_ctm-dn-ft-wt)));
371
+ font-style: var(--_ctm-mob-dn-ft-se-ic, var(--_ctm-tab-dn-ft-se-ic, var(--_ctm-dn-ft-se-ic)));
372
+ text-align: var(--_ctm-mob-dn-tt-an, var(--_ctm-tab-dn-tt-an, var(--_ctm-dn-tt-an)));
373
+ letter-spacing: var(--_ctm-mob-dn-lr-sg, var(--_ctm-tab-dn-lr-sg, var(--_ctm-dn-lr-sg)));
374
+ line-height: var(--_ctm-mob-dn-le-ht, var(--_ctm-tab-dn-le-ht, var(--_ctm-dn-le-ht)));
375
+ text-decoration: var(
376
+ --_sf-hr-tt-dn,
377
+ var(
378
+ --_ctm-mob-dn-dt-se-ue,
379
+ var(--_ctm-tab-dn-dt-se-ue, var(--_ctm-dn-dt-se-ue, var(--_ctm-dn-ue)))
380
+ )
381
+ );
382
+ scale: var(--_ctm-mob-dn-zm-ie, var(--_ctm-tab-dn-zm-ie, var(--_ctm-dn-zm-ie)));
275
383
  &[data-flip-x="true"] {
276
384
  transform: scaleX(-1);
277
385
  }
@@ -287,8 +395,17 @@
287
395
  // padding: var(--_lt-pg);
288
396
  // width: var(--_ctm-lt-wh, var(--_tst-lt-wh));
289
397
  // width: var(--_sf-nw-wh, var(--_tst-lt-wh));
290
- width: var(--_sf-el-wh-st-mx, calc(1% * var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh))));
291
- margin: var(--_ctm-lt-mn, --_tst-lt-mn);
398
+ width: var(
399
+ --_sf-el-wh-st-mx,
400
+ calc(
401
+ 1% *
402
+ var(
403
+ --_ctm-mob-ele-nw-wh-vl,
404
+ var(--_ctm-tab-ele-nw-wh-vl, var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh)))
405
+ )
406
+ )
407
+ );
408
+ margin: var(--_ctm-mob-lt-mn, var(--_ctm-tab-lt-mn, var(--_ctm-lt-mn)));
292
409
  // height: var(--_ctm-lt-ht, var(--_tst-lt-ht));
293
410
  // height: ;
294
411
  // aspect-ratio: 1 / var(--_sf-aspect-ratio);
@@ -313,8 +430,8 @@
313
430
  color: rgba(75, 69, 70, 1);
314
431
  }
315
432
  .text-element {
316
- background-color: var(--_ctm-dn-bd-cr, var(--_tst-dn-bd-cr));
317
- padding: var(--_ctm-lt-pg, var(--_tst-lt-pg));
433
+ background-color: var(--_ctm-mob-dn-bd-cr, var(--_ctm-tab-dn-bd-cr, var(--_ctm-dn-bd-cr)));
434
+ padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
318
435
  display: flex;
319
436
  flex-direction: column;
320
437
  --_sf-gp: 16px;
@@ -322,25 +439,43 @@
322
439
  row-gap: var(--_sf-gp);
323
440
  width: 100%;
324
441
  // height: var(--_ctm-lt-ht, var(--_tst-lt-ht));
325
- border-color: var(--_show-border, var(--_ctm-dn-br-cr, var(--_tst-dn-br-cr)));
326
- border-style: var(--_show-border, var(--_ctm-dn-br-se, var(--_tst-dn-br-se)));
327
- border-width: var(--_show-border, var(--_ctm-dn-br-wh, var(--_tst-dn-br-wh)));
328
- border-radius: var(--_ctm-dn-br-rs, var(--_tst-dn-br-rs));
442
+ border-color: var(
443
+ --_show-border,
444
+ var(--_ctm-mob-dn-br-cr, var(--_ctm-tab-dn-br-cr, var(--_ctm-dn-br-cr)))
445
+ );
446
+ border-style: var(
447
+ --_show-border,
448
+ var(--_ctm-mob-dn-br-se, var(--_ctm-tab-dn-br-se, var(--_ctm-dn-br-se)))
449
+ );
450
+ border-width: var(
451
+ --_show-border,
452
+ var(--_ctm-mob-dn-br-wh, var(--_ctm-tab-dn-br-wh, var(--_ctm-dn-br-wh)))
453
+ );
454
+ border-radius: var(--_ctm-mob-dn-br-rs, var(--_ctm-tab-dn-br-rs, var(--_ctm-dn-br-rs)));
329
455
  box-shadow: var(
330
456
  --_show-shadow,
331
- var(--_ctm-dn-sw-ae, var(--_tst-dn-sw-ae)) var(--_ctm-dn-sw-br, var(--_tst-dn-sw-br))
332
- var(--_ctm-dn-sw-sd, var(--_tst-dn-sw-sd)) var(--_ctm-dn-sw-cr, var(--_tst-dn-sw-cr))
457
+ var(--_ctm-mob-dn-sw-ae, var(--_ctm-tab-dn-sw-ae, var(--_ctm-dn-sw-ae)))
458
+ var(--_ctm-mob-dn-sw-br, var(--_ctm-tab-dn-sw-br, var(--_ctm-dn-sw-br)))
459
+ var(--_ctm-mob-dn-sw-sd, var(--_ctm-tab-dn-sw-sd, var(--_ctm-dn-sw-sd)))
460
+ var(--_ctm-mob-dn-sw-cr, var(--_ctm-tab-dn-sw-cr, var(--_ctm-dn-sw-cr)))
461
+ );
462
+ color: var(--_ctm-mob-dn-cr, var(--_ctm-tab-dn-cr, var(--_ctm-dn-cr)));
463
+ font-family: var(--_ctm-mob-dn-ft-fy, var(--_ctm-tab-dn-ft-fy, var(--_ctm-dn-ft-fy))),
464
+ sans-serif;
465
+ font-size: var(--_ctm-mob-dn-ft-se, var(--_ctm-tab-dn-ft-se, var(--_ctm-dn-ft-se)));
466
+ font-weight: var(--_ctm-mob-dn-ft-wt, var(--_ctm-tab-dn-ft-wt, var(--_ctm-dn-ft-wt)));
467
+ font-style: var(--_ctm-mob-dn-ft-se-ic, var(--_ctm-tab-dn-ft-se-ic, var(--_ctm-dn-ft-se-ic)));
468
+ text-align: var(--_ctm-mob-dn-tt-an, var(--_ctm-tab-dn-tt-an, var(--_ctm-dn-tt-an)));
469
+ letter-spacing: var(--_ctm-mob-dn-lr-sg, var(--_ctm-tab-dn-lr-sg, var(--_ctm-dn-lr-sg)));
470
+ line-height: var(--_ctm-mob-dn-le-ht, var(--_ctm-tab-dn-le-ht, var(--_ctm-dn-le-ht)));
471
+ text-decoration: var(
472
+ --_sf-hr-tt-dn,
473
+ var(
474
+ --_ctm-mob-dn-dt-se-ue,
475
+ var(--_ctm-tab-dn-dt-se-ue, var(--_ctm-dn-dt-se-ue, var(--_ctm-dn-ue)))
476
+ )
333
477
  );
334
- color: var(--_ctm-dn-cr, var(--_tst-dn-dt-se-cr));
335
- font-family: var(--_ctm-dn-ft-fy, var(--_tst-dn-dt-se-ft-fy)), sans-serif;
336
- font-size: var(--_ctm-dn-ft-se, var(--_tst-dn-dt-se-ft-se));
337
- font-weight: var(--_ctm-dn-ft-wt, var(--_tst-dn-dt-se-ft-wt));
338
- font-style: var(--_ctm-dn-ft-se-ic, var(--_tst-dn-dt-se-ft-se-ic));
339
- text-align: var(--_ctm-dn-tt-an, var(--_tst-dn-dt-se-tt-an));
340
- letter-spacing: var(-_ctm-dn-lr-sg, var(--_tst-dn-dt-se-lr-sg));
341
- line-height: var(--_ctm-dn-le-ht, var(--_tst-dn-dt-se-le-ht));
342
- text-decoration: var(--_sf-hr-tt-dn, var(--_ctm-dn-dt-se-ue, var(--_tst-dn-dt-se-le-ht)));
343
- scale: var(--_ctm-dn-zm-ie);
478
+ scale: var(--_ctm-mob-dn-zm-ie, var(--_ctm-tab-dn-zm-ie, var(--_ctm-dn-zm-ie)));
344
479
  &[data-flip-x="true"] {
345
480
  transform: scaleX(-1);
346
481
  }
@@ -356,8 +491,17 @@
356
491
  // padding: var(--_lt-pg);
357
492
  // width: var(--_ctm-lt-wh, var(--_tst-lt-wh));
358
493
  // width: var(--_sf-nw-wh, var(--_tst-lt-wh));
359
- width: var(--_sf-el-wh-st-mx, calc(1% * var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh))));
360
- margin: var(--_ctm-lt-mn, --_tst-lt-mn);
494
+ width: var(
495
+ --_sf-el-wh-st-mx,
496
+ calc(
497
+ 1% *
498
+ var(
499
+ --_ctm-mob-ele-nw-wh-vl,
500
+ var(--_ctm-tab-ele-nw-wh-vl, var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh)))
501
+ )
502
+ )
503
+ );
504
+ margin: var(--_ctm-mob-lt-mn, var(--_ctm-tab-lt-mn, var(--_ctm-lt-mn)));
361
505
  // height: var(--_ctm-lt-ht, var(--_tst-lt-ht));
362
506
  // height: ;
363
507
  // aspect-ratio: 1 / var(--_sf-aspect-ratio);
@@ -382,8 +526,8 @@
382
526
  color: rgba(75, 69, 70, 1);
383
527
  }
384
528
  .text-element {
385
- background-color: var(--_ctm-dn-bd-cr, var(--_tst-dn-bd-cr));
386
- padding: var(--_ctm-lt-pg, var(--_tst-lt-pg));
529
+ background-color: var(--_ctm-mob-dn-bd-cr, var(--_ctm-tab-dn-bd-cr, var(--_ctm-dn-bd-cr)));
530
+ padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
387
531
  display: flex;
388
532
  flex-direction: column;
389
533
  --_sf-gp: 16px;
@@ -391,25 +535,43 @@
391
535
  row-gap: var(--_sf-gp);
392
536
  width: 100%;
393
537
  // height: var(--_ctm-lt-ht, var(--_tst-lt-ht));
394
- border-color: var(--_show-border, var(--_ctm-dn-br-cr, var(--_tst-dn-br-cr)));
395
- border-style: var(--_show-border, var(--_ctm-dn-br-se, var(--_tst-dn-br-se)));
396
- border-width: var(--_show-border, var(--_ctm-dn-br-wh, var(--_tst-dn-br-wh)));
397
- border-radius: var(--_ctm-dn-br-rs, var(--_tst-dn-br-rs));
538
+ border-color: var(
539
+ --_show-border,
540
+ var(--_ctm-mob-dn-br-cr, var(--_ctm-tab-dn-br-cr, var(--_ctm-dn-br-cr)))
541
+ );
542
+ border-style: var(
543
+ --_show-border,
544
+ var(--_ctm-mob-dn-br-se, var(--_ctm-tab-dn-br-se, var(--_ctm-dn-br-se)))
545
+ );
546
+ border-width: var(
547
+ --_show-border,
548
+ var(--_ctm-mob-dn-br-wh, var(--_ctm-tab-dn-br-wh, var(--_ctm-dn-br-wh)))
549
+ );
550
+ border-radius: var(--_ctm-mob-dn-br-rs, var(--_ctm-tab-dn-br-rs, var(--_ctm-dn-br-rs)));
398
551
  box-shadow: var(
399
552
  --_show-shadow,
400
- var(--_ctm-dn-sw-ae, var(--_tst-dn-sw-ae)) var(--_ctm-dn-sw-br, var(--_tst-dn-sw-br))
401
- var(--_ctm-dn-sw-sd, var(--_tst-dn-sw-sd)) var(--_ctm-dn-sw-cr, var(--_tst-dn-sw-cr))
553
+ var(--_ctm-mob-dn-sw-ae, var(--_ctm-tab-dn-sw-ae, var(--_ctm-dn-sw-ae)))
554
+ var(--_ctm-mob-dn-sw-br, var(--_ctm-tab-dn-sw-br, var(--_ctm-dn-sw-br)))
555
+ var(--_ctm-mob-dn-sw-sd, var(--_ctm-tab-dn-sw-sd, var(--_ctm-dn-sw-sd)))
556
+ var(--_ctm-mob-dn-sw-cr, var(--_ctm-tab-dn-sw-cr, var(--_ctm-dn-sw-cr)))
557
+ );
558
+ color: var(--_ctm-mob-dn-cr, var(--_ctm-tab-dn-cr, var(--_ctm-dn-cr)));
559
+ font-family: var(--_ctm-mob-dn-ft-fy, var(--_ctm-tab-dn-ft-fy, var(--_ctm-dn-ft-fy))),
560
+ sans-serif;
561
+ font-size: var(--_ctm-mob-dn-ft-se, var(--_ctm-tab-dn-ft-se, var(--_ctm-dn-ft-se)));
562
+ font-weight: var(--_ctm-mob-dn-ft-wt, var(--_ctm-tab-dn-ft-wt, var(--_ctm-dn-ft-wt)));
563
+ font-style: var(--_ctm-mob-dn-ft-se-ic, var(--_ctm-tab-dn-ft-se-ic, var(--_ctm-dn-ft-se-ic)));
564
+ text-align: var(--_ctm-mob-dn-tt-an, var(--_ctm-tab-dn-tt-an, var(--_ctm-dn-tt-an)));
565
+ letter-spacing: var(--_ctm-mob-dn-lr-sg, var(--_ctm-tab-dn-lr-sg, var(--_ctm-dn-lr-sg)));
566
+ line-height: var(--_ctm-mob-dn-le-ht, var(--_ctm-tab-dn-le-ht, var(--_ctm-dn-le-ht)));
567
+ text-decoration: var(
568
+ --_sf-hr-tt-dn,
569
+ var(
570
+ --_ctm-mob-dn-dt-se-ue,
571
+ var(--_ctm-tab-dn-dt-se-ue, var(--_ctm-dn-dt-se-ue, var(--_ctm-dn-ue)))
572
+ )
402
573
  );
403
- color: var(--_ctm-dn-cr, var(--_tst-dn-dt-se-cr));
404
- font-family: var(--_ctm-dn-ft-fy, var(--_tst-dn-dt-se-ft-fy)), sans-serif;
405
- font-size: var(--_ctm-dn-ft-se, var(--_tst-dn-dt-se-ft-se));
406
- font-weight: var(--_ctm-dn-ft-wt, var(--_tst-dn-dt-se-ft-wt));
407
- font-style: var(--_ctm-dn-ft-se-ic, var(--_tst-dn-dt-se-ft-se-ic));
408
- text-align: var(--_ctm-dn-tt-an, var(--_tst-dn-dt-se-tt-an));
409
- letter-spacing: var(-_ctm-dn-lr-sg, var(--_tst-dn-dt-se-lr-sg));
410
- line-height: var(--_ctm-dn-le-ht, var(--_tst-dn-dt-se-le-ht));
411
- text-decoration: var(--_sf-hr-tt-dn, var(--_ctm-dn-dt-se-ue, var(--_tst-dn-dt-se-le-ht)));
412
- scale: var(--_ctm-dn-zm-ie);
574
+ scale: var(--_ctm-mob-dn-zm-ie, var(--_ctm-tab-dn-zm-ie, var(--_ctm-dn-zm-ie)));
413
575
  &[data-flip-x="true"] {
414
576
  transform: scaleX(-1);
415
577
  }
package/dist/bundle.scss CHANGED
@@ -6,26 +6,85 @@ $resizeActive: '[data-cms-element-resizer="true"]';
6
6
  [data-div-type="element"] {
7
7
  &[data-element-type="bundle"] {
8
8
  // width: var(--_sf-con-nw-wh);
9
- width: var(--_sf-el-wh-st-mx, calc(1% * var(--_ctm-bun-ele-nw-wh-vl, var(--_sf-nw-wh))));
10
- // width: calc(1% * var(--_ctm-bun-ele-nw-wh-vl, auto));
11
- // width: 100%;
12
- // height: var(--_ctm-bun-lt-ht) !important;
9
+ width: var(
10
+ --_sf-mob-el-wh-st-mx,
11
+ var(
12
+ --_sf-tab-el-wh-st-mx,
13
+ var(
14
+ --_sf-el-wh-st-mx,
15
+ calc(
16
+ 1% *
17
+ var(
18
+ --_ctm-mob-bun-ele-nw-wh-vl,
19
+ var(--_ctm-tab-bun-ele-nw-wh-vl, var(--_ctm-bun-ele-nw-wh-vl, var(--_sf-nw-wh)))
20
+ )
21
+ )
22
+ )
23
+ )
24
+ );
25
+
13
26
  height: auto;
14
- margin: var(--_ctm-bun-lt-mn, var(--_ctm-lt-mn, --_tst-lt-mn));
15
27
 
16
- background-color: var(--_ctm-bun-dn-bd-cr, var(--_tst-dn-bd-cr));
17
- padding: var(--_ctm-bun-lt-pg, var(--_tst-lt-pg));
28
+ margin: var(
29
+ --_ctm-mob-bun-lt-mn,
30
+ var(
31
+ --_ctm-tab-bun-lt-mn,
32
+ var(--_ctm-bun-lt-mn, var(--_ctm-mob-lt-mn, var(--_ctm-tab-lt-mn, var(--_ctm-lt-mn))))
33
+ )
34
+ );
35
+
36
+ background-color: var(
37
+ --_ctm-mob-bun-dn-bd-cr,
38
+ var(--_ctm-tab-bun-dn-bd-cr, var(--_ctm-bun-dn-bd-cr))
39
+ );
40
+ background-image: var(
41
+ --_ctm-mob-bun-dn-bd-ie,
42
+ var(--_ctm-tab-bun-dn-bd-ie, var(--_ctm-bun-dn-bd-ie))
43
+ );
44
+ background-attachment: var(
45
+ --_ctm-mob-bun-dn-bd-at,
46
+ var(--_ctm-tab-bun-dn-bd-at, var(--_ctm-bun-dn-bd-at))
47
+ );
48
+ background-position: var(
49
+ --_ctm-mob-bun-dn-bd-pn,
50
+ var(--_ctm-tab-bun-dn-bd-pn, var(--_ctm-bun-dn-bd-pn))
51
+ );
52
+ background-repeat: var(
53
+ --_ctm-mob-bun-dn-bd-rt,
54
+ var(--_ctm-tab-bun-dn-bd-rt, var(--_ctm-bun-dn-bd-rt))
55
+ );
56
+ background-size: var(
57
+ --_ctm-mob-bun-dn-bd-se,
58
+ var(--_ctm-tab-bun-dn-bd-se, var(--_ctm-bun-dn-bd-se))
59
+ );
60
+ padding: var(--_ctm-mob-bun-lt-pg, var(--_ctm-tab-bun-lt-pg, var(--_ctm-bun-lt-pg)));
61
+
62
+ border-color: var(
63
+ --_ctm-mob-bun-dn-br-cr,
64
+ var(--_ctm-tab-bun-dn-br-cr, var(--_ctm-bun-dn-br-cr))
65
+ );
66
+
67
+ border-style: var(
68
+ --_ctm-mob-bun-dn-br-se,
69
+ var(--_ctm-tab-bun-dn-br-se, var(--_ctm-bun-dn-br-se))
70
+ );
71
+
72
+ border-width: var(
73
+ --_ctm-mob-bun-dn-br-wh,
74
+ var(--_ctm-tab-bun-dn-br-wh, var(--_ctm-bun-dn-br-wh))
75
+ );
76
+
77
+ border-radius: var(
78
+ --_ctm-mob-bun-dn-br-rs,
79
+ var(--_ctm-tab-bun-dn-br-rs, var(--_ctm-bun-dn-br-rs))
80
+ );
18
81
 
19
- // height: 100%;
20
- border-color: var(--_ctm-bun-dn-br-cr, var(--_tst-dn-br-cr));
21
- border-style: var(--_ctm-bun-dn-br-se, var(--_tst-dn-br-se));
22
- border-width: var(--_ctm-bun-dn-br-wh, var(--_tst-dn-br-wh));
23
- border-radius: var(--_ctm-bun-dn-br-rs, var(--_tst-dn-br-rs));
24
82
  box-shadow: var(
25
83
  --_show-shadow,
26
- var(--_ctm-bun-dn-sw-ae, var(--_tst-dn-sw-ae)) var(--_ctm-bun-dn-sw-br, var(--_tst-dn-sw-br))
27
- var(--_ctm-bun-dn-sw-sd, var(--_tst-dn-sw-sd))
28
- var(--_ctm-bun-dn-sw-cr, var(--_tst-dn-fq-wt-sw-cr))
84
+ var(--_ctm-mob-bun-dn-sw-ae, var(--_ctm-tab-bun-dn-sw-ae, var(--_ctm-bun-dn-sw-ae)))
85
+ var(--_ctm-mob-bun-dn-sw-br, var(--_ctm-tab-bun-dn-sw-br, var(--_ctm-bun-dn-sw-br)))
86
+ var(--_ctm-mob-bun-dn-sw-sd, var(--_ctm-tab-bun-dn-sw-sd, var(--_ctm-bun-dn-sw-sd)))
87
+ var(--_ctm-mob-bun-dn-sw-cr, var(--_ctm-tab-bun-dn-sw-cr, var(--_ctm-bun-dn-sw-cr)))
29
88
  );
30
89
 
31
90
  // &:not(:has(#{$resizerId}#{$resizeActive})) {