forstok-ui-lib 8.3.8 → 8.3.11
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/index.js +911 -725
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +911 -725
- package/dist/index.mjs.map +1 -1
- package/package.json +1 -1
- package/src/assets/stylesheets/shares.styles.ts +1622 -1220
|
@@ -1,35 +1,52 @@
|
|
|
1
|
-
import styled, { css } from
|
|
2
|
-
import {
|
|
3
|
-
|
|
1
|
+
import styled, { css } from "styled-components";
|
|
2
|
+
import {
|
|
3
|
+
responseWidth,
|
|
4
|
+
formLabel,
|
|
5
|
+
elipsis,
|
|
6
|
+
multiElipsis,
|
|
7
|
+
headTable,
|
|
8
|
+
clearList,
|
|
9
|
+
dropBase,
|
|
10
|
+
buttonStyle,
|
|
11
|
+
buttonActiveStyle,
|
|
12
|
+
buttonHoverStyle,
|
|
13
|
+
} from "./bases.styles";
|
|
14
|
+
import { ModeListTableColumn, modeTable } from "../../typeds";
|
|
4
15
|
|
|
5
|
-
const getTabsContentModFunc = ({ $mode }:{ $mode?: string }) => {
|
|
6
|
-
let style =
|
|
7
|
-
if ($mode ===
|
|
8
|
-
style
|
|
16
|
+
const getTabsContentModFunc = ({ $mode }: { $mode?: string }) => {
|
|
17
|
+
let style = ``;
|
|
18
|
+
if ($mode === "list") {
|
|
19
|
+
style += `
|
|
9
20
|
min-height: 750px;
|
|
10
21
|
@media only screen and (min-width: 1280px) {
|
|
11
22
|
min-height: 600px;
|
|
12
23
|
}
|
|
13
|
-
|
|
14
|
-
} else if ($mode ===
|
|
15
|
-
style
|
|
24
|
+
`;
|
|
25
|
+
} else if ($mode === "chat") {
|
|
26
|
+
style += `
|
|
16
27
|
height: calc(100vh - 150px);
|
|
17
28
|
overflow: hidden;
|
|
18
|
-
|
|
19
|
-
} else if ($mode ===
|
|
20
|
-
style
|
|
29
|
+
`;
|
|
30
|
+
} else if ($mode === "clear") {
|
|
31
|
+
style += `
|
|
21
32
|
padding-top: 9px;
|
|
22
33
|
@media only screen and (min-width: 768px) {
|
|
23
34
|
padding-top: 11px;
|
|
24
35
|
}
|
|
25
|
-
|
|
36
|
+
`;
|
|
26
37
|
}
|
|
27
|
-
return style
|
|
28
|
-
}
|
|
29
|
-
const getInputGroupModFunc = ({
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
38
|
+
return style;
|
|
39
|
+
};
|
|
40
|
+
const getInputGroupModFunc = ({
|
|
41
|
+
$mode,
|
|
42
|
+
$required,
|
|
43
|
+
}: {
|
|
44
|
+
$mode?: string;
|
|
45
|
+
$required?: boolean;
|
|
46
|
+
}) => {
|
|
47
|
+
let style = ``;
|
|
48
|
+
if ($mode === "column") {
|
|
49
|
+
style += `
|
|
33
50
|
display: grid;
|
|
34
51
|
grid-auto-flow: column;
|
|
35
52
|
grid-template-columns: 1.1fr 2fr;
|
|
@@ -39,9 +56,9 @@ const getInputGroupModFunc = ({ $mode, $required }:{ $mode?: string, $required?:
|
|
|
39
56
|
padding: 0;
|
|
40
57
|
margin: 0;
|
|
41
58
|
}
|
|
42
|
-
|
|
43
|
-
} else if ($mode ===
|
|
44
|
-
style
|
|
59
|
+
`;
|
|
60
|
+
} else if ($mode === "column-product") {
|
|
61
|
+
style += `
|
|
45
62
|
> div {
|
|
46
63
|
display: grid;
|
|
47
64
|
grid-auto-flow: column;
|
|
@@ -52,21 +69,27 @@ const getInputGroupModFunc = ({ $mode, $required }:{ $mode?: string, $required?:
|
|
|
52
69
|
align-items: center;
|
|
53
70
|
}
|
|
54
71
|
}
|
|
55
|
-
|
|
72
|
+
`;
|
|
56
73
|
}
|
|
57
74
|
if ($required) {
|
|
58
|
-
style
|
|
75
|
+
style += `
|
|
59
76
|
> label, > aside {
|
|
60
77
|
&:after {
|
|
61
78
|
content: '*';
|
|
62
79
|
color: red;
|
|
63
80
|
}
|
|
64
81
|
}
|
|
65
|
-
|
|
82
|
+
`;
|
|
66
83
|
}
|
|
67
|
-
return style
|
|
68
|
-
}
|
|
69
|
-
const getTableHeaderModFunc = ({
|
|
84
|
+
return style;
|
|
85
|
+
};
|
|
86
|
+
const getTableHeaderModFunc = ({
|
|
87
|
+
$mode,
|
|
88
|
+
$isPlayground,
|
|
89
|
+
}: {
|
|
90
|
+
$mode?: string;
|
|
91
|
+
$isPlayground?: boolean;
|
|
92
|
+
}) => {
|
|
70
93
|
let style = `
|
|
71
94
|
& ${TableHeadLabel} {
|
|
72
95
|
&:empty,
|
|
@@ -77,9 +100,9 @@ const getTableHeaderModFunc = ({ $mode, $isPlayground }:{ $mode?: string, $isPla
|
|
|
77
100
|
}
|
|
78
101
|
}
|
|
79
102
|
}
|
|
80
|
-
|
|
81
|
-
if ($mode ===
|
|
82
|
-
style
|
|
103
|
+
`;
|
|
104
|
+
if ($mode === "order-detail") {
|
|
105
|
+
style += `
|
|
83
106
|
padding-top: 16px;
|
|
84
107
|
padding-bottom: 10px;
|
|
85
108
|
display: inline-grid;
|
|
@@ -142,9 +165,9 @@ const getTableHeaderModFunc = ({ $mode, $isPlayground }:{ $mode?: string, $isPla
|
|
|
142
165
|
}
|
|
143
166
|
}
|
|
144
167
|
}
|
|
145
|
-
|
|
146
|
-
} else if ($mode ===
|
|
147
|
-
style
|
|
168
|
+
`;
|
|
169
|
+
} else if ($mode === "picklist-detail") {
|
|
170
|
+
style += `
|
|
148
171
|
padding-top: 16px;
|
|
149
172
|
padding-bottom: 10px;
|
|
150
173
|
grid-template-columns: 1fr max-content;
|
|
@@ -163,9 +186,9 @@ const getTableHeaderModFunc = ({ $mode, $isPlayground }:{ $mode?: string, $isPla
|
|
|
163
186
|
padding-top: 0;
|
|
164
187
|
}
|
|
165
188
|
}
|
|
166
|
-
|
|
167
|
-
} else if ($mode ===
|
|
168
|
-
style
|
|
189
|
+
`;
|
|
190
|
+
} else if ($mode === "product-detail") {
|
|
191
|
+
style += `
|
|
169
192
|
grid-gap: 10px;
|
|
170
193
|
padding-top: 16px;
|
|
171
194
|
padding-bottom: 10px;
|
|
@@ -178,10 +201,12 @@ const getTableHeaderModFunc = ({ $mode, $isPlayground }:{ $mode?: string, $isPla
|
|
|
178
201
|
min-height: 73px;
|
|
179
202
|
border-bottom: 0;
|
|
180
203
|
}
|
|
181
|
-
|
|
182
|
-
} else if ($mode ===
|
|
183
|
-
const templateCol = $isPlayground
|
|
184
|
-
|
|
204
|
+
`;
|
|
205
|
+
} else if ($mode === "chat") {
|
|
206
|
+
const templateCol = $isPlayground
|
|
207
|
+
? "1fr max-content;"
|
|
208
|
+
: "30px 1fr max-content;";
|
|
209
|
+
style += `
|
|
185
210
|
padding: 0;
|
|
186
211
|
align-items: center;
|
|
187
212
|
grid-template-columns: ${templateCol};
|
|
@@ -230,9 +255,9 @@ const getTableHeaderModFunc = ({ $mode, $isPlayground }:{ $mode?: string, $isPla
|
|
|
230
255
|
}
|
|
231
256
|
}
|
|
232
257
|
}
|
|
233
|
-
|
|
234
|
-
} else if ($mode ===
|
|
235
|
-
style
|
|
258
|
+
`;
|
|
259
|
+
} else if ($mode === "category") {
|
|
260
|
+
style += `
|
|
236
261
|
& ${TableHeadLabel} {
|
|
237
262
|
&:last-child {
|
|
238
263
|
cursor: pointer;
|
|
@@ -241,20 +266,28 @@ const getTableHeaderModFunc = ({ $mode, $isPlayground }:{ $mode?: string, $isPla
|
|
|
241
266
|
}
|
|
242
267
|
}
|
|
243
268
|
}
|
|
244
|
-
|
|
269
|
+
`;
|
|
245
270
|
}
|
|
246
271
|
if ($isPlayground) {
|
|
247
272
|
style += `
|
|
248
273
|
min-height: 41px;
|
|
249
274
|
align-content: center;
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
}
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
275
|
+
background: transparent;
|
|
276
|
+
border: 0;
|
|
277
|
+
`;
|
|
278
|
+
}
|
|
279
|
+
return style;
|
|
280
|
+
};
|
|
281
|
+
const getTabsRowModFunc = ({
|
|
282
|
+
$content,
|
|
283
|
+
$mode,
|
|
284
|
+
}: {
|
|
285
|
+
$content?: string;
|
|
286
|
+
$mode?: string;
|
|
287
|
+
}) => {
|
|
288
|
+
let style = ``;
|
|
289
|
+
if ($content === "right") {
|
|
290
|
+
style += `
|
|
258
291
|
grid-gap: 4px;
|
|
259
292
|
justify-content: right;
|
|
260
293
|
justify-items: right;
|
|
@@ -264,17 +297,17 @@ const getTabsRowModFunc = ({ $content, $mode }:{ $content?: string, $mode?: stri
|
|
|
264
297
|
text-align: right;
|
|
265
298
|
}
|
|
266
299
|
}
|
|
267
|
-
|
|
268
|
-
} else if ($content ===
|
|
300
|
+
`;
|
|
301
|
+
} else if ($content === "right-amount") {
|
|
269
302
|
style += `
|
|
270
303
|
grid-gap: 10px;
|
|
271
304
|
justify-content: right;
|
|
272
305
|
justify-items: right;
|
|
273
306
|
align-self: center;
|
|
274
|
-
|
|
307
|
+
`;
|
|
275
308
|
}
|
|
276
|
-
if ($mode ===
|
|
277
|
-
style
|
|
309
|
+
if ($mode === "items") {
|
|
310
|
+
style += `
|
|
278
311
|
padding-right: 2px;
|
|
279
312
|
grid-gap: 2px;
|
|
280
313
|
align-content: start;
|
|
@@ -283,32 +316,38 @@ const getTabsRowModFunc = ({ $content, $mode }:{ $content?: string, $mode?: stri
|
|
|
283
316
|
> strong {
|
|
284
317
|
${multiElipsis}
|
|
285
318
|
}
|
|
286
|
-
|
|
287
|
-
} else if ($mode ===
|
|
288
|
-
style
|
|
319
|
+
`;
|
|
320
|
+
} else if ($mode === "list-items") {
|
|
321
|
+
style += `
|
|
289
322
|
position: relative;
|
|
290
323
|
grid-gap: 10px;
|
|
291
|
-
|
|
292
|
-
} else if ($mode ===
|
|
293
|
-
style
|
|
324
|
+
`;
|
|
325
|
+
} else if ($mode === "master-detail-img") {
|
|
326
|
+
style += `
|
|
294
327
|
justify-items: center;
|
|
295
328
|
span {
|
|
296
329
|
text-align: center;
|
|
297
330
|
width: 50px;
|
|
298
331
|
overflow-wrap: break-word;
|
|
299
332
|
}
|
|
300
|
-
|
|
301
|
-
} else if ($mode ===
|
|
302
|
-
style
|
|
333
|
+
`;
|
|
334
|
+
} else if ($mode === "item-sale-price") {
|
|
335
|
+
style += `
|
|
303
336
|
grid-gap: 2px;
|
|
304
|
-
|
|
305
|
-
}
|
|
306
|
-
return style
|
|
307
|
-
}
|
|
308
|
-
const getTabsColumnModFunc = ({
|
|
309
|
-
|
|
310
|
-
|
|
311
|
-
|
|
337
|
+
`;
|
|
338
|
+
}
|
|
339
|
+
return style;
|
|
340
|
+
};
|
|
341
|
+
const getTabsColumnModFunc = ({
|
|
342
|
+
$mode,
|
|
343
|
+
$content,
|
|
344
|
+
}: {
|
|
345
|
+
$mode?: string;
|
|
346
|
+
$content?: string;
|
|
347
|
+
}) => {
|
|
348
|
+
let style = ``;
|
|
349
|
+
if ($mode === "items-detail") {
|
|
350
|
+
style += `
|
|
312
351
|
grid-gap: 16px;
|
|
313
352
|
align-items: start;
|
|
314
353
|
grid-template-columns: 30px 1fr;
|
|
@@ -320,9 +359,9 @@ const getTabsColumnModFunc = ({ $mode, $content }:{ $mode?: string, $content?: s
|
|
|
320
359
|
display: grid;
|
|
321
360
|
}
|
|
322
361
|
}
|
|
323
|
-
|
|
324
|
-
} else if ($mode ===
|
|
325
|
-
style
|
|
362
|
+
`;
|
|
363
|
+
} else if ($mode === "store") {
|
|
364
|
+
style += `
|
|
326
365
|
align-items: center;
|
|
327
366
|
grid-gap: 4px;
|
|
328
367
|
> div > span {
|
|
@@ -334,9 +373,9 @@ const getTabsColumnModFunc = ({ $mode, $content }:{ $mode?: string, $content?: s
|
|
|
334
373
|
> *:nth-child(2) {
|
|
335
374
|
${elipsis}
|
|
336
375
|
}
|
|
337
|
-
|
|
338
|
-
|
|
339
|
-
style
|
|
376
|
+
`;
|
|
377
|
+
} else if ($mode === "store-static") {
|
|
378
|
+
style += `
|
|
340
379
|
align-items: center;
|
|
341
380
|
grid-gap: 6px;
|
|
342
381
|
position: relative;
|
|
@@ -353,9 +392,9 @@ const getTabsColumnModFunc = ({ $mode, $content }:{ $mode?: string, $content?: s
|
|
|
353
392
|
> *:nth-child(2) {
|
|
354
393
|
${multiElipsis}
|
|
355
394
|
}
|
|
356
|
-
|
|
357
|
-
} else if ($mode ===
|
|
358
|
-
style
|
|
395
|
+
`;
|
|
396
|
+
} else if ($mode === "amount") {
|
|
397
|
+
style += `
|
|
359
398
|
width: 100%;
|
|
360
399
|
grid-gap: 20px;
|
|
361
400
|
grid-template-columns: 180px 1fr;
|
|
@@ -367,9 +406,9 @@ const getTabsColumnModFunc = ({ $mode, $content }:{ $mode?: string, $content?: s
|
|
|
367
406
|
display: block;
|
|
368
407
|
width: 100%;
|
|
369
408
|
}
|
|
370
|
-
|
|
371
|
-
}
|
|
372
|
-
style
|
|
409
|
+
`;
|
|
410
|
+
} else if ($mode === "account-amount") {
|
|
411
|
+
style += `
|
|
373
412
|
width: 100%;
|
|
374
413
|
grid-gap: 20px;
|
|
375
414
|
grid-template-columns: 360px 1fr;
|
|
@@ -381,17 +420,17 @@ const getTabsColumnModFunc = ({ $mode, $content }:{ $mode?: string, $content?: s
|
|
|
381
420
|
display: block;
|
|
382
421
|
width: 100%;
|
|
383
422
|
}
|
|
384
|
-
|
|
385
|
-
} else if ($mode ===
|
|
386
|
-
style
|
|
423
|
+
`;
|
|
424
|
+
} else if ($mode === "product") {
|
|
425
|
+
style += `
|
|
387
426
|
display: grid;
|
|
388
427
|
grid-auto-flow: column;
|
|
389
428
|
justify-content: left;
|
|
390
|
-
grid-gap: ${
|
|
391
|
-
grid-template-columns: ${
|
|
429
|
+
grid-gap: ${$content === "store" ? "6px" : "8px"};
|
|
430
|
+
grid-template-columns: ${$content === "store" ? "auto 1fr" : $content === "checkbox" ? "16px 34px 1fr" : "34px 1fr"};
|
|
392
431
|
align-items: start;
|
|
393
432
|
> div:first-child {
|
|
394
|
-
height: ${
|
|
433
|
+
height: ${$content === "store" ? "auto" : "34px"};
|
|
395
434
|
}
|
|
396
435
|
> aside {
|
|
397
436
|
align-items: center;
|
|
@@ -405,7 +444,7 @@ const getTabsColumnModFunc = ({ $mode, $content }:{ $mode?: string, $content?: s
|
|
|
405
444
|
align-self: center;
|
|
406
445
|
> div:first-child {
|
|
407
446
|
${multiElipsis}
|
|
408
|
-
line-height: ${
|
|
447
|
+
line-height: ${$content === "store" ? "14px" : "17px"};
|
|
409
448
|
}
|
|
410
449
|
> span {
|
|
411
450
|
${elipsis}
|
|
@@ -416,31 +455,31 @@ const getTabsColumnModFunc = ({ $mode, $content }:{ $mode?: string, $content?: s
|
|
|
416
455
|
}
|
|
417
456
|
}
|
|
418
457
|
}
|
|
419
|
-
|
|
420
|
-
} else if ($mode ===
|
|
421
|
-
style
|
|
458
|
+
`;
|
|
459
|
+
} else if ($mode === "contra") {
|
|
460
|
+
style += `
|
|
422
461
|
grid-auto-flow: row;
|
|
423
462
|
align-items: start;
|
|
424
463
|
@media only screen and (min-width: 1024px) {
|
|
425
464
|
grid-auto-flow: column;
|
|
426
465
|
}
|
|
427
|
-
|
|
428
|
-
} else if ($mode ===
|
|
429
|
-
style
|
|
466
|
+
`;
|
|
467
|
+
} else if ($mode === "status") {
|
|
468
|
+
style += `
|
|
430
469
|
align-items: baseline;
|
|
431
470
|
grid-gap: 2px;
|
|
432
471
|
i {
|
|
433
472
|
opacity: .7;
|
|
434
473
|
}
|
|
435
|
-
|
|
436
|
-
} else if ($mode ===
|
|
437
|
-
style
|
|
474
|
+
`;
|
|
475
|
+
} else if ($mode === "store-order") {
|
|
476
|
+
style += `
|
|
438
477
|
align-items: start;
|
|
439
478
|
gap: 8px;
|
|
440
|
-
|
|
479
|
+
`;
|
|
441
480
|
}
|
|
442
|
-
if ($content ===
|
|
443
|
-
style
|
|
481
|
+
if ($content === "right") {
|
|
482
|
+
style += `
|
|
444
483
|
grid-gap: 10px;
|
|
445
484
|
justify-content: end;
|
|
446
485
|
align-items: center;
|
|
@@ -448,40 +487,40 @@ const getTabsColumnModFunc = ({ $mode, $content }:{ $mode?: string, $content?: s
|
|
|
448
487
|
min-width: 170px;
|
|
449
488
|
width: 170px;
|
|
450
489
|
}
|
|
451
|
-
|
|
490
|
+
`;
|
|
452
491
|
}
|
|
453
|
-
return style
|
|
454
|
-
}
|
|
455
|
-
const getNameModFunc = ({ $mode }:{ $mode?: string }) => {
|
|
456
|
-
let style =
|
|
457
|
-
if ($mode ===
|
|
458
|
-
style
|
|
492
|
+
return style;
|
|
493
|
+
};
|
|
494
|
+
const getNameModFunc = ({ $mode }: { $mode?: string }) => {
|
|
495
|
+
let style = ``;
|
|
496
|
+
if ($mode === "dropship") {
|
|
497
|
+
style += `
|
|
459
498
|
display: inline-grid;
|
|
460
499
|
grid-auto-flow: column;
|
|
461
500
|
grid-template-columns: auto max-content;
|
|
462
501
|
grid-gap: 8px;
|
|
463
502
|
align-items: center;
|
|
464
|
-
|
|
465
|
-
} else if ($mode ===
|
|
466
|
-
style
|
|
503
|
+
`;
|
|
504
|
+
} else if ($mode === "header") {
|
|
505
|
+
style += `
|
|
467
506
|
font-size: 22px;
|
|
468
507
|
${multiElipsis}
|
|
469
508
|
line-height: normal;
|
|
470
|
-
|
|
509
|
+
`;
|
|
471
510
|
}
|
|
472
|
-
return style
|
|
473
|
-
}
|
|
474
|
-
const getTabsWrapperModFunc =({ $mode }:{ $mode?: string }) => {
|
|
475
|
-
let style =
|
|
476
|
-
if ($mode ===
|
|
511
|
+
return style;
|
|
512
|
+
};
|
|
513
|
+
const getTabsWrapperModFunc = ({ $mode }: { $mode?: string }) => {
|
|
514
|
+
let style = ``;
|
|
515
|
+
if ($mode === "detail") {
|
|
477
516
|
style += `
|
|
478
517
|
width: 100%;
|
|
479
518
|
> article {
|
|
480
519
|
min-width: auto;
|
|
481
520
|
width: 100%;
|
|
482
521
|
}
|
|
483
|
-
|
|
484
|
-
} else if ($mode ===
|
|
522
|
+
`;
|
|
523
|
+
} else if ($mode === "master-listing") {
|
|
485
524
|
style += `
|
|
486
525
|
width: 100%;
|
|
487
526
|
${TabsList} {
|
|
@@ -493,8 +532,8 @@ const getTabsWrapperModFunc =({ $mode }:{ $mode?: string }) => {
|
|
|
493
532
|
${TabsItem} {
|
|
494
533
|
font-size: 14px;
|
|
495
534
|
}
|
|
496
|
-
|
|
497
|
-
} else if ($mode ===
|
|
535
|
+
`;
|
|
536
|
+
} else if ($mode === "chat-account" || $mode === "chat-complement") {
|
|
498
537
|
style += `
|
|
499
538
|
${TabsHeader} {
|
|
500
539
|
width: 100vw;
|
|
@@ -537,14 +576,14 @@ const getTabsWrapperModFunc =({ $mode }:{ $mode?: string }) => {
|
|
|
537
576
|
padding-right: 10px;
|
|
538
577
|
}
|
|
539
578
|
}
|
|
540
|
-
|
|
541
|
-
} else if ($mode ===
|
|
579
|
+
`;
|
|
580
|
+
} else if ($mode === "chat-complement") {
|
|
542
581
|
style += `
|
|
543
582
|
${TabsItem} {
|
|
544
583
|
padding: 16px 10px 11px 10px;
|
|
545
584
|
}
|
|
546
|
-
|
|
547
|
-
} else if ($mode ===
|
|
585
|
+
`;
|
|
586
|
+
} else if ($mode === "chat-faq") {
|
|
548
587
|
style += `
|
|
549
588
|
${TabsList} {
|
|
550
589
|
border-bottom: 1px solid #DEE0E0;
|
|
@@ -573,11 +612,19 @@ const getTabsWrapperModFunc =({ $mode }:{ $mode?: string }) => {
|
|
|
573
612
|
padding-right: 16px;
|
|
574
613
|
}
|
|
575
614
|
}
|
|
576
|
-
|
|
615
|
+
`;
|
|
577
616
|
}
|
|
578
|
-
return style
|
|
579
|
-
}
|
|
580
|
-
const getTableItemWrapperModFunc = ({
|
|
617
|
+
return style;
|
|
618
|
+
};
|
|
619
|
+
const getTableItemWrapperModFunc = ({
|
|
620
|
+
$mode,
|
|
621
|
+
$isBorder,
|
|
622
|
+
$isPopup,
|
|
623
|
+
}: {
|
|
624
|
+
$mode: string;
|
|
625
|
+
$isBorder?: boolean;
|
|
626
|
+
$isPopup?: boolean;
|
|
627
|
+
}) => {
|
|
581
628
|
let style = `
|
|
582
629
|
${TableItemColumn} {
|
|
583
630
|
width: 100%;
|
|
@@ -606,8 +653,8 @@ const getTableItemWrapperModFunc = ({ $mode, $isBorder, $isPopup }:{ $mode: stri
|
|
|
606
653
|
width: unset
|
|
607
654
|
}
|
|
608
655
|
}
|
|
609
|
-
|
|
610
|
-
if ($mode ===
|
|
656
|
+
`;
|
|
657
|
+
if ($mode === "order") {
|
|
611
658
|
style += `
|
|
612
659
|
${TableItemColumn} {
|
|
613
660
|
grid-template-columns: auto var(--warehouse) var(--status-big) var(--qty-pd20-big) repeat(2, var(--price-pd20));
|
|
@@ -619,8 +666,8 @@ const getTableItemWrapperModFunc = ({ $mode, $isBorder, $isPopup }:{ $mode: stri
|
|
|
619
666
|
}
|
|
620
667
|
}
|
|
621
668
|
}
|
|
622
|
-
|
|
623
|
-
} else if ($mode ===
|
|
669
|
+
`;
|
|
670
|
+
} else if ($mode === "picklist") {
|
|
624
671
|
style += `
|
|
625
672
|
${TableItemColumn} {
|
|
626
673
|
grid-template-columns: auto var(--ref-pd20) var(--ref) var(--status) var(--status) repeat(3, var(--qty-small));
|
|
@@ -637,8 +684,8 @@ const getTableItemWrapperModFunc = ({ $mode, $isBorder, $isPopup }:{ $mode: stri
|
|
|
637
684
|
&:nth-child(n+6) { text-align: right; }
|
|
638
685
|
}
|
|
639
686
|
}
|
|
640
|
-
|
|
641
|
-
} else if ($mode ===
|
|
687
|
+
`;
|
|
688
|
+
} else if ($mode === "package") {
|
|
642
689
|
style += `
|
|
643
690
|
${TableItemColumn} {
|
|
644
691
|
grid-template-columns: auto repeat(2, var(--qty-pd20-big));
|
|
@@ -646,8 +693,8 @@ const getTableItemWrapperModFunc = ({ $mode, $isBorder, $isPopup }:{ $mode: stri
|
|
|
646
693
|
text-align: right;
|
|
647
694
|
}
|
|
648
695
|
}
|
|
649
|
-
|
|
650
|
-
} else if ($mode ===
|
|
696
|
+
`;
|
|
697
|
+
} else if ($mode === "shipment") {
|
|
651
698
|
style += `
|
|
652
699
|
${TableItemColumn} {
|
|
653
700
|
grid-template-columns: auto var(--ref-big) repeat(2, var(--qty-pd20-big));
|
|
@@ -655,8 +702,8 @@ const getTableItemWrapperModFunc = ({ $mode, $isBorder, $isPopup }:{ $mode: stri
|
|
|
655
702
|
text-align: right;
|
|
656
703
|
}
|
|
657
704
|
}
|
|
658
|
-
|
|
659
|
-
} else if ($mode ===
|
|
705
|
+
`;
|
|
706
|
+
} else if ($mode === "payment-receive") {
|
|
660
707
|
style += `
|
|
661
708
|
${TableItemColumn} {
|
|
662
709
|
grid-template-columns: var(--id-big) var(--ref-pd20) var(--store) var(--ref-pd20) var(--time-pd20) 1fr;
|
|
@@ -666,14 +713,14 @@ const getTableItemWrapperModFunc = ({ $mode, $isBorder, $isPopup }:{ $mode: stri
|
|
|
666
713
|
}
|
|
667
714
|
}
|
|
668
715
|
}
|
|
669
|
-
|
|
670
|
-
} else if ($mode ===
|
|
716
|
+
`;
|
|
717
|
+
} else if ($mode === "item") {
|
|
671
718
|
style += `
|
|
672
719
|
${TableItemColumn} {
|
|
673
720
|
grid-template-columns: var(--variant-pd20) var(--sku-pd20) var(--qty-pd20-big) repeat(2, var(--price-pd20)) var(--sku-pd20);
|
|
674
721
|
}
|
|
675
|
-
|
|
676
|
-
} else if ($mode ===
|
|
722
|
+
`;
|
|
723
|
+
} else if ($mode === "bundle") {
|
|
677
724
|
style += `
|
|
678
725
|
${TableItemColumn} {
|
|
679
726
|
grid-template-columns: 1fr 145px 130px 130px 100px 130px 60px;
|
|
@@ -704,17 +751,17 @@ const getTableItemWrapperModFunc = ({ $mode, $isBorder, $isPopup }:{ $mode: stri
|
|
|
704
751
|
grid-template-columns: 1fr 145px 160px 150px 112px 130px 60px;
|
|
705
752
|
}
|
|
706
753
|
}
|
|
707
|
-
|
|
708
|
-
} else if ($mode ===
|
|
754
|
+
`;
|
|
755
|
+
} else if ($mode === "item-listing") {
|
|
709
756
|
style += `
|
|
710
757
|
&:not(:first-child) {
|
|
711
758
|
margin-top: 30px;
|
|
712
759
|
}
|
|
713
760
|
${TableItemColumn} {
|
|
714
|
-
width: ${$isPopup ?
|
|
715
|
-
grid-template-columns: ${$isPopup ?
|
|
761
|
+
width: ${$isPopup ? "834px" : "940px"};
|
|
762
|
+
grid-template-columns: ${$isPopup ? "auto var(--variant-small) var(--qty) var(--price) var(--status-small) 95px" : "auto var(--variant) var(--qty-big) var(--price) var(--status-small) minmax(90px, 100px)"};
|
|
716
763
|
&:last-child {
|
|
717
|
-
${$isPopup ?
|
|
764
|
+
${$isPopup ? "border-bottom: 0 !important" : ""}
|
|
718
765
|
}
|
|
719
766
|
> *:nth-child(6) {
|
|
720
767
|
text-align: right;
|
|
@@ -725,17 +772,17 @@ const getTableItemWrapperModFunc = ({ $mode, $isBorder, $isPopup }:{ $mode: stri
|
|
|
725
772
|
width: unset;
|
|
726
773
|
}
|
|
727
774
|
}
|
|
728
|
-
|
|
729
|
-
} else if ($mode ===
|
|
775
|
+
`;
|
|
776
|
+
} else if ($mode === "item-bundle") {
|
|
730
777
|
style += `
|
|
731
778
|
&:not(:first-child) {
|
|
732
779
|
margin-top: 30px;
|
|
733
780
|
}
|
|
734
781
|
${TableItemColumn} {
|
|
735
|
-
width: ${$isPopup ?
|
|
736
|
-
grid-template-columns: ${$isPopup ?
|
|
782
|
+
width: ${$isPopup ? "834px" : "940px"};
|
|
783
|
+
grid-template-columns: ${$isPopup ? "auto var(--variant-small) var(--qty-small) var(--qty-big)" : "auto var(--variant) var(--qty-pd20-big) var(--qty-pd20-big)"};
|
|
737
784
|
&:last-child {
|
|
738
|
-
${$isPopup ?
|
|
785
|
+
${$isPopup ? "border-bottom: 0 !important" : ""}
|
|
739
786
|
}
|
|
740
787
|
}
|
|
741
788
|
@media only screen and (min-width: 768px) {
|
|
@@ -743,8 +790,8 @@ const getTableItemWrapperModFunc = ({ $mode, $isBorder, $isPopup }:{ $mode: stri
|
|
|
743
790
|
width: unset;
|
|
744
791
|
}
|
|
745
792
|
}
|
|
746
|
-
|
|
747
|
-
} else if ($mode ===
|
|
793
|
+
`;
|
|
794
|
+
} else if ($mode === "invoice") {
|
|
748
795
|
style += `
|
|
749
796
|
${TableItemColumn} {
|
|
750
797
|
grid-template-columns: auto var(--status) var(--qty-pd20-big) repeat(3, var(--price-pd20));
|
|
@@ -752,8 +799,8 @@ const getTableItemWrapperModFunc = ({ $mode, $isBorder, $isPopup }:{ $mode: stri
|
|
|
752
799
|
text-align: right;
|
|
753
800
|
}
|
|
754
801
|
}
|
|
755
|
-
|
|
756
|
-
} else if ($mode ===
|
|
802
|
+
`;
|
|
803
|
+
} else if ($mode === "stock") {
|
|
757
804
|
style += `
|
|
758
805
|
${TableItemColumn} {
|
|
759
806
|
grid-template-columns: auto var(--variant-pd20) var(--sku-pd20) var(--qty-pd20-big) var(--qty-pd20-big);
|
|
@@ -761,20 +808,20 @@ const getTableItemWrapperModFunc = ({ $mode, $isBorder, $isPopup }:{ $mode: stri
|
|
|
761
808
|
text-align: right;
|
|
762
809
|
}
|
|
763
810
|
}
|
|
764
|
-
|
|
765
|
-
} else if ($mode ===
|
|
811
|
+
`;
|
|
812
|
+
} else if ($mode === "inbound") {
|
|
766
813
|
style += `
|
|
767
814
|
${TableItemColumn} {
|
|
768
815
|
grid-template-columns: var(--time-pd20) auto var(--variant-pd20) var(--sku-pd20) var(--status-big) minmax(110px, 150px) minmax(110px, 150px);
|
|
769
816
|
}
|
|
770
|
-
|
|
771
|
-
} else if ($mode ===
|
|
817
|
+
`;
|
|
818
|
+
} else if ($mode === "priceadjustment") {
|
|
772
819
|
style += `
|
|
773
820
|
${TableItemColumn} {
|
|
774
821
|
grid-template-columns: var(--sku) auto var(--store) var(--price-pd20) var(--price-pd20) var(--price) var(--price) var(--time) var(--time);
|
|
775
822
|
}
|
|
776
|
-
|
|
777
|
-
} else if ($mode ===
|
|
823
|
+
`;
|
|
824
|
+
} else if ($mode === "add-item") {
|
|
778
825
|
style += `
|
|
779
826
|
${TableItemColumn} {
|
|
780
827
|
grid-template-columns: 30px auto 100px 156px 128px;
|
|
@@ -801,8 +848,8 @@ const getTableItemWrapperModFunc = ({ $mode, $isBorder, $isPopup }:{ $mode: stri
|
|
|
801
848
|
._refProductList {
|
|
802
849
|
width: 700px;
|
|
803
850
|
}
|
|
804
|
-
|
|
805
|
-
} else if ($mode ===
|
|
851
|
+
`;
|
|
852
|
+
} else if ($mode === "add-item-price") {
|
|
806
853
|
style += `
|
|
807
854
|
${TableItemColumn} {
|
|
808
855
|
grid-template-columns: 30px auto 100px 156px 128px;
|
|
@@ -827,8 +874,8 @@ const getTableItemWrapperModFunc = ({ $mode, $isBorder, $isPopup }:{ $mode: stri
|
|
|
827
874
|
${TableItemColumn}, ._refProductList {
|
|
828
875
|
width: 700px;
|
|
829
876
|
}
|
|
830
|
-
|
|
831
|
-
} else if ($mode ===
|
|
877
|
+
`;
|
|
878
|
+
} else if ($mode === "inventory-qty") {
|
|
832
879
|
style += `
|
|
833
880
|
overflow: auto;
|
|
834
881
|
${TableItemColumn} {
|
|
@@ -930,8 +977,8 @@ const getTableItemWrapperModFunc = ({ $mode, $isBorder, $isPopup }:{ $mode: stri
|
|
|
930
977
|
flex: 1;
|
|
931
978
|
}
|
|
932
979
|
}
|
|
933
|
-
|
|
934
|
-
} else if ($mode ===
|
|
980
|
+
`;
|
|
981
|
+
} else if ($mode === "putaway") {
|
|
935
982
|
style += `
|
|
936
983
|
${TableItemColumn} {
|
|
937
984
|
&[role=rowheader] {
|
|
@@ -959,27 +1006,34 @@ const getTableItemWrapperModFunc = ({ $mode, $isBorder, $isPopup }:{ $mode: stri
|
|
|
959
1006
|
}
|
|
960
1007
|
}
|
|
961
1008
|
}
|
|
962
|
-
|
|
963
|
-
} else if ($mode ===
|
|
1009
|
+
`;
|
|
1010
|
+
} else if ($mode === "stock-adjustment") {
|
|
964
1011
|
style += `
|
|
965
1012
|
${TableItemColumn} {
|
|
966
1013
|
grid-template-columns: auto var(--variant-pd20) var(--sku-pd20) var(--qty-pd20-big) minmax(135px, 140px) var(--qty-pd20-big);
|
|
967
1014
|
}
|
|
968
|
-
|
|
969
|
-
} else if ($mode ===
|
|
1015
|
+
`;
|
|
1016
|
+
} else if ($mode === "confirm") {
|
|
970
1017
|
style += `
|
|
971
1018
|
${TableItemColumn} {
|
|
972
1019
|
grid-template-columns: auto 120px 120px 100px 120px;
|
|
973
1020
|
}
|
|
974
|
-
|
|
975
|
-
} else if ($mode ===
|
|
1021
|
+
`;
|
|
1022
|
+
} else if ($mode === "confirm-adjustment") {
|
|
976
1023
|
style += `
|
|
977
1024
|
${TableItemColumn} {
|
|
978
1025
|
grid-template-columns: auto 120px 120px 90px 90px 90px;
|
|
979
1026
|
}
|
|
980
|
-
|
|
981
|
-
} else if (
|
|
982
|
-
|
|
1027
|
+
`;
|
|
1028
|
+
} else if (
|
|
1029
|
+
$mode === "add-item" ||
|
|
1030
|
+
$mode === "add-item-price" ||
|
|
1031
|
+
$mode === "add-location"
|
|
1032
|
+
) {
|
|
1033
|
+
const columnStyle =
|
|
1034
|
+
$mode === "add-item-price" || $mode === "add-item"
|
|
1035
|
+
? "30px auto 100px 156px 128px"
|
|
1036
|
+
: "30px 115px 105px 130px 110px 110px";
|
|
983
1037
|
style += `
|
|
984
1038
|
${TableItemColumn} {
|
|
985
1039
|
grid-template-columns: ${columnStyle};
|
|
@@ -1004,8 +1058,8 @@ const getTableItemWrapperModFunc = ({ $mode, $isBorder, $isPopup }:{ $mode: stri
|
|
|
1004
1058
|
${TableItemColumn}._refProductList {
|
|
1005
1059
|
width: 700px;
|
|
1006
1060
|
}
|
|
1007
|
-
|
|
1008
|
-
} else if ($mode ===
|
|
1061
|
+
`;
|
|
1062
|
+
} else if ($mode === "priceadjustment") {
|
|
1009
1063
|
style += `
|
|
1010
1064
|
${TableItemColumn} {
|
|
1011
1065
|
grid-template-columns: auto var(--price-pd20) var(--price-pd20);
|
|
@@ -1013,8 +1067,8 @@ const getTableItemWrapperModFunc = ({ $mode, $isBorder, $isPopup }:{ $mode: stri
|
|
|
1013
1067
|
text-align: right;
|
|
1014
1068
|
}
|
|
1015
1069
|
}
|
|
1016
|
-
|
|
1017
|
-
} else if ($mode ===
|
|
1070
|
+
`;
|
|
1071
|
+
} else if ($mode === "link-master") {
|
|
1018
1072
|
style += `
|
|
1019
1073
|
&:not(:first-child) {
|
|
1020
1074
|
margin-top: 30px;
|
|
@@ -1022,8 +1076,8 @@ const getTableItemWrapperModFunc = ({ $mode, $isBorder, $isPopup }:{ $mode: stri
|
|
|
1022
1076
|
${TableItemColumn} {
|
|
1023
1077
|
grid-template-columns: 1fr 120px 105px;
|
|
1024
1078
|
}
|
|
1025
|
-
|
|
1026
|
-
} else if ($mode ===
|
|
1079
|
+
`;
|
|
1080
|
+
} else if ($mode === "promotion") {
|
|
1027
1081
|
style += `
|
|
1028
1082
|
padding-top: 16px;
|
|
1029
1083
|
${TableItemColumn} {
|
|
@@ -1032,15 +1086,15 @@ const getTableItemWrapperModFunc = ({ $mode, $isBorder, $isPopup }:{ $mode: stri
|
|
|
1032
1086
|
text-align: right;
|
|
1033
1087
|
}
|
|
1034
1088
|
}
|
|
1035
|
-
|
|
1036
|
-
} else if ($mode ===
|
|
1089
|
+
`;
|
|
1090
|
+
} else if ($mode === "warehouse") {
|
|
1037
1091
|
style += `
|
|
1038
1092
|
${TableItemColumn} {
|
|
1039
1093
|
>*:last-child { text-align: right; }
|
|
1040
1094
|
grid-template-columns: var(--warehouse) auto var(--time-pd20) minmax(120px, 150px);
|
|
1041
1095
|
}
|
|
1042
|
-
|
|
1043
|
-
} else if ($mode ===
|
|
1096
|
+
`;
|
|
1097
|
+
} else if ($mode === "item-stock") {
|
|
1044
1098
|
style += `
|
|
1045
1099
|
${TableItemColumn} {
|
|
1046
1100
|
&[role=rowheader] {
|
|
@@ -1078,7 +1132,7 @@ const getTableItemWrapperModFunc = ({ $mode, $isBorder, $isPopup }:{ $mode: stri
|
|
|
1078
1132
|
}
|
|
1079
1133
|
}
|
|
1080
1134
|
}
|
|
1081
|
-
|
|
1135
|
+
`;
|
|
1082
1136
|
}
|
|
1083
1137
|
if ($isBorder) {
|
|
1084
1138
|
style += `
|
|
@@ -1087,19 +1141,19 @@ const getTableItemWrapperModFunc = ({ $mode, $isBorder, $isPopup }:{ $mode: stri
|
|
|
1087
1141
|
border-bottom: 1px solid var(--pri-clr-ln);
|
|
1088
1142
|
}
|
|
1089
1143
|
}
|
|
1090
|
-
|
|
1091
|
-
}
|
|
1092
|
-
return style
|
|
1093
|
-
}
|
|
1094
|
-
const getTableItemModFunc = ({ $mode }:{ $mode?: string }) => {
|
|
1144
|
+
`;
|
|
1145
|
+
}
|
|
1146
|
+
return style;
|
|
1147
|
+
};
|
|
1148
|
+
const getTableItemModFunc = ({ $mode }: { $mode?: string }) => {
|
|
1095
1149
|
let style = `
|
|
1096
1150
|
&._refItemContainer {
|
|
1097
1151
|
${TableColumnGroup} {
|
|
1098
1152
|
grid-gap: 10px;
|
|
1099
1153
|
}
|
|
1100
1154
|
}
|
|
1101
|
-
|
|
1102
|
-
if ($mode ===
|
|
1155
|
+
`;
|
|
1156
|
+
if ($mode === "amount") {
|
|
1103
1157
|
style += `
|
|
1104
1158
|
grid-auto-flow: column;
|
|
1105
1159
|
grid-template-columns: 1fr;
|
|
@@ -1121,9 +1175,9 @@ const getTableItemModFunc = ({ $mode }:{ $mode?: string }) => {
|
|
|
1121
1175
|
}
|
|
1122
1176
|
}
|
|
1123
1177
|
}
|
|
1124
|
-
|
|
1125
|
-
} else if ($mode ===
|
|
1126
|
-
style
|
|
1178
|
+
`;
|
|
1179
|
+
} else if ($mode === "detail-amount") {
|
|
1180
|
+
style += `
|
|
1127
1181
|
grid-auto-flow: column;
|
|
1128
1182
|
grid-template-columns: 1fr;
|
|
1129
1183
|
margin-top: 16px;
|
|
@@ -1142,38 +1196,38 @@ const getTableItemModFunc = ({ $mode }:{ $mode?: string }) => {
|
|
|
1142
1196
|
display: grid;
|
|
1143
1197
|
}
|
|
1144
1198
|
}
|
|
1145
|
-
|
|
1199
|
+
`;
|
|
1146
1200
|
}
|
|
1147
1201
|
return style;
|
|
1148
|
-
}
|
|
1149
|
-
const getListModFunc = ({ $mode }:{ $mode?: string }) => {
|
|
1150
|
-
let style =
|
|
1151
|
-
if ($mode ===
|
|
1152
|
-
style
|
|
1202
|
+
};
|
|
1203
|
+
const getListModFunc = ({ $mode }: { $mode?: string }) => {
|
|
1204
|
+
let style = ``;
|
|
1205
|
+
if ($mode === "shipment") {
|
|
1206
|
+
style += `
|
|
1153
1207
|
${DetailItem} {
|
|
1154
1208
|
${DetailItemWrapper} {
|
|
1155
1209
|
grid-template-columns: var(--status) var(--warehouse) minmax(80px, 160px) minmax(80px, 160px) minmax(95px, 200px);
|
|
1156
1210
|
}
|
|
1157
1211
|
}
|
|
1158
|
-
|
|
1159
|
-
} else if ($mode ===
|
|
1160
|
-
style
|
|
1212
|
+
`;
|
|
1213
|
+
} else if ($mode === "picklist") {
|
|
1214
|
+
style += `
|
|
1161
1215
|
${DetailItem} {
|
|
1162
1216
|
${DetailItemWrapper} {
|
|
1163
1217
|
grid-template-columns: var(--status) var(--warehouse) var(--person);
|
|
1164
1218
|
}
|
|
1165
1219
|
}
|
|
1166
|
-
|
|
1167
|
-
} else if ($mode ===
|
|
1168
|
-
style
|
|
1220
|
+
`;
|
|
1221
|
+
} else if ($mode === "invoice") {
|
|
1222
|
+
style += `
|
|
1169
1223
|
${DetailItem} {
|
|
1170
1224
|
${DetailItemWrapper} {
|
|
1171
1225
|
grid-template-columns: var(--status) var(--price);
|
|
1172
1226
|
}
|
|
1173
1227
|
}
|
|
1174
|
-
|
|
1175
|
-
} else if ($mode ===
|
|
1176
|
-
style
|
|
1228
|
+
`;
|
|
1229
|
+
} else if ($mode === "payment") {
|
|
1230
|
+
style += `
|
|
1177
1231
|
${DetailItem} {
|
|
1178
1232
|
${DetailItemWrapper} {
|
|
1179
1233
|
grid-template-columns: var(--status) var(--ref-big) var(--price) auto;
|
|
@@ -1183,9 +1237,9 @@ const getListModFunc = ({ $mode }:{ $mode?: string }) => {
|
|
|
1183
1237
|
position: relative; }
|
|
1184
1238
|
}
|
|
1185
1239
|
}
|
|
1186
|
-
|
|
1187
|
-
} else if ($mode ===
|
|
1188
|
-
style
|
|
1240
|
+
`;
|
|
1241
|
+
} else if ($mode === "promotion") {
|
|
1242
|
+
style += `
|
|
1189
1243
|
${DetailItem} {
|
|
1190
1244
|
grid-template-columns: auto;
|
|
1191
1245
|
padding-left: 18px;
|
|
@@ -1193,37 +1247,42 @@ const getListModFunc = ({ $mode }:{ $mode?: string }) => {
|
|
|
1193
1247
|
grid-template-columns: minmax(95px, 150px) var(--store) var(--ref-big) minmax(180px, 300px) var(--status-small) minmax(50px, 88px);
|
|
1194
1248
|
}
|
|
1195
1249
|
}
|
|
1196
|
-
|
|
1197
|
-
} else if ($mode ===
|
|
1198
|
-
style
|
|
1250
|
+
`;
|
|
1251
|
+
} else if ($mode === "return") {
|
|
1252
|
+
style += `
|
|
1199
1253
|
${DetailItem} {
|
|
1200
1254
|
${DetailItemWrapper} {
|
|
1201
1255
|
grid-template-columns: var(--status) var(--warehouse) var(--qty) var(--qty);
|
|
1202
1256
|
}
|
|
1203
|
-
|
|
1257
|
+
`;
|
|
1204
1258
|
}
|
|
1205
|
-
return style
|
|
1206
|
-
}
|
|
1207
|
-
const getCreateContainerModFunc = ({ $mode }:{ $mode?: string }) => {
|
|
1208
|
-
let style =
|
|
1209
|
-
if (
|
|
1259
|
+
return style;
|
|
1260
|
+
};
|
|
1261
|
+
const getCreateContainerModFunc = ({ $mode }: { $mode?: string }) => {
|
|
1262
|
+
let style = ``;
|
|
1263
|
+
if (
|
|
1264
|
+
$mode === "master" ||
|
|
1265
|
+
$mode === "listing" ||
|
|
1266
|
+
$mode === "paymentreceive" ||
|
|
1267
|
+
$mode === "picklist"
|
|
1268
|
+
) {
|
|
1210
1269
|
style += `
|
|
1211
1270
|
height: 100vh;
|
|
1212
1271
|
overflow: hidden;
|
|
1213
|
-
|
|
1214
|
-
} else if ($mode ===
|
|
1215
|
-
style
|
|
1272
|
+
`;
|
|
1273
|
+
} else if ($mode === "bundle") {
|
|
1274
|
+
style += `
|
|
1216
1275
|
${CreateHeaderWrapper} {
|
|
1217
1276
|
position: fixed;
|
|
1218
1277
|
z-index: 10;
|
|
1219
1278
|
aside { grid-template-rows: none; }
|
|
1220
1279
|
}
|
|
1221
|
-
|
|
1280
|
+
`;
|
|
1222
1281
|
}
|
|
1223
|
-
return style
|
|
1224
|
-
}
|
|
1282
|
+
return style;
|
|
1283
|
+
};
|
|
1225
1284
|
|
|
1226
|
-
export const HeaderContainer = styled.aside`
|
|
1285
|
+
export const HeaderContainer = styled.aside`
|
|
1227
1286
|
display: grid;
|
|
1228
1287
|
grid-auto-flow: column;
|
|
1229
1288
|
grid-gap: 8px;
|
|
@@ -1240,7 +1299,7 @@ export const HeaderContainer = styled.aside`
|
|
|
1240
1299
|
@media only screen and (min-width: 1800px) {
|
|
1241
1300
|
right: 28px;
|
|
1242
1301
|
}
|
|
1243
|
-
|
|
1302
|
+
`;
|
|
1244
1303
|
export const Title = styled.h1`
|
|
1245
1304
|
font-size: 22px;
|
|
1246
1305
|
color: var(--ter-clr);
|
|
@@ -1257,8 +1316,8 @@ export const Title = styled.h1`
|
|
|
1257
1316
|
display: inline !important;
|
|
1258
1317
|
}
|
|
1259
1318
|
}
|
|
1260
|
-
|
|
1261
|
-
export const PanelWrapper = styled.section<{ $mode?:
|
|
1319
|
+
`;
|
|
1320
|
+
export const PanelWrapper = styled.section<{ $mode?: "full" }>`
|
|
1262
1321
|
${responseWidth}
|
|
1263
1322
|
position: relative;
|
|
1264
1323
|
min-height: 1px;
|
|
@@ -1268,10 +1327,12 @@ export const PanelWrapper = styled.section<{ $mode?: 'full' }>`
|
|
|
1268
1327
|
@media only screen and (min-width: 768px) {
|
|
1269
1328
|
padding: 4px 30px 16px;
|
|
1270
1329
|
}
|
|
1271
|
-
${({ $mode }) =>
|
|
1272
|
-
|
|
1273
|
-
|
|
1274
|
-
|
|
1330
|
+
${({ $mode }) =>
|
|
1331
|
+
$mode === "full" &&
|
|
1332
|
+
css`
|
|
1333
|
+
width: 100%;
|
|
1334
|
+
`}
|
|
1335
|
+
`;
|
|
1275
1336
|
export const PanelContainer = styled.section<{ $mode?: string }>`
|
|
1276
1337
|
position: relative;
|
|
1277
1338
|
height: 100%;
|
|
@@ -1308,7 +1369,8 @@ export const PanelContainer = styled.section<{ $mode?: string }>`
|
|
|
1308
1369
|
&._refCashierPanelContainer {
|
|
1309
1370
|
${HeaderContainer} {
|
|
1310
1371
|
> i {
|
|
1311
|
-
&:first-child,
|
|
1372
|
+
&:first-child,
|
|
1373
|
+
&:nth-child(3) {
|
|
1312
1374
|
display: none;
|
|
1313
1375
|
}
|
|
1314
1376
|
}
|
|
@@ -1319,9 +1381,9 @@ export const PanelContainer = styled.section<{ $mode?: string }>`
|
|
|
1319
1381
|
padding: 20px 1em 0px 1.275em;
|
|
1320
1382
|
height: 100%;
|
|
1321
1383
|
}
|
|
1322
|
-
${({ $mode }:{ $mode?: string }) => {
|
|
1323
|
-
if ($mode ===
|
|
1324
|
-
return css`
|
|
1384
|
+
${({ $mode }: { $mode?: string }) => {
|
|
1385
|
+
if ($mode === "mobile") {
|
|
1386
|
+
return css`
|
|
1325
1387
|
position: fixed;
|
|
1326
1388
|
width: 100%;
|
|
1327
1389
|
height: 100px;
|
|
@@ -1334,10 +1396,10 @@ export const PanelContainer = styled.section<{ $mode?: string }>`
|
|
|
1334
1396
|
@media only screen and (min-width: 1024px) {
|
|
1335
1397
|
display: none !important;
|
|
1336
1398
|
}
|
|
1337
|
-
|
|
1399
|
+
`;
|
|
1338
1400
|
}
|
|
1339
1401
|
}}
|
|
1340
|
-
|
|
1402
|
+
`;
|
|
1341
1403
|
export const ListContainer = styled.section`
|
|
1342
1404
|
position: relative;
|
|
1343
1405
|
&:first-child {
|
|
@@ -1353,25 +1415,25 @@ export const ListContainer = styled.section`
|
|
|
1353
1415
|
padding-right: 0;
|
|
1354
1416
|
}
|
|
1355
1417
|
}
|
|
1356
|
-
|
|
1418
|
+
`;
|
|
1357
1419
|
export const TabsContainer = styled.section<{ $mode?: string }>`
|
|
1358
1420
|
width: 100%;
|
|
1359
|
-
${({ $mode }:{ $mode?: string }) => {
|
|
1360
|
-
if ($mode ===
|
|
1361
|
-
return css`
|
|
1421
|
+
${({ $mode }: { $mode?: string }) => {
|
|
1422
|
+
if ($mode === "master-listing") {
|
|
1423
|
+
return css`
|
|
1362
1424
|
padding: 0 16px;
|
|
1363
|
-
|
|
1364
|
-
} else if ($mode ===
|
|
1365
|
-
return css`
|
|
1425
|
+
`;
|
|
1426
|
+
} else if ($mode === "detail-master") {
|
|
1427
|
+
return css`
|
|
1366
1428
|
padding: 20px 10px 0 10px;
|
|
1367
|
-
|
|
1368
|
-
} else if ($mode ===
|
|
1369
|
-
return css`
|
|
1370
|
-
padding-top: 0;
|
|
1371
|
-
|
|
1429
|
+
`;
|
|
1430
|
+
} else if ($mode === "no-header") {
|
|
1431
|
+
return css`
|
|
1432
|
+
padding-top: 0;
|
|
1433
|
+
`;
|
|
1372
1434
|
}
|
|
1373
1435
|
}}
|
|
1374
|
-
|
|
1436
|
+
`;
|
|
1375
1437
|
export const TabsContent = styled.div<{ $mode?: string }>`
|
|
1376
1438
|
padding-top: 16px;
|
|
1377
1439
|
&._refNoTab {
|
|
@@ -1383,13 +1445,13 @@ export const TabsContent = styled.div<{ $mode?: string }>`
|
|
|
1383
1445
|
}
|
|
1384
1446
|
}
|
|
1385
1447
|
${getTabsContentModFunc}
|
|
1386
|
-
|
|
1387
|
-
export const FoContainer = styled.section<{ $mode?:
|
|
1448
|
+
`;
|
|
1449
|
+
export const FoContainer = styled.section<{ $mode?: "detail" }>`
|
|
1388
1450
|
position: relative;
|
|
1389
|
-
> section,
|
|
1451
|
+
> section,
|
|
1390
1452
|
> article {
|
|
1391
1453
|
width: 100%;
|
|
1392
|
-
> aside,
|
|
1454
|
+
> aside,
|
|
1393
1455
|
> article {
|
|
1394
1456
|
${responseWidth}
|
|
1395
1457
|
margin: 0 auto;
|
|
@@ -1398,29 +1460,31 @@ export const FoContainer = styled.section<{ $mode?: 'detail' }>`
|
|
|
1398
1460
|
> article {
|
|
1399
1461
|
height: calc(100vh - 48px);
|
|
1400
1462
|
}
|
|
1401
|
-
${({ $mode }) =>
|
|
1402
|
-
|
|
1403
|
-
|
|
1404
|
-
|
|
1405
|
-
|
|
1406
|
-
>
|
|
1407
|
-
|
|
1408
|
-
|
|
1463
|
+
${({ $mode }) =>
|
|
1464
|
+
$mode === "detail" &&
|
|
1465
|
+
css`
|
|
1466
|
+
margin-top: -4px;
|
|
1467
|
+
@media only screen and (min-width: 768px) {
|
|
1468
|
+
> section,
|
|
1469
|
+
> article {
|
|
1470
|
+
> aside {
|
|
1471
|
+
padding-left: 0;
|
|
1472
|
+
padding-right: 0;
|
|
1473
|
+
}
|
|
1409
1474
|
}
|
|
1410
1475
|
}
|
|
1411
|
-
|
|
1412
|
-
|
|
1413
|
-
|
|
1414
|
-
|
|
1415
|
-
|
|
1416
|
-
|
|
1417
|
-
|
|
1476
|
+
@media only screen and (min-width: 1024px) {
|
|
1477
|
+
> section,
|
|
1478
|
+
> article {
|
|
1479
|
+
> aside {
|
|
1480
|
+
padding-left: 0;
|
|
1481
|
+
padding-right: 0;
|
|
1482
|
+
}
|
|
1418
1483
|
}
|
|
1419
1484
|
}
|
|
1420
|
-
}
|
|
1421
|
-
|
|
1422
|
-
`
|
|
1423
|
-
export const PopupTableHead = styled.div`
|
|
1485
|
+
`}
|
|
1486
|
+
`;
|
|
1487
|
+
export const PopupTableHead = styled.div`
|
|
1424
1488
|
display: grid;
|
|
1425
1489
|
grid-template-columns: 1fr 100px 100px 100px;
|
|
1426
1490
|
padding: 16px 16px 12px;
|
|
@@ -1432,27 +1496,28 @@ export const PopupTableHead = styled.div`
|
|
|
1432
1496
|
> div:not(:first-child) {
|
|
1433
1497
|
justify-self: end;
|
|
1434
1498
|
}
|
|
1435
|
-
|
|
1436
|
-
export const PopupTableItem = styled.div`
|
|
1499
|
+
`;
|
|
1500
|
+
export const PopupTableItem = styled.div`
|
|
1437
1501
|
display: grid;
|
|
1438
1502
|
grid-template-columns: 28px 1fr 100px 100px 100px;
|
|
1439
1503
|
grid-gap: 16px;
|
|
1440
1504
|
justify-content: center;
|
|
1441
1505
|
align-items: center;
|
|
1442
|
-
> a:nth-child(n+3),
|
|
1443
|
-
> span:nth-child(n+3),
|
|
1444
|
-
div:nth-child(n+3) {
|
|
1506
|
+
> a:nth-child(n + 3),
|
|
1507
|
+
> span:nth-child(n + 3),
|
|
1508
|
+
div:nth-child(n + 3) {
|
|
1445
1509
|
justify-self: end;
|
|
1446
1510
|
}
|
|
1447
|
-
|
|
1448
|
-
export const PopupTableBody = styled.div`
|
|
1511
|
+
`;
|
|
1512
|
+
export const PopupTableBody = styled.div`
|
|
1449
1513
|
display: grid;
|
|
1450
1514
|
grid-auto-flow: row;
|
|
1451
1515
|
grid-gap: 10px;
|
|
1452
1516
|
padding: 12px 16px 16px;
|
|
1453
|
-
|
|
1454
|
-
const getTableModFunc = ({ $mode }:{ $mode?: modeTable }) => css`
|
|
1455
|
-
${($mode ===
|
|
1517
|
+
`;
|
|
1518
|
+
const getTableModFunc = ({ $mode }: { $mode?: modeTable }) => css`
|
|
1519
|
+
${($mode === "picklist" || $mode === "listing" || $mode === "price") &&
|
|
1520
|
+
css`
|
|
1456
1521
|
background-color: transparent;
|
|
1457
1522
|
border: none;
|
|
1458
1523
|
width: 100%;
|
|
@@ -1469,11 +1534,11 @@ const getTableModFunc = ({ $mode }:{ $mode?: modeTable }) => css`
|
|
|
1469
1534
|
border-top: 1px solid var(--pri-clr-ln);
|
|
1470
1535
|
padding: 12px 16px 4px 16px;
|
|
1471
1536
|
justify-content: center;
|
|
1472
|
-
&:first-child{
|
|
1473
|
-
border: none;
|
|
1537
|
+
&:first-child {
|
|
1538
|
+
border: none;
|
|
1474
1539
|
}
|
|
1475
|
-
&:last-child {
|
|
1476
|
-
border-bottom: 1px solid var(--pri-clr-ln);
|
|
1540
|
+
&:last-child {
|
|
1541
|
+
border-bottom: 1px solid var(--pri-clr-ln);
|
|
1477
1542
|
padding-bottom: 14px;
|
|
1478
1543
|
}
|
|
1479
1544
|
}
|
|
@@ -1484,41 +1549,43 @@ const getTableModFunc = ({ $mode }:{ $mode?: modeTable }) => css`
|
|
|
1484
1549
|
padding: 0 16px 16px 16px;
|
|
1485
1550
|
margin-bottom: 0;
|
|
1486
1551
|
}
|
|
1487
|
-
|
|
1488
|
-
${$mode ===
|
|
1489
|
-
|
|
1490
|
-
${
|
|
1491
|
-
|
|
1552
|
+
|
|
1553
|
+
${$mode === "picklist" &&
|
|
1554
|
+
css`
|
|
1555
|
+
${PopupTableHead},
|
|
1556
|
+
${PopupTableBody} {
|
|
1557
|
+
width: 938px;
|
|
1492
1558
|
}
|
|
1493
1559
|
@media only screen and (min-width: 1024px) {
|
|
1494
|
-
${PopupTableHead},
|
|
1495
|
-
${PopupTableBody} {
|
|
1496
|
-
width: 100%;
|
|
1560
|
+
${PopupTableHead},
|
|
1561
|
+
${PopupTableBody} {
|
|
1562
|
+
width: 100%;
|
|
1497
1563
|
}
|
|
1498
1564
|
}
|
|
1499
1565
|
${PopupTableHead} {
|
|
1500
1566
|
grid-template-columns: 1fr 100px 72px 72px 69px 69px 51px;
|
|
1501
1567
|
padding: 16px 16px 12px;
|
|
1502
|
-
> div:nth-child(2) {
|
|
1503
|
-
justify-self: start;
|
|
1568
|
+
> div:nth-child(2) {
|
|
1569
|
+
justify-self: start;
|
|
1504
1570
|
}
|
|
1505
1571
|
}
|
|
1506
1572
|
${PopupTableItem} {
|
|
1507
1573
|
grid-template-columns: 28px 1fr 100px 72px 72px 69px 69px 51px;
|
|
1508
1574
|
padding: 12px 16px 12px;
|
|
1509
|
-
> *:nth-child(3) {
|
|
1510
|
-
justify-self: start;
|
|
1575
|
+
> *:nth-child(3) {
|
|
1576
|
+
justify-self: start;
|
|
1511
1577
|
}
|
|
1512
1578
|
}
|
|
1513
1579
|
`}
|
|
1514
1580
|
|
|
1515
|
-
${$mode ===
|
|
1581
|
+
${$mode === "listing" &&
|
|
1582
|
+
css`
|
|
1516
1583
|
margin: 0 0 16px !important;
|
|
1517
|
-
${PopupTableHead},
|
|
1584
|
+
${PopupTableHead},
|
|
1518
1585
|
${PopupTableItem} {
|
|
1519
1586
|
grid-template-columns: 1fr 340px var(--qty-pd20);
|
|
1520
|
-
> div:nth-child(2) {
|
|
1521
|
-
justify-self: start;
|
|
1587
|
+
> div:nth-child(2) {
|
|
1588
|
+
justify-self: start;
|
|
1522
1589
|
}
|
|
1523
1590
|
}
|
|
1524
1591
|
@media only screen and (min-width: 1024px) {
|
|
@@ -1527,11 +1594,16 @@ const getTableModFunc = ({ $mode }:{ $mode?: modeTable }) => css`
|
|
|
1527
1594
|
`}
|
|
1528
1595
|
`}
|
|
1529
1596
|
|
|
1530
|
-
${($mode ===
|
|
1597
|
+
${($mode === "price" || $mode === "price-full" || $mode === "price-mid") &&
|
|
1598
|
+
css`
|
|
1531
1599
|
margin: 0 0 16px !important;
|
|
1532
|
-
${PopupTableHead},
|
|
1600
|
+
${PopupTableHead},
|
|
1533
1601
|
${PopupTableItem} {
|
|
1534
|
-
grid-template-columns: ${$mode ===
|
|
1602
|
+
grid-template-columns: ${$mode === "price"
|
|
1603
|
+
? "1fr 95px 118px"
|
|
1604
|
+
: $mode === "price-mid"
|
|
1605
|
+
? "1fr 95px repeat(2, 118px)"
|
|
1606
|
+
: "1fr 95px repeat(4, 118px)"};
|
|
1535
1607
|
}
|
|
1536
1608
|
${PopupTableHead} {
|
|
1537
1609
|
> div {
|
|
@@ -1550,16 +1622,16 @@ const getTableModFunc = ({ $mode }:{ $mode?: modeTable }) => css`
|
|
|
1550
1622
|
padding: 0;
|
|
1551
1623
|
}
|
|
1552
1624
|
`}
|
|
1553
|
-
|
|
1554
|
-
export const PopupTable = styled.div<{ $mode?: modeTable }>`
|
|
1625
|
+
`;
|
|
1626
|
+
export const PopupTable = styled.div<{ $mode?: modeTable }>`
|
|
1555
1627
|
background-color: var(--sec-clr-bg);
|
|
1556
1628
|
border: 1px solid var(--sec-clr-ln);
|
|
1557
1629
|
border-radius: var(--sec-rd);
|
|
1558
1630
|
overflow-x: auto;
|
|
1559
1631
|
margin: 0 0 16px;
|
|
1560
|
-
${PopupTableHead},
|
|
1561
|
-
${PopupTableBody} {
|
|
1562
|
-
width: 733px;
|
|
1632
|
+
${PopupTableHead},
|
|
1633
|
+
${PopupTableBody} {
|
|
1634
|
+
width: 733px;
|
|
1563
1635
|
}
|
|
1564
1636
|
@media only screen and (min-width: 375px) {
|
|
1565
1637
|
margin: 0 12px 16px 16px;
|
|
@@ -1567,56 +1639,70 @@ export const PopupTable = styled.div<{ $mode?: modeTable }>`
|
|
|
1567
1639
|
@media only screen and (min-width: 768px) {
|
|
1568
1640
|
margin: 0 30px 16px 34px;
|
|
1569
1641
|
overflow-x: unset;
|
|
1570
|
-
${PopupTableHead},
|
|
1571
|
-
${PopupTableBody} {
|
|
1572
|
-
width: 100%;
|
|
1642
|
+
${PopupTableHead},
|
|
1643
|
+
${PopupTableBody} {
|
|
1644
|
+
width: 100%;
|
|
1573
1645
|
}
|
|
1574
1646
|
}
|
|
1575
1647
|
${getTableModFunc}
|
|
1576
|
-
|
|
1648
|
+
`;
|
|
1577
1649
|
export const PopupList = styled.div<{ $mode?: string }>`
|
|
1578
1650
|
padding: 0 15px;
|
|
1579
1651
|
overflow: hidden;
|
|
1580
1652
|
i.arrow-down:before {
|
|
1581
1653
|
transform: none;
|
|
1582
1654
|
}
|
|
1583
|
-
${({ $mode }) =>
|
|
1584
|
-
|
|
1585
|
-
|
|
1586
|
-
padding:
|
|
1587
|
-
|
|
1588
|
-
padding: 20px 16px 14px;
|
|
1655
|
+
${({ $mode }) =>
|
|
1656
|
+
$mode === "single" &&
|
|
1657
|
+
css`
|
|
1658
|
+
padding: 0 15px;
|
|
1659
|
+
${PopupItem} {
|
|
1660
|
+
padding: 20px 16px 14px 0;
|
|
1661
|
+
@media only screen and (min-width: 768px) {
|
|
1662
|
+
padding: 20px 16px 14px;
|
|
1663
|
+
}
|
|
1589
1664
|
}
|
|
1590
|
-
}
|
|
1591
|
-
|
|
1592
|
-
|
|
1593
|
-
|
|
1594
|
-
|
|
1595
|
-
|
|
1596
|
-
|
|
1597
|
-
|
|
1598
|
-
|
|
1599
|
-
|
|
1600
|
-
|
|
1665
|
+
`}
|
|
1666
|
+
${({ $mode }) =>
|
|
1667
|
+
!$mode &&
|
|
1668
|
+
css`
|
|
1669
|
+
&.is-shown {
|
|
1670
|
+
${PopupTable} {
|
|
1671
|
+
top: 0;
|
|
1672
|
+
position: relative;
|
|
1673
|
+
border: 1px solid var(--sec-clr-ln);
|
|
1674
|
+
&.is-loading {
|
|
1675
|
+
height: 0 !important;
|
|
1676
|
+
border: none;
|
|
1677
|
+
}
|
|
1678
|
+
}
|
|
1679
|
+
i.arrow-down:before {
|
|
1680
|
+
transform: rotate(180deg);
|
|
1601
1681
|
}
|
|
1602
1682
|
}
|
|
1603
|
-
|
|
1604
|
-
|
|
1683
|
+
${PopupTable} {
|
|
1684
|
+
overflow-y: hidden;
|
|
1685
|
+
transition: height 0.35s ease;
|
|
1686
|
+
border: none;
|
|
1687
|
+
position: absolute;
|
|
1688
|
+
top: -99999%;
|
|
1605
1689
|
}
|
|
1606
|
-
}
|
|
1607
|
-
|
|
1608
|
-
|
|
1609
|
-
|
|
1610
|
-
|
|
1611
|
-
|
|
1612
|
-
|
|
1613
|
-
|
|
1614
|
-
|
|
1615
|
-
|
|
1616
|
-
|
|
1617
|
-
|
|
1618
|
-
|
|
1619
|
-
|
|
1690
|
+
`}
|
|
1691
|
+
`;
|
|
1692
|
+
const getPopupItemModFunc = ({
|
|
1693
|
+
$mode,
|
|
1694
|
+
$isReadyToShip,
|
|
1695
|
+
$isNoTable,
|
|
1696
|
+
$isMarkAsPickedUp,
|
|
1697
|
+
}: {
|
|
1698
|
+
$mode?: "multiple" | "package" | "master";
|
|
1699
|
+
$isReadyToShip?: boolean;
|
|
1700
|
+
$isNoTable?: boolean;
|
|
1701
|
+
$isMarkAsPickedUp?: boolean;
|
|
1702
|
+
}) => {
|
|
1703
|
+
let style = ``;
|
|
1704
|
+
const Accpx = $isNoTable ? "12px" : "25px";
|
|
1705
|
+
if ($mode === "multiple") {
|
|
1620
1706
|
style += `
|
|
1621
1707
|
position: relative;
|
|
1622
1708
|
grid-template-columns: ${Accpx} 28px 1.5fr 20px;
|
|
@@ -1648,7 +1734,7 @@ const getPopupItemModFunc = ({ $mode, $isReadyToShip, $isNoTable, $isMarkAsPicke
|
|
|
1648
1734
|
@media only screen and (min-width: 768px) {
|
|
1649
1735
|
grid-template-columns: ${Accpx} 28px 1.5fr 3fr 20px;
|
|
1650
1736
|
}
|
|
1651
|
-
|
|
1737
|
+
`;
|
|
1652
1738
|
if ($isReadyToShip) {
|
|
1653
1739
|
style += `
|
|
1654
1740
|
align-items: self-start;
|
|
@@ -1699,10 +1785,10 @@ const getPopupItemModFunc = ({ $mode, $isReadyToShip, $isNoTable, $isMarkAsPicke
|
|
|
1699
1785
|
@media only screen and (min-width: 1024px) {
|
|
1700
1786
|
grid-template-columns: ${Accpx} 28px 1.5fr 110px 355px 20px !important;
|
|
1701
1787
|
}
|
|
1702
|
-
|
|
1788
|
+
`;
|
|
1703
1789
|
}
|
|
1704
1790
|
} else if ($isReadyToShip) {
|
|
1705
|
-
style
|
|
1791
|
+
style += `
|
|
1706
1792
|
grid-template-columns: 28px 1.5fr;
|
|
1707
1793
|
align-items: self-start;
|
|
1708
1794
|
> div:nth-child(1) {
|
|
@@ -1752,26 +1838,26 @@ const getPopupItemModFunc = ({ $mode, $isReadyToShip, $isNoTable, $isMarkAsPicke
|
|
|
1752
1838
|
@media only screen and (min-width: 1024px) {
|
|
1753
1839
|
grid-template-columns: 28px 1.5fr 110px 355px !important;
|
|
1754
1840
|
}
|
|
1755
|
-
|
|
1841
|
+
`;
|
|
1756
1842
|
} else if ($isMarkAsPickedUp) {
|
|
1757
|
-
style
|
|
1843
|
+
style += `
|
|
1758
1844
|
grid-template-columns: 28px 2fr 3fr;
|
|
1759
1845
|
> div:last-child {
|
|
1760
1846
|
justify-self: end;
|
|
1761
1847
|
}
|
|
1762
|
-
|
|
1763
|
-
} else if ($mode ===
|
|
1764
|
-
style
|
|
1848
|
+
`;
|
|
1849
|
+
} else if ($mode === "package") {
|
|
1850
|
+
style += `
|
|
1765
1851
|
grid-template-columns: 28px 160px 1.5fr;
|
|
1766
|
-
|
|
1767
|
-
} else if ($mode ===
|
|
1768
|
-
style
|
|
1852
|
+
`;
|
|
1853
|
+
} else if ($mode === "master") {
|
|
1854
|
+
style += `
|
|
1769
1855
|
padding: 0;
|
|
1770
1856
|
grid-template-columns: 34px 1fr;
|
|
1771
1857
|
grid-gap: 8px;
|
|
1772
|
-
|
|
1858
|
+
`;
|
|
1773
1859
|
} else {
|
|
1774
|
-
style
|
|
1860
|
+
style += `
|
|
1775
1861
|
grid-template-columns: 28px 1.5fr;
|
|
1776
1862
|
@media (max-width: 767.98px) {
|
|
1777
1863
|
> div:nth-last-child(1) {
|
|
@@ -1797,11 +1883,16 @@ const getPopupItemModFunc = ({ $mode, $isReadyToShip, $isNoTable, $isMarkAsPicke
|
|
|
1797
1883
|
margin: 0 16px 16px;
|
|
1798
1884
|
}
|
|
1799
1885
|
}
|
|
1800
|
-
|
|
1886
|
+
`;
|
|
1801
1887
|
}
|
|
1802
|
-
return style
|
|
1803
|
-
}
|
|
1804
|
-
export const PopupItem = styled.div<{
|
|
1888
|
+
return style;
|
|
1889
|
+
};
|
|
1890
|
+
export const PopupItem = styled.div<{
|
|
1891
|
+
$mode?: "multiple" | "package" | "master";
|
|
1892
|
+
$isReadyToShip?: boolean;
|
|
1893
|
+
$isNoTable?: boolean;
|
|
1894
|
+
$isMarkAsPickedUp?: boolean;
|
|
1895
|
+
}>`
|
|
1805
1896
|
display: inline-grid;
|
|
1806
1897
|
width: 100%;
|
|
1807
1898
|
grid-template-columns: 25px 32px 1.25fr 20px;
|
|
@@ -1812,7 +1903,7 @@ export const PopupItem = styled.div<{ $mode?: 'multiple' | 'package' | 'master',
|
|
|
1812
1903
|
display: grid;
|
|
1813
1904
|
}
|
|
1814
1905
|
${getPopupItemModFunc}
|
|
1815
|
-
|
|
1906
|
+
`;
|
|
1816
1907
|
const PopupRowGroupStyle = {
|
|
1817
1908
|
warning: css`
|
|
1818
1909
|
justify-content: start;
|
|
@@ -1820,21 +1911,22 @@ const PopupRowGroupStyle = {
|
|
|
1820
1911
|
> i {
|
|
1821
1912
|
position: absolute;
|
|
1822
1913
|
top: 10px;
|
|
1823
|
-
right: -5px;
|
|
1824
|
-
&:before {
|
|
1825
|
-
display: inline-block;
|
|
1914
|
+
right: -5px;
|
|
1915
|
+
&:before {
|
|
1916
|
+
display: inline-block;
|
|
1826
1917
|
}
|
|
1827
1918
|
}
|
|
1828
1919
|
@media only screen and (min-width: 768px) {
|
|
1829
|
-
grid-template-areas:
|
|
1830
|
-
|
|
1920
|
+
grid-template-areas:
|
|
1921
|
+
"a c"
|
|
1922
|
+
"b b";
|
|
1831
1923
|
> i {
|
|
1832
1924
|
position: relative;
|
|
1833
1925
|
top: 10px;
|
|
1834
1926
|
right: auto;
|
|
1835
1927
|
left: 10px;
|
|
1836
1928
|
&:before {
|
|
1837
|
-
display: grid;
|
|
1929
|
+
display: grid;
|
|
1838
1930
|
}
|
|
1839
1931
|
}
|
|
1840
1932
|
}
|
|
@@ -1845,15 +1937,24 @@ const PopupRowGroupStyle = {
|
|
|
1845
1937
|
${multiElipsis}
|
|
1846
1938
|
}
|
|
1847
1939
|
`,
|
|
1848
|
-
} as const
|
|
1849
|
-
export const PopupRowGroup = styled.div<{ $mode?:
|
|
1940
|
+
} as const;
|
|
1941
|
+
export const PopupRowGroup = styled.div<{ $mode?: "warning" | "items" }>`
|
|
1850
1942
|
display: grid;
|
|
1851
1943
|
grid-auto-flow: row;
|
|
1852
1944
|
grid-gap: 2px;
|
|
1853
|
-
${({ $mode }) =>
|
|
1854
|
-
|
|
1855
|
-
|
|
1856
|
-
|
|
1945
|
+
${({ $mode }) =>
|
|
1946
|
+
$mode && $mode in PopupRowGroupStyle ? PopupRowGroupStyle[$mode] : ""}
|
|
1947
|
+
`;
|
|
1948
|
+
const getPopupColumnGroupModFunc = ({
|
|
1949
|
+
$content,
|
|
1950
|
+
$mode,
|
|
1951
|
+
}: {
|
|
1952
|
+
$content?: "right";
|
|
1953
|
+
$mode?: "ext";
|
|
1954
|
+
}) => css`
|
|
1955
|
+
${$content &&
|
|
1956
|
+
$content === "right" &&
|
|
1957
|
+
css`
|
|
1857
1958
|
grid-gap: 10px;
|
|
1858
1959
|
justify-content: end;
|
|
1859
1960
|
align-items: start;
|
|
@@ -1875,32 +1976,37 @@ const getPopupColumnGroupModFunc = ({ $content, $mode }:{ $content?: 'right', $m
|
|
|
1875
1976
|
}
|
|
1876
1977
|
`}
|
|
1877
1978
|
|
|
1878
|
-
${
|
|
1979
|
+
${$mode &&
|
|
1980
|
+
$mode === "ext" &&
|
|
1981
|
+
css`
|
|
1879
1982
|
grid-template-columns: 1fr 1fr 1fr;
|
|
1880
1983
|
grid-auto-flow: unset;
|
|
1881
1984
|
input::placeholder {
|
|
1882
1985
|
font-style: normal;
|
|
1883
1986
|
}
|
|
1884
1987
|
`}
|
|
1885
|
-
|
|
1886
|
-
export const PopupColumnGroup = styled.div<{
|
|
1988
|
+
`;
|
|
1989
|
+
export const PopupColumnGroup = styled.div<{
|
|
1990
|
+
$content?: "right";
|
|
1991
|
+
$mode?: "ext";
|
|
1992
|
+
}>`
|
|
1887
1993
|
display: grid;
|
|
1888
1994
|
grid-auto-flow: column;
|
|
1889
1995
|
grid-gap: 4px;
|
|
1890
1996
|
justify-content: left;
|
|
1891
1997
|
align-items: end;
|
|
1892
1998
|
${getPopupColumnGroupModFunc}
|
|
1893
|
-
|
|
1894
|
-
export const PopupItemName = styled.span`
|
|
1999
|
+
`;
|
|
2000
|
+
export const PopupItemName = styled.span`
|
|
1895
2001
|
font-weight: 600;
|
|
1896
2002
|
color: var(--hd-clr);
|
|
1897
2003
|
text-transform: capitalize;
|
|
1898
2004
|
${elipsis}
|
|
1899
|
-
|
|
1900
|
-
export const PopupItemLabel = styled.div`
|
|
2005
|
+
`;
|
|
2006
|
+
export const PopupItemLabel = styled.div`
|
|
1901
2007
|
${elipsis}
|
|
1902
|
-
|
|
1903
|
-
export const BreadcrumbContainer = styled.aside`
|
|
2008
|
+
`;
|
|
2009
|
+
export const BreadcrumbContainer = styled.aside`
|
|
1904
2010
|
position: relative;
|
|
1905
2011
|
padding: 0;
|
|
1906
2012
|
text-align: center;
|
|
@@ -1920,8 +2026,8 @@ export const BreadcrumbContainer = styled.aside`
|
|
|
1920
2026
|
margin-right: 6px;
|
|
1921
2027
|
}
|
|
1922
2028
|
}
|
|
1923
|
-
span {
|
|
1924
|
-
display: none;
|
|
2029
|
+
span {
|
|
2030
|
+
display: none;
|
|
1925
2031
|
}
|
|
1926
2032
|
@media only screen and (min-width: 375px) {
|
|
1927
2033
|
margin-left: 16px !important;
|
|
@@ -1935,11 +2041,11 @@ export const BreadcrumbContainer = styled.aside`
|
|
|
1935
2041
|
padding: 8px 30px 0;
|
|
1936
2042
|
text-align: left;
|
|
1937
2043
|
b {
|
|
1938
|
-
font-size: .875rem;
|
|
2044
|
+
font-size: 0.875rem;
|
|
1939
2045
|
line-height: 1;
|
|
1940
2046
|
}
|
|
1941
|
-
span {
|
|
1942
|
-
display: inline;
|
|
2047
|
+
span {
|
|
2048
|
+
display: inline;
|
|
1943
2049
|
}
|
|
1944
2050
|
a {
|
|
1945
2051
|
&:first-child {
|
|
@@ -1953,7 +2059,7 @@ export const BreadcrumbContainer = styled.aside`
|
|
|
1953
2059
|
@media (min-width: 1366px) {
|
|
1954
2060
|
margin-left: 28px !important;
|
|
1955
2061
|
}
|
|
1956
|
-
|
|
2062
|
+
`;
|
|
1957
2063
|
export const InfoGroup = styled.div`
|
|
1958
2064
|
display: inline-grid;
|
|
1959
2065
|
grid-auto-flow: column;
|
|
@@ -1974,8 +2080,8 @@ export const InfoGroup = styled.div`
|
|
|
1974
2080
|
overflow-wrap: break-word;
|
|
1975
2081
|
word-break: break-word;
|
|
1976
2082
|
}
|
|
1977
|
-
|
|
1978
|
-
export const MuteLabel = styled.span<{ $size?:
|
|
2083
|
+
`;
|
|
2084
|
+
export const MuteLabel = styled.span<{ $size?: "medium" }>`
|
|
1979
2085
|
color: var(--mt-clr);
|
|
1980
2086
|
font-size: 12px;
|
|
1981
2087
|
word-break: break-all;
|
|
@@ -1984,41 +2090,46 @@ export const MuteLabel = styled.span<{ $size?: 'medium' }>`
|
|
|
1984
2090
|
grid-auto-flow: column;
|
|
1985
2091
|
justify-content: start;
|
|
1986
2092
|
grid-gap: 4px;
|
|
1987
|
-
* {
|
|
1988
|
-
margin-right: 0;
|
|
2093
|
+
* {
|
|
2094
|
+
margin-right: 0;
|
|
1989
2095
|
}
|
|
1990
2096
|
}
|
|
1991
|
-
${({ $size }) =>
|
|
1992
|
-
|
|
1993
|
-
|
|
1994
|
-
|
|
1995
|
-
|
|
1996
|
-
|
|
1997
|
-
|
|
1998
|
-
|
|
1999
|
-
|
|
2097
|
+
${({ $size }) =>
|
|
2098
|
+
$size === "medium" &&
|
|
2099
|
+
css`
|
|
2100
|
+
font-size: 13px;
|
|
2101
|
+
line-height: 12px;
|
|
2102
|
+
* {
|
|
2103
|
+
margin-right: 4px;
|
|
2104
|
+
}
|
|
2105
|
+
`}
|
|
2106
|
+
`;
|
|
2107
|
+
export const InputGroup = styled.article<{
|
|
2108
|
+
$mode?: string;
|
|
2109
|
+
$required?: boolean;
|
|
2110
|
+
}>`
|
|
2000
2111
|
line-height: normal;
|
|
2001
|
-
> label,
|
|
2112
|
+
> label,
|
|
2002
2113
|
> aside {
|
|
2003
2114
|
${formLabel}
|
|
2004
2115
|
margin-bottom: 6px;
|
|
2005
2116
|
padding: 0 6px;
|
|
2006
2117
|
display: block;
|
|
2007
2118
|
}
|
|
2008
|
-
> div {
|
|
2009
|
-
display: grid;
|
|
2119
|
+
> div {
|
|
2120
|
+
display: grid;
|
|
2010
2121
|
}
|
|
2011
2122
|
._refRangeContainer {
|
|
2012
2123
|
width: 100%;
|
|
2013
2124
|
}
|
|
2014
2125
|
${getInputGroupModFunc}
|
|
2015
|
-
|
|
2016
|
-
export const BoxContainer = styled.aside`
|
|
2126
|
+
`;
|
|
2127
|
+
export const BoxContainer = styled.aside`
|
|
2017
2128
|
position: relative;
|
|
2018
2129
|
@media only screen and (min-width: 768px) {
|
|
2019
2130
|
padding-bottom: 16px;
|
|
2020
2131
|
}
|
|
2021
|
-
|
|
2132
|
+
`;
|
|
2022
2133
|
export const BulkActionWrapper = styled.aside<{ $isOpen?: boolean }>`
|
|
2023
2134
|
position: fixed;
|
|
2024
2135
|
z-index: 101;
|
|
@@ -2032,11 +2143,11 @@ export const BulkActionWrapper = styled.aside<{ $isOpen?: boolean }>`
|
|
|
2032
2143
|
justify-content: start;
|
|
2033
2144
|
grid-gap: 10px;
|
|
2034
2145
|
padding: 14px 1em 8px;
|
|
2035
|
-
transition: bottom .2s ease-in-out;
|
|
2146
|
+
transition: bottom 0.2s ease-in-out;
|
|
2036
2147
|
overflow: auto;
|
|
2037
2148
|
white-space: nowrap;
|
|
2038
2149
|
&.is-active {
|
|
2039
|
-
transition: bottom .2s;
|
|
2150
|
+
transition: bottom 0.2s;
|
|
2040
2151
|
bottom: 0;
|
|
2041
2152
|
}
|
|
2042
2153
|
i {
|
|
@@ -2047,7 +2158,7 @@ export const BulkActionWrapper = styled.aside<{ $isOpen?: boolean }>`
|
|
|
2047
2158
|
position: relative;
|
|
2048
2159
|
top: 7px;
|
|
2049
2160
|
}
|
|
2050
|
-
button,
|
|
2161
|
+
button,
|
|
2051
2162
|
a {
|
|
2052
2163
|
padding: 6px 16px;
|
|
2053
2164
|
font-size: 13px;
|
|
@@ -2059,16 +2170,16 @@ export const BulkActionWrapper = styled.aside<{ $isOpen?: boolean }>`
|
|
|
2059
2170
|
&._refMasterTableBulkWrapper {
|
|
2060
2171
|
position: fixed;
|
|
2061
2172
|
width: 100vw;
|
|
2062
|
-
border: 1px solid #
|
|
2063
|
-
background: #
|
|
2173
|
+
border: 1px solid #e3e3e3;
|
|
2174
|
+
background: #ffffff;
|
|
2064
2175
|
z-index: 102;
|
|
2065
2176
|
box-shadow: 0px 4px 4px rgb(0 0 0 / 25%);
|
|
2066
2177
|
border-radius: 10px 10px 0px 0px;
|
|
2067
2178
|
display: none;
|
|
2068
|
-
> i,
|
|
2069
|
-
> span,
|
|
2070
|
-
> button {
|
|
2071
|
-
display: none;
|
|
2179
|
+
> i,
|
|
2180
|
+
> span,
|
|
2181
|
+
> button {
|
|
2182
|
+
display: none;
|
|
2072
2183
|
}
|
|
2073
2184
|
> section {
|
|
2074
2185
|
padding: 1em;
|
|
@@ -2080,25 +2191,25 @@ export const BulkActionWrapper = styled.aside<{ $isOpen?: boolean }>`
|
|
|
2080
2191
|
}
|
|
2081
2192
|
}
|
|
2082
2193
|
& + ._refDropdownOverlay {
|
|
2083
|
-
display:none;
|
|
2194
|
+
display: none;
|
|
2084
2195
|
}
|
|
2085
2196
|
}
|
|
2086
2197
|
&.is-active {
|
|
2087
2198
|
@keyframes droptoup {
|
|
2088
|
-
50% {
|
|
2089
|
-
bottom: -100px;
|
|
2199
|
+
50% {
|
|
2200
|
+
bottom: -100px;
|
|
2090
2201
|
}
|
|
2091
|
-
50% {
|
|
2092
|
-
bottom: -50px;
|
|
2202
|
+
50% {
|
|
2203
|
+
bottom: -50px;
|
|
2093
2204
|
}
|
|
2094
|
-
100% {
|
|
2095
|
-
bottom: 0px;
|
|
2205
|
+
100% {
|
|
2206
|
+
bottom: 0px;
|
|
2096
2207
|
}
|
|
2097
2208
|
}
|
|
2098
2209
|
&._refMasterTableBulkWrapper {
|
|
2099
2210
|
display: grid;
|
|
2100
2211
|
left: 0;
|
|
2101
|
-
animation: droptoup .075s linear;
|
|
2212
|
+
animation: droptoup 0.075s linear;
|
|
2102
2213
|
bottom: 0;
|
|
2103
2214
|
overflow-x: hidden;
|
|
2104
2215
|
& + ._refDropdownOverlay {
|
|
@@ -2109,46 +2220,48 @@ export const BulkActionWrapper = styled.aside<{ $isOpen?: boolean }>`
|
|
|
2109
2220
|
top: 0;
|
|
2110
2221
|
left: 0;
|
|
2111
2222
|
z-index: 100;
|
|
2112
|
-
background-color: rgba(0, 0, 0, .1);
|
|
2223
|
+
background-color: rgba(0, 0, 0, 0.1);
|
|
2113
2224
|
}
|
|
2114
2225
|
}
|
|
2115
2226
|
}
|
|
2116
2227
|
}
|
|
2117
|
-
${({ $isOpen }) =>
|
|
2118
|
-
|
|
2119
|
-
|
|
2120
|
-
|
|
2121
|
-
|
|
2122
|
-
|
|
2123
|
-
|
|
2124
|
-
|
|
2125
|
-
|
|
2126
|
-
|
|
2127
|
-
|
|
2128
|
-
|
|
2129
|
-
|
|
2228
|
+
${({ $isOpen }) =>
|
|
2229
|
+
$isOpen &&
|
|
2230
|
+
css`
|
|
2231
|
+
transition: bottom 0.2s;
|
|
2232
|
+
bottom: 0;
|
|
2233
|
+
@media (max-width: 767.9px) {
|
|
2234
|
+
@keyframes droptoup {
|
|
2235
|
+
50% {
|
|
2236
|
+
bottom: -100px;
|
|
2237
|
+
}
|
|
2238
|
+
50% {
|
|
2239
|
+
bottom: -50px;
|
|
2240
|
+
}
|
|
2241
|
+
100% {
|
|
2242
|
+
bottom: 0px;
|
|
2243
|
+
}
|
|
2130
2244
|
}
|
|
2131
|
-
|
|
2132
|
-
|
|
2133
|
-
display: grid;
|
|
2134
|
-
left: 0;
|
|
2135
|
-
animation: droptoup .075s linear;
|
|
2136
|
-
bottom: 0;
|
|
2137
|
-
overflow-x: hidden;
|
|
2138
|
-
& + ._refDropdownOverlay {
|
|
2139
|
-
display: block;
|
|
2140
|
-
width: 100%;
|
|
2141
|
-
height: 100%;
|
|
2142
|
-
position: fixed;
|
|
2143
|
-
top: 0;
|
|
2245
|
+
&._refMasterTableBulkWrapper {
|
|
2246
|
+
display: grid;
|
|
2144
2247
|
left: 0;
|
|
2145
|
-
|
|
2146
|
-
|
|
2248
|
+
animation: droptoup 0.075s linear;
|
|
2249
|
+
bottom: 0;
|
|
2250
|
+
overflow-x: hidden;
|
|
2251
|
+
& + ._refDropdownOverlay {
|
|
2252
|
+
display: block;
|
|
2253
|
+
width: 100%;
|
|
2254
|
+
height: 100%;
|
|
2255
|
+
position: fixed;
|
|
2256
|
+
top: 0;
|
|
2257
|
+
left: 0;
|
|
2258
|
+
z-index: 100;
|
|
2259
|
+
background-color: rgba(0, 0, 0, 0.1);
|
|
2260
|
+
}
|
|
2147
2261
|
}
|
|
2148
2262
|
}
|
|
2149
|
-
}
|
|
2150
|
-
|
|
2151
|
-
`
|
|
2263
|
+
`}
|
|
2264
|
+
`;
|
|
2152
2265
|
export const InitialContainer = styled.span`
|
|
2153
2266
|
height: 32px;
|
|
2154
2267
|
background-color: #000;
|
|
@@ -2158,8 +2271,8 @@ export const InitialContainer = styled.span`
|
|
|
2158
2271
|
text-align: center !important;
|
|
2159
2272
|
border-radius: var(--ter-rd);
|
|
2160
2273
|
width: 100%;
|
|
2161
|
-
|
|
2162
|
-
export const MasterTableActionWrapper = styled.section<{ $mode?:
|
|
2274
|
+
`;
|
|
2275
|
+
export const MasterTableActionWrapper = styled.section<{ $mode?: "picklist" }>`
|
|
2163
2276
|
height: 35px;
|
|
2164
2277
|
border-bottom: 1px solid var(--tab-clr-ln);
|
|
2165
2278
|
background-color: var(--pri-clr-bg);
|
|
@@ -2173,16 +2286,18 @@ export const MasterTableActionWrapper = styled.section<{ $mode?: 'picklist' }>`
|
|
|
2173
2286
|
grid-gap: 5px;
|
|
2174
2287
|
}
|
|
2175
2288
|
}
|
|
2176
|
-
${({ $mode }) =>
|
|
2177
|
-
|
|
2178
|
-
|
|
2179
|
-
|
|
2180
|
-
|
|
2181
|
-
height: 50px
|
|
2182
|
-
|
|
2183
|
-
|
|
2184
|
-
|
|
2185
|
-
|
|
2289
|
+
${({ $mode }) =>
|
|
2290
|
+
$mode === "picklist" &&
|
|
2291
|
+
css`
|
|
2292
|
+
background-color: var(--ter-clr-bg);
|
|
2293
|
+
border-top: 1px solid var(--tab-clr-ln);
|
|
2294
|
+
height: 50px;
|
|
2295
|
+
> div {
|
|
2296
|
+
height: 50px !important;
|
|
2297
|
+
}
|
|
2298
|
+
`}
|
|
2299
|
+
`;
|
|
2300
|
+
export const FigureWraper = styled.figure<{ $size?: string }>`
|
|
2186
2301
|
margin: 0;
|
|
2187
2302
|
position: relative;
|
|
2188
2303
|
overflow: hidden;
|
|
@@ -2199,17 +2314,19 @@ export const FigureWraper = styled.figure<{ $size?: string }>`
|
|
|
2199
2314
|
background-color: var(--pri-clr-bg);
|
|
2200
2315
|
}
|
|
2201
2316
|
|
|
2202
|
-
${({ $size }) =>
|
|
2203
|
-
|
|
2204
|
-
|
|
2205
|
-
|
|
2206
|
-
|
|
2317
|
+
${({ $size }) =>
|
|
2318
|
+
$size &&
|
|
2319
|
+
css`
|
|
2320
|
+
width: ${$size};
|
|
2321
|
+
height: ${$size};
|
|
2322
|
+
`}
|
|
2323
|
+
`;
|
|
2207
2324
|
export const PanelBody = styled.section`
|
|
2208
2325
|
height: 100%;
|
|
2209
2326
|
${PanelContainer} {
|
|
2210
2327
|
overflow-y: auto;
|
|
2211
2328
|
}
|
|
2212
|
-
|
|
2329
|
+
`;
|
|
2213
2330
|
export const MultiPanelContainer = styled.main`
|
|
2214
2331
|
display: inline-grid;
|
|
2215
2332
|
width: 100%;
|
|
@@ -2227,10 +2344,10 @@ export const MultiPanelContainer = styled.main`
|
|
|
2227
2344
|
grid-template-columns: calc(100vw - 450px) 450px;
|
|
2228
2345
|
height: calc(100vh - 50px);
|
|
2229
2346
|
}
|
|
2230
|
-
|
|
2347
|
+
`;
|
|
2231
2348
|
export const LeftPanelContainer = styled.section`
|
|
2232
2349
|
border-right: 1px solid var(--lay-clr-ln);
|
|
2233
|
-
|
|
2350
|
+
`;
|
|
2234
2351
|
export const RightPanelContainer = styled.section`
|
|
2235
2352
|
display: none !important;
|
|
2236
2353
|
background-color: var(--pri-clr-bg);
|
|
@@ -2240,10 +2357,10 @@ export const RightPanelContainer = styled.section`
|
|
|
2240
2357
|
@media only screen and (min-width: 1024px) {
|
|
2241
2358
|
display: inline-grid !important;
|
|
2242
2359
|
}
|
|
2243
|
-
|
|
2360
|
+
`;
|
|
2244
2361
|
export const SearchFormWrapper = styled.div<{ $mode?: string }>`
|
|
2245
2362
|
position: relative;
|
|
2246
|
-
input[name=
|
|
2363
|
+
input[name="search"] {
|
|
2247
2364
|
font-size: 13px;
|
|
2248
2365
|
}
|
|
2249
2366
|
i {
|
|
@@ -2262,9 +2379,9 @@ export const SearchFormWrapper = styled.div<{ $mode?: string }>`
|
|
|
2262
2379
|
right: 12px;
|
|
2263
2380
|
top: 6px;
|
|
2264
2381
|
}
|
|
2265
|
-
${({ $mode }:{ $mode?: string }) => {
|
|
2266
|
-
if ($mode ===
|
|
2267
|
-
return css`
|
|
2382
|
+
${({ $mode }: { $mode?: string }) => {
|
|
2383
|
+
if ($mode === "pos") {
|
|
2384
|
+
return css`
|
|
2268
2385
|
i {
|
|
2269
2386
|
top: 7px;
|
|
2270
2387
|
}
|
|
@@ -2281,11 +2398,11 @@ export const SearchFormWrapper = styled.div<{ $mode?: string }>`
|
|
|
2281
2398
|
height: 40px;
|
|
2282
2399
|
}
|
|
2283
2400
|
}
|
|
2284
|
-
|
|
2401
|
+
`;
|
|
2285
2402
|
}
|
|
2286
2403
|
}}
|
|
2287
|
-
|
|
2288
|
-
export const TableHeadLabel = styled.span`
|
|
2404
|
+
`;
|
|
2405
|
+
export const TableHeadLabel = styled.span`
|
|
2289
2406
|
color: var(--mt-clr);
|
|
2290
2407
|
position: relative;
|
|
2291
2408
|
cursor: pointer;
|
|
@@ -2300,36 +2417,42 @@ export const TableHeadLabel = styled.span`
|
|
|
2300
2417
|
display: inline;
|
|
2301
2418
|
width: auto;
|
|
2302
2419
|
}
|
|
2303
|
-
|
|
2304
|
-
export const TableHeadWrapper = styled.div<{
|
|
2420
|
+
`;
|
|
2421
|
+
export const TableHeadWrapper = styled.div<{
|
|
2422
|
+
$mode?: string;
|
|
2423
|
+
$isPlayground?: boolean;
|
|
2424
|
+
}>`
|
|
2305
2425
|
display: grid;
|
|
2306
2426
|
border-bottom: 2px solid var(--ter-clr-ln);
|
|
2307
2427
|
padding-top: 22px;
|
|
2308
2428
|
padding-bottom: 22px;
|
|
2309
2429
|
align-items: center;
|
|
2310
|
-
> span:last-child {
|
|
2311
|
-
justify-self: right;
|
|
2430
|
+
> span:last-child {
|
|
2431
|
+
justify-self: right;
|
|
2312
2432
|
}
|
|
2313
2433
|
& ${TableHeadLabel} {
|
|
2314
|
-
&:empty,
|
|
2434
|
+
&:empty,
|
|
2435
|
+
&:last-child {
|
|
2315
2436
|
cursor: default;
|
|
2316
|
-
&:after {
|
|
2437
|
+
&:after {
|
|
2438
|
+
display: none;
|
|
2439
|
+
}
|
|
2317
2440
|
}
|
|
2318
2441
|
}
|
|
2319
2442
|
@media only screen and (min-width: 1366px) {
|
|
2320
2443
|
padding-top: 28px;
|
|
2321
2444
|
}
|
|
2322
2445
|
${getTableHeaderModFunc}
|
|
2323
|
-
|
|
2324
|
-
export const TableRowGroup = styled.div<{ $content?: string
|
|
2446
|
+
`;
|
|
2447
|
+
export const TableRowGroup = styled.div<{ $content?: string; $mode?: string }>`
|
|
2325
2448
|
display: grid;
|
|
2326
2449
|
grid-auto-flow: row;
|
|
2327
2450
|
grid-gap: 4px;
|
|
2328
2451
|
align-content: flex-start;
|
|
2329
2452
|
${getTabsRowModFunc}
|
|
2330
|
-
|
|
2331
|
-
export const TableRightGroup = styled.div`
|
|
2332
|
-
display:grid;
|
|
2453
|
+
`;
|
|
2454
|
+
export const TableRightGroup = styled.div`
|
|
2455
|
+
display: grid;
|
|
2333
2456
|
grid-auto-flow: column;
|
|
2334
2457
|
grid-gap: 6px;
|
|
2335
2458
|
align-items: center;
|
|
@@ -2342,8 +2465,11 @@ export const TableRightGroup = styled.div`
|
|
|
2342
2465
|
@media only screen and (min-width: 1366px) {
|
|
2343
2466
|
grid-gap: 8px;
|
|
2344
2467
|
}
|
|
2345
|
-
|
|
2346
|
-
export const TableColumnGroup = styled.div<{
|
|
2468
|
+
`;
|
|
2469
|
+
export const TableColumnGroup = styled.div<{
|
|
2470
|
+
$mode?: string;
|
|
2471
|
+
$content?: string;
|
|
2472
|
+
}>`
|
|
2347
2473
|
display: grid;
|
|
2348
2474
|
grid-auto-flow: column;
|
|
2349
2475
|
grid-gap: 4px;
|
|
@@ -2355,64 +2481,64 @@ export const TableColumnGroup = styled.div<{ $mode?: string, $content?: string }
|
|
|
2355
2481
|
align-items: center;
|
|
2356
2482
|
}
|
|
2357
2483
|
${getTabsColumnModFunc}
|
|
2358
|
-
|
|
2359
|
-
export const ItemPriceLabel = styled.span<{ $mode?: string }>`
|
|
2360
|
-
${({$mode}:{$mode?: string}) => {
|
|
2361
|
-
if ($mode ===
|
|
2362
|
-
return css`
|
|
2363
|
-
text-decoration: line-through;
|
|
2484
|
+
`;
|
|
2485
|
+
export const ItemPriceLabel = styled.span<{ $mode?: string }>`
|
|
2486
|
+
${({ $mode }: { $mode?: string }) => {
|
|
2487
|
+
if ($mode === "correct") {
|
|
2488
|
+
return css`
|
|
2489
|
+
text-decoration: line-through;
|
|
2364
2490
|
color: var(--mt-clr);
|
|
2365
|
-
|
|
2491
|
+
`;
|
|
2366
2492
|
}
|
|
2367
2493
|
}}
|
|
2368
|
-
|
|
2369
|
-
export const TableLabel = styled.span<{ $mode?: string }>`
|
|
2494
|
+
`;
|
|
2495
|
+
export const TableLabel = styled.span<{ $mode?: string }>`
|
|
2370
2496
|
line-height: 16px;
|
|
2371
2497
|
&._refWithIcon {
|
|
2372
|
-
> a,
|
|
2498
|
+
> a,
|
|
2373
2499
|
> span {
|
|
2374
2500
|
grid-auto-flow: column;
|
|
2375
2501
|
grid-template-columns: fit-content(95%) 15px;
|
|
2376
2502
|
display: inline-grid;
|
|
2377
2503
|
grid-gap: 4px;
|
|
2378
|
-
> span {
|
|
2379
|
-
padding-top: 2px;
|
|
2504
|
+
> span {
|
|
2505
|
+
padding-top: 2px;
|
|
2380
2506
|
}
|
|
2381
2507
|
}
|
|
2382
2508
|
}
|
|
2383
|
-
i[name=arrow-left-blue] {
|
|
2509
|
+
i[name="arrow-left-blue"] {
|
|
2384
2510
|
transform: scaleX(-1);
|
|
2385
2511
|
position: absolute;
|
|
2386
2512
|
}
|
|
2387
|
-
input[name=checkbox-list] {
|
|
2513
|
+
input[name="checkbox-list"] {
|
|
2388
2514
|
& + span {
|
|
2389
2515
|
top: 0;
|
|
2390
2516
|
}
|
|
2391
2517
|
}
|
|
2392
2518
|
> a {
|
|
2393
2519
|
> span {
|
|
2394
|
-
overflow-wrap: anywhere;
|
|
2520
|
+
overflow-wrap: anywhere;
|
|
2395
2521
|
}
|
|
2396
2522
|
}
|
|
2397
2523
|
@media only screen and (max-width: 767px) {
|
|
2398
|
-
input[name=checkbox-list] {
|
|
2524
|
+
input[name="checkbox-list"] {
|
|
2399
2525
|
& + span {
|
|
2400
2526
|
left: 0;
|
|
2401
2527
|
}
|
|
2402
2528
|
}
|
|
2403
2529
|
}
|
|
2404
2530
|
${({ $mode }: { $mode?: string }) => {
|
|
2405
|
-
if ($mode ===
|
|
2406
|
-
return css`
|
|
2531
|
+
if ($mode === "product") {
|
|
2532
|
+
return css`
|
|
2407
2533
|
line-height: 15px;
|
|
2408
2534
|
align-items: center;
|
|
2409
2535
|
padding-right: 8px;
|
|
2410
2536
|
margin-left: -6px;
|
|
2411
|
-
|
|
2537
|
+
`;
|
|
2412
2538
|
}
|
|
2413
2539
|
}}
|
|
2414
|
-
|
|
2415
|
-
export const NameLabel = styled.span<{ $mode?: string }>`
|
|
2540
|
+
`;
|
|
2541
|
+
export const NameLabel = styled.span<{ $mode?: string }>`
|
|
2416
2542
|
font-size: 16px;
|
|
2417
2543
|
font-weight: 600;
|
|
2418
2544
|
color: var(--hd-clr);
|
|
@@ -2422,49 +2548,51 @@ export const NameLabel = styled.span<{ $mode?: string }>`
|
|
|
2422
2548
|
display: inline;
|
|
2423
2549
|
}
|
|
2424
2550
|
${getNameModFunc}
|
|
2425
|
-
|
|
2551
|
+
`;
|
|
2426
2552
|
export const TabsHeader = styled.article`
|
|
2427
2553
|
margin: 0 auto;
|
|
2428
2554
|
${responseWidth}
|
|
2429
|
-
|
|
2555
|
+
`;
|
|
2430
2556
|
export const TabsItem = styled.div<{ $activated?: boolean }>`
|
|
2431
2557
|
cursor: pointer;
|
|
2432
2558
|
position: relative;
|
|
2433
2559
|
padding: 9px;
|
|
2434
|
-
color: ${({ $activated }:{ $activated?: boolean }) =>
|
|
2560
|
+
color: ${({ $activated }: { $activated?: boolean }) =>
|
|
2561
|
+
$activated ? "var(--sec-clr-lnk__hvr)" : "var(--pri-clr-lnk)"};
|
|
2435
2562
|
&::after {
|
|
2436
|
-
content:
|
|
2563
|
+
content: "";
|
|
2437
2564
|
position: absolute;
|
|
2438
|
-
background-color: #
|
|
2565
|
+
background-color: #ff585c;
|
|
2439
2566
|
left: 0;
|
|
2440
2567
|
height: 2px;
|
|
2441
2568
|
bottom: 0;
|
|
2442
2569
|
right: 0;
|
|
2443
2570
|
width: 100%;
|
|
2444
2571
|
transition: all 250ms ease 0s;
|
|
2445
|
-
transform: ${({ $activated }:{ $activated?: boolean }) =>
|
|
2572
|
+
transform: ${({ $activated }: { $activated?: boolean }) =>
|
|
2573
|
+
$activated ? "scale(1)" : "scale(0)"};
|
|
2446
2574
|
}
|
|
2447
2575
|
@media only screen and (min-width: 768px) {
|
|
2448
2576
|
font-size: 16px;
|
|
2449
2577
|
font-weight: 600;
|
|
2450
2578
|
padding: 16px 15px 11px 15px;
|
|
2451
2579
|
}
|
|
2452
|
-
|
|
2453
|
-
export const TabsList = styled.div`
|
|
2580
|
+
`;
|
|
2581
|
+
export const TabsList = styled.div`
|
|
2454
2582
|
display: inline-grid;
|
|
2455
2583
|
grid-auto-flow: column;
|
|
2456
2584
|
grid-gap: 4px;
|
|
2457
2585
|
grid-auto-columns: max-content;
|
|
2458
2586
|
width: auto;
|
|
2459
2587
|
min-width: 100%;
|
|
2460
|
-
|
|
2588
|
+
`;
|
|
2461
2589
|
export const TabsWrapper = styled.section<{ $mode?: string }>`
|
|
2462
2590
|
width: 100%;
|
|
2463
2591
|
overflow: auto;
|
|
2464
2592
|
&.is-sticky {
|
|
2465
|
-
position: fixed;
|
|
2593
|
+
position: fixed;
|
|
2466
2594
|
top: 48px;
|
|
2467
|
-
z-index: 9;
|
|
2595
|
+
z-index: 9;
|
|
2468
2596
|
background-color: var(--sec-clr-bg);
|
|
2469
2597
|
& + div {
|
|
2470
2598
|
margin-top: 40px;
|
|
@@ -2486,8 +2614,8 @@ export const TabsWrapper = styled.section<{ $mode?: string }>`
|
|
|
2486
2614
|
}
|
|
2487
2615
|
}
|
|
2488
2616
|
${getTabsWrapperModFunc}
|
|
2489
|
-
|
|
2490
|
-
export const TableItemColumn = styled.div<{ $mode?: string }>`
|
|
2617
|
+
`;
|
|
2618
|
+
export const TableItemColumn = styled.div<{ $mode?: string }>`
|
|
2491
2619
|
display: grid;
|
|
2492
2620
|
&._refFooterContainer {
|
|
2493
2621
|
font-weight: 600;
|
|
@@ -2516,8 +2644,12 @@ export const TableItemColumn = styled.div<{ $mode?: string }>`
|
|
|
2516
2644
|
}
|
|
2517
2645
|
}
|
|
2518
2646
|
${getTableItemModFunc}
|
|
2519
|
-
|
|
2520
|
-
export const TableItemWrapper = styled.section<{
|
|
2647
|
+
`;
|
|
2648
|
+
export const TableItemWrapper = styled.section<{
|
|
2649
|
+
$mode: string;
|
|
2650
|
+
$isBorder?: boolean;
|
|
2651
|
+
$isPopup?: boolean;
|
|
2652
|
+
}>`
|
|
2521
2653
|
overflow-x: auto;
|
|
2522
2654
|
${TableItemColumn} {
|
|
2523
2655
|
width: 960px;
|
|
@@ -2528,12 +2660,14 @@ export const TableItemWrapper = styled.section<{ $mode: string, $isBorder?: bool
|
|
|
2528
2660
|
&:first-child {
|
|
2529
2661
|
border-bottom: 1px solid var(--sec-clr-ln);
|
|
2530
2662
|
display: grid;
|
|
2531
|
-
> * {
|
|
2532
|
-
padding: 0 10px 12px;
|
|
2663
|
+
> * {
|
|
2664
|
+
padding: 0 10px 12px;
|
|
2533
2665
|
}
|
|
2534
2666
|
}
|
|
2535
|
-
&:last-child {
|
|
2536
|
-
|
|
2667
|
+
&:last-child {
|
|
2668
|
+
border-bottom: none;
|
|
2669
|
+
}
|
|
2670
|
+
&[role="rowheader"] {
|
|
2537
2671
|
${headTable}
|
|
2538
2672
|
color: var(--mt-clr);
|
|
2539
2673
|
}
|
|
@@ -2543,26 +2677,26 @@ export const TableItemWrapper = styled.section<{ $mode: string, $isBorder?: bool
|
|
|
2543
2677
|
}
|
|
2544
2678
|
@media only screen and (min-width: 1024px) {
|
|
2545
2679
|
overflow-x: unset;
|
|
2546
|
-
${TableItemColumn} {
|
|
2547
|
-
width: unset;
|
|
2680
|
+
${TableItemColumn} {
|
|
2681
|
+
width: unset;
|
|
2548
2682
|
}
|
|
2549
2683
|
}
|
|
2550
2684
|
${getTableItemWrapperModFunc}
|
|
2551
|
-
|
|
2552
|
-
export const UpdateContainer = styled.section<{ $mode?:
|
|
2685
|
+
`;
|
|
2686
|
+
export const UpdateContainer = styled.section<{ $mode?: "notif" }>`
|
|
2553
2687
|
${responseWidth}
|
|
2554
2688
|
position: relative;
|
|
2555
2689
|
display: grid;
|
|
2556
2690
|
grid-auto-flow: column;
|
|
2557
2691
|
text-align: right;
|
|
2558
|
-
grid-gap: 5px;
|
|
2559
|
-
margin: 0
|
|
2692
|
+
grid-gap: 5px;
|
|
2693
|
+
margin: 0 0.625em;
|
|
2560
2694
|
justify-content: center;
|
|
2561
2695
|
width: auto;
|
|
2562
|
-
border-radius: .5rem;
|
|
2696
|
+
border-radius: 0.5rem;
|
|
2563
2697
|
align-items: center;
|
|
2564
2698
|
align-content: center;
|
|
2565
|
-
padding: .5em 10px;
|
|
2699
|
+
padding: 0.5em 10px;
|
|
2566
2700
|
> section {
|
|
2567
2701
|
justify-content: center;
|
|
2568
2702
|
}
|
|
@@ -2574,7 +2708,7 @@ export const UpdateContainer = styled.section<{ $mode?: 'notif' }>`
|
|
|
2574
2708
|
align-items: center;
|
|
2575
2709
|
}
|
|
2576
2710
|
@media only screen and (min-width: 375px) {
|
|
2577
|
-
margin: 0
|
|
2711
|
+
margin: 0 20px;
|
|
2578
2712
|
}
|
|
2579
2713
|
@media only screen and (min-width: 1024px) {
|
|
2580
2714
|
margin: 0 18px;
|
|
@@ -2583,32 +2717,36 @@ export const UpdateContainer = styled.section<{ $mode?: 'notif' }>`
|
|
|
2583
2717
|
margin: 0 29px;
|
|
2584
2718
|
}
|
|
2585
2719
|
|
|
2586
|
-
${({ $mode }) =>
|
|
2587
|
-
|
|
2588
|
-
|
|
2589
|
-
|
|
2590
|
-
|
|
2591
|
-
|
|
2592
|
-
|
|
2593
|
-
|
|
2594
|
-
|
|
2595
|
-
|
|
2596
|
-
|
|
2597
|
-
|
|
2720
|
+
${({ $mode }) =>
|
|
2721
|
+
$mode === "notif" &&
|
|
2722
|
+
css`
|
|
2723
|
+
background-color: #fbe3e1;
|
|
2724
|
+
border: 1px solid var(--act-clr-ln);
|
|
2725
|
+
> section {
|
|
2726
|
+
color: #ff585c;
|
|
2727
|
+
text-align: center;
|
|
2728
|
+
align-items: center;
|
|
2729
|
+
span {
|
|
2730
|
+
line-height: 20px;
|
|
2731
|
+
}
|
|
2732
|
+
> a {
|
|
2733
|
+
justify-self: center;
|
|
2734
|
+
}
|
|
2598
2735
|
}
|
|
2599
|
-
}
|
|
2600
|
-
`}
|
|
2736
|
+
`}
|
|
2601
2737
|
|
|
2602
|
-
${({ $mode }) =>
|
|
2603
|
-
|
|
2604
|
-
|
|
2605
|
-
|
|
2606
|
-
|
|
2607
|
-
|
|
2738
|
+
${({ $mode }) =>
|
|
2739
|
+
!$mode &&
|
|
2740
|
+
css`
|
|
2741
|
+
background-color: #ffffee;
|
|
2742
|
+
border: 1px solid var(--lay-clr-ln);
|
|
2743
|
+
`}
|
|
2744
|
+
`;
|
|
2745
|
+
export const CollapseContainer = styled.div<{ $mode?: "nav" }>`
|
|
2608
2746
|
position: relative;
|
|
2609
2747
|
top: 0;
|
|
2610
2748
|
overflow-y: hidden;
|
|
2611
|
-
transition: height .35s ease;
|
|
2749
|
+
transition: height 0.35s ease;
|
|
2612
2750
|
display: grid;
|
|
2613
2751
|
grid-gap: 10px;
|
|
2614
2752
|
&.collapsed {
|
|
@@ -2618,10 +2756,12 @@ export const CollapseContainer = styled.div<{ $mode?: 'nav' }>`
|
|
|
2618
2756
|
&.is-loading {
|
|
2619
2757
|
height: 0 !important;
|
|
2620
2758
|
}
|
|
2621
|
-
${({ $mode }) =>
|
|
2622
|
-
|
|
2623
|
-
|
|
2624
|
-
|
|
2759
|
+
${({ $mode }) =>
|
|
2760
|
+
$mode === "nav" &&
|
|
2761
|
+
css`
|
|
2762
|
+
display: block;
|
|
2763
|
+
`}
|
|
2764
|
+
`;
|
|
2625
2765
|
export const PaginationContainer = styled.div`
|
|
2626
2766
|
margin: 9px auto 10px;
|
|
2627
2767
|
display: inline-grid;
|
|
@@ -2632,8 +2772,8 @@ export const PaginationContainer = styled.div`
|
|
|
2632
2772
|
margin: 9px auto 30px;
|
|
2633
2773
|
padding: 16px 0 16px;
|
|
2634
2774
|
}
|
|
2635
|
-
|
|
2636
|
-
export const PageWrapper = styled.div<{ $mode?:
|
|
2775
|
+
`;
|
|
2776
|
+
export const PageWrapper = styled.div<{ $mode?: "noPageOption" }>`
|
|
2637
2777
|
display: grid;
|
|
2638
2778
|
grid-auto-flow: row;
|
|
2639
2779
|
grid-gap: 10px;
|
|
@@ -2645,12 +2785,12 @@ export const PageWrapper = styled.div<{ $mode?: 'noPageOption' }>`
|
|
|
2645
2785
|
grid-gap: 5px;
|
|
2646
2786
|
grid-template-columns: max-content;
|
|
2647
2787
|
justify-content: center;
|
|
2648
|
-
._refPageButton:first-child,
|
|
2788
|
+
._refPageButton:first-child,
|
|
2649
2789
|
._refPageButton:last-child {
|
|
2650
2790
|
display: none;
|
|
2651
2791
|
}
|
|
2652
2792
|
@media only screen and (min-width: 375px) {
|
|
2653
|
-
._refPageButton:first-child,
|
|
2793
|
+
._refPageButton:first-child,
|
|
2654
2794
|
._refPageButton:last-child {
|
|
2655
2795
|
display: grid;
|
|
2656
2796
|
}
|
|
@@ -2668,15 +2808,20 @@ export const PageWrapper = styled.div<{ $mode?: 'noPageOption' }>`
|
|
|
2668
2808
|
justify-content: start;
|
|
2669
2809
|
}
|
|
2670
2810
|
}
|
|
2671
|
-
${({ $mode }) =>
|
|
2672
|
-
|
|
2673
|
-
|
|
2674
|
-
|
|
2811
|
+
${({ $mode }) =>
|
|
2812
|
+
$mode === "noPageOption" &&
|
|
2813
|
+
css`
|
|
2814
|
+
@media only screen and (min-width: 768px) {
|
|
2815
|
+
> div:first-child {
|
|
2816
|
+
justify-content: center;
|
|
2817
|
+
}
|
|
2675
2818
|
}
|
|
2676
|
-
}
|
|
2677
|
-
|
|
2678
|
-
|
|
2679
|
-
|
|
2819
|
+
`}
|
|
2820
|
+
`;
|
|
2821
|
+
export const PageButton = styled.div<{
|
|
2822
|
+
$activated?: boolean;
|
|
2823
|
+
disabled?: boolean;
|
|
2824
|
+
}>`
|
|
2680
2825
|
display: grid;
|
|
2681
2826
|
justify-content: center;
|
|
2682
2827
|
align-content: center;
|
|
@@ -2695,41 +2840,47 @@ export const PageButton = styled.div<{ $activated?: boolean, disabled?: boolean
|
|
|
2695
2840
|
margin-top: -3px;
|
|
2696
2841
|
}
|
|
2697
2842
|
|
|
2698
|
-
${({ $activated }) =>
|
|
2699
|
-
$
|
|
2700
|
-
|
|
2843
|
+
${({ $activated }) =>
|
|
2844
|
+
$activated &&
|
|
2845
|
+
css`
|
|
2846
|
+
${buttonActiveStyle}
|
|
2847
|
+
`}
|
|
2701
2848
|
|
|
2702
|
-
${({ disabled }) =>
|
|
2703
|
-
|
|
2704
|
-
|
|
2705
|
-
|
|
2706
|
-
|
|
2707
|
-
|
|
2708
|
-
|
|
2709
|
-
|
|
2710
|
-
|
|
2849
|
+
${({ disabled }) =>
|
|
2850
|
+
disabled &&
|
|
2851
|
+
css`
|
|
2852
|
+
&,
|
|
2853
|
+
&:hover {
|
|
2854
|
+
background: var(--mt-clr-bg);
|
|
2855
|
+
border-color: var(--ck-clr-ln);
|
|
2856
|
+
opacity: 0.5;
|
|
2857
|
+
cursor: default;
|
|
2858
|
+
}
|
|
2859
|
+
`}
|
|
2860
|
+
`;
|
|
2711
2861
|
export const PageLabel = styled.span`
|
|
2712
2862
|
font-size: 12px;
|
|
2713
2863
|
text-align: center;
|
|
2714
|
-
|
|
2864
|
+
`;
|
|
2715
2865
|
export const PageDot = styled.div`
|
|
2716
2866
|
padding-top: 3px;
|
|
2717
2867
|
height: 28px;
|
|
2718
2868
|
width: 28px;
|
|
2719
2869
|
text-align: center;
|
|
2720
|
-
|
|
2721
|
-
export const ButtonLabel = styled.span`
|
|
2870
|
+
`;
|
|
2871
|
+
export const ButtonLabel = styled.span`
|
|
2722
2872
|
font-size: 14px;
|
|
2723
2873
|
font-weight: 400;
|
|
2724
|
-
|
|
2725
|
-
export const LinkContainer = styled.article<{ $align?: string }>`
|
|
2874
|
+
`;
|
|
2875
|
+
export const LinkContainer = styled.article<{ $align?: string }>`
|
|
2726
2876
|
display: inline-grid;
|
|
2727
2877
|
grid-auto-flow: row;
|
|
2728
2878
|
grid-gap: 14px;
|
|
2729
2879
|
width: 100%;
|
|
2730
|
-
a,
|
|
2731
|
-
span {
|
|
2732
|
-
text-align: ${({ $align }:{ $align?: string }) =>
|
|
2880
|
+
a,
|
|
2881
|
+
span {
|
|
2882
|
+
text-align: ${({ $align }: { $align?: string }) =>
|
|
2883
|
+
$align === "right" ? "right" : "left"};
|
|
2733
2884
|
text-transform: capitalize;
|
|
2734
2885
|
cursor: pointer;
|
|
2735
2886
|
}
|
|
@@ -2738,13 +2889,13 @@ export const LinkContainer = styled.article<{ $align?: string }>`
|
|
|
2738
2889
|
border: 0;
|
|
2739
2890
|
border-top: 1px solid var(--pri-clr-ln);
|
|
2740
2891
|
}
|
|
2741
|
-
|
|
2742
|
-
export const FilterContainer = styled.article`
|
|
2892
|
+
`;
|
|
2893
|
+
export const FilterContainer = styled.article`
|
|
2743
2894
|
> div {
|
|
2744
2895
|
justify-content: left;
|
|
2745
2896
|
}
|
|
2746
|
-
|
|
2747
|
-
export const SearchFilterContainer = styled.div<{ $mode?:
|
|
2897
|
+
`;
|
|
2898
|
+
export const SearchFilterContainer = styled.div<{ $mode?: "detail" }>`
|
|
2748
2899
|
width: 100%;
|
|
2749
2900
|
margin-bottom: 16px !important;
|
|
2750
2901
|
> article {
|
|
@@ -2763,11 +2914,13 @@ export const SearchFilterContainer = styled.div<{ $mode?: 'detail' }>`
|
|
|
2763
2914
|
margin-top: 0px;
|
|
2764
2915
|
justify-items: unset;
|
|
2765
2916
|
}
|
|
2766
|
-
}
|
|
2767
|
-
${({ $mode }) =>
|
|
2768
|
-
|
|
2769
|
-
|
|
2770
|
-
|
|
2917
|
+
}
|
|
2918
|
+
${({ $mode }) =>
|
|
2919
|
+
$mode === "detail" &&
|
|
2920
|
+
css`
|
|
2921
|
+
padding-bottom: 10px;
|
|
2922
|
+
`}
|
|
2923
|
+
`;
|
|
2771
2924
|
export const SearchWrapper = styled.div<{ $width?: string }>`
|
|
2772
2925
|
display: grid;
|
|
2773
2926
|
grid-template-columns: 148px 1fr;
|
|
@@ -2788,10 +2941,10 @@ export const SearchWrapper = styled.div<{ $width?: string }>`
|
|
|
2788
2941
|
font-style: normal;
|
|
2789
2942
|
}
|
|
2790
2943
|
}
|
|
2791
|
-
button {
|
|
2792
|
-
width: 148px;
|
|
2944
|
+
button {
|
|
2945
|
+
width: 148px;
|
|
2793
2946
|
padding: 6px 23px 6px 12px;
|
|
2794
|
-
border-radius: .5rem 0 0 .5rem;
|
|
2947
|
+
border-radius: 0.5rem 0 0 0.5rem;
|
|
2795
2948
|
}
|
|
2796
2949
|
@media only screen and (min-width: 1280px) {
|
|
2797
2950
|
width: 350px;
|
|
@@ -2803,15 +2956,15 @@ export const SearchWrapper = styled.div<{ $width?: string }>`
|
|
|
2803
2956
|
if ($width) {
|
|
2804
2957
|
const _width = $width ? parseInt($width) : 0;
|
|
2805
2958
|
return css`
|
|
2806
|
-
grid-template-columns: ${
|
|
2959
|
+
grid-template-columns: ${_width + "px"} 1fr;
|
|
2807
2960
|
button {
|
|
2808
2961
|
width: ${$width};
|
|
2809
2962
|
}
|
|
2810
|
-
|
|
2963
|
+
`;
|
|
2811
2964
|
}
|
|
2812
2965
|
}}
|
|
2813
|
-
|
|
2814
|
-
export const ButtonGroup = styled.div`
|
|
2966
|
+
`;
|
|
2967
|
+
export const ButtonGroup = styled.div`
|
|
2815
2968
|
position: relative;
|
|
2816
2969
|
display: grid;
|
|
2817
2970
|
grid-auto-flow: column;
|
|
@@ -2824,10 +2977,10 @@ export const ButtonGroup = styled.div`
|
|
|
2824
2977
|
color: var(--mt-clr);
|
|
2825
2978
|
padding: 0 12px;
|
|
2826
2979
|
}
|
|
2827
|
-
> button,
|
|
2980
|
+
> button,
|
|
2828
2981
|
._refContainer {
|
|
2829
2982
|
border-right: 1px solid var(--sec-clr-ln);
|
|
2830
|
-
&:last-child{
|
|
2983
|
+
&:last-child {
|
|
2831
2984
|
border-right: 0;
|
|
2832
2985
|
}
|
|
2833
2986
|
}
|
|
@@ -2846,8 +2999,8 @@ export const ButtonGroup = styled.div`
|
|
|
2846
2999
|
font-size: var(--pri-ft-sz);
|
|
2847
3000
|
}
|
|
2848
3001
|
}
|
|
2849
|
-
|
|
2850
|
-
export const FilterWrapper = styled.section`
|
|
3002
|
+
`;
|
|
3003
|
+
export const FilterWrapper = styled.section`
|
|
2851
3004
|
display: inline-block;
|
|
2852
3005
|
padding-left: 0;
|
|
2853
3006
|
width: 100%;
|
|
@@ -2872,10 +3025,10 @@ export const FilterWrapper = styled.section`
|
|
|
2872
3025
|
&:nth-of-type(even) {
|
|
2873
3026
|
margin-right: 0;
|
|
2874
3027
|
}
|
|
2875
|
-
&:nth-of-type(n+3) {
|
|
3028
|
+
&:nth-of-type(n + 3) {
|
|
2876
3029
|
margin-top: 10px;
|
|
2877
3030
|
}
|
|
2878
|
-
> section > button,
|
|
3031
|
+
> section > button,
|
|
2879
3032
|
> div > button {
|
|
2880
3033
|
width: 100%;
|
|
2881
3034
|
overflow: hidden;
|
|
@@ -2885,12 +3038,12 @@ export const FilterWrapper = styled.section`
|
|
|
2885
3038
|
max-width: 100%;
|
|
2886
3039
|
}
|
|
2887
3040
|
}
|
|
2888
|
-
> div:nth-child(n+2) {
|
|
3041
|
+
> div:nth-child(n + 2) {
|
|
2889
3042
|
display: inline-block;
|
|
2890
3043
|
width: 48.35% !important;
|
|
2891
3044
|
}
|
|
2892
3045
|
> article {
|
|
2893
|
-
float: left
|
|
3046
|
+
float: left;
|
|
2894
3047
|
}
|
|
2895
3048
|
}
|
|
2896
3049
|
@media only screen and (min-width: 425px) {
|
|
@@ -2912,17 +3065,17 @@ export const FilterWrapper = styled.section`
|
|
|
2912
3065
|
align-items: center;
|
|
2913
3066
|
margin-top: 0px;
|
|
2914
3067
|
}
|
|
2915
|
-
&:first-child {
|
|
3068
|
+
&:first-child {
|
|
2916
3069
|
padding-left: 0;
|
|
2917
3070
|
}
|
|
2918
3071
|
${ButtonGroup} {
|
|
2919
3072
|
margin-bottom: 0;
|
|
2920
3073
|
}
|
|
2921
3074
|
}
|
|
2922
|
-
|
|
2923
|
-
export const ListTableContainer = styled.div`
|
|
3075
|
+
`;
|
|
3076
|
+
export const ListTableContainer = styled.div`
|
|
2924
3077
|
display: grid;
|
|
2925
|
-
padding: 0 .625em 10px;
|
|
3078
|
+
padding: 0 0.625em 10px;
|
|
2926
3079
|
@media only screen and (min-width: 375px) {
|
|
2927
3080
|
padding: 0 20px;
|
|
2928
3081
|
}
|
|
@@ -2932,61 +3085,82 @@ export const ListTableContainer = styled.div`
|
|
|
2932
3085
|
@media only screen and (min-width: 1800px) {
|
|
2933
3086
|
padding: 0 16px 0 9px;
|
|
2934
3087
|
}
|
|
2935
|
-
|
|
2936
|
-
export const ItemTable = styled.section
|
|
3088
|
+
`;
|
|
3089
|
+
export const ItemTable = styled.section``;
|
|
2937
3090
|
|
|
2938
3091
|
const listTableStyles = {
|
|
2939
3092
|
item: css`
|
|
2940
3093
|
${ItemTable} {
|
|
2941
|
-
grid-template-columns: var(--checkbox) var(--item) minmax(
|
|
2942
|
-
|
|
2943
|
-
|
|
2944
|
-
|
|
3094
|
+
grid-template-columns: var(--checkbox) var(--item) minmax(
|
|
3095
|
+
auto,
|
|
3096
|
+
max-content
|
|
3097
|
+
) var(--time) minmax(88px, auto);
|
|
3098
|
+
&[role="rowheader"] > div[role="group"],
|
|
3099
|
+
&[role="row"] > div[role="cellgroup"] > div[role="rowgroup"],
|
|
3100
|
+
._refCollapse > div:not(._refCollapseContainer),
|
|
2945
3101
|
._refCollapseContainer > div {
|
|
2946
|
-
grid-template-columns: var(--variant) var(--sku) var(--qty-big) var(
|
|
3102
|
+
grid-template-columns: var(--variant) var(--sku) var(--qty-big) var(
|
|
3103
|
+
--price
|
|
3104
|
+
) var(--status-big);
|
|
2947
3105
|
}
|
|
2948
|
-
input[name=checkbox-list] {
|
|
2949
|
-
& + span {
|
|
3106
|
+
input[name="checkbox-list"] {
|
|
3107
|
+
& + span {
|
|
2950
3108
|
top: 8px;
|
|
2951
3109
|
}
|
|
2952
3110
|
}
|
|
2953
3111
|
}
|
|
2954
3112
|
`,
|
|
2955
|
-
|
|
3113
|
+
"item-nocheck": css`
|
|
2956
3114
|
${ItemTable} {
|
|
2957
|
-
grid-template-columns: var(--item) minmax(auto, max-content) var(
|
|
2958
|
-
|
|
2959
|
-
|
|
2960
|
-
|
|
3115
|
+
grid-template-columns: var(--item) minmax(auto, max-content) var(
|
|
3116
|
+
--time
|
|
3117
|
+
) minmax(88px, auto);
|
|
3118
|
+
&[role="rowheader"] > div[role="group"],
|
|
3119
|
+
&[role="row"] > div[role="cellgroup"] > div[role="rowgroup"],
|
|
3120
|
+
._refCollapse > div:not(._refCollapseContainer),
|
|
2961
3121
|
._refCollapseContainer > div {
|
|
2962
|
-
grid-template-columns: var(--variant) var(--sku) var(--qty-big) var(
|
|
3122
|
+
grid-template-columns: var(--variant) var(--sku) var(--qty-big) var(
|
|
3123
|
+
--price
|
|
3124
|
+
) var(--status-big);
|
|
2963
3125
|
}
|
|
2964
3126
|
}
|
|
2965
3127
|
`,
|
|
2966
3128
|
listing: css`
|
|
2967
3129
|
${ItemTable} {
|
|
2968
|
-
grid-template-columns: var(--checkbox) var(--item) minmax(
|
|
2969
|
-
|
|
2970
|
-
|
|
2971
|
-
|
|
3130
|
+
grid-template-columns: var(--checkbox) var(--item) minmax(
|
|
3131
|
+
auto,
|
|
3132
|
+
max-content
|
|
3133
|
+
) minmax(88px, auto);
|
|
3134
|
+
&[role="rowheader"] > div[role="group"],
|
|
3135
|
+
&[role="row"] > div[role="cellgroup"] > div[role="rowgroup"],
|
|
3136
|
+
._refCollapse > div:not(._refCollapseContainer),
|
|
2972
3137
|
._refCollapseContainer > div {
|
|
2973
|
-
grid-template-columns: var(--variant) var(--sku) var(--sku) minmax(
|
|
3138
|
+
grid-template-columns: var(--variant) var(--sku) var(--sku) minmax(
|
|
3139
|
+
95px,
|
|
3140
|
+
115px
|
|
3141
|
+
) var(--price) var(--status-small);
|
|
2974
3142
|
}
|
|
2975
|
-
input[name=checkbox-list] {
|
|
2976
|
-
& + span {
|
|
3143
|
+
input[name="checkbox-list"] {
|
|
3144
|
+
& + span {
|
|
2977
3145
|
top: 8px;
|
|
2978
3146
|
}
|
|
2979
3147
|
}
|
|
2980
3148
|
}
|
|
2981
3149
|
`,
|
|
2982
|
-
|
|
3150
|
+
"listing-nocheck": css`
|
|
2983
3151
|
${ItemTable} {
|
|
2984
|
-
grid-template-columns: var(--item) minmax(auto, max-content) minmax(
|
|
2985
|
-
|
|
2986
|
-
|
|
2987
|
-
|
|
3152
|
+
grid-template-columns: var(--item) minmax(auto, max-content) minmax(
|
|
3153
|
+
88px,
|
|
3154
|
+
auto
|
|
3155
|
+
);
|
|
3156
|
+
&[role="rowheader"] > div[role="group"],
|
|
3157
|
+
&[role="row"] > div[role="cellgroup"] > div[role="rowgroup"],
|
|
3158
|
+
._refCollapse > div:not(._refCollapseContainer),
|
|
2988
3159
|
._refCollapseContainer > div {
|
|
2989
|
-
grid-template-columns: var(--variant) var(--sku) var(--sku) minmax(
|
|
3160
|
+
grid-template-columns: var(--variant) var(--sku) var(--sku) minmax(
|
|
3161
|
+
95px,
|
|
3162
|
+
115px
|
|
3163
|
+
) var(--price) var(--status-small);
|
|
2990
3164
|
}
|
|
2991
3165
|
}
|
|
2992
3166
|
`,
|
|
@@ -3006,68 +3180,79 @@ const listTableStyles = {
|
|
|
3006
3180
|
margin: 0;
|
|
3007
3181
|
padding: 0;
|
|
3008
3182
|
grid-gap: 0;
|
|
3009
|
-
&[role=rowheader] > div[role=group],
|
|
3010
|
-
&[role=row] > div[role=group],
|
|
3011
|
-
&[role=row] > div[role=cellgroup] > div[role=rowgroup],
|
|
3012
|
-
&[role=row] > div[role=cellgroup],
|
|
3013
|
-
._refCollapse > div:not(._refCollapseContainer),
|
|
3183
|
+
&[role="rowheader"] > div[role="group"],
|
|
3184
|
+
&[role="row"] > div[role="group"],
|
|
3185
|
+
&[role="row"] > div[role="cellgroup"] > div[role="rowgroup"],
|
|
3186
|
+
&[role="row"] > div[role="cellgroup"],
|
|
3187
|
+
._refCollapse > div:not(._refCollapseContainer),
|
|
3014
3188
|
._refCollapseContainer > div {
|
|
3015
3189
|
display: flex;
|
|
3016
3190
|
flex: 2;
|
|
3017
3191
|
grid-gap: 0;
|
|
3018
3192
|
}
|
|
3019
|
-
&[role=row] > div[role=cellgroup] {
|
|
3193
|
+
&[role="row"] > div[role="cellgroup"] {
|
|
3020
3194
|
flex-direction: column;
|
|
3021
3195
|
}
|
|
3022
|
-
&[role=rowheader] > div[role=columnheader],
|
|
3023
|
-
&[role=rowheader] > div[role=group] > div[role=cell],
|
|
3024
|
-
&[role=row] > div[role=cell],
|
|
3025
|
-
&[role=row]
|
|
3026
|
-
|
|
3027
|
-
|
|
3196
|
+
&[role="rowheader"] > div[role="columnheader"],
|
|
3197
|
+
&[role="rowheader"] > div[role="group"] > div[role="cell"],
|
|
3198
|
+
&[role="row"] > div[role="cell"],
|
|
3199
|
+
&[role="row"]
|
|
3200
|
+
> div[role="cellgroup"]
|
|
3201
|
+
> div[role="rowgroup"]
|
|
3202
|
+
> div[role="cell"],
|
|
3203
|
+
._refCollapse > div:not(._refCollapseContainer) > div[role="cell"],
|
|
3204
|
+
._refCollapseContainer > div > div[role="cell"] {
|
|
3028
3205
|
align-self: stretch;
|
|
3029
3206
|
width: 100%;
|
|
3030
3207
|
}
|
|
3031
|
-
&[role=rowheader] > div[role=columnheader],
|
|
3032
|
-
&[role=rowheader] > div[role=group] > div[role=cell] {
|
|
3208
|
+
&[role="rowheader"] > div[role="columnheader"],
|
|
3209
|
+
&[role="rowheader"] > div[role="group"] > div[role="cell"] {
|
|
3033
3210
|
padding-top: 1em;
|
|
3034
3211
|
padding-bottom: 1em;
|
|
3035
3212
|
border-bottom: 1px solid var(--ter-clr-ln);
|
|
3036
3213
|
}
|
|
3037
|
-
&[role=row] > div[role=cell],
|
|
3038
|
-
&[role=row]
|
|
3039
|
-
|
|
3040
|
-
|
|
3214
|
+
&[role="row"] > div[role="cell"],
|
|
3215
|
+
&[role="row"]
|
|
3216
|
+
> div[role="cellgroup"]
|
|
3217
|
+
> div[role="rowgroup"]
|
|
3218
|
+
> div[role="cell"],
|
|
3219
|
+
._refCollapse > div:not(._refCollapseContainer) > div[role="cell"],
|
|
3220
|
+
._refCollapseContainer > div > div[role="cell"] {
|
|
3041
3221
|
padding-top: 1.25em;
|
|
3042
3222
|
padding-bottom: 1.25em;
|
|
3043
3223
|
}
|
|
3044
|
-
&[role=rowheader],
|
|
3224
|
+
&[role="rowheader"],
|
|
3225
|
+
&[role="row"] {
|
|
3045
3226
|
padding: 0;
|
|
3046
3227
|
margin: 0;
|
|
3047
3228
|
> div {
|
|
3048
3229
|
padding-right: 12px;
|
|
3049
3230
|
&:first-child {
|
|
3050
3231
|
padding-left: 0;
|
|
3051
|
-
}
|
|
3232
|
+
}
|
|
3052
3233
|
&:last-child {
|
|
3053
3234
|
padding-right: 0;
|
|
3054
3235
|
}
|
|
3055
3236
|
}
|
|
3056
3237
|
}
|
|
3057
|
-
&[role=rowheader] > div[role=group] > div[role=cell],
|
|
3238
|
+
&[role="rowheader"] > div[role="group"] > div[role="cell"],
|
|
3239
|
+
&[role="row"]
|
|
3240
|
+
> div[role="cellgroup"]
|
|
3241
|
+
> div[role="rowgroup"]
|
|
3242
|
+
> div[role="cell"] {
|
|
3058
3243
|
padding-right: 12px;
|
|
3059
3244
|
&:last-child {
|
|
3060
|
-
|
|
3061
3245
|
}
|
|
3062
3246
|
}
|
|
3063
|
-
&[role=rowheader] {
|
|
3247
|
+
&[role="rowheader"] {
|
|
3064
3248
|
border: none;
|
|
3065
3249
|
}
|
|
3066
|
-
&[role=row] > div[role=cellgroup] > div[role=rowgroup],
|
|
3067
|
-
._refCollapse > div,
|
|
3250
|
+
&[role="row"] > div[role="cellgroup"] > div[role="rowgroup"],
|
|
3251
|
+
._refCollapse > div,
|
|
3252
|
+
._refCollapseContainer > div {
|
|
3068
3253
|
padding-bottom: 0;
|
|
3069
3254
|
padding-top: 0;
|
|
3070
|
-
&:nth-child(n+2) {
|
|
3255
|
+
&:nth-child(n + 2) {
|
|
3071
3256
|
padding-top: 0;
|
|
3072
3257
|
}
|
|
3073
3258
|
&:last-child {
|
|
@@ -3078,11 +3263,12 @@ const listTableStyles = {
|
|
|
3078
3263
|
margin-bottom: 0;
|
|
3079
3264
|
}
|
|
3080
3265
|
@media only screen and (min-width: 1024px) {
|
|
3081
|
-
&[role=rowheader],
|
|
3266
|
+
&[role="rowheader"],
|
|
3267
|
+
&[role="row"] {
|
|
3082
3268
|
> div {
|
|
3083
3269
|
&:first-child {
|
|
3084
3270
|
padding-left: 9px;
|
|
3085
|
-
}
|
|
3271
|
+
}
|
|
3086
3272
|
&:last-child {
|
|
3087
3273
|
padding-right: 9px;
|
|
3088
3274
|
}
|
|
@@ -3183,85 +3369,143 @@ const listTableStyles = {
|
|
|
3183
3369
|
`,
|
|
3184
3370
|
picklist: css`
|
|
3185
3371
|
${ItemTable} {
|
|
3186
|
-
grid-template-columns: var(--checkbox) var(--time) var(--id) var(
|
|
3372
|
+
grid-template-columns: var(--checkbox) var(--time) var(--id) var(
|
|
3373
|
+
--status
|
|
3374
|
+
) var(--person) var(--warehouse) var(--ref) var(--time) minmax(
|
|
3375
|
+
185px,
|
|
3376
|
+
auto
|
|
3377
|
+
);
|
|
3187
3378
|
}
|
|
3188
3379
|
`,
|
|
3189
3380
|
package: css`
|
|
3190
3381
|
${ItemTable} {
|
|
3191
|
-
grid-template-columns: var(--checkbox) var(--time) var(--id) var(
|
|
3382
|
+
grid-template-columns: var(--checkbox) var(--time) var(--id) var(
|
|
3383
|
+
--status
|
|
3384
|
+
) var(--person) var(--warehouse) var(--person) var(--ref) var(
|
|
3385
|
+
--time
|
|
3386
|
+
) minmax(110px, auto);
|
|
3192
3387
|
}
|
|
3193
3388
|
`,
|
|
3194
3389
|
shipment: css`
|
|
3195
3390
|
${ItemTable} {
|
|
3196
|
-
grid-template-columns: var(--checkbox) var(--time) var(--id-big) var(
|
|
3391
|
+
grid-template-columns: var(--checkbox) var(--time) var(--id-big) var(
|
|
3392
|
+
--status
|
|
3393
|
+
) minmax(80px, 160px) minmax(80px, 160px) minmax(95px, 160px) var(
|
|
3394
|
+
--ref
|
|
3395
|
+
) minmax(140px, auto);
|
|
3197
3396
|
}
|
|
3198
3397
|
`,
|
|
3199
3398
|
invoice: css`
|
|
3200
3399
|
${ItemTable} {
|
|
3201
|
-
grid-template-columns: var(--checkbox) var(--id-big) var(
|
|
3400
|
+
grid-template-columns: var(--checkbox) var(--id-big) var(
|
|
3401
|
+
--status-small
|
|
3402
|
+
) var(--store) var(--price) var(--price) var(--ref) var(--person) var(
|
|
3403
|
+
--time
|
|
3404
|
+
) minmax(180px, auto);
|
|
3202
3405
|
@media only screen and (max-width: 1279px) {
|
|
3203
3406
|
width: unset;
|
|
3204
3407
|
}
|
|
3205
3408
|
}
|
|
3206
3409
|
`,
|
|
3207
|
-
|
|
3410
|
+
"payment-receive": css`
|
|
3208
3411
|
${ItemTable} {
|
|
3209
|
-
grid-template-columns: var(--time) 155px var(--person) var(--qty) var(
|
|
3412
|
+
grid-template-columns: var(--time) 155px var(--person) var(--qty) var(
|
|
3413
|
+
--price
|
|
3414
|
+
) minmax(110px, auto);
|
|
3210
3415
|
}
|
|
3211
3416
|
`,
|
|
3212
|
-
|
|
3417
|
+
"sales-return": css`
|
|
3213
3418
|
${ItemTable} {
|
|
3214
|
-
grid-template-columns: var(--id-big) var(--status) var(--warehouse) var(
|
|
3419
|
+
grid-template-columns: var(--id-big) var(--status) var(--warehouse) var(
|
|
3420
|
+
--person
|
|
3421
|
+
) var(--person) var(--ref-big) var(--time) minmax(120px, auto);
|
|
3215
3422
|
}
|
|
3216
3423
|
`,
|
|
3217
3424
|
activity: css`
|
|
3218
3425
|
${ItemTable} {
|
|
3219
|
-
grid-template-columns: var(--time) var(--id-big) var(--item) var(
|
|
3426
|
+
grid-template-columns: var(--time) var(--id-big) var(--item) var(
|
|
3427
|
+
--status
|
|
3428
|
+
) var(--email) var(--status) var(--status) minmax(110px, auto);
|
|
3220
3429
|
}
|
|
3221
3430
|
`,
|
|
3222
3431
|
putaway: css`
|
|
3223
3432
|
${ItemTable} {
|
|
3224
|
-
grid-template-columns: var(--id-pd20) var(--status-big) var(
|
|
3433
|
+
grid-template-columns: var(--id-pd20) var(--status-big) var(
|
|
3434
|
+
--warehouse
|
|
3435
|
+
) var(--ref) var(--person) var(--time) minmax(60px, auto);
|
|
3225
3436
|
}
|
|
3226
3437
|
`,
|
|
3227
3438
|
inbound: css`
|
|
3228
3439
|
${ItemTable} {
|
|
3229
|
-
grid-template-columns: var(--id-pd20) var(--status-big) var(
|
|
3440
|
+
grid-template-columns: var(--id-pd20) var(--status-big) var(
|
|
3441
|
+
--warehouse
|
|
3442
|
+
) var(--ref) minmax(140px, 160px) var(--person) var(--time) minmax(
|
|
3443
|
+
170px,
|
|
3444
|
+
auto
|
|
3445
|
+
);
|
|
3230
3446
|
}
|
|
3231
3447
|
`,
|
|
3232
3448
|
lowstock: css`
|
|
3233
3449
|
${ItemTable} {
|
|
3234
|
-
grid-template-columns: var(--checkbox) var(--item) var(--variant) var(
|
|
3450
|
+
grid-template-columns: var(--checkbox) var(--item) var(--variant) var(
|
|
3451
|
+
--sku
|
|
3452
|
+
) var(--warehouse) var(--qty-big) var(--statusnow) var(--time) minmax(
|
|
3453
|
+
60px,
|
|
3454
|
+
auto
|
|
3455
|
+
);
|
|
3235
3456
|
}
|
|
3236
3457
|
`,
|
|
3237
3458
|
price: css`
|
|
3238
3459
|
${ItemTable} {
|
|
3239
|
-
grid-template-columns: var(--time) var(--id-big) var(--status) var(
|
|
3460
|
+
grid-template-columns: var(--time) var(--id-big) var(--status) var(
|
|
3461
|
+
--qty
|
|
3462
|
+
) var(--email) var(--status) minmax(60px, auto);
|
|
3240
3463
|
}
|
|
3241
3464
|
`,
|
|
3242
|
-
|
|
3465
|
+
"stock-adjustment": css`
|
|
3243
3466
|
${ItemTable} {
|
|
3244
|
-
grid-template-columns: var(--id-pd20) var(--status-big) var(
|
|
3467
|
+
grid-template-columns: var(--id-pd20) var(--status-big) var(
|
|
3468
|
+
--warehouse
|
|
3469
|
+
) var(--ref) minmax(140px, 150px) var(--person) var(--time) minmax(
|
|
3470
|
+
160px,
|
|
3471
|
+
auto
|
|
3472
|
+
);
|
|
3245
3473
|
}
|
|
3246
3474
|
`,
|
|
3247
|
-
|
|
3475
|
+
"stock-outbound": css`
|
|
3248
3476
|
${ItemTable} {
|
|
3249
|
-
grid-template-columns: var(--id-pd20) var(--status-big) var(
|
|
3477
|
+
grid-template-columns: var(--id-pd20) var(--status-big) var(
|
|
3478
|
+
--warehouse
|
|
3479
|
+
) var(--ref) minmax(150px, 160px) var(--person) var(--time) minmax(
|
|
3480
|
+
160px,
|
|
3481
|
+
auto
|
|
3482
|
+
);
|
|
3250
3483
|
}
|
|
3251
3484
|
`,
|
|
3252
|
-
|
|
3485
|
+
"stock-transfer": css`
|
|
3253
3486
|
${ItemTable} {
|
|
3254
|
-
grid-template-columns: var(--id) var(--status-big) var(--warehouse) var(
|
|
3487
|
+
grid-template-columns: var(--id) var(--status-big) var(--warehouse) var(
|
|
3488
|
+
--warehouse
|
|
3489
|
+
) minmax(90px, 100px) var(--person) var(--time) minmax(160px, auto);
|
|
3255
3490
|
}
|
|
3256
3491
|
`,
|
|
3257
3492
|
promotion: css`
|
|
3258
3493
|
${ItemTable} {
|
|
3259
|
-
grid-template-columns: var(--store) var(--id-big) var(--ref-big) minmax(
|
|
3494
|
+
grid-template-columns: var(--store) var(--id-big) var(--ref-big) minmax(
|
|
3495
|
+
100px,
|
|
3496
|
+
160px
|
|
3497
|
+
) var(--status-small) var(--time) var(--time) minmax(42px, 88px) var(
|
|
3498
|
+
--time
|
|
3499
|
+
) minmax(62px, auto);
|
|
3260
3500
|
}
|
|
3261
3501
|
`,
|
|
3262
|
-
|
|
3502
|
+
"stock-history": css`
|
|
3263
3503
|
${ItemTable} {
|
|
3264
|
-
grid-template-columns: minmax(120px, 360px) var(--sku) var(
|
|
3504
|
+
grid-template-columns: minmax(120px, 360px) var(--sku) var(
|
|
3505
|
+
--warehouse
|
|
3506
|
+
) minmax(85px, 120px) minmax(105px, 190px) var(--qty-small) var(
|
|
3507
|
+
--qty-small
|
|
3508
|
+
) minmax(68px, 100px) var(--time) minmax(75px, 88px);
|
|
3265
3509
|
> *:last-child {
|
|
3266
3510
|
display: unset;
|
|
3267
3511
|
justify-content: unset;
|
|
@@ -3271,7 +3515,7 @@ const listTableStyles = {
|
|
|
3271
3515
|
}
|
|
3272
3516
|
}
|
|
3273
3517
|
`,
|
|
3274
|
-
|
|
3518
|
+
"price-history": css`
|
|
3275
3519
|
${ItemTable} {
|
|
3276
3520
|
@media only screen and (max-width: 1279px) {
|
|
3277
3521
|
width: unset;
|
|
@@ -3280,7 +3524,12 @@ const listTableStyles = {
|
|
|
3280
3524
|
display: unset;
|
|
3281
3525
|
justify-content: unset;
|
|
3282
3526
|
}
|
|
3283
|
-
grid-template-columns: minmax(110px,146px) minmax(120px,360px) var(
|
|
3527
|
+
grid-template-columns: minmax(110px, 146px) minmax(120px, 360px) var(
|
|
3528
|
+
--sku
|
|
3529
|
+
) var(--store) minmax(75px, 120px) minmax(85px, 120px) minmax(
|
|
3530
|
+
75px,
|
|
3531
|
+
120px
|
|
3532
|
+
) minmax(80px, 120px) var(--time) var(--status) minmax(75px, 88px);
|
|
3284
3533
|
}
|
|
3285
3534
|
`,
|
|
3286
3535
|
turnover: css`
|
|
@@ -3292,10 +3541,12 @@ const listTableStyles = {
|
|
|
3292
3541
|
display: unset;
|
|
3293
3542
|
justify-content: unset;
|
|
3294
3543
|
}
|
|
3295
|
-
grid-template-columns: minmax(120px,360px) var(--sku) var(
|
|
3544
|
+
grid-template-columns: minmax(120px, 360px) var(--sku) var(
|
|
3545
|
+
--warehouse
|
|
3546
|
+
) repeat(4, var(--qty)) minmax(75px, 88px);
|
|
3296
3547
|
}
|
|
3297
3548
|
`,
|
|
3298
|
-
|
|
3549
|
+
"days-outofstock": css`
|
|
3299
3550
|
${ItemTable} {
|
|
3300
3551
|
@media only screen and (max-width: 1279px) {
|
|
3301
3552
|
width: unset;
|
|
@@ -3304,63 +3555,87 @@ const listTableStyles = {
|
|
|
3304
3555
|
display: unset;
|
|
3305
3556
|
justify-content: unset;
|
|
3306
3557
|
}
|
|
3307
|
-
grid-template-columns: minmax(120px,360px) var(--sku) var(
|
|
3558
|
+
grid-template-columns: minmax(120px, 360px) var(--sku) var(
|
|
3559
|
+
--warehouse
|
|
3560
|
+
) var(--qty-big) var(--qty) var(--qty-big) var(--time) minmax(
|
|
3561
|
+
75px,
|
|
3562
|
+
88px
|
|
3563
|
+
);
|
|
3308
3564
|
}
|
|
3309
3565
|
`,
|
|
3310
3566
|
warehouses: css`
|
|
3311
3567
|
${ItemTable} {
|
|
3312
|
-
grid-template-columns: var(--warehouse) var(--status) var(--id-big) var(
|
|
3568
|
+
grid-template-columns: var(--warehouse) var(--status) var(--id-big) var(
|
|
3569
|
+
--qty-big
|
|
3570
|
+
) var(--time) minmax(110px, auto);
|
|
3313
3571
|
}
|
|
3314
3572
|
`,
|
|
3315
3573
|
archived: css`
|
|
3316
3574
|
${ItemTable} {
|
|
3317
|
-
grid-template-columns: var(--time-pd20) minmax(auto, max-content) minmax(
|
|
3318
|
-
|
|
3319
|
-
|
|
3320
|
-
|
|
3575
|
+
grid-template-columns: var(--time-pd20) minmax(auto, max-content) minmax(
|
|
3576
|
+
88px,
|
|
3577
|
+
auto
|
|
3578
|
+
);
|
|
3579
|
+
&[role="rowheader"] > div[role="group"],
|
|
3580
|
+
&[role="row"] > div[role="cellgroup"] > div[role="rowgroup"],
|
|
3581
|
+
._refCollapse > div:not(._refCollapseContainer),
|
|
3321
3582
|
._refCollapseContainer > div {
|
|
3322
3583
|
grid-template-columns: var(--sku) var(--item);
|
|
3323
3584
|
}
|
|
3324
3585
|
}
|
|
3325
3586
|
`,
|
|
3326
|
-
|
|
3587
|
+
"pos-order": css`
|
|
3327
3588
|
${ItemTable} {
|
|
3328
3589
|
@media only screen and (max-width: 1279px) {
|
|
3329
3590
|
width: unset;
|
|
3330
3591
|
}
|
|
3331
|
-
grid-template-columns: var(--id-pd20) minmax(80px, 120px) var(--time)
|
|
3592
|
+
grid-template-columns: var(--id-pd20) minmax(80px, 120px) var(--time) var(
|
|
3593
|
+
--person
|
|
3594
|
+
) var(--qty) var(--price) var(--status) minmax(180px, auto);
|
|
3332
3595
|
}
|
|
3333
3596
|
`,
|
|
3334
3597
|
order: css`
|
|
3335
3598
|
${ItemTable} {
|
|
3336
|
-
grid-template-columns: var(--checkbox) 118px 90px minmax(
|
|
3337
|
-
|
|
3338
|
-
|
|
3599
|
+
grid-template-columns: var(--checkbox) 118px 90px minmax(
|
|
3600
|
+
auto,
|
|
3601
|
+
max-content
|
|
3602
|
+
);
|
|
3603
|
+
input[name="checkbox-list"] {
|
|
3604
|
+
& + span {
|
|
3339
3605
|
top: 8px;
|
|
3340
3606
|
}
|
|
3341
3607
|
}
|
|
3342
|
-
&[role=rowheader] > div[role=group] {
|
|
3343
|
-
grid-template-columns: var(--order) 40px 80px 80px 88px minmax(
|
|
3608
|
+
&[role="rowheader"] > div[role="group"] {
|
|
3609
|
+
grid-template-columns: var(--order) 40px 80px 80px 88px minmax(
|
|
3610
|
+
145px,
|
|
3611
|
+
auto
|
|
3612
|
+
);
|
|
3344
3613
|
}
|
|
3345
|
-
._refCollapse > div:not(._refCollapseContainer),
|
|
3614
|
+
._refCollapse > div:not(._refCollapseContainer),
|
|
3346
3615
|
._refCollapseContainer > div {
|
|
3347
3616
|
grid-template-columns: var(--order) 40px 80px 80px;
|
|
3348
3617
|
}
|
|
3349
|
-
&[role=row] > div[role=cellgroup] > div[role=rowgroup],
|
|
3350
|
-
._refCollapse > div,
|
|
3618
|
+
&[role="row"] > div[role="cellgroup"] > div[role="rowgroup"],
|
|
3619
|
+
._refCollapse > div,
|
|
3351
3620
|
._refCollapseContainer > div {
|
|
3352
|
-
&:nth-child(n+2) {
|
|
3621
|
+
&:nth-child(n + 2) {
|
|
3353
3622
|
border-top: none;
|
|
3354
3623
|
}
|
|
3355
3624
|
}
|
|
3356
3625
|
}
|
|
3357
3626
|
@media only screen and (min-width: 1280px) {
|
|
3358
3627
|
${ItemTable} {
|
|
3359
|
-
grid-template-columns: var(--checkbox) 118px 118px minmax(
|
|
3360
|
-
|
|
3361
|
-
|
|
3362
|
-
|
|
3363
|
-
|
|
3628
|
+
grid-template-columns: var(--checkbox) 118px 118px minmax(
|
|
3629
|
+
auto,
|
|
3630
|
+
max-content
|
|
3631
|
+
);
|
|
3632
|
+
&[role="rowheader"] > div[role="group"] {
|
|
3633
|
+
grid-template-columns: var(--order) 40px 80px 80px 107px minmax(
|
|
3634
|
+
145px,
|
|
3635
|
+
auto
|
|
3636
|
+
);
|
|
3637
|
+
}
|
|
3638
|
+
._refCollapse > div:not(._refCollapseContainer),
|
|
3364
3639
|
._refCollapseContainer > div {
|
|
3365
3640
|
grid-template-columns: var(--order) 40px 80px 80px;
|
|
3366
3641
|
}
|
|
@@ -3368,11 +3643,17 @@ const listTableStyles = {
|
|
|
3368
3643
|
}
|
|
3369
3644
|
@media only screen and (min-width: 1366px) {
|
|
3370
3645
|
${ItemTable} {
|
|
3371
|
-
grid-template-columns: var(--checkbox) 120px 118px minmax(
|
|
3372
|
-
|
|
3373
|
-
|
|
3374
|
-
|
|
3375
|
-
|
|
3646
|
+
grid-template-columns: var(--checkbox) 120px 118px minmax(
|
|
3647
|
+
auto,
|
|
3648
|
+
max-content
|
|
3649
|
+
);
|
|
3650
|
+
&[role="rowheader"] > div[role="group"] {
|
|
3651
|
+
grid-template-columns: var(--order) 40px 90px 80px 130px minmax(
|
|
3652
|
+
150px,
|
|
3653
|
+
auto
|
|
3654
|
+
);
|
|
3655
|
+
}
|
|
3656
|
+
._refCollapse > div:not(._refCollapseContainer),
|
|
3376
3657
|
._refCollapseContainer > div {
|
|
3377
3658
|
grid-template-columns: var(--order) 40px 90px 80px;
|
|
3378
3659
|
}
|
|
@@ -3380,11 +3661,17 @@ const listTableStyles = {
|
|
|
3380
3661
|
}
|
|
3381
3662
|
@media only screen and (min-width: 1800px) {
|
|
3382
3663
|
${ItemTable} {
|
|
3383
|
-
grid-template-columns: var(--checkbox) minmax(125px, 170px) minmax(
|
|
3384
|
-
|
|
3385
|
-
|
|
3386
|
-
|
|
3387
|
-
|
|
3664
|
+
grid-template-columns: var(--checkbox) minmax(125px, 170px) minmax(
|
|
3665
|
+
85px,
|
|
3666
|
+
145px
|
|
3667
|
+
) minmax(auto, max-content);
|
|
3668
|
+
&[role="rowheader"] > div[role="group"] {
|
|
3669
|
+
grid-template-columns: var(--order) 50px 110px 130px 130px minmax(
|
|
3670
|
+
50px,
|
|
3671
|
+
2000px
|
|
3672
|
+
);
|
|
3673
|
+
}
|
|
3674
|
+
._refCollapse > div:not(._refCollapseContainer),
|
|
3388
3675
|
._refCollapseContainer > div {
|
|
3389
3676
|
grid-template-columns: var(--order) 50px 110px 130px;
|
|
3390
3677
|
}
|
|
@@ -3392,30 +3679,36 @@ const listTableStyles = {
|
|
|
3392
3679
|
}
|
|
3393
3680
|
@media only screen and (min-width: 1920px) {
|
|
3394
3681
|
${ItemTable} {
|
|
3395
|
-
&[role=rowheader] > div[role=group] {
|
|
3396
|
-
grid-template-columns: var(--order) 50px 110px 145px 130px minmax(
|
|
3682
|
+
&[role="rowheader"] > div[role="group"] {
|
|
3683
|
+
grid-template-columns: var(--order) 50px 110px 145px 130px minmax(
|
|
3684
|
+
50px,
|
|
3685
|
+
2000px
|
|
3686
|
+
);
|
|
3397
3687
|
}
|
|
3398
|
-
._refCollapse > div:not(._refCollapseContainer),
|
|
3688
|
+
._refCollapse > div:not(._refCollapseContainer),
|
|
3399
3689
|
._refCollapseContainer > div {
|
|
3400
3690
|
grid-template-columns: var(--order) 50px 110px 145px;
|
|
3401
3691
|
}
|
|
3402
3692
|
}
|
|
3403
3693
|
}
|
|
3404
3694
|
`,
|
|
3405
|
-
|
|
3695
|
+
"order-nocheck": css`
|
|
3406
3696
|
${ItemTable} {
|
|
3407
3697
|
grid-template-columns: 118px 90px minmax(auto, max-content);
|
|
3408
|
-
&[role=rowheader] > div[role=group] {
|
|
3409
|
-
grid-template-columns: var(--order) 40px 80px 80px 88px minmax(
|
|
3698
|
+
&[role="rowheader"] > div[role="group"] {
|
|
3699
|
+
grid-template-columns: var(--order) 40px 80px 80px 88px minmax(
|
|
3700
|
+
145px,
|
|
3701
|
+
auto
|
|
3702
|
+
);
|
|
3410
3703
|
}
|
|
3411
|
-
._refCollapse > div:not(._refCollapseContainer),
|
|
3704
|
+
._refCollapse > div:not(._refCollapseContainer),
|
|
3412
3705
|
._refCollapseContainer > div {
|
|
3413
3706
|
grid-template-columns: var(--order) 40px 80px 80px;
|
|
3414
3707
|
}
|
|
3415
|
-
&[role=row] > div[role=cellgroup] > div[role=rowgroup],
|
|
3416
|
-
._refCollapse > div,
|
|
3708
|
+
&[role="row"] > div[role="cellgroup"] > div[role="rowgroup"],
|
|
3709
|
+
._refCollapse > div,
|
|
3417
3710
|
._refCollapseContainer > div {
|
|
3418
|
-
&:nth-child(n+2) {
|
|
3711
|
+
&:nth-child(n + 2) {
|
|
3419
3712
|
border-top: none;
|
|
3420
3713
|
}
|
|
3421
3714
|
}
|
|
@@ -3423,10 +3716,13 @@ const listTableStyles = {
|
|
|
3423
3716
|
@media only screen and (min-width: 1280px) {
|
|
3424
3717
|
${ItemTable} {
|
|
3425
3718
|
grid-template-columns: 118px 118px minmax(auto, max-content);
|
|
3426
|
-
&[role=rowheader] > div[role=group] {
|
|
3427
|
-
grid-template-columns: var(--order) 40px 80px 80px 107px minmax(
|
|
3719
|
+
&[role="rowheader"] > div[role="group"] {
|
|
3720
|
+
grid-template-columns: var(--order) 40px 80px 80px 107px minmax(
|
|
3721
|
+
145px,
|
|
3722
|
+
auto
|
|
3723
|
+
);
|
|
3428
3724
|
}
|
|
3429
|
-
._refCollapse > div:not(._refCollapseContainer),
|
|
3725
|
+
._refCollapse > div:not(._refCollapseContainer),
|
|
3430
3726
|
._refCollapseContainer > div {
|
|
3431
3727
|
grid-template-columns: var(--order) 40px 80px 80px;
|
|
3432
3728
|
}
|
|
@@ -3435,10 +3731,13 @@ const listTableStyles = {
|
|
|
3435
3731
|
@media only screen and (min-width: 1366px) {
|
|
3436
3732
|
${ItemTable} {
|
|
3437
3733
|
grid-template-columns: 120px 118px minmax(auto, max-content);
|
|
3438
|
-
&[role=rowheader] > div[role=group] {
|
|
3439
|
-
grid-template-columns: var(--order) 40px 90px 80px 130px minmax(
|
|
3734
|
+
&[role="rowheader"] > div[role="group"] {
|
|
3735
|
+
grid-template-columns: var(--order) 40px 90px 80px 130px minmax(
|
|
3736
|
+
150px,
|
|
3737
|
+
auto
|
|
3738
|
+
);
|
|
3440
3739
|
}
|
|
3441
|
-
._refCollapse > div:not(._refCollapseContainer),
|
|
3740
|
+
._refCollapse > div:not(._refCollapseContainer),
|
|
3442
3741
|
._refCollapseContainer > div {
|
|
3443
3742
|
grid-template-columns: var(--order) 40px 90px 80px;
|
|
3444
3743
|
}
|
|
@@ -3446,11 +3745,17 @@ const listTableStyles = {
|
|
|
3446
3745
|
}
|
|
3447
3746
|
@media only screen and (min-width: 1800px) {
|
|
3448
3747
|
${ItemTable} {
|
|
3449
|
-
grid-template-columns: minmax(125px, 170px) minmax(85px, 145px) minmax(
|
|
3450
|
-
|
|
3451
|
-
|
|
3452
|
-
|
|
3453
|
-
|
|
3748
|
+
grid-template-columns: minmax(125px, 170px) minmax(85px, 145px) minmax(
|
|
3749
|
+
auto,
|
|
3750
|
+
max-content
|
|
3751
|
+
);
|
|
3752
|
+
&[role="rowheader"] > div[role="group"] {
|
|
3753
|
+
grid-template-columns: var(--order) 50px 110px 130px 130px minmax(
|
|
3754
|
+
50px,
|
|
3755
|
+
2000px
|
|
3756
|
+
);
|
|
3757
|
+
}
|
|
3758
|
+
._refCollapse > div:not(._refCollapseContainer),
|
|
3454
3759
|
._refCollapseContainer > div {
|
|
3455
3760
|
grid-template-columns: var(--order) 50px 110px 130px;
|
|
3456
3761
|
}
|
|
@@ -3458,94 +3763,108 @@ const listTableStyles = {
|
|
|
3458
3763
|
}
|
|
3459
3764
|
@media only screen and (min-width: 1920px) {
|
|
3460
3765
|
${ItemTable} {
|
|
3461
|
-
&[role=rowheader] > div[role=group] {
|
|
3462
|
-
grid-template-columns: var(--order) 50px 110px 145px 130px minmax(
|
|
3766
|
+
&[role="rowheader"] > div[role="group"] {
|
|
3767
|
+
grid-template-columns: var(--order) 50px 110px 145px 130px minmax(
|
|
3768
|
+
50px,
|
|
3769
|
+
2000px
|
|
3770
|
+
);
|
|
3463
3771
|
}
|
|
3464
|
-
._refCollapse > div:not(._refCollapseContainer),
|
|
3772
|
+
._refCollapse > div:not(._refCollapseContainer),
|
|
3465
3773
|
._refCollapseContainer > div {
|
|
3466
3774
|
grid-template-columns: var(--order) 50px 110px 145px;
|
|
3467
3775
|
}
|
|
3468
3776
|
}
|
|
3469
3777
|
}
|
|
3470
3778
|
`,
|
|
3471
|
-
|
|
3472
|
-
|
|
3473
|
-
> div {
|
|
3474
|
-
overflow: auto;
|
|
3475
|
-
}
|
|
3476
|
-
@media only screen and (min-width: 1024px) {
|
|
3779
|
+
"table-customheader": css`
|
|
3780
|
+
overflow: hidden;
|
|
3477
3781
|
> div {
|
|
3478
|
-
|
|
3782
|
+
overflow: auto;
|
|
3783
|
+
}
|
|
3784
|
+
@media only screen and (min-width: 1024px) {
|
|
3785
|
+
> div {
|
|
3786
|
+
margin: 0px 9px 0px 9px;
|
|
3787
|
+
}
|
|
3479
3788
|
}
|
|
3480
|
-
}
|
|
3481
3789
|
${ItemTable} {
|
|
3482
3790
|
width: 100%;
|
|
3483
3791
|
display: flex;
|
|
3484
3792
|
margin: 0;
|
|
3485
3793
|
padding: 0;
|
|
3486
3794
|
grid-gap: 0;
|
|
3487
|
-
&[role=rowheader] > div[role=group],
|
|
3488
|
-
&[role=row] > div[role=group],
|
|
3489
|
-
&[role=row] > div[role=cellgroup] > div[role=rowgroup],
|
|
3490
|
-
&[role=row] > div[role=cellgroup],
|
|
3491
|
-
._refCollapse > div:not(._refCollapseContainer),
|
|
3795
|
+
&[role="rowheader"] > div[role="group"],
|
|
3796
|
+
&[role="row"] > div[role="group"],
|
|
3797
|
+
&[role="row"] > div[role="cellgroup"] > div[role="rowgroup"],
|
|
3798
|
+
&[role="row"] > div[role="cellgroup"],
|
|
3799
|
+
._refCollapse > div:not(._refCollapseContainer),
|
|
3492
3800
|
._refCollapseContainer > div {
|
|
3493
3801
|
display: flex;
|
|
3494
3802
|
flex: 2;
|
|
3495
3803
|
grid-gap: 0;
|
|
3496
3804
|
}
|
|
3497
|
-
&[role=row] > div[role=cellgroup] {
|
|
3805
|
+
&[role="row"] > div[role="cellgroup"] {
|
|
3498
3806
|
flex-direction: column;
|
|
3499
3807
|
}
|
|
3500
|
-
&[role=rowheader] > div[role=columnheader],
|
|
3501
|
-
&[role=rowheader] > div[role=group] > div[role=cell],
|
|
3502
|
-
&[role=row] > div[role=cell],
|
|
3503
|
-
&[role=row]
|
|
3504
|
-
|
|
3505
|
-
|
|
3808
|
+
&[role="rowheader"] > div[role="columnheader"],
|
|
3809
|
+
&[role="rowheader"] > div[role="group"] > div[role="cell"],
|
|
3810
|
+
&[role="row"] > div[role="cell"],
|
|
3811
|
+
&[role="row"]
|
|
3812
|
+
> div[role="cellgroup"]
|
|
3813
|
+
> div[role="rowgroup"]
|
|
3814
|
+
> div[role="cell"],
|
|
3815
|
+
._refCollapse > div:not(._refCollapseContainer) > div[role="cell"],
|
|
3816
|
+
._refCollapseContainer > div > div[role="cell"] {
|
|
3506
3817
|
align-self: stretch;
|
|
3507
3818
|
width: 100%;
|
|
3508
3819
|
}
|
|
3509
|
-
&[role=rowheader] > div[role=columnheader],
|
|
3510
|
-
&[role=rowheader] > div[role=group] > div[role=cell] {
|
|
3820
|
+
&[role="rowheader"] > div[role="columnheader"],
|
|
3821
|
+
&[role="rowheader"] > div[role="group"] > div[role="cell"] {
|
|
3511
3822
|
padding-top: 1em;
|
|
3512
3823
|
padding-bottom: 1em;
|
|
3513
3824
|
border-bottom: 1px solid var(--ter-clr-ln);
|
|
3514
3825
|
}
|
|
3515
|
-
&[role=row] > div[role=cell],
|
|
3516
|
-
&[role=row]
|
|
3517
|
-
|
|
3518
|
-
|
|
3826
|
+
&[role="row"] > div[role="cell"],
|
|
3827
|
+
&[role="row"]
|
|
3828
|
+
> div[role="cellgroup"]
|
|
3829
|
+
> div[role="rowgroup"]
|
|
3830
|
+
> div[role="cell"],
|
|
3831
|
+
._refCollapse > div:not(._refCollapseContainer) > div[role="cell"],
|
|
3832
|
+
._refCollapseContainer > div > div[role="cell"] {
|
|
3519
3833
|
padding-top: 1.25em;
|
|
3520
3834
|
padding-bottom: 1.25em;
|
|
3521
3835
|
}
|
|
3522
|
-
&[role=rowheader],
|
|
3836
|
+
&[role="rowheader"],
|
|
3837
|
+
&[role="row"] {
|
|
3523
3838
|
padding: 0;
|
|
3524
3839
|
margin: 0;
|
|
3525
3840
|
> div {
|
|
3526
3841
|
padding-right: 12px;
|
|
3527
3842
|
&:first-child {
|
|
3528
3843
|
padding-left: 0;
|
|
3529
|
-
}
|
|
3844
|
+
}
|
|
3530
3845
|
&:last-child {
|
|
3531
3846
|
padding-right: 0;
|
|
3532
3847
|
}
|
|
3533
3848
|
}
|
|
3534
3849
|
}
|
|
3535
|
-
&[role=rowheader] > div[role=group] > div[role=cell],
|
|
3850
|
+
&[role="rowheader"] > div[role="group"] > div[role="cell"],
|
|
3851
|
+
&[role="row"]
|
|
3852
|
+
> div[role="cellgroup"]
|
|
3853
|
+
> div[role="rowgroup"]
|
|
3854
|
+
> div[role="cell"] {
|
|
3536
3855
|
padding-right: 12px;
|
|
3537
3856
|
&:last-child {
|
|
3538
|
-
|
|
3539
3857
|
}
|
|
3540
3858
|
}
|
|
3541
|
-
&[role=rowheader] {
|
|
3859
|
+
&[role="rowheader"] {
|
|
3542
3860
|
border: none;
|
|
3543
3861
|
}
|
|
3544
|
-
&[role=row] > div[role=cellgroup] > div[role=rowgroup],
|
|
3545
|
-
._refCollapse > div,
|
|
3862
|
+
&[role="row"] > div[role="cellgroup"] > div[role="rowgroup"],
|
|
3863
|
+
._refCollapse > div,
|
|
3864
|
+
._refCollapseContainer > div {
|
|
3546
3865
|
padding-bottom: 0;
|
|
3547
3866
|
padding-top: 0;
|
|
3548
|
-
&:nth-child(n+2) {
|
|
3867
|
+
&:nth-child(n + 2) {
|
|
3549
3868
|
padding-top: 0;
|
|
3550
3869
|
}
|
|
3551
3870
|
&:last-child {
|
|
@@ -3556,11 +3875,12 @@ const listTableStyles = {
|
|
|
3556
3875
|
margin-bottom: 0;
|
|
3557
3876
|
}
|
|
3558
3877
|
@media only screen and (min-width: 1024px) {
|
|
3559
|
-
&[role=rowheader],
|
|
3878
|
+
&[role="rowheader"],
|
|
3879
|
+
&[role="row"] {
|
|
3560
3880
|
> div {
|
|
3561
3881
|
&:first-child {
|
|
3562
3882
|
padding-left: 9px;
|
|
3563
|
-
}
|
|
3883
|
+
}
|
|
3564
3884
|
&:last-child {
|
|
3565
3885
|
padding-right: 9px;
|
|
3566
3886
|
}
|
|
@@ -3573,8 +3893,8 @@ const listTableStyles = {
|
|
|
3573
3893
|
}
|
|
3574
3894
|
}
|
|
3575
3895
|
`,
|
|
3576
|
-
} as const
|
|
3577
|
-
export const ListTable = styled.main<{ $mode?: ModeListTableColumn }>`
|
|
3896
|
+
} as const;
|
|
3897
|
+
export const ListTable = styled.main<{ $mode?: ModeListTableColumn }>`
|
|
3578
3898
|
position: relative;
|
|
3579
3899
|
width: 100%;
|
|
3580
3900
|
overflow-x: auto;
|
|
@@ -3586,18 +3906,19 @@ export const ListTable = styled.main<{ $mode?: ModeListTableColumn }>`
|
|
|
3586
3906
|
display: inline-grid;
|
|
3587
3907
|
grid-gap: 12px;
|
|
3588
3908
|
align-items: start;
|
|
3589
|
-
&[role=rowheader] > div[role=group],
|
|
3590
|
-
&[role=row] > div[role=cellgroup] > div[role=rowgroup],
|
|
3591
|
-
._refCollapse > div:not(._refCollapseContainer),
|
|
3909
|
+
&[role="rowheader"] > div[role="group"],
|
|
3910
|
+
&[role="row"] > div[role="cellgroup"] > div[role="rowgroup"],
|
|
3911
|
+
._refCollapse > div:not(._refCollapseContainer),
|
|
3592
3912
|
._refCollapseContainer > div {
|
|
3593
3913
|
display: grid;
|
|
3594
3914
|
align-items: start;
|
|
3595
3915
|
grid-gap: 12px;
|
|
3596
3916
|
}
|
|
3597
|
-
&[role=rowheader],
|
|
3917
|
+
&[role="rowheader"],
|
|
3918
|
+
&:nth-child(2) {
|
|
3598
3919
|
border-top: 0;
|
|
3599
3920
|
}
|
|
3600
|
-
&[role=rowheader] {
|
|
3921
|
+
&[role="rowheader"] {
|
|
3601
3922
|
padding: 1em 0 1em 0;
|
|
3602
3923
|
border-bottom: 1px solid #e8e8ec;
|
|
3603
3924
|
color: var(--mt-clr);
|
|
@@ -3605,29 +3926,29 @@ export const ListTable = styled.main<{ $mode?: ModeListTableColumn }>`
|
|
|
3605
3926
|
cursor: pointer;
|
|
3606
3927
|
line-height: 1;
|
|
3607
3928
|
font-weight: 600;
|
|
3608
|
-
font-size: .875rem;
|
|
3929
|
+
font-size: 0.875rem;
|
|
3609
3930
|
}
|
|
3610
|
-
&[role=row] {
|
|
3931
|
+
&[role="row"] {
|
|
3611
3932
|
padding: 1.25em 0 1.25em 0;
|
|
3612
3933
|
}
|
|
3613
|
-
&[role=row] > div[role=cellgroup] > div[role=rowgroup],
|
|
3614
|
-
._refCollapse > div,
|
|
3934
|
+
&[role="row"] > div[role="cellgroup"] > div[role="rowgroup"],
|
|
3935
|
+
._refCollapse > div,
|
|
3615
3936
|
._refCollapseContainer > div {
|
|
3616
|
-
&:nth-child(n+2) {
|
|
3617
|
-
border-top: 1px solid rgba(227, 227, 227, .7);
|
|
3937
|
+
&:nth-child(n + 2) {
|
|
3938
|
+
border-top: 1px solid rgba(227, 227, 227, 0.7);
|
|
3618
3939
|
padding-top: 16px;
|
|
3619
3940
|
}
|
|
3620
3941
|
}
|
|
3621
3942
|
._refCollapseContainer {
|
|
3622
3943
|
padding-bottom: 0;
|
|
3623
3944
|
}
|
|
3624
|
-
input[name=checkbox-selectAll]
|
|
3625
|
-
& + span {
|
|
3626
|
-
top: 50%;
|
|
3945
|
+
input[name="checkbox-selectAll"] {
|
|
3946
|
+
& + span {
|
|
3947
|
+
top: 50%;
|
|
3627
3948
|
}
|
|
3628
3949
|
}
|
|
3629
|
-
input[name=checkbox-list]{
|
|
3630
|
-
& + span {
|
|
3950
|
+
input[name="checkbox-list"] {
|
|
3951
|
+
& + span {
|
|
3631
3952
|
top: 0;
|
|
3632
3953
|
}
|
|
3633
3954
|
}
|
|
@@ -3638,16 +3959,17 @@ export const ListTable = styled.main<{ $mode?: ModeListTableColumn }>`
|
|
|
3638
3959
|
}
|
|
3639
3960
|
@media only screen and (min-width: 1024px) {
|
|
3640
3961
|
${ItemTable} {
|
|
3641
|
-
&[role=rowheader],
|
|
3642
|
-
&[role=row] {
|
|
3962
|
+
&[role="rowheader"],
|
|
3963
|
+
&[role="row"] {
|
|
3643
3964
|
margin: 0 10px;
|
|
3644
|
-
padding-left: 9px;
|
|
3965
|
+
padding-left: 9px;
|
|
3645
3966
|
padding-right: 9px;
|
|
3646
3967
|
}
|
|
3647
3968
|
}
|
|
3648
3969
|
}
|
|
3649
|
-
${({ $mode }) =>
|
|
3650
|
-
|
|
3970
|
+
${({ $mode }) =>
|
|
3971
|
+
$mode && $mode in listTableStyles ? listTableStyles[$mode] : ""}
|
|
3972
|
+
`;
|
|
3651
3973
|
export const DateWrapper = styled.div`
|
|
3652
3974
|
display: grid;
|
|
3653
3975
|
grid-template-columns: 16px 125px;
|
|
@@ -3661,30 +3983,33 @@ export const DateWrapper = styled.div`
|
|
|
3661
3983
|
margin-top: 6px;
|
|
3662
3984
|
}
|
|
3663
3985
|
input {
|
|
3664
|
-
&,
|
|
3986
|
+
&,
|
|
3987
|
+
&:focus,
|
|
3988
|
+
&:active {
|
|
3665
3989
|
border: none !important;
|
|
3666
3990
|
background: transparent;
|
|
3667
3991
|
cursor: pointer;
|
|
3668
3992
|
}
|
|
3669
3993
|
}
|
|
3670
|
-
|
|
3671
|
-
export const DropdownTitle = styled.div`
|
|
3672
|
-
padding: 1em 1em .8em;
|
|
3994
|
+
`;
|
|
3995
|
+
export const DropdownTitle = styled.div`
|
|
3996
|
+
padding: 1em 1em 0.8em;
|
|
3673
3997
|
display: grid;
|
|
3674
3998
|
grid-auto-flow: column;
|
|
3675
3999
|
justify-content: space-between;
|
|
3676
4000
|
border-bottom: 1px solid var(--sec-clr-ln);
|
|
3677
|
-
i {
|
|
3678
|
-
font-style: normal;
|
|
4001
|
+
i {
|
|
4002
|
+
font-style: normal;
|
|
3679
4003
|
}
|
|
3680
|
-
|
|
4004
|
+
`;
|
|
3681
4005
|
|
|
3682
|
-
export const DropdownList = styled.ul<{ $mode?:
|
|
4006
|
+
export const DropdownList = styled.ul<{ $mode?: "no-border" }>`
|
|
3683
4007
|
${clearList}
|
|
3684
4008
|
max-height: 44vh;
|
|
3685
4009
|
overflow: auto;
|
|
3686
4010
|
> li {
|
|
3687
|
-
border-bottom: ${({ $mode }:{ $mode?:
|
|
4011
|
+
border-bottom: ${({ $mode }: { $mode?: "no-border" }) =>
|
|
4012
|
+
$mode === "no-border" ? "none" : "1px solid var(--pri-clr-ln)"};
|
|
3688
4013
|
&:last-child {
|
|
3689
4014
|
border-bottom: 0;
|
|
3690
4015
|
}
|
|
@@ -3695,11 +4020,15 @@ export const DropdownList = styled.ul<{ $mode?: 'no-border' }>`
|
|
|
3695
4020
|
@media only screen and (min-width: 1366px) {
|
|
3696
4021
|
max-height: 50vh;
|
|
3697
4022
|
}
|
|
3698
|
-
|
|
3699
|
-
export const DropdownItem = styled.li<{
|
|
4023
|
+
`;
|
|
4024
|
+
export const DropdownItem = styled.li<{
|
|
4025
|
+
$mode?: "common" | "categories";
|
|
4026
|
+
$isActive?: boolean;
|
|
4027
|
+
$isReply?: boolean;
|
|
4028
|
+
}>`
|
|
3700
4029
|
display: inline-grid;
|
|
3701
4030
|
width: 100%;
|
|
3702
|
-
grid-gap: 10px;
|
|
4031
|
+
grid-gap: 10px;
|
|
3703
4032
|
min-height: 48px;
|
|
3704
4033
|
grid-auto-flow: row;
|
|
3705
4034
|
cursor: pointer;
|
|
@@ -3708,100 +4037,112 @@ export const DropdownItem = styled.li<{ $mode?: 'common' | 'categories', $isActi
|
|
|
3708
4037
|
grid-auto-flow: column;
|
|
3709
4038
|
grid-template-columns: 100px auto;
|
|
3710
4039
|
}
|
|
3711
|
-
&[data-disabled="true"]{
|
|
4040
|
+
&[data-disabled="true"] {
|
|
3712
4041
|
color: rgb(169, 169, 169);
|
|
3713
4042
|
opacity: 0.7;
|
|
3714
4043
|
pointer-events: none;
|
|
3715
4044
|
}
|
|
3716
|
-
${({ $mode }) =>
|
|
3717
|
-
|
|
3718
|
-
|
|
3719
|
-
padding
|
|
3720
|
-
|
|
3721
|
-
|
|
3722
|
-
|
|
3723
|
-
|
|
3724
|
-
|
|
3725
|
-
|
|
3726
|
-
|
|
3727
|
-
|
|
3728
|
-
|
|
3729
|
-
|
|
3730
|
-
|
|
3731
|
-
|
|
3732
|
-
|
|
3733
|
-
|
|
3734
|
-
|
|
3735
|
-
background-color: var(--nav-clr-bg__hvr);
|
|
3736
|
-
border-radius: var(--nav-rd);
|
|
3737
|
-
}
|
|
3738
|
-
&:last-child {
|
|
3739
|
-
margin-bottom: 0;
|
|
3740
|
-
}
|
|
3741
|
-
> label, > span {
|
|
3742
|
-
cursor: pointer;
|
|
3743
|
-
text-transform: capitalize;
|
|
3744
|
-
width: 100%;
|
|
3745
|
-
max-width: 218px;
|
|
3746
|
-
overflow: hidden;
|
|
3747
|
-
text-overflow: ellipsis;
|
|
3748
|
-
white-space: nowrap;
|
|
4045
|
+
${({ $mode }) =>
|
|
4046
|
+
!$mode &&
|
|
4047
|
+
css`
|
|
4048
|
+
padding: 8px 0.5em;
|
|
4049
|
+
&:first-child {
|
|
4050
|
+
padding-top: 4px;
|
|
4051
|
+
}
|
|
4052
|
+
&:last-child {
|
|
4053
|
+
padding-bottom: 4px;
|
|
4054
|
+
}
|
|
4055
|
+
`}
|
|
4056
|
+
${({ $mode }) =>
|
|
4057
|
+
$mode &&
|
|
4058
|
+
css`
|
|
4059
|
+
margin-bottom: 4px;
|
|
4060
|
+
color: var(--pri-clr);
|
|
4061
|
+
line-height: 20px;
|
|
4062
|
+
align-items: center;
|
|
4063
|
+
padding: 0.5rem 0.75rem;
|
|
3749
4064
|
display: block;
|
|
3750
|
-
|
|
3751
|
-
|
|
3752
|
-
|
|
3753
|
-
|
|
3754
|
-
|
|
3755
|
-
padding: .5rem 1.5rem .5rem .75rem;
|
|
3756
|
-
}
|
|
4065
|
+
min-height: auto;
|
|
4066
|
+
border-radius: var(--nav-rd);
|
|
4067
|
+
&:hover {
|
|
4068
|
+
background-color: var(--nav-clr-bg__hvr);
|
|
4069
|
+
border-radius: var(--nav-rd);
|
|
3757
4070
|
}
|
|
3758
|
-
|
|
3759
|
-
|
|
3760
|
-
|
|
3761
|
-
|
|
3762
|
-
|
|
3763
|
-
|
|
3764
|
-
|
|
3765
|
-
|
|
3766
|
-
|
|
3767
|
-
|
|
3768
|
-
|
|
3769
|
-
|
|
3770
|
-
|
|
3771
|
-
|
|
3772
|
-
|
|
3773
|
-
|
|
3774
|
-
|
|
3775
|
-
|
|
3776
|
-
|
|
3777
|
-
|
|
3778
|
-
|
|
3779
|
-
|
|
3780
|
-
|
|
3781
|
-
|
|
3782
|
-
|
|
3783
|
-
|
|
3784
|
-
|
|
3785
|
-
|
|
3786
|
-
|
|
3787
|
-
|
|
3788
|
-
|
|
3789
|
-
|
|
3790
|
-
|
|
3791
|
-
|
|
3792
|
-
|
|
3793
|
-
|
|
3794
|
-
|
|
4071
|
+
&:last-child {
|
|
4072
|
+
margin-bottom: 0;
|
|
4073
|
+
}
|
|
4074
|
+
> label,
|
|
4075
|
+
> span {
|
|
4076
|
+
cursor: pointer;
|
|
4077
|
+
text-transform: capitalize;
|
|
4078
|
+
width: 100%;
|
|
4079
|
+
max-width: 218px;
|
|
4080
|
+
overflow: hidden;
|
|
4081
|
+
text-overflow: ellipsis;
|
|
4082
|
+
white-space: nowrap;
|
|
4083
|
+
display: block;
|
|
4084
|
+
}
|
|
4085
|
+
${$mode === "categories" &&
|
|
4086
|
+
css`
|
|
4087
|
+
padding: 0 !important;
|
|
4088
|
+
> label {
|
|
4089
|
+
&:last-child {
|
|
4090
|
+
padding: 0.5rem 1.5rem 0.5rem 0.75rem;
|
|
4091
|
+
}
|
|
4092
|
+
}
|
|
4093
|
+
`}
|
|
4094
|
+
`}
|
|
4095
|
+
${({ $mode }) => $mode === "categories" && css``}
|
|
4096
|
+
${({ $mode, $isReply }) =>
|
|
4097
|
+
$mode &&
|
|
4098
|
+
$isReply &&
|
|
4099
|
+
css`
|
|
4100
|
+
padding-right: 1.825rem !important;
|
|
4101
|
+
._refReplyIcon {
|
|
4102
|
+
right: 12px;
|
|
4103
|
+
top: 50%;
|
|
4104
|
+
transform: translateY(-50%);
|
|
4105
|
+
}
|
|
4106
|
+
`}
|
|
4107
|
+
${({ $mode, $isActive }) =>
|
|
4108
|
+
$mode &&
|
|
4109
|
+
$isActive &&
|
|
4110
|
+
css`
|
|
4111
|
+
background-color: var(--nav-clr-bg__hvr);
|
|
4112
|
+
padding-right: 1.75em;
|
|
4113
|
+
&,
|
|
4114
|
+
> label,
|
|
4115
|
+
> span {
|
|
4116
|
+
font-weight: 500;
|
|
4117
|
+
}
|
|
4118
|
+
&:after {
|
|
4119
|
+
content: "✔";
|
|
4120
|
+
position: absolute;
|
|
4121
|
+
top: 50%;
|
|
4122
|
+
transform: translateY(-50%);
|
|
4123
|
+
right: 7px;
|
|
4124
|
+
bottom: 0;
|
|
4125
|
+
width: 12px;
|
|
4126
|
+
height: 20px;
|
|
4127
|
+
z-index: -1;
|
|
4128
|
+
}
|
|
4129
|
+
._refReplyIcon {
|
|
4130
|
+
right: 22px;
|
|
4131
|
+
}
|
|
4132
|
+
`}
|
|
4133
|
+
`;
|
|
4134
|
+
export const DropdownAction = styled.div`
|
|
4135
|
+
padding: 0.8em 1em 1em;
|
|
3795
4136
|
display: grid;
|
|
3796
4137
|
grid-auto-flow: column;
|
|
3797
4138
|
justify-content: end;
|
|
3798
4139
|
grid-gap: 4px;
|
|
3799
4140
|
border-top: 1px solid var(--sec-clr-ln);
|
|
3800
|
-
|
|
3801
|
-
export const FilterList = styled.ul`
|
|
4141
|
+
`;
|
|
4142
|
+
export const FilterList = styled.ul`
|
|
3802
4143
|
${clearList}
|
|
3803
|
-
|
|
3804
|
-
export const FilterItem = styled.li`
|
|
4144
|
+
`;
|
|
4145
|
+
export const FilterItem = styled.li`
|
|
3805
4146
|
&._refCheckbox {
|
|
3806
4147
|
display: block;
|
|
3807
4148
|
float: left;
|
|
@@ -3809,7 +4150,8 @@ export const FilterItem = styled.li`
|
|
|
3809
4150
|
margin-bottom: 8px;
|
|
3810
4151
|
> label {
|
|
3811
4152
|
padding-left: 0 !important;
|
|
3812
|
-
input,
|
|
4153
|
+
input,
|
|
4154
|
+
span {
|
|
3813
4155
|
display: none !important;
|
|
3814
4156
|
}
|
|
3815
4157
|
aside {
|
|
@@ -3819,7 +4161,7 @@ export const FilterItem = styled.li`
|
|
|
3819
4161
|
cursor: pointer;
|
|
3820
4162
|
font-size: 13px;
|
|
3821
4163
|
}
|
|
3822
|
-
input:checked~aside {
|
|
4164
|
+
input:checked ~ aside {
|
|
3823
4165
|
border: 1px solid var(--sel-clr-ln);
|
|
3824
4166
|
outline: 1px solid var(--sel-clr-ln);
|
|
3825
4167
|
color: var(--ter-clr);
|
|
@@ -3849,18 +4191,23 @@ export const FilterItem = styled.li`
|
|
|
3849
4191
|
border-radius: var(--sec-rd);
|
|
3850
4192
|
}
|
|
3851
4193
|
}
|
|
3852
|
-
|
|
3853
|
-
export const FilterListTitle = styled.strong`
|
|
4194
|
+
`;
|
|
4195
|
+
export const FilterListTitle = styled.strong`
|
|
3854
4196
|
padding-top: 8px;
|
|
3855
4197
|
font-size: 13px;
|
|
3856
|
-
|
|
3857
|
-
export const FilterButton = styled.div`
|
|
4198
|
+
`;
|
|
4199
|
+
export const FilterButton = styled.div`
|
|
3858
4200
|
display: grid;
|
|
3859
4201
|
grid-auto-flow: column;
|
|
3860
4202
|
grid-template-columns: 1fr auto;
|
|
3861
4203
|
gap: 4px;
|
|
3862
|
-
|
|
3863
|
-
export const IconDot = styled.span<{
|
|
4204
|
+
`;
|
|
4205
|
+
export const IconDot = styled.span<{
|
|
4206
|
+
$mode?: "list" | "header" | "chat";
|
|
4207
|
+
$width?: string;
|
|
4208
|
+
$height?: string;
|
|
4209
|
+
$size?: string;
|
|
4210
|
+
}>`
|
|
3864
4211
|
display: grid;
|
|
3865
4212
|
min-width: 18px;
|
|
3866
4213
|
height: 18px;
|
|
@@ -3872,41 +4219,52 @@ export const IconDot = styled.span<{ $mode?: 'list' | 'header' | 'chat', $width?
|
|
|
3872
4219
|
text-align: center;
|
|
3873
4220
|
padding: 0px 4px;
|
|
3874
4221
|
border-radius: var(--ter-rd);
|
|
3875
|
-
${({ $mode }) =>
|
|
3876
|
-
|
|
3877
|
-
|
|
3878
|
-
|
|
3879
|
-
|
|
3880
|
-
|
|
3881
|
-
|
|
3882
|
-
|
|
3883
|
-
|
|
3884
|
-
|
|
3885
|
-
|
|
3886
|
-
|
|
3887
|
-
position: absolute;
|
|
3888
|
-
top: 0;
|
|
3889
|
-
left: 0;
|
|
3890
|
-
transform: scale(1) translate(-50%, -50%);
|
|
3891
|
-
transition: transform 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
|
|
3892
|
-
transform-origin: 100% 0%;
|
|
3893
|
-
${($mode === 'header') && css`
|
|
3894
|
-
left: unset;
|
|
3895
|
-
right: 0;
|
|
3896
|
-
z-index: 99;
|
|
3897
|
-
transform: scale(1) translate(50%, -50%);
|
|
4222
|
+
${({ $mode }) =>
|
|
4223
|
+
$mode === "chat" &&
|
|
4224
|
+
css`
|
|
4225
|
+
position: absolute;
|
|
4226
|
+
z-index: 8;
|
|
4227
|
+
left: 18px;
|
|
4228
|
+
top: 0;
|
|
4229
|
+
padding: 0.2em 0.3em;
|
|
4230
|
+
font-weight: bold;
|
|
4231
|
+
font-size: 10px;
|
|
4232
|
+
min-width: 16px;
|
|
4233
|
+
height: 16px;
|
|
3898
4234
|
`}
|
|
3899
|
-
|
|
3900
|
-
|
|
3901
|
-
|
|
3902
|
-
|
|
3903
|
-
|
|
3904
|
-
|
|
3905
|
-
|
|
3906
|
-
|
|
3907
|
-
|
|
3908
|
-
|
|
3909
|
-
`
|
|
4235
|
+
${({ $mode }) =>
|
|
4236
|
+
($mode === "list" || $mode === "header") &&
|
|
4237
|
+
css`
|
|
4238
|
+
position: absolute;
|
|
4239
|
+
top: 0;
|
|
4240
|
+
left: 0;
|
|
4241
|
+
transform: scale(1) translate(-50%, -50%);
|
|
4242
|
+
transition: transform 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
|
|
4243
|
+
transform-origin: 100% 0%;
|
|
4244
|
+
${$mode === "header" &&
|
|
4245
|
+
css`
|
|
4246
|
+
left: unset;
|
|
4247
|
+
right: 0;
|
|
4248
|
+
z-index: 99;
|
|
4249
|
+
transform: scale(1) translate(50%, -50%);
|
|
4250
|
+
`}
|
|
4251
|
+
`}
|
|
4252
|
+
${({ $width }) =>
|
|
4253
|
+
$width &&
|
|
4254
|
+
css`
|
|
4255
|
+
min-width: ${$width}px;
|
|
4256
|
+
`}
|
|
4257
|
+
${({ $height }) =>
|
|
4258
|
+
$height &&
|
|
4259
|
+
css`
|
|
4260
|
+
height: ${$height}px;
|
|
4261
|
+
`}
|
|
4262
|
+
${({ $size }) =>
|
|
4263
|
+
$size &&
|
|
4264
|
+
css`
|
|
4265
|
+
font-size: ${$size}px;
|
|
4266
|
+
`}
|
|
4267
|
+
`;
|
|
3910
4268
|
export const SortByWrapper = styled.section`
|
|
3911
4269
|
justify-self: end;
|
|
3912
4270
|
margin-top: 10px;
|
|
@@ -3917,7 +4275,7 @@ export const SortByWrapper = styled.section`
|
|
|
3917
4275
|
margin-top: 0;
|
|
3918
4276
|
padding-left: 10px;
|
|
3919
4277
|
}
|
|
3920
|
-
|
|
4278
|
+
`;
|
|
3921
4279
|
export const DetailWrapper = styled.section`
|
|
3922
4280
|
width: 100%;
|
|
3923
4281
|
padding-bottom: 16px;
|
|
@@ -3927,7 +4285,7 @@ export const DetailWrapper = styled.section`
|
|
|
3927
4285
|
@media only screen and (min-width: 1366px) {
|
|
3928
4286
|
padding-bottom: 28px;
|
|
3929
4287
|
}
|
|
3930
|
-
|
|
4288
|
+
`;
|
|
3931
4289
|
export const CardContainer = styled.section`
|
|
3932
4290
|
background: var(--ter-clr-bg);
|
|
3933
4291
|
border: 1px solid rgb(232, 232, 232);
|
|
@@ -3940,36 +4298,42 @@ export const CardContainer = styled.section`
|
|
|
3940
4298
|
@media only screen and (min-width: 1366px) {
|
|
3941
4299
|
min-height: 92px;
|
|
3942
4300
|
}
|
|
3943
|
-
|
|
4301
|
+
`;
|
|
3944
4302
|
const globalEmptyCss = css`
|
|
3945
4303
|
text-align: center;
|
|
3946
4304
|
color: var(--mt-clr);
|
|
3947
|
-
|
|
3948
|
-
export const CardWrapper = styled.div<{ $mode?:
|
|
3949
|
-
${({ $mode }) =>
|
|
3950
|
-
$
|
|
3951
|
-
|
|
4305
|
+
`;
|
|
4306
|
+
export const CardWrapper = styled.div<{ $mode?: "empty" | "empty-invoice" }>`
|
|
4307
|
+
${({ $mode }) =>
|
|
4308
|
+
($mode === "empty" || $mode === "empty-invoice") &&
|
|
4309
|
+
css`
|
|
4310
|
+
${globalEmptyCss}
|
|
4311
|
+
`}
|
|
3952
4312
|
|
|
3953
|
-
${({ $mode }) =>
|
|
3954
|
-
|
|
3955
|
-
|
|
3956
|
-
|
|
3957
|
-
|
|
3958
|
-
|
|
3959
|
-
|
|
3960
|
-
|
|
4313
|
+
${({ $mode }) =>
|
|
4314
|
+
$mode === "empty-invoice" &&
|
|
4315
|
+
css`
|
|
4316
|
+
> div {
|
|
4317
|
+
display: grid;
|
|
4318
|
+
align-content: center;
|
|
4319
|
+
grid-gap: 4px;
|
|
4320
|
+
margin: 0 16px;
|
|
4321
|
+
}
|
|
4322
|
+
`}
|
|
3961
4323
|
|
|
3962
|
-
${({ $mode }) =>
|
|
3963
|
-
|
|
3964
|
-
|
|
3965
|
-
width:
|
|
3966
|
-
|
|
3967
|
-
|
|
3968
|
-
|
|
4324
|
+
${({ $mode }) =>
|
|
4325
|
+
!$mode &&
|
|
4326
|
+
css`
|
|
4327
|
+
width: 958px;
|
|
4328
|
+
@media only screen and (min-width: 1024px) {
|
|
4329
|
+
width: unset;
|
|
4330
|
+
}
|
|
4331
|
+
`}
|
|
4332
|
+
`;
|
|
3969
4333
|
export const DetailList = styled.ul<{ $mode?: string }>`
|
|
3970
4334
|
${clearList}
|
|
3971
4335
|
${getListModFunc}
|
|
3972
|
-
|
|
4336
|
+
`;
|
|
3973
4337
|
export const DetailItemTitle = styled.article`
|
|
3974
4338
|
position: relative;
|
|
3975
4339
|
display: grid;
|
|
@@ -3977,8 +4341,8 @@ export const DetailItemTitle = styled.article`
|
|
|
3977
4341
|
padding-right: 10px;
|
|
3978
4342
|
grid-gap: 6px;
|
|
3979
4343
|
align-self: baseline;
|
|
3980
|
-
a,
|
|
3981
|
-
div,
|
|
4344
|
+
a,
|
|
4345
|
+
div,
|
|
3982
4346
|
span {
|
|
3983
4347
|
font-size: 16px;
|
|
3984
4348
|
font-weight: 600;
|
|
@@ -3991,19 +4355,19 @@ export const DetailItemTitle = styled.article`
|
|
|
3991
4355
|
overflow-wrap: break-word;
|
|
3992
4356
|
}
|
|
3993
4357
|
@media only screen and (min-width: 768px) {
|
|
3994
|
-
a,
|
|
3995
|
-
div,
|
|
4358
|
+
a,
|
|
4359
|
+
div,
|
|
3996
4360
|
span {
|
|
3997
4361
|
svg {
|
|
3998
4362
|
display: inline;
|
|
3999
4363
|
margin-left: 10px;
|
|
4000
4364
|
}
|
|
4001
4365
|
}
|
|
4002
|
-
span {
|
|
4003
|
-
font-size: 14px;
|
|
4366
|
+
span {
|
|
4367
|
+
font-size: 14px;
|
|
4004
4368
|
}
|
|
4005
4369
|
}
|
|
4006
|
-
|
|
4370
|
+
`;
|
|
4007
4371
|
export const DetailItemAction = styled.article`
|
|
4008
4372
|
display: grid;
|
|
4009
4373
|
grid-auto-flow: column;
|
|
@@ -4011,8 +4375,8 @@ export const DetailItemAction = styled.article`
|
|
|
4011
4375
|
justify-items: center;
|
|
4012
4376
|
justify-content: center;
|
|
4013
4377
|
align-self: center;
|
|
4014
|
-
|
|
4015
|
-
export const DetailItemInfo = styled.article`
|
|
4378
|
+
`;
|
|
4379
|
+
export const DetailItemInfo = styled.article`
|
|
4016
4380
|
display: grid;
|
|
4017
4381
|
grid-gap: 4px;
|
|
4018
4382
|
> span > span {
|
|
@@ -4023,7 +4387,7 @@ export const DetailItemInfo = styled.article`
|
|
|
4023
4387
|
overflow-wrap: anywhere;
|
|
4024
4388
|
line-height: 16px;
|
|
4025
4389
|
}
|
|
4026
|
-
|
|
4390
|
+
`;
|
|
4027
4391
|
export const DetailItem = styled.li`
|
|
4028
4392
|
position: relative;
|
|
4029
4393
|
display: inline-grid;
|
|
@@ -4034,36 +4398,36 @@ export const DetailItem = styled.li`
|
|
|
4034
4398
|
min-height: 70px;
|
|
4035
4399
|
&:not(:only-child) {
|
|
4036
4400
|
border-bottom: 2px solid #f5f5f5;
|
|
4037
|
-
&:last-child {
|
|
4038
|
-
border-bottom: 0;
|
|
4401
|
+
&:last-child {
|
|
4402
|
+
border-bottom: 0;
|
|
4039
4403
|
}
|
|
4040
4404
|
}
|
|
4041
4405
|
${DetailItemInfo} {
|
|
4042
4406
|
align-self: flex-start;
|
|
4043
4407
|
grid-gap: 2px;
|
|
4044
4408
|
}
|
|
4045
|
-
|
|
4409
|
+
`;
|
|
4046
4410
|
export const DetailItemWrapper = styled.article`
|
|
4047
4411
|
display: grid;
|
|
4048
4412
|
grid-auto-flow: column;
|
|
4049
4413
|
align-self: center;
|
|
4050
|
-
> article {
|
|
4051
|
-
padding: 0 5px;
|
|
4414
|
+
> article {
|
|
4415
|
+
padding: 0 5px;
|
|
4052
4416
|
}
|
|
4053
4417
|
@media only screen and (min-width: 1366px) {
|
|
4054
4418
|
grid-gap: 5px;
|
|
4055
4419
|
}
|
|
4056
|
-
|
|
4420
|
+
`;
|
|
4057
4421
|
export const DetailPanelWrapper = styled.section`
|
|
4058
4422
|
min-height: 66px;
|
|
4059
4423
|
padding-left: 10px !important;
|
|
4060
4424
|
padding-right: 9px !important;
|
|
4061
4425
|
@media only screen and (min-width: 1024px) {
|
|
4062
4426
|
> section {
|
|
4063
|
-
margin: 0 10px;
|
|
4427
|
+
margin: 0 10px;
|
|
4064
4428
|
}
|
|
4065
4429
|
}
|
|
4066
|
-
|
|
4430
|
+
`;
|
|
4067
4431
|
export const PopupBoxWrapper = styled.article`
|
|
4068
4432
|
display: grid;
|
|
4069
4433
|
padding-bottom: 1em;
|
|
@@ -4071,29 +4435,29 @@ export const PopupBoxWrapper = styled.article`
|
|
|
4071
4435
|
grid-gap: 16px;
|
|
4072
4436
|
border-bottom: 1px solid var(--pri-clr-ln);
|
|
4073
4437
|
&:last-child {
|
|
4074
|
-
padding-top: .5em;
|
|
4438
|
+
padding-top: 0.5em;
|
|
4075
4439
|
border-bottom: none;
|
|
4076
4440
|
}
|
|
4077
4441
|
> button {
|
|
4078
4442
|
height: 30px;
|
|
4079
4443
|
justify-self: left;
|
|
4080
4444
|
}
|
|
4081
|
-
|
|
4445
|
+
`;
|
|
4082
4446
|
export const PopupDownloadWrapper = styled.article`
|
|
4083
4447
|
display: grid;
|
|
4084
4448
|
grid-auto-flow: row;
|
|
4085
4449
|
grid-gap: 1.2em;
|
|
4086
4450
|
@media only screen and (min-width: 768px) {
|
|
4087
|
-
grid-template-columns: 1.25fr .75fr;
|
|
4451
|
+
grid-template-columns: 1.25fr 0.75fr;
|
|
4088
4452
|
}
|
|
4089
|
-
|
|
4453
|
+
`;
|
|
4090
4454
|
export const CreateContainer = styled.section<{ $mode?: string }>`
|
|
4091
4455
|
height: 100vh;
|
|
4092
4456
|
overflow: auto;
|
|
4093
4457
|
background-color: var(--pri-clr-bg);
|
|
4094
4458
|
${getCreateContainerModFunc}
|
|
4095
|
-
|
|
4096
|
-
export const CreateHeaderWrapper = styled.article<{ $mode?:
|
|
4459
|
+
`;
|
|
4460
|
+
export const CreateHeaderWrapper = styled.article<{ $mode?: "edit-master" }>`
|
|
4097
4461
|
display: inline-grid;
|
|
4098
4462
|
width: 100%;
|
|
4099
4463
|
padding: 26px 15px 14px;
|
|
@@ -4107,8 +4471,8 @@ export const CreateHeaderWrapper = styled.article<{ $mode?: 'edit-master' }>`
|
|
|
4107
4471
|
grid-template-columns: max-content 1fr;
|
|
4108
4472
|
grid-gap: 10px;
|
|
4109
4473
|
align-items: center;
|
|
4110
|
-
label {
|
|
4111
|
-
font-weight: 600;
|
|
4474
|
+
label {
|
|
4475
|
+
font-weight: 600;
|
|
4112
4476
|
}
|
|
4113
4477
|
}
|
|
4114
4478
|
aside {
|
|
@@ -4133,23 +4497,28 @@ export const CreateHeaderWrapper = styled.article<{ $mode?: 'edit-master' }>`
|
|
|
4133
4497
|
font-size: 30px;
|
|
4134
4498
|
}
|
|
4135
4499
|
}
|
|
4136
|
-
${({ $mode }) =>
|
|
4137
|
-
|
|
4138
|
-
|
|
4139
|
-
|
|
4140
|
-
|
|
4141
|
-
|
|
4142
|
-
|
|
4500
|
+
${({ $mode }) =>
|
|
4501
|
+
$mode === "edit-master" &&
|
|
4502
|
+
css`
|
|
4503
|
+
aside {
|
|
4504
|
+
grid-template-rows: none;
|
|
4505
|
+
}
|
|
4506
|
+
`}
|
|
4507
|
+
`;
|
|
4508
|
+
export const CreateToolWrapper = styled.article<{
|
|
4509
|
+
$mode?: string;
|
|
4510
|
+
$type?: string;
|
|
4511
|
+
}>`
|
|
4143
4512
|
padding: 20px 15px;
|
|
4144
|
-
margin: .5em 0;
|
|
4513
|
+
margin: 0.5em 0;
|
|
4145
4514
|
> section {
|
|
4146
4515
|
display: inline-grid;
|
|
4147
4516
|
width: 100%;
|
|
4148
4517
|
grid-auto-flow: row;
|
|
4149
4518
|
grid-gap: 10px 12px;
|
|
4150
|
-
&:first-child {
|
|
4519
|
+
&:first-child {
|
|
4151
4520
|
padding-bottom: 20px;
|
|
4152
|
-
margin-bottom: 20px;
|
|
4521
|
+
margin-bottom: 20px;
|
|
4153
4522
|
border-bottom: 1px solid var(--ter-clr-ln);
|
|
4154
4523
|
}
|
|
4155
4524
|
&:last-child {
|
|
@@ -4160,12 +4529,12 @@ export const CreateToolWrapper = styled.article<{ $mode?: string, $type?: string
|
|
|
4160
4529
|
}
|
|
4161
4530
|
@media only screen and (min-width: 768px) {
|
|
4162
4531
|
padding: 20px 30px;
|
|
4163
|
-
grid-template-columns: repeat(2,1fr);
|
|
4532
|
+
grid-template-columns: repeat(2, 1fr);
|
|
4164
4533
|
}
|
|
4165
|
-
${({ $mode, $type }:{ $mode?: string
|
|
4166
|
-
if ($mode ===
|
|
4167
|
-
return css`
|
|
4168
|
-
margin: .5em 0;
|
|
4534
|
+
${({ $mode, $type }: { $mode?: string; $type?: string }) => {
|
|
4535
|
+
if ($mode === "promotion") {
|
|
4536
|
+
return css`
|
|
4537
|
+
margin: 0.5em 0;
|
|
4169
4538
|
> section {
|
|
4170
4539
|
&:last-child {
|
|
4171
4540
|
> article:last-child {
|
|
@@ -4175,14 +4544,14 @@ export const CreateToolWrapper = styled.article<{ $mode?: string, $type?: string
|
|
|
4175
4544
|
grid-auto-flow: column;
|
|
4176
4545
|
grid-template-columns: max-content;
|
|
4177
4546
|
grid-gap: 10px;
|
|
4178
|
-
button {
|
|
4179
|
-
width: 130px;
|
|
4547
|
+
button {
|
|
4548
|
+
width: 130px;
|
|
4180
4549
|
}
|
|
4181
4550
|
}
|
|
4182
4551
|
}
|
|
4183
4552
|
}
|
|
4184
4553
|
@media only screen and (min-width: 1024px) {
|
|
4185
|
-
grid-template-columns: repeat(3,290px);
|
|
4554
|
+
grid-template-columns: repeat(3, 290px);
|
|
4186
4555
|
> article:nth-child(3) {
|
|
4187
4556
|
grid-area: 2 / 1;
|
|
4188
4557
|
}
|
|
@@ -4193,28 +4562,28 @@ export const CreateToolWrapper = styled.article<{ $mode?: string, $type?: string
|
|
|
4193
4562
|
grid-area: 2 / 3;
|
|
4194
4563
|
}
|
|
4195
4564
|
}
|
|
4196
|
-
@media only screen and (min-width: 1366px) {
|
|
4197
|
-
grid-template-columns: repeat(3,320px);
|
|
4565
|
+
@media only screen and (min-width: 1366px) {
|
|
4566
|
+
grid-template-columns: repeat(3, 320px);
|
|
4198
4567
|
}
|
|
4199
4568
|
}
|
|
4200
|
-
|
|
4201
|
-
} else if ($mode ===
|
|
4202
|
-
return css`
|
|
4569
|
+
`;
|
|
4570
|
+
} else if ($mode === "paymentreceive") {
|
|
4571
|
+
return css`
|
|
4203
4572
|
> section {
|
|
4204
4573
|
@media only screen and (min-width: 1024px) {
|
|
4205
4574
|
grid-auto-flow: column;
|
|
4206
|
-
grid-template-columns: repeat(3,290px);
|
|
4575
|
+
grid-template-columns: repeat(3, 290px);
|
|
4207
4576
|
}
|
|
4208
|
-
@media only screen and (min-width: 1366px) {
|
|
4209
|
-
grid-template-columns: repeat(3,320px);
|
|
4577
|
+
@media only screen and (min-width: 1366px) {
|
|
4578
|
+
grid-template-columns: repeat(3, 320px);
|
|
4210
4579
|
}
|
|
4211
4580
|
}
|
|
4212
|
-
|
|
4213
|
-
} else if ($mode ===
|
|
4214
|
-
return css`
|
|
4581
|
+
`;
|
|
4582
|
+
} else if ($mode === "picklist") {
|
|
4583
|
+
return css`
|
|
4215
4584
|
> section {
|
|
4216
4585
|
@media only screen and (min-width: 1024px) {
|
|
4217
|
-
grid-template-areas:
|
|
4586
|
+
grid-template-areas:
|
|
4218
4587
|
"a b e e"
|
|
4219
4588
|
"c d . .";
|
|
4220
4589
|
grid-template-columns: 290px 290px 360px;
|
|
@@ -4233,7 +4602,7 @@ export const CreateToolWrapper = styled.article<{ $mode?: string, $type?: string
|
|
|
4233
4602
|
}
|
|
4234
4603
|
&:nth-child(5) {
|
|
4235
4604
|
grid-area: e;
|
|
4236
|
-
position: relative;
|
|
4605
|
+
position: relative;
|
|
4237
4606
|
> div {
|
|
4238
4607
|
width: 360px;
|
|
4239
4608
|
position: absolute;
|
|
@@ -4241,7 +4610,7 @@ export const CreateToolWrapper = styled.article<{ $mode?: string, $type?: string
|
|
|
4241
4610
|
}
|
|
4242
4611
|
}
|
|
4243
4612
|
}
|
|
4244
|
-
@media only screen and (min-width: 1366px) {
|
|
4613
|
+
@media only screen and (min-width: 1366px) {
|
|
4245
4614
|
grid-template-columns: 320px 320px 400px;
|
|
4246
4615
|
> article {
|
|
4247
4616
|
&:nth-child(5) {
|
|
@@ -4252,38 +4621,46 @@ export const CreateToolWrapper = styled.article<{ $mode?: string, $type?: string
|
|
|
4252
4621
|
}
|
|
4253
4622
|
}
|
|
4254
4623
|
}
|
|
4255
|
-
|
|
4256
|
-
} else if ($mode ===
|
|
4257
|
-
return css`
|
|
4624
|
+
`;
|
|
4625
|
+
} else if ($mode === "stock") {
|
|
4626
|
+
return css`
|
|
4258
4627
|
> section {
|
|
4259
4628
|
@media only screen and (min-width: 1024px) {
|
|
4260
|
-
grid-template-columns: ${$type ===
|
|
4629
|
+
grid-template-columns: ${$type === "transfer"
|
|
4630
|
+
? "repeat(4,290px)"
|
|
4631
|
+
: $type === "price"
|
|
4632
|
+
? "repeat(2,290px)"
|
|
4633
|
+
: "repeat(3,290px)"};
|
|
4261
4634
|
}
|
|
4262
|
-
@media only screen and (min-width: 1366px) {
|
|
4263
|
-
grid-template-columns: ${$type ===
|
|
4635
|
+
@media only screen and (min-width: 1366px) {
|
|
4636
|
+
grid-template-columns: ${$type === "transfer"
|
|
4637
|
+
? "repeat(4,320px)"
|
|
4638
|
+
: $type === "price"
|
|
4639
|
+
? "repeat(2,320px)"
|
|
4640
|
+
: "repeat(3,320px)"};
|
|
4264
4641
|
}
|
|
4265
4642
|
}
|
|
4266
|
-
|
|
4643
|
+
`;
|
|
4267
4644
|
}
|
|
4268
|
-
}}
|
|
4269
|
-
|
|
4645
|
+
}}
|
|
4646
|
+
`;
|
|
4270
4647
|
export const SearchDropdownContainer = styled.section`
|
|
4271
4648
|
position: relative;
|
|
4272
|
-
|
|
4649
|
+
`;
|
|
4273
4650
|
export const SearchResultWrapper = styled.aside`
|
|
4274
4651
|
${dropBase}
|
|
4275
4652
|
position: absolute;
|
|
4276
4653
|
z-index: 101;
|
|
4277
4654
|
top: 34px;
|
|
4278
4655
|
width: 100%;
|
|
4279
|
-
|
|
4656
|
+
`;
|
|
4280
4657
|
export const SearchResultList = styled.section`
|
|
4281
4658
|
display: block;
|
|
4282
4659
|
overflow-y: auto;
|
|
4283
4660
|
overflow-x: hidden;
|
|
4284
4661
|
height: auto;
|
|
4285
4662
|
max-height: 360px;
|
|
4286
|
-
|
|
4663
|
+
`;
|
|
4287
4664
|
export const SearchResultItem = styled.div`
|
|
4288
4665
|
border-bottom: 1px solid var(--ter-clr-ln);
|
|
4289
4666
|
padding: 12px;
|
|
@@ -4295,12 +4672,12 @@ export const SearchResultItem = styled.div`
|
|
|
4295
4672
|
&:hover {
|
|
4296
4673
|
background-color: var(--hg-clr-bg);
|
|
4297
4674
|
}
|
|
4298
|
-
|
|
4675
|
+
`;
|
|
4299
4676
|
export const ListAddItemContainer = styled.div`
|
|
4300
4677
|
overflow: auto;
|
|
4301
4678
|
height: 400px;
|
|
4302
4679
|
font-size: 13px;
|
|
4303
|
-
|
|
4680
|
+
`;
|
|
4304
4681
|
export const SearchWrapperPopup = styled.div`
|
|
4305
4682
|
position: relative;
|
|
4306
4683
|
margin-top: 16px;
|
|
@@ -4311,29 +4688,31 @@ export const SearchWrapperPopup = styled.div`
|
|
|
4311
4688
|
}
|
|
4312
4689
|
i:first-child {
|
|
4313
4690
|
position: absolute;
|
|
4314
|
-
top: .75em;
|
|
4691
|
+
top: 0.75em;
|
|
4315
4692
|
left: 1.75em;
|
|
4316
4693
|
pointer-events: none;
|
|
4317
4694
|
z-index: 1;
|
|
4318
4695
|
}
|
|
4319
|
-
|
|
4696
|
+
`;
|
|
4320
4697
|
export const PopupAddProductContainer = styled.section`
|
|
4321
4698
|
margin-top: 1em;
|
|
4322
|
-
|
|
4323
|
-
export const PopupCard = styled.section<{ $mode?:
|
|
4699
|
+
`;
|
|
4700
|
+
export const PopupCard = styled.section<{ $mode?: "mass-payment" }>`
|
|
4324
4701
|
padding: 1em;
|
|
4325
4702
|
background-color: var(--sec-clr-bg);
|
|
4326
4703
|
margin-bottom: 1em;
|
|
4327
4704
|
@media only screen and (min-width: 768px) {
|
|
4328
4705
|
padding: 1em 120px;
|
|
4329
4706
|
}
|
|
4330
|
-
${({ $mode }) =>
|
|
4331
|
-
|
|
4332
|
-
|
|
4333
|
-
|
|
4334
|
-
|
|
4335
|
-
|
|
4336
|
-
|
|
4707
|
+
${({ $mode }) =>
|
|
4708
|
+
$mode === "mass-payment" &&
|
|
4709
|
+
css`
|
|
4710
|
+
margin: 0;
|
|
4711
|
+
@media only screen and (min-width: 768px) {
|
|
4712
|
+
padding: 1em 24px;
|
|
4713
|
+
}
|
|
4714
|
+
`}
|
|
4715
|
+
`;
|
|
4337
4716
|
export const PopupExportCardWrapper = styled.article`
|
|
4338
4717
|
display: grid;
|
|
4339
4718
|
grid-auto-flow: row;
|
|
@@ -4341,7 +4720,7 @@ export const PopupExportCardWrapper = styled.article`
|
|
|
4341
4720
|
@media only screen and (min-width: 768px) {
|
|
4342
4721
|
grid-template-columns: 1fr 1fr;
|
|
4343
4722
|
}
|
|
4344
|
-
|
|
4723
|
+
`;
|
|
4345
4724
|
export const NavMobileOverlay = styled.div`
|
|
4346
4725
|
display: none;
|
|
4347
4726
|
position: fixed;
|
|
@@ -4351,14 +4730,14 @@ export const NavMobileOverlay = styled.div`
|
|
|
4351
4730
|
top: 0px;
|
|
4352
4731
|
right: 0px;
|
|
4353
4732
|
background-color: var(--ov-clr-bg);
|
|
4354
|
-
|
|
4355
|
-
export const NavList = styled.ul`
|
|
4733
|
+
`;
|
|
4734
|
+
export const NavList = styled.ul`
|
|
4356
4735
|
${clearList}
|
|
4357
|
-
position: fixed;
|
|
4736
|
+
position: fixed;
|
|
4358
4737
|
overflow: auto;
|
|
4359
4738
|
height: calc(100vh - 48px);
|
|
4360
4739
|
width: 187px;
|
|
4361
|
-
padding: .5rem .5rem 0;
|
|
4740
|
+
padding: 0.5rem 0.5rem 0;
|
|
4362
4741
|
@media only screen and (min-width: 768px) {
|
|
4363
4742
|
width: 45%;
|
|
4364
4743
|
}
|
|
@@ -4371,24 +4750,24 @@ export const NavList = styled.ul`
|
|
|
4371
4750
|
@media only screen and (max-width: 767px) {
|
|
4372
4751
|
width: 80%;
|
|
4373
4752
|
}
|
|
4374
|
-
|
|
4375
|
-
export const NavMobileHeaderWrapper = styled.div`
|
|
4753
|
+
`;
|
|
4754
|
+
export const NavMobileHeaderWrapper = styled.div`
|
|
4376
4755
|
display: none;
|
|
4377
4756
|
grid-template-columns: auto 15px;
|
|
4378
4757
|
margin-bottom: 15px;
|
|
4379
4758
|
@media (min-width: 1280px) {
|
|
4380
4759
|
margin-bottom: 25px;
|
|
4381
4760
|
}
|
|
4382
|
-
|
|
4761
|
+
`;
|
|
4383
4762
|
export const NavContainerStyles = css`
|
|
4384
4763
|
display: none;
|
|
4385
4764
|
background-color: var(--pri-clr-bg);
|
|
4386
4765
|
@keyframes navleftslide {
|
|
4387
|
-
0% {
|
|
4388
|
-
left: -150px;
|
|
4766
|
+
0% {
|
|
4767
|
+
left: -150px;
|
|
4389
4768
|
}
|
|
4390
|
-
100% {
|
|
4391
|
-
left: 0px;
|
|
4769
|
+
100% {
|
|
4770
|
+
left: 0px;
|
|
4392
4771
|
}
|
|
4393
4772
|
}
|
|
4394
4773
|
@media only screen and (min-width: 1280px) {
|
|
@@ -4401,7 +4780,7 @@ export const NavContainerStyles = css`
|
|
|
4401
4780
|
&.mobile-shown {
|
|
4402
4781
|
top: 0px;
|
|
4403
4782
|
display: block;
|
|
4404
|
-
position: fixed;
|
|
4783
|
+
position: fixed;
|
|
4405
4784
|
z-index: 11;
|
|
4406
4785
|
${NavMobileOverlay} {
|
|
4407
4786
|
display: block;
|
|
@@ -4410,33 +4789,33 @@ export const NavContainerStyles = css`
|
|
|
4410
4789
|
display: grid;
|
|
4411
4790
|
}
|
|
4412
4791
|
${NavList} {
|
|
4413
|
-
animation: navleftslide .15s ease;
|
|
4792
|
+
animation: navleftslide 0.15s ease;
|
|
4414
4793
|
background: var(--pri-clr-bg);
|
|
4415
4794
|
height: 100%;
|
|
4416
4795
|
z-index: 102;
|
|
4417
4796
|
}
|
|
4418
4797
|
}
|
|
4419
4798
|
}
|
|
4420
|
-
|
|
4799
|
+
`;
|
|
4421
4800
|
export const NavContainer = styled.nav`
|
|
4422
4801
|
${NavContainerStyles}
|
|
4423
|
-
|
|
4424
|
-
export const NavMainItem = styled.li<{ $activated?: boolean }>`
|
|
4802
|
+
`;
|
|
4803
|
+
export const NavMainItem = styled.li<{ $activated?: boolean }>`
|
|
4425
4804
|
line-height: 1.25rem;
|
|
4426
4805
|
font-style: normal;
|
|
4427
4806
|
font-weight: 400;
|
|
4428
4807
|
color: var(--nav-clr);
|
|
4429
4808
|
position: relative;
|
|
4430
|
-
margin-bottom: .35rem;
|
|
4809
|
+
margin-bottom: 0.35rem;
|
|
4431
4810
|
._refCollapseNav {
|
|
4432
4811
|
cursor: pointer;
|
|
4433
4812
|
&.is-active {
|
|
4434
4813
|
font-weight: 500;
|
|
4435
|
-
color: rgba(28, 32, 36, 1)
|
|
4814
|
+
color: rgba(28, 32, 36, 1);
|
|
4436
4815
|
}
|
|
4437
4816
|
&::after {
|
|
4438
4817
|
position: absolute;
|
|
4439
|
-
content:
|
|
4818
|
+
content: "";
|
|
4440
4819
|
right: 10px;
|
|
4441
4820
|
top: 14px;
|
|
4442
4821
|
padding: 2px;
|
|
@@ -4447,55 +4826,64 @@ export const NavMainItem = styled.li<{ $activated?: boolean }>`
|
|
|
4447
4826
|
border-color: var(--nav-clr);
|
|
4448
4827
|
}
|
|
4449
4828
|
}
|
|
4450
|
-
${({ $activated }) =>
|
|
4451
|
-
|
|
4452
|
-
|
|
4453
|
-
|
|
4454
|
-
|
|
4455
|
-
|
|
4456
|
-
&, &:hover {
|
|
4457
|
-
color: var(--pri-clr-lnk__hvr) !important;
|
|
4829
|
+
${({ $activated }) =>
|
|
4830
|
+
$activated &&
|
|
4831
|
+
css`
|
|
4832
|
+
> div {
|
|
4833
|
+
background-color: var(--nav-clr-bg__hvr);
|
|
4834
|
+
border-radius: var(--nav-rd);
|
|
4458
4835
|
}
|
|
4459
|
-
|
|
4460
|
-
|
|
4461
|
-
|
|
4836
|
+
> div > a {
|
|
4837
|
+
&,
|
|
4838
|
+
&:hover {
|
|
4839
|
+
color: var(--pri-clr-lnk__hvr) !important;
|
|
4840
|
+
}
|
|
4841
|
+
}
|
|
4842
|
+
`}
|
|
4843
|
+
`;
|
|
4462
4844
|
export const NavChildLine = styled.hr`
|
|
4463
4845
|
border-top: 1px solid var(--sec-clr-ln);
|
|
4464
4846
|
margin: 0;
|
|
4465
4847
|
height: 0px;
|
|
4466
4848
|
border-bottom: 0;
|
|
4467
|
-
|
|
4468
|
-
export const NavChildItem = styled.div<{
|
|
4849
|
+
`;
|
|
4850
|
+
export const NavChildItem = styled.div<{
|
|
4851
|
+
$activated?: boolean;
|
|
4852
|
+
$mode?: "counter";
|
|
4853
|
+
}>`
|
|
4469
4854
|
display: grid;
|
|
4470
4855
|
position: relative;
|
|
4471
4856
|
grid-gap: 6px;
|
|
4472
4857
|
margin-left: 1.5rem;
|
|
4473
4858
|
margin-top: 0;
|
|
4474
4859
|
margin-bottom: 4px;
|
|
4475
|
-
padding-top: .25rem;
|
|
4476
|
-
padding-bottom: .25rem;
|
|
4477
|
-
padding-left: .5rem;
|
|
4478
|
-
padding-right: .5rem;
|
|
4860
|
+
padding-top: 0.25rem;
|
|
4861
|
+
padding-bottom: 0.25rem;
|
|
4862
|
+
padding-left: 0.5rem;
|
|
4863
|
+
padding-right: 0.5rem;
|
|
4479
4864
|
font-weight: 400;
|
|
4480
4865
|
align-items: center;
|
|
4481
4866
|
height: auto;
|
|
4482
4867
|
min-height: 32px;
|
|
4483
|
-
> a,
|
|
4868
|
+
> a,
|
|
4869
|
+
> span {
|
|
4484
4870
|
color: var(--nav-clr);
|
|
4485
4871
|
}
|
|
4486
4872
|
&:hover {
|
|
4487
4873
|
background-color: var(--nav-clr-bg__hvr);
|
|
4488
4874
|
border-radius: var(--nav-rd);
|
|
4489
|
-
> a,
|
|
4490
|
-
|
|
4875
|
+
> a,
|
|
4876
|
+
> span {
|
|
4877
|
+
&,
|
|
4878
|
+
&:hover {
|
|
4491
4879
|
color: var(--nav-clr);
|
|
4492
|
-
}
|
|
4880
|
+
}
|
|
4493
4881
|
}
|
|
4494
4882
|
}
|
|
4495
4883
|
.counter > span {
|
|
4496
4884
|
font-size: 11px;
|
|
4497
4885
|
padding: 2px 4px;
|
|
4498
|
-
position: absolute;
|
|
4886
|
+
position: absolute;
|
|
4499
4887
|
background-color: var(--mt-clr-bg__fc);
|
|
4500
4888
|
border-radius: var(--ter-rd);
|
|
4501
4889
|
top: 50%;
|
|
@@ -4503,55 +4891,61 @@ export const NavChildItem = styled.div<{ $activated?: boolean, $mode?: 'counter'
|
|
|
4503
4891
|
line-height: 11px;
|
|
4504
4892
|
transform: translateY(-50%);
|
|
4505
4893
|
}
|
|
4506
|
-
${({ $activated }) =>
|
|
4507
|
-
|
|
4508
|
-
|
|
4509
|
-
|
|
4510
|
-
|
|
4511
|
-
|
|
4894
|
+
${({ $activated }) =>
|
|
4895
|
+
$activated &&
|
|
4896
|
+
css`
|
|
4897
|
+
background-color: var(--nav-clr-bg__hvr);
|
|
4898
|
+
border-radius: var(--nav-rd);
|
|
4899
|
+
> a,
|
|
4900
|
+
> span {
|
|
4901
|
+
&,
|
|
4902
|
+
&:hover {
|
|
4903
|
+
color: var(--pri-clr-lnk__hvr) !important;
|
|
4904
|
+
}
|
|
4512
4905
|
}
|
|
4513
|
-
}
|
|
4514
|
-
|
|
4515
|
-
|
|
4516
|
-
|
|
4517
|
-
|
|
4518
|
-
`
|
|
4519
|
-
|
|
4906
|
+
`}
|
|
4907
|
+
${({ $mode }) =>
|
|
4908
|
+
$mode === "counter" &&
|
|
4909
|
+
css`
|
|
4910
|
+
grid-template-columns: auto 20px;
|
|
4911
|
+
`}
|
|
4912
|
+
`;
|
|
4913
|
+
export const NavMainItemWrapper = styled.div`
|
|
4520
4914
|
display: grid;
|
|
4521
4915
|
grid-template-columns: 15px auto;
|
|
4522
|
-
grid-gap: .5rem;
|
|
4916
|
+
grid-gap: 0.5rem;
|
|
4523
4917
|
align-items: center;
|
|
4524
|
-
padding-top: .375rem;
|
|
4525
|
-
padding-bottom: .375rem;
|
|
4526
|
-
padding-left: .5rem;
|
|
4527
|
-
padding-right: .5rem;
|
|
4918
|
+
padding-top: 0.375rem;
|
|
4919
|
+
padding-bottom: 0.375rem;
|
|
4920
|
+
padding-left: 0.5rem;
|
|
4921
|
+
padding-right: 0.5rem;
|
|
4528
4922
|
&:hover {
|
|
4529
4923
|
background-color: var(--nav-clr-bg__hvr);
|
|
4530
4924
|
border-radius: var(--nav-rd);
|
|
4531
4925
|
> a {
|
|
4532
|
-
&,
|
|
4926
|
+
&,
|
|
4533
4927
|
&:hover {
|
|
4534
4928
|
color: var(--nav-clr);
|
|
4535
4929
|
}
|
|
4536
4930
|
}
|
|
4537
4931
|
}
|
|
4538
|
-
|
|
4932
|
+
`;
|
|
4539
4933
|
export const TotalLabel = styled.span`
|
|
4540
4934
|
font-weight: 600;
|
|
4541
4935
|
padding-top: 6px;
|
|
4542
|
-
|
|
4936
|
+
`;
|
|
4543
4937
|
export const FilterColumnContainer = styled.section`
|
|
4544
4938
|
display: grid;
|
|
4545
4939
|
justify-content: end;
|
|
4546
4940
|
padding-left: 10px;
|
|
4547
|
-
|
|
4941
|
+
`;
|
|
4548
4942
|
export const ScrollArrowContainer = styled.section`
|
|
4549
4943
|
padding-left: 10px;
|
|
4550
4944
|
> :first-child {
|
|
4551
4945
|
margin-right: 2px;
|
|
4552
4946
|
&::after {
|
|
4553
4947
|
position: absolute;
|
|
4554
|
-
content:
|
|
4948
|
+
content: "";
|
|
4555
4949
|
right: 50%;
|
|
4556
4950
|
padding: 4px;
|
|
4557
4951
|
border-style: solid;
|
|
@@ -4562,7 +4956,7 @@ export const ScrollArrowContainer = styled.section`
|
|
|
4562
4956
|
> :last-child {
|
|
4563
4957
|
&::after {
|
|
4564
4958
|
position: absolute;
|
|
4565
|
-
content:
|
|
4959
|
+
content: "";
|
|
4566
4960
|
left: 50%;
|
|
4567
4961
|
padding: 4px;
|
|
4568
4962
|
border-style: solid;
|
|
@@ -4578,9 +4972,9 @@ export const ScrollArrowContainer = styled.section`
|
|
|
4578
4972
|
color: var(--sec-clr-lnk__hvr);
|
|
4579
4973
|
}
|
|
4580
4974
|
}
|
|
4581
|
-
|
|
4975
|
+
`;
|
|
4582
4976
|
|
|
4583
|
-
export const BulkSelectContainer = styled.div`
|
|
4977
|
+
export const BulkSelectContainer = styled.div`
|
|
4584
4978
|
position: relative;
|
|
4585
4979
|
display: grid;
|
|
4586
4980
|
grid-auto-flow: dense;
|
|
@@ -4601,7 +4995,7 @@ export const BulkSelectContainer = styled.div`
|
|
|
4601
4995
|
padding-left: 0;
|
|
4602
4996
|
margin-left: 0;
|
|
4603
4997
|
}
|
|
4604
|
-
> section,
|
|
4998
|
+
> section,
|
|
4605
4999
|
> button {
|
|
4606
5000
|
margin: -8px -6px -7px -6px;
|
|
4607
5001
|
}
|
|
@@ -4619,7 +5013,7 @@ export const BulkSelectContainer = styled.div`
|
|
|
4619
5013
|
}
|
|
4620
5014
|
}
|
|
4621
5015
|
}
|
|
4622
|
-
> section,
|
|
5016
|
+
> section,
|
|
4623
5017
|
> article {
|
|
4624
5018
|
max-height: 20px;
|
|
4625
5019
|
align-items: center;
|
|
@@ -4634,23 +5028,23 @@ export const BulkSelectContainer = styled.div`
|
|
|
4634
5028
|
}
|
|
4635
5029
|
}
|
|
4636
5030
|
}
|
|
4637
|
-
}
|
|
5031
|
+
}
|
|
4638
5032
|
@media only screen and (min-width: 768px) {
|
|
4639
5033
|
grid-auto-flow: column;
|
|
4640
5034
|
grid-gap: 20px;
|
|
4641
5035
|
._refSelectedBulk {
|
|
4642
5036
|
display: none;
|
|
4643
5037
|
}
|
|
4644
|
-
> section,
|
|
5038
|
+
> section,
|
|
4645
5039
|
> article {
|
|
4646
5040
|
height: auto;
|
|
4647
5041
|
max-height: auto;
|
|
4648
|
-
font-size: .875rem;
|
|
5042
|
+
font-size: 0.875rem;
|
|
4649
5043
|
align-items: unset;
|
|
4650
5044
|
}
|
|
4651
5045
|
> article {
|
|
4652
|
-
&:nth-child(4),
|
|
4653
|
-
&:last-child,
|
|
5046
|
+
&:nth-child(4),
|
|
5047
|
+
&:last-child,
|
|
4654
5048
|
&:nth-child(4):last-child {
|
|
4655
5049
|
width: auto;
|
|
4656
5050
|
padding-left: 3px;
|
|
@@ -4673,9 +5067,9 @@ export const BulkSelectContainer = styled.div`
|
|
|
4673
5067
|
@media only screen and (min-width: 1024px) {
|
|
4674
5068
|
grid-gap: 32px;
|
|
4675
5069
|
}
|
|
4676
|
-
|
|
5070
|
+
`;
|
|
4677
5071
|
|
|
4678
|
-
export const DotIcon = styled.span<{ $color?: string
|
|
5072
|
+
export const DotIcon = styled.span<{ $color?: string; $mode?: "activities" }>`
|
|
4679
5073
|
display: inline-block;
|
|
4680
5074
|
vertical-align: middle;
|
|
4681
5075
|
margin-right: 8px;
|
|
@@ -4684,28 +5078,32 @@ export const DotIcon = styled.span<{ $color?: string, $mode?: 'activities' }>`
|
|
|
4684
5078
|
height: 4px;
|
|
4685
5079
|
border-radius: 2px;
|
|
4686
5080
|
|
|
4687
|
-
${({ $color }) =>
|
|
4688
|
-
|
|
4689
|
-
|
|
5081
|
+
${({ $color }) =>
|
|
5082
|
+
$color &&
|
|
5083
|
+
css`
|
|
5084
|
+
background-color: ${$color};
|
|
5085
|
+
`}
|
|
4690
5086
|
|
|
4691
|
-
${({ $mode }) =>
|
|
4692
|
-
|
|
4693
|
-
|
|
4694
|
-
|
|
4695
|
-
|
|
4696
|
-
|
|
4697
|
-
|
|
4698
|
-
|
|
5087
|
+
${({ $mode }) =>
|
|
5088
|
+
$mode === "activities" &&
|
|
5089
|
+
css`
|
|
5090
|
+
margin-top: -6px;
|
|
5091
|
+
margin-left: -2.5px;
|
|
5092
|
+
width: 8px;
|
|
5093
|
+
height: 8px;
|
|
5094
|
+
border-radius: 4px;
|
|
5095
|
+
`}
|
|
5096
|
+
`;
|
|
4699
5097
|
|
|
4700
|
-
export const ItemQtyLabel = styled.span`
|
|
5098
|
+
export const ItemQtyLabel = styled.span`
|
|
4701
5099
|
text-align: right;
|
|
4702
5100
|
display: grid;
|
|
4703
|
-
|
|
5101
|
+
`;
|
|
4704
5102
|
|
|
4705
|
-
export const OptCustomLabel = styled.label<{$mode?: string}>`
|
|
5103
|
+
export const OptCustomLabel = styled.label<{ $mode?: string }>`
|
|
4706
5104
|
font-size: 10px;
|
|
4707
5105
|
text-transform: capitalize;
|
|
4708
|
-
letter-spacing: .5px;
|
|
5106
|
+
letter-spacing: 0.5px;
|
|
4709
5107
|
padding: 3px 5px;
|
|
4710
5108
|
display: block;
|
|
4711
5109
|
position: absolute;
|
|
@@ -4713,15 +5111,17 @@ export const OptCustomLabel = styled.label<{$mode?: string}>`
|
|
|
4713
5111
|
top: 50%;
|
|
4714
5112
|
transform: translateY(-50%);
|
|
4715
5113
|
z-index: 1;
|
|
4716
|
-
background-color: #
|
|
5114
|
+
background-color: #efefef;
|
|
4717
5115
|
border-radius: var(--nav-rd);
|
|
4718
5116
|
color: var(--pri-clr);
|
|
4719
|
-
${({ $mode }) =>
|
|
4720
|
-
|
|
4721
|
-
|
|
4722
|
-
|
|
5117
|
+
${({ $mode }) =>
|
|
5118
|
+
$mode === "label" &&
|
|
5119
|
+
css`
|
|
5120
|
+
transform: translateY(0);
|
|
5121
|
+
`}
|
|
5122
|
+
`;
|
|
4723
5123
|
|
|
4724
|
-
export const TableContentWrapper = styled.div<{ $mode?:
|
|
5124
|
+
export const TableContentWrapper = styled.div<{ $mode?: "package" }>`
|
|
4725
5125
|
position: relative;
|
|
4726
5126
|
width: 100%;
|
|
4727
5127
|
height: 48px;
|
|
@@ -4735,39 +5135,41 @@ export const TableContentWrapper = styled.div<{ $mode?: 'package' }>`
|
|
|
4735
5135
|
&:not(:first-child) {
|
|
4736
5136
|
border-bottom: 1px solid var(--ter-clr-ln);
|
|
4737
5137
|
}
|
|
4738
|
-
@media only screen and (min-width: 375px) {
|
|
4739
|
-
padding: 0 34px;
|
|
5138
|
+
@media only screen and (min-width: 375px) {
|
|
5139
|
+
padding: 0 34px;
|
|
4740
5140
|
}
|
|
4741
|
-
@media only screen and (min-width: 768px) {
|
|
4742
|
-
padding: 0 33px;
|
|
5141
|
+
@media only screen and (min-width: 768px) {
|
|
5142
|
+
padding: 0 33px;
|
|
4743
5143
|
}
|
|
4744
|
-
@media only screen and (min-width: 1024px) {
|
|
4745
|
-
padding: 0 39px;
|
|
5144
|
+
@media only screen and (min-width: 1024px) {
|
|
5145
|
+
padding: 0 39px;
|
|
4746
5146
|
}
|
|
4747
5147
|
@media only screen and (min-width: 1366px) {
|
|
4748
|
-
padding: 0 47px;
|
|
5148
|
+
padding: 0 47px;
|
|
4749
5149
|
}
|
|
4750
5150
|
|
|
4751
|
-
${({ $mode }) =>
|
|
4752
|
-
|
|
4753
|
-
|
|
4754
|
-
|
|
4755
|
-
|
|
4756
|
-
|
|
4757
|
-
padding: 0 7px;
|
|
4758
|
-
|
|
4759
|
-
|
|
4760
|
-
|
|
4761
|
-
|
|
4762
|
-
|
|
4763
|
-
|
|
4764
|
-
|
|
4765
|
-
|
|
4766
|
-
|
|
4767
|
-
|
|
4768
|
-
|
|
4769
|
-
|
|
4770
|
-
|
|
5151
|
+
${({ $mode }) =>
|
|
5152
|
+
$mode === "package" &&
|
|
5153
|
+
css`
|
|
5154
|
+
grid-template-columns: 16px 220px auto;
|
|
5155
|
+
grid-gap: 11px;
|
|
5156
|
+
justify-content: normal;
|
|
5157
|
+
padding: 0 7px 0 3px;
|
|
5158
|
+
@media only screen and (min-width: 375px) {
|
|
5159
|
+
padding: 0 7px;
|
|
5160
|
+
}
|
|
5161
|
+
@media only screen and (min-width: 768px) {
|
|
5162
|
+
grid-gap: 12px;
|
|
5163
|
+
padding: 0 7px 0 5px;
|
|
5164
|
+
}
|
|
5165
|
+
@media only screen and (min-width: 1024px) {
|
|
5166
|
+
padding: 0 7px 0 11px;
|
|
5167
|
+
}
|
|
5168
|
+
@media only screen and (min-width: 1366px) {
|
|
5169
|
+
padding: 0 11px 0 19px;
|
|
5170
|
+
}
|
|
5171
|
+
`}
|
|
5172
|
+
`;
|
|
4771
5173
|
|
|
4772
5174
|
export const TableBundleColumn = styled.article`
|
|
4773
5175
|
margin: 15px 0 0 42px;
|
|
@@ -4775,7 +5177,7 @@ export const TableBundleColumn = styled.article`
|
|
|
4775
5177
|
&:before {
|
|
4776
5178
|
position: absolute;
|
|
4777
5179
|
width: 1px;
|
|
4778
|
-
background-color: #
|
|
5180
|
+
background-color: #e3e3e3;
|
|
4779
5181
|
height: 100%;
|
|
4780
5182
|
content: "";
|
|
4781
5183
|
top: -6px;
|
|
@@ -4794,7 +5196,7 @@ export const TableBundleColumn = styled.article`
|
|
|
4794
5196
|
display: block !important;
|
|
4795
5197
|
}
|
|
4796
5198
|
}
|
|
4797
|
-
|
|
5199
|
+
`;
|
|
4798
5200
|
export const FilterStoreContainer = styled.div`
|
|
4799
5201
|
margin-top: 16px;
|
|
4800
5202
|
max-height: 80px;
|
|
@@ -4802,7 +5204,7 @@ export const FilterStoreContainer = styled.div`
|
|
|
4802
5204
|
> span {
|
|
4803
5205
|
font-size: 14px;
|
|
4804
5206
|
}
|
|
4805
|
-
|
|
5207
|
+
`;
|
|
4806
5208
|
export const FilterStoreList = styled.div`
|
|
4807
5209
|
margin: 6px 12px;
|
|
4808
5210
|
display: inline-grid;
|
|
@@ -4813,4 +5215,4 @@ export const FilterStoreList = styled.div`
|
|
|
4813
5215
|
label:nth-child(2) {
|
|
4814
5216
|
cursor: pointer;
|
|
4815
5217
|
}
|
|
4816
|
-
|
|
5218
|
+
`;
|