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

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 (135) 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/image-temp.scss +20 -21
  52. package/dist/item-stock.scss +16 -9
  53. package/dist/kitDetails.scss +4301 -2721
  54. package/dist/kits.scss +19 -24
  55. package/dist/language-selector.scss +361 -211
  56. package/dist/last-x-orders.scss +174 -95
  57. package/dist/layouter-item.scss +103 -75
  58. package/dist/layouter-pro-item.scss +95 -89
  59. package/dist/layouter-pro.scss +92 -87
  60. package/dist/layouter.scss +445 -383
  61. package/dist/light-box-v2.scss +104 -89
  62. package/dist/login.scss +566 -287
  63. package/dist/map.scss +368 -221
  64. package/dist/marchandiserSets.scss +104 -95
  65. package/dist/mega-menu-container.scss +109 -96
  66. package/dist/mega-menu.scss +731 -624
  67. package/dist/menu-item.scss +2 -2
  68. package/dist/menu-v2.scss +619 -507
  69. package/dist/multi-select-dropdown.scss +3 -27
  70. package/dist/my-templates.scss +9 -38
  71. package/dist/option-bar.scss +375 -215
  72. package/dist/option-families.scss +252 -0
  73. package/dist/order-status.scss +1117 -646
  74. package/dist/overflow-module.scss +7 -6
  75. package/dist/past-orders.scss +149 -118
  76. package/dist/payment-methods.scss +30 -46
  77. package/dist/pickup-locations.scss +1118 -558
  78. package/dist/position-module.scss +17 -20
  79. package/dist/prefix-list.scss +10 -21
  80. package/dist/product-actions.scss +2316 -1610
  81. package/dist/product-basic-elements.scss +169 -108
  82. package/dist/product-highlights.scss +152 -107
  83. package/dist/product-image-bundles.scss +642 -337
  84. package/dist/product-inventory.scss +1357 -673
  85. package/dist/product-labels.scss +105 -84
  86. package/dist/product-options.scss +1274 -1117
  87. package/dist/product-price.scss +2561 -1283
  88. package/dist/product-promotions.scss +2830 -1388
  89. package/dist/product-sizechart.scss +905 -516
  90. package/dist/product.scss +61 -28
  91. package/dist/productDetails.scss +39 -19
  92. package/dist/profile.scss +447 -207
  93. package/dist/quantity-selector.scss +550 -313
  94. package/dist/quick-inventory-check.scss +174 -95
  95. package/dist/quick-links.scss +133 -55
  96. package/dist/quick-order-pad.scss +271 -218
  97. package/dist/quota-details.scss +282 -152
  98. package/dist/quotes.scss +122 -89
  99. package/dist/repeater-embla-controls.scss +15 -35
  100. package/dist/repeater-grid-toggle.scss +166 -156
  101. package/dist/repeater-item.scss +64 -41
  102. package/dist/repeater.scss +814 -671
  103. package/dist/request-for-quotes.scss +16 -66
  104. package/dist/responsive-behaviour.scss +1 -3
  105. package/dist/rfqs.scss +181 -118
  106. package/dist/scroll.scss +172 -93
  107. package/dist/search.scss +326 -179
  108. package/dist/section.scss +51 -27
  109. package/dist/shipping-payments.scss +58 -198
  110. package/dist/simple-list.scss +164 -74
  111. package/dist/social.scss +145 -80
  112. package/dist/sort.scss +19 -11
  113. package/dist/stack.scss +34 -23
  114. package/dist/static-global.scss +26 -44
  115. package/dist/stockStatus.scss +19 -11
  116. package/dist/store-locations.scss +1105 -577
  117. package/dist/tab-container.scss +108 -81
  118. package/dist/table-common.scss +408 -217
  119. package/dist/table.scss +502 -271
  120. package/dist/text-temp.scss +7 -8
  121. package/dist/theme-classes.scss +13 -17
  122. package/dist/types/builder/enums/data-connectors.d.ts +3 -1
  123. package/dist/types/builder/enums/index.d.ts +3 -1
  124. package/dist/types/builder/tools/element-edit/index.d.ts +2 -1
  125. package/dist/types/builder/tools/element-edit/optionFamilies.d.ts +20 -0
  126. package/dist/types/website/constants/data-connector-souces.d.ts +40 -8
  127. package/dist/types/website/constants/data-connectors.d.ts +12 -1
  128. package/dist/types/website/helper/ssr-functions.d.ts +8 -0
  129. package/dist/uom-selector.scss +949 -489
  130. package/dist/user-elements.scss +837 -529
  131. package/dist/variant-picker.scss +2555 -1281
  132. package/dist/volume-pricing.scss +1037 -541
  133. package/dist/website.js +1 -1
  134. package/dist/widget.scss +1 -0
  135. package/package.json +1 -1
package/dist/last-x-orders.scss CHANGED
@@ -11,12 +11,22 @@
11
11
  // width: var(--_ctm-lt-wh, var(--_tst-lt-wh));
12
12
  // width: 50%;
