nhsuk-tools-chart-components-react 1.1.16 → 2.1.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 (11) hide show
  1. package/dist/cjs/bundle.css +230 -218
  2. package/dist/cjs/index.js +1 -1
  3. package/dist/cjs/index.js.map +1 -1
  4. package/dist/esm/bundle.css +329 -317
  5. package/dist/esm/components/blood-pressure/bp-chart-regions.js +1 -1
  6. package/dist/esm/components/blood-pressure/bp-chart-regions.js.map +1 -1
  7. package/dist/esm/components/bmi/bmi-chart-marker.js.map +1 -1
  8. package/dist/esm/components/child-bmi/cbmi-chart-marker.js.map +1 -1
  9. package/dist/esm/models/bar-slider-chart.model.js.map +1 -1
  10. package/dist/esm/models/cbmi-chart.model.js.map +1 -1
  11. package/package.json +8 -8
package/dist/esm/bundle.css CHANGED
@@ -15,89 +15,20 @@
15
15
  margin-bottom: 3px;
16
16
  }
17
17
 
18
- .nhsuk-bmi-classification-underweight, .nhsuk-bmi-legend-key-classification-underweight {
19
- background: #330072;
20
- }
21
-
22
- .nhsuk-bmi-classification-healthy, .nhsuk-bmi-legend-key-classification-healthy {
23
- background: repeating-linear-gradient(-45deg, #30b4ab, #30b4ab 4.5px, #00a499 4.5px, #00a499 9px);
24
- }
25
-
26
- .nhsuk-bmi-classification-overweight, .nhsuk-bmi-legend-key-classification-overweight {
27
- background: #ffb81c;
28
- }
29
-
30
- .nhsuk-bmi-classification-obese, .nhsuk-bmi-legend-key-classification-obese {
31
- background: repeating-linear-gradient(45deg, #da5147, #da5147 4.5px, #d5281b 4.5px, #d5281b 9px);
32
- }
33
18
 
34
- .nhsuk-bmi-legend-key-classification-obese {
35
- border-bottom: none;
36
- box-shadow: none;
37
- }
38
-
39
- .nhsuk-bmi-legend-key-marker {
40
- border-bottom: none;
41
- box-shadow: none;
42
- }
43
-
44
- .nhsuk-bmi-classification-underweight, .nhsuk-bmi-legend-key-classification-underweight {
19
+ .nhsuk-bmi-legend-key-classification-underweight, .nhsuk-bmi-classification-underweight {
45
20
  background: #330072;
46
21
  }
47
22
 
48
- .nhsuk-bmi-classification-healthy, .nhsuk-bmi-legend-key-classification-healthy {
23
+ .nhsuk-bmi-legend-key-classification-healthy, .nhsuk-bmi-classification-healthy {
49
24
  background: repeating-linear-gradient(-45deg, #30b4ab, #30b4ab 4.5px, #00a499 4.5px, #00a499 9px);
50
25
  }
51
26
 
52
- .nhsuk-bmi-classification-overweight, .nhsuk-bmi-legend-key-classification-overweight {
27
+ .nhsuk-bmi-legend-key-classification-overweight, .nhsuk-bmi-classification-overweight {
53
28
  background: #ffb81c;
54
29
  }
55
30
 
56
- .nhsuk-bmi-classification-obese, .nhsuk-bmi-legend-key-classification-obese {
57
- background: repeating-linear-gradient(45deg, #da5147, #da5147 4.5px, #d5281b 4.5px, #d5281b 9px);
58
- }
59
-
60
- .nhsuk-bmi-graph {
61
- position: relative;
62
- outline: 1px solid black;
63
- display: flex;
64
- height: 28px;
65
- margin-bottom: nhsuk-spacing(4);
66
- }
67
- @media (min-width: 320px) and (max-width: 641px) {
68
- .nhsuk-bmi-graph {
69
- height: 24px;
70
- }
71
- }
72
-
73
- .nhsuk-bmi-chart-marker {
74
- position: absolute;
75
- z-index: 4;
76
- height: 24px;
77
- width: 24px;
78
- margin: 2px 0 -12px -12px;
79
- }
80
- @media (min-width: 320px) and (max-width: 641px) {
81
- .nhsuk-bmi-chart-marker {
82
- height: 20px;
83
- width: 20px;
84
- margin: 2px 0 -10px -10px;
85
- }
86
- }
87
-
88
- .nhsuk-bmi-classification-underweight, .nhsuk-bmi-legend-key-classification-underweight {
89
- background: #330072;
90
- }
91
-
92
- .nhsuk-bmi-classification-healthy, .nhsuk-bmi-legend-key-classification-healthy {
93
- background: repeating-linear-gradient(-45deg, #30b4ab, #30b4ab 4.5px, #00a499 4.5px, #00a499 9px);
94
- }
95
-
96
- .nhsuk-bmi-classification-overweight, .nhsuk-bmi-legend-key-classification-overweight {
97
- background: #ffb81c;
98
- }
99
-
100
- .nhsuk-bmi-classification-obese, .nhsuk-bmi-legend-key-classification-obese {
31
+ .nhsuk-bmi-legend-key-classification-obese, .nhsuk-bmi-classification-obese {
101
32
  background: repeating-linear-gradient(45deg, #da5147, #da5147 4.5px, #d5281b 4.5px, #d5281b 9px);
102
33
  }
103
34
 
@@ -132,6 +63,22 @@
132
63
  box-shadow: none;
133
64
  }
134
65
 
66
+
67
+ .nhsuk-bmi-chart-marker {
68
+ position: absolute;
69
+ z-index: 4;
70
+ height: 24px;
71
+ width: 24px;
72
+ margin: 2px 0 -12px -12px;
73
+ }
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
+ }
80
+ }
81
+
135
82
  .nhsuk-bmi-axis-marker {
136
83
  position: absolute;
137
84
  outline: 0.5px solid black;
@@ -147,101 +94,6 @@
147
94
  text-align: center;
148
95
  }
149
96
 
150
- .nhsuk-bp-graph {
151
- position: relative;
152
- margin-left: 20px;
153
- margin-right: 20px;
154
- outline: 2px solid black;
155
- display: flex;
156
- flex-direction: column;
157
- height: 350px;
158
- }
159
- @media (max-width: 320px) {
160
- .nhsuk-bp-graph {
161
- height: 225px;
162
- }
163
- }
164
- @media (min-width: 320px) and (max-width: 641px) {
165
- .nhsuk-bp-graph {
166
- height: 275px;
167
- }
168
- }
169
-
170
- .nhsuk-bp-graph-row {
171
- flex-grow: 1;
172
- display: flex;
173
- }
174
-
175
- .nhsuk-bp-systolic-legend-wrapper {
176
- display: flex;
177
- align-items: flex-end;
178
- margin-bottom: 10px;
179
- }
180
-
181
- .nhsuk-bp-diastolic-legend-wrapper {
182
- display: flex;
183
- align-items: flex-start;
184
- margin-top: 30px;
185
- padding-left: 18px;
186
- }
187
-
188
- .nhsuk-bp-diastolic-legend-marker, .nhsuk-bp-systolic-legend-marker {
189
- height: 16px;
190
- margin-right: 5px;
191
- border-left: 2px solid black;
192
- }
193
-
194
- .nhsuk-bp-systolic-legend-marker {
195
- width: 40px;
196
- border-top: 2px solid black;
197
- }
198
-
199
- .nhsuk-bp-diastolic-legend-marker {
200
- width: 20px;
201
- border-bottom: 2px solid black;
202
- }
203
-
204
- .nhsuk-bp-classification-low, .nhsuk-bp-legend-key-classification-low {
205
- background: #330072;
206
- }
207
-
208
- .nhsuk-bp-classification-healthy, .nhsuk-bp-legend-key-classification-healthy {
209
- background: repeating-linear-gradient(-45deg, #59c3bc, #59c3bc 4.5px, #33b6ad 4.5px, #33b6ad 9px);
210
- }
211
-
212
- .nhsuk-bp-classification-slightlyraised, .nhsuk-bp-legend-key-classification-slightlyraised {
213
- background: #ffb81c;
214
- }
215
-
216
- .nhsuk-bp-classification-high, .nhsuk-bp-legend-key-classification-high {
217
- background: repeating-linear-gradient(45deg, #e1746b, #e1746b 4.5px, #dd5349 4.5px, #dd5349 9px);
218
- }
219
-
220
- #nhsuk-bp-chart > figure {
221
- margin: 0;
222
- }
223
-
224
- .nhsuk-bp-legend-key-wrapper {
225
- display: flex;
226
- }
227
- .nhsuk-bp-legend-key-wrapper:last-child {
228
- margin-top: 5px;
229
- }
230
-
231
- .nhsuk-bp-legend-display-card {
232
- margin-top: 50px;
233
- max-width: 300px;
234
- }
235
-
236
- .nhsuk-bp-legend-key-classification-low {
237
- border-bottom: none;
238
- box-shadow: none;
239
- }
240
-
241
- .nhsuk-bp-legend-key-marker {
242
- border-bottom: none;
243
- box-shadow: none;
244
- }
245
97
 
246
98
  .nhsuk-bp-diastolic-axis-marker, .nhsuk-bp-systolic-axis-marker {
247
99
  position: absolute;
@@ -303,28 +155,6 @@
303
155
  text-align: center;
304
156
  }
305
157
 
306
- .nhsuk-bp-graph-marker {
307
- position: absolute;
308
- z-index: 6;
309
- height: 24px;
310
- width: 24px;
311
- margin: 0 0 -12px -12px;
312
- }
313
- @media (max-width: 320px) {
314
- .nhsuk-bp-graph-marker {
315
- height: 20px;
316
- width: 20px;
317
- margin: 0 0 -10px -10px;
318
- }
319
- }
320
- @media (min-width: 320px) and (max-width: 641px) {
321
- .nhsuk-bp-graph-marker {
322
- height: 22px;
323
- width: 22px;
324
- margin: 0 0 -11px -11px;
325
- }
326
- }
327
-
328
158
  .nhsuk-bp-classification-low, .nhsuk-bp-legend-key-classification-low {
329
159
  background: #330072;
330
160
  }
@@ -341,54 +171,135 @@
341
171
  background: repeating-linear-gradient(45deg, #e1746b, #e1746b 4.5px, #dd5349 4.5px, #dd5349 9px);
342
172
  }
343
173
 
344
- .nhsuk-bp-region-boundary {
345
- position: absolute;
346
- bottom: 0%;
347
- outline: 1px solid black;
348
- border-top: 1px solid black;
349
- border-right: 1px solid black;
350
- box-shadow: -1px 1px white inset, 2px 0px white, 0px -2px white, 2px -2px white;
351
- z-index: 5;
352
- background: transparent;
174
+ #nhsuk-bp-chart > figure {
175
+ margin: 0;
353
176
  }
354
177
 
355
- .nhsuk-bp-classification-low {
356
- position: absolute;
357
- bottom: 0%;
358
- z-index: 3;
178
+ .nhsuk-bp-legend-key-wrapper {
179
+ display: flex;
180
+ }
181
+ .nhsuk-bp-legend-key-wrapper:last-child {
182
+ margin-top: 5px;
359
183
  }
360
184
 
361
- .nhsuk-bp-classification-healthy {
362
- position: absolute;
363
- bottom: 0%;
364
- z-index: 2;
185
+ .nhsuk-bp-legend-display-card {
186
+ margin-top: 50px;
187
+ max-width: 300px;
365
188
  }
366
189
 
367
- .nhsuk-bp-classification-slightlyraised {
368
- position: absolute;
369
- bottom: 0%;
370
- z-index: 1;
190
+ .nhsuk-bp-legend-key-classification-low {
191
+ border-bottom: none;
192
+ box-shadow: none;
371
193
  }
372
194
 
373
- .nhsuk-bp-classification-high {
374
- position: absolute;
375
- bottom: 0%;
376
- z-index: 0;
195
+ .nhsuk-bp-legend-key-marker {
196
+ border-bottom: none;
197
+ box-shadow: none;
377
198
  }
378
199
 
379
- .nhsuk-cbmi-classification-healthy, .nhsuk-cbmi-legend-key-classification-healthy {
200
+
201
+ .nhsuk-bp-graph {
202
+ position: relative;
203
+ margin-left: 20px;
204
+ margin-right: 20px;
205
+ outline: 2px solid black;
206
+ display: flex;
207
+ flex-direction: column;
208
+ height: 350px;
209
+ }
210
+ @media (max-width: 320px) {
211
+ .nhsuk-bp-graph {
212
+ height: 225px;
213
+ }
214
+ }
215
+ @media (min-width: 320px) and (max-width: 641px) {
216
+ .nhsuk-bp-graph {
217
+ height: 275px;
218
+ }
219
+ }
220
+
221
+ .nhsuk-bp-graph-row {
222
+ flex-grow: 1;
223
+ display: flex;
224
+ }
225
+
226
+ .nhsuk-bp-systolic-legend-wrapper {
227
+ display: flex;
228
+ align-items: flex-end;
229
+ margin-bottom: 10px;
230
+ }
231
+
232
+ .nhsuk-bp-diastolic-legend-wrapper {
233
+ display: flex;
234
+ align-items: flex-start;
235
+ margin-top: 30px;
236
+ padding-left: 18px;
237
+ }
238
+
239
+ .nhsuk-bp-diastolic-legend-marker, .nhsuk-bp-systolic-legend-marker {
240
+ height: 16px;
241
+ margin-right: 5px;
242
+ border-left: 2px solid black;
243
+ }
244
+
245
+ .nhsuk-bp-systolic-legend-marker {
246
+ width: 40px;
247
+ border-top: 2px solid black;
248
+ }
249
+
250
+ .nhsuk-bp-diastolic-legend-marker {
251
+ width: 20px;
252
+ border-bottom: 2px solid black;
253
+ }
254
+
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;
261
+ }
262
+
263
+ .nhsuk-bp-first-in-column {
264
+ border-bottom: none;
265
+ }
266
+
267
+ .nhsuk-bp-first-in-row {
268
+ border-left: none;
269
+ }
270
+
271
+
272
+ .nhsuk-bmi-legend-key-classification-underweight, .nhsuk-bmi-classification-underweight {
273
+ background: #330072;
274
+ }
275
+
276
+ .nhsuk-bmi-legend-key-classification-healthy, .nhsuk-bmi-classification-healthy {
380
277
  background: repeating-linear-gradient(-45deg, #30b4ab, #30b4ab 4.5px, #00a499 4.5px, #00a499 9px);
381
278
  }
382
279
 
383
- .nhsuk-cbmi-classification-overweight, .nhsuk-cbmi-legend-key-classification-overweight {
280
+ .nhsuk-bmi-legend-key-classification-overweight, .nhsuk-bmi-classification-overweight {
384
281
  background: #ffb81c;
385
282
  }
386
283
 
387
- .nhsuk-cbmi-classification-underweight, .nhsuk-cbmi-legend-key-classification-underweight {
388
- background: #330072;
284
+ .nhsuk-bmi-legend-key-classification-obese, .nhsuk-bmi-classification-obese {
285
+ background: repeating-linear-gradient(45deg, #da5147, #da5147 4.5px, #d5281b 4.5px, #d5281b 9px);
389
286
  }
390
287
 
391
- .nhsuk-cbmi-graph {
288
+ .nhsuk-bmi-graph {
289
+ position: relative;
290
+ outline: 1px solid black;
291
+ display: flex;
292
+ height: 28px;
293
+ margin-bottom: nhsuk-spacing(4);
294
+ }
295
+ @media (min-width: 320px) and (max-width: 641px) {
296
+ .nhsuk-bmi-graph {
297
+ height: 24px;
298
+ }
299
+ }
300
+
301
+
302
+ .nhsuk-bar-slider-graph {
392
303
  position: relative;
393
304
  outline: 1px solid black;
394
305
  margin-top: 20px;
@@ -396,109 +307,166 @@
396
307
  height: 28px;
397
308
  }
398
309
  @media (min-width: 320px) and (max-width: 641px) {
399
- .nhsuk-cbmi-graph {
310
+ .nhsuk-bar-slider-graph {
400
311
  height: 24px;
401
312
  }
402
313
  }
403
314
 
404
- .nhsuk-bp-graph-cell {
405
- flex-grow: 1;
406
- border-bottom: 1px solid white;
407
- border-left: 1px solid white;
315
+ .nhsuk-bp-classification-low, .nhsuk-bp-legend-key-classification-low {
316
+ background: #330072;
317
+ }
318
+
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);
321
+ }
322
+
323
+ .nhsuk-bp-classification-slightlyraised, .nhsuk-bp-legend-key-classification-slightlyraised {
324
+ background: #ffb81c;
325
+ }
326
+
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);
329
+ }
330
+
331
+ .nhsuk-bp-region-boundary {
332
+ position: absolute;
333
+ bottom: 0%;
334
+ 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;
408
339
  background: transparent;
409
- z-index: 4;
410
340
  }
411
341
 
412
- .nhsuk-bp-first-in-column {
413
- border-bottom: none;
342
+ .nhsuk-bp-classification-low {
343
+ position: absolute;
344
+ bottom: 0%;
345
+ z-index: 3;
414
346
  }
415
347
 
416
- .nhsuk-bp-first-in-row {
417
- border-left: none;
348
+ .nhsuk-bp-classification-healthy {
349
+ position: absolute;
350
+ bottom: 0%;
351
+ z-index: 2;
418
352
  }
419
353
 
420
- .nhsuk-cbmi-classification-healthy, .nhsuk-cbmi-legend-key-classification-healthy {
421
- background: repeating-linear-gradient(-45deg, #30b4ab, #30b4ab 4.5px, #00a499 4.5px, #00a499 9px);
354
+ .nhsuk-bp-classification-slightlyraised {
355
+ position: absolute;
356
+ bottom: 0%;
357
+ z-index: 1;
422
358
  }
423
359
 
424
- .nhsuk-cbmi-classification-overweight, .nhsuk-cbmi-legend-key-classification-overweight {
425
- background: #ffb81c;
360
+ .nhsuk-bp-classification-high {
361
+ position: absolute;
362
+ bottom: 0%;
363
+ z-index: 0;
426
364
  }
427
365
 
428
- .nhsuk-cbmi-classification-underweight, .nhsuk-cbmi-legend-key-classification-underweight {
429
- background: #330072;
430
- }
431
366
 
432
- .nhsuk-cbmi-axis-marker {
433
- border: 1px solid black;
367
+ .nhsuk-bp-graph-marker {
434
368
  position: absolute;
435
- bottom: -5px;
436
- margin-left: -0.5px;
437
- box-shadow: 0px 0px white inset, 1px 0px white, -1px 0px white;
438
- z-index: 100;
439
- height: 33px;
369
+ z-index: 6;
370
+ height: 24px;
371
+ width: 24px;
372
+ margin: 0 0 -12px -12px;
373
+ }
374
+ @media (max-width: 320px) {
375
+ .nhsuk-bp-graph-marker {
376
+ height: 20px;
377
+ width: 20px;
378
+ margin: 0 0 -10px -10px;
379
+ }
440
380
  }
441
381
  @media (min-width: 320px) and (max-width: 641px) {
442
- .nhsuk-cbmi-axis-marker {
443
- height: 29px;
382
+ .nhsuk-bp-graph-marker {
383
+ height: 22px;
384
+ width: 22px;
385
+ margin: 0 0 -11px -11px;
444
386
  }
445
387
  }
446
388
 
447
- .nhsuk-cbmi-axis-marker-label {
389
+
390
+ .nhsuk-bar-slider-arrow-marker {
448
391
  position: absolute;
449
- bottom: -25px;
450
- left: -10px;
451
- width: 20px;
452
- text-align: center;
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
+ }
453
402
  }
454
403
 
455
- .nhsuk-cbmi-classification-healthy, .nhsuk-cbmi-legend-key-classification-healthy {
456
- background: repeating-linear-gradient(-45deg, #30b4ab, #30b4ab 4.5px, #00a499 4.5px, #00a499 9px);
404
+ .nhsuk-bar-slider-label-align-left {
405
+ display: flex;
406
+ justify-content: left;
457
407
  }
458
408
 
459
- .nhsuk-cbmi-classification-overweight, .nhsuk-cbmi-legend-key-classification-overweight {
460
- background: #ffb81c;
409
+ .nhsuk-bar-slider-label-align-center {
410
+ display: flex;
411
+ justify-content: center;
461
412
  }
462
413
 
463
- .nhsuk-cbmi-classification-underweight, .nhsuk-cbmi-legend-key-classification-underweight {
464
- background: #330072;
414
+ .nhsuk-bar-slider-label-align-right {
415
+ display: flex;
416
+ justify-content: right;
465
417
  }
466
418
 
467
- .nhsuk-cbmi-legend-key-classification-overweight {
468
- border-bottom: none;
469
- box-shadow: none;
419
+ .nhsuk-bar-slider-label-marker {
420
+ position: relative;
421
+ height: 25px;
422
+ width: auto;
423
+ white-space: nowrap;
424
+ margin-top: -30px;
470
425
  }
471
426
 
472
- .nhsuk-cbmi-legend-key, .nhsuk-cbmi-legend-key-classification-underweight, .nhsuk-cbmi-legend-key-classification-healthy, .nhsuk-cbmi-legend-key-classification-overweight {
473
- border-bottom: 2px solid white;
474
- margin-bottom: 2px;
427
+ .nhsuk-bar-slider-value-marker {
428
+ position: relative;
429
+ font-weight: bold;
430
+ margin-left: 5px;
431
+ margin-right: 2px;
475
432
  }
476
433
 
477
- .nhsuk-cbmi-legend-marker {
478
- margin-bottom: 2px;
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);
479
437
  }
480
438
 
481
- .nhsuk-cbmi-classification-underweight-heading {
482
- border-left: 8px solid #330072;
439
+ .nhsuk-cbmi-legend-key-classification-overweight, .nhsuk-cbmi-classification-overweight {
440
+ background: #ffb81c;
483
441
  }
484
442
 
485
- .nhsuk-cbmi-classification-healthy-heading {
486
- border-left: 8px solid #30b4ab;
443
+ .nhsuk-cbmi-legend-key-classification-underweight, .nhsuk-cbmi-classification-underweight {
444
+ background: #330072;
487
445
  }
488
446
 
489
- .nhsuk-cbmi-classification-overweight-heading {
490
- border-left: 8px solid #ffb81c;
447
+ .nhsuk-cbmi-graph {
448
+ position: relative;
449
+ outline: 1px solid black;
450
+ margin-top: 20px;
451
+ display: flex;
452
+ height: 28px;
453
+ }
454
+ @media (min-width: 320px) and (max-width: 641px) {
455
+ .nhsuk-cbmi-graph {
456
+ height: 24px;
457
+ }
491
458
  }
492
459
 
493
- .nhsuk-cbmi-classification-healthy, .nhsuk-cbmi-legend-key-classification-healthy {
460
+
461
+ .nhsuk-cbmi-legend-key-classification-healthy, .nhsuk-cbmi-classification-healthy {
494
462
  background: repeating-linear-gradient(-45deg, #30b4ab, #30b4ab 4.5px, #00a499 4.5px, #00a499 9px);
495
463
  }
496
464
 
497
- .nhsuk-cbmi-classification-overweight, .nhsuk-cbmi-legend-key-classification-overweight {
465
+ .nhsuk-cbmi-legend-key-classification-overweight, .nhsuk-cbmi-classification-overweight {
498
466
  background: #ffb81c;
499
467
  }
500
468
 
501
- .nhsuk-cbmi-classification-underweight, .nhsuk-cbmi-legend-key-classification-underweight {
469
+ .nhsuk-cbmi-legend-key-classification-underweight, .nhsuk-cbmi-classification-underweight {
502
470
  background: #330072;
503
471
  }
504
472
 
@@ -561,59 +529,42 @@
561
529
  }
562
530
  }
563
531
 
564
- .nhsuk-bar-slider-arrow-marker {
565
- position: absolute;
566
- height: 16px;
567
- width: 16px;
568
- margin: -9px 0 -8px -8px;
569
- }
570
- @media (min-width: 320px) and (max-width: 641px) {
571
- .nhsuk-bar-slider-arrow-marker {
572
- height: 12px;
573
- width: 12px;
574
- margin: -9px 0 -6px -6px;
575
- }
532
+ .nhsuk-bmi-legend-key-classification-underweight, .nhsuk-bmi-classification-underweight {
533
+ background: #330072;
576
534
  }
577
535
 
578
- .nhsuk-bar-slider-label-align-left {
579
- display: flex;
580
- justify-content: left;
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);
581
538
  }
582
539
 
583
- .nhsuk-bar-slider-label-align-center {
584
- display: flex;
585
- justify-content: center;
540
+ .nhsuk-bmi-legend-key-classification-overweight, .nhsuk-bmi-classification-overweight {
541
+ background: #ffb81c;
586
542
  }
587
543
 
588
- .nhsuk-bar-slider-label-align-right {
589
- display: flex;
590
- justify-content: right;
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);
591
546
  }
592
547
 
593
- .nhsuk-bar-slider-label-marker {
594
- position: relative;
595
- height: 25px;
596
- width: auto;
597
- white-space: nowrap;
598
- margin-top: -30px;
548
+ .nhsuk-bmi-legend-key-classification-obese {
549
+ border-bottom: none;
550
+ box-shadow: none;
599
551
  }
600
552
 
601
- .nhsuk-bar-slider-value-marker {
602
- position: relative;
603
- font-weight: bold;
604
- margin-left: 5px;
605
- margin-right: 2px;
553
+ .nhsuk-bmi-legend-key-marker {
554
+ border-bottom: none;
555
+ box-shadow: none;
606
556
  }
607
557
 
608
- .nhsuk-cbmi-classification-healthy, .nhsuk-cbmi-legend-key-classification-healthy {
558
+
559
+ .nhsuk-cbmi-legend-key-classification-healthy, .nhsuk-cbmi-classification-healthy {
609
560
  background: repeating-linear-gradient(-45deg, #30b4ab, #30b4ab 4.5px, #00a499 4.5px, #00a499 9px);
610
561
  }
611
562
 
612
- .nhsuk-cbmi-classification-overweight, .nhsuk-cbmi-legend-key-classification-overweight {
563
+ .nhsuk-cbmi-legend-key-classification-overweight, .nhsuk-cbmi-classification-overweight {
613
564
  background: #ffb81c;
614
565
  }
615
566
 
616
- .nhsuk-cbmi-classification-underweight, .nhsuk-cbmi-legend-key-classification-underweight {
567
+ .nhsuk-cbmi-legend-key-classification-underweight, .nhsuk-cbmi-classification-underweight {
617
568
  background: #330072;
618
569
  }
619
570
 
@@ -641,15 +592,76 @@
641
592
  z-index: 1;
642
593
  }
643
594
 
644
- .nhsuk-bar-slider-graph {
645
- position: relative;
646
- outline: 1px solid black;
647
- margin-top: 20px;
648
- display: flex;
649
- height: 28px;
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;
650
654
  }
651
655
  @media (min-width: 320px) and (max-width: 641px) {
652
- .nhsuk-bar-slider-graph {
653
- height: 24px;
656
+ .nhsuk-cbmi-axis-marker {
657
+ height: 29px;
654
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;
655
667
  }