nhsuk-tools-chart-components-react 2.0.0-nhsuk-react-beta → 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 +219 -219
  3. package/dist/cjs/index.js +1 -1
  4. package/dist/cjs/index.js.map +1 -1
  5. package/dist/esm/bundle.css +331 -331
  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 +10 -7
package/dist/esm/bundle.css CHANGED
@@ -16,112 +16,202 @@
16
16
  }
17
17
 
18
18
 
19
- .nhsuk-bmi-legend-key-classification-underweight, .nhsuk-bmi-classification-underweight {
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
+ }
31
+ }
32
+
33
+ .nhsuk-bar-slider-label-align-left {
34
+ display: flex;
35
+ justify-content: left;
36
+ }
37
+
38
+ .nhsuk-bar-slider-label-align-center {
39
+ display: flex;
40
+ justify-content: center;
41
+ }
42
+
43
+ .nhsuk-bar-slider-label-align-right {
44
+ display: flex;
45
+ justify-content: right;
46
+ }
47
+
48
+ .nhsuk-bar-slider-label-marker {
49
+ position: relative;
50
+ height: 25px;
51
+ width: auto;
52
+ white-space: nowrap;
53
+ margin-top: -30px;
54
+ }
55
+
56
+ .nhsuk-bar-slider-value-marker {
57
+ position: relative;
58
+ font-weight: bold;
59
+ margin-left: 5px;
60
+ margin-right: 2px;
61
+ }
62
+
63
+ .nhsuk-bp-classification-low, .nhsuk-bp-legend-key-classification-low {
20
64
  background: #330072;
21
65
  }
22
66
 
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);
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);
25
69
  }
26
70
 
27
- .nhsuk-bmi-legend-key-classification-overweight, .nhsuk-bmi-classification-overweight {
71
+ .nhsuk-bp-classification-slightlyraised, .nhsuk-bp-legend-key-classification-slightlyraised {
28
72
  background: #ffb81c;
29
73
  }
30
74
 
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);
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);
33
77
  }
34
78
 
35
- .nhsuk-bmi-graph {
36
- position: relative;
37
- outline: 1px solid black;
79
+ #nhsuk-bp-chart > figure {
80
+ margin: 0;
81
+ }
82
+
83
+ .nhsuk-bp-legend-key-wrapper {
38
84
  display: flex;
39
- height: 28px;
40
- margin-bottom: nhsuk-spacing(4);
41
85
  }
