dxw_govuk_frontend_rails 3.13.1 → 4.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +4 -4
- data/.github/workflows/test.yml +0 -4
- data/Gemfile.lock +1 -1
- data/lib/dxw_govuk_frontend_rails/version.rb +1 -1
- data/package-lock.json +5 -12
- data/package.json +1 -1
- data/vendor/assets/javascripts/govuk_frontend_rails.js +272 -75
- data/vendor/assets/stylesheets/components/accordion/_index.scss +275 -98
- data/vendor/assets/stylesheets/components/cookie-banner/_index.scss +0 -2
- data/vendor/assets/stylesheets/components/error-message/_index.scss +1 -0
- data/vendor/assets/stylesheets/components/footer/_index.scss +3 -37
- data/vendor/assets/stylesheets/components/header/_index.scss +10 -4
- data/vendor/assets/stylesheets/components/hint/_index.scss +1 -3
- data/vendor/assets/stylesheets/components/input/_index.scss +1 -1
- data/vendor/assets/stylesheets/components/panel/_index.scss +13 -1
- data/vendor/assets/stylesheets/components/select/_index.scss +1 -1
- data/vendor/assets/stylesheets/components/skip-link/_index.scss +13 -0
- data/vendor/assets/stylesheets/components/summary-list/_index.scss +15 -23
- data/vendor/assets/stylesheets/components/tabs/_index.scss +2 -2
- data/vendor/assets/stylesheets/components/tag/_index.scss +0 -5
- data/vendor/assets/stylesheets/components/textarea/_index.scss +1 -1
- data/vendor/assets/stylesheets/core/_all.scss +0 -1
- data/vendor/assets/stylesheets/core/_global-styles.scss +0 -6
- data/vendor/assets/stylesheets/core/_links.scss +0 -6
- data/vendor/assets/stylesheets/core/_lists.scss +0 -6
- data/vendor/assets/stylesheets/core/_section-break.scss +0 -6
- data/vendor/assets/stylesheets/core/_typography.scss +0 -6
- data/vendor/assets/stylesheets/helpers/_spacing.scss +22 -4
- data/vendor/assets/stylesheets/objects/_all.scss +1 -0
- data/vendor/assets/stylesheets/objects/_main-wrapper.scss +15 -30
- data/vendor/assets/stylesheets/objects/_template.scss +32 -0
- data/vendor/assets/stylesheets/overrides/_all.scss +1 -0
- data/vendor/assets/stylesheets/overrides/_display.scss +0 -6
- data/vendor/assets/stylesheets/overrides/_spacing.scss +0 -6
- data/vendor/assets/stylesheets/overrides/_text-align.scss +14 -0
- data/vendor/assets/stylesheets/overrides/_typography.scss +0 -6
- data/vendor/assets/stylesheets/overrides/_width.scss +0 -6
- data/vendor/assets/stylesheets/settings/_colours-organisations.scss +3 -0
- data/vendor/assets/stylesheets/settings/_measurements.scss +0 -10
- data/vendor/assets/stylesheets/tools/_all.scss +0 -1
- metadata +5 -3
@@ -1,38 +1,36 @@
|
|
1
1
|
@include govuk-exports("govuk/component/accordion") {
|
2
|
+
$govuk-accordion-base-colour: govuk-colour("black");
|
3
|
+
$govuk-accordion-hover-colour: govuk-colour("light-grey", $legacy: "grey-3");
|
4
|
+
$govuk-accordion-icon-focus-colour: govuk-colour("yellow");
|
5
|
+
$govuk-accordion-bottom-border-width: 1px;
|
6
|
+
|
2
7
|
.govuk-accordion {
|
3
8
|
@include govuk-responsive-margin(6, "bottom");
|
4
9
|
}
|
5
10
|
|
6
|
-
// Borders between accordion sections
|
7
11
|
.govuk-accordion__section {
|
8
12
|
padding-top: govuk-spacing(3);
|
9
13
|
}
|
10
14
|
|
11
|
-
.govuk-accordion__section-header {
|
12
|
-
padding-top: govuk-spacing(3);
|
13
|
-
padding-bottom: govuk-spacing(3);
|
14
|
-
}
|
15
|
-
|
16
15
|
.govuk-accordion__section-heading {
|
17
16
|
// Override browser defaults to ensure consistent element height
|
18
|
-
|
19
|
-
|
17
|
+
margin-top: 0;
|
18
|
+
margin-bottom: 0;
|
20
19
|
|
21
|
-
|
22
|
-
|
20
|
+
padding-top: govuk-spacing(3);
|
21
|
+
padding-bottom: govuk-spacing(3);
|
23
22
|
}
|
24
23
|
|
25
|
-
// Buttons within the sections don’t need default styling
|
26
24
|
.govuk-accordion__section-button {
|
27
|
-
@include govuk-
|
28
|
-
|
25
|
+
@include govuk-text-colour;
|
26
|
+
|
27
|
+
display: block;
|
29
28
|
margin-bottom: 0;
|
30
29
|
padding-top: govuk-spacing(3);
|
31
30
|
}
|
32
31
|
|
33
|
-
.govuk-accordion__section-
|
34
|
-
|
35
|
-
margin-bottom: 0;
|
32
|
+
.govuk-accordion__section-heading-text {
|
33
|
+
@include govuk-font($size: 24, $weight: bold);
|
36
34
|
}
|
37
35
|
|
38
36
|
// Remove the bottom margin from the last item inside the content
|
@@ -44,10 +42,9 @@
|
|
44
42
|
.js-enabled {
|
45
43
|
.govuk-accordion {
|
46
44
|
// Border at the bottom of the whole accordion
|
47
|
-
border-bottom:
|
45
|
+
border-bottom: $govuk-accordion-bottom-border-width solid $govuk-border-colour;
|
48
46
|
}
|
49
47
|
|
50
|
-
// Borders between accordion sections
|
51
48
|
.govuk-accordion__section {
|
52
49
|
padding-top: 0;
|
53
50
|
}
|
@@ -55,8 +52,7 @@
|
|
55
52
|
// Hide the body of collapsed sections
|
56
53
|
.govuk-accordion__section-content {
|
57
54
|
display: none;
|
58
|
-
@include govuk-responsive-padding(
|
59
|
-
@include govuk-responsive-padding(3, "bottom");
|
55
|
+
@include govuk-responsive-padding(8, "bottom");
|
60
56
|
}
|
61
57
|
|
62
58
|
// Show the body of expanded sections
|
@@ -64,54 +60,209 @@
|
|
64
60
|
display: block;
|
65
61
|
}
|
66
62
|
|
67
|
-
|
68
|
-
|
69
|
-
@include govuk-font($size: 16);
|
63
|
+
.govuk-accordion__show-all {
|
64
|
+
@include govuk-font($size: 19);
|
70
65
|
position: relative;
|
71
66
|
z-index: 1;
|
72
|
-
|
73
|
-
|
67
|
+
|
68
|
+
margin-bottom: 9px;
|
69
|
+
padding: govuk-spacing(1) 2px govuk-spacing(1) 0;
|
70
|
+
|
74
71
|
border-width: 0;
|
72
|
+
|
75
73
|
color: $govuk-link-colour;
|
76
74
|
background: none;
|
75
|
+
|
77
76
|
cursor: pointer;
|
78
77
|
-webkit-appearance: none;
|
79
78
|
|
80
|
-
@include govuk-
|
81
|
-
|
79
|
+
@include govuk-media-query ($from: desktop) {
|
80
|
+
margin-bottom: 14px;
|
81
|
+
}
|
82
82
|
|
83
83
|
// Remove default button focus outline in Firefox
|
84
84
|
&::-moz-focus-inner {
|
85
85
|
padding: 0;
|
86
86
|
border: 0;
|
87
87
|
}
|
88
|
+
|
89
|
+
&:hover {
|
90
|
+
color: $govuk-accordion-base-colour;
|
91
|
+
background: $govuk-accordion-hover-colour;
|
92
|
+
// The GOV.UK Design System focus state adds a box-shadow to the top and bottom of the
|
93
|
+
// button. We add a grey box-shadow on hover too, to make the height of the hover state
|
94
|
+
// match the height of the focus state.
|
95
|
+
box-shadow: 0 -2px $govuk-accordion-hover-colour, 0 4px $govuk-accordion-hover-colour;
|
96
|
+
|
97
|
+
.govuk-accordion__section-toggle-text {
|
98
|
+
color: $govuk-accordion-base-colour;
|
99
|
+
}
|
100
|
+
|
101
|
+
.govuk-accordion-nav__chevron {
|
102
|
+
color: $govuk-accordion-base-colour;
|
103
|
+
background: $govuk-accordion-base-colour;
|
104
|
+
}
|
105
|
+
|
106
|
+
.govuk-accordion-nav__chevron:after {
|
107
|
+
color: $govuk-accordion-hover-colour;
|
108
|
+
}
|
109
|
+
}
|
110
|
+
|
111
|
+
&:focus {
|
112
|
+
@include govuk-focused-text;
|
113
|
+
|
114
|
+
.govuk-accordion-nav__chevron {
|
115
|
+
background: $govuk-accordion-base-colour;
|
116
|
+
}
|
117
|
+
|
118
|
+
.govuk-accordion-nav__chevron:after {
|
119
|
+
color: $govuk-accordion-icon-focus-colour;
|
120
|
+
}
|
121
|
+
}
|
122
|
+
}
|
123
|
+
|
124
|
+
.govuk-accordion__section-heading {
|
125
|
+
padding: 0;
|
88
126
|
}
|
89
127
|
|
90
|
-
//
|
91
|
-
.govuk-
|
128
|
+
// Create Chevron icon aligned with text
|
129
|
+
.govuk-accordion-nav__chevron {
|
130
|
+
box-sizing: border-box;
|
131
|
+
display: inline-block;
|
132
|
+
|
92
133
|
position: relative;
|
93
|
-
|
94
|
-
|
95
|
-
|
96
|
-
|
134
|
+
|
135
|
+
// Set size using rems to make the icon scale with text if user resizes text in their browser
|
136
|
+
width: govuk-px-to-rem(20px);
|
137
|
+
height: govuk-px-to-rem(20px);
|
138
|
+
|
139
|
+
border: govuk-px-to-rem(1px) solid;
|
140
|
+
border-radius: 50%;
|
141
|
+
|
142
|
+
vertical-align: middle;
|
143
|
+
|
144
|
+
// IE8 fallback of icon
|
145
|
+
@include govuk-if-ie8 {
|
146
|
+
display: inline-block;
|
147
|
+
max-height: 20px;
|
148
|
+
line-height: 1;
|
149
|
+
}
|
150
|
+
|
151
|
+
// Create inner chevron arrow
|
152
|
+
&:after {
|
153
|
+
content: "";
|
154
|
+
box-sizing: border-box;
|
155
|
+
display: block;
|
156
|
+
|
157
|
+
position: absolute;
|
158
|
+
bottom: govuk-px-to-rem(5px);
|
159
|
+
left: govuk-px-to-rem(6px);
|
160
|
+
|
161
|
+
width: govuk-px-to-rem(6px);
|
162
|
+
height: govuk-px-to-rem(6px);
|
163
|
+
|
164
|
+
-webkit-transform: rotate(-45deg);
|
165
|
+
|
166
|
+
-ms-transform: rotate(-45deg);
|
167
|
+
|
168
|
+
transform: rotate(-45deg);
|
169
|
+
|
170
|
+
border-top: govuk-px-to-rem(2px) solid;
|
171
|
+
border-right: govuk-px-to-rem(2px) solid;
|
172
|
+
|
173
|
+
// IE8 fallback of icon with HTML symbol
|
174
|
+
@include govuk-if-ie8 {
|
175
|
+
content: "\25B2"; // "▲"
|
176
|
+
position: relative;
|
177
|
+
border: 0;
|
178
|
+
}
|
179
|
+
}
|
180
|
+
}
|
181
|
+
|
182
|
+
// Rotate icon to create "Down" version
|
183
|
+
.govuk-accordion-nav__chevron--down {
|
184
|
+
-webkit-transform: rotate(180deg);
|
185
|
+
-ms-transform: rotate(180deg);
|
186
|
+
transform: rotate(180deg);
|
187
|
+
|
188
|
+
// IE8 fallback of arrow icon
|
189
|
+
@include govuk-if-ie8 {
|
190
|
+
&:after {
|
191
|
+
content: "\25BC"; // "▼"
|
192
|
+
-webkit-transform: none;
|
193
|
+
-ms-transform: none;
|
194
|
+
transform: none;
|
195
|
+
}
|
196
|
+
}
|
97
197
|
}
|
98
198
|
|
99
|
-
// Buttons within the headers don’t need default styling
|
100
199
|
.govuk-accordion__section-button {
|
101
|
-
|
102
|
-
|
103
|
-
|
104
|
-
|
105
|
-
|
106
|
-
|
107
|
-
|
200
|
+
width: 100%;
|
201
|
+
|
202
|
+
padding: govuk-spacing(2) 0 0 0;
|
203
|
+
|
204
|
+
border: 0;
|
205
|
+
|
206
|
+
border-top: $govuk-accordion-bottom-border-width solid $govuk-border-colour;
|
207
|
+
|
208
|
+
// Visually separate the section from the one underneath when user changes colours in their
|
209
|
+
// browser. See https://github.com/alphagov/govuk-frontend/issues/2321#issuecomment-924201488
|
210
|
+
border-bottom: govuk-spacing(2) solid transparent;
|
211
|
+
|
212
|
+
color: $govuk-text-colour;
|
108
213
|
background: none;
|
214
|
+
|
109
215
|
text-align: left;
|
216
|
+
// Section headers have a pointer cursor as an additional affordance
|
110
217
|
cursor: pointer;
|
111
218
|
-webkit-appearance: none;
|
112
219
|
|
220
|
+
@include govuk-media-query ($from: tablet) {
|
221
|
+
padding-bottom: govuk-spacing(2);
|
222
|
+
}
|
223
|
+
|
224
|
+
&:active {
|
225
|
+
color: $govuk-link-active-colour;
|
226
|
+
background: none;
|
227
|
+
}
|
228
|
+
|
229
|
+
&:hover {
|
230
|
+
color: $govuk-accordion-base-colour;
|
231
|
+
background: $govuk-accordion-hover-colour;
|
232
|
+
|
233
|
+
.govuk-accordion__section-toggle-text {
|
234
|
+
color: $govuk-accordion-base-colour;
|
235
|
+
}
|
236
|
+
|
237
|
+
.govuk-accordion-nav__chevron {
|
238
|
+
color: $govuk-accordion-base-colour;
|
239
|
+
background: $govuk-accordion-base-colour;
|
240
|
+
}
|
241
|
+
|
242
|
+
.govuk-accordion-nav__chevron:after {
|
243
|
+
color: $govuk-accordion-hover-colour;
|
244
|
+
}
|
245
|
+
}
|
246
|
+
|
113
247
|
&:focus {
|
114
|
-
|
248
|
+
// Remove default focus border around button as
|
249
|
+
// styling is being applied to inner text elements that receive focus
|
250
|
+
outline: 0;
|
251
|
+
|
252
|
+
.govuk-accordion__section-heading-text-focus,
|
253
|
+
.govuk-accordion__section-summary-focus,
|
254
|
+
.govuk-accordion__section-toggle-focus {
|
255
|
+
@include govuk-focused-text;
|
256
|
+
}
|
257
|
+
|
258
|
+
.govuk-accordion-nav__chevron {
|
259
|
+
color: $govuk-accordion-base-colour;
|
260
|
+
background: $govuk-accordion-base-colour;
|
261
|
+
}
|
262
|
+
|
263
|
+
.govuk-accordion-nav__chevron:after {
|
264
|
+
color: $govuk-accordion-icon-focus-colour;
|
265
|
+
}
|
115
266
|
}
|
116
267
|
|
117
268
|
// Remove default button focus outline in Firefox
|
@@ -121,77 +272,103 @@
|
|
121
272
|
}
|
122
273
|
}
|
123
274
|
|
124
|
-
//
|
125
|
-
.
|
126
|
-
|
127
|
-
|
128
|
-
|
129
|
-
|
130
|
-
bottom: 0;
|
131
|
-
left: 0;
|
275
|
+
// Remove the transparent border when the section is expanded to make it clear that the heading
|
276
|
+
// relates to the content below. Adjust padding to maintain the height of the element.
|
277
|
+
// See https://github.com/alphagov/govuk-frontend/pull/2257#issuecomment-951920798
|
278
|
+
.govuk-accordion__section--expanded .govuk-accordion__section-button {
|
279
|
+
padding-bottom: govuk-spacing(4);
|
280
|
+
border-bottom: 0;
|
132
281
|
}
|
133
282
|
|
134
|
-
|
135
|
-
|
136
|
-
|
283
|
+
// As Chevron icon is vertically aligned it overlaps with the focus state bottom border
|
284
|
+
// Styling adds some spacing
|
285
|
+
.govuk-accordion__section-button:focus .govuk-accordion__section-toggle-focus {
|
286
|
+
padding-bottom: 3px;
|
137
287
|
|
138
|
-
|
139
|
-
|
140
|
-
|
141
|
-
text-underline-offset: $govuk-link-underline-offset;
|
288
|
+
@include govuk-media-query ($from: desktop) {
|
289
|
+
padding-bottom: 2px;
|
290
|
+
}
|
142
291
|
}
|
143
292
|
|
144
|
-
|
145
|
-
|
146
|
-
|
147
|
-
|
148
|
-
|
293
|
+
.govuk-accordion__section-toggle,
|
294
|
+
.govuk-accordion__section-heading-text,
|
295
|
+
.govuk-accordion__section-summary {
|
296
|
+
display: block;
|
297
|
+
margin-bottom: 13px;
|
298
|
+
|
299
|
+
.govuk-accordion__section-heading-text-focus,
|
300
|
+
.govuk-accordion__section-summary-focus,
|
301
|
+
.govuk-accordion__section-toggle-focus {
|
302
|
+
display: inline;
|
149
303
|
}
|
150
304
|
}
|
151
305
|
|
152
|
-
.
|
153
|
-
|
306
|
+
// Add toggle link with Chevron icon on left.
|
307
|
+
.govuk-accordion__section-toggle {
|
308
|
+
@include govuk-font($size: 19);
|
309
|
+
color: $govuk-link-colour;
|
154
310
|
}
|
155
311
|
|
156
|
-
//
|
157
|
-
//
|
158
|
-
.
|
159
|
-
|
160
|
-
|
161
|
-
|
162
|
-
|
163
|
-
height: 16px;
|
164
|
-
margin-top: -8px;
|
312
|
+
// Add space between the icon and text.
|
313
|
+
// Avoid applying spacing directly to the icon as the use of `transform` will change the
|
314
|
+
// placement of any margins.
|
315
|
+
.govuk-accordion__show-all-text,
|
316
|
+
.govuk-accordion__section-toggle-text {
|
317
|
+
margin-left: govuk-spacing(1);
|
318
|
+
vertical-align: middle;
|
165
319
|
}
|
166
320
|
|
167
|
-
|
168
|
-
|
169
|
-
|
170
|
-
|
171
|
-
|
172
|
-
|
173
|
-
|
174
|
-
|
175
|
-
|
176
|
-
|
177
|
-
|
178
|
-
|
179
|
-
|
180
|
-
|
181
|
-
|
182
|
-
|
183
|
-
|
184
|
-
|
185
|
-
|
321
|
+
// Background colour adjustment when user changes colours in Firefox
|
322
|
+
//
|
323
|
+
// When user changes colours in Firefox, text colour inside <button> is always black
|
324
|
+
// (regardless of the custom colours the user has set). This is fine when the text in the
|
325
|
+
// button is not nested inside another element because when user changes colours in Firefox,
|
326
|
+
// the immediate background colour of buttons is always white (again, regardless of user's
|
327
|
+
// custom colours).
|
328
|
+
//
|
329
|
+
// However, when the text inside <button> is wrapped inside another element AND that element
|
330
|
+
// sets a background colour, the text colour is still black but the background of that nested
|
331
|
+
// element gets the user's custom background colour. When the custom background is a lighter
|
332
|
+
// hue, the contrast might be sufficient. But if the user's custom background colour is a
|
333
|
+
// darker colour, the contrast with the text might not be sufficient.
|
334
|
+
//
|
335
|
+
// To ensure sufficient contrast, override the background colour set by the focus state on the
|
336
|
+
// nested elements to be transparent.
|
337
|
+
//
|
338
|
+
// Also override the background colour of the Show/Hide chevrons which set a background colour
|
339
|
+
// on hover.
|
340
|
+
@media screen and (forced-colors: active) {
|
341
|
+
.govuk-accordion__show-all:hover,
|
342
|
+
.govuk-accordion__section-button:hover {
|
343
|
+
.govuk-accordion-nav__chevron {
|
344
|
+
background-color: transparent;
|
345
|
+
}
|
346
|
+
}
|
186
347
|
|
187
|
-
|
188
|
-
|
348
|
+
.govuk-accordion__show-all:focus,
|
349
|
+
.govuk-accordion__section-button:focus {
|
350
|
+
.govuk-accordion__section-heading-text-focus,
|
351
|
+
.govuk-accordion__section-summary-focus,
|
352
|
+
.govuk-accordion__section-toggle-focus,
|
353
|
+
.govuk-accordion-nav__chevron {
|
354
|
+
background: transparent;
|
355
|
+
background-color: transparent;
|
356
|
+
}
|
357
|
+
}
|
189
358
|
}
|
190
359
|
|
191
|
-
//
|
192
|
-
|
193
|
-
|
194
|
-
|
360
|
+
// For devices that can't hover such as touch devices,
|
361
|
+
// remove hover state as it can be stuck in that state (iOS).
|
362
|
+
@media (hover: none) {
|
363
|
+
.govuk-accordion__section-header:hover {
|
364
|
+
border-top-color: $govuk-border-colour;
|
365
|
+
|
366
|
+
box-shadow: inset 0 3px 0 0 $govuk-link-colour;
|
367
|
+
|
368
|
+
.govuk-accordion__section-button {
|
369
|
+
border-top-color: $govuk-border-colour;
|
370
|
+
}
|
371
|
+
}
|
195
372
|
}
|
196
373
|
}
|
197
374
|
}
|
@@ -152,8 +152,9 @@
|
|
152
152
|
}
|
153
153
|
|
154
154
|
.govuk-footer__heading {
|
155
|
-
|
155
|
+
margin-bottom: govuk-spacing(6);
|
156
156
|
padding-bottom: govuk-spacing(4);
|
157
|
+
|
157
158
|
@include govuk-media-query ($until: tablet) {
|
158
159
|
padding-bottom: govuk-spacing(2);
|
159
160
|
}
|
@@ -161,50 +162,15 @@
|
|
161
162
|
}
|
162
163
|
|
163
164
|
.govuk-footer__navigation {
|
164
|
-
|
165
|
-
display: -webkit-flex;
|
166
|
-
display: -ms-flexbox;
|
167
|
-
display: flex; // Support: Flexbox
|
165
|
+
@include govuk-clearfix;
|
168
166
|
margin-right: -$govuk-gutter-half;
|
169
167
|
margin-left: -$govuk-gutter-half;
|
170
|
-
-webkit-flex-wrap: wrap;
|
171
|
-
-ms-flex-wrap: wrap;
|
172
|
-
flex-wrap: wrap; // Support: Flexbox
|
173
168
|
}
|
174
169
|
|
175
170
|
.govuk-footer__section {
|
176
171
|
display: inline-block;
|
177
|
-
margin-right: $govuk-gutter-half;
|
178
172
|
margin-bottom: $govuk-gutter;
|
179
|
-
margin-left: $govuk-gutter-half;
|
180
173
|
vertical-align: top;
|
181
|
-
// Ensure columns take up equal width (typically one-half:one-half)
|
182
|
-
-webkit-box-flex: 1;
|
183
|
-
-webkit-flex-grow: 1;
|
184
|
-
-ms-flex-positive: 1;
|
185
|
-
flex-grow: 1; // Support: Flexbox
|
186
|
-
-webkit-flex-shrink: 1;
|
187
|
-
-ms-flex-negative: 1;
|
188
|
-
flex-shrink: 1; // Support: Flexbox
|
189
|
-
@include govuk-media-query ($until: desktop) {
|
190
|
-
// Make sure columns do not drop below 200px in width
|
191
|
-
// Will typically result in wrapping, and end up in a single column on smaller screens.
|
192
|
-
-webkit-flex-basis: 200px;
|
193
|
-
-ms-flex-preferred-size: 200px;
|
194
|
-
flex-basis: 200px; // Support: Flexbox
|
195
|
-
}
|
196
|
-
}
|
197
|
-
|
198
|
-
// If there are only two sections, set the layout to be two-third:one-third on desktop
|
199
|
-
@include govuk-media-query ($from: desktop) {
|
200
|
-
// We match the first section with `:first-child`.
|
201
|
-
// To ensure the section is one of two, we can count backwards using `:nth-last-child(2)`.
|
202
|
-
.govuk-footer__section:first-child:nth-last-child(2) {
|
203
|
-
-webkit-box-flex: 2;
|
204
|
-
-webkit-flex-grow: 2;
|
205
|
-
-ms-flex-positive: 2;
|
206
|
-
flex-grow: 2; // Support: Flexbox
|
207
|
-
}
|
208
174
|
}
|
209
175
|
|
210
176
|
.govuk-footer__list {
|
@@ -207,8 +207,13 @@
|
|
207
207
|
}
|
208
208
|
|
209
209
|
.govuk-header__navigation {
|
210
|
-
@include govuk-
|
211
|
-
|
210
|
+
@include govuk-media-query ($from: desktop) {
|
211
|
+
margin-bottom: govuk-spacing(2);
|
212
|
+
}
|
213
|
+
}
|
214
|
+
|
215
|
+
.govuk-header__navigation-list {
|
216
|
+
// Reset user-agent default list styles
|
212
217
|
margin: 0;
|
213
218
|
padding: 0;
|
214
219
|
list-style: none;
|
@@ -222,14 +227,14 @@
|
|
222
227
|
}
|
223
228
|
}
|
224
229
|
|
225
|
-
.govuk-header__navigation {
|
230
|
+
.govuk-header__navigation-list {
|
226
231
|
display: none;
|
227
232
|
@include govuk-media-query ($from: desktop) {
|
228
233
|
display: block;
|
229
234
|
}
|
230
235
|
}
|
231
236
|
|
232
|
-
.govuk-header__navigation--open {
|
237
|
+
.govuk-header__navigation-list--open {
|
233
238
|
display: block;
|
234
239
|
}
|
235
240
|
}
|
@@ -281,6 +286,7 @@
|
|
281
286
|
|
282
287
|
.govuk-header__navigation-item:last-child {
|
283
288
|
margin-right: 0;
|
289
|
+
border-bottom: 0;
|
284
290
|
}
|
285
291
|
|
286
292
|
@include govuk-media-query($media-type: print) {
|
@@ -2,8 +2,6 @@
|
|
2
2
|
.govuk-hint {
|
3
3
|
@include govuk-font($size: 19);
|
4
4
|
|
5
|
-
display: block;
|
6
|
-
|
7
5
|
margin-bottom: govuk-spacing(3);
|
8
6
|
|
9
7
|
color: $govuk-secondary-text-colour;
|
@@ -39,6 +37,6 @@
|
|
39
37
|
|
40
38
|
// Reduces visual spacing of legend when there is a hint
|
41
39
|
.govuk-fieldset__legend + .govuk-hint {
|
42
|
-
margin-top:
|
40
|
+
margin-top: govuk-spacing(-1);
|
43
41
|
}
|
44
42
|
}
|
@@ -12,7 +12,19 @@
|
|
12
12
|
text-align: center;
|
13
13
|
|
14
14
|
@include govuk-media-query($until: tablet) {
|
15
|
-
padding: govuk-spacing(
|
15
|
+
padding: govuk-spacing(3) - $govuk-border-width;
|
16
|
+
|
17
|
+
// This is an if-all-else-fails attempt to stop long words from overflowing the container
|
18
|
+
// on very narrow viewports by forcing them to break and wrap instead. This
|
19
|
+
// overflowing is more likely to happen when user increases text size on a mobile eg. using
|
20
|
+
// iOS Safari text resize controls.
|
21
|
+
//
|
22
|
+
// The overflowing is a particular problem with the panel component since it uses white
|
23
|
+
// text: when the text overflows the container, it is invisible on the white (page)
|
24
|
+
// background. When the text in our other components overflow, the user might have to scroll
|
25
|
+
// horizontally to view it but the the text remains legible.
|
26
|
+
overflow-wrap: break-word;
|
27
|
+
word-wrap: break-word; // Support IE (autoprefixer doesn't add this as it's not a prefix)
|
16
28
|
}
|
17
29
|
}
|
18
30
|
|
@@ -33,4 +33,17 @@
|
|
33
33
|
}
|
34
34
|
}
|
35
35
|
}
|
36
|
+
|
37
|
+
.govuk-skip-link-focused-element {
|
38
|
+
&:focus {
|
39
|
+
// Remove the native visible focus indicator when the element is programmatically focused.
|
40
|
+
//
|
41
|
+
// We set the focus on the linked element (this is usually the <main> element) when the skip
|
42
|
+
// link is activated to improve screen reader announcements. However, we remove the visible
|
43
|
+
// focus indicator from the linked element because the user cannot interact with it.
|
44
|
+
//
|
45
|
+
// A related discussion: https://github.com/w3c/wcag/issues/1001
|
46
|
+
outline: none;
|
47
|
+
}
|
48
|
+
}
|
36
49
|
}
|