dxw_govuk_frontend_rails 3.4.0 → 3.9.1

Sign up to get free protection for your applications and to get access to all the features.
Files changed (115) hide show
  1. checksums.yaml +4 -4
  2. data/CONTRIBUTING.md +1 -0
  3. data/Gemfile.lock +5 -4
  4. data/README.md +45 -42
  5. data/dxw_govuk_frontend_rails.gemspec +1 -1
  6. data/lib/dxw_govuk_frontend_rails/version.rb +1 -1
  7. data/package-lock.json +3 -3
  8. data/package.json +1 -1
  9. data/vendor/assets/javascripts/govuk_frontend_rails.js +213 -124
  10. data/vendor/assets/stylesheets/_base.scss +3 -0
  11. data/vendor/assets/stylesheets/all.scss +1 -3
  12. data/vendor/assets/stylesheets/components/_all.scss +31 -29
  13. data/vendor/assets/stylesheets/components/accordion/_accordion.scss +2 -208
  14. data/vendor/assets/stylesheets/components/accordion/_index.scss +206 -0
  15. data/vendor/assets/stylesheets/components/back-link/_back-link.scss +2 -65
  16. data/vendor/assets/stylesheets/components/back-link/_index.scss +110 -0
  17. data/vendor/assets/stylesheets/components/breadcrumbs/_breadcrumbs.scss +2 -118
  18. data/vendor/assets/stylesheets/components/breadcrumbs/_index.scss +137 -0
  19. data/vendor/assets/stylesheets/components/button/_button.scss +2 -290
  20. data/vendor/assets/stylesheets/components/button/_index.scss +280 -0
  21. data/vendor/assets/stylesheets/components/character-count/_character-count.scss +2 -31
  22. data/vendor/assets/stylesheets/components/character-count/_index.scss +24 -0
  23. data/vendor/assets/stylesheets/components/checkboxes/_checkboxes.scss +2 -308
  24. data/vendor/assets/stylesheets/components/checkboxes/_index.scss +305 -0
  25. data/vendor/assets/stylesheets/components/date-input/_date-input.scss +2 -30
  26. data/vendor/assets/stylesheets/components/date-input/_index.scss +26 -0
  27. data/vendor/assets/stylesheets/components/details/_details.scss +2 -88
  28. data/vendor/assets/stylesheets/components/details/_index.scss +83 -0
  29. data/vendor/assets/stylesheets/components/error-message/_error-message.scss +2 -15
  30. data/vendor/assets/stylesheets/components/error-message/_index.scss +11 -0
  31. data/vendor/assets/stylesheets/components/error-summary/_error-summary.scss +2 -59
  32. data/vendor/assets/stylesheets/components/error-summary/_index.scss +53 -0
  33. data/vendor/assets/stylesheets/components/fieldset/_fieldset.scss +2 -68
  34. data/vendor/assets/stylesheets/components/fieldset/_index.scss +64 -0
  35. data/vendor/assets/stylesheets/components/file-upload/_file-upload.scss +2 -81
  36. data/vendor/assets/stylesheets/components/file-upload/_index.scss +50 -0
  37. data/vendor/assets/stylesheets/components/footer/_footer.scss +2 -269
  38. data/vendor/assets/stylesheets/components/footer/_index.scss +234 -0
  39. data/vendor/assets/stylesheets/components/header/_header.scss +2 -318
  40. data/vendor/assets/stylesheets/components/header/_index.scss +309 -0
  41. data/vendor/assets/stylesheets/components/hint/_hint.scss +2 -50
  42. data/vendor/assets/stylesheets/components/hint/_index.scss +44 -0
  43. data/vendor/assets/stylesheets/components/input/_index.scss +187 -0
  44. data/vendor/assets/stylesheets/components/input/_input.scss +2 -103
  45. data/vendor/assets/stylesheets/components/inset-text/_index.scss +24 -0
  46. data/vendor/assets/stylesheets/components/inset-text/_inset-text.scss +2 -28
  47. data/vendor/assets/stylesheets/components/label/_index.scss +41 -0
  48. data/vendor/assets/stylesheets/components/label/_label.scss +2 -45
  49. data/vendor/assets/stylesheets/components/panel/_index.scss +44 -0
  50. data/vendor/assets/stylesheets/components/panel/_panel.scss +2 -44
  51. data/vendor/assets/stylesheets/components/phase-banner/_index.scss +27 -0
  52. data/vendor/assets/stylesheets/components/phase-banner/_phase-banner.scss +2 -31
  53. data/vendor/assets/stylesheets/components/radios/_index.scss +342 -0
  54. data/vendor/assets/stylesheets/components/radios/_radios.scss +2 -346
  55. data/vendor/assets/stylesheets/components/select/_index.scss +49 -0
  56. data/vendor/assets/stylesheets/components/select/_select.scss +2 -57
  57. data/vendor/assets/stylesheets/components/skip-link/_index.scss +34 -0
  58. data/vendor/assets/stylesheets/components/skip-link/_skip-link.scss +2 -31
  59. data/vendor/assets/stylesheets/components/summary-list/_index.scss +145 -0
  60. data/vendor/assets/stylesheets/components/summary-list/_summary-list.scss +2 -157
  61. data/vendor/assets/stylesheets/components/table/_index.scss +50 -0
  62. data/vendor/assets/stylesheets/components/table/_table.scss +2 -54
  63. data/vendor/assets/stylesheets/components/tabs/_index.scss +135 -0
  64. data/vendor/assets/stylesheets/components/tabs/_tabs.scss +2 -142
  65. data/vendor/assets/stylesheets/components/tag/_index.scss +86 -0
  66. data/vendor/assets/stylesheets/components/tag/_tag.scss +2 -44
  67. data/vendor/assets/stylesheets/components/textarea/_index.scss +47 -0
  68. data/vendor/assets/stylesheets/components/textarea/_textarea.scss +2 -55
  69. data/vendor/assets/stylesheets/components/warning-text/_index.scss +57 -0
  70. data/vendor/assets/stylesheets/components/warning-text/_warning-text.scss +2 -60
  71. data/vendor/assets/stylesheets/core/_global-styles.scss +5 -3
  72. data/vendor/assets/stylesheets/core/_links.scss +5 -3
  73. data/vendor/assets/stylesheets/core/_lists.scss +17 -3
  74. data/vendor/assets/stylesheets/core/_section-break.scss +5 -3
  75. data/vendor/assets/stylesheets/core/_template.scss +5 -3
  76. data/vendor/assets/stylesheets/core/_typography.scss +5 -3
  77. data/vendor/assets/stylesheets/helpers/_clearfix.scss +1 -1
  78. data/vendor/assets/stylesheets/helpers/_colour.scss +1 -1
  79. data/vendor/assets/stylesheets/helpers/_device-pixels.scss +3 -3
  80. data/vendor/assets/stylesheets/helpers/_focused.scss +1 -1
  81. data/vendor/assets/stylesheets/helpers/_font-faces.scss +9 -11
  82. data/vendor/assets/stylesheets/helpers/_grid.scss +2 -1
  83. data/vendor/assets/stylesheets/helpers/_links.scss +2 -4
  84. data/vendor/assets/stylesheets/helpers/_media-queries.scss +2 -6
  85. data/vendor/assets/stylesheets/helpers/_shape-arrow.scss +1 -1
  86. data/vendor/assets/stylesheets/helpers/_spacing.scss +7 -6
  87. data/vendor/assets/stylesheets/helpers/_typography.scss +13 -12
  88. data/vendor/assets/stylesheets/helpers/_visually-hidden.scss +30 -30
  89. data/vendor/assets/stylesheets/objects/_form-group.scss +1 -4
  90. data/vendor/assets/stylesheets/objects/_grid.scss +3 -6
  91. data/vendor/assets/stylesheets/objects/_main-wrapper.scss +5 -4
  92. data/vendor/assets/stylesheets/objects/_width-container.scss +12 -9
  93. data/vendor/assets/stylesheets/overrides/_display.scss +12 -4
  94. data/vendor/assets/stylesheets/overrides/_spacing.scss +5 -3
  95. data/vendor/assets/stylesheets/overrides/_typography.scss +5 -3
  96. data/vendor/assets/stylesheets/overrides/_width.scss +6 -3
  97. data/vendor/assets/stylesheets/settings/_colours-applied.scss +2 -5
  98. data/vendor/assets/stylesheets/settings/_colours-organisations.scss +3 -0
  99. data/vendor/assets/stylesheets/settings/_colours-palette.scss +42 -35
  100. data/vendor/assets/stylesheets/settings/_compatibility.scss +0 -1
  101. data/vendor/assets/stylesheets/settings/_ie8.scss +1 -1
  102. data/vendor/assets/stylesheets/settings/_measurements.scss +4 -5
  103. data/vendor/assets/stylesheets/settings/_typography-font-families.scss +2 -2
  104. data/vendor/assets/stylesheets/settings/_typography-font.scss +11 -5
  105. data/vendor/assets/stylesheets/settings/_typography-responsive.scss +6 -2
  106. data/vendor/assets/stylesheets/tools/_compatibility.scss +1 -1
  107. data/vendor/assets/stylesheets/tools/_font-url.scss +1 -4
  108. data/vendor/assets/stylesheets/tools/_ie8.scss +1 -1
  109. data/vendor/assets/stylesheets/tools/_iff.scss +3 -1
  110. data/vendor/assets/stylesheets/tools/_image-url.scss +1 -4
  111. data/vendor/assets/stylesheets/tools/_px-to-em.scss +1 -1
  112. data/vendor/assets/stylesheets/tools/_px-to-rem.scss +1 -1
  113. data/vendor/assets/stylesheets/utilities/_visually-hidden.scss +0 -1
  114. data/vendor/assets/stylesheets/vendor/_sass-mq.scss +0 -4
  115. metadata +36 -5
