dxw_govuk_frontend_rails 3.12.0 → 3.13.1
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/Gemfile.lock +1 -1
- data/lib/dxw_govuk_frontend_rails/version.rb +1 -1
- data/package-lock.json +7 -7
- data/package.json +1 -1
- data/vendor/assets/javascripts/govuk_frontend_rails.js +61 -3
- data/vendor/assets/stylesheets/components/breadcrumbs/_index.scss +1 -0
- data/vendor/assets/stylesheets/components/button/_index.scss +13 -8
- data/vendor/assets/stylesheets/components/checkboxes/_index.scss +63 -34
- data/vendor/assets/stylesheets/components/details/_index.scss +2 -1
- data/vendor/assets/stylesheets/components/file-upload/_index.scss +1 -0
- data/vendor/assets/stylesheets/components/footer/_index.scss +25 -10
- data/vendor/assets/stylesheets/components/header/_index.scss +11 -7
- data/vendor/assets/stylesheets/components/input/_index.scss +4 -0
- data/vendor/assets/stylesheets/components/radios/_index.scss +14 -0
- data/vendor/assets/stylesheets/components/skip-link/_index.scss +2 -0
- data/vendor/assets/stylesheets/components/warning-text/_index.scss +0 -1
- 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 +6 -0
- data/vendor/assets/stylesheets/objects/_button-group.scss +9 -2
- data/vendor/assets/stylesheets/objects/_width-container.scss +4 -0
- metadata +1 -1
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: d13df6b5f41f50ed1be07dbd4e157072e6cdc64537df5d5fb2f807ca846a59bc
|
4
|
+
data.tar.gz: 79da91fc77c60ed37047d26a770491aa83a717a619ae2e0e45373c5fe3472061
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 555d823ff0083d5603ba327eaf385579658a75c2596ce0d734cf649483d210661e5fe4dca8677e0cc220fb578e0761c75c95ff5f7c002c61c59e3a6466c17cc8
|
7
|
+
data.tar.gz: 85551726cc81c6721b9588796611e5bca8b573c32a88df7adcff020cbdb7279567a86e403fe4a5a6ab346971358cb7749ec23e14bb5f32b45e213bbec90e7061
|
data/Gemfile.lock
CHANGED
data/package-lock.json
CHANGED
@@ -9,13 +9,13 @@
|
|
9
9
|
"version": "1.0.0",
|
10
10
|
"license": "ISC",
|
11
11
|
"dependencies": {
|
12
|
-
"govuk-frontend": "3.
|
12
|
+
"govuk-frontend": "3.13.1"
|
13
13
|
}
|
14
14
|
},
|
15
15
|
"node_modules/govuk-frontend": {
|
16
|
-
"version": "3.
|
17
|
-
"resolved": "https://registry.npmjs.org/govuk-frontend/-/govuk-frontend-3.
|
18
|
-
"integrity": "sha512
|
16
|
+
"version": "3.13.1",
|
17
|
+
"resolved": "https://registry.npmjs.org/govuk-frontend/-/govuk-frontend-3.13.1.tgz",
|
18
|
+
"integrity": "sha512-OlbAVVpJfZ8tEhkScVoNFA+27RUfMDslN4uxtJyASfXwg4QZYHTX8RqmKBbgVJWaybpa5RsYDuRKQNJe3qN8gw==",
|
19
19
|
"engines": {
|
20
20
|
"node": ">= 4.2.0"
|
21
21
|
}
|
@@ -23,9 +23,9 @@
|
|
23
23
|
},
|
24
24
|
"dependencies": {
|
25
25
|
"govuk-frontend": {
|
26
|
-
"version": "3.
|
27
|
-
"resolved": "https://registry.npmjs.org/govuk-frontend/-/govuk-frontend-3.
|
28
|
-
"integrity": "sha512
|
26
|
+
"version": "3.13.1",
|
27
|
+
"resolved": "https://registry.npmjs.org/govuk-frontend/-/govuk-frontend-3.13.1.tgz",
|
28
|
+
"integrity": "sha512-OlbAVVpJfZ8tEhkScVoNFA+27RUfMDslN4uxtJyASfXwg4QZYHTX8RqmKBbgVJWaybpa5RsYDuRKQNJe3qN8gw=="
|
29
29
|
}
|
30
30
|
}
|
31
31
|
}
|
data/package.json
CHANGED
@@ -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) {
|
@@ -158,10 +158,6 @@
|
|
158
158
|
cursor: default;
|
159
159
|
}
|
160
160
|
|
161
|
-
&:focus {
|
162
|
-
outline: none;
|
163
|
-
}
|
164
|
-
|
165
161
|
&:active {
|
166
162
|
top: 0;
|
167
163
|
box-shadow: 0 $button-shadow-size 0 $govuk-button-shadow-colour; // s0
|
@@ -241,6 +237,8 @@
|
|
241
237
|
|
242
238
|
display: -webkit-inline-box;
|
243
239
|
|
240
|
+
display: -webkit-inline-flex;
|
241
|
+
|
244
242
|
display: -ms-inline-flexbox;
|
245
243
|
|
246
244
|
display: inline-flex;
|
@@ -248,6 +246,8 @@
|
|
248
246
|
|
249
247
|
-webkit-box-pack: center;
|
250
248
|
|
249
|
+
-webkit-justify-content: center;
|
250
|
+
|
251
251
|
-ms-flex-pack: center;
|
252
252
|
|
253
253
|
justify-content: center;
|
@@ -260,10 +260,15 @@
|
|
260
260
|
margin-left: govuk-spacing(2);
|
261
261
|
}
|
262
262
|
vertical-align: middle;
|
263
|
-
-
|
264
|
-
flex-
|
265
|
-
|
266
|
-
|
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;
|
267
272
|
}
|
268
273
|
|
269
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
|
// =========================================================
|
@@ -68,16 +68,20 @@
|
|
68
68
|
|
69
69
|
.govuk-footer__meta {
|
70
70
|
display: -webkit-box;
|
71
|
+
display: -webkit-flex;
|
71
72
|
display: -ms-flexbox;
|
72
73
|
display: flex; // Support: Flexbox
|
73
74
|
margin-right: -$govuk-gutter-half;
|
74
75
|
margin-left: -$govuk-gutter-half;
|
75
|
-
-
|
76
|
-
flex-wrap: wrap;
|
76
|
+
-webkit-flex-wrap: wrap;
|
77
|
+
-ms-flex-wrap: wrap;
|
78
|
+
flex-wrap: wrap; // Support: Flexbox
|
77
79
|
-webkit-box-align: end;
|
80
|
+
-webkit-align-items: flex-end;
|
78
81
|
-ms-flex-align: end;
|
79
82
|
align-items: flex-end; // Support: Flexbox
|
80
83
|
-webkit-box-pack: center;
|
84
|
+
-webkit-justify-content: center;
|
81
85
|
-ms-flex-pack: center;
|
82
86
|
justify-content: center; // Support: Flexbox
|
83
87
|
}
|
@@ -90,11 +94,13 @@
|
|
90
94
|
|
91
95
|
.govuk-footer__meta-item--grow {
|
92
96
|
-webkit-box-flex: 1;
|
97
|
+
-webkit-flex: 1;
|
93
98
|
-ms-flex: 1;
|
94
99
|
flex: 1; // Support: Flexbox
|
95
100
|
@include govuk-media-query ($until: tablet) {
|
96
|
-
-
|
97
|
-
flex-
|
101
|
+
-webkit-flex-basis: 320px;
|
102
|
+
-ms-flex-preferred-size: 320px;
|
103
|
+
flex-basis: 320px; // Support: Flexbox
|
98
104
|
}
|
99
105
|
}
|
100
106
|
|
@@ -105,6 +111,9 @@
|
|
105
111
|
margin-bottom: govuk-spacing(3);
|
106
112
|
}
|
107
113
|
vertical-align: top;
|
114
|
+
// Work around SVGs not inheriting color from parent in forced color mode
|
115
|
+
// (https://github.com/w3c/csswg-drafts/issues/6310)
|
116
|
+
forced-color-adjust: auto;
|
108
117
|
}
|
109
118
|
|
110
119
|
.govuk-footer__licence-description {
|
@@ -153,12 +162,14 @@
|
|
153
162
|
|
154
163
|
.govuk-footer__navigation {
|
155
164
|
display: -webkit-box;
|
165
|
+
display: -webkit-flex;
|
156
166
|
display: -ms-flexbox;
|
157
167
|
display: flex; // Support: Flexbox
|
158
168
|
margin-right: -$govuk-gutter-half;
|
159
169
|
margin-left: -$govuk-gutter-half;
|
160
|
-
-
|
161
|
-
flex-wrap: wrap;
|
170
|
+
-webkit-flex-wrap: wrap;
|
171
|
+
-ms-flex-wrap: wrap;
|
172
|
+
flex-wrap: wrap; // Support: Flexbox
|
162
173
|
}
|
163
174
|
|
164
175
|
.govuk-footer__section {
|
@@ -169,15 +180,18 @@
|
|
169
180
|
vertical-align: top;
|
170
181
|
// Ensure columns take up equal width (typically one-half:one-half)
|
171
182
|
-webkit-box-flex: 1;
|
183
|
+
-webkit-flex-grow: 1;
|
172
184
|
-ms-flex-positive: 1;
|
173
185
|
flex-grow: 1; // Support: Flexbox
|
174
|
-
-
|
175
|
-
flex-
|
186
|
+
-webkit-flex-shrink: 1;
|
187
|
+
-ms-flex-negative: 1;
|
188
|
+
flex-shrink: 1; // Support: Flexbox
|
176
189
|
@include govuk-media-query ($until: desktop) {
|
177
190
|
// Make sure columns do not drop below 200px in width
|
178
191
|
// Will typically result in wrapping, and end up in a single column on smaller screens.
|
179
|
-
-
|
180
|
-
flex-
|
192
|
+
-webkit-flex-basis: 200px;
|
193
|
+
-ms-flex-preferred-size: 200px;
|
194
|
+
flex-basis: 200px; // Support: Flexbox
|
181
195
|
}
|
182
196
|
}
|
183
197
|
|
@@ -187,6 +201,7 @@
|
|
187
201
|
// To ensure the section is one of two, we can count backwards using `:nth-last-child(2)`.
|
188
202
|
.govuk-footer__section:first-child:nth-last-child(2) {
|
189
203
|
-webkit-box-flex: 2;
|
204
|
+
-webkit-flex-grow: 2;
|
190
205
|
-ms-flex-positive: 2;
|
191
206
|
flex-grow: 2; // Support: Flexbox
|
192
207
|
}
|
@@ -36,15 +36,19 @@
|
|
36
36
|
.govuk-header__logotype {
|
37
37
|
display: inline-block;
|
38
38
|
|
39
|
-
// Add a gap
|
39
|
+
// Add a gap after the logo in case it's followed by a product name. This
|
40
|
+
// gets removed later if the logotype is a :last-child.
|
40
41
|
margin-right: govuk-spacing(1);
|
41
42
|
|
42
|
-
// Prevent readability backplate from obscuring underline in Windows
|
43
|
-
//
|
44
|
-
forced-
|
43
|
+
// Prevent readability backplate from obscuring underline in Windows High
|
44
|
+
// Contrast Mode
|
45
|
+
@media (forced-colors: active) {
|
46
|
+
forced-color-adjust: none;
|
47
|
+
color: linktext;
|
48
|
+
}
|
45
49
|
|
46
|
-
//
|
47
|
-
// states neat
|
50
|
+
// Remove the gap after the logo if there's no product name to keep hover
|
51
|
+
// and focus states neat
|
48
52
|
&:last-child {
|
49
53
|
margin-right: 0;
|
50
54
|
}
|
@@ -62,7 +66,7 @@
|
|
62
66
|
width: 36px;
|
63
67
|
height: 32px;
|
64
68
|
border: 0;
|
65
|
-
vertical-align:
|
69
|
+
vertical-align: bottom;
|
66
70
|
}
|
67
71
|
|
68
72
|
.govuk-header__product-name {
|
@@ -95,11 +95,13 @@
|
|
95
95
|
|
96
96
|
.govuk-input__wrapper {
|
97
97
|
display: -webkit-box;
|
98
|
+
display: -webkit-flex;
|
98
99
|
display: -ms-flexbox;
|
99
100
|
display: flex;
|
100
101
|
|
101
102
|
.govuk-input {
|
102
103
|
-webkit-box-flex: 0;
|
104
|
+
-webkit-flex: 0 1 auto;
|
103
105
|
-ms-flex: 0 1 auto;
|
104
106
|
flex: 0 1 auto;
|
105
107
|
}
|
@@ -150,6 +152,8 @@
|
|
150
152
|
|
151
153
|
-webkit-box-flex: 0;
|
152
154
|
|
155
|
+
-webkit-flex: 0 0 auto;
|
156
|
+
|
153
157
|
-ms-flex: 0 0 auto;
|
154
158
|
|
155
159
|
flex: 0 0 auto;
|
@@ -121,6 +121,20 @@
|
|
121
121
|
// Focused state
|
122
122
|
.govuk-radios__input:focus + .govuk-radios__label:before {
|
123
123
|
border-width: 4px;
|
124
|
+
|
125
|
+
// When colours are overridden, the yellow box-shadow becomes invisible
|
126
|
+
// which means the focus state is less obvious. By adding a transparent
|
127
|
+
// outline, which becomes solid (text-coloured) in that context, we ensure
|
128
|
+
// the focus remains clearly visible.
|
129
|
+
outline: $govuk-focus-width solid transparent;
|
130
|
+
outline-offset: 1px;
|
131
|
+
|
132
|
+
// When in an explicit forced-color mode, we can use the Highlight system
|
133
|
+
// color for the outline to better match focus states of native controls
|
134
|
+
@media screen and (forced-colors: active), (-ms-high-contrast: active) {
|
135
|
+
outline-color: Highlight;
|
136
|
+
}
|
137
|
+
|
124
138
|
box-shadow: 0 0 0 $govuk-radios-focus-width $govuk-focus-colour;
|
125
139
|
}
|
126
140
|
|
@@ -11,7 +11,9 @@
|
|
11
11
|
|
12
12
|
// Respect 'display cutout' safe area (avoids notches and rounded corners)
|
13
13
|
@supports (padding: unquote("max(calc(0px))")) {
|
14
|
+
$padding-safe-area-right: -webkit-calc(#{govuk-spacing(3)} + env(safe-area-inset-right));
|
14
15
|
$padding-safe-area-right: calc(#{govuk-spacing(3)} + env(safe-area-inset-right));
|
16
|
+
$padding-safe-area-left: -webkit-calc(#{govuk-spacing(3)} + env(safe-area-inset-left));
|
15
17
|
$padding-safe-area-left: calc(#{govuk-spacing(3)} + env(safe-area-inset-left));
|
16
18
|
|
17
19
|
// Use max() to pick largest padding, default or with safe area
|
@@ -15,7 +15,6 @@
|
|
15
15
|
// Prevent automatic text sizing, as we already cater for small devices and
|
16
16
|
// would like the browser to stay on 100% text zoom by default.
|
17
17
|
-webkit-text-size-adjust: 100%;
|
18
|
-
-moz-text-size-adjust: 100%;
|
19
18
|
-ms-text-size-adjust: 100%;
|
20
19
|
text-size-adjust: 100%;
|
21
20
|
|
@@ -75,7 +75,7 @@
|
|
75
75
|
/// Make a colour darker by mixing it with black
|
76
76
|
///
|
77
77
|
/// @param {Colour} $colour - colour to shade
|
78
|
-
/// @param {Number} $percentage - percentage of `$colour` in returned
|
78
|
+
/// @param {Number} $percentage - percentage of `$colour` in returned colour
|
79
79
|
/// @return {Colour}
|
80
80
|
/// @access public
|
81
81
|
|
@@ -86,7 +86,7 @@
|
|
86
86
|
/// Make a colour lighter by mixing it with white
|
87
87
|
///
|
88
88
|
/// @param {Colour} $colour - colour to tint
|
89
|
-
/// @param {Number} $percentage - percentage of `$colour` in returned
|
89
|
+
/// @param {Number} $percentage - percentage of `$colour` in returned colour
|
90
90
|
/// @return {Colour}
|
91
91
|
/// @access public
|
92
92
|
|
@@ -52,6 +52,12 @@
|
|
52
52
|
@mixin govuk-link-hover-decoration {
|
53
53
|
@if ($govuk-new-link-styles and $govuk-link-hover-underline-thickness) {
|
54
54
|
text-decoration-thickness: $govuk-link-hover-underline-thickness;
|
55
|
+
// Disable ink skipping on underlines on hover. Browsers haven't
|
56
|
+
// standardised on this part of the spec yet, so set both properties
|
57
|
+
-webkit-text-decoration-skip-ink: none;
|
58
|
+
text-decoration-skip-ink: none; // Chromium, Firefox
|
59
|
+
-webkit-text-decoration-skip: none;
|
60
|
+
text-decoration-skip: none; // Safari
|
55
61
|
}
|
56
62
|
}
|
57
63
|
|
@@ -30,13 +30,16 @@
|
|
30
30
|
// doesn't play nicely with it
|
31
31
|
// (https://github.com/w3c/csswg-drafts/issues/3559)
|
32
32
|
display: -webkit-box;
|
33
|
+
display: -webkit-flex;
|
33
34
|
display: -ms-flexbox;
|
34
35
|
display: flex;
|
35
36
|
-webkit-box-orient: vertical;
|
36
37
|
-webkit-box-direction: normal;
|
38
|
+
-webkit-flex-direction: column;
|
37
39
|
-ms-flex-direction: column;
|
38
40
|
flex-direction: column;
|
39
41
|
-webkit-box-align: center;
|
42
|
+
-webkit-align-items: center;
|
40
43
|
-ms-flex-align: center;
|
41
44
|
align-items: center;
|
42
45
|
|
@@ -72,12 +75,16 @@
|
|
72
75
|
|
73
76
|
-webkit-box-direction: normal;
|
74
77
|
|
78
|
+
-webkit-flex-direction: row;
|
79
|
+
|
75
80
|
-ms-flex-direction: row;
|
76
81
|
|
77
82
|
flex-direction: row;
|
78
|
-
-
|
79
|
-
flex-wrap: wrap;
|
83
|
+
-webkit-flex-wrap: wrap;
|
84
|
+
-ms-flex-wrap: wrap;
|
85
|
+
flex-wrap: wrap;
|
80
86
|
-webkit-box-align: baseline;
|
87
|
+
-webkit-align-items: baseline;
|
81
88
|
-ms-flex-align: baseline;
|
82
89
|
align-items: baseline;
|
83
90
|
|
@@ -28,7 +28,9 @@
|
|
28
28
|
|
29
29
|
// Respect 'display cutout' safe area (avoids notches and rounded corners)
|
30
30
|
@supports (margin: unquote("max(calc(0px))")) {
|
31
|
+
$gutter-safe-area-right: -webkit-calc(#{$govuk-gutter-half} + env(safe-area-inset-right));
|
31
32
|
$gutter-safe-area-right: calc(#{$govuk-gutter-half} + env(safe-area-inset-right));
|
33
|
+
$gutter-safe-area-left: -webkit-calc(#{$govuk-gutter-half} + env(safe-area-inset-left));
|
32
34
|
$gutter-safe-area-left: calc(#{$govuk-gutter-half} + env(safe-area-inset-left));
|
33
35
|
|
34
36
|
// Use max() to pick largest margin, default or with safe area
|
@@ -44,7 +46,9 @@
|
|
44
46
|
|
45
47
|
// Respect 'display cutout' safe area (avoids notches and rounded corners)
|
46
48
|
@supports (margin: unquote("max(calc(0px))")) {
|
49
|
+
$gutter-safe-area-right: -webkit-calc(#{$govuk-gutter-half} + env(safe-area-inset-right));
|
47
50
|
$gutter-safe-area-right: calc(#{$govuk-gutter-half} + env(safe-area-inset-right));
|
51
|
+
$gutter-safe-area-left: -webkit-calc(#{$govuk-gutter-half} + env(safe-area-inset-left));
|
48
52
|
$gutter-safe-area-left: calc(#{$govuk-gutter-half} + env(safe-area-inset-left));
|
49
53
|
|
50
54
|
// Use max() to pick largest margin, default or with safe area
|