13
13
  // width: var(--_sf-nw-wh, var(--_tst-lt-wh));
14
- width: var(--_sf-el-wh-st-mx,
15
- calc(1% * var(--_ctm-mob-ele-nw-wh-vl, var(--_ctm-tab-ele-nw-wh-vl, var(--_ctm-ele-nw-wh-vl)))));
14
+ width: var(
15
+ --_sf-el-wh-st-mx,
16
+ calc(
17
+ 1% * var(--_ctm-mob-ele-nw-wh-vl, var(--_ctm-tab-ele-nw-wh-vl, var(--_ctm-ele-nw-wh-vl)))
18
+ )
19
+ );
16
20
  margin: var(--_ctm-mob-lt-mn, var(--_ctm-tab-lt-mn, var(--_ctm-lt-mn)));
17
21
  // aspect-ratio: 1 / var(--_sf-aspect-ratio);
18
22
 
19
- --_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
+ );
20
30
  // height: clamp(var(--_ctm-lt-ht, 50px), 100px, auto) !important;
21
31
  // height: var(--_ctm-lt-ht);
22
32
  // height: ;
@@ -31,37 +41,53 @@
31
41
  // width: var(--_sf-el-wh-st-mx, calc(1% * var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh))));
32
42
  // }
33
43
 
