dxw_govuk_frontend_rails 3.11.0 → 3.12.0
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/Gemfile.lock +2 -2
- data/lib/dxw_govuk_frontend_rails/version.rb +1 -1
- data/package-lock.json +22 -4
- data/package.json +1 -1
- 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/details/_index.scss +5 -1
- data/vendor/assets/stylesheets/components/file-upload/_index.scss +13 -14
- data/vendor/assets/stylesheets/components/footer/_index.scss +14 -19
- data/vendor/assets/stylesheets/components/header/_index.scss +39 -21
- data/vendor/assets/stylesheets/components/phase-banner/_index.scss +1 -1
- data/vendor/assets/stylesheets/components/skip-link/_index.scss +1 -1
- data/vendor/assets/stylesheets/components/tabs/_index.scss +1 -6
- data/vendor/assets/stylesheets/components/warning-text/_index.scss +10 -0
- data/vendor/assets/stylesheets/core/_links.scss +8 -0
- data/vendor/assets/stylesheets/helpers/_links.scss +153 -38
- data/vendor/assets/stylesheets/settings/_all.scss +2 -0
- data/vendor/assets/stylesheets/settings/_links.scss +62 -0
- metadata +4 -3
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: e42e5531caedbe80f014557b076fc609f16ca85d666bdcc86bfb4e7c280e28a1
|
4
|
+
data.tar.gz: c712317b305d72d5960a65a1d4dbf0e7b0ebaf4bd482b057f32c6518d4fc90cc
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 5f6a004060916897d45767e91565c3cdc6322d860814f2acbc027d35eca9a22f2d328e955095e4c9d0b14b478de12c259f064d88bdc5468bc0ffda3dcd325085
|
7
|
+
data.tar.gz: 3c4a6afe51e11a479d23a3e1ec51e17660511e4dba977af9a89545f5a55be39ac0cffb0cc82626e053323841efdf4976858b4fecf2f11f2664af4341e755e44b
|
data/Gemfile.lock
CHANGED
data/package-lock.json
CHANGED
@@ -1,13 +1,31 @@
|
|
1
1
|
{
|
2
2
|
"name": "dxw_govuk_frontend_rails",
|
3
3
|
"version": "1.0.0",
|
4
|
-
"lockfileVersion":
|
4
|
+
"lockfileVersion": 2,
|
5
5
|
"requires": true,
|
6
|
+
"packages": {
|
7
|
+
"": {
|
8
|
+
"name": "dxw_govuk_frontend_rails",
|
9
|
+
"version": "1.0.0",
|
10
|
+
"license": "ISC",
|
11
|
+
"dependencies": {
|
12
|
+
"govuk-frontend": "3.12.0"
|
13
|
+
}
|
14
|
+
},
|
15
|
+
"node_modules/govuk-frontend": {
|
16
|
+
"version": "3.12.0",
|
17
|
+
"resolved": "https://registry.npmjs.org/govuk-frontend/-/govuk-frontend-3.12.0.tgz",
|
18
|
+
"integrity": "sha512-+mM8BqEUqsBVSV/ud0dEhE8OmMdhkK53eEUp5YyPN+y3mwcdRnwwP2A2B5qFdFi6E6j/2AYuCG8l5kXD+JXNxA==",
|
19
|
+
"engines": {
|
20
|
+
"node": ">= 4.2.0"
|
21
|
+
}
|
22
|
+
}
|
23
|
+
},
|
6
24
|
"dependencies": {
|
7
25
|
"govuk-frontend": {
|
8
|
-
"version": "3.
|
9
|
-
"resolved": "https://registry.npmjs.org/govuk-frontend/-/govuk-frontend-3.
|
10
|
-
"integrity": "sha512
|
26
|
+
"version": "3.12.0",
|
27
|
+
"resolved": "https://registry.npmjs.org/govuk-frontend/-/govuk-frontend-3.12.0.tgz",
|
28
|
+
"integrity": "sha512-+mM8BqEUqsBVSV/ud0dEhE8OmMdhkK53eEUp5YyPN+y3mwcdRnwwP2A2B5qFdFi6E6j/2AYuCG8l5kXD+JXNxA=="
|
11
29
|
}
|
12
30
|
}
|
13
31
|
}
|
data/package.json
CHANGED
@@ -1,9 +1,4 @@
|
|
1
1
|
@include govuk-exports("govuk/component/accordion") {
|
2
|
-
|
3
|
-
$govuk-accordion-link-colour: $govuk-link-colour;
|
4
|
-
$govuk-accordion-link-hover-colour: govuk-colour("light-blue");
|
5
|
-
$govuk-accordion-border-width: 3px;
|
6
|
-
|
7
2
|
.govuk-accordion {
|
8
3
|
@include govuk-responsive-margin(6, "bottom");
|
9
4
|
}
|
@@ -98,19 +93,9 @@
|
|
98
93
|
// Safe area on the right to avoid clashing with icon
|
99
94
|
padding-right: 40px;
|
100
95
|
border-top: 1px solid $govuk-border-colour;
|
101
|
-
color: $govuk-accordion-link-colour;
|
102
96
|
cursor: pointer;
|
103
97
|
}
|
104
98
|
|
105
|
-
// For devices that can't hover such as touch devices,
|
106
|
-
// remove hover state as it can be stuck in that state (iOS).
|
107
|
-
@media (hover: none) {
|
108
|
-
.govuk-accordion__section-header:hover {
|
109
|
-
border-top-color: $govuk-accordion-link-colour;
|
110
|
-
box-shadow: inset 0 $govuk-accordion-border-width 0 0 $govuk-accordion-link-colour;
|
111
|
-
}
|
112
|
-
}
|
113
|
-
|
114
99
|
// Buttons within the headers don’t need default styling
|
115
100
|
.govuk-accordion__section-button {
|
116
101
|
@include govuk-typography-common;
|
@@ -119,7 +104,7 @@
|
|
119
104
|
margin-left: 0;
|
120
105
|
padding: 0;
|
121
106
|
border-width: 0;
|
122
|
-
color:
|
107
|
+
color: $govuk-link-colour;
|
123
108
|
background: none;
|
124
109
|
text-align: left;
|
125
110
|
cursor: pointer;
|
@@ -147,7 +132,13 @@
|
|
147
132
|
}
|
148
133
|
|
149
134
|
.govuk-accordion__section-button:hover:not(:focus) {
|
135
|
+
color: $govuk-link-hover-colour;
|
150
136
|
text-decoration: underline;
|
137
|
+
|
138
|
+
// This needs to come after the text-decoration property otherwise
|
139
|
+
// text-decoration, as a shorthand property, resets it to auto
|
140
|
+
@include govuk-link-hover-decoration;
|
141
|
+
text-underline-offset: $govuk-link-underline-offset;
|
151
142
|
}
|
152
143
|
|
153
144
|
// For devices that can't hover such as touch devices,
|
@@ -24,21 +24,6 @@
|
|
24
24
|
padding-left: 14px;
|
25
25
|
}
|
26
26
|
|
27
|
-
// Only underline if the component is linkable
|
28
|
-
.govuk-back-link[href] {
|
29
|
-
text-decoration: underline;
|
30
|
-
|
31
|
-
// When the back link is focused, hide the bottom link border as the
|
32
|
-
// focus styles has a bottom border.
|
33
|
-
&:focus {
|
34
|
-
text-decoration: none;
|
35
|
-
|
36
|
-
&:before {
|
37
|
-
border-color: $govuk-text-colour;
|
38
|
-
}
|
39
|
-
}
|
40
|
-
}
|
41
|
-
|
42
27
|
// Prepend left pointing chevron
|
43
28
|
.govuk-back-link:before {
|
44
29
|
content: "";
|
@@ -88,6 +73,10 @@
|
|
88
73
|
}
|
89
74
|
}
|
90
75
|
|
76
|
+
.govuk-back-link:focus:before {
|
77
|
+
border-color: $govuk-focus-text-colour;
|
78
|
+
}
|
79
|
+
|
91
80
|
.govuk-back-link:after {
|
92
81
|
content: "";
|
93
82
|
position: absolute;
|
@@ -34,7 +34,11 @@
|
|
34
34
|
|
35
35
|
// ...but only underline the text, not the arrow
|
36
36
|
.govuk-details__summary-text {
|
37
|
-
|
37
|
+
@include govuk-link-decoration;
|
38
|
+
}
|
39
|
+
|
40
|
+
.govuk-details__summary:hover .govuk-details__summary-text {
|
41
|
+
@include govuk-link-hover-decoration;
|
38
42
|
}
|
39
43
|
|
40
44
|
// Remove the underline when focussed to avoid duplicate borders
|
@@ -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;
|
@@ -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 {
|
@@ -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 {
|
@@ -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
|
|
@@ -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.12.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: 2021-
|
12
|
+
date: 2021-11-12 00:00:00.000000000 Z
|
13
13
|
dependencies:
|
14
14
|
- !ruby/object:Gem::Dependency
|
15
15
|
name: bundler
|
@@ -183,6 +183,7 @@ files:
|
|
183
183
|
- vendor/assets/stylesheets/settings/_compatibility.scss
|
184
184
|
- vendor/assets/stylesheets/settings/_global-styles.scss
|
185
185
|
- vendor/assets/stylesheets/settings/_ie8.scss
|
186
|
+
- vendor/assets/stylesheets/settings/_links.scss
|
186
187
|
- vendor/assets/stylesheets/settings/_measurements.scss
|
187
188
|
- vendor/assets/stylesheets/settings/_media-queries.scss
|
188
189
|
- vendor/assets/stylesheets/settings/_spacing.scss
|
@@ -221,7 +222,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
|
|
221
222
|
- !ruby/object:Gem::Version
|
222
223
|
version: '0'
|
223
224
|
requirements: []
|
224
|
-
rubygems_version: 3.2.
|
225
|
+
rubygems_version: 3.2.22
|
225
226
|
signing_key:
|
226
227
|
specification_version: 4
|
227
228
|
summary: Adds the GOVUK frontend to a Rails application that uses the Asset Pipeline.
|