dxw_govuk_frontend_rails 3.10.2 → 3.14.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 (41) hide show
  1. checksums.yaml +4 -4
  2. data/Gemfile.lock +2 -2
  3. data/README.md +61 -40
  4. data/lib/dxw_govuk_frontend_rails/version.rb +1 -1
  5. data/package-lock.json +22 -4
  6. data/package.json +1 -1
  7. data/vendor/assets/javascripts/govuk_frontend_rails.js +62 -4
  8. data/vendor/assets/stylesheets/components/_all.scss +1 -0
  9. data/vendor/assets/stylesheets/components/accordion/_index.scss +7 -16
  10. data/vendor/assets/stylesheets/components/back-link/_index.scss +4 -15
  11. data/vendor/assets/stylesheets/components/breadcrumbs/_index.scss +1 -0
  12. data/vendor/assets/stylesheets/components/button/_index.scss +15 -8
  13. data/vendor/assets/stylesheets/components/character-count/_index.scss +1 -0
  14. data/vendor/assets/stylesheets/components/checkboxes/_index.scss +63 -34
  15. data/vendor/assets/stylesheets/components/cookie-banner/_cookie-banner.scss +2 -0
  16. data/vendor/assets/stylesheets/components/cookie-banner/_index.scss +51 -0
  17. data/vendor/assets/stylesheets/components/details/_index.scss +7 -2
  18. data/vendor/assets/stylesheets/components/file-upload/_index.scss +14 -14
  19. data/vendor/assets/stylesheets/components/footer/_index.scss +39 -29
  20. data/vendor/assets/stylesheets/components/header/_index.scss +44 -22
  21. data/vendor/assets/stylesheets/components/input/_index.scss +4 -0
  22. data/vendor/assets/stylesheets/components/panel/_index.scss +13 -1
  23. data/vendor/assets/stylesheets/components/phase-banner/_index.scss +1 -1
  24. data/vendor/assets/stylesheets/components/radios/_index.scss +14 -0
  25. data/vendor/assets/stylesheets/components/skip-link/_index.scss +3 -1
  26. data/vendor/assets/stylesheets/components/table/_index.scss +21 -0
  27. data/vendor/assets/stylesheets/components/tabs/_index.scss +1 -6
  28. data/vendor/assets/stylesheets/components/warning-text/_index.scss +10 -1
  29. data/vendor/assets/stylesheets/core/_links.scss +8 -0
  30. data/vendor/assets/stylesheets/core/_template.scss +0 -1
  31. data/vendor/assets/stylesheets/helpers/_colour.scss +2 -2
  32. data/vendor/assets/stylesheets/helpers/_links.scss +159 -38
  33. data/vendor/assets/stylesheets/helpers/_spacing.scss +22 -4
  34. data/vendor/assets/stylesheets/objects/_all.scss +1 -0
  35. data/vendor/assets/stylesheets/objects/_button-group.scss +101 -0
  36. data/vendor/assets/stylesheets/objects/_width-container.scss +4 -0
  37. data/vendor/assets/stylesheets/overrides/_all.scss +1 -0
  38. data/vendor/assets/stylesheets/overrides/_text-align.scss +20 -0
  39. data/vendor/assets/stylesheets/settings/_all.scss +2 -0
  40. data/vendor/assets/stylesheets/settings/_links.scss +62 -0
  41. metadata +8 -3
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: b45f829ef6c112b8acdc675c702ea6c5b2ed784f67afd8c46fb5fd1ab9e6515f
4
- data.tar.gz: cac2861100bd6e495f63cbf61792428d6dd86260ba6ac8a6499d7d4ddd7efcc8
3
+ metadata.gz: d053ce75cefe312fcb93c69b7c62419d035a3993727f0db14e73aa8fbea4ca08
4
+ data.tar.gz: 5595e806ef47f2224ae37a8e1dde758e46f25d92f23690c3068979d07827f051
5
5
  SHA512:
6
- metadata.gz: 2bbc39c25ed2bb297c569524f56b4dd998d4363b27f6a861ffd888c2dd5babcb07f9722d72cc7c54c9604522591a8ac2eefed5527137bd11833ea00bcf8777b7
7
- data.tar.gz: 38df5dbcd807f25710609517b7aa8458824b09b0b7e33c04713adb18e9d3613fad3f63574ff2d450f32fbb8d51b8e950f767b3ce4ad3cd983e7026b4b5f2cf22
6
+ metadata.gz: 01f18feb6dfb2f8a759a2e90e12226afd872ae1fc52e336ee96eb11fb45c8348c91045747a748d8b371338deae55e05c770ce74b6d39072931f9161bc20fa803
7
+ data.tar.gz: 11f7f562aa51c6e1d5a9f129ed6df91e965d4daf442210d9e48246ee9dbba5f32601774036f205da0dea30967e617f5e9be262d603d09365504740b52206b358
data/Gemfile.lock CHANGED
@@ -1,7 +1,7 @@
1
1
  PATH
2
2
  remote: .
3
3
  specs:
4
- dxw_govuk_frontend_rails (3.10.2)
4
+ dxw_govuk_frontend_rails (3.14.0)
5
5
 
6
6
  GEM
7
7
  remote: https://rubygems.org/
@@ -18,4 +18,4 @@ DEPENDENCIES
18
18
  rake (~> 13.0)
19
19
 
20
20
  BUNDLED WITH
21
- 2.2.1
21
+ 2.2.24
data/README.md CHANGED
@@ -1,91 +1,112 @@
1
- # GOVUK Frontend for Rails
1
+ # GOV.UK Frontend for Rails
2
2
 
3
3
  ## Read this first
4
4
 
5
- Although this gem makes it super easy to add the GOVUK Frontend to your
6
- Rails applications, we would recommend using it as a guide to add the
7
- GOVUK Frontend yourself.
5
+ Although this gem makes it super easy to add the GOV.UK Frontend to your Rails
6
+ applications, we would recommend using it as a guide to add the GOV.UK Frontend
7
+ yourself.
8
8
 
9
- ## About Adds the GOVUK Frontend for Rails using the asset pipeline.
9
+ ## About
10
+
11
+ Adds the GOV.UK Frontend for Rails using the asset pipeline.
10
12
 
11
13
  https://github.com/alphagov/govuk-frontend
12
14
 
13
15
  ## Breaking Changes in v3.0.0
14
16
 
15
- This release of the GOVUK Frontend has breaking changes! Do not update to this
17
+ This release of the GOV.UK Frontend has breaking changes! Do not update to this
16
18
  version until you have read and understood:
17
19
 
18
- You will not be required to updated any file paths with govuk as we take care of
19
- that for you, all others changes will need to be managed:
20
+ You will not be required to updated any file paths with `govuk` as we take care
21
+ of that for you, all others changes will need to be managed:
20
22
 
21
23
  https://github.com/alphagov/govuk-frontend/releases/tag/v3.0.0
22
24
 
23
25
  ## Limitations
24
26
 
25
- This gem does not include the ie8 version of GOVUK Frontend, as the service
26
- standard no longer requires it:
27
+ This gem does not include the `ie8` version of GOV.UK Frontend, as the service
28
+ standard no longer requires support for Internet Explorer versions less than 11:
27
29
 
28
30
  https://www.gov.uk/service-manual/technology/designing-for-different-browsers-and-devices
29
31
 
30
- This gem and its documentation cannot tell you how to use the GOVUK effectively,
31
- see the GOVUK Design System documentation for that:
32
+ This gem and its documentation cannot tell you how to use the GOV.UK patterns
33
+ effectively, see the GOV.UK Design System documentation for that:
34
+
35
+ https://design-system.service.gov.uk/
32
36
 
33
- https://design-system.service.gov.uk/ ## Installation
37
+ ## Installation
34
38
 
35
39
  Add this line to your application's Gemfile:
36
40
 
37
- ```ruby gem 'dxw_govuk_frontend_rails' ```
41
+ ```ruby
42
+ gem 'dxw_govuk_frontend_rails'
43
+ ```
38
44
 
39
45
  And then execute:
