nhsuk-tools-chart-components-react 1.1.5 → 1.1.6

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.
@@ -15,6 +15,19 @@
15
15
  margin-bottom: 3px;
16
16
  }
17
17
 
18
+ .nhsuk-bar-slider-graph {
19
+ position: relative;
20
+ outline: 1px solid black;
21
+ margin-top: 20px;
22
+ display: flex;
23
+ height: 28px;
24
+ }
25
+ @media (min-width: 320px) and (max-width: 641px) {
26
+ .nhsuk-bar-slider-graph {
27
+ height: 24px;
28
+ }
29
+ }
30
+
18
31
  .nhsuk-bar-slider-arrow-marker {
19
32
  position: absolute;
20
33
  height: 16px;
@@ -59,19 +72,6 @@
59
72
  margin-right: 2px;
60
73
  }
61
74
 
62
- .nhsuk-bar-slider-graph {
63
- position: relative;
64
- outline: 1px solid black;
65
- margin-top: 20px;
66
- display: flex;
67
- height: 28px;
68
- }
69
- @media (min-width: 320px) and (max-width: 641px) {
70
- .nhsuk-bar-slider-graph {
71
- height: 24px;
72
- }
73
- }
74
-
75
75
  .nhsuk-bmi-classification-underweight, .nhsuk-bmi-legend-key-classification-underweight {
76
76
  background: #330072;
77
77
  }
@@ -360,6 +360,28 @@
360
360
  text-align: center;
361
361
  }
362
362
 
363
+ .nhsuk-bp-graph-marker {
364
+ position: absolute;
365
+ z-index: 6;
366
+ height: 24px;
367
+ width: 24px;
368
+ margin: 0 0 -12px -12px;
369
+ }
370
+ @media (max-width: 320px) {
371
+ .nhsuk-bp-graph-marker {
372
+ height: 20px;
373
+ width: 20px;
374
+ margin: 0 0 -10px -10px;
375
+ }
376
+ }
377
+ @media (min-width: 320px) and (max-width: 641px) {
378
+ .nhsuk-bp-graph-marker {
379
+ height: 22px;
380
+ width: 22px;
381
+ margin: 0 0 -11px -11px;
382
+ }
383
+ }
384
+
363
385
  .nhsuk-bp-classification-low, .nhsuk-bp-legend-key-classification-low {
364
386
  background: #330072;
365
387
  }
@@ -411,6 +433,47 @@
411
433
  z-index: 0;
412
434
  }
413
435
 
