@djb25/digit-ui-css 1.0.65 → 1.0.67

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.
Files changed (12) hide show
  1. package/dist/index.css +1 -1
  2. package/dist/index.min.css +1 -1
  3. package/package.json +1 -1
  4. package/src/components/SurveyorDetailsDashboard.scss +35 -0
  5. package/src/components/multiSelectDropdown.scss +3 -2
  6. package/src/components/selectdropdown.scss +1 -2
  7. package/src/components/summary.scss +40 -3
  8. package/src/components/table.scss +19 -21
  9. package/src/digitv2/components/FormComposerV2.scss +0 -3
  10. package/src/index.scss +0 -4
  11. package/src/pages/citizen/Register.scss +1 -1
  12. package/src/pages/employee/inbox.scss +9 -2
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@djb25/digit-ui-css",
3
- "version": "1.0.65",
3
+ "version": "1.0.67",
4
4
  "license": "MIT",
5
5
  "main": "dist/index.css",
6
6
  "author": "satyam",
package/src/components/SurveyorDetailsDashboard.scss CHANGED
@@ -18,6 +18,37 @@
18
18
  padding: 18px;
19
19
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
20
20
 
21
+ .skeleton {
22
+ background: #e5e7eb;
23
+ border-radius: 4px;
24
+ animation: shimmer 1.5s infinite;
25
+ }
26
+
27
+ .skeleton-text {
28
+ width: 70%;
29
+ height: 16px;
30
+ margin-bottom: 12px;
31
+ }
32
+
33
+ .skeleton-number {
34
+ width: 40%;
35
+ height: 32px;
36
+ }
37
+
38
+ @keyframes shimmer {
39
+ 0% {
40
+ opacity: 0.6;
41
+ }
42
+
43
+ 50% {
44
+ opacity: 1;
45
+ }
46
+
47
+ 100% {
48
+ opacity: 0.6;
49
+ }
50
+ }
51
+
21
52
  .stat-title {
22
53
  font-size: 13px;
23
54
  color: #667085;
@@ -158,6 +189,10 @@
158
189
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
159
190
  }
160
191
 
