govuk_publishing_components 24.10.3 → 24.11.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/app/assets/javascripts/govuk_publishing_components/components/accordion.js +1 -1
- 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 +1 -1
- data/app/assets/stylesheets/govuk_publishing_components/_all_components_print.scss +0 -11
- 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/_layout_footer.html.erb +2 -2
- data/app/views/govuk_publishing_components/components/_machine_readable_metadata.html.erb +1 -1
- data/app/views/govuk_publishing_components/components/_metadata.html.erb +1 -1
- data/app/views/govuk_publishing_components/components/_print_link.html.erb +1 -1
- 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 +2 -2
- data/app/views/govuk_publishing_components/components/_subscription_links.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/layout_header/_navigation_items.html.erb +1 -1
- data/app/views/govuk_publishing_components/components/metadata/_sentence.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 +109 -109
- 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/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/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 +5 -3
@@ -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
|
|