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.
Files changed (42) hide show
  1. checksums.yaml +4 -4
  2. data/Gemfile.lock +2 -2
  3. data/README.md +61 -40
  4. data/lib/dxw_govuk_frontend_rails/version.rb +1 -1
  5. data/package-lock.json +22 -4
  6. data/package.json +1 -1
  7. data/vendor/assets/javascripts/govuk_frontend_rails.js +119 -4
  8. data/vendor/assets/stylesheets/components/_all.scss +2 -0
  9. data/vendor/assets/stylesheets/components/accordion/_index.scss +7 -16
  10. data/vendor/assets/stylesheets/components/back-link/_index.scss +4 -15
  11. data/vendor/assets/stylesheets/components/breadcrumbs/_index.scss +1 -0
  12. data/vendor/assets/stylesheets/components/button/_index.scss +15 -8
  13. data/vendor/assets/stylesheets/components/character-count/_index.scss +1 -0
  14. data/vendor/assets/stylesheets/components/checkboxes/_index.scss +63 -34
  15. data/vendor/assets/stylesheets/components/cookie-banner/_cookie-banner.scss +2 -0
  16. data/vendor/assets/stylesheets/components/cookie-banner/_index.scss +51 -0
  17. data/vendor/assets/stylesheets/components/details/_index.scss +7 -2
  18. data/vendor/assets/stylesheets/components/error-summary/_index.scss +2 -12
  19. data/vendor/assets/stylesheets/components/file-upload/_index.scss +14 -14
  20. data/vendor/assets/stylesheets/components/footer/_index.scss +39 -29
  21. data/vendor/assets/stylesheets/components/header/_index.scss +44 -22
  22. data/vendor/assets/stylesheets/components/input/_index.scss +4 -0
  23. data/vendor/assets/stylesheets/components/notification-banner/_index.scss +89 -0
  24. data/vendor/assets/stylesheets/components/notification-banner/_notification-banner.scss +2 -0
  25. data/vendor/assets/stylesheets/components/phase-banner/_index.scss +1 -1
  26. data/vendor/assets/stylesheets/components/radios/_index.scss +14 -0
  27. data/vendor/assets/stylesheets/components/skip-link/_index.scss +3 -1
  28. data/vendor/assets/stylesheets/components/table/_index.scss +21 -0
  29. data/vendor/assets/stylesheets/components/tabs/_index.scss +1 -6
  30. data/vendor/assets/stylesheets/components/warning-text/_index.scss +10 -1
  31. data/vendor/assets/stylesheets/core/_links.scss +8 -0
  32. data/vendor/assets/stylesheets/core/_template.scss +0 -1
  33. data/vendor/assets/stylesheets/helpers/_colour.scss +2 -2
  34. data/vendor/assets/stylesheets/helpers/_links.scss +245 -30
  35. data/vendor/assets/stylesheets/objects/_all.scss +1 -0
  36. data/vendor/assets/stylesheets/objects/_button-group.scss +101 -0
  37. data/vendor/assets/stylesheets/objects/_width-container.scss +4 -0
  38. data/vendor/assets/stylesheets/settings/_all.scss +2 -0
  39. data/vendor/assets/stylesheets/settings/_colours-applied.scss +9 -0
  40. data/vendor/assets/stylesheets/settings/_links.scss +62 -0
  41. data/vendor/assets/stylesheets/settings/_typography-font.scss +3 -0
  42. metadata +9 -3
@@ -22,6 +22,6 @@
22
22
 
23
23
  .govuk-phase-banner__text {
24
24
  display: table-cell;
25
- vertical-align: baseline;
25
+ vertical-align: middle;
26
26
  }
27
27
  }
@@ -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 color
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 color
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 mixin
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
- /// Default link style mixin
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
- /// Provides the default unvisited, visited, hover and active states for links.
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 in order to get the focus state.
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
- /// Muted style link mixin
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
- /// Used for secondary links on a page - the link will appear in muted colours
72
- /// regardless of visited state.
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 in order to get the focus state.
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-secondary-text-colour;
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 style link mixin
253
+ /// Text link styles
110
254
  ///
111
- /// Overrides the colour of links to match the text colour. Generally used by
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 in order to get the focus state.
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
- &:hover,
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
- /// No visited state link mixin
296
+ /// Inverse link styles
146
297
  ///
147
- /// Used in cases where it is not helpful to distinguish between visited and
148
- /// non-visited links.
298
+ /// Makes links white, in all states. Use this mixin if you're displaying links
299
+ /// against a dark background.
149
300
  ///
150
- /// For example, navigation links to pages with dynamic content like admin
151
- /// dashboards. The content on the page is changing all the time, so the fact
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
- /// If you use this mixin in a component you must also include the
155
- /// govuk-link-common mixin in order to get the focus state.
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
- /// Print friendly link mixin
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
- /// When printing, append the the destination URL to the link text, as long
192
- /// as the URL starts with either `/`, `http://` or `https://`.
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
 
@@ -1,3 +1,4 @@
1
+ @import "button-group";
1
2
  @import "form-group";
2
3
  @import "grid";
3
4
  @import "main-wrapper";
@@ -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
@@ -19,3 +19,5 @@
19
19
  @import "typography-font-families";
20
20
  @import "typography-font";
21
21
  @import "typography-responsive";
22
+
23
+ @import "links";
@@ -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.