@sc-360-v2/storefront-cms-library 0.3.47 → 0.3.48
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/builder.js +1 -1
- package/dist/buy-for-tab.scss +3 -1
- package/dist/checkout.scss +131 -6
- package/dist/confirmationModal.scss +1 -0
- package/dist/profile.scss +84 -21
- package/dist/shipping-payments.scss +200 -45
- package/dist/types/builder/tools/element-edit/addProductsTab.d.ts +32 -1
- package/dist/types/builder/tools/element-edit/cartSummary.d.ts +79 -0
- package/dist/types/builder/tools/element-edit/orderStatus.d.ts +0 -8
- package/dist/types/builder/tools/element-edit/profile.d.ts +17 -1
- package/dist/types/builder/tools/element-edit/shipping-payments.d.ts +1012 -14
- package/package.json +1 -1
package/dist/buy-for-tab.scss
CHANGED
|
@@ -126,6 +126,7 @@ $tabBodyWrapper: #{$tabBody}__wrapper;
|
|
|
126
126
|
& > div {
|
|
127
127
|
&.#{$tabHeader} {
|
|
128
128
|
display: var(--_d-flex);
|
|
129
|
+
border-bottom: 1px solid var(--_gray-200);
|
|
129
130
|
|
|
130
131
|
&[data-hs-br="false"] {
|
|
131
132
|
--_hide-btn-border: none;
|
|
@@ -445,7 +446,8 @@ $tabBodyWrapper: #{$tabBody}__wrapper;
|
|
|
445
446
|
}
|
|
446
447
|
// width: max-content;
|
|
447
448
|
|
|
448
|
-
font-family:
|
|
449
|
+
font-family:
|
|
450
|
+
var(
|
|
449
451
|
--_sf-buy-sd-ft-fy,
|
|
450
452
|
var(
|
|
451
453
|
--_sf-buy-hr-ft-fy,
|
package/dist/checkout.scss
CHANGED
|
@@ -208,14 +208,12 @@ $dark-color: #343a40;
|
|
|
208
208
|
}
|
|
209
209
|
|
|
210
210
|
.chk_checkout_accordion {
|
|
211
|
-
font-family: Arial, sans-serif;
|
|
212
|
-
font-size: 0.95rem;
|
|
213
|
-
color: $dark-color;
|
|
214
211
|
display: flex;
|
|
215
212
|
padding: var(--_ctm-lt-pg);
|
|
216
213
|
flex-direction: column;
|
|
217
214
|
gap: var(--_ctm-lt-te-ad-it-gp);
|
|
218
215
|
word-break: keep-all;
|
|
216
|
+
padding-bottom: 24px;
|
|
219
217
|
|
|
220
218
|
.chk_checkout_title {
|
|
221
219
|
color: var(--_ctm-dn-ct-hg-dn-cr);
|
|
@@ -316,6 +314,7 @@ $dark-color: #343a40;
|
|
|
316
314
|
}
|
|
317
315
|
|
|
318
316
|
.accordion-body {
|
|
317
|
+
margin-bottom: 16px;
|
|
319
318
|
.summary {
|
|
320
319
|
.chk_shipping_method_label {
|
|
321
320
|
display: flex;
|
|
@@ -1100,6 +1099,129 @@ $dark-color: #343a40;
|
|
|
1100
1099
|
text-decoration: var(--_ctm-dn-pt-os-dn-pt-hg-dn-ue);
|
|
1101
1100
|
}
|
|
1102
1101
|
|
|
1102
|
+
// gift card styles
|
|
1103
|
+
.chk_gft_crd_wrapper {
|
|
1104
|
+
display: flex;
|
|
1105
|
+
justify-content: space-between;
|
|
1106
|
+
align-items: center;
|
|
1107
|
+
padding: 16px 16px 0 16px;
|
|
1108
|
+
&_item {
|
|
1109
|
+
display: flex;
|
|
1110
|
+
align-items: center;
|
|
1111
|
+
gap: 16px;
|
|
1112
|
+
&_icon {
|
|
1113
|
+
width: 40px;
|
|
1114
|
+
height: 40px;
|
|
1115
|
+
border: 1px solid var(--_gray-200);
|
|
1116
|
+
border-radius: 6px;
|
|
1117
|
+
display: flex;
|
|
1118
|
+
justify-content: center;
|
|
1119
|
+
align-items: center;
|
|
1120
|
+
}
|
|
1121
|
+
&_info {
|
|
1122
|
+
display: flex;
|
|
1123
|
+
flex-direction: column;
|
|
1124
|
+
&_title {
|
|
1125
|
+
font-size: 14px;
|
|
1126
|
+
margin-bottom: 4px;
|
|
1127
|
+
font-weight: 600;
|
|
1128
|
+
}
|
|
1129
|
+
&_desc {
|
|
1130
|
+
display: flex;
|
|
1131
|
+
&_value {
|
|
1132
|
+
font-size: 12px;
|
|
1133
|
+
color: var(--_gray-600);
|
|
1134
|
+
}
|
|
1135
|
+
&_label {
|
|
1136
|
+
font-size: 12px;
|
|
1137
|
+
color: var(--_gray-900);
|
|
1138
|
+
}
|
|
1139
|
+
}
|
|
1140
|
+
}
|
|
1141
|
+
&_pin {
|
|
1142
|
+
margin-left: 36px;
|
|
1143
|
+
input[type="number"] {
|
|
1144
|
+
border: 1px solid var(--_gray-300);
|
|
1145
|
+
border-radius: 4px;
|
|
1146
|
+
background-color: var(--_base-white);
|
|
1147
|
+
width: 95px;
|
|
1148
|
+
height: 44px;
|
|
1149
|
+
padding-inline: 10px;
|
|
1150
|
+
&:focus {
|
|
1151
|
+
outline: 2px solid var(--_primary-100);
|
|
1152
|
+
border: 1px solid var(--_primary-300);
|
|
1153
|
+
}
|
|
1154
|
+
}
|
|
1155
|
+
}
|
|
1156
|
+
}
|
|
1157
|
+
|
|
1158
|
+
&_input {
|
|
1159
|
+
border: 1px solid var(--_gray-300);
|
|
1160
|
+
border-radius: 4px;
|
|
1161
|
+
background-color: var(--_base-white);
|
|
1162
|
+
height: 44px;
|
|
1163
|
+
width: 100px;
|
|
1164
|
+
display: flex;
|
|
1165
|
+
align-items: center;
|
|
1166
|
+
gap: 8px;
|
|
1167
|
+
padding-left: 10px;
|
|
1168
|
+
input[type="number"] {
|
|
1169
|
+
background-color: var(--_base-white);
|
|
1170
|
+
padding-right: 10px;
|
|
1171
|
+
}
|
|
1172
|
+
&:focus-within {
|
|
1173
|
+
outline: 2px solid var(--_primary-100);
|
|
1174
|
+
border: 1px solid var(--_primary-300);
|
|
1175
|
+
}
|
|
1176
|
+
}
|
|
1177
|
+
}
|
|
1178
|
+
.chk_gft_crd_wrapper {
|
|
1179
|
+
&_btn {
|
|
1180
|
+
text-align: left;
|
|
1181
|
+
margin-bottom: 16px;
|
|
1182
|
+
color: var(--_primary-400);
|
|
1183
|
+
&:hover {
|
|
1184
|
+
text-decoration: underline;
|
|
1185
|
+
}
|
|
1186
|
+
}
|
|
1187
|
+
}
|
|
1188
|
+
|
|
1189
|
+
// payment other options styles
|
|
1190
|
+
.chk_pmnt_other_options {
|
|
1191
|
+
display: flex;
|
|
1192
|
+
justify-content: space-between;
|
|
1193
|
+
gap: 80px;
|
|
1194
|
+
padding: 16px;
|
|
1195
|
+
.chk_pmnt_other_options_left_container {
|
|
1196
|
+
display: flex;
|
|
1197
|
+
gap: 12px;
|
|
1198
|
+
.chk_pmnt_option_info_wrapper {
|
|
1199
|
+
display: flex;
|
|
1200
|
+
gap: 12px;
|
|
1201
|
+
.cards {
|
|
1202
|
+
display: flex;
|
|
1203
|
+
flex-direction: column;
|
|
1204
|
+
gap: 8px;
|
|
1205
|
+
.chk_payment_options_name {
|
|
1206
|
+
font-weight: 600;
|
|
1207
|
+
}
|
|
1208
|
+
span {
|
|
1209
|
+
font-size: 12px;
|
|
1210
|
+
.chk_payment_options_label {
|
|
1211
|
+
color: var(--_gray-600);
|
|
1212
|
+
}
|
|
1213
|
+
.chk_payment_options_value {
|
|
1214
|
+
color: var(--_gray-900);
|
|
1215
|
+
}
|
|
1216
|
+
}
|
|
1217
|
+
}
|
|
1218
|
+
}
|
|
1219
|
+
}
|
|
1220
|
+
.chk_pmnt_other_options_container {
|
|
1221
|
+
padding: 16px;
|
|
1222
|
+
}
|
|
1223
|
+
}
|
|
1224
|
+
|
|
1103
1225
|
&__other_option_wrapper {
|
|
1104
1226
|
display: flex;
|
|
1105
1227
|
width: 100%;
|
|
@@ -1113,8 +1235,12 @@ $dark-color: #343a40;
|
|
|
1113
1235
|
|
|
1114
1236
|
&_left_container {
|
|
1115
1237
|
display: flex;
|
|
1116
|
-
gap:
|
|
1238
|
+
gap: 80px;
|
|
1117
1239
|
align-items: flex-start;
|
|
1240
|
+
& > div {
|
|
1241
|
+
display: flex;
|
|
1242
|
+
gap: 12px;
|
|
1243
|
+
}
|
|
1118
1244
|
|
|
1119
1245
|
@media (max-width: 500px) {
|
|
1120
1246
|
flex-wrap: wrap;
|
|
@@ -1176,7 +1302,6 @@ $dark-color: #343a40;
|
|
|
1176
1302
|
&__info_wrapper {
|
|
1177
1303
|
display: flex;
|
|
1178
1304
|
flex-direction: column;
|
|
1179
|
-
white-space: nowrap;
|
|
1180
1305
|
|
|
1181
1306
|
.chk_payment_options_name {
|
|
1182
1307
|
color: var(--_ctm-dn-pt-os-dn-pt-ne-dn-cr);
|
|
@@ -1224,7 +1349,7 @@ $dark-color: #343a40;
|
|
|
1224
1349
|
|
|
1225
1350
|
&_input {
|
|
1226
1351
|
display: flex;
|
|
1227
|
-
padding:
|
|
1352
|
+
padding: 9px 12px;
|
|
1228
1353
|
align-items: center;
|
|
1229
1354
|
max-width: 96px;
|
|
1230
1355
|
background-color: var(--_ctm-dn-pt-os-dn-pt-os-it-dn-dt-se-bd-cr);
|
package/dist/profile.scss
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
@use "sass:map";
|
|
2
2
|
@use "sass:list";
|
|
3
|
+
@use "./functions.scss" as *;
|
|
3
4
|
|
|
4
5
|
[data-div-type="element"] {
|
|
5
6
|
&[data-element-type="profile"] {
|
|
@@ -27,6 +28,14 @@
|
|
|
27
28
|
// justify-content: center;
|
|
28
29
|
}
|
|
29
30
|
|
|
31
|
+
&[data-show-text-avatar-border="true"] {
|
|
32
|
+
.profile__avatar__initials {
|
|
33
|
+
border-color: prepareMediaVariable(--_ctm-dn-tt-ar-br-cr);
|
|
34
|
+
border-style: prepareMediaVariable(--_ctm-dn-tt-ar-br-se);
|
|
35
|
+
border-width: prepareMediaVariable(--_ctm-dn-tt-ar-br-wh);
|
|
36
|
+
}
|
|
37
|
+
}
|
|
38
|
+
|
|
30
39
|
&[data-widget-border="true"] {
|
|
31
40
|
.profile__section {
|
|
32
41
|
border-color: var(
|
|
@@ -74,6 +83,41 @@
|
|
|
74
83
|
var(--_ctm-mob-dn-pe-wt-sw-cr, var(--_ctm-tab-dn-pe-wt-sw-cr, var(--_ctm-dn-pe-wt-sw-cr)))
|
|
75
84
|
);
|
|
76
85
|
|
|
86
|
+
.collapse__icon {
|
|
87
|
+
svg {
|
|
88
|
+
width: var(
|
|
89
|
+
--_ctm-dn-ar-ln-ar-in-se,
|
|
90
|
+
var(--_ctm-dn-ce-in-in-se, var(--_ctm-dn-ce-in-in-se))
|
|
91
|
+
);
|
|
92
|
+
height: var(
|
|
93
|
+
--_ctm-dn-ce-in-in-se,
|
|
94
|
+
var(--_ctm-dn-ce-in-in-se, var(--_ctm-dn-ce-in-in-se))
|
|
95
|
+
);
|
|
96
|
+
path {
|
|
97
|
+
stroke: var(
|
|
98
|
+
--_ctm-mob-dn-ce-in-in-c1,
|
|
99
|
+
var(--_ctm-tab-dn-ce-in-cr, var(--_ctm-dn-ce-in-in-c1))
|
|
100
|
+
);
|
|
101
|
+
}
|
|
102
|
+
}
|
|
103
|
+
}
|
|
104
|
+
.expand__icon {
|
|
105
|
+
width: prepareMediaVariable(--_ctm-dn-ed-in-in-se);
|
|
106
|
+
height: prepareMediaVariable(--_ctm-dn-ed-in-in-se);
|
|
107
|
+
|
|
108
|
+
svg {
|
|
109
|
+
width: prepareMediaVariable(--_ctm-dn-ed-in-in-se);
|
|
110
|
+
height: prepareMediaVariable(--_ctm-dn-ed-in-in-se);
|
|
111
|
+
|
|
112
|
+
path {
|
|
113
|
+
stroke: var(
|
|
114
|
+
--_ctm-mob-dn-ed-in-in-c1,
|
|
115
|
+
var(--_ctm-tab-dn-ed-in-cr, var(--_ctm-dn-ed-in-in-c1))
|
|
116
|
+
);
|
|
117
|
+
}
|
|
118
|
+
}
|
|
119
|
+
}
|
|
120
|
+
|
|
77
121
|
.profile__avatar__before__login {
|
|
78
122
|
svg {
|
|
79
123
|
width: var(
|
|
@@ -93,6 +137,7 @@
|
|
|
93
137
|
}
|
|
94
138
|
}
|
|
95
139
|
}
|
|
140
|
+
|
|
96
141
|
.profile__avatar__after__login {
|
|
97
142
|
svg {
|
|
98
143
|
width: var(
|
|
@@ -112,6 +157,34 @@
|
|
|
112
157
|
}
|
|
113
158
|
}
|
|
114
159
|
}
|
|
160
|
+
.profile__avatar__initials {
|
|
161
|
+
// width: prepareMediaVariable(--_ctm-lt-tt-ar-se);
|
|
162
|
+
// height: prepareMediaVariable(--_ctm-lt-tt-ar-se);
|
|
163
|
+
width: var(--_ctm-mob-lt-tt-ar-se, var(--_ctm-tab-lt-tt-ar-se, var(--_ctm-lt-tt-ar-se)));
|
|
164
|
+
height: var(--_ctm-mob-lt-tt-ar-se, var(--_ctm-tab-lt-tt-ar-se, var(--_ctm-lt-tt-ar-se)));
|
|
165
|
+
background-color: prepareMediaVariable(--_ctm-dn-tt-ar-bd-cr);
|
|
166
|
+
|
|
167
|
+
font-family: prepareMediaVariable(--_ctm-dn-tt-ar-ft-fy), sans-serif;
|
|
168
|
+
font-size: prepareMediaVariable(--_ctm-dn-tt-ar-ft-se);
|
|
169
|
+
color: prepareMediaVariable(--_ctm-dn-tt-ar-cr);
|
|
170
|
+
font-weight: prepareMediaVariable(--_ctm-dn-tt-ar-ft-wt);
|
|
171
|
+
text-decoration: prepareMediaVariable(--_ctm-dn-tt-ar-ue);
|
|
172
|
+
font-style: prepareMediaVariable(--_ctm-dn-tt-ar-ft-se-ic);
|
|
173
|
+
text-align: #{prepareMediaVariable(--_ctm-dn-tt-ar-tt-an)};
|
|
174
|
+
letter-spacing: #{prepareMediaVariable(--_ctm-dn-tt-ar-lr-sg)};
|
|
175
|
+
line-height: #{prepareMediaVariable(--_ctm-dn-tt-ar-le-ht)};
|
|
176
|
+
border-radius: 50%;
|
|
177
|
+
// color: white;
|
|
178
|
+
// font-weight: 600;
|
|
179
|
+
// font-size: 18px;
|
|
180
|
+
display: flex;
|
|
181
|
+
justify-content: center;
|
|
182
|
+
text-transform: uppercase;
|
|
183
|
+
align-items: center;
|
|
184
|
+
// user-select: none;
|
|
185
|
+
// font-family: "Arial", sans-serif;
|
|
186
|
+
// letter-spacing: 1px;
|
|
187
|
+
}
|
|
115
188
|
|
|
116
189
|
.icon {
|
|
117
190
|
display: flex;
|
|
@@ -221,32 +294,22 @@
|
|
|
221
294
|
}
|
|
222
295
|
.add_order_menu {
|
|
223
296
|
position: absolute;
|
|
224
|
-
top:
|
|
225
|
-
left:
|
|
226
|
-
|
|
227
|
-
|
|
297
|
+
top: calc(100% + var(--_ctm-dn-pe-wt-cr-ot-y, 0px));
|
|
298
|
+
left: 50%;
|
|
299
|
+
transform: translateX(calc(-50% + var(--_ctm-dn-pe-wt-cr-ot-x, 0px)));
|
|
300
|
+
width: prepareMediaVariable(--_ctm-lt-dn-wh);
|
|
301
|
+
background-color: var(
|
|
302
|
+
--_ctm-mob-dn-dn-is-dt-se-bd-cr,
|
|
303
|
+
var(--_ctm-tab-dn-dn-is-dt-se-bd-cr, var(--_ctm-dn-dn-is-dt-se-bd-cr))
|
|
304
|
+
);
|
|
228
305
|
border-radius: 10px;
|
|
229
|
-
|
|
230
|
-
padding: 8px 0;
|
|
306
|
+
// padding: 8px 0;
|
|
231
307
|
z-index: 10;
|
|
232
|
-
// background-color: var(
|
|
233
|
-
// --_sf-hr-bd-cr,
|
|
234
|
-
// var(
|
|
235
|
-
// --_ctm-mob-dn-pe-wt-bd-cr,
|
|
236
|
-
// var(--_ctm-tab-dn-pe-wt-bd-cr, var(--_ctm-dn-pe-wt-bd-cr))
|
|
237
|
-
// )
|
|
238
|
-
// );
|
|
239
|
-
// border-radius: var(
|
|
240
|
-
// --_sf-hr-br-br,
|
|
241
|
-
// var(
|
|
242
|
-
// --_ctm-mob-dn-pe-wt-br-rs,
|
|
243
|
-
// var(--_ctm-tab-dn-pe-wt-br-rs, var(--_ctm-dn-pe-wt-br-rs))
|
|
244
|
-
// )
|
|
245
|
-
// );
|
|
246
308
|
}
|
|
247
309
|
|
|
248
310
|
.add_order_item {
|
|
249
|
-
padding:
|
|
311
|
+
padding: prepareMediaVariable(--_ctm-dn-pe-wt-pg);
|
|
312
|
+
|
|
250
313
|
// font-size: 15px;
|
|
251
314
|
// font-weight: 500;
|
|
252
315
|
// color: #1f2937;
|