dxw_govuk_frontend_rails 3.9.1 → 3.13.1
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/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.
|