@sc-360-v2/storefront-cms-library 0.2.98 → 0.2.99

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.
@@ -0,0 +1,483 @@
1
+ @use "sass:map";
2
+ @use "sass:list";
3
+
4
+ [data-div-type="element"] {
5
+ &[data-element-type="orderStatus"] {
6
+ width: var(
7
+ --_ctm-mob-ele-nw-wh-st-mx,
8
+ var(
9
+ --_ctm-tab-ele-nw-wh-st-mx,
10
+ var(--_sf-el-wh-st-mx, calc(1% * var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh))))
11
+ )
12
+ );
13
+
14
+ margin: var(--_ctm-mob-lt-mn, var(--_ctm-tab-lt-mn, var(--_ctm-lt-mn)));
15
+
16
+ height: var(--_ctm-mob-lt-ht, var(--_ctm-tab-lt-ht, var(--_ctm-lt-ht))) !important;
17
+
18
+ // aspect-ratio: var(
19
+ // --_ctm-mob-aspect-ratio,
20
+ // var(--_ctm-tab-aspect-ratio, var(--_sf-aspect-ratio))
21
+ // );
22
+
23
+ position: relative;
24
+
25
+ & > .wrapper {
26
+ display: flex;
27
+ align-items: center;
28
+ justify-content: center;
29
+ width: 100%;
30
+ height: 100%;
31
+ }
32
+
33
+ .order-confirmation {
34
+ border: 1px solid #e0e0e0;
35
+ border-radius: 8px;
36
+ padding: 24px;
37
+ width: 100%;
38
+ height: 100%;
39
+ margin: 24px auto;
40
+ font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
41
+ color: #333;
42
+
43
+ /* ───────────── Header ───────────── */
44
+ .order-header {
45
+ color: var(--_ctm-mob-dn-dn-hr-cr, var(--_ctm-tab-dn-dn-hr-cr, var(--_ctm-dn-dn-hr-cr)));
46
+
47
+ background-color: var(--_ctm-dn-dn-hr-bd-cr);
48
+ margin: var(--_ctm-dn-dn-hr-mn);
49
+ padding: var(--_ctm-dn-dn-hr-pg);
50
+ border-color: var(--_ctm-dn-dn-hr-br-cr);
51
+
52
+ border-style: var(--_ctm-dn-dn-hr-br-se);
53
+ border-width: var(--_ctm-dn-dn-hr-br-wh);
54
+ border-radius: var(--_ctm-dn-dn-hr-br-rs);
55
+
56
+ box-shadow: var(
57
+ --_show-shadow,
58
+ var(
59
+ --_ctm-mob-dn-bd-ad-fl-sw-ae,
60
+ var(--_ctm-dn-dn-hr-sw-ae, var(--_ctm-dn-bd-ad-fl-sw-ae))
61
+ )
62
+ var(
63
+ --_ctm-mob-dn-bd-ad-fl-sw-br,
64
+ var(--_ctm-dn-dn-hr-sw-br, var(--_ctm-dn-bd-ad-fl-sw-br))
65
+ )
66
+ var(
67
+ --_ctm-mob-dn-bd-ad-fl-sw-sd,
68
+ var(--_ctm-dn-dn-hr-sw-sd, var(--_ctm-dn-bd-ad-fl-sw-sd))
69
+ )
70
+ var(
71
+ --_ctm-mob-dn-bd-ad-fl-sw-cr,
72
+ var(--_ctm-dn-dn-hr-sw-cr, var(--_ctm-dn-bd-ad-fl-sw-cr))
73
+ )
74
+ );
75
+
76
+ .user-info {
77
+ h3 {
78
+ // font-size: 1.1rem;
79
+ // margin: 0;
80
+ // color: #1e293b;
81
+
82
+ font-family: var(
83
+ --_ctm-mob-dn-dn-hr-ft-fy,
84
+ var(--_ctm-tab-dn-dn-hr-ft-fy, var(--_ctm-dn-dn-hr-ft-fy))
85
+ ),
86
+ sans-serif;
87
+ font-size: var(
88
+ --_ctm-mob-dn-dn-hr-ft-se,
89
+ var(--_ctm-tab-dn-dn-hr-ft-se, var(--_ctm-dn-dn-hr-ft-se))
90
+ );
91
+ font-weight: var(
92
+ --_ctm-mob-dn-dn-hr-ft-wt,
93
+ var(--_ctm-tab-dn-dn-hr-ft-wt, var(--_ctm-dn-dn-hr-ft-wt))
94
+ );
95
+ font-style: var(
96
+ --_ctm-mob-dn-dn-hr-ft-se-ic,
97
+ var(--_ctm-tab-dn-dn-hr-ft-se-ic, var(--_ctm-dn-dn-hr-ft-se-ic))
98
+ );
99
+ text-align: var(
100
+ --_ctm-mob-dn-dn-hr-tt-an,
101
+ var(--_ctm-tab-dn-dn-hr-tt-an, var(--_ctm-dn-dn-hr-tt-an))
102
+ );
103
+ letter-spacing: var(
104
+ --_ctm-mob-dn-dn-hr-lr-sg,
105
+ var(--_ctm-tab-dn-dn-hr-lr-sg, var(--_ctm-dn-dn-hr-lr-sg))
106
+ );
107
+ line-height: var(
108
+ --_ctm-mob-dn-dn-hr-le-ht,
109
+ var(--_ctm-tab-dn-dn-hr-le-ht, var(--_ctm-dn-dn-hr-le-ht-dc))
110
+ );
111
+ text-decoration: var(
112
+ --_ctm-mob-dn-dn-hr-ue,
113
+ var(--_ctm-tab-dn-dn-hr-ue, var(--_ctm-dn-dn-hr-ue))
114
+ );
115
+ }
116
+ .user-meta {
117
+ font-size: 0.85rem;
118
+ color: #6b7280;
119
+ margin: 4px 0 0;
120
+ }
121
+ }
122
+ }
123
+
124
+ /* ─────────── Success Banner ─────────── */
125
+ .order-successful {
126
+ display: flex;
127
+ align-items: center;
128
+ // background: #f0fdf4;
129
+ // border-radius: 6px;
130
+ // padding: 16px;
131
+ // margin-bottom: 24px;
132
+
133
+ background-color: var(--_ctm-dn-dn-tt-bd-cr);
134
+ margin: var(--_ctm-dn-dn-tt-mn);
135
+ padding: var(--_ctm-dn-dn-tt-pg);
136
+ border-color: var(--_ctm-dn-dn-tt-br-cr);
137
+
138
+ border-style: var(--_ctm-dn-dn-tt-br-se);
139
+ border-width: var(--_ctm-dn-dn-tt-br-wh);
140
+ border-radius: var(--_ctm-dn-dn-tt-br-rs);
141
+
142
+ box-shadow: var(
143
+ --_show-shadow,
144
+ var(
145
+ --_ctm-mob-dn-bd-ad-fl-sw-ae,
146
+ var(--_ctm-dn-dn-tt-sw-ae, var(--_ctm-dn-bd-ad-fl-sw-ae))
147
+ )
148
+ var(
149
+ --_ctm-mob-dn-bd-ad-fl-sw-br,
150
+ var(--_ctm-dn-dn-tt-sw-br, var(--_ctm-dn-bd-ad-fl-sw-br))
151
+ )
152
+ var(
153
+ --_ctm-mob-dn-bd-ad-fl-sw-sd,
154
+ var(--_ctm-dn-dn-tt-sw-sd, var(--_ctm-dn-bd-ad-fl-sw-sd))
155
+ )
156
+ var(
157
+ --_ctm-mob-dn-bd-ad-fl-sw-cr,
158
+ var(--_ctm-dn-dn-tt-sw-cr, var(--_ctm-dn-bd-ad-fl-sw-cr))
159
+ )
160
+ );
161
+
162
+ .check-icon {
163
+ font-size: 28px;
164
+ margin-right: 12px;
165
+ }
166
+ .success-text {
167
+ h2 {
168
+ margin: 0 0 4px;
169
+ font-size: 1.1rem;
170
+ font-weight: 600;
171
+ }
172
+ p {
173
+ margin: 0;
174
+ font-size: 0.7rem;
175
+ color: #374151;
176
+ }
177
+ }
178
+ }
179
+
180
+ /* ──────────── Order Details ──────────── */
181
+ .order-details-wrapper {
182
+ display: grid;
183
+ grid-template-columns: 2fr 1fr;
184
+ gap: 16px;
185
+ background: #fff;
186
+ border-radius: 6px;
187
+
188
+ margin-bottom: 24px;
189
+ }
190
+
191
+ .order-info-section,
192
+ .quick-actions-section {
193
+ h4 {
194
+ font-size: 0.9rem;
195
+ font-weight: 600;
196
+ color: #374151;
197
+ padding: 10px;
198
+ border-radius: 8px;
199
+ margin-bottom: 12px;
200
+ border: 1px solid #e0e0e0;
201
+ }
202
+ }
203
+
204
+ .order-info {
205
+ display: flex;
206
+ flex-direction: column;
207
+ gap: 16px; /* space between the two rows */
208
+
209
+ background-color: var(--_ctm-dn-dn-ds-bd-cr);
210
+ margin: var(--_ctm-dn-dn-ds-mn);
211
+ padding: var(--_ctm-dn-dn-ds-pg);
212
+ border-color: var(--_ctm-dn-dn-ds-br-cr);
213
+
214
+ border-style: var(--_ctm-dn-dn-ds-br-se);
215
+ border-width: var(--_ctm-dn-dn-ds-br-wh);
216
+ border-radius: var(--_ctm-dn-dn-ds-br-rs);
217
+
218
+ box-shadow: var(
219
+ --_show-shadow,
220
+ var(
221
+ --_ctm-mob-dn-bd-ad-fl-sw-ae,
222
+ var(--_ctm-dn-dn-ds-sw-ae, var(--_ctm-dn-bd-ad-fl-sw-ae))
223
+ )
224
+ var(
225
+ --_ctm-mob-dn-bd-ad-fl-sw-br,
226
+ var(--_ctm-dn-dn-ds-sw-br, var(--_ctm-dn-bd-ad-fl-sw-br))
227
+ )
228
+ var(
229
+ --_ctm-mob-dn-bd-ad-fl-sw-sd,
230
+ var(--_ctm-dn-dn-ds-sw-sd, var(--_ctm-dn-bd-ad-fl-sw-sd))
231
+ )
232
+ var(
233
+ --_ctm-mob-dn-bd-ad-fl-sw-cr,
234
+ var(--_ctm-dn-dn-ds-sw-cr, var(--_ctm-dn-bd-ad-fl-sw-cr))
235
+ )
236
+ );
237
+
238
+ .order-row {
239
+ display: grid;
240
+ gap: 12px 24px; /* 12px vertical, 24px horizontal */
241
+
242
+ /* First row: two equal columns + bottom border */
243
+ &:first-child {
244
+ grid-template-columns: repeat(2, 1fr);
245
+ border-bottom: 1px solid #f0f0f0;
246
+ padding-bottom: 12px;
247
+ }
248
+
249
+ /* Second row: three equal columns */
250
+ &:nth-child(2) {
251
+ grid-template-columns: repeat(3, 1fr);
252
+ }
253
+
254
+ /* Each individual info‐cell styling */
255
+ > div {
256
+ strong {
257
+ display: block;
258
+ font-size: 0.8rem;
259
+ color: #6b7280;
260
+ margin-bottom: 4px;
261
+ font-weight: 600;
262
+ }
263
+
264
+ p {
265
+ margin: 0;
266
+ font-size: 0.85rem;
267
+ color: #1e293b;
268
+ }
269
+
270
+ .status {
271
+ margin-left: 6px;
272
+ padding: 2px 6px;
273
+ border-radius: 8px;
274
+ font-size: 0.7rem;
275
+ font-weight: 500;
276
+ }
277
+ .link-button {
278
+ color: #2a33df;
279
+ }
280
+
281
+ .submitted {
282
+ background: #e0f2fe;
283
+ color: #0369a1;
284
+ }
285
+
286
+ .order-date {
287
+ margin-top: 2px;
288
+ font-size: 0.75rem;
289
+ color: #6b7280;
290
+ }
291
+
292
+ .inclusive-tax {
293
+ margin-left: 4px;
294
+ font-size: 0.7rem;
295
+ color: #6b7280;
296
+ }
297
+ }
298
+ }
299
+ }
300
+
301
+ /* ───────── Quick Actions ───────── */
302
+ .quick-actions {
303
+ display: flex;
304
+ flex-direction: column;
305
+
306
+ gap: 8px;
307
+
308
+ background-color: var(--_ctm-dn-dn-qk-as-bd-cr);
309
+ margin: var(--_ctm-dn-dn-qk-as-mn);
310
+ padding: var(--_ctm-dn-dn-qk-as-pg);
311
+ border-color: var(--_ctm-dn-dn-qk-as-br-cr);
312
+
313
+ border-style: var(--_ctm-dn-dn-qk-as-br-se);
314
+ border-width: var(--_ctm-dn-dn-qk-as-br-wh);
315
+ border-radius: var(--_ctm-dn-dn-qk-as-br-rs);
316
+
317
+ box-shadow: var(
318
+ --_show-shadow,
319
+ var(
320
+ --_ctm-mob-dn-bd-ad-fl-sw-ae,
321
+ var(--_ctm-dn-dn-qk-as-sw-ae, var(--_ctm-dn-bd-ad-fl-sw-ae))
322
+ )
323
+ var(
324
+ --_ctm-mob-dn-bd-ad-fl-sw-br,
325
+ var(--_ctm-dn-dn-qk-as-sw-br, var(--_ctm-dn-bd-ad-fl-sw-br))
326
+ )
327
+ var(
328
+ --_ctm-mob-dn-bd-ad-fl-sw-sd,
329
+ var(--_ctm-dn-dn-qk-as-sw-sd, var(--_ctm-dn-bd-ad-fl-sw-sd))
330
+ )
331
+ var(
332
+ --_ctm-mob-dn-bd-ad-fl-sw-cr,
333
+ var(--_ctm-dn-dn-qk-as-sw-cr, var(--_ctm-dn-bd-ad-fl-sw-cr))
334
+ )
335
+ );
336
+
337
+ .action-button {
338
+ padding: 8px;
339
+ font-size: 0.85rem;
340
+
341
+ border-radius: 4px;
342
+ background: none;
343
+ color: #3b82f6;
344
+ cursor: pointer;
345
+ text-align: start;
346
+
347
+ &:hover {
348
+ color: #0d60e5;
349
+ }
350
+ }
351
+ }
352
+
353
+ /* ───────── Cart Items ───────── */
354
+ .cart-items {
355
+ background-color: var(--_ctm-dn-dn-ct-is-bd-cr);
356
+ margin: var(--_ctm-dn-dn-ct-is-mn);
357
+ padding: var(--_ctm-dn-dn-ct-is-pg);
358
+ border-color: var(--_ctm-dn-dn-ct-is-br-cr);
359
+
360
+ border-style: var(--_ctm-dn-dn-ct-is-br-se);
361
+ border-width: var(--_ctm-dn-dn-ct-is-br-wh);
362
+ border-radius: var(--_ctm-dn-dn-ct-is-br-rs);
363
+
364
+ box-shadow: var(
365
+ --_show-shadow,
366
+ var(
367
+ --_ctm-mob-dn-bd-ad-fl-sw-ae,
368
+ var(--_ctm-dn-dn-ct-is-sw-ae, var(--_ctm-dn-bd-ad-fl-sw-ae))
369
+ )
370
+ var(
371
+ --_ctm-mob-dn-bd-ad-fl-sw-br,
372
+ var(--_ctm-dn-dn-ct-is-sw-br, var(--_ctm-dn-bd-ad-fl-sw-br))
373
+ )
374
+ var(
375
+ --_ctm-mob-dn-bd-ad-fl-sw-sd,
376
+ var(--_ctm-dn-dn-ct-is-sw-sd, var(--_ctm-dn-bd-ad-fl-sw-sd))
377
+ )
378
+ var(
379
+ --_ctm-mob-dn-bd-ad-fl-sw-cr,
380
+ var(--_ctm-dn-dn-ct-is-sw-cr, var(--_ctm-dn-bd-ad-fl-sw-cr))
381
+ )
382
+ );
383
+
384
+ h3 {
385
+ font-size: 1rem;
386
+ color: #374151;
387
+ margin-bottom: 12px;
388
+ font-weight: 600;
389
+ }
390
+
391
+ .items-grid {
392
+ display: grid;
393
+ grid-template-columns: repeat(3, 1fr);
394
+ gap: 12px;
395
+ margin-bottom: 16px;
396
+ }
397
+
398
+ .item-card {
399
+ border-radius: 6px;
400
+
401
+ display: flex;
402
+ align-items: flex-start;
403
+
404
+ img {
405
+ width: 60px;
406
+ height: 60px;
407
+ object-fit: cover;
408
+ border-radius: 4px;
409
+ margin-right: 12px;
410
+ }
411
+
412
+ .item-details {
413
+ flex: 1;
414
+
415
+ .item-name {
416
+ margin: 0 0 4px;
417
+ font-size: 0.85rem;
418
+ font-weight: 500;
419
+ color: #1e293b;
420
+ }
421
+ .item-specs,
422
+ .item-qty,
423
+ .estimated-delivery {
424
+ margin: 0;
425
+ font-size: 0.75rem;
426
+ color: #6b7280;
427
+ }
428
+ .delivery-date {
429
+ margin: 0;
430
+ font-size: 0.75rem;
431
+ color: #1e293b;
432
+ font-weight: 600;
433
+ }
434
+ }
435
+
436
+ .item-price {
437
+ font-size: 0.85rem;
438
+ font-weight: 600;
439
+ color: #1e293b;
440
+ margin-left: 12px;
441
+ }
442
+ }
443
+
444
+ .more-link {
445
+ font-size: 0.85rem;
446
+ background: none;
447
+ border: none;
448
+ color: #3b82f6;
449
+ cursor: pointer;
450
+ margin-bottom: 20px;
451
+ }
452
+ }
453
+
454
+ /* ───────── Order Attributes ───────── */
455
+ .order-attributes {
456
+ border-top: 1px solid #e0e0e0;
457
+ padding-top: 12px;
458
+
459
+ h4 {
460
+ font-size: 0.9rem;
461
+ color: #374151;
462
+ margin-bottom: 8px;
463
+ font-weight: 600;
464
+ }
465
+ p {
466
+ font-size: 0.75rem;
467
+ color: #6b7280;
468
+ margin: 0;
469
+ }
470
+ }
471
+
472
+ /* ───────── Responsive ───────── */
473
+ @media (max-width: 768px) {
474
+ .order-details-wrapper {
475
+ grid-template-columns: 1fr;
476
+ }
477
+ .items-grid {
478
+ grid-template-columns: 1fr;
479
+ }
480
+ }
481
+ }
482
+ }
483
+ }
@@ -17,25 +17,7 @@
17
17
  &[data-show-border="false"] {
18
18
  --_show-border-im-se: none;
19
19
  }
