dxw_govuk_frontend_rails 3.10.2 → 3.14.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +4 -4
- data/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 +62 -4
- data/vendor/assets/stylesheets/components/_all.scss +1 -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/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/panel/_index.scss +13 -1
- 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 +159 -38
- data/vendor/assets/stylesheets/helpers/_spacing.scss +22 -4
- 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/overrides/_all.scss +1 -0
- data/vendor/assets/stylesheets/overrides/_text-align.scss +20 -0
- data/vendor/assets/stylesheets/settings/_all.scss +2 -0
- data/vendor/assets/stylesheets/settings/_links.scss +62 -0
- metadata +8 -3
@@ -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,12 +111,13 @@
|
|
66
111
|
}
|
67
112
|
}
|
68
113
|
|
69
|
-
/// Error link
|
114
|
+
/// Error link styles
|
70
115
|
///
|
71
|
-
///
|
116
|
+
/// Makes links use the error colour. The link will darken if it's active or a
|
117
|
+
/// user hovers their cursor over it.
|
72
118
|
///
|
73
|
-
/// If you use this mixin in a component you must also include the
|
74
|
-
/// govuk-link-common mixin
|
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.
|
75
121
|
///
|
76
122
|
/// @example scss
|
77
123
|
/// .govuk-component__link {
|
@@ -113,12 +159,13 @@
|
|
113
159
|
}
|
114
160
|
}
|
115
161
|
|
116
|
-
/// Success link
|
162
|
+
/// Success link styles
|
117
163
|
///
|
118
|
-
///
|
164
|
+
/// Makes links use the success colour. The link will darken if it's active or a
|
165
|
+
/// user hovers their cursor over it.
|
119
166
|
///
|
120
|
-
/// If you use this mixin in a component you must also include the
|
121
|
-
/// govuk-link-common mixin
|
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.
|
122
169
|
///
|
123
170
|
/// @example scss
|
124
171
|
/// .govuk-component__link {
|
@@ -160,13 +207,13 @@
|
|
160
207
|
}
|
161
208
|
}
|
162
209
|
|
163
|
-
/// Muted
|
210
|
+
/// Muted link styles
|
164
211
|
///
|
165
|
-
///
|
166
|
-
///
|
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.
|
167
214
|
///
|
168
|
-
/// If you use this mixin in a component you must also include the
|
169
|
-
/// 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.
|
170
217
|
///
|
171
218
|
/// @example scss
|
172
219
|
/// .govuk-component__link {
|
@@ -178,10 +225,13 @@
|
|
178
225
|
|
179
226
|
@mixin govuk-link-style-muted {
|
180
227
|
&:link,
|
181
|
-
&:visited
|
228
|
+
&:visited {
|
229
|
+
color: $govuk-secondary-text-colour;
|
230
|
+
}
|
231
|
+
|
182
232
|
&:hover,
|
183
233
|
&:active {
|
184
|
-
color: $govuk-
|
234
|
+
color: $govuk-text-colour;
|
185
235
|
}
|
186
236
|
|
187
237
|
// When focussed, the text colour needs to be darker to ensure that colour
|
@@ -200,13 +250,13 @@
|
|
200
250
|
}
|
201
251
|
}
|
202
252
|
|
203
|
-
/// Text
|
253
|
+
/// Text link styles
|
204
254
|
///
|
205
|
-
///
|
255
|
+
/// Makes links use the primary text colour, in all states. Use this mixin for
|
206
256
|
/// navigation components, such as breadcrumbs or the back link.
|
207
257
|
///
|
208
|
-
/// If you use this mixin in a component you must also include the
|
209
|
-
/// 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.
|
210
260
|
///
|
211
261
|
/// @example scss
|
212
262
|
/// .govuk-component__link {
|
@@ -217,10 +267,17 @@
|
|
217
267
|
/// @access public
|
218
268
|
|
219
269
|
@mixin govuk-link-style-text {
|
220
|
-
// Override link colour to use text colour
|
221
270
|
&:link,
|
222
|
-
&:visited
|
223
|
-
|
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
|
+
|
224
281
|
&:active,
|
225
282
|
&:focus {
|
226
283
|
@include govuk-text-colour;
|
@@ -236,17 +293,60 @@
|
|
236
293
|
}
|
237
294
|
}
|
238
295
|
|
239
|
-
///
|
296
|
+
/// Inverse link styles
|
297
|
+
///
|
298
|
+
/// Makes links white, in all states. Use this mixin if you're displaying links
|
299
|
+
/// against a dark background.
|
300
|
+
///
|
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.
|
303
|
+
///
|
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
|
240
340
|
///
|
241
|
-
///
|
242
|
-
///
|
341
|
+
/// Makes links use the default unvisited, hover and active colours, with no
|
342
|
+
/// distinct visited state.
|
243
343
|
///
|
244
|
-
///
|
245
|
-
///
|
246
|
-
///
|
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.
|
247
347
|
///
|
248
|
-
/// If you use this mixin in a component you must also include the
|
249
|
-
/// govuk-link-common mixin
|
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.
|
250
350
|
///
|
251
351
|
/// @example scss
|
252
352
|
/// .govuk-component__link {
|
@@ -280,10 +380,31 @@
|
|
280
380
|
}
|
281
381
|
}
|
282
382
|
|
283
|
-
///
|
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
|
284
405
|
///
|
285
|
-
///
|
286
|
-
///
|
406
|
+
/// If the user prints the page, add the destination URL after the link text, if
|
407
|
+
/// the URL starts with `/`, `http://` or `https://`.
|
287
408
|
///
|
288
409
|
/// @access public
|
289
410
|
|
@@ -8,15 +8,26 @@
|
|
8
8
|
///
|
9
9
|
/// Returns measurement corresponding to the spacing point requested.
|
10
10
|
///
|
11
|
-
/// @param {Number} $spacing-point - Point on the spacing scale
|
11
|
+
/// @param {Number} $spacing-point - Point on the spacing scale
|
12
|
+
/// (set in `settings/_spacing.scss`)
|
12
13
|
///
|
13
|
-
/// @returns {String} Spacing
|
14
|
+
/// @returns {String} Spacing measurement eg. 10px
|
14
15
|
///
|
15
16
|
/// @example scss
|
16
17
|
/// .element {
|
17
18
|
/// padding: govuk-spacing(5);
|
18
|
-
/// top: govuk-spacing(2) !important; // if `!important` is required
|
19
19
|
/// }
|
20
|
+
///
|
21
|
+
/// @example scss Using negative spacing
|
22
|
+
/// .element {
|
23
|
+
/// margin-top: govuk-spacing(-1);
|
24
|
+
/// }
|
25
|
+
///
|
26
|
+
/// @example scss Marking spacing declarations as important
|
27
|
+
/// .element {
|
28
|
+
/// margin-top: govuk-spacing(1) !important;
|
29
|
+
/// }
|
30
|
+
///
|
20
31
|
/// @access public
|
21
32
|
|
22
33
|
@function govuk-spacing($spacing-point) {
|
@@ -27,11 +38,18 @@
|
|
27
38
|
+ "#{$actual-input-type}.";
|
28
39
|
}
|
29
40
|
|
41
|
+
$is-negative: false;
|
42
|
+
@if ($spacing-point < 0) {
|
43
|
+
$is-negative: true;
|
44
|
+
$spacing-point: abs($spacing-point);
|
45
|
+
}
|
46
|
+
|
30
47
|
@if not map-has-key($govuk-spacing-points, $spacing-point) {
|
31
48
|
@error "Unknown spacing variable `#{$spacing-point}`. Make sure you are using a point from the spacing scale in `_settings/spacing.scss`.";
|
32
49
|
}
|
33
50
|
|
34
|
-
|
51
|
+
$value: map-get($govuk-spacing-points, $spacing-point);
|
52
|
+
@return if($is-negative, $value * -1, $value);
|
35
53
|
}
|
36
54
|
|
37
55
|
/// Responsive spacing
|
@@ -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
|
@@ -0,0 +1,20 @@
|
|
1
|
+
@if not mixin-exists("govuk-exports") {
|
2
|
+
@warn "Importing items from the overrides layer without first importing `base` is deprecated, and will no longer work as of GOV.UK Frontend v4.0.";
|
3
|
+
}
|
4
|
+
|
5
|
+
@import "../base";
|
6
|
+
|
7
|
+
// stylelint-disable declaration-no-important
|
8
|
+
@include govuk-exports("govuk/overrides/text-align") {
|
9
|
+
.govuk-\!-text-align-left {
|
10
|
+
text-align: left !important;
|
11
|
+
}
|
12
|
+
|
13
|
+
.govuk-\!-text-align-centre {
|
14
|
+
text-align: center !important;
|
15
|
+
}
|
16
|
+
|
17
|
+
.govuk-\!-text-align-right {
|
18
|
+
text-align: right !important;
|
19
|
+
}
|
20
|
+
}
|
@@ -0,0 +1,62 @@
|
|
1
|
+
////
|
2
|
+
/// @group settings/links
|
3
|
+
////
|
4
|
+
|
5
|
+
/// Enable new link styles
|
6
|
+
///
|
7
|
+
/// If enabled, the link styles will change. Underlines will:
|
8
|
+
///
|
9
|
+
/// - be consistently thinner and a bit further away from the link text
|
10
|
+
/// - have a clearer hover state, where the underline gets thicker to make the
|
11
|
+
/// link stand out to users
|
12
|
+
///
|
13
|
+
/// You should only enable the new link styles if both:
|
14
|
+
///
|
15
|
+
/// - you've made sure your whole service will use the new style consistently
|
16
|
+
/// - you do not have links in a multi-column CSS layout - there's [a Chromium
|
17
|
+
/// bug that affects links](https://github.com/alphagov/govuk-frontend/issues/2204)
|
18
|
+
///
|
19
|
+
/// @type Boolean
|
20
|
+
/// @access public
|
21
|
+
|
22
|
+
$govuk-new-link-styles: false !default;
|
23
|
+
|
24
|
+
/// Thickness of link underlines
|
25
|
+
///
|
26
|
+
/// The default will be either:
|
27
|
+
///
|
28
|
+
/// - 1px
|
29
|
+
/// - 0.0625rem, if it's thicker than 1px because the user has changed the text
|
30
|
+
/// size in their browser
|
31
|
+
///
|
32
|
+
/// Set this variable to `false` to avoid setting a thickness.
|
33
|
+
///
|
34
|
+
/// @type Number
|
35
|
+
/// @access public
|
36
|
+
|
37
|
+
$govuk-link-underline-thickness: unquote("max(1px, .0625rem)") !default;
|
38
|
+
|
39
|
+
/// Offset of link underlines from text baseline
|
40
|
+
///
|
41
|
+
/// Set this variable to `false` to avoid setting an offset.
|
42
|
+
///
|
43
|
+
/// @type Number
|
44
|
+
/// @access public
|
45
|
+
|
46
|
+
$govuk-link-underline-offset: .1em !default;
|
47
|
+
|
48
|
+
/// Thickness of link underlines in hover state
|
49
|
+
///
|
50
|
+
/// The default for each link will be the thickest of the following:
|
51
|
+
///
|
52
|
+
/// - 3px
|
53
|
+
/// - 0.1875rem, if it's thicker than 3px because the user has changed the text
|
54
|
+
/// size in their browser
|
55
|
+
/// - 0.12em (relative to the link's text size)
|
56
|
+
///
|
57
|
+
/// Set this variable to `false` to avoid setting a thickness.
|
58
|
+
///
|
59
|
+
/// @type Number
|
60
|
+
/// @access public
|
61
|
+
|
62
|
+
$govuk-link-hover-underline-thickness: unquote("max(3px, .1875rem, .12em)") !default;
|
metadata
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: dxw_govuk_frontend_rails
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
version: 3.
|
4
|
+
version: 3.14.0
|
5
5
|
platform: ruby
|
6
6
|
authors:
|
7
7
|
- mec
|
@@ -9,7 +9,7 @@ authors:
|
|
9
9
|
autorequire:
|
10
10
|
bindir: exe
|
11
11
|
cert_chain: []
|
12
|
-
date:
|
12
|
+
date: 2021-11-12 00:00:00.000000000 Z
|
13
13
|
dependencies:
|
14
14
|
- !ruby/object:Gem::Dependency
|
15
15
|
name: bundler
|
@@ -93,6 +93,8 @@ files:
|
|
93
93
|
- vendor/assets/stylesheets/components/character-count/_index.scss
|
94
94
|
- vendor/assets/stylesheets/components/checkboxes/_checkboxes.scss
|
95
95
|
- vendor/assets/stylesheets/components/checkboxes/_index.scss
|
96
|
+
- vendor/assets/stylesheets/components/cookie-banner/_cookie-banner.scss
|
97
|
+
- vendor/assets/stylesheets/components/cookie-banner/_index.scss
|
96
98
|
- vendor/assets/stylesheets/components/date-input/_date-input.scss
|
97
99
|
- vendor/assets/stylesheets/components/date-input/_index.scss
|
98
100
|
- vendor/assets/stylesheets/components/details/_details.scss
|
@@ -163,6 +165,7 @@ files:
|
|
163
165
|
- vendor/assets/stylesheets/helpers/_typography.scss
|
164
166
|
- vendor/assets/stylesheets/helpers/_visually-hidden.scss
|
165
167
|
- vendor/assets/stylesheets/objects/_all.scss
|
168
|
+
- vendor/assets/stylesheets/objects/_button-group.scss
|
166
169
|
- vendor/assets/stylesheets/objects/_form-group.scss
|
167
170
|
- vendor/assets/stylesheets/objects/_grid.scss
|
168
171
|
- vendor/assets/stylesheets/objects/_main-wrapper.scss
|
@@ -170,6 +173,7 @@ files:
|
|
170
173
|
- vendor/assets/stylesheets/overrides/_all.scss
|
171
174
|
- vendor/assets/stylesheets/overrides/_display.scss
|
172
175
|
- vendor/assets/stylesheets/overrides/_spacing.scss
|
176
|
+
- vendor/assets/stylesheets/overrides/_text-align.scss
|
173
177
|
- vendor/assets/stylesheets/overrides/_typography.scss
|
174
178
|
- vendor/assets/stylesheets/overrides/_width.scss
|
175
179
|
- vendor/assets/stylesheets/settings/_all.scss
|
@@ -180,6 +184,7 @@ files:
|
|
180
184
|
- vendor/assets/stylesheets/settings/_compatibility.scss
|
181
185
|
- vendor/assets/stylesheets/settings/_global-styles.scss
|
182
186
|
- vendor/assets/stylesheets/settings/_ie8.scss
|
187
|
+
- vendor/assets/stylesheets/settings/_links.scss
|
183
188
|
- vendor/assets/stylesheets/settings/_measurements.scss
|
184
189
|
- vendor/assets/stylesheets/settings/_media-queries.scss
|
185
190
|
- vendor/assets/stylesheets/settings/_spacing.scss
|
@@ -218,7 +223,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
|
|
218
223
|
- !ruby/object:Gem::Version
|
219
224
|
version: '0'
|
220
225
|
requirements: []
|
221
|
-
rubygems_version: 3.
|
226
|
+
rubygems_version: 3.2.22
|
222
227
|
signing_key:
|
223
228
|
specification_version: 4
|
224
229
|
summary: Adds the GOVUK frontend to a Rails application that uses the Asset Pipeline.
|