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.
Files changed (44) hide show
  1. checksums.yaml +4 -4
  2. data/README.md +30 -0
  3. data/app/assets/builds/katalyst/govuk/formbuilder.css +30 -30
  4. data/app/assets/stylesheets/katalyst/govuk/components/combobox/_index.scss +100 -0
  5. data/app/assets/stylesheets/katalyst/govuk/components/richtextarea/_index.scss +3 -4
  6. data/lib/katalyst/govuk/formbuilder/builder.rb +41 -1
  7. data/lib/katalyst/govuk/formbuilder/elements/combobox.rb +60 -0
  8. data/node_modules/govuk-frontend/dist/govuk/components/_index.scss +1 -0
  9. data/node_modules/govuk-frontend/dist/govuk/components/accordion/_index.scss +35 -31
  10. data/node_modules/govuk-frontend/dist/govuk/components/character-count/_index.scss +4 -4
  11. data/node_modules/govuk-frontend/dist/govuk/components/checkboxes/_index.scss +6 -1
  12. data/node_modules/govuk-frontend/dist/govuk/components/cookie-banner/_index.scss +16 -13
  13. data/node_modules/govuk-frontend/dist/govuk/components/date-input/_index.scss +1 -2
  14. data/node_modules/govuk-frontend/dist/govuk/components/error-summary/_index.scss +4 -0
  15. data/node_modules/govuk-frontend/dist/govuk/components/fieldset/_index.scss +3 -5
  16. data/node_modules/govuk-frontend/dist/govuk/components/file-upload/_index.scss +8 -9
  17. data/node_modules/govuk-frontend/dist/govuk/components/header/_index.scss +8 -0
  18. data/node_modules/govuk-frontend/dist/govuk/components/input/_index.scss +7 -4
  19. data/node_modules/govuk-frontend/dist/govuk/components/notification-banner/_index.scss +3 -2
  20. data/node_modules/govuk-frontend/dist/govuk/components/pagination/_index.scss +24 -37
  21. data/node_modules/govuk-frontend/dist/govuk/components/panel/_index.scss +13 -9
  22. data/node_modules/govuk-frontend/dist/govuk/components/password-input/_index.scss +12 -9
  23. data/node_modules/govuk-frontend/dist/govuk/components/phase-banner/_index.scss +0 -8
  24. data/node_modules/govuk-frontend/dist/govuk/components/radios/_index.scss +7 -5
  25. data/node_modules/govuk-frontend/dist/govuk/components/select/_index.scss +5 -5
  26. data/node_modules/govuk-frontend/dist/govuk/components/service-navigation/_index.scss +162 -0
  27. data/node_modules/govuk-frontend/dist/govuk/components/service-navigation/_service-navigation.scss +4 -0
  28. data/node_modules/govuk-frontend/dist/govuk/components/skip-link/_index.scss +6 -4
  29. data/node_modules/govuk-frontend/dist/govuk/components/summary-list/_index.scss +2 -1
  30. data/node_modules/govuk-frontend/dist/govuk/components/tag/_index.scss +11 -8
  31. data/node_modules/govuk-frontend/dist/govuk/components/task-list/_index.scss +12 -10
  32. data/node_modules/govuk-frontend/dist/govuk/components/textarea/_index.scss +3 -3
  33. data/node_modules/govuk-frontend/dist/govuk/components/warning-text/_index.scss +2 -2
  34. data/node_modules/govuk-frontend/dist/govuk/core/_govuk-frontend-properties.scss +1 -1
  35. data/node_modules/govuk-frontend/dist/govuk/helpers/_colour.scss +44 -8
  36. data/node_modules/govuk-frontend/dist/govuk/helpers/_grid.scss +1 -1
  37. data/node_modules/govuk-frontend/dist/govuk/helpers/_links.scss +2 -2
  38. data/node_modules/govuk-frontend/dist/govuk/helpers/_shape-arrow.scss +1 -1
  39. data/node_modules/govuk-frontend/dist/govuk/helpers/_typography.scss +17 -0
  40. data/node_modules/govuk-frontend/dist/govuk/helpers/_visually-hidden.scss +30 -62
  41. data/node_modules/govuk-frontend/dist/govuk/overrides/_typography.scss +5 -1
  42. data/node_modules/govuk-frontend/dist/govuk/settings/_colours-organisations.scss +235 -9
  43. metadata +7 -4
  44. 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
