forstok-ui-lib 8.3.8 → 8.3.12
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 +902 -726
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +902 -726
- package/dist/index.mjs.map +1 -1
- package/package.json +1 -1
- package/src/assets/stylesheets/shares.styles.ts +1616 -1224
|
@@ -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
|
|
9
|
-
min-height: 750px;
|
|
10
|
-
@media only screen and (min-width: 1280px) {
|
|
11
|
-
|
|
12
|
-
}
|
|
13
|
-
|
|
14
|
-
} else if ($mode ===
|
|
15
|
-
style
|
|
16
|
+
const getTabsContentModFunc = ({ $mode }: { $mode?: string }) => {
|
|
17
|
+
let style = ``;
|
|
18
|
+
if ($mode === "list") {
|
|
19
|
+
style += `
|
|
20
|
+
// min-height: 750px;
|
|
21
|
+
// @media only screen and (min-width: 1280px) {
|
|
22
|
+
// min-height: 600px;
|
|
23
|
+
// }
|
|
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,78 @@ 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:
|
|
2942
|
-
|
|
2943
|
-
|
|
2944
|
-
|
|
3094
|
+
grid-template-columns:
|
|
3095
|
+
var(--checkbox) var(--item) minmax(auto, max-content)
|
|
3096
|
+
var(--time) minmax(88px, auto);
|
|
3097
|
+
&[role="rowheader"] > div[role="group"],
|
|
3098
|
+
&[role="row"] > div[role="cellgroup"] > div[role="rowgroup"],
|
|
3099
|
+
._refCollapse > div:not(._refCollapseContainer),
|
|
2945
3100
|
._refCollapseContainer > div {
|
|
2946
|
-
grid-template-columns:
|
|
3101
|
+
grid-template-columns:
|
|
3102
|
+
var(--variant) var(--sku) var(--qty-big) var(--price)
|
|
3103
|
+
var(--status-big);
|
|
2947
3104
|
}
|
|
2948
|
-
input[name=checkbox-list] {
|
|
2949
|
-
& + span {
|
|
3105
|
+
input[name="checkbox-list"] {
|
|
3106
|
+
& + span {
|
|
2950
3107
|
top: 8px;
|
|
2951
3108
|
}
|
|
2952
3109
|
}
|
|
2953
3110
|
}
|
|
2954
3111
|
`,
|
|
2955
|
-
|
|
3112
|
+
"item-nocheck": css`
|
|
2956
3113
|
${ItemTable} {
|
|
2957
|
-
grid-template-columns:
|
|
2958
|
-
|
|
2959
|
-
|
|
2960
|
-
|
|
3114
|
+
grid-template-columns:
|
|
3115
|
+
var(--item) minmax(auto, max-content) var(--time)
|
|
3116
|
+
minmax(88px, auto);
|
|
3117
|
+
&[role="rowheader"] > div[role="group"],
|
|
3118
|
+
&[role="row"] > div[role="cellgroup"] > div[role="rowgroup"],
|
|
3119
|
+
._refCollapse > div:not(._refCollapseContainer),
|
|
2961
3120
|
._refCollapseContainer > div {
|
|
2962
|
-
grid-template-columns:
|
|
3121
|
+
grid-template-columns:
|
|
3122
|
+
var(--variant) var(--sku) var(--qty-big) var(--price)
|
|
3123
|
+
var(--status-big);
|
|
2963
3124
|
}
|
|
2964
3125
|
}
|
|
2965
3126
|
`,
|
|
2966
3127
|
listing: css`
|
|
2967
3128
|
${ItemTable} {
|
|
2968
|
-
grid-template-columns:
|
|
2969
|
-
|
|
2970
|
-
|
|
2971
|
-
|
|
3129
|
+
grid-template-columns:
|
|
3130
|
+
var(--checkbox) var(--item) minmax(auto, max-content)
|
|
3131
|
+
minmax(88px, auto);
|
|
3132
|
+
&[role="rowheader"] > div[role="group"],
|
|
3133
|
+
&[role="row"] > div[role="cellgroup"] > div[role="rowgroup"],
|
|
3134
|
+
._refCollapse > div:not(._refCollapseContainer),
|
|
2972
3135
|
._refCollapseContainer > div {
|
|
2973
|
-
grid-template-columns:
|
|
3136
|
+
grid-template-columns:
|
|
3137
|
+
var(--variant) var(--sku) var(--sku) minmax(95px, 115px)
|
|
3138
|
+
var(--price) var(--status-small);
|
|
2974
3139
|
}
|
|
2975
|
-
input[name=checkbox-list] {
|
|
2976
|
-
& + span {
|
|
3140
|
+
input[name="checkbox-list"] {
|
|
3141
|
+
& + span {
|
|
2977
3142
|
top: 8px;
|
|
2978
3143
|
}
|
|
2979
3144
|
}
|
|
2980
3145
|
}
|
|
2981
3146
|
`,
|
|
2982
|
-
|
|
3147
|
+
"listing-nocheck": css`
|
|
2983
3148
|
${ItemTable} {
|
|
2984
|
-
grid-template-columns: var(--item) minmax(auto, max-content) minmax(
|
|
2985
|
-
|
|
2986
|
-
|
|
2987
|
-
|
|
3149
|
+
grid-template-columns: var(--item) minmax(auto, max-content) minmax(
|
|
3150
|
+
88px,
|
|
3151
|
+
auto
|
|
3152
|
+
);
|
|
3153
|
+
&[role="rowheader"] > div[role="group"],
|
|
3154
|
+
&[role="row"] > div[role="cellgroup"] > div[role="rowgroup"],
|
|
3155
|
+
._refCollapse > div:not(._refCollapseContainer),
|
|
2988
3156
|
._refCollapseContainer > div {
|
|
2989
|
-
grid-template-columns:
|
|
3157
|
+
grid-template-columns:
|
|
3158
|
+
var(--variant) var(--sku) var(--sku) minmax(95px, 115px)
|
|
3159
|
+
var(--price) var(--status-small);
|
|
2990
3160
|
}
|
|
2991
3161
|
}
|
|
2992
3162
|
`,
|
|
@@ -3006,68 +3176,79 @@ const listTableStyles = {
|
|
|
3006
3176
|
margin: 0;
|
|
3007
3177
|
padding: 0;
|
|
3008
3178
|
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),
|
|
3179
|
+
&[role="rowheader"] > div[role="group"],
|
|
3180
|
+
&[role="row"] > div[role="group"],
|
|
3181
|
+
&[role="row"] > div[role="cellgroup"] > div[role="rowgroup"],
|
|
3182
|
+
&[role="row"] > div[role="cellgroup"],
|
|
3183
|
+
._refCollapse > div:not(._refCollapseContainer),
|
|
3014
3184
|
._refCollapseContainer > div {
|
|
3015
3185
|
display: flex;
|
|
3016
3186
|
flex: 2;
|
|
3017
3187
|
grid-gap: 0;
|
|
3018
3188
|
}
|
|
3019
|
-
&[role=row] > div[role=cellgroup] {
|
|
3189
|
+
&[role="row"] > div[role="cellgroup"] {
|
|
3020
3190
|
flex-direction: column;
|
|
3021
3191
|
}
|
|
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
|
-
|
|
3192
|
+
&[role="rowheader"] > div[role="columnheader"],
|
|
3193
|
+
&[role="rowheader"] > div[role="group"] > div[role="cell"],
|
|
3194
|
+
&[role="row"] > div[role="cell"],
|
|
3195
|
+
&[role="row"]
|
|
3196
|
+
> div[role="cellgroup"]
|
|
3197
|
+
> div[role="rowgroup"]
|
|
3198
|
+
> div[role="cell"],
|
|
3199
|
+
._refCollapse > div:not(._refCollapseContainer) > div[role="cell"],
|
|
3200
|
+
._refCollapseContainer > div > div[role="cell"] {
|
|
3028
3201
|
align-self: stretch;
|
|
3029
3202
|
width: 100%;
|
|
3030
3203
|
}
|
|
3031
|
-
&[role=rowheader] > div[role=columnheader],
|
|
3032
|
-
&[role=rowheader] > div[role=group] > div[role=cell] {
|
|
3204
|
+
&[role="rowheader"] > div[role="columnheader"],
|
|
3205
|
+
&[role="rowheader"] > div[role="group"] > div[role="cell"] {
|
|
3033
3206
|
padding-top: 1em;
|
|
3034
3207
|
padding-bottom: 1em;
|
|
3035
3208
|
border-bottom: 1px solid var(--ter-clr-ln);
|
|
3036
3209
|
}
|
|
3037
|
-
&[role=row] > div[role=cell],
|
|
3038
|
-
&[role=row]
|
|
3039
|
-
|
|
3040
|
-
|
|
3210
|
+
&[role="row"] > div[role="cell"],
|
|
3211
|
+
&[role="row"]
|
|
3212
|
+
> div[role="cellgroup"]
|
|
3213
|
+
> div[role="rowgroup"]
|
|
3214
|
+
> div[role="cell"],
|
|
3215
|
+
._refCollapse > div:not(._refCollapseContainer) > div[role="cell"],
|
|
3216
|
+
._refCollapseContainer > div > div[role="cell"] {
|
|
3041
3217
|
padding-top: 1.25em;
|
|
3042
3218
|
padding-bottom: 1.25em;
|
|
3043
3219
|
}
|
|
3044
|
-
&[role=rowheader],
|
|
3220
|
+
&[role="rowheader"],
|
|
3221
|
+
&[role="row"] {
|
|
3045
3222
|
padding: 0;
|
|
3046
3223
|
margin: 0;
|
|
3047
3224
|
> div {
|
|
3048
3225
|
padding-right: 12px;
|
|
3049
3226
|
&:first-child {
|
|
3050
3227
|
padding-left: 0;
|
|
3051
|
-
}
|
|
3228
|
+
}
|
|
3052
3229
|
&:last-child {
|
|
3053
3230
|
padding-right: 0;
|
|
3054
3231
|
}
|
|
3055
3232
|
}
|
|
3056
3233
|
}
|
|
3057
|
-
&[role=rowheader] > div[role=group] > div[role=cell],
|
|
3234
|
+
&[role="rowheader"] > div[role="group"] > div[role="cell"],
|
|
3235
|
+
&[role="row"]
|
|
3236
|
+
> div[role="cellgroup"]
|
|
3237
|
+
> div[role="rowgroup"]
|
|
3238
|
+
> div[role="cell"] {
|
|
3058
3239
|
padding-right: 12px;
|
|
3059
3240
|
&:last-child {
|
|
3060
|
-
|
|
3061
3241
|
}
|
|
3062
3242
|
}
|
|
3063
|
-
&[role=rowheader] {
|
|
3243
|
+
&[role="rowheader"] {
|
|
3064
3244
|
border: none;
|
|
3065
3245
|
}
|
|
3066
|
-
&[role=row] > div[role=cellgroup] > div[role=rowgroup],
|
|
3067
|
-
._refCollapse > div,
|
|
3246
|
+
&[role="row"] > div[role="cellgroup"] > div[role="rowgroup"],
|
|
3247
|
+
._refCollapse > div,
|
|
3248
|
+
._refCollapseContainer > div {
|
|
3068
3249
|
padding-bottom: 0;
|
|
3069
3250
|
padding-top: 0;
|
|
3070
|
-
&:nth-child(n+2) {
|
|
3251
|
+
&:nth-child(n + 2) {
|
|
3071
3252
|
padding-top: 0;
|
|
3072
3253
|
}
|
|
3073
3254
|
&:last-child {
|
|
@@ -3078,11 +3259,12 @@ const listTableStyles = {
|
|
|
3078
3259
|
margin-bottom: 0;
|
|
3079
3260
|
}
|
|
3080
3261
|
@media only screen and (min-width: 1024px) {
|
|
3081
|
-
&[role=rowheader],
|
|
3262
|
+
&[role="rowheader"],
|
|
3263
|
+
&[role="row"] {
|
|
3082
3264
|
> div {
|
|
3083
3265
|
&:first-child {
|
|
3084
3266
|
padding-left: 9px;
|
|
3085
|
-
}
|
|
3267
|
+
}
|
|
3086
3268
|
&:last-child {
|
|
3087
3269
|
padding-right: 9px;
|
|
3088
3270
|
}
|
|
@@ -3183,85 +3365,143 @@ const listTableStyles = {
|
|
|
3183
3365
|
`,
|
|
3184
3366
|
picklist: css`
|
|
3185
3367
|
${ItemTable} {
|
|
3186
|
-
grid-template-columns:
|
|
3368
|
+
grid-template-columns:
|
|
3369
|
+
var(--checkbox) var(--time) var(--id) var(--status)
|
|
3370
|
+
var(--person) var(--warehouse) var(--ref) var(--time) minmax(
|
|
3371
|
+
185px,
|
|
3372
|
+
auto
|
|
3373
|
+
);
|
|
3187
3374
|
}
|
|
3188
3375
|
`,
|
|
3189
3376
|
package: css`
|
|
3190
3377
|
${ItemTable} {
|
|
3191
|
-
grid-template-columns:
|
|
3378
|
+
grid-template-columns:
|
|
3379
|
+
var(--checkbox) var(--time) var(--id) var(--status)
|
|
3380
|
+
var(--person) var(--warehouse) var(--person) var(--ref) var(--time)
|
|
3381
|
+
minmax(110px, auto);
|
|
3192
3382
|
}
|
|
3193
3383
|
`,
|
|
3194
3384
|
shipment: css`
|
|
3195
3385
|
${ItemTable} {
|
|
3196
|
-
grid-template-columns:
|
|
3386
|
+
grid-template-columns:
|
|
3387
|
+
var(--checkbox) var(--time) var(--id-big) var(--status)
|
|
3388
|
+
minmax(80px, 160px) minmax(80px, 160px) minmax(95px, 160px) var(--ref)
|
|
3389
|
+
minmax(140px, auto);
|
|
3197
3390
|
}
|
|
3198
3391
|
`,
|
|
3199
3392
|
invoice: css`
|
|
3200
3393
|
${ItemTable} {
|
|
3201
|
-
grid-template-columns:
|
|
3394
|
+
grid-template-columns:
|
|
3395
|
+
var(--checkbox) var(--id-big) var(--status-small)
|
|
3396
|
+
var(--store) var(--price) var(--price) var(--ref) var(--person) var(
|
|
3397
|
+
--time
|
|
3398
|
+
)
|
|
3399
|
+
minmax(180px, auto);
|
|
3202
3400
|
@media only screen and (max-width: 1279px) {
|
|
3203
3401
|
width: unset;
|
|
3204
3402
|
}
|
|
3205
3403
|
}
|
|
3206
3404
|
`,
|
|
3207
|
-
|
|
3405
|
+
"payment-receive": css`
|
|
3208
3406
|
${ItemTable} {
|
|
3209
|
-
grid-template-columns:
|
|
3407
|
+
grid-template-columns:
|
|
3408
|
+
var(--time) 155px var(--person) var(--qty) var(--price)
|
|
3409
|
+
minmax(110px, auto);
|
|
3210
3410
|
}
|
|
3211
3411
|
`,
|
|
3212
|
-
|
|
3412
|
+
"sales-return": css`
|
|
3213
3413
|
${ItemTable} {
|
|
3214
|
-
grid-template-columns:
|
|
3414
|
+
grid-template-columns:
|
|
3415
|
+
var(--id-big) var(--status) var(--warehouse) var(--person)
|
|
3416
|
+
var(--person) var(--ref-big) var(--time) minmax(120px, auto);
|
|
3215
3417
|
}
|
|
3216
3418
|
`,
|
|
3217
3419
|
activity: css`
|
|
3218
3420
|
${ItemTable} {
|
|
3219
|
-
grid-template-columns:
|
|
3421
|
+
grid-template-columns:
|
|
3422
|
+
var(--time) var(--id-big) var(--item) var(--status)
|
|
3423
|
+
var(--email) var(--status) var(--status) minmax(110px, auto);
|
|
3220
3424
|
}
|
|
3221
3425
|
`,
|
|
3222
3426
|
putaway: css`
|
|
3223
3427
|
${ItemTable} {
|
|
3224
|
-
grid-template-columns:
|
|
3428
|
+
grid-template-columns:
|
|
3429
|
+
var(--id-pd20) var(--status-big) var(--warehouse)
|
|
3430
|
+
var(--ref) var(--person) var(--time) minmax(60px, auto);
|
|
3225
3431
|
}
|
|
3226
3432
|
`,
|
|
3227
3433
|
inbound: css`
|
|
3228
3434
|
${ItemTable} {
|
|
3229
|
-
grid-template-columns:
|
|
3435
|
+
grid-template-columns:
|
|
3436
|
+
var(--id-pd20) var(--status-big) var(--warehouse)
|
|
3437
|
+
var(--ref) minmax(140px, 160px) var(--person) var(--time) minmax(
|
|
3438
|
+
170px,
|
|
3439
|
+
auto
|
|
3440
|
+
);
|
|
3230
3441
|
}
|
|
3231
3442
|
`,
|
|
3232
3443
|
lowstock: css`
|
|
3233
3444
|
${ItemTable} {
|
|
3234
|
-
grid-template-columns:
|
|
3445
|
+
grid-template-columns:
|
|
3446
|
+
var(--checkbox) var(--item) var(--variant) var(--sku)
|
|
3447
|
+
var(--warehouse) var(--qty-big) var(--statusnow) var(--time) minmax(
|
|
3448
|
+
60px,
|
|
3449
|
+
auto
|
|
3450
|
+
);
|
|
3235
3451
|
}
|
|
3236
3452
|
`,
|
|
3237
3453
|
price: css`
|
|
3238
3454
|
${ItemTable} {
|
|
3239
|
-
grid-template-columns:
|
|
3455
|
+
grid-template-columns:
|
|
3456
|
+
var(--time) var(--id-big) var(--status) var(--qty)
|
|
3457
|
+
var(--email) var(--status) minmax(60px, auto);
|
|
3240
3458
|
}
|
|
3241
3459
|
`,
|
|
3242
|
-
|
|
3460
|
+
"stock-adjustment": css`
|
|
3243
3461
|
${ItemTable} {
|
|
3244
|
-
grid-template-columns:
|
|
3462
|
+
grid-template-columns:
|
|
3463
|
+
var(--id-pd20) var(--status-big) var(--warehouse)
|
|
3464
|
+
var(--ref) minmax(140px, 150px) var(--person) var(--time) minmax(
|
|
3465
|
+
160px,
|
|
3466
|
+
auto
|
|
3467
|
+
);
|
|
3245
3468
|
}
|
|
3246
3469
|
`,
|
|
3247
|
-
|
|
3470
|
+
"stock-outbound": css`
|
|
3248
3471
|
${ItemTable} {
|
|
3249
|
-
grid-template-columns:
|
|
3472
|
+
grid-template-columns:
|
|
3473
|
+
var(--id-pd20) var(--status-big) var(--warehouse)
|
|
3474
|
+
var(--ref) minmax(150px, 160px) var(--person) var(--time) minmax(
|
|
3475
|
+
160px,
|
|
3476
|
+
auto
|
|
3477
|
+
);
|
|
3250
3478
|
}
|
|
3251
3479
|
`,
|
|
3252
|
-
|
|
3480
|
+
"stock-transfer": css`
|
|
3253
3481
|
${ItemTable} {
|
|
3254
|
-
grid-template-columns:
|
|
3482
|
+
grid-template-columns:
|
|
3483
|
+
var(--id) var(--status-big) var(--warehouse) var(--warehouse)
|
|
3484
|
+
minmax(90px, 100px) var(--person) var(--time) minmax(160px, auto);
|
|
3255
3485
|
}
|
|
3256
3486
|
`,
|
|
3257
3487
|
promotion: css`
|
|
3258
3488
|
${ItemTable} {
|
|
3259
|
-
grid-template-columns:
|
|
3489
|
+
grid-template-columns:
|
|
3490
|
+
var(--store) var(--id-big) var(--ref-big) minmax(100px, 160px)
|
|
3491
|
+
var(--status-small) var(--time) var(--time) minmax(42px, 88px) var(
|
|
3492
|
+
--time
|
|
3493
|
+
)
|
|
3494
|
+
minmax(62px, auto);
|
|
3260
3495
|
}
|
|
3261
3496
|
`,
|
|
3262
|
-
|
|
3497
|
+
"stock-history": css`
|
|
3263
3498
|
${ItemTable} {
|
|
3264
|
-
grid-template-columns:
|
|
3499
|
+
grid-template-columns:
|
|
3500
|
+
minmax(120px, 360px) var(--sku) var(--warehouse)
|
|
3501
|
+
minmax(85px, 120px) minmax(105px, 190px) var(--qty-small) var(
|
|
3502
|
+
--qty-small
|
|
3503
|
+
)
|
|
3504
|
+
minmax(68px, 100px) var(--time) minmax(75px, 88px);
|
|
3265
3505
|
> *:last-child {
|
|
3266
3506
|
display: unset;
|
|
3267
3507
|
justify-content: unset;
|
|
@@ -3271,7 +3511,7 @@ const listTableStyles = {
|
|
|
3271
3511
|
}
|
|
3272
3512
|
}
|
|
3273
3513
|
`,
|
|
3274
|
-
|
|
3514
|
+
"price-history": css`
|
|
3275
3515
|
${ItemTable} {
|
|
3276
3516
|
@media only screen and (max-width: 1279px) {
|
|
3277
3517
|
width: unset;
|
|
@@ -3280,7 +3520,10 @@ const listTableStyles = {
|
|
|
3280
3520
|
display: unset;
|
|
3281
3521
|
justify-content: unset;
|
|
3282
3522
|
}
|
|
3283
|
-
grid-template-columns:
|
|
3523
|
+
grid-template-columns:
|
|
3524
|
+
minmax(110px, 146px) minmax(120px, 360px) var(--sku)
|
|
3525
|
+
var(--store) minmax(75px, 120px) minmax(85px, 120px) minmax(75px, 120px)
|
|
3526
|
+
minmax(80px, 120px) var(--time) var(--status) minmax(75px, 88px);
|
|
3284
3527
|
}
|
|
3285
3528
|
`,
|
|
3286
3529
|
turnover: css`
|
|
@@ -3292,10 +3535,12 @@ const listTableStyles = {
|
|
|
3292
3535
|
display: unset;
|
|
3293
3536
|
justify-content: unset;
|
|
3294
3537
|
}
|
|
3295
|
-
grid-template-columns:
|
|
3538
|
+
grid-template-columns:
|
|
3539
|
+
minmax(120px, 360px) var(--sku) var(--warehouse)
|
|
3540
|
+
repeat(4, var(--qty)) minmax(75px, 88px);
|
|
3296
3541
|
}
|
|
3297
3542
|
`,
|
|
3298
|
-
|
|
3543
|
+
"days-outofstock": css`
|
|
3299
3544
|
${ItemTable} {
|
|
3300
3545
|
@media only screen and (max-width: 1279px) {
|
|
3301
3546
|
width: unset;
|
|
@@ -3304,63 +3549,84 @@ const listTableStyles = {
|
|
|
3304
3549
|
display: unset;
|
|
3305
3550
|
justify-content: unset;
|
|
3306
3551
|
}
|
|
3307
|
-
grid-template-columns:
|
|
3552
|
+
grid-template-columns:
|
|
3553
|
+
minmax(120px, 360px) var(--sku) var(--warehouse)
|
|
3554
|
+
var(--qty-big) var(--qty) var(--qty-big) var(--time) minmax(75px, 88px);
|
|
3308
3555
|
}
|
|
3309
3556
|
`,
|
|
3310
3557
|
warehouses: css`
|
|
3311
3558
|
${ItemTable} {
|
|
3312
|
-
grid-template-columns:
|
|
3559
|
+
grid-template-columns:
|
|
3560
|
+
var(--warehouse) var(--status) var(--id-big) var(--qty-big)
|
|
3561
|
+
var(--time) minmax(110px, auto);
|
|
3313
3562
|
}
|
|
3314
3563
|
`,
|
|
3315
3564
|
archived: css`
|
|
3316
3565
|
${ItemTable} {
|
|
3317
|
-
grid-template-columns: var(--time-pd20) minmax(auto, max-content) minmax(
|
|
3318
|
-
|
|
3319
|
-
|
|
3320
|
-
|
|
3566
|
+
grid-template-columns: var(--time-pd20) minmax(auto, max-content) minmax(
|
|
3567
|
+
88px,
|
|
3568
|
+
auto
|
|
3569
|
+
);
|
|
3570
|
+
&[role="rowheader"] > div[role="group"],
|
|
3571
|
+
&[role="row"] > div[role="cellgroup"] > div[role="rowgroup"],
|
|
3572
|
+
._refCollapse > div:not(._refCollapseContainer),
|
|
3321
3573
|
._refCollapseContainer > div {
|
|
3322
3574
|
grid-template-columns: var(--sku) var(--item);
|
|
3323
3575
|
}
|
|
3324
3576
|
}
|
|
3325
3577
|
`,
|
|
3326
|
-
|
|
3578
|
+
"pos-order": css`
|
|
3327
3579
|
${ItemTable} {
|
|
3328
3580
|
@media only screen and (max-width: 1279px) {
|
|
3329
3581
|
width: unset;
|
|
3330
3582
|
}
|
|
3331
|
-
grid-template-columns:
|
|
3583
|
+
grid-template-columns:
|
|
3584
|
+
var(--id-pd20) minmax(80px, 120px) var(--time) var(--person)
|
|
3585
|
+
var(--qty) var(--price) var(--status) minmax(180px, auto);
|
|
3332
3586
|
}
|
|
3333
3587
|
`,
|
|
3334
3588
|
order: css`
|
|
3335
3589
|
${ItemTable} {
|
|
3336
|
-
grid-template-columns: var(--checkbox) 118px 90px minmax(
|
|
3337
|
-
|
|
3338
|
-
|
|
3590
|
+
grid-template-columns: var(--checkbox) 118px 90px minmax(
|
|
3591
|
+
auto,
|
|
3592
|
+
max-content
|
|
3593
|
+
);
|
|
3594
|
+
input[name="checkbox-list"] {
|
|
3595
|
+
& + span {
|
|
3339
3596
|
top: 8px;
|
|
3340
3597
|
}
|
|
3341
3598
|
}
|
|
3342
|
-
&[role=rowheader] > div[role=group] {
|
|
3343
|
-
grid-template-columns: var(--order) 40px 80px 80px 88px minmax(
|
|
3599
|
+
&[role="rowheader"] > div[role="group"] {
|
|
3600
|
+
grid-template-columns: var(--order) 40px 80px 80px 88px minmax(
|
|
3601
|
+
145px,
|
|
3602
|
+
auto
|
|
3603
|
+
);
|
|
3344
3604
|
}
|
|
3345
|
-
._refCollapse > div:not(._refCollapseContainer),
|
|
3605
|
+
._refCollapse > div:not(._refCollapseContainer),
|
|
3346
3606
|
._refCollapseContainer > div {
|
|
3347
3607
|
grid-template-columns: var(--order) 40px 80px 80px;
|
|
3348
3608
|
}
|
|
3349
|
-
&[role=row] > div[role=cellgroup] > div[role=rowgroup],
|
|
3350
|
-
._refCollapse > div,
|
|
3609
|
+
&[role="row"] > div[role="cellgroup"] > div[role="rowgroup"],
|
|
3610
|
+
._refCollapse > div,
|
|
3351
3611
|
._refCollapseContainer > div {
|
|
3352
|
-
&:nth-child(n+2) {
|
|
3612
|
+
&:nth-child(n + 2) {
|
|
3353
3613
|
border-top: none;
|
|
3354
3614
|
}
|
|
3355
3615
|
}
|
|
3356
3616
|
}
|
|
3357
3617
|
@media only screen and (min-width: 1280px) {
|
|
3358
3618
|
${ItemTable} {
|
|
3359
|
-
grid-template-columns: var(--checkbox) 118px 118px minmax(
|
|
3360
|
-
|
|
3361
|
-
|
|
3362
|
-
|
|
3363
|
-
|
|
3619
|
+
grid-template-columns: var(--checkbox) 118px 118px minmax(
|
|
3620
|
+
auto,
|
|
3621
|
+
max-content
|
|
3622
|
+
);
|
|
3623
|
+
&[role="rowheader"] > div[role="group"] {
|
|
3624
|
+
grid-template-columns: var(--order) 40px 80px 80px 107px minmax(
|
|
3625
|
+
145px,
|
|
3626
|
+
auto
|
|
3627
|
+
);
|
|
3628
|
+
}
|
|
3629
|
+
._refCollapse > div:not(._refCollapseContainer),
|
|
3364
3630
|
._refCollapseContainer > div {
|
|
3365
3631
|
grid-template-columns: var(--order) 40px 80px 80px;
|
|
3366
3632
|
}
|
|
@@ -3368,11 +3634,17 @@ const listTableStyles = {
|
|
|
3368
3634
|
}
|
|
3369
3635
|
@media only screen and (min-width: 1366px) {
|
|
3370
3636
|
${ItemTable} {
|
|
3371
|
-
grid-template-columns: var(--checkbox) 120px 118px minmax(
|
|
3372
|
-
|
|
3373
|
-
|
|
3374
|
-
|
|
3375
|
-
|
|
3637
|
+
grid-template-columns: var(--checkbox) 120px 118px minmax(
|
|
3638
|
+
auto,
|
|
3639
|
+
max-content
|
|
3640
|
+
);
|
|
3641
|
+
&[role="rowheader"] > div[role="group"] {
|
|
3642
|
+
grid-template-columns: var(--order) 40px 90px 80px 130px minmax(
|
|
3643
|
+
150px,
|
|
3644
|
+
auto
|
|
3645
|
+
);
|
|
3646
|
+
}
|
|
3647
|
+
._refCollapse > div:not(._refCollapseContainer),
|
|
3376
3648
|
._refCollapseContainer > div {
|
|
3377
3649
|
grid-template-columns: var(--order) 40px 90px 80px;
|
|
3378
3650
|
}
|
|
@@ -3380,11 +3652,16 @@ const listTableStyles = {
|
|
|
3380
3652
|
}
|
|
3381
3653
|
@media only screen and (min-width: 1800px) {
|
|
3382
3654
|
${ItemTable} {
|
|
3383
|
-
grid-template-columns:
|
|
3384
|
-
|
|
3385
|
-
|
|
3386
|
-
|
|
3387
|
-
|
|
3655
|
+
grid-template-columns:
|
|
3656
|
+
var(--checkbox) minmax(125px, 170px) minmax(85px, 145px)
|
|
3657
|
+
minmax(auto, max-content);
|
|
3658
|
+
&[role="rowheader"] > div[role="group"] {
|
|
3659
|
+
grid-template-columns: var(--order) 50px 110px 130px 130px minmax(
|
|
3660
|
+
50px,
|
|
3661
|
+
2000px
|
|
3662
|
+
);
|
|
3663
|
+
}
|
|
3664
|
+
._refCollapse > div:not(._refCollapseContainer),
|
|
3388
3665
|
._refCollapseContainer > div {
|
|
3389
3666
|
grid-template-columns: var(--order) 50px 110px 130px;
|
|
3390
3667
|
}
|
|
@@ -3392,30 +3669,36 @@ const listTableStyles = {
|
|
|
3392
3669
|
}
|
|
3393
3670
|
@media only screen and (min-width: 1920px) {
|
|
3394
3671
|
${ItemTable} {
|
|
3395
|
-
&[role=rowheader] > div[role=group] {
|
|
3396
|
-
grid-template-columns: var(--order) 50px 110px 145px 130px minmax(
|
|
3672
|
+
&[role="rowheader"] > div[role="group"] {
|
|
3673
|
+
grid-template-columns: var(--order) 50px 110px 145px 130px minmax(
|
|
3674
|
+
50px,
|
|
3675
|
+
2000px
|
|
3676
|
+
);
|
|
3397
3677
|
}
|
|
3398
|
-
._refCollapse > div:not(._refCollapseContainer),
|
|
3678
|
+
._refCollapse > div:not(._refCollapseContainer),
|
|
3399
3679
|
._refCollapseContainer > div {
|
|
3400
3680
|
grid-template-columns: var(--order) 50px 110px 145px;
|
|
3401
3681
|
}
|
|
3402
3682
|
}
|
|
3403
3683
|
}
|
|
3404
3684
|
`,
|
|
3405
|
-
|
|
3685
|
+
"order-nocheck": css`
|
|
3406
3686
|
${ItemTable} {
|
|
3407
3687
|
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(
|
|
3688
|
+
&[role="rowheader"] > div[role="group"] {
|
|
3689
|
+
grid-template-columns: var(--order) 40px 80px 80px 88px minmax(
|
|
3690
|
+
145px,
|
|
3691
|
+
auto
|
|
3692
|
+
);
|
|
3410
3693
|
}
|
|
3411
|
-
._refCollapse > div:not(._refCollapseContainer),
|
|
3694
|
+
._refCollapse > div:not(._refCollapseContainer),
|
|
3412
3695
|
._refCollapseContainer > div {
|
|
3413
3696
|
grid-template-columns: var(--order) 40px 80px 80px;
|
|
3414
3697
|
}
|
|
3415
|
-
&[role=row] > div[role=cellgroup] > div[role=rowgroup],
|
|
3416
|
-
._refCollapse > div,
|
|
3698
|
+
&[role="row"] > div[role="cellgroup"] > div[role="rowgroup"],
|
|
3699
|
+
._refCollapse > div,
|
|
3417
3700
|
._refCollapseContainer > div {
|
|
3418
|
-
&:nth-child(n+2) {
|
|
3701
|
+
&:nth-child(n + 2) {
|
|
3419
3702
|
border-top: none;
|
|
3420
3703
|
}
|
|
3421
3704
|
}
|
|
@@ -3423,10 +3706,13 @@ const listTableStyles = {
|
|
|
3423
3706
|
@media only screen and (min-width: 1280px) {
|
|
3424
3707
|
${ItemTable} {
|
|
3425
3708
|
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(
|
|
3709
|
+
&[role="rowheader"] > div[role="group"] {
|
|
3710
|
+
grid-template-columns: var(--order) 40px 80px 80px 107px minmax(
|
|
3711
|
+
145px,
|
|
3712
|
+
auto
|
|
3713
|
+
);
|
|
3428
3714
|
}
|
|
3429
|
-
._refCollapse > div:not(._refCollapseContainer),
|
|
3715
|
+
._refCollapse > div:not(._refCollapseContainer),
|
|
3430
3716
|
._refCollapseContainer > div {
|
|
3431
3717
|
grid-template-columns: var(--order) 40px 80px 80px;
|
|
3432
3718
|
}
|
|
@@ -3435,10 +3721,13 @@ const listTableStyles = {
|
|
|
3435
3721
|
@media only screen and (min-width: 1366px) {
|
|
3436
3722
|
${ItemTable} {
|
|
3437
3723
|
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(
|
|
3724
|
+
&[role="rowheader"] > div[role="group"] {
|
|
3725
|
+
grid-template-columns: var(--order) 40px 90px 80px 130px minmax(
|
|
3726
|
+
150px,
|
|
3727
|
+
auto
|
|
3728
|
+
);
|
|
3440
3729
|
}
|
|
3441
|
-
._refCollapse > div:not(._refCollapseContainer),
|
|
3730
|
+
._refCollapse > div:not(._refCollapseContainer),
|
|
3442
3731
|
._refCollapseContainer > div {
|
|
3443
3732
|
grid-template-columns: var(--order) 40px 90px 80px;
|
|
3444
3733
|
}
|
|
@@ -3446,11 +3735,17 @@ const listTableStyles = {
|
|
|
3446
3735
|
}
|
|
3447
3736
|
@media only screen and (min-width: 1800px) {
|
|
3448
3737
|
${ItemTable} {
|
|
3449
|
-
grid-template-columns: minmax(125px, 170px) minmax(85px, 145px) minmax(
|
|
3450
|
-
|
|
3451
|
-
|
|
3452
|
-
|
|
3453
|
-
|
|
3738
|
+
grid-template-columns: minmax(125px, 170px) minmax(85px, 145px) minmax(
|
|
3739
|
+
auto,
|
|
3740
|
+
max-content
|
|
3741
|
+
);
|
|
3742
|
+
&[role="rowheader"] > div[role="group"] {
|
|
3743
|
+
grid-template-columns: var(--order) 50px 110px 130px 130px minmax(
|
|
3744
|
+
50px,
|
|
3745
|
+
2000px
|
|
3746
|
+
);
|
|
3747
|
+
}
|
|
3748
|
+
._refCollapse > div:not(._refCollapseContainer),
|
|
3454
3749
|
._refCollapseContainer > div {
|
|
3455
3750
|
grid-template-columns: var(--order) 50px 110px 130px;
|
|
3456
3751
|
}
|
|
@@ -3458,94 +3753,108 @@ const listTableStyles = {
|
|
|
3458
3753
|
}
|
|
3459
3754
|
@media only screen and (min-width: 1920px) {
|
|
3460
3755
|
${ItemTable} {
|
|
3461
|
-
&[role=rowheader] > div[role=group] {
|
|
3462
|
-
grid-template-columns: var(--order) 50px 110px 145px 130px minmax(
|
|
3756
|
+
&[role="rowheader"] > div[role="group"] {
|
|
3757
|
+
grid-template-columns: var(--order) 50px 110px 145px 130px minmax(
|
|
3758
|
+
50px,
|
|
3759
|
+
2000px
|
|
3760
|
+
);
|
|
3463
3761
|
}
|
|
3464
|
-
._refCollapse > div:not(._refCollapseContainer),
|
|
3762
|
+
._refCollapse > div:not(._refCollapseContainer),
|
|
3465
3763
|
._refCollapseContainer > div {
|
|
3466
3764
|
grid-template-columns: var(--order) 50px 110px 145px;
|
|
3467
3765
|
}
|
|
3468
3766
|
}
|
|
3469
3767
|
}
|
|
3470
3768
|
`,
|
|
3471
|
-
|
|
3472
|
-
|
|
3473
|
-
> div {
|
|
3474
|
-
overflow: auto;
|
|
3475
|
-
}
|
|
3476
|
-
@media only screen and (min-width: 1024px) {
|
|
3769
|
+
"table-customheader": css`
|
|
3770
|
+
overflow: hidden;
|
|
3477
3771
|
> div {
|
|
3478
|
-
|
|
3772
|
+
overflow: auto;
|
|
3773
|
+
}
|
|
3774
|
+
@media only screen and (min-width: 1024px) {
|
|
3775
|
+
> div {
|
|
3776
|
+
margin: 0px 9px 0px 9px;
|
|
3777
|
+
}
|
|
3479
3778
|
}
|
|
3480
|
-
}
|
|
3481
3779
|
${ItemTable} {
|
|
3482
3780
|
width: 100%;
|
|
3483
3781
|
display: flex;
|
|
3484
3782
|
margin: 0;
|
|
3485
3783
|
padding: 0;
|
|
3486
3784
|
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),
|
|
3785
|
+
&[role="rowheader"] > div[role="group"],
|
|
3786
|
+
&[role="row"] > div[role="group"],
|
|
3787
|
+
&[role="row"] > div[role="cellgroup"] > div[role="rowgroup"],
|
|
3788
|
+
&[role="row"] > div[role="cellgroup"],
|
|
3789
|
+
._refCollapse > div:not(._refCollapseContainer),
|
|
3492
3790
|
._refCollapseContainer > div {
|
|
3493
3791
|
display: flex;
|
|
3494
3792
|
flex: 2;
|
|
3495
3793
|
grid-gap: 0;
|
|
3496
3794
|
}
|
|
3497
|
-
&[role=row] > div[role=cellgroup] {
|
|
3795
|
+
&[role="row"] > div[role="cellgroup"] {
|
|
3498
3796
|
flex-direction: column;
|
|
3499
3797
|
}
|
|
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
|
-
|
|
3798
|
+
&[role="rowheader"] > div[role="columnheader"],
|
|
3799
|
+
&[role="rowheader"] > div[role="group"] > div[role="cell"],
|
|
3800
|
+
&[role="row"] > div[role="cell"],
|
|
3801
|
+
&[role="row"]
|
|
3802
|
+
> div[role="cellgroup"]
|
|
3803
|
+
> div[role="rowgroup"]
|
|
3804
|
+
> div[role="cell"],
|
|
3805
|
+
._refCollapse > div:not(._refCollapseContainer) > div[role="cell"],
|
|
3806
|
+
._refCollapseContainer > div > div[role="cell"] {
|
|
3506
3807
|
align-self: stretch;
|
|
3507
3808
|
width: 100%;
|
|
3508
3809
|
}
|
|
3509
|
-
&[role=rowheader] > div[role=columnheader],
|
|
3510
|
-
&[role=rowheader] > div[role=group] > div[role=cell] {
|
|
3810
|
+
&[role="rowheader"] > div[role="columnheader"],
|
|
3811
|
+
&[role="rowheader"] > div[role="group"] > div[role="cell"] {
|
|
3511
3812
|
padding-top: 1em;
|
|
3512
3813
|
padding-bottom: 1em;
|
|
3513
3814
|
border-bottom: 1px solid var(--ter-clr-ln);
|
|
3514
3815
|
}
|
|
3515
|
-
&[role=row] > div[role=cell],
|
|
3516
|
-
&[role=row]
|
|
3517
|
-
|
|
3518
|
-
|
|
3816
|
+
&[role="row"] > div[role="cell"],
|
|
3817
|
+
&[role="row"]
|
|
3818
|
+
> div[role="cellgroup"]
|
|
3819
|
+
> div[role="rowgroup"]
|
|
3820
|
+
> div[role="cell"],
|
|
3821
|
+
._refCollapse > div:not(._refCollapseContainer) > div[role="cell"],
|
|
3822
|
+
._refCollapseContainer > div > div[role="cell"] {
|
|
3519
3823
|
padding-top: 1.25em;
|
|
3520
3824
|
padding-bottom: 1.25em;
|
|
3521
3825
|
}
|
|
3522
|
-
&[role=rowheader],
|
|
3826
|
+
&[role="rowheader"],
|
|
3827
|
+
&[role="row"] {
|
|
3523
3828
|
padding: 0;
|
|
3524
3829
|
margin: 0;
|
|
3525
3830
|
> div {
|
|
3526
3831
|
padding-right: 12px;
|
|
3527
3832
|
&:first-child {
|
|
3528
3833
|
padding-left: 0;
|
|
3529
|
-
}
|
|
3834
|
+
}
|
|
3530
3835
|
&:last-child {
|
|
3531
3836
|
padding-right: 0;
|
|
3532
3837
|
}
|
|
3533
3838
|
}
|
|
3534
3839
|
}
|
|
3535
|
-
&[role=rowheader] > div[role=group] > div[role=cell],
|
|
3840
|
+
&[role="rowheader"] > div[role="group"] > div[role="cell"],
|
|
3841
|
+
&[role="row"]
|
|
3842
|
+
> div[role="cellgroup"]
|
|
3843
|
+
> div[role="rowgroup"]
|
|
3844
|
+
> div[role="cell"] {
|
|
3536
3845
|
padding-right: 12px;
|
|
3537
3846
|
&:last-child {
|
|
3538
|
-
|
|
3539
3847
|
}
|
|
3540
3848
|
}
|
|
3541
|
-
&[role=rowheader] {
|
|
3849
|
+
&[role="rowheader"] {
|
|
3542
3850
|
border: none;
|
|
3543
3851
|
}
|
|
3544
|
-
&[role=row] > div[role=cellgroup] > div[role=rowgroup],
|
|
3545
|
-
._refCollapse > div,
|
|
3852
|
+
&[role="row"] > div[role="cellgroup"] > div[role="rowgroup"],
|
|
3853
|
+
._refCollapse > div,
|
|
3854
|
+
._refCollapseContainer > div {
|
|
3546
3855
|
padding-bottom: 0;
|
|
3547
3856
|
padding-top: 0;
|
|
3548
|
-
&:nth-child(n+2) {
|
|
3857
|
+
&:nth-child(n + 2) {
|
|
3549
3858
|
padding-top: 0;
|
|
3550
3859
|
}
|
|
3551
3860
|
&:last-child {
|
|
@@ -3556,11 +3865,12 @@ const listTableStyles = {
|
|
|
3556
3865
|
margin-bottom: 0;
|
|
3557
3866
|
}
|
|
3558
3867
|
@media only screen and (min-width: 1024px) {
|
|
3559
|
-
&[role=rowheader],
|
|
3868
|
+
&[role="rowheader"],
|
|
3869
|
+
&[role="row"] {
|
|
3560
3870
|
> div {
|
|
3561
3871
|
&:first-child {
|
|
3562
3872
|
padding-left: 9px;
|
|
3563
|
-
}
|
|
3873
|
+
}
|
|
3564
3874
|
&:last-child {
|
|
3565
3875
|
padding-right: 9px;
|
|
3566
3876
|
}
|
|
@@ -3573,8 +3883,8 @@ const listTableStyles = {
|
|
|
3573
3883
|
}
|
|
3574
3884
|
}
|
|
3575
3885
|
`,
|
|
3576
|
-
} as const
|
|
3577
|
-
export const ListTable = styled.main<{ $mode?: ModeListTableColumn }>`
|
|
3886
|
+
} as const;
|
|
3887
|
+
export const ListTable = styled.main<{ $mode?: ModeListTableColumn }>`
|
|
3578
3888
|
position: relative;
|
|
3579
3889
|
width: 100%;
|
|
3580
3890
|
overflow-x: auto;
|
|
@@ -3586,18 +3896,19 @@ export const ListTable = styled.main<{ $mode?: ModeListTableColumn }>`
|
|
|
3586
3896
|
display: inline-grid;
|
|
3587
3897
|
grid-gap: 12px;
|
|
3588
3898
|
align-items: start;
|
|
3589
|
-
&[role=rowheader] > div[role=group],
|
|
3590
|
-
&[role=row] > div[role=cellgroup] > div[role=rowgroup],
|
|
3591
|
-
._refCollapse > div:not(._refCollapseContainer),
|
|
3899
|
+
&[role="rowheader"] > div[role="group"],
|
|
3900
|
+
&[role="row"] > div[role="cellgroup"] > div[role="rowgroup"],
|
|
3901
|
+
._refCollapse > div:not(._refCollapseContainer),
|
|
3592
3902
|
._refCollapseContainer > div {
|
|
3593
3903
|
display: grid;
|
|
3594
3904
|
align-items: start;
|
|
3595
3905
|
grid-gap: 12px;
|
|
3596
3906
|
}
|
|
3597
|
-
&[role=rowheader],
|
|
3907
|
+
&[role="rowheader"],
|
|
3908
|
+
&:nth-child(2) {
|
|
3598
3909
|
border-top: 0;
|
|
3599
3910
|
}
|
|
3600
|
-
&[role=rowheader] {
|
|
3911
|
+
&[role="rowheader"] {
|
|
3601
3912
|
padding: 1em 0 1em 0;
|
|
3602
3913
|
border-bottom: 1px solid #e8e8ec;
|
|
3603
3914
|
color: var(--mt-clr);
|
|
@@ -3605,29 +3916,29 @@ export const ListTable = styled.main<{ $mode?: ModeListTableColumn }>`
|
|
|
3605
3916
|
cursor: pointer;
|
|
3606
3917
|
line-height: 1;
|
|
3607
3918
|
font-weight: 600;
|
|
3608
|
-
font-size: .875rem;
|
|
3919
|
+
font-size: 0.875rem;
|
|
3609
3920
|
}
|
|
3610
|
-
&[role=row] {
|
|
3921
|
+
&[role="row"] {
|
|
3611
3922
|
padding: 1.25em 0 1.25em 0;
|
|
3612
3923
|
}
|
|
3613
|
-
&[role=row] > div[role=cellgroup] > div[role=rowgroup],
|
|
3614
|
-
._refCollapse > div,
|
|
3924
|
+
&[role="row"] > div[role="cellgroup"] > div[role="rowgroup"],
|
|
3925
|
+
._refCollapse > div,
|
|
3615
3926
|
._refCollapseContainer > div {
|
|
3616
|
-
&:nth-child(n+2) {
|
|
3617
|
-
border-top: 1px solid rgba(227, 227, 227, .7);
|
|
3927
|
+
&:nth-child(n + 2) {
|
|
3928
|
+
border-top: 1px solid rgba(227, 227, 227, 0.7);
|
|
3618
3929
|
padding-top: 16px;
|
|
3619
3930
|
}
|
|
3620
3931
|
}
|
|
3621
3932
|
._refCollapseContainer {
|
|
3622
3933
|
padding-bottom: 0;
|
|
3623
3934
|
}
|
|
3624
|
-
input[name=checkbox-selectAll]
|
|
3625
|
-
& + span {
|
|
3626
|
-
top: 50%;
|
|
3935
|
+
input[name="checkbox-selectAll"] {
|
|
3936
|
+
& + span {
|
|
3937
|
+
top: 50%;
|
|
3627
3938
|
}
|
|
3628
3939
|
}
|
|
3629
|
-
input[name=checkbox-list]{
|
|
3630
|
-
& + span {
|
|
3940
|
+
input[name="checkbox-list"] {
|
|
3941
|
+
& + span {
|
|
3631
3942
|
top: 0;
|
|
3632
3943
|
}
|
|
3633
3944
|
}
|
|
@@ -3638,16 +3949,17 @@ export const ListTable = styled.main<{ $mode?: ModeListTableColumn }>`
|
|
|
3638
3949
|
}
|
|
3639
3950
|
@media only screen and (min-width: 1024px) {
|
|
3640
3951
|
${ItemTable} {
|
|
3641
|
-
&[role=rowheader],
|
|
3642
|
-
&[role=row] {
|
|
3952
|
+
&[role="rowheader"],
|
|
3953
|
+
&[role="row"] {
|
|
3643
3954
|
margin: 0 10px;
|
|
3644
|
-
padding-left: 9px;
|
|
3955
|
+
padding-left: 9px;
|
|
3645
3956
|
padding-right: 9px;
|
|
3646
3957
|
}
|
|
3647
3958
|
}
|
|
3648
3959
|
}
|
|
3649
|
-
${({ $mode }) =>
|
|
3650
|
-
|
|
3960
|
+
${({ $mode }) =>
|
|
3961
|
+
$mode && $mode in listTableStyles ? listTableStyles[$mode] : ""}
|
|
3962
|
+
`;
|
|
3651
3963
|
export const DateWrapper = styled.div`
|
|
3652
3964
|
display: grid;
|
|
3653
3965
|
grid-template-columns: 16px 125px;
|
|
@@ -3661,30 +3973,33 @@ export const DateWrapper = styled.div`
|
|
|
3661
3973
|
margin-top: 6px;
|
|
3662
3974
|
}
|
|
3663
3975
|
input {
|
|
3664
|
-
&,
|
|
3976
|
+
&,
|
|
3977
|
+
&:focus,
|
|
3978
|
+
&:active {
|
|
3665
3979
|
border: none !important;
|
|
3666
3980
|
background: transparent;
|
|
3667
3981
|
cursor: pointer;
|
|
3668
3982
|
}
|
|
3669
3983
|
}
|
|
3670
|
-
|
|
3671
|
-
export const DropdownTitle = styled.div`
|
|
3672
|
-
padding: 1em 1em .8em;
|
|
3984
|
+
`;
|
|
3985
|
+
export const DropdownTitle = styled.div`
|
|
3986
|
+
padding: 1em 1em 0.8em;
|
|
3673
3987
|
display: grid;
|
|
3674
3988
|
grid-auto-flow: column;
|
|
3675
3989
|
justify-content: space-between;
|
|
3676
3990
|
border-bottom: 1px solid var(--sec-clr-ln);
|
|
3677
|
-
i {
|
|
3678
|
-
font-style: normal;
|
|
3991
|
+
i {
|
|
3992
|
+
font-style: normal;
|
|
3679
3993
|
}
|
|
3680
|
-
|
|
3994
|
+
`;
|
|
3681
3995
|
|
|
3682
|
-
export const DropdownList = styled.ul<{ $mode?:
|
|
3996
|
+
export const DropdownList = styled.ul<{ $mode?: "no-border" }>`
|
|
3683
3997
|
${clearList}
|
|
3684
3998
|
max-height: 44vh;
|
|
3685
3999
|
overflow: auto;
|
|
3686
4000
|
> li {
|
|
3687
|
-
border-bottom: ${({ $mode }:{ $mode?:
|
|
4001
|
+
border-bottom: ${({ $mode }: { $mode?: "no-border" }) =>
|
|
4002
|
+
$mode === "no-border" ? "none" : "1px solid var(--pri-clr-ln)"};
|
|
3688
4003
|
&:last-child {
|
|
3689
4004
|
border-bottom: 0;
|
|
3690
4005
|
}
|
|
@@ -3695,11 +4010,15 @@ export const DropdownList = styled.ul<{ $mode?: 'no-border' }>`
|
|
|
3695
4010
|
@media only screen and (min-width: 1366px) {
|
|
3696
4011
|
max-height: 50vh;
|
|
3697
4012
|
}
|
|
3698
|
-
|
|
3699
|
-
export const DropdownItem = styled.li<{
|
|
4013
|
+
`;
|
|
4014
|
+
export const DropdownItem = styled.li<{
|
|
4015
|
+
$mode?: "common" | "categories";
|
|
4016
|
+
$isActive?: boolean;
|
|
4017
|
+
$isReply?: boolean;
|
|
4018
|
+
}>`
|
|
3700
4019
|
display: inline-grid;
|
|
3701
4020
|
width: 100%;
|
|
3702
|
-
grid-gap: 10px;
|
|
4021
|
+
grid-gap: 10px;
|
|
3703
4022
|
min-height: 48px;
|
|
3704
4023
|
grid-auto-flow: row;
|
|
3705
4024
|
cursor: pointer;
|
|
@@ -3708,100 +4027,112 @@ export const DropdownItem = styled.li<{ $mode?: 'common' | 'categories', $isActi
|
|
|
3708
4027
|
grid-auto-flow: column;
|
|
3709
4028
|
grid-template-columns: 100px auto;
|
|
3710
4029
|
}
|
|
3711
|
-
&[data-disabled="true"]{
|
|
4030
|
+
&[data-disabled="true"] {
|
|
3712
4031
|
color: rgb(169, 169, 169);
|
|
3713
4032
|
opacity: 0.7;
|
|
3714
4033
|
pointer-events: none;
|
|
3715
4034
|
}
|
|
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;
|
|
4035
|
+
${({ $mode }) =>
|
|
4036
|
+
!$mode &&
|
|
4037
|
+
css`
|
|
4038
|
+
padding: 8px 0.5em;
|
|
4039
|
+
&:first-child {
|
|
4040
|
+
padding-top: 4px;
|
|
4041
|
+
}
|
|
4042
|
+
&:last-child {
|
|
4043
|
+
padding-bottom: 4px;
|
|
4044
|
+
}
|
|
4045
|
+
`}
|
|
4046
|
+
${({ $mode }) =>
|
|
4047
|
+
$mode &&
|
|
4048
|
+
css`
|
|
4049
|
+
margin-bottom: 4px;
|
|
4050
|
+
color: var(--pri-clr);
|
|
4051
|
+
line-height: 20px;
|
|
4052
|
+
align-items: center;
|
|
4053
|
+
padding: 0.5rem 0.75rem;
|
|
3749
4054
|
display: block;
|
|
3750
|
-
|
|
3751
|
-
|
|
3752
|
-
|
|
3753
|
-
|
|
3754
|
-
|
|
3755
|
-
padding: .5rem 1.5rem .5rem .75rem;
|
|
3756
|
-
}
|
|
4055
|
+
min-height: auto;
|
|
4056
|
+
border-radius: var(--nav-rd);
|
|
4057
|
+
&:hover {
|
|
4058
|
+
background-color: var(--nav-clr-bg__hvr);
|
|
4059
|
+
border-radius: var(--nav-rd);
|
|
3757
4060
|
}
|
|
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
|
-
|
|
4061
|
+
&:last-child {
|
|
4062
|
+
margin-bottom: 0;
|
|
4063
|
+
}
|
|
4064
|
+
> label,
|
|
4065
|
+
> span {
|
|
4066
|
+
cursor: pointer;
|
|
4067
|
+
text-transform: capitalize;
|
|
4068
|
+
width: 100%;
|
|
4069
|
+
max-width: 218px;
|
|
4070
|
+
overflow: hidden;
|
|
4071
|
+
text-overflow: ellipsis;
|
|
4072
|
+
white-space: nowrap;
|
|
4073
|
+
display: block;
|
|
4074
|
+
}
|
|
4075
|
+
${$mode === "categories" &&
|
|
4076
|
+
css`
|
|
4077
|
+
padding: 0 !important;
|
|
4078
|
+
> label {
|
|
4079
|
+
&:last-child {
|
|
4080
|
+
padding: 0.5rem 1.5rem 0.5rem 0.75rem;
|
|
4081
|
+
}
|
|
4082
|
+
}
|
|
4083
|
+
`}
|
|
4084
|
+
`}
|
|
4085
|
+
${({ $mode }) => $mode === "categories" && css``}
|
|
4086
|
+
${({ $mode, $isReply }) =>
|
|
4087
|
+
$mode &&
|
|
4088
|
+
$isReply &&
|
|
4089
|
+
css`
|
|
4090
|
+
padding-right: 1.825rem !important;
|
|
4091
|
+
._refReplyIcon {
|
|
4092
|
+
right: 12px;
|
|
4093
|
+
top: 50%;
|
|
4094
|
+
transform: translateY(-50%);
|
|
4095
|
+
}
|
|
4096
|
+
`}
|
|
4097
|
+
${({ $mode, $isActive }) =>
|
|
4098
|
+
$mode &&
|
|
4099
|
+
$isActive &&
|
|
4100
|
+
css`
|
|
4101
|
+
background-color: var(--nav-clr-bg__hvr);
|
|
4102
|
+
padding-right: 1.75em;
|
|
4103
|
+
&,
|
|
4104
|
+
> label,
|
|
4105
|
+
> span {
|
|
4106
|
+
font-weight: 500;
|
|
4107
|
+
}
|
|
4108
|
+
&:after {
|
|
4109
|
+
content: "✔";
|
|
4110
|
+
position: absolute;
|
|
4111
|
+
top: 50%;
|
|
4112
|
+
transform: translateY(-50%);
|
|
4113
|
+
right: 7px;
|
|
4114
|
+
bottom: 0;
|
|
4115
|
+
width: 12px;
|
|
4116
|
+
height: 20px;
|
|
4117
|
+
z-index: -1;
|
|
4118
|
+
}
|
|
4119
|
+
._refReplyIcon {
|
|
4120
|
+
right: 22px;
|
|
4121
|
+
}
|
|
4122
|
+
`}
|
|
4123
|
+
`;
|
|
4124
|
+
export const DropdownAction = styled.div`
|
|
4125
|
+
padding: 0.8em 1em 1em;
|
|
3795
4126
|
display: grid;
|
|
3796
4127
|
grid-auto-flow: column;
|
|
3797
4128
|
justify-content: end;
|
|
3798
4129
|
grid-gap: 4px;
|
|
3799
4130
|
border-top: 1px solid var(--sec-clr-ln);
|
|
3800
|
-
|
|
3801
|
-
export const FilterList = styled.ul`
|
|
4131
|
+
`;
|
|
4132
|
+
export const FilterList = styled.ul`
|
|
3802
4133
|
${clearList}
|
|
3803
|
-
|
|
3804
|
-
export const FilterItem = styled.li`
|
|
4134
|
+
`;
|
|
4135
|
+
export const FilterItem = styled.li`
|
|
3805
4136
|
&._refCheckbox {
|
|
3806
4137
|
display: block;
|
|
3807
4138
|
float: left;
|
|
@@ -3809,7 +4140,8 @@ export const FilterItem = styled.li`
|
|
|
3809
4140
|
margin-bottom: 8px;
|
|
3810
4141
|
> label {
|
|
3811
4142
|
padding-left: 0 !important;
|
|
3812
|
-
input,
|
|
4143
|
+
input,
|
|
4144
|
+
span {
|
|
3813
4145
|
display: none !important;
|
|
3814
4146
|
}
|
|
3815
4147
|
aside {
|
|
@@ -3819,7 +4151,7 @@ export const FilterItem = styled.li`
|
|
|
3819
4151
|
cursor: pointer;
|
|
3820
4152
|
font-size: 13px;
|
|
3821
4153
|
}
|
|
3822
|
-
input:checked~aside {
|
|
4154
|
+
input:checked ~ aside {
|
|
3823
4155
|
border: 1px solid var(--sel-clr-ln);
|
|
3824
4156
|
outline: 1px solid var(--sel-clr-ln);
|
|
3825
4157
|
color: var(--ter-clr);
|
|
@@ -3849,18 +4181,23 @@ export const FilterItem = styled.li`
|
|
|
3849
4181
|
border-radius: var(--sec-rd);
|
|
3850
4182
|
}
|
|
3851
4183
|
}
|
|
3852
|
-
|
|
3853
|
-
export const FilterListTitle = styled.strong`
|
|
4184
|
+
`;
|
|
4185
|
+
export const FilterListTitle = styled.strong`
|
|
3854
4186
|
padding-top: 8px;
|
|
3855
4187
|
font-size: 13px;
|
|
3856
|
-
|
|
3857
|
-
export const FilterButton = styled.div`
|
|
4188
|
+
`;
|
|
4189
|
+
export const FilterButton = styled.div`
|
|
3858
4190
|
display: grid;
|
|
3859
4191
|
grid-auto-flow: column;
|
|
3860
4192
|
grid-template-columns: 1fr auto;
|
|
3861
4193
|
gap: 4px;
|
|
3862
|
-
|
|
3863
|
-
export const IconDot = styled.span<{
|
|
4194
|
+
`;
|
|
4195
|
+
export const IconDot = styled.span<{
|
|
4196
|
+
$mode?: "list" | "header" | "chat";
|
|
4197
|
+
$width?: string;
|
|
4198
|
+
$height?: string;
|
|
4199
|
+
$size?: string;
|
|
4200
|
+
}>`
|
|
3864
4201
|
display: grid;
|
|
3865
4202
|
min-width: 18px;
|
|
3866
4203
|
height: 18px;
|
|
@@ -3872,41 +4209,52 @@ export const IconDot = styled.span<{ $mode?: 'list' | 'header' | 'chat', $width?
|
|
|
3872
4209
|
text-align: center;
|
|
3873
4210
|
padding: 0px 4px;
|
|
3874
4211
|
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%);
|
|
4212
|
+
${({ $mode }) =>
|
|
4213
|
+
$mode === "chat" &&
|
|
4214
|
+
css`
|
|
4215
|
+
position: absolute;
|
|
4216
|
+
z-index: 8;
|
|
4217
|
+
left: 18px;
|
|
4218
|
+
top: 0;
|
|
4219
|
+
padding: 0.2em 0.3em;
|
|
4220
|
+
font-weight: bold;
|
|
4221
|
+
font-size: 10px;
|
|
4222
|
+
min-width: 16px;
|
|
4223
|
+
height: 16px;
|
|
3898
4224
|
`}
|
|
3899
|
-
|
|
3900
|
-
|
|
3901
|
-
|
|
3902
|
-
|
|
3903
|
-
|
|
3904
|
-
|
|
3905
|
-
|
|
3906
|
-
|
|
3907
|
-
|
|
3908
|
-
|
|
3909
|
-
`
|
|
4225
|
+
${({ $mode }) =>
|
|
4226
|
+
($mode === "list" || $mode === "header") &&
|
|
4227
|
+
css`
|
|
4228
|
+
position: absolute;
|
|
4229
|
+
top: 0;
|
|
4230
|
+
left: 0;
|
|
4231
|
+
transform: scale(1) translate(-50%, -50%);
|
|
4232
|
+
transition: transform 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
|
|
4233
|
+
transform-origin: 100% 0%;
|
|
4234
|
+
${$mode === "header" &&
|
|
4235
|
+
css`
|
|
4236
|
+
left: unset;
|
|
4237
|
+
right: 0;
|
|
4238
|
+
z-index: 99;
|
|
4239
|
+
transform: scale(1) translate(50%, -50%);
|
|
4240
|
+
`}
|
|
4241
|
+
`}
|
|
4242
|
+
${({ $width }) =>
|
|
4243
|
+
$width &&
|
|
4244
|
+
css`
|
|
4245
|
+
min-width: ${$width}px;
|
|
4246
|
+
`}
|
|
4247
|
+
${({ $height }) =>
|
|
4248
|
+
$height &&
|
|
4249
|
+
css`
|
|
4250
|
+
height: ${$height}px;
|
|
4251
|
+
`}
|
|
4252
|
+
${({ $size }) =>
|
|
4253
|
+
$size &&
|
|
4254
|
+
css`
|
|
4255
|
+
font-size: ${$size}px;
|
|
4256
|
+
`}
|
|
4257
|
+
`;
|
|
3910
4258
|
export const SortByWrapper = styled.section`
|
|
3911
4259
|
justify-self: end;
|
|
3912
4260
|
margin-top: 10px;
|
|
@@ -3917,7 +4265,7 @@ export const SortByWrapper = styled.section`
|
|
|
3917
4265
|
margin-top: 0;
|
|
3918
4266
|
padding-left: 10px;
|
|
3919
4267
|
}
|
|
3920
|
-
|
|
4268
|
+
`;
|
|
3921
4269
|
export const DetailWrapper = styled.section`
|
|
3922
4270
|
width: 100%;
|
|
3923
4271
|
padding-bottom: 16px;
|
|
@@ -3927,7 +4275,7 @@ export const DetailWrapper = styled.section`
|
|
|
3927
4275
|
@media only screen and (min-width: 1366px) {
|
|
3928
4276
|
padding-bottom: 28px;
|
|
3929
4277
|
}
|
|
3930
|
-
|
|
4278
|
+
`;
|
|
3931
4279
|
export const CardContainer = styled.section`
|
|
3932
4280
|
background: var(--ter-clr-bg);
|
|
3933
4281
|
border: 1px solid rgb(232, 232, 232);
|
|
@@ -3940,36 +4288,42 @@ export const CardContainer = styled.section`
|
|
|
3940
4288
|
@media only screen and (min-width: 1366px) {
|
|
3941
4289
|
min-height: 92px;
|
|
3942
4290
|
}
|
|
3943
|
-
|
|
4291
|
+
`;
|
|
3944
4292
|
const globalEmptyCss = css`
|
|
3945
4293
|
text-align: center;
|
|
3946
4294
|
color: var(--mt-clr);
|
|
3947
|
-
|
|
3948
|
-
export const CardWrapper = styled.div<{ $mode?:
|
|
3949
|
-
${({ $mode }) =>
|
|
3950
|
-
$
|
|
3951
|
-
|
|
4295
|
+
`;
|
|
4296
|
+
export const CardWrapper = styled.div<{ $mode?: "empty" | "empty-invoice" }>`
|
|
4297
|
+
${({ $mode }) =>
|
|
4298
|
+
($mode === "empty" || $mode === "empty-invoice") &&
|
|
4299
|
+
css`
|
|
4300
|
+
${globalEmptyCss}
|
|
4301
|
+
`}
|
|
3952
4302
|
|
|
3953
|
-
${({ $mode }) =>
|
|
3954
|
-
|
|
3955
|
-
|
|
3956
|
-
|
|
3957
|
-
|
|
3958
|
-
|
|
3959
|
-
|
|
3960
|
-
|
|
4303
|
+
${({ $mode }) =>
|
|
4304
|
+
$mode === "empty-invoice" &&
|
|
4305
|
+
css`
|
|
4306
|
+
> div {
|
|
4307
|
+
display: grid;
|
|
4308
|
+
align-content: center;
|
|
4309
|
+
grid-gap: 4px;
|
|
4310
|
+
margin: 0 16px;
|
|
4311
|
+
}
|
|
4312
|
+
`}
|
|
3961
4313
|
|
|
3962
|
-
${({ $mode }) =>
|
|
3963
|
-
|
|
3964
|
-
|
|
3965
|
-
width:
|
|
3966
|
-
|
|
3967
|
-
|
|
3968
|
-
|
|
4314
|
+
${({ $mode }) =>
|
|
4315
|
+
!$mode &&
|
|
4316
|
+
css`
|
|
4317
|
+
width: 958px;
|
|
4318
|
+
@media only screen and (min-width: 1024px) {
|
|
4319
|
+
width: unset;
|
|
4320
|
+
}
|
|
4321
|
+
`}
|
|
4322
|
+
`;
|
|
3969
4323
|
export const DetailList = styled.ul<{ $mode?: string }>`
|
|
3970
4324
|
${clearList}
|
|
3971
4325
|
${getListModFunc}
|
|
3972
|
-
|
|
4326
|
+
`;
|
|
3973
4327
|
export const DetailItemTitle = styled.article`
|
|
3974
4328
|
position: relative;
|
|
3975
4329
|
display: grid;
|
|
@@ -3977,8 +4331,8 @@ export const DetailItemTitle = styled.article`
|
|
|
3977
4331
|
padding-right: 10px;
|
|
3978
4332
|
grid-gap: 6px;
|
|
3979
4333
|
align-self: baseline;
|
|
3980
|
-
a,
|
|
3981
|
-
div,
|
|
4334
|
+
a,
|
|
4335
|
+
div,
|
|
3982
4336
|
span {
|
|
3983
4337
|
font-size: 16px;
|
|
3984
4338
|
font-weight: 600;
|
|
@@ -3991,19 +4345,19 @@ export const DetailItemTitle = styled.article`
|
|
|
3991
4345
|
overflow-wrap: break-word;
|
|
3992
4346
|
}
|
|
3993
4347
|
@media only screen and (min-width: 768px) {
|
|
3994
|
-
a,
|
|
3995
|
-
div,
|
|
4348
|
+
a,
|
|
4349
|
+
div,
|
|
3996
4350
|
span {
|
|
3997
4351
|
svg {
|
|
3998
4352
|
display: inline;
|
|
3999
4353
|
margin-left: 10px;
|
|
4000
4354
|
}
|
|
4001
4355
|
}
|
|
4002
|
-
span {
|
|
4003
|
-
font-size: 14px;
|
|
4356
|
+
span {
|
|
4357
|
+
font-size: 14px;
|
|
4004
4358
|
}
|
|
4005
4359
|
}
|
|
4006
|
-
|
|
4360
|
+
`;
|
|
4007
4361
|
export const DetailItemAction = styled.article`
|
|
4008
4362
|
display: grid;
|
|
4009
4363
|
grid-auto-flow: column;
|
|
@@ -4011,8 +4365,8 @@ export const DetailItemAction = styled.article`
|
|
|
4011
4365
|
justify-items: center;
|
|
4012
4366
|
justify-content: center;
|
|
4013
4367
|
align-self: center;
|
|
4014
|
-
|
|
4015
|
-
export const DetailItemInfo = styled.article`
|
|
4368
|
+
`;
|
|
4369
|
+
export const DetailItemInfo = styled.article`
|
|
4016
4370
|
display: grid;
|
|
4017
4371
|
grid-gap: 4px;
|
|
4018
4372
|
> span > span {
|
|
@@ -4023,7 +4377,7 @@ export const DetailItemInfo = styled.article`
|
|
|
4023
4377
|
overflow-wrap: anywhere;
|
|
4024
4378
|
line-height: 16px;
|
|
4025
4379
|
}
|
|
4026
|
-
|
|
4380
|
+
`;
|
|
4027
4381
|
export const DetailItem = styled.li`
|
|
4028
4382
|
position: relative;
|
|
4029
4383
|
display: inline-grid;
|
|
@@ -4034,36 +4388,36 @@ export const DetailItem = styled.li`
|
|
|
4034
4388
|
min-height: 70px;
|
|
4035
4389
|
&:not(:only-child) {
|
|
4036
4390
|
border-bottom: 2px solid #f5f5f5;
|
|
4037
|
-
&:last-child {
|
|
4038
|
-
border-bottom: 0;
|
|
4391
|
+
&:last-child {
|
|
4392
|
+
border-bottom: 0;
|
|
4039
4393
|
}
|
|
4040
4394
|
}
|
|
4041
4395
|
${DetailItemInfo} {
|
|
4042
4396
|
align-self: flex-start;
|
|
4043
4397
|
grid-gap: 2px;
|
|
4044
4398
|
}
|
|
4045
|
-
|
|
4399
|
+
`;
|
|
4046
4400
|
export const DetailItemWrapper = styled.article`
|
|
4047
4401
|
display: grid;
|
|
4048
4402
|
grid-auto-flow: column;
|
|
4049
4403
|
align-self: center;
|
|
4050
|
-
> article {
|
|
4051
|
-
padding: 0 5px;
|
|
4404
|
+
> article {
|
|
4405
|
+
padding: 0 5px;
|
|
4052
4406
|
}
|
|
4053
4407
|
@media only screen and (min-width: 1366px) {
|
|
4054
4408
|
grid-gap: 5px;
|
|
4055
4409
|
}
|
|
4056
|
-
|
|
4410
|
+
`;
|
|
4057
4411
|
export const DetailPanelWrapper = styled.section`
|
|
4058
4412
|
min-height: 66px;
|
|
4059
4413
|
padding-left: 10px !important;
|
|
4060
4414
|
padding-right: 9px !important;
|
|
4061
4415
|
@media only screen and (min-width: 1024px) {
|
|
4062
4416
|
> section {
|
|
4063
|
-
margin: 0 10px;
|
|
4417
|
+
margin: 0 10px;
|
|
4064
4418
|
}
|
|
4065
4419
|
}
|
|
4066
|
-
|
|
4420
|
+
`;
|
|
4067
4421
|
export const PopupBoxWrapper = styled.article`
|
|
4068
4422
|
display: grid;
|
|
4069
4423
|
padding-bottom: 1em;
|
|
@@ -4071,29 +4425,29 @@ export const PopupBoxWrapper = styled.article`
|
|
|
4071
4425
|
grid-gap: 16px;
|
|
4072
4426
|
border-bottom: 1px solid var(--pri-clr-ln);
|
|
4073
4427
|
&:last-child {
|
|
4074
|
-
padding-top: .5em;
|
|
4428
|
+
padding-top: 0.5em;
|
|
4075
4429
|
border-bottom: none;
|
|
4076
4430
|
}
|
|
4077
4431
|
> button {
|
|
4078
4432
|
height: 30px;
|
|
4079
4433
|
justify-self: left;
|
|
4080
4434
|
}
|
|
4081
|
-
|
|
4435
|
+
`;
|
|
4082
4436
|
export const PopupDownloadWrapper = styled.article`
|
|
4083
4437
|
display: grid;
|
|
4084
4438
|
grid-auto-flow: row;
|
|
4085
4439
|
grid-gap: 1.2em;
|
|
4086
4440
|
@media only screen and (min-width: 768px) {
|
|
4087
|
-
grid-template-columns: 1.25fr .75fr;
|
|
4441
|
+
grid-template-columns: 1.25fr 0.75fr;
|
|
4088
4442
|
}
|
|
4089
|
-
|
|
4443
|
+
`;
|
|
4090
4444
|
export const CreateContainer = styled.section<{ $mode?: string }>`
|
|
4091
4445
|
height: 100vh;
|
|
4092
4446
|
overflow: auto;
|
|
4093
4447
|
background-color: var(--pri-clr-bg);
|
|
4094
4448
|
${getCreateContainerModFunc}
|
|
4095
|
-
|
|
4096
|
-
export const CreateHeaderWrapper = styled.article<{ $mode?:
|
|
4449
|
+
`;
|
|
4450
|
+
export const CreateHeaderWrapper = styled.article<{ $mode?: "edit-master" }>`
|
|
4097
4451
|
display: inline-grid;
|
|
4098
4452
|
width: 100%;
|
|
4099
4453
|
padding: 26px 15px 14px;
|
|
@@ -4107,8 +4461,8 @@ export const CreateHeaderWrapper = styled.article<{ $mode?: 'edit-master' }>`
|
|
|
4107
4461
|
grid-template-columns: max-content 1fr;
|
|
4108
4462
|
grid-gap: 10px;
|
|
4109
4463
|
align-items: center;
|
|
4110
|
-
label {
|
|
4111
|
-
font-weight: 600;
|
|
4464
|
+
label {
|
|
4465
|
+
font-weight: 600;
|
|
4112
4466
|
}
|
|
4113
4467
|
}
|
|
4114
4468
|
aside {
|
|
@@ -4133,23 +4487,28 @@ export const CreateHeaderWrapper = styled.article<{ $mode?: 'edit-master' }>`
|
|
|
4133
4487
|
font-size: 30px;
|
|
4134
4488
|
}
|
|
4135
4489
|
}
|
|
4136
|
-
${({ $mode }) =>
|
|
4137
|
-
|
|
4138
|
-
|
|
4139
|
-
|
|
4140
|
-
|
|
4141
|
-
|
|
4142
|
-
|
|
4490
|
+
${({ $mode }) =>
|
|
4491
|
+
$mode === "edit-master" &&
|
|
4492
|
+
css`
|
|
4493
|
+
aside {
|
|
4494
|
+
grid-template-rows: none;
|
|
4495
|
+
}
|
|
4496
|
+
`}
|
|
4497
|
+
`;
|
|
4498
|
+
export const CreateToolWrapper = styled.article<{
|
|
4499
|
+
$mode?: string;
|
|
4500
|
+
$type?: string;
|
|
4501
|
+
}>`
|
|
4143
4502
|
padding: 20px 15px;
|
|
4144
|
-
margin: .5em 0;
|
|
4503
|
+
margin: 0.5em 0;
|
|
4145
4504
|
> section {
|
|
4146
4505
|
display: inline-grid;
|
|
4147
4506
|
width: 100%;
|
|
4148
4507
|
grid-auto-flow: row;
|
|
4149
4508
|
grid-gap: 10px 12px;
|
|
4150
|
-
&:first-child {
|
|
4509
|
+
&:first-child {
|
|
4151
4510
|
padding-bottom: 20px;
|
|
4152
|
-
margin-bottom: 20px;
|
|
4511
|
+
margin-bottom: 20px;
|
|
4153
4512
|
border-bottom: 1px solid var(--ter-clr-ln);
|
|
4154
4513
|
}
|
|
4155
4514
|
&:last-child {
|
|
@@ -4160,12 +4519,12 @@ export const CreateToolWrapper = styled.article<{ $mode?: string, $type?: string
|
|
|
4160
4519
|
}
|
|
4161
4520
|
@media only screen and (min-width: 768px) {
|
|
4162
4521
|
padding: 20px 30px;
|
|
4163
|
-
grid-template-columns: repeat(2,1fr);
|
|
4522
|
+
grid-template-columns: repeat(2, 1fr);
|
|
4164
4523
|
}
|
|
4165
|
-
${({ $mode, $type }:{ $mode?: string
|
|
4166
|
-
if ($mode ===
|
|
4167
|
-
return css`
|
|
4168
|
-
margin: .5em 0;
|
|
4524
|
+
${({ $mode, $type }: { $mode?: string; $type?: string }) => {
|
|
4525
|
+
if ($mode === "promotion") {
|
|
4526
|
+
return css`
|
|
4527
|
+
margin: 0.5em 0;
|
|
4169
4528
|
> section {
|
|
4170
4529
|
&:last-child {
|
|
4171
4530
|
> article:last-child {
|
|
@@ -4175,14 +4534,14 @@ export const CreateToolWrapper = styled.article<{ $mode?: string, $type?: string
|
|
|
4175
4534
|
grid-auto-flow: column;
|
|
4176
4535
|
grid-template-columns: max-content;
|
|
4177
4536
|
grid-gap: 10px;
|
|
4178
|
-
button {
|
|
4179
|
-
width: 130px;
|
|
4537
|
+
button {
|
|
4538
|
+
width: 130px;
|
|
4180
4539
|
}
|
|
4181
4540
|
}
|
|
4182
4541
|
}
|
|
4183
4542
|
}
|
|
4184
4543
|
@media only screen and (min-width: 1024px) {
|
|
4185
|
-
grid-template-columns: repeat(3,290px);
|
|
4544
|
+
grid-template-columns: repeat(3, 290px);
|
|
4186
4545
|
> article:nth-child(3) {
|
|
4187
4546
|
grid-area: 2 / 1;
|
|
4188
4547
|
}
|
|
@@ -4193,28 +4552,28 @@ export const CreateToolWrapper = styled.article<{ $mode?: string, $type?: string
|
|
|
4193
4552
|
grid-area: 2 / 3;
|
|
4194
4553
|
}
|
|
4195
4554
|
}
|
|
4196
|
-
@media only screen and (min-width: 1366px) {
|
|
4197
|
-
grid-template-columns: repeat(3,320px);
|
|
4555
|
+
@media only screen and (min-width: 1366px) {
|
|
4556
|
+
grid-template-columns: repeat(3, 320px);
|
|
4198
4557
|
}
|
|
4199
4558
|
}
|
|
4200
|
-
|
|
4201
|
-
} else if ($mode ===
|
|
4202
|
-
return css`
|
|
4559
|
+
`;
|
|
4560
|
+
} else if ($mode === "paymentreceive") {
|
|
4561
|
+
return css`
|
|
4203
4562
|
> section {
|
|
4204
4563
|
@media only screen and (min-width: 1024px) {
|
|
4205
4564
|
grid-auto-flow: column;
|
|
4206
|
-
grid-template-columns: repeat(3,290px);
|
|
4565
|
+
grid-template-columns: repeat(3, 290px);
|
|
4207
4566
|
}
|
|
4208
|
-
@media only screen and (min-width: 1366px) {
|
|
4209
|
-
grid-template-columns: repeat(3,320px);
|
|
4567
|
+
@media only screen and (min-width: 1366px) {
|
|
4568
|
+
grid-template-columns: repeat(3, 320px);
|
|
4210
4569
|
}
|
|
4211
4570
|
}
|
|
4212
|
-
|
|
4213
|
-
} else if ($mode ===
|
|
4214
|
-
return css`
|
|
4571
|
+
`;
|
|
4572
|
+
} else if ($mode === "picklist") {
|
|
4573
|
+
return css`
|
|
4215
4574
|
> section {
|
|
4216
4575
|
@media only screen and (min-width: 1024px) {
|
|
4217
|
-
grid-template-areas:
|
|
4576
|
+
grid-template-areas:
|
|
4218
4577
|
"a b e e"
|
|
4219
4578
|
"c d . .";
|
|
4220
4579
|
grid-template-columns: 290px 290px 360px;
|
|
@@ -4233,7 +4592,7 @@ export const CreateToolWrapper = styled.article<{ $mode?: string, $type?: string
|
|
|
4233
4592
|
}
|
|
4234
4593
|
&:nth-child(5) {
|
|
4235
4594
|
grid-area: e;
|
|
4236
|
-
position: relative;
|
|
4595
|
+
position: relative;
|
|
4237
4596
|
> div {
|
|
4238
4597
|
width: 360px;
|
|
4239
4598
|
position: absolute;
|
|
@@ -4241,7 +4600,7 @@ export const CreateToolWrapper = styled.article<{ $mode?: string, $type?: string
|
|
|
4241
4600
|
}
|
|
4242
4601
|
}
|
|
4243
4602
|
}
|
|
4244
|
-
@media only screen and (min-width: 1366px) {
|
|
4603
|
+
@media only screen and (min-width: 1366px) {
|
|
4245
4604
|
grid-template-columns: 320px 320px 400px;
|
|
4246
4605
|
> article {
|
|
4247
4606
|
&:nth-child(5) {
|
|
@@ -4252,38 +4611,46 @@ export const CreateToolWrapper = styled.article<{ $mode?: string, $type?: string
|
|
|
4252
4611
|
}
|
|
4253
4612
|
}
|
|
4254
4613
|
}
|
|
4255
|
-
|
|
4256
|
-
} else if ($mode ===
|
|
4257
|
-
return css`
|
|
4614
|
+
`;
|
|
4615
|
+
} else if ($mode === "stock") {
|
|
4616
|
+
return css`
|
|
4258
4617
|
> section {
|
|
4259
4618
|
@media only screen and (min-width: 1024px) {
|
|
4260
|
-
grid-template-columns: ${$type ===
|
|
4619
|
+
grid-template-columns: ${$type === "transfer"
|
|
4620
|
+
? "repeat(4,290px)"
|
|
4621
|
+
: $type === "price"
|
|
4622
|
+
? "repeat(2,290px)"
|
|
4623
|
+
: "repeat(3,290px)"};
|
|
4261
4624
|
}
|
|
4262
|
-
@media only screen and (min-width: 1366px) {
|
|
4263
|
-
grid-template-columns: ${$type ===
|
|
4625
|
+
@media only screen and (min-width: 1366px) {
|
|
4626
|
+
grid-template-columns: ${$type === "transfer"
|
|
4627
|
+
? "repeat(4,320px)"
|
|
4628
|
+
: $type === "price"
|
|
4629
|
+
? "repeat(2,320px)"
|
|
4630
|
+
: "repeat(3,320px)"};
|
|
4264
4631
|
}
|
|
4265
4632
|
}
|
|
4266
|
-
|
|
4633
|
+
`;
|
|
4267
4634
|
}
|
|
4268
|
-
}}
|
|
4269
|
-
|
|
4635
|
+
}}
|
|
4636
|
+
`;
|
|
4270
4637
|
export const SearchDropdownContainer = styled.section`
|
|
4271
4638
|
position: relative;
|
|
4272
|
-
|
|
4639
|
+
`;
|
|
4273
4640
|
export const SearchResultWrapper = styled.aside`
|
|
4274
4641
|
${dropBase}
|
|
4275
4642
|
position: absolute;
|
|
4276
4643
|
z-index: 101;
|
|
4277
4644
|
top: 34px;
|
|
4278
4645
|
width: 100%;
|
|
4279
|
-
|
|
4646
|
+
`;
|
|
4280
4647
|
export const SearchResultList = styled.section`
|
|
4281
4648
|
display: block;
|
|
4282
4649
|
overflow-y: auto;
|
|
4283
4650
|
overflow-x: hidden;
|
|
4284
4651
|
height: auto;
|
|
4285
4652
|
max-height: 360px;
|
|
4286
|
-
|
|
4653
|
+
`;
|
|
4287
4654
|
export const SearchResultItem = styled.div`
|
|
4288
4655
|
border-bottom: 1px solid var(--ter-clr-ln);
|
|
4289
4656
|
padding: 12px;
|
|
@@ -4295,12 +4662,12 @@ export const SearchResultItem = styled.div`
|
|
|
4295
4662
|
&:hover {
|
|
4296
4663
|
background-color: var(--hg-clr-bg);
|
|
4297
4664
|
}
|
|
4298
|
-
|
|
4665
|
+
`;
|
|
4299
4666
|
export const ListAddItemContainer = styled.div`
|
|
4300
4667
|
overflow: auto;
|
|
4301
4668
|
height: 400px;
|
|
4302
4669
|
font-size: 13px;
|
|
4303
|
-
|
|
4670
|
+
`;
|
|
4304
4671
|
export const SearchWrapperPopup = styled.div`
|
|
4305
4672
|
position: relative;
|
|
4306
4673
|
margin-top: 16px;
|
|
@@ -4311,29 +4678,31 @@ export const SearchWrapperPopup = styled.div`
|
|
|
4311
4678
|
}
|
|
4312
4679
|
i:first-child {
|
|
4313
4680
|
position: absolute;
|
|
4314
|
-
top: .75em;
|
|
4681
|
+
top: 0.75em;
|
|
4315
4682
|
left: 1.75em;
|
|
4316
4683
|
pointer-events: none;
|
|
4317
4684
|
z-index: 1;
|
|
4318
4685
|
}
|
|
4319
|
-
|
|
4686
|
+
`;
|
|
4320
4687
|
export const PopupAddProductContainer = styled.section`
|
|
4321
4688
|
margin-top: 1em;
|
|
4322
|
-
|
|
4323
|
-
export const PopupCard = styled.section<{ $mode?:
|
|
4689
|
+
`;
|
|
4690
|
+
export const PopupCard = styled.section<{ $mode?: "mass-payment" }>`
|
|
4324
4691
|
padding: 1em;
|
|
4325
4692
|
background-color: var(--sec-clr-bg);
|
|
4326
4693
|
margin-bottom: 1em;
|
|
4327
4694
|
@media only screen and (min-width: 768px) {
|
|
4328
4695
|
padding: 1em 120px;
|
|
4329
4696
|
}
|
|
4330
|
-
${({ $mode }) =>
|
|
4331
|
-
|
|
4332
|
-
|
|
4333
|
-
|
|
4334
|
-
|
|
4335
|
-
|
|
4336
|
-
|
|
4697
|
+
${({ $mode }) =>
|
|
4698
|
+
$mode === "mass-payment" &&
|
|
4699
|
+
css`
|
|
4700
|
+
margin: 0;
|
|
4701
|
+
@media only screen and (min-width: 768px) {
|
|
4702
|
+
padding: 1em 24px;
|
|
4703
|
+
}
|
|
4704
|
+
`}
|
|
4705
|
+
`;
|
|
4337
4706
|
export const PopupExportCardWrapper = styled.article`
|
|
4338
4707
|
display: grid;
|
|
4339
4708
|
grid-auto-flow: row;
|
|
@@ -4341,7 +4710,7 @@ export const PopupExportCardWrapper = styled.article`
|
|
|
4341
4710
|
@media only screen and (min-width: 768px) {
|
|
4342
4711
|
grid-template-columns: 1fr 1fr;
|
|
4343
4712
|
}
|
|
4344
|
-
|
|
4713
|
+
`;
|
|
4345
4714
|
export const NavMobileOverlay = styled.div`
|
|
4346
4715
|
display: none;
|
|
4347
4716
|
position: fixed;
|
|
@@ -4351,14 +4720,14 @@ export const NavMobileOverlay = styled.div`
|
|
|
4351
4720
|
top: 0px;
|
|
4352
4721
|
right: 0px;
|
|
4353
4722
|
background-color: var(--ov-clr-bg);
|
|
4354
|
-
|
|
4355
|
-
export const NavList = styled.ul`
|
|
4723
|
+
`;
|
|
4724
|
+
export const NavList = styled.ul`
|
|
4356
4725
|
${clearList}
|
|
4357
|
-
position: fixed;
|
|
4726
|
+
position: fixed;
|
|
4358
4727
|
overflow: auto;
|
|
4359
4728
|
height: calc(100vh - 48px);
|
|
4360
4729
|
width: 187px;
|
|
4361
|
-
padding: .5rem .5rem 0;
|
|
4730
|
+
padding: 0.5rem 0.5rem 0;
|
|
4362
4731
|
@media only screen and (min-width: 768px) {
|
|
4363
4732
|
width: 45%;
|
|
4364
4733
|
}
|
|
@@ -4371,24 +4740,24 @@ export const NavList = styled.ul`
|
|
|
4371
4740
|
@media only screen and (max-width: 767px) {
|
|
4372
4741
|
width: 80%;
|
|
4373
4742
|
}
|
|
4374
|
-
|
|
4375
|
-
export const NavMobileHeaderWrapper = styled.div`
|
|
4743
|
+
`;
|
|
4744
|
+
export const NavMobileHeaderWrapper = styled.div`
|
|
4376
4745
|
display: none;
|
|
4377
4746
|
grid-template-columns: auto 15px;
|
|
4378
4747
|
margin-bottom: 15px;
|
|
4379
4748
|
@media (min-width: 1280px) {
|
|
4380
4749
|
margin-bottom: 25px;
|
|
4381
4750
|
}
|
|
4382
|
-
|
|
4751
|
+
`;
|
|
4383
4752
|
export const NavContainerStyles = css`
|
|
4384
4753
|
display: none;
|
|
4385
4754
|
background-color: var(--pri-clr-bg);
|
|
4386
4755
|
@keyframes navleftslide {
|
|
4387
|
-
0% {
|
|
4388
|
-
left: -150px;
|
|
4756
|
+
0% {
|
|
4757
|
+
left: -150px;
|
|
4389
4758
|
}
|
|
4390
|
-
100% {
|
|
4391
|
-
left: 0px;
|
|
4759
|
+
100% {
|
|
4760
|
+
left: 0px;
|
|
4392
4761
|
}
|
|
4393
4762
|
}
|
|
4394
4763
|
@media only screen and (min-width: 1280px) {
|
|
@@ -4401,7 +4770,7 @@ export const NavContainerStyles = css`
|
|
|
4401
4770
|
&.mobile-shown {
|
|
4402
4771
|
top: 0px;
|
|
4403
4772
|
display: block;
|
|
4404
|
-
position: fixed;
|
|
4773
|
+
position: fixed;
|
|
4405
4774
|
z-index: 11;
|
|
4406
4775
|
${NavMobileOverlay} {
|
|
4407
4776
|
display: block;
|
|
@@ -4410,33 +4779,33 @@ export const NavContainerStyles = css`
|
|
|
4410
4779
|
display: grid;
|
|
4411
4780
|
}
|
|
4412
4781
|
${NavList} {
|
|
4413
|
-
animation: navleftslide .15s ease;
|
|
4782
|
+
animation: navleftslide 0.15s ease;
|
|
4414
4783
|
background: var(--pri-clr-bg);
|
|
4415
4784
|
height: 100%;
|
|
4416
4785
|
z-index: 102;
|
|
4417
4786
|
}
|
|
4418
4787
|
}
|
|
4419
4788
|
}
|
|
4420
|
-
|
|
4789
|
+
`;
|
|
4421
4790
|
export const NavContainer = styled.nav`
|
|
4422
4791
|
${NavContainerStyles}
|
|
4423
|
-
|
|
4424
|
-
export const NavMainItem = styled.li<{ $activated?: boolean }>`
|
|
4792
|
+
`;
|
|
4793
|
+
export const NavMainItem = styled.li<{ $activated?: boolean }>`
|
|
4425
4794
|
line-height: 1.25rem;
|
|
4426
4795
|
font-style: normal;
|
|
4427
4796
|
font-weight: 400;
|
|
4428
4797
|
color: var(--nav-clr);
|
|
4429
4798
|
position: relative;
|
|
4430
|
-
margin-bottom: .35rem;
|
|
4799
|
+
margin-bottom: 0.35rem;
|
|
4431
4800
|
._refCollapseNav {
|
|
4432
4801
|
cursor: pointer;
|
|
4433
4802
|
&.is-active {
|
|
4434
4803
|
font-weight: 500;
|
|
4435
|
-
color: rgba(28, 32, 36, 1)
|
|
4804
|
+
color: rgba(28, 32, 36, 1);
|
|
4436
4805
|
}
|
|
4437
4806
|
&::after {
|
|
4438
4807
|
position: absolute;
|
|
4439
|
-
content:
|
|
4808
|
+
content: "";
|
|
4440
4809
|
right: 10px;
|
|
4441
4810
|
top: 14px;
|
|
4442
4811
|
padding: 2px;
|
|
@@ -4447,55 +4816,64 @@ export const NavMainItem = styled.li<{ $activated?: boolean }>`
|
|
|
4447
4816
|
border-color: var(--nav-clr);
|
|
4448
4817
|
}
|
|
4449
4818
|
}
|
|
4450
|
-
${({ $activated }) =>
|
|
4451
|
-
|
|
4452
|
-
|
|
4453
|
-
|
|
4454
|
-
|
|
4455
|
-
|
|
4456
|
-
&, &:hover {
|
|
4457
|
-
color: var(--pri-clr-lnk__hvr) !important;
|
|
4819
|
+
${({ $activated }) =>
|
|
4820
|
+
$activated &&
|
|
4821
|
+
css`
|
|
4822
|
+
> div {
|
|
4823
|
+
background-color: var(--nav-clr-bg__hvr);
|
|
4824
|
+
border-radius: var(--nav-rd);
|
|
4458
4825
|
}
|
|
4459
|
-
|
|
4460
|
-
|
|
4461
|
-
|
|
4826
|
+
> div > a {
|
|
4827
|
+
&,
|
|
4828
|
+
&:hover {
|
|
4829
|
+
color: var(--pri-clr-lnk__hvr) !important;
|
|
4830
|
+
}
|
|
4831
|
+
}
|
|
4832
|
+
`}
|
|
4833
|
+
`;
|
|
4462
4834
|
export const NavChildLine = styled.hr`
|
|
4463
4835
|
border-top: 1px solid var(--sec-clr-ln);
|
|
4464
4836
|
margin: 0;
|
|
4465
4837
|
height: 0px;
|
|
4466
4838
|
border-bottom: 0;
|
|
4467
|
-
|
|
4468
|
-
export const NavChildItem = styled.div<{
|
|
4839
|
+
`;
|
|
4840
|
+
export const NavChildItem = styled.div<{
|
|
4841
|
+
$activated?: boolean;
|
|
4842
|
+
$mode?: "counter";
|
|
4843
|
+
}>`
|
|
4469
4844
|
display: grid;
|
|
4470
4845
|
position: relative;
|
|
4471
4846
|
grid-gap: 6px;
|
|
4472
4847
|
margin-left: 1.5rem;
|
|
4473
4848
|
margin-top: 0;
|
|
4474
4849
|
margin-bottom: 4px;
|
|
4475
|
-
padding-top: .25rem;
|
|
4476
|
-
padding-bottom: .25rem;
|
|
4477
|
-
padding-left: .5rem;
|
|
4478
|
-
padding-right: .5rem;
|
|
4850
|
+
padding-top: 0.25rem;
|
|
4851
|
+
padding-bottom: 0.25rem;
|
|
4852
|
+
padding-left: 0.5rem;
|
|
4853
|
+
padding-right: 0.5rem;
|
|
4479
4854
|
font-weight: 400;
|
|
4480
4855
|
align-items: center;
|
|
4481
4856
|
height: auto;
|
|
4482
4857
|
min-height: 32px;
|
|
4483
|
-
> a,
|
|
4858
|
+
> a,
|
|
4859
|
+
> span {
|
|
4484
4860
|
color: var(--nav-clr);
|
|
4485
4861
|
}
|
|
4486
4862
|
&:hover {
|
|
4487
4863
|
background-color: var(--nav-clr-bg__hvr);
|
|
4488
4864
|
border-radius: var(--nav-rd);
|
|
4489
|
-
> a,
|
|
4490
|
-
|
|
4865
|
+
> a,
|
|
4866
|
+
> span {
|
|
4867
|
+
&,
|
|
4868
|
+
&:hover {
|
|
4491
4869
|
color: var(--nav-clr);
|
|
4492
|
-
}
|
|
4870
|
+
}
|
|
4493
4871
|
}
|
|
4494
4872
|
}
|
|
4495
4873
|
.counter > span {
|
|
4496
4874
|
font-size: 11px;
|
|
4497
4875
|
padding: 2px 4px;
|
|
4498
|
-
position: absolute;
|
|
4876
|
+
position: absolute;
|
|
4499
4877
|
background-color: var(--mt-clr-bg__fc);
|
|
4500
4878
|
border-radius: var(--ter-rd);
|
|
4501
4879
|
top: 50%;
|
|
@@ -4503,55 +4881,61 @@ export const NavChildItem = styled.div<{ $activated?: boolean, $mode?: 'counter'
|
|
|
4503
4881
|
line-height: 11px;
|
|
4504
4882
|
transform: translateY(-50%);
|
|
4505
4883
|
}
|
|
4506
|
-
${({ $activated }) =>
|
|
4507
|
-
|
|
4508
|
-
|
|
4509
|
-
|
|
4510
|
-
|
|
4511
|
-
|
|
4884
|
+
${({ $activated }) =>
|
|
4885
|
+
$activated &&
|
|
4886
|
+
css`
|
|
4887
|
+
background-color: var(--nav-clr-bg__hvr);
|
|
4888
|
+
border-radius: var(--nav-rd);
|
|
4889
|
+
> a,
|
|
4890
|
+
> span {
|
|
4891
|
+
&,
|
|
4892
|
+
&:hover {
|
|
4893
|
+
color: var(--pri-clr-lnk__hvr) !important;
|
|
4894
|
+
}
|
|
4512
4895
|
}
|
|
4513
|
-
}
|
|
4514
|
-
|
|
4515
|
-
|
|
4516
|
-
|
|
4517
|
-
|
|
4518
|
-
`
|
|
4519
|
-
|
|
4896
|
+
`}
|
|
4897
|
+
${({ $mode }) =>
|
|
4898
|
+
$mode === "counter" &&
|
|
4899
|
+
css`
|
|
4900
|
+
grid-template-columns: auto 20px;
|
|
4901
|
+
`}
|
|
4902
|
+
`;
|
|
4903
|
+
export const NavMainItemWrapper = styled.div`
|
|
4520
4904
|
display: grid;
|
|
4521
4905
|
grid-template-columns: 15px auto;
|
|
4522
|
-
grid-gap: .5rem;
|
|
4906
|
+
grid-gap: 0.5rem;
|
|
4523
4907
|
align-items: center;
|
|
4524
|
-
padding-top: .375rem;
|
|
4525
|
-
padding-bottom: .375rem;
|
|
4526
|
-
padding-left: .5rem;
|
|
4527
|
-
padding-right: .5rem;
|
|
4908
|
+
padding-top: 0.375rem;
|
|
4909
|
+
padding-bottom: 0.375rem;
|
|
4910
|
+
padding-left: 0.5rem;
|
|
4911
|
+
padding-right: 0.5rem;
|
|
4528
4912
|
&:hover {
|
|
4529
4913
|
background-color: var(--nav-clr-bg__hvr);
|
|
4530
4914
|
border-radius: var(--nav-rd);
|
|
4531
4915
|
> a {
|
|
4532
|
-
&,
|
|
4916
|
+
&,
|
|
4533
4917
|
&:hover {
|
|
4534
4918
|
color: var(--nav-clr);
|
|
4535
4919
|
}
|
|
4536
4920
|
}
|
|
4537
4921
|
}
|
|
4538
|
-
|
|
4922
|
+
`;
|
|
4539
4923
|
export const TotalLabel = styled.span`
|
|
4540
4924
|
font-weight: 600;
|
|
4541
4925
|
padding-top: 6px;
|
|
4542
|
-
|
|
4926
|
+
`;
|
|
4543
4927
|
export const FilterColumnContainer = styled.section`
|
|
4544
4928
|
display: grid;
|
|
4545
4929
|
justify-content: end;
|
|
4546
4930
|
padding-left: 10px;
|
|
4547
|
-
|
|
4931
|
+
`;
|
|
4548
4932
|
export const ScrollArrowContainer = styled.section`
|
|
4549
4933
|
padding-left: 10px;
|
|
4550
4934
|
> :first-child {
|
|
4551
4935
|
margin-right: 2px;
|
|
4552
4936
|
&::after {
|
|
4553
4937
|
position: absolute;
|
|
4554
|
-
content:
|
|
4938
|
+
content: "";
|
|
4555
4939
|
right: 50%;
|
|
4556
4940
|
padding: 4px;
|
|
4557
4941
|
border-style: solid;
|
|
@@ -4562,7 +4946,7 @@ export const ScrollArrowContainer = styled.section`
|
|
|
4562
4946
|
> :last-child {
|
|
4563
4947
|
&::after {
|
|
4564
4948
|
position: absolute;
|
|
4565
|
-
content:
|
|
4949
|
+
content: "";
|
|
4566
4950
|
left: 50%;
|
|
4567
4951
|
padding: 4px;
|
|
4568
4952
|
border-style: solid;
|
|
@@ -4578,9 +4962,9 @@ export const ScrollArrowContainer = styled.section`
|
|
|
4578
4962
|
color: var(--sec-clr-lnk__hvr);
|
|
4579
4963
|
}
|
|
4580
4964
|
}
|
|
4581
|
-
|
|
4965
|
+
`;
|
|
4582
4966
|
|
|
4583
|
-
export const BulkSelectContainer = styled.div`
|
|
4967
|
+
export const BulkSelectContainer = styled.div`
|
|
4584
4968
|
position: relative;
|
|
4585
4969
|
display: grid;
|
|
4586
4970
|
grid-auto-flow: dense;
|
|
@@ -4601,7 +4985,7 @@ export const BulkSelectContainer = styled.div`
|
|
|
4601
4985
|
padding-left: 0;
|
|
4602
4986
|
margin-left: 0;
|
|
4603
4987
|
}
|
|
4604
|
-
> section,
|
|
4988
|
+
> section,
|
|
4605
4989
|
> button {
|
|
4606
4990
|
margin: -8px -6px -7px -6px;
|
|
4607
4991
|
}
|
|
@@ -4619,7 +5003,7 @@ export const BulkSelectContainer = styled.div`
|
|
|
4619
5003
|
}
|
|
4620
5004
|
}
|
|
4621
5005
|
}
|
|
4622
|
-
> section,
|
|
5006
|
+
> section,
|
|
4623
5007
|
> article {
|
|
4624
5008
|
max-height: 20px;
|
|
4625
5009
|
align-items: center;
|
|
@@ -4634,23 +5018,23 @@ export const BulkSelectContainer = styled.div`
|
|
|
4634
5018
|
}
|
|
4635
5019
|
}
|
|
4636
5020
|
}
|
|
4637
|
-
}
|
|
5021
|
+
}
|
|
4638
5022
|
@media only screen and (min-width: 768px) {
|
|
4639
5023
|
grid-auto-flow: column;
|
|
4640
5024
|
grid-gap: 20px;
|
|
4641
5025
|
._refSelectedBulk {
|
|
4642
5026
|
display: none;
|
|
4643
5027
|
}
|
|
4644
|
-
> section,
|
|
5028
|
+
> section,
|
|
4645
5029
|
> article {
|
|
4646
5030
|
height: auto;
|
|
4647
5031
|
max-height: auto;
|
|
4648
|
-
font-size: .875rem;
|
|
5032
|
+
font-size: 0.875rem;
|
|
4649
5033
|
align-items: unset;
|
|
4650
5034
|
}
|
|
4651
5035
|
> article {
|
|
4652
|
-
&:nth-child(4),
|
|
4653
|
-
&:last-child,
|
|
5036
|
+
&:nth-child(4),
|
|
5037
|
+
&:last-child,
|
|
4654
5038
|
&:nth-child(4):last-child {
|
|
4655
5039
|
width: auto;
|
|
4656
5040
|
padding-left: 3px;
|
|
@@ -4673,9 +5057,9 @@ export const BulkSelectContainer = styled.div`
|
|
|
4673
5057
|
@media only screen and (min-width: 1024px) {
|
|
4674
5058
|
grid-gap: 32px;
|
|
4675
5059
|
}
|
|
4676
|
-
|
|
5060
|
+
`;
|
|
4677
5061
|
|
|
4678
|
-
export const DotIcon = styled.span<{ $color?: string
|
|
5062
|
+
export const DotIcon = styled.span<{ $color?: string; $mode?: "activities" }>`
|
|
4679
5063
|
display: inline-block;
|
|
4680
5064
|
vertical-align: middle;
|
|
4681
5065
|
margin-right: 8px;
|
|
@@ -4684,28 +5068,32 @@ export const DotIcon = styled.span<{ $color?: string, $mode?: 'activities' }>`
|
|
|
4684
5068
|
height: 4px;
|
|
4685
5069
|
border-radius: 2px;
|
|
4686
5070
|
|
|
4687
|
-
${({ $color }) =>
|
|
4688
|
-
|
|
4689
|
-
|
|
5071
|
+
${({ $color }) =>
|
|
5072
|
+
$color &&
|
|
5073
|
+
css`
|
|
5074
|
+
background-color: ${$color};
|
|
5075
|
+
`}
|
|
4690
5076
|
|
|
4691
|
-
${({ $mode }) =>
|
|
4692
|
-
|
|
4693
|
-
|
|
4694
|
-
|
|
4695
|
-
|
|
4696
|
-
|
|
4697
|
-
|
|
4698
|
-
|
|
5077
|
+
${({ $mode }) =>
|
|
5078
|
+
$mode === "activities" &&
|
|
5079
|
+
css`
|
|
5080
|
+
margin-top: -6px;
|
|
5081
|
+
margin-left: -2.5px;
|
|
5082
|
+
width: 8px;
|
|
5083
|
+
height: 8px;
|
|
5084
|
+
border-radius: 4px;
|
|
5085
|
+
`}
|
|
5086
|
+
`;
|
|
4699
5087
|
|
|
4700
|
-
export const ItemQtyLabel = styled.span`
|
|
5088
|
+
export const ItemQtyLabel = styled.span`
|
|
4701
5089
|
text-align: right;
|
|
4702
5090
|
display: grid;
|
|
4703
|
-
|
|
5091
|
+
`;
|
|
4704
5092
|
|
|
4705
|
-
export const OptCustomLabel = styled.label<{$mode?: string}>`
|
|
5093
|
+
export const OptCustomLabel = styled.label<{ $mode?: string }>`
|
|
4706
5094
|
font-size: 10px;
|
|
4707
5095
|
text-transform: capitalize;
|
|
4708
|
-
letter-spacing: .5px;
|
|
5096
|
+
letter-spacing: 0.5px;
|
|
4709
5097
|
padding: 3px 5px;
|
|
4710
5098
|
display: block;
|
|
4711
5099
|
position: absolute;
|
|
@@ -4713,15 +5101,17 @@ export const OptCustomLabel = styled.label<{$mode?: string}>`
|
|
|
4713
5101
|
top: 50%;
|
|
4714
5102
|
transform: translateY(-50%);
|
|
4715
5103
|
z-index: 1;
|
|
4716
|
-
background-color: #
|
|
5104
|
+
background-color: #efefef;
|
|
4717
5105
|
border-radius: var(--nav-rd);
|
|
4718
5106
|
color: var(--pri-clr);
|
|
4719
|
-
${({ $mode }) =>
|
|
4720
|
-
|
|
4721
|
-
|
|
4722
|
-
|
|
5107
|
+
${({ $mode }) =>
|
|
5108
|
+
$mode === "label" &&
|
|
5109
|
+
css`
|
|
5110
|
+
transform: translateY(0);
|
|
5111
|
+
`}
|
|
5112
|
+
`;
|
|
4723
5113
|
|
|
4724
|
-
export const TableContentWrapper = styled.div<{ $mode?:
|
|
5114
|
+
export const TableContentWrapper = styled.div<{ $mode?: "package" }>`
|
|
4725
5115
|
position: relative;
|
|
4726
5116
|
width: 100%;
|
|
4727
5117
|
height: 48px;
|
|
@@ -4735,39 +5125,41 @@ export const TableContentWrapper = styled.div<{ $mode?: 'package' }>`
|
|
|
4735
5125
|
&:not(:first-child) {
|
|
4736
5126
|
border-bottom: 1px solid var(--ter-clr-ln);
|
|
4737
5127
|
}
|
|
4738
|
-
@media only screen and (min-width: 375px) {
|
|
4739
|
-
padding: 0 34px;
|
|
5128
|
+
@media only screen and (min-width: 375px) {
|
|
5129
|
+
padding: 0 34px;
|
|
4740
5130
|
}
|
|
4741
|
-
@media only screen and (min-width: 768px) {
|
|
4742
|
-
padding: 0 33px;
|
|
5131
|
+
@media only screen and (min-width: 768px) {
|
|
5132
|
+
padding: 0 33px;
|
|
4743
5133
|
}
|
|
4744
|
-
@media only screen and (min-width: 1024px) {
|
|
4745
|
-
padding: 0 39px;
|
|
5134
|
+
@media only screen and (min-width: 1024px) {
|
|
5135
|
+
padding: 0 39px;
|
|
4746
5136
|
}
|
|
4747
5137
|
@media only screen and (min-width: 1366px) {
|
|
4748
|
-
padding: 0 47px;
|
|
5138
|
+
padding: 0 47px;
|
|
4749
5139
|
}
|
|
4750
5140
|
|
|
4751
|
-
${({ $mode }) =>
|
|
4752
|
-
|
|
4753
|
-
|
|
4754
|
-
|
|
4755
|
-
|
|
4756
|
-
|
|
4757
|
-
padding: 0 7px;
|
|
4758
|
-
|
|
4759
|
-
|
|
4760
|
-
|
|
4761
|
-
|
|
4762
|
-
|
|
4763
|
-
|
|
4764
|
-
|
|
4765
|
-
|
|
4766
|
-
|
|
4767
|
-
|
|
4768
|
-
|
|
4769
|
-
|
|
4770
|
-
|
|
5141
|
+
${({ $mode }) =>
|
|
5142
|
+
$mode === "package" &&
|
|
5143
|
+
css`
|
|
5144
|
+
grid-template-columns: 16px 220px auto;
|
|
5145
|
+
grid-gap: 11px;
|
|
5146
|
+
justify-content: normal;
|
|
5147
|
+
padding: 0 7px 0 3px;
|
|
5148
|
+
@media only screen and (min-width: 375px) {
|
|
5149
|
+
padding: 0 7px;
|
|
5150
|
+
}
|
|
5151
|
+
@media only screen and (min-width: 768px) {
|
|
5152
|
+
grid-gap: 12px;
|
|
5153
|
+
padding: 0 7px 0 5px;
|
|
5154
|
+
}
|
|
5155
|
+
@media only screen and (min-width: 1024px) {
|
|
5156
|
+
padding: 0 7px 0 11px;
|
|
5157
|
+
}
|
|
5158
|
+
@media only screen and (min-width: 1366px) {
|
|
5159
|
+
padding: 0 11px 0 19px;
|
|
5160
|
+
}
|
|
5161
|
+
`}
|
|
5162
|
+
`;
|
|
4771
5163
|
|
|
4772
5164
|
export const TableBundleColumn = styled.article`
|
|
4773
5165
|
margin: 15px 0 0 42px;
|
|
@@ -4775,7 +5167,7 @@ export const TableBundleColumn = styled.article`
|
|
|
4775
5167
|
&:before {
|
|
4776
5168
|
position: absolute;
|
|
4777
5169
|
width: 1px;
|
|
4778
|
-
background-color: #
|
|
5170
|
+
background-color: #e3e3e3;
|
|
4779
5171
|
height: 100%;
|
|
4780
5172
|
content: "";
|
|
4781
5173
|
top: -6px;
|
|
@@ -4794,7 +5186,7 @@ export const TableBundleColumn = styled.article`
|
|
|
4794
5186
|
display: block !important;
|
|
4795
5187
|
}
|
|
4796
5188
|
}
|
|
4797
|
-
|
|
5189
|
+
`;
|
|
4798
5190
|
export const FilterStoreContainer = styled.div`
|
|
4799
5191
|
margin-top: 16px;
|
|
4800
5192
|
max-height: 80px;
|
|
@@ -4802,7 +5194,7 @@ export const FilterStoreContainer = styled.div`
|
|
|
4802
5194
|
> span {
|
|
4803
5195
|
font-size: 14px;
|
|
4804
5196
|
}
|
|
4805
|
-
|
|
5197
|
+
`;
|
|
4806
5198
|
export const FilterStoreList = styled.div`
|
|
4807
5199
|
margin: 6px 12px;
|
|
4808
5200
|
display: inline-grid;
|
|
@@ -4813,4 +5205,4 @@ export const FilterStoreList = styled.div`
|
|
|
4813
5205
|
label:nth-child(2) {
|
|
4814
5206
|
cursor: pointer;
|
|
4815
5207
|
}
|
|
4816
|
-
|
|
5208
|
+
`;
|