@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.
@@ -0,0 +1,640 @@
1
+ .dss-switch-tabs{/* Card / Primary */
2
+
3
+ /* Light Theme / Paper */
4
+
5
+ background: #FFFFFF;
6
+ /* Card-Shadow */
7
+
8
+ box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.16);
9
+ border-radius: 4px;
10
+ margin-bottom:3%;
11
+ margin-right:25px;
12
+ overflow-x: auto;
13
+ }
14
+
15
+ .dss-header-label{
16
+ font-weight: 600 !important;
17
+ font-size: 22px !important;
18
+ white-space: pre-line;
19
+ }
20
+ .recharts-brush-texts { font-size: 0; }
21
+ .dss-switch-tab-wrapper{
22
+ cursor:pointer;
23
+ display: flex;
24
+ flex-direction: row;
25
+ height: 50px;
26
+ align-items: center;
27
+ }
28
+
29
+ .dss-switch-tab-selected{
30
+ /* Revenue */
31
+ border-bottom: 3px solid #f47738;
32
+ font-family: Roboto;
33
+ font-style: normal;
34
+ font-weight: 500;
35
+ font-size: 22px;
36
+ color: #f47738;
37
+ padding: 7px 20px;
38
+ white-space: nowrap;
39
+
40
+ }
41
+ .dss-switch-tab-unselected{
42
+
43
+ font-family: Roboto;
44
+ font-style: normal;
45
+ font-weight: 400;
46
+ font-size: 19px;
47
+ color: #505A5F;
48
+ padding: 8px 20px;
49
+ white-space: nowrap;
50
+
51
+ }
52
+
53
+ .dss-table-subheader{
54
+ position: relative;
55
+ top: -7px;
56
+ font-size: 13px;
57
+ font-weight: 400;
58
+ color: rgba(80, 90, 95, 1);
59
+ }
60
+
61
+ .dss-pie-subheader{
62
+ position: relative;
63
+ top: -7px;
64
+ font-size: 13px;
65
+ font-weight: 400;
66
+ color: rgba(80, 90, 95, 1);
67
+ }
68
+
69
+ .recharts-legend-item{
70
+ margin-bottom: 20px !important;
71
+ white-space: pre;
72
+ }
73
+
74
+ .dss-white-pre{
75
+ white-space: pre;
76
+
77
+ }
78
+ .dss-white-pre-line{
79
+ white-space: pre-line;
80
+
81
+ }
82
+ .dss-white-pre-temp{
83
+ white-space: pre-line;
84
+
85
+ }
86
+
87
+ .multi-select-dropdown-wrap{
88
+ .master{
89
+ .label{
90
+ p{
91
+ white-space:pre;
92
+ }
93
+ }
94
+ }
95
+ }
96
+
97
+ .divToBeHidden{
98
+ display:block;
99
+ }
100
+
101
+ .divWillGetHidden{
102
+ display:none;
103
+ }
104
+
105
+ .dss-temp-white-pre{
106
+ white-space: pre;
107
+ }
108
+
109
+ .dss-input-active-border{
110
+ --border-opacity: 1;
111
+ border: 1px solid #f47738 !important;
112
+ border-color: rgba(244, 119, 56, var(--border-opacity));
113
+ }
114
+
115
+ .dss-card {
116
+ display: flex;
117
+ flex-wrap: wrap;
118
+ }
119
+
120
+ .dss-card-parent {
121
+ display: flex;
122
+ flex-direction: column;
123
+ width: 31%;
124
+ border-radius: 6px;
125
+ padding: 25px;
126
+ margin: 15px 11.5px;
127
+ box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
128
+ cursor: pointer;
129
+ }
130
+
131
+ .dss-card-body {
132
+ display: flex;
133
+ flex-wrap: wrap;
134
+ cursor: pointer;
135
+ }
136
+
137
+ .dss-card-body-stacked {
138
+ display: block;
139
+ cursor: pointer;
140
+ }
141
+
142
+ .dss-card-item {
143
+ text-align: center;
144
+ padding: 15px;
145
+ }
146
+
147
+ .dss-card-item-border {
148
+ border-bottom: 1px solid #D6D5D4;
149
+ }
150
+
151
+ .dss-card-header {
152
+ display: flex;
153
+ margin-bottom: 30px;
154
+ align-items: center;
155
+
156
+ p {
157
+ font-size: 24px;
158
+ font-family: "Roboto", sans-serif;
159
+ font-weight: 500;
160
+ color: #000000;
161
+ }
162
+
163
+ svg {
164
+ width: 40px;
165
+ height: 40px;
166
+ }
167
+ }
168
+
169
+ .dss-insight-card {
170
+ margin: 10px 0;
171
+
172
+ p {
173
+ font-family: "Roboto", sans-serif;
174
+ }
175
+
176
+ .p1 {
177
+ font-size: 16px;
178
+ color: #505A5F;
179
+ font-weight: 700;
180
+ }
181
+
182
+ .p3 {
183
+ font-size: 16px;
184
+ font-weight: 400;
185
+ padding-bottom: 25px;
186
+ }
187
+
188
+ .p2 {
189
+ font-size: 36px;
190
+ font-weight: 700;
191
+ color: #505A5F;
192
+ }
193
+
194
+ .color-green {
195
+ color: #00703C;
196
+ }
197
+
198
+ .color-red {
199
+ color: #D4351C;
200
+ }
201
+ }
202
+ .w-100 {
203
+ width: 100%;
204
+ }
205
+ .dss-w-100 {
206
+ width: 97%;
207
+ }
208
+
209
+ .h-100{
210
+ width: 100%;
211
+ height: 100%;
212
+ }
213
+
214
+ .dss-h-100{
215
+ width: 97%;
216
+ height: 100%;
217
+ }
218
+
219
+ .tab-rows{
220
+ display: flex;
221
+ justify-content:space-between;
222
+ height: 30px;
223
+ align-items: center;
224
+ width: 60%;
225
+ margin-left: 13%;
226
+ }
227
+ .tab-header{
228
+ font-weight: 700;
229
+ font-size: 16px;
230
+ line-height: 19px;
231
+ border-bottom: 1px solid #b1b4b6;
232
+ color: #2a3340;
233
+ }
234
+ .map-status{
235
+ position: relative;
236
+ width: 33%;
237
+ left: 50%;
238
+ bottom: 130px;
239
+ }
240
+ .map-row{
241
+ display: flex;
242
+ align-items: center;
243
+ margin-top: 5px;
244
+ }
245
+ .map-box{
246
+ display: inline-block;
247
+ height: 10px;
248
+ width: 10px;
249
+ }
250
+ .map-text{
251
+ margin-left: 5px;
252
+ color: #636363;
253
+ font-size: 14px;
254
+ }
255
+
256
+ .heatMap {
257
+ box-shadow: 0 4px 4px rgb(0 0 0 / 25%);
258
+ flex: 1;
259
+ margin-top: 10px;
260
+ }
261
+
262
+ .stackedTable {
263
+ box-shadow: 0 4px 4px rgb(0 0 0 / 25%);
264
+ flex: 1;
265
+ margin-top: 10px;
266
+ }
267
+
268
+ .stackedCard {
269
+ box-shadow: 0 4px 4px rgb(0 0 0 / 25%);
270
+ flex: 1;
271
+ margin-top: 30px;
272
+ }
273
+
274
+ .stacked-table-container{
275
+ margin-top: 15px;
276
+ height: 500px;
277
+ overflow-y: auto;
278
+ }
279
+ .stacked-row{
280
+ display: flex;
281
+ justify-content: space-evenly;
282
+ align-items: baseline;
283
+ background-color: #FAFAFA;
284
+ width: 99%;
285
+ color: #505A5F;
286
+ border-radius: 4px;
287
+ border: 1px solid #D6D5D4;
288
+ text-align: center;
289
+ margin-left: auto;
290
+ margin-right: auto;
291
+ margin-top: 10px;
292
+ margin-bottom: 10px;
293
+ padding: 20px;
294
+ }
295
+ .stacked-row-index{
296
+ width: 20%;
297
+ word-break: break-word;
298
+ color: #505A5F;
299
+ font-size: 24px;
300
+ font-weight: 700;
301
+ margin: auto 0px auto 30px;
302
+ text-align: left;
303
+ }
304
+
305
+ .stacked-row-button{
306
+ width: 15%;
307
+ background: #FFFFFF;
308
+ border-radius: 4px;
309
+ text-align: center;
310
+ padding: 10px 0px;
311
+ margin: auto;
312
+ font-weight: 700;
313
+ font-size: 16px;
314
+ };
315
+
316
+ .stacked-row-button:focus{outline: #F47738;}
317
+
318
+ .stacked-abs-cell{
319
+ width: 20%;
320
+ text-align: center;
321
+ }
322
+ .stacked-abs-value{
323
+ font-size: 24px;
324
+ font-weight: 700;
325
+ color: #505A5F;
326
+ }
327
+
328
+ .stacked-cell-sub-text{
329
+ font-size: 16px;
330
+ font-weight: 400;
331
+ color: #505A5F !important;
332
+ margin-left: auto;
333
+ margin-right: auto;
334
+ }
335
+
336
+ .stacked-percentage-cell{
337
+ width: 25%;
338
+ display: flex;
339
+ flex-direction: column;
340
+ justify-content: center;
341
+ align-items: center;
342
+ margin-left: auto;
343
+ margin-right: auto;
344
+ }
345
+
346
+ .stacked-progress-cell{
347
+ display: flex;
348
+ width: 170px;
349
+ justify-content: space-between;
350
+ align-items: center;
351
+ }
352
+
353
+ .stacked-percentage-value{
354
+ width: 20%;
355
+ font-size: 24px;
356
+ font-weight: 700;
357
+ margin: 0px 30px 0 0;
358
+ color: #505A5F;
359
+ }
360
+
361
+ .stacked-percentage-bar-grey{
362
+ background-color: #D9D9D9;
363
+ width: 75%;
364
+ margin: 0px 0px 0px 20px;
365
+ border-radius: 20px;
366
+ height: 8px;
367
+ }
368
+ .stacked-percentage-bar-progress{
369
+ margin: 0px;
370
+ border-radius: 20px;
371
+ height: 100%;
372
+ }
373
+
374
+ .banner-card{
375
+ padding:0;
376
+ border: 1px solid #F47738;
377
+ box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.16);
378
+ border-radius: 4px;
379
+ display: flex;
380
+ justify-content: space-between;
381
+ flex-wrap: wrap;
382
+ }
383
+
384
+ .banner-table {
385
+ justify-content: center;
386
+ display: flex;
387
+ padding: 5px;
388
+ margin: auto;
389
+ }
390
+
391
+ .banner-heading {
392
+ display: flex;
393
+ flex-direction: column;
394
+ margin-left: 20px;
395
+ }
396
+
397
+ .banner-main-heading{
398
+ font-size: 22px;
399
+ font-weight: 700;
400
+ color: #0B0C0C;
401
+ }
402
+
403
+ .banner-sub-heading{
404
+ font-size: 12px;
405
+ color: #585858;
406
+ }
407
+
408
+ .banner-card-header {
409
+ border-radius: 3px 0px 0px 3px;
410
+ border: 1px solid #EEEEEE;
411
+ background: #FAFAFA;
412
+ display: flex;
413
+ align-items: center;
414
+ padding: 35px;
415
+ width: 28%;
416
+ }
417
+
418
+ .banner-cell-sub-text{
419
+ font-size: 16px;
420
+ font-weight: 400;
421
+ color: #585858;
422
+ margin-left: auto;
423
+ margin-right: auto;
424
+ word-wrap: break-word;
425
+ }
426
+
427
+ .banner-value{
428
+ font-size: 28px;
429
+ font-weight: 700;
430
+ color: #183E4A;
431
+ }
432
+
433
+ .parentDiv-progress {
434
+ display: flex;
435
+ align-items: center;
436
+ min-width: 20%;
437
+ margin: 0;
438
+ padding-right: 1%;
439
+ }
440
+
441
+ .containerDiv-progress {
442
+ background-color: #D6D5D4;
443
+ border-radius: 25px;
444
+ width: 70%;
445
+ height: 14%;
446
+ margin: auto;
447
+ }
448
+
449
+ @media (max-width :1200px) {
450
+
451
+ .parentDiv-progress {
452
+ display: flex;
453
+ align-items: center;
454
+ min-width: 100%;
455
+ padding: 10px 10px 10px 50px;
456
+ margin: 0 auto;
457
+ }
458
+
459
+ .containerDiv-progress {
460
+ background-color: #D6D5D4;
461
+ border-radius: 25px;
462
+ width: 80%;
463
+ height: 20%;
464
+ }
465
+ }
466
+
467
+ @media screen and (max-width: 768px) {
468
+ .dss-switch-tabs{/* Card / Primary */
469
+ margin-right:0px;
470
+ overflow-x: auto;
471
+ overflow-y: hidden;
472
+ }
473
+ .dss-switch-tab-unselected, .dss-switch-tab-selected{
474
+ font-size: 12px;
475
+ }
476
+
477
+ .dss-card-parent{
478
+ width:100%;
479
+ }
480
+
481
+ .stacked-table-container{
482
+ margin-top: 15px;
483
+ height: 500px;
484
+ overflow-y: auto;
485
+ }
486
+
487
+ .stacked-row{
488
+ display: flex;
489
+ justify-content: space-evenly;
490
+ align-items: center;
491
+ background-color: #FAFAFA;
492
+ width: 95%;
493
+ color: #505A5F;
494
+ border-radius: 4px;
495
+ border: 1px solid #D6D5D4;
496
+ text-align: center;
497
+ margin-left: auto;
498
+ margin-right: auto;
499
+ margin-top: 10px;
500
+ margin-bottom: 10px;
501
+ padding: 20px;
502
+ flex-wrap: wrap;
503
+ }
504
+ .stacked-row-index{
505
+ width: 100%;
506
+ word-break: break-word;
507
+ color: #505A5F;
508
+ font-size: 24px;
509
+ font-weight: 700;
510
+ margin: 0px;
511
+ text-align: center;
512
+ }
513
+ .stacked-row-button{
514
+ width: 100%;
515
+ background: #FFFFFF;
516
+ border-radius: 4px;
517
+ text-align: center;
518
+ padding: 10px 0px;
519
+ margin: 20px;
520
+ font-weight: 700;
521
+ };
522
+ .stacked-abs-cell{
523
+ width: 100%;
524
+ text-align: center;
525
+ flex-direction: row-reverse;
526
+ justify-content: center;
527
+ display: flex;
528
+ margin: 15px;
529
+ }
530
+
531
+ .stacked-abs-value{
532
+ font-size: 24px;
533
+ font-weight: 500;
534
+ color: #505A5F !important;
535
+ margin: 0 0px 0px 15px;
536
+ }
537
+ .stacked-cell-sub-text{
538
+ font-size: 14px;
539
+ font-weight: 200;
540
+ color: #505A5F !important;
541
+ margin-top: 7px;
542
+ }
543
+
544
+ .stacked-percentage-cell{
545
+ width: 100%;
546
+ display: flex;
547
+ flex-direction: column-reverse;
548
+ justify-content: center;
549
+ align-items: center;
550
+ margin: 15px 0px;
551
+ }
552
+
553
+ .stacked-progress-cell{
554
+ display: flex;
555
+ width: 200px;
556
+ justify-content: space-between;
557
+ flex-direction: row-reverse;
558
+ align-items: center;
559
+ margin: 5px;
560
+ }
561
+ .stacked-percentage-value{
562
+ width: 20%;
563
+ font-size: 20px;
564
+ font-weight: 700;
565
+ margin: 0px 10px;
566
+ color: #505A5F !important;
567
+ }
568
+
569
+ .stacked-percentage-bar-grey{
570
+ background-color: #D9D9D9;
571
+ width: 75%;
572
+ margin: 0px 10px;
573
+ border-radius: 20px;
574
+ height: 8px;
575
+ }
576
+ .stacked-percentage-bar-orange{
577
+ background-color: #F47738;
578
+ margin: 0px;
579
+ border-radius: 20px;
580
+ height: 100%;
581
+ display: block;
582
+ }
583
+
584
+ .stackedCard {
585
+ margin-top: 5px;
586
+ }
587
+
588
+ .employeeCard {
589
+ margin-bottom: 20px;
590
+ }
591
+
592
+ .banner-cell{
593
+ width: 100%;
594
+ display: flex;
595
+ flex-direction: column-reverse;
596
+ justify-content: space-around;
597
+ align-items: center;
598
+ }
599
+ }
600
+
601
+ .horizontalBarChartLabel{
602
+ font-size: 16px;
603
+ color: #505A5F !important;
604
+ }
605
+ @media screen and (max-width: 1000px) {
606
+ .banner-card-header {
607
+ width: 100%;
608
+ }
609
+
610
+ .banner-table {
611
+ width: auto;
612
+ margin: auto;
613
+ }
614
+ }
615
+ .customTable {
616
+ td {
617
+ border-bottom: 0px solid #b1b4b6 !important;
618
+ }
619
+ }
620
+ .dss-table-wrapper {
621
+ table {
622
+ th {
623
+ .tooltip {
624
+ min-width: 120px !important;
625
+ }
626
+ }
627
+ }
628
+ }
629
+ .filters-wrapper {
630
+ .switch-wrapper {
631
+ .radio-switch {
632
+ &:checked ~ label {
633
+ font-weight: 600;
634
+ }
635
+ }
636
+ }
637
+ }
638
+ .employee-app-wrapper {
639
+ zoom: 0.8;
640
+ }