@djb25/digit-ui-css 1.0.89 → 1.0.91

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.
@@ -9,182 +9,230 @@
9
9
  position: relative;
10
10
  align-items: stretch;
11
11
  z-index: 1;
12
+ }
12
13
 
13
- .BannerWithSearch {
14
- margin-bottom: 40px;
15
- width: 100%;
16
- @apply relative;
14
+ .HomePageWrapper .BannerWithSearch {
15
+ margin-bottom: 40px;
16
+ width: 100%;
17
+ @apply relative;
18
+ }
17
19
 
18
- .Search {
19
- width: calc(100% - 32px);
20
- bottom: -18px;
21
- @apply mx-md absolute;
22
- }
20
+ .HomePageWrapper .BannerWithSearch .Search {
21
+ width: calc(100% - 32px);
22
+ bottom: -18px;
23
+ @apply mx-md absolute;
24
+ }
23
25
 
24
- img {
25
- height: 33vw;
26
- @apply w-full object-cover;
27
- }
28
- }
26
+ .HomePageWrapper .BannerWithSearch img {
27
+ height: 33vw;
28
+ @apply w-full object-cover;
29
+ }
30
+
31
+ .HomePageWrapper .ServicesSection {
32
+ @apply flex flex-wrap;
33
+ padding: 100px 15px 0 15px;
34
+ }
29
35
 