34
- &>.wrapper {
44
+ & > .wrapper {
35
45
  width: 100%;
36
46
  height: 100%;
37
47
  }
38
-
39
48
  &[data-show-shadow="false"] {
40
49
  --_show-shadow: none;
41
50
  }
42
51
 
43
52
  .LastXOrders__details__element {
44
- background-color: var(--_ctm-mob-dn-wt-se-bd-cr,
45
- var(--_ctm-tab-dn-wt-se-bd-cr, var(--_ctm-dn-wt-se-bd-cr)));
53
+ background-color: var(
54
+ --_ctm-mob-dn-wt-se-bd-cr,
55
+ var(--_ctm-tab-dn-wt-se-bd-cr, var(--_ctm-dn-wt-se-bd-cr))
56
+ );
46
57
  padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
47
58
  display: flex;
48
59
  flex-direction: column;
49
- --_sf-gp: var(--_ctm-mob-lt-im-sg,
50
- var(--_ctm-tab-lt-im-sg, var(--_ctm-lt-im-sg, var(--_ctm-lt-im-sg), 16px)));
60
+ --_sf-gp: var(
61
+ --_ctm-mob-lt-im-sg,
62
+ var(--_ctm-tab-lt-im-sg, var(--_ctm-lt-im-sg, var(--_ctm-lt-im-sg), 16px))
63
+ );
51
64
  --_sf-cd-gp: calc(var(--_sf-gp) * 0.5);
52
65
  row-gap: var(--_sf-gp);
53
66
  width: 100%;
54
67
  height: 100%;
55
- border-color: var(--_ctm-mob-dn-wt-se-br-cr,
56
- var(--_ctm-tab-dn-wt-se-br-cr, var(--_ctm-dn-wt-se-br-cr)));
57
- border-style: var(--_ctm-mob-dn-wt-se-br-se,
58
- var(--_ctm-tab-dn-wt-se-br-se, var(--_ctm-dn-wt-se-br-se)));
59
- border-width: var(--_ctm-mob-dn-wt-se-br-wh,
60
- var(--_ctm-tab-dn-wt-se-br-wh, var(--_ctm-dn-wt-se-br-wh)));
61
- border-radius: var(--_ctm-mob-dn-wt-se-br-rs,
62
- var(--_ctm-tab-dn-wt-se-br-rs, var(--_ctm-dn-wt-se-br-rs)));
63
- box-shadow: var(--_show-shadow,
64
- var(--_ctm-mob-dn-wt-se-sw-ae, var(--_ctm-tab-dn-wt-se-sw-ae, var(--_ctm-dn-wt-se-sw-ae))) var(--_ctm-mob-dn-wt-se-sw-br, var(--_ctm-tab-dn-wt-se-sw-br, var(--_ctm-dn-wt-se-sw-br))) var(--_ctm-mob-dn-wt-se-sw-sd, var(--_ctm-tab-dn-wt-se-sw-sd, var(--_ctm-dn-wt-se-sw-sd))) var(--_ctm-mob-dn-wt-se-sw-cr, var(--_ctm-tab-dn-wt-se-sw-cr, var(--_ctm-dn-wt-se-sw-cr))));
68
+ border-color: var(
69
+ --_ctm-mob-dn-wt-se-br-cr,
70
+ var(--_ctm-tab-dn-wt-se-br-cr, var(--_ctm-dn-wt-se-br-cr))
71
+ );
72
+ border-style: var(
73
+ --_ctm-mob-dn-wt-se-br-se,
74
+ var(--_ctm-tab-dn-wt-se-br-se, var(--_ctm-dn-wt-se-br-se))
75
+ );
76
+ border-width: var(
77
+ --_ctm-mob-dn-wt-se-br-wh,
78
+ var(--_ctm-tab-dn-wt-se-br-wh, var(--_ctm-dn-wt-se-br-wh))
79
+ );
80
+ border-radius: var(
81
+ --_ctm-mob-dn-wt-se-br-rs,
82
+ var(--_ctm-tab-dn-wt-se-br-rs, var(--_ctm-dn-wt-se-br-rs))
83
+ );
84
+ box-shadow: var(
85
+ --_show-shadow,
86
+ var(--_ctm-mob-dn-wt-se-sw-ae, var(--_ctm-tab-dn-wt-se-sw-ae, var(--_ctm-dn-wt-se-sw-ae)))
87
+ var(--_ctm-mob-dn-wt-se-sw-br, var(--_ctm-tab-dn-wt-se-sw-br, var(--_ctm-dn-wt-se-sw-br)))
88
+ var(--_ctm-mob-dn-wt-se-sw-sd, var(--_ctm-tab-dn-wt-se-sw-sd, var(--_ctm-dn-wt-se-sw-sd)))
89
+ var(--_ctm-mob-dn-wt-se-sw-cr, var(--_ctm-tab-dn-wt-se-sw-cr, var(--_ctm-dn-wt-se-sw-cr)))
90
+ );
65
91
 
66
92
  .product__hilights {
67
93
  display: flex;
@@ -75,26 +101,27 @@
75
101
  &[data-show-dividers="true"] {
76
102
  .product__list__item {
77
103
  position: relative;
78
-
79
104
  // The divider is a pseudo-element and takes no space of its own, so a thick
80
105
  // one grew back over the item beside it — see dividerGapReserve in functions.scss.
81
106
  &:not(:last-child) {
82
107
  @include dividerGapReserve(--_ctm-dn-dr-dr-wh, right);
83
108
  }
84
-
85
109
  &:not(:last-child)::after {
86
110
  content: "";
87
- width: var(--_ctm-mob-dn-dr-dr-wh,
88
- var(--_ctm-tab-dn-dr-dr-wh, var(--_ctm-dn-dr-dr-wh)));
111
+ width: var(
112
+ --_ctm-mob-dn-dr-dr-wh,
113
+ var(--_ctm-tab-dn-dr-dr-wh, var(--_ctm-dn-dr-dr-wh))
114
+ );
89
115
  height: 100%;
90
116
  position: absolute;
91
117
  right: dividerGapOffset(--_ctm-lt-im-sg, --_ctm-dn-dr-dr-wh);
92
- background-color: var(--_ctm-mob-dn-dr-dr-cr,
93
- var(--_ctm-tab-dn-dr-dr-cr, var(--_ctm-dn-dr-dr-cr)));
118
+ background-color: var(
119
+ --_ctm-mob-dn-dr-dr-cr,
120
+ var(--_ctm-tab-dn-dr-dr-cr, var(--_ctm-dn-dr-dr-cr))
121
+ );
94
122
  }
95
123
  }
96
124
  }
97
-
98
125
  .product__list__item {
99
126
  display: flex;
100
127
  align-items: center;
@@ -104,96 +131,148 @@
104
131
  display: flex;
105
132
  }
106
133
  }
107
-
108
134
  .quota__left {
109
135
  .count {
110
136
  // padding-inline: var(--_sf-cd-gp);
111
- color: var(--_ctm-mob-dn-qa-lt-cr,
112
- var(--_ctm-tab-dn-qa-lt-cr, var(--_ctm-dn-qa-lt-cr)));
113
- font-family: var(--_ctm-mob-dn-qa-lt-ft-fy,
114
- var(--_ctm-tab-dn-qa-lt-ft-fy, var(--_ctm-dn-qa-lt-ft-fy)));
115
- text-transform: var(--_ctm-mob-dn-qa-lt-tt-tm,
116
- var(--_ctm-tab-dn-qa-lt-tt-tm, var(--_ctm-dn-qa-lt-tt-tm)));
117
- word-wrap: var(--_ctm-mob-dn-qa-lt-wd-wp,
118
- var(--_ctm-tab-dn-qa-lt-wd-wp, var(--_ctm-dn-qa-lt-wd-wp)));
119
- word-break: var(--_ctm-mob-dn-qa-lt-wd-bk,
120
- var(--_ctm-tab-dn-qa-lt-wd-bk, var(--_ctm-dn-qa-lt-wd-bk)));
121
- font-size: var(--_ctm-mob-dn-qa-lt-ft-se,
122
- var(--_ctm-tab-dn-qa-lt-ft-se, var(--_ctm-dn-qa-lt-ft-se)));
123
- font-weight: var(--_ctm-mob-dn-qa-lt-ft-wt,
124
- var(--_ctm-tab-dn-qa-lt-ft-wt, var(--_ctm-dn-qa-lt-ft-wt)));
125
- font-style: var(--_ctm-mob-dn-qa-lt-ft-se-ic,
126
- var(--_ctm-tab-dn-qa-lt-ft-se-ic, var(--_ctm-dn-qa-lt-ft-se-ic)));
127
- text-align: var(--_ctm-mob-dn-qa-lt-tt-an,
128
- var(--_ctm-tab-dn-qa-lt-tt-an, var(--_ctm-dn-qa-lt-tt-an)));
129
- letter-spacing: var(--_ctm-mob-dn-qa-lt-lr-sg,
130
- var(--_ctm-tab-dn-qa-lt-lr-sg, var(--_ctm-dn-qa-lt-lr-sg)));
131
- line-height: var(--_ctm-mob-dn-qa-lt-le-ht,
132
- var(--_ctm-tab-dn-qa-lt-le-ht, var(--_ctm-dn-qa-lt-le-ht-dc)));
133
- text-decoration: var(--_ctm-mob-dn-qa-lt-ue,
134
- var(--_ctm-tab-dn-qa-lt-ue, var(--_ctm-dn-qa-lt-ue)));
137
+ color: var(
138
+ --_ctm-mob-dn-qa-lt-cr,
139
+ var(--_ctm-tab-dn-qa-lt-cr, var(--_ctm-dn-qa-lt-cr))
140
+ );
141
+ font-family: var(
142
+ --_ctm-mob-dn-qa-lt-ft-fy,
143
+ var(--_ctm-tab-dn-qa-lt-ft-fy, var(--_ctm-dn-qa-lt-ft-fy))
144
+ );
145
+ text-transform: var(
146
+ --_ctm-mob-dn-qa-lt-tt-tm,
147
+ var(--_ctm-tab-dn-qa-lt-tt-tm, var(--_ctm-dn-qa-lt-tt-tm))
148
+ );
149
+ word-wrap: var(
150
+ --_ctm-mob-dn-qa-lt-wd-wp,
151
+ var(--_ctm-tab-dn-qa-lt-wd-wp, var(--_ctm-dn-qa-lt-wd-wp))
152
+ );
153
+ word-break: var(
154
+ --_ctm-mob-dn-qa-lt-wd-bk,
155
+ var(--_ctm-tab-dn-qa-lt-wd-bk, var(--_ctm-dn-qa-lt-wd-bk))
156
+ );
157
+ font-size: var(
158
+ --_ctm-mob-dn-qa-lt-ft-se,
159
+ var(--_ctm-tab-dn-qa-lt-ft-se, var(--_ctm-dn-qa-lt-ft-se))
160
+ );
161
+ font-weight: var(
162
+ --_ctm-mob-dn-qa-lt-ft-wt,
163
+ var(--_ctm-tab-dn-qa-lt-ft-wt, var(--_ctm-dn-qa-lt-ft-wt))
164
+ );
165
+ font-style: var(
166
+ --_ctm-mob-dn-qa-lt-ft-se-ic,
167
+ var(--_ctm-tab-dn-qa-lt-ft-se-ic, var(--_ctm-dn-qa-lt-ft-se-ic))
168
+ );
169
+ text-align: var(
170
+ --_ctm-mob-dn-qa-lt-tt-an,
171
+ var(--_ctm-tab-dn-qa-lt-tt-an, var(--_ctm-dn-qa-lt-tt-an))
172
+ );
173
+ letter-spacing: var(
174
+ --_ctm-mob-dn-qa-lt-lr-sg,
175
+ var(--_ctm-tab-dn-qa-lt-lr-sg, var(--_ctm-dn-qa-lt-lr-sg))
176
+ );
177
+ line-height: var(
178
+ --_ctm-mob-dn-qa-lt-le-ht,
179
+ var(--_ctm-tab-dn-qa-lt-le-ht, var(--_ctm-dn-qa-lt-le-ht-dc))
180
+ );
181
+ text-decoration: var(
182
+ --_ctm-mob-dn-qa-lt-ue,
183
+ var(--_ctm-tab-dn-qa-lt-ue, var(--_ctm-dn-qa-lt-ue))
184
+ );
135
185
  }
136
-
137
186
  .icon {
138
187
  display: var(--_sf-show-icon-ff, flex);
139
-
140
188
  svg {
141
- width: var(--_ctm-mab-dn-qa-lt-in-se,
142
- var(--_ctm-tab-dn-qa-lt-in-se, var(--_ctm-dn-qa-lt-in-se)));
143
- height: var(--_ctm-mob-dn-qa-lt-in-se,
144
- var(--_ctm-tab-dn-qa-lt-in-se, var(--_ctm-dn-qa-lt-in-se)));
145
-
189
+ width: var(
190
+ --_ctm-mab-dn-qa-lt-in-se,
191
+ var(--_ctm-tab-dn-qa-lt-in-se, var(--_ctm-dn-qa-lt-in-se))
192
+ );
193
+ height: var(
194
+ --_ctm-mob-dn-qa-lt-in-se,
195
+ var(--_ctm-tab-dn-qa-lt-in-se, var(--_ctm-dn-qa-lt-in-se))
196
+ );
146
197
  path {
147
- stroke: var(--_ctm-mob-dn-qa-lt-in-c1,
148
- var(--_ctm-tab-dn-qa-lt-in-c1, var(--_ctm-dn-qa-lt-in-c1)));
198
+ stroke: var(
199
+ --_ctm-mob-dn-qa-lt-in-c1,
200
+ var(--_ctm-tab-dn-qa-lt-in-c1, var(--_ctm-dn-qa-lt-in-c1))
201
+ );
149
202
  // Overrides the stroke-width presentation attribute baked into the icon markup.
150
203
  stroke-width: prepareMediaVariable(--_ctm-dn-qa-lt-se-wh, 1.25);
151
204
  }
152
205
  }
153
206
  }
154
207
  }
155
-
156
208
  .days__left {
157
209
  .count {
158
210
  // padding-inline: var(--_sf-cd-gp);
159
- color: var(--_ctm-mob-dn-ds-lt-cr,
160
- var(--_ctm-tab-dn-ds-lt-cr, var(--_ctm-dn-ds-lt-cr)));
161
- font-family: var(--_ctm-mob-dn-ds-lt-ft-fy,
162
- var(--_ctm-tab-dn-ds-lt-ft-fy, var(--_ctm-dn-ds-lt-ft-fy)));
163
- text-transform: var(--_ctm-mob-dn-ds-lt-tt-tm,
164
- var(--_ctm-tab-dn-ds-lt-tt-tm, var(--_ctm-dn-ds-lt-tt-tm)));
165
- word-wrap: var(--_ctm-mob-dn-ds-lt-wd-wp,
166
- var(--_ctm-tab-dn-ds-lt-wd-wp, var(--_ctm-dn-ds-lt-wd-wp)));
167
- word-break: var(--_ctm-mob-dn-ds-lt-wd-bk,
168
- var(--_ctm-tab-dn-ds-lt-wd-bk, var(--_ctm-dn-ds-lt-wd-bk)));
169
- font-size: var(--_ctm-mob-dn-ds-lt-ft-se,
170
- var(--_ctm-tab-dn-ds-lt-ft-se, var(--_ctm-dn-ds-lt-ft-se)));
171
- font-weight: var(--_ctm-mob-dn-ds-lt-ft-wt,
172
- var(--_ctm-tab-dn-ds-lt-ft-wt, var(--_ctm-dn-ds-lt-ft-wt)));
173
- font-style: var(--_ctm-mob-dn-ds-lt-ft-se-ic,
174
- var(--_ctm-tab-dn-ds-lt-ft-se-ic, var(--_ctm-dn-ds-lt-ft-se-ic)));
175
- text-align: var(--_ctm-mob-dn-ds-lt-tt-an,
176
- var(--_ctm-tab-dn-ds-lt-tt-an, var(--_ctm-dn-ds-lt-tt-an)));
177
- letter-spacing: var(--_ctm-mob-dn-ds-lt-lr-sg,
178
- var(--_ctm-tab-dn-ds-lt-lr-sg, var(--_ctm-dn-ds-lt-lr-sg)));
179
- line-height: var(--_ctm-mob-dn-ds-lt-le-ht,
180
- var(--_ctm-tab-dn-ds-lt-le-ht, var(--_ctm-dn-ds-lt-le-ht-dc)));
181
- text-decoration: var(--_ctm-mob-dn-ds-lt-ue,
182
- var(--_ctm-tab-dn-ds-lt-ue, var(--_ctm-dn-ds-lt-ue)));
211
+ color: var(
212
+ --_ctm-mob-dn-ds-lt-cr,
213
+ var(--_ctm-tab-dn-ds-lt-cr, var(--_ctm-dn-ds-lt-cr))
214
+ );
215
+ font-family: var(
216
+ --_ctm-mob-dn-ds-lt-ft-fy,
217
+ var(--_ctm-tab-dn-ds-lt-ft-fy, var(--_ctm-dn-ds-lt-ft-fy))
218
+ );
219
+ text-transform: var(
220
+ --_ctm-mob-dn-ds-lt-tt-tm,
221
+ var(--_ctm-tab-dn-ds-lt-tt-tm, var(--_ctm-dn-ds-lt-tt-tm))
222
+ );
223
+ word-wrap: var(
224
+ --_ctm-mob-dn-ds-lt-wd-wp,
225
+ var(--_ctm-tab-dn-ds-lt-wd-wp, var(--_ctm-dn-ds-lt-wd-wp))
226
+ );
227
+ word-break: var(
228
+ --_ctm-mob-dn-ds-lt-wd-bk,
229
+ var(--_ctm-tab-dn-ds-lt-wd-bk, var(--_ctm-dn-ds-lt-wd-bk))
230
+ );
231
+ font-size: var(
232
+ --_ctm-mob-dn-ds-lt-ft-se,
233
+ var(--_ctm-tab-dn-ds-lt-ft-se, var(--_ctm-dn-ds-lt-ft-se))
234
+ );
235
+ font-weight: var(
236
+ --_ctm-mob-dn-ds-lt-ft-wt,
237
+ var(--_ctm-tab-dn-ds-lt-ft-wt, var(--_ctm-dn-ds-lt-ft-wt))
238
+ );
239
+ font-style: var(
240
+ --_ctm-mob-dn-ds-lt-ft-se-ic,
241
+ var(--_ctm-tab-dn-ds-lt-ft-se-ic, var(--_ctm-dn-ds-lt-ft-se-ic))
242
+ );
243
+ text-align: var(
244
+ --_ctm-mob-dn-ds-lt-tt-an,
245
+ var(--_ctm-tab-dn-ds-lt-tt-an, var(--_ctm-dn-ds-lt-tt-an))
246
+ );
247
+ letter-spacing: var(
248
+ --_ctm-mob-dn-ds-lt-lr-sg,
249
+ var(--_ctm-tab-dn-ds-lt-lr-sg, var(--_ctm-dn-ds-lt-lr-sg))
250
+ );
251
+ line-height: var(
252
+ --_ctm-mob-dn-ds-lt-le-ht,
253
+ var(--_ctm-tab-dn-ds-lt-le-ht, var(--_ctm-dn-ds-lt-le-ht-dc))
254
+ );
255
+ text-decoration: var(
256
+ --_ctm-mob-dn-ds-lt-ue,
257
+ var(--_ctm-tab-dn-ds-lt-ue, var(--_ctm-dn-ds-lt-ue))
258
+ );
183
259
  }
184
-
185
260
  .icon {
186
261
  display: var(--_sf-show-icon-ff, flex);
187
-
188
262
  svg {
189
- width: var(--_ctm-mab-dn-ds-lt-in-se,
190
- var(--_ctm-tab-dn-ds-lt-in-se, var(--_ctm-dn-ds-lt-in-se)));
191
- height: var(--_ctm-mob-dn-ds-lt-in-se,
192
- var(--_ctm-tab-dn-ds-lt-in-se, var(--_ctm-dn-ds-lt-in-se)));
193
-
263
+ width: var(
264
+ --_ctm-mab-dn-ds-lt-in-se,
265
+ var(--_ctm-tab-dn-ds-lt-in-se, var(--_ctm-dn-ds-lt-in-se))
266
+ );
267
+ height: var(
268
+ --_ctm-mob-dn-ds-lt-in-se,
269
+ var(--_ctm-tab-dn-ds-lt-in-se, var(--_ctm-dn-ds-lt-in-se))
270
+ );
194
271
  path {
195
- stroke: var(--_ctm-mob-dn-ds-lt-in-c1,
196
- var(--_ctm-tab-dn-ds-lt-in-c1, var(--_ctm-dn-ds-lt-in-c1)));
272
+ stroke: var(
273
+ --_ctm-mob-dn-ds-lt-in-c1,
274
+ var(--_ctm-tab-dn-ds-lt-in-c1, var(--_ctm-dn-ds-lt-in-c1))
275
+ );
197
276
  // Overrides the stroke-width presentation attribute baked into the icon markup.
198
277
  stroke-width: prepareMediaVariable(--_ctm-dn-ds-lt-se-wh, 1.25);
199
278
  }
@@ -203,4 +282,4 @@
203
282
  }
204
283
  }
205
284
  }
206
- }
285
+ }
package/dist/layouter-item.scss CHANGED
@@ -16,7 +16,7 @@
16
16
  height: 100% !important;