40
46
 
41
- $ bundle
47
+ ```
48
+ $ bundle
49
+ ```
50
+
51
+ ## Usage
42
52
 
43
- ## Usage Your Rails app will need to have sass enabled.
53
+ Your Rails app will need to have SCSS enabled.
54
+
55
+ **IMPORTANT: You must not use this library without changes if the service you
56
+ are building is not on GOV.UK. Read and understand the guidance here:**
57
+
58
+ https://www.gov.uk/service-manual/design/making-your-service-look-like-govuk#if-your-service-isnt-on-govuk
44
59
 
45
60
  ### Basic usage
46
61
 
47
- If the service you are building does not need to modify or extend the GOVUK
48
- Frontend all you need to do is import the main sass and javascript files into
62
+ If the service you are building does not need to modify or extend the GOV.UK
63
+ Frontend, all you need to do is import the main SCSS and JavaScript files into
49
64
  your Rails app:
50
65
 
51
- - create a sass file in your application: ```
52
- app/assets/stylesheets/govuk_frontend_rails.scss ```
53
- - import the styles into `govuk_frontend_rails.scss`: ```sass @import
54
- "govuk-frontend-rails"; ```
55
- - require the `govuk-frontend-rails.scss` file in `application.css` or
56
- equivalent:
66
+ - create a SCSS file in your application:
57
67
 
58
- ``` *= require govuk_frontend_rails ```
68
+ `app/assets/stylesheets/govuk_frontend_rails.scss`
59
69
 
60
- - require the javascript into `app/assets/javascripts/application.js`:
70
+ - import the styles into `govuk_frontend_rails.scss`:
61
71
 
62
- ``` //= require govuk_frontend_rails ```
63
- - initialise the GOVUK Frontend either in a .js file on in your application
72
+ `@import "govuk-frontend-rails";`
73
+
74
+ - import the `govuk-frontend-rails.scss` file in the comment block in
75
+ `app/assets/stylesheets/application.css` or equivalent:
76
+
77
+ `*= require govuk_frontend_rails`
78
+
79
+ - import the JavaScript in the comment block of
80
+ `app/assets/javascripts/application.js`:
81
+
82
+ `//= require govuk_frontend_rails`
83
+
84
+ - initialise the GOV.UK Frontend either in a .js file or in your application
64
85
  layout:
65
86
 
66
- ```javascript window.onload = function() { window.GOVUKFrontend.initAll() }; ```
67
- - update your application markup to use the GOVUK Frontend class names
87
+ `window.onload = function() { window.GOVUKFrontend.initAll() };`
68
88
 
69
- IMPORTANT: You cannot use the GOVUK Frontend without changes if the service you
70
- are building is not on GOV.UK, read and understand the guidance here:
89
+ - update your application markup to use the GOV.UK Frontend class names
71
90
 
72
- https://www.gov.uk/service-manual/design/making-your-service-look-like-govuk#if-your-service-isnt-on-govuk
91
+ ## Tracking GOV.UK Frontend versions
73
92
 
74
- ## Tracking version We aim to tracking the version of GOVUK Frontend.
93
+ We aim to track the latest version of GOV.UK Frontend but we may fall behind.
94
+ Opening an issue if we are behind on a new release would be helpful, or open a
95
+ PR to update to the latest release!
75
96
 
76
- ## Updating to a new Version of GOVUK Frontend
97
+ ## Updating to a new version of GOV.UK Frontend
77
98
 
78
- When a new version of the GOVUK Frontend is released:
99
+ When a new version of the GOV.UK Frontend is released:
79
100
 
80
- - make a new branch with the GOVUK Frontend version number
101
+ - make a new branch with the GOV.UK Frontend version number
81
102
  - set the new version number in `package.json` and
82
103
  `lib/dxw_govuk_frontend_rails/version.rb`
83
- - run `npm update` to get the new release of the GOVUK Frontend
104
+ - run `npm update` to get the new release of the GOV.UK Frontend
84
105
  - run `bundle exec rake` to compile the new assets
85
106
  - commit the changes
