@sc-360-v2/storefront-cms-library 0.3.32 → 0.3.33

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.
@@ -117,39 +117,48 @@
117
117
  var(--_ctm-tab-dn-dn-hr-ft-fy, var(--_ctm-dn-dn-hr-ft-fy))
118
118
  ),
119
119
  sans-serif;
120
- font-size: var(
121
- --_ctm-mob-dn-dn-hr-ft-se,
122
- var(--_ctm-tab-dn-dn-hr-ft-se, var(--_ctm-dn-dn-hr-ft-se))
123
- );
124
- font-weight: var(
125
- --_ctm-mob-dn-dn-hr-ft-wt,
126
- var(--_ctm-tab-dn-dn-hr-ft-wt, var(--_ctm-dn-dn-hr-ft-wt))
127
- );
128
- font-style: var(
129
- --_ctm-mob-dn-dn-hr-ft-se-ic,
130
- var(--_ctm-tab-dn-dn-hr-ft-se-ic, var(--_ctm-dn-dn-hr-ft-se-ic))
131
- );
132
- text-align: var(
133
- --_ctm-mob-dn-dn-hr-tt-an,
134
- var(--_ctm-tab-dn-dn-hr-tt-an, var(--_ctm-dn-dn-hr-tt-an))
135
- );
136
- letter-spacing: var(
137
- --_ctm-mob-dn-dn-hr-lr-sg,
138
- var(--_ctm-tab-dn-dn-hr-lr-sg, var(--_ctm-dn-dn-hr-lr-sg))
139
- );
140
- line-height: var(
141
- --_ctm-mob-dn-dn-hr-le-ht,
142
- var(--_ctm-tab-dn-dn-hr-le-ht, var(--_ctm-dn-dn-hr-le-ht-dc))
143
- );
144
- text-decoration: var(
145
- --_ctm-mob-dn-dn-hr-ue,
146
- var(--_ctm-tab-dn-dn-hr-ue, var(--_ctm-dn-dn-hr-ue))
147
- );
120
+ font-size: 20px;
121
+ font-weight: 700;
122
+ line-height: 30px;
123
+ color: var(--_gray-900);
124
+ // font-size: var(
125
+ // --_ctm-mob-dn-dn-hr-ft-se,
126
+ // var(--_ctm-tab-dn-dn-hr-ft-se, var(--_ctm-dn-dn-hr-ft-se))
127
+ // );
128
+ // font-weight: var(
129
+ // --_ctm-mob-dn-dn-hr-ft-wt,
130
+ // var(--_ctm-tab-dn-dn-hr-ft-wt, var(--_ctm-dn-dn-hr-ft-wt))
131
+ // );
132
+ // font-style: var(
133
+ // --_ctm-mob-dn-dn-hr-ft-se-ic,
134
+ // var(--_ctm-tab-dn-dn-hr-ft-se-ic, var(--_ctm-dn-dn-hr-ft-se-ic))
135
+ // );
136
+ // text-align: var(
137
+ // --_ctm-mob-dn-dn-hr-tt-an,
138
+ // var(--_ctm-tab-dn-dn-hr-tt-an, var(--_ctm-dn-dn-hr-tt-an))
139
+ // );
140
+ // letter-spacing: var(
141
+ // --_ctm-mob-dn-dn-hr-lr-sg,
142
+ // var(--_ctm-tab-dn-dn-hr-lr-sg, var(--_ctm-dn-dn-hr-lr-sg))
143
+ // );
144
+ // line-height: var(
145
+ // --_ctm-mob-dn-dn-hr-le-ht,
146
+ // var(--_ctm-tab-dn-dn-hr-le-ht, var(--_ctm-dn-dn-hr-le-ht-dc))
147
+ // );
148
+ // text-decoration: var(
149
+ // --_ctm-mob-dn-dn-hr-ue,
150
+ // var(--_ctm-tab-dn-dn-hr-ue, var(--_ctm-dn-dn-hr-ue))
151
+ // );
152
+ span {
153
+ margin-left: 10px;
154
+ }
148
155
  }