@@ -1,318 +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/header") {
8
-
9
- $govuk-header-background: govuk-colour("black");
10
- $govuk-header-border-color: $govuk-brand-colour;
11
- $govuk-header-border-width: govuk-spacing(2);
12
- $govuk-header-text: govuk-colour("white");
13
- $govuk-header-link: govuk-colour("white");
14
- $govuk-header-link-hover: govuk-colour("white");
15
- $govuk-header-link-active: #1d8feb;
16
- $govuk-header-nav-item-border-color: #2e3133;
17
-
18
- .govuk-header {
19
- @include govuk-font($size: 16);
20
-
21
- border-bottom: govuk-spacing(2) solid govuk-colour("white");
22
- color: $govuk-header-text;
23
- background: $govuk-header-background;
24
-
25
- }
26
-
27
- .govuk-header__container--full-width {
28
- padding: 0 govuk-spacing(3);
29
- border-color: $govuk-header-border-color;
30
-
31
- .govuk-header__menu-button {
32
- right: govuk-spacing(3);
33
- }
34
- }
35
-
36
- .govuk-header__container {
37
- @include govuk-clearfix;
38
- position: relative;
39
- margin-bottom: -$govuk-header-border-width;
40
- padding-top: govuk-spacing(2);
41
- border-bottom: $govuk-header-border-width solid $govuk-header-border-color;
42
- }
43
-
44
- .govuk-header__logotype {
45
- display: inline-block;
46
- margin-right: govuk-spacing(1);
47
- }
48
-
49
- .govuk-header__logotype-crown {
50
- position: relative;
51
- top: -1px;
52
- margin-right: 1px;
53
- fill: currentColor;
54
- vertical-align: top;
55
- }
56
-
57
- .govuk-header__logotype-crown-fallback-image {
58
- width: 36px;
59
- height: 32px;
60
- border: 0;
61
- vertical-align: middle;
62
- }
63
-
64
- .govuk-header__product-name {
65
- @include govuk-font($size: 24, $line-height: 1);
66
- display: inline-table;
67
- padding-right: govuk-spacing(2);
68
- }
69
-
70
- .govuk-header__link {
71
- text-decoration: none;
72
-
73
- &:link,
74
- &:visited {
75
- color: $govuk-header-link;
76
- }
77
-
78
- &:hover {
79
- text-decoration: underline;
80
- }
81
-
82
- &:focus {
83
- @include govuk-focused-text;
84
- }
85
-
86
- // alphagov/govuk_template includes a specific a:link:focus selector
87
- // designed to make unvisited links a slightly darker blue when focussed, so
88
- // we need to override the text colour for that combination of selectors.
89
- @include govuk-compatibility(govuk_template) {
90
- &:link:focus {
91
- @include govuk-text-colour;
92
- }
93
- }
94
- }
95
-
96
- .govuk-header__link--homepage {
97
- // Font size needs to be set on the link so that the box sizing is correct
98
- // in Firefox
99
- @include govuk-font($size: false, $weight: bold);
100
-
101
- display: inline-block;
102
- font-size: 30px; // We don't have a mixin that produces 30px font size
103
- line-height: 1;
104
-
105
- &:link,
106
- &:visited {
107
- text-decoration: none;
108
- }
109
-
110
- &:hover,
111
- &:active {
112
- // Negate the added border
113
- margin-bottom: -1px;
114
- // Omitting colour will use default value of currentColor – if we
115
- // specified currentColor explicitly IE8 would ignore this rule.
116
- border-bottom: 1px solid;
117
- }
118
-
119
- // Remove any borders that show when focused and hovered.
120
- &:focus {
121
- margin-bottom: 0;
122
- border-bottom: 0;
123
- }
124
- }
125
-
126
- .govuk-header__link--service-name {
127
- display: inline-block;
128
- margin-bottom: govuk-spacing(2);
129
- @include govuk-font($size: 24, $weight: bold);
130
- }
131
-
132
- .govuk-header__logo,
133
- .govuk-header__content {
134
- box-sizing: border-box;
135
- }
136
-
137
- .govuk-header__logo {
138
- @include govuk-responsive-margin(2, "bottom");
139
- padding-right: govuk-spacing(8);
140
-
141
- @include mq ($from: desktop) {
142
- width: 33.33%;
143
- padding-right: $govuk-gutter-half;
144
- float: left;
145
- vertical-align: top;
146
- }
147
- }
148
-
149
- .govuk-header__content {
150
- @include mq ($from: desktop) {
151
- width: 66.66%;
152
- padding-left: $govuk-gutter-half;
153
- float: left;
154
- }
155
- }
156
-
157
- .govuk-header__menu-button {
158
- @include govuk-font($size: 16);
159
- display: none;
160
- position: absolute;
161
- top: govuk-spacing(4);
162
- right: 0;
163
- margin: 0;
164
- padding: 0;
165
- border: 0;
166
- color: $govuk-header-link;
167
- background: none;
168
-
169
- &:hover {
170
- text-decoration: underline;
171
- }
172
-
173
- &:focus {
174
- @include govuk-focused-text;
175
- }
176
-
177
- &::after {
178
- @include govuk-shape-arrow($direction: down, $base: 10px, $display: inline-block);
179
- content: "";
180
- margin-left: govuk-spacing(1);
181
- }
182
-
183
- @include mq ($from: tablet) {
184
- top: govuk-spacing(3);
185
- }
186
- }
187
-
188
- .govuk-header__menu-button--open {
189
- &::after {
190
- @include govuk-shape-arrow($direction: up, $base: 10px, $display: inline-block);
191
- }
192
- }
193
-
194
- .govuk-header__navigation {
195
- @include govuk-responsive-margin(2, "bottom");
196
- display: block;
197
- margin: 0;
198
- padding: 0;
199
- list-style: none;
200
- }
201
-
202
- .js-enabled {
203
- .govuk-header__menu-button {
204
- display: block;
205
- @include mq ($from: desktop) {
206
- display: none;
207
- }
208
- }
209
-
210
- .govuk-header__navigation {
211
- display: none;
212
- @include mq ($from: desktop) {
213
- display: block;
214
- }
215
- }
216
-
217
- .govuk-header__navigation--open {
218
- display: block;
219
- }
220
- }
221
-
222
-
223
- .govuk-header__navigation--end {
224
- @include mq ($from: desktop) {
225
- margin: 0;
226
- padding: govuk-spacing(1) 0;
227
- text-align: right;
228
- }
229
- }
230
-
231
- .govuk-header__navigation--no-service-name {
232
- padding-top: govuk-spacing(7);
233
- }
234
-
235
- .govuk-header__navigation-item {
236
- padding: govuk-spacing(2) 0;
237
- border-bottom: 1px solid $govuk-header-nav-item-border-color;
238
-
239
- @include mq ($from: desktop) {
240
- display: inline-block;
241
- margin-right: govuk-spacing(3);
242
- padding: govuk-spacing(1) 0;
243
- border: 0;
244
- }
245
-
246
- a {
247
- @include govuk-font($size: 16, $weight: bold);
248
- white-space: nowrap;
249
- }
250
- }
251
-
252
- .govuk-header__navigation-item--active {
253
- a {
254
- &:link,
255
- &:hover,
256
- &:visited {
257
- color: $govuk-header-link-active;
258
- }
259
-
260
- // When focussed, the text colour needs to be darker to ensure that colour
261
- // contrast is still acceptable
262
- &:focus {
263
- color: $govuk-focus-text-colour;
264
- }
265
- }
266
- }
267
-
268
- .govuk-header__navigation-item:last-child {
269
- margin-right: 0;
270
- }
271
-
272
- @include govuk-media-query($media-type: print) {
273
- .govuk-header {
274
- border-bottom-width: 0;
275
- color: govuk-colour("black");
276
- background: transparent;
277
- }
278
-
279
- // Hide the inverted crown when printing in browsers that don't support SVG.
280
- .govuk-header__logotype-crown-fallback-image {
281
- display: none;
282
- }
283
-
284
- .govuk-header__link {
285
- &:link,
286
- &:visited {
287
- color: govuk-colour("black");
288
- }
289
-
290
- // Do not append link href to GOV.UK link when printing (e.g. '(/)')
291
- &:after {
292
- display: none;
293
- }
294
- }
295
- }
296
-
297
- @if $govuk-use-legacy-font {
298
- // Begin adjustments for font baseline offset
299
- // These should be removed when the font is updated with the correct baseline
300
- .govuk-header__logotype-crown,
301
- .govuk-header__logotype-crown-fallback-image {
302
- position: relative;
303
- top: -4px;
304
- vertical-align: middle;
305
- }
306
-
307
- .govuk-header {
308
- $offset: 3px;
309
- padding-top: $offset;
310
- }
311
-
312
- .govuk-header__link--homepage {
313
- line-height: 30px;
314
- }
315
- // End adjustments
316
- }
317
-
318
- }
1
+ @import "../../base";
2
+ @import "./index";
@@ -0,0 +1,309 @@
1
+ @include govuk-exports("govuk/component/header") {
2
+
3
+ $govuk-header-background: govuk-colour("black");
4
+ $govuk-header-border-color: $govuk-brand-colour;
5
+ $govuk-header-border-width: govuk-spacing(2);
6
+ $govuk-header-text: govuk-colour("white");
7
+ $govuk-header-link: govuk-colour("white");
8
+ $govuk-header-link-hover: govuk-colour("white");
9
+ $govuk-header-link-active: #1d8feb;
10
+ $govuk-header-nav-item-border-color: #2e3133;
11
+
12
+ .govuk-header {
13
+ @include govuk-font($size: 16);
14
+
15
+ border-bottom: govuk-spacing(2) solid govuk-colour("white");
16
+ color: $govuk-header-text;
17
+ background: $govuk-header-background;
18
+ }
19
+
20
+ .govuk-header__container--full-width {
21
+ padding: 0 govuk-spacing(3);
22
+ border-color: $govuk-header-border-color;
23
+
24
+ .govuk-header__menu-button {
25
+ right: govuk-spacing(3);
26
+ }
27
+ }
28
+
29
+ .govuk-header__container {
30
+ @include govuk-clearfix;
31
+ position: relative;
32
+ margin-bottom: -$govuk-header-border-width;
33
+ padding-top: govuk-spacing(2);
34
+ border-bottom: $govuk-header-border-width solid $govuk-header-border-color;
35
+ }
36
+
37
+ .govuk-header__logotype {
38
+ display: inline-block;
39
+ margin-right: govuk-spacing(1);
40
+ }
41
+
42
+ .govuk-header__logotype-crown {
43
+ position: relative;
44
+ top: -1px;
45
+ margin-right: 1px;
46
+ fill: currentColor;
47
+ vertical-align: top;
48
+ }
49
+
50
+ .govuk-header__logotype-crown-fallback-image {
51
+ width: 36px;
52
+ height: 32px;
53
+ border: 0;
54
+ vertical-align: middle;
55
+ }
56
+
57
+ .govuk-header__product-name {
58
+ @include govuk-font($size: 24, $line-height: 1);
59
+ display: inline-table;
60
+ padding-right: govuk-spacing(2);
61
+ }
62
+
63
+ .govuk-header__link {
64
+ text-decoration: none;
65
+
66
+ &:link,
67
+ &:visited {
68
+ color: $govuk-header-link;
69
+ }
70
+
71
+ &:hover {
72
+ text-decoration: underline;
73
+ }
74
+
75
+ &:focus {
76
+ @include govuk-focused-text;
77
+ }
78
+
79
+ // alphagov/govuk_template includes a specific a:link:focus selector
80
+ // designed to make unvisited links a slightly darker blue when focussed, so
81
+ // we need to override the text colour for that combination of selectors.
82
+ @include govuk-compatibility(govuk_template) {
83
+ &:link:focus {
84
+ @include govuk-text-colour;
85
+ }
86
+ }
87
+ }
88
+
89
+ .govuk-header__link--homepage {
90
+ // Font size needs to be set on the link so that the box sizing is correct
91
+ // in Firefox
92
+ @include govuk-font($size: false, $weight: bold);
93
+
94
+ display: inline-block;
95
+ font-size: 30px; // We don't have a mixin that produces 30px font size
96
+ line-height: 1;
97
+
98
+ &:link,
99
+ &:visited {
100
+ text-decoration: none;
101
+ }
102
+
103
+ &:hover,
104
+ &:active {
105
+ // Negate the added border
106
+ margin-bottom: -1px;
107
+ // Omitting colour will use default value of currentColor – if we
108
+ // specified currentColor explicitly IE8 would ignore this rule.
109
+ border-bottom: 1px solid;
110
+ }
111
+
112
+ // Remove any borders that show when focused and hovered.
113
+ &:focus {
114
+ margin-bottom: 0;
115
+ border-bottom: 0;
116
+ }
117
+ }
118
+
119
+ .govuk-header__link--service-name {
120
+ display: inline-block;
121
+ margin-bottom: govuk-spacing(2);
122
+ @include govuk-font($size: 24, $weight: bold);
123
+ }
124
+
125
+ .govuk-header__logo,
126
+ .govuk-header__content {
127
+ box-sizing: border-box;
128
+ }
129
+
130
+ .govuk-header__logo {
131
+ @include govuk-responsive-margin(2, "bottom");
132
+ padding-right: govuk-spacing(8);
133
+
134
+ @include govuk-media-query ($from: desktop) {
135
+ width: 33.33%;
136
+ padding-right: $govuk-gutter-half;
137
+ float: left;
138
+ vertical-align: top;
139
+ }
140
+ }
141
+
142
+ .govuk-header__content {
143
+ @include govuk-media-query ($from: desktop) {
144
+ width: 66.66%;
145
+ padding-left: $govuk-gutter-half;
146
+ float: left;
147
+ }
148
+ }
149
+
150
+ .govuk-header__menu-button {
151
+ @include govuk-font($size: 16);
152
+ display: none;
153
+ position: absolute;
154
+ top: govuk-spacing(4);
155
+ right: 0;
156
+ margin: 0;
157
+ padding: 0;
158
+ border: 0;
159
+ color: $govuk-header-link;
160
+ background: none;
161
+
162
+ &:hover {
163
+ text-decoration: underline;
164
+ }
165
+
166
+ &:focus {
167
+ @include govuk-focused-text;
168
+ }
169
+
170
+ &:after {
171
+ @include govuk-shape-arrow($direction: down, $base: 10px, $display: inline-block);
172
+ content: "";
173
+ margin-left: govuk-spacing(1);
174
+ }
175
+
176
+ @include govuk-media-query ($from: tablet) {
177
+ top: govuk-spacing(3);
178
+ }
179
+ }
180
+
181
+ .govuk-header__menu-button--open {
182
+ &:after {
183
+ @include govuk-shape-arrow($direction: up, $base: 10px, $display: inline-block);
184
+ }
185
+ }
186
+
187
+ .govuk-header__navigation {
188
+ @include govuk-responsive-margin(2, "bottom");
189
+ display: block;
190
+ margin: 0;
191
+ padding: 0;
192
+ list-style: none;
193
+ }
194
+
195
+ .js-enabled {
196
+ .govuk-header__menu-button {
197
+ display: block;
198
+ @include govuk-media-query ($from: desktop) {
199
+ display: none;
200
+ }
201
+ }
202
+
203
+ .govuk-header__navigation {
204
+ display: none;
205
+ @include govuk-media-query ($from: desktop) {
206
+ display: block;
207
+ }
208
+ }
209
+
210
+ .govuk-header__navigation--open {
211
+ display: block;
212
+ }
213
+ }
214
+
215
+ .govuk-header__navigation--end {
216
+ @include govuk-media-query ($from: desktop) {
217
+ margin: 0;
218
+ padding: govuk-spacing(1) 0;
219
+ text-align: right;
220
+ }
221
+ }
222
+
223
+ .govuk-header__navigation--no-service-name {
224
+ padding-top: govuk-spacing(7);
225
+ }
226
+
227
+ .govuk-header__navigation-item {
228
+ padding: govuk-spacing(2) 0;
229
+ border-bottom: 1px solid $govuk-header-nav-item-border-color;
230
+
231
+ @include govuk-media-query ($from: desktop) {
232
+ display: inline-block;
233
+ margin-right: govuk-spacing(3);
234
+ padding: govuk-spacing(1) 0;
235
+ border: 0;
236
+ }
237
+
238
+ a {
239
+ @include govuk-font($size: 16, $weight: bold);
240
+ white-space: nowrap;
241
+ }
242
+ }
243
+
244
+ .govuk-header__navigation-item--active {
245
+ a {
246
+ &:link,
247
+ &:hover,
248
+ &:visited {
249
+ color: $govuk-header-link-active;
250
+ }
251
+
252
+ // When focussed, the text colour needs to be darker to ensure that colour
253
+ // contrast is still acceptable
254
+ &:focus {
255
+ color: $govuk-focus-text-colour;
256
+ }
257
+ }
258
+ }
259
+
260
+ .govuk-header__navigation-item:last-child {
261
+ margin-right: 0;
262
+ }
263
+
264
+ @include govuk-media-query($media-type: print) {
265
+ .govuk-header {
266
+ border-bottom-width: 0;
267
+ color: govuk-colour("black");
268
+ background: transparent;
269
+ }
270
+
271
+ // Hide the inverted crown when printing in browsers that don't support SVG.
272
+ .govuk-header__logotype-crown-fallback-image {
273
+ display: none;
274
+ }
275
+
276
+ .govuk-header__link {
277
+ &:link,
278
+ &:visited {
279
+ color: govuk-colour("black");
280
+ }
281
+
282
+ // Do not append link href to GOV.UK link when printing (e.g. '(/)')
283
+ &:after {
284
+ display: none;
285
+ }
286
+ }
287
+ }
288
+
289
+ @if $govuk-use-legacy-font {
290
+ // Begin adjustments for font baseline offset
291
+ // These should be removed when the font is updated with the correct baseline
292
+ .govuk-header__logotype-crown,
293
+ .govuk-header__logotype-crown-fallback-image {
294
+ position: relative;
295
+ top: -4px;
296
+ vertical-align: middle;
297
+ }
298
+
299
+ .govuk-header {
300
+ $offset: 3px;
301
+ padding-top: $offset;
302
+ }
303
+
304
+ .govuk-header__link--homepage {
305
+ line-height: 30px;
306
+ }
307
+ // End adjustments
308
+ }
309
+ }