katalyst-govuk-formbuilder 1.10.1 → 1.11.0

Sign up to get free protection for your applications and to get access to all the features.
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
  }