86
- - tag with the same release number as GOVUK Frontend
107
+ - tag with the same release number as GOV.UK Frontend
87
108
  - push the change
88
109
  - push the tag
89
110
  - merge your branch
90
111
  - make a new release of the tag on GitHub
91
- - GitHub acitons will build the gem and push to Rubygems
112
+ - GitHub actions will build the gem and push to RubyGems
@@ -1,3 +1,3 @@
1
1
  module DxwGovukFrontendRails
2
- VERSION = "3.10.2"
2
+ VERSION = "3.14.0"
3
3
  end
data/package-lock.json CHANGED
@@ -1,13 +1,31 @@
1
1
  {
2
2
  "name": "dxw_govuk_frontend_rails",
3
3
  "version": "1.0.0",
4
- "lockfileVersion": 1,
4
+ "lockfileVersion": 2,
5
5
  "requires": true,
6
+ "packages": {
7
+ "": {
8
+ "name": "dxw_govuk_frontend_rails",
9
+ "version": "1.0.0",
10
+ "license": "ISC",
11
+ "dependencies": {
12
+ "govuk-frontend": "3.14.0"
13
+ }
14
+ },
15
+ "node_modules/govuk-frontend": {
16
+ "version": "3.14.0",
17
+ "resolved": "https://registry.npmjs.org/govuk-frontend/-/govuk-frontend-3.14.0.tgz",
18
+ "integrity": "sha512-y7FTuihCSA8Hty+e9h0uPhCoNanCAN+CLioNFlPmlbeHXpbi09VMyxTcH+XfnMPY4Cp++7096v0rLwwdapTXnA==",
19
+ "engines": {
20
+ "node": ">= 4.2.0"
21
+ }
22
+ }
23
+ },
6
24
  "dependencies": {
7
25
  "govuk-frontend": {
8
- "version": "3.10.2",
9
- "resolved": "https://registry.npmjs.org/govuk-frontend/-/govuk-frontend-3.10.2.tgz",
10
- "integrity": "sha512-MpMymgLsKoMw40MggZ0XLCAj1FY5N2s8Pf3aQR+k0cZOsegjLsnejxNfEB9qEl9jcma2fiiVcvsEZ+Ipo+Oo2g=="
26
+ "version": "3.14.0",
27
+ "resolved": "https://registry.npmjs.org/govuk-frontend/-/govuk-frontend-3.14.0.tgz",
28
+ "integrity": "sha512-y7FTuihCSA8Hty+e9h0uPhCoNanCAN+CLioNFlPmlbeHXpbi09VMyxTcH+XfnMPY4Cp++7096v0rLwwdapTXnA=="
11
29
  }
12
30
  }
13
31
  }
data/package.json CHANGED
@@ -21,6 +21,6 @@
21
21
  },
22
22
  "homepage": "https://github.com/mec/dxw_govuk_frontend_rails#readme",
23
23
  "dependencies": {
24
- "govuk-frontend": "3.10.2"
24
+ "govuk-frontend": "3.14.0"
25
25
  }
26
26
  }
@@ -1498,7 +1498,7 @@ function CharacterCount ($module) {
1498
1498
  this.$module = $module;
1499
1499
  this.$textarea = $module.querySelector('.govuk-js-character-count');
1500
1500
  if (this.$textarea) {
1501
- this.$countMessage = $module.querySelector('[id=' + this.$textarea.id + '-info]');
1501
+ this.$countMessage = $module.querySelector('[id="' + this.$textarea.id + '-info"]');
1502
1502
  }
1503
1503
  }
1504
1504
 
@@ -1751,6 +1751,47 @@ Checkboxes.prototype.syncConditionalRevealWithInputState = function ($input) {
1751
1751
  }
1752
1752
  };
1753
1753
 
