govuk_publishing_components 24.10.0 → 24.11.1
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/app/assets/javascripts/govuk_publishing_components/analytics/pii.js +1 -1
- data/app/assets/javascripts/govuk_publishing_components/analytics/scroll-tracker.js +6 -248
- data/app/assets/javascripts/govuk_publishing_components/components/accordion.js +1 -1
- data/app/assets/javascripts/govuk_publishing_components/components/cookie-banner.js +1 -0
- data/app/assets/javascripts/govuk_publishing_components/components/feedback.js +142 -104
- data/app/assets/javascripts/govuk_publishing_components/components/reorderable-list.js +1 -1
- data/app/assets/javascripts/govuk_publishing_components/components/step-by-step-nav.js +2 -2
- data/app/assets/javascripts/govuk_publishing_components/lib/trigger-event.js +18 -0
- data/app/assets/stylesheets/govuk_publishing_components/_all_components_print.scss +0 -11
- data/app/assets/stylesheets/govuk_publishing_components/components/_govspeak.scss +1 -0
- data/app/assets/stylesheets/govuk_publishing_components/components/_metadata.scss +15 -18
- data/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_advisory.scss +27 -24
- data/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_attachment.scss +1 -1
- data/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_button.scss +1 -0
- data/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_call-to-action.scss +1 -0
- data/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_charts.scss +1 -0
- data/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_contact.scss +1 -0
- data/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_example.scss +1 -0
- data/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_footnotes.scss +1 -0
- data/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_form-download.scss +19 -16
- data/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_fraction.scss +1 -0
- data/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_highlight-answer.scss +30 -27
- data/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_images.scss +1 -0
- data/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_information-callout.scss +1 -0
- data/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_legislative-list.scss +1 -0
- data/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_place.scss +26 -21
- data/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_stat-headline.scss +1 -0
- data/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_steps.scss +19 -16
- data/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_summary.scss +21 -18
- data/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_tables.scss +1 -0
- data/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_typography.scss +1 -0
- data/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_warning-callout.scss +1 -0
- data/app/assets/stylesheets/govuk_publishing_components/components/print/_attachment.scss +2 -3
- data/app/assets/stylesheets/govuk_publishing_components/components/print/_back-link.scss +2 -3
- data/app/assets/stylesheets/govuk_publishing_components/components/print/_button.scss +0 -4
- data/app/assets/stylesheets/govuk_publishing_components/components/print/_feedback.scss +2 -3
- data/app/assets/stylesheets/govuk_publishing_components/components/print/_layout-footer.scss +2 -6
- data/app/assets/stylesheets/govuk_publishing_components/components/print/_layout-header.scss +2 -3
- data/app/assets/stylesheets/govuk_publishing_components/components/print/_metadata.scss +2 -6
- data/app/assets/stylesheets/govuk_publishing_components/components/print/_search.scss +2 -3
- data/app/assets/stylesheets/govuk_publishing_components/components/print/_share-links.scss +2 -3
- data/app/assets/stylesheets/govuk_publishing_components/components/print/_skip-link.scss +2 -3
- data/app/assets/stylesheets/govuk_publishing_components/components/print/_step-by-step-nav-header.scss +0 -4
- data/app/assets/stylesheets/govuk_publishing_components/components/print/_subscription-links.scss +2 -3
- data/app/assets/stylesheets/govuk_publishing_components/components/print/_translation-nav.scss +2 -3
- data/app/views/govuk_publishing_components/components/_attachment.html.erb +1 -1
- data/app/views/govuk_publishing_components/components/_back_link.html.erb +1 -1
- data/app/views/govuk_publishing_components/components/_button.html.erb +1 -1
- data/app/views/govuk_publishing_components/components/_feedback.html.erb +1 -1
- data/app/views/govuk_publishing_components/components/_government_navigation.html.erb +7 -7
- data/app/views/govuk_publishing_components/components/_layout_footer.html.erb +5 -3
- data/app/views/govuk_publishing_components/components/_layout_header.html.erb +1 -1
- data/app/views/govuk_publishing_components/components/_machine_readable_metadata.html.erb +1 -1
- data/app/views/govuk_publishing_components/components/_metadata.html.erb +9 -8
- data/app/views/govuk_publishing_components/components/_phase_banner.html.erb +1 -5
- data/app/views/govuk_publishing_components/components/_previous_and_next_navigation.html.erb +1 -1
- data/app/views/govuk_publishing_components/components/_print_link.html.erb +1 -1
- data/app/views/govuk_publishing_components/components/_radio.html.erb +6 -11
- data/app/views/govuk_publishing_components/components/_search.html.erb +1 -1
- data/app/views/govuk_publishing_components/components/_share_links.html.erb +1 -1
- data/app/views/govuk_publishing_components/components/_skip_link.html.erb +1 -1
- data/app/views/govuk_publishing_components/components/_step_by_step_nav.html.erb +6 -6
- data/app/views/govuk_publishing_components/components/_step_by_step_nav_related.html.erb +1 -1
- data/app/views/govuk_publishing_components/components/_subscription_links.html.erb +2 -2
- data/app/views/govuk_publishing_components/components/_success_alert.html.erb +1 -1
- data/app/views/govuk_publishing_components/components/_translation_nav.html.erb +1 -1
- data/app/views/govuk_publishing_components/components/docs/feedback.yml +2 -0
- data/app/views/govuk_publishing_components/components/docs/phase_banner.yml +2 -2
- data/app/views/govuk_publishing_components/components/layout_header/_navigation_items.html.erb +2 -2
- data/app/views/govuk_publishing_components/components/metadata/_sentence.html.erb +4 -4
- data/app/views/govuk_publishing_components/components/related_navigation/_section.html.erb +2 -2
- data/config/locales/ar.yml +123 -0
- data/config/locales/az.yml +123 -0
- data/config/locales/be.yml +123 -0
- data/config/locales/bg.yml +123 -0
- data/config/locales/bn.yml +123 -0
- data/config/locales/cs.yml +123 -0
- data/config/locales/cy.yml +115 -6
- data/config/locales/da.yml +123 -0
- data/config/locales/de.yml +123 -0
- data/config/locales/dr.yml +123 -0
- data/config/locales/el.yml +123 -0
- data/config/locales/en.yml +111 -103
- data/config/locales/es-419.yml +123 -0
- data/config/locales/es.yml +123 -0
- data/config/locales/et.yml +120 -0
- data/config/locales/fa.yml +123 -0
- data/config/locales/fi.yml +123 -0
- data/config/locales/fr.yml +120 -0
- data/config/locales/gd.yml +123 -0
- data/config/locales/gu.yml +123 -0
- data/config/locales/he.yml +123 -0
- data/config/locales/hi.yml +123 -0
- data/config/locales/hr.yml +123 -0
- data/config/locales/hu.yml +123 -0
- data/config/locales/hy.yml +123 -0
- data/config/locales/id.yml +123 -0
- data/config/locales/is.yml +123 -0
- data/config/locales/it.yml +123 -0
- data/config/locales/ja.yml +123 -0
- data/config/locales/ka.yml +123 -0
- data/config/locales/kk.yml +123 -0
- data/config/locales/ko.yml +123 -0
- data/config/locales/lt.yml +123 -0
- data/config/locales/lv.yml +123 -0
- data/config/locales/ms.yml +123 -0
- data/config/locales/mt.yml +123 -0
- data/config/locales/nl.yml +123 -0
- data/config/locales/no.yml +124 -1
- data/config/locales/pa-pk.yml +123 -0
- data/config/locales/pa.yml +123 -0
- data/config/locales/pl.yml +123 -0
- data/config/locales/ps.yml +123 -0
- data/config/locales/pt.yml +123 -0
- data/config/locales/ro.yml +123 -0
- data/config/locales/ru.yml +123 -0
- data/config/locales/si.yml +123 -0
- data/config/locales/sk.yml +123 -0
- data/config/locales/sl.yml +123 -0
- data/config/locales/so.yml +123 -0
- data/config/locales/sq.yml +123 -0
- data/config/locales/sr.yml +123 -0
- data/config/locales/sv.yml +123 -0
- data/config/locales/sw.yml +123 -0
- data/config/locales/ta.yml +123 -0
- data/config/locales/th.yml +123 -0
- data/config/locales/tk.yml +123 -0
- data/config/locales/tr.yml +123 -0
- data/config/locales/uk.yml +123 -0
- data/config/locales/ur.yml +123 -0
- data/config/locales/uz.yml +123 -0
- data/config/locales/vi.yml +123 -0
- data/config/locales/zh-hk.yml +123 -0
- data/config/locales/zh-tw.yml +123 -0
- data/config/locales/zh.yml +123 -0
- data/lib/govuk_publishing_components/presenters/breadcrumb_selector.rb +5 -0
- data/lib/govuk_publishing_components/presenters/content_breadcrumbs_based_on_taxons.rb +1 -2
- data/lib/govuk_publishing_components/presenters/content_item.rb +4 -0
- data/lib/govuk_publishing_components/presenters/contextual_navigation.rb +4 -0
- data/lib/govuk_publishing_components/presenters/machine_readable/page.rb +4 -0
- data/lib/govuk_publishing_components/version.rb +1 -1
- data/node_modules/govuk-frontend/govuk/components/accordion/_index.scss +7 -16
- data/node_modules/govuk-frontend/govuk/components/back-link/_index.scss +4 -15
- data/node_modules/govuk-frontend/govuk/components/character-count/macro-options.json +1 -1
- data/node_modules/govuk-frontend/govuk/components/checkboxes/macro-options.json +3 -3
- data/node_modules/govuk-frontend/govuk/components/cookie-banner/README.md +15 -0
- data/node_modules/govuk-frontend/govuk/components/cookie-banner/fixtures.json +40 -22
- data/node_modules/govuk-frontend/govuk/components/cookie-banner/macro-options.json +6 -6
- data/node_modules/govuk-frontend/govuk/components/cookie-banner/template.njk +15 -5
- data/node_modules/govuk-frontend/govuk/components/date-input/macro-options.json +2 -2
- data/node_modules/govuk-frontend/govuk/components/details/_index.scss +5 -1
- data/node_modules/govuk-frontend/govuk/components/file-upload/_index.scss +13 -14
- data/node_modules/govuk-frontend/govuk/components/file-upload/macro-options.json +1 -1
- data/node_modules/govuk-frontend/govuk/components/footer/_index.scss +14 -19
- data/node_modules/govuk-frontend/govuk/components/header/_index.scss +39 -21
- data/node_modules/govuk-frontend/govuk/components/input/macro-options.json +1 -1
- data/node_modules/govuk-frontend/govuk/components/phase-banner/_index.scss +1 -1
- data/node_modules/govuk-frontend/govuk/components/radios/macro-options.json +3 -3
- data/node_modules/govuk-frontend/govuk/components/select/macro-options.json +1 -1
- data/node_modules/govuk-frontend/govuk/components/skip-link/_index.scss +1 -1
- data/node_modules/govuk-frontend/govuk/components/tabs/_index.scss +1 -6
- data/node_modules/govuk-frontend/govuk/components/textarea/macro-options.json +1 -1
- data/node_modules/govuk-frontend/govuk/components/warning-text/_index.scss +10 -0
- data/node_modules/govuk-frontend/govuk/core/_links.scss +8 -0
- data/node_modules/govuk-frontend/govuk/helpers/_links.scss +153 -38
- data/node_modules/govuk-frontend/govuk/settings/_all.scss +2 -0
- data/node_modules/govuk-frontend/govuk/settings/_links.scss +62 -0
- data/node_modules/govuk-frontend/package.json +1 -1
- metadata +20 -3
@@ -8,17 +8,21 @@
|
|
8
8
|
.govuk-file-upload {
|
9
9
|
@include govuk-font($size: 19);
|
10
10
|
@include govuk-text-colour;
|
11
|
-
|
12
|
-
padding
|
11
|
+
margin-left: -$component-padding;
|
12
|
+
padding: $component-padding;
|
13
|
+
|
14
|
+
// The default file upload button in Safari does not
|
15
|
+
// support setting a custom font-size. Set `-webkit-appearance`
|
16
|
+
// to `button` to drop out of the native appearance so the
|
17
|
+
// font-size is set to 19px
|
18
|
+
// https://bugs.webkit.org/show_bug.cgi?id=224746
|
19
|
+
&::-webkit-file-upload-button {
|
20
|
+
-webkit-appearance: button;
|
21
|
+
color: inherit;
|
22
|
+
font: inherit;
|
23
|
+
}
|
13
24
|
|
14
25
|
&:focus {
|
15
|
-
// "Yank" the padding with negative margin to avoid a jump
|
16
|
-
// when element is focused
|
17
|
-
margin-right: -$component-padding;
|
18
|
-
margin-left: -$component-padding;
|
19
|
-
padding-right: $component-padding;
|
20
|
-
padding-left: $component-padding;
|
21
|
-
|
22
26
|
outline: $govuk-focus-width solid $govuk-focus-colour;
|
23
27
|
// Use `box-shadow` to add border instead of changing `border-width`
|
24
28
|
// (which changes element size) and since `outline` is already used for the
|
@@ -37,11 +41,6 @@
|
|
37
41
|
// to recognise `focus-within` and don't set any styles from the block
|
38
42
|
// when it's a selector.
|
39
43
|
&:focus-within {
|
40
|
-
margin-right: -$component-padding;
|
41
|
-
margin-left: -$component-padding;
|
42
|
-
padding-right: $component-padding;
|
43
|
-
padding-left: $component-padding;
|
44
|
-
|
45
44
|
outline: $govuk-focus-width solid $govuk-focus-colour;
|
46
45
|
|
47
46
|
box-shadow: inset 0 0 0 4px $govuk-input-border-colour;
|
@@ -54,7 +54,7 @@
|
|
54
54
|
"name": "classes",
|
55
55
|
"type": "string",
|
56
56
|
"required": false,
|
57
|
-
"description": "Classes to add to the form group (
|
57
|
+
"description": "Classes to add to the form group (for example to show error state for the whole group)"
|
58
58
|
}
|
59
59
|
]
|
60
60
|
},
|
@@ -6,17 +6,13 @@
|
|
6
6
|
// as it'll just be the same as $govuk-footer-border.
|
7
7
|
$govuk-footer-border-top: $govuk-border-colour;
|
8
8
|
$govuk-footer-text: $govuk-text-colour;
|
9
|
-
$govuk-footer-link:
|
10
|
-
$govuk-footer-link-hover: false;
|
9
|
+
$govuk-footer-link-hover-colour: null; // Only used with the legacy palette
|
11
10
|
|
12
11
|
@if ($govuk-use-legacy-palette) {
|
13
12
|
$govuk-footer-border-top: #a1acb2;
|
14
13
|
$govuk-footer-border: govuk-colour("grey-2");
|
15
14
|
$govuk-footer-text: #454a4c;
|
16
|
-
$govuk-footer-link:
|
17
|
-
|
18
|
-
// Only used with the legacy palette
|
19
|
-
$govuk-footer-link-hover: #171819;
|
15
|
+
$govuk-footer-link-hover-colour: #171819;
|
20
16
|
}
|
21
17
|
|
22
18
|
// Based on the govuk-crest-2x.png image dimensions.
|
@@ -37,27 +33,20 @@
|
|
37
33
|
}
|
38
34
|
|
39
35
|
.govuk-footer__link {
|
36
|
+
@include govuk-link-common;
|
37
|
+
|
40
38
|
@if ($govuk-use-legacy-palette) {
|
41
39
|
&:link,
|
42
40
|
&:visited {
|
43
|
-
color: $govuk-footer-
|
41
|
+
color: $govuk-footer-text;
|
44
42
|
}
|
45
43
|
|
46
44
|
&:hover,
|
47
45
|
&:active {
|
48
|
-
color: $govuk-footer-link-hover;
|
46
|
+
color: $govuk-footer-link-hover-colour;
|
49
47
|
}
|
50
48
|
} @else {
|
51
|
-
|
52
|
-
&:visited,
|
53
|
-
&:hover,
|
54
|
-
&:active {
|
55
|
-
color: $govuk-footer-link;
|
56
|
-
}
|
57
|
-
}
|
58
|
-
|
59
|
-
&:focus {
|
60
|
-
@include govuk-focused-text;
|
49
|
+
@include govuk-link-style-text;
|
61
50
|
}
|
62
51
|
|
63
52
|
// alphagov/govuk_template includes a specific a:link:focus selector
|
@@ -134,7 +123,6 @@
|
|
134
123
|
background-position: 50% 0%;
|
135
124
|
background-size: $govuk-footer-crest-image-width $govuk-footer-crest-image-height;
|
136
125
|
text-align: center;
|
137
|
-
text-decoration: none;
|
138
126
|
white-space: nowrap;
|
139
127
|
}
|
140
128
|
|
@@ -210,6 +198,13 @@
|
|
210
198
|
list-style: none;
|
211
199
|
-webkit-column-gap: $govuk-gutter;
|
212
200
|
column-gap: $govuk-gutter; // Support: Columns
|
201
|
+
|
202
|
+
// Disable thicker underlines on hover because of a bug in Chromium
|
203
|
+
// affecting links within columns
|
204
|
+
// https://bugs.chromium.org/p/chromium/issues/detail?id=1190987
|
205
|
+
.govuk-footer__link:hover {
|
206
|
+
text-decoration-thickness: auto;
|
207
|
+
}
|
213
208
|
}
|
214
209
|
|
215
210
|
@include govuk-media-query ($from: desktop) {
|
@@ -4,10 +4,9 @@
|
|
4
4
|
$govuk-header-border-color: $govuk-brand-colour;
|
5
5
|
$govuk-header-border-width: govuk-spacing(2);
|
6
6
|
$govuk-header-text: govuk-colour("white");
|
7
|
-
$govuk-header-link: govuk-colour("white");
|
8
|
-
$govuk-header-link-hover: govuk-colour("white");
|
9
7
|
$govuk-header-link-active: #1d8feb;
|
10
8
|
$govuk-header-nav-item-border-color: #2e3133;
|
9
|
+
$govuk-header-link-underline-thickness: 3px;
|
11
10
|
|
12
11
|
.govuk-header {
|
13
12
|
@include govuk-font($size: 16);
|
@@ -36,7 +35,19 @@
|
|
36
35
|
|
37
36
|
.govuk-header__logotype {
|
38
37
|
display: inline-block;
|
38
|
+
|
39
|
+
// Add a gap between logo and any product name
|
39
40
|
margin-right: govuk-spacing(1);
|
41
|
+
|
42
|
+
// Prevent readability backplate from obscuring underline in Windows
|
43
|
+
// High Contrast Mode
|
44
|
+
forced-color-adjust: none;
|
45
|
+
|
46
|
+
// But remove it if there's nothing after the logo to keep hover and focus
|
47
|
+
// states neat
|
48
|
+
&:last-child {
|
49
|
+
margin-right: 0;
|
50
|
+
}
|
40
51
|
}
|
41
52
|
|
42
53
|
.govuk-header__logotype-crown {
|
@@ -57,33 +68,33 @@
|
|
57
68
|
.govuk-header__product-name {
|
58
69
|
@include govuk-font($size: 24, $line-height: 1);
|
59
70
|
display: inline-table;
|
60
|
-
padding-right: govuk-spacing(2);
|
61
71
|
}
|
62
72
|
|
63
73
|
.govuk-header__link {
|
64
|
-
|
74
|
+
// Avoid using the `govuk-link-common` mixin because the links in the header
|
75
|
+
// get a special treatment, because:
|
76
|
+
//
|
77
|
+
// - underlines are only visible on hover
|
78
|
+
// - all links get a 3px underline regardless of text size, as there are
|
79
|
+
// multiple grouped elements close to one another and having slightly
|
80
|
+
// different underline widths looks unbalanced
|
81
|
+
@include govuk-typography-common;
|
82
|
+
@include govuk-link-style-inverse;
|
65
83
|
|
66
|
-
|
67
|
-
&:visited {
|
68
|
-
color: $govuk-header-link;
|
69
|
-
}
|
84
|
+
text-decoration: none;
|
70
85
|
|
71
86
|
&:hover {
|
72
87
|
text-decoration: underline;
|
88
|
+
text-decoration-thickness: $govuk-header-link-underline-thickness;
|
89
|
+
|
90
|
+
@if ($govuk-link-underline-offset) {
|
91
|
+
text-underline-offset: $govuk-link-underline-offset;
|
92
|
+
}
|
73
93
|
}
|
74
94
|
|
75
95
|
&:focus {
|
76
96
|
@include govuk-focused-text;
|
77
97
|
}
|
78
|
-
|
79
|
-
// alphagov/govuk_template includes a specific a:link:focus selector
|
80
|
-
// designed to make unvisited links a slightly darker blue when focussed, so
|
81
|
-
// we need to override the text colour for that combination of selectors.
|
82
|
-
@include govuk-compatibility(govuk_template) {
|
83
|
-
&:link:focus {
|
84
|
-
@include govuk-text-colour;
|
85
|
-
}
|
86
|
-
}
|
87
98
|
}
|
88
99
|
|
89
100
|
.govuk-header__link--homepage {
|
@@ -92,6 +103,7 @@
|
|
92
103
|
@include govuk-font($size: false, $weight: bold);
|
93
104
|
|
94
105
|
display: inline-block;
|
106
|
+
margin-right: govuk-spacing(2);
|
95
107
|
font-size: 30px; // We don't have a mixin that produces 30px font size
|
96
108
|
line-height: 1;
|
97
109
|
|
@@ -103,10 +115,10 @@
|
|
103
115
|
&:hover,
|
104
116
|
&:active {
|
105
117
|
// Negate the added border
|
106
|
-
margin-bottom: -
|
118
|
+
margin-bottom: $govuk-header-link-underline-thickness * -1;
|
107
119
|
// Omitting colour will use default value of currentColor – if we
|
108
120
|
// specified currentColor explicitly IE8 would ignore this rule.
|
109
|
-
border-bottom:
|
121
|
+
border-bottom: $govuk-header-link-underline-thickness solid;
|
110
122
|
}
|
111
123
|
|
112
124
|
// Remove any borders that show when focused and hovered.
|
@@ -156,11 +168,17 @@
|
|
156
168
|
margin: 0;
|
157
169
|
padding: 0;
|
158
170
|
border: 0;
|
159
|
-
color:
|
171
|
+
color: govuk-colour("white");
|
160
172
|
background: none;
|
173
|
+
cursor: pointer;
|
161
174
|
|
162
175
|
&:hover {
|
163
|
-
text-decoration: underline;
|
176
|
+
-webkit-text-decoration: solid underline $govuk-header-link-underline-thickness;
|
177
|
+
text-decoration: solid underline $govuk-header-link-underline-thickness;
|
178
|
+
|
179
|
+
@if ($govuk-link-underline-offset) {
|
180
|
+
text-underline-offset: $govuk-link-underline-offset;
|
181
|
+
}
|
164
182
|
}
|
165
183
|
|
166
184
|
&:focus {
|
@@ -130,7 +130,7 @@
|
|
130
130
|
"name": "classes",
|
131
131
|
"type": "string",
|
132
132
|
"required": false,
|
133
|
-
"description": "Classes to add to the form group (
|
133
|
+
"description": "Classes to add to the form group (for example to show error state for the whole group)"
|
134
134
|
}
|
135
135
|
]
|
136
136
|
},
|
@@ -3,14 +3,14 @@
|
|
3
3
|
"name": "fieldset",
|
4
4
|
"type": "object",
|
5
5
|
"required": false,
|
6
|
-
"description": "Options for the fieldset component (
|
6
|
+
"description": "Options for the fieldset component (for example legend).",
|
7
7
|
"isComponent": true
|
8
8
|
},
|
9
9
|
{
|
10
10
|
"name": "hint",
|
11
11
|
"type": "object",
|
12
12
|
"required": false,
|
13
|
-
"description": "Options for the hint component (
|
13
|
+
"description": "Options for the hint component (for example text).",
|
14
14
|
"isComponent": true
|
15
15
|
},
|
16
16
|
{
|
@@ -30,7 +30,7 @@
|
|
30
30
|
"name": "classes",
|
31
31
|
"type": "string",
|
32
32
|
"required": false,
|
33
|
-
"description": "Classes to add to the form group (
|
33
|
+
"description": "Classes to add to the form group (for example to show error state for the whole group)"
|
34
34
|
}
|
35
35
|
]
|
36
36
|
},
|
@@ -86,7 +86,7 @@
|
|
86
86
|
"name": "classes",
|
87
87
|
"type": "string",
|
88
88
|
"required": false,
|
89
|
-
"description": "Classes to add to the form group (
|
89
|
+
"description": "Classes to add to the form group (for example to show error state for the whole group)"
|
90
90
|
}
|
91
91
|
]
|
92
92
|
},
|
@@ -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
|
|
@@ -27,7 +28,6 @@
|
|
27
28
|
// Undo unwanted changes when global styles are enabled
|
28
29
|
@if ($govuk-global-styles) {
|
29
30
|
box-shadow: none;
|
30
|
-
text-decoration: underline;
|
31
31
|
}
|
32
32
|
}
|
33
33
|
}
|
@@ -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 {
|
@@ -66,7 +66,7 @@
|
|
66
66
|
"name": "classes",
|
67
67
|
"type": "string",
|
68
68
|
"required": false,
|
69
|
-
"description": "Classes to add to the form group (
|
69
|
+
"description": "Classes to add to the form group (for example to show error state for the whole group)"
|
70
70
|
}
|
71
71
|
]
|
72
72
|
},
|
@@ -46,6 +46,16 @@
|
|
46
46
|
-moz-user-select: none;
|
47
47
|
-ms-user-select: none;
|
48
48
|
user-select: none;
|
49
|
+
|
50
|
+
// Improve rendering in Windows High Contrast Mode (Edge), where a
|
51
|
+
// readability backplate behind the exclamation mark obscures the circle
|
52
|
+
forced-color-adjust: none;
|
53
|
+
|
54
|
+
@media screen and (forced-colors: active) {
|
55
|
+
border-color: windowText;
|
56
|
+
color: windowText;
|
57
|
+
background: transparent;
|
58
|
+
}
|
49
59
|
}
|
50
60
|
|
51
61
|
.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
|
}
|
@@ -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,57 @@
|
|
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
|
+
}
|
56
|
+
}
|
57
|
+
|
58
|
+
/// Default link styles
|
20
59
|
///
|
21
|
-
///
|
60
|
+
/// Makes links use the default unvisited, visited, hover and active colours.
|
22
61
|
///
|
23
|
-
/// If you use this mixin in a component you must also include the
|
24
|
-
/// govuk-link-common mixin
|
62
|
+
/// If you use this mixin in a component, you must also include the
|
63
|
+
/// `govuk-link-common` mixin to get the correct focus and hover states.
|
25
64
|
///
|
26
65
|
/// @example scss
|
27
66
|
/// .govuk-component__link {
|
@@ -66,12 +105,13 @@
|
|
66
105
|
}
|
67
106
|
}
|
68
107
|
|
69
|
-
/// Error link
|
108
|
+
/// Error link styles
|
70
109
|
///
|
71
|
-
///
|
110
|
+
/// Makes links use the error colour. The link will darken if it's active or a
|
111
|
+
/// user hovers their cursor over it.
|
72
112
|
///
|
73
|
-
/// If you use this mixin in a component you must also include the
|
74
|
-
/// govuk-link-common mixin
|
113
|
+
/// If you use this mixin in a component, you must also include the
|
114
|
+
/// `govuk-link-common` mixin to get the correct focus and hover states.
|
75
115
|
///
|
76
116
|
/// @example scss
|
77
117
|
/// .govuk-component__link {
|
@@ -113,12 +153,13 @@
|
|
113
153
|
}
|
114
154
|
}
|
115
155
|
|
116
|
-
/// Success link
|
156
|
+
/// Success link styles
|
117
157
|
///
|
118
|
-
///
|
158
|
+
/// Makes links use the success colour. The link will darken if it's active or a
|
159
|
+
/// user hovers their cursor over it.
|
119
160
|
///
|
120
|
-
/// If you use this mixin in a component you must also include the
|
121
|
-
/// govuk-link-common mixin
|
161
|
+
/// If you use this mixin in a component, you must also include the
|
162
|
+
/// `govuk-link-common` mixin to get the correct focus and hover states.
|
122
163
|
///
|
123
164
|
/// @example scss
|
124
165
|
/// .govuk-component__link {
|
@@ -160,13 +201,13 @@
|
|
160
201
|
}
|
161
202
|
}
|
162
203
|
|
163
|
-
/// Muted
|
204
|
+
/// Muted link styles
|
164
205
|
///
|
165
|
-
///
|
166
|
-
///
|
206
|
+
/// Makes links use the secondary text colour. The link will darken if it's
|
207
|
+
/// active or a user hovers their cursor over it.
|
167
208
|
///
|
168
|
-
/// If you use this mixin in a component you must also include the
|
169
|
-
/// govuk-link-common mixin
|
209
|
+
/// If you use this mixin in a component, you must also include the
|
210
|
+
/// `govuk-link-common` mixin to get the correct focus and hover states.
|
170
211
|
///
|
171
212
|
/// @example scss
|
172
213
|
/// .govuk-component__link {
|
@@ -178,10 +219,13 @@
|
|
178
219
|
|
179
220
|
@mixin govuk-link-style-muted {
|
180
221
|
&:link,
|
181
|
-
&:visited
|
222
|
+
&:visited {
|
223
|
+
color: $govuk-secondary-text-colour;
|
224
|
+
}
|
225
|
+
|
182
226
|
&:hover,
|
183
227
|
&:active {
|
184
|
-
color: $govuk-
|
228
|
+
color: $govuk-text-colour;
|
185
229
|
}
|
186
230
|
|
187
231
|
// When focussed, the text colour needs to be darker to ensure that colour
|
@@ -200,13 +244,13 @@
|
|
200
244
|
}
|
201
245
|
}
|
202
246
|
|
203
|
-
/// Text
|
247
|
+
/// Text link styles
|
204
248
|
///
|
205
|
-
///
|
249
|
+
/// Makes links use the primary text colour, in all states. Use this mixin for
|
206
250
|
/// navigation components, such as breadcrumbs or the back link.
|
207
251
|
///
|
208
|
-
/// If you use this mixin in a component you must also include the
|
209
|
-
/// govuk-link-common mixin
|
252
|
+
/// If you use this mixin in a component, you must also include the
|
253
|
+
/// `govuk-link-common` mixin to get the correct focus and hover states.
|
210
254
|
///
|
211
255
|
/// @example scss
|
212
256
|
/// .govuk-component__link {
|
@@ -217,10 +261,17 @@
|
|
217
261
|
/// @access public
|
218
262
|
|
219
263
|
@mixin govuk-link-style-text {
|
220
|
-
// Override link colour to use text colour
|
221
264
|
&:link,
|
222
|
-
&:visited
|
223
|
-
|
265
|
+
&:visited {
|
266
|
+
@include govuk-text-colour;
|
267
|
+
}
|
268
|
+
|
269
|
+
// Force a colour change on hover to work around a bug in Safari
|
270
|
+
// https://bugs.webkit.org/show_bug.cgi?id=224483
|
271
|
+
&:hover {
|
272
|
+
color: rgba($govuk-text-colour, .99);
|
273
|
+
}
|
274
|
+
|
224
275
|
&:active,
|
225
276
|
&:focus {
|
226
277
|
@include govuk-text-colour;
|
@@ -236,17 +287,60 @@
|
|
236
287
|
}
|
237
288
|
}
|
238
289
|
|
239
|
-
///
|
290
|
+
/// Inverse link styles
|
291
|
+
///
|
292
|
+
/// Makes links white, in all states. Use this mixin if you're displaying links
|
293
|
+
/// against a dark background.
|
294
|
+
///
|
295
|
+
/// If you use this mixin in a component, you must also include the
|
296
|
+
/// `govuk-link-common` mixin to get the correct focus and hover states.
|
297
|
+
///
|
298
|
+
/// @example scss
|
299
|
+
/// .govuk-component__link {
|
300
|
+
/// @include govuk-link-common;
|
301
|
+
/// @include govuk-link-style-inverse;
|
302
|
+
/// }
|
303
|
+
///
|
304
|
+
/// @access public
|
305
|
+
|
306
|
+
@mixin govuk-link-style-inverse {
|
307
|
+
&:link,
|
308
|
+
&:visited {
|
309
|
+
color: govuk-colour("white");
|
310
|
+
}
|
311
|
+
|
312
|
+
// Force a colour change on hover to work around a bug in Safari
|
313
|
+
// https://bugs.webkit.org/show_bug.cgi?id=224483
|
314
|
+
&:hover,
|
315
|
+
&:active {
|
316
|
+
color: rgba(govuk-colour("white"), .99);
|
317
|
+
}
|
318
|
+
|
319
|
+
&:focus {
|
320
|
+
color: $govuk-focus-text-colour;
|
321
|
+
}
|
322
|
+
|
323
|
+
// alphagov/govuk_template includes a specific a:link:focus selector designed
|
324
|
+
// to make unvisited links a slightly darker blue when focussed, so we need to
|
325
|
+
// override the text colour for that combination of selectors.
|
326
|
+
@include govuk-compatibility(govuk_template) {
|
327
|
+
&:link:focus {
|
328
|
+
color: $govuk-focus-text-colour;
|
329
|
+
}
|
330
|
+
}
|
331
|
+
}
|
332
|
+
|
333
|
+
/// Default link styles, without a visited state
|
240
334
|
///
|
241
|
-
///
|
242
|
-
///
|
335
|
+
/// Makes links use the default unvisited, hover and active colours, with no
|
336
|
+
/// distinct visited state.
|
243
337
|
///
|
244
|
-
///
|
245
|
-
///
|
246
|
-
///
|
338
|
+
/// Use this mixin when it's not helpful to distinguish between visited and
|
339
|
+
/// non-visited links. For example, when you link to pages with
|
340
|
+
/// frequently-changing content, such as the dashboard for an admin interface.
|
247
341
|
///
|
248
|
-
/// If you use this mixin in a component you must also include the
|
249
|
-
/// govuk-link-common mixin
|
342
|
+
/// If you use this mixin in a component, you must also include the
|
343
|
+
/// `govuk-link-common` mixin to get the correct focus and hover states.
|
250
344
|
///
|
251
345
|
/// @example scss
|
252
346
|
/// .govuk-component__link {
|
@@ -280,10 +374,31 @@
|
|
280
374
|
}
|
281
375
|
}
|
282
376
|
|
283
|
-
///
|
377
|
+
/// Remove underline from links
|
378
|
+
///
|
379
|
+
/// Remove underlines from links unless the link is active or a user hovers
|
380
|
+
/// their cursor over it. This has no effect in Internet Explorer 8 (IE8),
|
381
|
+
/// because IE8 does not support `:not`.
|
382
|
+
///
|
383
|
+
/// @example scss
|
384
|
+
/// .govuk-component__link {
|
385
|
+
/// @include govuk-link-common;
|
386
|
+
/// @include govuk-link-style-default;
|
387
|
+
/// @include govuk-link-style-no-underline;
|
388
|
+
/// }
|
389
|
+
///
|
390
|
+
/// @access public
|
391
|
+
|
392
|
+
@mixin govuk-link-style-no-underline {
|
393
|
+
&:not(:hover):not(:active) {
|
394
|
+
text-decoration: none;
|
395
|
+
}
|
396
|
+
}
|
397
|
+
|
398
|
+
/// Include link destination when printing the page
|
284
399
|
///
|
285
|
-
///
|
286
|
-
///
|
400
|
+
/// If the user prints the page, add the destination URL after the link text, if
|
401
|
+
/// the URL starts with `/`, `http://` or `https://`.
|
287
402
|
///
|
288
403
|
/// @access public
|
289
404
|
|