nhsuk-tools-chart-components-react 2.1.0 → 2.2.0-beta.0

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.
Files changed (29) hide show
  1. package/README.md +1 -1
  2. package/dist/cjs/bundle.css +242 -242
  3. package/dist/cjs/index.js +1 -1
  4. package/dist/cjs/index.js.map +1 -1
  5. package/dist/esm/bundle.css +279 -279
  6. package/dist/esm/components/bar-slider/bar-slider-chart-axis.js +1 -1
  7. package/dist/esm/components/bar-slider/bar-slider-chart-axis.js.map +1 -1
  8. package/dist/esm/components/bar-slider/bar-slider-chart-regions.js +1 -1
  9. package/dist/esm/components/bar-slider/bar-slider-chart-regions.js.map +1 -1
  10. package/dist/esm/components/bar-slider/bar-slider-figure-chart.js +1 -1
  11. package/dist/esm/components/bar-slider/bar-slider-figure-chart.js.map +1 -1
  12. package/dist/esm/components/blood-pressure/bp-chart.js +1 -1
  13. package/dist/esm/components/blood-pressure/bp-chart.js.map +1 -1
  14. package/dist/esm/components/blood-pressure/bp-figure-chart.js +1 -1
  15. package/dist/esm/components/blood-pressure/bp-figure-chart.js.map +1 -1
  16. package/dist/esm/components/bmi/bmi-figure-chart.js +1 -1
  17. package/dist/esm/components/bmi/bmi-figure-chart.js.map +1 -1
  18. package/dist/esm/components/chart-legend.js +1 -1
  19. package/dist/esm/components/chart-legend.js.map +1 -1
  20. package/dist/esm/components/child-bmi/cbmi-chart-marker.js +1 -1
  21. package/dist/esm/components/child-bmi/cbmi-chart-marker.js.map +1 -1
  22. package/dist/esm/components/child-bmi/cbmi-figure-chart.js +1 -1
  23. package/dist/esm/components/child-bmi/cbmi-figure-chart.js.map +1 -1
  24. package/dist/esm/models/bar-slider-chart.model.js +1 -1
  25. package/dist/esm/models/bar-slider-chart.model.js.map +1 -1
  26. package/dist/esm/utils/bar-slider.utils.js +1 -1
  27. package/dist/esm/utils/bar-slider.utils.js.map +1 -1
  28. package/dist/index.d.ts +2 -1
  29. package/package.json +8 -5
@@ -16,82 +16,90 @@
16
16
  }
17
17
 
18
18
 
