@djb25/digit-ui-css 1.0.24 → 1.0.26

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.
@@ -1,5 +1,14 @@
1
1
  .HomePageWrapper {
2
- margin-top: -25px;
2
+ margin-top: 0;
3
+ padding: 24px 24px 56px;
4
+ margin-left: auto;
5
+ margin-right: auto;
6
+ display: flex;
7
+ flex-direction: column;
8
+ gap: 24px;
9
+ position: relative;
10
+ align-items: stretch;
11
+ z-index: 1;
3
12
 
4
13
  .BannerWithSearch {
5
14
  margin-bottom: 40px;
@@ -33,22 +42,63 @@
33
42
 
34
43
  .WhatsNewSection {
35
44
  @apply m-sm;
36
- padding: 0 15px;
45
+ padding: 24px 32px;
46
+ background: rgba(255, 255, 255, 0.85);
47
+ backdrop-filter: blur(16px);
48
+ -webkit-backdrop-filter: blur(16px);
49
+ box-shadow: 0 16px 32px rgba(0, 0, 0, 0.06), inset 0 1px 0 rgba(255, 255, 255, 1);
50
+ border: 1px solid rgba(255, 255, 255, 0.8);
51
+ border-radius: 20px;
52
+ position: relative;
53
+ margin: 0px !important;
54
+
55
+ &::before {
56
+ content: "";
57
+ position: absolute;
58
+ left: 32px;
59
+ right: 32px;
60
+ top: 0;
61
+ height: 4px;
62
+ border-radius: 999px;
63
+ background: linear-gradient(90deg, rgba(59, 130, 246, 0.1), rgba(59, 130, 246, 0.8), rgba(59, 130, 246, 0.1));
64
+ }
37
65
 
38
66
  .headSection {
39
67
  @apply flex mb-sm justify-between;
68
+ align-items: center;
40
69
 
41
70
  h2 {
42
- @apply text-heading-s font-bold text-text-primary pl-sm;
71
+ @apply text-heading-s font-bold text-text-primary;
72
+ padding-left: 0;
73
+ font-size: 22px;
74
+ color: #1e293b;
43
75
  }
44
76
 
45
77
  p {
46
- @apply text-link text-primary-main font-medium cursor-pointer;
78
+ @apply font-medium cursor-pointer;
79
+ color: #fff;
80
+ background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
81
+ padding: 8px 16px;
82
+ border-radius: 999px;
83
+ font-size: 14px;
84
+ box-shadow: 0 4px 10px rgba(59, 130, 246, 0.3);
85
+ transition: all 0.3s ease;
86
+
87
+ &:hover {
88
+ transform: translateY(-2px);
89
+ box-shadow: 0 6px 14px rgba(59, 130, 246, 0.4);
90
+ background: linear-gradient(135deg, #60a5fa 0%, #3b82f6 100%);
91
+ }
47
92
  }
48
93
  }
49
94
 
50
95
  @media (min-width: 780px) {
51
- padding: 0 15px;
96
+ padding: 32px 36px;
97
+
98
+ &::before {
99
+ left: 36px;
100
+ right: 36px;
101
+ }
52
102
  }
53
103
  }
54
104
 
@@ -63,14 +113,27 @@
63
113
  }
64
114
  }
65
115
 
66
- /* ===== Citizen Theme (Matching Employee Dashboard) ===== */
116
+ /* ===== Citizen Theme ===== */
67
117
  .citizen-app-container {
68
118
  width: 100%;
69
119
  display: flex;
70
120
  flex-direction: column;
71
- gap: 12px;
72
- padding: 12px 24px;
73
- margin-top: 45px;
121
+ gap: 30px;
122
+ padding: 30px 32px 40px;
123
+ margin-top: 10px;
124
+ background: rgba(255, 255, 255, 0.7);
125
+ backdrop-filter: blur(20px);
126
+ -webkit-backdrop-filter: blur(20px);
127
+ border-radius: 24px;
128
+ border: 1px solid rgba(255, 255, 255, 0.8);
129
+ box-shadow: 0 20px 40px rgba(0, 0, 0, 0.05), inset 0 1px 0 rgba(255, 255, 255, 1);
130
+ position: relative;
131
+ overflow: hidden;
132
+ }
133
+
134
+ .citizen-app-container>* {
135
+ position: relative;
136
+ z-index: 1;
74
137
  }
75
138
 
76
139
  .citizen-module-header {
@@ -81,101 +144,181 @@
81
144
 
82
145
  .citizen-header-top-section {
83
146
  width: 100% !important;
84
- background: #7a99f1 !important;
85
- padding: 16px 32px !important;
86
- border-radius: 8px !important;
147
+ background: linear-gradient(135deg, #1e3a8a 0%, #3b82f6 100%) !important;
148
+ padding: 24px 32px !important;
149
+ border-radius: 20px !important;
87
150
  display: flex !important;
88
151
  align-items: center !important;
89
- justify-content: flex-end !important;
90
- min-height: 56px !important;
91
- box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05) !important;
152
+ justify-content: space-between !important;
153
+ min-height: 80px !important;
154
+ box-shadow: 0 15px 30px rgba(59, 130, 246, 0.3) !important;
155
+ position: relative;
156
+ overflow: hidden;
157
+
158
+ &::before {
159
+ content: "";
160
+ position: absolute;
161
+ top: 0;
162
+ left: 0;
163
+ width: 100%;
164
+ height: 100%;
165
+ background: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3z' fill='rgba(255,255,255,0.05)' fill-rule='evenodd'/%3E%3C/svg%3E");
166
+ opacity: 0.8;
167
+ }
168
+
169
+ &::after {
170
+ content: "";
171
+ position: absolute;
172
+ right: -80px;
173
+ top: -80px;
174
+ width: 250px;
175
+ height: 250px;
176
+ background: radial-gradient(circle, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0));
177
+ border-radius: 50%;
178
+ }
92
179
  }
93
180
 
94
181
  .citizen-header-title {
95
182
  margin: 0;
96
- font-size: 24px;
97
- font-weight: 600;
183
+ font-size: 28px;
184
+ font-weight: 800;
98
185
  color: #ffffff;
186
+ letter-spacing: 0.5px;
187
+ text-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
99
188
  }
100
189
  }
