@x-plat/design-system 0.4.2 → 0.4.4
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/Calendar/index.cjs +132 -69
- package/dist/components/Calendar/index.css +40 -23
- package/dist/components/Calendar/index.d.cts +0 -13
- package/dist/components/Calendar/index.d.ts +0 -13
- package/dist/components/Calendar/index.js +133 -70
- package/dist/components/DatePicker/index.cjs +126 -37
- package/dist/components/DatePicker/index.css +51 -8
- package/dist/components/DatePicker/index.js +127 -38
- package/dist/components/ImageSelector/index.css +1 -0
- package/dist/components/Modal/index.css +1 -1
- package/dist/components/PopOver/index.css +1 -0
- package/dist/components/index.cjs +258 -106
- package/dist/components/index.css +93 -31
- package/dist/components/index.js +262 -110
- package/dist/index.cjs +258 -106
- package/dist/index.css +93 -31
- package/dist/index.js +264 -112
- package/package.json +1 -1
|
@@ -676,7 +676,7 @@
|
|
|
676
676
|
/* src/components/Calendar/calendar.scss */
|
|
677
677
|
.lib-xplat-calendar {
|
|
678
678
|
width: 100%;
|
|
679
|
-
min-width:
|
|
679
|
+
min-width: 200px;
|
|
680
680
|
user-select: none;
|
|
681
681
|
container-type: inline-size;
|
|
682
682
|
}
|
|
@@ -692,6 +692,15 @@
|
|
|
692
692
|
color: var(--xplat-neutral-900);
|
|
693
693
|
min-width: 120px;
|
|
694
694
|
text-align: center;
|
|
695
|
+
background: none;
|
|
696
|
+
border: none;
|
|
697
|
+
cursor: pointer;
|
|
698
|
+
padding: 0.25rem 0.5rem;
|
|
699
|
+
border-radius: 0.375rem;
|
|
700
|
+
transition: background-color 0.15s;
|
|
701
|
+
}
|
|
702
|
+
.lib-xplat-calendar .calendar-title:hover {
|
|
703
|
+
background-color: var(--xplat-neutral-100);
|
|
695
704
|
}
|
|
696
705
|
.lib-xplat-calendar .calendar-nav {
|
|
697
706
|
display: flex;
|
|
@@ -781,33 +790,17 @@
|
|
|
781
790
|
color: var(--xplat-neutral-300);
|
|
782
791
|
}
|
|
783
792
|
.lib-xplat-calendar .calendar-day.today .calendar-day-number {
|
|
784
|
-
position: relative;
|
|
785
793
|
font-weight: 700;
|
|
786
794
|
color: var(--xplat-blue-600);
|
|
787
795
|
}
|
|
788
|
-
.lib-xplat-calendar .calendar-day.today .calendar-day-number::before {
|
|
789
|
-
content: "";
|
|
790
|
-
position: absolute;
|
|
791
|
-
top: 50%;
|
|
792
|
-
left: -6px;
|
|
793
|
-
transform: translateY(-50%);
|
|
794
|
-
width: 4px;
|
|
795
|
-
height: 4px;
|
|
796
|
-
border-radius: 50%;
|
|
797
|
-
background-color: var(--xplat-blue-600);
|
|
798
|
-
}
|
|
799
796
|
.lib-xplat-calendar .calendar-day.selected {
|
|
800
|
-
|
|
797
|
+
box-shadow: inset 0 0 0 1.5px var(--calendar-selected-color, var(--xplat-neutral-500));
|
|
801
798
|
}
|
|
802
799
|
.lib-xplat-calendar .calendar-day.selected .calendar-day-number {
|
|
803
|
-
|
|
804
|
-
font-weight: 600;
|
|
800
|
+
font-weight: 700;
|
|
805
801
|
}
|
|
806
802
|
.lib-xplat-calendar .calendar-day.selected:hover {
|
|
807
|
-
background-color: color-mix(in srgb, var(--calendar-selected-color, var(--xplat-neutral-
|
|
808
|
-
}
|
|
809
|
-
.lib-xplat-calendar .calendar-day.selected.today .calendar-day-number::before {
|
|
810
|
-
background-color: var(--xplat-white);
|
|
803
|
+
background-color: color-mix(in srgb, var(--calendar-selected-color, var(--xplat-neutral-500)) 10%, transparent);
|
|
811
804
|
}
|
|
812
805
|
.lib-xplat-calendar .calendar-day.sunday:not(.outside) .calendar-day-number {
|
|
813
806
|
color: var(--xplat-red-500);
|
|
@@ -815,9 +808,6 @@
|
|
|
815
808
|
.lib-xplat-calendar .calendar-day.saturday:not(.outside) .calendar-day-number {
|
|
816
809
|
color: var(--xplat-blue-500);
|
|
817
810
|
}
|
|
818
|
-
.lib-xplat-calendar .calendar-day.selected .calendar-day-number {
|
|
819
|
-
color: var(--xplat-white);
|
|
820
|
-
}
|
|
821
811
|
.lib-xplat-calendar .calendar-day-number {
|
|
822
812
|
font-size: clamp(0.75rem, 2.5cqi, 1rem);
|
|
823
813
|
line-height: 1;
|
|
@@ -841,6 +831,33 @@
|
|
|
841
831
|
color: var(--xplat-neutral-400);
|
|
842
832
|
line-height: 1;
|
|
843
833
|
}
|
|
834
|
+
.lib-xplat-calendar .calendar-picker-grid {
|
|
835
|
+
display: grid;
|
|
836
|
+
grid-template-columns: repeat(3, 1fr);
|
|
837
|
+
gap: 0.5rem;
|
|
838
|
+
padding: 0.5rem 0;
|
|
839
|
+
}
|
|
840
|
+
.lib-xplat-calendar .calendar-picker-cell {
|
|
841
|
+
display: flex;
|
|
842
|
+
align-items: center;
|
|
843
|
+
justify-content: center;
|
|
844
|
+
padding: 0.5rem;
|
|
845
|
+
border: none;
|
|
846
|
+
border-radius: 0.375rem;
|
|
847
|
+
background: none;
|
|
848
|
+
font-size: clamp(0.75rem, 2.5cqi, 0.9375rem);
|
|
849
|
+
color: var(--xplat-neutral-700);
|
|
850
|
+
cursor: pointer;
|
|
851
|
+
transition: background-color 0.15s;
|
|
852
|
+
}
|
|
853
|
+
.lib-xplat-calendar .calendar-picker-cell:hover {
|
|
854
|
+
background-color: var(--xplat-neutral-100);
|
|
855
|
+
}
|
|
856
|
+
.lib-xplat-calendar .calendar-picker-cell.active {
|
|
857
|
+
background-color: var(--xplat-neutral-900);
|
|
858
|
+
color: var(--xplat-white);
|
|
859
|
+
font-weight: 600;
|
|
860
|
+
}
|
|
844
861
|
|
|
845
862
|
/* src/components/Card/card.scss */
|
|
846
863
|
.lib-xplat-card {
|
|
@@ -1158,7 +1175,8 @@
|
|
|
1158
1175
|
.lib-xplat-datepicker {
|
|
1159
1176
|
user-select: none;
|
|
1160
1177
|
container-type: inline-size;
|
|
1161
|
-
width:
|
|
1178
|
+
min-width: 200px;
|
|
1179
|
+
width: 100%;
|
|
1162
1180
|
}
|
|
1163
1181
|
.lib-xplat-datepicker .datepicker-header {
|
|
1164
1182
|
display: flex;
|
|
@@ -1168,12 +1186,48 @@
|
|
|
1168
1186
|
margin-bottom: 0.75rem;
|
|
1169
1187
|
}
|
|
1170
1188
|
.lib-xplat-datepicker .datepicker-title {
|
|
1189
|
+
background: none;
|
|
1190
|
+
border: none;
|
|
1191
|
+
cursor: pointer;
|
|
1192
|
+
padding: 0.25rem 0.5rem;
|
|
1193
|
+
border-radius: 0.375rem;
|
|
1194
|
+
transition: background-color 0.15s;
|
|
1171
1195
|
font-size: clamp(0.8125rem, 3cqi, 1.125rem);
|
|
1172
1196
|
font-weight: 600;
|
|
1173
1197
|
color: var(--xplat-neutral-900);
|
|
1174
1198
|
min-width: 110px;
|
|
1175
1199
|
text-align: center;
|
|
1176
1200
|
}
|
|
1201
|
+
.lib-xplat-datepicker .datepicker-title:hover {
|
|
1202
|
+
background-color: var(--xplat-neutral-100);
|
|
1203
|
+
}
|
|
1204
|
+
.lib-xplat-datepicker .datepicker-picker-grid {
|
|
1205
|
+
display: grid;
|
|
1206
|
+
grid-template-columns: repeat(3, 1fr);
|
|
1207
|
+
gap: 0.25rem;
|
|
1208
|
+
padding: 0.25rem 0;
|
|
1209
|
+
}
|
|
1210
|
+
.lib-xplat-datepicker .datepicker-picker-cell {
|
|
1211
|
+
display: flex;
|
|
1212
|
+
align-items: center;
|
|
1213
|
+
justify-content: center;
|
|
1214
|
+
padding: 0.375rem;
|
|
1215
|
+
border: none;
|
|
1216
|
+
border-radius: 0.375rem;
|
|
1217
|
+
background: none;
|
|
1218
|
+
font-size: clamp(0.6875rem, 2cqi, 0.8125rem);
|
|
1219
|
+
color: var(--xplat-neutral-700);
|
|
1220
|
+
cursor: pointer;
|
|
1221
|
+
transition: background-color 0.15s;
|
|
1222
|
+
}
|
|
1223
|
+
.lib-xplat-datepicker .datepicker-picker-cell:hover {
|
|
1224
|
+
background-color: var(--xplat-neutral-100);
|
|
1225
|
+
}
|
|
1226
|
+
.lib-xplat-datepicker .datepicker-picker-cell.active {
|
|
1227
|
+
background-color: var(--datepicker-active-color, var(--xplat-blue-500));
|
|
1228
|
+
color: var(--xplat-white);
|
|
1229
|
+
font-weight: 600;
|
|
1230
|
+
}
|
|
1177
1231
|
.lib-xplat-datepicker .datepicker-nav {
|
|
1178
1232
|
display: flex;
|
|
1179
1233
|
align-items: center;
|
|
@@ -1267,20 +1321,27 @@
|
|
|
1267
1321
|
background-color: color-mix(in srgb, var(--datepicker-active-color, var(--xplat-blue-500)) 12%, transparent);
|
|
1268
1322
|
border-radius: 0;
|
|
1269
1323
|
}
|
|
1270
|
-
.lib-xplat-datepicker .datepicker-day.sunday:not(.selected):not(.outside) {
|
|
1324
|
+
.lib-xplat-datepicker .datepicker-day.sunday:not(.selected):not(.outside):not(.disabled) {
|
|
1271
1325
|
color: var(--xplat-red-500);
|
|
1272
1326
|
}
|
|
1273
|
-
.lib-xplat-datepicker .datepicker-day.saturday:not(.selected):not(.outside) {
|
|
1327
|
+
.lib-xplat-datepicker .datepicker-day.saturday:not(.selected):not(.outside):not(.disabled) {
|
|
1274
1328
|
color: var(--xplat-blue-500);
|
|
1275
1329
|
}
|
|
1330
|
+
.lib-xplat-datepicker .datepicker-day.outside.sunday,
|
|
1331
|
+
.lib-xplat-datepicker .datepicker-day.disabled.sunday {
|
|
1332
|
+
color: color-mix(in srgb, var(--xplat-red-500) 35%, transparent);
|
|
1333
|
+
}
|
|
1334
|
+
.lib-xplat-datepicker .datepicker-day.outside.saturday,
|
|
1335
|
+
.lib-xplat-datepicker .datepicker-day.disabled.saturday {
|
|
1336
|
+
color: color-mix(in srgb, var(--xplat-blue-500) 35%, transparent);
|
|
1337
|
+
}
|
|
1276
1338
|
.lib-xplat-datepicker.range {
|
|
1277
1339
|
display: flex;
|
|
1278
1340
|
gap: 1.5rem;
|
|
1279
|
-
width: auto;
|
|
1280
1341
|
}
|
|
1281
1342
|
.lib-xplat-datepicker .datepicker-range-panel {
|
|
1282
|
-
|
|
1283
|
-
|
|
1343
|
+
flex: 1;
|
|
1344
|
+
min-width: 200px;
|
|
1284
1345
|
}
|
|
1285
1346
|
.lib-xplat-datepicker .datepicker-range-label {
|
|
1286
1347
|
display: block;
|
|
@@ -1292,7 +1353,6 @@
|
|
|
1292
1353
|
}
|
|
1293
1354
|
.lib-xplat-datepicker.input-datepicker {
|
|
1294
1355
|
position: relative;
|
|
1295
|
-
width: auto;
|
|
1296
1356
|
}
|
|
1297
1357
|
.lib-xplat-datepicker.input-datepicker .input-datepicker-dropdown {
|
|
1298
1358
|
position: absolute;
|
|
@@ -1330,7 +1390,7 @@
|
|
|
1330
1390
|
padding: 24px;
|
|
1331
1391
|
max-width: calc(100vw - 2rem);
|
|
1332
1392
|
max-height: calc(100vh - 2rem);
|
|
1333
|
-
overflow:
|
|
1393
|
+
overflow: visible;
|
|
1334
1394
|
transform: scale(0.9);
|
|
1335
1395
|
opacity: 0;
|
|
1336
1396
|
transition: transform 0.2s ease, opacity 0.2s ease;
|
|
@@ -1768,6 +1828,7 @@
|
|
|
1768
1828
|
background-color: var(--xplat-white);
|
|
1769
1829
|
border-radius: 0.25rem;
|
|
1770
1830
|
overflow: hidden;
|
|
1831
|
+
padding: 0.75rem;
|
|
1771
1832
|
}
|
|
1772
1833
|
.lib-xplat-imageselector > input {
|
|
1773
1834
|
display: none;
|
|
@@ -1923,6 +1984,7 @@
|
|
|
1923
1984
|
.lib-xplat-pop-over {
|
|
1924
1985
|
position: relative;
|
|
1925
1986
|
z-index: 10;
|
|
1987
|
+
width: fit-content;
|
|
1926
1988
|
cursor: pointer;
|
|
1927
1989
|
user-select: none;
|
|
1928
1990
|
}
|