dxw_govuk_frontend_rails 3.9.1 → 3.13.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (42) hide show
  1. checksums.yaml +4 -4
  2. data/Gemfile.lock +2 -2
  3. data/README.md +61 -40
  4. data/lib/dxw_govuk_frontend_rails/version.rb +1 -1
  5. data/package-lock.json +22 -4
  6. data/package.json +1 -1
  7. data/vendor/assets/javascripts/govuk_frontend_rails.js +119 -4
  8. data/vendor/assets/stylesheets/components/_all.scss +2 -0
  9. data/vendor/assets/stylesheets/components/accordion/_index.scss +7 -16
  10. data/vendor/assets/stylesheets/components/back-link/_index.scss +4 -15
  11. data/vendor/assets/stylesheets/components/breadcrumbs/_index.scss +1 -0
  12. data/vendor/assets/stylesheets/components/button/_index.scss +15 -8
  13. data/vendor/assets/stylesheets/components/character-count/_index.scss +1 -0
  14. data/vendor/assets/stylesheets/components/checkboxes/_index.scss +63 -34
  15. data/vendor/assets/stylesheets/components/cookie-banner/_cookie-banner.scss +2 -0
  16. data/vendor/assets/stylesheets/components/cookie-banner/_index.scss +51 -0
  17. data/vendor/assets/stylesheets/components/details/_index.scss +7 -2
  18. data/vendor/assets/stylesheets/components/error-summary/_index.scss +2 -12
  19. data/vendor/assets/stylesheets/components/file-upload/_index.scss +14 -14
  20. data/vendor/assets/stylesheets/components/footer/_index.scss +39 -29
  21. data/vendor/assets/stylesheets/components/header/_index.scss +44 -22
  22. data/vendor/assets/stylesheets/components/input/_index.scss +4 -0
  23. data/vendor/assets/stylesheets/components/notification-banner/_index.scss +89 -0
  24. data/vendor/assets/stylesheets/components/notification-banner/_notification-banner.scss +2 -0
  25. data/vendor/assets/stylesheets/components/phase-banner/_index.scss +1 -1
  26. data/vendor/assets/stylesheets/components/radios/_index.scss +14 -0
  27. data/vendor/assets/stylesheets/components/skip-link/_index.scss +3 -1
  28. data/vendor/assets/stylesheets/components/table/_index.scss +21 -0
  29. data/vendor/assets/stylesheets/components/tabs/_index.scss +1 -6
  30. data/vendor/assets/stylesheets/components/warning-text/_index.scss +10 -1
  31. data/vendor/assets/stylesheets/core/_links.scss +8 -0
  32. data/vendor/assets/stylesheets/core/_template.scss +0 -1
  33. data/vendor/assets/stylesheets/helpers/_colour.scss +2 -2
  34. data/vendor/assets/stylesheets/helpers/_links.scss +245 -30
  35. data/vendor/assets/stylesheets/objects/_all.scss +1 -0
  36. data/vendor/assets/stylesheets/objects/_button-group.scss +101 -0
  37. data/vendor/assets/stylesheets/objects/_width-container.scss +4 -0
  38. data/vendor/assets/stylesheets/settings/_all.scss +2 -0
  39. data/vendor/assets/stylesheets/settings/_colours-applied.scss +9 -0
  40. data/vendor/assets/stylesheets/settings/_links.scss +62 -0
  41. data/vendor/assets/stylesheets/settings/_typography-font.scss +3 -0
  42. metadata +9 -3
@@ -73,47 +73,49 @@
73
73
  touch-action: manipulation;
74
74
  }
75
75
 
76
- // [ ] Check box
77
- .govuk-checkboxes__label:before {
78
- content: "";
79
- box-sizing: border-box;
80
- position: absolute;
81
- top: 0;
82
- left: 0;
83
- width: $govuk-checkboxes-size;
84
- height: $govuk-checkboxes-size;
85
- border: $govuk-border-width-form-element solid currentColor;
86
- background: transparent;
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
- // ✔ Check mark
90
- //
91
- // The check mark is a box with a border on the left and bottom side (└──),
92
- // rotated 45 degrees
93
- .govuk-checkboxes__label:after {
94
- content: "";
95
- box-sizing: border-box;
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
- position: absolute;
98
- top: 11px;
99
- left: 9px;
100
- width: 23px;
101
- height: 12px;
98
+ position: absolute;
99
+ top: 11px;
100
+ left: 9px;
101
+ width: 23px;
102
+ height: 12px;
102
103
 
103
- -webkit-transform: rotate(-45deg);
104
+ -webkit-transform: rotate(-45deg);
104
105
 
105
- -ms-transform: rotate(-45deg);
106
+ -ms-transform: rotate(-45deg);
106
107
 
107
- transform: rotate(-45deg);
108
- border: solid;
109
- border-width: 0 0 5px 5px;
110
- // Fix bug in IE11 caused by transform rotate (-45deg).
111
- // See: alphagov/govuk_elements/issues/518
112
- border-top-color: transparent;
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
- opacity: 0;
115
+ opacity: 0;
115
116
 
116
- background: transparent;
117
+ background: transparent;
118
+ }
117
119
  }
