govuk_publishing_components 34.0.0 → 34.1.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (81) hide show
  1. checksums.yaml +4 -4
  2. data/app/assets/javascripts/govuk_publishing_components/analytics-ga4/ga4-core.js +16 -27
  3. data/app/assets/javascripts/govuk_publishing_components/analytics-ga4/ga4-event-tracker.js +2 -0
  4. data/app/assets/javascripts/govuk_publishing_components/analytics-ga4/ga4-page-views.js +4 -4
  5. data/app/assets/javascripts/govuk_publishing_components/components/layout-super-navigation-header.js +12 -69
  6. data/app/assets/javascripts/govuk_publishing_components/components/step-by-step-nav.js +14 -13
  7. data/app/assets/stylesheets/govuk_publishing_components/components/_layout-super-navigation-header.scss +247 -412
  8. data/app/views/govuk_publishing_components/components/_label.html.erb +3 -2
  9. data/app/views/govuk_publishing_components/components/_layout_super_navigation_header.html.erb +94 -143
  10. data/app/views/govuk_publishing_components/components/docs/label.yml +6 -0
  11. data/config/locales/ar.yml +4 -1
  12. data/config/locales/az.yml +4 -1
  13. data/config/locales/be.yml +4 -1
  14. data/config/locales/bg.yml +4 -1
  15. data/config/locales/bn.yml +4 -1
  16. data/config/locales/cs.yml +4 -1
  17. data/config/locales/cy.yml +4 -1
  18. data/config/locales/da.yml +4 -1
  19. data/config/locales/de.yml +4 -1
  20. data/config/locales/dr.yml +4 -1
  21. data/config/locales/el.yml +4 -1
  22. data/config/locales/en.yml +6 -10
  23. data/config/locales/es-419.yml +4 -1
  24. data/config/locales/es.yml +4 -1
  25. data/config/locales/et.yml +4 -1
  26. data/config/locales/fa.yml +4 -1
  27. data/config/locales/fi.yml +4 -1
  28. data/config/locales/fr.yml +4 -1
  29. data/config/locales/gd.yml +4 -1
  30. data/config/locales/gu.yml +4 -1
  31. data/config/locales/he.yml +4 -1
  32. data/config/locales/hi.yml +4 -1
  33. data/config/locales/hr.yml +4 -1
  34. data/config/locales/hu.yml +4 -1
  35. data/config/locales/hy.yml +4 -1
  36. data/config/locales/id.yml +4 -1
  37. data/config/locales/is.yml +4 -1
  38. data/config/locales/it.yml +4 -1
  39. data/config/locales/ja.yml +4 -1
  40. data/config/locales/ka.yml +4 -1
  41. data/config/locales/kk.yml +4 -1
  42. data/config/locales/ko.yml +4 -1
  43. data/config/locales/lt.yml +4 -1
  44. data/config/locales/lv.yml +4 -1
  45. data/config/locales/ms.yml +4 -1
  46. data/config/locales/mt.yml +4 -1
  47. data/config/locales/nl.yml +4 -1
  48. data/config/locales/no.yml +4 -1
  49. data/config/locales/pa-pk.yml +4 -1
  50. data/config/locales/pa.yml +4 -1
  51. data/config/locales/pl.yml +4 -1
  52. data/config/locales/ps.yml +4 -1
  53. data/config/locales/pt.yml +4 -1
  54. data/config/locales/ro.yml +4 -1
  55. data/config/locales/ru.yml +4 -1
  56. data/config/locales/si.yml +4 -1
  57. data/config/locales/sk.yml +4 -1
  58. data/config/locales/sl.yml +4 -1
  59. data/config/locales/so.yml +4 -1
  60. data/config/locales/sq.yml +4 -1
  61. data/config/locales/sr.yml +4 -1
  62. data/config/locales/sv.yml +4 -1
  63. data/config/locales/sw.yml +4 -1
  64. data/config/locales/ta.yml +4 -1
  65. data/config/locales/th.yml +4 -1
  66. data/config/locales/tk.yml +4 -1
  67. data/config/locales/tr.yml +4 -1
  68. data/config/locales/uk.yml +4 -1
  69. data/config/locales/ur.yml +4 -1
  70. data/config/locales/uz.yml +4 -1
  71. data/config/locales/vi.yml +4 -1
  72. data/config/locales/zh-hk.yml +4 -1
  73. data/config/locales/zh-tw.yml +4 -1
  74. data/config/locales/zh.yml +4 -1
  75. data/lib/govuk_publishing_components/version.rb +1 -1
  76. data/node_modules/axe-core/axe.d.ts +75 -24
  77. data/node_modules/axe-core/axe.js +4765 -4555
  78. data/node_modules/axe-core/axe.min.js +2 -2
  79. data/node_modules/axe-core/package.json +2 -2
  80. data/node_modules/axe-core/sri-history.json +4 -0
  81. metadata +2 -2
@@ -8,9 +8,9 @@ $search-width-or-height: $black-bar-height;
8
8
  $pseudo-underline-height: 3px;
