govuk_publishing_components 27.10.0 → 27.10.4

Sign up to get free protection for your applications and to get access to all the features.
@@ -92,169 +92,72 @@
92
92
  }
93
93
  }
94
94
 
95
- $search-icon-size: 20px;
95
+ $icon-size: 20px;
96
+ $chevron-indent-spacing: 7px;
97
+
98
+ @mixin chevron($colour, $update: false) {
99
+ @if ($update == true) {
100
+ border-bottom-color: $colour;
101
+ border-right-color: $colour;
102
+ } @else {
103
+ border-bottom: 3px solid $colour;
104
+ border-right: 3px solid $colour;
105
+ content: " ";
106
+ display: inline-block;
107
+ height: 8px;
108
+ margin: 0 8px 0 2px;
109
+ transform: translateY(-35%) rotate(45deg);
110
+ vertical-align: middle;
111
+ width: 8px;
112
+ }
113
+ }
96
114
 
97
- @mixin chevron($colour) {
98
- border-bottom: 3px solid govuk-colour($colour);
99
- border-right: 3px solid govuk-colour($colour);
115
+ @mixin make-selectable-area-bigger {
116
+ background: none;
117
+ bottom: 0;
100
118
  content: " ";
101
- display: inline-block;
102
- height: 8px;
103
- margin: 0 8px 0 2px;
104
- transform: translateY(-35%) rotate(45deg);
105
- vertical-align: middle;
106
- width: 8px;
119
+ left: 0;
120
+ position: absolute;
121
+ right: 0;
122
+ top: 0;
107
123
  }
108
124
 
109
- %top-level-navigation-link-base {
125
+ @mixin pseudo-underline {
110
126
  background: none;
111
- @include govuk-font($size: 24, $weight: bold, $line-height: 20px);
112
- border: 0;
113
- box-sizing: border-box;
114
- display: block;
115
- margin: 0;
116
- padding: govuk-spacing(6) govuk-spacing(3);
117
- position: relative;
118
- text-decoration: none;
119
-
120
- &,
121
- &:link,
122
- &:visited {
123
- color: $govuk-link-colour;
124
- }
127
+ bottom: 0;
128
+ content: " ";
129
+ height: govuk-spacing(1);
130
+ left: govuk-spacing(4);
131
+ position: absolute;
132
+ right: govuk-spacing(4);
133
+ top: auto;
134
+ }
125
135
 
136
+ @mixin focus-and-focus-visible {
126
137
  &:focus {
127
- background: $govuk-focus-colour;
128
- border-color: $govuk-focus-text-colour;
129
- border-top-color: $govuk-focus-colour;
130
- color: $govuk-focus-text-colour;
131
- outline: 3px solid transparent;
132
- box-shadow: none;
133
- z-index: 1;
138
+ @content;
134
139
  }
135
140
 
136
- @include govuk-media-query($from: "tablet") {
137
- padding: govuk-spacing(6);
138
- }
139
-
140
- @include govuk-media-query($from: "desktop") {
141
- @include govuk-font($size: 16, $weight: false, $line-height: 20px);
142
- color: govuk-colour("white");
143
- display: inherit;
144
- height: govuk-spacing(9);
145
- padding: govuk-spacing(4);
146
-
147
- &:after {
148
- background: govuk-colour("black");
149
- bottom: 0;
150
- content: " ";
151
- display: block;
152
- height: govuk-spacing(1);
153
- left: govuk-spacing(4);
154
- position: absolute;
155
- right: govuk-spacing(4);
156
- }
157
-
158
- &:hover {
159
- background: govuk-colour("black");
160
- color: govuk-colour("mid-grey");
161
-
162
- &:after {
163
- background-color: govuk-colour("mid-grey");
164
- }
165
- }
166
-
167
- &:focus {
168
- @include govuk-focused-text;
169
- box-shadow: none;
170
-
171
- &:after {
172
- background-color: $govuk-focus-text-colour;
173
- }
174
- }
175
-
176
- &,
177
- &:visited {
178
- color: govuk-colour("white");
179
- }
180
- }
181
- }
182
-
183
- %toggle-base {
184
- @extend %top-level-navigation-link-base;
185
- @include govuk-font($size: 16, $weight: false, $line-height: 20px);
186
- border-radius: 0;
187
- cursor: pointer;
188
- padding: govuk-spacing(4);
189
- right: 0;
190
- top: 0;
191
-
192
- @include govuk-media-query($from: "desktop") {
193
- border: none;
141
+ &:focus-visible {
142
+ @content;
194
143
  }
195
144
  }
196
145
 
197
- %top-level-navigation-toggle-base {
198
- @extend %toggle-base;
199
- border-top: 1px solid govuk-colour("black");
200
- height: govuk-spacing(9);
201
-
202
- &:focus {
203
- border-color: $govuk-focus-colour;
146
+ @mixin focus-not-focus-visible {
147
+ & {
148
+ @content;
204
149
  }
205
150
 
206
- &.gem-c-layout-super-navigation-header__open-button {
207
- border-left-color: govuk-colour("black");
208
- border-right-color: govuk-colour("black");
209
-
210
- &,
211
- &:hover {
212
- background: govuk-colour("light-grey");
213
- color: govuk-colour("light-grey");
214
- }
215
-
216
- &:focus {
217
- color: $govuk-focus-colour;
218
- background: $govuk-focus-colour;
219
- }
220
-
221
- &:before,
222
- &:after {
223
- $width: govuk-spacing(4);
224
- $height: 4px;
225
-
226
- border: none;
227
- content: " ";
228
- display: block;
229
- margin: 0;
230
- width: $width;
231
- height: $height;
232
- background: govuk-colour("black");
233
- transform-origin: center;
234
- position: absolute;
235
- top: calc(50% - #{$height / 2});
236
- left: calc(50% - #{$width / 2});
237
- }
238
-
239
- &:before {
240
- transform: rotate(45deg);
241
- }
242
-
243
- &:after {
244
- transform: rotate(-45deg);
245
- }
151
+ &:focus:not(:focus-visible) {
152
+ @content;
246
153
  }
247
154
  }
248
155
 
249
- %search-icon {
250
- height: $search-icon-size;
251
- pointer-events: none;
252
- width: $search-icon-size;
253
- }
254
-
255
156
  // Header layout - black bar and logo.
256
157
  .gem-c-layout-super-navigation-header {
257
158
  background: govuk-colour("black");
159
+ border-top: 1px solid govuk-colour("black");
160
+ margin-top: -1px;
258
161
  position: relative;
259
162
 
260
163
  .lte-ie8 & {
@@ -276,8 +179,8 @@ $search-icon-size: 20px;
276
179
 
277
180
  .gem-c-layout-super-navigation-header__header-logo {
278
181
  height: govuk-spacing(6);
279
- padding-top: govuk-spacing(3);
280
182
  padding-bottom: govuk-spacing(3);
183
+ padding-top: govuk-spacing(3);
281
184
 
282
185
  @include govuk-media-query($from: "desktop") {
283
186
  display: block;
@@ -292,6 +195,10 @@ $search-icon-size: 20px;
292
195
  }
293
196
  }
294
197
 
198
+ .gem-c-layout-super-navigation-header__navigation-toggle-wrapper {
199
+ position: relative;
200
+ }
201
+
295
202
  // Top level navigation and search.
296
203
  .gem-c-layout-super-navigation-header__navigation-items,
297
204
  .gem-c-layout-super-navigation-header__search-items {
@@ -314,6 +221,10 @@ $search-icon-size: 20px;
314
221
  }
315
222
 
316
223
  .gem-c-layout-super-navigation-header__navigation-items {
224
+ @include govuk-media-query($from: "desktop") {
225
+ display: inline-block;
226
+ }
227
+
317
228
  .js-module-initialised & {
318
229
  padding: 0 0 govuk-spacing(9) 0;
319
230
 
@@ -325,94 +236,290 @@ $search-icon-size: 20px;
325
236
 
326
237
  .gem-c-layout-super-navigation-header__navigation-item,
327
238
  .gem-c-layout-super-navigation-header__search-item {
328
- margin-right: 0;
329
- padding: 0;
239
+ display: block;
240
+ margin: 0 govuk-spacing(3);
241
+ position: relative;
242
+
243
+ @include govuk-media-query($from: "tablet") {
244
+ margin: 0 govuk-spacing(6);
245
+ }
330
246
 
331
247
  @include govuk-media-query($from: "desktop") {
332
- border-bottom: none;
248
+ background: govuk-colour("black");
249
+ display: block;
333
250
  float: left;
251
+ margin: 0;
334
252
  padding: 0;
253
+ position: static;
335
254
  }
336
255
  }
337
256
 
338
257
  .gem-c-layout-super-navigation-header__navigation-item {
339
- &:after {
340
- background-color: $govuk-border-colour;
341
- content: " ";
342
- display: block;
343
- height: 1px;
344
- left: 0;
345
- right: 0;
346
- position: absolute;
347
- }
258
+ border-bottom: 1px solid $govuk-border-colour;
348
259
 
349
260
  @include govuk-media-query($from: "desktop") {
350
- &:after {
351
- content: none;
352
- }
261
+ border-bottom: 0;
353
262
  }
354
263
  }
355
264
 
356
- // Top level navigation links.
357
- .gem-c-layout-super-navigation-header__navigation-item-link {
358
- @extend %top-level-navigation-link-base;
265
+ // Top level navigation links and search link.
266
+ .gem-c-layout-super-navigation-header__navigation-item-link,
267
+ .gem-c-layout-super-navigation-header__search-item-link,
268
+ .gem-c-layout-super-navigation-header__navigation-second-toggle-button {
269
+ @include govuk-link-common;
270
+ @include govuk-link-style-no-visited-state;
271
+
272
+ display: inline-block;
273
+ font-size: 19px;
274
+ @if $govuk-typography-use-rem {
275
+ font-size: govuk-px-to-rem(19px);
276
+ }
277
+ font-weight: bold;
278
+ margin: govuk-spacing(3) 0;
279
+
280
+ @include govuk-media-query($from: "desktop") {
281
+ display: block;
282
+ margin: 0;
283
+ }
284
+
285
+ &:hover {
286
+ @include govuk-link-hover-decoration;
287
+ }
359
288
 
360
289
  &,
361
- &:link, // 👈 required to override govuk-template
290
+ &:link,
362
291
  &:visited {
363
- color: $govuk-link-colour;
292
+ @include focus-and-focus-visible {
293
+ @include govuk-focused-text;
294
+ }
364
295
 
365
- &:hover {
366
- color: $govuk-link-hover-colour;
296
+ // Undoes the :focus styles *only* for browsers that support :focus-visible.
297
+ // See https://www.tpgi.com/focus-visible-and-backwards-compatibility/
298
+ &:focus:not(:focus-visible) {
299
+ background: none;
300
+ box-shadow: none;
301
+ color: $govuk-link-colour;
367
302
 
368
- @include govuk-media-query($from: "desktop") {
369
- color: govuk-colour("mid-grey");
303
+ &:hover {
304
+ @include govuk-link-decoration;
305
+ @include govuk-link-hover-decoration;
306
+ color: $govuk-link-hover-colour;
370
307
  }
371
308
  }
372
309
 
373
- &:focus {
374
- color: $govuk-focus-text-colour;
310
+ &:after {
311
+ @include make-selectable-area-bigger;
375
312
  }
376
313
 
377
314
  @include govuk-media-query($from: "desktop") {
378
- color: govuk-colour("white");
315
+ float: left;
316
+ font-size: 16px;
317
+
318
+ // stylelint-disable max-nesting-depth
319
+ @if $govuk-typography-use-rem {
320
+ font-size: govuk-px-to-rem(16px);
321
+ }
322
+ // stylelint-enable max-nesting-depth
323
+
324
+ height: govuk-spacing(4);
325
+ padding: govuk-spacing(4);
326
+ position: relative;
327
+
328
+ &:before {
329
+ @include chevron(govuk-colour("white"), true);
330
+ }
331
+
332
+ &:hover {
333
+ color: govuk-colour("mid-grey");
334
+
335
+ &:after {
336
+ background: govuk-colour("mid-grey");
337
+ }
338
+ }
339
+
340
+ // stylelint-disable max-nesting-depth
341
+ @include focus-and-focus-visible {
342
+ box-shadow: none;
343
+ color: $govuk-focus-text-colour;
344
+
345
+ &:after {
346
+ background: $govuk-focus-text-colour;
347
+ }
348
+ }
349
+
350
+ @include focus-not-focus-visible {
351
+ &,
352
+ &:hover {
353
+ color: govuk-colour("white");
354
+ text-decoration: none;
355
+ }
356
+ }
357
+ // stylelint-enable max-nesting-depth
358
+
359
+ &:focus:not(:focus-visible) {
360
+ &:after {
361
+ background: none;
362
+ }
363
+ }
364
+
365
+ &:after {
366
+ @include pseudo-underline;
367
+ }
379
368
  }
380
369
  }
381
370
 
382
- // This :link:focus selector is required to override the `govuk-template`
383
- // defaults.
384
- &:link:focus {
385
- color: $govuk-focus-text-colour;
371
+ &:after {
372
+ @include make-selectable-area-bigger;
386
373
  }
374
+ }
387
375
 
376
+ .gem-c-layout-super-navigation-header__navigation-item-link {
388
377
  .js-module-initialised & {
389
- @include govuk-media-query($until: "desktop") {
390
- padding: govuk-spacing(6) govuk-spacing(3) govuk-spacing(6) govuk-spacing(9);
378
+ margin-left: govuk-spacing(4);
379
+ @include govuk-link-style-no-underline;
380
+ }
381
+ }
382
+
383
+ .gem-c-layout-super-navigation-header__navigation-second-toggle-button {
384
+ background: none;
385
+ border: 0;
386
+ color: $govuk-link-colour;
387
+ cursor: pointer;
388
+ padding: 0;
389
+
390
+ @include focus-not-focus-visible {
391
+ &:before {
392
+ @include chevron($govuk-link-colour);
393
+ }
394
+ }
395
+
396
+ @include focus-not-focus-visible {
397
+ &:hover {
398
+ &:before {
399
+ @include chevron($govuk-link-hover-colour, true);
400
+ }
391
401
  }
402
+ }
392
403
 
393
- @include govuk-media-query($until: "tablet") {
394
- padding-left: govuk-spacing(7);
404
+ &:focus {
405
+ &:before {
406
+ @include chevron($govuk-focus-text-colour, true);
395
407
  }
396
408
  }
409
+
410
+ @include govuk-media-query($from: "desktop") {
411
+ &:after {
412
+ @include pseudo-underline;
413
+ }
414
+
415
+ @include focus-not-focus-visible {
416
+ color: govuk-colour("white");
417
+ float: left;
418
+ font-size: 16px;
419
+ @if $govuk-typography-use-rem {
420
+ font-size: govuk-px-to-rem(16px);
421
+ }
422
+ height: govuk-spacing(9);
423
+ padding: govuk-spacing(4);
424
+ position: relative;
425
+ text-decoration: none;
426
+
427
+ &:before {
428
+ @include chevron(govuk-colour("white"), true);
429
+ }
430
+ }
431
+ @include focus-not-focus-visible {
432
+ &:hover {
433
+ color: govuk-colour("mid-grey");
434
+ text-decoration: none;
435
+
436
+ &:after {
437
+ background: govuk-colour("mid-grey");
438
+ }
439
+
440
+ &:before {
441
+ @include chevron(govuk-colour("mid-grey"), true);
442
+ }
443
+ }
444
+ }
445
+
446
+ @include focus-and-focus-visible {
447
+ color: $govuk-focus-text-colour;
448
+
449
+ &:after {
450
+ background: $govuk-focus-text-colour;
451
+ }
452
+
453
+ &:before {
454
+ @include chevron($govuk-focus-text-colour, true);
455
+ }
456
+ }
457
+ }
458
+
459
+ &.gem-c-layout-super-navigation-header__open-button {
460
+ @include focus-not-focus-visible {
461
+ &:before {
462
+ transform: translateY(0) rotate(225deg);
463
+ }
464
+ }
465
+
466
+ @include govuk-media-query($from: "desktop") {
467
+ @include focus-not-focus-visible {
468
+ background: govuk-colour("light-grey");
469
+ color: $govuk-link-colour;
470
+
471
+ &:before {
472
+ @include chevron($govuk-link-colour, true);
473
+ }
474
+
475
+ &:after {
476
+ background-color: $govuk-link-colour;
477
+ }
478
+ }
479
+
480
+ @include focus-and-focus-visible {
481
+ background-color: $govuk-focus-colour;
482
+ color: $govuk-focus-text-colour;
483
+
484
+ &:before {
485
+ @include chevron($govuk-focus-text-colour, true);
486
+ }
487
+
488
+ &:after {
489
+ background: $govuk-focus-text-colour;
490
+ }
491
+ }
492
+ }
493
+ }
494
+
495
+ .js-module-initialised & {
496
+ @include govuk-link-style-no-underline;
497
+ }
397
498
  }
398
499
 
399
500
  // Search link and dropdown.
400
501
  .gem-c-layout-super-navigation-header__search-item-link {
401
- @extend %top-level-navigation-link-base;
502
+ &:link,
503
+ &:visited {
504
+ @include govuk-media-query($from: "desktop") {
505
+ background: $govuk-brand-colour;
402
506
 
403
- @include govuk-media-query($from: "desktop") {
404
- background: $govuk-link-colour;
405
- margin-left: 0;
507
+ &:hover {
508
+ background: none;
406
509
 
407
- &:focus:hover:after,
408
- &:after {
409
- content: none;
410
- }
510
+ &:before {
511
+ left: 0;
512
+ right: 0;
513
+ }
514
+ }
411
515
 
412
- &:hover:after {
413
- content: " ";
414
- left: 0;
415
- right: 0;
516
+ &:focus {
517
+ background: $govuk-focus-colour;
518
+
519
+ &:before {
520
+ content: none;
521
+ }
522
+ }
416
523
  }
417
524
  }
418
525
  }
@@ -423,18 +530,17 @@ $search-icon-size: 20px;
423
530
  }
424
531
  }
425
532
 
426
- .gem-c-layout-super-navigation-header__search-item-link-icon {
427
- @extend %search-icon;
428
- display: none;
429
-
430
- @include govuk-media-query($from: "desktop") {
431
- display: block;
432
- }
533
+ .gem-c-layout-super-navigation-header__search-item-link-icon,
534
+ .gem-c-layout-super-navigation-header__search-toggle-button-link-icon {
535
+ height: $icon-size;
536
+ pointer-events: none;
537
+ width: $icon-size;
433
538
  }
434
539
 
435
- .gem-c-layout-super-navigation-header__search-toggle-button-link-icon {
436
- @extend %search-icon;
437
- display: block;
540
+ .gem-c-layout-super-navigation-header__search-item-link-icon {
541
+ @include govuk-media-query($until: "desktop") {
542
+ @include govuk-visually-hidden;
543
+ }
438
544
  }
439
545
 
440
546
  // Search and popular content dropdown.
@@ -450,223 +556,189 @@ $search-icon-size: 20px;
450
556
 
451
557
  // Styles for top level navigation toggle button.
452
558
  .gem-c-layout-super-navigation-header__navigation-top-toggle-button {
453
- @extend %top-level-navigation-toggle-base;
454
- border-left: 1px solid govuk-colour("mid-grey");
559
+ @include govuk-font($size: 19, $weight: "bold", $line-height: 20px);
560
+ background: govuk-colour("black");
561
+ border: 0;
562
+ border-left: 1px solid govuk-colour("white");
563
+ border-right: 1px solid govuk-colour("white");
564
+ box-sizing: border-box;
455
565
  color: govuk-colour("white");
566
+ cursor: pointer;
567
+ height: govuk-spacing(9);
568
+ margin-right: -1px;
569
+ padding: govuk-spacing(4);
456
570
  position: absolute;
457
- right: 45px;
458
-
459
- &.gem-c-layout-super-navigation-header__open-button {
460
- border-top-color: govuk-colour("black");
461
- }
571
+ right: (govuk-spacing(9) - govuk-spacing(3));
572
+ top: 0;
462
573
 
463
574
  @include govuk-media-query($from: 360px) {
464
- &:before {
465
- @include chevron("white");
466
- }
467
- }
575
+ right: govuk-spacing(9);
468
576
 
469
- &:focus {
470
577
  &:before {
471
- border-color: $govuk-focus-text-colour;
578
+ @include chevron(govuk-colour("white"));
472
579
  }
473
580
  }
474
581
 
475
- @include govuk-media-query(360px) {
476
- right: 60px;
477
- }
582
+ @include focus-and-focus-visible {
583
+ @include govuk-focused-text;
584
+ border-color: $govuk-focus-colour;
585
+ box-shadow: none;
586
+ z-index: 10;
478
587
 
479
- @include govuk-media-query($from: "desktop") {
480
- display: none;
588
+ @include govuk-media-query($from: 360px) {
589
+ &:before {
590
+ @include chevron(govuk-colour("black"), true);
591
+ }
592
+ }
481
593
  }
482
- }
483
594
 
484
- // styles for search toggle button
485
- .gem-c-layout-super-navigation-header__search-toggle-button {
486
- @extend %top-level-navigation-toggle-base;
487
- border-top: 1px solid transparent;
488
- border-left: 1px solid govuk-colour("mid-grey");
489
- color: govuk-colour("white");
490
- position: absolute;
491
- right: (0 - govuk-spacing(3));
492
-
493
- &:after {
494
- background-color: $govuk-link-colour;
495
- content: " ";
496
- left: 0;
497
- right: 0;
498
- }
595
+ // Undoes the :focus styles *only* for browsers that support :focus-visible.
596
+ // See https://www.tpgi.com/focus-visible-and-backwards-compatibility/
597
+ @include focus-not-focus-visible {
598
+ background: none;
599
+ border-color: govuk-colour("white");
600
+ box-shadow: none;
601
+ color: govuk-colour("white");
499
602
 
500
- &:not(.gem-c-layout-super-navigation-header__open-button):focus {
501
- &:hover,
502
- &:after {
503
- background-color: $govuk-focus-colour;
504
- border-top-color: $govuk-focus-colour;
603
+ @include govuk-media-query($from: 360px) {
604
+ &:before {
605
+ @include chevron(govuk-colour("white"), true);
606
+ }
505
607
  }
506
608
  }
507
609
 
508
- @include govuk-media-query($from: 360px) {
509
- right: 0;
510
- }
511
-
512
- @include govuk-media-query($from: "desktop") {
513
- background-color: $govuk-link-colour;
514
- border-left: 0;
515
- height: govuk-spacing(9);
516
- margin-left: govuk-spacing(3);
517
- padding: govuk-spacing(4);
518
- position: relative;
519
- float: right;
520
-
521
- &.gem-c-layout-super-navigation-header__open-button {
522
- border-top-color: govuk-colour("black");
610
+ // Open button modifier
611
+ &.gem-c-layout-super-navigation-header__open-button {
612
+ @include focus-and-focus-visible {
613
+ @include govuk-focused-text;
614
+ border-color: $govuk-focus-colour;
615
+ box-shadow: none;
616
+ color: $govuk-focus-colour;
523
617
 
524
- &:hover:after {
525
- content: " ";
618
+ @include govuk-media-query($from: 360px) {
619
+ &:before {
620
+ @include chevron($govuk-focus-colour, true);
621
+ }
526
622
  }
527
623
  }
528
624
 
529
- // To avoid the 'sticky hover' problem, we need to stop the hover state on
530
- // touch screen devices.
531
- //
532
- // One solution is to use `@media(hover: hover)`. This turns on the hover
533
- // state only for devices that aren't touchscreen, but means that browsers
534
- // that don't support this media query won't get a hover state at all.
535
- //
536
- // To get around this, we do the opposite - we turn off the hover state for
537
- // for touchscreen devices.
538
- @media (hover: none), (pointer: coarse) {
539
- &:not(:focus):hover {
540
- background-color: $govuk-link-colour;
541
- color: govuk-colour("white");
625
+ @include focus-not-focus-visible {
626
+ background: govuk-colour("light-grey");
627
+ color: govuk-colour("light-grey");
542
628
 
543
- &:after {
544
- background-color: $govuk-link-colour;
629
+ @include govuk-media-query($from: 360px) {
630
+ &:before {
631
+ @include chevron(govuk-colour("light-grey"));
545
632
  }
546
633
  }
547
634
  }
548
635
  }
549
636
  }
550
637
 
551
- // styles for second level navigation toggle buttons
552
- .gem-c-layout-super-navigation-header__navigation-second-toggle-button {
553
- @extend %toggle-base;
554
- @include govuk-font($size: 24, $weight: false, $line-height: 20px);
638
+ // Styles for search toggle button.
639
+ .gem-c-layout-super-navigation-header__search-toggle-button {
640
+ @include govuk-font($size: 19, $weight: "bold", $line-height: 20px);
641
+ background: govuk-colour("black");
555
642
  border: 0;
556
- margin: 0;
557
- padding: govuk-spacing(6) govuk-spacing(3);
558
- position: relative;
559
- text-align: left;
560
- text-decoration: none;
561
- width: 100%;
643
+ border-left: 1px solid govuk-colour("white");
644
+ color: govuk-colour("white");
645
+ cursor: pointer;
646
+ height: govuk-spacing(9);
647
+ padding: govuk-spacing(4);
648
+ position: absolute;
649
+ right: (0 - govuk-spacing(3));
650
+ top: 0;
651
+ width: govuk-spacing(9);
562
652
 
563
- &:before {
564
- @include chevron("black");
653
+ @include focus-and-focus-visible {
654
+ @include govuk-focused-text;
655
+ border-color: $govuk-focus-colour;
656
+ box-shadow: none;
565
657
  }
566
658
 
567
- &,
568
- &:visited {
569
- color: $govuk-link-colour;// FIXME: contrast against govuk-colour("light-grey") not high enough
570
-
571
- @include govuk-media-query($from: "desktop") {
572
- color: govuk-colour("white");
573
- }
659
+ &:focus:not(:focus-visible) {
660
+ background: none;
661
+ border-color: govuk-colour("white");
662
+ box-shadow: none;
663
+ color: govuk-colour("white");
574
664
  }
575
665
 
576
- @include govuk-media-query($from: "tablet") {
577
- padding: govuk-spacing(6);
666
+ @include govuk-media-query($from: 360px) {
667
+ right: 0;
578
668
  }
579
669
 
580
670
  @include govuk-media-query($from: "desktop") {
581
- @include govuk-font($size: 16, $weight: false, $line-height: 20px);
582
- border-top: 1px solid transparent;
583
- color: govuk-colour("white");
584
- height: govuk-spacing(9);
585
- padding: govuk-spacing(4);
586
- position: relative;
587
-
588
- &:before {
589
- border-color: govuk-colour("white");
671
+ @include focus-not-focus-visible {
672
+ background: $govuk-brand-colour;
673
+ border-bottom: 1px solid govuk-colour("black");
674
+ border-left: none;
675
+ position: relative;
590
676
  }
591
677
 
592
678
  &:hover {
679
+ background: govuk-colour("black");
680
+ border-bottom: govuk-spacing(1) solid govuk-colour("mid-grey");
593
681
  color: govuk-colour("mid-grey");
594
-
595
- &:after {
596
- background-color: govuk-colour("mid-grey");
597
- }
598
-
599
- &:before {
600
- border-color: govuk-colour("mid-grey");
601
- }
602
682
  }
603
683
 
604
- &:focus {
605
- color: $govuk-focus-text-colour;
606
-
607
- &:after {
608
- background-color: $govuk-focus-text-colour;
609
- }
610
-
611
- &:before {
612
- border-color: $govuk-focus-text-colour;
613
- }
684
+ @include focus-and-focus-visible {
685
+ @include govuk-focused-text;
686
+ border-bottom-color: $govuk-focus-colour;
687
+ box-shadow: none;
614
688
  }
615
689
  }
616
690
 
691
+ // Open button modifier
617
692
  &.gem-c-layout-super-navigation-header__open-button {
618
- border-top-color: govuk-colour("black");
619
-
620
- &:before {
621
- transform: translateY(20%) rotate(225deg);
622
- }
623
-
624
- @include govuk-media-query($from: "desktop") {
625
- background-color: govuk-colour("light-grey");
626
- color: $govuk-link-colour;
627
-
628
- &:after {
629
- background: $govuk-link-colour;
630
- }
631
-
632
- &:before {
633
- border-color: $govuk-link-colour;
634
- }
635
-
636
- &:focus {
637
- background-color: $govuk-focus-colour;
638
- color: $govuk-focus-text-colour;
639
-
640
- &:after {
641
- background-color: $govuk-focus-text-colour;
642
- }
693
+ @include focus-and-focus-visible {
694
+ @include govuk-focused-text;
695
+ border-color: $govuk-focus-colour;
696
+ box-shadow: none;
697
+ color: $govuk-focus-colour;
643
698
 
699
+ @include govuk-media-query($from: 360px) {
644
700
  &:before {
645
- border-color: $govuk-focus-text-colour;
701
+ @include chevron($govuk-focus-colour, true);
646
702
  }
647
703
  }
704
+ }
648
705
 
649
- &:active {
650
- background-color: govuk-colour("light-grey");
651
- color: $govuk-link-colour;
652
-
653
- &:before {
654
- border-color: $govuk-link-colour;
655
- }
656
- }
706
+ @include focus-not-focus-visible {
707
+ background: govuk-colour("light-grey");
708
+ border-bottom-color: govuk-colour("light-grey");
709
+ color: govuk-colour("light-grey");
657
710
  }
658
711
  }
659
712
  }
660
713
 
714
+ .gem-c-layout-super-navigation-header__navigation-top-toggle-close-icon {
715
+ color: $govuk-text-colour;
716
+ display: none;
717
+ font-size: 36px;
718
+ font-weight: normal;
719
+ left: 0;
720
+ line-height: 22px;
721
+ padding: govuk-spacing(4) 0;
722
+ pointer-events: none;
723
+ position: absolute;
724
+ right: 0;
725
+ text-align: center;
726
+ top: 0;
727
+
728
+ .gem-c-layout-super-navigation-header__open-button & {
729
+ display: block;
730
+ }
731
+ }
732
+
661
733
  // Dropdown menu.
662
734
  .gem-c-layout-super-navigation-header__navigation-dropdown-menu {
663
- background: govuk-colour("white");
735
+ background: govuk-colour("light-grey");
664
736
 
665
737
  @include govuk-media-query($from: "desktop") {
666
- background: govuk-colour("light-grey");
667
738
  left: 0;
668
739
  position: absolute;
669
740
  right: 0;
741
+ top: govuk-spacing(9);
670
742
  }
671
743
  }
672
744
 
@@ -682,7 +754,12 @@ $search-icon-size: 20px;
682
754
 
683
755
  // Dropdown menu items.
684
756
  .gem-c-layout-super-navigation-header__dropdown-list-item {
757
+ margin: 0 0 0 $chevron-indent-spacing;
758
+ padding: govuk-spacing(2) 0;
759
+ position: relative;
760
+
685
761
  @include govuk-media-query($from: "desktop") {
762
+ margin: 0;
686
763
  padding: govuk-spacing(2) 0;
687
764
  }
688
765
  }
@@ -720,11 +797,11 @@ $search-icon-size: 20px;
720
797
  }
721
798
 
722
799
  .gem-c-layout-super-navigation-header__navigation-second-item-link {
723
- display: inline-block;
724
- padding: govuk-spacing(2) 0;
800
+ &:after {
801
+ @include make-selectable-area-bigger;
802
+ }
725
803
 
726
804
  @include govuk-media-query($from: "desktop") {
727
- display: inline;
728
805
  font-weight: bold;
729
806
  padding: 0;
730
807
  }
@@ -732,8 +809,8 @@ $search-icon-size: 20px;
732
809
 
733
810
  .gem-c-layout-super-navigation-header__navigation-second-item-link--with-description {
734
811
  @include govuk-font($size: 19, $weight: bold);
735
- margin-top: govuk-spacing(2);
736
812
  margin-bottom: 0;
813
+ margin-top: govuk-spacing(2);
737
814
  }
738
815
 
739
816
  // Dropdown menu footer links.
@@ -754,11 +831,14 @@ $search-icon-size: 20px;
754
831
  }
755
832
 
756
833
  .gem-c-layout-super-navigation-header__navigation-second-footer-item {
834
+ padding: govuk-spacing(2) 0 govuk-spacing(2) $chevron-indent-spacing;
835
+ position: relative;
836
+
757
837
  @include govuk-media-query($from: "desktop") {
758
838
  box-sizing: border-box;
759
839
  float: left;
760
- width: 50%;
761
840
  padding: 0 govuk-spacing(3);
841
+ width: 50%;
762
842
  }
763
843
  }
764
844
 
@@ -766,7 +846,10 @@ $search-icon-size: 20px;
766
846
  @include govuk-font($size: 19, $weight: bold);
767
847
  display: inline-block;
768
848
  margin: govuk-spacing(1) 0;
769
- padding: govuk-spacing(2) 0;
849
+
850
+ &:after {
851
+ @include make-selectable-area-bigger;
852
+ }
770
853
 
771
854
  @include govuk-media-query($from: "desktop") {
772
855
  display: inline;
@@ -791,7 +874,6 @@ $search-icon-size: 20px;
791
874
  left: 0;
792
875
  position: absolute;
793
876
  right: 0;
794
- top: 60px;
795
877
  }
796
878
  }
797
879
  }