- // The bottom spacing should be created by the items inside the component.
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
- // when user changes colours in their browser.
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` attribute
29
- // when the visibility of cookie and replacement messages is toggled.
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 programmatically focused.
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 thing the user
37
- // interacted with prior to it gaining focus.
38
- // We therefore assume that moving focus to it is not going to surprise users, and that giving
39
- // it a visible focus indicator could be more confusing than helpful, especially as the
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 something to monitor.
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
- // font-size: 0 removes whitespace caused by inline-block
10
- font-size: 0;
9
+ font-size: 0; // removes whitespace caused by inline-block
11
10
  }
12
11
 
13
12
  .govuk-date-input__item {
@@ -30,6 +30,10 @@
30
30
  > * + * {
31
31
  @include govuk-responsive-margin(4, "top");
32
32
  }
33
+
34
+ > :last-child {
35
+ @include govuk-responsive-margin(1, "bottom");
36
+ }
33
37
  }
34
38
 
35
39
  // Cross-component class - adjusts styling of list component
@@ -7,9 +7,8 @@
7
7
  @include govuk-clearfix;
8
8
  }
9
9
 
10
- // Fix for Firefox < 53
11
- // https://bugzilla.mozilla.org/show_bug.cgi?id=504622
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 we want to be able to treat the heading as if it is
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
- // 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
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 the
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://bugzilla.mozilla.org/show_bug.cgi?id=1430196
35
- // so that component receives focus in Firefox.
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
- // setting any background-color makes text invisible when changing colours to dark backgrounds in Firefox (https://bugzilla.mozilla.org/show_bug.cgi?id=1335476)
15
- // as background-color and color need to always be set together, color should not be set either
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 // instead of changing `border-width` - this is for consistency with
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 hand side to allow for the Safari prefill icon
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 text in high contrast mode
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) 0;
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 get around a whitespace issue between the arrow svg and the link text
58
- // without having to rely on whitespace control from backend tooling
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 have links within them
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 prev/next only mode
122
- // We do this so that we have a hover state in all possible instances
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 if user resizes text in their browser
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
- // Reset both these elements to their inline default, both to ensure that the focus state
203
- // for block mode "shrink wraps" text as expected
204
- .govuk-pagination__link,
205
- .govuk-pagination__link-title {
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
- margin-right: govuk-spacing(2);
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 overflowing the container
18
- // on very narrow viewports by forcing them to break and wrap instead. This
19
- // overflowing is more likely to happen when user increases text size on a mobile eg. using
20
- // iOS Safari text resize controls.
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 it uses white
23
- // text: when the text overflows the container, it is invisible on the white (page)
24
- // background. When the text in our other components overflow, the user might have to scroll
25
- // horizontally to view it but the the text remains legible.
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
- word-wrap: break-word; // Support IE (autoprefixer doesn't add this as it's not a prefix)
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 breakpoint
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 input, due to using
14
- // box-shadow, which we don't particularly want in this situation
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 want to hide it,
21
- // so that there aren't two controls presented to the user that do the same thing but aren't in
22
- // sync with one another. This doesn't affect the function that allows Edge users to toggle
23
- // password visibility by pressing Alt+F8, which cannot be programmatically disabled.
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 to the top so that the button doesn't obscure the input's focus style
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% width on this breakpoint, but we don't want that in this case
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 smaller.
13
- // So for the circular radios we bump the default to make it look visually consistent.
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 or radio.
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 the radios.
179
- $conditional-border-padding: ($govuk-radios-size / 2) - ($conditional-border-width / 2);
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; // should this be global?
9
+ box-sizing: border-box;
10
10
 
11
11
  // This min-width was chosen because:
12
- // - it makes the Select noticeably wider than it is taller (which is what users expect)
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); // was 5px 4px 4px - size of it should be adjusted to match other form elements
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) and
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 */
@@ -0,0 +1,4 @@
1
+ @import "../../base";
2
+ @import "./index";
3
+
4
+ /*# sourceMappingURL=_service-navigation.scss.map */