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.
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 */