17
17
  min-height: prepareMediaVariable(--_ctm-layo-lt-mn-ht, 100px) !important;
18
18
 
19
- &>div {
19
+ & > div {
20
20
  &.wrapper {
21
21
  width: 100%;
22
22
  height: 100%;
@@ -30,84 +30,112 @@
30
30
  &:is([data-background-type="gradient"] > *).wrapper {
31
31
  --_sf-layo-gradient-angle: calc(#{prepareMediaVariable(--_ctm-layo-dn-gt-ae, 90)} * 1deg);
32
32
  --_sf-layo-gradient-start-color: #{prepareMediaVariable(
33
- --_ctm-layo-dn-gt-st-cr,
34
- transparent)
33
+ --_ctm-layo-dn-gt-st-cr,
34
+ transparent
35
+ )};
36
+ --_sf-layo-gradient-start-position: calc(
37
+ #{prepareMediaVariable(--_ctm-layo-dn-gt-st-pn, 0)} * 1%
38
+ );
39
+ --_sf-layo-gradient-end-color: #{prepareMediaVariable(
40
+ --_ctm-layo-dn-gt-ed-cr,
41
+ transparent
42
+ )};
43
+ --_sf-layo-gradient-end-position: calc(
44
+ #{prepareMediaVariable(--_ctm-layo-dn-gt-ed-pn, 100)} * 1%
45
+ );
46
+ --_sf-layo-gradient-position: #{prepareMediaVariable(--_ctm-layo-dn-gt-pn, center)};
35
47
  }
