@sc-360-v2/storefront-cms-library 0.3.88 → 0.3.90

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.
@@ -7,84 +7,44 @@ $resizeActive: '[data-cms-element-resizer="true"]';
7
7
  &[data-element-type="bundleDetails"] {
8
8
  // width: var(--_sf-con-nw-wh);
9
9
  width: var(
10
- --_sf-mob-el-wh-st-mx,
11
- var(
12
- --_sf-tab-el-wh-st-mx,
13
- var(
14
- --_sf-el-wh-st-mx,
15
- calc(
16
- 1% *
17
- var(
18
- --_ctm-mob-bun-ele-nw-wh-vl,
19
- var(--_ctm-tab-bun-ele-nw-wh-vl, var(--_ctm-bun-ele-nw-wh-vl, var(--_sf-nw-wh)))
20
- )
21
- )
22
- )
10
+ --_sf-el-wh-st-mx,
11
+ calc(
12
+ 1% * var(--_ctm-mob-ele-nw-wh-vl, var(--_ctm-tab-ele-nw-wh-vl, var(--_ctm-ele-nw-wh-vl)))
23
13
  )
24
14
  );
25
15
 
26
16
  height: auto;
27
17
 
28
18
  margin: var(
29
- --_ctm-mob-bun-lt-mn,
19
+ --_ctm-mob-lt-mn,
30
20
  var(
31
- --_ctm-tab-bun-lt-mn,
32
- var(--_ctm-bun-lt-mn, var(--_ctm-mob-lt-mn, var(--_ctm-tab-lt-mn, var(--_ctm-lt-mn))))
21
+ --_ctm-tab-lt-mn,
22
+ var(--_ctm-lt-mn, var(--_ctm-mob-lt-mn, var(--_ctm-tab-lt-mn, var(--_ctm-lt-mn))))
33
23
  )
34
24
  );
35
25
 
36
- background-color: var(
37
- --_ctm-mob-bun-dn-bd-cr,
38
- var(--_ctm-tab-bun-dn-bd-cr, var(--_ctm-bun-dn-bd-cr))
39
- );
40
- background-image: var(
41
- --_ctm-mob-bun-dn-bd-ie,
42
- var(--_ctm-tab-bun-dn-bd-ie, var(--_ctm-bun-dn-bd-ie))
43
- );
44
- background-attachment: var(
45
- --_ctm-mob-bun-dn-bd-at,
46
- var(--_ctm-tab-bun-dn-bd-at, var(--_ctm-bun-dn-bd-at))
47
- );
48
- background-position: var(
49
- --_ctm-mob-bun-dn-bd-pn,
50
- var(--_ctm-tab-bun-dn-bd-pn, var(--_ctm-bun-dn-bd-pn))
51
- );
52
- background-repeat: var(
53
- --_ctm-mob-bun-dn-bd-rt,
54
- var(--_ctm-tab-bun-dn-bd-rt, var(--_ctm-bun-dn-bd-rt))
55
- );
56
- background-size: var(
57
- --_ctm-mob-bun-dn-bd-se,
58
- var(--_ctm-tab-bun-dn-bd-se, var(--_ctm-bun-dn-bd-se))
59
- );
60
- padding: var(--_ctm-mob-bun-lt-pg, var(--_ctm-tab-bun-lt-pg, var(--_ctm-bun-lt-pg)));
26
+ background-color: var(--_ctm-mob-dn-bd-cr, var(--_ctm-tab-dn-bd-cr, var(--_ctm-dn-bd-cr)));
27
+ background-image: var(--_ctm-mob-dn-bd-ie, var(--_ctm-tab-dn-bd-ie, var(--_ctm-dn-bd-ie)));
28
+ background-attachment: var(--_ctm-mob-dn-bd-at, var(--_ctm-tab-dn-bd-at, var(--_ctm-dn-bd-at)));
29
+ background-position: var(--_ctm-mob-dn-bd-pn, var(--_ctm-tab-dn-bd-pn, var(--_ctm-dn-bd-pn)));
30
+ background-repeat: var(--_ctm-mob-dn-bd-rt, var(--_ctm-tab-dn-bd-rt, var(--_ctm-dn-bd-rt)));
31
+ background-size: var(--_ctm-mob-dn-bd-se, var(--_ctm-tab-dn-bd-se, var(--_ctm-dn-bd-se)));
32
+ padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
61
33
 
62
- border-color: var(
63
- --_ctm-mob-bun-dn-br-cr,
64
- var(--_ctm-tab-bun-dn-br-cr, var(--_ctm-bun-dn-br-cr))
65
- );
34
+ border-color: var(--_ctm-mob-dn-br-cr, var(--_ctm-tab-dn-br-cr, var(--_ctm-dn-br-cr)));
66
35
 
67
- border-style: var(
68
- --_ctm-mob-bun-dn-br-se,
69
- var(--_ctm-tab-bun-dn-br-se, var(--_ctm-bun-dn-br-se))
70
- );
36
+ border-style: var(--_ctm-mob-dn-br-se, var(--_ctm-tab-dn-br-se, var(--_ctm-dn-br-se)));
71
37
 
72
- border-width: var(
73
- --_ctm-mob-bun-dn-br-wh,
74
- var(--_ctm-tab-bun-dn-br-wh, var(--_ctm-bun-dn-br-wh))
75
- );
38
+ border-width: var(--_ctm-mob-dn-br-wh, var(--_ctm-tab-dn-br-wh, var(--_ctm-dn-br-wh)));
76
39
 
77
- border-radius: var(
78
- --_ctm-mob-bun-dn-br-rs,
79
- var(--_ctm-tab-bun-dn-br-rs, var(--_ctm-bun-dn-br-rs))
80
- );
40
+ border-radius: var(--_ctm-mob-dn-br-rs, var(--_ctm-tab-dn-br-rs, var(--_ctm-dn-br-rs)));
81
41
 
82
42
  box-shadow: var(
83
43
  --_show-shadow,
84
- var(--_ctm-mob-bun-dn-sw-ae, var(--_ctm-tab-bun-dn-sw-ae, var(--_ctm-bun-dn-sw-ae)))
85
- var(--_ctm-mob-bun-dn-sw-br, var(--_ctm-tab-bun-dn-sw-br, var(--_ctm-bun-dn-sw-br)))
86
- var(--_ctm-mob-bun-dn-sw-sd, var(--_ctm-tab-bun-dn-sw-sd, var(--_ctm-bun-dn-sw-sd)))
87
- var(--_ctm-mob-bun-dn-sw-cr, var(--_ctm-tab-bun-dn-sw-cr, var(--_ctm-bun-dn-sw-cr)))
44
+ var(--_ctm-mob-dn-sw-ae, var(--_ctm-tab-dn-sw-ae, var(--_ctm-dn-sw-ae)))
45
+ var(--_ctm-mob-dn-sw-br, var(--_ctm-tab-dn-sw-br, var(--_ctm-dn-sw-br)))
46
+ var(--_ctm-mob-dn-sw-sd, var(--_ctm-tab-dn-sw-sd, var(--_ctm-dn-sw-sd)))
47
+ var(--_ctm-mob-dn-sw-cr, var(--_ctm-tab-dn-sw-cr, var(--_ctm-dn-sw-cr)))
88
48
  );
89
49
 
90
50
  // &:not(:has(#{$resizerId}#{$resizeActive})) {
@@ -94,7 +54,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
94
54
  & > div {
95
55
  &.wrapper {
96
56
  width: 100%;
97
- // grid-template-rows: max(var(--_ctm-bun-lt-ht), auto) !important;
57
+ // grid-template-rows: max(var(--_ctm-lt-ht), auto) !important;
98
58
  }
99
59
  }
100
60
 
@@ -631,6 +591,10 @@ $resizeActive: '[data-cms-element-resizer="true"]';
631
591
  }
632
592
  }
