@sc-360-v2/storefront-cms-library 0.4.69 → 0.4.71

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 (14) hide show
  1. package/dist/builder.js +1 -1
  2. package/dist/bundle.scss +30 -2
  3. package/dist/bundleDetails.scss +1 -1
  4. package/dist/cart-details.scss +6 -6
  5. package/dist/checkout.scss +112 -0
  6. package/dist/colorpicker_v2.scss +62 -52
  7. package/dist/embroider-template-1-v2.scss +177 -69
  8. package/dist/embroidery.scss +43 -17
  9. package/dist/filters.scss +1 -1
  10. package/dist/product-basic-elements.scss +8 -8
  11. package/dist/search.scss +7 -1
  12. package/dist/types/builder/tools/element-edit/cartSummary.d.ts +5 -0
  13. package/dist/types/builder/tools/element-edit/embroidery.d.ts +5 -0
  14. package/package.json +1 -1
package/dist/bundle.scss CHANGED
@@ -98,7 +98,17 @@ $resizeActive: '[data-cms-element-resizer="true"]';
98
98
  grid-template-columns: repeat(
99
99
  var(--_ctm-mob-lt-is-pr-se, var(--_ctm-tab-lt-is-pr-se, var(--_ctm-lt-is-pr-se))),
100
100
  calc(
101
- 100% /
101
+ (
102
+ 100% -
103
+ (
104
+ var(
105
+ --_ctm-mob-lt-is-pr-se,
106
+ var(--_ctm-tab-lt-is-pr-se, var(--_ctm-lt-is-pr-se))
107
+ ) -
108
+ 1
109
+ ) *
110
+ var(--_ctm-mob-lt-im-sg, var(--_ctm-tab-lt-im-sg, var(--_ctm-lt-im-sg)))
111
+ ) /
102
112
  var(--_ctm-mob-lt-is-pr-se, var(--_ctm-tab-lt-is-pr-se, var(--_ctm-lt-is-pr-se)))
103
113
  )
104
114
  );
@@ -151,7 +161,18 @@ $resizeActive: '[data-cms-element-resizer="true"]';
151
161
  &:not([data-display-style="Column"]) {
152
162
  .embla__container {
153
163
  grid-auto-columns: calc(
154
- 100% / var(--_ctm-mob-lt-is-pr-se, var(--_ctm-tab-lt-is-pr-se, var(--_ctm-lt-is-pr-se)))
164
+ (
165
+ 100% -
166
+ (
167
+ var(
168
+ --_ctm-mob-lt-is-pr-se,
169
+ var(--_ctm-tab-lt-is-pr-se, var(--_ctm-lt-is-pr-se))
170
+ ) -
171
+ 1
172
+ ) *
173
+ var(--_ctm-mob-lt-im-sg, var(--_ctm-tab-lt-im-sg, var(--_ctm-lt-im-sg)))
174
+ ) /
175
+ var(--_ctm-mob-lt-is-pr-se, var(--_ctm-tab-lt-is-pr-se, var(--_ctm-lt-is-pr-se)))
155
176
  );
156
177
  }
157
178
  }
@@ -2145,6 +2166,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
2145
2166
  flex-wrap: wrap;
2146
2167
  gap: var(--_ctm-lt-im-sg);
2147
2168
  width: 100%;
2169
+ height: 100%;
2148
2170
 