30
- .ServicesSection {
36
+ @screen dt {
37
+ .HomePageWrapper .ServicesSection {
31
38
  @apply flex flex-wrap;
32
39
  padding: 100px 15px 0 15px;
40
+ width: 100%;
33
41
  }
42
+ }
34
43
 
35
- @screen dt {
36
- .ServicesSection {
37
- @apply flex flex-wrap;
38
- padding: 100px 15px 0 15px;
39
- width: 100%;
40
- }
41
- }
42
-
43
- .WhatsNewSection {
44
- @apply m-sm;
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
- .headSection {
56
- @apply flex mb-sm justify-between;
57
- align-items: center;
58
-
59
- h2 {
60
- @apply text-heading-s font-bold text-text-primary;
61
- padding-left: 0;
62
- font-size: 1.375rem;
63
- color: #1e293b;
64
- }
44
+ .HomePageWrapper .WhatsNewSection {
45
+ @apply m-sm;
46
+ padding: 24px 32px;
47
+ background: rgba(255, 255, 255, 0.85);
48
+ backdrop-filter: blur(16px);
49
+ -webkit-backdrop-filter: blur(16px);
50
+ box-shadow: 0 16px 32px rgba(0, 0, 0, 0.06), inset 0 1px 0 rgba(255, 255, 255, 1);
51
+ border: 1px solid rgba(255, 255, 255, 0.8);
52
+ border-radius: 20px;
53
+ position: relative;
54
+ margin: 0px !important;
55
+ }
65
56
 
66
- p {
67
- @apply font-medium cursor-pointer;
68
- color: #fff;
69
- background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
70
- padding: 8px 16px;
71
- border-radius: 999px;
72
- font-size: 0.875rem;
73
- box-shadow: 0 4px 10px rgba(59, 130, 246, 0.3);
74
- transition: all 0.3s ease;
75
-
76
- &:hover {
77
- transform: translateY(-2px);
78
- box-shadow: 0 6px 14px rgba(59, 130, 246, 0.4);
79
- background: linear-gradient(135deg, #60a5fa 0%, #3b82f6 100%);
80
- }
81
- }
82
- }
57
+ .HomePageWrapper .WhatsNewSection .headSection {
58
+ @apply flex mb-sm justify-between;
59
+ align-items: center;
60
+ }
83
61
 
84
- @media (min-width: 780px) {
85
- padding: 32px 36px;
62
+ .HomePageWrapper .WhatsNewSection .headSection h2 {
63
+ @apply text-heading-s font-bold text-text-primary;
64
+ padding-left: 0;
65
+ font-size: 1.375rem;
66
+ color: #1e293b;
67
+ }
86
68
 
87
- &::before {
88
- left: 36px;
89
- right: 36px;
90
- }
91
- }
92
- }
69
+ .HomePageWrapper .WhatsNewSection .headSection p {
70
+ @apply font-medium cursor-pointer;
71
+ color: #fff;
72
+ background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
73
+ padding: 8px 16px;
74
+ border-radius: 999px;
75
+ font-size: 0.875rem;
76
+ box-shadow: 0 4px 10px rgba(59, 130, 246, 0.3);
77
+ transition: all 0.3s ease;
78
+ }
93
79
 
94
- .WhatsAppBanner {
95
- width: 100%;
96
- padding: 0px 20px 0px 20px;
97
- margin: auto;
98
- cursor: pointer;
80
+ .HomePageWrapper .WhatsNewSection .headSection p:hover {
81
+ transform: translateY(-2px);
82
+ box-shadow: 0 6px 14px rgba(59, 130, 246, 0.4);
83
+ background: linear-gradient(135deg, #60a5fa 0%, #3b82f6 100%);
84
+ }
99
85
 
100
- img {
101
- width: 100%;
102
- }
86
+ @media (min-width: 780px) {
87
+ .HomePageWrapper .WhatsNewSection {
88
+ padding: 32px 36px;
103
89
  }
104
90
 
105
- /* ===== Citizen Theme ===== */
106
- .citizen-app-container {
107
- width: 100%;
108
- display: flex;
109
- flex-direction: column;
110
- gap: 30px;
111
- padding: 32px;
112
- background: rgba(255, 255, 255, 0.7);
113
- backdrop-filter: blur(20px);
114
- -webkit-backdrop-filter: blur(20px);
115
- border-radius: 24px;
116
- border: 1px solid rgba(255, 255, 255, 0.8);
117
- box-shadow: 0 20px 40px rgba(0, 0, 0, 0.05), inset 0 1px 0 rgba(255, 255, 255, 1);
118
- position: relative;
119
- overflow: hidden;
91
+ .HomePageWrapper .WhatsNewSection::before {
92
+ left: 36px;
93
+ right: 36px;
120
94
  }
95
+ }
121
96
 
122
- .citizen-app-container>* {
123
- position: relative;
124
- z-index: 1;
125
- }
97
+ .HomePageWrapper .WhatsAppBanner {
98
+ width: 100%;
99
+ padding: 0px 20px 0px 20px;
100
+ margin: auto;
101
+ cursor: pointer;
102
+ }
126
103
 
127
- .citizen-module-header {
128
- display: flex;
129
- justify-content: center;
130
- align-items: center;
131
- width: 100%;
104
+ .HomePageWrapper .WhatsAppBanner img {
105
+ width: 100%;
106
+ }
132
107
 
133
- .citizen-header-top-section {
134
- width: 100% !important;
135
- background: linear-gradient(135deg, #1e3a8a 0%, #3b82f6 100%) !important;
136
- padding: 24px 32px !important;
137
- border-radius: 20px !important;
138
- display: flex !important;
139
- align-items: center !important;
140
- justify-content: space-between !important;
141
- min-height: 80px !important;
142
- box-shadow: 0 15px 30px rgba(59, 130, 246, 0.3) !important;
143
- position: relative;
144
- overflow: hidden;
145
-
146
- &::before {
147
- content: "";
148
- position: absolute;
149
- top: 0;
150
- left: 0;
151
- width: 100%;
152
- height: 100%;
153
- 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");
154
- opacity: 0.8;
155
- }
108
+ /* ===== Citizen Theme ===== */
109
+ .HomePageWrapper .citizen-app-container {
110
+ width: 100%;
111
+ display: flex;
112
+ flex-direction: column;
113
+ gap: 30px;
114
+ padding: 32px;
115
+ background: rgba(255, 255, 255, 0.7);
116
+ backdrop-filter: blur(20px);
117
+ -webkit-backdrop-filter: blur(20px);
118
+ border-radius: 24px;
119
+ border: 1px solid rgba(255, 255, 255, 0.8);
120
+ box-shadow: 0 20px 40px rgba(0, 0, 0, 0.05), inset 0 1px 0 rgba(255, 255, 255, 1);
121
+ position: relative;
122
+ overflow: hidden;
123
+ }
156
124
 
157
- &::after {
158
- content: "";
159
- position: absolute;
160
- right: -80px;
161
- top: -80px;
162
- width: 250px;
163
- height: 250px;
164
- background: radial-gradient(circle, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0));
165
- border-radius: 50%;
166
- }
167
- }
125
+ .HomePageWrapper .citizen-app-container>* {
126
+ position: relative;
127
+ z-index: 1;
128
+ }
168
129
 
169
- .citizen-header-title {
170
- margin: 0;
171
- font-size: 1.75rem;
172
- font-weight: 800;
173
- color: #ffffff;
174
- letter-spacing: 0.5px;
175
- text-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
176
- }
130
+ .HomePageWrapper .citizen-module-header {
131
+ display: flex;
132
+ justify-content: center;
133
+ align-items: center;
134
+ width: 100%;
135
+ }
136
+
137
+ .HomePageWrapper .citizen-module-header .citizen-header-top-section {
138
+ width: 100% !important;
139
+ background: linear-gradient(135deg, #1e3a8a 0%, #3b82f6 100%) !important;
140
+ padding: 24px 32px !important;
141
+ border-radius: 20px !important;
142
+ display: flex !important;
143
+ align-items: center !important;
144
+ justify-content: space-between !important;
145
+ min-height: 80px !important;
146
+ box-shadow: 0 15px 30px rgba(59, 130, 246, 0.3) !important;
147
+ position: relative;
148
+ overflow: hidden;
149
+ }
150
+
151
+ .HomePageWrapper .citizen-module-header .citizen-header-top-section::before {
152
+ content: "";
153
+ position: absolute;
154
+ top: 0;
155
+ left: 0;
156
+ width: 100%;
157
+ height: 100%;
158
+ 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");
159
+ opacity: 0.8;
160
+ }
161
+
162
+ .HomePageWrapper .citizen-module-header .citizen-header-top-section::after {
163
+ content: "";
164
+ position: absolute;
165
+ right: -80px;
166
+ top: -80px;
167
+ width: 250px;
168
+ height: 250px;
169
+ background: radial-gradient(circle, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0));
170
+ border-radius: 50%;
171
+ }
172
+
173
+ .HomePageWrapper .citizen-module-header .citizen-header-title {
174
+ margin: 0;
175
+ font-size: 1.75rem;
176
+ font-weight: 800;
177
+ color: #ffffff;
178
+ letter-spacing: 0.5px;
179
+ text-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
180
+ }
181
+
182
+ .HomePageWrapper .citizen-module-grid {
183
+ display: grid;
184
+ grid-template-columns: repeat(4, 1fr);
185
+ gap: 20px;
186
+ padding: 0;
187
+ width: 100%;
188
+ }
189
+
190
+ @media (max-width: 1024px) {
191
+ .HomePageWrapper .citizen-module-grid {
192
+ grid-template-columns: repeat(3, 1fr);
177
193
  }
194
+ }
178
195
 
179
- .citizen-module-grid {
180
- display: grid;
181
- grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
182
- gap: 24px;
183
- padding: 0;
184
- width: 100%;
196
+ @media (max-width: 768px) {
197
+ .HomePageWrapper .citizen-module-grid {
198
+ grid-template-columns: repeat(2, 1fr);
199
+ }
200
+ }
201
+
202
+ @media (max-width: 480px) {
203
+ .HomePageWrapper .citizen-module-grid {
204
+ grid-template-columns: repeat(1, 1fr);
185
205
  }
186
206
  }
187
207
 
208
+ .HomePageWrapper .citizen-section-header {
209
+ font-size: 1rem;
210
+ font-weight: 700;
211
+ color: #1e293b;
212
+ margin: 24px 0 12px 0;
213
+ display: flex;
214
+ align-items: center;
215
+ gap: 8px;
216
+ }
217
+
218
+ .HomePageWrapper .citizen-section-header::before {
219
+ content: "";
220
+ width: 4px;
221
+ height: 16px;
222
+ background-color: #2563eb;
223
+ border-radius: 2px;
224
+ display: inline-block;
225
+ }
226
+
227
+ .HomePageWrapper .citizen-section-header--secondary {
228
+ color: #475569;
229
+ margin-top: 28px;
230
+ }
231
+
232
+ .HomePageWrapper .citizen-section-header--secondary::before {
233
+ background-color: #94a3b8;
234
+ }
235
+
188
236
  /* ============================================================
189
237
  .citizen-service-card — MUST be at root level (not nested
190
238
  inside .HomePageWrapper) so BEM & selectors compile correctly
@@ -203,91 +251,108 @@
203
251
  overflow: hidden !important;
204
252
  position: relative;
205
253
  transition: border-color 0.25s ease, transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.2s ease !important;
254
+ }
206
255
 
207
- &:hover {
208
- border-color: #93c5fd !important;
209
- transform: translateY(-3px) !important;
210
- background: #f8fbff !important;
211
- }
256
+ .citizen-service-card:hover {
257
+ border-color: #93c5fd !important;
258
+ transform: translateY(-3px) !important;
259
+ background: #f8fbff !important;
260
+ }
212
261
 
213
- &__icon {
214
- width: 44px !important;
215
- height: 44px !important;
216
- flex-shrink: 0 !important;
217
- background: #eff6ff;
218
- border-radius: 12px;
219
- display: flex !important;
220
- align-items: center !important;
221
- justify-content: center !important;
222
- padding: 10px;
223
- transition: transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.25s ease;
262
+ .citizen-service-card.citizen-service-card--highlighted {
263
+ background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%) !important;
264
+ border: 2px solid #2563eb !important;
265
+ box-shadow: 0 8px 24px rgba(37, 99, 235, 0.3) !important;
266
+ }
224
267
 
225
- svg {
226
- width: 22px !important;
227
- height: 22px !important;
228
- fill: #2563eb !important;
229
- }
230
- }
268
+ .citizen-service-card.citizen-service-card--highlighted .citizen-service-card__icon {
269
+ background: #2563eb !important;
270
+ }
231
271
 
232
- &:hover &__icon {
233
- background: #dbeafe;
234
- transform: scale(1.1) rotate(4deg);
235
- }
272
+ .citizen-service-card.citizen-service-card--highlighted .citizen-service-card__icon svg {
273
+ fill: #ffffff !important;
274
+ }
236
275
 
237
- /* Fixed height + overflow:hidden is what clips the sliding text */
238
- &__content {
239
- flex: 1;
240
- position: relative;
241
- height: 40px;
242
- overflow: hidden;
243
- display: block;
244
- /* NOT flex — flex breaks absolute child stacking */
245
- }
276
+ .citizen-service-card.citizen-service-card--highlighted:hover {
277
+ border-color: #1d4ed8 !important;
278
+ background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%) !important;
279
+ box-shadow: 0 12px 28px rgba(37, 99, 235, 0.4) !important;
280
+ }
246
281
 
247
- /* Label: visible by default, slides out upward on hover */
248
- &__label {
249
- position: absolute !important;
250
- inset: 0 !important;
251
- display: flex !important;
252
- align-items: center !important;
253
- margin: 0 !important;
254
- font-size: 0.875rem !important;
255
- font-weight: 500 !important;
256
- color: #1e293b !important;
257
- line-height: 1.35 !important;
258
- transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s ease !important;
259
- transform: translateY(0);
260
- opacity: 1;
261
- }
282
+ .citizen-service-card__icon {
283
+ width: 44px !important;
284
+ height: 44px !important;
285
+ flex-shrink: 0 !important;
286
+ background: #eff6ff;
287
+ border-radius: 12px;
288
+ display: flex !important;
289
+ align-items: center !important;
290
+ justify-content: center !important;
291
+ padding: 10px;
292
+ }
262
293
 
263
- /* Description: hidden below by default, slides up into view on hover */
264
- &__description {
265
- position: absolute !important;
266
- inset: 0 !important;
267
- display: flex !important;
268
- align-items: center !important;
269
- margin: 0 !important;
270
- font-size: 0.78125rem !important;
271
- font-weight: 400 !important;
272
- color: #2563eb !important;
273
- line-height: 1.4 !important;
274
- transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s ease !important;
275
- transform: translateY(110%);
276
- /* starts hidden below */
277
- opacity: 0;
278
- }
294
+ .citizen-service-card__icon svg {
295
+ width: 22px !important;
296
+ height: 22px !important;
297
+ fill: #2563eb !important;
298
+ }
279
299
 
280
- &:hover &__label {
281
- transform: translateY(-110%);
282
- /* slides out upward */
283
- opacity: 0;
284
- }
300
+ .citizen-service-card__content {
301
+ flex: 1;
302
+ position: relative;
303
+ height: 40px;
304
+ overflow: hidden;
305
+ display: block;
306
+ }
285
307
 
286
- &:hover &__description {
287
- transform: translateY(0);
288
- /* slides in from below */
289
- opacity: 1;
290
- }
308
+ .citizen-service-card__label {
309
+ position: absolute !important;
310
+ top: 0 !important;
311
+ left: 0 !important;
312
+ right: 0 !important;
313
+ bottom: 0 !important;
314
+ display: flex !important;
315
+ align-items: center !important;
316
+ margin: 0 !important;
317
+ font-size: 0.875rem !important;
318
+ font-weight: 600 !important;
319
+ color: #1e293b !important;
320
+ line-height: 1.35 !important;
321
+ transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s ease, visibility 0.25s ease !important;
322
+ transform: translateY(0) !important;
323
+ opacity: 1 !important;
324
+ visibility: visible !important;
325
+ }
326
+
327
+ .citizen-service-card__description {
328
+ position: absolute !important;
329
+ top: 0 !important;
330
+ left: 0 !important;
331
+ right: 0 !important;
332
+ bottom: 0 !important;
333
+ display: flex !important;
334
+ align-items: center !important;
335
+ margin: 0 !important;
336
+ font-size: 0.78125rem !important;
337
+ font-weight: 400 !important;
338
+ color: #2563eb !important;
339
+ line-height: 1.4 !important;
340
+ transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s ease, visibility 0.25s ease !important;
341
+ transform: translateY(110%) !important;
342
+ opacity: 0 !important;
343
+ visibility: hidden !important;
344
+ }
345
+
346
+ .citizen-service-card:hover .citizen-service-card__label {
347
+ transform: translateY(-110%) !important;
348
+ opacity: 0 !important;
349
+ visibility: hidden !important;
350
+ }
351
+
352
+ .citizen-service-card:hover .citizen-service-card__description {
353
+ transform: translateY(0) !important;
354
+ opacity: 1 !important;
355
+ visibility: visible !important;
291
356
  }
292
357
 
293
358
  /* ============================================================
@@ -351,7 +416,8 @@
351
416
  text-align: center !important;
352
417
  width: max-content !important;
353
418
 
354
- h1, h4 {
419
+ h1,
420
+ h4 {
355
421
  margin: 0 !important;
356
422
  color: #fff !important;
357
423
  font-weight: 800 !important;
@@ -97,7 +97,9 @@
97
97
  .employee-main-application-details {
98
98
  width: 100%;
99
99
  overflow-y: scroll;
100
- margin-bottom: 62px;
100
+ display: flex;
101
+ gap: 20px;
102
+ flex-wrap: wrap;
101
103
  }
102
104
 
103
105
  .employee-form-content {