118
120
 
119
121
  .govuk-checkboxes__hint {
@@ -125,6 +127,20 @@
125
127
  // Focused state
126
128
  .govuk-checkboxes__input:focus + .govuk-checkboxes__label:before {
127
129
  border-width: 4px;
130
+
131
+ // When colours are overridden, the yellow box-shadow becomes invisible
132
+ // which means the focus state is less obvious. By adding a transparent
133
+ // outline, which becomes solid (text-coloured) in that context, we ensure
134
+ // the focus remains clearly visible.
135
+ outline: $govuk-focus-width solid transparent;
136
+ outline-offset: 1px;
137
+
138
+ // When in an explicit forced-color mode, we can use the Highlight system
139
+ // color for the outline to better match focus states of native controls
140
+ @media screen and (forced-colors: active), (-ms-high-contrast: active) {
141
+ outline-color: Highlight;
142
+ }
143
+
128
144
  box-shadow: 0 0 0 $govuk-focus-width $govuk-focus-colour;
129
145
  }
130
146
 
@@ -143,6 +159,19 @@
143
159
  opacity: .5;
144
160
  }
145
161
 
162
+ // =========================================================
163
+ // Dividers ('or')
164
+ // =========================================================
165
+
166
+ .govuk-checkboxes__divider {
167
+ $govuk-divider-size: $govuk-checkboxes-size !default;
168
+ @include govuk-font($size: 19);
169
+ @include govuk-text-colour;
170
+ width: $govuk-divider-size;
171
+ margin-bottom: govuk-spacing(2);
172
+ text-align: center;
173
+ }
174
+
146
175
  // =========================================================
147
176
  // Conditional reveals
148
177
  // =========================================================
@@ -0,0 +1,2 @@
1
+ @import "../../base";
2
+ @import "./index";
@@ -0,0 +1,51 @@
1
+ @include govuk-exports("govuk/component/cookie-banner") {
2
+
3
+ // This needs to be kept in sync with the header component's styles
4
+ $border-bottom-width: govuk-spacing(2);
5
+
6
+ .govuk-cookie-banner {
7
+ @include govuk-font($size: 19);
8
+
9
+ padding-top: govuk-spacing(4);
10
+ // The component does not set bottom spacing.
11
+ // The bottom spacing should be created by the items inside the component.
12
+
13
+ // Visually separate the cookie banner from content underneath
14
+ // when user changes colours in their browser.
15
+ border-bottom: $border-bottom-width solid transparent;
16
+
17
+ background-color: govuk-colour("light-grey", $legacy: "grey-3");
18
+ }
19
+
20
+ // Support older browsers which don't hide elements with the `hidden` attribute
21
+ // when user hides the whole cookie banner with a 'Hide' button.
22
+ .govuk-cookie-banner[hidden] {
23
+ display: none;
24
+ }
25
+
26
+ .govuk-cookie-banner__message {
27
+ // Remove the extra height added by the separator border.
28
+ margin-bottom: -$border-bottom-width;
29
+
30
+ &[hidden] {
31
+ // Support older browsers which don't hide elements with the `hidden` attribute
32
+ // when the visibility of cookie and replacement messages is toggled.
33
+ display: none;
34
+ }
35
+
36
+ &:focus {
37
+ // Remove the native visible focus indicator when the element is programmatically focused.
38
+ //
39
+ // The focused cookie banner is the first element on the page and the last thing the user
40
+ // interacted with prior to it gaining focus.
41
+ // We therefore assume that moving focus to it is not going to surprise users, and that giving
42
+ // it a visible focus indicator could be more confusing than helpful, especially as the
43
+ // element is not normally keyboard operable.
44
+ //
45
+ // We have flagged this in the research section of the guidance as something to monitor.
46
+ //
47
+ // A related discussion: https://github.com/w3c/wcag/issues/1001
48
+ outline: none;
49
+ }
50
+ }
51
+ }
@@ -34,7 +34,11 @@
34
34
 
