@sc-360-v2/storefront-cms-library 0.5.73 → 0.5.75

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 (141) hide show
  1. package/dist/add-existing-form.scss +5 -13
  2. package/dist/add-order.scss +236 -126
  3. package/dist/add-products-tab-details.scss +2097 -1048
  4. package/dist/add-products-tab.scss +1204 -666
  5. package/dist/allocation-header-quota-details.scss +407 -189
  6. package/dist/allocationDetails.scss +2143 -1661
  7. package/dist/allocations-quota-details.scss +323 -159
  8. package/dist/allocations.scss +793 -475
  9. package/dist/amount-estimator.scss +743 -405
  10. package/dist/badge.scss +18 -43
  11. package/dist/brand-basic-elements.scss +124 -76
  12. package/dist/brand.scss +55 -28
  13. package/dist/breadcrumbs.scss +718 -356
  14. package/dist/builder.js +1 -1
  15. package/dist/builderLite.js +1 -1
  16. package/dist/bulk-variant-picker.scss +2027 -1128
  17. package/dist/bundle.scss +1477 -841
  18. package/dist/bundleDetails.scss +5072 -3774
  19. package/dist/button.scss +103 -79
  20. package/dist/buy-for-tab-container.scss +106 -77
  21. package/dist/buyForHeaders.scss +2976 -1722
  22. package/dist/cart-details.scss +1012 -481
  23. package/dist/cart-summary.scss +1149 -557
  24. package/dist/cart-wrapper.scss +79 -37
  25. package/dist/cart.scss +225 -117
  26. package/dist/cartAttributes.scss +735 -416
  27. package/dist/category-groups-element.scss +108 -127
  28. package/dist/category-groups-product-grid.scss +147 -120
  29. package/dist/category-groups-product-image.scss +1457 -1162
  30. package/dist/category-groups-product-options.scss +680 -613
  31. package/dist/category-groups-product-price.scss +3244 -1966
  32. package/dist/category-groups-quota-details.scss +464 -210
  33. package/dist/category.scss +50 -26
  34. package/dist/checkout.scss +16 -24
  35. package/dist/confirm-modal.scss +2 -22
  36. package/dist/container.scss +54 -32
  37. package/dist/countdown.scss +443 -255
  38. package/dist/coupon.scss +710 -351
  39. package/dist/default-dropdown.scss +1 -12
  40. package/dist/embroider-template-1-v2.scss +172 -123
  41. package/dist/embroider-template-1.scss +104 -68
  42. package/dist/embroidery.scss +31 -30
  43. package/dist/employee-bulk-order.scss +142 -418
  44. package/dist/faq.scss +408 -228
  45. package/dist/filter-results.scss +265 -125
  46. package/dist/filters.scss +1797 -900
  47. package/dist/gallery-slider-temp.scss +750 -432
  48. package/dist/global-styles.scss +7 -23
  49. package/dist/grid.scss +33 -25
  50. package/dist/hotspot.scss +115 -68
  51. package/dist/icons-builder.js +1 -1
  52. package/dist/icons-website.js +1 -1
  53. package/dist/icons.js +1 -1
  54. package/dist/image-temp.scss +20 -21
  55. package/dist/index.js +1 -1
  56. package/dist/item-stock.scss +16 -9
  57. package/dist/kitDetails.scss +4301 -2721
  58. package/dist/kits.scss +19 -24
  59. package/dist/language-selector.scss +361 -211
  60. package/dist/last-x-orders.scss +174 -95
  61. package/dist/layouter-item.scss +103 -75
  62. package/dist/layouter-pro-item.scss +95 -89
  63. package/dist/layouter-pro.scss +92 -87
  64. package/dist/layouter.scss +445 -383
  65. package/dist/light-box-v2.scss +104 -89
  66. package/dist/login.scss +566 -287
  67. package/dist/map.scss +368 -221
  68. package/dist/marchandiserSets.scss +104 -95
  69. package/dist/mega-menu-container.scss +109 -96
  70. package/dist/mega-menu.scss +731 -624
  71. package/dist/menu-item.scss +2 -2
  72. package/dist/menu-v2.scss +619 -507
  73. package/dist/multi-select-dropdown.scss +3 -27
  74. package/dist/my-templates.scss +9 -38
  75. package/dist/option-bar.scss +375 -215
  76. package/dist/option-families.scss +252 -0
  77. package/dist/order-status.scss +1117 -646
  78. package/dist/overflow-module.scss +7 -6
  79. package/dist/past-orders.scss +149 -118
  80. package/dist/payment-methods.scss +30 -46
  81. package/dist/pickup-locations.scss +1118 -558
  82. package/dist/position-module.scss +17 -20
  83. package/dist/prefix-list.scss +10 -21
  84. package/dist/product-actions.scss +2425 -1625
  85. package/dist/product-basic-elements.scss +169 -108
  86. package/dist/product-highlights.scss +152 -107
  87. package/dist/product-image-bundles.scss +642 -337
  88. package/dist/product-inventory.scss +1357 -673
  89. package/dist/product-labels.scss +105 -84
  90. package/dist/product-options.scss +1274 -1117
  91. package/dist/product-price.scss +2561 -1283
  92. package/dist/product-promotions.scss +2830 -1388
  93. package/dist/product-sizechart.scss +905 -516
  94. package/dist/product.scss +61 -28
  95. package/dist/productDetails.scss +39 -19
  96. package/dist/profile.scss +447 -207
  97. package/dist/quantity-selector.scss +550 -313
  98. package/dist/quick-inventory-check.scss +174 -95
  99. package/dist/quick-links.scss +133 -55
  100. package/dist/quick-order-pad.scss +271 -218
  101. package/dist/quota-details.scss +282 -152
  102. package/dist/quotes.scss +122 -89
  103. package/dist/repeater-embla-controls.scss +15 -35
  104. package/dist/repeater-grid-toggle.scss +166 -156
  105. package/dist/repeater-item.scss +64 -41
  106. package/dist/repeater.scss +814 -671
  107. package/dist/request-for-quotes.scss +16 -66
  108. package/dist/responsive-behaviour.scss +1 -3
  109. package/dist/rfqs.scss +181 -118
  110. package/dist/scroll.scss +172 -93
  111. package/dist/search.scss +326 -179
  112. package/dist/section.scss +51 -27
  113. package/dist/shipping-payments.scss +58 -198
  114. package/dist/simple-list.scss +164 -74
  115. package/dist/social.scss +145 -80
  116. package/dist/sort.scss +19 -11
  117. package/dist/stack.scss +34 -23
  118. package/dist/static-global.scss +26 -44
  119. package/dist/stockStatus.scss +19 -11
  120. package/dist/store-locations.scss +1105 -577
  121. package/dist/tab-container.scss +108 -81
  122. package/dist/table-common.scss +408 -217
  123. package/dist/table.scss +502 -271
  124. package/dist/text-temp.scss +7 -8
  125. package/dist/theme-classes.scss +13 -17
  126. package/dist/types/builder/enums/data-connectors.d.ts +3 -1
  127. package/dist/types/builder/enums/index.d.ts +3 -1
  128. package/dist/types/builder/tools/element-edit/index.d.ts +2 -1
  129. package/dist/types/builder/tools/element-edit/optionFamilies.d.ts +20 -0
  130. package/dist/types/builder/tools/element-edit/productActions.d.ts +3 -0
  131. package/dist/types/website/constants/data-connector-souces.d.ts +40 -8
  132. package/dist/types/website/constants/data-connectors.d.ts +12 -1
  133. package/dist/types/website/helper/ssr-functions.d.ts +8 -0
  134. package/dist/uom-selector.scss +949 -489
  135. package/dist/uploadMedia.js +1 -1
  136. package/dist/user-elements.scss +837 -529
  137. package/dist/variant-picker.scss +2555 -1281
  138. package/dist/volume-pricing.scss +1037 -541
  139. package/dist/website.js +1 -1
  140. package/dist/widget.scss +1 -0
  141. package/package.json +1 -1
