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.
- checksums.yaml +4 -4
- data/Gemfile.lock +2 -2
- data/README.md +61 -40
- data/lib/dxw_govuk_frontend_rails/version.rb +1 -1
- data/package-lock.json +22 -4
- data/package.json +1 -1
- data/vendor/assets/javascripts/govuk_frontend_rails.js +62 -4
- data/vendor/assets/stylesheets/components/_all.scss +1 -0
- data/vendor/assets/stylesheets/components/accordion/_index.scss +7 -16
- data/vendor/assets/stylesheets/components/back-link/_index.scss +4 -15
- data/vendor/assets/stylesheets/components/breadcrumbs/_index.scss +1 -0
- data/vendor/assets/stylesheets/components/button/_index.scss +15 -8
- data/vendor/assets/stylesheets/components/character-count/_index.scss +1 -0
- data/vendor/assets/stylesheets/components/checkboxes/_index.scss +63 -34
- data/vendor/assets/stylesheets/components/cookie-banner/_cookie-banner.scss +2 -0
- data/vendor/assets/stylesheets/components/cookie-banner/_index.scss +51 -0
- data/vendor/assets/stylesheets/components/details/_index.scss +7 -2
- data/vendor/assets/stylesheets/components/file-upload/_index.scss +14 -14
- data/vendor/assets/stylesheets/components/footer/_index.scss +39 -29
- data/vendor/assets/stylesheets/components/header/_index.scss +44 -22
- data/vendor/assets/stylesheets/components/input/_index.scss +4 -0
- data/vendor/assets/stylesheets/components/panel/_index.scss +13 -1
- data/vendor/assets/stylesheets/components/phase-banner/_index.scss +1 -1
- data/vendor/assets/stylesheets/components/radios/_index.scss +14 -0
- data/vendor/assets/stylesheets/components/skip-link/_index.scss +3 -1
- data/vendor/assets/stylesheets/components/table/_index.scss +21 -0
- data/vendor/assets/stylesheets/components/tabs/_index.scss +1 -6
- data/vendor/assets/stylesheets/components/warning-text/_index.scss +10 -1
- data/vendor/assets/stylesheets/core/_links.scss +8 -0
- data/vendor/assets/stylesheets/core/_template.scss +0 -1
- data/vendor/assets/stylesheets/helpers/_colour.scss +2 -2
- data/vendor/assets/stylesheets/helpers/_links.scss +159 -38
- data/vendor/assets/stylesheets/helpers/_spacing.scss +22 -4
- data/vendor/assets/stylesheets/objects/_all.scss +1 -0
- data/vendor/assets/stylesheets/objects/_button-group.scss +101 -0
- data/vendor/assets/stylesheets/objects/_width-container.scss +4 -0
- data/vendor/assets/stylesheets/overrides/_all.scss +1 -0
- data/vendor/assets/stylesheets/overrides/_text-align.scss +20 -0
- data/vendor/assets/stylesheets/settings/_all.scss +2 -0
- data/vendor/assets/stylesheets/settings/_links.scss +62 -0
- metadata +8 -3
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: d053ce75cefe312fcb93c69b7c62419d035a3993727f0db14e73aa8fbea4ca08
|
4
|
+
data.tar.gz: 5595e806ef47f2224ae37a8e1dde758e46f25d92f23690c3068979d07827f051
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 01f18feb6dfb2f8a759a2e90e12226afd872ae1fc52e336ee96eb11fb45c8348c91045747a748d8b371338deae55e05c770ce74b6d39072931f9161bc20fa803
|
7
|
+
data.tar.gz: 11f7f562aa51c6e1d5a9f129ed6df91e965d4daf442210d9e48246ee9dbba5f32601774036f205da0dea30967e617f5e9be262d603d09365504740b52206b358
|
data/Gemfile.lock
CHANGED
data/README.md
CHANGED
@@ -1,91 +1,112 @@
|
|
1
|
-
#
|
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
|
6
|
-
|
7
|
-
|
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
|
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
|
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
|
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
|
26
|
-
standard no longer requires
|
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
|
31
|
-
see the
|
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
|
-
|
37
|
+
## Installation
|
34
38
|
|
35
39
|
Add this line to your application's Gemfile:
|
36
40
|
|
37
|
-
```ruby
|
41
|
+
```ruby
|
42
|
+
gem 'dxw_govuk_frontend_rails'
|
43
|
+
```
|
38
44
|
|
39
45
|
And then execute:
|
40
46
|
|
41
|
-
|
47
|
+
```
|
48
|
+
$ bundle
|
49
|
+
```
|
50
|
+
|
51
|
+
## Usage
|
42
52
|
|
43
|
-
|
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
|
48
|
-
Frontend all you need to do is import the main
|
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
|
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
|
-
|
68
|
+
`app/assets/stylesheets/govuk_frontend_rails.scss`
|
59
69
|
|
60
|
-
-
|
70
|
+
- import the styles into `govuk_frontend_rails.scss`:
|
61
71
|
|
62
|
-
|
63
|
-
|
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
|
-
|
67
|
-
- update your application markup to use the GOVUK Frontend class names
|
87
|
+
`window.onload = function() { window.GOVUKFrontend.initAll() };`
|
68
88
|
|
69
|
-
|
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
|
-
|
91
|
+
## Tracking GOV.UK Frontend versions
|
73
92
|
|
74
|
-
|
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
|
97
|
+
## Updating to a new version of GOV.UK Frontend
|
77
98
|
|
78
|
-
When a new version of the
|
99
|
+
When a new version of the GOV.UK Frontend is released:
|
79
100
|
|
80
|
-
- make a new branch with the
|
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
|
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
|
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
|
112
|
+
- GitHub actions will build the gem and push to RubyGems
|
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":
|
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.
|
9
|
-
"resolved": "https://registry.npmjs.org/govuk-frontend/-/govuk-frontend-3.
|
10
|
-
"integrity": "sha512-
|
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
@@ -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
|
-
//
|
1766
|
-
|
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 (
|
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) {
|
@@ -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:
|
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;
|
@@ -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
|
-
-
|
262
|
-
flex-
|
263
|
-
|
264
|
-
|
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 {
|
@@ -73,47 +73,49 @@
|
|
73
73
|
touch-action: manipulation;
|
74
74
|
}
|
75
75
|
|
76
|
-
|
77
|
-
|
78
|
-
|
79
|
-
|
80
|
-
|
81
|
-
|
82
|
-
|
83
|
-
|
84
|
-
|
85
|
-
|
86
|
-
|
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
|
-
|
90
|
-
|
91
|
-
|
92
|
-
|
93
|
-
|
94
|
-
|
95
|
-
|
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
|
-
|
98
|
-
|
99
|
-
|
100
|
-
|
101
|
-
|
98
|
+
position: absolute;
|
99
|
+
top: 11px;
|
100
|
+
left: 9px;
|
101
|
+
width: 23px;
|
102
|
+
height: 12px;
|
102
103
|
|
103
|
-
|
104
|
+
-webkit-transform: rotate(-45deg);
|
104
105
|
|
105
|
-
|
106
|
+
-ms-transform: rotate(-45deg);
|
106
107
|
|
107
|
-
|
108
|
-
|
109
|
-
|
110
|
-
|
111
|
-
|
112
|
-
|
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
|
-
|
115
|
+
opacity: 0;
|
115
116
|
|
116
|
-
|
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,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
|
+
}
|