@sc-360-v2/storefront-cms-library 0.3.87 → 0.3.89

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.
package/dist/bundle.scss CHANGED
@@ -5,6 +5,8 @@ $resizerId: "[data-cms-tool='cms-element-resizer']";
5
5
  $resizeActive: '[data-cms-element-resizer="true"]';
6
6
  [data-div-type="element"] {
7
7
  &[data-element-type="bundle"] {
8
+ // height: var(--_ctm-mob-lt-ht, var(--_ctm-tab-lt-ht, var(--_ctm-lt-ht))) !important;
9
+
8
10
  // width: var(--_sf-con-nw-wh);--_ctm-ele-nw-wh-vl
9
11
  // width: var(
10
12
  // --_sf-mob-el-wh-st-mx,
@@ -22,24 +24,37 @@ $resizeActive: '[data-cms-element-resizer="true"]';
22
24
  // )
23
25
  // )
24
26
  // );
25
-
26
27
  width: var(
27
- --_sf-mob-el-wh-st-mx,
28
- var(
29
- --_sf-tab-el-wh-st-mx,
30
- var(
31
- --_sf-el-wh-st-mx,
32
- calc(
33
- 1% *
34
- var(
35
- --_ctm-mob-ele-nw-wh-vl,
36
- var(--_ctm-tab-ele-nw-wh-vl, var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh)))
37
- )
28
+ --_sf-el-wh-st-mx,
29
+ calc(
30
+ 1% *
31
+ var(
32
+ --_ctm-mob-ele-nw-wh-vl,
33
+ var(--_ctm-tab-ele-nw-wh-vl, var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh)))
38
34
  )
39
- )
40
35
  )
41
36
  );
42
37
 
38
+ &[data-view-state="full"] {
39
+ height: auto;
40
+ }
41
+ height: var(--_ctm-mob-lt-ht, var(--_ctm-tab-lt-ht, var(--_ctm-lt-ht)));
42
+
43
+ --_aspect-ratio: calc(
44
+ 1 *
45
+ (
46
+ var(--_ctm-mob-lt-ht, var(--_ctm-tab-lt-ht, var(--_ctm-lt-ht, var(--_tst-lt-ht)))) /
47
+ var(--_ctm-mob-lt-wh, var(--_ctm-tab-lt-wh, var(--_ctm-lt-wh, var(--_tst-lt-wh))))
48
+ )
49
+ );
50
+ &[data-view-state="full"] {
51
+ & > .wrapper {
52
+ & > div {
53
+ height: 100%;
54
+ }
55
+ }
56
+ }
57
+
43
58
  // height: auto;
44
59
 
