dxw_govuk_frontend_rails 3.6.0 → 3.11.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (119) hide show
  1. checksums.yaml +4 -4
  2. data/CONTRIBUTING.md +1 -0
  3. data/Gemfile.lock +3 -2
  4. data/README.md +67 -43
  5. data/lib/dxw_govuk_frontend_rails/version.rb +1 -1
  6. data/package-lock.json +3 -3
  7. data/package.json +1 -1
  8. data/vendor/assets/javascripts/govuk_frontend_rails.js +245 -91
  9. data/vendor/assets/stylesheets/_base.scss +3 -0
  10. data/vendor/assets/stylesheets/all.scss +1 -3
  11. data/vendor/assets/stylesheets/components/_all.scss +33 -29
  12. data/vendor/assets/stylesheets/components/accordion/_accordion.scss +2 -208
  13. data/vendor/assets/stylesheets/components/accordion/_index.scss +206 -0
  14. data/vendor/assets/stylesheets/components/back-link/_back-link.scss +2 -65
  15. data/vendor/assets/stylesheets/components/back-link/_index.scss +110 -0
  16. data/vendor/assets/stylesheets/components/breadcrumbs/_breadcrumbs.scss +2 -118
  17. data/vendor/assets/stylesheets/components/breadcrumbs/_index.scss +137 -0
  18. data/vendor/assets/stylesheets/components/button/_button.scss +2 -284
  19. data/vendor/assets/stylesheets/components/button/_index.scss +282 -0
  20. data/vendor/assets/stylesheets/components/character-count/_character-count.scss +2 -31
  21. data/vendor/assets/stylesheets/components/character-count/_index.scss +25 -0
  22. data/vendor/assets/stylesheets/components/checkboxes/_checkboxes.scss +2 -308
  23. data/vendor/assets/stylesheets/components/checkboxes/_index.scss +305 -0
  24. data/vendor/assets/stylesheets/components/cookie-banner/_cookie-banner.scss +2 -0
  25. data/vendor/assets/stylesheets/components/cookie-banner/_index.scss +51 -0
  26. data/vendor/assets/stylesheets/components/date-input/_date-input.scss +2 -30
  27. data/vendor/assets/stylesheets/components/date-input/_index.scss +26 -0
  28. data/vendor/assets/stylesheets/components/details/_details.scss +2 -88
  29. data/vendor/assets/stylesheets/components/details/_index.scss +83 -0
  30. data/vendor/assets/stylesheets/components/error-message/_error-message.scss +2 -15
  31. data/vendor/assets/stylesheets/components/error-message/_index.scss +11 -0
  32. data/vendor/assets/stylesheets/components/error-summary/_error-summary.scss +2 -59
  33. data/vendor/assets/stylesheets/components/error-summary/_index.scss +43 -0
  34. data/vendor/assets/stylesheets/components/fieldset/_fieldset.scss +2 -68
  35. data/vendor/assets/stylesheets/components/fieldset/_index.scss +64 -0
  36. data/vendor/assets/stylesheets/components/file-upload/_file-upload.scss +2 -81
  37. data/vendor/assets/stylesheets/components/file-upload/_index.scss +50 -0
  38. data/vendor/assets/stylesheets/components/footer/_footer.scss +2 -244
  39. data/vendor/assets/stylesheets/components/footer/_index.scss +234 -0
  40. data/vendor/assets/stylesheets/components/header/_header.scss +2 -318
  41. data/vendor/assets/stylesheets/components/header/_index.scss +309 -0
  42. data/vendor/assets/stylesheets/components/hint/_hint.scss +2 -50
  43. data/vendor/assets/stylesheets/components/hint/_index.scss +44 -0
  44. data/vendor/assets/stylesheets/components/input/_index.scss +187 -0
  45. data/vendor/assets/stylesheets/components/input/_input.scss +2 -103
  46. data/vendor/assets/stylesheets/components/inset-text/_index.scss +24 -0
  47. data/vendor/assets/stylesheets/components/inset-text/_inset-text.scss +2 -28
  48. data/vendor/assets/stylesheets/components/label/_index.scss +41 -0
  49. data/vendor/assets/stylesheets/components/label/_label.scss +2 -45
  50. data/vendor/assets/stylesheets/components/notification-banner/_index.scss +89 -0
  51. data/vendor/assets/stylesheets/components/notification-banner/_notification-banner.scss +2 -0
  52. data/vendor/assets/stylesheets/components/panel/_index.scss +44 -0
  53. data/vendor/assets/stylesheets/components/panel/_panel.scss +2 -44
  54. data/vendor/assets/stylesheets/components/phase-banner/_index.scss +27 -0
  55. data/vendor/assets/stylesheets/components/phase-banner/_phase-banner.scss +2 -31
  56. data/vendor/assets/stylesheets/components/radios/_index.scss +342 -0
  57. data/vendor/assets/stylesheets/components/radios/_radios.scss +2 -346
  58. data/vendor/assets/stylesheets/components/select/_index.scss +49 -0
  59. data/vendor/assets/stylesheets/components/select/_select.scss +2 -57
  60. data/vendor/assets/stylesheets/components/skip-link/_index.scss +34 -0
  61. data/vendor/assets/stylesheets/components/skip-link/_skip-link.scss +2 -37
  62. data/vendor/assets/stylesheets/components/summary-list/_index.scss +145 -0
  63. data/vendor/assets/stylesheets/components/summary-list/_summary-list.scss +2 -157
  64. data/vendor/assets/stylesheets/components/table/_index.scss +71 -0
  65. data/vendor/assets/stylesheets/components/table/_table.scss +2 -54
  66. data/vendor/assets/stylesheets/components/tabs/_index.scss +135 -0
  67. data/vendor/assets/stylesheets/components/tabs/_tabs.scss +2 -142
  68. data/vendor/assets/stylesheets/components/tag/_index.scss +86 -0
  69. data/vendor/assets/stylesheets/components/tag/_tag.scss +2 -91
  70. data/vendor/assets/stylesheets/components/textarea/_index.scss +47 -0
  71. data/vendor/assets/stylesheets/components/textarea/_textarea.scss +2 -55
  72. data/vendor/assets/stylesheets/components/warning-text/_index.scss +57 -0
  73. data/vendor/assets/stylesheets/components/warning-text/_warning-text.scss +2 -60
  74. data/vendor/assets/stylesheets/core/_global-styles.scss +5 -3
  75. data/vendor/assets/stylesheets/core/_links.scss +5 -3
  76. data/vendor/assets/stylesheets/core/_lists.scss +17 -3
  77. data/vendor/assets/stylesheets/core/_section-break.scss +5 -3
  78. data/vendor/assets/stylesheets/core/_template.scss +5 -3
  79. data/vendor/assets/stylesheets/core/_typography.scss +5 -3
  80. data/vendor/assets/stylesheets/helpers/_clearfix.scss +1 -1
  81. data/vendor/assets/stylesheets/helpers/_colour.scss +1 -1
  82. data/vendor/assets/stylesheets/helpers/_device-pixels.scss +3 -3
  83. data/vendor/assets/stylesheets/helpers/_focused.scss +1 -1
  84. data/vendor/assets/stylesheets/helpers/_font-faces.scss +9 -11
  85. data/vendor/assets/stylesheets/helpers/_grid.scss +2 -1
  86. data/vendor/assets/stylesheets/helpers/_links.scss +96 -4
  87. data/vendor/assets/stylesheets/helpers/_media-queries.scss +2 -6
  88. data/vendor/assets/stylesheets/helpers/_shape-arrow.scss +1 -1
  89. data/vendor/assets/stylesheets/helpers/_spacing.scss +3 -2
  90. data/vendor/assets/stylesheets/helpers/_typography.scss +8 -7
  91. data/vendor/assets/stylesheets/helpers/_visually-hidden.scss +1 -1
  92. data/vendor/assets/stylesheets/objects/_all.scss +1 -0
  93. data/vendor/assets/stylesheets/objects/_button-group.scss +94 -0
  94. data/vendor/assets/stylesheets/objects/_form-group.scss +1 -4
  95. data/vendor/assets/stylesheets/objects/_grid.scss +3 -6
  96. data/vendor/assets/stylesheets/objects/_main-wrapper.scss +5 -4
  97. data/vendor/assets/stylesheets/objects/_width-container.scss +2 -4
  98. data/vendor/assets/stylesheets/overrides/_display.scss +6 -4
  99. data/vendor/assets/stylesheets/overrides/_spacing.scss +5 -3
  100. data/vendor/assets/stylesheets/overrides/_typography.scss +5 -3
  101. data/vendor/assets/stylesheets/overrides/_width.scss +6 -3
  102. data/vendor/assets/stylesheets/settings/_colours-applied.scss +11 -5
  103. data/vendor/assets/stylesheets/settings/_colours-organisations.scss +3 -0
  104. data/vendor/assets/stylesheets/settings/_colours-palette.scss +42 -35
  105. data/vendor/assets/stylesheets/settings/_compatibility.scss +0 -1
  106. data/vendor/assets/stylesheets/settings/_ie8.scss +1 -1
  107. data/vendor/assets/stylesheets/settings/_measurements.scss +4 -5
  108. data/vendor/assets/stylesheets/settings/_typography-font-families.scss +2 -2
  109. data/vendor/assets/stylesheets/settings/_typography-font.scss +14 -5
  110. data/vendor/assets/stylesheets/settings/_typography-responsive.scss +6 -2
  111. data/vendor/assets/stylesheets/tools/_compatibility.scss +1 -1
  112. data/vendor/assets/stylesheets/tools/_font-url.scss +1 -4
  113. data/vendor/assets/stylesheets/tools/_ie8.scss +1 -1
  114. data/vendor/assets/stylesheets/tools/_image-url.scss +1 -4
  115. data/vendor/assets/stylesheets/tools/_px-to-em.scss +1 -1
  116. data/vendor/assets/stylesheets/tools/_px-to-rem.scss +1 -1
  117. data/vendor/assets/stylesheets/utilities/_visually-hidden.scss +0 -1
  118. data/vendor/assets/stylesheets/vendor/_sass-mq.scss +0 -4
  119. metadata +39 -3
