@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
|
@@ -863,9 +863,8 @@
|
|
|
863
863
|
.lib-xplat-card {
|
|
864
864
|
display: flex;
|
|
865
865
|
flex-direction: column;
|
|
866
|
-
|
|
866
|
+
flex: 1;
|
|
867
867
|
min-width: 0;
|
|
868
|
-
max-width: 100%;
|
|
869
868
|
height: fit-content;
|
|
870
869
|
border-radius: 1rem;
|
|
871
870
|
border: 1px solid var(--xplat-neutral-400);
|
|
@@ -1336,9 +1335,38 @@
|
|
|
1336
1335
|
color: color-mix(in srgb, var(--xplat-blue-500) 35%, transparent);
|
|
1337
1336
|
}
|
|
1338
1337
|
.lib-xplat-datepicker.range {
|
|
1338
|
+
display: flex;
|
|
1339
|
+
flex-direction: column;
|
|
1340
|
+
}
|
|
1341
|
+
.lib-xplat-datepicker .datepicker-range-tabs {
|
|
1342
|
+
display: none;
|
|
1343
|
+
margin-bottom: 0.75rem;
|
|
1344
|
+
border-bottom: 1px solid var(--xplat-neutral-200);
|
|
1345
|
+
}
|
|
1346
|
+
.lib-xplat-datepicker .datepicker-range-tab {
|
|
1347
|
+
flex: 1;
|
|
1348
|
+
padding: 0.5rem;
|
|
1349
|
+
border: none;
|
|
1350
|
+
background: none;
|
|
1351
|
+
font-size: 0.8125rem;
|
|
1352
|
+
font-weight: 500;
|
|
1353
|
+
color: var(--xplat-neutral-400);
|
|
1354
|
+
cursor: pointer;
|
|
1355
|
+
border-bottom: 2px solid transparent;
|
|
1356
|
+
transition: color 0.15s, border-color 0.15s;
|
|
1357
|
+
}
|
|
1358
|
+
.lib-xplat-datepicker .datepicker-range-tab.active {
|
|
1359
|
+
color: var(--datepicker-active-color, var(--xplat-blue-500));
|
|
1360
|
+
border-bottom-color: var(--datepicker-active-color, var(--xplat-blue-500));
|
|
1361
|
+
font-weight: 600;
|
|
1362
|
+
}
|
|
1363
|
+
.lib-xplat-datepicker .datepicker-range-panels {
|
|
1339
1364
|
display: flex;
|
|
1340
1365
|
gap: 1.5rem;
|
|
1341
1366
|
}
|
|
1367
|
+
.lib-xplat-datepicker .datepicker-range-mobile {
|
|
1368
|
+
display: none;
|
|
1369
|
+
}
|
|
1342
1370
|
.lib-xplat-datepicker .datepicker-range-panel {
|
|
1343
1371
|
flex: 1;
|
|
1344
1372
|
min-width: 200px;
|
|
@@ -1351,6 +1379,20 @@
|
|
|
1351
1379
|
color: var(--xplat-neutral-500);
|
|
1352
1380
|
margin-bottom: 0.5rem;
|
|
1353
1381
|
}
|
|
1382
|
+
@media (max-width: 600px) {
|
|
1383
|
+
.lib-xplat-datepicker .datepicker-range-tabs {
|
|
1384
|
+
display: flex;
|
|
1385
|
+
}
|
|
1386
|
+
.lib-xplat-datepicker .datepicker-range-panels {
|
|
1387
|
+
display: none;
|
|
1388
|
+
}
|
|
1389
|
+
.lib-xplat-datepicker .datepicker-range-mobile {
|
|
1390
|
+
display: block;
|
|
1391
|
+
}
|
|
1392
|
+
.lib-xplat-datepicker .datepicker-range-panel {
|
|
1393
|
+
min-width: unset;
|
|
1394
|
+
}
|
|
1395
|
+
}
|
|
1354
1396
|
.lib-xplat-datepicker.input-datepicker {
|
|
1355
1397
|
position: relative;
|
|
1356
1398
|
}
|
|
@@ -1992,6 +2034,9 @@
|
|
|
1992
2034
|
position: absolute;
|
|
1993
2035
|
cursor: default;
|
|
1994
2036
|
transition: transform 0.2s ease, opacity 0.2s ease;
|
|
2037
|
+
background: white;
|
|
2038
|
+
border-radius: 0.5rem;
|
|
2039
|
+
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
|
1995
2040
|
z-index: 10;
|
|
1996
2041
|
opacity: 0;
|
|
1997
2042
|
transform: scale(0.8);
|