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