govuk_publishing_components 27.9.2 → 27.10.0
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/app/assets/javascripts/govuk_publishing_components/components/layout-super-navigation-header.js +2 -0
- data/app/assets/stylesheets/govuk_publishing_components/components/_layout-super-navigation-header.scss +366 -434
- data/app/assets/stylesheets/govuk_publishing_components/components/print/_layout-super-navigation-header.scss +2 -2
- data/app/views/govuk_publishing_components/components/_layout_for_public.html.erb +2 -1
- data/app/views/govuk_publishing_components/components/_layout_super_navigation_header.html.erb +55 -81
- data/app/views/govuk_publishing_components/components/docs/layout_super_navigation_header.yml +3 -12
- data/lib/govuk_publishing_components/version.rb +1 -1
- metadata +2 -2
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 844ac45406cf595eb0990bf7c663be451dfc921056759ff3ae7cc0ae77329d01
|
|
4
|
+
data.tar.gz: ba2fc52bde58e4b37038954135d7078c8f6a6be6ea7f58694ab924471e494c28
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 2cdc7d815f0cf3bec9e5ec0405f5853b6641c1bc91db899fe43976056f31fd32263f5998d6dc3dedc636d15d6f32cf67ef3bd88b6c45a603e7ec4f454a6407d0
|
|
7
|
+
data.tar.gz: 9fab281887ec4a020e763cdeee459af9105c59f1b9d7760e99eaf092551ba0ce30f866913a2a3ab290b7b35f9dc1d517fe94556b0a242637b5773388608d7aa6
|
data/app/assets/javascripts/govuk_publishing_components/components/layout-super-navigation-header.js
CHANGED
|
@@ -233,6 +233,8 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
|
|
|
233
233
|
// The menu needs to be updated when the window is resized to make sure that
|
|
234
234
|
// the space needed for the dropdown menu is correct.
|
|
235
235
|
window.addEventListener('resize', this.updateStates.bind(this), { passive: true })
|
|
236
|
+
|
|
237
|
+
this.$module.classList.add('js-module-initialised')
|
|
236
238
|
}
|
|
237
239
|
|
|
238
240
|
Modules.SuperNavigationMegaMenu = SuperNavigationMegaMenu
|
|
@@ -92,73 +92,170 @@
|
|
|
92
92
|
}
|
|
93
93
|
}
|
|
94
94
|
|
|
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
|
-
}
|
|
95
|
+
$search-icon-size: 20px;
|
|
114
96
|
|
|
115
|
-
@mixin
|
|
116
|
-
|
|
117
|
-
|
|
97
|
+
@mixin chevron($colour) {
|
|
98
|
+
border-bottom: 3px solid govuk-colour($colour);
|
|
99
|
+
border-right: 3px solid govuk-colour($colour);
|
|
118
100
|
content: " ";
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
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;
|
|
123
107
|
}
|
|
124
108
|
|
|
125
|
-
|
|
109
|
+
%top-level-navigation-link-base {
|
|
126
110
|
background: none;
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
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
|
+
}
|
|
135
125
|
|
|
136
|
-
@mixin focus-and-focus-visible {
|
|
137
126
|
&:focus {
|
|
138
|
-
|
|
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;
|
|
134
|
+
}
|
|
135
|
+
|
|
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
|
+
}
|
|
139
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;
|
|
140
191
|
|
|
141
|
-
|
|
142
|
-
|
|
192
|
+
@include govuk-media-query($from: "desktop") {
|
|
193
|
+
border: none;
|
|
143
194
|
}
|
|
144
195
|
}
|
|
145
196
|
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
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;
|
|
149
204
|
}
|
|
150
205
|
|
|
151
|
-
|
|
152
|
-
|
|
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
|
+
}
|
|
153
246
|
}
|
|
154
247
|
}
|
|
155
248
|
|
|
249
|
+
%search-icon {
|
|
250
|
+
height: $search-icon-size;
|
|
251
|
+
pointer-events: none;
|
|
252
|
+
width: $search-icon-size;
|
|
253
|
+
}
|
|
254
|
+
|
|
156
255
|
// Header layout - black bar and logo.
|
|
157
256
|
.gem-c-layout-super-navigation-header {
|
|
158
257
|
background: govuk-colour("black");
|
|
159
|
-
border-top: 1px solid govuk-colour("black");
|
|
160
258
|
position: relative;
|
|
161
|
-
top: -1px;
|
|
162
259
|
|
|
163
260
|
.lte-ie8 & {
|
|
164
261
|
height: govuk-spacing(9);
|
|
@@ -179,8 +276,8 @@ $chevron-indent-spacing: 7px;
|
|
|
179
276
|
|
|
180
277
|
.gem-c-layout-super-navigation-header__header-logo {
|
|
181
278
|
height: govuk-spacing(6);
|
|
182
|
-
padding-bottom: govuk-spacing(3);
|
|
183
279
|
padding-top: govuk-spacing(3);
|
|
280
|
+
padding-bottom: govuk-spacing(3);
|
|
184
281
|
|
|
185
282
|
@include govuk-media-query($from: "desktop") {
|
|
186
283
|
display: block;
|
|
@@ -195,10 +292,6 @@ $chevron-indent-spacing: 7px;
|
|
|
195
292
|
}
|
|
196
293
|
}
|
|
197
294
|
|
|
198
|
-
.gem-c-layout-super-navigation-header__navigation-toggle-wrapper {
|
|
199
|
-
position: relative;
|
|
200
|
-
}
|
|
201
|
-
|
|
202
295
|
// Top level navigation and search.
|
|
203
296
|
.gem-c-layout-super-navigation-header__navigation-items,
|
|
204
297
|
.gem-c-layout-super-navigation-header__search-items {
|
|
@@ -221,11 +314,7 @@ $chevron-indent-spacing: 7px;
|
|
|
221
314
|
}
|
|
222
315
|
|
|
223
316
|
.gem-c-layout-super-navigation-header__navigation-items {
|
|
224
|
-
|
|
225
|
-
display: inline-block;
|
|
226
|
-
}
|
|
227
|
-
|
|
228
|
-
.js-enabled & {
|
|
317
|
+
.js-module-initialised & {
|
|
229
318
|
padding: 0 0 govuk-spacing(9) 0;
|
|
230
319
|
|
|
231
320
|
@include govuk-media-query($from: "desktop") {
|
|
@@ -236,276 +325,94 @@ $chevron-indent-spacing: 7px;
|
|
|
236
325
|
|
|
237
326
|
.gem-c-layout-super-navigation-header__navigation-item,
|
|
238
327
|
.gem-c-layout-super-navigation-header__search-item {
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
position: relative;
|
|
242
|
-
|
|
243
|
-
@include govuk-media-query($from: "tablet") {
|
|
244
|
-
margin: 0 govuk-spacing(6);
|
|
245
|
-
}
|
|
328
|
+
margin-right: 0;
|
|
329
|
+
padding: 0;
|
|
246
330
|
|
|
247
331
|
@include govuk-media-query($from: "desktop") {
|
|
248
|
-
|
|
249
|
-
display: block;
|
|
332
|
+
border-bottom: none;
|
|
250
333
|
float: left;
|
|
251
|
-
margin: 0;
|
|
252
334
|
padding: 0;
|
|
253
|
-
position: static;
|
|
254
335
|
}
|
|
255
336
|
}
|
|
256
337
|
|
|
257
338
|
.gem-c-layout-super-navigation-header__navigation-item {
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
border-bottom: 0;
|
|
262
|
-
}
|
|
263
|
-
}
|
|
264
|
-
|
|
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
|
-
@include govuk-link-style-no-underline;
|
|
272
|
-
|
|
273
|
-
display: inline-block;
|
|
274
|
-
font-size: 19px;
|
|
275
|
-
font-size: govuk-px-to-rem(19px);
|
|
276
|
-
font-weight: bold;
|
|
277
|
-
margin: govuk-spacing(3) 0;
|
|
278
|
-
|
|
279
|
-
@include govuk-media-query($from: "desktop") {
|
|
339
|
+
&:after {
|
|
340
|
+
background-color: $govuk-border-colour;
|
|
341
|
+
content: " ";
|
|
280
342
|
display: block;
|
|
281
|
-
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
@include govuk-link-hover-decoration;
|
|
343
|
+
height: 1px;
|
|
344
|
+
left: 0;
|
|
345
|
+
right: 0;
|
|
346
|
+
position: absolute;
|
|
286
347
|
}
|
|
287
348
|
|
|
288
|
-
|
|
289
|
-
&:link,
|
|
290
|
-
&:visited {
|
|
291
|
-
@include focus-and-focus-visible {
|
|
292
|
-
@include govuk-focused-text;
|
|
293
|
-
}
|
|
294
|
-
|
|
295
|
-
// Undoes the :focus styles *only* for browsers that support :focus-visible.
|
|
296
|
-
// See https://www.tpgi.com/focus-visible-and-backwards-compatibility/
|
|
297
|
-
&:focus:not(:focus-visible) {
|
|
298
|
-
background: none;
|
|
299
|
-
box-shadow: none;
|
|
300
|
-
color: $govuk-link-colour;
|
|
301
|
-
|
|
302
|
-
&:hover {
|
|
303
|
-
@include govuk-link-decoration;
|
|
304
|
-
@include govuk-link-hover-decoration;
|
|
305
|
-
color: $govuk-link-hover-colour;
|
|
306
|
-
}
|
|
307
|
-
}
|
|
308
|
-
|
|
349
|
+
@include govuk-media-query($from: "desktop") {
|
|
309
350
|
&:after {
|
|
310
|
-
|
|
311
|
-
}
|
|
312
|
-
|
|
313
|
-
@include govuk-media-query($from: "desktop") {
|
|
314
|
-
float: left;
|
|
315
|
-
font-size: 16px;
|
|
316
|
-
font-size: govuk-px-to-rem(16px);
|
|
317
|
-
height: govuk-spacing(4);
|
|
318
|
-
padding: govuk-spacing(4);
|
|
319
|
-
position: relative;
|
|
320
|
-
|
|
321
|
-
&:before {
|
|
322
|
-
@include chevron(govuk-colour("white"), true);
|
|
323
|
-
}
|
|
324
|
-
|
|
325
|
-
&:hover {
|
|
326
|
-
color: govuk-colour("mid-grey");
|
|
327
|
-
|
|
328
|
-
&:after {
|
|
329
|
-
background: govuk-colour("mid-grey");
|
|
330
|
-
}
|
|
331
|
-
}
|
|
332
|
-
|
|
333
|
-
// stylelint-disable max-nesting-depth
|
|
334
|
-
@include focus-and-focus-visible {
|
|
335
|
-
box-shadow: none;
|
|
336
|
-
color: $govuk-focus-text-colour;
|
|
337
|
-
|
|
338
|
-
&:after {
|
|
339
|
-
background: $govuk-focus-text-colour;
|
|
340
|
-
}
|
|
341
|
-
}
|
|
342
|
-
|
|
343
|
-
@include focus-not-focus-visible {
|
|
344
|
-
&,
|
|
345
|
-
&:hover {
|
|
346
|
-
color: govuk-colour("white");
|
|
347
|
-
text-decoration: none;
|
|
348
|
-
}
|
|
349
|
-
}
|
|
350
|
-
// stylelint-enable max-nesting-depth
|
|
351
|
-
|
|
352
|
-
&:focus:not(:focus-visible) {
|
|
353
|
-
&:after {
|
|
354
|
-
background: none;
|
|
355
|
-
}
|
|
356
|
-
}
|
|
357
|
-
|
|
358
|
-
&:after {
|
|
359
|
-
@include pseudo-underline;
|
|
360
|
-
}
|
|
351
|
+
content: none;
|
|
361
352
|
}
|
|
362
353
|
}
|
|
363
|
-
|
|
364
|
-
&:after {
|
|
365
|
-
@include make-selectable-area-bigger;
|
|
366
|
-
}
|
|
367
354
|
}
|
|
368
355
|
|
|
356
|
+
// Top level navigation links.
|
|
369
357
|
.gem-c-layout-super-navigation-header__navigation-item-link {
|
|
370
|
-
|
|
371
|
-
margin-left: govuk-spacing(4);
|
|
372
|
-
}
|
|
373
|
-
}
|
|
358
|
+
@extend %top-level-navigation-link-base;
|
|
374
359
|
|
|
375
|
-
|
|
376
|
-
|
|
377
|
-
|
|
378
|
-
|
|
379
|
-
cursor: pointer;
|
|
380
|
-
padding: 0;
|
|
381
|
-
|
|
382
|
-
@include focus-not-focus-visible {
|
|
383
|
-
&:before {
|
|
384
|
-
@include chevron($govuk-link-colour);
|
|
385
|
-
}
|
|
386
|
-
}
|
|
360
|
+
&,
|
|
361
|
+
&:link, // 👈 required to override govuk-template
|
|
362
|
+
&:visited {
|
|
363
|
+
color: $govuk-link-colour;
|
|
387
364
|
|
|
388
|
-
@include focus-not-focus-visible {
|
|
389
365
|
&:hover {
|
|
390
|
-
|
|
391
|
-
@include chevron($govuk-link-hover-colour, true);
|
|
392
|
-
}
|
|
393
|
-
}
|
|
394
|
-
}
|
|
395
|
-
|
|
396
|
-
&:focus {
|
|
397
|
-
&:before {
|
|
398
|
-
@include chevron($govuk-focus-text-colour, true);
|
|
399
|
-
}
|
|
400
|
-
}
|
|
366
|
+
color: $govuk-link-hover-colour;
|
|
401
367
|
|
|
402
|
-
|
|
403
|
-
&:after {
|
|
404
|
-
@include pseudo-underline;
|
|
405
|
-
}
|
|
406
|
-
|
|
407
|
-
@include focus-not-focus-visible {
|
|
408
|
-
color: govuk-colour("white");
|
|
409
|
-
float: left;
|
|
410
|
-
font-size: 16px;
|
|
411
|
-
font-size: govuk-px-to-rem(16px);
|
|
412
|
-
height: govuk-spacing(9);
|
|
413
|
-
padding: govuk-spacing(4);
|
|
414
|
-
position: relative;
|
|
415
|
-
text-decoration: none;
|
|
416
|
-
|
|
417
|
-
&:before {
|
|
418
|
-
@include chevron(govuk-colour("white"), true);
|
|
419
|
-
}
|
|
420
|
-
}
|
|
421
|
-
@include focus-not-focus-visible {
|
|
422
|
-
&:hover {
|
|
368
|
+
@include govuk-media-query($from: "desktop") {
|
|
423
369
|
color: govuk-colour("mid-grey");
|
|
424
|
-
text-decoration: none;
|
|
425
|
-
|
|
426
|
-
&:after {
|
|
427
|
-
background: govuk-colour("mid-grey");
|
|
428
|
-
}
|
|
429
|
-
|
|
430
|
-
&:before {
|
|
431
|
-
@include chevron(govuk-colour("mid-grey"), true);
|
|
432
|
-
}
|
|
433
370
|
}
|
|
434
371
|
}
|
|
435
372
|
|
|
436
|
-
|
|
373
|
+
&:focus {
|
|
437
374
|
color: $govuk-focus-text-colour;
|
|
438
|
-
|
|
439
|
-
&:after {
|
|
440
|
-
background: $govuk-focus-text-colour;
|
|
441
|
-
}
|
|
442
|
-
|
|
443
|
-
&:before {
|
|
444
|
-
@include chevron($govuk-focus-text-colour, true);
|
|
445
|
-
}
|
|
446
|
-
}
|
|
447
|
-
}
|
|
448
|
-
|
|
449
|
-
&.gem-c-layout-super-navigation-header__open-button {
|
|
450
|
-
@include focus-not-focus-visible {
|
|
451
|
-
&:before {
|
|
452
|
-
transform: translateY(0) rotate(225deg);
|
|
453
|
-
}
|
|
454
375
|
}
|
|
455
376
|
|
|
456
377
|
@include govuk-media-query($from: "desktop") {
|
|
457
|
-
|
|
458
|
-
|
|
459
|
-
|
|
460
|
-
|
|
461
|
-
&:before {
|
|
462
|
-
@include chevron($govuk-link-colour, true);
|
|
463
|
-
}
|
|
464
|
-
|
|
465
|
-
&:after {
|
|
466
|
-
background-color: $govuk-link-colour;
|
|
467
|
-
}
|
|
468
|
-
}
|
|
378
|
+
color: govuk-colour("white");
|
|
379
|
+
}
|
|
380
|
+
}
|
|
469
381
|
|
|
470
|
-
|
|
471
|
-
|
|
472
|
-
|
|
382
|
+
// This :link:focus selector is required to override the `govuk-template`
|
|
383
|
+
// defaults.
|
|
384
|
+
&:link:focus {
|
|
385
|
+
color: $govuk-focus-text-colour;
|
|
386
|
+
}
|
|
473
387
|
|
|
474
|
-
|
|
475
|
-
|
|
476
|
-
|
|
388
|
+
.js-module-initialised & {
|
|
389
|
+
@include govuk-media-query($until: "desktop") {
|
|
390
|
+
padding: govuk-spacing(6) govuk-spacing(3) govuk-spacing(6) govuk-spacing(9);
|
|
391
|
+
}
|
|
477
392
|
|
|
478
|
-
|
|
479
|
-
|
|
480
|
-
}
|
|
481
|
-
}
|
|
393
|
+
@include govuk-media-query($until: "tablet") {
|
|
394
|
+
padding-left: govuk-spacing(7);
|
|
482
395
|
}
|
|
483
396
|
}
|
|
484
397
|
}
|
|
485
398
|
|
|
486
399
|
// Search link and dropdown.
|
|
487
400
|
.gem-c-layout-super-navigation-header__search-item-link {
|
|
488
|
-
|
|
489
|
-
&:visited {
|
|
490
|
-
@include govuk-media-query($from: "desktop") {
|
|
491
|
-
background: $govuk-brand-colour;
|
|
492
|
-
|
|
493
|
-
&:hover {
|
|
494
|
-
background: none;
|
|
401
|
+
@extend %top-level-navigation-link-base;
|
|
495
402
|
|
|
496
|
-
|
|
497
|
-
|
|
498
|
-
|
|
499
|
-
}
|
|
500
|
-
}
|
|
403
|
+
@include govuk-media-query($from: "desktop") {
|
|
404
|
+
background: $govuk-link-colour;
|
|
405
|
+
margin-left: 0;
|
|
501
406
|
|
|
502
|
-
|
|
503
|
-
|
|
407
|
+
&:focus:hover:after,
|
|
408
|
+
&:after {
|
|
409
|
+
content: none;
|
|
410
|
+
}
|
|
504
411
|
|
|
505
|
-
|
|
506
|
-
|
|
507
|
-
|
|
508
|
-
|
|
412
|
+
&:hover:after {
|
|
413
|
+
content: " ";
|
|
414
|
+
left: 0;
|
|
415
|
+
right: 0;
|
|
509
416
|
}
|
|
510
417
|
}
|
|
511
418
|
}
|
|
@@ -516,215 +423,250 @@ $chevron-indent-spacing: 7px;
|
|
|
516
423
|
}
|
|
517
424
|
}
|
|
518
425
|
|
|
519
|
-
.gem-c-layout-super-navigation-header__search-item-link-icon,
|
|
520
|
-
.gem-c-layout-super-navigation-header__search-toggle-button-link-icon {
|
|
521
|
-
height: $icon-size;
|
|
522
|
-
pointer-events: none;
|
|
523
|
-
width: $icon-size;
|
|
524
|
-
}
|
|
525
|
-
|
|
526
426
|
.gem-c-layout-super-navigation-header__search-item-link-icon {
|
|
527
|
-
@
|
|
528
|
-
|
|
427
|
+
@extend %search-icon;
|
|
428
|
+
display: none;
|
|
429
|
+
|
|
430
|
+
@include govuk-media-query($from: "desktop") {
|
|
431
|
+
display: block;
|
|
529
432
|
}
|
|
530
433
|
}
|
|
531
434
|
|
|
435
|
+
.gem-c-layout-super-navigation-header__search-toggle-button-link-icon {
|
|
436
|
+
@extend %search-icon;
|
|
437
|
+
display: block;
|
|
438
|
+
}
|
|
439
|
+
|
|
532
440
|
// Search and popular content dropdown.
|
|
533
441
|
.gem-c-layout-super-navigation-header__search-and-popular {
|
|
534
442
|
display: none;
|
|
535
443
|
padding-bottom: govuk-spacing(4);
|
|
536
444
|
padding-top: govuk-spacing(4);
|
|
537
445
|
|
|
538
|
-
.js-
|
|
446
|
+
.js-module-initialised & {
|
|
539
447
|
display: block;
|
|
540
448
|
}
|
|
541
449
|
}
|
|
542
450
|
|
|
543
451
|
// Styles for top level navigation toggle button.
|
|
544
452
|
.gem-c-layout-super-navigation-header__navigation-top-toggle-button {
|
|
545
|
-
@
|
|
546
|
-
|
|
547
|
-
border: 0;
|
|
548
|
-
border-left: 1px solid govuk-colour("white");
|
|
549
|
-
border-right: 1px solid govuk-colour("white");
|
|
550
|
-
box-sizing: border-box;
|
|
453
|
+
@extend %top-level-navigation-toggle-base;
|
|
454
|
+
border-left: 1px solid govuk-colour("mid-grey");
|
|
551
455
|
color: govuk-colour("white");
|
|
552
|
-
cursor: pointer;
|
|
553
|
-
height: govuk-spacing(9);
|
|
554
|
-
margin-right: -1px;
|
|
555
|
-
padding: govuk-spacing(4);
|
|
556
456
|
position: absolute;
|
|
557
|
-
right:
|
|
558
|
-
|
|
457
|
+
right: 45px;
|
|
458
|
+
|
|
459
|
+
&.gem-c-layout-super-navigation-header__open-button {
|
|
460
|
+
border-top-color: govuk-colour("black");
|
|
461
|
+
}
|
|
559
462
|
|
|
560
463
|
@include govuk-media-query($from: 360px) {
|
|
561
|
-
|
|
464
|
+
&:before {
|
|
465
|
+
@include chevron("white");
|
|
466
|
+
}
|
|
467
|
+
}
|
|
562
468
|
|
|
469
|
+
&:focus {
|
|
563
470
|
&:before {
|
|
564
|
-
|
|
471
|
+
border-color: $govuk-focus-text-colour;
|
|
565
472
|
}
|
|
566
473
|
}
|
|
567
474
|
|
|
568
|
-
@include
|
|
569
|
-
|
|
570
|
-
|
|
571
|
-
box-shadow: none;
|
|
572
|
-
z-index: 10;
|
|
475
|
+
@include govuk-media-query(360px) {
|
|
476
|
+
right: 60px;
|
|
477
|
+
}
|
|
573
478
|
|
|
574
|
-
|
|
575
|
-
|
|
576
|
-
@include chevron(govuk-colour("black"), true);
|
|
577
|
-
}
|
|
578
|
-
}
|
|
479
|
+
@include govuk-media-query($from: "desktop") {
|
|
480
|
+
display: none;
|
|
579
481
|
}
|
|
482
|
+
}
|
|
580
483
|
|
|
581
|
-
|
|
582
|
-
|
|
583
|
-
@
|
|
584
|
-
|
|
585
|
-
|
|
586
|
-
|
|
587
|
-
|
|
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));
|
|
588
492
|
|
|
589
|
-
|
|
590
|
-
|
|
591
|
-
|
|
592
|
-
|
|
493
|
+
&:after {
|
|
494
|
+
background-color: $govuk-link-colour;
|
|
495
|
+
content: " ";
|
|
496
|
+
left: 0;
|
|
497
|
+
right: 0;
|
|
498
|
+
}
|
|
499
|
+
|
|
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;
|
|
593
505
|
}
|
|
594
506
|
}
|
|
595
507
|
|
|
596
|
-
|
|
597
|
-
|
|
598
|
-
|
|
599
|
-
@include govuk-focused-text;
|
|
600
|
-
border-color: $govuk-focus-colour;
|
|
601
|
-
box-shadow: none;
|
|
602
|
-
color: $govuk-focus-colour;
|
|
508
|
+
@include govuk-media-query($from: 360px) {
|
|
509
|
+
right: 0;
|
|
510
|
+
}
|
|
603
511
|
|
|
604
|
-
|
|
605
|
-
|
|
606
|
-
|
|
607
|
-
|
|
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");
|
|
523
|
+
|
|
524
|
+
&:hover:after {
|
|
525
|
+
content: " ";
|
|
608
526
|
}
|
|
609
527
|
}
|
|
610
528
|
|
|
611
|
-
|
|
612
|
-
|
|
613
|
-
|
|
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");
|
|
614
542
|
|
|
615
|
-
|
|
616
|
-
|
|
617
|
-
@include chevron(govuk-colour("light-grey"));
|
|
543
|
+
&:after {
|
|
544
|
+
background-color: $govuk-link-colour;
|
|
618
545
|
}
|
|
619
546
|
}
|
|
620
547
|
}
|
|
621
548
|
}
|
|
622
549
|
}
|
|
623
550
|
|
|
624
|
-
//
|
|
625
|
-
.gem-c-layout-super-navigation-
|
|
626
|
-
@
|
|
627
|
-
|
|
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);
|
|
628
555
|
border: 0;
|
|
629
|
-
|
|
630
|
-
|
|
631
|
-
|
|
632
|
-
|
|
633
|
-
|
|
634
|
-
|
|
635
|
-
right: (0 - govuk-spacing(3));
|
|
636
|
-
top: 0;
|
|
637
|
-
width: govuk-spacing(9);
|
|
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%;
|
|
638
562
|
|
|
639
|
-
|
|
640
|
-
@include
|
|
641
|
-
border-color: $govuk-focus-colour;
|
|
642
|
-
box-shadow: none;
|
|
563
|
+
&:before {
|
|
564
|
+
@include chevron("black");
|
|
643
565
|
}
|
|
644
566
|
|
|
645
|
-
|
|
646
|
-
|
|
647
|
-
|
|
648
|
-
|
|
649
|
-
|
|
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
|
+
}
|
|
650
574
|
}
|
|
651
575
|
|
|
652
|
-
@include govuk-media-query($from:
|
|
653
|
-
|
|
576
|
+
@include govuk-media-query($from: "tablet") {
|
|
577
|
+
padding: govuk-spacing(6);
|
|
654
578
|
}
|
|
655
579
|
|
|
656
580
|
@include govuk-media-query($from: "desktop") {
|
|
657
|
-
@include
|
|
658
|
-
|
|
659
|
-
|
|
660
|
-
|
|
661
|
-
|
|
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");
|
|
662
590
|
}
|
|
663
591
|
|
|
664
592
|
&:hover {
|
|
665
|
-
background: govuk-colour("black");
|
|
666
|
-
border-bottom-color: govuk-colour("mid-grey");
|
|
667
593
|
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
|
+
}
|
|
668
602
|
}
|
|
669
603
|
|
|
670
|
-
|
|
671
|
-
|
|
672
|
-
|
|
673
|
-
|
|
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
|
+
}
|
|
674
614
|
}
|
|
675
615
|
}
|
|
676
616
|
|
|
677
|
-
// Open button modifier
|
|
678
617
|
&.gem-c-layout-super-navigation-header__open-button {
|
|
679
|
-
|
|
680
|
-
|
|
681
|
-
|
|
682
|
-
|
|
683
|
-
|
|
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
|
+
}
|
|
684
643
|
|
|
685
|
-
@include govuk-media-query($from: 360px) {
|
|
686
644
|
&:before {
|
|
687
|
-
|
|
645
|
+
border-color: $govuk-focus-text-colour;
|
|
688
646
|
}
|
|
689
647
|
}
|
|
690
|
-
}
|
|
691
648
|
|
|
692
|
-
|
|
693
|
-
|
|
694
|
-
|
|
695
|
-
color: govuk-colour("light-grey");
|
|
696
|
-
}
|
|
697
|
-
}
|
|
698
|
-
}
|
|
699
|
-
|
|
700
|
-
.gem-c-layout-super-navigation-header__navigation-top-toggle-close-icon {
|
|
701
|
-
color: $govuk-text-colour;
|
|
702
|
-
display: none;
|
|
703
|
-
font-size: 36px;
|
|
704
|
-
font-weight: normal;
|
|
705
|
-
left: 0;
|
|
706
|
-
line-height: 22px;
|
|
707
|
-
padding: govuk-spacing(4) 0;
|
|
708
|
-
pointer-events: none;
|
|
709
|
-
position: absolute;
|
|
710
|
-
right: 0;
|
|
711
|
-
text-align: center;
|
|
712
|
-
top: 0;
|
|
649
|
+
&:active {
|
|
650
|
+
background-color: govuk-colour("light-grey");
|
|
651
|
+
color: $govuk-link-colour;
|
|
713
652
|
|
|
714
|
-
|
|
715
|
-
|
|
653
|
+
&:before {
|
|
654
|
+
border-color: $govuk-link-colour;
|
|
655
|
+
}
|
|
656
|
+
}
|
|
657
|
+
}
|
|
716
658
|
}
|
|
717
659
|
}
|
|
718
660
|
|
|
719
661
|
// Dropdown menu.
|
|
720
662
|
.gem-c-layout-super-navigation-header__navigation-dropdown-menu {
|
|
721
|
-
background: govuk-colour("
|
|
663
|
+
background: govuk-colour("white");
|
|
722
664
|
|
|
723
665
|
@include govuk-media-query($from: "desktop") {
|
|
666
|
+
background: govuk-colour("light-grey");
|
|
724
667
|
left: 0;
|
|
725
668
|
position: absolute;
|
|
726
669
|
right: 0;
|
|
727
|
-
top: govuk-spacing(9);
|
|
728
670
|
}
|
|
729
671
|
}
|
|
730
672
|
|
|
@@ -740,12 +682,7 @@ $chevron-indent-spacing: 7px;
|
|
|
740
682
|
|
|
741
683
|
// Dropdown menu items.
|
|
742
684
|
.gem-c-layout-super-navigation-header__dropdown-list-item {
|
|
743
|
-
margin: 0 0 0 $chevron-indent-spacing;
|
|
744
|
-
padding: govuk-spacing(2) 0;
|
|
745
|
-
position: relative;
|
|
746
|
-
|
|
747
685
|
@include govuk-media-query($from: "desktop") {
|
|
748
|
-
margin: 0;
|
|
749
686
|
padding: govuk-spacing(2) 0;
|
|
750
687
|
}
|
|
751
688
|
}
|
|
@@ -783,11 +720,11 @@ $chevron-indent-spacing: 7px;
|
|
|
783
720
|
}
|
|
784
721
|
|
|
785
722
|
.gem-c-layout-super-navigation-header__navigation-second-item-link {
|
|
786
|
-
|
|
787
|
-
|
|
788
|
-
}
|
|
723
|
+
display: inline-block;
|
|
724
|
+
padding: govuk-spacing(2) 0;
|
|
789
725
|
|
|
790
726
|
@include govuk-media-query($from: "desktop") {
|
|
727
|
+
display: inline;
|
|
791
728
|
font-weight: bold;
|
|
792
729
|
padding: 0;
|
|
793
730
|
}
|
|
@@ -795,8 +732,8 @@ $chevron-indent-spacing: 7px;
|
|
|
795
732
|
|
|
796
733
|
.gem-c-layout-super-navigation-header__navigation-second-item-link--with-description {
|
|
797
734
|
@include govuk-font($size: 19, $weight: bold);
|
|
798
|
-
margin-bottom: 0;
|
|
799
735
|
margin-top: govuk-spacing(2);
|
|
736
|
+
margin-bottom: 0;
|
|
800
737
|
}
|
|
801
738
|
|
|
802
739
|
// Dropdown menu footer links.
|
|
@@ -817,14 +754,11 @@ $chevron-indent-spacing: 7px;
|
|
|
817
754
|
}
|
|
818
755
|
|
|
819
756
|
.gem-c-layout-super-navigation-header__navigation-second-footer-item {
|
|
820
|
-
padding: govuk-spacing(2) 0 govuk-spacing(2) $chevron-indent-spacing;
|
|
821
|
-
position: relative;
|
|
822
|
-
|
|
823
757
|
@include govuk-media-query($from: "desktop") {
|
|
824
758
|
box-sizing: border-box;
|
|
825
759
|
float: left;
|
|
826
|
-
padding: 0 govuk-spacing(3);
|
|
827
760
|
width: 50%;
|
|
761
|
+
padding: 0 govuk-spacing(3);
|
|
828
762
|
}
|
|
829
763
|
}
|
|
830
764
|
|
|
@@ -832,10 +766,7 @@ $chevron-indent-spacing: 7px;
|
|
|
832
766
|
@include govuk-font($size: 19, $weight: bold);
|
|
833
767
|
display: inline-block;
|
|
834
768
|
margin: govuk-spacing(1) 0;
|
|
835
|
-
|
|
836
|
-
&:after {
|
|
837
|
-
@include make-selectable-area-bigger;
|
|
838
|
-
}
|
|
769
|
+
padding: govuk-spacing(2) 0;
|
|
839
770
|
|
|
840
771
|
@include govuk-media-query($from: "desktop") {
|
|
841
772
|
display: inline;
|
|
@@ -856,10 +787,11 @@ $chevron-indent-spacing: 7px;
|
|
|
856
787
|
@include govuk-media-query($from: "desktop") {
|
|
857
788
|
margin: 0;
|
|
858
789
|
|
|
859
|
-
.js-
|
|
790
|
+
.js-module-initialised & {
|
|
860
791
|
left: 0;
|
|
861
792
|
position: absolute;
|
|
862
793
|
right: 0;
|
|
794
|
+
top: 60px;
|
|
863
795
|
}
|
|
864
796
|
}
|
|
865
797
|
}
|
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
.gem-c-
|
|
2
|
-
|
|
1
|
+
.gem-c-super-navigation-header a:after {
|
|
2
|
+
content: " ( " attr(href) " ) ";
|
|
3
3
|
}
|
|
@@ -8,6 +8,7 @@
|
|
|
8
8
|
navigation_items ||= []
|
|
9
9
|
omit_feedback_form ||= false
|
|
10
10
|
omit_footer_navigation ||= false
|
|
11
|
+
omit_footer_border ||= false
|
|
11
12
|
omit_header ||= false
|
|
12
13
|
product_name ||= nil
|
|
13
14
|
show_explore_header ||= false
|
|
@@ -143,7 +144,7 @@
|
|
|
143
144
|
|
|
144
145
|
<% unless local_assigns[:hide_footer_links] %>
|
|
145
146
|
<%= render "govuk_publishing_components/components/layout_footer", {
|
|
146
|
-
with_border:
|
|
147
|
+
with_border: !omit_footer_border,
|
|
147
148
|
navigation: omit_footer_navigation ? nil : layout_helper.footer_navigation,
|
|
148
149
|
meta: layout_helper.footer_meta,
|
|
149
150
|
} %>
|
data/app/views/govuk_publishing_components/components/_layout_super_navigation_header.html.erb
CHANGED
|
@@ -18,8 +18,7 @@
|
|
|
18
18
|
<header role="banner" class="gem-c-layout-super-navigation-header">
|
|
19
19
|
<div class="gem-c-layout-super-navigation-header__container govuk-width-container govuk-clearfix">
|
|
20
20
|
<div class="gem-c-layout-super-navigation-header__header-logo">
|
|
21
|
-
<a
|
|
22
|
-
class="govuk-header__link govuk-header__link--homepage"
|
|
21
|
+
<a class="govuk-header__link govuk-header__link--homepage"
|
|
23
22
|
data-module="gem-track-click"
|
|
24
23
|
data-track-action="logoLink"
|
|
25
24
|
data-track-category="headerClicked"
|
|
@@ -28,30 +27,26 @@
|
|
|
28
27
|
data-track-dimension-index="29"
|
|
29
28
|
href="<%= logo_link %>"
|
|
30
29
|
id="logo"
|
|
31
|
-
title="<%= logo_link_title %>"
|
|
32
|
-
>
|
|
30
|
+
title="<%= logo_link_title %>">
|
|
33
31
|
<span class="govuk-header__logotype">
|
|
34
|
-
|
|
35
|
-
<svg
|
|
36
|
-
aria-hidden="true"
|
|
32
|
+
<svg aria-hidden="true"
|
|
37
33
|
class="govuk-header__logotype-crown gem-c-layout-super-navigation-header__logotype-crown"
|
|
38
34
|
focusable="false"
|
|
39
35
|
height="30"
|
|
40
36
|
viewBox="0 0 132 97"
|
|
41
|
-
width="36"
|
|
42
37
|
xmlns="http://www.w3.org/2000/svg"
|
|
43
|
-
|
|
44
|
-
<path
|
|
45
|
-
d="M25 30.2c3.5 1.5 7.7-.2 9.1-3.7 1.5-3.6-.2-7.8-3.9-9.2-3.6-1.4-7.6.3-9.1 3.9-1.4 3.5.3 7.5 3.9 9zM9 39.5c3.6 1.5 7.8-.2 9.2-3.7 1.5-3.6-.2-7.8-3.9-9.1-3.6-1.5-7.6.2-9.1 3.8-1.4 3.5.3 7.5 3.8 9zM4.4 57.2c3.5 1.5 7.7-.2 9.1-3.8 1.5-3.6-.2-7.7-3.9-9.1-3.5-1.5-7.6.3-9.1 3.8-1.4 3.5.3 7.6 3.9 9.1zm38.3-21.4c3.5 1.5 7.7-.2 9.1-3.8 1.5-3.6-.2-7.7-3.9-9.1-3.6-1.5-7.6.3-9.1 3.8-1.3 3.6.4 7.7 3.9 9.1zm64.4-5.6c-3.6 1.5-7.8-.2-9.1-3.7-1.5-3.6.2-7.8 3.8-9.2 3.6-1.4 7.7.3 9.2 3.9 1.3 3.5-.4 7.5-3.9 9zm15.9 9.3c-3.6 1.5-7.7-.2-9.1-3.7-1.5-3.6.2-7.8 3.7-9.1 3.6-1.5 7.7.2 9.2 3.8 1.5 3.5-.3 7.5-3.8 9zm4.7 17.7c-3.6 1.5-7.8-.2-9.2-3.8-1.5-3.6.2-7.7 3.9-9.1 3.6-1.5 7.7.3 9.2 3.8 1.3 3.5-.4 7.6-3.9 9.1zM89.3 35.8c-3.6 1.5-7.8-.2-9.2-3.8-1.4-3.6.2-7.7 3.9-9.1 3.6-1.5 7.7.3 9.2 3.8 1.4 3.6-.3 7.7-3.9 9.1zM69.7 17.7l8.9 4.7V9.3l-8.9 2.8c-.2-.3-.5-.6-.9-.9L72.4 0H59.6l3.5 11.2c-.3.3-.6.5-.9.9l-8.8-2.8v13.1l8.8-4.7c.3.3.6.7.9.9l-5 15.4v.1c-.2.8-.4 1.6-.4 2.4 0 4.1 3.1 7.5 7 8.1h.2c.3 0 .7.1 1 .1.4 0 .7 0 1-.1h.2c4-.6 7.1-4.1 7.1-8.1 0-.8-.1-1.7-.4-2.4V34l-5.1-15.4c.4-.2.7-.6 1-.9zM66 92.8c16.9 0 32.8 1.1 47.1 3.2 4-16.9 8.9-26.7 14-33.5l-9.6-3.4c1 4.9 1.1 7.2 0 10.2-1.5-1.4-3-4.3-4.2-8.7L108.6 76c2.8-2 5-3.2 7.5-3.3-4.4 9.4-10 11.9-13.6 11.2-4.3-.8-6.3-4.6-5.6-7.9 1-4.7 5.7-5.9 8-.5 4.3-8.7-3-11.4-7.6-8.8 7.1-7.2 7.9-13.5 2.1-21.1-8 6.1-8.1 12.3-4.5 20.8-4.7-5.4-12.1-2.5-9.5 6.2 3.4-5.2 7.9-2 7.2 3.1-.6 4.3-6.4 7.8-13.5 7.2-10.3-.9-10.9-8-11.2-13.8 2.5-.5 7.1 1.8 11 7.3L80.2 60c-4.1 4.4-8 5.3-12.3 5.4 1.4-4.4 8-11.6 8-11.6H55.5s6.4 7.2 7.9 11.6c-4.2-.1-8-1-12.3-5.4l1.4 16.4c3.9-5.5 8.5-7.7 10.9-7.3-.3 5.8-.9 12.8-11.1 13.8-7.2.6-12.9-2.9-13.5-7.2-.7-5 3.8-8.3 7.1-3.1 2.7-8.7-4.6-11.6-9.4-6.2 3.7-8.5 3.6-14.7-4.6-20.8-5.8 7.6-5 13.9 2.2 21.1-4.7-2.6-11.9.1-7.7 8.8 2.3-5.5 7.1-4.2 8.1.5.7 3.3-1.3 7.1-5.7 7.9-3.5.7-9-1.8-13.5-11.2 2.5.1 4.7 1.3 7.5 3.3l-4.7-15.4c-1.2 4.4-2.7 7.2-4.3 8.7-1.1-3-.9-5.3 0-10.2l-9.5 3.4c5 6.9 9.9 16.7 14 33.5 14.8-2.1 30.8-3.2 47.7-3.2z"
|
|
46
|
-
fill="currentColor"
|
|
38
|
+
width="36">
|
|
39
|
+
<path fill="currentColor"
|
|
47
40
|
fill-rule="evenodd"
|
|
48
|
-
|
|
41
|
+
d="M25 30.2c3.5 1.5 7.7-.2 9.1-3.7 1.5-3.6-.2-7.8-3.9-9.2-3.6-1.4-7.6.3-9.1 3.9-1.4 3.5.3 7.5 3.9 9zM9 39.5c3.6 1.5 7.8-.2 9.2-3.7 1.5-3.6-.2-7.8-3.9-9.1-3.6-1.5-7.6.2-9.1 3.8-1.4 3.5.3 7.5 3.8 9zM4.4 57.2c3.5 1.5 7.7-.2 9.1-3.8 1.5-3.6-.2-7.7-3.9-9.1-3.5-1.5-7.6.3-9.1 3.8-1.4 3.5.3 7.6 3.9 9.1zm38.3-21.4c3.5 1.5 7.7-.2 9.1-3.8 1.5-3.6-.2-7.7-3.9-9.1-3.6-1.5-7.6.3-9.1 3.8-1.3 3.6.4 7.7 3.9 9.1zm64.4-5.6c-3.6 1.5-7.8-.2-9.1-3.7-1.5-3.6.2-7.8 3.8-9.2 3.6-1.4 7.7.3 9.2 3.9 1.3 3.5-.4 7.5-3.9 9zm15.9 9.3c-3.6 1.5-7.7-.2-9.1-3.7-1.5-3.6.2-7.8 3.7-9.1 3.6-1.5 7.7.2 9.2 3.8 1.5 3.5-.3 7.5-3.8 9zm4.7 17.7c-3.6 1.5-7.8-.2-9.2-3.8-1.5-3.6.2-7.7 3.9-9.1 3.6-1.5 7.7.3 9.2 3.8 1.3 3.5-.4 7.6-3.9 9.1zM89.3 35.8c-3.6 1.5-7.8-.2-9.2-3.8-1.4-3.6.2-7.7 3.9-9.1 3.6-1.5 7.7.3 9.2 3.8 1.4 3.6-.3 7.7-3.9 9.1zM69.7 17.7l8.9 4.7V9.3l-8.9 2.8c-.2-.3-.5-.6-.9-.9L72.4 0H59.6l3.5 11.2c-.3.3-.6.5-.9.9l-8.8-2.8v13.1l8.8-4.7c.3.3.6.7.9.9l-5 15.4v.1c-.2.8-.4 1.6-.4 2.4 0 4.1 3.1 7.5 7 8.1h.2c.3 0 .7.1 1 .1.4 0 .7 0 1-.1h.2c4-.6 7.1-4.1 7.1-8.1 0-.8-.1-1.7-.4-2.4V34l-5.1-15.4c.4-.2.7-.6 1-.9zM66 92.8c16.9 0 32.8 1.1 47.1 3.2 4-16.9 8.9-26.7 14-33.5l-9.6-3.4c1 4.9 1.1 7.2 0 10.2-1.5-1.4-3-4.3-4.2-8.7L108.6 76c2.8-2 5-3.2 7.5-3.3-4.4 9.4-10 11.9-13.6 11.2-4.3-.8-6.3-4.6-5.6-7.9 1-4.7 5.7-5.9 8-.5 4.3-8.7-3-11.4-7.6-8.8 7.1-7.2 7.9-13.5 2.1-21.1-8 6.1-8.1 12.3-4.5 20.8-4.7-5.4-12.1-2.5-9.5 6.2 3.4-5.2 7.9-2 7.2 3.1-.6 4.3-6.4 7.8-13.5 7.2-10.3-.9-10.9-8-11.2-13.8 2.5-.5 7.1 1.8 11 7.3L80.2 60c-4.1 4.4-8 5.3-12.3 5.4 1.4-4.4 8-11.6 8-11.6H55.5s6.4 7.2 7.9 11.6c-4.2-.1-8-1-12.3-5.4l1.4 16.4c3.9-5.5 8.5-7.7 10.9-7.3-.3 5.8-.9 12.8-11.1 13.8-7.2.6-12.9-2.9-13.5-7.2-.7-5 3.8-8.3 7.1-3.1 2.7-8.7-4.6-11.6-9.4-6.2 3.7-8.5 3.6-14.7-4.6-20.8-5.8 7.6-5 13.9 2.2 21.1-4.7-2.6-11.9.1-7.7 8.8 2.3-5.5 7.1-4.2 8.1.5.7 3.3-1.3 7.1-5.7 7.9-3.5.7-9-1.8-13.5-11.2 2.5.1 4.7 1.3 7.5 3.3l-4.7-15.4c-1.2 4.4-2.7 7.2-4.3 8.7-1.1-3-.9-5.3 0-10.2l-9.5 3.4c5 6.9 9.9 16.7 14 33.5 14.8-2.1 30.8-3.2 47.7-3.2z">
|
|
49
42
|
</path>
|
|
43
|
+
<image class="govuk-header__logotype-crown-fallback-image"
|
|
44
|
+
height="30"
|
|
45
|
+
src="<%= asset_path('govuk-logotype-crown.png') %>"
|
|
46
|
+
width="36"
|
|
47
|
+
xlink:href="">
|
|
48
|
+
</image>
|
|
50
49
|
</svg>
|
|
51
|
-
<!--<![endif]-->
|
|
52
|
-
<!--[if IE 8]>
|
|
53
|
-
<img src="<%= asset_path('govuk-logotype-crown.png') %>" alt="" class="govuk-header__logotype-crown-fallback-image" width="36" height="32">
|
|
54
|
-
<![endif]-->
|
|
55
50
|
<span class="govuk-header__logotype-text">
|
|
56
51
|
<%= logo_text %>
|
|
57
52
|
</span>
|
|
@@ -81,13 +76,6 @@
|
|
|
81
76
|
type="button"
|
|
82
77
|
>
|
|
83
78
|
Menu
|
|
84
|
-
<span
|
|
85
|
-
aria-hidden="true"
|
|
86
|
-
class="gem-c-layout-super-navigation-header__navigation-top-toggle-close-icon"
|
|
87
|
-
focusable="false"
|
|
88
|
-
>
|
|
89
|
-
×
|
|
90
|
-
</span>
|
|
91
79
|
</button>
|
|
92
80
|
<ul id="super-navigation-menu" class="gem-c-layout-super-navigation-header__navigation-items">
|
|
93
81
|
<% navigation_links.each_with_index do | link, index | %>
|
|
@@ -101,34 +89,34 @@
|
|
|
101
89
|
tracking_label = link[:label].downcase.gsub(/\s+/, "")
|
|
102
90
|
%>
|
|
103
91
|
<%= tag.li class: li_classes do %>
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
</
|
|
92
|
+
<%= link_to link[:label], link[:href], {
|
|
93
|
+
class: "gem-c-layout-super-navigation-header__navigation-item-link",
|
|
94
|
+
data: {
|
|
95
|
+
module: "gem-track-click",
|
|
96
|
+
track_action: "#{tracking_label}Link",
|
|
97
|
+
track_category: "headerClicked",
|
|
98
|
+
track_label: link[:href],
|
|
99
|
+
track_dimension: link[:label],
|
|
100
|
+
track_dimension_index: "29",
|
|
101
|
+
}
|
|
102
|
+
} %>
|
|
103
|
+
<% if has_children %>
|
|
104
|
+
<button
|
|
105
|
+
aria-controls="super-navigation-menu__section-<%= unique_id %>"
|
|
106
|
+
aria-expanded="false"
|
|
107
|
+
aria-label="<%= show_menu_text %>"
|
|
108
|
+
class="gem-c-layout-super-navigation-header__navigation-second-toggle-button"
|
|
109
|
+
data-text-for-hide="<%= hide_menu_text %>"
|
|
110
|
+
data-text-for-show="<%= show_menu_text %>"
|
|
111
|
+
data-toggle-desktop-group="top"
|
|
112
|
+
data-toggle-mobile-group="second"
|
|
113
|
+
data-tracking-key="<%= tracking_label %>"
|
|
114
|
+
hidden
|
|
115
|
+
id="super-navigation-menu__section-<%= unique_id %>-toggle"
|
|
116
|
+
type="button"
|
|
117
|
+
>
|
|
118
|
+
<%= link[:label] %>
|
|
119
|
+
</button>
|
|
132
120
|
<div
|
|
133
121
|
hidden
|
|
134
122
|
class="gem-c-layout-super-navigation-header__navigation-dropdown-menu"
|
|
@@ -164,7 +152,7 @@
|
|
|
164
152
|
track_dimension_index: "29",
|
|
165
153
|
}
|
|
166
154
|
} %>
|
|
167
|
-
<%= tag.p item[:description], class: "govuk-body govuk-!-margin-0
|
|
155
|
+
<%= tag.p item[:description], class: "govuk-body govuk-!-margin-0" if has_description %>
|
|
168
156
|
</li>
|
|
169
157
|
<% end %>
|
|
170
158
|
</ul>
|
|
@@ -226,17 +214,9 @@
|
|
|
226
214
|
<%= search_text %>
|
|
227
215
|
</span>
|
|
228
216
|
<%=
|
|
229
|
-
render "govuk_publishing_components/components/search/search_icon",
|
|
230
|
-
classes: %
|
|
231
|
-
}
|
|
217
|
+
render "govuk_publishing_components/components/search/search_icon",
|
|
218
|
+
classes: %W[gem-c-layout-super-navigation-header__search-toggle-button-link-icon]
|
|
232
219
|
%>
|
|
233
|
-
<span
|
|
234
|
-
aria-hidden="true"
|
|
235
|
-
class="gem-c-layout-super-navigation-header__navigation-top-toggle-close-icon"
|
|
236
|
-
focusable="false"
|
|
237
|
-
>
|
|
238
|
-
×
|
|
239
|
-
</span>
|
|
240
220
|
</button>
|
|
241
221
|
|
|
242
222
|
<div id="super-search-menu" class="gem-c-layout-super-navigation-header__search-items">
|
|
@@ -263,16 +243,14 @@
|
|
|
263
243
|
cy="10.0161"
|
|
264
244
|
r="8.51613"
|
|
265
245
|
stroke="currentColor"
|
|
266
|
-
stroke-width="3"
|
|
267
|
-
/>
|
|
246
|
+
stroke-width="3" />
|
|
268
247
|
<line
|
|
269
248
|
x1="15.8668"
|
|
270
249
|
y1="16.3587"
|
|
271
250
|
x2="25.4475"
|
|
272
251
|
y2="25.9393"
|
|
273
252
|
stroke="currentColor"
|
|
274
|
-
stroke-width="3"
|
|
275
|
-
/>
|
|
253
|
+
stroke-width="3" />
|
|
276
254
|
</svg>
|
|
277
255
|
</a>
|
|
278
256
|
</div>
|
|
@@ -310,20 +288,16 @@
|
|
|
310
288
|
<ul class="govuk-list">
|
|
311
289
|
<% popular_links.each do | popular_link | %>
|
|
312
290
|
<li class="gem-c-layout-super-navigation-header__popular-item">
|
|
313
|
-
|
|
314
|
-
|
|
315
|
-
|
|
316
|
-
|
|
317
|
-
|
|
318
|
-
data:
|
|
319
|
-
|
|
320
|
-
|
|
321
|
-
|
|
322
|
-
|
|
323
|
-
track_dimension: popular_link[:label],
|
|
324
|
-
track_dimension_index: "29",
|
|
325
|
-
}
|
|
326
|
-
} %>
|
|
291
|
+
<a class="govuk-link gem-c-layout-super-navigation-header__popular-link"
|
|
292
|
+
href="<%= popular_link[:href] %>"
|
|
293
|
+
data-module="gem-track-click"
|
|
294
|
+
data-track-action="popularLink"
|
|
295
|
+
data-track-category="headerClicked"
|
|
296
|
+
data-track-label="<%= popular_link[:href] %>"
|
|
297
|
+
data-track-dimension="<%= popular_link[:label] %>"
|
|
298
|
+
data-track-dimension-index="29">
|
|
299
|
+
<%= popular_link[:label] %>
|
|
300
|
+
</a>
|
|
327
301
|
</li>
|
|
328
302
|
<% end %>
|
|
329
303
|
</ul>
|
data/app/views/govuk_publishing_components/components/docs/layout_super_navigation_header.yml
CHANGED
|
@@ -16,21 +16,12 @@ accessibility_criteria: |
|
|
|
16
16
|
|
|
17
17
|
* have a role of banner at the root of the component (<header>) (ARIA 1.1)
|
|
18
18
|
accessibility_excluded_rules:
|
|
19
|
-
|
|
20
|
-
- landmark-
|
|
21
|
-
# Banners will be duplicated in component examples list.
|
|
22
|
-
- duplicate-id
|
|
23
|
-
- duplicate-id-active
|
|
24
|
-
- duplicate-id-aria
|
|
25
|
-
- landmark-no-duplicate-banner
|
|
26
|
-
- landmark-unique
|
|
19
|
+
- landmark-banner-is-top-level # The header element can not be top level in the examples
|
|
20
|
+
- landmark-no-duplicate-banner # banners will be duplicated in component examples list
|
|
27
21
|
examples:
|
|
28
22
|
default:
|
|
29
23
|
with_custom_logo_link:
|
|
30
|
-
description:
|
|
31
|
-
The header logo links to root by default. This option allows us to override that in certain instances.
|
|
32
|
-
|
|
33
|
-
Remember to update the title, as the default is "Go to the GOV.UK homepage".
|
|
24
|
+
description: The header logo links to root by default. This option allows us to override that in certain instances. Remember to change the title, as the default is "Go to the GOV.UK homepage".
|
|
34
25
|
data:
|
|
35
26
|
logo_link: "https://www.example.com"
|
|
36
27
|
logo_link_title: "Go to example"
|
metadata
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
|
2
2
|
name: govuk_publishing_components
|
|
3
3
|
version: !ruby/object:Gem::Version
|
|
4
|
-
version: 27.
|
|
4
|
+
version: 27.10.0
|
|
5
5
|
platform: ruby
|
|
6
6
|
authors:
|
|
7
7
|
- GOV.UK Dev
|
|
8
8
|
autorequire:
|
|
9
9
|
bindir: bin
|
|
10
10
|
cert_chain: []
|
|
11
|
-
date: 2021-10-
|
|
11
|
+
date: 2021-10-29 00:00:00.000000000 Z
|
|
12
12
|
dependencies:
|
|
13
13
|
- !ruby/object:Gem::Dependency
|
|
14
14
|
name: govuk_app_config
|