@djb25/digit-ui-css 1.0.57 → 1.0.59

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.57",
3
+ "version": "1.0.59",
4
4
  "license": "MIT",
5
5
  "main": "dist/index.css",
6
6
  "author": "satyam",
@@ -46,7 +46,7 @@
46
46
  "postcss-prefixer": "2.1.3",
47
47
  "postcss-preset-env": "^7",
48
48
  "postcss-scss": "3.0.5",
49
- "sass": "^1.26.11"
49
+ "sass": "1.26.11"
50
50
  },
51
51
  "files": [
52
52
  "dist/index.min.css",
@@ -0,0 +1,114 @@
1
+ .assign-knos-modal {
2
+ display: flex;
3
+ flex-direction: column;
4
+ gap: 20px;
5
+ height: inherit;
6
+ overflow-y: auto;
7
+ flex: 1;
8
+
9
+ .filters-grid {
10
+ display: grid;
11
+ grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
12
+ gap: 8px;
13
+ }
14
+
15
+ .form-control {
16
+ height: 48px;
17
+ width: 100%;
18
+ padding: 0 14px;
19
+ border: 1px solid #d1d5db;
20
+ border-radius: 10px;
21
+ background: #fff;
22
+ font-size: 14px;
23
+ outline: none;
24
+
25
+ &:focus {
26
+ border-color: #0b2559;
27
+ }
28
+ }
29
+
30
+ .summary-bar {
31
+ display: flex;
32
+ justify-content: space-between;
33
+ align-items: center;
34
+ background: #f5f7fa;
35
+ padding: 14px 18px;
36
+ border-radius: 12px;
37
+ font-weight: 600;
38
+ }
39
+
40
+ .table-wrapper {
41
+ border: 1px solid #d6d6d6;
42
+ border-radius: 14px;
43
+ overflow: hidden;
44
+ display: flex;
45
+ flex-direction: column;
46
+ }
47
+
48
+ .table-header {
49
+ display: grid;
50
+ grid-template-columns: 90px 1.2fr 1.4fr 1fr 1fr 1fr 0.8fr;
51
+ padding: 16px;
52
+ background: #eef2f7;
53
+ font-weight: 700;
54
+ font-size: 14px;
55
+ color: #0b2559;
56
+ }
57
+
58
+ .table-body {
59
+ max-height: 500px;
60
+ overflow-y: auto;
61
+ }
62
+
63
+ .table-row {
64
+ display: grid;
65
+ grid-template-columns: 90px 1.2fr 1.4fr 1fr 1fr 1fr 0.8fr;
66
+ padding: 16px;
67
+ align-items: center;
68
+ border-top: 1px solid #edf0f4;
69
+ font-size: 14px;
70
+
71
+ &.even {
72
+ background: #fff;
73
+ }
74
+
75
+ &.odd {
76
+ background: #fafbfd;
77
+ }
78
+ }
79
+
80
+ .kno-value {
81
+ font-weight: 600;
82
+ color: #0b2559;
83
+ }
84
+
85
+ .status-badge {
86
+ padding: 6px 10px;
87
+ border-radius: 999px;
88
+ font-size: 12px;
89
+ font-weight: 600;
90
+ display: inline-block;
91
+
92
+ &.pending {
93
+ background: #fef3c7;
94
+ color: #92400e;
95
+ }
96
+
97
+ &.verified {
98
+ background: #dcfce7;
99
+ color: #166534;
100
+ }
101
+
102
+ &.assigned {
103
+ background: #dbeafe;
104
+ color: #1e40af;
105
+ }
106
+ }
107
+
108
+ .empty-state {
109
+ padding: 40px;
110
+ text-align: center;
111
+ color: #6b7280;
112
+ font-weight: 500;
113
+ }
114
+ }
@@ -0,0 +1,199 @@
1
+ .surveyor-dashboard {
2
+ display: flex;
3
+ flex-direction: column;
4
+ gap: 24px;
5
+ width: 100%;
6
+ overflow-y: scroll !important;
7
+
8
+ .stats-wrapper {
9
+ display: flex;
10
+ gap: 18px;
11
+ flex-wrap: wrap;
12
+
13
+ .stat-card {
14
+ flex: 1;
15
+ min-width: 180px;
16
+ background: #ffffff;
17
+ border-radius: 12px;
18
+ padding: 18px;
19
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
20
+
21
+ .stat-title {
22
+ font-size: 13px;
23
+ color: #667085;
24
+ margin-bottom: 8px;
25
+ font-weight: 600;
26
+ }
27
+
28
+ .stat-value {
29
+ font-size: 28px;
30
+ font-weight: 700;
31
+ }
32
+
33
+ &.today {
34
+ border-left: 5px solid #3b82f6;
35
+
36
+ .stat-value {
37
+ color: #3b82f6;
38
+ }
39
+ }
40
+
41
+ &.week {
42
+ border-left: 5px solid #8b5cf6;
43
+
44
+ .stat-value {
45
+ color: #8b5cf6;
46
+ }
47
+ }
48
+
49
+ &.month {
50
+ border-left: 5px solid #10b981;
51
+
52
+ .stat-value {
53
+ color: #10b981;
54
+ }
55
+ }
56
+
57
+ &.pending {
58
+ border-left: 5px solid #f59e0b;
59
+
60
+ .stat-value {
61
+ color: #f59e0b;
62
+ }
63
+ }
64
+ }
65
+ }
66
+
67
+ .charts-wrapper {
68
+ display: grid;
69
+ grid-template-columns: 2fr 1fr;
70
+ gap: 24px;
71
+
72
+ .chart-card {
73
+ background: #ffffff;
74
+ border-radius: 14px;
75
+ padding: 20px;
76
+ box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
77
+
78
+ .chart-title {
79
+ margin-bottom: 20px;
80
+ color: #101828;
81
+ font-size: 18px;
82
+ font-weight: 600;
83
+ }
84
+ }
85
+ }
86
+
87
+ .details-grid {
88
+ display: grid;
89
+ grid-template-columns: 1fr 1fr;
90
+ gap: 4px;
91
+
92
+ .detail-item {
93
+ display: flex;
94
+ align-items: center;
95
+ gap: 6px;
96
+ font-size: 14px;
97
+
98
+ .label {
99
+ font-weight: 600;
100
+ color: #101828;
101
+ }
102
+
103
+ .value {
104
+ color: #475467;
105
+ }
106
+ }
107
+ }
108
+
109
+ .action-wrapper {
110
+ display: flex;
111
+ justify-content: flex-end;
112
+ gap: 16px;
113
+ margin-top: 8px;
114
+ }
115
+
116
+ @media (max-width: 768px) {
117
+ .charts-wrapper {
118
+ grid-template-columns: 1fr;
119
+ }
120
+
121
+ .details-grid {
122
+ grid-template-columns: 1fr;
123
+ }
124
+
125
+ .ekyc-dashboard-header {
126
+ flex-direction: column;
127
+ align-items: flex-start;
128
+
129
+ .avatar {
130
+ width: 64px;
131
+ height: 64px;
132
+ font-size: 22px;
133
+ }
134
+
135
+ .header-content {
136
+ .name {
137
+ font-size: 22px;
138
+ }
139
+ }
140
+ }
141
+
142
+ .stats-wrapper {
143
+ .stat-card {
144
+ min-width: 100%;
145
+ }
146
+ }
147
+
148
+ .action-wrapper {
149
+ flex-direction: column;
150
+ }
151
+ }
152
+ }
153
+
154
+ .ekyc-dashboard-section {
155
+ background: #ffffff;
156
+ border-radius: 14px;
157
+ padding: 24px;
158
+ box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
159
+ }
160
+
161
+ .ekyc-dashboard-header {
162
+ display: flex !important;
163
+ align-items: center !important;
164
+ gap: 18px;
165
+ .avatar {
166
+ width: 80px;
167
+ height: 80px;
168
+ border-radius: 50%;
169
+ background: #0b2559;
170
+ color: #ffffff;
171
+ display: flex !important;
172
+ align-items: center !important;
173
+ justify-content: center;
174
+ font-size: 28px;
175
+ font-weight: 700;
176
+ flex-shrink: 0;
177
+ }
178
+
179
+ .header-content {
180
+ .name {
181
+ margin: 0;
182
+ font-size: 26px;
183
+ font-weight: 700;
184
+ color: #101828;
185
+ }
186
+
187
+ .designation {
188
+ margin-top: 6px;
189
+ color: #667085;
190
+ font-size: 15px;
191
+ }
192
+
193
+ .employee-id {
194
+ margin-top: 8px;
195
+ font-size: 14px;
196
+ color: #475467;
197
+ }
198
+ }
199
+ }
@@ -148,16 +148,12 @@
148
148
  }
