@djb25/digit-ui-css 1.0.34 → 1.0.36

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.
@@ -2,168 +2,311 @@
2
2
  position: fixed;
3
3
  top: 0;
4
4
  width: 100%;
5
- padding: 10px 58px;
5
+ padding: 0 58px;
6
6
  background: white;
7
7
  box-shadow: rgba(0, 0, 0, 0.24) 0 1px 4px;
8
8
  z-index: 9999999;
9
- @apply flex items-center;
9
+ display: flex;
10
+ align-items: center;
11
+ height: 64px !important;
12
+ max-height: 64px !important;
13
+ overflow: hidden;
14
+
15
+ @media (max-width: 640px) {
16
+ padding: 8px 16px;
17
+ }
10
18
 
11
19
  .topbar-content {
12
20
  display: flex;
13
21
  justify-content: space-between;
14
22
  align-items: center;
15
23
  width: 100%;
24
+ gap: 12px;
25
+ height: 52px;
16
26
  }
17
27
 
18
- img {
19
- display: inline;
28
+ /* Swachh Bharat Icons - Fixed size to prevent explosion */
29
+ .spect-icon,
30
+ .state {
31
+ height: 42px !important;
32
+ max-height: 42px !important;
33
+ width: auto !important;
34
+ object-fit: contain !important;
35
+ flex-shrink: 0 !important;
36
+ margin-left: 10px !important;
37
+ display: block !important;
38
+ }
20
39
 
21
- &.city {
22
- height: 60px;
23
- }
40
+ .brand {
41
+ display: flex;
42
+ align-items: center;
43
+ gap: 12px;
44
+ cursor: pointer;
45
+ flex-shrink: 0;
24
46
 
25
- &.spect-icon {
26
- width: auto;
27
- padding-right: 20px;
28
- max-height: 50px;
47
+ @media (max-width: 640px) {
48
+ gap: 8px;
29
49
  }
30
50
 
31
- &.state {
51
+ .brand-mark {
52
+ width: 50px;
32
53
  height: 50px;
33
- max-height: 20px;
34
- width: auto;
54
+ border-radius: 10px;
55
+ background: #065297;
56
+ display: flex;
57
+ align-items: center;
58
+ justify-content: center;
59
+ box-shadow: 0 4px 14px rgba(12, 35, 64, 0.35);
60
+ overflow: hidden;
61
+ flex-shrink: 0;
62
+
63
+ @media (max-width: 640px) {
64
+ width: 36px;
65
+ height: 36px;
66
+ border-radius: 8px;
67
+ }
68
+
69
+ img {
70
+ width: 100%;
71
+ height: 100%;
72
+ object-fit: contain;
73
+ }
35
74
  }
36
- }
37
75
 
38
- .ulb {
39
- font-weight: bold;
40
- display: inline-block;
76
+ .btx {
77
+ display: flex;
78
+ flex-direction: column;
79
+ justify-content: center;
80
+
81
+ h1 {
82
+ font-family: "'Crimson Pro', serif";
83
+ font-size: 17px;
84
+ font-weight: 700;
85
+ color: #003366;
86
+ margin: 0;
87
+ line-height: 1.2;
88
+
89
+ @media (max-width: 640px) {
90
+ font-size: 14px;
91
+ }
92
+
93
+ @media (max-width: 360px) {
94
+ font-size: 12px;
95
+ }
96
+ }
97
+
98
+ p {
99
+ font-size: 10.5px;
100
+ font-weight: 500;
101
+ color: #0070b4;
102
+ margin: 0;
103
+ line-height: 1.2;
104
+
105
+ @media (max-width: 640px) {
106
+ font-size: 8.5px;
107
+ }
108
+
109
+ @media (max-width: 360px) {
110
+ display: none;
111
+ }
112
+ }
113
+ }
41
114
  }
42
115
 
43
- .right {
44
- float: right;
45
- position: relative;
116
+ .right,
117
+ .flex-right {
118
+ display: flex;
119
+ align-items: center;
120
+ gap: 15px;
121
+ margin-left: auto;
46
122
 
47
- svg {
48
- display: inline;
123
+ @media (max-width: 768px) {
124
+ gap: 8px;
49
125
  }
50
126
 
51
- .user-img-txt {
52
- background: theme(colors.primary.main);
53
- padding: 10px 15px;
54
- border-radius: 2px;
55
- color: white;
56
- height: 43px;
57
- width: 43px;
58
- font-weight: 700;
59
- text-align: center;
127
+ .spect-icon,
128
+ .state {
129
+ @media (max-width: 1200px) {
130
+ display: none !important;
131
+ }
60
132
  }
61
- }
62
133
 
63
- .left {
64
- float: left;
65
- }
134
+ .financial-year-wrapper {
135
+ @media (max-width: 1050px) {
136
+ display: none !important;
137
+ }
138
+ }
66
139
 
67
- .w-80 {
68
- width: 70%;
69
- }
140
+ .v-divider {
141
+ width: 2px;
142
+ height: 28px;
143
+ background-color: rgb(203, 213, 225);
70
144
 
71
- .width-20 {
72
- width: 30%;
145
+ @media (max-width: 768px) {
146
+ display: none;
147
+ }
148
+ }
73
149
  }
150
+ }
74
151
 
75
- .margin-top-6 {
76
- margin-top: 6px;
77
- }
152
+ .user-profile-pill {
153
+ display: flex;
154
+ align-items: center;
155
+ padding: 4px 16px 4px 4px;
156
+ border: 1px solid #d6d6d6;
157
+ border-radius: 50px !important;
158
+ background: white;
159
+ cursor: pointer;
160
+ gap: 12px;
161
+ transition: all 0.2s ease;
162
+ min-width: fit-content;
78
163
 
79
- .margin-right-30 {
80
- margin-right: 30px;
164
+ @media (max-width: 900px) {
165
+ padding: 4px;
166
+ gap: 0;
81
167
  }
82
168
 
83
- .margin-top-10 {
84
- margin-top: 10px;
169
+ &:hover {
170
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
171
+ border-color: #00497e;
85
172
  }
86
173
 
87
- .icon {
88
- display: block;
89
- color: rgb(117, 117, 117);
90
- fill: rgb(117, 117, 117);
91
- height: 21px;
92
- width: 21px;
174
+ .user-profile-avatar,
175
+ .user-profile-img {
176
+ width: 42px;
177
+ height: 42px;
178
+ border-radius: 50%;
179
+ flex-shrink: 0;
180
+
181
+ @media (max-width: 640px) {
182
+ width: 32px;
183
+ height: 32px;
184
+ }
93
185
  }
94
186
 
95
- .column-gap-15 {
96
- column-gap: 15px;
187
+ .user-profile-avatar {
188
+ background: #00497e;
189
+ color: white;
190
+ display: flex;
191
+ align-items: center;
192
+ justify-content: center;
193
+ font-weight: 700;
194
+ font-size: 18px;
195
+
196
+ @media (max-width: 640px) {
197
+ font-size: 14px;
198
+ }
97
199
  }
98
200
 
99
- .column-gap-5 {
100
- column-gap: 5px;
201
+ .user-profile-info {
202
+ display: flex;
203
+ flex-direction: column;
204
+ justify-content: center;
205
+ line-height: 1.2;
206
+
207
+ @media (max-width: 900px) {
208
+ display: none;
209
+ }
210
+
211
+ .user-profile-name {
212
+ font-weight: 700;
213
+ font-size: 15px;
214
+ color: #0b111d;
215
+ white-space: nowrap;
216
+ }
217
+
218
+ .user-profile-details {
219
+ font-size: 13px;
220
+ color: #6b778c;
221
+ font-weight: 400;
222
+ white-space: nowrap;
223
+ }
101
224
  }
102
225
 
103
- .select-wrap,
104
- .employee-select-wrap {
105
- margin-bottom: 0px;
226
+ .chevron-icon {
227
+ margin-left: 2px;
228
+ color: #6b778c;
229
+ flex-shrink: 0;
106
230
 
107
- .profile-dropdown--item {
108
- span {
109
- white-space: pre;
110
- }
231
+ @media (max-width: 900px) {
232
+ display: none;
111
233
  }
112
234
  }
113
235
  }
114
236
 
115
- .cp {
237
+ /* Unified TopBar Pills (City, FY, Language) */
238
+ .language-selector-wrapper,
239
+ .city-selector-wrapper,
240
+ .financial-year-wrapper {
241
+ display: flex;
242
+ align-items: center;
243
+ gap: 10px;
244
+ padding: 8px 14px;
245
+ border: 1px solid #e5e7eb;
246
+ border-radius: 8px;
247
+ background: #ffffff;
116
248
  cursor: pointer;
249
+ transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
250
+ min-width: fit-content;
251
+ justify-content: center;
252
+ box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
117
253
 
118
- .hamburger {
119
- display: none;
254
+ @media (max-width: 768px) {
255
+ padding: 6px 10px;
256
+ gap: 6px;
120
257
  }
121
258
 
122
- @media (max-width: 780px) {
123
- .hamburger {
259
+ &:hover {
260
+ border-color: #00497e;
261
+ background-color: #f8fafc;
262
+ box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
263
+ }
264
+
265
+ .language-code,
266
+ .city-label {
267
+ @media (max-width: 768px) {
124
268
  display: none;
125
269
  }
126
270
  }
127
- }
128
271
 
129
- .citizen {
130
- .right {
131
- margin-top: 5px;
132
- margin-bottom: 5px;
272
+ span {
273
+ font-weight: 500;
274
+ font-size: 14px;
275
+ color: #111827;
276
+ letter-spacing: 0.01em;
133
277
  }
134
278
 
135
- .topbar-select-wrap {
136
- margin-bottom: 0;
137
- }
279
+ .chevron-icon {
280
+ width: 12px;
281
+ height: 12px;
282
+ color: #4b5563;
283
+ transition: transform 0.2s ease;
284
+ margin-top: 1px;
138
285
 
139
- .flex-between {
140
- @apply flex items-center justify-between;
286
+ @media (max-width: 768px) {
287
+ display: none;
288
+ }
141
289
  }
142
- }
143
290
 
144
- .profile-dropdown--item {
145
- display: flex;
146
- flex-direction: row;
147
- padding: 10px;
148
- column-gap: 10px;
149
- color: theme(colors.text.secondary);
291
+ svg:not(.chevron-icon):not(.flag-icon) {
292
+ width: 20px;
293
+ height: 20px;
294
+ color: #1f2937;
295
+ flex-shrink: 0;
150
296
 
151
- &:hover {
152
- background: theme(colors.grey.mid);
297
+ @media (max-width: 640px) {
298
+ width: 16px;
299
+ height: 16px;
300
+ }
153
301
  }
154
302
  }
155
303
 
156
- .flex-right {
157
- @apply flex items-center justify-end;
158
- min-width: 85px;
159
- }
160
-
161
- video::-webkit-media-controls-panel {
162
- top: 55%;
163
- position: absolute;
164
- width: 100%;
165
- }
304
+ .language-selector-container,
305
+ .city-selector-container {
306
+ display: flex;
307
+ align-items: center;
166
308
 
167
- .topbarOptionsClassName {
168
- right: -3rem !important;
309
+ &.open .chevron-icon {
310
+ transform: rotate(180deg);
311
+ }
169
312
  }
@@ -20,7 +20,7 @@ body {
20
20
 
21
21
  .link-label {
22
22
  @extend .light-primary;
23
- @apply block mb-md ml-md cursor-pointer;
23
+ @apply block cursor-pointer;
24
24
 
25
25
  &:hover {
26
26
  @extend .light-text-color-primary;
@@ -32,8 +32,4 @@ body {
32
32
  margin-left: 0;
33
33
  @apply text-heading-l-dt;
34
34
  }
35
-
36
- .link-label {
37
- margin-left: 0;
38
- }
39
35
  }
package/src/index.scss CHANGED
@@ -304,6 +304,7 @@ input[readonly] {
304
304
  }
305
305
 
306
306
  .disabled {
307
+ background-color: #eee;
307
308
  @apply border-grey-dark text-grey-dark !important;
308
309
  pointer-events: none !important;
309
310
  }
@@ -519,8 +520,6 @@ input[type="number"] {
519
520
  }
520
521
 
521
522
  .submit-bar-search {
522
- margin-top: 32px;
523
- margin-left: 16px;
524
523
  max-width: 256px;
525
524
  }
526
525
 
@@ -740,7 +739,7 @@ input[type="number"] {
740
739
 
741
740
  .employee-app-wrapper {
742
741
  min-height: calc(100vh - 8em);
743
- height: calc(100vh - 110px);
742
+ height: calc(100vh - 102px);
744
743
  }
745
744
 
746
745
  .ws-custom-wrapper {
@@ -232,10 +232,8 @@
232
232
  background-color: #e2e8f0;
233
233
  color: #5d6774;
234
234
  }
235
- }
236
235
 
237
- @media (max-width: 480px) {
238
- .generic-button {
236
+ @media (max-width: 768px) {
239
237
  padding: 0 12px;
240
238
  }
241
239
  }
@@ -259,6 +257,110 @@
259
257
  @apply inline ml-sm p-sm bg-primary-main rounded-full text-white text-heading-s align-middle text-center font-regular;
260
258
  }
261
259
 
260
+ .inbox-container {
261
+ .search-container {
262
+ .search-complaint-container {
263
+ border-radius: 6px;
264
+ width: 100%;
265
+ margin: auto;
266
+ @apply flex flex-col items-start mb-md bg-white p-md;
267
+
268
+ .complaint-header {
269
+ display: flex;
270
+ @apply flex justify-between w-full;
271
+ margin-bottom: 20px;
272
+ }
273
+
274
+ .complaint-input-container {
275
+ /* display: inline-block !important; */
276
+ display: grid;
277
+ grid-template-columns: 33.33% 33.33% 33.33%;
278
+
279
+ &.for-pt {
280
+ &.for-search {
281
+ grid-template-columns: 25% 25% 25% 25%;
282
+
283
+ .input-fields:nth-child(3n) {
284
+ @apply mr-md !important;
285
+ }
286
+
287
+ .input-fields:nth-child(4n) {
288
+ margin-right: 0 !important;
289
+ }
290
+
291
+ .search-submit-wrapper {
292
+ grid-column: 4/5;
293
+ /* margin-top: 56px;*/
294
+ max-width: unset;
295
+ margin-left: unset;
296
+ }
297
+ }
298
+ }
299
+
300
+ .search-submit-wrapper {
301
+ grid-column: 3/4;
302
+ margin-left: 50%;
303
+ max-width: 50%;
304
+ grid-column: 3/4;
305
+ @apply flex flex-col justify-center text-center;
306
+
307
+ .submit-bar-search {
308
+ margin-top: unset;
309
+ width: 100%;
310
+ margin-bottom: 20px;
311
+ margin-left: unset;
312
+ max-width: 100%;
313
+ width: 100%;
314
+ }
315
+ }
316
+
317
+ .input-fields {
318
+ /*width: calc(50% - 16px);*/
319
+
320
+ @apply inline-block mr-md !important;
321
+
322
+ .inbox-search-form-error {
323
+ padding-top: 0;
324
+ margin-top: 0;
325
+ @apply absolute;
326
+ }
327
+ }
328
+
329
+ .input-fields:nth-child(3n) {
330
+ margin-right: 0 !important;
331
+ }
332
+
333
+ .complaint-input {
334
+ @apply flex flex-col;
335
+
336
+ .clear-search {
337
+ @apply text-focus;
338
+ @apply block;
339
+ cursor: pointer;
340
+
341
+ &:hover {
342
+ color: theme(colors.link.hover);
343
+ cursor: pointer;
344
+ }
345
+ }
346
+ }
347
+ }
348
+
349
+ .search-action-wrapper {
350
+ width: 33%;
351
+ margin-top: 28px;
352
+ @apply inline-block align-middle text-center;
353
+
354
+ button {
355
+ margin: 0;
356
+ width: 100%;
357
+ max-width: 300px !important;
358
+ }
359
+ }
360
+ }
361
+ }
362
+ }
363
+
262
364
  @screen dt {
263
365
  .complaint-links-container {
264
366
  /* @apply bg-white; */
@@ -634,6 +736,9 @@
634
736
 
635
737
  .search-tab-head {
636
738
  padding: 10px 35px;
739
+ @media (max-width: 480px) {
740
+ padding: 5px;
741
+ }
637
742
  }
638
743
 
639
744
  .search-tab-head-selected {
@@ -641,6 +746,9 @@
641
746
  color: rgb(244, 119, 56);
642
747
  border-bottom: 4px solid rgb(244, 119, 56);
643
748
  font-weight: bold;
749
+ @media (max-width: 480px) {
750
+ padding: 5px;
751
+ }
644
752
  }
645
753
 
646
754
  .search-tab-head-selected:focus {
@@ -678,7 +678,7 @@
678
678
  .main {
679
679
  display: flex;
680
680
  flex-direction: column;
681
- padding-top: 80px;
681
+ padding-top: 72px;
682
682
  height: 100vh;
683
683
  /* margin-left: 72px; */
684
684
  /* width: calc(100%-83px); */