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

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;
@@ -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"]';
@@ -1054,45 +1055,7 @@ $dark-color: #343a40;
1054
1055
  var(--_ctm-tab-dn-an-tb-fm-wr-is-pg, var(--_ctm-dn-an-tb-fm-wr-is-pg))
1055
1056
  );
1056
1057
  &::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
- );
1058
+ color: var(--_gray-400);
1096
1059
  }
1097
1060
  input &:focus-within {
1098
1061
  border: 1px solid var(--_primary-300);
@@ -1106,41 +1069,7 @@ $dark-color: #343a40;
1106
1069
  var(--_ctm-tab-dn-an-tb-fm-wr-is-ft-fy, var(--_ctm-dn-an-tb-fm-wr-is-ft-fy))
1107
1070
  );
1108
1071
  &::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
- );
1072
+ color: var(--_gray-300);
1144
1073
  }
1145
1074
  }
1146
1075
 
@@ -5360,6 +5289,7 @@ $dark-color: #343a40;
5360
5289
  .chk_address_actions {
5361
5290
  display: flex;
5362
5291
  gap: 12px;
5292
+ margin-top: 16px;
5363
5293
  }
5364
5294
 
5365
5295
  .chk_payment-card__note {
@@ -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%;