9
9
  $button-pipe-colour: darken(govuk-colour("mid-grey"), 20%);
10
10
 
11
- $after-link-padding: govuk-spacing(6);
12
- $after-button-padding-right: govuk-spacing(6);
13
- $after-button-padding-left: govuk-spacing(5);
11
+ $after-link-padding: govuk-spacing(4);
12
+ $after-button-padding-right: govuk-spacing(4);
13
+ $after-button-padding-left: govuk-spacing(4);
14
14
 
15
15
  @mixin chevron($colour, $update: false) {
16
16
  @if $update == true {
@@ -46,6 +46,7 @@ $after-button-padding-left: govuk-spacing(5);
46
46
  left: $left;
47
47
  position: absolute;
48
48
  right: $right;
49
+ bottom: 0;
49
50
  top: auto;
50
51
  @if $width {
51
52
  width: $width;
@@ -97,21 +98,19 @@ $after-button-padding-left: govuk-spacing(5);
97
98
  }
98
99
 
99
100
  .gem-c-layout-super-navigation-header__header-logo {
101
+ display: inline-block;
100
102
  height: govuk-spacing(6);
101
103
  padding-bottom: govuk-spacing(2);
102
104
  padding-top: govuk-spacing(2);
103
-
104
- @include govuk-media-query($from: "desktop") {
105
- display: block;
106
- float: left;
107
- }
108
105
  }
109
106
 
110
107
  .gem-c-layout-super-navigation-header__content {
111
- @include govuk-media-query($from: "desktop") {
112
- display: block;
113
- float: right;
108
+ @include govuk-media-query($until: "tablet") {
109
+ margin-right: govuk-spacing(-3);
114
110
  }
111
+
112
+ display: inline-block;
113
+ float: right;
115
114
  }
116
115
 
117
116
  .gem-c-layout-super-navigation-header__navigation-toggle-wrapper {
@@ -121,53 +120,14 @@ $after-button-padding-left: govuk-spacing(5);
121
120
  // Top level navigation and search.
122
121
  .gem-c-layout-super-navigation-header__navigation-items,
123
122
  .gem-c-layout-super-navigation-header__search-items {
124
- background: govuk-colour("light-grey");
125
123
  display: block;
124
+ float: left;
126
125
  list-style: none;
127
- margin: 0 (0 - govuk-spacing(3));
128
126
  padding: 0;
129
-
130
- @include govuk-media-query($from: "tablet") {
131
- margin: 0 (0 - govuk-spacing(6));
132
- }
133
-
134
- @include govuk-media-query($from: "desktop") {
135
- background: none;
136
- float: left;
137
- padding: 0;
138
- margin: 0;
139
- }
140
- }
141
-
142
- .gem-c-layout-super-navigation-header__navigation-items {
143
- @include govuk-media-query($from: "desktop") {
144
- display: inline-block;
145
- }
146
- }
147
-
148
- .gem-c-layout-super-navigation-header__navigation-item,
149
- .gem-c-layout-super-navigation-header__search-item {
150
- display: block;
151
127
  margin: 0;
152
- padding: govuk-spacing(2) govuk-spacing(3);
153
- position: relative;
154
-
155
- @include govuk-media-query($from: "tablet") {
156
- margin: 0 govuk-spacing(6);
157
- padding: govuk-spacing(2) 0;
158
- }
159
-
160
- @include govuk-media-query($from: "desktop") {
161
- background: govuk-colour("black");
162
- display: block;
163
- float: left;
164
- margin: 0;
165
- padding: 0;
166
- position: static;
167
- }
168
128
  }
169
129
 
170
- .gem-c-layout-super-navigation-header__navigation-item {
130
+ .gem-c-layout-super-navigation-header__navigation-items {
171
131
  border-bottom: 1px solid $govuk-border-colour;
172
132
 
173
133
  .js-module-initialised & {
@@ -182,20 +142,22 @@ $after-button-padding-left: govuk-spacing(5);
182
142
 
183
143
  &:first-of-type {
184
144
  margin-right: -1px;
185
-
186
- .gem-c-layout-super-navigation-header__navigation-second-toggle-button-inner,
187
- .gem-c-layout-super-navigation-header__navigation-item-link-inner {
188
- border-left: 1px solid $button-pipe-colour;
189
- border-right: 1px solid $button-pipe-colour;
190
- }
191
145
  }
192
146
  }
193
147
  }
194
148
 
149
+ .gem-c-layout-super-navigation-header__navigation-item,
150
+ .gem-c-layout-super-navigation-header__search-item {
151
+ background: govuk-colour("black");
152
+ display: block;
153
+ float: left;
154
+ margin: 0;
155
+ padding: 0;
156
+ }
157
+
195
158
  // Top level navigation links and search link.
196
159
  .gem-c-layout-super-navigation-header__navigation-item-link,
197
- .gem-c-layout-super-navigation-header__search-item-link,
198
- .gem-c-layout-super-navigation-header__navigation-second-toggle-button {
160
+ .gem-c-layout-super-navigation-header__search-item-link {
199
161
  @include govuk-link-common;
200
162
  @include govuk-link-style-no-visited-state;
201
163
 
@@ -204,6 +166,7 @@ $after-button-padding-left: govuk-spacing(5);
204
166
  font-size: govuk-px-to-rem(19px);
205
167
  font-weight: bold;
206
168
  margin: govuk-spacing(3) 0;
169
+ position: relative;
207
170
 
208
171
  @include govuk-media-query($from: "desktop") {
209
172
  display: block;
@@ -228,6 +191,10 @@ $after-button-padding-left: govuk-spacing(5);
228
191
  box-shadow: none;
229
192
  color: $govuk-link-colour;
230
193
 
194
+ .gem-c-layout-super-navigation-header__navigation-item-link-inner {
195
+ border-color: $button-pipe-colour;
196
+ }
197
+
231
198
  &:hover {
232
199
  @include govuk-link-decoration;
233
200
  @include govuk-link-hover-decoration;
@@ -237,94 +204,82 @@ $after-button-padding-left: govuk-spacing(5);
237
204
 
238
205
  &:after {
239
206
  @include make-selectable-area-bigger;
207
+ @include pseudo-underline($left: $after-link-padding, $right: $after-link-padding, $width: calc(100% - $after-button-padding-right));
240
208
  }
241
209
 
242
- @include govuk-media-query($from: "desktop") {
243
- // stylelint-disable max-nesting-depth
244
- float: left;
245
- font-size: 16px;
246
- font-size: govuk-px-to-rem(16px);
247
- height: govuk-spacing(4);
248
- position: relative;
210
+ // stylelint-disable max-nesting-depth
211
+ float: left;
212
+ font-size: 16px;
213
+ font-size: govuk-px-to-rem(16px);
214
+ height: govuk-spacing(4);
249
215
 
250
- &:before {
251
- @include chevron(govuk-colour("white"), true);
252
- }
216
+ &:before {
217
+ @include chevron(govuk-colour("white"), true);
218
+ }
253
219
 
254
- &:hover {
255
- color: govuk-colour("mid-grey");
220
+ &:hover {
221
+ color: govuk-colour("mid-grey");
256
222
 
257
- &:after {
258
- background: govuk-colour("mid-grey");
259
- }
223
+ &:after {
224
+ background: govuk-colour("mid-grey");
260
225
  }
226
+ }
261
227
 
262
- &:focus:not(:focus-visible) {
263
- .gem-c-layout-super-navigation-header__navigation-item-link-inner {
264
- border-color: $button-pipe-colour;
265
- }
228
+ @include focus-and-focus-visible {
229
+ .gem-c-layout-super-navigation-header__navigation-item-link-inner {
230
+ border-color: $govuk-focus-colour;
231
+ background: $govuk-focus-colour;
266
232
  }
267
233
 
268
- @include focus-and-focus-visible {
269
- .gem-c-layout-super-navigation-header__navigation-item-link-inner {
270
- border-color: $govuk-focus-colour;
271
- }
272
-
273
- &,
274
- &:hover {
275
- box-shadow: none;
276
- color: $govuk-focus-text-colour;
234
+ &,
235
+ &:hover {
236
+ box-shadow: none;
237
+ color: $govuk-focus-text-colour;
277
238
 
278
- &:after {
279
- background: $govuk-focus-text-colour;
280
- }
239
+ &:after {
240
+ background: $govuk-focus-text-colour;
281
241
  }
282
242
  }
243
+ }
283
244
 
284
- @include focus-not-focus-visible {
285
- &,
286
- &:hover {
287
- text-decoration: none;
288
- }
289
-
290
- & {
291
- color: govuk-colour("white");
292
- }
245
+ @include focus-not-focus-visible {
246
+ &,
247
+ &:hover {
248
+ text-decoration: none;
249
+ }
293
250
 
294
- &:hover {
295
- color: govuk-colour("mid-grey");
251
+ & {
252
+ color: govuk-colour("white");
253
+ }
296
254
 
297
- &:after {
298
- background: govuk-colour("mid-grey");
299
- }
300
- }
255
+ &:hover {
256
+ color: govuk-colour("mid-grey");
301
257
 
302
258
  &:after {
303
- background: none;
259
+ background: govuk-colour("mid-grey");
304
260
  }
305
261
  }
306
262
 
307
263
  &:after {
308
- @include pseudo-underline($left: $after-link-padding, $right: $after-link-padding, $width: calc(100% - $after-link-padding));
264
+ background: none;
309
265
  }
266
+ }
310
267
 
311
- .js-module-initialised & {
312
- // If js is initialised, we are hiding the links and
313
- // making the buttons visible instead. This means we have
314
- // to remove the padding added to make the links vertically
315
- // aligned, as the buttons are styled vertically aligned by
316
- // default.
268
+ .js-module-initialised & {
269
+ // If js is initialised, we are hiding the links and
270
+ // making the buttons visible instead. This means we have
271
+ // to remove the padding added to make the links vertically
272
+ // aligned, as the buttons are styled vertically aligned by
273
+ // default.
317
274
 
318
- padding: 0;
319
- margin: 0;
275
+ padding: 0;
276
+ margin: 0;
320
277
 
321
- &:after {
322
- @include pseudo-underline($left: $after-button-padding-left, $right: $after-button-padding-right, $width: calc(100% - $after-button-padding-left));
323
- }
278
+ &:after {
279
+ @include pseudo-underline($left: $after-button-padding-left, $right: $after-button-padding-right, $width: 100%);
324
280
  }
325
-
326
- // stylelint-enable max-nesting-depth
327
281
  }
282
+ // stylelint-enable max-nesting-depth
328
283
  }
329
284
 
330
285
  &:after {
@@ -332,239 +287,79 @@ $after-button-padding-left: govuk-spacing(5);
332
287
  }
333
288
  }
334
289
 
335
- .gem-c-layout-super-navigation-header__navigation-item-link,
336
- .gem-c-layout-super-navigation-header__navigation-second-toggle-button {
290
+ .gem-c-layout-super-navigation-header__navigation-item-link {
337
291
  @include govuk-media-query($from: "desktop") {
338
292
  padding: govuk-spacing(3) 0;
339
293
  }
340
- }
341
294
 
342
- .gem-c-layout-super-navigation-header__navigation-item-link {
343
295
  .js-module-initialised & {
344
296
  margin-left: govuk-spacing(4);
345
297
  @include govuk-link-style-no-underline;
346
298
  }
347
299
  }
348
300
 
349
- .gem-c-layout-super-navigation-header__navigation-second-toggle-button {
350
- background: none;
351
- border: 0;
352
- color: $govuk-link-colour;
353
- cursor: pointer;
354
- padding: 0;
301
+ .gem-c-layout-super-navigation-header__navigation-item-link-inner {
302
+ background-color: govuk-colour("black");
303
+ border-left: 1px solid $button-pipe-colour;
304
+ padding: govuk-spacing(1) $after-link-padding;
305
+ }
355
306
 
356
- @include focus-not-focus-visible {
357
- .gem-c-layout-super-navigation-header__navigation-second-toggle-button-inner {
358
- &:before {
359
- @include chevron($govuk-link-colour);
360
- }
361
- }
307
+ // Search link and dropdown.
308
+ .gem-c-layout-super-navigation-header__search-item-link {
309
+ padding: govuk-spacing(3);
310
+
311
+ @include govuk-media-query($until: "desktop") {
312
+ margin: 0;
362
313
  }
363
314
 
364
- @include focus-not-focus-visible {
315
+ &:link,
316
+ &:visited {
317
+ background: $govuk-brand-colour;
318
+
365
319
  &:hover {
366
- .gem-c-layout-super-navigation-header__navigation-second-toggle-button-inner {
367
- &:before {
368
- @include chevron($govuk-link-hover-colour, true);
369
- }
320
+ background: govuk-colour("black");
321
+
322
+ &:before {
323
+ left: 0;
324
+ right: 0;
370
325
  }
371
326
  }
372
- }
373
327
 
374
- &:focus {
375
- .gem-c-layout-super-navigation-header__navigation-second-toggle-button-inner {
328
+ &:focus {
329
+ background: $govuk-focus-colour;
330
+
376
331
  &:before {
377
- @include chevron($govuk-focus-text-colour, true);
332
+ content: none;
378
333
  }
379
334
  }
380
- }
381
335
 
382
- @include govuk-media-query($from: "desktop") {
383
336
  &:after {
384
- @include pseudo-underline($left: govuk-spacing(5), $right: govuk-spacing(6));
337
+ left: 0;
338
+ right: 0;
339
+ width: 100%;
385
340
  }
386
341
 
387
342
  @include focus-not-focus-visible {
388
- color: govuk-colour("white");
389
- float: left;
390
- font-size: 16px;
391
- font-size: govuk-px-to-rem(16px);
392
- height: $black-bar-height;
393
- position: relative;
394
- text-decoration: none;
395
-
396
- .gem-c-layout-super-navigation-header__navigation-second-toggle-button-inner {
397
- border-color: $button-pipe-colour;
343
+ background: $govuk-link-colour;
398
344
 
399
- &:before {
400
- @include chevron(govuk-colour("white"), true);
401
- }
402
- }
403
- }
404
- @include focus-not-focus-visible {
405
345
  &:hover {
406
- color: govuk-colour("mid-grey");
407
- text-decoration: none;
408
-
409
- &:after {
410
- background: govuk-colour("mid-grey");
411
- }
412
-
413
- .gem-c-layout-super-navigation-header__navigation-second-toggle-button-inner {
414
- &:before {
415
- @include chevron(govuk-colour("mid-grey"), true);
416
- }
417
- }
346
+ background: govuk-colour("black");
418
347
  }
419
348
  }
420
349
 
421
350
  @include focus-and-focus-visible {
422
- color: $govuk-focus-text-colour;
423
-
424
- &:after {
425
- background: $govuk-focus-text-colour;
426
- }
427
-
428
- .gem-c-layout-super-navigation-header__navigation-second-toggle-button-inner {
429
- border-color: $govuk-focus-colour;
430
-
431
- &:before {
432
- @include chevron($govuk-focus-text-colour, true);
433
- }
434
- }
435
- }
436
- }
437
-
438
- &.gem-c-layout-super-navigation-header__open-button {
439
- @include focus-not-focus-visible {
440
- .gem-c-layout-super-navigation-header__navigation-second-toggle-button-inner {
441
- &:before {
442
- @include prefixed-transform($rotate: 225deg, $translateY: 1px);
443
- }
444
- }
445
- }
446
-
447
- @include govuk-media-query($from: "desktop") {
448
- @include focus-not-focus-visible {
449
- background: govuk-colour("light-grey");
450
- color: $govuk-link-colour;
451
-
452
- // stylelint-disable max-nesting-depth
453
- .gem-c-layout-super-navigation-header__navigation-second-toggle-button-inner {
454
- border-color: govuk-colour("light-grey");
455
-
456
- &:before {
457
- @include chevron($govuk-link-colour, true);
458
- }
459
- }
460
-
461
- &:after {
462
- background-color: $govuk-link-colour;
463
- }
464
- }
465
-
466
- @include focus-and-focus-visible {
467
- background-color: $govuk-focus-colour;
468
- color: $govuk-focus-text-colour;
469
-
470
- .gem-c-layout-super-navigation-header__navigation-second-toggle-button-inner {
471
- border-color: $govuk-focus-colour;
472
-
473
- &:before {
474
- @include chevron($govuk-focus-text-colour, true);
475
- }
476
- }
477
-
478
- &:after {
479
- background: $govuk-focus-text-colour;
480
- }
481
- }
482
- }
483
- }
484
- // stylelint-enable max-nesting-depth
485
-
486
- .js-module-initialised & {
487
- @include govuk-link-style-no-underline;
488
- }
489
- }
490
-
491
- .gem-c-layout-super-navigation-header__navigation-item-link-inner {
492
- @include govuk-media-query($from: "desktop") {
493
- // links have different left padding to the button as
494
- // they do not have the 5px wide caret pseudo element
495
- padding: govuk-spacing(1) $after-link-padding;
496
- }
497
- }
498
-
499
- .gem-c-layout-super-navigation-header__navigation-second-toggle-button-inner {
500
- @include govuk-media-query($from: "desktop") {
501
- display: inline-block;
502
- padding: govuk-spacing(1) $after-button-padding-right govuk-spacing(1) $after-button-padding-left;
503
- }
504
- }
505
-
506
- // Search link and dropdown.
507
- .gem-c-layout-super-navigation-header__search-item-link {
508
- @include govuk-media-query($from: "desktop") {
509
- padding: govuk-spacing(3);
510
- }
511
-
512
- &:link,
513
- &:visited {
514
- @include govuk-media-query($from: "desktop") {
515
- background: $govuk-brand-colour;
516
-
517
351
  &:hover {
518
- background: govuk-colour("black");
519
-
520
- &:before {
521
- left: 0;
522
- right: 0;
523
- }
524
- }
525
-
526
- &:focus {
527
352
  background: $govuk-focus-colour;
528
-
529
- &:before {
530
- content: none;
531
- }
532
- }
533
-
534
- &:after {
535
- left: 0;
536
- right: 0;
537
- width: 100%;
538
353
  }
539
354
 
540
- @include focus-not-focus-visible {
541
- background: $govuk-link-colour;
542
-
543
- &:hover {
544
- background: govuk-colour("black");
545
- }
546
- }
547
-
548
- @include focus-and-focus-visible {
549
- &:hover {
550
- background: $govuk-focus-colour;
551
- }
552
-
553
- &:after,
554
- &:hover:after {
555
- background: $govuk-focus-colour;
556
- }
355
+ &:after,
356
+ &:hover:after {
357
+ background: $govuk-focus-colour;
557
358
  }
558
359
  }
559
360
  }
560
361
  }
561
362
 
562
- .gem-c-layout-super-navigation-header__search-item-link-text {
563
- @include govuk-media-query($from: "desktop") {
564
- @include govuk-visually-hidden;
565
- }
566
- }
567
-
568
363
  .gem-c-layout-super-navigation-header__search-item-link-icon,
569
364
  .gem-c-layout-super-navigation-header__search-toggle-button-link-icon {
570
365
  height: $icon-size;
@@ -572,12 +367,6 @@ $after-button-padding-left: govuk-spacing(5);
572
367
  width: $icon-size;
573
368
  }
574
369
 
575
- .gem-c-layout-super-navigation-header__search-item-link-icon {
576
- @include govuk-media-query($until: "desktop") {
577
- @include govuk-visually-hidden;
578
- }
579
- }
580
-
581
370
  // Search and popular content dropdown.
582
371
  .gem-c-layout-super-navigation-header__search-and-popular {
583
372
  display: none;
@@ -595,6 +384,24 @@ $after-button-padding-left: govuk-spacing(5);
595
384
  @include govuk-link-style-no-visited-state;
596
385
  @include govuk-link-style-no-underline;
597
386
 
387
+ &:after {
388
+ @include pseudo-underline($left: $after-button-padding-left, $right: $after-button-padding-right);
389
+ }
390
+
391
+ &:hover {
392
+ color: govuk-colour("mid-grey");
393
+
394
+ &:after {
395
+ background: govuk-colour("mid-grey");
396
+ }
397
+
398
+ .gem-c-layout-super-navigation-header__navigation-top-toggle-button-inner {
399
+ &:before {
400
+ border-color: govuk-colour("mid-grey");
401
+ }
402
+ }
403
+ }
404
+
598
405
  font-size: 16px;
599
406
  font-size: govuk-px-to-rem(16px);
600
407
  font-weight: 700;
@@ -605,24 +412,56 @@ $after-button-padding-left: govuk-spacing(5);
605
412
  cursor: pointer;
606
413
  height: $black-bar-height;
607
414
  padding: 0;
608
- margin: 0;
609
- position: absolute;
610
- right: (($search-width-or-height - govuk-spacing(3)) - 1px); // width of the search button (50px) - 15px - 1px to create an overlap between buttons and stop the border appearing to hang off the buttons when they're focused/open
611
- top: 0;
612
- z-index: 10;
415
+ position: relative;
416
+ margin: 0 -3px 0 0; // overlap with the search button to hide right border on mobile
417
+ vertical-align: top;
418
+
419
+ @include govuk-media-query($from: "desktop") {
420
+ background: govuk-colour("black");
421
+ display: block;
422
+ float: left;
423
+ margin: 0;
424
+ padding: 0;
425
+ position: relative;
426
+ right: 0;
427
+ }
428
+
429
+ &:focus-visible {
430
+ &:hover {
431
+ .gem-c-layout-super-navigation-header__navigation-top-toggle-button-inner {
432
+ color: govuk-colour("black");
433
+
434
+ &:after {
435
+ background: govuk-colour("black");
436
+ }
437
+
438
+ &:before {
439
+ @include chevron(govuk-colour("black"), true);
440
+ }
441
+ }
442
+ }
443
+ }
613
444
 
614
445
  @include focus-and-focus-visible {
615
446
  @include govuk-focused-text;
447
+
616
448
  box-shadow: none;
617
449
 
450
+ &:hover {
451
+ &:after {
452
+ background-color: govuk-colour("black");
453
+ }
454
+ }
455
+
456
+ &:after {
457
+ background-color: govuk-colour("black");
458
+ }
459
+
618
460
  .gem-c-layout-super-navigation-header__navigation-top-toggle-button-inner {
619
461
  border-color: $govuk-focus-colour;
620
- color: govuk-colour("black");
621
462
 
622
- @include govuk-media-query($from: 360px) {
623
- &:before {
624
- @include chevron(govuk-colour("black"), true);
625
- }
463
+ &:before {
464
+ @include chevron(govuk-colour("black"), true);
626
465
  }
627
466
  }
628
467
  }
@@ -632,10 +471,24 @@ $after-button-padding-left: govuk-spacing(5);
632
471
  @include focus-not-focus-visible {
633
472
  background: none;
634
473
  box-shadow: none;
474
+ color: govuk-colour("white");
475
+
476
+ &:hover {
477
+ .gem-c-layout-super-navigation-header__navigation-top-toggle-button-inner {
478
+ &:before {
479
+ @include chevron(govuk-colour("mid-grey"), true);
480
+ }
481
+
482
+ color: govuk-colour("mid-grey");
483
+ }
484
+
485
+ &:after {
486
+ background: govuk-colour("mid-grey");
487
+ }
488
+ }
635
489
 
636
490
  .gem-c-layout-super-navigation-header__navigation-top-toggle-button-inner {
637
491
  border-color: $button-pipe-colour;
638
- color: govuk-colour("white");
639
492
 
640
493
  @include govuk-media-query($from: 360px) {
641
494
  &:before {
@@ -653,7 +506,7 @@ $after-button-padding-left: govuk-spacing(5);
653
506
  box-shadow: none;
654
507
 
655
508
  &:after {
656
- background-color: $govuk-focus-colour;
509
+ background-color: govuk-colour("black");
657
510
  }
658
511
 
659
512
  .gem-c-layout-super-navigation-header__navigation-top-toggle-button-inner {
@@ -697,7 +550,11 @@ $after-button-padding-left: govuk-spacing(5);
697
550
  border-left: 1px solid govuk-colour("white");
698
551
  border-right: 1px solid govuk-colour("white");
699
552
  margin: 0;
700
- padding: govuk-spacing(2) govuk-spacing(4);
553
+ padding: govuk-spacing(1) govuk-spacing(4);
554
+
555
+ @include govuk-media-query($from: "desktop") {
556
+ border-right: 0;
557
+ }
701
558
 
702
559
  @include govuk-media-query($from: 360px) {
703
560
  &:before {
@@ -715,9 +572,7 @@ $after-button-padding-left: govuk-spacing(5);
715
572
  cursor: pointer;
716
573
  height: $search-width-or-height;
717
574
  padding: govuk-spacing(3);
718
- position: absolute;
719
- right: (0 - govuk-spacing(3));
720
- top: 0;
575
+ position: relative;
721
576
  width: $search-width-or-height;
722
577
 
723
578
  @include focus-and-focus-visible {
@@ -735,6 +590,8 @@ $after-button-padding-left: govuk-spacing(5);
735
590
  }
736
591
 
737
592
  @include govuk-media-query($from: "desktop") {
593
+ border: 0;
594
+ margin: 0;
738
595
  right: 0;
739
596
 
740
597
  @include focus-not-focus-visible {
@@ -776,6 +633,7 @@ $after-button-padding-left: govuk-spacing(5);
776
633
  background: govuk-colour("light-grey");
777
634
  border-bottom-color: govuk-colour("light-grey");
778
635
  color: govuk-colour("light-grey");
636
+ outline: 1px solid govuk-colour("light-grey"); // overlap the border of the nav menu so it won't appear when menu open
779
637
  }
780
638
  }
781
639
  }
@@ -802,11 +660,21 @@ $after-button-padding-left: govuk-spacing(5);
802
660
  // Dropdown menu.
803
661
  .gem-c-layout-super-navigation-header__navigation-dropdown-menu {
804
662
  background: govuk-colour("light-grey");
663
+ border-bottom: 1px govuk-colour("mid-grey") solid;
664
+ top: govuk-spacing(8);
665
+ left: govuk-spacing(-3);
666
+ padding: 0 govuk-spacing(3);
667
+ position: absolute;
668
+ right: govuk-spacing(-3);
669
+
670
+ @include govuk-media-query($from: "tablet") {
671
+ padding: 0 govuk-spacing(6);
672
+ left: govuk-spacing(-6);
673
+ right: govuk-spacing(-6);
674
+ }
805
675
 
806
676
  @include govuk-media-query($from: "desktop") {
807
- border-bottom: 1px govuk-colour("mid-grey") solid;
808
677
  left: 0;
809
- position: absolute;
810
678
  right: 0;
811
679
  }
812
680
  }
@@ -824,23 +692,27 @@ $after-button-padding-left: govuk-spacing(5);
824
692
  // Dropdown menu items.
825
693
  .gem-c-layout-super-navigation-header__dropdown-list-item {
826
694
  box-sizing: border-box;
827
- padding: 0 0 govuk-spacing(4) 0;
695
+ padding: 0 0 govuk-spacing(5) 0;
828
696
  position: relative;
697
+ @include govuk-media-query($from: "desktop") {
698
+ padding: 0 0 govuk-spacing(4) 0;
699
+ }
829
700
  }
830
701
 
831
702
  // Navigation menu items.
832
703
  .gem-c-layout-super-navigation-header__navigation-second-items {
704
+
833
705
  list-style: none;
834
706
  margin: 0;
835
- padding: govuk-spacing(6) govuk-spacing(4);
707
+ padding: govuk-spacing(3) govuk-spacing(5) govuk-spacing(5) 0;
836
708
 
837
709
  & > li {
838
710
  margin: 0;
839
711
  }
840
712
 
841
713
  @include govuk-media-query($from: "desktop") {
842
- margin: 0 (0 - govuk-spacing(3));
843
- padding: govuk-spacing(7) 0 govuk-spacing(8) 0;
714
+ margin: 0 (0 - govuk-spacing(3)) govuk-spacing(9);
715
+ padding: govuk-spacing(2) 0 0 0;
844
716
 
845
717
  & > li {
846
718
  margin: 0 govuk-spacing(3);
@@ -848,21 +720,21 @@ $after-button-padding-left: govuk-spacing(5);
848
720
  }
849
721
  }
850
722
 
851
- .gem-c-layout-super-navigation-header__navigation-second-items--topics {
852
- @include govuk-media-query($from: "desktop") {
853
- @include columns($items: 17, $columns: 2, $selector: "li", $flow: column);
723
+ .gem-c-layout-super-navigation-header__column--government-activity {
724
+ position: relative;
725
+
726
+ @include govuk-media-query($until: "desktop") {
727
+ margin-top: govuk-spacing(6);
854
728
  }
855
729
  }
856
730
 
857
- .gem-c-layout-super-navigation-header__navigation-second-items--government-activity {
858
- @include govuk-media-query($from: "desktop") {
859
- @include columns($items: 6, $columns: 2, $selector: "li", $flow: column);
860
- padding-bottom: 0;
731
+ .gem-c-layout-super-navigation-header__navigation-second-items--topics {
732
+ @include govuk-media-query($until: "desktop") {
733
+ border-bottom: 1px solid govuk-colour("mid-grey");
734
+ }
861
735
 
862
- & > li {
863
- box-sizing: border-box;
864
- padding-bottom: govuk-spacing(4);
865
- }
736
+ @include govuk-media-query($from: "desktop") {
737
+ @include columns($items: 17, $columns: 2, $selector: "li", $flow: column);
866
738
  }
867
739
  }
868
740
 
@@ -870,10 +742,6 @@ $after-button-padding-left: govuk-spacing(5);
870
742
  font-size: 16px;
871
743
  font-size: govuk-px-to-rem(16px);
872
744
 
873
- &:after {
874
- @include make-selectable-area-bigger;
875
- }
876
-
877
745
  @include govuk-media-query($from: "desktop") {
878
746
  font-weight: bold;
879
747
  padding: 0;
@@ -888,52 +756,10 @@ $after-button-padding-left: govuk-spacing(5);
888
756
  font-size: 16px;
889
757
  font-size: govuk-px-to-rem(16px);
890
758
  font-weight: bold;
891
- }
892
-
893
- // Dropdown menu footer links.
894
- .gem-c-layout-super-navigation-header__navigation-second-footer-break {
895
- @include govuk-media-query($until: "desktop") {
896
- display: none;
897
- }
898
- }
899
-
900
- .gem-c-layout-super-navigation-header__navigation-second-footer-list {
901
- list-style: none;
902
- padding: 0 0 govuk-spacing(8) govuk-spacing(4);
903
-
904
- @include govuk-media-query($from: "desktop") {
905
- @include columns($items: 2, $columns: 2, $selector: "li");
906
- margin: 0 (0 - govuk-spacing(3));
907
- padding: govuk-spacing(6) 0 govuk-spacing(7) 0;
908
- }
909
- }
910
-
911
- .gem-c-layout-super-navigation-header__navigation-second-footer-item {
912
- padding: govuk-spacing(2) 0;
913
- position: relative;
914
-
915
- @include govuk-media-query($from: "desktop") {
916
- padding: 0 govuk-spacing(3);
917
- }
918
- }
919
-
920
- .gem-c-layout-super-navigation-header__navigation-second-footer-link {
921
- display: inline-block;
922
- font-size: 16px;
923
- font-size: govuk-px-to-rem(16px);
924
- margin: govuk-spacing(1) 0;
925
759
 
926
760
  &:after {
927
761
  @include make-selectable-area-bigger;
928
- }
929
-
930
- @include govuk-media-query($from: "desktop") {
931
- display: inline;
932
- padding: 0;
933
-
934
- &:after {
935
- content: none;
936
- }
762
+ height: calc(100% - 20px);
937
763
  }
938
764
  }
939
765
 
@@ -947,21 +773,22 @@ $after-button-padding-left: govuk-spacing(5);
947
773
 
948
774
  // Search dropdown.
949
775
  .gem-c-layout-super-navigation-header__search-items {
950
- background: govuk-colour("light-grey");
951
- margin: 0 (0 - govuk-spacing(3));
776
+ .js-module-initialised & {
777
+ margin: 0 (0 - govuk-spacing(3));
778
+ position: absolute;
952
779
 
953
- @include govuk-media-query($from: "tablet") {
954
- margin: 0 (0 - govuk-spacing(6));
780
+ @include govuk-media-query($from: "tablet") {
781
+ margin: 0 (0 - govuk-spacing(6));
782
+ }
955
783
  }
956
784
 
785
+ background: govuk-colour("light-grey");
786
+ left: 0;
787
+ right: 0;
788
+ z-index: 999;
789
+
957
790
  @include govuk-media-query($from: "desktop") {
958
791
  margin: 0;
959
-
960
- .js-module-initialised & {
961
- left: 0;
962
- position: absolute;
963
- right: 0;
964
- }
965
792
  }
966
793
  }
967
794
 
@@ -992,14 +819,22 @@ $after-button-padding-left: govuk-spacing(5);
992
819
  }
993
820
  }
994
821
 
995
- // To be used with .govuk-width-container - we only need the margins from
996
- // desktop onwards.
997
822
  .gem-c-layout-super-navigation-header__width-container {
998
823
  @include govuk-media-query($until: "desktop") {
999
824
  margin: 0;
825
+ margin-top: govuk-spacing(6);
826
+ }
827
+
828
+ @include govuk-media-query($from: "desktop") {
829
+ margin: govuk-spacing(5) auto 0;
830
+ max-width: 960px;
1000
831
  }
1001
832
  }
1002
833
 
834
+ .gem-c-layout-super-navigation-header__column-header {
835
+ font-size: 24px;
836
+ }
837
+
1003
838
  @include govuk-media-query($media-type: print) {
1004
839
  .gem-c-layout-super-navigation-header__content {
1005
840
  display: none;