dxw_govuk_frontend_rails 3.9.1 → 3.13.1
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/Gemfile.lock +2 -2
- data/README.md +61 -40
- data/lib/dxw_govuk_frontend_rails/version.rb +1 -1
- data/package-lock.json +22 -4
- data/package.json +1 -1
- data/vendor/assets/javascripts/govuk_frontend_rails.js +119 -4
- data/vendor/assets/stylesheets/components/_all.scss +2 -0
- data/vendor/assets/stylesheets/components/accordion/_index.scss +7 -16
- data/vendor/assets/stylesheets/components/back-link/_index.scss +4 -15
- data/vendor/assets/stylesheets/components/breadcrumbs/_index.scss +1 -0
- data/vendor/assets/stylesheets/components/button/_index.scss +15 -8
- data/vendor/assets/stylesheets/components/character-count/_index.scss +1 -0
- data/vendor/assets/stylesheets/components/checkboxes/_index.scss +63 -34
- data/vendor/assets/stylesheets/components/cookie-banner/_cookie-banner.scss +2 -0
- data/vendor/assets/stylesheets/components/cookie-banner/_index.scss +51 -0
- data/vendor/assets/stylesheets/components/details/_index.scss +7 -2
- data/vendor/assets/stylesheets/components/error-summary/_index.scss +2 -12
- data/vendor/assets/stylesheets/components/file-upload/_index.scss +14 -14
- data/vendor/assets/stylesheets/components/footer/_index.scss +39 -29
- data/vendor/assets/stylesheets/components/header/_index.scss +44 -22
- data/vendor/assets/stylesheets/components/input/_index.scss +4 -0
- data/vendor/assets/stylesheets/components/notification-banner/_index.scss +89 -0
- data/vendor/assets/stylesheets/components/notification-banner/_notification-banner.scss +2 -0
- data/vendor/assets/stylesheets/components/phase-banner/_index.scss +1 -1
- data/vendor/assets/stylesheets/components/radios/_index.scss +14 -0
- data/vendor/assets/stylesheets/components/skip-link/_index.scss +3 -1
- data/vendor/assets/stylesheets/components/table/_index.scss +21 -0
- data/vendor/assets/stylesheets/components/tabs/_index.scss +1 -6
- data/vendor/assets/stylesheets/components/warning-text/_index.scss +10 -1
- data/vendor/assets/stylesheets/core/_links.scss +8 -0
- data/vendor/assets/stylesheets/core/_template.scss +0 -1
- data/vendor/assets/stylesheets/helpers/_colour.scss +2 -2
- data/vendor/assets/stylesheets/helpers/_links.scss +245 -30
- data/vendor/assets/stylesheets/objects/_all.scss +1 -0
- data/vendor/assets/stylesheets/objects/_button-group.scss +101 -0
- data/vendor/assets/stylesheets/objects/_width-container.scss +4 -0
- data/vendor/assets/stylesheets/settings/_all.scss +2 -0
- data/vendor/assets/stylesheets/settings/_colours-applied.scss +9 -0
- data/vendor/assets/stylesheets/settings/_links.scss +62 -0
- data/vendor/assets/stylesheets/settings/_typography-font.scss +3 -0
- metadata +9 -3
@@ -121,6 +121,20 @@
|
|
121
121
|
// Focused state
|
122
122
|
.govuk-radios__input:focus + .govuk-radios__label:before {
|
123
123
|
border-width: 4px;
|
124
|
+
|
125
|
+
// When colours are overridden, the yellow box-shadow becomes invisible
|
126
|
+
// which means the focus state is less obvious. By adding a transparent
|
127
|
+
// outline, which becomes solid (text-coloured) in that context, we ensure
|
128
|
+
// the focus remains clearly visible.
|
129
|
+
outline: $govuk-focus-width solid transparent;
|
130
|
+
outline-offset: 1px;
|
131
|
+
|
132
|
+
// When in an explicit forced-color mode, we can use the Highlight system
|
133
|
+
// color for the outline to better match focus states of native controls
|
134
|
+
@media screen and (forced-colors: active), (-ms-high-contrast: active) {
|
135
|
+
outline-color: Highlight;
|
136
|
+
}
|
137
|
+
|
124
138
|
box-shadow: 0 0 0 $govuk-radios-focus-width $govuk-focus-colour;
|
125
139
|
}
|
126
140
|
|
@@ -2,6 +2,7 @@
|
|
2
2
|
.govuk-skip-link {
|
3
3
|
@include govuk-visually-hidden-focusable;
|
4
4
|
@include govuk-typography-common;
|
5
|
+
@include govuk-link-decoration;
|
5
6
|
@include govuk-link-style-text;
|
6
7
|
@include govuk-typography-responsive($size: 16);
|
7
8
|
|
@@ -10,7 +11,9 @@
|
|
10
11
|
|
11
12
|
// Respect 'display cutout' safe area (avoids notches and rounded corners)
|
12
13
|
@supports (padding: unquote("max(calc(0px))")) {
|
14
|
+
$padding-safe-area-right: -webkit-calc(#{govuk-spacing(3)} + env(safe-area-inset-right));
|
13
15
|
$padding-safe-area-right: calc(#{govuk-spacing(3)} + env(safe-area-inset-right));
|
16
|
+
$padding-safe-area-left: -webkit-calc(#{govuk-spacing(3)} + env(safe-area-inset-left));
|
14
17
|
$padding-safe-area-left: calc(#{govuk-spacing(3)} + env(safe-area-inset-left));
|
15
18
|
|
16
19
|
// Use max() to pick largest padding, default or with safe area
|
@@ -27,7 +30,6 @@
|
|
27
30
|
// Undo unwanted changes when global styles are enabled
|
28
31
|
@if ($govuk-global-styles) {
|
29
32
|
box-shadow: none;
|
30
|
-
text-decoration: underline;
|
31
33
|
}
|
32
34
|
}
|
33
35
|
}
|
@@ -47,4 +47,25 @@
|
|
47
47
|
display: table-caption;
|
48
48
|
text-align: left;
|
49
49
|
}
|
50
|
+
|
51
|
+
// Modifiers that make captions look more like their equivalent headings
|
52
|
+
|
53
|
+
.govuk-table__caption--xl {
|
54
|
+
@include govuk-font($size: 48, $weight: bold);
|
55
|
+
margin-bottom: govuk-spacing(3);
|
56
|
+
}
|
57
|
+
|
58
|
+
.govuk-table__caption--l {
|
59
|
+
@include govuk-font($size: 36, $weight: bold);
|
60
|
+
margin-bottom: govuk-spacing(3);
|
61
|
+
}
|
62
|
+
|
63
|
+
.govuk-table__caption--m {
|
64
|
+
@include govuk-font($size: 24, $weight: bold);
|
65
|
+
margin-bottom: govuk-spacing(3);
|
66
|
+
}
|
67
|
+
|
68
|
+
.govuk-table__caption--s {
|
69
|
+
@include govuk-font($size: 19, $weight: bold);
|
70
|
+
}
|
50
71
|
}
|
@@ -30,16 +30,11 @@
|
|
30
30
|
}
|
31
31
|
|
32
32
|
.govuk-tabs__tab {
|
33
|
+
@include govuk-link-common;
|
33
34
|
@include govuk-link-style-default;
|
34
35
|
|
35
36
|
display: inline-block;
|
36
37
|
margin-bottom: govuk-spacing(2);
|
37
|
-
|
38
|
-
// Focus state for mobile and when JavaScript is disabled
|
39
|
-
// It is removed for JS-enabled desktop styles
|
40
|
-
&:focus {
|
41
|
-
@include govuk-focused-text;
|
42
|
-
}
|
43
38
|
}
|
44
39
|
|
45
40
|
.govuk-tabs__panel {
|
@@ -43,9 +43,18 @@
|
|
43
43
|
// Prevent the exclamation mark from being included when the warning text
|
44
44
|
// is copied, for example.
|
45
45
|
-webkit-user-select: none;
|
46
|
-
-moz-user-select: none;
|
47
46
|
-ms-user-select: none;
|
48
47
|
user-select: none;
|
48
|
+
|
49
|
+
// Improve rendering in Windows High Contrast Mode (Edge), where a
|
50
|
+
// readability backplate behind the exclamation mark obscures the circle
|
51
|
+
forced-color-adjust: none;
|
52
|
+
|
53
|
+
@media screen and (forced-colors: active) {
|
54
|
+
border-color: windowText;
|
55
|
+
color: windowText;
|
56
|
+
background: transparent;
|
57
|
+
}
|
49
58
|
}
|
50
59
|
|
51
60
|
.govuk-warning-text__text {
|
@@ -27,6 +27,14 @@
|
|
27
27
|
@include govuk-link-style-text;
|
28
28
|
}
|
29
29
|
|
30
|
+
.govuk-link--inverse {
|
31
|
+
@include govuk-link-style-inverse;
|
32
|
+
}
|
33
|
+
|
34
|
+
.govuk-link--no-underline {
|
35
|
+
@include govuk-link-style-no-underline;
|
36
|
+
}
|
37
|
+
|
30
38
|
.govuk-link--no-visited-state {
|
31
39
|
@include govuk-link-style-no-visited-state;
|
32
40
|
}
|
@@ -15,7 +15,6 @@
|
|
15
15
|
// Prevent automatic text sizing, as we already cater for small devices and
|
16
16
|
// would like the browser to stay on 100% text zoom by default.
|
17
17
|
-webkit-text-size-adjust: 100%;
|
18
|
-
-moz-text-size-adjust: 100%;
|
19
18
|
-ms-text-size-adjust: 100%;
|
20
19
|
text-size-adjust: 100%;
|
21
20
|
|
@@ -75,7 +75,7 @@
|
|
75
75
|
/// Make a colour darker by mixing it with black
|
76
76
|
///
|
77
77
|
/// @param {Colour} $colour - colour to shade
|
78
|
-
/// @param {Number} $percentage - percentage of `$colour` in returned
|
78
|
+
/// @param {Number} $percentage - percentage of `$colour` in returned colour
|
79
79
|
/// @return {Colour}
|
80
80
|
/// @access public
|
81
81
|
|
@@ -86,7 +86,7 @@
|
|
86
86
|
/// Make a colour lighter by mixing it with white
|
87
87
|
///
|
88
88
|
/// @param {Colour} $colour - colour to tint
|
89
|
-
/// @param {Number} $percentage - percentage of `$colour` in returned
|
89
|
+
/// @param {Number} $percentage - percentage of `$colour` in returned colour
|
90
90
|
/// @return {Colour}
|
91
91
|
/// @access public
|
92
92
|
|
@@ -2,7 +2,7 @@
|
|
2
2
|
/// @group helpers/links
|
3
3
|
////
|
4
4
|
|
5
|
-
/// Common link
|
5
|
+
/// Common link styles
|
6
6
|
///
|
7
7
|
/// Provides the typography and focus state, regardless of link style.
|
8
8
|
///
|
@@ -10,18 +10,63 @@
|
|
10
10
|
|
11
11
|
@mixin govuk-link-common {
|
12
12
|
@include govuk-typography-common;
|
13
|
+
@include govuk-link-decoration;
|
14
|
+
|
15
|
+
&:hover {
|
16
|
+
@include govuk-link-hover-decoration;
|
17
|
+
}
|
13
18
|
|
14
19
|
&:focus {
|
15
20
|
@include govuk-focused-text;
|
16
21
|
}
|
17
22
|
}
|
18
23
|
|
19
|
-
///
|
24
|
+
/// Link decoration
|
25
|
+
///
|
26
|
+
/// Provides the text decoration for links, including thickness and underline
|
27
|
+
/// offset. Use this mixin only if you cannot use the `govuk-link-common` mixin.
|
28
|
+
///
|
29
|
+
/// @access public
|
30
|
+
@mixin govuk-link-decoration {
|
31
|
+
text-decoration: underline;
|
32
|
+
|
33
|
+
@if ($govuk-new-link-styles) {
|
34
|
+
@if ($govuk-link-underline-thickness) {
|
35
|
+
text-decoration-thickness: $govuk-link-underline-thickness;
|
36
|
+
}
|
37
|
+
|
38
|
+
@if ($govuk-link-underline-offset) {
|
39
|
+
text-underline-offset: $govuk-link-underline-offset;
|
40
|
+
}
|
41
|
+
}
|
42
|
+
}
|
43
|
+
|
44
|
+
/// Link hover decoration
|
45
|
+
///
|
46
|
+
/// Provides the text decoration for links in their hover state, for you to use
|
47
|
+
/// within a `:hover` pseudo-selector. Use this mixin only if you cannot use the
|
48
|
+
/// `govuk-link-common` mixin.
|
49
|
+
///
|
50
|
+
/// @access public
|
51
|
+
|
52
|
+
@mixin govuk-link-hover-decoration {
|
53
|
+
@if ($govuk-new-link-styles and $govuk-link-hover-underline-thickness) {
|
54
|
+
text-decoration-thickness: $govuk-link-hover-underline-thickness;
|
55
|
+
// Disable ink skipping on underlines on hover. Browsers haven't
|
56
|
+
// standardised on this part of the spec yet, so set both properties
|
57
|
+
-webkit-text-decoration-skip-ink: none;
|
58
|
+
text-decoration-skip-ink: none; // Chromium, Firefox
|
59
|
+
-webkit-text-decoration-skip: none;
|
60
|
+
text-decoration-skip: none; // Safari
|
61
|
+
}
|
62
|
+
}
|
63
|
+
|
64
|
+
/// Default link styles
|
20
65
|
///
|
21
|
-
///
|
66
|
+
/// Makes links use the default unvisited, visited, hover and active colours.
|
22
67
|
///
|
23
|
-
/// If you use this mixin in a component you must also include the
|
24
|
-
/// govuk-link-common mixin
|
68
|
+
/// If you use this mixin in a component, you must also include the
|
69
|
+
/// `govuk-link-common` mixin to get the correct focus and hover states.
|
25
70
|
///
|
26
71
|
/// @example scss
|
27
72
|
/// .govuk-component__link {
|
@@ -66,13 +111,109 @@
|
|
66
111
|
}
|
67
112
|
}
|
68
113
|
|
69
|
-
///
|
114
|
+
/// Error link styles
|
115
|
+
///
|
116
|
+
/// Makes links use the error colour. The link will darken if it's active or a
|
117
|
+
/// user hovers their cursor over it.
|
118
|
+
///
|
119
|
+
/// If you use this mixin in a component, you must also include the
|
120
|
+
/// `govuk-link-common` mixin to get the correct focus and hover states.
|
121
|
+
///
|
122
|
+
/// @example scss
|
123
|
+
/// .govuk-component__link {
|
124
|
+
/// @include govuk-link-common;
|
125
|
+
/// @include govuk-link-style-error;
|
126
|
+
/// }
|
127
|
+
///
|
128
|
+
/// @access public
|
129
|
+
|
130
|
+
@mixin govuk-link-style-error {
|
131
|
+
&:link,
|
132
|
+
&:visited {
|
133
|
+
color: $govuk-error-colour;
|
134
|
+
}
|
135
|
+
|
136
|
+
&:hover {
|
137
|
+
color: scale-color($govuk-error-colour, $lightness: -30%);
|
138
|
+
}
|
139
|
+
|
140
|
+
&:active {
|
141
|
+
color: $govuk-error-colour;
|
142
|
+
}
|
143
|
+
|
144
|
+
// When focussed, the text colour needs to be darker to ensure that colour
|
145
|
+
// contrast is still acceptable
|
146
|
+
&:focus {
|
147
|
+
color: $govuk-focus-text-colour;
|
148
|
+
}
|
149
|
+
|
150
|
+
// alphagov/govuk_template includes a specific a:link:focus selector
|
151
|
+
// designed to make unvisited link s a slightly darker blue when focussed, so
|
152
|
+
// we need to override the text colour for that combination of selectors so
|
153
|
+
// so that unvisited links styled as buttons do not end up with dark blue
|
154
|
+
// text when focussed.
|
155
|
+
@include govuk-compatibility(govuk_template) {
|
156
|
+
&:link:focus {
|
157
|
+
color: $govuk-focus-text-colour;
|
158
|
+
}
|
159
|
+
}
|
160
|
+
}
|
161
|
+
|
162
|
+
/// Success link styles
|
163
|
+
///
|
164
|
+
/// Makes links use the success colour. The link will darken if it's active or a
|
165
|
+
/// user hovers their cursor over it.
|
166
|
+
///
|
167
|
+
/// If you use this mixin in a component, you must also include the
|
168
|
+
/// `govuk-link-common` mixin to get the correct focus and hover states.
|
169
|
+
///
|
170
|
+
/// @example scss
|
171
|
+
/// .govuk-component__link {
|
172
|
+
/// @include govuk-link-common;
|
173
|
+
/// @include govuk-link-style-success;
|
174
|
+
/// }
|
175
|
+
///
|
176
|
+
/// @access public
|
177
|
+
|
178
|
+
@mixin govuk-link-style-success {
|
179
|
+
&:link,
|
180
|
+
&:visited {
|
181
|
+
color: $govuk-success-colour;
|
182
|
+
}
|
183
|
+
|
184
|
+
&:hover {
|
185
|
+
color: scale-color($govuk-success-colour, $lightness: -30%);
|
186
|
+
}
|
187
|
+
|
188
|
+
&:active {
|
189
|
+
color: $govuk-success-colour;
|
190
|
+
}
|
191
|
+
|
192
|
+
// When focussed, the text colour needs to be darker to ensure that colour
|
193
|
+
// contrast is still acceptable
|
194
|
+
&:focus {
|
195
|
+
color: $govuk-focus-text-colour;
|
196
|
+
}
|
197
|
+
|
198
|
+
// alphagov/govuk_template includes a specific a:link:focus selector
|
199
|
+
// designed to make unvisited link s a slightly darker blue when focussed, so
|
200
|
+
// we need to override the text colour for that combination of selectors so
|
201
|
+
// so that unvisited links styled as buttons do not end up with dark blue
|
202
|
+
// text when focussed.
|
203
|
+
@include govuk-compatibility(govuk_template) {
|
204
|
+
&:link:focus {
|
205
|
+
color: $govuk-focus-text-colour;
|
206
|
+
}
|
207
|
+
}
|
208
|
+
}
|
209
|
+
|
210
|
+
/// Muted link styles
|
70
211
|
///
|
71
|
-
///
|
72
|
-
///
|
212
|
+
/// Makes links use the secondary text colour. The link will darken if it's
|
213
|
+
/// active or a user hovers their cursor over it.
|
73
214
|
///
|
74
|
-
/// If you use this mixin in a component you must also include the
|
75
|
-
/// govuk-link-common mixin
|
215
|
+
/// If you use this mixin in a component, you must also include the
|
216
|
+
/// `govuk-link-common` mixin to get the correct focus and hover states.
|
76
217
|
///
|
77
218
|
/// @example scss
|
78
219
|
/// .govuk-component__link {
|
@@ -84,10 +225,13 @@
|
|
84
225
|
|
85
226
|
@mixin govuk-link-style-muted {
|
86
227
|
&:link,
|
87
|
-
&:visited
|
228
|
+
&:visited {
|
229
|
+
color: $govuk-secondary-text-colour;
|
230
|
+
}
|
231
|
+
|
88
232
|
&:hover,
|
89
233
|
&:active {
|
90
|
-
color: $govuk-
|
234
|
+
color: $govuk-text-colour;
|
91
235
|
}
|
92
236
|
|
93
237
|
// When focussed, the text colour needs to be darker to ensure that colour
|
@@ -106,13 +250,13 @@
|
|
106
250
|
}
|
107
251
|
}
|
108
252
|
|
109
|
-
/// Text
|
253
|
+
/// Text link styles
|
110
254
|
///
|
111
|
-
///
|
255
|
+
/// Makes links use the primary text colour, in all states. Use this mixin for
|
112
256
|
/// navigation components, such as breadcrumbs or the back link.
|
113
257
|
///
|
114
|
-
/// If you use this mixin in a component you must also include the
|
115
|
-
/// govuk-link-common mixin
|
258
|
+
/// If you use this mixin in a component, you must also include the
|
259
|
+
/// `govuk-link-common` mixin to get the correct focus and hover states.
|
116
260
|
///
|
117
261
|
/// @example scss
|
118
262
|
/// .govuk-component__link {
|
@@ -123,10 +267,17 @@
|
|
123
267
|
/// @access public
|
124
268
|
|
125
269
|
@mixin govuk-link-style-text {
|
126
|
-
// Override link colour to use text colour
|
127
270
|
&:link,
|
128
|
-
&:visited
|
129
|
-
|
271
|
+
&:visited {
|
272
|
+
@include govuk-text-colour;
|
273
|
+
}
|
274
|
+
|
275
|
+
// Force a colour change on hover to work around a bug in Safari
|
276
|
+
// https://bugs.webkit.org/show_bug.cgi?id=224483
|
277
|
+
&:hover {
|
278
|
+
color: rgba($govuk-text-colour, .99);
|
279
|
+
}
|
280
|
+
|
130
281
|
&:active,
|
131
282
|
&:focus {
|
132
283
|
@include govuk-text-colour;
|
@@ -142,17 +293,60 @@
|
|
142
293
|
}
|
143
294
|
}
|
144
295
|
|
145
|
-
///
|
296
|
+
/// Inverse link styles
|
146
297
|
///
|
147
|
-
///
|
148
|
-
///
|
298
|
+
/// Makes links white, in all states. Use this mixin if you're displaying links
|
299
|
+
/// against a dark background.
|
149
300
|
///
|
150
|
-
///
|
151
|
-
///
|
152
|
-
/// that you’ve visited it before is not important.
|
301
|
+
/// If you use this mixin in a component, you must also include the
|
302
|
+
/// `govuk-link-common` mixin to get the correct focus and hover states.
|
153
303
|
///
|
154
|
-
///
|
155
|
-
///
|
304
|
+
/// @example scss
|
305
|
+
/// .govuk-component__link {
|
306
|
+
/// @include govuk-link-common;
|
307
|
+
/// @include govuk-link-style-inverse;
|
308
|
+
/// }
|
309
|
+
///
|
310
|
+
/// @access public
|
311
|
+
|
312
|
+
@mixin govuk-link-style-inverse {
|
313
|
+
&:link,
|
314
|
+
&:visited {
|
315
|
+
color: govuk-colour("white");
|
316
|
+
}
|
317
|
+
|
318
|
+
// Force a colour change on hover to work around a bug in Safari
|
319
|
+
// https://bugs.webkit.org/show_bug.cgi?id=224483
|
320
|
+
&:hover,
|
321
|
+
&:active {
|
322
|
+
color: rgba(govuk-colour("white"), .99);
|
323
|
+
}
|
324
|
+
|
325
|
+
&:focus {
|
326
|
+
color: $govuk-focus-text-colour;
|
327
|
+
}
|
328
|
+
|
329
|
+
// alphagov/govuk_template includes a specific a:link:focus selector designed
|
330
|
+
// to make unvisited links a slightly darker blue when focussed, so we need to
|
331
|
+
// override the text colour for that combination of selectors.
|
332
|
+
@include govuk-compatibility(govuk_template) {
|
333
|
+
&:link:focus {
|
334
|
+
color: $govuk-focus-text-colour;
|
335
|
+
}
|
336
|
+
}
|
337
|
+
}
|
338
|
+
|
339
|
+
/// Default link styles, without a visited state
|
340
|
+
///
|
341
|
+
/// Makes links use the default unvisited, hover and active colours, with no
|
342
|
+
/// distinct visited state.
|
343
|
+
///
|
344
|
+
/// Use this mixin when it's not helpful to distinguish between visited and
|
345
|
+
/// non-visited links. For example, when you link to pages with
|
346
|
+
/// frequently-changing content, such as the dashboard for an admin interface.
|
347
|
+
///
|
348
|
+
/// If you use this mixin in a component, you must also include the
|
349
|
+
/// `govuk-link-common` mixin to get the correct focus and hover states.
|
156
350
|
///
|
157
351
|
/// @example scss
|
158
352
|
/// .govuk-component__link {
|
@@ -186,10 +380,31 @@
|
|
186
380
|
}
|
187
381
|
}
|
188
382
|
|
189
|
-
///
|
383
|
+
/// Remove underline from links
|
384
|
+
///
|
385
|
+
/// Remove underlines from links unless the link is active or a user hovers
|
386
|
+
/// their cursor over it. This has no effect in Internet Explorer 8 (IE8),
|
387
|
+
/// because IE8 does not support `:not`.
|
388
|
+
///
|
389
|
+
/// @example scss
|
390
|
+
/// .govuk-component__link {
|
391
|
+
/// @include govuk-link-common;
|
392
|
+
/// @include govuk-link-style-default;
|
393
|
+
/// @include govuk-link-style-no-underline;
|
394
|
+
/// }
|
395
|
+
///
|
396
|
+
/// @access public
|
397
|
+
|
398
|
+
@mixin govuk-link-style-no-underline {
|
399
|
+
&:not(:hover):not(:active) {
|
400
|
+
text-decoration: none;
|
401
|
+
}
|
402
|
+
}
|
403
|
+
|
404
|
+
/// Include link destination when printing the page
|
190
405
|
///
|
191
|
-
///
|
192
|
-
///
|
406
|
+
/// If the user prints the page, add the destination URL after the link text, if
|
407
|
+
/// the URL starts with `/`, `http://` or `https://`.
|
193
408
|
///
|
194
409
|
/// @access public
|
195
410
|
|
@@ -0,0 +1,101 @@
|
|
1
|
+
@import "../base";
|
2
|
+
|
3
|
+
@include govuk-exports("govuk/objects/button-group") {
|
4
|
+
// Button groups can be used to group buttons and links together as a group.
|
5
|
+
//
|
6
|
+
// Within a button group:
|
7
|
+
//
|
8
|
+
// - links are styled to line up visually with the buttons, including being
|
9
|
+
// centre-aligned on mobile
|
10
|
+
// - spacing between the buttons and links is handled automatically, including
|
11
|
+
// when they wrap across multiple lines
|
12
|
+
.govuk-button-group {
|
13
|
+
$horizontal-gap: govuk-spacing(3);
|
14
|
+
$vertical-gap: govuk-spacing(3);
|
15
|
+
|
16
|
+
// These need to be kept in sync with the button component's styles
|
17
|
+
$button-padding: govuk-spacing(2);
|
18
|
+
$button-shadow-size: $govuk-border-width-form-element;
|
19
|
+
|
20
|
+
$link-spacing: govuk-spacing(1);
|
21
|
+
|
22
|
+
@include govuk-responsive-margin(6, "bottom", $adjustment: $vertical-gap * -1);
|
23
|
+
|
24
|
+
// Flexbox is used to center-align links on mobile, align everything along
|
25
|
+
// the baseline on tablet and above, and to removes extra whitespace that
|
26
|
+
// we'd get between the buttons and links because they're inline-blocks.
|
27
|
+
//
|
28
|
+
// Ideally we'd use `gap` with flexbox rather than having to do it all with
|
29
|
+
// margins, but unfortunately the support isn't there (yet) and @supports
|
30
|
+
// doesn't play nicely with it
|
31
|
+
// (https://github.com/w3c/csswg-drafts/issues/3559)
|
32
|
+
display: -webkit-box;
|
33
|
+
display: -webkit-flex;
|
34
|
+
display: -ms-flexbox;
|
35
|
+
display: flex;
|
36
|
+
-webkit-box-orient: vertical;
|
37
|
+
-webkit-box-direction: normal;
|
38
|
+
-webkit-flex-direction: column;
|
39
|
+
-ms-flex-direction: column;
|
40
|
+
flex-direction: column;
|
41
|
+
-webkit-box-align: center;
|
42
|
+
-webkit-align-items: center;
|
43
|
+
-ms-flex-align: center;
|
44
|
+
align-items: center;
|
45
|
+
|
46
|
+
// Give links within the button group the same font-size and line-height
|
47
|
+
// as buttons.
|
48
|
+
//
|
49
|
+
// Because we want the focus state to be tight around the link text, we use
|
50
|
+
// margins where the buttons would use padding.
|
51
|
+
.govuk-link {
|
52
|
+
@include govuk-font($size: 19, $line-height: 19px);
|
53
|
+
display: inline-block;
|
54
|
+
// Prevent links overflowing their container in IE10/11 because of bug
|
55
|
+
// with align-items: center
|
56
|
+
max-width: 100%;
|
57
|
+
margin-top: $link-spacing;
|
58
|
+
margin-bottom: $link-spacing + $vertical-gap;
|
59
|
+
text-align: center;
|
60
|
+
}
|
61
|
+
|
62
|
+
// Reduce the bottom margin to the size of the vertical gap (accommodating
|
63
|
+
// the button shadow) – the 'lost' margin is moved to the button-group.
|
64
|
+
.govuk-button {
|
65
|
+
margin-bottom: $vertical-gap + $button-shadow-size;
|
66
|
+
}
|
67
|
+
|
68
|
+
// On tablet and above, we also introduce a 'column gap' between the
|
69
|
+
// buttons and links in each row and left align links
|
70
|
+
@include govuk-media-query($from: tablet) {
|
71
|
+
// Cancel out the column gap for the last item in each row
|
72
|
+
margin-right: ($horizontal-gap * -1);
|
73
|
+
|
74
|
+
-webkit-box-orient: horizontal;
|
75
|
+
|
76
|
+
-webkit-box-direction: normal;
|
77
|
+
|
78
|
+
-webkit-flex-direction: row;
|
79
|
+
|
80
|
+
-ms-flex-direction: row;
|
81
|
+
|
82
|
+
flex-direction: row;
|
83
|
+
-webkit-flex-wrap: wrap;
|
84
|
+
-ms-flex-wrap: wrap;
|
85
|
+
flex-wrap: wrap;
|
86
|
+
-webkit-box-align: baseline;
|
87
|
+
-webkit-align-items: baseline;
|
88
|
+
-ms-flex-align: baseline;
|
89
|
+
align-items: baseline;
|
90
|
+
|
91
|
+
.govuk-button,
|
92
|
+
.govuk-link {
|
93
|
+
margin-right: $horizontal-gap;
|
94
|
+
}
|
95
|
+
|
96
|
+
.govuk-link {
|
97
|
+
text-align: left;
|
98
|
+
}
|
99
|
+
}
|
100
|
+
}
|
101
|
+
}
|
@@ -28,7 +28,9 @@
|
|
28
28
|
|
29
29
|
// Respect 'display cutout' safe area (avoids notches and rounded corners)
|
30
30
|
@supports (margin: unquote("max(calc(0px))")) {
|
31
|
+
$gutter-safe-area-right: -webkit-calc(#{$govuk-gutter-half} + env(safe-area-inset-right));
|
31
32
|
$gutter-safe-area-right: calc(#{$govuk-gutter-half} + env(safe-area-inset-right));
|
33
|
+
$gutter-safe-area-left: -webkit-calc(#{$govuk-gutter-half} + env(safe-area-inset-left));
|
32
34
|
$gutter-safe-area-left: calc(#{$govuk-gutter-half} + env(safe-area-inset-left));
|
33
35
|
|
34
36
|
// Use max() to pick largest margin, default or with safe area
|
@@ -44,7 +46,9 @@
|
|
44
46
|
|
45
47
|
// Respect 'display cutout' safe area (avoids notches and rounded corners)
|
46
48
|
@supports (margin: unquote("max(calc(0px))")) {
|
49
|
+
$gutter-safe-area-right: -webkit-calc(#{$govuk-gutter-half} + env(safe-area-inset-right));
|
47
50
|
$gutter-safe-area-right: calc(#{$govuk-gutter-half} + env(safe-area-inset-right));
|
51
|
+
$gutter-safe-area-left: -webkit-calc(#{$govuk-gutter-half} + env(safe-area-inset-left));
|
48
52
|
$gutter-safe-area-left: calc(#{$govuk-gutter-half} + env(safe-area-inset-left));
|
49
53
|
|
50
54
|
// Use max() to pick largest margin, default or with safe area
|
@@ -86,6 +86,15 @@ $govuk-focus-text-colour: govuk-colour("black") !default;
|
|
86
86
|
|
87
87
|
$govuk-error-colour: govuk-colour("red") !default;
|
88
88
|
|
89
|
+
/// Success colour
|
90
|
+
///
|
91
|
+
/// Used to highlight success messages and banners
|
92
|
+
///
|
93
|
+
/// @type Colour
|
94
|
+
/// @access public
|
95
|
+
|
96
|
+
$govuk-success-colour: govuk-colour("green") !default;
|
97
|
+
|
89
98
|
/// Border colour
|
90
99
|
///
|
91
100
|
/// Used in for example borders, separators, rules and keylines.
|