package/dist/simple-list.scss CHANGED
@@ -11,10 +11,10 @@ $subMenuItemText: ".flex__sub__menu__item__text";
11
11
  width: calc(1% * #{prepareMediaVariable(--_ctm-ele-nw-wh-vl)});
12
12
  margin: prepareMediaVariable(--_ctm-lt-mn);
13
13
 
14
- &>.wrapper {
14
+ & > .wrapper {
15
15
  width: 100%;
16
16
 
17
- &>#{$subMenuContainer} {
17
+ & > #{$subMenuContainer} {
18
18
  padding: #{prepareMediaVariable(--_ctm-lt-pg, 0px)};
19
19
  min-height: prepareMediaVariable(--_ctm-lt-mn-ht);
20
20
  background: prepareMediaVariable(--_ctm-dn-sb-mu-cr-bd-cr);
@@ -58,39 +58,71 @@ $subMenuItemText: ".flex__sub__menu__item__text";
58
58
  }
59
59
 
60
60
  &[data-show-boxshadow="true"] {
61
- box-shadow: prepareMediaVariable(--_ctm-dn-sb-mu-cr-sw-ae) prepareMediaVariable(--_ctm-dn-sb-mu-cr-sw-br) prepareMediaVariable(--_ctm-dn-sb-mu-cr-sw-sd) prepareMediaVariable(--_ctm-dn-sb-mu-cr-sw-cr);
61
+ box-shadow: prepareMediaVariable(--_ctm-dn-sb-mu-cr-sw-ae)
62
+ prepareMediaVariable(--_ctm-dn-sb-mu-cr-sw-br)
63
+ prepareMediaVariable(--_ctm-dn-sb-mu-cr-sw-sd)
64
+ prepareMediaVariable(--_ctm-dn-sb-mu-cr-sw-cr);
62
65
  }
63
66
 
64
- &>li {
67
+ & > li {
65
68
  &#{$subMenuItem} {
66
69
  display: var(--_d-flex);
67
70
  flex-direction: column;
68
71
  width: 100%;
69
- padding: var(--_sf-sb-it-at-pd,
70
- var(--_sf-sb-it-hr-pd, #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-dt-se-pg, 0px)}));
71
- background: var(--_sf-sb-it-at-bd,
72
- var(--_sf-sb-it-hr-bd, #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-dt-se-bd-cr)}));
73
- border-radius: var(--_sf-sb-it-at-br,
74
- var(--_sf-sb-it-hr-br, #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-dt-se-br-rs)}));
72
+ padding: var(
73
+ --_sf-sb-it-at-pd,
74
+ var(--_sf-sb-it-hr-pd, #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-dt-se-pg, 0px)})
75
+ );
76
+ background: var(
77
+ --_sf-sb-it-at-bd,
78
+ var(--_sf-sb-it-hr-bd, #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-dt-se-bd-cr)})
79
+ );
80
+ border-radius: var(
81
+ --_sf-sb-it-at-br,
82
+ var(--_sf-sb-it-hr-br, #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-dt-se-br-rs)})
83
+ );
75
84
 
76
85
  &[data-show-border="true"] {
77
- border-color: var(--_sf-sb-it-at-brc,
78
- var(--_sf-sb-it-hr-brc, #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-dt-se-br-cr)}));
79
- border-width: var(--_sf-sb-it-at-bw,
80
- var(--_sf-sb-it-hr-bw, #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-dt-se-br-wh)}));
81
- border-style: var(--_sf-sb-it-at-bs,
82
- var(--_sf-sb-it-hr-bs, prepareMediaVariable(--_ctm-dn-sb-mu-im-se-dt-se-br-se)));
86
+ border-color: var(
87
+ --_sf-sb-it-at-brc,
88
+ var(--_sf-sb-it-hr-brc, #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-dt-se-br-cr)})
89
+ );
90
+ border-width: var(
91
+ --_sf-sb-it-at-bw,
92
+ var(--_sf-sb-it-hr-bw, #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-dt-se-br-wh)})
93
+ );
94
+ border-style: var(
95
+ --_sf-sb-it-at-bs,
96
+ var(--_sf-sb-it-hr-bs, prepareMediaVariable(--_ctm-dn-sb-mu-im-se-dt-se-br-se))
97
+ );
83
98
  }
84
99
 
85
100
  &[data-show-boxshadow="true"] {
86
- box-shadow: var(--_sf-sb-it-at-bsa,
87
- var(--_sf-sb-it-hr-bsa,
88
- #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-dt-se-sw-ae)})) var(--_sf-sb-it-at-blr,
89
- var(--_sf-sb-it-hr-blr,
90
- #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-dt-se-sw-br)})) var(--_sf-sb-it-at-spr,
91
- var(--_sf-sb-it-hr-spr,
92
- #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-dt-se-sw-sd)})) var(--_sf-sb-it-at-bscl,
93
- var(--_sf-sb-it-hr-bscl, prepareMediaVariable(--_ctm-dn-sb-mu-im-se-dt-se-sw-cr)));
101
+ box-shadow: var(
102
+ --_sf-sb-it-at-bsa,
103
+ var(
104
+ --_sf-sb-it-hr-bsa,
105
+ #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-dt-se-sw-ae)}
106
+ )
107
+ )
108
+ var(
109
+ --_sf-sb-it-at-blr,
110
+ var(
111
+ --_sf-sb-it-hr-blr,
112
+ #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-dt-se-sw-br)}
113
+ )
114
+ )
115
+ var(
116
+ --_sf-sb-it-at-spr,
117
+ var(
118
+ --_sf-sb-it-hr-spr,
119
+ #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-dt-se-sw-sd)}
120
+ )
121
+ )
122
+ var(
123
+ --_sf-sb-it-at-bscl,
124
+ var(--_sf-sb-it-hr-bscl, prepareMediaVariable(--_ctm-dn-sb-mu-im-se-dt-se-sw-cr))
125
+ );
94
126
  }
95
127
 
96
128
  &:hover {
@@ -148,18 +180,22 @@ $subMenuItemText: ".flex__sub__menu__item__text";
148
180
  --_sf-sb-it-at-icr-im: #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-sd-se-in-c1-im)};
149
181
  }
150
182
 
151
- &>a {
183
+ & > a {
152
184
  display: var(--_d-flex);
153
185
  justify-content: space-between;
154
186
  align-items: center;
155
187
  width: 100%;
156
188
 
157
- &>span {
189
+ & > span {
158
190
  display: var(--_d-flex);
159
191
  width: 100%;
160
- justify-content: var(--_sf-sb-it-at-tae,
161
- var(--_sf-sb-it-hr-tae,
162
- #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-dt-se-tt-an)}));
192
+ justify-content: var(
193
+ --_sf-sb-it-at-tae,
194
+ var(
195
+ --_sf-sb-it-hr-tae,
196
+ #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-dt-se-tt-an)}
197
+ )
198
+ );
163
199
 
164
200
  // Per-item leading glyph, styled from the list item scope's own
165
201
  // `Item` vars — the glyph itself is picked per item under Content.
@@ -167,23 +203,39 @@ $subMenuItemText: ".flex__sub__menu__item__text";
167
203
  flex: 0 0 auto;
168
204
  width: auto;
169
205
  align-items: center;
170
- margin-inline-end: prepareMediaVariable(--_ctm-dn-sb-mu-im-se-dt-se-in-gp-im,
171
- 0px);
206
+ margin-inline-end: prepareMediaVariable(
207
+ --_ctm-dn-sb-mu-im-se-dt-se-in-gp-im,
208
+ 0px
209
+ );
172
210
 
173
211
  svg {
174
- width: var(--_sf-sb-it-at-isz-im,
175
- var(--_sf-sb-it-hr-isz-im,
176
- #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-dt-se-in-se-im)}));
177
- height: var(--_sf-sb-it-at-isz-im,
178
- var(--_sf-sb-it-hr-isz-im,
179
- #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-dt-se-in-se-im)}));
212
+ width: var(
213
+ --_sf-sb-it-at-isz-im,
214
+ var(
215
+ --_sf-sb-it-hr-isz-im,
216
+ #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-dt-se-in-se-im)}
217
+ )
218
+ );
219
+ height: var(
220
+ --_sf-sb-it-at-isz-im,
221
+ var(
222
+ --_sf-sb-it-hr-isz-im,
223
+ #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-dt-se-in-se-im)}
224
+ )
225
+ );
180
226
 
181
227
  path {
182
- stroke: var(--_sf-sb-it-at-icr-im,
183
- var(--_sf-sb-it-hr-icr-im,
184
- #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-dt-se-in-c1-im)}));
185
- stroke-width: prepareMediaVariable(--_ctm-dn-sb-mu-im-se-dt-se-se-wh-im,
186
- 1.25);
228
+ stroke: var(
229
+ --_sf-sb-it-at-icr-im,
230
+ var(
231
+ --_sf-sb-it-hr-icr-im,
232
+ #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-dt-se-in-c1-im)}
233
+ )
234
+ );
235
+ stroke-width: prepareMediaVariable(
236
+ --_ctm-dn-sb-mu-im-se-dt-se-se-wh-im,
237
+ 1.25
238
+ );
187
239
  }
188
240
  }
189
241
  }
@@ -201,37 +253,75 @@ $subMenuItemText: ".flex__sub__menu__item__text";
201
253
  @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
202
254
  }
203
255
 
204
- font-family: var(--_sf-it-at-ff,
205
- var(--_sf-it-hr-ff, #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-dt-se-ft-fy)}));
206
- text-transform: var(--_sf-it-at-ff,
207
- var(--_sf-it-hr-ff, #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-dt-se-tt-tm)}));
208
- word-wrap: var(--_sf-it-at-ff,
209
- var(--_sf-it-hr-ff, #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-dt-se-wd-wp)}));
210
- word-break: var(--_sf-it-at-ff,
211
- var(--_sf-it-hr-ff, #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-dt-se-wd-bk)}));
212
- font-size: var(--_sf-sb-it-at-fs,
213
- var(--_sf-sb-it-hr-fs,
214
- #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-dt-se-ft-se)}));
215
- color: var(--_sf-sb-it-at-fclr,
216
- var(--_sf-sb-it-hr-fclr,
217
- #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-dt-se-cr)}));
218
- font-weight: var(--_sf-sb-it-at-fw,
219
- var(--_sf-sb-it-hr-fw,
220
- #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-dt-se-ft-wt)}));
221
- font-style: var(--_sf-sb-it-at-fsi,
222
- var(--_sf-sb-it-hr-fsi,
223
- #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-dt-se-ft-se-ic)}));
224
- text-decoration: var(--_sf-sb-it-at-td,
225
- var(--_sf-sb-it-hr-td, #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-dt-se-ue)}));
226
- text-align: var(--_sf-sb-it-at-tae,
227
- var(--_sf-sb-it-hr-tae,
228
- #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-dt-se-tt-an)}));
229
- letter-spacing: var(--_sf-sb-it-at-ls,
230
- var(--_sf-sb-it-hr-ls,
231
- #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-dt-se-lr-sg)}));
232
- line-height: var(--_sf-sb-it-at-lh,
233
- var(--_sf-sb-it-hr-lh,
234
- #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-dt-se-le-ht)}));
256
+ font-family: var(
257
+ --_sf-it-at-ff,
258
+ var(--_sf-it-hr-ff, #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-dt-se-ft-fy)})
259
+ );
260
+ text-transform: var(
261
+ --_sf-it-at-ff,
262
+ var(--_sf-it-hr-ff, #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-dt-se-tt-tm)})
263
+ );
264
+ word-wrap: var(
265
+ --_sf-it-at-ff,
266
+ var(--_sf-it-hr-ff, #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-dt-se-wd-wp)})
267
+ );
268
+ word-break: var(
269
+ --_sf-it-at-ff,
270
+ var(--_sf-it-hr-ff, #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-dt-se-wd-bk)})
271
+ );
272
+ font-size: var(
273
+ --_sf-sb-it-at-fs,
274
+ var(
275
+ --_sf-sb-it-hr-fs,
276
+ #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-dt-se-ft-se)}
277
+ )
278
+ );
279
+ color: var(
280
+ --_sf-sb-it-at-fclr,
281
+ var(
282
+ --_sf-sb-it-hr-fclr,
283
+ #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-dt-se-cr)}
284
+ )
285
+ );
286
+ font-weight: var(
287
+ --_sf-sb-it-at-fw,
288
+ var(
289
+ --_sf-sb-it-hr-fw,
290
+ #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-dt-se-ft-wt)}
291
+ )
292
+ );
293
+ font-style: var(
294
+ --_sf-sb-it-at-fsi,
295
+ var(
296
+ --_sf-sb-it-hr-fsi,
297
+ #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-dt-se-ft-se-ic)}
298
+ )
299
+ );
300
+ text-decoration: var(
301
+ --_sf-sb-it-at-td,
302
+ var(--_sf-sb-it-hr-td, #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-dt-se-ue)})
303
+ );
304
+ text-align: var(
305
+ --_sf-sb-it-at-tae,
306
+ var(
307
+ --_sf-sb-it-hr-tae,
308
+ #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-dt-se-tt-an)}
309
+ )
310
+ );
311
+ letter-spacing: var(
312
+ --_sf-sb-it-at-ls,
313
+ var(
314
+ --_sf-sb-it-hr-ls,
315
+ #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-dt-se-lr-sg)}
316
+ )
317
+ );
318
+ line-height: var(
319
+ --_sf-sb-it-at-lh,
320
+ var(
321
+ --_sf-sb-it-hr-lh,
322
+ #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-dt-se-le-ht)}
323
+ )
324
+ );
235
325
  }
236
326
  }
237
327
  }
@@ -245,4 +335,4 @@ $subMenuItemText: ".flex__sub__menu__item__text";
245
335
  }
246
336
  }
247
337
  }
248
- }
338
+ }
package/dist/social.scss CHANGED
@@ -5,17 +5,30 @@
5
5
  [data-div-type="element"] {
6
6
  &[data-element-type="social"] {
7
7
  // width: var(--_sf-nw-wh, var(--_tst-lt-wh));
8
- width: var(--_sf-el-wh-st-mx,
9
- calc(1% * var(--_ctm-mob-ele-nw-wh-vl,
10
- var(--_ctm-tab-ele-nw-wh-vl, var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh))))));
8
+ width: var(
9
+ --_sf-el-wh-st-mx,
10
+ calc(
11
+ 1% *
12
+ var(
13
+ --_ctm-mob-ele-nw-wh-vl,
14
+ var(--_ctm-tab-ele-nw-wh-vl, var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh)))
15
+ )
16
+ )
17
+ );
11
18
 
12
19
  margin: var(--_ctm-mob-lt-mn, var(--_ctm-tab-lt-mn, var(--_ctm-lt-mn)));
13
20
 
14
21
  aspect-ratio: 1 / var(--_sf-aspect-ratio);
15
22
 
16
- --_aspect-ratio: calc(1 * (var(--_ctm-mob-lt-ht, var(--_ctm-tab-lt-ht, var(--_ctm-lt-ht))) / var(--_ctm-mob-lt-wh, var(--_ctm-tab-lt-wh, var(--_ctm-lt-wh)))));
23
+ --_aspect-ratio: calc(
24
+ 1 *
25
+ (
26
+ var(--_ctm-mob-lt-ht, var(--_ctm-tab-lt-ht, var(--_ctm-lt-ht))) /
27
+ var(--_ctm-mob-lt-wh, var(--_ctm-tab-lt-wh, var(--_ctm-lt-wh)))
28
+ )
29
+ );
17
30
 
18
- &>.wrapper {
31
+ & > .wrapper {
19
32
  width: 100%;
20
33
  height: 100%;
21
34
  // background-color: var(--_ctm-dn-fl-ad-bd-bd-cr, var(--_tst-dn-fl-ad-bd-bd-cr));
@@ -35,26 +48,22 @@
35
48
  flex-direction: column;
36
49
  }
37
50
  }
38
-
39
51
  &[data-icon-style="Icon"] {
40
52
  .social__container {
41
53
  align-items: center;
42
54
  }
43
-
44
55
  &[data-item-alignment="left"] {
45
56
  .social__container {
46
57
  justify-content: flex-start;
47
58
  align-items: center;
48
59
  }
49
60
  }
50
-
51
61
  &[data-item-alignment="center"] {
52
62
  .social__container {
53
63
  justify-content: center;
54
64
  align-items: center;
55
65
  }
56
66
  }
57
-
58
67
  &[data-item-alignment="right"] {
59
68
  .social__container {
60
69
  justify-content: flex-end;
@@ -62,43 +71,36 @@
62
71
  }
63
72
  }
64
73
  }
65
-
66
74
  &[data-icon-position="left"] {
67
75
  .social__item {
68
76
  flex-direction: row;
69
77
  }
70
78
  }
71
-
72
79
  &[data-icon-position="right"] {
73
80
  .social__item {
74
81
  flex-direction: row-reverse;
75
82
  }
76
83
  }
77
-
78
84
  &[data-icon-position="top"] {
79
85
  .social__item {
80
86
  flex-direction: column;
81
87
  }
82
88
  }
83
-
84
89
  &[data-icon-position="bottom"] {
85
90
  .social__item {
86
91
  flex-direction: column-reverse;
87
92
  }
88
93
  }
89
-
90
94
  &[data-item-alignment="left"] {
91
95
  .social__item {
92
96
  align-items: flex-start;
93
97
  }
94
98
  }
95
-
96
99
  &[data-item-alignment="center"] {
97
100
  .social__item {
98
101
  align-items: center;
99
102
  }
100
103
  }
101
-
102
104
  &[data-item-alignment="right"] {
103
105
  .social__item {
104
106
  align-items: flex-end;
@@ -107,15 +109,20 @@
107
109
 
108
110
  &[data-widget-border="true"] {
109
111
  .social__container {
110
- border-color: var(--_ctm-mob-dn-sl-wt-br-cr,
111
- var(--_ctm-tab-dn-sl-wt-br-cr, var(--_ctm-dn-sl-wt-br-cr)));
112
- border-style: var(--_ctm-mob-dn-sl-wt-br-se,
113
- var(--_ctm-tab-dn-sl-wt-br-se, var(--_ctm-dn-sl-wt-br-se)));
114
- border-width: var(--_ctm-mob-dn-sl-wt-br-wh,
115
- var(--_ctm-tab-dn-sl-wt-br-wh, var(--_ctm-dn-sl-wt-br-wh)));
112
+ border-color: var(
113
+ --_ctm-mob-dn-sl-wt-br-cr,
114
+ var(--_ctm-tab-dn-sl-wt-br-cr, var(--_ctm-dn-sl-wt-br-cr))
115
+ );
116
+ border-style: var(
117
+ --_ctm-mob-dn-sl-wt-br-se,
118
+ var(--_ctm-tab-dn-sl-wt-br-se, var(--_ctm-dn-sl-wt-br-se))
119
+ );
120
+ border-width: var(
121
+ --_ctm-mob-dn-sl-wt-br-wh,
122
+ var(--_ctm-tab-dn-sl-wt-br-wh, var(--_ctm-dn-sl-wt-br-wh))
123
+ );
116
124
  }
117
125
  }
118
-
119
126
  &[data-item-show-icon-color="true"] {
120
127
  .social__container {
121
128
  & svg {
@@ -127,63 +134,95 @@
127
134
  }
128
135
  }
129
136
  }
130
-
131
137
  &[data-widget-shadow="true"] {
132
138
  .social__container {
133
- box-shadow: var(--_show-shadow,
134
- var(--_ctm-mob-dn-sl-wt-sw-ae, var(--_ctm-tab-dn-sl-wt-sw-ae, var(--_ctm-dn-sl-wt-sw-ae))) var(--_ctm-mob-dn-sl-wt-sw-br,
135
- var(--_ctm-tab-dn-sl-wt-sw-br, var(--_ctm-dn-sl-wt-sw-br))) var(--_ctm-mob-dn-sl-wt-sw-sd,
136
- var(--_ctm-tab-dn-sl-wt-sw-sd, var(--_ctm-dn-sl-wt-sw-sd))) var(--_ctm-mob-dn-sl-wt-sw-cr,
137
- var(--_ctm-tab-dn-sl-wt-sw-cr, var(--_ctm-dn-sl-wt-sw-cr))));
139
+ box-shadow: var(
140
+ --_show-shadow,
141
+ var(--_ctm-mob-dn-sl-wt-sw-ae, var(--_ctm-tab-dn-sl-wt-sw-ae, var(--_ctm-dn-sl-wt-sw-ae)))
142
+ var(
143
+ --_ctm-mob-dn-sl-wt-sw-br,
144
+ var(--_ctm-tab-dn-sl-wt-sw-br, var(--_ctm-dn-sl-wt-sw-br))
145
+ )
146
+ var(
147
+ --_ctm-mob-dn-sl-wt-sw-sd,
148
+ var(--_ctm-tab-dn-sl-wt-sw-sd, var(--_ctm-dn-sl-wt-sw-sd))
149
+ )
150
+ var(
151
+ --_ctm-mob-dn-sl-wt-sw-cr,
152
+ var(--_ctm-tab-dn-sl-wt-sw-cr, var(--_ctm-dn-sl-wt-sw-cr))
153
+ )
154
+ );
138
155
  }
139
156
  }
140
-
141
157
  &[data-item-border="true"] {
142
158
  .social__item {
143
159
  padding: var(--_ctm-mob-dn-im-se-pg, var(--_ctm-tab-dn-im-se-pg, var(--_ctm-dn-im-se-pg)));
144
- border-color: var(--_ctm-mob-dn-im-se-br-cr,
145
- var(--_ctm-tab-dn-im-se-br-cr, var(--_ctm-dn-im-se-br-cr)));
146
- border-style: var(--_ctm-mob-dn-im-se-br-se,
147
- var(--_ctm-tab-dn-im-se-br-se, var(--_ctm-dn-im-se-br-se)));
148
- border-width: var(--_ctm-mob-dn-im-se-br-wh,
149
- var(--_ctm-tab-dn-im-se-br-wh, var(--_ctm-dn-im-se-br-wh)));
160
+ border-color: var(
161
+ --_ctm-mob-dn-im-se-br-cr,
162
+ var(--_ctm-tab-dn-im-se-br-cr, var(--_ctm-dn-im-se-br-cr))
163
+ );
164
+ border-style: var(
165
+ --_ctm-mob-dn-im-se-br-se,
166
+ var(--_ctm-tab-dn-im-se-br-se, var(--_ctm-dn-im-se-br-se))
167
+ );
168
+ border-width: var(
169
+ --_ctm-mob-dn-im-se-br-wh,
170
+ var(--_ctm-tab-dn-im-se-br-wh, var(--_ctm-dn-im-se-br-wh))
171
+ );
150
172
  }
151
173
  }
152
-
153
174
  &[data-item-shadow="true"] {
154
175
  .social__item {
155
- box-shadow: var(--_show-shadow,
156
- var(--_ctm-mob-dn-im-se-sw-ae, var(--_ctm-tab-dn-im-se-sw-ae, var(--_ctm-dn-im-se-sw-ae))) var(--_ctm-mob-dn-im-se-sw-br,
157
- var(--_ctm-tab-dn-im-se-sw-br, var(--_ctm-dn-im-se-sw-br))) var(--_ctm-mob-dn-im-se-sw-sd,
158
- var(--_ctm-tab-dn-im-se-sw-sd, var(--_ctm-dn-im-se-sw-sd))) var(--_ctm-mob-dn-im-se-sw-cr,
159
- var(--_ctm-tab-dn-im-se-sw-cr, var(--_ctm-dn-im-se-sw-cr))));
176
+ box-shadow: var(
177
+ --_show-shadow,
178
+ var(--_ctm-mob-dn-im-se-sw-ae, var(--_ctm-tab-dn-im-se-sw-ae, var(--_ctm-dn-im-se-sw-ae)))
179
+ var(
180
+ --_ctm-mob-dn-im-se-sw-br,
181
+ var(--_ctm-tab-dn-im-se-sw-br, var(--_ctm-dn-im-se-sw-br))
182
+ )
183
+ var(
184
+ --_ctm-mob-dn-im-se-sw-sd,
185
+ var(--_ctm-tab-dn-im-se-sw-sd, var(--_ctm-dn-im-se-sw-sd))
186
+ )
187
+ var(
188
+ --_ctm-mob-dn-im-se-sw-cr,
189
+ var(--_ctm-tab-dn-im-se-sw-cr, var(--_ctm-dn-im-se-sw-cr))
190
+ )
191
+ );
160
192
  }
161
193
  }
162
-
163
194
  .social__container {
164
195
  display: flex;
165
196
  padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
166
197
  width: 100%;
167
198
  height: 100%;
168
199
  gap: var(--_ctm-mob-lt-im-sg, var(--_ctm-tab-lt-im-sg, var(--_ctm-lt-im-sg)));
169
- background-color: var(--_ctm-mob-dn-sl-wt-bd-cr,
170
- var(--_ctm-tab-dn-sl-wt-bd-cr, var(--_ctm-dn-sl-wt-bd-cr)));
171
- border-radius: var(--_ctm-mob-dn-sl-wt-br-rs,
172
- var(--_ctm-tab-dn-sl-wt-br-rs, var(--_ctm-dn-sl-wt-br-rs)));
200
+ background-color: var(
201
+ --_ctm-mob-dn-sl-wt-bd-cr,
202
+ var(--_ctm-tab-dn-sl-wt-bd-cr, var(--_ctm-dn-sl-wt-bd-cr))
203
+ );
204
+ border-radius: var(
205
+ --_ctm-mob-dn-sl-wt-br-rs,
206
+ var(--_ctm-tab-dn-sl-wt-br-rs, var(--_ctm-dn-sl-wt-br-rs))
207
+ );
173
208
 
174
209
  svg {
175
- width: var(--_ctm-mob-dn-im-se-in-se,
176
- var(--_ctm-tab-dn-im-se-in-se, var(--_ctm-dn-im-se-in-se)));
177
- height: var(--_ctm-mob-dn-im-se-in-se,
178
- var(--_ctm-tab-dn-im-se-in-se, var(--_ctm-dn-im-se-in-se)));
210
+ width: var(
211
+ --_ctm-mob-dn-im-se-in-se,
212
+ var(--_ctm-tab-dn-im-se-in-se, var(--_ctm-dn-im-se-in-se))
213
+ );
214
+ height: var(
215
+ --_ctm-mob-dn-im-se-in-se,
216
+ var(--_ctm-tab-dn-im-se-in-se, var(--_ctm-dn-im-se-in-se))
217
+ );
179
218
 
180
219
  // path {
181
220
  // stroke: var(
182
221
  // --_ctm-mob-dn-im-se-in-c1,
183
222
  // var(--_ctm-tab-dn-im-se-in-c1, var(--_ctm-dn-im-se-in-c1))
184
223
  // );
185
- // Overrides the stroke-width presentation attribute baked into the icon markup.
186
- stroke-width: prepareMediaVariable(--_ctm-dn-im-se-se-wh, 1.25);
224
+ // Overrides the stroke-width presentation attribute baked into the icon markup.
225
+ stroke-width: prepareMediaVariable(--_ctm-dn-im-se-se-wh, 1.25);
187
226
  // }
188
227
  }
189
228
 
@@ -193,37 +232,63 @@
193
232
  flex-wrap: wrap;
194
233
  display: flex;
195
234
  gap: var(--_ctm-mob-lt-gp, var(--_ctm-tab-lt-gp, var(--_ctm-lt-gp)));
196
- background-color: var(--_ctm-mob-dn-im-se-bd-cr,
197
- var(--_ctm-tab-dn-im-se-bd-cr, var(--_ctm-dn-im-se-bd-cr)));
198
- border-radius: var(--_ctm-mob-dn-im-se-br-rs,
199
- var(--_ctm-tab-dn-im-se-br-rs, var(--_ctm-dn-im-se-br-rs)));
235
+ background-color: var(
236
+ --_ctm-mob-dn-im-se-bd-cr,
237
+ var(--_ctm-tab-dn-im-se-bd-cr, var(--_ctm-dn-im-se-bd-cr))
238
+ );
239
+ border-radius: var(
240
+ --_ctm-mob-dn-im-se-br-rs,
241
+ var(--_ctm-tab-dn-im-se-br-rs, var(--_ctm-dn-im-se-br-rs))
242
+ );
200
243
  }
201
244
 
202
245
  .social__text {
203
246
  color: var(--_ctm-mob-dn-im-se-cr, var(--_ctm-tab-dn-im-se-cr, var(--_ctm-dn-im-se-cr)));
204
- font-family: var(--_ctm-mob-dn-im-se-ft-fy,
205
- var(--_ctm-tab-dn-im-se-ft-fy, var(--_ctm-dn-im-se-ft-fy)));
206
- text-transform: var(--_ctm-mob-dn-im-se-tt-tm,
207
- var(--_ctm-tab-dn-im-se-tt-tm, var(--_ctm-dn-im-se-tt-tm)));
208
- word-wrap: var(--_ctm-mob-dn-im-se-wd-wp,
209
- var(--_ctm-tab-dn-im-se-wd-wp, var(--_ctm-dn-im-se-wd-wp)));
210
- word-break: var(--_ctm-mob-dn-im-se-wd-bk,
211
- var(--_ctm-tab-dn-im-se-wd-bk, var(--_ctm-dn-im-se-wd-bk)));
212
- font-size: var(--_ctm-mob-dn-im-se-ft-se,
213
- var(--_ctm-tab-dn-im-se-ft-se, var(--_ctm-dn-im-se-ft-se)));
214
- font-weight: var(--_ctm-mob-dn-im-se-ft-wt,
215
- var(--_ctm-tab-dn-im-se-ft-wt, var(--_ctm-dn-im-se-ft-wt)));
216
- font-style: var(--_ctm-mob-dn-im-se-ft-se-ic,
217
- var(--_ctm-tab-dn-im-se-ft-se-ic, var(--_ctm-dn-im-se-ft-se-ic)));
218
- text-align: var(--_ctm-mob-dn-im-se-tt-an,
219
- var(--_ctm-tab-dn-im-se-tt-an, var(--_ctm-dn-im-se-tt-an)));
220
- letter-spacing: var(--_ctm-mob-dn-im-se-lr-sg,
221
- var(--_ctm-tab-dn-im-se-lr-sg, var(--_ctm-dn-im-se-lr-sg)));
222
- line-height: var(--_ctm-mob-dn-im-se-le-ht,
223
- var(--_ctm-tab-dn-im-se-le-ht, var(--_ctm-dn-im-se-le-ht)));
224
- text-decoration: var(--_ctm-mob-dn-im-se-lh,
225
- var(--_ctm-tab-dn-im-se-ue, var(--_ctm-dn-im-se-lh)));
247
+ font-family: var(
248
+ --_ctm-mob-dn-im-se-ft-fy,
249
+ var(--_ctm-tab-dn-im-se-ft-fy, var(--_ctm-dn-im-se-ft-fy))
250
+ );
251
+ text-transform: var(
252
+ --_ctm-mob-dn-im-se-tt-tm,
253
+ var(--_ctm-tab-dn-im-se-tt-tm, var(--_ctm-dn-im-se-tt-tm))
254
+ );
255
+ word-wrap: var(
256
+ --_ctm-mob-dn-im-se-wd-wp,
257
+ var(--_ctm-tab-dn-im-se-wd-wp, var(--_ctm-dn-im-se-wd-wp))
258
+ );
259
+ word-break: var(
260
+ --_ctm-mob-dn-im-se-wd-bk,
261
+ var(--_ctm-tab-dn-im-se-wd-bk, var(--_ctm-dn-im-se-wd-bk))
262
+ );
263
+ font-size: var(
264
+ --_ctm-mob-dn-im-se-ft-se,
265
+ var(--_ctm-tab-dn-im-se-ft-se, var(--_ctm-dn-im-se-ft-se))
266
+ );
267
+ font-weight: var(
268
+ --_ctm-mob-dn-im-se-ft-wt,
269
+ var(--_ctm-tab-dn-im-se-ft-wt, var(--_ctm-dn-im-se-ft-wt))
270
+ );
271
+ font-style: var(
272
+ --_ctm-mob-dn-im-se-ft-se-ic,
273
+ var(--_ctm-tab-dn-im-se-ft-se-ic, var(--_ctm-dn-im-se-ft-se-ic))
274
+ );
275
+ text-align: var(
276
+ --_ctm-mob-dn-im-se-tt-an,
277
+ var(--_ctm-tab-dn-im-se-tt-an, var(--_ctm-dn-im-se-tt-an))
278
+ );
279
+ letter-spacing: var(
280
+ --_ctm-mob-dn-im-se-lr-sg,
281
+ var(--_ctm-tab-dn-im-se-lr-sg, var(--_ctm-dn-im-se-lr-sg))
282
+ );
283
+ line-height: var(
284
+ --_ctm-mob-dn-im-se-le-ht,
285
+ var(--_ctm-tab-dn-im-se-le-ht, var(--_ctm-dn-im-se-le-ht))
286
+ );
287
+ text-decoration: var(
288
+ --_ctm-mob-dn-im-se-lh,
289
+ var(--_ctm-tab-dn-im-se-ue, var(--_ctm-dn-im-se-lh))
290
+ );
226
291
  }
227
292
  }
228
293
  }
229
- }
294
+ }