633
593
 
594
+ .bundle__details__element__container {
595
+ width: 100%;
596
+ }
597
+
634
598
  .bundle_details_heading_wrapper {
635
599
  display: flex;
636
600
  width: 100%;
@@ -184,9 +184,9 @@ $button-padding: 6px 12px;
184
184
  // min-height: 48px;
185
185
  border-radius: 4px;
186
186
 
187
- .checkbox_container {
188
- top: 4px;
189
- }
187
+ // .checkbox_container {
188
+ // top: 4px;
189
+ // }
190
190
 
191
191
  &.disabled {
192
192
  .label-content {
@@ -206,6 +206,10 @@ $button-padding: 6px 12px;
206
206
  white-space: nowrap;
207
207
  overflow: hidden;
208
208
  text-overflow: ellipsis;
209
+ display: flex;
210
+ gap: 4px;
211
+ flex-wrap: wrap;
212
+ margin-top: 4px;
209
213
  }
210
214
  }
211
215
  }
@@ -32,6 +32,23 @@ $dark-color: #343a40;
32
32
  // width: 100%;
33
33
  // }
34
34
 
35
+ .checkout_steps_skeleton {
36
+ display: flex;
37
+ flex-direction: column;
38
+ gap: 56px;
39
+ }
40
+
41
+ .checkout_optional_method {
42
+ display: flex;
43
+ flex-direction: column;
44
+ gap: 12px;
45
+ margin-top: 12px;
46
+ & > div {
47
+ display: flex;
48
+ gap: 12px;
49
+ }
50
+ }
51
+
35
52
  // checkout styles started