149
156
 
150
157
  .user-meta {
151
- font-size: 0.85rem;
152
- color: #6b7280;
158
+ font-size: 12px;
159
+ font-weight: 400;
160
+ color: var(--_gray-600);
161
+ line-height: 18px;
153
162
  margin: 4px 0 0;
154
163
  }
155
164
  }
@@ -212,6 +221,12 @@
212
221
  }
213
222
 
214
223
  .success-text {
224
+ font-size: 24px;
225
+ font-weight: 600;
226
+ color: var(--_gray-900);
227
+ .icon {
228
+ margin-right: 6px;
229
+ }
215
230
  h2 {
216
231
  margin: 0 0 4px;
217
232
  font-size: var(--_ctm-dn-dn-tt-ft-se);
@@ -226,6 +241,7 @@
226
241
  color: var(--_ctm-dn-dn-tt-cr-dc);
227
242
  font-weight: var(--_ctm-dn-dn-tt-ft-wt-dc);
228
243
  font-family: var(--_ctm-dn-dn-tt-ft-fy-dc);
244
+ padding-top: 6px;
229
245
  }
230
246
  }
231
247
  }
@@ -242,20 +258,19 @@
242
258
  .order-info-section,
243
259
  .quick-actions-section {
244
260
  h4 {
245
- font-size: 0.9rem;
261
+ font-size: 14px;
246
262
  font-weight: 600;
247
- color: #374151;
248
- padding: 10px;
249
- border-radius: 8px;
250
- margin-bottom: 12px;
251
- border: 1px solid #e0e0e0;
263
+ color: var(--_gray-600);
264
+ padding: 12px 16px;
265
+ border-radius: 6px;
266
+ margin-bottom: 16px;
267
+ border: 1px solid #eaecf0;
252
268
  }
253
269
  }
254
270
 