101
190
 
102
191
  .citizen-module-grid {
103
192
  display: grid;
104
- grid-template-columns: repeat(4, 1fr);
105
- gap: 16px;
193
+ grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
194
+ gap: 24px;
106
195
  padding: 0;
107
196
  width: 100%;
197
+ }
198
+ }
108
199
 
109
- @media (max-width: 1024px) {
110
- grid-template-columns: repeat(3, 1fr);
111
- }
200
+ /* ============================================================
201
+ .citizen-service-card — MUST be at root level (not nested
202
+ inside .HomePageWrapper) so BEM & selectors compile correctly
203
+ ============================================================ */
204
+ .citizen-service-card {
205
+ background: #ffffff !important;
206
+ border: 0.5px solid rgba(0, 0, 0, 0.08) !important;
207
+ border-radius: 16px !important;
208
+ padding: 18px 16px !important;
209
+ display: flex !important;
210
+ flex-direction: row !important;
211
+ align-items: center !important;
212
+ gap: 14px !important;
213
+ cursor: pointer !important;
214
+ min-height: 82px !important;
215
+ overflow: hidden !important;
216
+ position: relative;
217
+ transition: border-color 0.25s ease,
218
+ transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1),
219
+ background 0.2s ease !important;
220
+
221
+ &:hover {
222
+ border-color: #93c5fd !important;
223
+ transform: translateY(-3px) !important;
224
+ background: #f8fbff !important;
225
+ }
112
226
 
113
- @media (max-width: 768px) {
114
- grid-template-columns: repeat(2, 1fr);
115
- }
227
+ &__icon {
228
+ width: 44px !important;
229
+ height: 44px !important;
230
+ flex-shrink: 0 !important;
231
+ background: #eff6ff;
232
+ border-radius: 12px;
233
+ display: flex !important;
234
+ align-items: center !important;
235
+ justify-content: center !important;
236
+ padding: 10px;
237
+ transition: transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1),
238
+ background 0.25s ease;
116
239
 