2149
2171
  .tiles-container {
2150
2172
  display: flex;
@@ -2152,10 +2174,12 @@ $resizeActive: '[data-cms-element-resizer="true"]';
2152
2174
  justify-content: center;
2153
2175
  gap: var(--_ctm-lt-im-sg);
2154
2176
  width: 100%;
2177
+ height: 100%;
2155
2178
 
2156
2179
  .tile {
2157
2180
  // width: 350px !important;
2158
2181
  width: 100%;
2182
+ height: 100%;
2159
2183
  overflow: hidden;
2160
2184
  padding: 16px;
2161
2185
  display: flex;
@@ -2182,6 +2206,10 @@ $resizeActive: '[data-cms-element-resizer="true"]';
2182
2206
  display: flex;
2183
2207
  align-items: flex-start;
2184
2208
  justify-content: flex-start;
2209
+ width: 100%;
2210
+ overflow: hidden;
2211
+ text-overflow: ellipsis;
2212
+ white-space: nowrap;
2185
2213
  font-family: var(--_ctm-dn-pt-ne-dn-ft-fy);
2186
2214
  font-size: var(--_ctm-dn-pt-ne-dn-ft-se);
2187
2215
  color: var(--_ctm-dn-pt-ne-dn-cr);
package/dist/bundleDetails.scss CHANGED
@@ -599,7 +599,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
599
599
  width: 100%;
600
600
  flex-direction: column;
601
601
  padding: 24px 96px;
602
- border-bottom: 1px solid #d0d5dd;
602
+ // border-bottom: 1px solid #d0d5dd;
603
603
  gap: 16px;
604
604
 
605
605
  .bundle_details_heading_text_wrapper {
package/dist/cart-details.scss CHANGED
@@ -904,7 +904,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
904
904
  background-color: var(--_primary-700);
905
905
 
906
906
  &::before {
907
- transform: translateX(24px);
907
+ transform: translateX(17px);
908
908
  }
909
909
  }
910
910
  }
@@ -950,11 +950,11 @@ $resizeActive: '[data-cms-element-resizer="true"]';
950
950
  line-height: 24px;
951
951
  }
952
952
  }
953
- // &.active {
954
- // border: 1px solid var(--_primary-500);
955
- // border-radius: 4px;
956
- // background: var(--_primary-25);
957
- // }
953
+ &.active {
954
+ border: 1px solid var(--_primary-500);
955
+ border-radius: 4px;
956
+ background: var(--_primary-25);
957
+ }
958
958
  }
959
959
  }
960
960
  .error-text {
package/dist/checkout.scss CHANGED
@@ -211,6 +211,118 @@ $dark-color: #343a40;
211
211
  }
212
212
  }
213
213
  }
214
+
215
+ .guest_address_mode_container {
216
+ display: flex;
217
+ flex-direction: column;
218
+ gap: 12px;
219
+ max-width: 500px;
220
+ width: 100%;
221
+
222
+ h2 {
223
+ margin-bottom: -6px;
224
+ font-weight: 600;
225
+ font-size: 24px;
226
+ line-height: 32px;
227
+ color: var(--_gray-900);
228
+ }
229
+
230
+ p {
231
+ font-weight: 400;
232
+ font-size: 14px;
233
+ line-height: 20px;
234
+ color: var(--_gray-600);
235
+ }
236
+
237
+ .guest_address_form_container {
238
+ .guest_address_section {
239
+ form {
240
+ display: flex;
241
+ flex-direction: column;
242
+ gap: 16px;
243
+ }
244
+
245
+ .chk_shipping_address_form_group {
246
+ display: flex;
247
+ flex-direction: row;
248
+ gap: 12px;
249
+
250
+ @media (max-width: 500px) {
251
+ flex-direction: column;
252
+ }
253
+ }
254
+
255
+ .chk_shipping_address_input_wrapper {
256
+ display: flex;
257
+ flex-direction: column;
258
+ gap: 6px;
259
+ width: 100%;
260
+ }
261
+
262
+ .chk_shipping_address_form_label {
263
+ color: var(--_gray-700);
264
+ font-weight: 500;
265
+ font-size: 14px;
266
+ }
267
+
268
+ .chk_shiping_address_form_input {
269
+ padding: 8px 12px;
270
+ width: -webkit-fill-available;
271
+ height: 40px;
272
+ background-color: var(--_base-white);
273
+ color: var(--_gray-600);
274
+ border: 1px solid var(--_gray-300);
275
+ border-radius: 6px;
276
+ font-size: 14px;
277
+
278
+ &:focus {
279
+ border: 1px solid var(--_primary-300);
280
+ outline: 2px solid var(--_primary-100);
281
+ }
282
+
283
+ // react-international-phone overrides
284
+ &.react-international-phone-input-container {
285
+ padding: 0;
286
+ display: flex;
287
+ align-items: center;
288
+
289
+ .react-international-phone-country-selector-button {
290
+ border: none;
291
+ background: transparent;
292
+ padding: 0 8px;
293
+ }
294
+
295
+ .react-international-phone-input {
296
+ border: none;
297
+ background: transparent;
298
+ height: 100%;
299
+ width: 100%;
300
+ font-size: 14px;
301
+ outline: none;
302
+ }
303
+ }
304
+ }
305
+
306
+ .error-msg {
307
+ color: #ff0000;
308
+ font-size: 12px;
309
+ }
310
+
311
+ .chk_address_actions {
312
+ display: flex;
313
+ gap: 12px;
314
+ margin-top: 8px;
315
+ align-items: center;
316
+
317
+ .chk_primary_bnt {
318
+ display: inline-flex;
319
+ align-items: center;
320
+ gap: 8px;
321
+ }
322
+ }
323
+ }
324
+ }
325
+ }
214
326
  }
