dxw_govuk_frontend_rails 3.14.0 → 4.6.0
Sign up to get free protection for your applications and to get access to all the features.
- 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 +4527 -2376
- data/vendor/assets/stylesheets/all-ie8.scss +8 -0
- data/vendor/assets/stylesheets/components/_all.scss +2 -1
- data/vendor/assets/stylesheets/components/accordion/_index.scss +294 -99
- data/vendor/assets/stylesheets/components/back-link/_index.scss +20 -20
- data/vendor/assets/stylesheets/components/breadcrumbs/_index.scss +22 -13
- data/vendor/assets/stylesheets/components/button/_index.scss +37 -27
- data/vendor/assets/stylesheets/components/character-count/_index.scss +9 -0
- data/vendor/assets/stylesheets/components/checkboxes/_index.scss +9 -8
- 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/file-upload/_index.scss +6 -1
- data/vendor/assets/stylesheets/components/footer/_index.scss +16 -67
- data/vendor/assets/stylesheets/components/header/_index.scss +44 -26
- data/vendor/assets/stylesheets/components/hint/_index.scss +1 -3
- data/vendor/assets/stylesheets/components/input/_index.scss +29 -27
- data/vendor/assets/stylesheets/components/pagination/_index.scss +247 -0
- data/vendor/assets/stylesheets/components/pagination/_pagination.scss +2 -0
- data/vendor/assets/stylesheets/components/panel/_index.scss +1 -1
- data/vendor/assets/stylesheets/components/radios/_index.scss +10 -17
- data/vendor/assets/stylesheets/components/select/_index.scss +19 -2
- data/vendor/assets/stylesheets/components/skip-link/_index.scss +14 -3
- data/vendor/assets/stylesheets/components/summary-list/_index.scss +164 -33
- data/vendor/assets/stylesheets/components/table/_index.scss +1 -1
- data/vendor/assets/stylesheets/components/tabs/_index.scss +2 -2
- data/vendor/assets/stylesheets/components/tag/_index.scss +18 -23
- data/vendor/assets/stylesheets/components/textarea/_index.scss +9 -2
- data/vendor/assets/stylesheets/core/_all.scss +1 -1
- data/vendor/assets/stylesheets/core/_global-styles.scss +0 -6
- data/vendor/assets/stylesheets/core/_govuk-frontend-version.scss +5 -0
- 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 +1 -7
- data/vendor/assets/stylesheets/core/_typography.scss +0 -6
- data/vendor/assets/stylesheets/helpers/_colour.scss +10 -7
- data/vendor/assets/stylesheets/helpers/_focused.scss +6 -1
- data/vendor/assets/stylesheets/helpers/_font-faces.scss +1 -1
- data/vendor/assets/stylesheets/helpers/_links.scss +13 -11
- data/vendor/assets/stylesheets/helpers/_media-queries.scss +2 -2
- data/vendor/assets/stylesheets/helpers/_shape-arrow.scss +1 -1
- data/vendor/assets/stylesheets/helpers/_spacing.scss +3 -3
- data/vendor/assets/stylesheets/helpers/_typography.scss +16 -9
- data/vendor/assets/stylesheets/objects/_all.scss +1 -0
- data/vendor/assets/stylesheets/objects/_button-group.scss +10 -26
- data/vendor/assets/stylesheets/objects/_main-wrapper.scss +15 -30
- data/vendor/assets/stylesheets/objects/_template.scss +32 -0
- data/vendor/assets/stylesheets/objects/_width-container.scss +1 -5
- data/vendor/assets/stylesheets/overrides/_display.scss +0 -6
- data/vendor/assets/stylesheets/overrides/_spacing.scss +56 -18
- data/vendor/assets/stylesheets/overrides/_text-align.scss +0 -6
- data/vendor/assets/stylesheets/overrides/_typography.scss +0 -6
- data/vendor/assets/stylesheets/overrides/_width.scss +0 -6
- data/vendor/assets/stylesheets/settings/_all.scss +1 -0
- data/vendor/assets/stylesheets/settings/_colours-organisations.scss +7 -0
- data/vendor/assets/stylesheets/settings/_colours-palette.scss +12 -0
- data/vendor/assets/stylesheets/settings/_compatibility.scss +26 -0
- data/vendor/assets/stylesheets/settings/_ie8.scss +16 -0
- data/vendor/assets/stylesheets/settings/_links.scss +5 -1
- data/vendor/assets/stylesheets/settings/_measurements.scss +5 -15
- data/vendor/assets/stylesheets/settings/_spacing.scss +4 -8
- data/vendor/assets/stylesheets/settings/_typography-font.scss +23 -0
- data/vendor/assets/stylesheets/settings/_typography-responsive.scss +12 -0
- data/vendor/assets/stylesheets/settings/_warnings.scss +53 -0
- data/vendor/assets/stylesheets/tools/_all.scss +0 -1
- data/vendor/assets/stylesheets/tools/_compatibility.scss +20 -6
- data/vendor/assets/stylesheets/tools/_exports.scss +1 -1
- data/vendor/assets/stylesheets/tools/_font-url.scss +1 -1
- data/vendor/assets/stylesheets/tools/_ie8.scss +38 -2
- data/vendor/assets/stylesheets/tools/_image-url.scss +1 -1
- data/vendor/assets/stylesheets/tools/_px-to-em.scss +2 -2
- data/vendor/assets/stylesheets/tools/_px-to-rem.scss +1 -1
- metadata +8 -3
@@ -1,10 +1,13 @@
|
|
1
1
|
@include govuk-exports("govuk/component/breadcrumbs") {
|
2
|
+
// Component font-size on the Frontend (used for calculations)
|
3
|
+
$font-size: 16;
|
2
4
|
|
3
5
|
// Size of chevron (excluding border)
|
4
|
-
$chevron-size: 7px;
|
6
|
+
$chevron-size: govuk-em(7px, $font-size);
|
5
7
|
|
6
8
|
// Size of chevron border
|
7
|
-
$chevron-border-width: 1px;
|
9
|
+
$chevron-border-min-width: 1px;
|
10
|
+
$chevron-border-width: govuk-em($chevron-border-min-width, $font-size);
|
8
11
|
|
9
12
|
// Colour of chevron
|
10
13
|
$chevron-border-colour: $govuk-secondary-text-colour;
|
@@ -13,10 +16,10 @@
|
|
13
16
|
// of length 8 (7px + 1px border):
|
14
17
|
//
|
15
18
|
// √(8² + 8²) * 0.5 ≅ 5.655
|
16
|
-
$chevron-altitude-calculated: 5.655px;
|
19
|
+
$chevron-altitude-calculated: govuk-em(5.655px, $font-size);
|
17
20
|
|
18
21
|
.govuk-breadcrumbs {
|
19
|
-
@include govuk-font($size:
|
22
|
+
@include govuk-font($size: $font-size);
|
20
23
|
@include govuk-text-colour;
|
21
24
|
|
22
25
|
margin-top: govuk-spacing(3);
|
@@ -40,8 +43,8 @@
|
|
40
43
|
|
41
44
|
// Add both margin and padding such that the chevron appears centrally
|
42
45
|
// between each breadcrumb item
|
43
|
-
margin-left: govuk-spacing(2);
|
44
|
-
padding-left: govuk-spacing(2) + $chevron-altitude-calculated;
|
46
|
+
margin-left: govuk-em(govuk-spacing(2), $font-size);
|
47
|
+
padding-left: govuk-em(govuk-spacing(2), $font-size) + $chevron-altitude-calculated;
|
45
48
|
|
46
49
|
float: left;
|
47
50
|
|
@@ -55,8 +58,9 @@
|
|
55
58
|
@if $govuk-use-legacy-font {
|
56
59
|
// Begin adjustments for font baseline offset
|
57
60
|
// These should be removed when legacy font support is dropped
|
58
|
-
|
59
|
-
|
61
|
+
$offset: govuk-em(1px, $font-size);
|
62
|
+
top: $offset * -1;
|
63
|
+
bottom: $offset;
|
60
64
|
} @else {
|
61
65
|
top: 0;
|
62
66
|
bottom: 0;
|
@@ -78,11 +82,18 @@
|
|
78
82
|
transform: rotate(45deg);
|
79
83
|
|
80
84
|
border: solid;
|
81
|
-
border-width: $chevron-border-width $chevron-border-width 0 0;
|
85
|
+
border-width: $chevron-border-min-width $chevron-border-min-width 0 0;
|
82
86
|
border-color: $chevron-border-colour;
|
83
87
|
|
88
|
+
@supports (border-width: unquote("max(0px)")) {
|
89
|
+
border-width: unquote("max(#{$chevron-border-min-width}, #{$chevron-border-width}) max(#{$chevron-border-min-width}, #{$chevron-border-width})") 0 0;
|
90
|
+
|
91
|
+
// Ensure that the chevron never gets smaller than 16px
|
92
|
+
font-size: unquote("max(#{$font-size * 1px}, 1em)");
|
93
|
+
}
|
94
|
+
|
84
95
|
// Fall back to a greater than sign for IE8
|
85
|
-
@include
|
96
|
+
@include _govuk-if-ie8 {
|
86
97
|
content: "\003e"; // Greater than sign (>)
|
87
98
|
width: auto;
|
88
99
|
height: auto;
|
@@ -122,14 +133,12 @@
|
|
122
133
|
}
|
123
134
|
|
124
135
|
&:before {
|
125
|
-
top: 6px;
|
136
|
+
top: govuk-em(6px, $font-size);
|
126
137
|
margin: 0;
|
127
138
|
}
|
128
139
|
}
|
129
140
|
|
130
141
|
.govuk-breadcrumbs__list {
|
131
|
-
display: -webkit-box;
|
132
|
-
display: -webkit-flex;
|
133
142
|
display: -ms-flexbox;
|
134
143
|
display: flex;
|
135
144
|
}
|
@@ -1,8 +1,26 @@
|
|
1
|
+
////
|
2
|
+
/// @group components/button
|
3
|
+
////
|
4
|
+
|
5
|
+
/// Button component background colour
|
6
|
+
///
|
7
|
+
/// @type Colour
|
8
|
+
/// @access public
|
9
|
+
|
10
|
+
$govuk-button-background-colour: govuk-colour("green", $legacy: #00823b) !default;
|
11
|
+
|
12
|
+
/// Button component text colour
|
13
|
+
///
|
14
|
+
/// @type Colour
|
15
|
+
/// @access public
|
16
|
+
|
17
|
+
$govuk-button-text-colour: govuk-colour("white") !default;
|
18
|
+
|
1
19
|
@include govuk-exports("govuk/component/button") {
|
2
|
-
$govuk-button-colour: govuk-colour
|
20
|
+
$govuk-button-colour: $govuk-button-background-colour;
|
3
21
|
$govuk-button-hover-colour: govuk-shade($govuk-button-colour, 20%);
|
4
22
|
$govuk-button-shadow-colour: govuk-shade($govuk-button-colour, 60%);
|
5
|
-
$govuk-button-text-colour: govuk-colour
|
23
|
+
$govuk-button-text-colour: $govuk-button-text-colour;
|
6
24
|
|
7
25
|
// Secondary button variables
|
8
26
|
$govuk-secondary-button-colour: govuk-colour("light-grey", $legacy: "grey-3");
|
@@ -43,7 +61,7 @@
|
|
43
61
|
cursor: pointer;
|
44
62
|
-webkit-appearance: none;
|
45
63
|
|
46
|
-
@include
|
64
|
+
@include _govuk-if-ie8 {
|
47
65
|
border-bottom: $button-shadow-size solid $govuk-button-shadow-colour;
|
48
66
|
}
|
49
67
|
|
@@ -74,7 +92,7 @@
|
|
74
92
|
// Bump the button down so it looks like its being pressed in
|
75
93
|
top: $button-shadow-size;
|
76
94
|
|
77
|
-
@include
|
95
|
+
@include _govuk-if-ie8 {
|
78
96
|
border-bottom-width: 0;
|
79
97
|
}
|
80
98
|
}
|
@@ -85,11 +103,11 @@
|
|
85
103
|
// backgrounds and box-shadows disappear, so we need to ensure there's a
|
86
104
|
// transparent outline which will be set to a visible colour.
|
87
105
|
// Since Internet Explorer 8 does not support box-shadow, we want to force the user-agent outlines
|
88
|
-
@include
|
106
|
+
@include _govuk-not-ie8 {
|
89
107
|
outline: $govuk-focus-width solid transparent;
|
90
108
|
}
|
91
109
|
// Since Internet Explorer does not support `:not()` we set a clearer focus style to match user-agent outlines.
|
92
|
-
@include
|
110
|
+
@include _govuk-if-ie8 {
|
93
111
|
color: $govuk-focus-text-colour;
|
94
112
|
background-color: $govuk-focus-colour;
|
95
113
|
}
|
@@ -101,7 +119,7 @@
|
|
101
119
|
// we need to override the text colour for that combination of selectors so
|
102
120
|
// so that unvisited links styled as buttons do not end up with dark blue
|
103
121
|
// text when focussed.
|
104
|
-
@include
|
122
|
+
@include _govuk-compatibility(govuk_template) {
|
105
123
|
&:link:focus {
|
106
124
|
color: $govuk-button-text-colour;
|
107
125
|
}
|
@@ -148,6 +166,8 @@
|
|
148
166
|
}
|
149
167
|
}
|
150
168
|
|
169
|
+
// @deprecated Disabling buttons using the .govuk-button--disabled class is
|
170
|
+
// deprecated and will be removed in the next major version.
|
151
171
|
.govuk-button--disabled,
|
152
172
|
.govuk-button[disabled="disabled"],
|
153
173
|
.govuk-button[disabled] {
|
@@ -155,13 +175,13 @@
|
|
155
175
|
|
156
176
|
&:hover {
|
157
177
|
background-color: $govuk-button-colour;
|
158
|
-
cursor:
|
178
|
+
cursor: not-allowed;
|
159
179
|
}
|
160
180
|
|
161
181
|
&:active {
|
162
182
|
top: 0;
|
163
183
|
box-shadow: 0 $button-shadow-size 0 $govuk-button-shadow-colour; // s0
|
164
|
-
@include
|
184
|
+
@include _govuk-if-ie8 {
|
165
185
|
border-bottom: $button-shadow-size solid $govuk-button-shadow-colour; // s0
|
166
186
|
}
|
167
187
|
}
|
@@ -184,7 +204,7 @@
|
|
184
204
|
// we need to override the text colour for that combination of selectors so
|
185
205
|
// so that unvisited links styled as buttons do not end up with dark blue
|
186
206
|
// text when focussed.
|
187
|
-
@include
|
207
|
+
@include _govuk-compatibility(govuk_template) {
|
188
208
|
&:link:focus {
|
189
209
|
color: $govuk-secondary-button-text-colour;
|
190
210
|
}
|
@@ -216,7 +236,7 @@
|
|
216
236
|
// we need to override the text colour for that combination of selectors so
|
217
237
|
// so that unvisited links styled as buttons do not end up with dark blue
|
218
238
|
// text when focussed.
|
219
|
-
@include
|
239
|
+
@include _govuk-compatibility(govuk_template) {
|
220
240
|
&:link:focus {
|
221
241
|
color: $govuk-warning-button-text-colour;
|
222
242
|
}
|
@@ -235,22 +255,14 @@
|
|
235
255
|
@include govuk-typography-weight-bold;
|
236
256
|
@include govuk-typography-responsive($size: 24, $override-line-height: 1);
|
237
257
|
|
238
|
-
display: -webkit-inline-box;
|
239
|
-
|
240
|
-
display: -webkit-inline-flex;
|
241
|
-
|
242
258
|
display: -ms-inline-flexbox;
|
243
259
|
|
244
260
|
display: inline-flex;
|
245
261
|
min-height: auto;
|
246
262
|
|
247
|
-
-
|
248
|
-
|
249
|
-
-webkit-justify-content: center;
|
250
|
-
|
251
|
-
-ms-flex-pack: center;
|
263
|
+
-ms-flex-pack: center;
|
252
264
|
|
253
|
-
|
265
|
+
justify-content: center;
|
254
266
|
}
|
255
267
|
|
256
268
|
.govuk-button__start-icon {
|
@@ -260,12 +272,10 @@
|
|
260
272
|
margin-left: govuk-spacing(2);
|
261
273
|
}
|
262
274
|
vertical-align: middle;
|
263
|
-
-
|
264
|
-
|
265
|
-
|
266
|
-
|
267
|
-
-ms-flex-item-align: center;
|
268
|
-
align-self: center;
|
275
|
+
-ms-flex-negative: 0;
|
276
|
+
flex-shrink: 0;
|
277
|
+
-ms-flex-item-align: center;
|
278
|
+
align-self: center;
|
269
279
|
// Work around SVGs not inheriting color from parent in forced color mode
|
270
280
|
// (https://github.com/w3c/csswg-drafts/issues/6310)
|
271
281
|
forced-color-adjust: auto;
|
@@ -17,6 +17,15 @@
|
|
17
17
|
@include govuk-font($size: false, $tabular: true);
|
18
18
|
margin-top: 0;
|
19
19
|
margin-bottom: 0;
|
20
|
+
|
21
|
+
&:after {
|
22
|
+
// Zero-width space that will reserve vertical space when no hint is provided
|
23
|
+
// as:
|
24
|
+
// - setting a min-height is not possible without a magic number
|
25
|
+
// because the line-height is set by the `govuk-font` call above
|
26
|
+
// - using `:empty` is not possible as the hint macro outputs line breaks
|
27
|
+
content: "\200B";
|
28
|
+
}
|
20
29
|
}
|
21
30
|
|
22
31
|
.govuk-character-count__message--disabled {
|
@@ -36,7 +36,7 @@
|
|
36
36
|
|
37
37
|
// IE8 doesn’t support pseudo-elements, so we don’t want to hide native
|
38
38
|
// elements there.
|
39
|
-
@include
|
39
|
+
@include _govuk-not-ie8 {
|
40
40
|
position: absolute;
|
41
41
|
|
42
42
|
z-index: 1;
|
@@ -50,7 +50,7 @@
|
|
50
50
|
opacity: 0;
|
51
51
|
}
|
52
52
|
|
53
|
-
@include
|
53
|
+
@include _govuk-if-ie8 {
|
54
54
|
margin-top: 10px;
|
55
55
|
margin-right: $govuk-checkboxes-size / -2;
|
56
56
|
margin-left: $govuk-checkboxes-size / -2;
|
@@ -73,7 +73,7 @@
|
|
73
73
|
touch-action: manipulation;
|
74
74
|
}
|
75
75
|
|
76
|
-
@include
|
76
|
+
@include _govuk-not-ie8 {
|
77
77
|
// [ ] Check box
|
78
78
|
.govuk-checkboxes__label:before {
|
79
79
|
content: "";
|
@@ -83,7 +83,7 @@
|
|
83
83
|
left: 0;
|
84
84
|
width: $govuk-checkboxes-size;
|
85
85
|
height: $govuk-checkboxes-size;
|
86
|
-
border: $govuk-border-width-form-element solid
|
86
|
+
border: $govuk-border-width-form-element solid currentcolor;
|
87
87
|
background: transparent;
|
88
88
|
}
|
89
89
|
|
@@ -152,10 +152,11 @@
|
|
152
152
|
// Disabled state
|
153
153
|
.govuk-checkboxes__input:disabled,
|
154
154
|
.govuk-checkboxes__input:disabled + .govuk-checkboxes__label {
|
155
|
-
cursor:
|
155
|
+
cursor: not-allowed;
|
156
156
|
}
|
157
157
|
|
158
|
-
.govuk-checkboxes__input:disabled + .govuk-checkboxes__label
|
158
|
+
.govuk-checkboxes__input:disabled + .govuk-checkboxes__label,
|
159
|
+
.govuk-checkboxes__input:disabled ~ .govuk-hint {
|
159
160
|
opacity: .5;
|
160
161
|
}
|
161
162
|
|
@@ -228,11 +229,11 @@
|
|
228
229
|
// ▲┆└─ Check box pseudo element, aligned with margin
|
229
230
|
// └─── Touch target (invisible input), shifted into the margin
|
230
231
|
.govuk-checkboxes__input {
|
231
|
-
@include
|
232
|
+
@include _govuk-not-ie8 {
|
232
233
|
left: $input-offset * -1;
|
233
234
|
}
|
234
235
|
|
235
|
-
@include
|
236
|
+
@include _govuk-if-ie8 {
|
236
237
|
margin-left: $govuk-small-checkboxes-size * -1;
|
237
238
|
}
|
238
239
|
}
|
@@ -30,7 +30,7 @@
|
|
30
30
|
// yellow focus state.
|
31
31
|
box-shadow: inset 0 0 0 4px $govuk-input-border-colour;
|
32
32
|
|
33
|
-
@include
|
33
|
+
@include _govuk-if-ie8 {
|
34
34
|
// IE8 doesn't support `box-shadow` so add an actual border
|
35
35
|
border: 4px solid $govuk-input-border-colour;
|
36
36
|
}
|
@@ -46,5 +46,10 @@
|
|
46
46
|
|
47
47
|
box-shadow: inset 0 0 0 4px $govuk-input-border-colour;
|
48
48
|
}
|
49
|
+
|
50
|
+
&:disabled {
|
51
|
+
opacity: .5;
|
52
|
+
cursor: not-allowed;
|
53
|
+
}
|
49
54
|
}
|
50
55
|
}
|
@@ -8,7 +8,7 @@
|
|
8
8
|
$govuk-footer-text: $govuk-text-colour;
|
9
9
|
$govuk-footer-link-hover-colour: null; // Only used with the legacy palette
|
10
10
|
|
11
|
-
@if
|
11
|
+
@if $govuk-use-legacy-palette {
|
12
12
|
$govuk-footer-border-top: #a1acb2;
|
13
13
|
$govuk-footer-border: govuk-colour("grey-2");
|
14
14
|
$govuk-footer-text: #454a4c;
|
@@ -35,7 +35,7 @@
|
|
35
35
|
.govuk-footer__link {
|
36
36
|
@include govuk-link-common;
|
37
37
|
|
38
|
-
@if
|
38
|
+
@if $govuk-use-legacy-palette {
|
39
39
|
&:link,
|
40
40
|
&:visited {
|
41
41
|
color: $govuk-footer-text;
|
@@ -52,7 +52,7 @@
|
|
52
52
|
// alphagov/govuk_template includes a specific a:link:focus selector
|
53
53
|
// designed to make unvisited links a slightly darker blue when focussed, so
|
54
54
|
// we need to override the text colour for that combination of selectors.
|
55
|
-
@include
|
55
|
+
@include _govuk-compatibility(govuk_template) {
|
56
56
|
&:link:focus {
|
57
57
|
@include govuk-text-colour;
|
58
58
|
}
|
@@ -67,23 +67,16 @@
|
|
67
67
|
}
|
68
68
|
|
69
69
|
.govuk-footer__meta {
|
70
|
-
display: -webkit-box;
|
71
|
-
display: -webkit-flex;
|
72
70
|
display: -ms-flexbox;
|
73
71
|
display: flex; // Support: Flexbox
|
74
72
|
margin-right: -$govuk-gutter-half;
|
75
73
|
margin-left: -$govuk-gutter-half;
|
76
|
-
-
|
77
|
-
|
78
|
-
|
79
|
-
|
80
|
-
-
|
81
|
-
-
|
82
|
-
align-items: flex-end; // Support: Flexbox
|
83
|
-
-webkit-box-pack: center;
|
84
|
-
-webkit-justify-content: center;
|
85
|
-
-ms-flex-pack: center;
|
86
|
-
justify-content: center; // Support: Flexbox
|
74
|
+
-ms-flex-wrap: wrap;
|
75
|
+
flex-wrap: wrap; // Support: Flexbox
|
76
|
+
-ms-flex-align: end;
|
77
|
+
align-items: flex-end; // Support: Flexbox
|
78
|
+
-ms-flex-pack: center;
|
79
|
+
justify-content: center; // Support: Flexbox
|
87
80
|
}
|
88
81
|
|
89
82
|
.govuk-footer__meta-item {
|
@@ -93,14 +86,11 @@
|
|
93
86
|
}
|
94
87
|
|
95
88
|
.govuk-footer__meta-item--grow {
|
96
|
-
-
|
97
|
-
|
98
|
-
-ms-flex: 1;
|
99
|
-
flex: 1; // Support: Flexbox
|
89
|
+
-ms-flex: 1;
|
90
|
+
flex: 1; // Support: Flexbox
|
100
91
|
@include govuk-media-query ($until: tablet) {
|
101
|
-
-
|
102
|
-
|
103
|
-
flex-basis: 320px; // Support: Flexbox
|
92
|
+
-ms-flex-preferred-size: 320px;
|
93
|
+
flex-basis: 320px; // Support: Flexbox
|
104
94
|
}
|
105
95
|
}
|
106
96
|
|
@@ -152,8 +142,9 @@
|
|
152
142
|
}
|
153
143
|
|
154
144
|
.govuk-footer__heading {
|
155
|
-
|
145
|
+
margin-bottom: govuk-spacing(6);
|
156
146
|
padding-bottom: govuk-spacing(4);
|
147
|
+
|
157
148
|
@include govuk-media-query ($until: tablet) {
|
158
149
|
padding-bottom: govuk-spacing(2);
|
159
150
|
}
|
@@ -161,50 +152,15 @@
|
|
161
152
|
}
|
162
153
|
|
163
154
|
.govuk-footer__navigation {
|
164
|
-
|
165
|
-
display: -webkit-flex;
|
166
|
-
display: -ms-flexbox;
|
167
|
-
display: flex; // Support: Flexbox
|
155
|
+
@include govuk-clearfix;
|
168
156
|
margin-right: -$govuk-gutter-half;
|
169
157
|
margin-left: -$govuk-gutter-half;
|
170
|
-
-webkit-flex-wrap: wrap;
|
171
|
-
-ms-flex-wrap: wrap;
|
172
|
-
flex-wrap: wrap; // Support: Flexbox
|
173
158
|
}
|
174
159
|
|
175
160
|
.govuk-footer__section {
|
176
161
|
display: inline-block;
|
177
|
-
margin-right: $govuk-gutter-half;
|
178
162
|
margin-bottom: $govuk-gutter;
|
179
|
-
margin-left: $govuk-gutter-half;
|
180
163
|
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
164
|
}
|
209
165
|
|
210
166
|
.govuk-footer__list {
|
@@ -213,13 +169,6 @@
|
|
213
169
|
list-style: none;
|
214
170
|
-webkit-column-gap: $govuk-gutter;
|
215
171
|
column-gap: $govuk-gutter; // Support: Columns
|
216
|
-
|
217
|
-
// Disable thicker underlines on hover because of a bug in Chromium
|
218
|
-
// affecting links within columns
|
219
|
-
// https://bugs.chromium.org/p/chromium/issues/detail?id=1190987
|
220
|
-
.govuk-footer__link:hover {
|
221
|
-
text-decoration-thickness: auto;
|
222
|
-
}
|
223
172
|
}
|
224
173
|
|
225
174
|
@include govuk-media-query ($from: desktop) {
|
@@ -58,7 +58,7 @@
|
|
58
58
|
position: relative;
|
59
59
|
top: -1px;
|
60
60
|
margin-right: 1px;
|
61
|
-
fill:
|
61
|
+
fill: currentcolor;
|
62
62
|
vertical-align: top;
|
63
63
|
}
|
64
64
|
|
@@ -91,7 +91,7 @@
|
|
91
91
|
text-decoration: underline;
|
92
92
|
text-decoration-thickness: $govuk-header-link-underline-thickness;
|
93
93
|
|
94
|
-
@if
|
94
|
+
@if $govuk-link-underline-offset {
|
95
95
|
text-underline-offset: $govuk-link-underline-offset;
|
96
96
|
}
|
97
97
|
}
|
@@ -111,6 +111,16 @@
|
|
111
111
|
font-size: 30px; // We don't have a mixin that produces 30px font size
|
112
112
|
line-height: 1;
|
113
113
|
|
114
|
+
@include govuk-media-query($from: tablet) {
|
115
|
+
display: inline;
|
116
|
+
|
117
|
+
&:focus {
|
118
|
+
// Replicate the focus box shadow but without the -2px y-offset of the first yellow shadow
|
119
|
+
// This is to stop the logo getting cut off by the box shadow when focused on above a product name
|
120
|
+
box-shadow: 0 0 $govuk-focus-colour;
|
121
|
+
}
|
122
|
+
}
|
123
|
+
|
114
124
|
&:link,
|
115
125
|
&:visited {
|
116
126
|
text-decoration: none;
|
@@ -132,6 +142,9 @@
|
|
132
142
|
}
|
133
143
|
}
|
134
144
|
|
145
|
+
// The govuk-header__link--service-name class is deprecated - use
|
146
|
+
// govuk-header__service-name instead.
|
147
|
+
.govuk-header__service-name,
|
135
148
|
.govuk-header__link--service-name {
|
136
149
|
display: inline-block;
|
137
150
|
margin-bottom: govuk-spacing(2);
|
@@ -180,7 +193,7 @@
|
|
180
193
|
-webkit-text-decoration: solid underline $govuk-header-link-underline-thickness;
|
181
194
|
text-decoration: solid underline $govuk-header-link-underline-thickness;
|
182
195
|
|
183
|
-
@if
|
196
|
+
@if $govuk-link-underline-offset {
|
184
197
|
text-underline-offset: $govuk-link-underline-offset;
|
185
198
|
}
|
186
199
|
}
|
@@ -195,42 +208,38 @@
|
|
195
208
|
margin-left: govuk-spacing(1);
|
196
209
|
}
|
197
210
|
|
211
|
+
&[aria-expanded="true"]:after {
|
212
|
+
@include govuk-shape-arrow($direction: up, $base: 10px, $display: inline-block);
|
213
|
+
}
|
214
|
+
|
198
215
|
@include govuk-media-query ($from: tablet) {
|
199
216
|
top: govuk-spacing(3);
|
200
217
|
}
|
201
|
-
}
|
202
218
|
|
203
|
-
|
204
|
-
|
205
|
-
|
219
|
+
.js-enabled & {
|
220
|
+
display: block;
|
221
|
+
}
|
222
|
+
|
223
|
+
&[hidden],
|
224
|
+
.js-enabled &[hidden] {
|
225
|
+
display: none;
|
206
226
|
}
|
207
227
|
}
|
208
228
|
|
209
229
|
.govuk-header__navigation {
|
210
|
-
@include govuk-
|
211
|
-
|
230
|
+
@include govuk-media-query ($from: desktop) {
|
231
|
+
margin-bottom: govuk-spacing(2);
|
232
|
+
}
|
233
|
+
}
|
234
|
+
|
235
|
+
.govuk-header__navigation-list {
|
236
|
+
// Reset user-agent default list styles
|
212
237
|
margin: 0;
|
213
238
|
padding: 0;
|
214
239
|
list-style: none;
|
215
|
-
}
|
216
|
-
|
217
|
-
.js-enabled {
|
218
|
-
.govuk-header__menu-button {
|
219
|
-
display: block;
|
220
|
-
@include govuk-media-query ($from: desktop) {
|
221
|
-
display: none;
|
222
|
-
}
|
223
|
-
}
|
224
240
|
|
225
|
-
|
241
|
+
&[hidden] {
|
226
242
|
display: none;
|
227
|
-
@include govuk-media-query ($from: desktop) {
|
228
|
-
display: block;
|
229
|
-
}
|
230
|
-
}
|
231
|
-
|
232
|
-
.govuk-header__navigation--open {
|
233
|
-
display: block;
|
234
243
|
}
|
235
244
|
}
|
236
245
|
|
@@ -242,6 +251,8 @@
|
|
242
251
|
}
|
243
252
|
}
|
244
253
|
|
254
|
+
// The govuk-header__navigation--no-service-name class is deprecated and will
|
255
|
+
// be removed in the next major release.
|
245
256
|
.govuk-header__navigation--no-service-name {
|
246
257
|
padding-top: govuk-spacing(7);
|
247
258
|
}
|
@@ -271,6 +282,12 @@
|
|
271
282
|
color: $govuk-header-link-active;
|
272
283
|
}
|
273
284
|
|
285
|
+
// When printing, use the normal blue as this contrasts better with the
|
286
|
+
// white printing header
|
287
|
+
@include govuk-media-query($media-type: print) {
|
288
|
+
color: $govuk-brand-colour;
|
289
|
+
}
|
290
|
+
|
274
291
|
// When focussed, the text colour needs to be darker to ensure that colour
|
275
292
|
// contrast is still acceptable
|
276
293
|
&:focus {
|
@@ -281,6 +298,7 @@
|
|
281
298
|
|
282
299
|
.govuk-header__navigation-item:last-child {
|
283
300
|
margin-right: 0;
|
301
|
+
border-bottom: 0;
|
284
302
|
}
|
285
303
|
|
286
304
|
@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
|
}
|