@djb25/digit-ui-css 1.0.18 → 1.0.20
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.css +1 -1
- package/dist/index.min.css +1 -1
- package/package.json +1 -1
- package/src/components/TimeLine.scss +136 -0
- package/src/components/actionbar.scss +15 -0
- package/src/components/body.scss +9 -1
- package/src/components/card.scss +8 -6
- package/src/components/financeUi.scss +1 -1
- package/src/components/hoc/InboxComposer.scss +1 -1
- package/src/components/juridictions.scss +4 -13
- package/src/components/moduleHeader.scss +72 -1
- package/src/components/radiobtn.scss +15 -10
- package/src/components/selectdropdown.scss +1 -1
- package/src/components/textfields.scss +1 -9
- package/src/digitv2/components/FormComposerV2.scss +2 -2
- package/src/digitv2/components/radiobtnV2.scss +4 -1
- package/src/index.scss +20 -1
- package/src/pages/employee/container.scss +0 -6
- package/src/pages/employee/ekyc.scss +6 -6
- package/src/pages/employee/form-fields.scss +20 -2
- package/src/pages/employee/hrms.scss +19 -0
- package/src/pages/employee/inbox.scss +5 -1
- package/src/pages/employee/index.scss +360 -8
- package/src/pages/employee/login.scss +1 -4
|
@@ -7,14 +7,24 @@
|
|
|
7
7
|
}
|
|
8
8
|
|
|
9
9
|
.ground-container {
|
|
10
|
-
margin-bottom: 56px;
|
|
11
|
-
padding-inline: 30px;
|
|
12
10
|
width: 100%;
|
|
11
|
+
height: 100%;
|
|
12
|
+
|
|
13
|
+
@media (max-width: 768px) {
|
|
14
|
+
display: flex;
|
|
15
|
+
flex-direction: column;
|
|
16
|
+
gap: 12px;
|
|
17
|
+
padding: 20px 20px 0;
|
|
18
|
+
}
|
|
19
|
+
|
|
13
20
|
/* @apply flex flex-col; */
|
|
14
21
|
}
|
|
15
22
|
|
|
16
|
-
@media (max-width:
|
|
17
|
-
|
|
23
|
+
@media (min-width: 325px) and (max-width: 768px) {
|
|
24
|
+
.ground-container {
|
|
25
|
+
padding-top: 11px;
|
|
26
|
+
padding-inline: 10px;
|
|
27
|
+
}
|
|
18
28
|
}
|
|
19
29
|
|
|
20
30
|
.card-home {
|
|
@@ -399,8 +409,9 @@
|
|
|
399
409
|
/* Space between Greeting and Search */
|
|
400
410
|
flex-wrap: wrap;
|
|
401
411
|
gap: 20px;
|
|
412
|
+
overflow: hidden;
|
|
402
413
|
|
|
403
|
-
background: linear-gradient(135deg,
|
|
414
|
+
background: linear-gradient(135deg, #1a67a3, #5282e6 40%, #5495fe);
|
|
404
415
|
backdrop-filter: blur(20px) saturate(150%);
|
|
405
416
|
-webkit-backdrop-filter: blur(20px) saturate(150%);
|
|
406
417
|
border: 1px solid rgba(255, 255, 255, 0.3);
|
|
@@ -410,11 +421,25 @@
|
|
|
410
421
|
inset 0 -2px 6px rgba(0, 0, 0, 0.1),
|
|
411
422
|
0 12px 30px rgba(97, 119, 236, 0.2);
|
|
412
423
|
|
|
413
|
-
|
|
424
|
+
.header-icon-area {
|
|
425
|
+
position: absolute;
|
|
426
|
+
top: 55%;
|
|
427
|
+
right: 20px;
|
|
428
|
+
transform: translateY(-50%);
|
|
429
|
+
opacity: 0.5;
|
|
430
|
+
pointer-events: none;
|
|
431
|
+
max-width: 143px;
|
|
432
|
+
|
|
433
|
+
@media (max-width: 768px) {
|
|
434
|
+
right: 10px;
|
|
435
|
+
transform: translateY(-50%) scale(0.8);
|
|
436
|
+
}
|
|
437
|
+
}
|
|
438
|
+
|
|
414
439
|
.header-greeting-area {
|
|
415
440
|
display: flex;
|
|
416
441
|
flex-direction: column;
|
|
417
|
-
|
|
442
|
+
|
|
418
443
|
}
|
|
419
444
|
|
|
420
445
|
.greeting-title {
|
|
@@ -864,6 +889,114 @@
|
|
|
864
889
|
overflow: hidden;
|
|
865
890
|
display: flex;
|
|
866
891
|
flex-direction: column;
|
|
892
|
+
max-height: 48vh;
|
|
893
|
+
min-height: 250px;
|
|
894
|
+
}
|
|
895
|
+
|
|
896
|
+
.ra-footer {
|
|
897
|
+
margin-top: auto;
|
|
898
|
+
border-top: 1px solid rgba(0, 0, 0, 0.06);
|
|
899
|
+
padding-top: 16px;
|
|
900
|
+
padding-bottom: 0px;
|
|
901
|
+
display: flex;
|
|
902
|
+
justify-content: center;
|
|
903
|
+
align-items: center;
|
|
904
|
+
background: transparent;
|
|
905
|
+
z-index: 10;
|
|
906
|
+
}
|
|
907
|
+
|
|
908
|
+
.ra-modal-overlay {
|
|
909
|
+
position: fixed;
|
|
910
|
+
top: 0;
|
|
911
|
+
left: 0;
|
|
912
|
+
right: 0;
|
|
913
|
+
bottom: 0;
|
|
914
|
+
background: rgba(0, 0, 0, 0.5);
|
|
915
|
+
backdrop-filter: blur(4px);
|
|
916
|
+
z-index: 100000;
|
|
917
|
+
display: flex;
|
|
918
|
+
justify-content: center;
|
|
919
|
+
align-items: center;
|
|
920
|
+
padding: 20px;
|
|
921
|
+
}
|
|
922
|
+
|
|
923
|
+
.ra-modal-content {
|
|
924
|
+
background: white;
|
|
925
|
+
border-radius: 20px;
|
|
926
|
+
width: 100%;
|
|
927
|
+
max-width: 600px;
|
|
928
|
+
max-height: 85vh;
|
|
929
|
+
display: flex;
|
|
930
|
+
flex-direction: column;
|
|
931
|
+
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
|
|
932
|
+
overflow: hidden;
|
|
933
|
+
animation: modal-pop 0.3s cubic-bezier(0.16, 1, 0.3, 1);
|
|
934
|
+
}
|
|
935
|
+
|
|
936
|
+
@keyframes modal-pop {
|
|
937
|
+
0% {
|
|
938
|
+
transform: scale(0.95);
|
|
939
|
+
opacity: 0;
|
|
940
|
+
}
|
|
941
|
+
|
|
942
|
+
100% {
|
|
943
|
+
transform: scale(1);
|
|
944
|
+
opacity: 1;
|
|
945
|
+
}
|
|
946
|
+
}
|
|
947
|
+
|
|
948
|
+
.ra-modal-header {
|
|
949
|
+
padding: 20px 24px;
|
|
950
|
+
border-bottom: 1px solid rgba(0, 0, 0, 0.06);
|
|
951
|
+
display: flex;
|
|
952
|
+
justify-content: space-between;
|
|
953
|
+
align-items: center;
|
|
954
|
+
background: #f8fafc;
|
|
955
|
+
}
|
|
956
|
+
|
|
957
|
+
.ra-modal-header h3 {
|
|
958
|
+
margin: 0;
|
|
959
|
+
font-size: 20px;
|
|
960
|
+
font-weight: 700;
|
|
961
|
+
color: #1a67a3;
|
|
962
|
+
}
|
|
963
|
+
|
|
964
|
+
.ra-modal-close {
|
|
965
|
+
background: transparent;
|
|
966
|
+
border: none;
|
|
967
|
+
color: #94a3b8;
|
|
968
|
+
cursor: pointer;
|
|
969
|
+
display: flex;
|
|
970
|
+
align-items: center;
|
|
971
|
+
justify-content: center;
|
|
972
|
+
padding: 4px;
|
|
973
|
+
border-radius: 50%;
|
|
974
|
+
transition: all 0.2s;
|
|
975
|
+
}
|
|
976
|
+
|
|
977
|
+
.ra-modal-close:hover {
|
|
978
|
+
background: #f1f5f9;
|
|
979
|
+
color: #ef4444;
|
|
980
|
+
}
|
|
981
|
+
.ra-timeline {
|
|
982
|
+
flex: 1;
|
|
983
|
+
overflow-y: auto;
|
|
984
|
+
min-height: 0;
|
|
985
|
+
padding-right: 8px;
|
|
986
|
+
}
|
|
987
|
+
.ra-timeline-modal {
|
|
988
|
+
padding: 24px;
|
|
989
|
+
overflow-y: auto;
|
|
990
|
+
flex: 1;
|
|
991
|
+
}
|
|
992
|
+
|
|
993
|
+
.ra-timeline-modal::-webkit-scrollbar-thumb {
|
|
994
|
+
background: #cbd5e1;
|
|
995
|
+
border-radius: 10px;
|
|
996
|
+
}
|
|
997
|
+
|
|
998
|
+
.ra-timeline-modal::-webkit-scrollbar {
|
|
999
|
+
width: 6px;
|
|
867
1000
|
}
|
|
868
1001
|
|
|
869
1002
|
.ra-header {
|
|
@@ -871,7 +1004,7 @@
|
|
|
871
1004
|
justify-content: space-between;
|
|
872
1005
|
align-items: center;
|
|
873
1006
|
border-bottom: 1px solid rgba(0, 0, 0, 0.06);
|
|
874
|
-
|
|
1007
|
+
|
|
875
1008
|
}
|
|
876
1009
|
|
|
877
1010
|
.ra-header h3 {
|
|
@@ -1116,4 +1249,223 @@
|
|
|
1116
1249
|
flex-direction: column !important;
|
|
1117
1250
|
gap: 0px;
|
|
1118
1251
|
}
|
|
1252
|
+
|
|
1253
|
+
@media (min-width: 325px) and (max-width: 768px) {
|
|
1254
|
+
.home-header {
|
|
1255
|
+
|
|
1256
|
+
.header-top-section {
|
|
1257
|
+
margin-inline: 10px;
|
|
1258
|
+
}
|
|
1259
|
+
}
|
|
1260
|
+
}
|
|
1261
|
+
}
|
|
1262
|
+
|
|
1263
|
+
/* Custom styles for View All Container and Modal */
|
|
1264
|
+
.view-all-container {
|
|
1265
|
+
display: flex;
|
|
1266
|
+
justify-content: center;
|
|
1267
|
+
margin-top: 16px;
|
|
1268
|
+
padding-top: 16px;
|
|
1269
|
+
border-top: 1px solid rgba(0, 0, 0, 0.06);
|
|
1270
|
+
}
|
|
1271
|
+
|
|
1272
|
+
.ra-view-all-bottom {
|
|
1273
|
+
display: flex;
|
|
1274
|
+
align-items: center;
|
|
1275
|
+
gap: 6px;
|
|
1276
|
+
background: transparent;
|
|
1277
|
+
border: none;
|
|
1278
|
+
color: #3b82f6;
|
|
1279
|
+
font-size: 14px;
|
|
1280
|
+
font-weight: 600;
|
|
1281
|
+
cursor: pointer;
|
|
1282
|
+
padding: 8px 16px;
|
|
1283
|
+
border-radius: 8px;
|
|
1284
|
+
transition: all 0.2s;
|
|
1285
|
+
}
|
|
1286
|
+
|
|
1287
|
+
.ra-view-all-bottom:hover {
|
|
1288
|
+
background: #eff6ff;
|
|
1289
|
+
color: #2563eb;
|
|
1290
|
+
}
|
|
1291
|
+
|
|
1292
|
+
.custom-modal-overlay {
|
|
1293
|
+
position: fixed;
|
|
1294
|
+
top: 0;
|
|
1295
|
+
left: 0;
|
|
1296
|
+
right: 0;
|
|
1297
|
+
bottom: 0;
|
|
1298
|
+
background-color: rgba(0, 0, 0, 0.5);
|
|
1299
|
+
display: flex;
|
|
1300
|
+
justify-content: center;
|
|
1301
|
+
align-items: center;
|
|
1302
|
+
z-index: 9999;
|
|
1303
|
+
backdrop-filter: blur(4px);
|
|
1304
|
+
padding: 20px;
|
|
1305
|
+
}
|
|
1306
|
+
|
|
1307
|
+
.custom-modal-content {
|
|
1308
|
+
background: white;
|
|
1309
|
+
border-radius: 16px;
|
|
1310
|
+
width: 100%;
|
|
1311
|
+
max-width: 500px;
|
|
1312
|
+
max-height: 80vh;
|
|
1313
|
+
display: flex;
|
|
1314
|
+
flex-direction: column;
|
|
1315
|
+
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
|
|
1316
|
+
animation: modal-pop 0.3s ease-out;
|
|
1317
|
+
}
|
|
1318
|
+
|
|
1319
|
+
@keyframes modal-pop {
|
|
1320
|
+
from {
|
|
1321
|
+
opacity: 0;
|
|
1322
|
+
transform: scale(0.95) translateY(10px);
|
|
1323
|
+
}
|
|
1324
|
+
|
|
1325
|
+
to {
|
|
1326
|
+
opacity: 1;
|
|
1327
|
+
transform: scale(1) translateY(0);
|
|
1328
|
+
}
|
|
1329
|
+
}
|
|
1330
|
+
|
|
1331
|
+
.custom-modal-header {
|
|
1332
|
+
display: flex;
|
|
1333
|
+
justify-content: space-between;
|
|
1334
|
+
align-items: center;
|
|
1335
|
+
padding: 20px 24px;
|
|
1336
|
+
border-bottom: 1px solid rgba(0, 0, 0, 0.08);
|
|
1337
|
+
}
|
|
1338
|
+
|
|
1339
|
+
.custom-modal-header h3 {
|
|
1340
|
+
margin: 0;
|
|
1341
|
+
font-size: 18px;
|
|
1342
|
+
font-weight: 700;
|
|
1343
|
+
color: #1a67a3;
|
|
1344
|
+
}
|
|
1345
|
+
|
|
1346
|
+
.custom-modal-close {
|
|
1347
|
+
background: transparent;
|
|
1348
|
+
border: none;
|
|
1349
|
+
color: #64748b;
|
|
1350
|
+
cursor: pointer;
|
|
1351
|
+
display: flex;
|
|
1352
|
+
align-items: center;
|
|
1353
|
+
justify-content: center;
|
|
1354
|
+
padding: 4px;
|
|
1355
|
+
border-radius: 50%;
|
|
1356
|
+
transition: background-color 0.2s, color 0.2s;
|
|
1357
|
+
}
|
|
1358
|
+
|
|
1359
|
+
.custom-modal-close:hover {
|
|
1360
|
+
background-color: #f1f5f9;
|
|
1361
|
+
color: #ef4444;
|
|
1362
|
+
}
|
|
1363
|
+
|
|
1364
|
+
.custom-modal-body {
|
|
1365
|
+
padding: 24px;
|
|
1366
|
+
overflow-y: auto;
|
|
1367
|
+
flex: 1;
|
|
1368
|
+
}
|
|
1369
|
+
|
|
1370
|
+
.custom-modal-body::-webkit-scrollbar {
|
|
1371
|
+
width: 6px;
|
|
1372
|
+
}
|
|
1373
|
+
|
|
1374
|
+
.custom-modal-body::-webkit-scrollbar-track {
|
|
1375
|
+
background: transparent;
|
|
1376
|
+
}
|
|
1377
|
+
|
|
1378
|
+
.custom-modal-body::-webkit-scrollbar-thumb {
|
|
1379
|
+
background: #cbd5e1;
|
|
1380
|
+
border-radius: 10px;
|
|
1381
|
+
}
|
|
1382
|
+
|
|
1383
|
+
/* --- Engagement Module Cards Redesign --- */
|
|
1384
|
+
.engagement-module-section {
|
|
1385
|
+
width: 100%;
|
|
1386
|
+
}
|
|
1387
|
+
|
|
1388
|
+
.engagement-cards-grid {
|
|
1389
|
+
display: grid;
|
|
1390
|
+
grid-template-columns: repeat(4, 1fr) !important;
|
|
1391
|
+
gap: 16px;
|
|
1392
|
+
width: 100%;
|
|
1393
|
+
}
|
|
1394
|
+
|
|
1395
|
+
.engagement-custom-card {
|
|
1396
|
+
display: flex !important;
|
|
1397
|
+
|
|
1398
|
+
.employeeCard {
|
|
1399
|
+
margin: 0 !important;
|
|
1400
|
+
width: 100% !important;
|
|
1401
|
+
min-height: 120px !important;
|
|
1402
|
+
border-radius: 12px;
|
|
1403
|
+
background: linear-gradient(145deg, #ffffff, #f9fafb);
|
|
1404
|
+
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04) !important;
|
|
1405
|
+
border: 1px solid rgba(0, 0, 0, 0.06);
|
|
1406
|
+
transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
|
|
1407
|
+
padding: 16px !important;
|
|
1408
|
+
display: flex;
|
|
1409
|
+
flex-direction: column;
|
|
1410
|
+
|
|
1411
|
+
&:hover {
|
|
1412
|
+
transform: translateY(-4px);
|
|
1413
|
+
box-shadow: 0 12px 24px rgba(26, 103, 163, 0.12) !important;
|
|
1414
|
+
border-color: rgba(26, 103, 163, 0.2);
|
|
1415
|
+
}
|
|
1416
|
+
|
|
1417
|
+
.complaint-links-container {
|
|
1418
|
+
margin-top: auto;
|
|
1419
|
+
.employeeCard-link {
|
|
1420
|
+
font-size: 13px;
|
|
1421
|
+
padding: 4px 0;
|
|
1422
|
+
font-weight: 500;
|
|
1423
|
+
color: #1a67a3;
|
|
1424
|
+
}
|
|
1425
|
+
}
|
|
1426
|
+
|
|
1427
|
+
.employeeCard-title {
|
|
1428
|
+
font-size: 15px !important;
|
|
1429
|
+
font-weight: 700;
|
|
1430
|
+
color: #1a67a3 !important;
|
|
1431
|
+
margin-bottom: 8px;
|
|
1432
|
+
display: flex;
|
|
1433
|
+
align-items: center;
|
|
1434
|
+
gap: 8px;
|
|
1435
|
+
}
|
|
1436
|
+
|
|
1437
|
+
.employeeCard-kpi {
|
|
1438
|
+
display: flex;
|
|
1439
|
+
gap: 8px;
|
|
1440
|
+
flex-direction: column;
|
|
1441
|
+
margin-top: 8px;
|
|
1442
|
+
margin-bottom: 8px;
|
|
1443
|
+
font-size: 12px;
|
|
1444
|
+
color: #64748b;
|
|
1445
|
+
}
|
|
1446
|
+
|
|
1447
|
+
.employeeCard-kpi-count {
|
|
1448
|
+
font-size: 16px !important;
|
|
1449
|
+
font-weight: 700;
|
|
1450
|
+
color: #f97316 !important;
|
|
1451
|
+
}
|
|
1452
|
+
|
|
1453
|
+
svg {
|
|
1454
|
+
width: 20px;
|
|
1455
|
+
height: 20px;
|
|
1456
|
+
fill: #1a67a3;
|
|
1457
|
+
}
|
|
1458
|
+
}
|
|
1459
|
+
}
|
|
1460
|
+
|
|
1461
|
+
@media (max-width: 1024px) {
|
|
1462
|
+
.engagement-cards-grid {
|
|
1463
|
+
grid-template-columns: repeat(2, 1fr) !important;
|
|
1464
|
+
}
|
|
1465
|
+
}
|
|
1466
|
+
|
|
1467
|
+
@media (max-width: 768px) {
|
|
1468
|
+
.engagement-cards-grid {
|
|
1469
|
+
grid-template-columns: 1fr !important;
|
|
1470
|
+
}
|
|
1119
1471
|
}
|