215
327
 
216
328
  // accordion styles
package/dist/colorpicker_v2.scss CHANGED
@@ -1,52 +1,62 @@
1
- .colorpicker__parent__v2 {
2
- width: max-content;
3
- max-width: 225px;
4
- position: absolute;
5
- left: auto;
6
- background: #fff;
7
- border: 1px solid #d0d5dd;
8
- border-radius: 8px;
9
- padding: 12px;
10
- z-index: 99999;
11
- opacity: 0;
12
- transform: translateY(-10px) scale(0.95, 0.95);
13
- transform-origin: center;
14
- animation: pickerAnim 0.45s ease-in-out 1 forwards;
15
- // animation: name duration timing-function delay iteration-count direction fill-mode;
16
-
17
- @keyframes pickerAnim {
18
- to {
19
- transform: translateY(0) scale(1, 1);
20
- opacity: 1;
21
- }
22
- }
23
-
24
- & > div {
25
- box-shadow: none !important;
26
-
27
- label {
28
- color: #475467;
29
- font-size: 14px;
30
- font-weight: 400;
31
- line-height: 1.5;
32
- }
33
- }
34
- }
35
-
36
- .cutom__hex__v2 {
37
- padding: 0 12px !important;
38
- border-radius: 8px !important;
39
- border: 1px solid #d0d5dd !important;
40
- background: #fff !important;
41
- box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05) !important;
42
- width: 100%;
43
- font-size: 16px !important;
44
- line-height: 24px !important;
45
- padding-block: 8px !important;
46
- }
47
-
48
- .custom__div__v2 {
49
- display: grid;
50
- grid-template-columns: repeat(4, 1fr);
51
- gap: 8px;
52
- }
1
+ @use "sass:map";
2
+ @use "sass:list";
3
+
4
+ $mainWrapper: ".emb__main__wrapper";
5
+ $v1Child: "#{$mainWrapper}.v1 *";
6
+ $v2Child: "#{$mainWrapper}.v2 *";
7
+ .colorpicker__parent__v2 {
8
+ width: max-content;
9
+ max-width: 225px;
10
+ position: var(--_sf-bm-pnshl-dorp, absolute);
11
+ left: auto;
12
+ background: #fff;
13
+ border: 1px solid #d0d5dd;
14
+ border-radius: 8px;
15
+ padding: 12px;
16
+ z-index: 99999;
17
+ opacity: 0;
18
+ transform: translateY(-10px) scale(0.95, 0.95);
19
+ transform-origin: center;
20
+ animation: pickerAnim 0.45s ease-in-out 1 forwards;
21
+
22
+ &:is(#{$v1Child}) {
23
+ --_sf-bm-pnshl-dorp: fixed;
24
+ }
25
+ // animation: name duration timing-function delay iteration-count direction fill-mode;
26
+
27
+ @keyframes pickerAnim {
28
+ to {
29
+ transform: translateY(0) scale(1, 1);
30
+ opacity: 1;
31
+ }
32
+ }
33
+
34
+ & > div {
35
+ box-shadow: none !important;
36
+
37
+ label {
38
+ color: #475467;
39
+ font-size: 14px;
40
+ font-weight: 400;
41
+ line-height: 1.5;
42
+ }
43
+ }
44
+ }
45
+
46
+ .cutom__hex__v2 {
47
+ padding: 0 12px !important;
48
+ border-radius: 8px !important;
49
+ border: 1px solid #d0d5dd !important;
50
+ background: #fff !important;
51
+ box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05) !important;
52
+ width: 100%;
53
+ font-size: 16px !important;
54
+ line-height: 24px !important;
55
+ padding-block: 8px !important;
56
+ }
57
+
58
+ .custom__div__v2 {
59
+ display: grid;
60
+ grid-template-columns: repeat(4, 1fr);
61
+ gap: 8px;
62
+ }