35
35
  // ...but only underline the text, not the arrow
36
36
  .govuk-details__summary-text {
37
- text-decoration: underline;
37
+ @include govuk-link-decoration;
38
+ }
39
+
40
+ .govuk-details__summary:hover .govuk-details__summary-text {
41
+ @include govuk-link-hover-decoration;
38
42
  }
39
43
 
40
44
  // Remove the underline when focussed to avoid duplicate borders
@@ -67,7 +71,8 @@
67
71
  }
68
72
 
69
73
  .govuk-details__text {
70
- padding: govuk-spacing(3);
74
+ padding-top: govuk-spacing(3);
75
+ padding-bottom: govuk-spacing(3);
71
76
  padding-left: govuk-spacing(4);
72
77
  border-left: $govuk-border-width solid $govuk-border-colour;
73
78
  }
@@ -37,17 +37,7 @@
37
37
 
38
38
  .govuk-error-summary__list a {
39
39
  @include govuk-typography-weight-bold;
40
-
41
- // Override default link styling to use error colour
42
- &:link,
43
- &:visited,
44
- &:hover,
45
- &:active {
46
- color: $govuk-error-colour;
47
- }
48
-
49
- &:focus {
50
- @include govuk-focused-text;
51
- }
40
+ @include govuk-link-common;
41
+ @include govuk-link-style-error;
52
42
  }
53
43
  }