36
48
 
37
- ;
38
- --_sf-layo-gradient-start-position: calc(#{prepareMediaVariable(--_ctm-layo-dn-gt-st-pn, 0)} * 1%);
39
- --_sf-layo-gradient-end-color: #{prepareMediaVariable(
40
- --_ctm-layo-dn-gt-ed-cr,
41
- transparent)
42
- }
43
-
44
- ;
45
- --_sf-layo-gradient-end-position: calc(#{prepareMediaVariable(--_ctm-layo-dn-gt-ed-pn, 100)} * 1%);
46
- --_sf-layo-gradient-position: #{prepareMediaVariable(--_ctm-layo-dn-gt-pn, center)};
47
- }
48
-
49
- &:is([data-gradient-type="Linear Gradient"] > *).wrapper {
50
- background-image: linear-gradient(var(--_sf-layo-gradient-angle),
51
- var(--_sf-layo-gradient-start-color) var(--_sf-layo-gradient-start-position),
52
- var(--_sf-layo-gradient-end-color) var(--_sf-layo-gradient-end-position));
53
- }
49
+ &:is([data-gradient-type="Linear Gradient"] > *).wrapper {
50
+ background-image: linear-gradient(
51
+ var(--_sf-layo-gradient-angle),
52
+ var(--_sf-layo-gradient-start-color) var(--_sf-layo-gradient-start-position),
53
+ var(--_sf-layo-gradient-end-color) var(--_sf-layo-gradient-end-position)
54
+ );
55
+ }
54
56
 
