@sc-360-v2/storefront-cms-library 0.4.37 → 0.4.38
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/bundleDetails.scss +1 -1
- package/dist/countdown.scss +122 -10
- package/dist/coupon.scss +119 -5
- package/dist/icons.js +1 -1
- package/dist/index.js +1 -1
- package/dist/uom-selector.scss +7 -7
- package/package.json +1 -1
package/dist/bundleDetails.scss
CHANGED
package/dist/countdown.scss
CHANGED
|
@@ -21,19 +21,19 @@
|
|
|
21
21
|
)
|
|
22
22
|
);
|
|
23
23
|
margin: var(--_ctm-mob-lt-mn, var(--_ctm-tab-lt-mn, var(--_ctm-lt-mn)));
|
|
24
|
-
aspect-ratio: 1 / var(--_sf-aspect-ratio);
|
|
25
|
-
--_aspect-ratio: calc(
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
);
|
|
24
|
+
// aspect-ratio: 1 / var(--_sf-aspect-ratio);
|
|
25
|
+
// --_aspect-ratio: calc(
|
|
26
|
+
// 1 *
|
|
27
|
+
// (
|
|
28
|
+
// var(--_ctm-mob-lt-ht, var(--_ctm-tab-lt-ht, var(--_ctm-lt-ht))) /
|
|
29
|
+
// var(--_ctm-mob-lt-wh, var(--_ctm-tab-lt-wh, var(--_ctm-lt-wh)))
|
|
30
|
+
// )
|
|
31
|
+
// );
|
|
32
32
|
|
|
33
33
|
& > .wrapper {
|
|
34
34
|
width: 100%;
|
|
35
35
|
// overflow: clip;
|
|
36
|
-
height: 100%;
|
|
36
|
+
// height: 100%;
|
|
37
37
|
&[data-widget-shadow="true"] {
|
|
38
38
|
box-shadow: var(
|
|
39
39
|
--_ctm-mob-dn-cn-wt-sw-ae,
|
|
@@ -228,7 +228,7 @@
|
|
|
228
228
|
|
|
229
229
|
.countdown__container {
|
|
230
230
|
display: flex;
|
|
231
|
-
height: 100%;
|
|
231
|
+
// height: 100%;
|
|
232
232
|
gap: var(
|
|
233
233
|
--_ctm-mob-dn-cn-lt-wt-tt-ad-im-sg,
|
|
234
234
|
var(--_ctm-tab-dn-cn-lt-wt-tt-ad-im-sg, var(--_ctm-dn-cn-lt-wt-tt-ad-im-sg))
|
|
@@ -243,9 +243,117 @@
|
|
|
243
243
|
var(--_ctm-tab-dn-cn-wt-br-rs, var(--_ctm-dn-cn-wt-br-rs))
|
|
244
244
|
);
|
|
245
245
|
|
|
246
|
+
&[data-show-divider="true"] {
|
|
247
|
+
&[data-text-position="left"] {
|
|
248
|
+
& > div:not(:first-child)::after {
|
|
249
|
+
content: "";
|
|
250
|
+
position: absolute;
|
|
251
|
+
top: 0;
|
|
252
|
+
bottom: 0; /* For full height divider */
|
|
253
|
+
left: calc(
|
|
254
|
+
-1 *
|
|
255
|
+
(
|
|
256
|
+
var(
|
|
257
|
+
--_ctm-mob-dn-cn-lt-wt-tt-ad-im-sg,
|
|
258
|
+
var(--_ctm-tab-dn-cn-lt-wt-tt-ad-im-sg, var(--_ctm-dn-cn-lt-wt-tt-ad-im-sg))
|
|
259
|
+
) /
|
|
260
|
+
2
|
|
261
|
+
)
|
|
262
|
+
); /* Half of your gap, assuming divider is centered in the gap */
|
|
263
|
+
width: var(
|
|
264
|
+
--_ctm-mob-dn-cn-wt-dr-wt,
|
|
265
|
+
var(--_ctm-tab-dn-cn-wt-dr-wt, var(--_ctm-dn-cn-wt-dr-wt))
|
|
266
|
+
); /* Divider thickness */
|
|
267
|
+
background-color: var(
|
|
268
|
+
--_ctm-mob-dn-cn-wt-dr-cr,
|
|
269
|
+
var(--_ctm-tab-dn-cn-wt-dr-cr, var(--_ctm-dn-cn-wt-dr-cr))
|
|
270
|
+
); /* Divider color */
|
|
271
|
+
}
|
|
272
|
+
}
|
|
273
|
+
&[data-text-position="right"] {
|
|
274
|
+
& > div:not(:first-child)::after {
|
|
275
|
+
content: "";
|
|
276
|
+
position: absolute;
|
|
277
|
+
top: 0;
|
|
278
|
+
bottom: 0; /* For full height divider */
|
|
279
|
+
right: calc(
|
|
280
|
+
-1 *
|
|
281
|
+
(
|
|
282
|
+
var(
|
|
283
|
+
--_ctm-mob-dn-cn-lt-wt-tt-ad-im-sg,
|
|
284
|
+
var(--_ctm-tab-dn-cn-lt-wt-tt-ad-im-sg, var(--_ctm-dn-cn-lt-wt-tt-ad-im-sg))
|
|
285
|
+
) /
|
|
286
|
+
2
|
|
287
|
+
)
|
|
288
|
+
); /* Half of your gap, assuming divider is centered in the gap */
|
|
289
|
+
width: var(
|
|
290
|
+
--_ctm-mob-dn-cn-wt-dr-wt,
|
|
291
|
+
var(--_ctm-tab-dn-cn-wt-dr-wt, var(--_ctm-dn-cn-wt-dr-wt))
|
|
292
|
+
); /* Divider thickness */
|
|
293
|
+
background-color: var(
|
|
294
|
+
--_ctm-mob-dn-cn-wt-dr-cr,
|
|
295
|
+
var(--_ctm-tab-dn-cn-wt-dr-cr, var(--_ctm-dn-cn-wt-dr-cr))
|
|
296
|
+
); /* Divider color */
|
|
297
|
+
}
|
|
298
|
+
}
|
|
299
|
+
&[data-text-position="top"] {
|
|
300
|
+
& > div:not(:last-child)::before {
|
|
301
|
+
content: "";
|
|
302
|
+
position: absolute;
|
|
303
|
+
left: 0;
|
|
304
|
+
right: 0;
|
|
305
|
+
bottom: calc(
|
|
306
|
+
-1 *
|
|
307
|
+
(
|
|
308
|
+
var(
|
|
309
|
+
--_ctm-mob-dn-cn-lt-wt-tt-ad-im-sg,
|
|
310
|
+
var(--_ctm-tab-dn-cn-lt-wt-tt-ad-im-sg, var(--_ctm-dn-cn-lt-wt-tt-ad-im-sg))
|
|
311
|
+
) /
|
|
312
|
+
2
|
|
313
|
+
)
|
|
314
|
+
);
|
|
315
|
+
height: var(
|
|
316
|
+
--_ctm-mob-dn-cn-wt-dr-wt,
|
|
317
|
+
var(--_ctm-tab-dn-cn-wt-dr-wt, var(--_ctm-dn-cn-wt-dr-wt))
|
|
318
|
+
);
|
|
319
|
+
background-color: var(
|
|
320
|
+
--_ctm-mob-dn-cn-wt-dr-cr,
|
|
321
|
+
var(--_ctm-tab-dn-cn-wt-dr-cr, var(--_ctm-dn-cn-wt-dr-cr))
|
|
322
|
+
);
|
|
323
|
+
}
|
|
324
|
+
}
|
|
325
|
+
&[data-text-position="bottom"] {
|
|
326
|
+
& > div:not(:first-child)::after {
|
|
327
|
+
content: "";
|
|
328
|
+
position: absolute;
|
|
329
|
+
left: 0;
|
|
330
|
+
right: 0;
|
|
331
|
+
bottom: calc(
|
|
332
|
+
-1 *
|
|
333
|
+
(
|
|
334
|
+
var(
|
|
335
|
+
--_ctm-mob-dn-cn-lt-wt-tt-ad-im-sg,
|
|
336
|
+
var(--_ctm-tab-dn-cn-lt-wt-tt-ad-im-sg, var(--_ctm-dn-cn-lt-wt-tt-ad-im-sg))
|
|
337
|
+
) /
|
|
338
|
+
2
|
|
339
|
+
)
|
|
340
|
+
);
|
|
341
|
+
height: var(
|
|
342
|
+
--_ctm-mob-dn-cn-wt-dr-wt,
|
|
343
|
+
var(--_ctm-tab-dn-cn-wt-dr-wt, var(--_ctm-dn-cn-wt-dr-wt))
|
|
344
|
+
);
|
|
345
|
+
background-color: var(
|
|
346
|
+
--_ctm-mob-dn-cn-wt-dr-cr,
|
|
347
|
+
var(--_ctm-tab-dn-cn-wt-dr-cr, var(--_ctm-dn-cn-wt-dr-cr))
|
|
348
|
+
);
|
|
349
|
+
}
|
|
350
|
+
}
|
|
351
|
+
}
|
|
352
|
+
|
|
246
353
|
.content__container {
|
|
247
354
|
display: flex;
|
|
248
355
|
flex-direction: column;
|
|
356
|
+
position: relative;
|
|
249
357
|
|
|
250
358
|
background-color: var(
|
|
251
359
|
--_ctm-mob-dn-cn-wt-tt-cr-dn-bd-cr,
|
|
@@ -270,6 +378,9 @@
|
|
|
270
378
|
--_ctm-mob-dn-cn-wt-tt-cr-lt-te-ad-dn-sg,
|
|
271
379
|
var(--_ctm-tab-dn-cn-wt-tt-cr-lt-te-ad-dn-sg, var(--_ctm-dn-cn-wt-tt-cr-lt-te-ad-dn-sg))
|
|
272
380
|
);
|
|
381
|
+
h1 {
|
|
382
|
+
white-space: nowrap;
|
|
383
|
+
}
|
|
273
384
|
}
|
|
274
385
|
|
|
275
386
|
.content__container {
|
|
@@ -375,6 +486,7 @@
|
|
|
375
486
|
}
|
|
376
487
|
|
|
377
488
|
.countdown {
|
|
489
|
+
position: relative;
|
|
378
490
|
width: 100%;
|
|
379
491
|
display: grid;
|
|
380
492
|
grid-auto-flow: column;
|
package/dist/coupon.scss
CHANGED
|
@@ -121,6 +121,10 @@ $resizeActive: '[data-cms-element-resizer="true"]';
|
|
|
121
121
|
var(--_ctm-tab-dn-cn-hr-br-wh, var(--_ctm-dn-cn-hr-br-wh))
|
|
122
122
|
);
|
|
123
123
|
padding: var(--_ctm-mob-dn-cn-hr-pg, var(--_ctm-tab-dn-cn-hr-pg, var(--_ctm-dn-cn-hr-pg)));
|
|
124
|
+
|
|
125
|
+
&.divider {
|
|
126
|
+
border-bottom: 1px dashed var(--_gray-300);
|
|
127
|
+
}
|
|
124
128
|
}
|
|
125
129
|
.coupon_code_body {
|
|
126
130
|
padding: var(
|
|
@@ -144,6 +148,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
|
|
|
144
148
|
var(--_ctm-tab-dn-cn-wt-cr-im-gp, var(--_ctm-dn-cn-wt-cr-im-gp))
|
|
145
149
|
);
|
|
146
150
|
.cpn__sale__icon {
|
|
151
|
+
margin-top: 4px;
|
|
147
152
|
.icon {
|
|
148
153
|
svg {
|
|
149
154
|
width: var(
|
|
@@ -741,11 +746,13 @@ $resizeActive: '[data-cms-element-resizer="true"]';
|
|
|
741
746
|
display: none;
|
|
742
747
|
}
|
|
743
748
|
}
|
|
744
|
-
|
|
745
|
-
|
|
746
|
-
|
|
747
|
-
|
|
748
|
-
|
|
749
|
+
.coupon-search-btn {
|
|
750
|
+
white-space: nowrap;
|
|
751
|
+
padding: var(
|
|
752
|
+
--_ctm-mob-dn-cn-wt-it-fd-pg,
|
|
753
|
+
var(--_ctm-tab-dn-cn-wt-it-fd-pg, var(--_ctm-dn-cn-wt-it-fd-pg))
|
|
754
|
+
);
|
|
755
|
+
}
|
|
749
756
|
}
|
|
750
757
|
.couponCode_divider {
|
|
751
758
|
border: 1px dashed #d0d5dd;
|
|
@@ -1122,3 +1129,110 @@ $resizeActive: '[data-cms-element-resizer="true"]';
|
|
|
1122
1129
|
}
|
|
1123
1130
|
}
|
|
1124
1131
|
}
|
|
1132
|
+
|
|
1133
|
+
// .coupon_code {
|
|
1134
|
+
// border: 1px solid var(--_gray-300);
|
|
1135
|
+
// border-radius: 4px;
|
|
1136
|
+
// .coupon_code_header {
|
|
1137
|
+
// background-color: var(--_gray-100);
|
|
1138
|
+
// padding: 12px 12px 14px 12px;
|
|
1139
|
+
// border-bottom: 0.5px solid var(--_gray-300);
|
|
1140
|
+
// h3 {
|
|
1141
|
+
// font-size: 16px;
|
|
1142
|
+
// color: var(--_gray-900);
|
|
1143
|
+
// }
|
|
1144
|
+
// }
|
|
1145
|
+
// .coupon_code_body {
|
|
1146
|
+
// display: flex;
|
|
1147
|
+
// flex-direction: column;
|
|
1148
|
+
// gap: 16px;
|
|
1149
|
+
// padding: 16px;
|
|
1150
|
+
|
|
1151
|
+
// .coupon_code_apply_section {
|
|
1152
|
+
// .coupon_code_fields_wrapper {
|
|
1153
|
+
// display: flex;
|
|
1154
|
+
// gap: 12px;
|
|
1155
|
+
// &.divider {
|
|
1156
|
+
// padding-bottom: 16px;
|
|
1157
|
+
// border-bottom: 1px dashed var(--_gray-300);
|
|
1158
|
+
// }
|
|
1159
|
+
// .coupon-search-input {
|
|
1160
|
+
// padding: 10px 16px;
|
|
1161
|
+
// border: 1px solid var(--_gray-300);
|
|
1162
|
+
// border-radius: 4px;
|
|
1163
|
+
// height: 40px;
|
|
1164
|
+
// &:focus {
|
|
1165
|
+
// outline: 2px solid var(--_gray-100);
|
|
1166
|
+
// }
|
|
1167
|
+
// }
|
|
1168
|
+
// .coupon-search-btn {
|
|
1169
|
+
// padding: 10px 16px 12px 16px;
|
|
1170
|
+
// white-space: nowrap;
|
|
1171
|
+
// height: 40px;
|
|
1172
|
+
// }
|
|
1173
|
+
// }
|
|
1174
|
+
// .coupon-list {
|
|
1175
|
+
// .coupon-item {
|
|
1176
|
+
// .coupon-info {
|
|
1177
|
+
// .coupon-title {
|
|
1178
|
+
// font-size: 16px;
|
|
1179
|
+
// font-weight: 700;
|
|
1180
|
+
// color: var(--_gray-900);
|
|
1181
|
+
// }
|
|
1182
|
+
// .coupon-desc {
|
|
1183
|
+
// font-size: 14px;
|
|
1184
|
+
// font-weight: 400;
|
|
1185
|
+
// color: var(--_gray-600);
|
|
1186
|
+
// }
|
|
1187
|
+
// .remove-btn {
|
|
1188
|
+
// padding: 12px;
|
|
1189
|
+
// color: var(--_gray-900);
|
|
1190
|
+
// }
|
|
1191
|
+
// }
|
|
1192
|
+
// }
|
|
1193
|
+
// }
|
|
1194
|
+
// }
|
|
1195
|
+
// .apply_coupon_code_body {
|
|
1196
|
+
// display: flex;
|
|
1197
|
+
// align-items: center;
|
|
1198
|
+
// justify-content: space-between;
|
|
1199
|
+
// gap: 12px;
|
|
1200
|
+
// &:not(:last-child) {
|
|
1201
|
+
// margin-bottom: 12px;
|
|
1202
|
+
// }
|
|
1203
|
+
// .apply_coupon_code_flex {
|
|
1204
|
+
// display: flex;
|
|
1205
|
+
// gap: 12px;
|
|
1206
|
+
// .cpn__sale__icon {
|
|
1207
|
+
// margin-top: 4px;
|
|
1208
|
+
// }
|
|
1209
|
+
// .apply_coupon_code {
|
|
1210
|
+
// display: flex;
|
|
1211
|
+
// flex-direction: column;
|
|
1212
|
+
// .cpn_sale_text {
|
|
1213
|
+
// font-size: 14px;
|
|
1214
|
+
// font-weight: 400;
|
|
1215
|
+
// color: var(--_gray-900);
|
|
1216
|
+
// }
|
|
1217
|
+
// }
|
|
1218
|
+
// }
|
|
1219
|
+
// .cpn_sale_desc {
|
|
1220
|
+
// font-size: 14px;
|
|
1221
|
+
// font-weight: 400;
|
|
1222
|
+
// color: var(--_gray-600);
|
|
1223
|
+
// }
|
|
1224
|
+
// .apply_coupon_code_btn {
|
|
1225
|
+
// padding: 8px 16px;
|
|
1226
|
+
// }
|
|
1227
|
+
// .remove_coupon_code_btn {
|
|
1228
|
+
// padding: 8px 16px;
|
|
1229
|
+
// border: 1px solid var(--_gray-300);
|
|
1230
|
+
// border-radius: 4px;
|
|
1231
|
+
// color: var(--_gray-900);
|
|
1232
|
+
// &:hover {
|
|
1233
|
+
// background-color: var(--_gray-100);
|
|
1234
|
+
// }
|
|
1235
|
+
// }
|
|
1236
|
+
// }
|
|
1237
|
+
// }
|
|
1238
|
+
// }
|