117
- @media (max-width: 480px) {
118
- grid-template-columns: repeat(2, 1fr);
119
- gap: 10px;
240
+ svg {
241
+ width: 22px !important;
242
+ height: 22px !important;
243
+ fill: #2563eb !important;
120
244
  }
121
245
  }
122
246
 
123
- .citizen-service-card {
124
- background: #ffffff !important;
125
- border-radius: 12px !important;
126
- box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05) !important;
127
- padding: 24px !important;
247
+ &:hover &__icon {
248
+ background: #dbeafe;
249
+ transform: scale(1.1) rotate(4deg);
250
+ }
251
+
252
+ /* Fixed height + overflow:hidden is what clips the sliding text */
253
+ &__content {
254
+ flex: 1;
255
+ position: relative;
256
+ height: 40px;
257
+ overflow: hidden;
258
+ display: block;
259
+ /* NOT flex — flex breaks absolute child stacking */
260
+ }
261
+
262
+ /* Label: visible by default, slides out upward on hover */
263
+ &__label {
264
+ position: absolute !important;
265
+ inset: 0 !important;
128
266
  display: flex !important;
129
- flex-direction: row !important;
130
267
  align-items: center !important;
131
- justify-content: flex-start !important;
132
- cursor: pointer !important;
133
- transition: all 0.2s ease !important;
134
- border: 1px solid #eeeeee !important;
135
- min-height: 100px !important;
136
- gap: 16px !important;
137
-
138
- &:hover {
139
- box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
140
- transform: translateY(-2px);
141
- }
142
-
143
- &__icon {
144
- width: 40px !important;
145
- height: 40px !important;
146
- display: flex !important;
147
- align-items: center !important;
148
- justify-content: center !important;
149
- flex-shrink: 0 !important;
268
+ margin: 0 !important;
269
+ font-size: 14px !important;
270
+ font-weight: 500 !important;
271
+ color: #1e293b !important;
272
+ line-height: 1.35 !important;
273
+ transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1),
274
+ opacity 0.25s ease !important;
275
+ transform: translateY(0);
276
+ opacity: 1;
277
+ }
150
278
 
151
- svg {
152
- width: 100% !important;
153
- height: 100% !important;
154
- }
279
+ /* Description: hidden below by default, slides up into view on hover */
280
+ &__description {
281
+ position: absolute !important;
282
+ inset: 0 !important;
283
+ display: flex !important;
284
+ align-items: center !important;
285
+ margin: 0 !important;
286
+ font-size: 12.5px !important;
287
+ font-weight: 400 !important;
288
+ color: #2563eb !important;
289
+ line-height: 1.4 !important;
290
+ transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1),
291
+ opacity 0.25s ease !important;
292
+ transform: translateY(110%);
293
+ /* starts hidden below */
294
+ opacity: 0;
295
+ }
155
296
 
156
- img {
157
- width: 100% !important;
158
- height: 100% !important;
159
- }
160
- }
297
+ &:hover &__label {
298
+ transform: translateY(-110%);
299
+ /* slides out upward */
300
+ opacity: 0;
301
+ }
161
302
 
162
- &__label {
163
- margin: 0 !important;
164
- font-size: 16px !important;
165
- font-weight: 500 !important;
166
- color: #333333 !important;
167
- text-align: left !important;
168
- width: auto !important;
169
- flex: 1 !important;
170
- }
303
+ &:hover &__description {
304
+ transform: translateY(0);
305
+ /* slides in from below */
306
+ opacity: 1;
171
307
  }
172
308
  }
173
309
 
