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

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 (124) hide show
  1. package/dist/add-existing-form.scss +13 -5
  2. package/dist/add-order.scss +126 -236
  3. package/dist/add-products-tab-details.scss +1048 -2097
  4. package/dist/add-products-tab.scss +666 -1204
  5. package/dist/allocation-header-quota-details.scss +189 -407
  6. package/dist/allocationDetails.scss +1661 -2143
  7. package/dist/allocations-quota-details.scss +159 -323
  8. package/dist/allocations.scss +475 -793
  9. package/dist/amount-estimator.scss +405 -743
  10. package/dist/badge.scss +43 -18
  11. package/dist/brand-basic-elements.scss +76 -124
  12. package/dist/brand.scss +28 -55
  13. package/dist/breadcrumbs.scss +356 -718
  14. package/dist/builder.js +1 -1
  15. package/dist/bulk-variant-picker.scss +1128 -2027
  16. package/dist/bundle.scss +841 -1477
  17. package/dist/bundleDetails.scss +3774 -5072
  18. package/dist/button.scss +79 -103
  19. package/dist/buy-for-tab-container.scss +77 -106
  20. package/dist/buyForHeaders.scss +1722 -2976
  21. package/dist/cart-details.scss +481 -1012
  22. package/dist/cart-summary.scss +557 -1149
  23. package/dist/cart-wrapper.scss +37 -79
  24. package/dist/cart.scss +117 -225
  25. package/dist/cartAttributes.scss +416 -735
  26. package/dist/category-groups-element.scss +127 -108
  27. package/dist/category-groups-product-grid.scss +120 -147
  28. package/dist/category-groups-product-image.scss +1162 -1457
  29. package/dist/category-groups-product-options.scss +613 -680
  30. package/dist/category-groups-product-price.scss +1966 -3244
  31. package/dist/category-groups-quota-details.scss +210 -464
  32. package/dist/category.scss +26 -50
  33. package/dist/checkout.scss +24 -16
  34. package/dist/confirm-modal.scss +22 -2
  35. package/dist/container.scss +32 -54
  36. package/dist/countdown.scss +255 -443
  37. package/dist/coupon.scss +351 -710
  38. package/dist/default-dropdown.scss +12 -1
  39. package/dist/embroider-template-1-v2.scss +123 -172
  40. package/dist/embroider-template-1.scss +68 -104
  41. package/dist/embroidery.scss +30 -31
  42. package/dist/employee-bulk-order.scss +418 -142
  43. package/dist/faq.scss +228 -408
  44. package/dist/filter-results.scss +125 -265
  45. package/dist/filters.scss +900 -1797
  46. package/dist/gallery-slider-temp.scss +432 -750
  47. package/dist/global-styles.scss +218 -198
  48. package/dist/grid.scss +25 -33
  49. package/dist/hotspot.scss +68 -115
  50. package/dist/image-temp.scss +21 -20
  51. package/dist/item-stock.scss +9 -16
  52. package/dist/kitDetails.scss +2719 -4299
  53. package/dist/kits.scss +24 -19
  54. package/dist/language-selector.scss +211 -361
  55. package/dist/last-x-orders.scss +95 -174
  56. package/dist/layouter-item.scss +75 -103
  57. package/dist/layouter-pro-item.scss +89 -95
  58. package/dist/layouter-pro.scss +87 -92
  59. package/dist/layouter.scss +383 -445
  60. package/dist/light-box-v2.scss +89 -104
  61. package/dist/login.scss +287 -566
  62. package/dist/map.scss +221 -368
  63. package/dist/marchandiserSets.scss +95 -104
  64. package/dist/mega-menu-container.scss +96 -109
  65. package/dist/mega-menu.scss +624 -731
  66. package/dist/menu-item.scss +2 -2
  67. package/dist/menu-v2.scss +507 -619
  68. package/dist/multi-select-dropdown.scss +27 -3
  69. package/dist/my-templates.scss +38 -9
  70. package/dist/option-bar.scss +215 -375
  71. package/dist/order-status.scss +646 -1117
  72. package/dist/overflow-module.scss +6 -7
  73. package/dist/past-orders.scss +118 -149
  74. package/dist/payment-methods.scss +46 -30
  75. package/dist/pickup-locations.scss +558 -1118
  76. package/dist/position-module.scss +20 -17
  77. package/dist/prefix-list.scss +21 -10
  78. package/dist/product-actions.scss +1750 -2055
  79. package/dist/product-basic-elements.scss +108 -169
  80. package/dist/product-highlights.scss +107 -152
  81. package/dist/product-image-bundles.scss +337 -642
  82. package/dist/product-inventory.scss +673 -1357
  83. package/dist/product-labels.scss +84 -105
  84. package/dist/product-options.scss +1117 -1274
  85. package/dist/product-price.scss +1283 -2561
  86. package/dist/product-promotions.scss +1388 -2830
  87. package/dist/product-sizechart.scss +516 -905
  88. package/dist/product.scss +28 -61
  89. package/dist/productDetails.scss +19 -39
  90. package/dist/profile.scss +207 -447
  91. package/dist/quantity-selector.scss +837 -1074
  92. package/dist/quick-inventory-check.scss +95 -174
  93. package/dist/quick-links.scss +55 -133
  94. package/dist/quick-order-pad.scss +218 -271
  95. package/dist/quota-details.scss +152 -282
  96. package/dist/quotes.scss +89 -122
  97. package/dist/repeater-embla-controls.scss +35 -15
  98. package/dist/repeater-grid-toggle.scss +156 -166
  99. package/dist/repeater-item.scss +41 -64
  100. package/dist/repeater.scss +671 -814
  101. package/dist/request-for-quotes.scss +66 -16
  102. package/dist/responsive-behaviour.scss +3 -1
  103. package/dist/rfqs.scss +118 -181
  104. package/dist/scroll.scss +93 -172
  105. package/dist/search.scss +179 -326
  106. package/dist/section.scss +27 -51
  107. package/dist/shipping-payments.scss +198 -58
  108. package/dist/simple-list.scss +74 -164
  109. package/dist/social.scss +80 -145
  110. package/dist/sort.scss +11 -19
  111. package/dist/stack.scss +23 -34
  112. package/dist/static-global.scss +44 -26
  113. package/dist/stockStatus.scss +11 -19
  114. package/dist/store-locations.scss +577 -1105
  115. package/dist/tab-container.scss +81 -108
  116. package/dist/table-common.scss +217 -408
  117. package/dist/table.scss +271 -502
  118. package/dist/text-temp.scss +8 -7
  119. package/dist/theme-classes.scss +17 -13
  120. package/dist/uom-selector.scss +489 -949
  121. package/dist/user-elements.scss +529 -837
  122. package/dist/variant-picker.scss +1281 -2555
  123. package/dist/volume-pricing.scss +541 -1037
  124. package/package.json +1 -1