19
- .nhsuk-bmi-legend-key-classification-underweight, .nhsuk-bmi-classification-underweight {
20
- background: #330072;
19
+ .nhsuk-bar-slider-arrow-marker {
20
+ position: absolute;
21
+ height: 16px;
22
+ width: 16px;
23
+ margin: -9px 0 -8px -8px;
24
+ }
25
+ @media (min-width: 320px) and (max-width: 641px) {
26
+ .nhsuk-bar-slider-arrow-marker {
27
+ height: 12px;
28
+ width: 12px;
29
+ margin: -9px 0 -6px -6px;
30
+ }
21
31
  }
22
32
 
23
- .nhsuk-bmi-legend-key-classification-healthy, .nhsuk-bmi-classification-healthy {
24
- background: repeating-linear-gradient(-45deg, #30b4ab, #30b4ab 4.5px, #00a499 4.5px, #00a499 9px);
33
+ .nhsuk-bar-slider-label-align-left {
34
+ display: flex;
35
+ justify-content: left;
25
36
  }
26
37
 
27
- .nhsuk-bmi-legend-key-classification-overweight, .nhsuk-bmi-classification-overweight {
28
- background: #ffb81c;
38
+ .nhsuk-bar-slider-label-align-center {
39
+ display: flex;
40
+ justify-content: center;
29
41
  }
30
42
 
31
- .nhsuk-bmi-legend-key-classification-obese, .nhsuk-bmi-classification-obese {
32
- background: repeating-linear-gradient(45deg, #da5147, #da5147 4.5px, #d5281b 4.5px, #d5281b 9px);
43
+ .nhsuk-bar-slider-label-align-right {
44
+ display: flex;
45
+ justify-content: right;
33
46
  }
34
47
 
35
- .nhsuk-bmi-classification-obese, .nhsuk-bmi-classification-overweight, .nhsuk-bmi-classification-healthy, .nhsuk-bmi-classification-underweight {
36
- position: absolute;
37
- bottom: 0%;
38
- outline: 1px solid black;
39
- border-right: 1px solid black;
40
- box-shadow: -1px 0px white inset, 2px 0px white, 0px -2px white;
41
- height: 28px;
48
+ .nhsuk-bar-slider-label-marker {
49
+ position: relative;
50
+ height: 25px;
51
+ width: auto;
52
+ white-space: nowrap;
53
+ margin-top: -30px;
42
54
  }
43
- @media (min-width: 320px) and (max-width: 641px) {
44
- .nhsuk-bmi-classification-obese, .nhsuk-bmi-classification-overweight, .nhsuk-bmi-classification-healthy, .nhsuk-bmi-classification-underweight {
45
- height: 24px;
46
- }
55
+
56
+ .nhsuk-bar-slider-value-marker {
57
+ position: relative;
58
+ font-weight: bold;
59
+ margin-left: 5px;
60
+ margin-right: 2px;
47
61
  }
48
62
 
49
- .nhsuk-bmi-classification-underweight {
50
- z-index: 3;
63
+ .nhsuk-bp-classification-low, .nhsuk-bp-legend-key-classification-low {
64
+ background: #330072;
51
65
  }
52
66
 
53
- .nhsuk-bmi-classification-healthy {
54
- z-index: 2;
67
+ .nhsuk-bp-classification-healthy, .nhsuk-bp-legend-key-classification-healthy {
68
+ background: repeating-linear-gradient(-45deg, #59c3bc, #59c3bc 4.5px, #33b6ad 4.5px, #33b6ad 9px);
55
69
  }
56
70
 
57
- .nhsuk-bmi-classification-overweight {
58
- z-index: 1;
71
+ .nhsuk-bp-classification-slightlyraised, .nhsuk-bp-legend-key-classification-slightlyraised {
72
+ background: #ffb81c;
59
73
  }
60
74
 
61
- .nhsuk-bmi-classification-obese {
62
- border-right: none;
63
- box-shadow: none;
75
+ .nhsuk-bp-classification-high, .nhsuk-bp-legend-key-classification-high {
76
+ background: repeating-linear-gradient(45deg, #e1746b, #e1746b 4.5px, #dd5349 4.5px, #dd5349 9px);
64
77
  }
65
78
 
79
+ #nhsuk-bp-chart > figure {
80
+ margin: 0;
81
+ }
66
82
 
67
- .nhsuk-bmi-chart-marker {
68
- position: absolute;
69
- z-index: 4;
70
- height: 24px;
71
- width: 24px;
72
- margin: 2px 0 -12px -12px;
83
+ .nhsuk-bp-legend-key-wrapper {
84
+ display: flex;
73
85
  }
74
- @media (min-width: 320px) and (max-width: 641px) {
75
- .nhsuk-bmi-chart-marker {
76
- height: 20px;
77
- width: 20px;
78
- margin: 2px 0 -10px -10px;
79
- }
86
+ .nhsuk-bp-legend-key-wrapper:last-child {
87
+ margin-top: 5px;
80
88
  }
81
89
 
82
- .nhsuk-bmi-axis-marker {
83
- position: absolute;
84
- outline: 0.5px solid black;
85
- height: 5px;
86
- bottom: -5px;
90
+ .nhsuk-bp-legend-display-card {
91
+ margin-top: 50px;
92
+ max-width: 300px;
87
93
  }
88
94
 
89
- .nhsuk-bmi-axis-marker-label {
90
- position: absolute;
91
- bottom: -25px;
92
- left: -10px;
93
- width: 20px;
94
- text-align: center;
95
+ .nhsuk-bp-legend-key-classification-low {
96
+ border-bottom: none;
97
+ box-shadow: none;
98
+ }
99
+
100
+ .nhsuk-bp-legend-key-marker {
101
+ border-bottom: none;
102
+ box-shadow: none;
95
103
  }
96
104
 
97
105
 
@@ -171,30 +179,68 @@
171
179
  background: repeating-linear-gradient(45deg, #e1746b, #e1746b 4.5px, #dd5349 4.5px, #dd5349 9px);
172
180
  }
173
181
 
174
- #nhsuk-bp-chart > figure {
175
- margin: 0;
182
+ .nhsuk-bp-region-boundary {
183
+ position: absolute;
184
+ bottom: 0%;
185
+ outline: 1px solid black;
186
+ border-top: 1px solid black;
187
+ border-right: 1px solid black;
188
+ box-shadow: -1px 1px white inset, 2px 0px white, 0px -2px white, 2px -2px white;
189
+ z-index: 5;
190
+ background: transparent;
176
191
  }
177
192
 
178
- .nhsuk-bp-legend-key-wrapper {
179
- display: flex;
193
+ .nhsuk-bp-classification-low {
194
+ position: absolute;
195
+ bottom: 0%;
196
+ z-index: 3;
180
197
  }
181
- .nhsuk-bp-legend-key-wrapper:last-child {
182
- margin-top: 5px;
198
+
199
+ .nhsuk-bp-classification-healthy {
200
+ position: absolute;
201
+ bottom: 0%;
202
+ z-index: 2;
183
203
  }
184
204
 
185
- .nhsuk-bp-legend-display-card {
186
- margin-top: 50px;
187
- max-width: 300px;
205
+ .nhsuk-bp-classification-slightlyraised {
206
+ position: absolute;
207
+ bottom: 0%;
208
+ z-index: 1;
188
209
  }
189
210
 
190
- .nhsuk-bp-legend-key-classification-low {
191
- border-bottom: none;
192
- box-shadow: none;
211
+ .nhsuk-bp-classification-high {
212
+ position: absolute;
213
+ bottom: 0%;
214
+ z-index: 0;
193
215
  }
194
216
 
195
- .nhsuk-bp-legend-key-marker {
196
- border-bottom: none;
197
- box-shadow: none;
217
+
218
+ .nhsuk-bar-slider-graph {
219
+ position: relative;
220
+ outline: 1px solid black;
221
+ margin-top: 20px;
222
+ display: flex;
223
+ height: 28px;
224
+ }
225
+ @media (min-width: 320px) and (max-width: 641px) {
226
+ .nhsuk-bar-slider-graph {
227
+ height: 24px;
228
+ }
229
+ }
230
+
231
+ .nhsuk-bmi-axis-marker {
232
+ position: absolute;
233
+ outline: 0.5px solid black;
234
+ height: 5px;
235
+ bottom: -5px;
236
+ }
237
+
238
+ .nhsuk-bmi-axis-marker-label {
239
+ position: absolute;
240
+ bottom: -25px;
241
+ left: -10px;
242
+ width: 20px;
243
+ text-align: center;
198
244
  }
199
245
 
200
246
 
@@ -252,20 +298,40 @@
252
298
  border-bottom: 2px solid black;
253
299
  }
254
300
 
255
- .nhsuk-bp-graph-cell {
256
- flex-grow: 1;
257
- border-bottom: 1px solid white;
258
- border-left: 1px solid white;
259
- background: transparent;
260
- z-index: 4;
301
+ .nhsuk-cbmi-classification-healthy, .nhsuk-cbmi-legend-key-classification-healthy {
302
+ background: repeating-linear-gradient(-45deg, #30b4ab, #30b4ab 4.5px, #00a499 4.5px, #00a499 9px);
261
303
  }
262
304
 
263
- .nhsuk-bp-first-in-column {
264
- border-bottom: none;
305
+ .nhsuk-cbmi-classification-overweight, .nhsuk-cbmi-legend-key-classification-overweight {
306
+ background: #ffb81c;
265
307
  }
266
308
 
267
- .nhsuk-bp-first-in-row {
268
- border-left: none;
309
+ .nhsuk-cbmi-classification-underweight, .nhsuk-cbmi-legend-key-classification-underweight {
310
+ background: #330072;
311
+ }
312
+
313
+
314
+ .nhsuk-cbmi-axis-marker {
315
+ border: 1px solid black;
316
+ position: absolute;
317
+ bottom: -5px;
318
+ margin-left: -0.5px;
319
+ box-shadow: 0px 0px white inset, 1px 0px white, -1px 0px white;
320
+ z-index: 100;
321
+ height: 33px;
322
+ }
323
+ @media (min-width: 320px) and (max-width: 641px) {
324
+ .nhsuk-cbmi-axis-marker {
325
+ height: 29px;
326
+ }
327
+ }
328
+
329
+ .nhsuk-cbmi-axis-marker-label {
330
+ position: absolute;
331
+ bottom: -25px;
332
+ left: -10px;
333
+ width: 20px;
334
+ text-align: center;
269
335
  }
270
336
 
271
337
 
@@ -285,82 +351,129 @@
285
351
  background: repeating-linear-gradient(45deg, #da5147, #da5147 4.5px, #d5281b 4.5px, #d5281b 9px);
286
352
  }
287
353
 
288
- .nhsuk-bmi-graph {
289
- position: relative;
354
+ .nhsuk-bmi-classification-obese, .nhsuk-bmi-classification-overweight, .nhsuk-bmi-classification-healthy, .nhsuk-bmi-classification-underweight {
355
+ position: absolute;
356
+ bottom: 0%;
290
357
  outline: 1px solid black;
291
- display: flex;
358
+ border-right: 1px solid black;
359
+ box-shadow: -1px 0px white inset, 2px 0px white, 0px -2px white;
292
360
  height: 28px;
293
- margin-bottom: nhsuk-spacing(4);
294
361
  }
295
362
  @media (min-width: 320px) and (max-width: 641px) {
296
- .nhsuk-bmi-graph {
363
+ .nhsuk-bmi-classification-obese, .nhsuk-bmi-classification-overweight, .nhsuk-bmi-classification-healthy, .nhsuk-bmi-classification-underweight {
297
364
  height: 24px;
298
365
  }
299
366
  }
300
367
 
301
-
302
- .nhsuk-bar-slider-graph {
303
- position: relative;
304
- outline: 1px solid black;
305
- margin-top: 20px;
306
- display: flex;
307
- height: 28px;
308
- }
309
- @media (min-width: 320px) and (max-width: 641px) {
310
- .nhsuk-bar-slider-graph {
311
- height: 24px;
312
- }
368
+ .nhsuk-bmi-classification-underweight {
369
+ z-index: 3;
313
370
  }
314
371
 
315
- .nhsuk-bp-classification-low, .nhsuk-bp-legend-key-classification-low {
316
- background: #330072;
372
+ .nhsuk-bmi-classification-healthy {
373
+ z-index: 2;
317
374
  }
318
375
 
319
- .nhsuk-bp-classification-healthy, .nhsuk-bp-legend-key-classification-healthy {
320
- background: repeating-linear-gradient(-45deg, #59c3bc, #59c3bc 4.5px, #33b6ad 4.5px, #33b6ad 9px);
376
+ .nhsuk-bmi-classification-overweight {
377
+ z-index: 1;
321
378
  }
322
379
 
323
- .nhsuk-bp-classification-slightlyraised, .nhsuk-bp-legend-key-classification-slightlyraised {
324
- background: #ffb81c;
380
+ .nhsuk-bmi-classification-obese {
381
+ border-right: none;
382
+ box-shadow: none;
325
383
  }
326
384
 
327
- .nhsuk-bp-classification-high, .nhsuk-bp-legend-key-classification-high {
328
- background: repeating-linear-gradient(45deg, #e1746b, #e1746b 4.5px, #dd5349 4.5px, #dd5349 9px);
385
+ .nhsuk-cbmi-classification-healthy, .nhsuk-cbmi-legend-key-classification-healthy {
386
+ background: repeating-linear-gradient(-45deg, #30b4ab, #30b4ab 4.5px, #00a499 4.5px, #00a499 9px);
329
387
  }
330
388
 
331
- .nhsuk-bp-region-boundary {
332
- position: absolute;
333
- bottom: 0%;
389
+ .nhsuk-cbmi-classification-overweight, .nhsuk-cbmi-legend-key-classification-overweight {
390
+ background: #ffb81c;
391
+ }
392
+
393
+ .nhsuk-cbmi-classification-underweight, .nhsuk-cbmi-legend-key-classification-underweight {
394
+ background: #330072;
395
+ }
396
+
397
+ .nhsuk-cbmi-legend-key-classification-overweight {
398
+ border-bottom: none;
399
+ box-shadow: none;
400
+ }
401
+
402
+ .nhsuk-cbmi-legend-key, .nhsuk-cbmi-legend-key-classification-underweight, .nhsuk-cbmi-legend-key-classification-healthy, .nhsuk-cbmi-legend-key-classification-overweight {
403
+ border-bottom: 2px solid white;
404
+ margin-bottom: 2px;
405
+ }
406
+
407
+ .nhsuk-cbmi-legend-marker {
408
+ margin-bottom: 2px;
409
+ }
410
+
411
+ .nhsuk-cbmi-classification-underweight-heading {
412
+ border-left: 8px solid #330072;
413
+ }
414
+
415
+ .nhsuk-cbmi-classification-healthy-heading {
416
+ border-left: 8px solid #30b4ab;
417
+ }
418
+
419
+ .nhsuk-cbmi-classification-overweight-heading {
420
+ border-left: 8px solid #ffb81c;
421
+ }
422
+
423
+
424
+ .nhsuk-cbmi-classification-healthy, .nhsuk-cbmi-legend-key-classification-healthy {
425
+ background: repeating-linear-gradient(-45deg, #30b4ab, #30b4ab 4.5px, #00a499 4.5px, #00a499 9px);
426
+ }
427
+
428
+ .nhsuk-cbmi-classification-overweight, .nhsuk-cbmi-legend-key-classification-overweight {
429
+ background: #ffb81c;
430
+ }
431
+
432
+ .nhsuk-cbmi-classification-underweight, .nhsuk-cbmi-legend-key-classification-underweight {
433
+ background: #330072;
434
+ }
435
+
436
+ .nhsuk-cbmi-graph {
437
+ position: relative;
334
438
  outline: 1px solid black;
335
- border-top: 1px solid black;
336
- border-right: 1px solid black;
337
- box-shadow: -1px 1px white inset, 2px 0px white, 0px -2px white, 2px -2px white;
338
- z-index: 5;
339
- background: transparent;
439
+ margin-top: 20px;
440
+ display: flex;
441
+ height: 28px;
442
+ }
443
+ @media (min-width: 320px) and (max-width: 641px) {
444
+ .nhsuk-cbmi-graph {
445
+ height: 24px;
446
+ }
340
447
  }
341
448
 
342
- .nhsuk-bp-classification-low {
343
- position: absolute;
344
- bottom: 0%;
345
- z-index: 3;
449
+
450
+ .nhsuk-bmi-legend-key-classification-underweight, .nhsuk-bmi-classification-underweight {
451
+ background: #330072;
346
452
  }
347
453
 
348
- .nhsuk-bp-classification-healthy {
349
- position: absolute;
350
- bottom: 0%;
351
- z-index: 2;
454
+ .nhsuk-bmi-legend-key-classification-healthy, .nhsuk-bmi-classification-healthy {
455
+ background: repeating-linear-gradient(-45deg, #30b4ab, #30b4ab 4.5px, #00a499 4.5px, #00a499 9px);
352
456
  }
353
457
 
354
- .nhsuk-bp-classification-slightlyraised {
355
- position: absolute;
356
- bottom: 0%;
357
- z-index: 1;
458
+ .nhsuk-bmi-legend-key-classification-overweight, .nhsuk-bmi-classification-overweight {
459
+ background: #ffb81c;
358
460
  }
359
461
 
360
- .nhsuk-bp-classification-high {
361
- position: absolute;
362
- bottom: 0%;
363
- z-index: 0;
462
+ .nhsuk-bmi-legend-key-classification-obese, .nhsuk-bmi-classification-obese {
463
+ background: repeating-linear-gradient(45deg, #da5147, #da5147 4.5px, #d5281b 4.5px, #d5281b 9px);
464
+ }
465
+
466
+ .nhsuk-bmi-graph {
467
+ position: relative;
468
+ outline: 1px solid black;
469
+ display: flex;
470
+ height: 28px;
471
+ margin-bottom: nhsuk-spacing(4);
472
+ }
473
+ @media (min-width: 320px) and (max-width: 641px) {
474
+ .nhsuk-bmi-graph {
475
+ height: 24px;
476
+ }
364
477
  }
365
478
 
366
479
 
@@ -386,87 +499,74 @@
386
499
  }
387
500
  }
388
501
 
389
-
390
- .nhsuk-bar-slider-arrow-marker {
391
- position: absolute;
392
- height: 16px;
393
- width: 16px;
394
- margin: -9px 0 -8px -8px;
395
- }
396
- @media (min-width: 320px) and (max-width: 641px) {
397
- .nhsuk-bar-slider-arrow-marker {
398
- height: 12px;
399
- width: 12px;
400
- margin: -9px 0 -6px -6px;
401
- }
502
+ .nhsuk-bmi-legend-key-classification-underweight, .nhsuk-bmi-classification-underweight {
503
+ background: #330072;
402
504
  }
403
505
 
404
- .nhsuk-bar-slider-label-align-left {
405
- display: flex;
406
- justify-content: left;
506
+ .nhsuk-bmi-legend-key-classification-healthy, .nhsuk-bmi-classification-healthy {
507
+ background: repeating-linear-gradient(-45deg, #30b4ab, #30b4ab 4.5px, #00a499 4.5px, #00a499 9px);
407
508
  }
408
509
 
409
- .nhsuk-bar-slider-label-align-center {
410
- display: flex;
411
- justify-content: center;
510
+ .nhsuk-bmi-legend-key-classification-overweight, .nhsuk-bmi-classification-overweight {
511
+ background: #ffb81c;
412
512
  }
413
513
 
414
- .nhsuk-bar-slider-label-align-right {
415
- display: flex;
416
- justify-content: right;
514
+ .nhsuk-bmi-legend-key-classification-obese, .nhsuk-bmi-classification-obese {
515
+ background: repeating-linear-gradient(45deg, #da5147, #da5147 4.5px, #d5281b 4.5px, #d5281b 9px);
417
516
  }
418
517
 
419
- .nhsuk-bar-slider-label-marker {
420
- position: relative;
421
- height: 25px;
422
- width: auto;
423
- white-space: nowrap;
424
- margin-top: -30px;
518
+ .nhsuk-bmi-legend-key-classification-obese {
519
+ border-bottom: none;
520
+ box-shadow: none;
425
521
  }
426
522
 
427
- .nhsuk-bar-slider-value-marker {
428
- position: relative;
429
- font-weight: bold;
430
- margin-left: 5px;
431
- margin-right: 2px;
523
+ .nhsuk-bmi-legend-key-marker {
524
+ border-bottom: none;
525
+ box-shadow: none;
432
526
  }
433
527
 
434
-
435
- .nhsuk-cbmi-legend-key-classification-healthy, .nhsuk-cbmi-classification-healthy {
436
- background: repeating-linear-gradient(-45deg, #30b4ab, #30b4ab 4.5px, #00a499 4.5px, #00a499 9px);
528
+ .nhsuk-bp-graph-cell {
529
+ flex-grow: 1;
530
+ border-bottom: 1px solid white;
531
+ border-left: 1px solid white;
532
+ background: transparent;
533
+ z-index: 4;
437
534
  }
438
535
 
439
- .nhsuk-cbmi-legend-key-classification-overweight, .nhsuk-cbmi-classification-overweight {
440
- background: #ffb81c;
536
+ .nhsuk-bp-first-in-column {
537
+ border-bottom: none;
441
538
  }
442
539
 
443
- .nhsuk-cbmi-legend-key-classification-underweight, .nhsuk-cbmi-classification-underweight {
444
- background: #330072;
540
+ .nhsuk-bp-first-in-row {
541
+ border-left: none;
445
542
  }
446
543
 
447
- .nhsuk-cbmi-graph {
448
- position: relative;
449
- outline: 1px solid black;
450
- margin-top: 20px;
451
- display: flex;
452
- height: 28px;
544
+
545
+ .nhsuk-bmi-chart-marker {
546
+ position: absolute;
547
+ z-index: 4;
548
+ height: 24px;
549
+ width: 24px;
550
+ margin: 2px 0 -12px -12px;
453
551
  }
454
552
  @media (min-width: 320px) and (max-width: 641px) {
455
- .nhsuk-cbmi-graph {
456
- height: 24px;
553
+ .nhsuk-bmi-chart-marker {
554
+ height: 20px;
555
+ width: 20px;
556
+ margin: 2px 0 -10px -10px;
457
557
  }
458
558
  }
459
559
 
460
560
 
461
- .nhsuk-cbmi-legend-key-classification-healthy, .nhsuk-cbmi-classification-healthy {
561
+ .nhsuk-cbmi-classification-healthy, .nhsuk-cbmi-legend-key-classification-healthy {
462
562
  background: repeating-linear-gradient(-45deg, #30b4ab, #30b4ab 4.5px, #00a499 4.5px, #00a499 9px);
463
563
  }
464
564
 
465
- .nhsuk-cbmi-legend-key-classification-overweight, .nhsuk-cbmi-classification-overweight {
565
+ .nhsuk-cbmi-classification-overweight, .nhsuk-cbmi-legend-key-classification-overweight {
466
566
  background: #ffb81c;
467
567
  }
468
568
 
469
- .nhsuk-cbmi-legend-key-classification-underweight, .nhsuk-cbmi-classification-underweight {
569
+ .nhsuk-cbmi-classification-underweight, .nhsuk-cbmi-legend-key-classification-underweight {
470
570
  background: #330072;
471
571
  }
472
572
 
@@ -529,42 +629,16 @@
529
629
  }
530
630
  }
531
631
 
532
- .nhsuk-bmi-legend-key-classification-underweight, .nhsuk-bmi-classification-underweight {
533
- background: #330072;
534
- }
535
-
536
- .nhsuk-bmi-legend-key-classification-healthy, .nhsuk-bmi-classification-healthy {
537
- background: repeating-linear-gradient(-45deg, #30b4ab, #30b4ab 4.5px, #00a499 4.5px, #00a499 9px);
538
- }
539
-
540
- .nhsuk-bmi-legend-key-classification-overweight, .nhsuk-bmi-classification-overweight {
541
- background: #ffb81c;
542
- }
543
-
544
- .nhsuk-bmi-legend-key-classification-obese, .nhsuk-bmi-classification-obese {
545
- background: repeating-linear-gradient(45deg, #da5147, #da5147 4.5px, #d5281b 4.5px, #d5281b 9px);
546
- }
547
-
548
- .nhsuk-bmi-legend-key-classification-obese {
549
- border-bottom: none;
550
- box-shadow: none;
551
- }
552
-
553
- .nhsuk-bmi-legend-key-marker {
554
- border-bottom: none;
555
- box-shadow: none;
556
- }
557
-
558
632
 
559
- .nhsuk-cbmi-legend-key-classification-healthy, .nhsuk-cbmi-classification-healthy {
633
+ .nhsuk-cbmi-classification-healthy, .nhsuk-cbmi-legend-key-classification-healthy {
560
634
  background: repeating-linear-gradient(-45deg, #30b4ab, #30b4ab 4.5px, #00a499 4.5px, #00a499 9px);
561
635
  }
562
636
 
563
- .nhsuk-cbmi-legend-key-classification-overweight, .nhsuk-cbmi-classification-overweight {
637
+ .nhsuk-cbmi-classification-overweight, .nhsuk-cbmi-legend-key-classification-overweight {
564
638
  background: #ffb81c;
565
639
  }
566
640
 
567
- .nhsuk-cbmi-legend-key-classification-underweight, .nhsuk-cbmi-classification-underweight {
641
+ .nhsuk-cbmi-classification-underweight, .nhsuk-cbmi-legend-key-classification-underweight {
568
642
  background: #330072;
569
643
  }
570
644
 
@@ -590,78 +664,4 @@
590
664
 
591
665
  .nhsuk-cbmi-classification-overweight {
592
666
  z-index: 1;
593
- }
594
-
595
- .nhsuk-cbmi-legend-key-classification-healthy, .nhsuk-cbmi-classification-healthy {
596
- background: repeating-linear-gradient(-45deg, #30b4ab, #30b4ab 4.5px, #00a499 4.5px, #00a499 9px);
597
- }
598
-
599
- .nhsuk-cbmi-legend-key-classification-overweight, .nhsuk-cbmi-classification-overweight {
600
- background: #ffb81c;
601
- }
602
-
603
- .nhsuk-cbmi-legend-key-classification-underweight, .nhsuk-cbmi-classification-underweight {
604
- background: #330072;
605
- }
606
-
607
- .nhsuk-cbmi-legend-key-classification-overweight {
608
- border-bottom: none;
609
- box-shadow: none;
610
- }
611
-
612
- .nhsuk-cbmi-legend-key, .nhsuk-cbmi-legend-key-classification-underweight, .nhsuk-cbmi-legend-key-classification-healthy, .nhsuk-cbmi-legend-key-classification-overweight {
613
- border-bottom: 2px solid white;
614
- margin-bottom: 2px;
615
- }
616
-
617
- .nhsuk-cbmi-legend-marker {
618
- margin-bottom: 2px;
619
- }
620
-
621
- .nhsuk-cbmi-classification-underweight-heading {
622
- border-left: 8px solid #330072;
623
- }
624
-
625
- .nhsuk-cbmi-classification-healthy-heading {
626
- border-left: 8px solid #30b4ab;
627
- }
628
-
629
- .nhsuk-cbmi-classification-overweight-heading {
630
- border-left: 8px solid #ffb81c;
631
- }
632
-
633
- .nhsuk-cbmi-classification-healthy, .nhsuk-cbmi-legend-key-classification-healthy {
634
- background: repeating-linear-gradient(-45deg, #30b4ab, #30b4ab 4.5px, #00a499 4.5px, #00a499 9px);
635
- }
636
-
637
- .nhsuk-cbmi-classification-overweight, .nhsuk-cbmi-legend-key-classification-overweight {
638
- background: #ffb81c;
639
- }
640
-
641
- .nhsuk-cbmi-classification-underweight, .nhsuk-cbmi-legend-key-classification-underweight {
642
- background: #330072;
643
- }
644
-
645
-
646
- .nhsuk-cbmi-axis-marker {
647
- border: 1px solid black;
648
- position: absolute;
649
- bottom: -5px;
650
- margin-left: -0.5px;
651
- box-shadow: 0px 0px white inset, 1px 0px white, -1px 0px white;
652
- z-index: 100;
653
- height: 33px;
654
- }
655
- @media (min-width: 320px) and (max-width: 641px) {
656
- .nhsuk-cbmi-axis-marker {
657
- height: 29px;
658
- }
659
- }
660
-
661
- .nhsuk-cbmi-axis-marker-label {
662
- position: absolute;
663
- bottom: -25px;
664
- left: -10px;
665
- width: 20px;
666
- text-align: center;
667
667
  }