@@ -8,17 +8,22 @@
8
8
  .govuk-file-upload {
9
9
  @include govuk-font($size: 19);
10
10
  @include govuk-text-colour;
11
- padding-top: $component-padding;
12
- padding-bottom: $component-padding;
11
+ max-width: 100%;
12
+ margin-left: -$component-padding;
13
+ padding: $component-padding;
14
+
15
+ // The default file upload button in Safari does not
16
+ // support setting a custom font-size. Set `-webkit-appearance`
17
+ // to `button` to drop out of the native appearance so the
18
+ // font-size is set to 19px
19
+ // https://bugs.webkit.org/show_bug.cgi?id=224746
20
+ &::-webkit-file-upload-button {
21
+ -webkit-appearance: button;
22
+ color: inherit;
23
+ font: inherit;
24
+ }
13
25
 
14
26
  &:focus {
15
- // "Yank" the padding with negative margin to avoid a jump
16
- // when element is focused
17
- margin-right: -$component-padding;
18
- margin-left: -$component-padding;
19
- padding-right: $component-padding;
20
- padding-left: $component-padding;
21
-
22
27
  outline: $govuk-focus-width solid $govuk-focus-colour;
23
28
  // Use `box-shadow` to add border instead of changing `border-width`
24
29
  // (which changes element size) and since `outline` is already used for the
@@ -37,11 +42,6 @@
37
42
  // to recognise `focus-within` and don't set any styles from the block
38
43
  // when it's a selector.
39
44
  &:focus-within {
40
- margin-right: -$component-padding;
41
- margin-left: -$component-padding;
42
- padding-right: $component-padding;
43
- padding-left: $component-padding;
44
-
45
45
  outline: $govuk-focus-width solid $govuk-focus-colour;
46
46
 
47
47
  box-shadow: inset 0 0 0 4px $govuk-input-border-colour;
@@ -6,17 +6,13 @@
6
6
  // as it'll just be the same as $govuk-footer-border.
7
7
  $govuk-footer-border-top: $govuk-border-colour;
8
8
  $govuk-footer-text: $govuk-text-colour;
9
- $govuk-footer-link: $govuk-footer-text;
10
- $govuk-footer-link-hover: false;
9
+ $govuk-footer-link-hover-colour: null; // Only used with the legacy palette
11
10
 
12
11
  @if ($govuk-use-legacy-palette) {
13
12
  $govuk-footer-border-top: #a1acb2;
14
13
  $govuk-footer-border: govuk-colour("grey-2");
15
14
  $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;
15
+ $govuk-footer-link-hover-colour: #171819;
20
16
  }
21
17
 
22
18
  // Based on the govuk-crest-2x.png image dimensions.
@@ -37,27 +33,20 @@
37
33
  }
38
34
 
39
35
  .govuk-footer__link {
36
+ @include govuk-link-common;
37
+
40
38
  @if ($govuk-use-legacy-palette) {
41
39
  &:link,
42
40
  &:visited {
43
- color: $govuk-footer-link;
41
+ color: $govuk-footer-text;
44
42
  }
45
43
 
46
44
  &:hover,
47
45
  &:active {
48
- color: $govuk-footer-link-hover;
46
+ color: $govuk-footer-link-hover-colour;
49
47
  }
50
48
  } @else {
51
- &:link,
52
- &:visited,
53
- &:hover,
54
- &:active {
55
- color: $govuk-footer-link;
56
- }
57
- }
58
-
59
- &:focus {
60
- @include govuk-focused-text;
49
+ @include govuk-link-style-text;
61
50
  }
62
51
 
63
52
  // alphagov/govuk_template includes a specific a:link:focus selector
@@ -79,16 +68,20 @@
79
68
 
80
69
  .govuk-footer__meta {
81
70
  display: -webkit-box;
71
+ display: -webkit-flex;
82
72
  display: -ms-flexbox;
83
73
  display: flex; // Support: Flexbox
84
74
  margin-right: -$govuk-gutter-half;
85
75
  margin-left: -$govuk-gutter-half;
86
- -ms-flex-wrap: wrap;
87
- flex-wrap: wrap; // Support: Flexbox
76
+ -webkit-flex-wrap: wrap;
77
+ -ms-flex-wrap: wrap;
78
+ flex-wrap: wrap; // Support: Flexbox
88
79
  -webkit-box-align: end;
80
+ -webkit-align-items: flex-end;
89
81
  -ms-flex-align: end;
90
82
  align-items: flex-end; // Support: Flexbox
91
83
  -webkit-box-pack: center;
84
+ -webkit-justify-content: center;
92
85
  -ms-flex-pack: center;
93
86
  justify-content: center; // Support: Flexbox
94
87
  }
@@ -101,11 +94,13 @@
101
94
 
102
95
  .govuk-footer__meta-item--grow {
103
96
  -webkit-box-flex: 1;
97
+ -webkit-flex: 1;
104
98
  -ms-flex: 1;
105
99
  flex: 1; // Support: Flexbox
106
100
  @include govuk-media-query ($until: tablet) {
107
- -ms-flex-preferred-size: 320px;
108
- flex-basis: 320px; // Support: Flexbox
101
+ -webkit-flex-basis: 320px;
102
+ -ms-flex-preferred-size: 320px;
103
+ flex-basis: 320px; // Support: Flexbox
109
104
  }
110
105
  }
111
106
 
@@ -116,6 +111,9 @@
116
111
  margin-bottom: govuk-spacing(3);
117
112
  }
118
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;
119
117
  }
120
118
 
121
119
  .govuk-footer__licence-description {
@@ -134,7 +132,6 @@
134
132
  background-position: 50% 0%;
135
133
  background-size: $govuk-footer-crest-image-width $govuk-footer-crest-image-height;
136
134
  text-align: center;
137
- text-decoration: none;
138
135
  white-space: nowrap;
139
136
  }
140
137
 
@@ -165,12 +162,14 @@
165
162
 
166
163
  .govuk-footer__navigation {
167
164
  display: -webkit-box;
165
+ display: -webkit-flex;
168
166
  display: -ms-flexbox;
169
167
  display: flex; // Support: Flexbox
170
168
  margin-right: -$govuk-gutter-half;
171
169
  margin-left: -$govuk-gutter-half;
172
- -ms-flex-wrap: wrap;
173
- flex-wrap: wrap; // Support: Flexbox
170
+ -webkit-flex-wrap: wrap;
171
+ -ms-flex-wrap: wrap;
172
+ flex-wrap: wrap; // Support: Flexbox
174
173
  }
175
174
 
176
175
  .govuk-footer__section {
@@ -181,15 +180,18 @@
181
180
  vertical-align: top;
182
181
  // Ensure columns take up equal width (typically one-half:one-half)
183
182
  -webkit-box-flex: 1;
183
+ -webkit-flex-grow: 1;
184
184
  -ms-flex-positive: 1;
185
185
  flex-grow: 1; // Support: Flexbox
186
- -ms-flex-negative: 1;
187
- flex-shrink: 1; // Support: Flexbox
186
+ -webkit-flex-shrink: 1;
187
+ -ms-flex-negative: 1;
188
+ flex-shrink: 1; // Support: Flexbox
188
189
  @include govuk-media-query ($until: desktop) {
189
190
  // Make sure columns do not drop below 200px in width
190
191
  // 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
192
+ -webkit-flex-basis: 200px;
193
+ -ms-flex-preferred-size: 200px;
194
+ flex-basis: 200px; // Support: Flexbox
193
195
  }
194
196
  }
195
197
 
@@ -199,6 +201,7 @@
199
201
  // To ensure the section is one of two, we can count backwards using `:nth-last-child(2)`.
200
202
  .govuk-footer__section:first-child:nth-last-child(2) {
201
203
  -webkit-box-flex: 2;
204
+ -webkit-flex-grow: 2;
202
205
  -ms-flex-positive: 2;
203
206
  flex-grow: 2; // Support: Flexbox
204
207
  }
@@ -210,6 +213,13 @@
210
213
  list-style: none;
211
214
  -webkit-column-gap: $govuk-gutter;
212
215
  column-gap: $govuk-gutter; // Support: Columns
216
+
217
+ // Disable thicker underlines on hover because of a bug in Chromium
218
+ // affecting links within columns
219
+ // https://bugs.chromium.org/p/chromium/issues/detail?id=1190987
220
+ .govuk-footer__link:hover {
221
+ text-decoration-thickness: auto;
222
+ }
213
223
  }