149
149
 
150
150
  .header-wrap {
151
- @apply flex mb-md;
151
+ @apply flex;
152
152
 
153
153
  .header-start {
154
154
  margin-right: auto;
155
155
  }
156
156
 
157
- .header-content {
158
- margin-top: 0.2rem;
159
- }
160
-
161
157
  .header-end {
162
158
  margin-left: auto;
163
159
  }
@@ -426,7 +422,7 @@
426
422
  }
427
423
 
428
424
  .header-wrap {
429
- @apply flex mb-md;
425
+ @apply flex;
430
426
 
431
427
  .header-start {
432
428
  margin-right: auto;
@@ -882,68 +878,31 @@
882
878
  stroke: #ffffff;
883
879
  }
884
880
 
885
- .expanded-content {
886
- flex: 1;
887
- background-color: #ffffff;
888
- padding: 40px;
889
- overflow-y: auto;
890
- border-radius: 8px;
891
- height: 100%;
892
- }
893
-
894
881
  .content-header {
895
- border-bottom: 1px solid #e5e7eb;
896
- padding-bottom: 16px;
897
- margin-bottom: 24px;
882
+ display: flex;
883
+ align-items: center;
884
+ justify-content: space-between;
885
+ margin-bottom: 28px;
886
+ padding-bottom: 18px;
887
+ border-bottom: 1px solid #f1f5f9;
898
888
  }
899
889
 
900
890
  .content-title {
901
- font-size: 1.5rem;
902
- font-weight: 700;
903
- color: #1a365d;
904
- /* Dark Blue */
905
891
  margin: 0;
892
+ font-size: 28px;
893
+ font-weight: 800;
894
+ letter-spacing: -0.03em;
895
+ color: #0f172a;
906
896
  display: flex;
907
897
  align-items: center;
908
898
  gap: 12px;
909
899
  }
910
900
 
911
- .content-links-list {
912
- display: flex;
913
- flex-direction: column;
914
- gap: 0;
915
- }
916
-
917
- .content-link-row {
918
- display: flex;
919
- justify-content: space-between;
920
- align-items: center;
921
- padding: 20px 0;
922
- border-bottom: 1px solid #f3f4f6;
923
- cursor: pointer;
924
- transition: color 0.2s;
925
- }
926
-
927
- .content-link-row:hover {
928
- color: #00adef;
929
- }
930
-
931
901
  .link-label {
932
902
  font-size: 0.95rem;
933
903
  font-weight: 500;
934
904
  }
935
905
 
936
- .link-arrow {
937
- display: flex;
938
- align-items: center;
939
- }
940
-
941
- .no-links-msg {
942
- color: #9ca3af;
943
- font-style: italic;
944
- padding: 20px 0;
945
- }
946
-
947
906
  .expanded-page-container {
948
907
  display: flex;
949
908
  flex-direction: column;
@@ -1100,15 +1059,6 @@
1100
1059
  opacity: 1;
1101
1060
  }
1102
1061
 
1103
- .expanded-content {
1104
- flex: 1;
1105
- background-color: #ffffff;
1106
- padding: 30px;
1107
- overflow-y: auto;
1108
- border-radius: 8px;
1109
- box-shadow: -2px 0 10px rgba(0, 0, 0, 0.02);
1110
- }
1111
-
1112
1062
  .content-section-title {
1113
1063
  font-size: 1rem;
1114
1064
  font-weight: 700;
@@ -1120,7 +1070,17 @@
1120
1070
  display: grid;
1121
1071
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
1122
1072
  gap: 20px;
1123
- margin-top: 16px;
1073
+ }
1074
+
1075
+ .expanded-content {
1076
+ flex: 1;
1077
+ height: 100%;
1078
+ overflow-y: auto;
1079
+ background-color: #ffffff;
1080
+ padding: 32px;
1081
+ border-radius: 12px;
1082
+ border: 1px solid #eef2f7;
1083
+ box-shadow: 0 8px 30px rgba(15, 23, 42, 0.04);
1124
1084
  }
1125
1085
 
1126
1086
  .link-wrapper a {
@@ -1130,18 +1090,18 @@
1130
1090
  }
1131
1091
 
1132
1092
  .module-link-card {
1093
+ position: relative;
1133
1094
  display: flex;
1134
1095
  justify-content: space-between;
1135
1096
  align-items: center;
1136
- padding: 24px 20px;
1097
+ padding: 20px;
1137
1098
  background-color: #ffffff;
1138
1099
  border-radius: 12px;
1139
- border: 1px solid #f3f4f6;
1140
- box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
1100
+ border: 1px solid #edf2f7;
1141
1101
  cursor: pointer;
1142
- transition: all 0.3s ease;
1143
- position: relative;
1102
+ transition: all 0.25s ease;
1144
1103
  overflow: hidden;
1104
+ gap: 12px;
1145
1105
  }
1146
1106
 
1147
1107
  .module-link-card::before {
@@ -1151,72 +1111,136 @@
1151
1111
  top: 0;
1152
1112
  bottom: 0;
1153
1113
  width: 4px;
1154
- background: linear-gradient(135deg, #00adef, #1a67a3);
1114
+ height: 100%;
1115
+ background: linear-gradient(180deg, #2563eb, #0ea5e9);
1155
1116
  opacity: 0;
1156
- transition: opacity 0.3s ease;
1117
+ transition: opacity 0.25s ease;
1157
1118
  }
1158
1119
 
1159
1120
  .module-link-card:hover {
1160
- transform: translateY(-4px);
1161
- box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
1121
+ transform: translateY(-2px);
1162
1122
  border-color: #dbeafe;
1123
+ background: #fcfdff;
1124
+ box-shadow: 0 14px 30px rgba(37, 99, 235, 0.08);
1163
1125
  }
1164
1126
 
1165
1127
  .module-link-card:hover::before {
1166
1128
  opacity: 1;
1167
1129
  }
1168
1130
 
1131
+ .module-link-card:hover .link-card-label {
1132
+ color: #2563eb;
1133
+ }
1134
+
1135
+ .module-link-card:hover .link-card-arrow {
1136
+ background: #f8f9fd;
1137
+ border-color: #d3dcf0;
1138
+ color: white;
1139
+ transform: translateX(3px);
1140
+ }
1141
+
1169
1142
  .link-card-info {
1170
1143
  display: flex;
1144
+ align-items: center;
1145
+ justify-content: space-between;
1146
+ gap: 16px;
1147
+ flex: 1;
1148
+ }
1149
+
1150
+ .link-card-copy {
1151
+ display: flex;
1152
+ flex-direction: column;
1171
1153
  gap: 6px;
1172
1154
  }
1173
1155
 
1174
1156
  .link-card-label {
1175
- font-size: 1.05rem;
1176
- font-weight: 600;
1177
- color: #1f2937;
1178
- transition: color 0.3s ease;
1157
+ font-size: 16px;
1158
+ font-weight: 700;
1159
+ color: #0f172a;
1160
+ transition: color 0.25s ease;
1161
+ word-wrap: anywhere;
1179
1162
  }
1180
1163
 
1181
- .module-link-card:hover .link-card-label {
1182
- color: #1a67a3;
1164
+ .link-card-sublabel {
1165
+ font-size: 13px;
1166
+ line-height: 1.5;
1167
+ color: #64748b;
1183
1168
  }
1184
1169
 
1185
1170
  .link-card-count {
1186
1171
  display: inline-flex;
1187
1172
  align-items: center;
1188
1173
  justify-content: center;
1189
- background-color: #eff6ff;
1190
- color: #1a67a3;
1191
- font-size: 0.8rem;
1174
+ min-width: 34px;
1175
+ height: 34px;
1176
+ padding: 0 12px;
1177
+ border-radius: 999px;
1178
+ background: #eff6ff;
1179
+ color: #2563eb;
1180
+ font-size: 13px;
1192
1181
  font-weight: 700;
1193
- padding: 2px 8px;
1194
- border-radius: 9999px;
1195
- width: fit-content;
1182
+ flex-shrink: 0;
1196
1183
  }
1197
1184
 
1198
1185
  .link-card-arrow {
1186
+ width: 42px;
1187
+ height: 42px;
1188
+ border-radius: 14px;
1189
+ background: #f8fafc;
1190
+ border: 1px solid #eef2f7;
1199
1191
  display: flex;
1200
1192
  align-items: center;
1201
1193
  justify-content: center;
1202
- width: 32px;
1203
- height: 32px;
1204
- border-radius: 50%;
1205
- background-color: #f3f4f6;
1206
- color: #9ca3af;
1207
- transition: all 0.3s ease;
1194
+ color: #64748b;
1195
+ transition: all 0.25s ease;
1196
+ flex-shrink: 0;
1208
1197
  }
1209
1198
 
1210
- .module-link-card:hover .link-card-arrow {
1211
- background-color: #dbeafe;
1212
- color: #1a67a3;
1213
- transform: translateX(4px);
1199
+ .no-links-msg {
1200
+ padding: 40px 20px;
1201
+ text-align: center;
1202
+ border-radius: 20px;
1203
+ background: #f8fafc;
1204
+ color: #64748b;
1205
+ font-size: 14px;
1206
+ border: 1px dashed #cbd5e1;
1214
1207
  }
1215
1208
 
1216
- .no-links-msg {
1217
- color: #9ca3af;
1218
- font-style: italic;
1219
- padding: 20px 0;
1209
+ .expanded-content::-webkit-scrollbar {
1210
+ width: 8px;
1211
+ }
1212
+
1213
+ .expanded-content::-webkit-scrollbar-thumb {
1214
+ background: #dbeafe;
1215
+
1216
+ border-radius: 999px;
1217
+ }
1218
+
1219
+ @media (max-width: 768px) {
1220
+ /* expanded content full width */
1221
+ .expanded-content {
1222
+ width: 100% !important;
1223
+ padding: 16px !important;
1224
+ border-radius: 0 !important;
1225
+ box-shadow: none !important;
1226
+ }
1227
+
1228
+ .content-title {
1229
+ font-size: 22px;
1230
+ }
1231
+
1232
+ .module-link-card {
1233
+ padding: 18px;
1234
+ }
1235
+
1236
+ .link-card-label {
1237
+ font-size: 15px;
1238
+ }
1239
+
1240
+ .link-card-arrow {
1241
+ width: 38px;
1242
+ height: 38px;
1243
+ }
1220
1244
  }
1221
1245
 
1222
1246
  :root {
@@ -1574,14 +1598,6 @@
1574
1598
  }
1575
1599
 
1576
1600
  /* expanded sidebar NOT hidden on mobile to allow hamburger menu */
1577
-
1578
- /* expanded content full width */
1579
- .expanded-content {
1580
- width: 100% !important;
1581
- padding: 16px !important;
1582
- border-radius: 0 !important;
1583
- box-shadow: none !important;
1584
- }
1585
1601
  }
1586
1602
 
1587
1603
  @media (min-width: 768px) {
@@ -64,7 +64,7 @@
64
64
  .checkbox-wrap .custom-checkbox svg,
65
65
  .checkbox-wrap .custom-checkbox-emp svg {
66
66
  opacity: 0;
67
- color: #e84335;
67
+ color: #00497e;
68
68
  transition: opacity 0.15s ease;
69
69
  pointer-events: none;
70
70
  }
@@ -72,7 +72,7 @@
72
72
  /* Checked state */
73
73
  .checkbox-wrap input:checked + .custom-checkbox,
74
74
  .checkbox-wrap input:checked + .custom-checkbox-emp {
75
- border-color: #e84335;
75
+ border-color: #00497e;
76
76
  }
77
77
 
78
78
  .checkbox-wrap input:checked + .custom-checkbox svg,
@@ -912,11 +912,6 @@ w .collapsible-card-arrow.open {
912
912
  margin-bottom: 8px;
913
913
  }
914
914
 
915
- .card-with-background {
916
- background: #fafafa;
917
- border-radius: 6px;
918
- }
919
-
920
915
  .additional-grid {
921
916
  display: grid;
922
917
  grid-template-columns: 180px 1fr 180px 1fr;
@@ -43,7 +43,7 @@
43
43
  width: 100%;
44
44
  background: linear-gradient(135deg, #1a67a3, #5282e6 40%, #5495fe);
45
45
  padding: 5px 20px;
46
- border-radius: 11px;
46
+ border-radius: 8px;
47
47
  position: relative;
48
48
  z-index: 99999;
49
49
  display: flex;
@@ -97,8 +97,8 @@
97
97
 
98
98
  .icon {
99
99
  display: block;
100
- color: rgb(117, 117, 117);
101
- fill: rgb(117, 117, 117);
100
+ color: #065297;
101
+ fill: #065297;
102
102
  height: 21px;
103
103
  width: 21px;
104
104
  float: left;