nhsuk-tools-chart-components-react 1.2.0-beta.0 → 2.0.0-nhsuk-react-beta

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