214
224
 
215
225
  @include govuk-media-query ($from: desktop) {
@@ -4,10 +4,9 @@
4
4
  $govuk-header-border-color: $govuk-brand-colour;
5
5
  $govuk-header-border-width: govuk-spacing(2);
6
6
  $govuk-header-text: govuk-colour("white");
7
- $govuk-header-link: govuk-colour("white");
8
- $govuk-header-link-hover: govuk-colour("white");
9
7
  $govuk-header-link-active: #1d8feb;
10
8
  $govuk-header-nav-item-border-color: #2e3133;
9
+ $govuk-header-link-underline-thickness: 3px;
11
10
 
12
11
  .govuk-header {
13
12
  @include govuk-font($size: 16);
@@ -36,7 +35,23 @@
36
35
 
37
36
  .govuk-header__logotype {
38
37
  display: inline-block;
38
+
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.
39
41
  margin-right: govuk-spacing(1);
42
+
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
+ }
49
+
50
+ // Remove the gap after the logo if there's no product name to keep hover
51
+ // and focus states neat
52
+ &:last-child {
53
+ margin-right: 0;
54
+ }
40
55
  }
41
56
 
42
57
  .govuk-header__logotype-crown {
@@ -51,39 +66,39 @@
51
66
  width: 36px;
52
67
  height: 32px;
53
68
  border: 0;
54
- vertical-align: middle;
69
+ vertical-align: bottom;
55
70
  }
56
71
 
57
72
  .govuk-header__product-name {
58
73
  @include govuk-font($size: 24, $line-height: 1);
59
74
  display: inline-table;
60
- padding-right: govuk-spacing(2);
61
75
  }
62
76
 
63
77
  .govuk-header__link {
64
- text-decoration: none;
78
+ // Avoid using the `govuk-link-common` mixin because the links in the header
79
+ // get a special treatment, because:
80
+ //
81
+ // - underlines are only visible on hover
82
+ // - all links get a 3px underline regardless of text size, as there are
83
+ // multiple grouped elements close to one another and having slightly
84
+ // different underline widths looks unbalanced
85
+ @include govuk-typography-common;
86
+ @include govuk-link-style-inverse;
65
87
 
66
- &:link,
67
- &:visited {
68
- color: $govuk-header-link;
69
- }
88
+ text-decoration: none;
70
89
 
71
90
  &:hover {
72
91
  text-decoration: underline;
92
+ text-decoration-thickness: $govuk-header-link-underline-thickness;
93
+
94
+ @if ($govuk-link-underline-offset) {
95
+ text-underline-offset: $govuk-link-underline-offset;
96
+ }
73
97
  }
74
98
 
75
99
  &:focus {
76
100
  @include govuk-focused-text;
77
101
  }
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
102
  }
88
103
 
89
104
  .govuk-header__link--homepage {
@@ -92,6 +107,7 @@
92
107
  @include govuk-font($size: false, $weight: bold);
93
108
 
94
109
  display: inline-block;
110
+ margin-right: govuk-spacing(2);
95
111
  font-size: 30px; // We don't have a mixin that produces 30px font size
96
112
  line-height: 1;
97
113
 
@@ -103,10 +119,10 @@
103
119
  &:hover,
104
120
  &:active {
105
121
  // Negate the added border
106
- margin-bottom: -1px;
122
+ margin-bottom: $govuk-header-link-underline-thickness * -1;
107
123
  // Omitting colour will use default value of currentColor – if we
108
124
  // specified currentColor explicitly IE8 would ignore this rule.
109
- border-bottom: 1px solid;
125
+ border-bottom: $govuk-header-link-underline-thickness solid;
110
126
  }
111
127
 
112
128
  // Remove any borders that show when focused and hovered.
@@ -156,11 +172,17 @@
156
172
  margin: 0;
157
173
  padding: 0;
158
174
  border: 0;
159
- color: $govuk-header-link;
175
+ color: govuk-colour("white");
160
176
  background: none;
177
+ cursor: pointer;
161
178
 
162
179
  &:hover {
163
- text-decoration: underline;
180
+ -webkit-text-decoration: solid underline $govuk-header-link-underline-thickness;
181
+ text-decoration: solid underline $govuk-header-link-underline-thickness;
182
+
183
+ @if ($govuk-link-underline-offset) {
184
+ text-underline-offset: $govuk-link-underline-offset;
185
+ }
164
186
  }
165
187
 
166
188
  &:focus {
@@ -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;
@@ -0,0 +1,89 @@
1
+ @include govuk-exports("govuk/component/notification-banner") {
2
+ .govuk-notification-banner {
3
+ @include govuk-font($size: 19);
4
+ @include govuk-responsive-margin(8, "bottom");
5
+
6
+ border: $govuk-border-width solid $govuk-brand-colour;
7
+
8
+ background-color: $govuk-brand-colour;
9
+
10
+ &:focus {
11
+ outline: $govuk-focus-width solid $govuk-focus-colour;
12
+ }
13
+ }
14
+
15
+ .govuk-notification-banner__header {
16
+ padding: 2px govuk-spacing(3) govuk-spacing(1);
17
+
18
+ // Ensures the notification header appears separate to the notification body text in high contrast mode
19
+ border-bottom: 1px solid transparent;
20
+
21
+ @include govuk-media-query($from: tablet) {
22
+ padding: 2px govuk-spacing(4) govuk-spacing(1);
23
+ }
24
+ }
25
+
26
+ .govuk-notification-banner__title {
27
+ @include govuk-font($size: 19, $weight: bold);
28
+
29
+ margin: 0;
30
+
31
+ padding: 0;
32
+
33
+ color: govuk-colour("white");
34
+ }
35
+
36
+ .govuk-notification-banner__content {
37
+ $padding-tablet: govuk-spacing(4);
38
+ @include govuk-text-colour;
39
+ padding: govuk-spacing(3);
40
+
41
+ background-color: $govuk-body-background-colour;
42
+
43
+ @include govuk-media-query($from: tablet) {
44
+ padding: $padding-tablet;
45
+ }
46
+
47
+ // Wrap content at the same place that a 2/3 grid column ends, to maintain
48
+ // shorter line-lengths when the notification banner is full width
49
+ > * {
50
+ // When elements have their own padding (like lists), include the padding
51
+ // in the max-width calculation
52
+ box-sizing: border-box;
53
+
54
+ // Calculate the internal width of a two-thirds column...
55
+ $two-col-width: ($govuk-page-width * 2 / 3) - ($govuk-gutter * 1 / 3);
56
+
57
+ // ...and then factor in the left border and padding
58
+ $banner-exterior: ($padding-tablet + $govuk-border-width);
59
+ max-width: $two-col-width - $banner-exterior;
60
+ }
61
+
62
+ > :last-child {
63
+ margin-bottom: 0;
64
+ }
65
+ }
66
+
67
+ .govuk-notification-banner__heading {
68
+ @include govuk-font($size: 24, $weight: bold);
69
+
70
+ margin: 0 0 govuk-spacing(3) 0;
71
+
72
+ padding: 0;
73
+ }
74
+
75
+ .govuk-notification-banner__link {
76
+ @include govuk-link-common;
77
+ @include govuk-link-style-no-visited-state;
78
+ }
79
+
80
+ .govuk-notification-banner--success {
81
+ border-color: $govuk-success-colour;
82
+
83
+ background-color: $govuk-success-colour;
84
+
85
+ .govuk-notification-banner__link {
86
+ @include govuk-link-style-success;
87
+ }
88
+ }
89
+ }
@@ -0,0 +1,2 @@
1
+ @import "../../base";
2
+ @import "./index";