@djb25/digit-ui-css 1.0.31 → 1.0.33
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/SearchForm.scss +1 -1
- package/src/components/VerticalTimeline.scss +138 -62
- package/src/components/body.scss +15 -8
- package/src/components/card.scss +93 -75
- package/src/components/hoc/InboxComposer.scss +5 -0
- package/src/components/staticSideBar.scss +110 -6
- package/src/index.scss +1 -2
- package/src/pages/citizen/HomePageWrapper.scss +60 -12
- package/src/pages/employee/hrms.scss +5 -5
- package/src/pages/employee/inbox.scss +1 -1
- package/src/pages/employee/index.scss +30 -8
package/package.json
CHANGED
|
@@ -1,106 +1,182 @@
|
|
|
1
1
|
.vertical-timeline-container {
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
2
|
+
display: flex;
|
|
3
|
+
flex-direction: column;
|
|
4
|
+
padding: 16px;
|
|
5
|
+
background-color: #fff;
|
|
6
|
+
border-radius: 12px;
|
|
7
|
+
/* Reduced padding slightly to fit better if needed, or keep 24 */
|
|
8
|
+
height: 100%;
|
|
7
9
|
}
|
|
8
10
|
|
|
9
11
|
.vertical-timeline-step {
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
12
|
+
display: flex;
|
|
13
|
+
position: relative;
|
|
14
|
+
@media (min-width: 768px) {
|
|
13
15
|
min-height: 80px;
|
|
16
|
+
padding-bottom: 20px;
|
|
17
|
+
}
|
|
14
18
|
}
|
|
15
19
|
|
|
16
20
|
.vertical-timeline-step:last-child {
|
|
17
|
-
|
|
18
|
-
|
|
21
|
+
padding-bottom: 0;
|
|
22
|
+
min-height: auto;
|
|
19
23
|
}
|
|
20
24
|
|
|
21
25
|
.vertical-timeline-connector {
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
26
|
+
position: absolute;
|
|
27
|
+
top: 36px;
|
|
28
|
+
left: 17px;
|
|
29
|
+
width: 3px;
|
|
30
|
+
height: calc(100% - 10px);
|
|
31
|
+
/* Adjust based on padding/spacing */
|
|
32
|
+
background-color: #e0e0e0;
|
|
33
|
+
z-index: 0;
|
|
30
34
|
}
|
|
31
35
|
|
|
32
36
|
.vertical-timeline-step:last-child .vertical-timeline-connector {
|
|
33
|
-
|
|
37
|
+
display: none;
|
|
34
38
|
}
|
|
35
39
|
|
|
36
40
|
.vertical-timeline-connector.completed {
|
|
37
|
-
|
|
41
|
+
background-color: #667eea;
|
|
38
42
|
}
|
|
39
43
|
|
|
40
44
|
.vertical-timeline-pill {
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
45
|
+
width: 38px;
|
|
46
|
+
/* Larger pill */
|
|
47
|
+
height: 38px;
|
|
48
|
+
border-radius: 50%;
|
|
49
|
+
background-color: #fff;
|
|
50
|
+
border: 3px solid #d1d5db;
|
|
51
|
+
/* Thicker border */
|
|
52
|
+
display: flex;
|
|
53
|
+
align-items: center;
|
|
54
|
+
justify-content: center;
|
|
55
|
+
font-weight: bold;
|
|
56
|
+
font-size: 16px;
|
|
57
|
+
/* Larger text */
|
|
58
|
+
color: #6b7280;
|
|
59
|
+
z-index: 1;
|
|
60
|
+
margin-right: 16px;
|
|
61
|
+
flex-shrink: 0;
|
|
62
|
+
transition: all 0.3s ease;
|
|
59
63
|
}
|
|
60
64
|
|
|
61
65
|
.vertical-timeline-step.active .vertical-timeline-pill {
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
66
|
+
background-color: #667eea;
|
|
67
|
+
border-color: #667eea;
|
|
68
|
+
color: #fff;
|
|
69
|
+
box-shadow: 0 0 0 5px rgba(244, 119, 56, 0.2);
|
|
70
|
+
/* Enhanced glow */
|
|
71
|
+
transform: scale(1.1);
|
|
72
|
+
/* Slight pulse effect */
|
|
69
73
|
}
|
|
70
74
|
|
|
71
75
|
.vertical-timeline-step.completed .vertical-timeline-pill {
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
76
|
+
background-color: #667eea;
|
|
77
|
+
border-color: #667eea;
|
|
78
|
+
color: #fff;
|
|
75
79
|
}
|
|
76
80
|
|
|
77
81
|
.vertical-timeline-content {
|
|
78
|
-
|
|
79
|
-
|
|
82
|
+
display: flex;
|
|
83
|
+
flex-direction: column;
|
|
84
|
+
@media (min-width: 768px) {
|
|
80
85
|
min-height: 38px;
|
|
81
86
|
margin-top: 10px;
|
|
87
|
+
}
|
|
82
88
|
}
|
|
83
89
|
|
|
84
90
|
.vertical-timeline-label {
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
91
|
+
font-size: 16px;
|
|
92
|
+
color: #4b5563;
|
|
93
|
+
font-weight: 500;
|
|
94
|
+
line-height: normal;
|
|
95
|
+
/* Reset line height */
|
|
96
|
+
@media (min-width: 768px) {
|
|
97
|
+
text-wrap: nowrap;
|
|
98
|
+
}
|
|
90
99
|
}
|
|
91
100
|
|
|
92
101
|
.vertical-timeline-step.active .vertical-timeline-label {
|
|
93
|
-
|
|
94
|
-
|
|
102
|
+
color: #121416;
|
|
103
|
+
font-weight: 700;
|
|
95
104
|
}
|
|
96
105
|
|
|
97
106
|
.vertical-timeline-step.completed .vertical-timeline-label {
|
|
98
|
-
|
|
107
|
+
color: #111827;
|
|
99
108
|
}
|
|
100
109
|
|
|
101
|
-
/* Responsive: Hide on small screens or move to top */
|
|
102
110
|
@media (max-width: 768px) {
|
|
103
|
-
|
|
104
|
-
|
|
111
|
+
.vertical-timeline-container {
|
|
112
|
+
flex-direction: row;
|
|
113
|
+
gap: 12px;
|
|
114
|
+
padding: 12px;
|
|
115
|
+
height: fit-content;
|
|
116
|
+
}
|
|
117
|
+
|
|
118
|
+
.vertical-timeline-wrapper {
|
|
119
|
+
display: flex;
|
|
120
|
+
border-radius: 99999px;
|
|
121
|
+
padding: 0.25rem;
|
|
122
|
+
background-color: #667eea36;
|
|
123
|
+
overflow-x: scroll;
|
|
124
|
+
max-width: 100%;
|
|
125
|
+
}
|
|
126
|
+
|
|
127
|
+
.active {
|
|
128
|
+
background-color: #fff;
|
|
129
|
+
border-radius: 99999px;
|
|
130
|
+
height: 2rem;
|
|
131
|
+
display: flex;
|
|
132
|
+
align-items: center;
|
|
133
|
+
justify-content: center;
|
|
134
|
+
padding-inline: 1rem;
|
|
135
|
+
}
|
|
136
|
+
|
|
137
|
+
.vertical-timeline-step {
|
|
138
|
+
flex-direction: column;
|
|
139
|
+
align-items: center;
|
|
140
|
+
justify-content: center;
|
|
141
|
+
cursor: pointer;
|
|
142
|
+
height: 2rem;
|
|
143
|
+
padding-inline: 24px;
|
|
144
|
+
@media (min-width: 768px) {
|
|
145
|
+
min-width: 120px;
|
|
105
146
|
}
|
|
106
|
-
}
|
|
147
|
+
}
|
|
148
|
+
|
|
149
|
+
/* 🔥 pill becomes tab */
|
|
150
|
+
.vertical-timeline-pill {
|
|
151
|
+
display: none;
|
|
152
|
+
}
|
|
153
|
+
|
|
154
|
+
/* label below */
|
|
155
|
+
.vertical-timeline-content {
|
|
156
|
+
align-items: center;
|
|
157
|
+
}
|
|
158
|
+
|
|
159
|
+
.vertical-timeline-label {
|
|
160
|
+
font-size: 12px;
|
|
161
|
+
text-align: center;
|
|
162
|
+
white-space: nowrap;
|
|
163
|
+
}
|
|
164
|
+
|
|
165
|
+
.vertical-timeline-connector {
|
|
166
|
+
display: none;
|
|
167
|
+
}
|
|
168
|
+
|
|
169
|
+
/* active tab */
|
|
170
|
+
.vertical-timeline-step.active .vertical-timeline-pill {
|
|
171
|
+
background-color: #667eea;
|
|
172
|
+
color: #fff;
|
|
173
|
+
transform: none;
|
|
174
|
+
box-shadow: none;
|
|
175
|
+
}
|
|
176
|
+
|
|
177
|
+
/* completed tab */
|
|
178
|
+
.vertical-timeline-step.completed .vertical-timeline-pill {
|
|
179
|
+
background-color: #667eea;
|
|
180
|
+
color: #fff;
|
|
181
|
+
}
|
|
182
|
+
}
|
package/src/components/body.scss
CHANGED
|
@@ -98,16 +98,23 @@ body {
|
|
|
98
98
|
height: 100%;
|
|
99
99
|
}
|
|
100
100
|
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
101
|
+
.employee-app-homepage-container {
|
|
102
|
+
width: 100%;
|
|
103
|
+
display: flex;
|
|
104
|
+
flex-direction: column;
|
|
105
|
+
gap: 16px;
|
|
106
|
+
padding: 16px;
|
|
107
|
+
|
|
108
|
+
@media (min-width: 768px) {
|
|
109
|
+
padding: 24px;
|
|
109
110
|
}
|
|
110
111
|
|
|
112
|
+
@media (min-width: 1280px) {
|
|
113
|
+
padding-inline: 64px;
|
|
114
|
+
}
|
|
115
|
+
}
|
|
116
|
+
|
|
117
|
+
@screen dt {
|
|
111
118
|
.employee-app-container {
|
|
112
119
|
@apply w-full;
|
|
113
120
|
display: flex;
|
package/src/components/card.scss
CHANGED
|
@@ -200,7 +200,6 @@
|
|
|
200
200
|
}
|
|
201
201
|
|
|
202
202
|
@screen dt {
|
|
203
|
-
|
|
204
203
|
.submit-bar,
|
|
205
204
|
.submit-bar-disabled {
|
|
206
205
|
width: 240px;
|
|
@@ -366,7 +365,7 @@
|
|
|
366
365
|
}
|
|
367
366
|
|
|
368
367
|
/* Remove any default margins that might interfere */
|
|
369
|
-
.label-field-pair
|
|
368
|
+
.label-field-pair > * {
|
|
370
369
|
margin: 0;
|
|
371
370
|
width: 100%;
|
|
372
371
|
}
|
|
@@ -421,7 +420,7 @@
|
|
|
421
420
|
}
|
|
422
421
|
|
|
423
422
|
.home-page-info-banner-wrap {
|
|
424
|
-
margin:
|
|
423
|
+
margin: 0px 16px 24px 16px;
|
|
425
424
|
}
|
|
426
425
|
|
|
427
426
|
@media (min-width: 780px) {
|
|
@@ -507,7 +506,7 @@
|
|
|
507
506
|
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.08);
|
|
508
507
|
}
|
|
509
508
|
|
|
510
|
-
.new-employee-card
|
|
509
|
+
.new-employee-card > * {
|
|
511
510
|
position: relative;
|
|
512
511
|
z-index: 1;
|
|
513
512
|
}
|
|
@@ -917,7 +916,8 @@
|
|
|
917
916
|
display: flex;
|
|
918
917
|
flex-direction: column;
|
|
919
918
|
width: 100%;
|
|
920
|
-
padding-bottom:
|
|
919
|
+
padding-bottom: 16px;
|
|
920
|
+
overflow-y: scroll;
|
|
921
921
|
}
|
|
922
922
|
|
|
923
923
|
.mobile-sidebar-toggle {
|
|
@@ -970,6 +970,7 @@
|
|
|
970
970
|
top: 0;
|
|
971
971
|
left: -100%;
|
|
972
972
|
width: 80%;
|
|
973
|
+
min-width: 250px;
|
|
973
974
|
max-width: 320px;
|
|
974
975
|
height: 100vh;
|
|
975
976
|
background-color: #ffffff;
|
|
@@ -1207,13 +1208,15 @@
|
|
|
1207
1208
|
height: 100%;
|
|
1208
1209
|
display: flex;
|
|
1209
1210
|
flex-direction: column;
|
|
1210
|
-
background-color:
|
|
1211
|
-
border-right: 1px solid
|
|
1212
|
-
transition: width
|
|
1211
|
+
background-color: #ffffff;
|
|
1212
|
+
border-right: 1px solid rgba(0, 0, 0, 0.05);
|
|
1213
|
+
transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1), transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
|
|
1213
1214
|
overflow-x: hidden;
|
|
1214
1215
|
box-sizing: border-box;
|
|
1215
|
-
font-family:
|
|
1216
|
-
box-shadow: 4px 0 24px rgba(0, 0, 0, 0.
|
|
1216
|
+
font-family: inherit;
|
|
1217
|
+
box-shadow: 4px 0 24px rgba(0, 0, 0, 0.04);
|
|
1218
|
+
position: relative;
|
|
1219
|
+
z-index: 101;
|
|
1217
1220
|
}
|
|
1218
1221
|
|
|
1219
1222
|
/* Width Control */
|
|
@@ -1396,6 +1399,14 @@
|
|
|
1396
1399
|
padding: 12px 0;
|
|
1397
1400
|
}
|
|
1398
1401
|
|
|
1402
|
+
.mobile-only {
|
|
1403
|
+
display: none !important;
|
|
1404
|
+
}
|
|
1405
|
+
|
|
1406
|
+
.desktop-only {
|
|
1407
|
+
display: flex !important;
|
|
1408
|
+
}
|
|
1409
|
+
|
|
1399
1410
|
.module-sidebar-toggle {
|
|
1400
1411
|
display: none;
|
|
1401
1412
|
}
|
|
@@ -1405,7 +1416,6 @@
|
|
|
1405
1416
|
}
|
|
1406
1417
|
|
|
1407
1418
|
@media (max-width: 768px) {
|
|
1408
|
-
|
|
1409
1419
|
/* Wrapper becomes a sticky top bar, not a flex column member */
|
|
1410
1420
|
.module-sidebar-wrapper {
|
|
1411
1421
|
position: sticky;
|
|
@@ -1438,91 +1448,100 @@
|
|
|
1438
1448
|
/* Show the horizontal scrollable tab bar */
|
|
1439
1449
|
.mobile-tab-bar {
|
|
1440
1450
|
display: flex;
|
|
1441
|
-
|
|
1442
|
-
|
|
1443
|
-
|
|
1444
|
-
|
|
1445
|
-
|
|
1446
|
-
|
|
1447
|
-
|
|
1448
|
-
|
|
1449
|
-
|
|
1450
|
-
|
|
1451
|
-
|
|
1452
|
-
|
|
1453
|
-
|
|
1454
|
-
|
|
1455
|
-
|
|
1451
|
+
position: fixed;
|
|
1452
|
+
top: 68px;
|
|
1453
|
+
/* Slightly below the top header */
|
|
1454
|
+
left: 12px;
|
|
1455
|
+
z-index: 50;
|
|
1456
|
+
width: 44px;
|
|
1457
|
+
height: 44px;
|
|
1458
|
+
background: #ffffff;
|
|
1459
|
+
border: 1px solid rgba(0, 0, 0, 0.08);
|
|
1460
|
+
border-radius: 50%;
|
|
1461
|
+
justify-content: center;
|
|
1462
|
+
align-items: center;
|
|
1463
|
+
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
|
1464
|
+
color: #1e293b;
|
|
1465
|
+
cursor: pointer;
|
|
1466
|
+
transition: all 0.3s ease;
|
|
1456
1467
|
}
|
|
1457
1468
|
|
|
1458
|
-
.
|
|
1459
|
-
|
|
1469
|
+
.module-sidebar-toggle.hidden {
|
|
1470
|
+
opacity: 0;
|
|
1471
|
+
pointer-events: none;
|
|
1472
|
+
transform: scale(0.8);
|
|
1460
1473
|
}
|
|
1461
1474
|
|
|
1462
|
-
|
|
1463
|
-
|
|
1464
|
-
color: inherit;
|
|
1475
|
+
/* Backdrop Overlay */
|
|
1476
|
+
.module-sidebar-backdrop {
|
|
1465
1477
|
display: block;
|
|
1478
|
+
position: fixed;
|
|
1479
|
+
top: 0;
|
|
1480
|
+
left: 0;
|
|
1481
|
+
width: 100vw;
|
|
1482
|
+
height: 100vh;
|
|
1483
|
+
background: rgba(0, 0, 0, 0.4);
|
|
1484
|
+
backdrop-filter: blur(4px);
|
|
1485
|
+
-webkit-backdrop-filter: blur(4px);
|
|
1486
|
+
z-index: 99;
|
|
1487
|
+
opacity: 0;
|
|
1488
|
+
pointer-events: none;
|
|
1489
|
+
transition: opacity 0.4s ease;
|
|
1466
1490
|
}
|
|
1467
1491
|
|
|
1468
|
-
.
|
|
1469
|
-
opacity:
|
|
1470
|
-
pointer-events:
|
|
1492
|
+
.module-sidebar-backdrop.visible {
|
|
1493
|
+
opacity: 1;
|
|
1494
|
+
pointer-events: auto;
|
|
1471
1495
|
}
|
|
1472
1496
|
|
|
1473
|
-
|
|
1474
|
-
|
|
1475
|
-
|
|
1476
|
-
|
|
1477
|
-
|
|
1478
|
-
|
|
1479
|
-
|
|
1480
|
-
|
|
1481
|
-
|
|
1482
|
-
cursor: pointer;
|
|
1483
|
-
transition: all 0.2s ease;
|
|
1497
|
+
/* Sidebar Wrapper & Mobile Off-canvas Drawer */
|
|
1498
|
+
.module-sidebar-wrapper {
|
|
1499
|
+
position: fixed;
|
|
1500
|
+
top: 0;
|
|
1501
|
+
left: 0;
|
|
1502
|
+
height: 100vh;
|
|
1503
|
+
z-index: 100;
|
|
1504
|
+
pointer-events: none;
|
|
1505
|
+
/* Let clicks pass through when hidden */
|
|
1484
1506
|
}
|
|
1485
1507
|
|
|
1486
|
-
.
|
|
1487
|
-
|
|
1488
|
-
border-color: #bfdbfe;
|
|
1489
|
-
color: #1a67a3;
|
|
1508
|
+
.module-sidebar-wrapper.mobile-open {
|
|
1509
|
+
pointer-events: auto;
|
|
1490
1510
|
}
|
|
1491
1511
|
|
|
1492
|
-
.
|
|
1493
|
-
|
|
1494
|
-
|
|
1495
|
-
|
|
1496
|
-
|
|
1497
|
-
|
|
1498
|
-
|
|
1512
|
+
.premium-sidebar {
|
|
1513
|
+
position: absolute;
|
|
1514
|
+
top: 0;
|
|
1515
|
+
left: 0;
|
|
1516
|
+
height: 100vh;
|
|
1517
|
+
width: 280px !important;
|
|
1518
|
+
/* Force fixed width on mobile drawer */
|
|
1519
|
+
transform: translateX(-100%);
|
|
1520
|
+
box-shadow: 10px 0 30px rgba(0, 0, 0, 0.15);
|
|
1499
1521
|
}
|
|
1500
1522
|
|
|
1501
|
-
.mobile-
|
|
1502
|
-
|
|
1503
|
-
height: 16px;
|
|
1523
|
+
.premium-sidebar.mobile-open {
|
|
1524
|
+
transform: translateX(0);
|
|
1504
1525
|
}
|
|
1505
1526
|
|
|
1506
|
-
.mobile-
|
|
1507
|
-
|
|
1508
|
-
font-weight: 700;
|
|
1509
|
-
color: #6b7280;
|
|
1527
|
+
.mobile-only {
|
|
1528
|
+
display: flex !important;
|
|
1510
1529
|
}
|
|
1511
1530
|
|
|
1512
|
-
.
|
|
1513
|
-
|
|
1531
|
+
.desktop-only {
|
|
1532
|
+
display: none !important;
|
|
1514
1533
|
}
|
|
1515
1534
|
|
|
1516
|
-
.
|
|
1517
|
-
|
|
1518
|
-
|
|
1519
|
-
|
|
1520
|
-
line-height: 1;
|
|
1535
|
+
.brand-name {
|
|
1536
|
+
opacity: 1 !important;
|
|
1537
|
+
width: auto !important;
|
|
1538
|
+
margin-left: 16px !important;
|
|
1521
1539
|
}
|
|
1522
1540
|
|
|
1523
|
-
.
|
|
1524
|
-
|
|
1525
|
-
|
|
1541
|
+
.nav-text {
|
|
1542
|
+
opacity: 1 !important;
|
|
1543
|
+
width: auto !important;
|
|
1544
|
+
margin-left: 16px !important;
|
|
1526
1545
|
}
|
|
1527
1546
|
|
|
1528
1547
|
/* expanded page container stacks vertically */
|
|
@@ -1532,7 +1551,6 @@
|
|
|
1532
1551
|
width: 100% !important;
|
|
1533
1552
|
}
|
|
1534
1553
|
|
|
1535
|
-
|
|
1536
1554
|
/* expanded sidebar NOT hidden on mobile to allow hamburger menu */
|
|
1537
1555
|
|
|
1538
1556
|
/* expanded content full width */
|
|
@@ -1553,7 +1571,7 @@
|
|
|
1553
1571
|
|
|
1554
1572
|
.expanded-page-container {
|
|
1555
1573
|
flex-direction: row;
|
|
1556
|
-
gap:
|
|
1574
|
+
gap: 16px;
|
|
1557
1575
|
}
|
|
1558
1576
|
|
|
1559
1577
|
.expanded-sidebar {
|