192
+ .dashboard-card {
193
+ padding: 0 !important;
194
+ }
195
+
161
196
  .ekyc-dashboard-header {
162
197
  display: flex !important;
163
198
  align-items: center !important;
package/src/components/multiSelectDropdown.scss CHANGED
@@ -5,7 +5,7 @@
5
5
  border: 2px solid #e5e5e7;
6
6
  @apply rounded-md relative h-10 w-full;
7
7
  input[type="text"] {
8
- @apply rounded-l-md absolute top-0 left-0 min-h-full opacity-0;
8
+ @apply rounded-l-md absolute top-0 left-0 min-h-full min-w-full opacity-0;
9
9
  &:focus {
10
10
  @apply outline-none;
11
11
  }
@@ -37,7 +37,7 @@
37
37
  box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
38
38
  }
39
39
  input[type="text"] {
40
- @apply opacity-100;
40
+ @apply opacity-100 w-full;
41
41
  }
42
42
  .label {
43
43
  @apply hidden;
@@ -50,6 +50,7 @@
50
50
  width: 100% !important;
51
51
  max-height: 20vmax;
52
52
  overflow: scroll;
53
+ background-color: #fff;
53
54
  @apply absolute z-20;
54
55
  div {
55
56
  @apply flex w-full bg-white;
package/src/components/selectdropdown.scss CHANGED
@@ -114,8 +114,7 @@
114
114
  }
115
115
 
116
116
  .select-wrap {
117
- @apply mb-lg relative;
118
- max-width: 540px;
117
+ @apply relative;
119
118
 
120
119
  .select {
121
120
  @apply relative block w-full h-10 border border-solid border-input-border rounded-md;
package/src/components/summary.scss CHANGED
@@ -24,6 +24,43 @@
24
24
  }
25
25
  }
26
26
  }
27
- .summary-card-margin{
28
- margin:0 24px 20px 0px !important;
29
- }
27
+ .summary-card-margin {
28
+ margin: 0 24px 20px 0px !important;
29
+ }
30
+
31
+ .summary-card {
32
+ background-color: #fff;
33
+ border-radius: 6px;
34
+ padding: 16px 14px;
35
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
36
+
37
+ flex: 1 1 0%;
38
+ min-width: 110px;
39
+
40
+ border: 1px solid #e2e8f0;
41
+
42
+ cursor: pointer;
43
+
44
+ display: flex;
45
+ flex-direction: column;
46
+ justify-content: space-between;
47
+
48
+ transition: all 0.2s ease-in-out;
49
+
50
+ .summary-card-label {
51
+ font-size: 11px;
52
+ color: #64748b;
53
+ font-weight: 600;
54
+ text-transform: uppercase;
55
+ letter-spacing: 0.5px;
56
+
57
+ white-space: nowrap;
58
+ overflow: hidden;
59
+ text-overflow: ellipsis;
60
+ }
61
+ .summary-card-count {
62
+ font-size: 28px;
63
+ font-weight: 700;
64
+ margin-top: 12px;
65
+ }
66
+ }
package/src/components/table.scss CHANGED
@@ -53,26 +53,25 @@
53
53
  .total-records {
54
54
  display: inline-flex;
55
55
  align-items: center;
56
- gap: 6;
56
+ gap: 6px;
57
57
  background: #5282e6;
58
58
  color: #fff;
59
59
  border-radius: 999;
60
60
  padding: 4px 16px;
61
- font-size: 11;
61
+ font-size: 11px;
62
62
  font-weight: 600;
63
63
  box-shadow: 0 1px 4px rgba(37, 99, 235, 0.28);
64
64
  border-radius: 40px;
65
65
  .records {
66
- background: rgba(255, 255, 255, 0.22);
67
66
  border-radius: 999;
68
67
  padding: 1px 7px;
69
- font-size: 11;
68
+ font-size: 11px;
70
69
  font-weight: 700;
71
70
  font-family: "JetBrains Mono", "Fira Code", ui-monospace, monospace;
72
71
  color: #fff;
73
72
  }
74
73
  .title {
75
- font-size: 10;
74
+ font-size: 10px;
76
75
  opacity: 0.88;
77
76
  text-transform: uppercase;
78
77
  letter-spacing: 0.06em;
@@ -84,7 +83,7 @@
84
83
  .search-box-wrapper {
85
84
  display: flex;
86
85
  align-items: center;
87
- gap: 8;
86
+ gap: 8px;
88
87
  flex-wrap: wrap;
89
88
  border: 1px solid #e2e8f0 !important;
90
89
  border-radius: 40px;
@@ -96,7 +95,7 @@
96
95
  align-items: center !important;
97
96
  .icon {
98
97
  position: absolute;
99
- left: 9;
98
+ left: 9px;
100
99
  line-height: 0;
101
100
  pointer-events: none;
102
101
  }
@@ -107,14 +106,14 @@
107
106
  color: #94a3b8;
108
107
  }
109
108
  .search-input {
110
- border-radius: 6;
109
+ border-radius: 6px;
111
110
  padding: 6px 10px 6px 30px;
112
- font-size: 13;
111
+ font-size: 13px;
113
112
  font-family: DM Sans, Segoe UI, ui-sans-serif, sans-serif;
114
113
  color: #0f172a;
115
114
  background: #fff;
116
115
  outline: none;
117
- width: 200;
116
+ width: 200px;
118
117
  transition: border-color 0.15s, box-shadow 0.15s;
119
118
  }
120
119
  .search-input.shadow {
@@ -122,11 +121,11 @@
122
121
  }
123
122
  .close-button {
124
123
  position: absolute;
125
- right: 7;
124
+ right: 7px;
126
125
  background: none;
127
126
  border: none;
128
127
  cursor: pointer;
129
- padding: 2;
128
+ padding: 2px;
130
129
  line-height: 0;
131
130
  color: #94a3b8;
132
131
  display: flex;
@@ -135,13 +134,13 @@
135
134
  .export-button {
136
135
  display: flex !important;
137
136
  align-items: center;
138
- gap: 6;
139
- border-radius: 6;
137
+ gap: 6px;
138
+ border-radius: 6px;
140
139
  padding: 6px 10px;
141
- font-size: 12.5;
140
+ font-size: 12.5px;
142
141
  font-weight: 600;
143
142
  font-family: "DM Sans", "Segoe UI", ui-sans-serif, sans-serif;
144
- line-height: 1;
143
+ line-height: 1px;
145
144
  transition: all 0.15s;
146
145
  border: 1px solid;
147
146
 
@@ -174,18 +173,18 @@
174
173
  width: 100% !important;
175
174
  border-collapse: collapse;
176
175
  border-spacing: 0;
177
- font-size: 13.5;
176
+ font-size: 13.5px;
178
177
  color: #0f172a;
179
178
 
180
179
  .thead {
181
180
  .tr {
182
181
  background: #f8fafc;
183
182
  .th-s-no {
184
- width: 48;
183
+ width: 48px;
185
184
  padding: 12px 8px;
186
185
  text-align: center;
187
186
  border-bottom: 2px solid #cbd5e1;
188
- font-size: 11;
187
+ font-size: 11px;
189
188
  font-weight: 700;
190
189
  text-transform: uppercase;
191
190
  letter-spacing: 0.07em;
@@ -208,7 +207,7 @@
208
207
  div {
209
208
  display: flex;
210
209
  align-items: center;
211
- gap: 5;
210
+ gap: 5px;
212
211
  justify-content: center;
213
212
  width: 100%;
214
213
  .col-head-wrapper {
@@ -254,7 +253,6 @@
254
253
  white-space: nowrap;
255
254
  /* Updated gradient background to match screenshot */
256
255
  background: #1f5fa8;
257
- color: white;
258
256
  @apply font-bold align-middle text-left;
259
257
 
260
258
  &:first-child {
package/src/digitv2/components/FormComposerV2.scss CHANGED
@@ -22,9 +22,6 @@
22
22
  height: 2.5rem;
23
23
  @extend .light-input-border;
24
24
  }
25
- .text-input-width {
26
- max-width: 540px;
27
- }
28
25
 
29
26
  .text-input {
30
27
  @apply relative w-full;
package/src/index.scss CHANGED
@@ -540,10 +540,6 @@ input[type="number"] {
540
540
  }
541
541
  }
542
542
 
543
- .text-input-width {
544
- max-width: 540px;
545
- }
546
-
547
543
  .text-mobile-input-width {
548
544
  max-width: 500px;
549
545
  }
package/src/pages/citizen/Register.scss CHANGED
@@ -478,7 +478,7 @@
478
478
  .registration__input {
479
479
  flex: 1;
480
480
  height: 48px;
481
- border-radius: 12px;
481
+ border-radius: 0.375rem;
482
482
  border: 2px solid #e2e8f0;
483
483
  padding: 0 16px;
484
484
  font-size: 18px;
package/src/pages/employee/inbox.scss CHANGED
@@ -173,7 +173,7 @@
173
173
  }
174
174
 
175
175
  .filter-label {
176
- @apply text-heading-m block flex gap-3 items-center;
176
+ @apply text-heading-m flex gap-3 items-center;
177
177
  padding-bottom: 6px;
178
178
 
179
179
  svg {
@@ -216,6 +216,13 @@
216
216
  }
217
217
  }
218
218
 
219
+ .summary-cards-container {
220
+ display: flex !important;
221
+ gap: 12px;
222
+ flex-wrap: wrap;
223
+ width: "100%";
224
+ }
225
+
219
226
  .hover-button {
220
227
  &:hover {
221
228
  height: 32px;
@@ -856,4 +863,4 @@
856
863
  .col-head.textSecondary {
857
864
  color: #475569;
858
865
  }
859
- }
866
+ }