36
53
  .chk_checkout_wrapper {
37
54
  // checkout login styles started
@@ -229,7 +246,11 @@ $dark-color: #343a40;
229
246
  &.open {
230
247
  transition: max-height 800ms ease-in;
231
248
  .accordion-header {
232
- background-color: var(--_gray-200);
249
+ // background-color: var(--_gray-200);
250
+ background-color: var(
251
+ --_ctm-mob-dn-an-tb-an-hr-bd-cr,
252
+ var(--_ctm-tab-dn-an-tb-an-hr-bd-cr, var(--_ctm-dn-an-tb-an-hr-bd-cr))
253
+ );
233
254
  }
234
255
  .accordion-body {
235
256
  transition: max-height 800ms ease-in;
@@ -1426,6 +1447,7 @@ $dark-color: #343a40;
1426
1447
  display: grid;
1427
1448
  grid-template-columns: 1fr;
1428
1449
  gap: var(--_ctm-lt-sg-md-le-gp);
1450
+ padding-top: 12px;
1429
1451
 
1430
1452
  @media (min-width: 768px) {
1431
1453
  grid-template-columns: 1fr 1fr;
@@ -2252,7 +2274,8 @@ $dark-color: #343a40;
2252
2274
  justify-content: space-between;
2253
2275
  font-weight: 600;
2254
2276
  .cc_tertiary_btn {
2255
- color: var(--_primary-400);
2277
+ // color: var(--_primary-400);
2278
+ color: var(--_thm-cs-tt-ls-as);
2256
2279
  font-size: 14px;
2257
2280
  &:hover {
2258
2281
  text-decoration: underline;
@@ -5318,6 +5341,26 @@ $dark-color: #343a40;
5318
5341
  flex-direction: column;
5319
5342
  gap: 0.25rem;
5320
5343
 
5344
+ .sr_skeletons {
5345
+ padding-block: 12px;
5346
+ .sr_add_name {
5347
+ display: flex;
5348
+ justify-content: space-between;
5349
+ align-items: center;
5350
+ margin-bottom: 16px;
5351
+ }
5352
+ .sr_address {
5353
+ display: flex;
5354
+ flex-wrap: wrap;
5355
+ gap: 12px;
5356
+ }
5357
+ .sr_contact {
5358
+ display: flex;
5359
+ gap: 12px;
5360
+ margin-top: 16px;
5361
+ }
5362
+ }
5363
+
5321
5364
  .summary-content {
5322
5365
  display: flex;
5323
5366
  flex-direction: row;
@@ -5972,10 +6015,11 @@ $dark-color: #343a40;
5972
6015
  --_ctm-mob-dn-an-tb-bs-ty-py-dt-se-br-wh,
5973
6016
  var(--_ctm-tab-dn-an-tb-bs-ty-py-dt-se-br-wh, var(--_ctm-dn-an-tb-bs-ty-py-dt-se-br-wh))
5974
6017
  );
5975
- color: var(
5976
- --_ctm-mob-dn-an-tb-bs-ty-py-dt-se-cr,
5977
- var(--_ctm-tab-dn-an-tb-bs-ty-py-dt-se-cr, var(--_ctm-dn-an-tb-bs-ty-py-dt-se-cr))
5978
- );
6018
+ // color: var(
6019
+ // --_ctm-mob-dn-an-tb-bs-ty-py-dt-se-cr,
6020
+ // var(--_ctm-tab-dn-an-tb-bs-ty-py-dt-se-cr, var(--_ctm-dn-an-tb-bs-ty-py-dt-se-cr))
6021
+ // );
6022
+ color: var(--_thm-cs-tt-ls-as);
5979
6023
  font-family: var(
5980
6024
  --_ctm-mob-dn-an-tb-bs-ty-py-dt-se-ft-fy,
5981
6025
  var(--_ctm-tab-dn-an-tb-bs-ty-py-dt-se-ft-fy, var(--_ctm-dn-an-tb-bs-ty-py-dt-se-ft-fy))
@@ -6120,10 +6164,11 @@ $dark-color: #343a40;
6120
6164
  --_ctm-mob-dn-an-tb-bs-py-dt-se-br-wh,
6121
6165
  var(--_ctm-tab-dn-an-tb-bs-py-dt-se-br-wh, var(--_ctm-dn-an-tb-bs-py-dt-se-br-wh))
6122
6166
  );
6123
- color: var(
6124
- --_ctm-mob-dn-an-tb-bs-py-dt-se-cr,
6125
- var(--_ctm-tab-dn-an-tb-bs-py-dt-se-cr, var(--_ctm-dn-an-tb-bs-py-dt-se-cr))
6126
- );
6167
+ color: var(--_thm-cs-tt-ls-as);
6168
+ // color: var(
6169
+ // --_ctm-mob-dn-an-tb-bs-py-dt-se-cr,
6170
+ // var(--_ctm-tab-dn-an-tb-bs-py-dt-se-cr, var(--_ctm-dn-an-tb-bs-py-dt-se-cr))
6171
+ // );
6127
6172
  font-family: var(
6128
6173
  --_ctm-mob-dn-an-tb-bs-py-dt-se-ft-fy,
6129
6174
  var(--_ctm-tab-dn-an-tb-bs-py-dt-se-ft-fy, var(--_ctm-dn-an-tb-bs-py-dt-se-ft-fy))
@@ -6422,10 +6467,11 @@ $dark-color: #343a40;
6422
6467
  --_ctm-mob-dn-an-tb-bs-ty-py-dt-se-br-wh,
6423
6468
  var(--_ctm-tab-dn-an-tb-bs-ty-py-dt-se-br-wh, var(--_ctm-dn-an-tb-bs-ty-py-dt-se-br-wh))
6424
6469
  );
6425
- color: var(
6426
- --_ctm-mob-dn-an-tb-bs-ty-py-dt-se-cr,
6427
- var(--_ctm-tab-dn-an-tb-bs-ty-py-dt-se-cr, var(--_ctm-dn-an-tb-bs-ty-py-dt-se-cr))
6428
- );
6470
+ // color: var(
6471
+ // --_ctm-mob-dn-an-tb-bs-ty-py-dt-se-cr,
6472
+ // var(--_ctm-tab-dn-an-tb-bs-ty-py-dt-se-cr, var(--_ctm-dn-an-tb-bs-ty-py-dt-se-cr))
6473
+ // );
6474
+ color: var(--_thm-cs-tt-ls-as);
6429
6475
  font-family: var(
6430
6476
  --_ctm-mob-dn-an-tb-bs-ty-py-dt-se-ft-fy,
6431
6477
  var(--_ctm-tab-dn-an-tb-bs-ty-py-dt-se-ft-fy, var(--_ctm-dn-an-tb-bs-ty-py-dt-se-ft-fy))
@@ -25,7 +25,7 @@
25
25
  // align-items: center;
26
26
  justify-content: start;
27
27
  width: 100%;
28
- gap: 6px;
28
+ // gap: 6px;
29
29
  margin-top: 24px;
30
30
  img {
31
31
  max-width: 100px;
@@ -33,19 +33,16 @@
33
33
  }
34
34
 
35
35
  .empty_msg_title {
36
- font-family: "Lato";
37
36
  font-weight: 700;
38
- font-size: 16px;
39
- color: var(--_gray-900);
37
+ font-size: 24px;
40
38
  line-height: 32px;
41
- // margin-top: 24px;
39
+ padding-bottom: 8px;
42
40
  }
43
41
 
44
42
  .empty_msg_desc {
45
- font-family: "Lato";
46
43
  font-size: 14px;
47
44
  line-height: 20px;
48
- color: var(--_gray-900);
45
+ font-weight: 500;
49
46
  }
50
47
  .empty_cart_actions {
51
48
  gap: 12px;
@@ -58,9 +55,10 @@
58
55
  // padding: 12px 24px;
59
56
  // border-radius: 6px;
60
57
  // background-color: var(--_base-white);
61
- color: var(--_primary-400);
62
- font-weight: 500;
63
- font-size: 16px;
58
+ // color: var(--_primary-400);
59
+ color: var(--_thm-cs-tt-ls-as);
60
+ font-weight: 400;
61
+ font-size: 14px;
64
62
  &:hover {
65
63
  text-decoration: underline;
66
64
  }
@@ -68,21 +66,23 @@
68
66
  }
69
67
  .empty_crt_btn {
70
68
  padding: 12px 24px;
71
- border-radius: 6px;
72
- background-color: var(--_primary-400);
69
+ border-radius: 4px;
70
+ // background-color: var(--_primary-400);
73
71
  font-weight: 600px;
74
72
  display: inline-flex;
75
73
  align-items: center;
76
74
  gap: 8px;
77
75
  &:hover {
78
- background-color: var(--_primary-500);
76
+ // background-color: var(--_primary-500);
79
77
  }
80
78
  .label {
81
- color: var(--_base-white);
79
+ // color: var(--_base-white);
80
+ color: var(--_thm-py-bs-dt-se-tt-cr);
82
81
  font-size: 16px;
83
82
  }
84
83
  svg path {
85
- stroke: var(--_base-white);
84
+ stroke: var(--_thm-py-bs-dt-se-tt-cr);
85
+ // stroke: var(--_base-white);
86
86
  }
87
87
  }
88
88
  }
@@ -13,6 +13,7 @@ $macroDiv: ".mcr__dv";
13
13
  $macroChip: ".macro__chip__v2";
14
14
  $previewMode: '[data-text-type="preview-mode"]';
15
15
  $dataDecoded: '[data-decoded="true"]';
16
+ $dataDecodedV2: '[data-decoded-v2="true"]';
16
17
  $editorIframe: '[data-iframe-body="true"]';
17
18
  $width: 225px;
18
19
  $height: 300px;
@@ -134,11 +135,11 @@ $height: 300px;
134
135
  }
135
136
  }
136
137
  }
137
- #{$macroChip}:is(#{$editorIframe} *) {
138
+ #{$macroChip}:is(#{$editorIframe} *, #{$dataDecodedV2}) {
138
139
  @extend .macro_styles;
139
140
  }
140
141
 
141
- #{$macroChip}:not(#{$dataDecoded}) {
142
+ #{$macroChip}:not(#{$dataDecoded}, #{$dataDecodedV2}) {
142
143
  &:is(#{$previewMode} *) {
143
144
  @extend .macro_styles;
144
145
  position: var(--_p-relative);
@@ -106,7 +106,7 @@
106
106
  .quote-item__title {
107
107
  font-size: 16px;
108
108
  font-weight: 600;
109
- color: #111;
109
+ // color: #111;
110
110
  }
111
111
 
112
112
  .quote-item__meta {
@@ -272,18 +272,19 @@
272
272
 
273
273
  .label {
274
274
  font-size: 14px;
275
- color: #666;
275
+ font-weight: 400;
276
+ // color: #666;
276
277
  }
277
278
 
278
279
  .value {
279
- font-size: 16px;
280
+ font-size: 14px;
280
281
  font-weight: 500;
281
- color: #333;
282
+ // color: #333;
282
283
 
283
284
  &.highlight {
284
- font-size: 20px;
285
- font-weight: 700;
286
- color: #000;
285
+ font-size: 14px;
286
+ font-weight: 500;
287
+ // color: #000;
287
288
  }
288
289
  }
289
290
 
@@ -291,7 +292,9 @@
291
292
  margin-bottom: 20px;
292
293
  }
293
294
  .label-quote {
294
- font-weight: 600;
295
+ font-size: 14px;
296
+ font-weight: 400;
297
+ // font-weight: 600;
295
298
  }
296
299
  }
297
300
 
@@ -320,9 +323,9 @@
320
323
 
321
324
  &__button {
322
325
  width: 100%;
323
- padding: 14px;
324
- background-color: var(--_primary-400);
325
- color: var(--_base-white);
326
+ padding: 12px;
327
+ // background-color: var(--_primary-400);
328
+ // color: var(--_base-white);
326
329
  font-size: 16px;
327
330
  font-weight: 600;
328
331
  border: none;
@@ -331,13 +334,13 @@
331
334
  transition: background-color 0.2s ease;
332
335
 
333
336
  &:hover {
334
- background-color: var(--_primary-500);
337
+ // background-color: var(--_primary-500);
335
338
  }
336
339
  }
337
340
  & > h3 {
338
341
  font-size: 16px;
339
342
  font-weight: 700;
340
- color: var(--_gray-900);
343
+ // color: var(--_gray-900);
341
344
  background-color: #f5f5f5;
342
345
  padding: 12px;
343
346
  border-bottom: 1px solid var(--_gray-300);
@@ -367,7 +370,6 @@
367
370
  & > h3 {
368
371
  font-size: 16px;
369
372
  font-weight: 700;
370
- color: var(--_gray-900);
371
373
  background-color: #f5f5f5;
372
374
  padding: 12px;
373
375
  border-bottom: 1px solid var(--_gray-300);
@@ -375,8 +377,8 @@
375
377
 
376
378
  &_body {
377
379
  padding: 16px;
378
- max-height: calc(100vh - 420px);
379
- overflow: auto;
380
+ // max-height: calc(100vh - 420px);
381
+ // overflow: auto;
380
382
  }
381
383
 
382
384
  &_row {
@@ -389,7 +391,11 @@
389
391
  &_text {
390
392
  font-size: 16px;
391
393
  font-weight: 700;
392
- color: var(--_gray-900);
394
+ width: 273px;
395
+ height: 22px;
396
+ white-space: nowrap;
397
+ overflow: hidden;
398
+ text-overflow: ellipsis;
393
399
  }
394
400
 
395
401
  &_select {
@@ -397,7 +403,8 @@
397
403
  align-items: center;
398
404
  gap: 8px;
399
405
  font-size: 14px;
400
- color: var(--_primary-400);
406
+ // color: var(--_primary-400);
407
+ color: var(--_thm-cs-tt-ls-as);
401
408
  text-decoration: none;
402
409
  font-weight: 600;
403
410
  background: none;
@@ -433,7 +440,7 @@
433
440
 
434
441
  &_label {
435
442
  font-size: 14px;
436
- color: var(--_gray-700);
443
+ // color: var(--_gray-700);
437
444
  font-weight: 500;
438
445
  margin-bottom: 6px;
439
446
  }
@@ -441,7 +448,7 @@
441
448
  &_value {
442
449
  font-size: 20px;
443
450
  font-weight: 700;
444
- color: var(--_gray-900);
451
+ // color: var(--_gray-900);
445
452
  height: 40px;
446
453
  display: flex;
447
454
  align-items: center;
@@ -494,18 +501,25 @@
494
501
  margin-bottom: 0px;
495
502
  }
496
503
  }
504
+ .contact_details {
505
+ gap: 6px;
506
+ display: flex;
507
+ flex-direction: column;
508
+ padding-bottom: 24px;
509
+ }
497
510
 
498
511
  &_address {
499
512
  font-size: 14px;
500
- color: var(--_gray-500);
513
+ // color: var(--_gray-500);
501
514
  font-weight: 400;
502
515
  line-height: 20px;
516
+ padding-bottom: 12x;
503
517
  }
504
518
  &_details {
505
519
  display: flex;
506
520
  align-items: center;
507
521
  gap: 10px;
508
- color: var(--_gray-900);
522
+ // color: var(--_gray-900);
509
523
  font-size: 14px;
510
524
  cursor: pointer;
511
525
  .toggle_arrow {
@@ -534,7 +548,7 @@
534
548
  }
535
549
  &_shipping_details {
536
550
  // padding: 16px;
537
- margin-top: 10px;
551
+ // margin-top: 10px;
538
552
  .no_shipping_methods {
539
553
  background: var(--_gray-100);
540
554
  border-radius: 4px;
@@ -546,9 +560,9 @@
546
560
  &_shipping_heading {
547
561
  font-size: 14px;
548
562
  font-weight: 600;
549
- color: var(--_gray-900);
550
- background: var(--_gray-100);
551
- padding: 4px 6px;
563
+ // color: var(--_gray-900);
564
+ background: #f5f5f5;
565
+ padding: 6px;
552
566
  border-radius: 4px;
553
567
  margin-bottom: 12px;
554
568
  padding-left: 12px;
@@ -556,24 +570,27 @@
556
570
 
557
571
  &_shipping_group {
558
572
  margin-bottom: 12px;
573
+ gap: 12px;
574
+ display: flex;
575
+ flex-direction: column;
559
576
  }
560
577
 
561
578
  &_shipping_subheading {
562
579
  font-size: 14px;
563
580
  font-weight: 700;
564
- color: var(--_gray-900);
565
- margin-bottom: 2px;
581
+ // color: var(--_gray-900);
582
+ // margin-bottom: 2px;
566
583
  }
567
584
 
568
585
  &_shipping_option {
569
586
  display: flex;
570
587
  align-items: center;
571
588
  // justify-content: space-between;
572
- padding: 10px 8px;
589
+ // padding: 10px 8px;
573
590
  border-radius: 6px;
574
591
  cursor: pointer;
575
592
  font-size: 14px;
576
- color: var(--_gray-700);
593
+ // color: var(--_gray-700);
577
594
  // margin-bottom: 8px;
578
595
  transition: background 0.2s ease;
579
596
 
@@ -584,7 +601,7 @@
584
601
  }
585
602
 
586
603
  &:hover {
587
- background: var(--_gray-100);
604
+ // background: var(--_gray-100);
588
605
  }
589
606
  }
590
607
 
@@ -593,12 +610,12 @@
593
610
  // margin-left: 6px;
594
611
  font-weight: 400;
595
612
  font-size: 14px;
596
- color: var(--_gray-500);
613
+ // color: var(--_gray-500);
597
614
  }
598
615
 
599
616
  &_shipping_price {
600
617
  font-weight: 600;
601
- color: var(--_gray-900);
618
+ // color: var(--_gray-900);
602
619
  font-size: 14px;
603
620
  }
604
621
 
@@ -610,9 +627,23 @@
610
627
  flex-direction: column;
611
628
  gap: 8px;
612
629
  }
630
+ .confirm_button {
631
+ padding: 8px 24px;
632
+ border-radius: 4px;
633
+ background-color: var(--_thm-py-bs-dt-se-bd-cr);
634
+ color: var(--_thm-py-bs-dt-se-tt-cr);
635
+ margin-block: 4px 16px;
636
+ &:hover {
637
+ background-color: var(--_thm-py-bs-hr-se-bd-cr);
638
+ color: var(--_thm-py-bs-hr-se-tt-cr);
639
+ }
640
+ }
613
641
  }
614
642
  .cpn__checkmark__icon {
615
643
  display: flex;
644
+ svg path {
645
+ // stroke: var(--_thm-cs-tt-ls-as);
646
+ }
616
647
  }
617
648
  }
618
649
 
package/dist/section.scss CHANGED
@@ -144,6 +144,10 @@ div[data-div-type="element"] {
144
144
  a {
145
145
  color: inherit;
146
146
  text-decoration: none;
147
+ &.disabled {
148
+ opacity: 0.5;
149
+ pointer-events: none;
150
+ }
147
151
  }
148
152
  }
149
153
  &[data-view-state="full"] {
@@ -3,6 +3,7 @@
3
3
  border-radius: 6px;
4
4
  position: var(--_p-relative);
5
5
  overflow: hidden;
6
+ display: inline-block;
6
7
  &.rounded {
7
8
  border-radius: 50%;
8
9
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@sc-360-v2/storefront-cms-library",
3
- "version": "0.3.88",
3
+ "version": "0.3.90",
4
4
  "main": "/dist/index.js",
5
5
  "types": "./dist/index.d.ts",
6
6
  "exports": {