@@ -1,244 +1,2 @@
1
- @import "../../settings/all";
2
- @import "../../tools/all";
3
- @import "../../helpers/all";
4
-
5
- @import "../../helpers/typography";
6
-
7
- @include govuk-exports("govuk/component/footer") {
8
-
9
- $govuk-footer-background: $govuk-canvas-background-colour;
10
- $govuk-footer-border: $govuk-border-colour;
11
- // This variable can be removed entirely once the legacy palette goes away,
12
- // as it'll just be the same as $govuk-footer-border.
13
- $govuk-footer-border-top: $govuk-border-colour;
14
- $govuk-footer-text: $govuk-text-colour;
15
- $govuk-footer-link: $govuk-footer-text;
16
- $govuk-footer-link-hover: false;
17
-
18
- @if ($govuk-use-legacy-palette) {
19
- // sass-lint:disable no-color-literals
20
- $govuk-footer-border-top: #a1acb2;
21
- $govuk-footer-border: govuk-colour("grey-2");
22
- $govuk-footer-text: #454a4c;
23
- $govuk-footer-link: $govuk-footer-text;
24
-
25
- // Only used with the legacy palette
26
- $govuk-footer-link-hover: #171819;
27
- }
28
-
29
- // Based on the govuk-crest-2x.png image dimensions.
30
- $govuk-footer-crest-image-width-2x: 250px;
31
- $govuk-footer-crest-image-height-2x: 204px;
32
- // Half the 2x image so that it fits the regular 1x size.
33
- $govuk-footer-crest-image-width: ($govuk-footer-crest-image-width-2x / 2);
34
- $govuk-footer-crest-image-height: ($govuk-footer-crest-image-height-2x / 2);
35
-
36
- .govuk-footer {
37
- @include govuk-font($size: 16);
38
- @include govuk-responsive-padding(7, "top");
39
- @include govuk-responsive-padding(5, "bottom");
40
-
41
- border-top: 1px solid $govuk-footer-border-top;
42
- color: $govuk-footer-text;
43
- background: $govuk-footer-background;
44
- }
45
-
46
- .govuk-footer__link {
47
- @if ($govuk-use-legacy-palette) {
48
- &:link,
49
- &:visited {
50
- color: $govuk-footer-link;
51
- }
52
-
53
- &:hover,
54
- &:active {
55
- color: $govuk-footer-link-hover;
56
- }
57
- } @else {
58
- &:link,
59
- &:visited,
60
- &:hover,
61
- &:active {
62
- color: $govuk-footer-link;
63
- }
64
- }
65
-
66
- &:focus {
67
- @include govuk-focused-text;
68
- }
69
-
70
- // alphagov/govuk_template includes a specific a:link:focus selector
71
- // designed to make unvisited links a slightly darker blue when focussed, so
72
- // we need to override the text colour for that combination of selectors.
73
- @include govuk-compatibility(govuk_template) {
74
- &:link:focus {
75
- @include govuk-text-colour;
76
- }
77
- }
78
- }
79
-
80
- .govuk-footer__section-break {
81
- margin: 0; // Reset `<hr>` default margins
82
- @include govuk-responsive-margin(8, "bottom");
83
- border: 0; // Reset `<hr>` default borders
84
- border-bottom: 1px solid $govuk-footer-border;
85
- }
86
-
87
- .govuk-footer__meta {
88
- display: -webkit-box;
89
- display: -ms-flexbox;
90
- display: flex; // Support: Flexbox
91
- margin-right: -$govuk-gutter-half;
92
- margin-left: -$govuk-gutter-half;
93
- -ms-flex-wrap: wrap;
94
- flex-wrap: wrap; // Support: Flexbox
95
- -webkit-box-align: end;
96
- -ms-flex-align: end;
97
- align-items: flex-end; // Support: Flexbox
98
- -webkit-box-pack: center;
99
- -ms-flex-pack: center;
100
- justify-content: center; // Support: Flexbox
101
- }
102
-
103
- .govuk-footer__meta-item {
104
- margin-right: $govuk-gutter-half;
105
- margin-bottom: govuk-spacing(5);
106
- margin-left: $govuk-gutter-half;
107
- }
108
-
109
- .govuk-footer__meta-item--grow {
110
- -webkit-box-flex: 1;
111
- -ms-flex: 1;
112
- flex: 1; // Support: Flexbox
113
- @include govuk-media-query ($until: tablet) {
114
- -ms-flex-preferred-size: 320px;
115
- flex-basis: 320px; // Support: Flexbox
116
- }
117
- }
118
-
119
- .govuk-footer__licence-logo {
120
- display: inline-block;
121
- margin-right: govuk-spacing(2);
122
- @include govuk-media-query ($until: desktop) {
123
- margin-bottom: govuk-spacing(3);
124
- }
125
- vertical-align: top;
126
- }
127
-
128
- .govuk-footer__licence-description {
129
- display: inline-block;
130
- }
131
-
132
- .govuk-footer__copyright-logo {
133
- display: inline-block;
134
- min-width: $govuk-footer-crest-image-width;
135
- padding-top: ($govuk-footer-crest-image-height + govuk-spacing(2));
136
- background-image: govuk-image-url("govuk-crest.png");
137
- @include govuk-device-pixel-ratio {
138
- background-image: govuk-image-url("govuk-crest-2x.png");
139
- }
140
- background-repeat: no-repeat;
141
- background-position: 50% 0%;
142
- background-size: $govuk-footer-crest-image-width $govuk-footer-crest-image-height;
143
- text-align: center;
144
- text-decoration: none;
145
- white-space: nowrap;
146
- }
147
-
148
- .govuk-footer__inline-list {
149
- margin-top: 0;
150
- margin-bottom: govuk-spacing(3);
151
- padding: 0;
152
- }
153
-
154
- .govuk-footer__meta-custom {
155
- margin-bottom: govuk-spacing(4);
156
- }
157
-
158
- .govuk-footer__inline-list-item {
159
- display: inline-block;
160
- margin-right: govuk-spacing(3);
161
- margin-bottom: govuk-spacing(1);
162
- }
163
-
164
- .govuk-footer__heading {
165
- @include govuk-responsive-margin(7, "bottom");
166
- padding-bottom: govuk-spacing(4);
167
- @include govuk-media-query ($until: tablet) {
168
- padding-bottom: govuk-spacing(2);
169
- }
170
- border-bottom: 1px solid $govuk-footer-border;
171
- }
172
-
173
- .govuk-footer__navigation {
174
- display: -webkit-box;
175
- display: -ms-flexbox;
176
- display: flex; // Support: Flexbox
177
- margin-right: -$govuk-gutter-half;
178
- margin-left: -$govuk-gutter-half;
179
- -ms-flex-wrap: wrap;
180
- flex-wrap: wrap; // Support: Flexbox
181
- }
182
-
183
- .govuk-footer__section {
184
- display: inline-block;
185
- margin-right: $govuk-gutter-half;
186
- margin-bottom: $govuk-gutter;
187
- margin-left: $govuk-gutter-half;
188
- vertical-align: top;
189
- // Ensure columns take up equal width (typically one-half:one-half)
190
- -webkit-box-flex: 1;
191
- -ms-flex-positive: 1;
192
- flex-grow: 1; // Support: Flexbox
193
- -ms-flex-negative: 1;
194
- flex-shrink: 1; // Support: Flexbox
195
- @include govuk-media-query ($until: desktop) {
196
- // Make sure columns do not drop below 200px in width
197
- // Will typically result in wrapping, and end up in a single column on smaller screens.
198
- -ms-flex-preferred-size: 200px;
199
- flex-basis: 200px; // Support: Flexbox
200
- }
201
- }
202
-
203
- // If there are only two sections, set the layout to be two-third:one-third on desktop
204
- @include govuk-media-query ($from: desktop) {
205
- // We match the first section with `:first-child`.
206
- // To ensure the section is one of two, we can count backwards using `:nth-last-child(2)`.
207
- .govuk-footer__section:first-child:nth-last-child(2) {
208
- -webkit-box-flex: 2;
209
- -ms-flex-positive: 2;
210
- flex-grow: 2; // Support: Flexbox
211
- }
212
- }
213
-
214
- .govuk-footer__list {
215
- margin: 0;
216
- padding: 0;
217
- list-style: none;
218
- -webkit-column-gap: $govuk-gutter;
219
- -moz-column-gap: $govuk-gutter;
220
- column-gap: $govuk-gutter; // Support: Columns
221
- }
222
-
223
- @include govuk-media-query ($from: desktop) {
224
- .govuk-footer__list--columns-2 {
225
- -webkit-column-count: 2;
226
- -moz-column-count: 2;
227
- column-count: 2; // Support: Columns
228
- }
229
-
230
- .govuk-footer__list--columns-3 {
231
- -webkit-column-count: 3;
232
- -moz-column-count: 3;
233
- column-count: 3; // Support: Columns
234
- }
235
- }
236
-
237
- .govuk-footer__list-item {
238
- @include govuk-responsive-margin(4, "bottom");
239
- }
240
-
241
- .govuk-footer__list-item:last-child {
242
- margin-bottom: 0;
243
- }
244
- }
1
+ @import "../../base";
2
+ @import "./index";
@@ -0,0 +1,234 @@
1
+ @include govuk-exports("govuk/component/footer") {
2
+
3
+ $govuk-footer-background: $govuk-canvas-background-colour;
4
+ $govuk-footer-border: $govuk-border-colour;
5
+ // This variable can be removed entirely once the legacy palette goes away,
6
+ // as it'll just be the same as $govuk-footer-border.
7
+ $govuk-footer-border-top: $govuk-border-colour;
8
+ $govuk-footer-text: $govuk-text-colour;
9
+ $govuk-footer-link: $govuk-footer-text;
10
+ $govuk-footer-link-hover: false;
11
+
12
+ @if ($govuk-use-legacy-palette) {
13
+ $govuk-footer-border-top: #a1acb2;
14
+ $govuk-footer-border: govuk-colour("grey-2");
15
+ $govuk-footer-text: #454a4c;
16
+ $govuk-footer-link: $govuk-footer-text;
17
+
18
+ // Only used with the legacy palette
19
+ $govuk-footer-link-hover: #171819;
20
+ }
21
+
22
+ // Based on the govuk-crest-2x.png image dimensions.
23
+ $govuk-footer-crest-image-width-2x: 250px;
24
+ $govuk-footer-crest-image-height-2x: 204px;
25
+ // Half the 2x image so that it fits the regular 1x size.
26
+ $govuk-footer-crest-image-width: ($govuk-footer-crest-image-width-2x / 2);
27
+ $govuk-footer-crest-image-height: ($govuk-footer-crest-image-height-2x / 2);
28
+
29
+ .govuk-footer {
30
+ @include govuk-font($size: 16);
31
+ @include govuk-responsive-padding(7, "top");
32
+ @include govuk-responsive-padding(5, "bottom");
33
+
34
+ border-top: 1px solid $govuk-footer-border-top;
35
+ color: $govuk-footer-text;
36
+ background: $govuk-footer-background;
37
+ }
38
+
39
+ .govuk-footer__link {
40
+ @if ($govuk-use-legacy-palette) {
41
+ &:link,
42
+ &:visited {
43
+ color: $govuk-footer-link;
44
+ }
45
+
46
+ &:hover,
47
+ &:active {
48
+ color: $govuk-footer-link-hover;
49
+ }
50
+ } @else {
51
+ &:link,
52
+ &:visited,
53
+ &:hover,
54
+ &:active {
55
+ color: $govuk-footer-link;
56
+ }
57
+ }
58
+
59
+ &:focus {
60
+ @include govuk-focused-text;
61
+ }
62
+
63
+ // alphagov/govuk_template includes a specific a:link:focus selector
64
+ // designed to make unvisited links a slightly darker blue when focussed, so
65
+ // we need to override the text colour for that combination of selectors.
66
+ @include govuk-compatibility(govuk_template) {
67
+ &:link:focus {
68
+ @include govuk-text-colour;
69
+ }
70
+ }
71
+ }
72
+
73
+ .govuk-footer__section-break {
74
+ margin: 0; // Reset `<hr>` default margins
75
+ @include govuk-responsive-margin(8, "bottom");
76
+ border: 0; // Reset `<hr>` default borders
77
+ border-bottom: 1px solid $govuk-footer-border;
78
+ }
79
+
80
+ .govuk-footer__meta {
81
+ display: -webkit-box;
82
+ display: -ms-flexbox;
83
+ display: flex; // Support: Flexbox
84
+ margin-right: -$govuk-gutter-half;
85
+ margin-left: -$govuk-gutter-half;
86
+ -ms-flex-wrap: wrap;
87
+ flex-wrap: wrap; // Support: Flexbox
88
+ -webkit-box-align: end;
89
+ -ms-flex-align: end;
90
+ align-items: flex-end; // Support: Flexbox
91
+ -webkit-box-pack: center;
92
+ -ms-flex-pack: center;
93
+ justify-content: center; // Support: Flexbox
94
+ }
95
+
96
+ .govuk-footer__meta-item {
97
+ margin-right: $govuk-gutter-half;
98
+ margin-bottom: govuk-spacing(5);
99
+ margin-left: $govuk-gutter-half;
100
+ }
101
+
102
+ .govuk-footer__meta-item--grow {
103
+ -webkit-box-flex: 1;
104
+ -ms-flex: 1;
105
+ flex: 1; // Support: Flexbox
106
+ @include govuk-media-query ($until: tablet) {
107
+ -ms-flex-preferred-size: 320px;
108
+ flex-basis: 320px; // Support: Flexbox
109
+ }
110
+ }
111
+
112
+ .govuk-footer__licence-logo {
113
+ display: inline-block;
114
+ margin-right: govuk-spacing(2);
115
+ @include govuk-media-query ($until: desktop) {
116
+ margin-bottom: govuk-spacing(3);
117
+ }
118
+ vertical-align: top;
119
+ }
120
+
121
+ .govuk-footer__licence-description {
122
+ display: inline-block;
123
+ }
124
+
125
+ .govuk-footer__copyright-logo {
126
+ display: inline-block;
127
+ min-width: $govuk-footer-crest-image-width;
128
+ padding-top: ($govuk-footer-crest-image-height + govuk-spacing(2));
129
+ background-image: govuk-image-url("govuk-crest.png");
130
+ @include govuk-device-pixel-ratio {
131
+ background-image: govuk-image-url("govuk-crest-2x.png");
132
+ }
133
+ background-repeat: no-repeat;
134
+ background-position: 50% 0%;
135
+ background-size: $govuk-footer-crest-image-width $govuk-footer-crest-image-height;
136
+ text-align: center;
137
+ text-decoration: none;
138
+ white-space: nowrap;
139
+ }
140
+
141
+ .govuk-footer__inline-list {
142
+ margin-top: 0;
143
+ margin-bottom: govuk-spacing(3);
144
+ padding: 0;
145
+ }
146
+
147
+ .govuk-footer__meta-custom {
148
+ margin-bottom: govuk-spacing(4);
149
+ }
150
+
151
+ .govuk-footer__inline-list-item {
152
+ display: inline-block;
153
+ margin-right: govuk-spacing(3);
154
+ margin-bottom: govuk-spacing(1);
155
+ }
156
+
157
+ .govuk-footer__heading {
158
+ @include govuk-responsive-margin(7, "bottom");
159
+ padding-bottom: govuk-spacing(4);
160
+ @include govuk-media-query ($until: tablet) {
161
+ padding-bottom: govuk-spacing(2);
162
+ }
163
+ border-bottom: 1px solid $govuk-footer-border;
164
+ }
165
+
166
+ .govuk-footer__navigation {
167
+ display: -webkit-box;
168
+ display: -ms-flexbox;
169
+ display: flex; // Support: Flexbox
170
+ margin-right: -$govuk-gutter-half;
171
+ margin-left: -$govuk-gutter-half;
172
+ -ms-flex-wrap: wrap;
173
+ flex-wrap: wrap; // Support: Flexbox
174
+ }
175
+
176
+ .govuk-footer__section {
177
+ display: inline-block;
178
+ margin-right: $govuk-gutter-half;
179
+ margin-bottom: $govuk-gutter;
180
+ margin-left: $govuk-gutter-half;
181
+ vertical-align: top;
182
+ // Ensure columns take up equal width (typically one-half:one-half)
183
+ -webkit-box-flex: 1;
184
+ -ms-flex-positive: 1;
185
+ flex-grow: 1; // Support: Flexbox
186
+ -ms-flex-negative: 1;
187
+ flex-shrink: 1; // Support: Flexbox
188
+ @include govuk-media-query ($until: desktop) {
189
+ // Make sure columns do not drop below 200px in width
190
+ // Will typically result in wrapping, and end up in a single column on smaller screens.
191
+ -ms-flex-preferred-size: 200px;
192
+ flex-basis: 200px; // Support: Flexbox
193
+ }
194
+ }
195
+
196
+ // If there are only two sections, set the layout to be two-third:one-third on desktop
197
+ @include govuk-media-query ($from: desktop) {
198
+ // We match the first section with `:first-child`.
199
+ // To ensure the section is one of two, we can count backwards using `:nth-last-child(2)`.
200
+ .govuk-footer__section:first-child:nth-last-child(2) {
201
+ -webkit-box-flex: 2;
202
+ -ms-flex-positive: 2;
203
+ flex-grow: 2; // Support: Flexbox
204
+ }
205
+ }
206
+
207
+ .govuk-footer__list {
208
+ margin: 0;
209
+ padding: 0;
210
+ list-style: none;
211
+ -webkit-column-gap: $govuk-gutter;
212
+ column-gap: $govuk-gutter; // Support: Columns
213
+ }
214
+
215
+ @include govuk-media-query ($from: desktop) {
216
+ .govuk-footer__list--columns-2 {
217
+ -webkit-column-count: 2;
218
+ column-count: 2; // Support: Columns
219
+ }
220
+
221
+ .govuk-footer__list--columns-3 {
222
+ -webkit-column-count: 3;
223
+ column-count: 3; // Support: Columns
224
+ }
225
+ }
226
+
227
+ .govuk-footer__list-item {
228
+ @include govuk-responsive-margin(4, "bottom");
229
+ }
230
+
231
+ .govuk-footer__list-item:last-child {
232
+ margin-bottom: 0;
233
+ }
234
+ }