dxw_govuk_frontend_rails 3.1.0 → 3.5.0
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/.github/workflows/gempush.yml +5 -5
- data/.github/workflows/test.yml +19 -0
- data/Gemfile.lock +3 -3
- data/dxw_govuk_frontend_rails.gemspec +1 -1
- data/lib/dxw_govuk_frontend_rails.rb +12 -1
- data/lib/dxw_govuk_frontend_rails/version.rb +1 -1
- data/package-lock.json +3 -3
- data/package.json +2 -2
- data/vendor/assets/javascripts/govuk_frontend_rails.js +54 -44
- data/vendor/assets/stylesheets/components/back-link/_back-link.scss +14 -11
- data/vendor/assets/stylesheets/components/button/_button.scss +15 -10
- data/vendor/assets/stylesheets/components/fieldset/_fieldset.scss +0 -2
- data/vendor/assets/stylesheets/components/footer/_footer.scss +16 -41
- data/vendor/assets/stylesheets/components/header/_header.scss +8 -7
- data/vendor/assets/stylesheets/components/input/_input.scss +3 -0
- data/vendor/assets/stylesheets/components/radios/_radios.scss +1 -1
- data/vendor/assets/stylesheets/components/select/_select.scss +3 -0
- data/vendor/assets/stylesheets/components/skip-link/_skip-link.scss +6 -0
- data/vendor/assets/stylesheets/components/warning-text/_warning-text.scss +10 -9
- data/vendor/assets/stylesheets/helpers/_font-faces.scss +20 -18
- data/vendor/assets/stylesheets/objects/_width-container.scss +33 -10
- data/vendor/assets/stylesheets/overrides/_display.scss +4 -0
- data/vendor/assets/stylesheets/settings/_colours-palette.scss +1 -1
- metadata +6 -5
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: ae09a9588462372293e8a6feaa9815bd7317909f8fe984fedfc1fa4eb39d112c
|
4
|
+
data.tar.gz: de694312ec22a3117847497310c0d21f078172fe49ef1ff65442f41b87ed8e48
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 4663f2f1786ab540e0d329a96265946b66f45cad0fc220623db398975cebecd7cfc9c1a092d320a53c2c8fe2cc6e7969a1820e64826bda545d50eecc34c89458
|
7
|
+
data.tar.gz: d3024c1c0d1615e8c8f5f18d18eabeec53eec3b2ee0fc877bcde5403609f0b733a8dee3d067beeb9ee62638688b52116bc480d645d492b443eb9b17cf37b6a52
|
@@ -1,23 +1,23 @@
|
|
1
|
-
name: Ruby
|
1
|
+
name: Ruby Gems
|
2
2
|
|
3
3
|
on:
|
4
4
|
push:
|
5
5
|
tags:
|
6
|
-
-
|
6
|
+
- "*"
|
7
7
|
|
8
8
|
jobs:
|
9
9
|
build:
|
10
|
-
name:
|
10
|
+
name: Publish to Rubygems
|
11
11
|
runs-on: ubuntu-latest
|
12
12
|
|
13
13
|
steps:
|
14
14
|
- uses: actions/checkout@master
|
15
15
|
- name: Set up Ruby 2.6
|
16
|
-
uses: actions/setup-ruby@
|
16
|
+
uses: actions/setup-ruby@master
|
17
17
|
with:
|
18
18
|
version: 2.6.x
|
19
19
|
|
20
|
-
- name:
|
20
|
+
- name: Check sass compiles
|
21
21
|
run: |
|
22
22
|
npx node-sass ./vendor/assets/stylesheets/govuk-frontend-rails.scss /tmp/govuk-frontend-rails.css
|
23
23
|
|
@@ -0,0 +1,19 @@
|
|
1
|
+
name: CI
|
2
|
+
|
3
|
+
on: [push]
|
4
|
+
|
5
|
+
jobs:
|
6
|
+
build:
|
7
|
+
name: Test that the sass compiles
|
8
|
+
runs-on: ubuntu-latest
|
9
|
+
|
10
|
+
steps:
|
11
|
+
- uses: actions/checkout@master
|
12
|
+
- uses: actions/setup-node@master
|
13
|
+
with:
|
14
|
+
node-version: '10.x'
|
15
|
+
- run: npm test
|
16
|
+
env:
|
17
|
+
CI: true
|
18
|
+
|
19
|
+
|
data/Gemfile.lock
CHANGED
@@ -1,12 +1,12 @@
|
|
1
1
|
PATH
|
2
2
|
remote: .
|
3
3
|
specs:
|
4
|
-
dxw_govuk_frontend_rails (3.
|
4
|
+
dxw_govuk_frontend_rails (3.5.0)
|
5
5
|
|
6
6
|
GEM
|
7
7
|
remote: https://rubygems.org/
|
8
8
|
specs:
|
9
|
-
rake (
|
9
|
+
rake (13.0.1)
|
10
10
|
|
11
11
|
PLATFORMS
|
12
12
|
ruby
|
@@ -14,7 +14,7 @@ PLATFORMS
|
|
14
14
|
DEPENDENCIES
|
15
15
|
bundler (~> 2.0)
|
16
16
|
dxw_govuk_frontend_rails!
|
17
|
-
rake (~>
|
17
|
+
rake (~> 13.0)
|
18
18
|
|
19
19
|
BUNDLED WITH
|
20
20
|
2.0.2
|
@@ -5,7 +5,18 @@ module DxwGovukFrontendRails
|
|
5
5
|
class Engine < ::Rails::Engine
|
6
6
|
initializer 'GovukFrontendRails.assets.precompile' do |app|
|
7
7
|
app.config.assets.precompile <<
|
8
|
-
|
8
|
+
[
|
9
|
+
"favicon.ico",
|
10
|
+
"govuk-apple-touch-icon-152x152.png",
|
11
|
+
"govuk-apple-touch-icon-167x167.png",
|
12
|
+
"govuk-apple-touch-icon-180x180.png",
|
13
|
+
"govuk-apple-touch-icon.png",
|
14
|
+
"govuk-crest-2x.png",
|
15
|
+
"govuk-crest.png",
|
16
|
+
"govuk-logotype-crown.png",
|
17
|
+
"govuk-mask-icon.svg",
|
18
|
+
"govuk-opengraph-image.png",
|
19
|
+
]
|
9
20
|
end
|
10
21
|
end
|
11
22
|
end
|
data/package-lock.json
CHANGED
@@ -5,9 +5,9 @@
|
|
5
5
|
"requires": true,
|
6
6
|
"dependencies": {
|
7
7
|
"govuk-frontend": {
|
8
|
-
"version": "3.
|
9
|
-
"resolved": "https://registry.npmjs.org/govuk-frontend/-/govuk-frontend-3.
|
10
|
-
"integrity": "sha512-
|
8
|
+
"version": "3.5.0",
|
9
|
+
"resolved": "https://registry.npmjs.org/govuk-frontend/-/govuk-frontend-3.5.0.tgz",
|
10
|
+
"integrity": "sha512-4tNKgcChO1bMNsrTz2UsK4fDMmU9R87UDxy/KhKIMbnhsuJLVuArDveYLkZuUsZ6B3eaCbl5gmI8i/Q/Mi680A=="
|
11
11
|
}
|
12
12
|
}
|
13
13
|
}
|
data/package.json
CHANGED
@@ -7,7 +7,7 @@
|
|
7
7
|
"lib": "lib"
|
8
8
|
},
|
9
9
|
"scripts": {
|
10
|
-
"test": "
|
10
|
+
"test": "npx node-sass ./vendor/assets/stylesheets/govuk-frontend-rails.scss /tmp/govuk-frontend-rails.css"
|
11
11
|
},
|
12
12
|
"repository": {
|
13
13
|
"type": "git",
|
@@ -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.
|
24
|
+
"govuk-frontend": "3.5.0"
|
25
25
|
}
|
26
26
|
}
|
@@ -1497,6 +1497,9 @@ Details.prototype.polyfillHandleInputs = function (node, callback) {
|
|
1497
1497
|
function CharacterCount ($module) {
|
1498
1498
|
this.$module = $module;
|
1499
1499
|
this.$textarea = $module.querySelector('.govuk-js-character-count');
|
1500
|
+
if (this.$textarea) {
|
1501
|
+
this.$countMessage = $module.querySelector('[id=' + this.$textarea.id + '-info]');
|
1502
|
+
}
|
1500
1503
|
}
|
1501
1504
|
|
1502
1505
|
CharacterCount.prototype.defaults = {
|
@@ -1509,10 +1512,16 @@ CharacterCount.prototype.init = function () {
|
|
1509
1512
|
// Check for module
|
1510
1513
|
var $module = this.$module;
|
1511
1514
|
var $textarea = this.$textarea;
|
1512
|
-
|
1515
|
+
var $countMessage = this.$countMessage;
|
1516
|
+
|
1517
|
+
if (!$textarea || !$countMessage) {
|
1513
1518
|
return
|
1514
1519
|
}
|
1515
1520
|
|
1521
|
+
// We move count message right after the field
|
1522
|
+
// Kept for backwards compatibility
|
1523
|
+
$textarea.insertAdjacentElement('afterend', $countMessage);
|
1524
|
+
|
1516
1525
|
// Read options set using dataset ('data-' values)
|
1517
1526
|
this.options = this.getDataset($module);
|
1518
1527
|
|
@@ -1530,23 +1539,16 @@ CharacterCount.prototype.init = function () {
|
|
1530
1539
|
return
|
1531
1540
|
}
|
1532
1541
|
|
1533
|
-
//
|
1534
|
-
|
1535
|
-
this.countMessage = boundCreateCountMessage();
|
1542
|
+
// Remove hard limit if set
|
1543
|
+
$module.removeAttribute('maxlength');
|
1536
1544
|
|
1537
|
-
//
|
1538
|
-
|
1539
|
-
|
1540
|
-
$module.removeAttribute('maxlength');
|
1545
|
+
// Bind event changes to the textarea
|
1546
|
+
var boundChangeEvents = this.bindChangeEvents.bind(this);
|
1547
|
+
boundChangeEvents();
|
1541
1548
|
|
1542
|
-
|
1543
|
-
|
1544
|
-
|
1545
|
-
|
1546
|
-
// Update count message
|
1547
|
-
var boundUpdateCountMessage = this.updateCountMessage.bind(this);
|
1548
|
-
boundUpdateCountMessage();
|
1549
|
-
}
|
1549
|
+
// Update count message
|
1550
|
+
var boundUpdateCountMessage = this.updateCountMessage.bind(this);
|
1551
|
+
boundUpdateCountMessage();
|
1550
1552
|
};
|
1551
1553
|
|
1552
1554
|
// Read data attributes
|
@@ -1577,27 +1579,6 @@ CharacterCount.prototype.count = function (text) {
|
|
1577
1579
|
return length
|
1578
1580
|
};
|
1579
1581
|
|
1580
|
-
// Generate count message and bind it to the input
|
1581
|
-
// returns reference to the generated element
|
1582
|
-
CharacterCount.prototype.createCountMessage = function () {
|
1583
|
-
var countElement = this.$textarea;
|
1584
|
-
var elementId = countElement.id;
|
1585
|
-
// Check for existing info count message
|
1586
|
-
var countMessage = document.getElementById(elementId + '-info');
|
1587
|
-
// If there is no existing info count message we add one right after the field
|
1588
|
-
if (elementId && !countMessage) {
|
1589
|
-
countElement.insertAdjacentHTML('afterend', '<span id="' + elementId + '-info" class="govuk-hint govuk-character-count__message" aria-live="polite"></span>');
|
1590
|
-
this.describedBy = countElement.getAttribute('aria-describedby');
|
1591
|
-
this.describedByInfo = this.describedBy + ' ' + elementId + '-info';
|
1592
|
-
countElement.setAttribute('aria-describedby', this.describedByInfo);
|
1593
|
-
countMessage = document.getElementById(elementId + '-info');
|
1594
|
-
} else {
|
1595
|
-
// If there is an existing info count message we move it right after the field
|
1596
|
-
countElement.insertAdjacentElement('afterend', countMessage);
|
1597
|
-
}
|
1598
|
-
return countMessage
|
1599
|
-
};
|
1600
|
-
|
1601
1582
|
// Bind input propertychange to the elements and update based on the change
|
1602
1583
|
CharacterCount.prototype.bindChangeEvents = function () {
|
1603
1584
|
var $textarea = this.$textarea;
|
@@ -1624,7 +1605,7 @@ CharacterCount.prototype.checkIfValueChanged = function () {
|
|
1624
1605
|
CharacterCount.prototype.updateCountMessage = function () {
|
1625
1606
|
var countElement = this.$textarea;
|
1626
1607
|
var options = this.options;
|
1627
|
-
var countMessage = this
|
1608
|
+
var countMessage = this.$countMessage;
|
1628
1609
|
|
1629
1610
|
// Determine the remaining number of characters/words
|
1630
1611
|
var currentLength = this.count(countElement.value);
|
@@ -1873,7 +1854,9 @@ ErrorSummary.prototype.getFragmentFromUrl = function (url) {
|
|
1873
1854
|
*
|
1874
1855
|
* Returns the first element that exists from this list:
|
1875
1856
|
*
|
1876
|
-
* - The `<legend>` associated with the closest `<fieldset>` ancestor
|
1857
|
+
* - The `<legend>` associated with the closest `<fieldset>` ancestor, as long
|
1858
|
+
* as the top of it is no more than half a viewport height away from the
|
1859
|
+
* bottom of the input
|
1877
1860
|
* - The first `<label>` that is associated with the input using for="inputId"
|
1878
1861
|
* - The closest parent `<label>`
|
1879
1862
|
*
|
@@ -1888,7 +1871,32 @@ ErrorSummary.prototype.getAssociatedLegendOrLabel = function ($input) {
|
|
1888
1871
|
var legends = $fieldset.getElementsByTagName('legend');
|
1889
1872
|
|
1890
1873
|
if (legends.length) {
|
1891
|
-
|
1874
|
+
var $candidateLegend = legends[0];
|
1875
|
+
|
1876
|
+
// If the input type is radio or checkbox, always use the legend if there
|
1877
|
+
// is one.
|
1878
|
+
if ($input.type === 'checkbox' || $input.type === 'radio') {
|
1879
|
+
return $candidateLegend
|
1880
|
+
}
|
1881
|
+
|
1882
|
+
// For other input types, only scroll to the fieldset’s legend (instead of
|
1883
|
+
// the label associated with the input) if the input would end up in the
|
1884
|
+
// top half of the screen.
|
1885
|
+
//
|
1886
|
+
// This should avoid situations where the input either ends up off the
|
1887
|
+
// screen, or obscured by a software keyboard.
|
1888
|
+
var legendTop = $candidateLegend.getBoundingClientRect().top;
|
1889
|
+
var inputRect = $input.getBoundingClientRect();
|
1890
|
+
|
1891
|
+
// If the browser doesn't support Element.getBoundingClientRect().height
|
1892
|
+
// or window.innerHeight (like IE8), bail and just link to the label.
|
1893
|
+
if (inputRect.height && window.innerHeight) {
|
1894
|
+
var inputBottom = inputRect.top + inputRect.height;
|
1895
|
+
|
1896
|
+
if (inputBottom - legendTop < window.innerHeight / 2) {
|
1897
|
+
return $candidateLegend
|
1898
|
+
}
|
1899
|
+
}
|
1892
1900
|
}
|
1893
1901
|
}
|
1894
1902
|
|
@@ -2028,12 +2036,13 @@ Radios.prototype.handleClick = function (event) {
|
|
2028
2036
|
|
2029
2037
|
(function (global) {
|
2030
2038
|
|
2031
|
-
//
|
2039
|
+
// There is no polyfill in polyfill-library (https://github.com/Financial-Times/polyfill-library/issues/338)
|
2040
|
+
// So we source this from https://github.com/Alhadis/Snippets/blob/e09b4dfb7ffc9e250bc28319051e39ead3e5f70a/js/polyfills/IE8-child-elements.js#L28-L33
|
2032
2041
|
Object.defineProperty(Element.prototype, "nextElementSibling", {
|
2033
2042
|
get: function(){
|
2034
2043
|
var el = this.nextSibling;
|
2035
2044
|
while (el && el.nodeType !== 1) { el = el.nextSibling; }
|
2036
|
-
return
|
2045
|
+
return el;
|
2037
2046
|
}
|
2038
2047
|
});
|
2039
2048
|
|
@@ -2051,12 +2060,13 @@ Radios.prototype.handleClick = function (event) {
|
|
2051
2060
|
if (detect) return
|
2052
2061
|
|
2053
2062
|
(function (global) {
|
2054
|
-
//
|
2063
|
+
// There is no polyfill in polyfill-library (https://github.com/Financial-Times/polyfill-library/issues/338)
|
2064
|
+
// So we source this from https://github.com/Alhadis/Snippets/blob/e09b4dfb7ffc9e250bc28319051e39ead3e5f70a/js/polyfills/IE8-child-elements.js#L35-L40
|
2055
2065
|
Object.defineProperty(Element.prototype, 'previousElementSibling', {
|
2056
2066
|
get: function(){
|
2057
2067
|
var el = this.previousSibling;
|
2058
2068
|
while (el && el.nodeType !== 1) { el = el.previousSibling; }
|
2059
|
-
return
|
2069
|
+
return el;
|
2060
2070
|
}
|
2061
2071
|
});
|
2062
2072
|
|
@@ -17,7 +17,10 @@
|
|
17
17
|
|
18
18
|
// Allow space for the arrow
|
19
19
|
padding-left: 14px;
|
20
|
+
}
|
20
21
|
|
22
|
+
// Only add a custom underline if the component is linkable
|
23
|
+
.govuk-back-link[href] {
|
21
24
|
// Use border-bottom rather than text-decoration so that the arrow is
|
22
25
|
// underlined as well.
|
23
26
|
border-bottom: 1px solid govuk-colour("black");
|
@@ -30,22 +33,22 @@
|
|
30
33
|
&:focus {
|
31
34
|
border-bottom-color: transparent;
|
32
35
|
}
|
36
|
+
}
|
33
37
|
|
34
|
-
|
35
|
-
|
36
|
-
|
38
|
+
// Prepend left pointing arrow
|
39
|
+
.govuk-back-link:before {
|
40
|
+
@include govuk-shape-arrow($direction: left, $base: 10px, $height: 6px);
|
37
41
|
|
38
|
-
|
42
|
+
content: "";
|
39
43
|
|
40
|
-
|
41
|
-
|
44
|
+
// Vertically align with the parent element
|
45
|
+
position: absolute;
|
42
46
|
|
43
|
-
|
44
|
-
|
45
|
-
|
47
|
+
top: 0;
|
48
|
+
bottom: 0;
|
49
|
+
left: 0;
|
46
50
|
|
47
|
-
|
48
|
-
}
|
51
|
+
margin: auto;
|
49
52
|
}
|
50
53
|
|
51
54
|
@if $govuk-use-legacy-font {
|
@@ -98,6 +98,17 @@
|
|
98
98
|
box-shadow: inset 0 0 0 1px $govuk-focus-colour;
|
99
99
|
}
|
100
100
|
|
101
|
+
// alphagov/govuk_template includes a specific a:link:focus selector
|
102
|
+
// designed to make unvisited links a slightly darker blue when focussed, so
|
103
|
+
// we need to override the text colour for that combination of selectors so
|
104
|
+
// so that unvisited links styled as buttons do not end up with dark blue
|
105
|
+
// text when focussed.
|
106
|
+
@include govuk-compatibility(govuk_template) {
|
107
|
+
&:link:focus {
|
108
|
+
color: $govuk-button-text-colour;
|
109
|
+
}
|
110
|
+
}
|
111
|
+
|
101
112
|
&:focus:not(:active):not(:hover) {
|
102
113
|
border-color: $govuk-focus-colour;
|
103
114
|
color: $govuk-focus-text-colour;
|
@@ -232,8 +243,6 @@
|
|
232
243
|
|
233
244
|
display: -webkit-inline-box;
|
234
245
|
|
235
|
-
display: -webkit-inline-flex;
|
236
|
-
|
237
246
|
display: -ms-inline-flexbox;
|
238
247
|
|
239
248
|
display: inline-flex;
|
@@ -241,8 +250,6 @@
|
|
241
250
|
|
242
251
|
-webkit-box-pack: center;
|
243
252
|
|
244
|
-
-webkit-justify-content: center;
|
245
|
-
|
246
253
|
-ms-flex-pack: center;
|
247
254
|
|
248
255
|
justify-content: center;
|
@@ -255,12 +262,10 @@
|
|
255
262
|
margin-left: govuk-spacing(2);
|
256
263
|
}
|
257
264
|
vertical-align: middle;
|
258
|
-
-
|
259
|
-
|
260
|
-
|
261
|
-
|
262
|
-
-ms-flex-item-align: center;
|
263
|
-
align-self: center;
|
265
|
+
-ms-flex-negative: 0;
|
266
|
+
flex-shrink: 0;
|
267
|
+
-ms-flex-item-align: center;
|
268
|
+
align-self: center;
|
264
269
|
}
|
265
270
|
|
266
271
|
@if $govuk-use-legacy-font {
|
@@ -77,19 +77,6 @@
|
|
77
77
|
}
|
78
78
|
}
|
79
79
|
|
80
|
-
// Internet Explorer 8 does not support `:not()` selectors, so don't conditionally show underlines.
|
81
|
-
@include govuk-not-ie8 {
|
82
|
-
.govuk-footer__inline-list .govuk-footer__link,
|
83
|
-
.govuk-footer__list .govuk-footer__link {
|
84
|
-
text-decoration: none;
|
85
|
-
|
86
|
-
&:hover:not(:focus),
|
87
|
-
&:active:not(:focus) {
|
88
|
-
text-decoration: underline;
|
89
|
-
}
|
90
|
-
}
|
91
|
-
}
|
92
|
-
|
93
80
|
.govuk-footer__section-break {
|
94
81
|
margin: 0; // Reset `<hr>` default margins
|
95
82
|
@include govuk-responsive-margin(8, "bottom");
|
@@ -99,20 +86,16 @@
|
|
99
86
|
|
100
87
|
.govuk-footer__meta {
|
101
88
|
display: -webkit-box;
|
102
|
-
display: -webkit-flex;
|
103
89
|
display: -ms-flexbox;
|
104
90
|
display: flex; // Support: Flexbox
|
105
91
|
margin-right: -$govuk-gutter-half;
|
106
92
|
margin-left: -$govuk-gutter-half;
|
107
|
-
-
|
108
|
-
|
109
|
-
flex-wrap: wrap; // Support: Flexbox
|
93
|
+
-ms-flex-wrap: wrap;
|
94
|
+
flex-wrap: wrap; // Support: Flexbox
|
110
95
|
-webkit-box-align: end;
|
111
|
-
-webkit-align-items: flex-end;
|
112
96
|
-ms-flex-align: end;
|
113
97
|
align-items: flex-end; // Support: Flexbox
|
114
98
|
-webkit-box-pack: center;
|
115
|
-
-webkit-justify-content: center;
|
116
99
|
-ms-flex-pack: center;
|
117
100
|
justify-content: center; // Support: Flexbox
|
118
101
|
}
|
@@ -125,20 +108,18 @@
|
|
125
108
|
|
126
109
|
.govuk-footer__meta-item--grow {
|
127
110
|
-webkit-box-flex: 1;
|
128
|
-
-webkit-flex: 1;
|
129
111
|
-ms-flex: 1;
|
130
112
|
flex: 1; // Support: Flexbox
|
131
|
-
@include
|
132
|
-
-
|
133
|
-
|
134
|
-
flex-basis: 320px; // Support: Flexbox
|
113
|
+
@include govuk-media-query ($until: tablet) {
|
114
|
+
-ms-flex-preferred-size: 320px;
|
115
|
+
flex-basis: 320px; // Support: Flexbox
|
135
116
|
}
|
136
117
|
}
|
137
118
|
|
138
119
|
.govuk-footer__licence-logo {
|
139
120
|
display: inline-block;
|
140
121
|
margin-right: govuk-spacing(2);
|
141
|
-
@include
|
122
|
+
@include govuk-media-query ($until: desktop) {
|
142
123
|
margin-bottom: govuk-spacing(3);
|
143
124
|
}
|
144
125
|
vertical-align: top;
|
@@ -183,7 +164,7 @@
|
|
183
164
|
.govuk-footer__heading {
|
184
165
|
@include govuk-responsive-margin(7, "bottom");
|
185
166
|
padding-bottom: govuk-spacing(4);
|
186
|
-
@include
|
167
|
+
@include govuk-media-query ($until: tablet) {
|
187
168
|
padding-bottom: govuk-spacing(2);
|
188
169
|
}
|
189
170
|
border-bottom: 1px solid $govuk-footer-border;
|
@@ -191,14 +172,12 @@
|
|
191
172
|
|
192
173
|
.govuk-footer__navigation {
|
193
174
|
display: -webkit-box;
|
194
|
-
display: -webkit-flex;
|
195
175
|
display: -ms-flexbox;
|
196
176
|
display: flex; // Support: Flexbox
|
197
177
|
margin-right: -$govuk-gutter-half;
|
198
178
|
margin-left: -$govuk-gutter-half;
|
199
|
-
-
|
200
|
-
|
201
|
-
flex-wrap: wrap; // Support: Flexbox
|
179
|
+
-ms-flex-wrap: wrap;
|
180
|
+
flex-wrap: wrap; // Support: Flexbox
|
202
181
|
}
|
203
182
|
|
204
183
|
.govuk-footer__section {
|
@@ -209,28 +188,24 @@
|
|
209
188
|
vertical-align: top;
|
210
189
|
// Ensure columns take up equal width (typically one-half:one-half)
|
211
190
|
-webkit-box-flex: 1;
|
212
|
-
-webkit-flex-grow: 1;
|
213
191
|
-ms-flex-positive: 1;
|
214
192
|
flex-grow: 1; // Support: Flexbox
|
215
|
-
-
|
216
|
-
|
217
|
-
|
218
|
-
@include mq ($until: desktop) {
|
193
|
+
-ms-flex-negative: 1;
|
194
|
+
flex-shrink: 1; // Support: Flexbox
|
195
|
+
@include govuk-media-query ($until: desktop) {
|
219
196
|
// Make sure columns do not drop below 200px in width
|
220
197
|
// Will typically result in wrapping, and end up in a single column on smaller screens.
|
221
|
-
-
|
222
|
-
|
223
|
-
flex-basis: 200px; // Support: Flexbox
|
198
|
+
-ms-flex-preferred-size: 200px;
|
199
|
+
flex-basis: 200px; // Support: Flexbox
|
224
200
|
}
|
225
201
|
}
|
226
202
|
|
227
203
|
// If there are only two sections, set the layout to be two-third:one-third on desktop
|
228
|
-
@include
|
204
|
+
@include govuk-media-query ($from: desktop) {
|
229
205
|
// We match the first section with `:first-child`.
|
230
206
|
// To ensure the section is one of two, we can count backwards using `:nth-last-child(2)`.
|
231
207
|
.govuk-footer__section:first-child:nth-last-child(2) {
|
232
208
|
-webkit-box-flex: 2;
|
233
|
-
-webkit-flex-grow: 2;
|
234
209
|
-ms-flex-positive: 2;
|
235
210
|
flex-grow: 2; // Support: Flexbox
|
236
211
|
}
|
@@ -245,7 +220,7 @@
|
|
245
220
|
column-gap: $govuk-gutter; // Support: Columns
|
246
221
|
}
|
247
222
|
|
248
|
-
@include
|
223
|
+
@include govuk-media-query ($from: desktop) {
|
249
224
|
.govuk-footer__list--columns-2 {
|
250
225
|
-webkit-column-count: 2;
|
251
226
|
-moz-column-count: 2;
|
@@ -42,6 +42,7 @@
|
|
42
42
|
}
|
43
43
|
|
44
44
|
.govuk-header__logotype {
|
45
|
+
display: inline-block;
|
45
46
|
margin-right: govuk-spacing(1);
|
46
47
|
}
|
47
48
|
|
@@ -137,7 +138,7 @@
|
|
137
138
|
@include govuk-responsive-margin(2, "bottom");
|
138
139
|
padding-right: govuk-spacing(8);
|
139
140
|
|
140
|
-
@include
|
141
|
+
@include govuk-media-query ($from: desktop) {
|
141
142
|
width: 33.33%;
|
142
143
|
padding-right: $govuk-gutter-half;
|
143
144
|
float: left;
|
@@ -146,7 +147,7 @@
|
|
146
147
|
}
|
147
148
|
|
148
149
|
.govuk-header__content {
|
149
|
-
@include
|
150
|
+
@include govuk-media-query ($from: desktop) {
|
150
151
|
width: 66.66%;
|
151
152
|
padding-left: $govuk-gutter-half;
|
152
153
|
float: left;
|
@@ -179,7 +180,7 @@
|
|
179
180
|
margin-left: govuk-spacing(1);
|
180
181
|
}
|
181
182
|
|
182
|
-
@include
|
183
|
+
@include govuk-media-query ($from: tablet) {
|
183
184
|
top: govuk-spacing(3);
|
184
185
|
}
|
185
186
|
}
|
@@ -201,14 +202,14 @@
|
|
201
202
|
.js-enabled {
|
202
203
|
.govuk-header__menu-button {
|
203
204
|
display: block;
|
204
|
-
@include
|
205
|
+
@include govuk-media-query ($from: desktop) {
|
205
206
|
display: none;
|
206
207
|
}
|
207
208
|
}
|
208
209
|
|
209
210
|
.govuk-header__navigation {
|
210
211
|
display: none;
|
211
|
-
@include
|
212
|
+
@include govuk-media-query ($from: desktop) {
|
212
213
|
display: block;
|
213
214
|
}
|
214
215
|
}
|
@@ -220,7 +221,7 @@
|
|
220
221
|
|
221
222
|
|
222
223
|
.govuk-header__navigation--end {
|
223
|
-
@include
|
224
|
+
@include govuk-media-query ($from: desktop) {
|
224
225
|
margin: 0;
|
225
226
|
padding: govuk-spacing(1) 0;
|
226
227
|
text-align: right;
|
@@ -235,7 +236,7 @@
|
|
235
236
|
padding: govuk-spacing(2) 0;
|
236
237
|
border-bottom: 1px solid $govuk-header-nav-item-border-color;
|
237
238
|
|
238
|
-
@include
|
239
|
+
@include govuk-media-query ($from: desktop) {
|
239
240
|
display: inline-block;
|
240
241
|
margin-right: govuk-spacing(3);
|
241
242
|
padding: govuk-spacing(1) 0;
|
@@ -13,6 +13,9 @@
|
|
13
13
|
box-sizing: border-box; // should this be global?
|
14
14
|
max-width: 100%;
|
15
15
|
height: 40px;
|
16
|
+
@if $govuk-typography-use-rem {
|
17
|
+
height: govuk-px-to-rem(40px);
|
18
|
+
}
|
16
19
|
padding: govuk-spacing(1); // was 5px 4px 4px - size of it should be adjusted to match other form elements
|
17
20
|
border: $govuk-border-width-form-element solid $govuk-input-border-colour;
|
18
21
|
|
@@ -26,6 +26,12 @@
|
|
26
26
|
&:focus {
|
27
27
|
outline: $govuk-focus-width solid $govuk-focus-colour;
|
28
28
|
background-color: $govuk-focus-colour;
|
29
|
+
|
30
|
+
// Undo unwanted changes when global styles are enabled
|
31
|
+
@if ($govuk-global-styles) {
|
32
|
+
box-shadow: none;
|
33
|
+
text-decoration: underline;
|
34
|
+
}
|
29
35
|
}
|
30
36
|
}
|
31
37
|
}
|
@@ -5,9 +5,6 @@
|
|
5
5
|
@include govuk-exports("govuk/component/warning-text") {
|
6
6
|
|
7
7
|
.govuk-warning-text {
|
8
|
-
@include govuk-font($size: 19);
|
9
|
-
@include govuk-text-colour;
|
10
|
-
|
11
8
|
position: relative;
|
12
9
|
@include govuk-responsive-margin(6, "bottom");
|
13
10
|
padding: govuk-spacing(2) 0;
|
@@ -23,13 +20,15 @@
|
|
23
20
|
display: inline-block;
|
24
21
|
|
25
22
|
position: absolute;
|
26
|
-
top: 50%;
|
27
23
|
left: 0;
|
28
24
|
|
29
|
-
min-width:
|
25
|
+
min-width: 29px;
|
30
26
|
min-height: 29px;
|
31
|
-
margin-top: -
|
32
|
-
|
27
|
+
margin-top: -7px;
|
28
|
+
|
29
|
+
@include govuk-media-query($from: tablet) {
|
30
|
+
margin-top: -5px;
|
31
|
+
}
|
33
32
|
|
34
33
|
// When a user customises their colours the background colour will often be removed.
|
35
34
|
// Adding a border to the component keeps it's shape as a circle.
|
@@ -39,7 +38,7 @@
|
|
39
38
|
color: govuk-colour("white");
|
40
39
|
background: govuk-colour("black");
|
41
40
|
|
42
|
-
font-size:
|
41
|
+
font-size: 30px;
|
43
42
|
line-height: 29px;
|
44
43
|
|
45
44
|
text-align: center;
|
@@ -53,7 +52,9 @@
|
|
53
52
|
}
|
54
53
|
|
55
54
|
.govuk-warning-text__text {
|
55
|
+
@include govuk-font($size: 19, $weight: bold);
|
56
|
+
@include govuk-text-colour;
|
56
57
|
display: block;
|
57
|
-
padding-left:
|
58
|
+
padding-left: 45px;
|
58
59
|
}
|
59
60
|
}
|
@@ -15,26 +15,28 @@
|
|
15
15
|
/// @access private
|
16
16
|
|
17
17
|
@mixin _govuk-font-face-gds-transport {
|
18
|
-
@include govuk-
|
19
|
-
@
|
20
|
-
|
18
|
+
@include govuk-not-ie8 { // In IE8, which cannot render WOFF format, we fall back to system fonts
|
19
|
+
@include govuk-exports("govuk/helpers/font-faces") {
|
20
|
+
@at-root {
|
21
|
+
/*! Copyright (c) 2011 by Margaret Calvert & Henrik Kubel. All rights reserved. The font has been customised for exclusive use on gov.uk. This cut is not commercially available. */
|
21
22
|
|
22
|
-
|
23
|
-
|
24
|
-
|
25
|
-
|
26
|
-
|
27
|
-
|
28
|
-
|
29
|
-
|
23
|
+
@font-face {
|
24
|
+
font-family: "GDS Transport";
|
25
|
+
src: govuk-font-url("light-94a07e06a1-v2.woff2") format("woff2"),
|
26
|
+
govuk-font-url("light-f591b13f7d-v2.woff") format("woff");
|
27
|
+
font-weight: normal;
|
28
|
+
font-style: normal;
|
29
|
+
font-display: fallback;
|
30
|
+
}
|
30
31
|
|
31
|
-
|
32
|
-
|
33
|
-
|
34
|
-
|
35
|
-
|
36
|
-
|
37
|
-
|
32
|
+
@font-face {
|
33
|
+
font-family: "GDS Transport";
|
34
|
+
src: govuk-font-url("bold-b542beb274-v2.woff2") format("woff2"),
|
35
|
+
govuk-font-url("bold-affa96571d-v2.woff") format("woff");
|
36
|
+
font-weight: bold;
|
37
|
+
font-style: normal;
|
38
|
+
font-display: fallback;
|
39
|
+
}
|
38
40
|
}
|
39
41
|
}
|
40
42
|
}
|
@@ -2,12 +2,31 @@
|
|
2
2
|
@import "../tools/all";
|
3
3
|
@import "../helpers/all";
|
4
4
|
|
5
|
-
|
6
|
-
|
7
|
-
|
5
|
+
////
|
6
|
+
/// @group objects
|
7
|
+
////
|
8
|
+
|
9
|
+
/// Width container mixin
|
10
|
+
///
|
11
|
+
/// Used to create page width and custom width container classes.
|
12
|
+
///
|
13
|
+
/// @param {String} $width [$govuk-page-width] - Width in pixels
|
14
|
+
///
|
15
|
+
/// @example scss - Creating a 1200px wide container class
|
16
|
+
/// .app-width-container--wide {
|
17
|
+
/// @include govuk-width-container(1200px);
|
18
|
+
/// }
|
19
|
+
///
|
20
|
+
/// @access public
|
21
|
+
|
22
|
+
@mixin govuk-width-container($width: $govuk-page-width) {
|
23
|
+
|
24
|
+
// By default, limit the width of the container to the page width
|
25
|
+
max-width: $width;
|
8
26
|
|
9
27
|
// On mobile, add half width gutters
|
10
|
-
margin:
|
28
|
+
margin-right: $govuk-gutter-half;
|
29
|
+
margin-left: $govuk-gutter-half;
|
11
30
|
|
12
31
|
// Respect 'display cutout' safe area (avoids notches and rounded corners)
|
13
32
|
@supports (margin: unquote("max(calc(0px))")) {
|
@@ -22,7 +41,8 @@
|
|
22
41
|
|
23
42
|
// On tablet, add full width gutters
|
24
43
|
@include govuk-media-query($from: tablet) {
|
25
|
-
margin:
|
44
|
+
margin-right: $govuk-gutter;
|
45
|
+
margin-left: $govuk-gutter;
|
26
46
|
|
27
47
|
// Respect 'display cutout' safe area (avoids notches and rounded corners)
|
28
48
|
@supports (margin: unquote("max(calc(0px))")) {
|
@@ -38,21 +58,24 @@
|
|
38
58
|
|
39
59
|
// As soon as the viewport is greater than the width of the page plus the
|
40
60
|
// gutters, just centre the content instead of adding gutters.
|
41
|
-
@include govuk-media-query($and: "(min-width: #{($
|
42
|
-
margin:
|
61
|
+
@include govuk-media-query($and: "(min-width: #{($width + $govuk-gutter * 2)})") {
|
62
|
+
margin-right: auto;
|
63
|
+
margin-left: auto;
|
43
64
|
|
44
65
|
// Since a safe area may have previously been set above,
|
45
66
|
// we need to duplicate this margin that centers the page.
|
46
67
|
@supports (margin: unquote("max(calc(0px))")) {
|
47
|
-
margin:
|
68
|
+
margin-right: auto;
|
69
|
+
margin-left: auto;
|
48
70
|
}
|
49
71
|
}
|
50
72
|
|
51
73
|
@include govuk-if-ie8 {
|
52
|
-
width: $
|
74
|
+
width: $width;
|
53
75
|
// Since media queries are not supported in IE8,
|
54
76
|
// we need to duplicate this margin that centers the page.
|
55
|
-
margin:
|
77
|
+
margin-right: auto;
|
78
|
+
margin-left: auto;
|
56
79
|
}
|
57
80
|
}
|
58
81
|
|
metadata
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: dxw_govuk_frontend_rails
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
version: 3.
|
4
|
+
version: 3.5.0
|
5
5
|
platform: ruby
|
6
6
|
authors:
|
7
7
|
- mec
|
@@ -9,7 +9,7 @@ authors:
|
|
9
9
|
autorequire:
|
10
10
|
bindir: exe
|
11
11
|
cert_chain: []
|
12
|
-
date:
|
12
|
+
date: 2020-06-26 00:00:00.000000000 Z
|
13
13
|
dependencies:
|
14
14
|
- !ruby/object:Gem::Dependency
|
15
15
|
name: bundler
|
@@ -31,14 +31,14 @@ dependencies:
|
|
31
31
|
requirements:
|
32
32
|
- - "~>"
|
33
33
|
- !ruby/object:Gem::Version
|
34
|
-
version: '
|
34
|
+
version: '13.0'
|
35
35
|
type: :development
|
36
36
|
prerelease: false
|
37
37
|
version_requirements: !ruby/object:Gem::Requirement
|
38
38
|
requirements:
|
39
39
|
- - "~>"
|
40
40
|
- !ruby/object:Gem::Version
|
41
|
-
version: '
|
41
|
+
version: '13.0'
|
42
42
|
description: Adds the GOVUK frontend to a Rails application that uses the Asset Pipeline.
|
43
43
|
email:
|
44
44
|
executables: []
|
@@ -46,6 +46,7 @@ extensions: []
|
|
46
46
|
extra_rdoc_files: []
|
47
47
|
files:
|
48
48
|
- ".github/workflows/gempush.yml"
|
49
|
+
- ".github/workflows/test.yml"
|
49
50
|
- ".gitignore"
|
50
51
|
- CODE_OF_CONDUCT.md
|
51
52
|
- Gemfile
|
@@ -184,7 +185,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
|
|
184
185
|
- !ruby/object:Gem::Version
|
185
186
|
version: '0'
|
186
187
|
requirements: []
|
187
|
-
rubygems_version: 3.
|
188
|
+
rubygems_version: 3.1.2
|
188
189
|
signing_key:
|
189
190
|
specification_version: 4
|
190
191
|
summary: Adds the GOVUK frontend to a Rails application that uses the Asset Pipeline.
|