@@ -4,35 +4,36 @@
4
4
 
5
5
  [data-div-type="element"] {
6
6
  &[data-element-type="productLabels"] {
7
- width: var(
8
- --_sf-el-wh-st-mx,
9
- calc(
10
- 1% * var(--_ctm-mob-ele-nw-wh-vl, var(--_ctm-tab-ele-nw-wh-vl, var(--_ctm-ele-nw-wh-vl)))
11
- )
12
- );
7
+ width: var(--_sf-el-wh-st-mx,
8
+ calc(1% * var(--_ctm-mob-ele-nw-wh-vl, var(--_ctm-tab-ele-nw-wh-vl, var(--_ctm-ele-nw-wh-vl)))));
13
9
  margin: var(--_ctm-mob-lt-mn, var(--_ctm-tab-lt-mn, var(--_ctm-lt-mn)));
14
10
 
15
- & > .wrapper {
11
+ &>.wrapper {
16
12
  width: 100%;
17
13
  }
14
+
18
15
  &[data-show-shadow="false"] {
19
16
  --_show-shadow: none;
20
17
  }
18
+
21
19
  &[data-overflow-items="Scroll"] {
22
20
  .horizontal {
23
21
  width: 100%;
24
22
  overflow-x: auto;
23
+
25
24
  // Keep label chips at their natural (admin-styled) width; only prevent
26
25
  // them from squishing in a horizontal scroll row.
27
26
  .item {
28
27
  flex-shrink: 0;
29
28
  }
30
29
  }
30
+
31
31
  .vertical {
32
32
  overflow-y: auto;
33
33
  max-height: 30%;
34
34
  }
35
35
  }
36
+
36
37
  .text-element {
37
38
  color: #333;
38
39
  font-size: 12px;
@@ -41,41 +42,28 @@
41
42
  line-height: 18px;
42
43
  margin-bottom: 6px;
43
44
  }
45
+
44
46
  .labels__container {
45
- background-color: var(
46
- --_ctm-mob-dn-wt-se-bd-cr,
47
- var(--_ctm-tab-dn-wt-se-bd-cr, var(--_ctm-dn-wt-se-bd-cr))
48
- );
49
-
50
- border-color: var(
51
- --_ctm-mob-dn-wt-se-br-cr,
52
- var(--_ctm-tab-dn-wt-se-br-cr, var(--_ctm-dn-wt-se-br-cr))
53
- );
54
-
55
- border-style: var(
56
- --_ctm-mob-dn-wt-se-br-se,
57
- var(--_ctm-tab-dn-wt-se-br-se, var(--_ctm-dn-wt-se-br-se))
58
- );
59
-
60
- border-width: var(
61
- --_ctm-mob-dn-wt-se-br-wh,
62
- var(--_ctm-tab-dn-wt-se-br-wh, var(--_ctm-dn-wt-se-br-wh))
63
- );
64
-
65
- border-radius: var(
66
- --_ctm-mob-dn-wt-se-br-rs,
67
- var(--_ctm-tab-dn-wt-se-br-rs, var(--_ctm-dn-wt-se-br-rs))
68
- );
69
-
70
- box-shadow: var(
71
- --_show-shadow,
72
- var(--_ctm-mob-dn-wt-se-sw-ae, var(--_ctm-tab-dn-wt-se-sw-ae, var(--_ctm-dn-wt-se-sw-ae)))
73
- var(--_ctm-mob-dn-wt-se-sw-br, var(--_ctm-tab-dn-wt-se-sw-br, var(--_ctm-dn-wt-se-sw-br)))
74
- var(--_ctm-mob-dn-wt-se-sw-sd, var(--_ctm-tab-dn-wt-se-sw-sd, var(--_ctm-dn-wt-se-sw-sd)))
75
- var(--_ctm-mob-dn-wt-se-sw-cr, var(--_ctm-tab-dn-wt-se-sw-cr, var(--_ctm-dn-wt-se-sw-cr)))
76
- );
47
+ background-color: var(--_ctm-mob-dn-wt-se-bd-cr,
48
+ var(--_ctm-tab-dn-wt-se-bd-cr, var(--_ctm-dn-wt-se-bd-cr)));
49
+
50
+ border-color: var(--_ctm-mob-dn-wt-se-br-cr,
51
+ var(--_ctm-tab-dn-wt-se-br-cr, var(--_ctm-dn-wt-se-br-cr)));
52
+
53
+ border-style: var(--_ctm-mob-dn-wt-se-br-se,
54
+ var(--_ctm-tab-dn-wt-se-br-se, var(--_ctm-dn-wt-se-br-se)));
55
+
56
+ border-width: var(--_ctm-mob-dn-wt-se-br-wh,
57
+ var(--_ctm-tab-dn-wt-se-br-wh, var(--_ctm-dn-wt-se-br-wh)));
58
+
59
+ border-radius: var(--_ctm-mob-dn-wt-se-br-rs,
60
+ var(--_ctm-tab-dn-wt-se-br-rs, var(--_ctm-dn-wt-se-br-rs)));
61
+
62
+ box-shadow: var(--_show-shadow,
63
+ 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))));
77
64
 
78
65
  padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
66
+
79
67
  .stack {
80
68
  display: flex;
81
69
  flex-direction: column;
@@ -89,48 +77,48 @@
89
77
  position: relative;
90
78
  display: inline-flex;
91
79
  }
80
+
92
81
  .items__container {
93
82
  &[data-show-divider="true"] {
94
83
  &[data-flex-direction="row"] {
84
+
95
85
  // The divider is a pseudo-element and takes no space of its own, so a thick
96
86
  // one grew back over the label beside it — see dividerGapReserve in functions.scss.
97
87
  .item:not(:last-child) {
98
88
  @include dividerGapReserve(--_ctm-dn-wt-se-dr-wt, right);
99
89
  }
90
+
100
91
  .item:not(:last-child)::before {
101
92
  content: "";
102
93
  position: absolute;
103
94
  top: 0;
104
- bottom: 0; /* For full height divider */
95
+ bottom: 0;
96
+ /* For full height divider */
105
97
  right: dividerGapOffset(--_ctm-lt-im-sg, --_ctm-dn-wt-se-dr-wt);
106
- width: var(
107
- --_ctm-mob-dn-wt-se-dr-wt,
108
- var(--_ctm-tab-dn-wt-se-dr-wt, var(--_ctm-dn-wt-se-dr-wt))
109
- ); /* Divider thickness */
110
- background-color: var(
111
- --_ctm-mob-dn-wt-se-dr-cr,
112
- var(--_ctm-tab-dn-wt-se-dr-cr, var(--_ctm-dn-wt-se-dr-cr))
113
- ); /* Divider color */
98
+ width: var(--_ctm-mob-dn-wt-se-dr-wt,
99
+ var(--_ctm-tab-dn-wt-se-dr-wt, var(--_ctm-dn-wt-se-dr-wt)));
100
+ /* Divider thickness */
101
+ background-color: var(--_ctm-mob-dn-wt-se-dr-cr,
102
+ var(--_ctm-tab-dn-wt-se-dr-cr, var(--_ctm-dn-wt-se-dr-cr)));
103
+ /* Divider color */
114
104
  }
115
105
  }
106
+
116
107
  &[data-flex-direction="column"] {
117
108
  .item:not(:last-child) {
118
109
  @include dividerGapReserve(--_ctm-dn-wt-se-dr-wt);
119
110
  }
111
+
120
112
  .item:not(:last-child)::before {
121
113
  content: "";
122
114
  position: absolute;
123
115
  left: 0;
124
116
  right: 0;
125
117
  bottom: dividerGapOffset(--_ctm-lt-im-sg, --_ctm-dn-wt-se-dr-wt);
126
- height: var(
127
- --_ctm-mob-dn-wt-se-dr-wt,
128
- var(--_ctm-tab-dn-wt-se-dr-wt, var(--_ctm-dn-wt-se-dr-wt))
129
- );
130
- background-color: var(
131
- --_ctm-mob-dn-wt-se-dr-cr,
132
- var(--_ctm-tab-dn-wt-se-dr-cr, var(--_ctm-dn-wt-se-dr-cr))
133
- );
118
+ height: var(--_ctm-mob-dn-wt-se-dr-wt,
119
+ var(--_ctm-tab-dn-wt-se-dr-wt, var(--_ctm-dn-wt-se-dr-wt)));
120
+ background-color: var(--_ctm-mob-dn-wt-se-dr-cr,
121
+ var(--_ctm-tab-dn-wt-se-dr-cr, var(--_ctm-dn-wt-se-dr-cr)));
134
122
  }
135
123
  }
136
124
  }
@@ -139,55 +127,35 @@
139
127
  .title {
140
128
  white-space: nowrap;
141
129
  color: var(--_ctm-mob-dn-wt-se-cr, var(--_ctm-tab-dn-wt-se-cr, var(--_ctm-dn-wt-se-cr)));
142
- font-family: var(
143
- --_ctm-mob-dn-wt-se-ft-fy,
144
- var(--_ctm-tab-dn-wt-se-ft-fy, var(--_ctm-dn-wt-se-ft-fy))
145
- );
146
- text-transform: var(
147
- --_ctm-mob-dn-wt-se-tt-tm,
148
- var(--_ctm-tab-dn-wt-se-tt-tm, var(--_ctm-dn-wt-se-tt-tm))
149
- );
150
- word-wrap: var(
151
- --_ctm-mob-dn-wt-se-wd-wp,
152
- var(--_ctm-tab-dn-wt-se-wd-wp, var(--_ctm-dn-wt-se-wd-wp))
153
- );
154
- word-break: var(
155
- --_ctm-mob-dn-wt-se-wd-bk,
156
- var(--_ctm-tab-dn-wt-se-wd-bk, var(--_ctm-dn-wt-se-wd-bk))
157
- );
158
- font-size: var(
159
- --_ctm-mob-dn-wt-se-ft-se,
160
- var(--_ctm-tab-dn-wt-se-ft-se, var(--_ctm-dn-wt-se-ft-se))
161
- );
162
- font-weight: var(
163
- --_ctm-mob-dn-wt-se-ft-wt,
164
- var(--_ctm-tab-dn-wt-se-ft-wt, var(--_ctm-dn-wt-se-ft-wt))
165
- );
166
- font-style: var(
167
- --_ctm-mob-dn-wt-se-ft-se-ic,
168
- var(--_ctm-tab-dn-wt-se-ft-se-ic, var(--_ctm-dn-wt-se-ft-se-ic))
169
- );
170
- text-align: var(
171
- --_ctm-mob-dn-wt-se-tt-an,
172
- var(--_ctm-tab-dn-wt-se-tt-an, var(--_ctm-dn-wt-se-tt-an))
173
- );
174
- letter-spacing: var(
175
- --_ctm-mob-dn-wt-se-lr-sg,
176
- var(--_ctm-tab-dn-wt-se-lr-sg, var(--_ctm-dn-wt-se-lr-sg))
177
- );
178
- line-height: var(
179
- --_ctm-mob-dn-wt-se-le-ht,
180
- var(--_ctm-tab-dn-wt-se-le-ht, var(--_ctm-dn-wt-se-le-ht))
181
- );
182
- text-decoration: var(
183
- --_ctm-mob-dn-wt-se-ue,
184
- var(--_ctm-tab-dn-wt-se-ue, var(--_ctm-dn-wt-se-ue))
185
- );
130
+ font-family: var(--_ctm-mob-dn-wt-se-ft-fy,
131
+ var(--_ctm-tab-dn-wt-se-ft-fy, var(--_ctm-dn-wt-se-ft-fy)));
132
+ text-transform: var(--_ctm-mob-dn-wt-se-tt-tm,
133
+ var(--_ctm-tab-dn-wt-se-tt-tm, var(--_ctm-dn-wt-se-tt-tm)));
134
+ word-wrap: var(--_ctm-mob-dn-wt-se-wd-wp,
135
+ var(--_ctm-tab-dn-wt-se-wd-wp, var(--_ctm-dn-wt-se-wd-wp)));
136
+ word-break: var(--_ctm-mob-dn-wt-se-wd-bk,
137
+ var(--_ctm-tab-dn-wt-se-wd-bk, var(--_ctm-dn-wt-se-wd-bk)));
138
+ font-size: var(--_ctm-mob-dn-wt-se-ft-se,
139
+ var(--_ctm-tab-dn-wt-se-ft-se, var(--_ctm-dn-wt-se-ft-se)));
140
+ font-weight: var(--_ctm-mob-dn-wt-se-ft-wt,
141
+ var(--_ctm-tab-dn-wt-se-ft-wt, var(--_ctm-dn-wt-se-ft-wt)));
142
+ font-style: var(--_ctm-mob-dn-wt-se-ft-se-ic,
143
+ var(--_ctm-tab-dn-wt-se-ft-se-ic, var(--_ctm-dn-wt-se-ft-se-ic)));
144
+ text-align: var(--_ctm-mob-dn-wt-se-tt-an,
145
+ var(--_ctm-tab-dn-wt-se-tt-an, var(--_ctm-dn-wt-se-tt-an)));
146
+ letter-spacing: var(--_ctm-mob-dn-wt-se-lr-sg,
147
+ var(--_ctm-tab-dn-wt-se-lr-sg, var(--_ctm-dn-wt-se-lr-sg)));
148
+ line-height: var(--_ctm-mob-dn-wt-se-le-ht,
149
+ var(--_ctm-tab-dn-wt-se-le-ht, var(--_ctm-dn-wt-se-le-ht)));
150
+ text-decoration: var(--_ctm-mob-dn-wt-se-ue,
151
+ var(--_ctm-tab-dn-wt-se-ue, var(--_ctm-dn-wt-se-ue)));
186
152
  padding: prepareMediaVariable(--_ctm-dn-wt-se-pg);
187
153
  }
154
+
188
155
  .horizontal {
189
156
  display: flex;
190
157
  gap: var(--_ctm-mob-lt-im-sg, var(--_ctm-tab-lt-im-sg, var(--_ctm-lt-im-sg, 10px)));
158
+
191
159
  .item {
192
160
  flex-shrink: 0;
193
161
  }
@@ -195,10 +163,12 @@
195
163
  &[data-overflow-items="Wrap"] {
196
164
  flex-wrap: wrap;
197
165
  }
166
+
198
167
  &[data-overflow-items="Scroll"] {
199
168
  width: 100%;
200
169
  overflow-x: auto;
201
170
  }
171
+
202
172
  &[data-overflow-items="Hidden"] {
203
173
  overflow-x: hidden;
204
174
  }
@@ -206,13 +176,16 @@
206
176
  &[items-content-alignement="right"] {
207
177
  justify-content: flex-end;
208
178
  }
179
+
209
180
  &[items-content-alignement="left"] {
210
181
  justify-content: flex-start;
211
182
  }
183
+
212
184
  &[items-content-alignement="center"] {
213
185
  justify-content: center;
214
186
  }
215
187
  }
188
+
216
189
  .vertical {
217
190
  display: flex;
218
191
  flex-direction: column;
@@ -222,6 +195,7 @@
222
195
  &[data-overflow-items="Scroll"] {
223
196
  overflow-y: auto;
224
197
  }
198
+
225
199
  &[data-overflow-items="Hidden"] {
226
200
  overflow-y: hidden;
227
201
  }
@@ -229,32 +203,37 @@
229
203
  &[items-content-alignement="right"] {
230
204
  align-items: flex-end;
231
205
  }
206
+
232
207
  &[items-content-alignement="left"] {
233
208
  align-items: flex-start;
234
209
  }
210
+
235
211
  &[items-content-alignement="center"] {
236
212
  align-items: center;
237
213
  }
238
214
  }
215
+
239
216
  .grid {
240
217
  display: grid;
241
218
  grid-template-columns: repeat(var(--_ctm-lt-is-pr-rw), minmax(auto, 1fr));
242
- grid-template-columns: repeat(
243
- var(--_ctm-mob-lt-is-pr-rw, var(--_ctm-tab-lt-is-pr-rw, var(--_ctm-lt-is-pr-rw))),
244
- minmax(auto, 1fr)
245
- );
219
+ grid-template-columns: repeat(var(--_ctm-mob-lt-is-pr-rw, var(--_ctm-tab-lt-is-pr-rw, var(--_ctm-lt-is-pr-rw))),
220
+ minmax(auto, 1fr));
246
221
  // Keep admin-styled chips at their natural size instead of stretching
247
222
  // them to fill the grid cell.
248
223
  justify-items: start;
249
224
  gap: var(--_ctm-mob-lt-im-sg, var(--_ctm-tab-lt-im-sg, var(--_ctm-lt-im-sg, 10px)));
250
225
  max-height: prepareMediaVariable(--_ctm-lt-mx-cr-ht);
226
+
251
227
  &[data-overflow-items="Scroll"] {
252
228
  overflow-y: auto;
253
229
  }
230
+
254
231
  &[data-overflow-items="Hidden"] {
255
232
  overflow-y: hidden;
256
233
  }
234
+
257
235
  margin: 0px;
236
+
258
237
  .item {
259
238
  width: auto;
260
239
  }
@@ -262,4 +241,4 @@
262
241
  }
263
242
  }
264
243
  }
265
- }
244
+ }