436
+ .nhsuk-bp-graph-cell {
437
+ flex-grow: 1;
438
+ border-bottom: 1px solid white;
439
+ border-left: 1px solid white;
440
+ background: transparent;
441
+ z-index: 4;
442
+ }
443
+
444
+ .nhsuk-bp-first-in-column {
445
+ border-bottom: none;
446
+ }
447
+
448
+ .nhsuk-bp-first-in-row {
449
+ border-left: none;
450
+ }
451
+
452
+ .nhsuk-cbmi-classification-healthy, .nhsuk-cbmi-legend-key-classification-healthy {
453
+ background: repeating-linear-gradient(-45deg, #30b4ab, #30b4ab 4.5px, #00a499 4.5px, #00a499 9px);
454
+ }
455
+
456
+ .nhsuk-cbmi-classification-overweight, .nhsuk-cbmi-legend-key-classification-overweight {
457
+ background: #ffb81c;
458
+ }
459
+
460
+ .nhsuk-cbmi-classification-underweight, .nhsuk-cbmi-legend-key-classification-underweight {
461
+ background: #330072;
462
+ }
463
+
464
+ .nhsuk-cbmi-graph {
465
+ position: relative;
466
+ outline: 1px solid black;
467
+ margin-top: 20px;
468
+ display: flex;
469
+ height: 28px;
470
+ }
471
+ @media (min-width: 320px) and (max-width: 641px) {
472
+ .nhsuk-cbmi-graph {
473
+ height: 24px;
474
+ }
475
+ }
476
+
414
477
  .nhsuk-cbmi-classification-healthy, .nhsuk-cbmi-legend-key-classification-healthy {
415
478
  background: repeating-linear-gradient(-45deg, #30b4ab, #30b4ab 4.5px, #00a499 4.5px, #00a499 9px);
416
479
  }
@@ -496,42 +559,6 @@
496
559
  background: #330072;
497
560
  }
498
561
 
499
- .nhsuk-cbmi-classification-overweight, .nhsuk-cbmi-classification-healthy, .nhsuk-cbmi-classification-underweight {
500
- position: absolute;
501
- bottom: 0%;
502
- outline: 1px solid black;
503
- height: 28px;
504
- }
505
- @media (min-width: 320px) and (max-width: 641px) {
506
- .nhsuk-cbmi-classification-overweight, .nhsuk-cbmi-classification-healthy, .nhsuk-cbmi-classification-underweight {
507
- height: 24px;
508
- }
509
- }
510
-
511
- .nhsuk-cbmi-classification-underweight {
512
- z-index: 3;
513
- }
514
-
515
- .nhsuk-cbmi-classification-healthy {
516
- z-index: 2;
517
- }
518
-
519
- .nhsuk-cbmi-classification-overweight {
520
- z-index: 1;
521
- }
522
-
523
- .nhsuk-cbmi-legend-key-classification-healthy, .nhsuk-cbmi-classification-healthy {
524
- background: repeating-linear-gradient(-45deg, #30b4ab, #30b4ab 4.5px, #00a499 4.5px, #00a499 9px);
525
- }
526
-
527
- .nhsuk-cbmi-legend-key-classification-overweight, .nhsuk-cbmi-classification-overweight {
528
- background: #ffb81c;
529
- }
530
-
531
- .nhsuk-cbmi-legend-key-classification-underweight, .nhsuk-cbmi-classification-underweight {
532
- background: #330072;
533
- }
534
-
535
562
  .nhsuk-cbmi-chart-arrow-marker {
536
563
  position: absolute;
537
564
  z-index: 4;
@@ -591,65 +618,38 @@
591
618
  }
592
619
  }
593
620
 
594
- .nhsuk-bp-graph-marker {
595
- position: absolute;
596
- z-index: 6;
597
- height: 24px;
598
- width: 24px;
599
- margin: 0 0 -12px -12px;
600
- }
601
- @media (max-width: 320px) {
602
- .nhsuk-bp-graph-marker {
603
- height: 20px;
604
- width: 20px;
605
- margin: 0 0 -10px -10px;
606
- }
607
- }
608
- @media (min-width: 320px) and (max-width: 641px) {
609
- .nhsuk-bp-graph-marker {
610
- height: 22px;
611
- width: 22px;
612
- margin: 0 0 -11px -11px;
613
- }
614
- }
615
-
616
- .nhsuk-cbmi-legend-key-classification-healthy, .nhsuk-cbmi-classification-healthy {
621
+ .nhsuk-cbmi-classification-healthy, .nhsuk-cbmi-legend-key-classification-healthy {
617
622
  background: repeating-linear-gradient(-45deg, #30b4ab, #30b4ab 4.5px, #00a499 4.5px, #00a499 9px);
618
623
  }
619
624
 
620
- .nhsuk-cbmi-legend-key-classification-overweight, .nhsuk-cbmi-classification-overweight {
625
+ .nhsuk-cbmi-classification-overweight, .nhsuk-cbmi-legend-key-classification-overweight {
621
626
  background: #ffb81c;
622
627
  }
623
628
 
624
- .nhsuk-cbmi-legend-key-classification-underweight, .nhsuk-cbmi-classification-underweight {
629
+ .nhsuk-cbmi-classification-underweight, .nhsuk-cbmi-legend-key-classification-underweight {
625
630
  background: #330072;
626
631
  }
627
632
 
628
- .nhsuk-cbmi-graph {
629
- position: relative;
633
+ .nhsuk-cbmi-classification-overweight, .nhsuk-cbmi-classification-healthy, .nhsuk-cbmi-classification-underweight {
634
+ position: absolute;
635
+ bottom: 0%;
630
636
  outline: 1px solid black;
631
- margin-top: 20px;
632
- display: flex;
633
637
  height: 28px;
634
638
  }
635
639
  @media (min-width: 320px) and (max-width: 641px) {
636
- .nhsuk-cbmi-graph {
640
+ .nhsuk-cbmi-classification-overweight, .nhsuk-cbmi-classification-healthy, .nhsuk-cbmi-classification-underweight {
637
641
  height: 24px;
638
642
  }
639
643
  }
640
644
 
641
- .nhsuk-bp-graph-cell {
642
- flex-grow: 1;
643
- border-bottom: 1px solid white;
644
- border-left: 1px solid white;
645
- background: transparent;
646
- z-index: 4;
645
+ .nhsuk-cbmi-classification-underweight {
646
+ z-index: 3;
647
647
  }
648
648
 
649
- .nhsuk-bp-first-in-column {
650
- border-bottom: none;
649
+ .nhsuk-cbmi-classification-healthy {
650
+ z-index: 2;
651
651
  }
652
652
 
653
- .nhsuk-bp-first-in-row {
654
- border-left: none;
653
+ .nhsuk-cbmi-classification-overweight {
654
+ z-index: 1;
655
655
  }
@@ -15,6 +15,48 @@
15
15
  margin-bottom: 3px;
16
16
  }
17
17
 
18
+ .nhsuk-bar-slider-graph {
19
+ position: relative;
20
+ outline: 1px solid black;
21
+ margin-top: 20px;
22
+ display: flex;
23
+ height: 28px;
24
+ }
25
+ @media (min-width: 320px) and (max-width: 641px) {
26
+ .nhsuk-bar-slider-graph {
27
+ height: 24px;
28
+ }
29
+ }
30
+
31
+ .nhsuk-bmi-classification-underweight, .nhsuk-bmi-legend-key-classification-underweight {
32
+ background: #330072;
33
+ }
34
+
35
+ .nhsuk-bmi-classification-healthy, .nhsuk-bmi-legend-key-classification-healthy {
36
+ background: repeating-linear-gradient(-45deg, #30b4ab, #30b4ab 4.5px, #00a499 4.5px, #00a499 9px);
37
+ }
38
+
39
+ .nhsuk-bmi-classification-overweight, .nhsuk-bmi-legend-key-classification-overweight {
40
+ background: #ffb81c;
41
+ }
42
+
43
+ .nhsuk-bmi-classification-obese, .nhsuk-bmi-legend-key-classification-obese {
44
+ background: repeating-linear-gradient(45deg, #da5147, #da5147 4.5px, #d5281b 4.5px, #d5281b 9px);
45
+ }
46
+
47
+ .nhsuk-bmi-graph {
48
+ position: relative;
49
+ outline: 1px solid black;
50
+ display: flex;
51
+ height: 28px;
52
+ margin-bottom: nhsuk-spacing(4);
53
+ }
54
+ @media (min-width: 320px) and (max-width: 641px) {
55
+ .nhsuk-bmi-graph {
56
+ height: 24px;
57
+ }
58
+ }
59
+
18
60
  .nhsuk-bar-slider-arrow-marker {
19
61
  position: absolute;
20
62
  height: 16px;
@@ -59,48 +101,6 @@
59
101
  margin-right: 2px;
60
102
  }
61
103
 
62
- .nhsuk-bar-slider-graph {
63
- position: relative;
64
- outline: 1px solid black;
65
- margin-top: 20px;
66
- display: flex;
67
- height: 28px;
68
- }
69
- @media (min-width: 320px) and (max-width: 641px) {
70
- .nhsuk-bar-slider-graph {
71
- height: 24px;
72
- }
73
- }
74
-
75
- .nhsuk-bmi-classification-underweight, .nhsuk-bmi-legend-key-classification-underweight {
76
- background: #330072;
77
- }
78
-
79
- .nhsuk-bmi-classification-healthy, .nhsuk-bmi-legend-key-classification-healthy {
80
- background: repeating-linear-gradient(-45deg, #30b4ab, #30b4ab 4.5px, #00a499 4.5px, #00a499 9px);
81
- }
82
-
83
- .nhsuk-bmi-classification-overweight, .nhsuk-bmi-legend-key-classification-overweight {
84
- background: #ffb81c;
85
- }
86
-
87
- .nhsuk-bmi-classification-obese, .nhsuk-bmi-legend-key-classification-obese {
88
- background: repeating-linear-gradient(45deg, #da5147, #da5147 4.5px, #d5281b 4.5px, #d5281b 9px);
89
- }
90
-
91
- .nhsuk-bmi-graph {
92
- position: relative;
93
- outline: 1px solid black;
94
- display: flex;
95
- height: 28px;
96
- margin-bottom: nhsuk-spacing(4);
97
- }
98
- @media (min-width: 320px) and (max-width: 641px) {
99
- .nhsuk-bmi-graph {
100
- height: 24px;
101
- }
102
- }
103
-
104
104
  .nhsuk-bmi-classification-underweight, .nhsuk-bmi-legend-key-classification-underweight {
105
105
  background: #330072;
106
106
  }
@@ -127,21 +127,6 @@
127
127
  box-shadow: none;
128
128
  }
129
129
 
130
- .nhsuk-bmi-chart-marker {
131
- position: absolute;
132
- z-index: 4;
133
- height: 24px;
134
- width: 24px;
135
- margin: 2px 0 -12px -12px;
136
- }
137
- @media (min-width: 320px) and (max-width: 641px) {
138
- .nhsuk-bmi-chart-marker {
139
- height: 20px;
140
- width: 20px;
141
- margin: 2px 0 -10px -10px;
142
- }
143
- }
144
-
145
130
  .nhsuk-bmi-classification-underweight, .nhsuk-bmi-legend-key-classification-underweight {
146
131
  background: #330072;
147
132
  }
@@ -204,6 +189,21 @@
204
189
  text-align: center;
205
190
  }
206
191
 
192
+ .nhsuk-bmi-chart-marker {
193
+ position: absolute;
194
+ z-index: 4;
195
+ height: 24px;
196
+ width: 24px;
197
+ margin: 2px 0 -12px -12px;
198
+ }
199
+ @media (min-width: 320px) and (max-width: 641px) {
200
+ .nhsuk-bmi-chart-marker {
201
+ height: 20px;
202
+ width: 20px;
203
+ margin: 2px 0 -10px -10px;
204
+ }
205
+ }
206
+
207
207
  .nhsuk-bp-graph {
208
208
  position: relative;
209
209
  margin-left: 20px;
@@ -524,6 +524,41 @@
524
524
  background: #330072;
525
525
  }
526
526
 
527
+ .nhsuk-cbmi-axis-marker {
528
+ border: 1px solid black;
529
+ position: absolute;
530
+ bottom: -5px;
531
+ margin-left: -0.5px;
532
+ box-shadow: 0px 0px white inset, 1px 0px white, -1px 0px white;
533
+ z-index: 100;
534
+ height: 33px;
535
+ }
536
+ @media (min-width: 320px) and (max-width: 641px) {
537
+ .nhsuk-cbmi-axis-marker {
538
+ height: 29px;
539
+ }
540
+ }
541
+
542
+ .nhsuk-cbmi-axis-marker-label {
543
+ position: absolute;
544
+ bottom: -25px;
545
+ left: -10px;
546
+ width: 20px;
547
+ text-align: center;
548
+ }
549
+
550
+ .nhsuk-cbmi-classification-healthy, .nhsuk-cbmi-legend-key-classification-healthy {
551
+ background: repeating-linear-gradient(-45deg, #30b4ab, #30b4ab 4.5px, #00a499 4.5px, #00a499 9px);
552
+ }
553
+
554
+ .nhsuk-cbmi-classification-overweight, .nhsuk-cbmi-legend-key-classification-overweight {
555
+ background: #ffb81c;
556
+ }
557
+
558
+ .nhsuk-cbmi-classification-underweight, .nhsuk-cbmi-legend-key-classification-underweight {
559
+ background: #330072;
560
+ }
561
+
527
562
  .nhsuk-cbmi-chart-arrow-marker {
528
563
  position: absolute;
529
564
  z-index: 4;
@@ -595,41 +630,6 @@
595
630
  background: #330072;
596
631
  }
597
632
 
598
- .nhsuk-cbmi-axis-marker {
599
- border: 1px solid black;
600
- position: absolute;
601
- bottom: -5px;
602
- margin-left: -0.5px;
603
- box-shadow: 0px 0px white inset, 1px 0px white, -1px 0px white;
604
- z-index: 100;
605
- height: 33px;
606
- }
607
- @media (min-width: 320px) and (max-width: 641px) {
608
- .nhsuk-cbmi-axis-marker {
609
- height: 29px;
610
- }
611
- }
612
-
613
- .nhsuk-cbmi-axis-marker-label {
614
- position: absolute;
615
- bottom: -25px;
616
- left: -10px;
617
- width: 20px;
618
- text-align: center;
619
- }
620
-
621
- .nhsuk-cbmi-classification-healthy, .nhsuk-cbmi-legend-key-classification-healthy {
622
- background: repeating-linear-gradient(-45deg, #30b4ab, #30b4ab 4.5px, #00a499 4.5px, #00a499 9px);
623
- }
624
-
625
- .nhsuk-cbmi-classification-overweight, .nhsuk-cbmi-legend-key-classification-overweight {
626
- background: #ffb81c;
627
- }
628
-
629
- .nhsuk-cbmi-classification-underweight, .nhsuk-cbmi-legend-key-classification-underweight {
630
- background: #330072;
631
- }
632
-
633
633
  .nhsuk-cbmi-classification-overweight, .nhsuk-cbmi-classification-healthy, .nhsuk-cbmi-classification-underweight {
634
634
  position: absolute;
635
635
  bottom: 0%;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "nhsuk-tools-chart-components-react",
3
- "version": "1.1.5",
3
+ "version": "1.1.6",
4
4
  "description": "",
5
5
  "main": "./dist/cjs/index.js",
6
6
  "module": "./dist/esm/index.js",