@x-plat/design-system 0.4.4 → 0.4.5
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/components/Card/index.css +1 -2
- package/dist/components/DatePicker/index.cjs +30 -5
- package/dist/components/DatePicker/index.css +43 -0
- package/dist/components/DatePicker/index.js +30 -5
- package/dist/components/PopOver/index.css +3 -0
- package/dist/components/index.cjs +166 -141
- package/dist/components/index.css +47 -2
- package/dist/components/index.js +166 -141
- package/dist/index.cjs +171 -146
- package/dist/index.css +73 -2
- package/dist/index.js +171 -146
- package/dist/layout/Header/index.css +11 -0
- package/dist/layout/Layout/index.css +15 -0
- package/dist/layout/index.css +26 -0
- package/package.json +1 -1
|
@@ -8,4 +8,15 @@
|
|
|
8
8
|
background-color: var(--xplat-white);
|
|
9
9
|
width: 100%;
|
|
10
10
|
box-sizing: border-box;
|
|
11
|
+
gap: 12px;
|
|
12
|
+
overflow: hidden;
|
|
13
|
+
}
|
|
14
|
+
.lib-xplat-layout-header > * {
|
|
15
|
+
min-width: 0;
|
|
16
|
+
flex-shrink: 1;
|
|
17
|
+
}
|
|
18
|
+
@media (max-width: 767px) {
|
|
19
|
+
.lib-xplat-layout-header {
|
|
20
|
+
padding: 12px;
|
|
21
|
+
}
|
|
11
22
|
}
|
|
@@ -13,6 +13,7 @@
|
|
|
13
13
|
flex: 1;
|
|
14
14
|
overflow: auto;
|
|
15
15
|
width: 100%;
|
|
16
|
+
min-width: 0;
|
|
16
17
|
display: flex;
|
|
17
18
|
flex-direction: column;
|
|
18
19
|
}
|
|
@@ -21,3 +22,17 @@
|
|
|
21
22
|
top: 0;
|
|
22
23
|
z-index: 10;
|
|
23
24
|
}
|
|
25
|
+
@media (max-width: 767px) {
|
|
26
|
+
.lib-xplat-layout > .lib-xplat-layout-content-wrapper > .lib-xplat-layout-sidebar {
|
|
27
|
+
position: fixed;
|
|
28
|
+
left: 0;
|
|
29
|
+
top: 0;
|
|
30
|
+
height: 100vh;
|
|
31
|
+
z-index: 20;
|
|
32
|
+
transform: translateX(-100%);
|
|
33
|
+
transition: transform 0.3s ease-in-out;
|
|
34
|
+
}
|
|
35
|
+
.lib-xplat-layout > .lib-xplat-layout-content-wrapper > .lib-xplat-layout-sidebar.large {
|
|
36
|
+
transform: translateX(0);
|
|
37
|
+
}
|
|
38
|
+
}
|
package/dist/layout/index.css
CHANGED
|
@@ -450,6 +450,17 @@
|
|
|
450
450
|
background-color: var(--xplat-white);
|
|
451
451
|
width: 100%;
|
|
452
452
|
box-sizing: border-box;
|
|
453
|
+
gap: 12px;
|
|
454
|
+
overflow: hidden;
|
|
455
|
+
}
|
|
456
|
+
.lib-xplat-layout-header > * {
|
|
457
|
+
min-width: 0;
|
|
458
|
+
flex-shrink: 1;
|
|
459
|
+
}
|
|
460
|
+
@media (max-width: 767px) {
|
|
461
|
+
.lib-xplat-layout-header {
|
|
462
|
+
padding: 12px;
|
|
463
|
+
}
|
|
453
464
|
}
|
|
454
465
|
|
|
455
466
|
/* src/layout/Layout/layout.scss */
|
|
@@ -467,6 +478,7 @@
|
|
|
467
478
|
flex: 1;
|
|
468
479
|
overflow: auto;
|
|
469
480
|
width: 100%;
|
|
481
|
+
min-width: 0;
|
|
470
482
|
display: flex;
|
|
471
483
|
flex-direction: column;
|
|
472
484
|
}
|
|
@@ -475,6 +487,20 @@
|
|
|
475
487
|
top: 0;
|
|
476
488
|
z-index: 10;
|
|
477
489
|
}
|
|
490
|
+
@media (max-width: 767px) {
|
|
491
|
+
.lib-xplat-layout > .lib-xplat-layout-content-wrapper > .lib-xplat-layout-sidebar {
|
|
492
|
+
position: fixed;
|
|
493
|
+
left: 0;
|
|
494
|
+
top: 0;
|
|
495
|
+
height: 100vh;
|
|
496
|
+
z-index: 20;
|
|
497
|
+
transform: translateX(-100%);
|
|
498
|
+
transition: transform 0.3s ease-in-out;
|
|
499
|
+
}
|
|
500
|
+
.lib-xplat-layout > .lib-xplat-layout-content-wrapper > .lib-xplat-layout-sidebar.large {
|
|
501
|
+
transform: translateX(0);
|
|
502
|
+
}
|
|
503
|
+
}
|
|
478
504
|
|
|
479
505
|
/* src/layout/SideBar/sidebar.scss */
|
|
480
506
|
.lib-xplat-layout-sidebar {
|