310
+ /* ============================================================
311
+ Rest of the file — unchanged
312
+ ============================================================ */
174
313
  @media (min-width: 780px) {
175
314
  .SideBarStatic {
176
- width: 219px;
177
- background: theme(colors.white);
178
- margin-top: 22px;
315
+ display: flex;
316
+ align-items: flex-start;
317
+ position: sticky;
318
+ top: 58px;
319
+ height: calc(100vh - 58px);
320
+ min-height: calc(100vh - 58px);
321
+ align-self: flex-start;
179
322
  }
180
323
  }
181
324
 
@@ -186,18 +329,44 @@
186
329
  }
187
330
 
188
331
  .HomePageContainer {
189
- @media (min-width: 780px) {
190
- display: flex;
191
- width: calc(100% - 219px);
192
- height: calc(100%-30px);
332
+ flex: 1;
333
+ min-width: 0;
334
+ position: relative;
335
+ overflow: hidden;
336
+ padding-bottom: 40px;
337
+
338
+ &::before {
339
+ content: "";
340
+ position: absolute;
341
+ right: -5%;
342
+ top: -5%;
343
+ width: 50vw;
344
+ height: 50vw;
345
+ background: radial-gradient(circle, rgba(59, 130, 246, 0.12) 0%, rgba(59, 130, 246, 0) 70%);
346
+ border-radius: 50%;
347
+ opacity: 0.8;
348
+ z-index: 0;
349
+ pointer-events: none;
193
350
  }
194
- }
195
351
 
196
- .moduleLinkHomePage {
197
- @media (min-width: 780px) {
198
- width: calc(100% - 219px);
352
+ &::after {
353
+ content: "";
354
+ position: absolute;
355
+ left: -10%;
356
+ bottom: -10%;
357
+ width: 60vw;
358
+ height: 60vw;
359
+ background: radial-gradient(circle, rgba(147, 197, 253, 0.15) 0%, rgba(147, 197, 253, 0) 70%);
360
+ border-radius: 50%;
361
+ opacity: 0.8;
362
+ z-index: 0;
363
+ pointer-events: none;
199
364
  }
365
+ }
200
366
 
367
+ .moduleLinkHomePage {
368
+ flex: 1;
369
+ min-width: 0;
201
370
  margin-top: -25px;
202
371
 
203
372
  img {
@@ -238,6 +407,7 @@
238
407
  @screen dt {
239
408
  .HomePageWrapper {
240
409
  width: 100%;
410
+ padding: 28px 32px 64px;
241
411
 
242
412
  .BannerWithSearch {
243
413
  margin-bottom: 56px;
@@ -262,7 +432,6 @@
262
432
  width: 100%;
263
433
  }
264
434
  }
265
-
266
435
  }
267
436
 
268
437
  .moduleLinkHomePage {
@@ -285,4 +454,15 @@
285
454
  .moduleLinkHomePageModuleLinks {
286
455
  width: 100%;
287
456
  }
457
+ }
458
+
459
+ .citizen-home-container {
460
+ display: flex;
461
+ width: 100%;
462
+ align-items: flex-start;
463
+ justify-content: flex-start;
464
+ }
465
+
466
+ .citizen .citizen-home-container {
467
+ justify-content: flex-start;
288
468
  }
@@ -101,6 +101,7 @@
101
101
  }
102
102
 
103
103
  .filter-form {
104
+ flex: 1;
104
105
  .filter-card {
105
106
  border-radius: 6px;
106
107
  @apply bg-white min-h-full;
@@ -151,6 +152,7 @@
151
152
  display: flex;
152
153
  flex-direction: column;
153
154
  gap: 16px;
155
+ scrollbar-width: none;
154
156
 
155
157
  .filter {
156
158
  .filter-card {
@@ -74,6 +74,26 @@
74
74
  }
75
75
  }
76
76
 
77
+ .no-scrollbar::-webkit-scrollbar {
78
+ display: none;
79
+ }
80
+ .no-scrollbar {
81
+ scrollbar-width: none;
82
+ }
83
+
84
+ .hide-x-scrollbar {
85
+ overflow-x: auto;
86
+ }
87
+
88
+ .hide-x-scrollbar::-webkit-scrollbar:horizontal {
89
+ display: none;
90
+ }
91
+
92
+ /* Firefox */
93
+ .hide-x-scrollbar {
94
+ scrollbar-width: none;
95
+ }
96
+
77
97
  .employee-main-application-details {
78
98
  width: 100%;
79
99
  overflow-y: scroll;
@@ -426,8 +446,6 @@
426
446
  display: flex;
427
447
  align-items: center;
428
448
  justify-content: space-between;
429
- /* Space between Greeting and Search */
430
- flex-wrap: wrap;
431
449
  gap: 20px;
432
450
  overflow: hidden;
433
451
 
@@ -439,17 +457,12 @@
439
457
  box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.4), inset 0 -2px 6px rgba(0, 0, 0, 0.1), 0 12px 30px rgba(97, 119, 236, 0.2);
440
458
 
441
459
  .header-icon-area {
442
- position: absolute;
443
- top: 41%;
444
- right: 20px;
445
- transform: translateY(-50%);
446
- opacity: 0.5;
460
+ opacity: 0.8;
447
461
  pointer-events: none;
448
462
  max-width: 157px;
449
463
 
450
464
  @media (max-width: 768px) {
451
- right: 10px;
452
- transform: translateY(-50%) scale(0.8);
465
+ transform: scale(0.8);
453
466
  }
454
467
  }
455
468
 
@@ -874,12 +887,9 @@
874
887
  }
875
888
  }
876
889
 
877
- /* --- TOP INFO CARDS: NEWS & RECENT ACTIVITY --- */
878
-
879
890
  .top-info-cards-wrapper {
880
891
  display: flex;
881
892
  flex-direction: column;
882
- /* Stack natively on mobile */
883
893
  gap: 20px;
884
894
  width: 100%;
885
895
  margin-bottom: 10px;
@@ -913,6 +923,7 @@
913
923
  margin-bottom: 8px;
914
924
  padding: 0 16px;
915
925
  }
926
+
916
927
  .custom-tab-btn {
917
928
  padding: 12px 16px;
918
929
  background: none;
@@ -977,6 +988,7 @@
977
988
  color: #64748b;
978
989
  white-space: nowrap;
979
990
  }
991
+
980
992
  .compact-right-text.danger {
981
993
  color: #ef4444;
982
994
  font-weight: 600;
@@ -988,6 +1000,7 @@
988
1000
  padding: 12px 16px;
989
1001
  border-bottom: 1px solid #f1f5f9;
990
1002
  }
1003
+
991
1004
  .ra-compact-item:last-child {
992
1005
  border-bottom: none;
993
1006
  }
@@ -1009,6 +1022,7 @@
1009
1022
  border-radius: 4px;
1010
1023
  margin-right: 8px;
1011
1024
  }
1025
+
1012
1026
  .ra-footer {
1013
1027
  margin-top: auto;
1014
1028
  padding-top: 16px;
@@ -1093,12 +1107,14 @@
1093
1107
  background: #f1f5f9;
1094
1108
  color: #ef4444;
1095
1109
  }
1110
+
1096
1111
  .ra-timeline {
1097
1112
  flex: 1;
1098
1113
  overflow-y: auto;
1099
1114
  min-height: 0;
1100
1115
  padding-right: 8px;
1101
1116
  }
1117
+
1102
1118
  .ra-timeline-modal {
1103
1119
  padding: 24px;
1104
1120
  overflow-y: auto;
@@ -1502,6 +1518,7 @@
1502
1518
  grid-template-columns: repeat(4, 1fr) !important;
1503
1519
  gap: 16px;
1504
1520
  width: 100%;
1521
+ margin-bottom: 40px;
1505
1522
  }
1506
1523
 
1507
1524
  .engagement-custom-card {
@@ -1528,6 +1545,7 @@
1528
1545
 
1529
1546
  .complaint-links-container {
1530
1547
  margin-top: auto;
1548
+
1531
1549
  .employeeCard-link {
1532
1550
  font-size: 13px;
1533
1551
  padding: 4px 0;