katalyst-govuk-formbuilder 1.10.1 → 1.11.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 (40) hide show
  1. checksums.yaml +4 -4
  2. data/app/assets/builds/katalyst/govuk/formbuilder.css +20 -20
  3. data/lib/katalyst/govuk/formbuilder/engine.rb +1 -0
  4. data/lib/katalyst/govuk/formbuilder.rb +3 -0
  5. data/node_modules/govuk-frontend/dist/govuk/components/_index.scss +1 -0
  6. data/node_modules/govuk-frontend/dist/govuk/components/accordion/_index.scss +35 -31
  7. data/node_modules/govuk-frontend/dist/govuk/components/character-count/_index.scss +4 -4
  8. data/node_modules/govuk-frontend/dist/govuk/components/checkboxes/_index.scss +6 -1
  9. data/node_modules/govuk-frontend/dist/govuk/components/cookie-banner/_index.scss +16 -13
  10. data/node_modules/govuk-frontend/dist/govuk/components/date-input/_index.scss +1 -2
  11. data/node_modules/govuk-frontend/dist/govuk/components/error-summary/_index.scss +4 -0
  12. data/node_modules/govuk-frontend/dist/govuk/components/fieldset/_index.scss +3 -5
  13. data/node_modules/govuk-frontend/dist/govuk/components/file-upload/_index.scss +8 -9
  14. data/node_modules/govuk-frontend/dist/govuk/components/header/_index.scss +8 -0
  15. data/node_modules/govuk-frontend/dist/govuk/components/input/_index.scss +7 -4
  16. data/node_modules/govuk-frontend/dist/govuk/components/notification-banner/_index.scss +3 -2
  17. data/node_modules/govuk-frontend/dist/govuk/components/pagination/_index.scss +24 -37
  18. data/node_modules/govuk-frontend/dist/govuk/components/panel/_index.scss +13 -9
  19. data/node_modules/govuk-frontend/dist/govuk/components/password-input/_index.scss +12 -9
  20. data/node_modules/govuk-frontend/dist/govuk/components/phase-banner/_index.scss +0 -8
  21. data/node_modules/govuk-frontend/dist/govuk/components/radios/_index.scss +7 -5
  22. data/node_modules/govuk-frontend/dist/govuk/components/select/_index.scss +5 -5
  23. data/node_modules/govuk-frontend/dist/govuk/components/service-navigation/_index.scss +162 -0
  24. data/node_modules/govuk-frontend/dist/govuk/components/service-navigation/_service-navigation.scss +4 -0
  25. data/node_modules/govuk-frontend/dist/govuk/components/skip-link/_index.scss +6 -4
  26. data/node_modules/govuk-frontend/dist/govuk/components/summary-list/_index.scss +2 -1
  27. data/node_modules/govuk-frontend/dist/govuk/components/tag/_index.scss +11 -8
  28. data/node_modules/govuk-frontend/dist/govuk/components/task-list/_index.scss +12 -10
  29. data/node_modules/govuk-frontend/dist/govuk/components/textarea/_index.scss +3 -3
  30. data/node_modules/govuk-frontend/dist/govuk/components/warning-text/_index.scss +2 -2
  31. data/node_modules/govuk-frontend/dist/govuk/core/_govuk-frontend-properties.scss +1 -1
  32. data/node_modules/govuk-frontend/dist/govuk/helpers/_colour.scss +44 -8
  33. data/node_modules/govuk-frontend/dist/govuk/helpers/_grid.scss +1 -1
  34. data/node_modules/govuk-frontend/dist/govuk/helpers/_links.scss +2 -2
  35. data/node_modules/govuk-frontend/dist/govuk/helpers/_shape-arrow.scss +1 -1
  36. data/node_modules/govuk-frontend/dist/govuk/helpers/_typography.scss +17 -0
  37. data/node_modules/govuk-frontend/dist/govuk/helpers/_visually-hidden.scss +30 -62
  38. data/node_modules/govuk-frontend/dist/govuk/overrides/_typography.scss +5 -1
  39. data/node_modules/govuk-frontend/dist/govuk/settings/_colours-organisations.scss +235 -9
  40. metadata +5 -3
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 2e03dce9b294fea3750ea7ec82957580fcb3cf6d28df45e0780dfda313ca7a69
4
- data.tar.gz: 48faf010853d3cd17b1d49260e78f125d42cbd48eb43eb8206305df786fa6f34
3
+ metadata.gz: 205c71b26044c257f432d3ab429eff7beeeb0c924f775df314732703d240a04f
4
+ data.tar.gz: 9a1733f6a7e41eefdeb6c096f21cbe7a328d6d7a159b6c57b3382d3f6e153236
5
5
  SHA512:
