@pmidc/upyog-css 1.1.9 → 1.1.11

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": "@pmidc/upyog-css",
3
- "version": "1.1.9",
3
+ "version": "1.1.11",
4
4
  "license": "MIT",
5
5
  "main": "dist/index.css",
6
6
  "engines": {
@@ -14,6 +14,7 @@
14
14
  }
15
15
 
16
16
  .mainContent {
17
+ margin: 15px;
17
18
  @apply flex justify-evenly;
18
19
 
19
20
  .CardBasedOptionsMainChildOption {
@@ -158,7 +159,7 @@
158
159
  border-radius: 12px;
159
160
  padding: 24px;
160
161
  margin: 8px;
161
- min-width: 200px;
162
+ min-width: 220px;
162
163
  flex: 1 1 calc(25% - 16px);
163
164
  max-width: calc(25% - 16px);
164
165
  cursor: pointer;
@@ -0,0 +1,196 @@
1
+ .survey-modal-wrapper {
2
+ padding: 0;
3
+ background-color: #f9fafb;
4
+ }
5
+
6
+ .survey-modal-loader {
7
+ display: flex;
8
+ justify-content: center;
9
+ align-items: center;
10
+ min-height: 300px;
11
+ }
12
+
13
+ /* Cards Container */
14
+ .survey-cards-container {
15
+ display: grid;
16
+ grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
17
+ gap: 20px;
18
+ padding: 24px;
19
+ background: linear-gradient(135deg, #f9fafb 0%, #f3f4f6 100%);
20
+ }
21
+
22
+ /* Individual Survey Card */
23
+ .survey-card {
24
+ background: #ffffff;
25
+ border-radius: 12px;
26
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
27
+ overflow: hidden;
28
+ transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
29
+ display: flex;
30
+ flex-direction: column;
31
+ height: 100%;
32
+ border: 1px solid #e5e7eb;
33
+ }
34
+
35
+ .survey-card:hover {
36
+ box-shadow: 0 12px 24px rgba(37, 99, 235, 0.15);
37
+ transform: translateY(-4px);
38
+ border-color: #2563eb;
39
+ }
40
+
41
+ /* Card Header */
42
+ .survey-card-header {
43
+ background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
44
+ padding: 16px 20px;
45
+ color: white;
46
+ border-bottom: 3px solid #1d4ed8;
47
+ }
48
+
49
+ .survey-card-title {
50
+ margin: 0;
51
+ font-size: 16px;
52
+ font-weight: 600;
53
+ line-height: 1.4;
54
+ color: white;
55
+ word-break: break-word;
56
+ }
57
+
58
+ /* Card Content */
59
+ .survey-card-content {
60
+ flex: 1;
61
+ padding: 20px;
62
+ display: flex;
63
+ flex-direction: column;
64
+ gap: 16px;
65
+ }
66
+
67
+ .survey-card-item {
68
+ display: flex;
69
+ flex-direction: column;
70
+ gap: 6px;
71
+ }
72
+
73
+ .survey-card-label {
74
+ font-size: 12px;
75
+ font-weight: 600;
76
+ color: #6b7280;
77
+ text-transform: uppercase;
78
+ letter-spacing: 0.5px;
79
+ }
80
+
81
+ .survey-card-value {
82
+ font-size: 14px;
83
+ color: #1f2937;
84
+ line-height: 1.5;
85
+ word-break: break-word;
86
+ }
87
+
88
+ /* Card Footer */
89
+ .survey-card-footer {
90
+ padding: 16px 20px;
91
+ border-top: 1px solid #e5e7eb;
92
+ background-color: #f9fafb;
93
+ }
94
+
95
+ .survey-card-footer button {
96
+ width: 100%;
97
+ }
98
+
99
+ /* Empty State */
100
+ .survey-modal-empty-state {
101
+ display: flex;
102
+ flex-direction: column;
103
+ align-items: center;
104
+ justify-content: center;
105
+ min-height: 300px;
106
+ padding: 40px 20px;
107
+ background: linear-gradient(135deg, #f9fafb 0%, #f3f4f6 100%);
108
+ }
109
+
110
+ .survey-modal-empty-state-text {
111
+ margin: 0;
112
+ text-align: center;
113
+ color: #6b7280;
114
+ line-height: 1.6;
115
+ }
116
+
117
+ .survey-modal-empty-state-text:first-child {
118
+ font-size: 16px;
119
+ font-weight: 500;
120
+ color: #374151;
121
+ margin-bottom: 8px;
122
+ }
123
+
124
+ /* Responsive Design */
125
+ @media (max-width: 768px) {
126
+ .survey-cards-container {
127
+ grid-template-columns: 1fr;
128
+ gap: 16px;
129
+ padding: 16px;
130
+ }
131
+
132
+ .survey-card {
133
+ border-radius: 8px;
134
+ }
135
+
136
+ .survey-card-title {
137
+ font-size: 15px;
138
+ }
139
+
140
+ .survey-card-content {
141
+ padding: 16px;
142
+ gap: 12px;
143
+ }
144
+
145
+ .survey-card-footer {
146
+ padding: 12px 16px;
147
+ }
148
+
149
+ .survey-card-label {
150
+ font-size: 11px;
151
+ }
152
+
153
+ .survey-card-value {
154
+ font-size: 13px;
155
+ }
156
+ }
157
+
158
+ @media (max-width: 480px) {
159
+ .survey-cards-container {
160
+ padding: 12px;
161
+ gap: 12px;
162
+ }
163
+
164
+ .survey-card-header {
165
+ padding: 12px 16px;
166
+ }
167
+
168
+ .survey-card-content {
169
+ padding: 12px 16px;
170
+ }
171
+
172
+ .survey-card-footer {
173
+ padding: 10px 16px;
174
+ }
175
+ }
176
+
177
+ /* Animation */
178
+ @keyframes slideIn {
179
+ from {
180
+ opacity: 0;
181
+ transform: translateY(8px);
182
+ }
183
+ to {
184
+ opacity: 1;
185
+ transform: translateY(0);
186
+ }
187
+ }
188
+
189
+ .survey-card {
190
+ animation: slideIn 0.3s ease-out;
191
+ }
192
+
193
+ /* Loading State */
194
+ .survey-modal-loader {
195
+ background: linear-gradient(135deg, #f9fafb 0%, #f3f4f6 100%);
196
+ }
@@ -39,12 +39,36 @@ body {
39
39
  }
40
40
 
41
41
  .link-label {
42
- @apply block text-link text-primary-main mb-md ml-md cursor-pointer;
42
+ display: inline-flex;
43
+ align-items: center;
44
+ justify-content: center;
45
+ height: 40px;
46
+ background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%);
47
+ color: white !important;
48
+ text-align: center;
49
+ outline: none;
50
+ width: 175px;
51
+ border-radius: 8px;
52
+ border: none;
53
+ font-weight: 700;
54
+ font-size: 13px;
55
+ cursor: pointer;
56
+ transition: all 0.2s ease;
57
+ box-shadow: 0 8px 20px rgba(37, 99, 235, 0.24);
58
+ margin: 0;
59
+ text-decoration: none;
60
+
61
+ &:hover {
62
+ transform: translateY(-2px);
63
+ box-shadow: 0 12px 28px rgba(37, 99, 235, 0.32);
64
+ color: white !important;
65
+ }
43
66
 
44
- &:hover {
45
- @apply text-primary-main;
67
+ &:focus {
68
+ outline: none;
69
+ }
46
70
  }
47
- }
71
+
48
72
 
49
73
  .back-btn {
50
74
  width: fit-content;
@@ -188,14 +212,14 @@ body {
188
212
  .citizen-and-architect-photo-label {
189
213
  /* Add any label styling if needed */
190
214
  }
191
- .clu-summary-page {
215
+ .bpa-summary-page {
192
216
  padding: 2rem;
193
217
  background-color: #f9f9f9;
194
218
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
195
219
  color: #333;
196
220
  }
197
221
 
198
- .clu-summary-heading {
222
+ .bpa-summary-heading {
199
223
  font-size: 1.5rem;
200
224
  border-bottom: 2px solid #ccc;
201
225
  padding-bottom: 0.3rem;
@@ -204,7 +228,7 @@ body {
204
228
  margin-bottom: 1rem;
205
229
  }
206
230
 
207
- .clu-summary-section {
231
+ .bpa-summary-section {
208
232
  background-color: #ffffff;
209
233
  padding: 1rem 1.5rem;
210
234
  border-radius: 8px;
@@ -212,7 +236,7 @@ body {
212
236
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
213
237
  }
214
238
 
215
- .clu-summary-label-field-pair {
239
+ .bpa-summary-label-field-pair {
216
240
  display: flex;
217
241
  justify-content: space-between;
218
242
  border-bottom: 1px dashed #e0e0e0;
@@ -220,10 +244,13 @@ body {
220
244
  color: #333;
221
245
  }
222
246
 
223
- .clu-summary-bold-label {
247
+ .bpa-summary-bold-label {
224
248
  font-weight: bold;
225
249
  color: #555;
226
250
  }
251
+
252
+
253
+
227
254
  .custom-card-container {
228
255
  width: 100%;
229
256
  background: rgba(255, 255, 255, 0.95);
@@ -259,4 +286,162 @@ body {
259
286
  display: block;
260
287
  justify-content: space-between;
261
288
  align-items: center;
289
+ }
290
+
291
+ /* ============================================
292
+ BPA STEPPER FORM - Common Styles
293
+ ============================================ */
294
+
295
+ .bpa-stepper-form-container {
296
+ padding: 16px;
297
+ background: #f8fafc;
298
+ min-height: calc(100vh - 120px);
299
+ }
300
+
301
+ .bpa-stepper-form-section {
302
+ background: #ffffff;
303
+ border-radius: 12px;
304
+ padding: 20px 24px;
305
+ margin-bottom: 20px;
306
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
307
+ border: 1px solid #e5e7eb;
308
+ }
309
+
310
+ .bpa-section-header {
311
+ font-size: 18px !important;
312
+ font-weight: 600 !important;
313
+ margin-bottom: 16px !important;
314
+ padding-bottom: 12px !important;
315
+ border-bottom: 2px solid #e5e7eb !important;
316
+ }
317
+
318
+ .bpa-block-section {
319
+ background: #f8fafc;
320
+ border-radius: 8px;
321
+ padding: 16px;
322
+ margin-top: 16px;
323
+ border: 1px solid #e5e7eb;
324
+ }
325
+
326
+ .bpa-block-header {
327
+ font-size: 16px !important;
328
+ font-weight: 600 !important;
329
+ color: #374151 !important;
330
+ margin-bottom: 12px !important;
331
+ }
332
+
333
+ .bpa-table-container {
334
+ margin-top: 16px;
335
+ overflow-x: auto;
336
+ border-radius: 8px;
337
+ border: 1px solid #e5e7eb;
338
+ }
339
+
340
+ .bpa-stepper-form-section .status-table-container {
341
+ margin: 0;
342
+ }
343
+
344
+ .bpa-stepper-form-section .status-table-container .status-table {
345
+ margin: 0;
346
+ }
347
+
348
+ .bpa-stepper-form-section .row {
349
+ padding: 12px 0;
350
+ border-bottom: 1px dashed #e5e7eb;
351
+ }
352
+
353
+ .bpa-stepper-form-section .row:last-child {
354
+ border-bottom: none;
355
+ }
356
+
357
+ .bpa-stepper-form-section .row .key {
358
+ font-weight: 500;
359
+ color: #6b7280;
360
+ font-size: 14px;
361
+ }
362
+
363
+ .bpa-stepper-form-section .row .value {
364
+ font-weight: 600;
365
+ color: #1f2937;
366
+ font-size: 14px;
367
+ }
368
+
369
+ /* Responsive Styles */
370
+ @media screen and (max-width: 768px) {
371
+ .bpa-stepper-form-container {
372
+ padding: 12px;
373
+ }
374
+
375
+ .bpa-stepper-form-section {
376
+ padding: 16px;
377
+ margin-bottom: 16px;
378
+ border-radius: 10px;
379
+ }
380
+
381
+ .bpa-section-header {
382
+ font-size: 16px !important;
383
+ margin-bottom: 12px !important;
384
+ padding-bottom: 10px !important;
385
+ }
386
+
387
+ .bpa-block-section {
388
+ padding: 12px;
389
+ margin-top: 12px;
390
+ }
391
+
392
+ .bpa-block-header {
393
+ font-size: 14px !important;
394
+ margin-bottom: 10px !important;
395
+ }
396
+
397
+ .bpa-stepper-form-section .row {
398
+ padding: 10px 0;
399
+ }
400
+
401
+ .bpa-stepper-form-section .row .key,
402
+ .bpa-stepper-form-section .row .value {
403
+ font-size: 13px;
404
+ }
405
+ }
406
+
407
+ @media screen and (max-width: 480px) {
408
+ .bpa-stepper-form-container {
409
+ padding: 8px;
410
+ }
411
+
412
+ .bpa-stepper-form-section {
413
+ padding: 12px;
414
+ margin-bottom: 12px;
415
+ border-radius: 8px;
416
+ }
417
+
418
+ .bpa-section-header {
419
+ font-size: 15px !important;
420
+ margin-bottom: 10px !important;
421
+ padding-bottom: 8px !important;
422
+ }
423
+
424
+ .bpa-block-section {
425
+ padding: 10px;
426
+ margin-top: 10px;
427
+ }
428
+
429
+ .bpa-block-header {
430
+ font-size: 13px !important;
431
+ }
432
+
433
+ .bpa-stepper-form-section .row {
434
+ padding: 8px 0;
435
+ flex-direction: column;
436
+ gap: 4px;
437
+ }
438
+
439
+ .bpa-stepper-form-section .row .key,
440
+ .bpa-stepper-form-section .row .value {
441
+ font-size: 12px;
442
+ }
443
+
444
+ .bpa-table-container {
445
+ margin-top: 12px;
446
+ }
262
447
  }
@@ -1,13 +1,44 @@
1
1
  .selector-button-primary {
2
- @apply h-8 bg-primary-main text-center border-b-2 border-input-border border-solid outline-none px-lg;
2
+ background-color: #2947A3 !important;
3
+ color: #ffffff !important;
4
+ border: none !important;
5
+ border-radius: 0.375rem;
6
+ padding: 0.5rem 1rem;
7
+ font-family: 'Noto Sans', sans-serif;
8
+ font-weight: 500;
9
+ font-size: 0.875rem;
10
+ line-height: 1.25rem;
11
+ cursor: pointer;
12
+ transition: all 0.2s ease;
13
+ white-space: normal; /* allow wrapping */
14
+ word-break: break-word; /* break long words */
15
+ overflow-wrap: break-word;
16
+ text-align: center;
17
+ display: inline-flex;
18
+ align-items: center;
19
+ justify-content: center;
20
+ height: auto;
21
+ min-height: 40px;
22
+ width: 30%;
23
+ max-height: 40px;
24
+ margin: 0;
3
25
 
4
- &:focus {
5
- @apply outline-none;
26
+ &:hover {
27
+ background-color: #1e3a8a !important;
28
+ opacity: 0.9;
6
29
  }
7
30
 
8
31
  h2 {
9
- @apply font-rc font-medium text-legend text-white;
32
+ color: #ffffff !important;
33
+ font-size: 0.875rem !important;
34
+ line-height: 1.25rem !important;
35
+ font-weight: 500 !important;
36
+ margin: 0 !important;
37
+ padding: 0 !important;
38
+ border: none !important;
39
+ width: 100%;
10
40
  }
41
+
11
42
  }
12
43
 
13
44
  .selector-button-border {