dxw_govuk_frontend_rails 3.9.1 → 3.13.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +4 -4
- data/Gemfile.lock +2 -2
- data/README.md +61 -40
- data/lib/dxw_govuk_frontend_rails/version.rb +1 -1
- data/package-lock.json +22 -4
- data/package.json +1 -1
- data/vendor/assets/javascripts/govuk_frontend_rails.js +119 -4
- data/vendor/assets/stylesheets/components/_all.scss +2 -0
- data/vendor/assets/stylesheets/components/accordion/_index.scss +7 -16
- data/vendor/assets/stylesheets/components/back-link/_index.scss +4 -15
- data/vendor/assets/stylesheets/components/breadcrumbs/_index.scss +1 -0
- data/vendor/assets/stylesheets/components/button/_index.scss +15 -8
- data/vendor/assets/stylesheets/components/character-count/_index.scss +1 -0
- data/vendor/assets/stylesheets/components/checkboxes/_index.scss +63 -34
- data/vendor/assets/stylesheets/components/cookie-banner/_cookie-banner.scss +2 -0
- data/vendor/assets/stylesheets/components/cookie-banner/_index.scss +51 -0
- data/vendor/assets/stylesheets/components/details/_index.scss +7 -2
- data/vendor/assets/stylesheets/components/error-summary/_index.scss +2 -12
- data/vendor/assets/stylesheets/components/file-upload/_index.scss +14 -14
- data/vendor/assets/stylesheets/components/footer/_index.scss +39 -29
- data/vendor/assets/stylesheets/components/header/_index.scss +44 -22
- data/vendor/assets/stylesheets/components/input/_index.scss +4 -0
- data/vendor/assets/stylesheets/components/notification-banner/_index.scss +89 -0
- data/vendor/assets/stylesheets/components/notification-banner/_notification-banner.scss +2 -0
- data/vendor/assets/stylesheets/components/phase-banner/_index.scss +1 -1
- data/vendor/assets/stylesheets/components/radios/_index.scss +14 -0
- data/vendor/assets/stylesheets/components/skip-link/_index.scss +3 -1
- data/vendor/assets/stylesheets/components/table/_index.scss +21 -0
- data/vendor/assets/stylesheets/components/tabs/_index.scss +1 -6
- data/vendor/assets/stylesheets/components/warning-text/_index.scss +10 -1
- data/vendor/assets/stylesheets/core/_links.scss +8 -0
- data/vendor/assets/stylesheets/core/_template.scss +0 -1
- data/vendor/assets/stylesheets/helpers/_colour.scss +2 -2
- data/vendor/assets/stylesheets/helpers/_links.scss +245 -30
- data/vendor/assets/stylesheets/objects/_all.scss +1 -0
- data/vendor/assets/stylesheets/objects/_button-group.scss +101 -0
- data/vendor/assets/stylesheets/objects/_width-container.scss +4 -0
- data/vendor/assets/stylesheets/settings/_all.scss +2 -0
- data/vendor/assets/stylesheets/settings/_colours-applied.scss +9 -0
- data/vendor/assets/stylesheets/settings/_links.scss +62 -0
- data/vendor/assets/stylesheets/settings/_typography-font.scss +3 -0
- metadata +9 -3
@@ -73,47 +73,49 @@
|
|
73
73
|
touch-action: manipulation;
|
74
74
|
}
|
75
75
|
|
76
|
-
|
77
|
-
|
78
|
-
|
79
|
-
|
80
|
-
|
81
|
-
|
82
|
-
|
83
|
-
|
84
|
-
|
85
|
-
|
86
|
-
|
87
|
-
|
76
|
+
@include govuk-not-ie8 {
|
77
|
+
// [ ] Check box
|
78
|
+
.govuk-checkboxes__label:before {
|
79
|
+
content: "";
|
80
|
+
box-sizing: border-box;
|
81
|
+
position: absolute;
|
82
|
+
top: 0;
|
83
|
+
left: 0;
|
84
|
+
width: $govuk-checkboxes-size;
|
85
|
+
height: $govuk-checkboxes-size;
|
86
|
+
border: $govuk-border-width-form-element solid currentColor;
|
87
|
+
background: transparent;
|
88
|
+
}
|
88
89
|
|
89
|
-
|
90
|
-
|
91
|
-
|
92
|
-
|
93
|
-
|
94
|
-
|
95
|
-
|
90
|
+
// ✔ Check mark
|
91
|
+
//
|
92
|
+
// The check mark is a box with a border on the left and bottom side (└──),
|
93
|
+
// rotated 45 degrees
|
94
|
+
.govuk-checkboxes__label:after {
|
95
|
+
content: "";
|
96
|
+
box-sizing: border-box;
|
96
97
|
|
97
|
-
|
98
|
-
|
99
|
-
|
100
|
-
|
101
|
-
|
98
|
+
position: absolute;
|
99
|
+
top: 11px;
|
100
|
+
left: 9px;
|
101
|
+
width: 23px;
|
102
|
+
height: 12px;
|
102
103
|
|
103
|
-
|
104
|
+
-webkit-transform: rotate(-45deg);
|
104
105
|
|
105
|
-
|
106
|
+
-ms-transform: rotate(-45deg);
|
106
107
|
|
107
|
-
|
108
|
-
|
109
|
-
|
110
|
-
|
111
|
-
|
112
|
-
|
108
|
+
transform: rotate(-45deg);
|
109
|
+
border: solid;
|
110
|
+
border-width: 0 0 5px 5px;
|
111
|
+
// Fix bug in IE11 caused by transform rotate (-45deg).
|
112
|
+
// See: alphagov/govuk_elements/issues/518
|
113
|
+
border-top-color: transparent;
|
113
114
|
|
114
|
-
|
115
|
+
opacity: 0;
|
115
116
|
|
116
|
-
|
117
|
+
background: transparent;
|
118
|
+
}
|
117
119
|
}
|
118
120
|
|
119
121
|
.govuk-checkboxes__hint {
|
@@ -125,6 +127,20 @@
|
|
125
127
|
// Focused state
|
126
128
|
.govuk-checkboxes__input:focus + .govuk-checkboxes__label:before {
|
127
129
|
border-width: 4px;
|
130
|
+
|
131
|
+
// When colours are overridden, the yellow box-shadow becomes invisible
|
132
|
+
// which means the focus state is less obvious. By adding a transparent
|
133
|
+
// outline, which becomes solid (text-coloured) in that context, we ensure
|
134
|
+
// the focus remains clearly visible.
|
135
|
+
outline: $govuk-focus-width solid transparent;
|
136
|
+
outline-offset: 1px;
|
137
|
+
|
138
|
+
// When in an explicit forced-color mode, we can use the Highlight system
|
139
|
+
// color for the outline to better match focus states of native controls
|
140
|
+
@media screen and (forced-colors: active), (-ms-high-contrast: active) {
|
141
|
+
outline-color: Highlight;
|
142
|
+
}
|
143
|
+
|
128
144
|
box-shadow: 0 0 0 $govuk-focus-width $govuk-focus-colour;
|
129
145
|
}
|
130
146
|
|
@@ -143,6 +159,19 @@
|
|
143
159
|
opacity: .5;
|
144
160
|
}
|
145
161
|
|
162
|
+
// =========================================================
|
163
|
+
// Dividers ('or')
|
164
|
+
// =========================================================
|
165
|
+
|
166
|
+
.govuk-checkboxes__divider {
|
167
|
+
$govuk-divider-size: $govuk-checkboxes-size !default;
|
168
|
+
@include govuk-font($size: 19);
|
169
|
+
@include govuk-text-colour;
|
170
|
+
width: $govuk-divider-size;
|
171
|
+
margin-bottom: govuk-spacing(2);
|
172
|
+
text-align: center;
|
173
|
+
}
|
174
|
+
|
146
175
|
// =========================================================
|
147
176
|
// Conditional reveals
|
148
177
|
// =========================================================
|
@@ -0,0 +1,51 @@
|
|
1
|
+
@include govuk-exports("govuk/component/cookie-banner") {
|
2
|
+
|
3
|
+
// This needs to be kept in sync with the header component's styles
|
4
|
+
$border-bottom-width: govuk-spacing(2);
|
5
|
+
|
6
|
+
.govuk-cookie-banner {
|
7
|
+
@include govuk-font($size: 19);
|
8
|
+
|
9
|
+
padding-top: govuk-spacing(4);
|
10
|
+
// The component does not set bottom spacing.
|
11
|
+
// The bottom spacing should be created by the items inside the component.
|
12
|
+
|
13
|
+
// Visually separate the cookie banner from content underneath
|
14
|
+
// when user changes colours in their browser.
|
15
|
+
border-bottom: $border-bottom-width solid transparent;
|
16
|
+
|
17
|
+
background-color: govuk-colour("light-grey", $legacy: "grey-3");
|
18
|
+
}
|
19
|
+
|
20
|
+
// Support older browsers which don't hide elements with the `hidden` attribute
|
21
|
+
// when user hides the whole cookie banner with a 'Hide' button.
|
22
|
+
.govuk-cookie-banner[hidden] {
|
23
|
+
display: none;
|
24
|
+
}
|
25
|
+
|
26
|
+
.govuk-cookie-banner__message {
|
27
|
+
// Remove the extra height added by the separator border.
|
28
|
+
margin-bottom: -$border-bottom-width;
|
29
|
+
|
30
|
+
&[hidden] {
|
31
|
+
// Support older browsers which don't hide elements with the `hidden` attribute
|
32
|
+
// when the visibility of cookie and replacement messages is toggled.
|
33
|
+
display: none;
|
34
|
+
}
|
35
|
+
|
36
|
+
&:focus {
|
37
|
+
// Remove the native visible focus indicator when the element is programmatically focused.
|
38
|
+
//
|
39
|
+
// The focused cookie banner is the first element on the page and the last thing the user
|
40
|
+
// interacted with prior to it gaining focus.
|
41
|
+
// We therefore assume that moving focus to it is not going to surprise users, and that giving
|
42
|
+
// it a visible focus indicator could be more confusing than helpful, especially as the
|
43
|
+
// element is not normally keyboard operable.
|
44
|
+
//
|
45
|
+
// We have flagged this in the research section of the guidance as something to monitor.
|
46
|
+
//
|
47
|
+
// A related discussion: https://github.com/w3c/wcag/issues/1001
|
48
|
+
outline: none;
|
49
|
+
}
|
50
|
+
}
|
51
|
+
}
|
@@ -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
|
@@ -67,7 +71,8 @@
|
|
67
71
|
}
|
68
72
|
|
69
73
|
.govuk-details__text {
|
70
|
-
padding: govuk-spacing(3);
|
74
|
+
padding-top: govuk-spacing(3);
|
75
|
+
padding-bottom: govuk-spacing(3);
|
71
76
|
padding-left: govuk-spacing(4);
|
72
77
|
border-left: $govuk-border-width solid $govuk-border-colour;
|
73
78
|
}
|
@@ -37,17 +37,7 @@
|
|
37
37
|
|
38
38
|
.govuk-error-summary__list a {
|
39
39
|
@include govuk-typography-weight-bold;
|
40
|
-
|
41
|
-
|
42
|
-
&:link,
|
43
|
-
&:visited,
|
44
|
-
&:hover,
|
45
|
-
&:active {
|
46
|
-
color: $govuk-error-colour;
|
47
|
-
}
|
48
|
-
|
49
|
-
&:focus {
|
50
|
-
@include govuk-focused-text;
|
51
|
-
}
|
40
|
+
@include govuk-link-common;
|
41
|
+
@include govuk-link-style-error;
|
52
42
|
}
|
53
43
|
}
|
@@ -8,17 +8,22 @@
|
|
8
8
|
.govuk-file-upload {
|
9
9
|
@include govuk-font($size: 19);
|
10
10
|
@include govuk-text-colour;
|
11
|
-
|
12
|
-
|
11
|
+
max-width: 100%;
|
12
|
+
margin-left: -$component-padding;
|
13
|
+
padding: $component-padding;
|
14
|
+
|
15
|
+
// The default file upload button in Safari does not
|
16
|
+
// support setting a custom font-size. Set `-webkit-appearance`
|
17
|
+
// to `button` to drop out of the native appearance so the
|
18
|
+
// font-size is set to 19px
|
19
|
+
// https://bugs.webkit.org/show_bug.cgi?id=224746
|
20
|
+
&::-webkit-file-upload-button {
|
21
|
+
-webkit-appearance: button;
|
22
|
+
color: inherit;
|
23
|
+
font: inherit;
|
24
|
+
}
|
13
25
|
|
14
26
|
&: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
27
|
outline: $govuk-focus-width solid $govuk-focus-colour;
|
23
28
|
// Use `box-shadow` to add border instead of changing `border-width`
|
24
29
|
// (which changes element size) and since `outline` is already used for the
|
@@ -37,11 +42,6 @@
|
|
37
42
|
// to recognise `focus-within` and don't set any styles from the block
|
38
43
|
// when it's a selector.
|
39
44
|
&:focus-within {
|
40
|
-
margin-right: -$component-padding;
|
41
|
-
margin-left: -$component-padding;
|
42
|
-
padding-right: $component-padding;
|
43
|
-
padding-left: $component-padding;
|
44
|
-
|
45
45
|
outline: $govuk-focus-width solid $govuk-focus-colour;
|
46
46
|
|
47
47
|
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
|
@@ -79,16 +68,20 @@
|
|
79
68
|
|
80
69
|
.govuk-footer__meta {
|
81
70
|
display: -webkit-box;
|
71
|
+
display: -webkit-flex;
|
82
72
|
display: -ms-flexbox;
|
83
73
|
display: flex; // Support: Flexbox
|
84
74
|
margin-right: -$govuk-gutter-half;
|
85
75
|
margin-left: -$govuk-gutter-half;
|
86
|
-
-
|
87
|
-
flex-wrap: wrap;
|
76
|
+
-webkit-flex-wrap: wrap;
|
77
|
+
-ms-flex-wrap: wrap;
|
78
|
+
flex-wrap: wrap; // Support: Flexbox
|
88
79
|
-webkit-box-align: end;
|
80
|
+
-webkit-align-items: flex-end;
|
89
81
|
-ms-flex-align: end;
|
90
82
|
align-items: flex-end; // Support: Flexbox
|
91
83
|
-webkit-box-pack: center;
|
84
|
+
-webkit-justify-content: center;
|
92
85
|
-ms-flex-pack: center;
|
93
86
|
justify-content: center; // Support: Flexbox
|
94
87
|
}
|
@@ -101,11 +94,13 @@
|
|
101
94
|
|
102
95
|
.govuk-footer__meta-item--grow {
|
103
96
|
-webkit-box-flex: 1;
|
97
|
+
-webkit-flex: 1;
|
104
98
|
-ms-flex: 1;
|
105
99
|
flex: 1; // Support: Flexbox
|
106
100
|
@include govuk-media-query ($until: tablet) {
|
107
|
-
-
|
108
|
-
flex-
|
101
|
+
-webkit-flex-basis: 320px;
|
102
|
+
-ms-flex-preferred-size: 320px;
|
103
|
+
flex-basis: 320px; // Support: Flexbox
|
109
104
|
}
|
110
105
|
}
|
111
106
|
|
@@ -116,6 +111,9 @@
|
|
116
111
|
margin-bottom: govuk-spacing(3);
|
117
112
|
}
|
118
113
|
vertical-align: top;
|
114
|
+
// Work around SVGs not inheriting color from parent in forced color mode
|
115
|
+
// (https://github.com/w3c/csswg-drafts/issues/6310)
|
116
|
+
forced-color-adjust: auto;
|
119
117
|
}
|
120
118
|
|
121
119
|
.govuk-footer__licence-description {
|
@@ -134,7 +132,6 @@
|
|
134
132
|
background-position: 50% 0%;
|
135
133
|
background-size: $govuk-footer-crest-image-width $govuk-footer-crest-image-height;
|
136
134
|
text-align: center;
|
137
|
-
text-decoration: none;
|
138
135
|
white-space: nowrap;
|
139
136
|
}
|
140
137
|
|
@@ -165,12 +162,14 @@
|
|
165
162
|
|
166
163
|
.govuk-footer__navigation {
|
167
164
|
display: -webkit-box;
|
165
|
+
display: -webkit-flex;
|
168
166
|
display: -ms-flexbox;
|
169
167
|
display: flex; // Support: Flexbox
|
170
168
|
margin-right: -$govuk-gutter-half;
|
171
169
|
margin-left: -$govuk-gutter-half;
|
172
|
-
-
|
173
|
-
flex-wrap: wrap;
|
170
|
+
-webkit-flex-wrap: wrap;
|
171
|
+
-ms-flex-wrap: wrap;
|
172
|
+
flex-wrap: wrap; // Support: Flexbox
|
174
173
|
}
|
175
174
|
|
176
175
|
.govuk-footer__section {
|
@@ -181,15 +180,18 @@
|
|
181
180
|
vertical-align: top;
|
182
181
|
// Ensure columns take up equal width (typically one-half:one-half)
|
183
182
|
-webkit-box-flex: 1;
|
183
|
+
-webkit-flex-grow: 1;
|
184
184
|
-ms-flex-positive: 1;
|
185
185
|
flex-grow: 1; // Support: Flexbox
|
186
|
-
-
|
187
|
-
flex-
|
186
|
+
-webkit-flex-shrink: 1;
|
187
|
+
-ms-flex-negative: 1;
|
188
|
+
flex-shrink: 1; // Support: Flexbox
|
188
189
|
@include govuk-media-query ($until: desktop) {
|
189
190
|
// Make sure columns do not drop below 200px in width
|
190
191
|
// Will typically result in wrapping, and end up in a single column on smaller screens.
|
191
|
-
-
|
192
|
-
flex-
|
192
|
+
-webkit-flex-basis: 200px;
|
193
|
+
-ms-flex-preferred-size: 200px;
|
194
|
+
flex-basis: 200px; // Support: Flexbox
|
193
195
|
}
|
194
196
|
}
|
195
197
|
|
@@ -199,6 +201,7 @@
|
|
199
201
|
// To ensure the section is one of two, we can count backwards using `:nth-last-child(2)`.
|
200
202
|
.govuk-footer__section:first-child:nth-last-child(2) {
|
201
203
|
-webkit-box-flex: 2;
|
204
|
+
-webkit-flex-grow: 2;
|
202
205
|
-ms-flex-positive: 2;
|
203
206
|
flex-grow: 2; // Support: Flexbox
|
204
207
|
}
|
@@ -210,6 +213,13 @@
|
|
210
213
|
list-style: none;
|
211
214
|
-webkit-column-gap: $govuk-gutter;
|
212
215
|
column-gap: $govuk-gutter; // Support: Columns
|
216
|
+
|
217
|
+
// Disable thicker underlines on hover because of a bug in Chromium
|
218
|
+
// affecting links within columns
|
219
|
+
// https://bugs.chromium.org/p/chromium/issues/detail?id=1190987
|
220
|
+
.govuk-footer__link:hover {
|
221
|
+
text-decoration-thickness: auto;
|
222
|
+
}
|
213
223
|
}
|
214
224
|
|
215
225
|
@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,23 @@
|
|
36
35
|
|
37
36
|
.govuk-header__logotype {
|
38
37
|
display: inline-block;
|
38
|
+
|
39
|
+
// Add a gap after the logo in case it's followed by a product name. This
|
40
|
+
// gets removed later if the logotype is a :last-child.
|
39
41
|
margin-right: govuk-spacing(1);
|
42
|
+
|
43
|
+
// Prevent readability backplate from obscuring underline in Windows High
|
44
|
+
// Contrast Mode
|
45
|
+
@media (forced-colors: active) {
|
46
|
+
forced-color-adjust: none;
|
47
|
+
color: linktext;
|
48
|
+
}
|
49
|
+
|
50
|
+
// Remove the gap after the logo if there's no product name to keep hover
|
51
|
+
// and focus states neat
|
52
|
+
&:last-child {
|
53
|
+
margin-right: 0;
|
54
|
+
}
|
40
55
|
}
|
41
56
|
|
42
57
|
.govuk-header__logotype-crown {
|
@@ -51,39 +66,39 @@
|
|
51
66
|
width: 36px;
|
52
67
|
height: 32px;
|
53
68
|
border: 0;
|
54
|
-
vertical-align:
|
69
|
+
vertical-align: bottom;
|
55
70
|
}
|
56
71
|
|
57
72
|
.govuk-header__product-name {
|
58
73
|
@include govuk-font($size: 24, $line-height: 1);
|
59
74
|
display: inline-table;
|
60
|
-
padding-right: govuk-spacing(2);
|
61
75
|
}
|
62
76
|
|
63
77
|
.govuk-header__link {
|
64
|
-
|
78
|
+
// Avoid using the `govuk-link-common` mixin because the links in the header
|
79
|
+
// get a special treatment, because:
|
80
|
+
//
|
81
|
+
// - underlines are only visible on hover
|
82
|
+
// - all links get a 3px underline regardless of text size, as there are
|
83
|
+
// multiple grouped elements close to one another and having slightly
|
84
|
+
// different underline widths looks unbalanced
|
85
|
+
@include govuk-typography-common;
|
86
|
+
@include govuk-link-style-inverse;
|
65
87
|
|
66
|
-
|
67
|
-
&:visited {
|
68
|
-
color: $govuk-header-link;
|
69
|
-
}
|
88
|
+
text-decoration: none;
|
70
89
|
|
71
90
|
&:hover {
|
72
91
|
text-decoration: underline;
|
92
|
+
text-decoration-thickness: $govuk-header-link-underline-thickness;
|
93
|
+
|
94
|
+
@if ($govuk-link-underline-offset) {
|
95
|
+
text-underline-offset: $govuk-link-underline-offset;
|
96
|
+
}
|
73
97
|
}
|
74
98
|
|
75
99
|
&:focus {
|
76
100
|
@include govuk-focused-text;
|
77
101
|
}
|
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
102
|
}
|
88
103
|
|
89
104
|
.govuk-header__link--homepage {
|
@@ -92,6 +107,7 @@
|
|
92
107
|
@include govuk-font($size: false, $weight: bold);
|
93
108
|
|
94
109
|
display: inline-block;
|
110
|
+
margin-right: govuk-spacing(2);
|
95
111
|
font-size: 30px; // We don't have a mixin that produces 30px font size
|
96
112
|
line-height: 1;
|
97
113
|
|
@@ -103,10 +119,10 @@
|
|
103
119
|
&:hover,
|
104
120
|
&:active {
|
105
121
|
// Negate the added border
|
106
|
-
margin-bottom: -
|
122
|
+
margin-bottom: $govuk-header-link-underline-thickness * -1;
|
107
123
|
// Omitting colour will use default value of currentColor – if we
|
108
124
|
// specified currentColor explicitly IE8 would ignore this rule.
|
109
|
-
border-bottom:
|
125
|
+
border-bottom: $govuk-header-link-underline-thickness solid;
|
110
126
|
}
|
111
127
|
|
112
128
|
// Remove any borders that show when focused and hovered.
|
@@ -156,11 +172,17 @@
|
|
156
172
|
margin: 0;
|
157
173
|
padding: 0;
|
158
174
|
border: 0;
|
159
|
-
color:
|
175
|
+
color: govuk-colour("white");
|
160
176
|
background: none;
|
177
|
+
cursor: pointer;
|
161
178
|
|
162
179
|
&:hover {
|
163
|
-
text-decoration: underline;
|
180
|
+
-webkit-text-decoration: solid underline $govuk-header-link-underline-thickness;
|
181
|
+
text-decoration: solid underline $govuk-header-link-underline-thickness;
|
182
|
+
|
183
|
+
@if ($govuk-link-underline-offset) {
|
184
|
+
text-underline-offset: $govuk-link-underline-offset;
|
185
|
+
}
|
164
186
|
}
|
165
187
|
|
166
188
|
&:focus {
|
@@ -95,11 +95,13 @@
|
|
95
95
|
|
96
96
|
.govuk-input__wrapper {
|
97
97
|
display: -webkit-box;
|
98
|
+
display: -webkit-flex;
|
98
99
|
display: -ms-flexbox;
|
99
100
|
display: flex;
|
100
101
|
|
101
102
|
.govuk-input {
|
102
103
|
-webkit-box-flex: 0;
|
104
|
+
-webkit-flex: 0 1 auto;
|
103
105
|
-ms-flex: 0 1 auto;
|
104
106
|
flex: 0 1 auto;
|
105
107
|
}
|
@@ -150,6 +152,8 @@
|
|
150
152
|
|
151
153
|
-webkit-box-flex: 0;
|
152
154
|
|
155
|
+
-webkit-flex: 0 0 auto;
|
156
|
+
|
153
157
|
-ms-flex: 0 0 auto;
|
154
158
|
|
155
159
|
flex: 0 0 auto;
|
@@ -0,0 +1,89 @@
|
|
1
|
+
@include govuk-exports("govuk/component/notification-banner") {
|
2
|
+
.govuk-notification-banner {
|
3
|
+
@include govuk-font($size: 19);
|
4
|
+
@include govuk-responsive-margin(8, "bottom");
|
5
|
+
|
6
|
+
border: $govuk-border-width solid $govuk-brand-colour;
|
7
|
+
|
8
|
+
background-color: $govuk-brand-colour;
|
9
|
+
|
10
|
+
&:focus {
|
11
|
+
outline: $govuk-focus-width solid $govuk-focus-colour;
|
12
|
+
}
|
13
|
+
}
|
14
|
+
|
15
|
+
.govuk-notification-banner__header {
|
16
|
+
padding: 2px govuk-spacing(3) govuk-spacing(1);
|
17
|
+
|
18
|
+
// Ensures the notification header appears separate to the notification body text in high contrast mode
|
19
|
+
border-bottom: 1px solid transparent;
|
20
|
+
|
21
|
+
@include govuk-media-query($from: tablet) {
|
22
|
+
padding: 2px govuk-spacing(4) govuk-spacing(1);
|
23
|
+
}
|
24
|
+
}
|
25
|
+
|
26
|
+
.govuk-notification-banner__title {
|
27
|
+
@include govuk-font($size: 19, $weight: bold);
|
28
|
+
|
29
|
+
margin: 0;
|
30
|
+
|
31
|
+
padding: 0;
|
32
|
+
|
33
|
+
color: govuk-colour("white");
|
34
|
+
}
|
35
|
+
|
36
|
+
.govuk-notification-banner__content {
|
37
|
+
$padding-tablet: govuk-spacing(4);
|
38
|
+
@include govuk-text-colour;
|
39
|
+
padding: govuk-spacing(3);
|
40
|
+
|
41
|
+
background-color: $govuk-body-background-colour;
|
42
|
+
|
43
|
+
@include govuk-media-query($from: tablet) {
|
44
|
+
padding: $padding-tablet;
|
45
|
+
}
|
46
|
+
|
47
|
+
// Wrap content at the same place that a 2/3 grid column ends, to maintain
|
48
|
+
// shorter line-lengths when the notification banner is full width
|
49
|
+
> * {
|
50
|
+
// When elements have their own padding (like lists), include the padding
|
51
|
+
// in the max-width calculation
|
52
|
+
box-sizing: border-box;
|
53
|
+
|
54
|
+
// Calculate the internal width of a two-thirds column...
|
55
|
+
$two-col-width: ($govuk-page-width * 2 / 3) - ($govuk-gutter * 1 / 3);
|
56
|
+
|
57
|
+
// ...and then factor in the left border and padding
|
58
|
+
$banner-exterior: ($padding-tablet + $govuk-border-width);
|
59
|
+
max-width: $two-col-width - $banner-exterior;
|
60
|
+
}
|
61
|
+
|
62
|
+
> :last-child {
|
63
|
+
margin-bottom: 0;
|
64
|
+
}
|
65
|
+
}
|
66
|
+
|
67
|
+
.govuk-notification-banner__heading {
|
68
|
+
@include govuk-font($size: 24, $weight: bold);
|
69
|
+
|
70
|
+
margin: 0 0 govuk-spacing(3) 0;
|
71
|
+
|
72
|
+
padding: 0;
|
73
|
+
}
|
74
|
+
|
75
|
+
.govuk-notification-banner__link {
|
76
|
+
@include govuk-link-common;
|
77
|
+
@include govuk-link-style-no-visited-state;
|
78
|
+
}
|
79
|
+
|
80
|
+
.govuk-notification-banner--success {
|
81
|
+
border-color: $govuk-success-colour;
|
82
|
+
|
83
|
+
background-color: $govuk-success-colour;
|
84
|
+
|
85
|
+
.govuk-notification-banner__link {
|
86
|
+
@include govuk-link-style-success;
|
87
|
+
}
|
88
|
+
}
|
89
|
+
}
|