45
60
  margin: var(
@@ -118,10 +133,12 @@ $resizeActive: '[data-cms-element-resizer="true"]';
118
133
  display: flex;
119
134
  flex-direction: column;
120
135
  padding: 2rem;
136
+ height: 100%;
121
137
  .single__bundle_container {
122
138
  display: flex;
123
139
  flex-direction: column;
124
140
  gap: 16px;
141
+ height: 100%;
125
142
 
126
143
  .bundle__header {
127
144
  display: flex;
@@ -217,8 +234,13 @@ $resizeActive: '[data-cms-element-resizer="true"]';
217
234
  flex-direction: column;
218
235
  gap: var(--_ctm-lt-im-gp);
219
236
  align-items: flex-start;
237
+ height: 100%;
238
+ & > div {
239
+ height: 100%;
240
+ }
220
241
 
221
242
  .bundle-image-container {
243
+ height: 100%;
222
244
  background-color: var(--_ctm-dn-pt-cd-dn-bd-cr);
223
245
  border-width: var(--_ctm-dn-pt-cd-dn-br-wh);
224
246
  border-style: var(--_ctm-dn-pt-cd-dn-br-se);
@@ -232,7 +254,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
232
254
  gap: var(--_ctm-lt-ig-tt-sg);
233
255
 
234
256
  .showcase-img {
235
- height: 400px;
257
+ flex-grow: 1;
236
258
  padding: 16px;
237
259
  align-items: center;
238
260
  justify-content: center;
@@ -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%;
@@ -1,5 +1,6 @@
1
1
  @use "sass:map";
2
2
  @use "sass:list";
3
+ @use "./functions.scss" as *;
3
4
 
4
5
  $resizerId: "[data-cms-tool='cms-element-resizer']";
5
6
  $resizeActive: '[data-cms-element-resizer="true"]';
@@ -228,7 +229,11 @@ $dark-color: #343a40;
228
229
  &.open {
229
230
  transition: max-height 800ms ease-in;
230
231
  .accordion-header {
231
- background-color: var(--_gray-200);
232
+ // background-color: var(--_gray-200);
233
+ background-color: var(
234
+ --_ctm-mob-dn-an-tb-an-hr-bd-cr,
235
+ var(--_ctm-tab-dn-an-tb-an-hr-bd-cr, var(--_ctm-dn-an-tb-an-hr-bd-cr))
236
+ );
232
237
  }
233
238
  .accordion-body {
234
239
  transition: max-height 800ms ease-in;
@@ -1054,45 +1059,7 @@ $dark-color: #343a40;
1054
1059
  var(--_ctm-tab-dn-an-tb-fm-wr-is-pg, var(--_ctm-dn-an-tb-fm-wr-is-pg))
1055
1060
  );
1056
1061
  &::placeholder {
1057
- font-family: var(
1058
- --_ctm-mob-dn-an-tb-fm-wr-is-ft-fy,
1059
- var(--_ctm-tab-dn-an-tb-fm-wr-is-ft-fy, var(--_ctm-dn-an-tb-fm-wr-is-ft-fy))
1060
- );
1061
- color: var(
1062
- --_ctm-mob-dn-an-tb-fm-wr-is-cr,
1063
- var(--_ctm-tab-dn-an-tb-fm-wr-is-cr, var(--_ctm-dn-an-tb-fm-wr-is-cr))
1064
- );
1065
- font-weight: var(
1066
- --_ctm-mob-dn-an-tb-fm-wr-is-ft-wt,
1067
- var(--_ctm-tab-dn-an-tb-fm-wr-is-ft-wt, var(--_ctm-dn-an-tb-fm-wr-is-ft-wt))
1068
- );
1069
- font-size: var(
1070
- --_ctm-mob-dn-an-tb-fm-wr-is-ft-se,
1071
- var(--_ctm-tab-dn-an-tb-fm-wr-is-ft-se, var(--_ctm-dn-an-tb-fm-wr-is-ft-se))
1072
- );
1073
- text-decoration: var(
1074
- --_ctm-mob-dn-an-tb-fm-wr-is-ue,
1075
- var(--_ctm-tab-dn-an-tb-fm-wr-is-ue, var(--_ctm-dn-an-tb-fm-wr-is-ue))
1076
- );
1077
- letter-spacing: var(
1078
- --_ctm-mob-dn-an-tb-fm-wr-is-lr-sg,
1079
- var(--_ctm-tab-dn-an-tb-fm-wr-is-lr-sg, var(--_ctm-dn-an-tb-fm-wr-is-lr-sg))
1080
- );
1081
- line-height: var(
1082
- --_ctm-mob-dn-an-tb-fm-wr-is-le-ht,
1083
- var(--_ctm-tab-dn-an-tb-fm-wr-is-le-ht, var(--_ctm-dn-an-tb-fm-wr-is-le-ht))
1084
- );
1085
- font-style: var(
1086
- --_ctm-mob-dn-an-tb-fm-wr-is-ft-se-ic,
1087
- var(
1088
- --_ctm-tab-dn-an-tb-fm-wr-is-ft-se-ic,
1089
- var(--_ctm-dn-an-tb-fm-wr-is-ft-se-ic)
1090
- )
1091
- );
1092
- text-align: var(
1093
- --_ctm-mob-dn-an-tb-fm-wr-is-tt-an,
1094
- var(--_ctm-tab-dn-an-tb-fm-wr-is-tt-an, var(--_ctm-dn-an-tb-fm-wr-is-tt-an))
1095
- );
1062
+ color: var(--_gray-400);
1096
1063
  }
1097
1064
  input &:focus-within {
1098
1065
  border: 1px solid var(--_primary-300);
@@ -1106,41 +1073,7 @@ $dark-color: #343a40;
1106
1073
  var(--_ctm-tab-dn-an-tb-fm-wr-is-ft-fy, var(--_ctm-dn-an-tb-fm-wr-is-ft-fy))
1107
1074
  );
1108
1075
  &::placeholder {
1109
- color: var(
1110
- --_ctm-mob-dn-an-tb-fm-wr-is-cr,
1111
- var(--_ctm-tab-dn-an-tb-fm-wr-is-cr, var(--_ctm-dn-an-tb-fm-wr-is-cr))
1112
- );
1113
- font-weight: var(
1114
- --_ctm-mob-dn-an-tb-fm-wr-is-ft-wt,
1115
- var(--_ctm-tab-dn-an-tb-fm-wr-is-ft-wt, var(--_ctm-dn-an-tb-fm-wr-is-ft-wt))
1116
- );
1117
- font-size: var(
1118
- --_ctm-mob-dn-an-tb-fm-wr-is-ft-se,
1119
- var(--_ctm-tab-dn-an-tb-fm-wr-is-ft-se, var(--_ctm-dn-an-tb-fm-wr-is-ft-se))
1120
- );
1121
- text-decoration: var(
1122
- --_ctm-mob-dn-an-tb-fm-wr-is-ue,
1123
- var(--_ctm-tab-dn-an-tb-fm-wr-is-ue, var(--_ctm-dn-an-tb-fm-wr-is-ue))
1124
- );
1125
- letter-spacing: var(
1126
- --_ctm-mob-dn-an-tb-fm-wr-is-lr-sg,
1127
- var(--_ctm-tab-dn-an-tb-fm-wr-is-lr-sg, var(--_ctm-dn-an-tb-fm-wr-is-lr-sg))
1128
- );
1129
- line-height: var(
1130
- --_ctm-mob-dn-an-tb-fm-wr-is-le-ht,
1131
- var(--_ctm-tab-dn-an-tb-fm-wr-is-le-ht, var(--_ctm-dn-an-tb-fm-wr-is-le-ht))
1132
- );
1133
- font-style: var(
1134
- --_ctm-mob-dn-an-tb-fm-wr-is-ft-se-ic,
1135
- var(
1136
- --_ctm-tab-dn-an-tb-fm-wr-is-ft-se-ic,
1137
- var(--_ctm-dn-an-tb-fm-wr-is-ft-se-ic)
1138
- )
1139
- );
1140
- text-align: var(
1141
- --_ctm-mob-dn-an-tb-fm-wr-is-tt-an,
1142
- var(--_ctm-tab-dn-an-tb-fm-wr-is-tt-an, var(--_ctm-dn-an-tb-fm-wr-is-tt-an))
1143
- );
1076
+ color: var(--_gray-300);
1144
1077
  }
1145
1078
  }
1146
1079
 
@@ -2323,7 +2256,8 @@ $dark-color: #343a40;
2323
2256
  justify-content: space-between;
2324
2257
  font-weight: 600;
2325
2258
  .cc_tertiary_btn {
2326
- color: var(--_primary-400);
2259
+ // color: var(--_primary-400);
2260
+ color: var(--_thm-cs-tt-ls-as);
2327
2261
  font-size: 14px;
2328
2262
  &:hover {
2329
2263
  text-decoration: underline;
@@ -5360,6 +5294,7 @@ $dark-color: #343a40;
5360
5294
  .chk_address_actions {
5361
5295
  display: flex;
5362
5296
  gap: 12px;
5297
+ margin-top: 16px;
5363
5298
  }
5364
5299
 
5365
5300
  .chk_payment-card__note {
@@ -6042,10 +5977,11 @@ $dark-color: #343a40;
6042
5977
  --_ctm-mob-dn-an-tb-bs-ty-py-dt-se-br-wh,
6043
5978
  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))
6044
5979
  );
6045
- color: var(
6046
- --_ctm-mob-dn-an-tb-bs-ty-py-dt-se-cr,
6047
- var(--_ctm-tab-dn-an-tb-bs-ty-py-dt-se-cr, var(--_ctm-dn-an-tb-bs-ty-py-dt-se-cr))
6048
- );
5980
+ // color: var(
5981
+ // --_ctm-mob-dn-an-tb-bs-ty-py-dt-se-cr,
5982
+ // var(--_ctm-tab-dn-an-tb-bs-ty-py-dt-se-cr, var(--_ctm-dn-an-tb-bs-ty-py-dt-se-cr))
5983
+ // );
5984
+ color: var(--_thm-cs-tt-ls-as);
6049
5985
  font-family: var(
6050
5986
  --_ctm-mob-dn-an-tb-bs-ty-py-dt-se-ft-fy,
6051
5987
  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))
@@ -6190,10 +6126,11 @@ $dark-color: #343a40;
6190
6126
  --_ctm-mob-dn-an-tb-bs-py-dt-se-br-wh,
6191
6127
  var(--_ctm-tab-dn-an-tb-bs-py-dt-se-br-wh, var(--_ctm-dn-an-tb-bs-py-dt-se-br-wh))
6192
6128
  );
6193
- color: var(
6194
- --_ctm-mob-dn-an-tb-bs-py-dt-se-cr,
6195
- var(--_ctm-tab-dn-an-tb-bs-py-dt-se-cr, var(--_ctm-dn-an-tb-bs-py-dt-se-cr))
6196
- );
6129
+ color: var(--_thm-cs-tt-ls-as);
6130
+ // color: var(
6131
+ // --_ctm-mob-dn-an-tb-bs-py-dt-se-cr,
6132
+ // var(--_ctm-tab-dn-an-tb-bs-py-dt-se-cr, var(--_ctm-dn-an-tb-bs-py-dt-se-cr))
6133
+ // );
6197
6134
  font-family: var(
6198
6135
  --_ctm-mob-dn-an-tb-bs-py-dt-se-ft-fy,
6199
6136
  var(--_ctm-tab-dn-an-tb-bs-py-dt-se-ft-fy, var(--_ctm-dn-an-tb-bs-py-dt-se-ft-fy))
@@ -6492,10 +6429,11 @@ $dark-color: #343a40;
6492
6429
  --_ctm-mob-dn-an-tb-bs-ty-py-dt-se-br-wh,
6493
6430
  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))
6494
6431
  );
6495
- color: var(
6496
- --_ctm-mob-dn-an-tb-bs-ty-py-dt-se-cr,
6497
- var(--_ctm-tab-dn-an-tb-bs-ty-py-dt-se-cr, var(--_ctm-dn-an-tb-bs-ty-py-dt-se-cr))
6498
- );
6432
+ // color: var(
6433
+ // --_ctm-mob-dn-an-tb-bs-ty-py-dt-se-cr,
6434
+ // var(--_ctm-tab-dn-an-tb-bs-ty-py-dt-se-cr, var(--_ctm-dn-an-tb-bs-ty-py-dt-se-cr))
6435
+ // );
6436
+ color: var(--_thm-cs-tt-ls-as);
6499
6437
  font-family: var(
6500
6438
  --_ctm-mob-dn-an-tb-bs-ty-py-dt-se-ft-fy,
6501
6439
  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);
@@ -27,7 +27,7 @@
27
27
  )
28
28
  );
29
29
  &[data-view-state="full"] {
30
- aspect-ratio: 1/0.01;
30
+ // aspect-ratio: 1/0.01;
31
31
  & > .wrapper {
32
32
  & > div {
33
33
  height: 100%;