55
- &:is([data-gradient-type="Radial Gradient"] > *).wrapper {
56
- background-image: radial-gradient(circle at var(--_sf-layo-gradient-position),
57
- var(--_sf-layo-gradient-start-color) var(--_sf-layo-gradient-start-position),
58
- var(--_sf-layo-gradient-end-color) var(--_sf-layo-gradient-end-position));
59
- }
57
+ &:is([data-gradient-type="Radial Gradient"] > *).wrapper {
58
+ background-image: radial-gradient(
59
+ circle at var(--_sf-layo-gradient-position),
60
+ var(--_sf-layo-gradient-start-color) var(--_sf-layo-gradient-start-position),
61
+ var(--_sf-layo-gradient-end-color) var(--_sf-layo-gradient-end-position)
62
+ );
63
+ }
64
+ &:is([data-background-type="image"] > *).wrapper {
65
+ background-image: prepareMediaVariable(--_ctm-layo-dn-bd-ie);
66
+ background-attachment: prepareMediaVariable(--_ctm-layo-dn-bd-at);
67
+ background-position: prepareMediaVariable(--_ctm-layo-dn-bd-pn);
68
+ background-position-y: prepareMediaVariable(--_ctm-layo-dn-bd-pn-y);
69
+ background-repeat: prepareMediaVariable(--_ctm-layo-dn-bd-rt);
70
+ background-size: prepareMediaVariable(--_ctm-layo-dn-bd-se);
71
+ }
60
72
 
