katalyst-govuk-formbuilder 1.10.2 → 1.12.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/README.md +30 -0
- data/app/assets/builds/katalyst/govuk/formbuilder.css +30 -30
- data/app/assets/stylesheets/katalyst/govuk/components/combobox/_index.scss +100 -0
- data/app/assets/stylesheets/katalyst/govuk/components/richtextarea/_index.scss +3 -4
- data/lib/katalyst/govuk/formbuilder/builder.rb +41 -1
- data/lib/katalyst/govuk/formbuilder/elements/combobox.rb +60 -0
- data/node_modules/govuk-frontend/dist/govuk/components/_index.scss +1 -0
- data/node_modules/govuk-frontend/dist/govuk/components/accordion/_index.scss +35 -31
- data/node_modules/govuk-frontend/dist/govuk/components/character-count/_index.scss +4 -4
- data/node_modules/govuk-frontend/dist/govuk/components/checkboxes/_index.scss +6 -1
- data/node_modules/govuk-frontend/dist/govuk/components/cookie-banner/_index.scss +16 -13
- data/node_modules/govuk-frontend/dist/govuk/components/date-input/_index.scss +1 -2
- data/node_modules/govuk-frontend/dist/govuk/components/error-summary/_index.scss +4 -0
- data/node_modules/govuk-frontend/dist/govuk/components/fieldset/_index.scss +3 -5
- data/node_modules/govuk-frontend/dist/govuk/components/file-upload/_index.scss +8 -9
- data/node_modules/govuk-frontend/dist/govuk/components/header/_index.scss +8 -0
- data/node_modules/govuk-frontend/dist/govuk/components/input/_index.scss +7 -4
- data/node_modules/govuk-frontend/dist/govuk/components/notification-banner/_index.scss +3 -2
- data/node_modules/govuk-frontend/dist/govuk/components/pagination/_index.scss +24 -37
- data/node_modules/govuk-frontend/dist/govuk/components/panel/_index.scss +13 -9
- data/node_modules/govuk-frontend/dist/govuk/components/password-input/_index.scss +12 -9
- data/node_modules/govuk-frontend/dist/govuk/components/phase-banner/_index.scss +0 -8
- data/node_modules/govuk-frontend/dist/govuk/components/radios/_index.scss +7 -5
- data/node_modules/govuk-frontend/dist/govuk/components/select/_index.scss +5 -5
- data/node_modules/govuk-frontend/dist/govuk/components/service-navigation/_index.scss +162 -0
- data/node_modules/govuk-frontend/dist/govuk/components/service-navigation/_service-navigation.scss +4 -0
- data/node_modules/govuk-frontend/dist/govuk/components/skip-link/_index.scss +6 -4
- data/node_modules/govuk-frontend/dist/govuk/components/summary-list/_index.scss +2 -1
- data/node_modules/govuk-frontend/dist/govuk/components/tag/_index.scss +11 -8
- data/node_modules/govuk-frontend/dist/govuk/components/task-list/_index.scss +12 -10
- data/node_modules/govuk-frontend/dist/govuk/components/textarea/_index.scss +3 -3
- data/node_modules/govuk-frontend/dist/govuk/components/warning-text/_index.scss +2 -2
- data/node_modules/govuk-frontend/dist/govuk/core/_govuk-frontend-properties.scss +1 -1
- data/node_modules/govuk-frontend/dist/govuk/helpers/_colour.scss +44 -8
- data/node_modules/govuk-frontend/dist/govuk/helpers/_grid.scss +1 -1
- data/node_modules/govuk-frontend/dist/govuk/helpers/_links.scss +2 -2
- data/node_modules/govuk-frontend/dist/govuk/helpers/_shape-arrow.scss +1 -1
- data/node_modules/govuk-frontend/dist/govuk/helpers/_typography.scss +17 -0
- data/node_modules/govuk-frontend/dist/govuk/helpers/_visually-hidden.scss +30 -62
- data/node_modules/govuk-frontend/dist/govuk/overrides/_typography.scss +5 -1
- data/node_modules/govuk-frontend/dist/govuk/settings/_colours-organisations.scss +235 -9
- metadata +7 -4
- data/app/assets/stylesheets/katalyst/govuk/components/richtextarea/_richtextarea.scss +0 -2
@@ -4,11 +4,11 @@
|
|
4
4
|
|
5
5
|
.govuk-cookie-banner {
|
6
6
|
padding-top: govuk-spacing(4);
|
7
|
-
// The component does not set bottom spacing.
|
8
|
-
//
|
7
|
+
// The component does not set bottom spacing. The bottom spacing should be
|
8
|
+
// created by the items inside the component.
|
9
9
|
|
10
|
-
// Visually separate the cookie banner from content underneath
|
11
|
-
//
|
10
|
+
// Visually separate the cookie banner from content underneath when user
|
11
|
+
// changes colours in their browser.
|
12
12
|
border-bottom: $border-bottom-width solid transparent;
|
13
13
|
|
14
14
|
background-color: $govuk-canvas-background-colour;
|
@@ -25,21 +25,24 @@
|
|
25
25
|
margin-bottom: -$border-bottom-width;
|
26
26
|
|
27
27
|
&[hidden] {
|
28
|
-
// Support older browsers which don't hide elements with the `hidden`
|
29
|
-
// when the visibility of cookie and replacement messages is
|
28
|
+
// Support older browsers which don't hide elements with the `hidden`
|
29
|
+
// attribute when the visibility of cookie and replacement messages is
|
30
|
+
// toggled.
|
30
31
|
display: none;
|
31
32
|
}
|
32
33
|
|
33
34
|
&:focus {
|
34
|
-
// Remove the native visible focus indicator when the element is
|
35
|
+
// Remove the native visible focus indicator when the element is
|
36
|
+
// programmatically focused.
|
35
37
|
//
|
36
|
-
// The focused cookie banner is the first element on the page and the last
|
37
|
-
// interacted with prior to it gaining focus.
|
38
|
-
//
|
39
|
-
// it a visible focus indicator could be more confusing than
|
40
|
-
// element is not normally keyboard operable.
|
38
|
+
// The focused cookie banner is the first element on the page and the last
|
39
|
+
// thing the user interacted with prior to it gaining focus. We therefore
|
40
|
+
// assume that moving focus to it is not going to surprise users, and that
|
41
|
+
// giving it a visible focus indicator could be more confusing than
|
42
|
+
// helpful, especially as the element is not normally keyboard operable.
|
41
43
|
//
|
42
|
-
// We have flagged this in the research section of the guidance as
|
44
|
+
// We have flagged this in the research section of the guidance as
|
45
|
+
// something to monitor.
|
43
46
|
//
|
44
47
|
// A related discussion: https://github.com/w3c/wcag/issues/1001
|
45
48
|
outline: none;
|
@@ -6,8 +6,7 @@
|
|
6
6
|
@include govuk-exports("govuk/component/date-input") {
|
7
7
|
.govuk-date-input {
|
8
8
|
@include govuk-clearfix;
|
9
|
-
|
10
|
-
font-size: 0;
|
9
|
+
font-size: 0; // removes whitespace caused by inline-block
|
11
10
|
}
|
12
11
|
|
13
12
|
.govuk-date-input__item {
|
@@ -7,9 +7,8 @@
|
|
7
7
|
@include govuk-clearfix;
|
8
8
|
}
|
9
9
|
|
10
|
-
// Fix for Firefox < 53
|
11
|
-
//
|
12
|
-
// stylelint-disable selector-type-no-unknown -- Ignore unknown 'x:-moz-any-link'
|
10
|
+
// Fix for Firefox < 53 (https://bugzil.la/504622)
|
11
|
+
// stylelint-disable selector-type-no-unknown -- Ignore 'x:-moz-any-link'
|
13
12
|
@supports not (caret-color: auto) {
|
14
13
|
.govuk-fieldset,
|
15
14
|
x:-moz-any-link {
|
@@ -59,8 +58,7 @@
|
|
59
58
|
}
|
60
59
|
|
61
60
|
// When the legend contains an H1, we want the H1 to inherit all styles from
|
62
|
-
// the legend. Effectively
|
63
|
-
// not there.
|
61
|
+
// the legend. Effectively treat the heading as if it is not there.
|
64
62
|
.govuk-fieldset__heading {
|
65
63
|
margin: 0;
|
66
64
|
font-size: inherit;
|
@@ -12,11 +12,10 @@
|
|
12
12
|
margin-left: -$component-padding;
|
13
13
|
padding: $component-padding;
|
14
14
|
|
15
|
-
// The default file upload button in Safari does not
|
16
|
-
//
|
17
|
-
//
|
18
|
-
//
|
19
|
-
// https://bugs.webkit.org/show_bug.cgi?id=224746
|
15
|
+
// The default file upload button in Safari does not support setting a
|
16
|
+
// custom font-size. Set `-webkit-appearance` to `button` to drop out of the
|
17
|
+
// native appearance so the font-size is set to 19px
|
18
|
+
// https://webkit.org/b/224746
|
20
19
|
&::-webkit-file-upload-button {
|
21
20
|
-webkit-appearance: button;
|
22
21
|
color: inherit;
|
@@ -26,13 +25,13 @@
|
|
26
25
|
&:focus {
|
27
26
|
outline: $govuk-focus-width solid $govuk-focus-colour;
|
28
27
|
// Use `box-shadow` to add border instead of changing `border-width`
|
29
|
-
// (which changes element size) and since `outline` is already used for
|
30
|
-
// yellow focus state.
|
28
|
+
// (which changes element size) and since `outline` is already used for
|
29
|
+
// the yellow focus state.
|
31
30
|
box-shadow: inset 0 0 0 4px $govuk-input-border-colour;
|
32
31
|
}
|
33
32
|
|
34
|
-
// Set "focus-within" to fix https://
|
35
|
-
//
|
33
|
+
// Set "focus-within" to fix https://bugzil.la/1430196 so that component
|
34
|
+
// receives focus in Firefox.
|
36
35
|
// This can't be set together with `:focus` as all versions of IE fail
|
37
36
|
// to recognise `focus-within` and don't set any styles from the block
|
38
37
|
// when it's a selector.
|
@@ -38,6 +38,14 @@
|
|
38
38
|
border-bottom: $govuk-header-border-width solid $govuk-header-border-color;
|
39
39
|
}
|
40
40
|
|
41
|
+
.govuk-header--full-width-border {
|
42
|
+
border-bottom-color: $govuk-header-border-color;
|
43
|
+
|
44
|
+
.govuk-header__container {
|
45
|
+
border-bottom-color: transparent;
|
46
|
+
}
|
47
|
+
}
|
48
|
+
|
41
49
|
.govuk-header__logotype {
|
42
50
|
display: inline-block;
|
43
51
|
position: relative;
|
@@ -11,8 +11,10 @@
|
|
11
11
|
height: govuk-px-to-rem(40px);
|
12
12
|
margin-top: 0;
|
13
13
|
padding: govuk-spacing(1);
|
14
|
-
//
|
15
|
-
//
|
14
|
+
// Setting any background-color makes text invisible when changing colours
|
15
|
+
// to dark backgrounds in Firefox (https://bugzil.la/1335476). As
|
16
|
+
// background-color and color need to always be set together, color should
|
17
|
+
// not be set either
|
16
18
|
border: $govuk-border-width-form-element solid $govuk-input-border-colour;
|
17
19
|
border-radius: 0;
|
18
20
|
|
@@ -24,7 +26,8 @@
|
|
24
26
|
outline: $govuk-focus-width solid $govuk-focus-colour;
|
25
27
|
// Ensure outline appears outside of the element
|
26
28
|
outline-offset: 0;
|
27
|
-
// Double the border by adding its width again. Use `box-shadow` for this
|
29
|
+
// Double the border by adding its width again. Use `box-shadow` for this
|
30
|
+
// instead of changing `border-width` - this is for consistency with
|
28
31
|
// components such as textarea where we avoid changing `border-width` as
|
29
32
|
// it will change the element size. Also, `outline` cannot be utilised
|
30
33
|
// here as it is already used for the yellow focus state.
|
@@ -63,7 +66,7 @@
|
|
63
66
|
}
|
64
67
|
|
65
68
|
// em measurements are based on the point size of the typeface
|
66
|
-
// Extra space is added on the right
|
69
|
+
// Extra space is added on the right to allow for the Safari prefill icon
|
67
70
|
|
68
71
|
.govuk-input--width-30 {
|
69
72
|
max-width: 29.5em;
|
@@ -15,7 +15,8 @@
|
|
15
15
|
.govuk-notification-banner__header {
|
16
16
|
padding: 2px govuk-spacing(3) govuk-spacing(1);
|
17
17
|
|
18
|
-
// Ensures the notification header appears separate to the notification body
|
18
|
+
// Ensures the notification header appears separate to the notification body
|
19
|
+
// text in high contrast mode
|
19
20
|
border-bottom: 1px solid transparent;
|
20
21
|
|
21
22
|
@include govuk-media-query($from: tablet) {
|
@@ -68,7 +69,7 @@
|
|
68
69
|
@include govuk-font-size($size: 24);
|
69
70
|
@include govuk-typography-weight-bold;
|
70
71
|
|
71
|
-
margin: 0 0 govuk-spacing(3)
|
72
|
+
margin: 0 0 govuk-spacing(3);
|
72
73
|
|
73
74
|
padding: 0;
|
74
75
|
}
|
@@ -54,8 +54,8 @@
|
|
54
54
|
.govuk-pagination__next {
|
55
55
|
@include govuk-typography-weight-bold;
|
56
56
|
|
57
|
-
// Use flex to
|
58
|
-
//
|
57
|
+
// Use flex to avoid extra space being introduced when whitespace exists
|
58
|
+
// between the arrow svg and the link text
|
59
59
|
.govuk-pagination__link {
|
60
60
|
display: flex;
|
61
61
|
align-items: center;
|
@@ -96,7 +96,7 @@
|
|
96
96
|
@include govuk-typography-weight-bold;
|
97
97
|
color: $govuk-secondary-text-colour;
|
98
98
|
|
99
|
-
// Remove hover state for ellipsis items as they don't
|
99
|
+
// Remove hover state for ellipsis items as they don't contain links
|
100
100
|
&:hover {
|
101
101
|
background-color: transparent;
|
102
102
|
}
|
@@ -118,8 +118,8 @@
|
|
118
118
|
}
|
119
119
|
}
|
120
120
|
|
121
|
-
// Add link hover decoration to prev/next text if no label present on
|
122
|
-
//
|
121
|
+
// Add link hover decoration to prev/next text if no label present on
|
122
|
+
// prev/next only mode, so that we have a hover state in all cases
|
123
123
|
&:hover,
|
124
124
|
&:active {
|
125
125
|
.govuk-pagination__link-title--decorated {
|
@@ -151,11 +151,10 @@
|
|
151
151
|
@include govuk-typography-weight-regular;
|
152
152
|
@include govuk-link-decoration;
|
153
153
|
display: inline-block;
|
154
|
-
padding-left: govuk-spacing(6);
|
155
154
|
}
|
156
155
|
|
157
156
|
.govuk-pagination__icon {
|
158
|
-
// Set size using rems to make the icon scale with text
|
157
|
+
// Set size using rems to make the icon scale with text
|
159
158
|
width: govuk-px-to-rem(15px);
|
160
159
|
height: govuk-px-to-rem(13px);
|
161
160
|
color: $govuk-secondary-text-colour;
|
@@ -175,23 +174,18 @@
|
|
175
174
|
.govuk-pagination--block {
|
176
175
|
display: block;
|
177
176
|
|
178
|
-
.govuk-pagination__item {
|
179
|
-
padding: govuk-spacing(3);
|
180
|
-
float: none;
|
181
|
-
}
|
182
|
-
|
183
177
|
.govuk-pagination__next,
|
184
178
|
.govuk-pagination__prev {
|
185
179
|
padding-left: 0;
|
186
180
|
float: none;
|
181
|
+
|
182
|
+
.govuk-pagination__link {
|
183
|
+
display: inline-block;
|
184
|
+
}
|
187
185
|
}
|
188
186
|
|
189
187
|
.govuk-pagination__next {
|
190
188
|
padding-right: govuk-spacing(3);
|
191
|
-
|
192
|
-
.govuk-pagination__icon {
|
193
|
-
margin-left: 0;
|
194
|
-
}
|
195
189
|
}
|
196
190
|
|
197
191
|
// Only apply a border between prev and next if both are present
|
@@ -199,41 +193,34 @@
|
|
199
193
|
border-top: 1px solid $govuk-border-colour;
|
200
194
|
}
|
201
195
|
|
202
|
-
//
|
203
|
-
//
|
204
|
-
|
205
|
-
|
206
|
-
display: inline;
|
207
|
-
}
|
208
|
-
|
209
|
-
// Set the after pseudo element to a block which makes the title visually display
|
210
|
-
// as block level whilst programmatically being inline
|
211
|
-
// We do this to get around an NVDA quirk where adjacent block level
|
212
|
-
// elements are always read out separately
|
196
|
+
// Set the after pseudo element to a block which makes the title visually
|
197
|
+
// display as block level whilst programmatically being inline. We do this
|
198
|
+
// to get around an NVDA quirk where adjacent block level elements are
|
199
|
+
// always read out separately
|
213
200
|
.govuk-pagination__link-title::after {
|
214
201
|
content: "";
|
215
202
|
display: block;
|
216
203
|
}
|
217
204
|
|
218
205
|
.govuk-pagination__link {
|
206
|
+
padding-left: govuk-spacing(6);
|
219
207
|
text-align: left;
|
220
208
|
|
221
|
-
&:focus {
|
222
|
-
// apply focus styling to the label within the link as if it were being focused
|
223
|
-
// to get around a display issue with a focusable inline element containing a mixture
|
224
|
-
// of inline and inline-block level elements
|
225
|
-
.govuk-pagination__link-label {
|
226
|
-
@include govuk-focused-text;
|
227
|
-
}
|
228
|
-
}
|
229
|
-
|
230
209
|
&:not(:focus) {
|
231
210
|
text-decoration: none;
|
232
211
|
}
|
233
212
|
}
|
234
213
|
|
235
214
|
.govuk-pagination__icon {
|
236
|
-
|
215
|
+
// This magic number is brought to you by the following equation:
|
216
|
+
// ((lineHeight − arrowHeight) ÷ 2) ÷ fontSize
|
217
|
+
// ((25 − 13) ÷ 2) ÷ 19 = 0.326em
|
218
|
+
//
|
219
|
+
// This could have been done programmatically but we don't have functions
|
220
|
+
// for grabbing the line-height of specific typography sizes just yet.
|
221
|
+
margin-top: 0.326em;
|
222
|
+
margin-left: govuk-spacing(6) * -1;
|
223
|
+
float: left;
|
237
224
|
}
|
238
225
|
}
|
239
226
|
}
|
@@ -14,17 +14,21 @@
|
|
14
14
|
@include govuk-media-query($until: tablet) {
|
15
15
|
padding: govuk-spacing(if($govuk-new-typography-scale, 4, 3)) - $govuk-border-width;
|
16
16
|
|
17
|
-
// This is an if-all-else-fails attempt to stop long words from
|
18
|
-
// on very narrow viewports by forcing them to
|
19
|
-
// overflowing is more likely to happen when
|
20
|
-
// iOS Safari text resize
|
17
|
+
// This is an if-all-else-fails attempt to stop long words from
|
18
|
+
// overflowing the container on very narrow viewports by forcing them to
|
19
|
+
// break and wrap instead. This overflowing is more likely to happen when
|
20
|
+
// user increases text size on a mobile eg. using iOS Safari text resize
|
21
|
+
// controls.
|
21
22
|
//
|
22
|
-
// The overflowing is a particular problem with the panel component since
|
23
|
-
// text: when the text overflows the container, it is
|
24
|
-
// background. When the text in our other
|
25
|
-
//
|
23
|
+
// The overflowing is a particular problem with the panel component since
|
24
|
+
// it uses white text: when the text overflows the container, it is
|
25
|
+
// invisible on the white (page) background. When the text in our other
|
26
|
+
// components overflow, the user might have to scroll horizontally to view
|
27
|
+
// it but the the text remains legible.
|
26
28
|
overflow-wrap: break-word;
|
27
|
-
|
29
|
+
|
30
|
+
// Support IE (autoprefixer doesn't add this as it's not a prefix)
|
31
|
+
word-wrap: break-word;
|
28
32
|
}
|
29
33
|
}
|
30
34
|
|
@@ -4,30 +4,33 @@
|
|
4
4
|
@include govuk-exports("govuk/component/password-input") {
|
5
5
|
.govuk-password-input__wrapper {
|
6
6
|
// This element inherits styles from .govuk-input__wrapper, including:
|
7
|
-
// - being display: block with contents in a stacked column below the mobile
|
7
|
+
// - being display: block with contents in a stacked column below the mobile
|
8
|
+
// breakpoint
|
8
9
|
// - being display: flex above the mobile breakpoint
|
9
10
|
|
10
11
|
@include govuk-media-query($from: mobile) {
|
11
12
|
flex-direction: row;
|
12
13
|
|
13
|
-
// The default of `stretch` makes the toggle button appear taller than the
|
14
|
-
// box-shadow, which we don't particularly want in
|
14
|
+
// The default of `stretch` makes the toggle button appear taller than the
|
15
|
+
// input, due to using box-shadow, which we don't particularly want in
|
16
|
+
// this situation
|
15
17
|
align-items: flex-start;
|
16
18
|
}
|
17
19
|
}
|
18
20
|
|
19
21
|
.govuk-password-input__input {
|
20
|
-
// IE 11 and Microsoft Edge comes with its own password reveal function. We
|
21
|
-
// so that there aren't two controls presented to the user
|
22
|
-
// sync with one another. This doesn't
|
23
|
-
//
|
22
|
+
// IE 11 and Microsoft Edge comes with its own password reveal function. We
|
23
|
+
// want to hide it, so that there aren't two controls presented to the user
|
24
|
+
// that do the same thing but aren't in sync with one another. This doesn't
|
25
|
+
// affect the function that allows Edge users to toggle password visibility
|
26
|
+
// by pressing Alt+F8, which cannot be programmatically disabled.
|
24
27
|
&::-ms-reveal {
|
25
28
|
display: none;
|
26
29
|
}
|
27
30
|
}
|
28
31
|
|
29
32
|
.govuk-password-input__toggle {
|
30
|
-
// Add margin
|
33
|
+
// Add top margin so the button doesn't obscure the input's focus style
|
31
34
|
margin-top: govuk-spacing(1);
|
32
35
|
|
33
36
|
// Remove default margin-bottom from button
|
@@ -39,7 +42,7 @@
|
|
39
42
|
}
|
40
43
|
|
41
44
|
@include govuk-media-query($from: mobile) {
|
42
|
-
// Buttons are normally 100%
|
45
|
+
// Buttons are normally 100% wide on mobile, but we don't want that here
|
43
46
|
width: auto;
|
44
47
|
flex-shrink: 0;
|
45
48
|
flex-basis: 5em;
|
@@ -25,14 +25,6 @@
|
|
25
25
|
margin-right: govuk-spacing(2);
|
26
26
|
}
|
27
27
|
}
|
28
|
-
|
29
|
-
// When forced colour mode is active, for example to provide high contrast,
|
30
|
-
// the background colour of the tag is the same as the rest of the page. To ensure
|
31
|
-
// that the tag is perceived as separate to the rest of the text in the phase banner,
|
32
|
-
// it is made bold.
|
33
|
-
@media screen and (forced-colors: active) {
|
34
|
-
font-weight: bold;
|
35
|
-
}
|
36
28
|
}
|
37
29
|
|
38
30
|
.govuk-phase-banner__text {
|
@@ -9,8 +9,9 @@
|
|
9
9
|
$govuk-touch-target-size: ($govuk-radios-size + $govuk-touch-target-gutter);
|
10
10
|
$govuk-small-radios-size: 24px;
|
11
11
|
$govuk-radios-label-padding-left-right: govuk-spacing(3);
|
12
|
-
// When the default focus width is used on a curved edge it looks visually
|
13
|
-
// So for the circular radios we bump the default to make it look
|
12
|
+
// When the default focus width is used on a curved edge it looks visually
|
13
|
+
// smaller. So for the circular radios we bump the default to make it look
|
14
|
+
// visually consistent.
|
14
15
|
$govuk-radios-focus-width: $govuk-focus-width + 1px;
|
15
16
|
|
16
17
|
.govuk-radios__item {
|
@@ -173,10 +174,11 @@
|
|
173
174
|
// =========================================================
|
174
175
|
|
175
176
|
// The narrow border is used in the conditional reveals because the border has
|
176
|
-
// to be an even number in order to be centred under the 40px checkbox
|
177
|
+
// to be an even number in order to be centred under the 40px checkbox radio.
|
177
178
|
$conditional-border-width: $govuk-border-width-narrow;
|
178
|
-
// Calculate the amount of padding needed to keep the border centered against
|
179
|
-
|
179
|
+
// Calculate the amount of padding needed to keep the border centered against
|
180
|
+
// the radios.
|
181
|
+
$conditional-border-padding: ($govuk-touch-target-size / 2) - ($conditional-border-width / 2);
|
180
182
|
// Move the border centered with the radios
|
181
183
|
$conditional-margin-left: $conditional-border-padding;
|
182
184
|
// Move the contents of the conditional inline with the label
|
@@ -6,16 +6,16 @@
|
|
6
6
|
.govuk-select {
|
7
7
|
@include govuk-font($size: 19, $line-height: 1.25);
|
8
8
|
|
9
|
-
box-sizing: border-box;
|
9
|
+
box-sizing: border-box;
|
10
10
|
|
11
11
|
// This min-width was chosen because:
|
12
|
-
// - it makes the Select
|
12
|
+
// - it makes the Select wider than it is tall (which is what users expect)
|
13
13
|
// - 11.5em matches the 'length-10' variant of the input component
|
14
14
|
// - it fits comfortably on screens as narrow as 240px wide
|
15
15
|
min-width: 11.5em;
|
16
16
|
max-width: 100%;
|
17
17
|
height: govuk-px-to-rem(40px);
|
18
|
-
padding: govuk-spacing(1);
|
18
|
+
padding: govuk-spacing(1);
|
19
19
|
border: $govuk-border-width-form-element solid $govuk-input-border-colour;
|
20
20
|
|
21
21
|
// Default user agent colours for selects can have low contrast,
|
@@ -28,8 +28,8 @@
|
|
28
28
|
// Ensure outline appears outside of the element
|
29
29
|
outline-offset: 0;
|
30
30
|
// Double the border by adding its width again. Use `box-shadow` to do
|
31
|
-
// this instead of changing `border-width` (which changes element size)
|
32
|
-
// since `outline` is already used for the yellow focus state.
|
31
|
+
// this instead of changing `border-width` (which changes element size)
|
32
|
+
// and since `outline` is already used for the yellow focus state.
|
33
33
|
box-shadow: inset 0 0 0 $govuk-border-width-form-element;
|
34
34
|
}
|
35
35
|
|
@@ -0,0 +1,162 @@
|
|
1
|
+
@include govuk-exports("govuk/component/service-navigation") {
|
2
|
+
$govuk-service-navigation-active-link-border-width: govuk-spacing(1);
|
3
|
+
$govuk-service-navigation-background: $govuk-canvas-background-colour;
|
4
|
+
$govuk-service-navigation-border-colour: $govuk-border-colour;
|
5
|
+
|
6
|
+
// We make the link colour a little darker than normal here so that it has
|
7
|
+
// better perceptual contrast with the navigation background.
|
8
|
+
$govuk-service-navigation-link-colour: govuk-shade($govuk-link-colour, 10%);
|
9
|
+
|
10
|
+
.govuk-service-navigation {
|
11
|
+
border-bottom: 1px solid $govuk-service-navigation-border-colour;
|
12
|
+
background-color: $govuk-service-navigation-background;
|
13
|
+
}
|
14
|
+
|
15
|
+
.govuk-service-navigation__container {
|
16
|
+
display: flex;
|
17
|
+
flex-direction: column;
|
18
|
+
align-items: start;
|
19
|
+
|
20
|
+
@include govuk-media-query($from: tablet) {
|
21
|
+
flex-direction: row;
|
22
|
+
flex-wrap: wrap;
|
23
|
+
}
|
24
|
+
}
|
25
|
+
|
26
|
+
// These styles are shared between nav items and the service name, they
|
27
|
+
// ensure that both of them remain vertically aligned with one another
|
28
|
+
.govuk-service-navigation__item,
|
29
|
+
.govuk-service-navigation__service-name {
|
30
|
+
position: relative;
|
31
|
+
margin: govuk-spacing(2) 0;
|
32
|
+
border: 0 solid $govuk-service-navigation-link-colour;
|
33
|
+
|
34
|
+
@include govuk-media-query($from: tablet) {
|
35
|
+
margin-top: 0;
|
36
|
+
margin-bottom: 0;
|
37
|
+
padding: govuk-spacing(4) 0;
|
38
|
+
|
39
|
+
&:not(:last-child) {
|
40
|
+
@include govuk-responsive-margin(6, $direction: right);
|
41
|
+
}
|
42
|
+
}
|
43
|
+
}
|
44
|
+
|
45
|
+
.govuk-service-navigation__item--active {
|
46
|
+
@include govuk-media-query($until: tablet) {
|
47
|
+
// Negative offset the left margin so we can place a current page indicator
|
48
|
+
// to the left without misaligning the list item text.
|
49
|
+
margin-left: ((govuk-spacing(2) + $govuk-service-navigation-active-link-border-width) * -1);
|
50
|
+
padding-left: govuk-spacing(2);
|
51
|
+
border-left-width: $govuk-service-navigation-active-link-border-width;
|
52
|
+
}
|
53
|
+
|
54
|
+
@include govuk-media-query($from: tablet) {
|
55
|
+
padding-bottom: govuk-spacing(4) - $govuk-service-navigation-active-link-border-width;
|
56
|
+
border-bottom-width: $govuk-service-navigation-active-link-border-width;
|
57
|
+
}
|
58
|
+
}
|
59
|
+
|
60
|
+
.govuk-service-navigation__link {
|
61
|
+
@include govuk-link-common;
|
62
|
+
@include govuk-link-style-no-underline;
|
63
|
+
@include govuk-link-style-no-visited-state;
|
64
|
+
|
65
|
+
&:not(:hover):not(:focus) {
|
66
|
+
// We set the colour here as we don't want to override the hover or
|
67
|
+
// focus colours
|
68
|
+
color: $govuk-service-navigation-link-colour;
|
69
|
+
}
|
70
|
+
}
|
71
|
+
|
72
|
+
//
|
73
|
+
// Service name specific code
|
74
|
+
//
|
75
|
+
|
76
|
+
.govuk-service-navigation__service-name {
|
77
|
+
@include govuk-font($size: 19, $weight: bold);
|
78
|
+
}
|
79
|
+
|
80
|
+
// Annoyingly this requires a compound selector in order to overcome the
|
81
|
+
// specificity of the other link colour override we're doing
|
82
|
+
.govuk-service-navigation__service-name .govuk-service-navigation__link {
|
83
|
+
@include govuk-link-style-text;
|
84
|
+
}
|
85
|
+
|
86
|
+
//
|
87
|
+
// Navigation list specific code
|
88
|
+
//
|
89
|
+
|
90
|
+
.govuk-service-navigation__toggle {
|
91
|
+
@include govuk-font($size: 19, $weight: bold);
|
92
|
+
display: inline-flex;
|
93
|
+
margin: 0 0 govuk-spacing(2);
|
94
|
+
padding: 0;
|
95
|
+
border: 0;
|
96
|
+
color: $govuk-service-navigation-link-colour;
|
97
|
+
background: none;
|
98
|
+
word-break: break-all;
|
99
|
+
cursor: pointer;
|
100
|
+
align-items: center;
|
101
|
+
|
102
|
+
&:focus {
|
103
|
+
@include govuk-focused-text;
|
104
|
+
}
|
105
|
+
|
106
|
+
&::after {
|
107
|
+
@include govuk-shape-arrow($direction: down, $base: 10px, $display: inline-block);
|
108
|
+
content: "";
|
109
|
+
margin-left: govuk-spacing(1);
|
110
|
+
}
|
111
|
+
|
112
|
+
&[aria-expanded="true"]::after {
|
113
|
+
@include govuk-shape-arrow($direction: up, $base: 10px, $display: inline-block);
|
114
|
+
}
|
115
|
+
|
116
|
+
// Ensure the button stays hidden if the hidden attribute is present
|
117
|
+
&[hidden] {
|
118
|
+
display: none;
|
119
|
+
}
|
120
|
+
}
|
121
|
+
|
122
|
+
.govuk-service-navigation__list {
|
123
|
+
@include govuk-font($size: 19);
|
124
|
+
margin: 0;
|
125
|
+
margin-bottom: govuk-spacing(3);
|
126
|
+
padding: 0;
|
127
|
+
list-style: none;
|
128
|
+
|
129
|
+
// Make the navigation list a flexbox. Doing so resolves a couple of
|
130
|
+
// accessibility problems caused by the list items being inline-blocks:
|
131
|
+
// - Removes the extra whitespace from between each list item that screen
|
132
|
+
// readers would pointlessly announce.
|
133
|
+
// - Fixes an NVDA issue in Firefox and Chrome <= 124 where it would read
|
134
|
+
// all of the links as a run-on sentence.
|
135
|
+
@include govuk-media-query($from: tablet) {
|
136
|
+
display: flex;
|
137
|
+
flex-wrap: wrap;
|
138
|
+
margin-bottom: 0;
|
139
|
+
|
140
|
+
// However... IE11 totally trips over flexbox and doesn't wrap anything,
|
141
|
+
// making all of the items into a single, horizontally scrolling row,
|
142
|
+
// which is no good. This CSS hack removes the flexbox definition for
|
143
|
+
// IE 10 & 11, reverting it to the flawed, but OK, non-flexbox version.
|
144
|
+
//
|
145
|
+
// CSS hack taken from https://stackoverflow.com/questions/11173106/apply-style-only-on-ie#answer-36448860
|
146
|
+
// which also includes an explanation of why this works
|
147
|
+
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
|
148
|
+
display: block;
|
149
|
+
}
|
150
|
+
}
|
151
|
+
}
|
152
|
+
|
153
|
+
// This is a <strong> element that is used as a fallback mechanism for
|
154
|
+
// visually indicating the current page in scenarios where CSS isn't
|
155
|
+
// available. We don't actually want it to be bold normally, so set it to
|
156
|
+
// inherit the parent font-weight.
|
157
|
+
.govuk-service-navigation__active-fallback {
|
158
|
+
font-weight: inherit;
|
159
|
+
}
|
160
|
+
}
|
161
|
+
|
162
|
+
/*# sourceMappingURL=_index.scss.map */
|