6
- metadata.gz: 3cd035acfd8a3ff0c55fe5f4754a7615f9f1db578dc0214dfc7f15df2547efc862e0898e4c5e4637f094250ea62a662192483031f6f9879cf4fe2b890cd7c257
7
- data.tar.gz: 5cd513d0144aab0691f905245f612b0c93d8b053fde24448d74a72806a986fd2ec8a4ba73a9f37b1a40e766bcf487c67579d237a8c2442dd18f7d74daf80e095
6
+ metadata.gz: 5ccc46b82e579a72033f4f79b5afd9f8928962cc67b4f19d4e0a8b513ded75b56c96af01e567e9456a1ab85c520c83da1a2854a27c961561f680e89be14b25f4
7
+ data.tar.gz: 6ed137133d42622545c5f3b9178f7165976a7eaf732f29bcd353ddcd10232bd84a20dc93488257cb9765a2b0713a05561702c69291efc38d1619633a45f211aa
@@ -43,7 +43,7 @@
43
43
 
44
44
 
45
45
  :root {
46
- --govuk-frontend-version: "5.4.0";
46
+ --govuk-frontend-version: "5.6.0";
47
47
  --govuk-frontend-breakpoint-mobile: 20rem;
48
48
  --govuk-frontend-breakpoint-tablet: 40.0625rem;
49
49
  --govuk-frontend-breakpoint-desktop: 48.0625rem;
@@ -1958,8 +1958,8 @@
1958
1958
 
1959
1959
  .govuk-checkboxes__conditional {
1960
1960
  margin-bottom: 15px;
1961
- margin-left: 18px;
1962
- padding-left: 33px;
1961
+ margin-left: 20px;
1962
+ padding-left: 35px;
1963
1963
  border-left: 4px solid #b1b4b6;
1964
1964
  }
1965
1965
  @media (min-width: 40.0625em) {
@@ -2003,6 +2003,10 @@
2003
2003
  margin-left: 10px;
2004
2004
  padding-left: 20px;
2005
2005
  }
2006
+ .govuk-checkboxes--small .govuk-checkboxes__divider {
2007
+ width: 24px;
2008
+ margin-bottom: 5px;
2009
+ }
2006
2010
  .govuk-checkboxes--small .govuk-checkboxes__item:hover .govuk-checkboxes__input:not(:disabled) + .govuk-checkboxes__label::before {
2007
2011
  outline: 3px dashed transparent;
2008
2012
  outline-offset: 1px;
@@ -2330,6 +2334,9 @@
2330
2334
  margin-top: 20px;
2331
2335
  }
2332
2336
  }
2337
+ .govuk-error-summary__body > :last-child {
2338
+ margin-bottom: 5px;
2339
+ }
2333
2340
 