61
- &:is([data-background-type="image"] > *).wrapper {
62
- background-image: prepareMediaVariable(--_ctm-layo-dn-bd-ie);
63
- background-attachment: prepareMediaVariable(--_ctm-layo-dn-bd-at);
64
- background-position: prepareMediaVariable(--_ctm-layo-dn-bd-pn);
65
- background-position-y: prepareMediaVariable(--_ctm-layo-dn-bd-pn-y);
66
- background-repeat: prepareMediaVariable(--_ctm-layo-dn-bd-rt);
67
- background-size: prepareMediaVariable(--_ctm-layo-dn-bd-se);
73
+ // background-color: var(
74
+ // --_ctm-mob-layo-dn-bd-cr,
75
+ // var(--_ctm-tab-layo-dn-bd-cr, var(--_ctm-layo-dn-bd-cr))
76
+ // );
77
+ // background-image: var(
78
+ // --_ctm-mob-layo-dn-bd-ie,
79
+ // var(--_ctm-tab-layo-dn-bd-ie, var(--_ctm-layo-dn-bd-ie))
80
+ // );
81
+ // background-attachment: var(
82
+ // --_ctm-mob-layo-dn-bd-at,
83
+ // var(--_ctm-tab-layo-dn-bd-at, var(--_ctm-layo-dn-bd-at))
84
+ // );
85
+ // background-position: var(
86
+ // --_ctm-mob-layo-dn-bd-pn,
87
+ // var(--_ctm-tab-layo-dn-bd-pn, var(--_ctm-layo-dn-bd-pn))
88
+ // );
89
+ // background-repeat: var(
90
+ // --_ctm-mob-layo-dn-bd-rt,
91
+ // var(--_ctm-tab-layo-dn-bd-rt, var(--_ctm-layo-dn-bd-rt))
92
+ // );
93
+ // background-size: var(
94
+ // --_ctm-mob-layo-dn-bd-se,
95
+ // var(--_ctm-tab-layo-dn-bd-se, var(--_ctm-layo-dn-bd-se))
96
+ // );
97
+ border-radius: var(
98
+ --_ctm-mob-layo-dn-br-rs,
99
+ var(--_ctm-tab-layo-dn-br-rs, var(--_ctm-layo-dn-br-rs))
100
+ );
101
+ border-color: var(
102
+ --_ctm-mob-layo-dn-br-cr,
103
+ var(--_ctm-tab-layo-dn-br-cr, var(--_ctm-layo-dn-br-cr))
104
+ );
105
+ border-style: var(
106
+ --_ctm-mob-layo-dn-br-se,
107
+ var(--_ctm-tab-layo-dn-br-se, var(--_ctm-layo-dn-br-se))
108
+ );
109
+ border-width: var(
110
+ --_ctm-mob-layo-dn-br-wh,
111
+ var(--_ctm-tab-layo-dn-br-wh, var(--_ctm-layo-dn-br-wh))
112
+ );
113
+ box-shadow: var(
114
+ --_hover-show-shadow,
115
+ var(
116
+ --_sf-hr-bx-sw,
117
+ var(
118
+ --_show-shadow,
119
+ var(
120
+ --_ctm-mob-layo-dn-sw-ae,
121
+ var(--_ctm-tab-layo-dn-sw-ae, var(--_ctm-layo-dn-sw-ae))
122
+ )
123
+ var(
124
+ --_ctm-mob-layo-dn-sw-br,
125
+ var(--_ctm-tab-layo-dn-sw-br, var(--_ctm-layo-dn-sw-br))
126
+ )
127
+ var(
128
+ --_ctm-mob-layo-dn-sw-sd,
129
+ var(--_ctm-tab-layo-dn-sw-sd, var(--_ctm-layo-dn-sw-sd))
130
+ )
131
+ var(
132
+ --_ctm-mob-layo-dn-sw-cr,
133
+ var(--_ctm-tab-layo-dn-sw-cr, var(--_ctm-layo-dn-sw-cr))
134
+ )
135
+ )
136
+ )
137
+ );
138
+ }
68
139
  }