1754
+ /**
1755
+ * Uncheck other checkboxes
1756
+ *
1757
+ * Find any other checkbox inputs with the same name value, and uncheck them.
1758
+ * This is useful for when a “None of these" checkbox is checked.
1759
+ */
1760
+ Checkboxes.prototype.unCheckAllInputsExcept = function ($input) {
1761
+ var allInputsWithSameName = document.querySelectorAll('input[type="checkbox"][name="' + $input.name + '"]');
1762
+
1763
+ nodeListForEach(allInputsWithSameName, function ($inputWithSameName) {
1764
+ var hasSameFormOwner = ($input.form === $inputWithSameName.form);
1765
+ if (hasSameFormOwner && $inputWithSameName !== $input) {
1766
+ $inputWithSameName.checked = false;
1767
+ }
1768
+ });
1769
+
1770
+ this.syncAllConditionalReveals();
1771
+ };
1772
+
1773
+ /**
1774
+ * Uncheck exclusive inputs
1775
+ *
1776
+ * Find any checkbox inputs with the same name value and the 'exclusive' behaviour,
1777
+ * and uncheck them. This helps prevent someone checking both a regular checkbox and a
1778
+ * "None of these" checkbox in the same fieldset.
1779
+ */
1780
+ Checkboxes.prototype.unCheckExclusiveInputs = function ($input) {
1781
+ var allInputsWithSameNameAndExclusiveBehaviour = document.querySelectorAll(
1782
+ 'input[data-behaviour="exclusive"][type="checkbox"][name="' + $input.name + '"]'
1783
+ );
1784
+
1785
+ nodeListForEach(allInputsWithSameNameAndExclusiveBehaviour, function ($exclusiveInput) {
1786
+ var hasSameFormOwner = ($input.form === $exclusiveInput.form);
1787
+ if (hasSameFormOwner) {
1788
+ $exclusiveInput.checked = false;
1789
+ }
1790
+ });
1791
+
1792
+ this.syncAllConditionalReveals();
1793
+ };
1794
+
1754
1795
  /**
1755
1796
  * Click event handler
1756
1797
  *
@@ -1762,12 +1803,29 @@ Checkboxes.prototype.syncConditionalRevealWithInputState = function ($input) {
1762
1803
  Checkboxes.prototype.handleClick = function (event) {
1763
1804
  var $target = event.target;
1764
1805
 
1765
- // If a checkbox with aria-controls, handle click
1766
- var isCheckbox = $target.getAttribute('type') === 'checkbox';
1806
+ // Ignore clicks on things that aren't checkbox inputs
1807
+ if ($target.type !== 'checkbox') {
1808
+ return
1809
+ }
1810
+
1811
+ // If the checkbox conditionally-reveals some content, sync the state
1767
1812
  var hasAriaControls = $target.getAttribute('aria-controls');
1768
- if (isCheckbox && hasAriaControls) {
1813
+ if (hasAriaControls) {
1769
1814
  this.syncConditionalRevealWithInputState($target);
1770
1815
  }
1816
+
1817
+ // No further behaviour needed for unchecking
1818
+ if (!$target.checked) {
1819
+ return
1820
+ }
1821
+
1822
+ // Handle 'exclusive' checkbox behaviour (ie "None of these")
1823
+ var hasBehaviourExclusive = ($target.getAttribute('data-behaviour') === 'exclusive');
1824
+ if (hasBehaviourExclusive) {
1825
+ this.unCheckAllInputsExcept($target);
1826
+ } else {
1827
+ this.unCheckExclusiveInputs($target);
1828
+ }
1771
1829
  };
1772
1830
 
1773
1831
  (function(undefined) {
@@ -6,6 +6,7 @@
6
6
  @import "button/index";
7
7
  @import "checkboxes/index";
8
8
  @import "character-count/index";
9
+ @import "cookie-banner/index";
9
10
  @import "summary-list/index";
10
11
  @import "date-input/index";
11
12
  @import "details/index";
@@ -1,9 +1,4 @@
1
1
  @include govuk-exports("govuk/component/accordion") {
2
-
3
- $govuk-accordion-link-colour: $govuk-link-colour;
4
- $govuk-accordion-link-hover-colour: govuk-colour("light-blue");
5
- $govuk-accordion-border-width: 3px;
6
-
7
2
  .govuk-accordion {
8
3
  @include govuk-responsive-margin(6, "bottom");
9
4
  }
@@ -98,19 +93,9 @@
98
93
  // Safe area on the right to avoid clashing with icon
99
94
  padding-right: 40px;
100
95
  border-top: 1px solid $govuk-border-colour;
101
- color: $govuk-accordion-link-colour;
102
96
  cursor: pointer;
103
97
  }
104
98
 
105
- // For devices that can't hover such as touch devices,
106
- // remove hover state as it can be stuck in that state (iOS).
107
- @media (hover: none) {
108
- .govuk-accordion__section-header:hover {
109
- border-top-color: $govuk-accordion-link-colour;
110
- box-shadow: inset 0 $govuk-accordion-border-width 0 0 $govuk-accordion-link-colour;
111
- }
112
- }
113
-
114
99
  // Buttons within the headers don’t need default styling
115
100
  .govuk-accordion__section-button {
116
101
  @include govuk-typography-common;
@@ -119,7 +104,7 @@
119
104
  margin-left: 0;
120
105
  padding: 0;
121
106
  border-width: 0;
122
- color: inherit;
107
+ color: $govuk-link-colour;
123
108
  background: none;
124
109
  text-align: left;
125
110
  cursor: pointer;
@@ -147,7 +132,13 @@
147
132
  }
148
133
 
149
134
  .govuk-accordion__section-button:hover:not(:focus) {
135
+ color: $govuk-link-hover-colour;
150
136
  text-decoration: underline;
137
+
138
+ // This needs to come after the text-decoration property otherwise
139
+ // text-decoration, as a shorthand property, resets it to auto
140
+ @include govuk-link-hover-decoration;
141
+ text-underline-offset: $govuk-link-underline-offset;
151
142
  }
152
143
 
153
144
  // For devices that can't hover such as touch devices,
@@ -24,21 +24,6 @@
24
24
  padding-left: 14px;
25
25
  }
26
26
 
27
- // Only underline if the component is linkable
28
- .govuk-back-link[href] {
29
- text-decoration: underline;
30
-
31
- // When the back link is focused, hide the bottom link border as the
32
- // focus styles has a bottom border.
33
- &:focus {
34
- text-decoration: none;
35
-
36
- &:before {
37
- border-color: $govuk-text-colour;
38
- }
39
- }
40
- }
41
-
42
27
  // Prepend left pointing chevron
43
28
  .govuk-back-link:before {
44
29
  content: "";
@@ -88,6 +73,10 @@
88
73
  }
89
74
  }
90
75
 
76
+ .govuk-back-link:focus:before {
77
+ border-color: $govuk-focus-text-colour;
78
+ }
79
+
91
80
  .govuk-back-link:after {
92
81
  content: "";
93
82
  position: absolute;
@@ -129,6 +129,7 @@
129
129
 
130
130
  .govuk-breadcrumbs__list {
131
131
  display: -webkit-box;
132
+ display: -webkit-flex;
132
133
  display: -ms-flexbox;
133
134
  display: flex;
134
135
  }
@@ -29,6 +29,8 @@
29
29
  position: relative;
30
30
  width: 100%;
31
31
  margin-top: 0;
32
+ margin-right: 0;
33
+ margin-left: 0;
32
34
  @include govuk-responsive-margin(6, "bottom", $adjustment: $button-shadow-size); // s2
33
35
  padding: (govuk-spacing(2) - $govuk-border-width-form-element) govuk-spacing(2) (govuk-spacing(2) - $govuk-border-width-form-element - ($button-shadow-size / 2)); // s1
34
36
  border: $govuk-border-width-form-element solid transparent;
@@ -156,10 +158,6 @@
156
158
  cursor: default;
157
159
  }
158
160
 
159
- &:focus {
160
- outline: none;
161
- }
162
-
163
161
  &:active {
164
162
  top: 0;
165
163
  box-shadow: 0 $button-shadow-size 0 $govuk-button-shadow-colour; // s0
@@ -239,6 +237,8 @@
239
237
 
240
238
  display: -webkit-inline-box;
241
239
 
240
+ display: -webkit-inline-flex;
241
+
242
242
  display: -ms-inline-flexbox;
243
243
 
244
244
  display: inline-flex;
@@ -246,6 +246,8 @@
246
246
 
247
247
  -webkit-box-pack: center;
248
248
 
249
+ -webkit-justify-content: center;
250
+
249
251
  -ms-flex-pack: center;
250
252
 
251
253
  justify-content: center;
@@ -258,10 +260,15 @@
258
260
  margin-left: govuk-spacing(2);
259
261
  }
260
262
  vertical-align: middle;
261
- -ms-flex-negative: 0;
262
- flex-shrink: 0;
263
- -ms-flex-item-align: center;
264
- align-self: center;
263
+ -webkit-flex-shrink: 0;
264
+ -ms-flex-negative: 0;
265
+ flex-shrink: 0;
266
+ -webkit-align-self: center;
267
+ -ms-flex-item-align: center;
268
+ align-self: center;
269
+ // Work around SVGs not inheriting color from parent in forced color mode
270
+ // (https://github.com/w3c/csswg-drafts/issues/6310)
271
+ forced-color-adjust: auto;
265
272
  }
266
273
 
267
274
  @if $govuk-use-legacy-font {
@@ -14,6 +14,7 @@
14
14
  }
15
15
 
16
16
  .govuk-character-count__message {
17
+ @include govuk-font($size: false, $tabular: true);
17
18
  margin-top: 0;
18
19
  margin-bottom: 0;
19
20
  }
@@ -73,47 +73,49 @@
73
73
  touch-action: manipulation;
74
74
  }
75
75
 
76
- // [ ] Check box
77
- .govuk-checkboxes__label:before {
78
- content: "";
79
- box-sizing: border-box;
80
- position: absolute;
81
- top: 0;
82
- left: 0;
83
- width: $govuk-checkboxes-size;
84
- height: $govuk-checkboxes-size;
85
- border: $govuk-border-width-form-element solid currentColor;
86
- background: transparent;
87
- }
76
+ @include govuk-not-ie8 {
77
+ // [ ] Check box
78
+ .govuk-checkboxes__label:before {
79
+ content: "";
80
+ box-sizing: border-box;
81
+ position: absolute;
82
+ top: 0;
83
+ left: 0;
84
+ width: $govuk-checkboxes-size;
85
+ height: $govuk-checkboxes-size;
86
+ border: $govuk-border-width-form-element solid currentColor;
87
+ background: transparent;
88
+ }
88
89
 
89
- // ✔ Check mark
90
- //
91
- // The check mark is a box with a border on the left and bottom side (└──),
92
- // rotated 45 degrees
93
- .govuk-checkboxes__label:after {
94
- content: "";
95
- box-sizing: border-box;
90
+ // ✔ Check mark
91
+ //
92
+ // The check mark is a box with a border on the left and bottom side (└──),
93
+ // rotated 45 degrees
94
+ .govuk-checkboxes__label:after {
95
+ content: "";
96
+ box-sizing: border-box;
96
97
 
97
- position: absolute;
98
- top: 11px;
99
- left: 9px;
100
- width: 23px;
101
- height: 12px;
98
+ position: absolute;
99
+ top: 11px;
100
+ left: 9px;
101
+ width: 23px;
102
+ height: 12px;
102
103
 
103
- -webkit-transform: rotate(-45deg);
104
+ -webkit-transform: rotate(-45deg);
104
105
 
105
- -ms-transform: rotate(-45deg);
106
+ -ms-transform: rotate(-45deg);
106
107
 
107
- transform: rotate(-45deg);
108
- border: solid;
109
- border-width: 0 0 5px 5px;
110
- // Fix bug in IE11 caused by transform rotate (-45deg).
111
- // See: alphagov/govuk_elements/issues/518
112
- border-top-color: transparent;
108
+ transform: rotate(-45deg);
109
+ border: solid;
110
+ border-width: 0 0 5px 5px;
111
+ // Fix bug in IE11 caused by transform rotate (-45deg).
112
+ // See: alphagov/govuk_elements/issues/518
113
+ border-top-color: transparent;
113
114
 
114
- opacity: 0;
115
+ opacity: 0;
115
116
 
116
- background: transparent;
117
+ background: transparent;
118
+ }
117
119
  }
118
120
 
119
121
  .govuk-checkboxes__hint {
@@ -125,6 +127,20 @@
125
127
  // Focused state
126
128
  .govuk-checkboxes__input:focus + .govuk-checkboxes__label:before {
127
129
  border-width: 4px;
130
+
131
+ // When colours are overridden, the yellow box-shadow becomes invisible
132
+ // which means the focus state is less obvious. By adding a transparent
133
+ // outline, which becomes solid (text-coloured) in that context, we ensure
134
+ // the focus remains clearly visible.
135
+ outline: $govuk-focus-width solid transparent;
136
+ outline-offset: 1px;
137
+
138
+ // When in an explicit forced-color mode, we can use the Highlight system
139
+ // color for the outline to better match focus states of native controls
140
+ @media screen and (forced-colors: active), (-ms-high-contrast: active) {
141
+ outline-color: Highlight;
142
+ }
143
+
128
144
  box-shadow: 0 0 0 $govuk-focus-width $govuk-focus-colour;
129
145
  }
130
146
 
@@ -143,6 +159,19 @@
143
159
  opacity: .5;
144
160
  }
145
161
 
162
+ // =========================================================
163
+ // Dividers ('or')
164
+ // =========================================================
165
+
166
+ .govuk-checkboxes__divider {
167
+ $govuk-divider-size: $govuk-checkboxes-size !default;
168
+ @include govuk-font($size: 19);
169
+ @include govuk-text-colour;
170
+ width: $govuk-divider-size;
171
+ margin-bottom: govuk-spacing(2);
172
+ text-align: center;
173
+ }
174
+
146
175
  // =========================================================
147
176
  // Conditional reveals
148
177
  // =========================================================
@@ -0,0 +1,2 @@
1
+ @import "../../base";
2
+ @import "./index";
@@ -0,0 +1,51 @@
1
+ @include govuk-exports("govuk/component/cookie-banner") {
2
+
3
+ // This needs to be kept in sync with the header component's styles
4
+ $border-bottom-width: govuk-spacing(2);
5
+
6
+ .govuk-cookie-banner {
7
+ @include govuk-font($size: 19);
8
+
9
+ padding-top: govuk-spacing(4);
10
+ // The component does not set bottom spacing.
11
+ // The bottom spacing should be created by the items inside the component.
12
+
13
+ // Visually separate the cookie banner from content underneath
14
+ // when user changes colours in their browser.
15
+ border-bottom: $border-bottom-width solid transparent;
16
+
17
+ background-color: govuk-colour("light-grey", $legacy: "grey-3");
18
+ }
19
+
20
+ // Support older browsers which don't hide elements with the `hidden` attribute
21
+ // when user hides the whole cookie banner with a 'Hide' button.
22
+ .govuk-cookie-banner[hidden] {
23
+ display: none;
24
+ }
25
+
26
+ .govuk-cookie-banner__message {
27
+ // Remove the extra height added by the separator border.
28
+ margin-bottom: -$border-bottom-width;
29
+
30
+ &[hidden] {
31
+ // Support older browsers which don't hide elements with the `hidden` attribute
32
+ // when the visibility of cookie and replacement messages is toggled.
33
+ display: none;
34
+ }
35
+
36
+ &:focus {
37
+ // Remove the native visible focus indicator when the element is programmatically focused.
38
+ //
39
+ // The focused cookie banner is the first element on the page and the last thing the user
40
+ // interacted with prior to it gaining focus.
41
+ // We therefore assume that moving focus to it is not going to surprise users, and that giving
42
+ // it a visible focus indicator could be more confusing than helpful, especially as the
43
+ // element is not normally keyboard operable.
44
+ //
45
+ // We have flagged this in the research section of the guidance as something to monitor.
46
+ //
47
+ // A related discussion: https://github.com/w3c/wcag/issues/1001
48
+ outline: none;
49
+ }
50
+ }
51
+ }