42
- @media (min-width: 320px) and (max-width: 641px) {
43
- .nhsuk-bmi-graph {
44
- height: 24px;
45
- }
86
+ .nhsuk-bp-legend-key-wrapper:last-child {
87
+ margin-top: 5px;
46
88
  }
47
89
 
90
+ .nhsuk-bp-legend-display-card {
91
+ margin-top: 50px;
92
+ max-width: 300px;
93
+ }
48
94
 
49
- .nhsuk-bmi-chart-marker {
50
- position: absolute;
51
- z-index: 4;
52
- height: 24px;
53
- width: 24px;
54
- margin: 2px 0 -12px -12px;
95
+ .nhsuk-bp-legend-key-classification-low {
96
+ border-bottom: none;
97
+ box-shadow: none;
55
98
  }
56
- @media (min-width: 320px) and (max-width: 641px) {
57
- .nhsuk-bmi-chart-marker {
58
- height: 20px;
59
- width: 20px;
60
- margin: 2px 0 -10px -10px;
61
- }
99
+
100
+ .nhsuk-bp-legend-key-marker {
101
+ border-bottom: none;
102
+ box-shadow: none;
62
103
  }
63
104
 
64
- .nhsuk-bmi-axis-marker {
105
+
106
+ .nhsuk-bp-diastolic-axis-marker, .nhsuk-bp-systolic-axis-marker {
65
107
  position: absolute;
66
108
  outline: 0.5px solid black;
109
+ }
110
+
111
+ .nhsuk-bp-diastolic-axis-label, .nhsuk-bp-systolic-axis-label {
112
+ position: absolute;
113
+ }
114
+
115
+ .nhsuk-bp-systolic-axis-marker {
116
+ width: 5px;
117
+ left: -5px;
118
+ }
119
+ .nhsuk-bp-systolic-axis-marker:first-child {
120
+ bottom: -1px !important;
121
+ }
122
+ .nhsuk-bp-systolic-axis-marker:last-child {
123
+ bottom: calc(100% + 1px) !important;
124
+ }
125
+
126
+ .nhsuk-bp-diastolic-axis-marker {
67
127
  height: 5px;
68
128
  bottom: -5px;
69
129
  }
130
+ .nhsuk-bp-diastolic-axis-marker:first-child {
131
+ left: -1px !important;
132
+ }
133
+ .nhsuk-bp-diastolic-axis-marker:last-child {
134
+ left: calc(100% + 1px) !important;
135
+ }
70
136
 
71
- .nhsuk-bmi-axis-marker-label {
72
- position: absolute;
137
+ @media (max-width: 450px) {
138
+ .nhsuk-bp-diastolic-axis-marker-85 {
139
+ display: none;
140
+ }
141
+ }
142
+
143
+ .nhsuk-bp-diastolic-axis-marker-90 {
144
+ display: none;
145
+ }
146
+ @media (max-width: 450px) {
147
+ .nhsuk-bp-diastolic-axis-marker-90 {
148
+ display: block;
149
+ }
150
+ }
151
+
152
+ .nhsuk-bp-systolic-axis-label {
153
+ left: -30px;
154
+ top: -10px;
155
+ width: 26px;
156
+ text-align: end;
157
+ }
158
+
159
+ .nhsuk-bp-diastolic-axis-label {
73
160
  bottom: -25px;
74
161
  left: -10px;
75
162
  width: 20px;
76
163
  text-align: center;
77
164
  }
78
165
 
79
-
80
- .nhsuk-bmi-legend-key-classification-underweight, .nhsuk-bmi-classification-underweight {
166
+ .nhsuk-bp-classification-low, .nhsuk-bp-legend-key-classification-low {
81
167
  background: #330072;
82
168
  }
83
169
 
84
- .nhsuk-bmi-legend-key-classification-healthy, .nhsuk-bmi-classification-healthy {
85
- background: repeating-linear-gradient(-45deg, #30b4ab, #30b4ab 4.5px, #00a499 4.5px, #00a499 9px);
170
+ .nhsuk-bp-classification-healthy, .nhsuk-bp-legend-key-classification-healthy {
171
+ background: repeating-linear-gradient(-45deg, #59c3bc, #59c3bc 4.5px, #33b6ad 4.5px, #33b6ad 9px);
86
172
  }
87
173
 
88
- .nhsuk-bmi-legend-key-classification-overweight, .nhsuk-bmi-classification-overweight {
174
+ .nhsuk-bp-classification-slightlyraised, .nhsuk-bp-legend-key-classification-slightlyraised {
89
175
  background: #ffb81c;
90
176
  }
91
177
 
92
- .nhsuk-bmi-legend-key-classification-obese, .nhsuk-bmi-classification-obese {
93
- background: repeating-linear-gradient(45deg, #da5147, #da5147 4.5px, #d5281b 4.5px, #d5281b 9px);
178
+ .nhsuk-bp-classification-high, .nhsuk-bp-legend-key-classification-high {
179
+ background: repeating-linear-gradient(45deg, #e1746b, #e1746b 4.5px, #dd5349 4.5px, #dd5349 9px);
94
180
  }
95
181
 
96
- .nhsuk-bmi-classification-obese, .nhsuk-bmi-classification-overweight, .nhsuk-bmi-classification-healthy, .nhsuk-bmi-classification-underweight {
182
+ .nhsuk-bp-region-boundary {
97
183
  position: absolute;
98
184
  bottom: 0%;
99
185
  outline: 1px solid black;
186
+ border-top: 1px solid black;
100
187
  border-right: 1px solid black;
101
- box-shadow: -1px 0px white inset, 2px 0px white, 0px -2px white;
102
- height: 28px;
103
- }
104
- @media (min-width: 320px) and (max-width: 641px) {
105
- .nhsuk-bmi-classification-obese, .nhsuk-bmi-classification-overweight, .nhsuk-bmi-classification-healthy, .nhsuk-bmi-classification-underweight {
106
- height: 24px;
107
- }
188
+ box-shadow: -1px 1px white inset, 2px 0px white, 0px -2px white, 2px -2px white;
189
+ z-index: 5;
190
+ background: transparent;
108
191
  }
109
192
 
110
- .nhsuk-bmi-classification-underweight {
193
+ .nhsuk-bp-classification-low {
194
+ position: absolute;
195
+ bottom: 0%;
111
196
  z-index: 3;
112
197
  }
113
198
 
114
- .nhsuk-bmi-classification-healthy {
199
+ .nhsuk-bp-classification-healthy {
200
+ position: absolute;
201
+ bottom: 0%;
115
202
  z-index: 2;
116
203
  }
117
204
 
118
- .nhsuk-bmi-classification-overweight {
205
+ .nhsuk-bp-classification-slightlyraised {
206
+ position: absolute;
207
+ bottom: 0%;
119
208
  z-index: 1;
120
209
  }
121
210
 
122
- .nhsuk-bmi-classification-obese {
123
- border-right: none;
124
- box-shadow: none;
211
+ .nhsuk-bp-classification-high {
212
+ position: absolute;
213
+ bottom: 0%;
214
+ z-index: 0;
125
215
  }
126
216
 
127
217
 
@@ -138,233 +228,252 @@
138
228
  }
139
229
  }
140
230
 
141
- .nhsuk-bmi-legend-key-classification-underweight, .nhsuk-bmi-classification-underweight {
142
- background: #330072;
231
+ .nhsuk-bmi-axis-marker {
232
+ position: absolute;
233
+ outline: 0.5px solid black;
234
+ height: 5px;
235
+ bottom: -5px;
143
236
  }
144
237
 
145
- .nhsuk-bmi-legend-key-classification-healthy, .nhsuk-bmi-classification-healthy {
146
- background: repeating-linear-gradient(-45deg, #30b4ab, #30b4ab 4.5px, #00a499 4.5px, #00a499 9px);
238
+ .nhsuk-bmi-axis-marker-label {
239
+ position: absolute;
240
+ bottom: -25px;
241
+ left: -10px;
242
+ width: 20px;
243
+ text-align: center;
147
244
  }
148
245
 
149
- .nhsuk-bmi-legend-key-classification-overweight, .nhsuk-bmi-classification-overweight {
150
- background: #ffb81c;
246
+
247
+ .nhsuk-bp-graph {
248
+ position: relative;
249
+ margin-left: 20px;
250
+ margin-right: 20px;
251
+ outline: 2px solid black;
252
+ display: flex;
253
+ flex-direction: column;
254
+ height: 350px;
255
+ }
256
+ @media (max-width: 320px) {
257
+ .nhsuk-bp-graph {
258
+ height: 225px;
259
+ }
260
+ }
261
+ @media (min-width: 320px) and (max-width: 641px) {
262
+ .nhsuk-bp-graph {
263
+ height: 275px;
264
+ }
151
265
  }
152
266
 
153
- .nhsuk-bmi-legend-key-classification-obese, .nhsuk-bmi-classification-obese {
154
- background: repeating-linear-gradient(45deg, #da5147, #da5147 4.5px, #d5281b 4.5px, #d5281b 9px);
267
+ .nhsuk-bp-graph-row {
268
+ flex-grow: 1;
269
+ display: flex;
155
270
  }
156
271
 
157
- .nhsuk-bmi-legend-key-classification-obese {
158
- border-bottom: none;
159
- box-shadow: none;
272
+ .nhsuk-bp-systolic-legend-wrapper {
273
+ display: flex;
274
+ align-items: flex-end;
275
+ margin-bottom: 10px;
160
276
  }
161
277
 
162
- .nhsuk-bmi-legend-key-marker {
163
- border-bottom: none;
164
- box-shadow: none;
278
+ .nhsuk-bp-diastolic-legend-wrapper {
279
+ display: flex;
280
+ align-items: flex-start;
281
+ margin-top: 30px;
282
+ padding-left: 18px;
165
283
  }
166
284
 
167
- .nhsuk-bp-classification-low, .nhsuk-bp-legend-key-classification-low {
168
- background: #330072;
285
+ .nhsuk-bp-diastolic-legend-marker, .nhsuk-bp-systolic-legend-marker {
286
+ height: 16px;
287
+ margin-right: 5px;
288
+ border-left: 2px solid black;
169
289
  }
170
290
 
171
- .nhsuk-bp-classification-healthy, .nhsuk-bp-legend-key-classification-healthy {
172
- background: repeating-linear-gradient(-45deg, #59c3bc, #59c3bc 4.5px, #33b6ad 4.5px, #33b6ad 9px);
291
+ .nhsuk-bp-systolic-legend-marker {
292
+ width: 40px;
293
+ border-top: 2px solid black;
173
294
  }
174
295
 
175
- .nhsuk-bp-classification-slightlyraised, .nhsuk-bp-legend-key-classification-slightlyraised {
176
- background: #ffb81c;
296
+ .nhsuk-bp-diastolic-legend-marker {
297
+ width: 20px;
298
+ border-bottom: 2px solid black;
177
299
  }
178
300
 
179
- .nhsuk-bp-classification-high, .nhsuk-bp-legend-key-classification-high {
180
- background: repeating-linear-gradient(45deg, #e1746b, #e1746b 4.5px, #dd5349 4.5px, #dd5349 9px);
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);
181
303
  }
182
304
 
183
- #nhsuk-bp-chart > figure {
184
- margin: 0;
305
+ .nhsuk-cbmi-classification-overweight, .nhsuk-cbmi-legend-key-classification-overweight {
306
+ background: #ffb81c;
185
307
  }
186
308
 
187
- .nhsuk-bp-legend-key-wrapper {
188
- display: flex;
309
+ .nhsuk-cbmi-classification-underweight, .nhsuk-cbmi-legend-key-classification-underweight {
310
+ background: #330072;
189
311
  }
190
- .nhsuk-bp-legend-key-wrapper:last-child {
191
- margin-top: 5px;
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
+ }
192
327
  }
193
328
 
194
- .nhsuk-bp-legend-display-card {
195
- margin-top: 50px;
196
- max-width: 300px;
329
+ .nhsuk-cbmi-axis-marker-label {
330
+ position: absolute;
331
+ bottom: -25px;
332
+ left: -10px;
333
+ width: 20px;
334
+ text-align: center;
197
335
  }
198
336
 
199
- .nhsuk-bp-legend-key-classification-low {
200
- border-bottom: none;
201
- box-shadow: none;
337
+
338
+ .nhsuk-bmi-legend-key-classification-underweight, .nhsuk-bmi-classification-underweight {
339
+ background: #330072;
202
340
  }
203
341
 
204
- .nhsuk-bp-legend-key-marker {
205
- border-bottom: none;
206
- box-shadow: none;
342
+ .nhsuk-bmi-legend-key-classification-healthy, .nhsuk-bmi-classification-healthy {
343
+ background: repeating-linear-gradient(-45deg, #30b4ab, #30b4ab 4.5px, #00a499 4.5px, #00a499 9px);
207
344
  }
208
345
 
346
+ .nhsuk-bmi-legend-key-classification-overweight, .nhsuk-bmi-classification-overweight {
347
+ background: #ffb81c;
348
+ }
209
349
 
210
- .nhsuk-bar-slider-arrow-marker {
350
+ .nhsuk-bmi-legend-key-classification-obese, .nhsuk-bmi-classification-obese {
351
+ background: repeating-linear-gradient(45deg, #da5147, #da5147 4.5px, #d5281b 4.5px, #d5281b 9px);
352
+ }
353
+
354
+ .nhsuk-bmi-classification-obese, .nhsuk-bmi-classification-overweight, .nhsuk-bmi-classification-healthy, .nhsuk-bmi-classification-underweight {
211
355
  position: absolute;
212
- height: 16px;
213
- width: 16px;
214
- margin: -9px 0 -8px -8px;
356
+ bottom: 0%;
357
+ outline: 1px solid black;
358
+ border-right: 1px solid black;
359
+ box-shadow: -1px 0px white inset, 2px 0px white, 0px -2px white;
360
+ height: 28px;
215
361
  }
216
362
  @media (min-width: 320px) and (max-width: 641px) {
217
- .nhsuk-bar-slider-arrow-marker {
218
- height: 12px;
219
- width: 12px;
220
- margin: -9px 0 -6px -6px;
363
+ .nhsuk-bmi-classification-obese, .nhsuk-bmi-classification-overweight, .nhsuk-bmi-classification-healthy, .nhsuk-bmi-classification-underweight {
364
+ height: 24px;
221
365
  }
222
366
  }
223
367
 
224
- .nhsuk-bar-slider-label-align-left {
225
- display: flex;
226
- justify-content: left;
368
+ .nhsuk-bmi-classification-underweight {
369
+ z-index: 3;
227
370
  }
228
371
 
229
- .nhsuk-bar-slider-label-align-center {
230
- display: flex;
231
- justify-content: center;
372
+ .nhsuk-bmi-classification-healthy {
373
+ z-index: 2;
232
374
  }
233
375
 
234
- .nhsuk-bar-slider-label-align-right {
235
- display: flex;
236
- justify-content: right;
376
+ .nhsuk-bmi-classification-overweight {
377
+ z-index: 1;
237
378
  }
238
379
 
239
- .nhsuk-bar-slider-label-marker {
240
- position: relative;
241
- height: 25px;
242
- width: auto;
243
- white-space: nowrap;
244
- margin-top: -30px;
380
+ .nhsuk-bmi-classification-obese {
381
+ border-right: none;
382
+ box-shadow: none;
245
383
  }
246
384
 
247
- .nhsuk-bar-slider-value-marker {
248
- position: relative;
249
- font-weight: bold;
250
- margin-left: 5px;
251
- margin-right: 2px;
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);
252
387
  }
253
388
 
254
-
255
- .nhsuk-bp-graph {
256
- position: relative;
257
- margin-left: 20px;
258
- margin-right: 20px;
259
- outline: 2px solid black;
260
- display: flex;
261
- flex-direction: column;
262
- height: 350px;
263
- }
264
- @media (max-width: 320px) {
265
- .nhsuk-bp-graph {
266
- height: 225px;
267
- }
389
+ .nhsuk-cbmi-classification-overweight, .nhsuk-cbmi-legend-key-classification-overweight {
390
+ background: #ffb81c;
268
391
  }
269
- @media (min-width: 320px) and (max-width: 641px) {
270
- .nhsuk-bp-graph {
271
- height: 275px;
272
- }
392
+
393
+ .nhsuk-cbmi-classification-underweight, .nhsuk-cbmi-legend-key-classification-underweight {
394
+ background: #330072;
273
395
  }
274
396
 
275
- .nhsuk-bp-graph-row {
276
- flex-grow: 1;
277
- display: flex;
397
+ .nhsuk-cbmi-legend-key-classification-overweight {
398
+ border-bottom: none;
399
+ box-shadow: none;
278
400
  }
279
401
 
280
- .nhsuk-bp-systolic-legend-wrapper {
281
- display: flex;
282
- align-items: flex-end;
283
- margin-bottom: 10px;
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;
284
405
  }
285
406
 
286
- .nhsuk-bp-diastolic-legend-wrapper {
287
- display: flex;
288
- align-items: flex-start;
289
- margin-top: 30px;
290
- padding-left: 18px;
407
+ .nhsuk-cbmi-legend-marker {
408
+ margin-bottom: 2px;
291
409
  }
292
410
 
293
- .nhsuk-bp-diastolic-legend-marker, .nhsuk-bp-systolic-legend-marker {
294
- height: 16px;
295
- margin-right: 5px;
296
- border-left: 2px solid black;
411
+ .nhsuk-cbmi-classification-underweight-heading {
412
+ border-left: 8px solid #330072;
297
413
  }
298
414
 
299
- .nhsuk-bp-systolic-legend-marker {
300
- width: 40px;
301
- border-top: 2px solid black;
415
+ .nhsuk-cbmi-classification-healthy-heading {
416
+ border-left: 8px solid #30b4ab;
302
417
  }
303
418
 
304
- .nhsuk-bp-diastolic-legend-marker {
305
- width: 20px;
306
- border-bottom: 2px solid black;
419
+ .nhsuk-cbmi-classification-overweight-heading {
420
+ border-left: 8px solid #ffb81c;
307
421
  }
308
422
 
309
423
 
310
- .nhsuk-bp-diastolic-axis-marker, .nhsuk-bp-systolic-axis-marker {
311
- position: absolute;
312
- outline: 0.5px solid black;
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);
313
426
  }
314
427
 
315
- .nhsuk-bp-diastolic-axis-label, .nhsuk-bp-systolic-axis-label {
316
- position: absolute;
428
+ .nhsuk-cbmi-classification-overweight, .nhsuk-cbmi-legend-key-classification-overweight {
429
+ background: #ffb81c;
317
430
  }
318
431
 
319
- .nhsuk-bp-systolic-axis-marker {
320
- width: 5px;
321
- left: -5px;
322
- }
323
- .nhsuk-bp-systolic-axis-marker:first-child {
324
- bottom: -1px !important;
325
- }
326
- .nhsuk-bp-systolic-axis-marker:last-child {
327
- bottom: calc(100% + 1px) !important;
432
+ .nhsuk-cbmi-classification-underweight, .nhsuk-cbmi-legend-key-classification-underweight {
433
+ background: #330072;
328
434
  }
329
435
 
330
- .nhsuk-bp-diastolic-axis-marker {
331
- height: 5px;
332
- bottom: -5px;
333
- }
334
- .nhsuk-bp-diastolic-axis-marker:first-child {
335
- left: -1px !important;
436
+ .nhsuk-cbmi-graph {
437
+ position: relative;
438
+ outline: 1px solid black;
439
+ margin-top: 20px;
440
+ display: flex;
441
+ height: 28px;
336
442
  }
337
- .nhsuk-bp-diastolic-axis-marker:last-child {
338
- left: calc(100% + 1px) !important;
443
+ @media (min-width: 320px) and (max-width: 641px) {
444
+ .nhsuk-cbmi-graph {
445
+ height: 24px;
446
+ }
339
447
  }
340
448
 
341
- @media (max-width: 450px) {
342
- .nhsuk-bp-diastolic-axis-marker-85 {
343
- display: none;
344
- }
449
+
450
+ .nhsuk-bmi-legend-key-classification-underweight, .nhsuk-bmi-classification-underweight {
451
+ background: #330072;
345
452
  }
346
453
 
347
- .nhsuk-bp-diastolic-axis-marker-90 {
348
- display: none;
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);
349
456
  }
350
- @media (max-width: 450px) {
351
- .nhsuk-bp-diastolic-axis-marker-90 {
352
- display: block;
353
- }
457
+
458
+ .nhsuk-bmi-legend-key-classification-overweight, .nhsuk-bmi-classification-overweight {
459
+ background: #ffb81c;
354
460
  }
355
461
 
356
- .nhsuk-bp-systolic-axis-label {
357
- left: -30px;
358
- top: -10px;
359
- width: 26px;
360
- text-align: end;
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);
361
464
  }
362
465
 
363
- .nhsuk-bp-diastolic-axis-label {
364
- bottom: -25px;
365
- left: -10px;
366
- width: 20px;
367
- text-align: center;
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
+ }
368
477
  }
369
478
 
370
479
 
@@ -390,55 +499,30 @@
390
499
  }
391
500
  }
392
501
 
393
- .nhsuk-bp-classification-low, .nhsuk-bp-legend-key-classification-low {
502
+ .nhsuk-bmi-legend-key-classification-underweight, .nhsuk-bmi-classification-underweight {
394
503
  background: #330072;
395
504
  }
396
505
 
397
- .nhsuk-bp-classification-healthy, .nhsuk-bp-legend-key-classification-healthy {
398
- background: repeating-linear-gradient(-45deg, #59c3bc, #59c3bc 4.5px, #33b6ad 4.5px, #33b6ad 9px);
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);
399
508
  }
400
509
 
401
- .nhsuk-bp-classification-slightlyraised, .nhsuk-bp-legend-key-classification-slightlyraised {
510
+ .nhsuk-bmi-legend-key-classification-overweight, .nhsuk-bmi-classification-overweight {
402
511
  background: #ffb81c;
403
512
  }
404
513
 
405
- .nhsuk-bp-classification-high, .nhsuk-bp-legend-key-classification-high {
406
- background: repeating-linear-gradient(45deg, #e1746b, #e1746b 4.5px, #dd5349 4.5px, #dd5349 9px);
407
- }
408
-
409
- .nhsuk-bp-region-boundary {
410
- position: absolute;
411
- bottom: 0%;
412
- outline: 1px solid black;
413
- border-top: 1px solid black;
414
- border-right: 1px solid black;
415
- box-shadow: -1px 1px white inset, 2px 0px white, 0px -2px white, 2px -2px white;
416
- z-index: 5;
417
- background: transparent;
418
- }
419
-
420
- .nhsuk-bp-classification-low {
421
- position: absolute;
422
- bottom: 0%;
423
- z-index: 3;
424
- }
425
-
426
- .nhsuk-bp-classification-healthy {
427
- position: absolute;
428
- bottom: 0%;
429
- z-index: 2;
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);
430
516
  }
431
517
 
432
- .nhsuk-bp-classification-slightlyraised {
433
- position: absolute;
434
- bottom: 0%;
435
- z-index: 1;
518
+ .nhsuk-bmi-legend-key-classification-obese {
519
+ border-bottom: none;
520
+ box-shadow: none;
436
521
  }
437
522
 
438
- .nhsuk-bp-classification-high {
439
- position: absolute;
440
- bottom: 0%;
441
- z-index: 0;
523
+ .nhsuk-bmi-legend-key-marker {
524
+ border-bottom: none;
525
+ box-shadow: none;
442
526
  }
443
527
 
444
528
  .nhsuk-bp-graph-cell {
@@ -457,42 +541,20 @@
457
541
  border-left: none;
458
542
  }
459
543
 
460
- .nhsuk-cbmi-classification-healthy, .nhsuk-cbmi-legend-key-classification-healthy {
461
- background: repeating-linear-gradient(-45deg, #30b4ab, #30b4ab 4.5px, #00a499 4.5px, #00a499 9px);
462
- }
463
-
464
- .nhsuk-cbmi-classification-overweight, .nhsuk-cbmi-legend-key-classification-overweight {
465
- background: #ffb81c;
466
- }
467
-
468
- .nhsuk-cbmi-classification-underweight, .nhsuk-cbmi-legend-key-classification-underweight {
469
- background: #330072;
470
- }
471
-
472
- .nhsuk-cbmi-legend-key-classification-overweight {
473
- border-bottom: none;
474
- box-shadow: none;
475
- }
476
-
477
- .nhsuk-cbmi-legend-key, .nhsuk-cbmi-legend-key-classification-underweight, .nhsuk-cbmi-legend-key-classification-healthy, .nhsuk-cbmi-legend-key-classification-overweight {
478
- border-bottom: 2px solid white;
479
- margin-bottom: 2px;
480
- }
481
-
482
- .nhsuk-cbmi-legend-marker {
483
- margin-bottom: 2px;
484
- }
485
-
486
- .nhsuk-cbmi-classification-underweight-heading {
487
- border-left: 8px solid #330072;
488
- }
489
544
 
490
- .nhsuk-cbmi-classification-healthy-heading {
491
- border-left: 8px solid #30b4ab;
545
+ .nhsuk-bmi-chart-marker {
546
+ position: absolute;
547
+ z-index: 4;
548
+ height: 24px;
549
+ width: 24px;
550
+ margin: 2px 0 -12px -12px;
492
551
  }
493
-
494
- .nhsuk-cbmi-classification-overweight-heading {
495
- border-left: 8px solid #ffb81c;
552
+ @media (min-width: 320px) and (max-width: 641px) {
553
+ .nhsuk-bmi-chart-marker {
554
+ height: 20px;
555
+ width: 20px;
556
+ margin: 2px 0 -10px -10px;
557
+ }
496
558
  }
497
559
 
498
560
 
@@ -568,32 +630,6 @@
568
630
  }
569
631
 
570
632
 
571
- .nhsuk-cbmi-classification-healthy, .nhsuk-cbmi-legend-key-classification-healthy {
572
- background: repeating-linear-gradient(-45deg, #30b4ab, #30b4ab 4.5px, #00a499 4.5px, #00a499 9px);
573
- }
574
-
575
- .nhsuk-cbmi-classification-overweight, .nhsuk-cbmi-legend-key-classification-overweight {
576
- background: #ffb81c;
577
- }
578
-
579
- .nhsuk-cbmi-classification-underweight, .nhsuk-cbmi-legend-key-classification-underweight {
580
- background: #330072;
581
- }
582
-
583
- .nhsuk-cbmi-graph {
584
- position: relative;
585
- outline: 1px solid black;
586
- margin-top: 20px;
587
- display: flex;
588
- height: 28px;
589
- }
590
- @media (min-width: 320px) and (max-width: 641px) {
591
- .nhsuk-cbmi-graph {
592
- height: 24px;
593
- }
594
- }
595
-
596
-
597
633
  .nhsuk-cbmi-classification-healthy, .nhsuk-cbmi-legend-key-classification-healthy {
598
634
  background: repeating-linear-gradient(-45deg, #30b4ab, #30b4ab 4.5px, #00a499 4.5px, #00a499 9px);
599
635
  }
@@ -628,40 +664,4 @@
628
664
 
629
665
  .nhsuk-cbmi-classification-overweight {
630
666
  z-index: 1;
631
- }
632
-
633
- .nhsuk-cbmi-legend-key-classification-healthy, .nhsuk-cbmi-classification-healthy {
634
- background: repeating-linear-gradient(-45deg, #30b4ab, #30b4ab 4.5px, #00a499 4.5px, #00a499 9px);
635
- }
636
-
637
- .nhsuk-cbmi-legend-key-classification-overweight, .nhsuk-cbmi-classification-overweight {
638
- background: #ffb81c;
639
- }
640
-
641
- .nhsuk-cbmi-legend-key-classification-underweight, .nhsuk-cbmi-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
  }