@pmidc/upyog-css 1.1.10 → 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.10",
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,17 +1,15 @@
1
1
 
2
2
 
3
3
  .card {
4
- background: linear-gradient(135deg, #ffffff 0%, #f8fafb 100%);
5
- margin: 8px;
6
4
  padding: 20px 24px 28px 24px;
7
5
  max-width: 95vw;
8
6
  width: 100%;
9
7
  border-radius: 14px;
10
- border: 1px solid #e1e8f0;
11
8
  box-shadow: 0 12px 32px rgba(30, 58, 138, 0.08), 0 4px 12px rgba(0, 0, 0, 0.04);
12
9
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
13
10
  position: relative;
14
11
  overflow: visible;
12
+ margin-bottom: 15px;
15
13
 
16
14
 
17
15
  .card-header {
@@ -32,6 +30,7 @@
32
30
  color: #1e293b;
33
31
  text-align: left;
34
32
  margin-bottom: 8px;
33
+ margin-top: 20px;
35
34
  text-transform: uppercase;
36
35
  letter-spacing: 0.4px;
37
36
  }
@@ -69,12 +68,13 @@
69
68
  }
70
69
 
71
70
  .card-label {
72
- font-size: 12px;
71
+ font-size: 16px;
73
72
  color: #0f172a;
74
73
  margin-bottom: 8px;
75
74
  font-weight: 700;
76
75
  text-transform: uppercase;
77
76
  letter-spacing: 0.5px;
77
+ width: 100%;
78
78
  }
79
79
 
80
80
  .card-label-error {
@@ -94,25 +94,7 @@
94
94
  letter-spacing: 0.3px;
95
95
  }
96
96
 
97
- .card-link {
98
- display: inline-block;
99
- text-align: center;
100
- color: #2563eb;
101
- margin-top: 16px;
102
- cursor: pointer;
103
- font-weight: 700;
104
- font-size: 13px;
105
- padding: 8px 16px;
106
- border-radius: 8px;
107
- background: rgba(37, 99, 235, 0.08);
108
- transition: all 0.2s ease;
109
- text-decoration: none;
110
97
 
111
- &:hover {
112
- background: rgba(37, 99, 235, 0.16);
113
- transform: translateX(2px);
114
- }
115
- }
116
98
  }
117
99
 
118
100
  .validation-error {
@@ -207,7 +189,7 @@
207
189
  }
208
190
 
209
191
  .card-label {
210
- font-size: 12px;
192
+ font-size: 16px;
211
193
  color: #0f172a;
212
194
  margin-bottom: 8px;
213
195
  font-weight: 700;
@@ -232,25 +214,7 @@
232
214
  letter-spacing: 0.3px;
233
215
  }
234
216
 
235
- .card-link {
236
- display: inline-block;
237
- text-align: left;
238
- color: #2563eb;
239
- margin-top: 12px;
240
- cursor: pointer;
241
- font-weight: 700;
242
- font-size: 13px;
243
- padding: 8px 12px;
244
- border-radius: 8px;
245
- background: rgba(37, 99, 235, 0.08);
246
- transition: all 0.2s ease;
247
- text-decoration: none;
248
217
 
249
- &:hover {
250
- background: rgba(37, 99, 235, 0.16);
251
- transform: translateX(2px);
252
- }
253
- }
254
218
 
255
219
  .card-search-heading {
256
220
  margin-right: 0px !important;
@@ -287,7 +251,39 @@
287
251
  border: 1px solid #e1e8f0;
288
252
  }
289
253
 
290
- .submit-bar {
254
+ .card-link{
255
+ height: 40px;
256
+ background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%);
257
+ color: white;
258
+ text-align: center;
259
+ outline: none;
260
+ width: 175px;
261
+ border-radius: 8px;
262
+ border: none;
263
+ font-weight: 700;
264
+ font-size: 13px;
265
+ cursor: pointer;
266
+ transition: all 0.2s ease;
267
+ box-shadow: 0 8px 20px rgba(37, 99, 235, 0.24);
268
+
269
+ &:hover {
270
+ transform: translateY(-2px);
271
+ box-shadow: 0 12px 28px rgba(37, 99, 235, 0.32);
272
+ }
273
+
274
+ &:focus {
275
+ outline: none;
276
+ }
277
+
278
+ header {
279
+ font-weight: 600;
280
+ font-size: 12px;
281
+ color: white;
282
+ line-height: 40px;
283
+ }
284
+ }
285
+
286
+ .submit-bar, .bpa-owner-submit-back {
291
287
  height: 40px;
292
288
  background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%);
293
289
  color: white;
@@ -357,6 +353,42 @@
357
353
  }
358
354
  }
359
355
 
356
+ /* LinkButton styled as SubmitBar */
357
+ .card-link.submit-bar,
358
+ button.card-link.submit-bar {
359
+ height: 40px !important;
360
+ background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%) !important;
361
+ color: white !important;
362
+ text-align: center !important;
363
+ outline: none !important;
364
+ width: 175px !important;
365
+ border-radius: 8px !important;
366
+ border: none !important;
367
+ font-weight: 700 !important;
368
+ font-size: 13px !important;
369
+ cursor: pointer !important;
370
+ transition: all 0.2s ease !important;
371
+ box-shadow: 0 8px 20px rgba(37, 99, 235, 0.24) !important;
372
+ display: inline-flex !important;
373
+ align-items: center !important;
374
+ justify-content: center !important;
375
+ padding: 0 16px !important;
376
+ margin: 0 !important;
377
+ text-decoration: none !important;
378
+
379
+ &:hover {
380
+ transform: translateY(-2px) !important;
381
+ box-shadow: 0 12px 28px rgba(37, 99, 235, 0.32) !important;
382
+ background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%) !important;
383
+ color: white !important;
384
+ }
385
+
386
+ &:focus {
387
+ outline: none !important;
388
+ }
389
+ }
390
+
391
+
360
392
  @media (min-width: 1024px) {
361
393
  .submit-bar,
362
394
  .submit-bar-disabled {
@@ -386,9 +418,7 @@
386
418
  font-size: 16px;
387
419
  }
388
420
 
389
- .card-link {
390
- text-align: left;
391
- }
421
+
392
422
  }
393
423
 
394
424
  .employeeCard {
@@ -445,9 +475,6 @@
445
475
  font-size: 16px;
446
476
  }
447
477
 
448
- .card-link {
449
- text-align: left;
450
- }
451
478
 
452
479
  .label-field-pair {
453
480
  display: flex;
@@ -5,7 +5,7 @@
5
5
 
6
6
  .multilink-link-button{
7
7
  margin: 0;
8
- @apply text-heading-s text-primary-light
8
+ @apply text-heading-s
9
9
  }
10
10
 
11
11
  .multilink-optionWrap{
@@ -37,6 +37,8 @@
37
37
  background: #eeeeee;
38
38
  border-right: 0;
39
39
  padding-right: 5px;
40
+ position: relative;
41
+ z-index: 0 !important;
40
42
  }
41
43
  .employee-card-input-error {
42
44
  @apply mb-lg pl-sm block w-full h-10 outline-none border-2 border-error border-solid bg-white leading-10 text-form-field text-text-primary;
package/src/index.scss CHANGED
@@ -134,6 +134,8 @@
134
134
  @import "./pages/citizen/CitizenLogin.scss";
135
135
  @import "./components/NewAccordianCitizen.scss";
136
136
  @import "./modules/rentAndLease/index.scss";
137
+ @import "./components/SurveyModal.scss";
138
+
137
139
 
138
140
  @import "./modules/adv/index.scss";
139
141
  .display-none {