255
271
  .order-info {
256
272
  display: flex;
257
273
  flex-direction: column;
258
- gap: 16px;
259
274
  /* space between the two rows */
260
275
  background-color: var(
261
276
  --_ctm-mob-dn-dn-ds-bd-cr,
@@ -307,29 +322,45 @@
307
322
  /* First row: two equal columns + bottom border */
308
323
  &:first-child {
309
324
  grid-template-columns: repeat(2, 1fr);
310
- border-bottom: 1px solid #f0f0f0;
311
- padding-bottom: 12px;
325
+ border-bottom: 1px dashed var(--_gray-400);
326
+ padding-bottom: 24px;
312
327
  }
313
328
 
314
329
  /* Second row: three equal columns */
315
330
  &:nth-child(2) {
316
331
  grid-template-columns: repeat(3, 1fr);
332
+ margin-top: 24px;
317
333
  }
318
334
 
319
335
  /* Each individual info‐cell styling */
320
336
  > div {
321
337
  strong {
322
338
  display: block;
323
- font-size: 0.8rem;
324
- color: #6b7280;
339
+ font-size: 14px;
340
+ color: var(--_gray-500);
341
+ line-height: 20px;
325
342
  margin-bottom: 4px;
326
- font-weight: 600;
343
+ font-weight: 400;
327
344
  }
328
345
 
329
346
  p {
330
347
  margin: 0;
331
- font-size: 0.85rem;
332
- color: #1e293b;
348
+ font-size: 20px;
349
+ font-weight: 700;
350
+ color: var(--_gray-900);
351
+ line-height: 30px;
352
+ }
353
+ .delivery_address {
354
+ font-size: 14px;
355
+ font-weight: 400;
356
+ color: var(--_gray-400);
357
+ line-height: 20px;
358
+ }
359
+ .shipping-type {
360
+ font-size: 14px;
361
+ font-weight: 400;
362
+ color: var(--_gray-900);
363
+ line-height: 20px;
333
364
  }
334
365
 
335
366
  .status {
@@ -350,9 +381,10 @@
350
381
  }
351
382
 
352
383
  .order-date {
353
- margin-top: 2px;
354
- font-size: 0.75rem;
355
- color: #6b7280;
384
+ font-size: 14px;
385
+ font-weight: 400;
386
+ color: var(--_gray-400);
387
+ line-height: 20px;
356
388
  }
357
389
 
358
390
  .inclusive-tax {
@@ -402,11 +434,10 @@
402
434
 
403
435
  .action-button {
404
436
  padding: 8px;
405
- font-size: 0.85rem;
406
-
437
+ font-size: 14px;
407
438
  border-radius: 4px;
408
439
  background: none;
409
- color: #3b82f6;
440
+ color: #243dc6;
410
441
  cursor: pointer;
411
442
  text-align: start;
412
443
 
@@ -476,7 +507,7 @@
476
507
  .items-grid {
477
508
  display: grid;
478
509
  grid-template-columns: repeat(3, 1fr);
479
- gap: 12px;
510
+ gap: 24px;
480
511
  margin-bottom: 16px;
481
512
  }
482
513
 
@@ -499,17 +530,19 @@
499
530
 
500
531
  .item-name {
501
532
  margin: 0 0 4px;
502
- font-size: 0.85rem;
503
- font-weight: 500;
504
- color: #1e293b;
533
+ font-size: 14px;
534
+ font-weight: 600;
535
+ color: var(--_gray-900);
536
+ line-height: 20px;
505
537
  }
506
538
 
507
539
  .item-specs,
508
540
  .item-qty,
509
541
  .estimated-delivery {
510
542
  margin: 0;
511
- font-size: 0.75rem;
512
- color: #6b7280;
543
+ font-size: 12px;
544
+ color: var(--_gray-600);
545
+ line-height: 18px;
513
546
  }
514
547
 
515
548
  .delivery-date {
@@ -540,20 +573,21 @@
540
573
 
541
574
  /* ───────── Order Attributes ───────── */
542
575
  .order-attributes {
543
- border-top: 1px solid #e0e0e0;
576
+ border-top: 1px dashed #e0e0e0;
544
577
  padding-top: 12px;
545
578
 
546
579
  h4 {
547
- font-size: 0.9rem;
548
- color: #374151;
549
- margin-bottom: 8px;
550
- font-weight: 600;
580
+ font-size: 14px;
581
+ font-weight: 400;
582
+ color: var(--_gray-400);
583
+ line-height: 20px;
551
584
  }
552
585
 
553
586
  p {
554
- font-size: 0.75rem;
555
- color: #6b7280;
556
- margin: 0;
587
+ font-size: 14px;
588
+ font-weight: 600;
589
+ line-height: 20px;
590
+ color: var(--_gray-900);
557
591
  }
558
592
  }
559
593
 
@@ -4,6 +4,7 @@
4
4
  @use "./functions.scss" as *;
5
5
 
6
6
  $dataElementType: "data-element-type";
7
+ $elementSelector: "[data-div-type='element']";
7
8
  $dataLayerElementType: "data-layer-element-type";
8
9
 
9
10
  $prefixList: (
@@ -32,6 +33,16 @@ $prefixList: (
32
33
  spotlight: spo,
33
34
  );
34
35
 
36
+ @function convertListToCommaSeparateString($list) {
37
+ $items: ();
38
+ @each $key, $value in $list {
39
+ $sl: "[#{$dataElementType}=#{$key}]";
40
+ $items: list.append($items, $sl, comma);
41
+ }
42
+
43
+ @return $items;
44
+ }
45
+
35
46
  @function convertIntoActualVariable($prefix, $type) {
36
47
  $types: (
37
48
  width: "lt-wh",
@@ -52,4 +63,10 @@ $prefixList: (
52
63
  #{$var}: #{prepareMediaVariable(convertIntoActualVariable($value, width))};
53
64
  }
54
65
  }
66
+
67
+ &#{$elementSelector} {
68
+ &:is(:not(#{convertListToCommaSeparateString($prefixList)})) {
69
+ #{$var}: #{prepareMediaVariable(--_ctm-lt-wh)};
70
+ }
71
+ }
55
72
  }
@@ -109,7 +109,7 @@
109
109
  --_ctm-mob-dn-ad-to-ct-hr-se-br-se,
110
110
  var(--_ctm-tab-dn-ad-to-ct-hr-se-br-se, var(--_ctm-dn-ad-to-ct-hr-se-br-se))
111
111
  );
112
- --_sf-hr-br-wt: var(
112
+ --_sf-hr-br-wh: var(
113
113
  --_ctm-mob-dn-ad-to-ct-hr-se-br-wh,
114
114
  var(--_ctm-tab-dn-ad-to-ct-hr-se-br-wh, var(--_ctm-dn-ad-to-ct-hr-se-br-wh))
115
115
  );
@@ -309,7 +309,7 @@
309
309
  --_ctm-mob-dn-by-nw-hr-se-br-se,
310
310
  var(--_ctm-tab-dn-by-nw-hr-se-br-se, var(--_ctm-dn-by-nw-hr-se-br-se))
311
311
  );
312
- --_sf-hr-br-wt: var(
312
+ --_sf-hr-br-wh: var(
313
313
  --_ctm-mob-dn-by-nw-hr-se-br-wh,
314
314
  var(--_ctm-tab-dn-by-nw-hr-se-br-wh, var(--_ctm-dn-by-nw-hr-se-br-wh))
315
315
  );
@@ -511,7 +511,7 @@
511
511
  --_ctm-mob-dn-wt-hr-se-br-se,
512
512
  var(--_ctm-tab-dn-wt-hr-se-br-se, var(--_ctm-dn-wt-hr-se-br-se))
513
513
  );
514
- --_sf-hr-br-wt: var(
514
+ --_sf-hr-br-wh: var(
515
515
  --_ctm-mob-dn-wt-hr-se-br-wh,
516
516
  var(--_ctm-tab-dn-wt-hr-se-br-wh, var(--_ctm-dn-wt-hr-se-br-wh))
517
517
  );
@@ -709,7 +709,7 @@
709
709
  --_ctm-mob-dn-ce-hr-se-br-se,
710
710
  var(--_ctm-tab-dn-ce-hr-se-br-se, var(--_ctm-dn-ce-hr-se-br-se))
711
711
  );
712
- --_sf-hr-br-wt: var(
712
+ --_sf-hr-br-wh: var(
713
713
  --_ctm-mob-dn-ce-hr-se-br-wh,
714
714
  var(--_ctm-tab-dn-ce-hr-se-br-wh, var(--_ctm-dn-ce-hr-se-br-wh))
715
715
  );
@@ -907,7 +907,7 @@
907
907
  --_ctm-mob-dn-ad-to-qe-hr-se-br-se,
908
908
  var(--_ctm-tab-dn-ad-to-qe-hr-se-br-se, var(--_ctm-dn-ad-to-qe-hr-se-br-se))
909
909
  );
910
- --_sf-hr-br-wt: var(
910
+ --_sf-hr-br-wh: var(
911
911
  --_ctm-mob-dn-ad-to-qe-hr-se-br-wh,
912
912
  var(--_ctm-tab-dn-ad-to-qe-hr-se-br-wh, var(--_ctm-dn-ad-to-qe-hr-se-br-wh))
913
913
  );
@@ -1108,7 +1108,7 @@
1108
1108
  --_ctm-mob-dn-ad-to-or-te-hr-se-br-se,
1109
1109
  var(--_ctm-tab-dn-ad-to-or-te-hr-se-br-se, var(--_ctm-dn-ad-to-or-te-hr-se-br-se))
1110
1110
  );
1111
- --_sf-hr-br-wt: var(
1111
+ --_sf-hr-br-wh: var(
1112
1112
  --_ctm-mob-dn-ad-to-or-te-hr-se-br-wh,
1113
1113
  var(--_ctm-tab-dn-ad-to-or-te-hr-se-br-wh, var(--_ctm-dn-ad-to-or-te-hr-se-br-wh))
1114
1114
  );
@@ -1330,7 +1330,7 @@
1330
1330
  --_ctm-mob-dn-ny-me-hr-se-br-se,
1331
1331
  var(--_ctm-tab-dn-ny-me-hr-se-br-se, var(--_ctm-dn-ny-me-hr-se-br-se))
1332
1332
  );
1333
- --_sf-hr-br-wt: var(
1333
+ --_sf-hr-br-wh: var(
1334
1334
  --_ctm-mob-dn-ny-me-hr-se-br-wh,
1335
1335
  var(--_ctm-tab-dn-ny-me-hr-se-br-wh, var(--_ctm-dn-ny-me-hr-se-br-wh))
1336
1336
  );
@@ -1527,7 +1527,7 @@
1527
1527
  --_ctm-mob-dn-dd-hr-se-br-se,
1528
1528
  var(--_ctm-tab-dn-dd-hr-se-br-se, var(--_ctm-dn-dd-hr-se-br-se))
1529
1529
  );
1530
- --_sf-hr-br-wt: var(
1530
+ --_sf-hr-br-wh: var(
1531
1531
  --_ctm-mob-dn-dd-hr-se-br-wh,
1532
1532
  var(--_ctm-tab-dn-dd-hr-se-br-wh, var(--_ctm-dn-dd-hr-se-br-wh))
1533
1533
  );
@@ -1724,7 +1724,7 @@
1724
1724
  --_ctm-mob-dn-me-hr-se-br-se,
1725
1725
  var(--_ctm-tab-dn-me-hr-se-br-se, var(--_ctm-dn-me-hr-se-br-se))
1726
1726
  );
1727
- --_sf-hr-br-wt: var(
1727
+ --_sf-hr-br-wh: var(
1728
1728
  --_ctm-mob-dn-me-hr-se-br-wh,
1729
1729
  var(--_ctm-tab-dn-me-hr-se-br-wh, var(--_ctm-dn-me-hr-se-br-wh))
1730
1730
  );
@@ -10,7 +10,7 @@
10
10
  1% * var(--_ctm-mob-ele-nw-wh-vl, var(--_ctm-tab-ele-nw-wh-vl, var(--_ctm-ele-nw-wh-vl)))
11
11
  )
12
12
  );
13
- height: var(--_ctm-mob-lt-ht, var(--_ctm-tab-lt-ht, var(--_ctm-lt-ht)));
13
+ // height: var(--_ctm-mob-lt-ht, var(--_ctm-tab-lt-ht, var(--_ctm-lt-ht)));
14
14
  margin: var(--_ctm-mob-lt-mn, var(--_ctm-tab-lt-mn, var(--_ctm-lt-mn)));
15
15
 
16
16
  // aspect-ratio
@@ -291,7 +291,8 @@
291
291
  var(--_ctm-tab-dn-gy-wt-se-cr, var(--_ctm-dn-gy-wt-se-cr))
292
292
  );
293
293
 
294
- font-family: var(
294
+ font-family:
295
+ var(
295
296
  --_ctm-mob-dn-gy-wt-se-ft-fy,
296
297
  var(--_ctm-tab-dn-gy-wt-se-ft-fy, var(--_ctm-dn-gy-wt-se-ft-fy))
297
298
  ),
@@ -339,7 +340,8 @@
339
340
  var(--_ctm-tab-dn-gy-wt-se-cr-dc, var(--_ctm-dn-gy-wt-se-cr-dc))
340
341
  );
341
342
 
342
- font-family: var(
343
+ font-family:
344
+ var(
343
345
  --_ctm-mob-dn-gy-wt-se-ft-fy-dc,
344
346
  var(--_ctm-tab-dn-gy-wt-se-ft-fy-dc, var(--_ctm-dn-gy-wt-se-ft-fy-dc))
345
347
  ),
@@ -1102,7 +1104,8 @@
1102
1104
 
1103
1105
  & h3 {
1104
1106
  color: var(--_ctm-mob-dn-im-se-cr, var(--_ctm-tab-dn-im-se-cr, var(--_ctm-dn-im-se-cr)));
1105
- font-family: var(
1107
+ font-family:
1108
+ var(
1106
1109
  --_ctm-mob-dn-im-se-ft-fy,
1107
1110
  var(--_ctm-tab-dn-im-se-ft-fy, var(--_ctm-dn-im-se-ft-fy))
1108
1111
  ),
@@ -1142,7 +1145,8 @@
1142
1145
  --_ctm-mob-dn-im-se-cr-dc,
1143
1146
  var(--_ctm-tab-dn-im-se-cr-dc, var(--_ctm-dn-im-se-cr-dc))
1144
1147
  );
1145
- font-family: var(
1148
+ font-family:
1149
+ var(
1146
1150
  --_ctm-mob-dn-im-se-ft-fy-dc,
1147
1151
  var(--_ctm-tab-dn-im-se-ft-fy-dc, var(--_ctm-dn-im-se-ft-fy-dc))
1148
1152
  ),
@@ -75,7 +75,7 @@
75
75
  --_ctm-mob-dn-se-ct-hr-se-br-se,
76
76
  var(--_ctm-tab-dn-se-ct-hr-se-br-se, var(--_ctm-dn-se-ct-hr-se-br-se))
77
77
  );
78
- --_sf-hr-br-wt: var(
78
+ --_sf-hr-br-wh: var(
79
79
  --_ctm-mob-dn-se-ct-hr-se-br-wh,
80
80
  var(--_ctm-tab-dn-se-ct-hr-se-br-wh, var(--_ctm-dn-se-ct-hr-se-br-wh))
81
81
  );
package/dist/profile.scss CHANGED
@@ -74,20 +74,40 @@
74
74
  var(--_ctm-mob-dn-pe-wt-sw-cr, var(--_ctm-tab-dn-pe-wt-sw-cr, var(--_ctm-dn-pe-wt-sw-cr)))
75
75
  );
76
76
 
77
- .profile__avatar {
77
+ .profile__avatar__before__login {
78
78
  svg {
79
- // width: prepareMediaVariable(--_ctm-dn-pe-ar-in-se);
80
- // height: prepareMediaVariable(--_ctm-dn-pe-ar-in-se);
81
- width: var(--_ctm-dn-pe-ar-in-se, var(--_ctm-dn-pe-ar-in-se, var(--_ctm-dn-pe-ar-in-se)));
79
+ width: var(
80
+ --_ctm-dn-be-ln-ar-in-se,
81
+ var(--_ctm-dn-be-ln-ar-in-se, var(--_ctm-dn-be-ln-ar-in-se))
82
+ );
83
+ height: var(
84
+ --_ctm-dn-be-ln-ar-in-se,
85
+ var(--_ctm-dn-be-ln-ar-in-se, var(--_ctm-dn-be-ln-ar-in-se))
86
+ );
87
+
88
+ path {
89
+ stroke: var(
90
+ --_ctm-mob-dn-be-ln-ar-in-c1,
91
+ var(--_ctm-tab-dn-be-ln-ar-cr, var(--_ctm-dn-be-ln-ar-in-c1))
92
+ );
93
+ }
94
+ }
95
+ }
96
+ .profile__avatar__after__login {
97
+ svg {
98
+ width: var(
99
+ --_ctm-dn-ar-ln-ar-in-se,
100
+ var(--_ctm-dn-ar-ln-ar-in-se, var(--_ctm-dn-ar-ln-ar-in-se))
101
+ );
82
102
  height: var(
83
- --_ctm-dn-pe-ar-in-se,
84
- var(--_ctm-dn-pe-ar-in-se, var(--_ctm-dn-pe-ar-in-se))
103
+ --_ctm-dn-ar-ln-ar-in-se,
104
+ var(--_ctm-dn-ar-ln-ar-in-se, var(--_ctm-dn-ar-ln-ar-in-se))
85
105
  );
86
106
 
87
107
  path {
88
108
  stroke: var(
89
- --_ctm-mob-dn-pe-ar-in-c1,
90
- var(--_ctm-tab-dn-pe-ar-cr, var(--_ctm-dn-pe-ar-in-c1))
109
+ --_ctm-mob-dn-ar-ln-ar-in-c1,
110
+ var(--_ctm-tab-dn-ar-ln-ar-cr, var(--_ctm-dn-ar-ln-ar-in-c1))
91
111
  );
92
112
  }
93
113
  }
@@ -251,7 +271,7 @@
251
271
  )
252
272
  );
253
273
  border-width: var(
254
- --_sf-hr-br-wt,
274
+ --_sf-hr-br-wh,
255
275
  var(
256
276
  --_ctm-mob-dn-dn-is-dt-se-br-wh,
257
277
  var(--_ctm-tab-dn-dn-is-dt-se-br-wh, var(--_ctm-dn-dn-is-dt-se-br-wh))
@@ -374,7 +394,7 @@
374
394
  )
375
395
  );
376
396
  border-width: var(
377
- --_sf-hr-br-wt,
397
+ --_sf-hr-br-wh,
378
398
  var(
379
399
  --_ctm-mob-dn-dn-is-hr-se-br-wh,
380
400
  var(--_ctm-tab-dn-dn-is-hr-se-br-wh, var(--_ctm-dn-dn-is-hr-se-br-wh))
@@ -485,7 +485,7 @@
485
485
  --_ctm-mob-dn-ie-bn-hr-se-br-se,
486
486
  var(--_ctm-tab-dn-ie-bn-hr-se-br-se, var(--_ctm-dn-ie-bn-hr-se-br-se))
487
487
  );
488
- --_sf-hr-br-wt: var(
488
+ --_sf-hr-br-wh: var(
489
489
  --_ctm-mob-dn-ie-bn-hr-se-br-wh,
490
490
  var(--_ctm-tab-dn-ie-bn-hr-se-br-wh, var(--_ctm-dn-ie-bn-hr-se-br-wh))
491
491
  );
@@ -685,7 +685,7 @@
685
685
  --_ctm-mob-dn-de-bn-hr-se-br-se,
686
686
  var(--_ctm-tab-dn-de-bn-hr-se-br-se, var(--_ctm-dn-de-bn-hr-se-br-se))
687
687
  );
688
- --_sf-hr-br-wt: var(
688
+ --_sf-hr-br-wh: var(
689
689
  --_ctm-mob-dn-de-bn-hr-se-br-wh,
690
690
  var(--_ctm-tab-dn-de-bn-hr-se-br-wh, var(--_ctm-dn-de-bn-hr-se-br-wh))
691
691
  );
@@ -6,13 +6,15 @@
6
6
 
7
7
  $rb_cls: ".flx__rb__fxd";
8
8
  $elementSelector: '[data-div-type="element"]';
9
+ $elementDragging: "[data-cms-new-element-dragging-v2='true']";
10
+ $dataResizerTrue: '[data-cms-element-resizer="true"]';
9
11
  $fullView: '[data-view-state="full"]';
10
12
  $var: "--_sf-width-rb-vl";
11
13
 
12
14
  @mixin FlexElementResponsiveBehaviourStyles() {
13
15
  #{$elementSelector} {
14
16
  &#{$rb_cls} {
15
- &:not(#{$fullView}) {
17
+ &:not(#{$fullView, $elementDragging, $dataResizerTrue}) {
16
18
  @include FlexUpdatedPrefixCSSVariable(#{$var});
17
19
  width: var(#{$var}, #{prepareMediaVariable(--_ctm-lt-wh)}) !important;
18
20
  }
@@ -50,14 +50,14 @@
50
50
  font-size: 16px;
51
51
  font-weight: 500;
52
52
  color: var(--_gray-900);
53
- // &:after {
54
- // width: 1px;
55
- // height: 10px;
56
- // background: var(--_gray-600);
57
- // display: inline-block;
58
- // content: "";
59
- // margin-left: 16px;
60
- // }
53
+ &:after {
54
+ width: 1px;
55
+ height: 10px;
56
+ background: var(--_gray-600);
57
+ display: inline-block;
58
+ content: "";
59
+ margin-left: 16px;
60
+ }
61
61
  }
62
62
 
63
63
  .quote-item__meta {
@@ -66,20 +66,20 @@
66
66
  font-size: 14px;
67
67
  font-weight: 400;
68
68
  color: var(--_gray-600);
69
- span {
70
- &::after {
71
- width: 1px;
72
- height: 10px;
73
- background: var(--_gray-600);
74
- content: "";
75
- display: inline-block;
76
- margin-left: 6px;
77
- }
78
- &:last-child::after {
79
- width: 0 !important;
80
- margin: 0 !important;
81
- }
82
- }
69
+ // span {
70
+ // &::after {
71
+ // width: 1px;
72
+ // height: 10px;
73
+ // background: var(--_gray-600);
74
+ // content: "";
75
+ // display: inline-block;
76
+ // margin-left: 6px;
77
+ // }
78
+ // &:last-child::after {
79
+ // width: 0 !important;
80
+ // margin: 0 !important;
81
+ // }
82
+ // }
83
83
  }
84
84
  }
85
85
 
@@ -111,7 +111,7 @@
111
111
  padding: 8px 12px;
112
112
  font-size: 15px;
113
113
  border: 1px solid #ccc;
114
- border-radius: 4px;
114
+ border-radius: 6px;
115
115
  outline: none;
116
116
  width: 130px;
117
117
 
@@ -120,10 +120,7 @@
120
120
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.3);
121
121
  }
122
122
  }
123
- .input-with-prefix:focus-within {
124
- border-color: #007bff; /* Or any highlight color */
125
- box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.2);
126
- }
123
+
127
124
  .input-with-prefix {
128
125
  display: flex;
129
126
  align-items: center;
@@ -132,13 +129,11 @@
132
129
  overflow: hidden;
133
130
  width: 130px;
134
131
  height: 40px;
132
+
135
133
  span {
136
134
  padding: 0 8px;
137
135
  font-size: 15px;
138
136
  color: var(--_gray-500);
139
- svg{
140
- vertical-align: middle;
141
- }
142
137
  }
143
138
 
144
139
  input {
package/dist/table.scss CHANGED
@@ -121,7 +121,7 @@
121
121
  )
122
122
  );
123
123
  border-width: var(
124
- --_sf-hr-br-wt,
124
+ --_sf-hr-br-wh,
125
125
  var(
126
126
  --_ctm-mob-dn-ld-me-bn-br-wh,
127
127
  var(--_ctm-tab-dn-ld-me-bn-br-wh, var(--_ctm-dn-ld-me-bn-br-wh))
package/dist/widget.scss CHANGED
@@ -116,4 +116,4 @@
116
116
  @use "./submit-quote.scss";
117
117
  @use "./cartAttributes.scss";
118
118
  @use "./language-selector.scss";
119
- @use "./empty-states.scss";
119
+ @use "./loader.scss";
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@sc-360-v2/storefront-cms-library",
3
- "version": "0.3.32",
3
+ "version": "0.3.33",
4
4
  "main": "/dist/index.js",
5
5
  "types": "./dist/index.d.ts",
6
6
  "exports": {