katalyst-govuk-formbuilder 1.10.2 → 1.12.0
Sign up to get free protection for your applications and to get access to all the features.
- 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 */
|