@egovernments/digit-ui-health-css 0.0.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/src/index.scss ADDED
@@ -0,0 +1,832 @@
1
+ /*@import 'normalize.css';*/
2
+
3
+ /*@import url("https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@400;500;700&family=Roboto:wght@400;500;700&display=swap");*/
4
+ @import "./pages/employee/dss.scss";
5
+
6
+ @import "tailwindcss/base";
7
+
8
+ @import "tailwindcss/components";
9
+
10
+ @import "tailwindcss/utilities";
11
+
12
+ @import "react-date-range/dist/styles.css";
13
+ @import "react-date-range/dist/theme/default.css";
14
+
15
+ @import "./components/radiobtn.scss";
16
+ @import "./components/datatable.scss";
17
+ @import "./components/table.scss";
18
+ @import "./components/filters.scss";
19
+
20
+ @import "./pages/employee/index.scss";
21
+ @import "./components/uploadcomponents.scss";
22
+
23
+
24
+ .display-none {
25
+ display: none;
26
+ }
27
+
28
+ .p-unset {
29
+ padding: unset !important;
30
+ }
31
+
32
+ .flex-one {
33
+ @apply flex-1;
34
+ }
35
+
36
+ .display-flex-gap-2 {
37
+ @apply flex gap-3;
38
+ }
39
+ .rm-mb {
40
+ margin-bottom: unset !important;
41
+ }
42
+
43
+ .w-fullwidth {
44
+ @apply w-full;
45
+ }
46
+
47
+ .margin-unset {
48
+ margin: unset !important;
49
+ }
50
+
51
+ .text-align-center {
52
+ @apply text-center;
53
+ }
54
+
55
+ .desktop-only {
56
+ @apply hidden;
57
+ }
58
+
59
+ @screen dt {
60
+ .desktop-only {
61
+ @apply block;
62
+ }
63
+ }
64
+
65
+ .mobile-only {
66
+ @apply block;
67
+ }
68
+
69
+ @screen dt {
70
+ .mobile-only {
71
+ @apply hidden;
72
+ }
73
+ }
74
+
75
+ .dark {
76
+ @apply text-text-primary;
77
+ }
78
+
79
+ .mrlg {
80
+ @apply mr-lg;
81
+ }
82
+
83
+ .mrsm {
84
+ @apply mr-sm;
85
+ }
86
+
87
+ .mbsm {
88
+ @apply mb-sm;
89
+ }
90
+
91
+ .home-link {
92
+ margin-left: 16px;
93
+ margin-bottom: 16px;
94
+
95
+ a {
96
+ color: #1d70b8;
97
+ }
98
+ }
99
+
100
+ .clear-search-label {
101
+ color: #f47738;
102
+ cursor: pointer;
103
+ }
104
+
105
+ .search-submit-bar {
106
+ margin-top: 32;
107
+ margin-left: auto;
108
+ }
109
+
110
+ .application-details-link-button {
111
+ @apply flex justify-between items-center;
112
+
113
+ .download-button {
114
+ color: #f47738;
115
+ margin-left: 8px;
116
+ }
117
+ }
118
+
119
+ .response-download-button {
120
+ @apply flex mb-sm;
121
+
122
+ .download-button {
123
+ color: #f47738;
124
+ margin-left: 8px;
125
+ }
126
+ }
127
+
128
+ .check-page-link-button {
129
+ color: #f47738 !important;
130
+ }
131
+
132
+ .pt-application-download-btn {
133
+ display: flex;
134
+ justify-content: flex-end;
135
+ margin: 0px 8px;
136
+ }
137
+
138
+ .form-pt-dropdown-only {
139
+ .options-card {
140
+ position: unset;
141
+ }
142
+ }
143
+ .application-table-container {
144
+ @apply mt-lg ml-lg flex-1;
145
+ }
146
+
147
+ .primary-label-btn {
148
+ @apply flex;
149
+ gap: 10px;
150
+
151
+ svg {
152
+ fill: #f47738;
153
+ }
154
+
155
+ color: #f47738;
156
+
157
+ cursor: pointer;
158
+ font-weight: 500;
159
+ width: fit-content;
160
+ }
161
+
162
+ .primaryColor {
163
+ color: #0b0c0c !important;
164
+ }
165
+
166
+ @media (hover: hover) {
167
+ .primary-label-btn {
168
+ &:hover {
169
+ color: #000;
170
+
171
+ svg {
172
+ fill: #000;
173
+ }
174
+ }
175
+ }
176
+ }
177
+
178
+ .disabled {
179
+ @apply border-grey-dark text-grey-dark !important;
180
+ pointer-events: none !important;
181
+ }
182
+
183
+ .card-date-input {
184
+ @apply absolute top-0 left-0 w-3/4 bg-white pl-sm border-input-border border-solid border-r-0;
185
+ outline: transparent solid 1px;
186
+ height: 2.5rem;
187
+ }
188
+
189
+ .h4 {
190
+ @apply mb-sm;
191
+ }
192
+
193
+ .react-time-picker {
194
+ width: 194px;
195
+ height: 2.5rem;
196
+ &__wrapper {
197
+ border: 2px solid #0b0c0c;
198
+ padding-left: 16px;
199
+ }
200
+ &__inputGroup__input {
201
+ @apply px-sm;
202
+ line-height: 2.5rem;
203
+ min-width: 16px;
204
+ &:focus {
205
+ outline: 2px solid black;
206
+ }
207
+ }
208
+ }
209
+
210
+ .border-none {
211
+ border: none;
212
+ justify-content: space-between;
213
+ }
214
+
215
+ input[type="number"]::-webkit-inner-spin-button,
216
+ input[type="number"]::-webkit-outer-spin-button {
217
+ -webkit-appearance: none;
218
+ margin: 0;
219
+ }
220
+ input[type="number"] {
221
+ -moz-appearance: textfield;
222
+ }
223
+
224
+ .static {
225
+ @apply flex flex-col;
226
+ min-height: 85vh;
227
+
228
+ &-wrapper {
229
+ flex: 1;
230
+ max-height: 75vh;
231
+ overflow: scroll;
232
+ -ms-overflow-style: none; /* IE and Edge */
233
+ scrollbar-width: none; /* Firefox */
234
+
235
+ &::-webkit-scrollbar {
236
+ display: none;
237
+ }
238
+ }
239
+ }
240
+
241
+ .bill-summary {
242
+ border: #e8e7e6 solid 1px;
243
+ @apply bg-grey-light w-full;
244
+
245
+ .bill-account-details {
246
+ @apply flex mb-md;
247
+ padding: 5px;
248
+
249
+ .label {
250
+ @apply w-1/2 font-bold;
251
+ }
252
+
253
+ .value {
254
+ @apply w-1/2 text-right;
255
+ }
256
+ }
257
+
258
+ .amount-details {
259
+ @apply flex mb-md items-center;
260
+ padding: 5px;
261
+
262
+ .label {
263
+ @apply w-1/2 font-bold;
264
+ }
265
+
266
+ .value {
267
+ @apply w-1/2 font-bold text-right;
268
+ font-size: 18px;
269
+ }
270
+ }
271
+ }
272
+
273
+ .bill-payment-amount {
274
+ @apply sticky bottom-0 bg-white;
275
+ padding-bottom: 32px;
276
+
277
+ .payment-amount-front {
278
+ @apply absolute z-10 w-10 flex justify-center items-center;
279
+ background-color: #efefef;
280
+ padding: 7px 12px;
281
+ color: #9a9a9a;
282
+ }
283
+ }
284
+
285
+ .text-indent-xl input {
286
+ text-indent: 40px;
287
+ }
288
+
289
+ .select-payment-type {
290
+ @apply flex justify-center font-bold items-center;
291
+ padding-top: 10px;
292
+ padding-bottom: 25px;
293
+
294
+ .value {
295
+ font-size: 20px;
296
+ }
297
+ }
298
+
299
+ .cheque-date {
300
+ @apply flex items-center mb-lg;
301
+ border: 2px solid #0b0c0c;
302
+ border-radius: 2px;
303
+
304
+ input {
305
+ @apply outline-none w-full;
306
+ border: 0px;
307
+ background: transparent;
308
+ text-indent: 5px;
309
+ padding: 6px 0px;
310
+ }
311
+
312
+ button {
313
+ @apply outline-none;
314
+ border: 0px;
315
+ background: transparent;
316
+ text-indent: 2px;
317
+ }
318
+ }
319
+
320
+ .w-half {
321
+ @apply w-1/2;
322
+ }
323
+
324
+ .ifsc-field {
325
+ @apply flex items-center mb-lg;
326
+ border: 2px solid #0b0c0c;
327
+ border-radius: 2px;
328
+
329
+ input {
330
+ @apply outline-none w-full;
331
+ border: 0px;
332
+ background: transparent;
333
+ text-indent: 5px;
334
+ padding: 6px 0px;
335
+ }
336
+ button {
337
+ @apply outline-none;
338
+ border: 0px;
339
+ background: transparent;
340
+ text-indent: 2px;
341
+ }
342
+ }
343
+
344
+ .text-input {
345
+ @apply relative w-full;
346
+ input {
347
+ &:hover {
348
+ @apply border-2 border-solid border-primary-main;
349
+ }
350
+ }
351
+ }
352
+
353
+ .text-input-width {
354
+ max-width: 540px;
355
+ }
356
+
357
+ .text-mobile-input-width {
358
+ max-width: 500px;
359
+ }
360
+
361
+ .custom-time-picker {
362
+ @apply w-full;
363
+ max-width: 200px;
364
+ }
365
+
366
+ .sla-cell {
367
+ @apply text-text-secondary;
368
+ }
369
+
370
+ .submit-bar-search {
371
+ margin-top: 32px;
372
+ margin-left: 16px;
373
+ max-width: 256px;
374
+ }
375
+
376
+ .clear-search-container {
377
+ @apply flex justify-between items-center;
378
+ }
379
+
380
+ .card-label-smaller {
381
+ @apply w-1/3;
382
+ margin-bottom: revert;
383
+ }
384
+
385
+ .card-label-APK {
386
+ @apply w-1/3;
387
+ margin-bottom: revert;
388
+ width: 100%;
389
+ }
390
+
391
+ .underline {
392
+ border-color: #e7e6e6;
393
+ @apply mb-sm;
394
+ }
395
+
396
+ .box-shadow-none {
397
+ box-shadow: none;
398
+ }
399
+
400
+ .component-in-front {
401
+ @apply flex justify-center items-center;
402
+ }
403
+
404
+ .subform-composer {
405
+ @apply flex;
406
+ }
407
+
408
+ .inbox-search-container {
409
+ .result {
410
+ @apply mt-lg;
411
+ }
412
+ }
413
+
414
+ .payment-form-text-input-correction {
415
+ width: 100% !important;
416
+ }
417
+
418
+ .edcr-citizen-inbox {
419
+ thead th:first-child {
420
+ min-width: 155px;
421
+ }
422
+ }
423
+
424
+ .error-boundary {
425
+ width: 100vw;
426
+ height: 100vh;
427
+ font-size: 16px;
428
+ font-family: sans-serif;
429
+ display: flex;
430
+ justify-content: center;
431
+ align-items: center;
432
+ flex-direction: column;
433
+ .error-container {
434
+ display: flex;
435
+ width: 400px;
436
+ justify-content: center;
437
+ align-items: center;
438
+ flex-direction: column;
439
+ h1 {
440
+ font-size: 32px;
441
+ font-weight: bold;
442
+ }
443
+ button {
444
+ height: 40px;
445
+ width: 153px;
446
+ border-radius: 0px;
447
+ padding: 8px 24px;
448
+ color: white;
449
+ cursor: pointer;
450
+ background-color: #f47738;
451
+ }
452
+ }
453
+ }
454
+
455
+ .error-boundary summary,
456
+ .error-boundary details {
457
+ width: 300px;
458
+ background-color: rgb(218, 100, 100);
459
+ margin: 5px;
460
+ border: 2px solid #222;
461
+ border-radius: 3px;
462
+ padding: 3px;
463
+ }
464
+
465
+ .full-width-card {
466
+ width: 92vw !important;
467
+ }
468
+ .full-employee-card-link {
469
+ width: 100% !important;
470
+ margin: 7px 0px;
471
+ }
472
+ .full-employee-card-height {
473
+ height: unset !important;
474
+ }
475
+
476
+ @media (min-width: 640px) {
477
+ .full-employee-card-height {
478
+ height: 196px !important;
479
+ }
480
+ .full-employee-card-link {
481
+ width: 30% !important;
482
+ }
483
+ .full-width-card {
484
+ @apply w-full !important;
485
+ }
486
+ }
487
+ .applications-list-container {
488
+ }
489
+ .complaint-summary {
490
+ @media (min-width: 780px) {
491
+ flex: 1 0 auto;
492
+ margin-left: 1rem;
493
+ margin-top: 1rem;
494
+ }
495
+ }
496
+
497
+ @media (min-width: 780px) {
498
+ .citizen-form-wrapper {
499
+ width: calc(100% - 219px);
500
+ display: flex;
501
+ justify-content: center;
502
+ margin-top: 1rem;
503
+ padding-left: 16px;
504
+ padding-right: 16px;
505
+ }
506
+ }
507
+ @media (min-width: 780px) {
508
+ .citizen-card-container {
509
+ padding-left: 15px;
510
+ padding-right: 15px;
511
+ margin-top: 1rem;
512
+ }
513
+ }
514
+
515
+ @media (min-width: 780px) {
516
+ .citizen-obps-wrapper,
517
+ .selection-card-wrapper,
518
+ .fsm-citizen-wrapper,
519
+ .pgr-citizen-wrapper,
520
+ .pt-citizen,
521
+ .bill-citizen,
522
+ .bills-citizen-wrapper,
523
+ .payer-bills-citizen-wrapper,
524
+ .engagement-citizen-wrapper,
525
+ .citizen-all-services-wrapper,
526
+ .mcollect-citizen,
527
+ .ws-citizen-wrapper,
528
+ .tl-citizen {
529
+ width: calc(100% - 219px);
530
+ padding-left: 16px;
531
+ padding-right: 16px;
532
+ margin-top: 1rem;
533
+ }
534
+ }
535
+ @media only screen and (max-width: 768px) {
536
+ /* For mobile phones: */
537
+ .error-boundary {
538
+ height: 75vh;
539
+ }
540
+ }
541
+ .employee-app-wrapper {
542
+ min-height: calc(100vh - 8em);
543
+ }
544
+
545
+ .ws-custom-wrapper {
546
+ .submit {
547
+ display: flex !important;
548
+ flex-direction: row-reverse !important;
549
+ width: 100% !important;
550
+ align-items: center;
551
+ button {
552
+ width: 240px !important;
553
+ }
554
+ p {
555
+ width: unset;
556
+ margin-right: 1rem;
557
+ }
558
+ }
559
+ }
560
+
561
+ .plumber-details-new-value-wrapper {
562
+ flex: 2 1 auto;
563
+ }
564
+
565
+ .connection-details-new-value-wrapper {
566
+ flex: 1 1 auto;
567
+ }
568
+
569
+ .connection-details-old-value-wrapper,
570
+ .plumber-details-old-value-wrapper {
571
+ flex: 1 1 auto;
572
+
573
+ .old-value-null-wrapper {
574
+ visibility: hidden;
575
+ padding-bottom: 8px;
576
+ margin-bottom: 8px;
577
+ }
578
+ .row {
579
+ color: #b1b4b6;
580
+ font-weight: 700;
581
+ font-size: 16px;
582
+ }
583
+ }
584
+
585
+ .plumber-details-new-value-wrapper {
586
+ flex: 2 1 auto;
587
+ }
588
+
589
+ .connection-details-new-value-wrapper {
590
+ flex: 1 1 auto;
591
+ }
592
+
593
+ .connection-details-old-value-wrapper,
594
+ .plumber-details-old-value-wrapper {
595
+ flex: 1 1 auto;
596
+ .old-value-null-wrapper {
597
+ visibility: hidden;
598
+ padding-bottom: 8px;
599
+ margin-bottom: 8px;
600
+ }
601
+ .row {
602
+ color: #b1b4b6;
603
+ font-weight: 700;
604
+ font-size: 16px;
605
+ }
606
+ }
607
+
608
+ .modal-header-ws {
609
+ padding: 1rem;
610
+ font-weight: 400;
611
+ }
612
+ .modal-body-ws {
613
+ padding: 1rem;
614
+ font-weight: 700;
615
+ color: #0b0c0c;
616
+ font-size: 24px;
617
+ margin-bottom: 1rem;
618
+ }
619
+ .privacy-icon {
620
+ cursor: pointer;
621
+ }
622
+ .privacy-icon:hover {
623
+ path {
624
+ fill: rgba(244, 119, 56, 1);
625
+ }
626
+ }
627
+
628
+ .attendance-view-table {
629
+ thead {
630
+ background-color: #dbd3d3;
631
+ th {
632
+ font-size: 12px;
633
+ padding: 8px 8px;
634
+ font-weight: 500;
635
+ border: 1px solid grey;
636
+ }
637
+ }
638
+ }
639
+
640
+ .employeeCard.card-no-margin {
641
+ margin-left: 0px !important;
642
+ padding: 0px;
643
+ box-shadow: none;
644
+ }
645
+
646
+ .attendance-date-range {
647
+ width: 60%;
648
+ }
649
+
650
+ .date-range-pair {
651
+ display: grid;
652
+ grid-template-columns: 1fr 1fr;
653
+ padding-top: 8px;
654
+ margin-top: 8px;
655
+ .attendence-date-picker {
656
+ width: 80%;
657
+ }
658
+ h2 {
659
+ font-weight: bolder;
660
+ }
661
+ .disabled {
662
+ border-color: #9E9E9E;
663
+ pointer-events: none !important;
664
+ input {
665
+ color: #9E9E9E !important;
666
+ }
667
+ svg {
668
+ fill: #9E9E9E;
669
+ }
670
+ }
671
+ }
672
+
673
+ @screen sm {
674
+ .date-range-pair {
675
+ display: flex;
676
+ .attendence-date-picker {
677
+ width: 100%;
678
+ }
679
+ }
680
+ }
681
+
682
+ .week-table-card-wrapper {
683
+ display: contents;
684
+ }
685
+
686
+ .header-left-margin {
687
+ margin-left: 22px;
688
+ }
689
+
690
+ .expand-collapse-wrapper {
691
+ display: flex;
692
+ flex-direction: column;
693
+ margin-top: 1rem;
694
+ }
695
+
696
+ .expand-collapse-header {
697
+ background-color: #f2f2f2;
698
+ display: grid;
699
+ grid-template-columns: 1fr 1fr;
700
+ align-items: center;
701
+ padding: 12px ;
702
+ position: relative;
703
+ font-weight: bolder;
704
+ border: 1px solid #828282;
705
+ border-radius: 4px;
706
+ }
707
+
708
+ .icon-toggle {
709
+ position: absolute;
710
+ right: 10px;
711
+ top: 50%;
712
+ transform: translate(0%,-50%);
713
+ cursor: pointer;
714
+ }
715
+
716
+ .expand-collapse-header .label{
717
+ display: block;
718
+ text-align: left;
719
+ }
720
+
721
+ .expand-collapse-header .value{
722
+ display: block;
723
+ text-align: right;
724
+ margin-right: 2rem;
725
+ }
726
+
727
+ .toggling-wrapper {
728
+ flex: 1;
729
+ transition: 0.2s ease-in-out;
730
+ padding: 0 1rem;
731
+ box-sizing: border-box;
732
+ }
733
+
734
+ .toggling-wrapper.collapse {
735
+ flex: none;
736
+ overflow: hidden;
737
+ height: 0;
738
+ transition: 0.2s ease-in-out;
739
+ }
740
+
741
+ .employeeCard {
742
+ &:empty {
743
+ padding: 0px !important;
744
+ }
745
+ }
746
+
747
+ @screen sm {
748
+ .employeeCard {
749
+ .card-section-header {
750
+ @apply mb-md;
751
+ }
752
+ &:empty {
753
+ padding: 0px !important;
754
+ }
755
+ }
756
+ }
757
+
758
+ .create-new-org {
759
+ height: 4rem;
760
+ padding: 1rem;
761
+ position: relative;
762
+ }
763
+
764
+ .create-new-org-btn {
765
+ width: 322px;
766
+ height: 40px;
767
+ position: absolute;
768
+ top: 0;
769
+ right: 1rem;
770
+ background: white;
771
+ border: 1px solid #F47738;
772
+ padding: 6px;
773
+ color: #F47738;
774
+ display: flex;
775
+ align-items: center;
776
+ svg {
777
+ margin: 0 15px;
778
+ }
779
+ }
780
+ .bills-menu-options {
781
+ cursor: pointer;
782
+ margin: 1rem;
783
+ text-decoration: underline;
784
+ }
785
+
786
+ .no-data-found {
787
+ height: 100%;
788
+ width : 100%;
789
+ display: flex;
790
+ flex-direction: column;
791
+ justify-content: center;
792
+ align-items: center;
793
+ .error-msg {
794
+ margin-top: 2rem;
795
+ }
796
+ }
797
+
798
+ .status-value-link {
799
+ color: #F47738;
800
+ }
801
+
802
+ .info-banner-wrap {
803
+ &.project-banner {
804
+ background: #FFE2B5;
805
+ p{
806
+ font-size: 16px;
807
+ color: #CC7B2F;
808
+ }
809
+ h2{
810
+ font-size: 18px;
811
+ color: #CC7B2F;
812
+ }
813
+ }
814
+ }
815
+
816
+ .sub-project-table-wrapper {
817
+ overflow-x: scroll;
818
+ .project-details-table {
819
+ position: relative;
820
+ .sub-projects-details-field-mt {
821
+ margin-top: 1.5rem;
822
+ }
823
+ .projects-subProject-details-error {
824
+ width : 100%;
825
+ position : absolute;
826
+ margin-top: 3px;
827
+ &.dropdown-field {
828
+ margin-top: -21px;
829
+ }
830
+ }
831
+ }
832
+ }