@djb25/digit-ui-css 1.0.78 → 1.0.80

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/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@djb25/digit-ui-css",
3
- "version": "1.0.78",
3
+ "version": "1.0.80",
4
4
  "license": "MIT",
5
5
  "main": "dist/index.css",
6
6
  "author": "satyam",
@@ -13,6 +13,25 @@
13
13
  gap: 8px;
14
14
  }
15
15
 
16
+ .clear-selected-btn {
17
+ height: 48px;
18
+ background: transparent;
19
+ border: none;
20
+ color: #1f5fa8;
21
+ font-size: 14px;
22
+ font-weight: 600;
23
+ cursor: pointer;
24
+ text-decoration: underline;
25
+ display: inline-flex;
26
+ align-items: center;
27
+ padding: 0 4px;
28
+ width: fit-content;
29
+
30
+ &:hover {
31
+ color: #0b2e5b;
32
+ }
33
+ }
34
+
16
35
  .form-control {
17
36
  height: 48px;
18
37
  width: 100%;
@@ -16,7 +16,7 @@
16
16
  background: #ffffff;
17
17
  border-radius: 12px;
18
18
  padding: 18px;
19
- box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
19
+ position: relative;
20
20
 
21
21
  .skeleton {
22
22
  background: #e5e7eb;
@@ -54,6 +54,7 @@
54
54
  color: #667085;
55
55
  margin-bottom: 8px;
56
56
  font-weight: 600;
57
+ margin-right: 32px;
57
58
  }
58
59
 
59
60
  .stat-value {
@@ -61,36 +62,72 @@
61
62
  font-weight: 700;
62
63
  }
63
64
 
65
+ .stat-icon {
66
+ position: absolute;
67
+ top: 14px;
68
+ right: 14px;
69
+ font-size: 20px;
70
+ opacity: 0.75;
71
+ }
72
+
64
73
  &.today {
65
- border-left: 5px solid #3b82f6;
74
+ border-left: 5px solid #0b2559;
75
+ box-shadow: 0 8px 24px rgba(11, 37, 89, 0.125);
66
76
 
67
77
  .stat-value {
68
- color: #3b82f6;
78
+ color: #0b2559;
79
+ }
80
+ .stat-icon {
81
+ color: #0b2559;
69
82
  }
70
83
  }
71
84
 
72
85
  &.week {
73
- border-left: 5px solid #8b5cf6;
86
+ border-left: 5px solid #3b82f6;
87
+ box-shadow: 0 8px 24px rgba(59, 130, 246, 0.125);
74
88
 
75
89
  .stat-value {
76
- color: #8b5cf6;
90
+ color: #3b82f6;
91
+ }
92
+ .stat-icon {
93
+ color: #3b82f6;
77
94
  }
78
95
  }
79
96
 
80
97
  &.month {
81
98
  border-left: 5px solid #10b981;
99
+ box-shadow: 0 8px 24px rgba(16, 185, 129, 0.125);
82
100
 
83
101
  .stat-value {
84
102
  color: #10b981;
85
103
  }
104
+ .stat-icon {
105
+ color: #10b981;
106
+ }
86
107
  }
87
108
 
88
109
  &.pending {
89
110
  border-left: 5px solid #f59e0b;
111
+ box-shadow: 0 8px 24px rgba(245, 158, 11, 0.125);
90
112
 
91
113
  .stat-value {
92
114
  color: #f59e0b;
93
115
  }
116
+ .stat-icon {
117
+ color: #f59e0b;
118
+ }
119
+ }
120
+
121
+ &.progress {
122
+ border-left: 5px solid #a855f7;
123
+ box-shadow: 0 8px 24px rgba(168, 85, 247, 0.125);
124
+
125
+ .stat-value {
126
+ color: #a855f7;
127
+ }
128
+ .stat-icon {
129
+ color: #a855f7;
130
+ }
94
131
  }
95
132
  }
96
133
  }
@@ -197,6 +234,7 @@
197
234
  display: flex !important;
198
235
  align-items: center !important;
199
236
  gap: 18px;
237
+
200
238
  .avatar {
201
239
  width: 80px;
202
240
  height: 80px;
@@ -232,3 +270,148 @@
232
270
  }
233
271
  }
234
272
  }