20
- &[data-overflow-items="Wrap"] {
21
- .horizontal {
22
- flex-wrap: wrap;
23
- }
24
- }
25
- &[data-overflow-items="Scroll"] {
26
- .horizontal {
27
- width: 100%;
28
- overflow-x: auto;
29
- .item {
30
- width: 100%;
31
- flex-shrink: 0;
32
- }
33
- }
34
- .vertical {
35
- overflow-y: auto;
36
- max-height: 30%;
37
- }
38
- }
20
+
39
21
  .text-element {
40
22
  background: #6d96e4;
41
23
  padding: 10px;
@@ -557,12 +539,33 @@
557
539
  var(--_ctm-tab-dn-iy-tt-se-ue, var(--_ctm-dn-iy-tt-se-ue))
558
540
  );
559
541
  }
542
+
543
+ &[data-overflow-items="Wrap"] {
544
+ .horizontal {
545
+ flex-wrap: wrap;
546
+ }
547
+ }
548
+ &[data-overflow-items="Scroll"] {
549
+ .horizontal {
550
+ width: 100%;
551
+ overflow-x: auto;
552
+ .item {
553
+ width: 100%;
554
+ flex-shrink: 0;
555
+ }
556
+ }
557
+ .vertical {
558
+ overflow-y: auto;
559
+ max-height: 100px;
560
+ }
561
+ }
560
562
  .horizontal {
561
563
  display: flex;
562
564
  flex-direction: row;
563
565
  align-items: center;
564
566
  margin-top: 10px;
565
567
  gap: var(--_ctm-mob-lt-im-sg, var(--_ctm-tab-lt-im-sg, var(--_ctm-lt-im-sg)));
568
+
566
569
  .item {
567
570
  padding: var(
568
571
  --_ctm-mob-dn-im-se-vl-pg,