2334
2341
  .govuk-error-summary__list {
2335
2342
  margin-bottom: 0;
@@ -2592,8 +2599,8 @@
2592
2599
 
2593
2600
  .govuk-radios__conditional {
2594
2601
  margin-bottom: 15px;
2595
- margin-left: 18px;
2596
- padding-left: 33px;
2602
+ margin-left: 20px;
2603
+ padding-left: 35px;
2597
2604
  border-left: 4px solid #b1b4b6;
2598
2605
  }
2599
2606
  @media (min-width: 40.0625em) {
@@ -2817,34 +2824,22 @@
2817
2824
  content: " ";
2818
2825
  }
2819
2826
 
2820
- .govuk-visually-hidden-focusable {
2827
+ .govuk-visually-hidden-focusable:not(:active):not(:focus) {
2821
2828
  position: absolute !important;
2822
2829
  width: 1px !important;
2823
2830
  height: 1px !important;
2824
2831
  margin: 0 !important;
2832
+ padding: 0 !important;
2825
2833
  overflow: hidden !important;
2826
2834
  clip: rect(0 0 0 0) !important;
2827
2835
  -webkit-clip-path: inset(50%) !important;
2828
2836
  clip-path: inset(50%) !important;
2837
+ border: 0 !important;
2829
2838
  white-space: nowrap !important;
2830
2839
  -webkit-user-select: none;
2831
2840
  -ms-user-select: none;
2832
2841
  user-select: none;
2833
2842
  }
2834
- .govuk-visually-hidden-focusable:active, .govuk-visually-hidden-focusable:focus {
2835
- position: static !important;
2836
- width: auto !important;
2837
- height: auto !important;
2838
- margin: inherit !important;
2839
- overflow: visible !important;
2840
- clip: auto !important;
2841
- -webkit-clip-path: none !important;
2842
- clip-path: none !important;
2843
- white-space: inherit !important;
2844
- -webkit-user-select: text;
2845
- -ms-user-select: text;
2846
- user-select: text;
2847
- }
2848
2843
 
2849
2844
 
2850
2845
 
@@ -4132,6 +4127,11 @@
4132
4127
  font-variant-numeric: tabular-nums !important;
4133
4128
  }
4134
4129
 
4130
+ .govuk-\!-text-break-word {
4131
+ word-wrap: break-word !important;
4132
+ overflow-wrap: break-word !important;
4133
+ }
4134
+
4135
4135
 
4136
4136
  .govuk-\!-width-full {
4137
4137
  width: 100% !important;
@@ -2,6 +2,7 @@
2
2
 
3
3
  require "active_support/inflector"
4
4
  require "govuk_design_system_formbuilder"
5
+ require "rails/engine"
5
6
 
6
7
  module Katalyst
7
8
  module GOVUK
@@ -1,8 +1,11 @@
1
1
  # frozen_string_literal: true
2
2
 
3
+ require "active_support"
4
+
3
5
  module Katalyst
4
6
  module GOVUK
5
7
  module Formbuilder
8
+ extend ActiveSupport::Autoload
6
9
  end
7
10
  end
8
11
  end
@@ -27,6 +27,7 @@
27
27
  @import "phase-banner/index";
28
28
  @import "radios/index";
29
29
  @import "select/index";
30
+ @import "service-navigation/index";
30
31
  @import "skip-link/index";
31
32
  @import "summary-list/index";
32
33
  @import "table/index";
@@ -102,9 +102,9 @@
102
102
  &:hover {
103
103
  color: $govuk-accordion-base-colour;
104
104
  background: $govuk-accordion-hover-colour;
105
- // The GOV.UK Design System focus state adds a box-shadow to the top and bottom of the
106
- // button. We add a grey box-shadow on hover too, to make the height of the hover state
107
- // match the height of the focus state.
105
+ // The focus state adds a box-shadow to the top and bottom of the
106
+ // button. We add a grey box-shadow on hover too, to make the height of
107
+ // the hover state match the height of the focus state.
108
108
  box-shadow:
109
109
  0 -2px $govuk-accordion-hover-colour,
110
110
  0 4px $govuk-accordion-hover-colour;
@@ -147,7 +147,7 @@
147
147
 
148
148
  position: relative;
149
149
 
150
- // Set size using rems to make the icon scale with text if user resizes text in their browser
150
+ // Set size using rems so icon scales with text
151
151
  width: govuk-px-to-rem(20px);
152
152
  height: govuk-px-to-rem(20px);
153
153
 
@@ -184,14 +184,15 @@
184
184
  .govuk-accordion__section-button {
185
185
  width: 100%;
186
186
 
187
- padding: govuk-spacing(2) 0 0 0;
187
+ padding: govuk-spacing(2) 0 0;
188
188
 
189
189
  border: 0;
190
190
 
191
191
  border-top: $govuk-accordion-bottom-border-width solid $govuk-border-colour;
192
192
 
193
- // Visually separate the section from the one underneath when user changes colours in their
194
- // browser. See https://github.com/alphagov/govuk-frontend/issues/2321#issuecomment-924201488
193
+ // Visually separate the section from the one underneath when user changes
194
+ // colours in their browser. See
195
+ // https://github.com/alphagov/govuk-frontend/issues/2321#issuecomment-924201488
195
196
  border-bottom: govuk-spacing(2) solid transparent;
196
197
 
197
198
  color: $govuk-text-colour;
@@ -230,8 +231,8 @@
230
231
  }
231
232
 
232
233
  &:focus {
233
- // Remove default focus border around button as
234
- // styling is being applied to inner text elements that receive focus
234
+ // Remove default focus border around button as styling is being applied
235
+ // to inner text elements that receive focus
235
236
  outline: 0;
236
237
 
237
238
  .govuk-accordion__section-heading-text-focus,
@@ -257,9 +258,10 @@
257
258
  }
258
259
  }
259
260
 
260
- // Remove the transparent border when the section is expanded to make it clear that the heading
261
- // relates to the content below. Adjust padding to maintain the height of the element.
262
- // See https://github.com/alphagov/govuk-frontend/pull/2257#issuecomment-951920798
261
+ // Remove the transparent border when the section is expanded to make it
262
+ // clear that the heading relates to the content below. Adjust padding to
263
+ // maintain the height of the element. See
264
+ // https://github.com/alphagov/govuk-frontend/pull/2257#issuecomment-951920798
263
265
  .govuk-accordion__section--expanded .govuk-accordion__section-button {
264
266
  padding-bottom: govuk-spacing(3);
265
267
  border-bottom: 0;
@@ -269,8 +271,8 @@
269
271
  }
270
272
  }
271
273
 
272
- // As Chevron icon is vertically aligned it overlaps with the focus state bottom border
273
- // Styling adds some spacing
274
+ // As Chevron icon is vertically aligned it overlaps with the focus state
275
+ // bottom border – this adds some spacing
274
276
  .govuk-accordion__section-button:focus .govuk-accordion__section-toggle-focus {
275
277
  padding-bottom: 3px;
276
278
 
@@ -299,9 +301,9 @@
299
301
  color: $govuk-link-colour;
300
302
  }
301
303
 
302
- // Add space between the icon and text.
303
- // Avoid applying spacing directly to the icon as the use of `transform` will change the
304
- // placement of any margins.
304
+ // Add space between the icon and text. Avoid applying spacing directly to
305
+ // the icon as the use of `transform` will change the placement of any
306
+ // margins.
305
307
  .govuk-accordion__show-all-text,
306
308
  .govuk-accordion__section-toggle-text {
307
309
  margin-left: govuk-spacing(1);
@@ -310,23 +312,25 @@
310
312
 
311
313
  // Background colour adjustment when user changes colours in Firefox
312
314
  //
313
- // When user changes colours in Firefox, text colour inside <button> is always black
314
- // (regardless of the custom colours the user has set). This is fine when the text in the
315
- // button is not nested inside another element because when user changes colours in Firefox,
316
- // the immediate background colour of buttons is always white (again, regardless of user's
317
- // custom colours).
315
+ // When user changes colours in Firefox, text colour inside <button> is
316
+ // always black (regardless of the custom colours the user has set). This is
317
+ // fine when the text in the button is not nested inside another element
318
+ // because when user changes colours in Firefox, the immediate background
319
+ // colour of buttons is always white (again, regardless of user's custom
320
+ // colours).
318
321
  //
319
- // However, when the text inside <button> is wrapped inside another element AND that element
320
- // sets a background colour, the text colour is still black but the background of that nested
321
- // element gets the user's custom background colour. When the custom background is a lighter
322
- // hue, the contrast might be sufficient. But if the user's custom background colour is a
323
- // darker colour, the contrast with the text might not be sufficient.
322
+ // However, when the text inside <button> is wrapped inside another element
323
+ // AND that element sets a background colour, the text colour is still black
324
+ // but the background of that nested element gets the user's custom
325
+ // background colour. When the custom background is a lighter hue, the
326
+ // contrast might be sufficient. But if the user's custom background colour
327
+ // is a darker colour, the contrast with the text might not be sufficient.
324
328
  //
325
- // To ensure sufficient contrast, override the background colour set by the focus state on the
326
- // nested elements to be transparent.
329
+ // To ensure sufficient contrast, override the background colour set by the
330
+ // focus state on the nested elements to be transparent.
327
331
  //
328
- // Also override the background colour of the Show/Hide chevrons which set a background colour
329
- // on hover.
332
+ // Also override the background colour of the Show/Hide chevrons which set a
333
+ // background colour on hover.
330
334
  @media screen and (forced-colors: active) {
331
335
  .govuk-accordion__show-all:hover,
332
336
  .govuk-accordion__section-button:hover {
@@ -19,10 +19,10 @@
19
19
  margin-bottom: 0;
20
20
 
21
21
  &::after {
22
- // Zero-width space that will reserve vertical space when no hint is provided
23
- // as:
24
- // - setting a min-height is not possible without a magic number
25
- // because the line-height is set by the `govuk-font` call above
22
+ // Zero-width space that will reserve vertical space when no hint is
23
+ // provided as:
24
+ // - setting a min-height is not possible without a magic number because
25
+ // the line-height is set by the `govuk-font` call above
26
26
  // - using `:empty` is not possible as the hint macro outputs line breaks
27
27
  content: "\200B";
28
28
  }
@@ -159,7 +159,7 @@
159
159
  // to be an even number in order to be centred under the 40px checkbox or radio.
160
160
  $conditional-border-width: $govuk-border-width-narrow;
161
161
  // Calculate the amount of padding needed to keep the border centered against the checkbox.
162
- $conditional-border-padding: ($govuk-checkboxes-size / 2) - ($conditional-border-width / 2);
162
+ $conditional-border-padding: ($govuk-touch-target-size / 2) - ($conditional-border-width / 2);
163
163
  // Move the border centered with the checkbox
164
164
  $conditional-margin-left: $conditional-border-padding;
165
165
  // Move the contents of the conditional inline with the label
@@ -255,6 +255,11 @@
255
255
  padding-left: ($govuk-touch-target-size - $input-offset) - ($margin-left + $conditional-border-width);
256
256
  }
257
257
 
258
+ .govuk-checkboxes__divider {
259
+ width: $govuk-small-checkboxes-size;
260
+ margin-bottom: govuk-spacing(1);
261
+ }
262
+
258
263
  // Hover state for small checkboxes.
259
264
  //
260
265
  // We use a hover state for small checkboxes because the touch target size
@@ -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
  }