273
+
274
+ .ekyc-details-wrapper {
275
+ display: flex;
276
+ flex-wrap: wrap;
277
+ gap: 28px;
278
+ justify-content: space-between;
279
+ align-items: stretch;
280
+ width: 100%;
281
+
282
+ .details-left {
283
+ flex: 1.3;
284
+ min-width: 290px;
285
+
286
+ .details-grid {
287
+ display: grid;
288
+ grid-template-columns: repeat(2, 1fr);
289
+ gap: 16px;
290
+
291
+ .detail-item {
292
+ display: flex;
293
+ flex-direction: column;
294
+ align-items: flex-start;
295
+ gap: 6px;
296
+ padding: 14px 18px;
297
+ background: #F8FAFC;
298
+ border: 1px solid #E2E8F0;
299
+ border-radius: 10px;
300
+ transition: all 0.2s ease;
301
+
302
+ &:hover {
303
+ background: #F1F5F9;
304
+ border-color: #CBD5E1;
305
+ }
306
+
307
+ .label {
308
+ font-size: 11px;
309
+ font-weight: 700;
310
+ color: #64748B;
311
+ text-transform: uppercase;
312
+ letter-spacing: 0.05em;
313
+ }
314
+
315
+ .value {
316
+ font-size: 14px;
317
+ font-weight: 600;
318
+ color: #1E293B;
319
+ word-break: break-all;
320
+ }
321
+ }
322
+ }
323
+ }
324
+
325
+ .details-right {
326
+ flex: 0.9;
327
+ min-width: 290px;
328
+ display: flex;
329
+ flex-direction: column;
330
+ justify-content: center;
331
+ border-left: 1px solid #E2E8F0;
332
+ padding-left: 28px;
333
+
334
+ .download-card {
335
+ display: flex;
336
+ flex-direction: column;
337
+ gap: 14px;
338
+ width: 100%;
339
+ background: #F8FAFC;
340
+ border: 1px solid #E2E8F0;
341
+ border-radius: 12px;
342
+ padding: 20px;
343
+ box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
344
+
345
+ h4 {
346
+ margin: 0;
347
+ font-size: 16px;
348
+ font-weight: 700;
349
+ color: #0B2559;
350
+ }
351
+
352
+ p {
353
+ margin: 0;
354
+ font-size: 13px;
355
+ color: #475569;
356
+ line-height: 1.5;
357
+ }
358
+
359
+ .download-excel-btn {
360
+ display: flex;
361
+ align-items: center;
362
+ justify-content: center;
363
+ gap: 8px;
364
+ padding: 10px 18px;
365
+ background-color: #10B981;
366
+ color: #ffffff;
367
+ border: none;
368
+ border-radius: 8px;
369
+ font-weight: 700;
370
+ font-size: 13.5px;
371
+ cursor: pointer;
372
+ transition: all 0.2s ease;
373
+ width: fit-content;
374
+ align-self: flex-end;
375
+ box-shadow: 0 2px 4px rgba(16, 185, 129, 0.2);
376
+
377
+ &:hover {
378
+ background-color: #059669;
379
+ box-shadow: 0 4px 8px rgba(5, 150, 105, 0.3);
380
+ }
381
+
382
+ &:disabled {
383
+ background-color: #A7F3D0;
384
+ cursor: not-allowed;
385
+ box-shadow: none;
386
+ }
387
+
388
+ svg {
389
+ font-size: 16px;
390
+ }
391
+ }
392
+ }
393
+ }
394
+
395
+ @media (max-width: 768px) {
396
+ flex-direction: column;
397
+ gap: 20px;
398
+
399
+ .details-left {
400
+ .details-grid {
401
+ grid-template-columns: 1fr;
402
+ }
403
+ }
404
+
405
+ .details-right {
406
+ border-left: none;
407
+ border-top: 1px solid #E2E8F0;
408
+ padding-left: 0;
409
+ padding-top: 20px;
410
+ align-items: stretch;
411
+
412
+ .download-card {
413
+ max-width: 100%;
414
+ }
415
+ }
416
+ }
417
+ }
@@ -149,3 +149,25 @@
149
149
  }
150
150
  }
151
151
  }
152
+
153
+ /* WT Collapsible Sidebar Panel */
154
+ .wt-sidebar-panel {
155
+ flex-shrink: 0;
156
+ transition: width 0.25s ease, min-width 0.25s ease;
157
+ overflow: hidden;
158
+ display: flex;
159
+ flex-direction: column;
160
+ gap: 8px;
161
+
162
+ button:focus {
163
+ outline: none;
164
+ box-shadow: 0 0 0 2px rgba(11, 37, 89, 0.4);
165
+ }
166
+ }
167
+
168
+ /* Ensure the table content area can shrink in flexbox */
169
+ .inbox-container > .employee-form-content,
170
+ .inbox-container > div:last-child {
171
+ min-width: 0;
172
+ overflow: visible;
173
+ }
@@ -176,20 +176,24 @@
176
176
  font-size: 13.5px;
177
177
  color: #0f172a;
178
178
 
179
- .thead {
179
+ thead {
180
180
  .tr {
181
181
  background: #f8fafc;
182
182
  .th-s-no {
183
+ background: #f8fafc;
184
+ position: relative;
183
185
  width: 48px;
184
- padding: 12px 8px;
186
+ padding: 12px 14px;
185
187
  text-align: center;
186
188
  border-bottom: 2px solid #cbd5e1;
187
- font-size: 11px;
189
+ font-size: 14px;
188
190
  font-weight: 700;
189
191
  text-transform: uppercase;
190
192
  letter-spacing: 0.07em;
191
193
  color: #475569;
192
194
  white-space: nowrap;
195
+ user-select: none;
196
+ transition: 0.15s;
193
197
  vertical-align: middle;
194
198
  height: 52px;
195
199
  }
@@ -218,9 +218,10 @@
218
218
 
219
219
  .summary-cards-container {
220
220
  display: flex !important;
221
- gap: 12px;
221
+ gap: 10px;
222
222
  flex-wrap: wrap;
223
- width: "100%";
223
+ width: 100%;
224
+ min-width: 0;
224
225
  }
225
226
 
226
227
  .hover-button {