69
-
70
- // background-color: var(
71
- // --_ctm-mob-layo-dn-bd-cr,
72
- // var(--_ctm-tab-layo-dn-bd-cr, var(--_ctm-layo-dn-bd-cr))
73
- // );
74
- // background-image: var(
75
- // --_ctm-mob-layo-dn-bd-ie,
76
- // var(--_ctm-tab-layo-dn-bd-ie, var(--_ctm-layo-dn-bd-ie))
77
- // );
78
- // background-attachment: var(
79
- // --_ctm-mob-layo-dn-bd-at,
80
- // var(--_ctm-tab-layo-dn-bd-at, var(--_ctm-layo-dn-bd-at))
81
- // );
82
- // background-position: var(
83
- // --_ctm-mob-layo-dn-bd-pn,
84
- // var(--_ctm-tab-layo-dn-bd-pn, var(--_ctm-layo-dn-bd-pn))
85
- // );
86
- // background-repeat: var(
87
- // --_ctm-mob-layo-dn-bd-rt,
88
- // var(--_ctm-tab-layo-dn-bd-rt, var(--_ctm-layo-dn-bd-rt))
89
- // );
90
- // background-size: var(
91
- // --_ctm-mob-layo-dn-bd-se,
92
- // var(--_ctm-tab-layo-dn-bd-se, var(--_ctm-layo-dn-bd-se))
93
- // );
94
- border-radius: var(--_ctm-mob-layo-dn-br-rs,
95
- var(--_ctm-tab-layo-dn-br-rs, var(--_ctm-layo-dn-br-rs)));
96
- border-color: var(--_ctm-mob-layo-dn-br-cr,
97
- var(--_ctm-tab-layo-dn-br-cr, var(--_ctm-layo-dn-br-cr)));
98
- border-style: var(--_ctm-mob-layo-dn-br-se,
99
- var(--_ctm-tab-layo-dn-br-se, var(--_ctm-layo-dn-br-se)));
100
- border-width: var(--_ctm-mob-layo-dn-br-wh,
101
- var(--_ctm-tab-layo-dn-br-wh, var(--_ctm-layo-dn-br-wh)));
102
- box-shadow: var(--_hover-show-shadow,
103
- var(--_sf-hr-bx-sw,
104
- var(--_show-shadow,
105
- var(--_ctm-mob-layo-dn-sw-ae,
106
- var(--_ctm-tab-layo-dn-sw-ae, var(--_ctm-layo-dn-sw-ae))) var(--_ctm-mob-layo-dn-sw-br,
107
- var(--_ctm-tab-layo-dn-sw-br, var(--_ctm-layo-dn-sw-br))) var(--_ctm-mob-layo-dn-sw-sd,
108
- var(--_ctm-tab-layo-dn-sw-sd, var(--_ctm-layo-dn-sw-sd))) var(--_ctm-mob-layo-dn-sw-cr,
109
- var(--_ctm-tab-layo-dn-sw-cr, var(--_ctm-layo-dn-sw-cr))))));
110
140
  }
111
141
  }
112
- }
113
- }