katalyst-govuk-formbuilder 1.10.1 → 1.11.0
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.
- checksums.yaml +4 -4
- data/app/assets/builds/katalyst/govuk/formbuilder.css +20 -20
- data/lib/katalyst/govuk/formbuilder/engine.rb +1 -0
- data/lib/katalyst/govuk/formbuilder.rb +3 -0
- data/node_modules/govuk-frontend/dist/govuk/components/_index.scss +1 -0
- data/node_modules/govuk-frontend/dist/govuk/components/accordion/_index.scss +35 -31
- data/node_modules/govuk-frontend/dist/govuk/components/character-count/_index.scss +4 -4
- data/node_modules/govuk-frontend/dist/govuk/components/checkboxes/_index.scss +6 -1
- data/node_modules/govuk-frontend/dist/govuk/components/cookie-banner/_index.scss +16 -13
- data/node_modules/govuk-frontend/dist/govuk/components/date-input/_index.scss +1 -2
- data/node_modules/govuk-frontend/dist/govuk/components/error-summary/_index.scss +4 -0
- data/node_modules/govuk-frontend/dist/govuk/components/fieldset/_index.scss +3 -5
- data/node_modules/govuk-frontend/dist/govuk/components/file-upload/_index.scss +8 -9
- data/node_modules/govuk-frontend/dist/govuk/components/header/_index.scss +8 -0
- data/node_modules/govuk-frontend/dist/govuk/components/input/_index.scss +7 -4
- data/node_modules/govuk-frontend/dist/govuk/components/notification-banner/_index.scss +3 -2
- data/node_modules/govuk-frontend/dist/govuk/components/pagination/_index.scss +24 -37
- data/node_modules/govuk-frontend/dist/govuk/components/panel/_index.scss +13 -9
- data/node_modules/govuk-frontend/dist/govuk/components/password-input/_index.scss +12 -9
- data/node_modules/govuk-frontend/dist/govuk/components/phase-banner/_index.scss +0 -8
- data/node_modules/govuk-frontend/dist/govuk/components/radios/_index.scss +7 -5
- data/node_modules/govuk-frontend/dist/govuk/components/select/_index.scss +5 -5
- data/node_modules/govuk-frontend/dist/govuk/components/service-navigation/_index.scss +162 -0
- data/node_modules/govuk-frontend/dist/govuk/components/service-navigation/_service-navigation.scss +4 -0
- data/node_modules/govuk-frontend/dist/govuk/components/skip-link/_index.scss +6 -4
- data/node_modules/govuk-frontend/dist/govuk/components/summary-list/_index.scss +2 -1
- data/node_modules/govuk-frontend/dist/govuk/components/tag/_index.scss +11 -8
- data/node_modules/govuk-frontend/dist/govuk/components/task-list/_index.scss +12 -10
- data/node_modules/govuk-frontend/dist/govuk/components/textarea/_index.scss +3 -3
- data/node_modules/govuk-frontend/dist/govuk/components/warning-text/_index.scss +2 -2
- data/node_modules/govuk-frontend/dist/govuk/core/_govuk-frontend-properties.scss +1 -1
- data/node_modules/govuk-frontend/dist/govuk/helpers/_colour.scss +44 -8
- data/node_modules/govuk-frontend/dist/govuk/helpers/_grid.scss +1 -1
- data/node_modules/govuk-frontend/dist/govuk/helpers/_links.scss +2 -2
- data/node_modules/govuk-frontend/dist/govuk/helpers/_shape-arrow.scss +1 -1
- data/node_modules/govuk-frontend/dist/govuk/helpers/_typography.scss +17 -0
- data/node_modules/govuk-frontend/dist/govuk/helpers/_visually-hidden.scss +30 -62
- data/node_modules/govuk-frontend/dist/govuk/overrides/_typography.scss +5 -1
- data/node_modules/govuk-frontend/dist/govuk/settings/_colours-organisations.scss +235 -9
- metadata +5 -3
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: 205c71b26044c257f432d3ab429eff7beeeb0c924f775df314732703d240a04f
|
4
|
+
data.tar.gz: 9a1733f6a7e41eefdeb6c096f21cbe7a328d6d7a159b6c57b3382d3f6e153236
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 5ccc46b82e579a72033f4f79b5afd9f8928962cc67b4f19d4e0a8b513ded75b56c96af01e567e9456a1ab85c520c83da1a2854a27c961561f680e89be14b25f4
|
7
|
+
data.tar.gz: 6ed137133d42622545c5f3b9178f7165976a7eaf732f29bcd353ddcd10232bd84a20dc93488257cb9765a2b0713a05561702c69291efc38d1619633a45f211aa
|
@@ -43,7 +43,7 @@
|
|
43
43
|
|
44
44
|
|
45
45
|
:root {
|
46
|
-
--govuk-frontend-version: "5.
|
46
|
+
--govuk-frontend-version: "5.6.0";
|
47
47
|
--govuk-frontend-breakpoint-mobile: 20rem;
|
48
48
|
--govuk-frontend-breakpoint-tablet: 40.0625rem;
|
49
49
|
--govuk-frontend-breakpoint-desktop: 48.0625rem;
|
@@ -1958,8 +1958,8 @@
|
|
1958
1958
|
|
1959
1959
|
.govuk-checkboxes__conditional {
|
1960
1960
|
margin-bottom: 15px;
|
1961
|
-
margin-left:
|
1962
|
-
padding-left:
|
1961
|
+
margin-left: 20px;
|
1962
|
+
padding-left: 35px;
|
1963
1963
|
border-left: 4px solid #b1b4b6;
|
1964
1964
|
}
|
1965
1965
|
@media (min-width: 40.0625em) {
|
@@ -2003,6 +2003,10 @@
|
|
2003
2003
|
margin-left: 10px;
|
2004
2004
|
padding-left: 20px;
|
2005
2005
|
}
|
2006
|
+
.govuk-checkboxes--small .govuk-checkboxes__divider {
|
2007
|
+
width: 24px;
|
2008
|
+
margin-bottom: 5px;
|
2009
|
+
}
|
2006
2010
|
.govuk-checkboxes--small .govuk-checkboxes__item:hover .govuk-checkboxes__input:not(:disabled) + .govuk-checkboxes__label::before {
|
2007
2011
|
outline: 3px dashed transparent;
|
2008
2012
|
outline-offset: 1px;
|
@@ -2330,6 +2334,9 @@
|
|
2330
2334
|
margin-top: 20px;
|
2331
2335
|
}
|
2332
2336
|
}
|
2337
|
+
.govuk-error-summary__body > :last-child {
|
2338
|
+
margin-bottom: 5px;
|
2339
|
+
}
|
2333
2340
|
|
2334
2341
|
.govuk-error-summary__list {
|
2335
2342
|
margin-bottom: 0;
|
@@ -2592,8 +2599,8 @@
|
|
2592
2599
|
|
2593
2600
|
.govuk-radios__conditional {
|
2594
2601
|
margin-bottom: 15px;
|
2595
|
-
margin-left:
|
2596
|
-
padding-left:
|
2602
|
+
margin-left: 20px;
|
2603
|
+
padding-left: 35px;
|
2597
2604
|
border-left: 4px solid #b1b4b6;
|
2598
2605
|
}
|
2599
2606
|
@media (min-width: 40.0625em) {
|
@@ -2817,34 +2824,22 @@
|
|
2817
2824
|
content: " ";
|
2818
2825
|
}
|
2819
2826
|
|
2820
|
-
.govuk-visually-hidden-focusable {
|
2827
|
+
.govuk-visually-hidden-focusable:not(:active):not(:focus) {
|
2821
2828
|
position: absolute !important;
|
2822
2829
|
width: 1px !important;
|
2823
2830
|
height: 1px !important;
|
2824
2831
|
margin: 0 !important;
|
2832
|
+
padding: 0 !important;
|
2825
2833
|
overflow: hidden !important;
|
2826
2834
|
clip: rect(0 0 0 0) !important;
|
2827
2835
|
-webkit-clip-path: inset(50%) !important;
|
2828
2836
|
clip-path: inset(50%) !important;
|
2837
|
+
border: 0 !important;
|
2829
2838
|
white-space: nowrap !important;
|
2830
2839
|
-webkit-user-select: none;
|
2831
2840
|
-ms-user-select: none;
|
2832
2841
|
user-select: none;
|
2833
2842
|
}
|
2834
|
-
.govuk-visually-hidden-focusable:active, .govuk-visually-hidden-focusable:focus {
|
2835
|
-
position: static !important;
|
2836
|
-
width: auto !important;
|
2837
|
-
height: auto !important;
|
2838
|
-
margin: inherit !important;
|
2839
|
-
overflow: visible !important;
|
2840
|
-
clip: auto !important;
|
2841
|
-
-webkit-clip-path: none !important;
|
2842
|
-
clip-path: none !important;
|
2843
|
-
white-space: inherit !important;
|
2844
|
-
-webkit-user-select: text;
|
2845
|
-
-ms-user-select: text;
|
2846
|
-
user-select: text;
|
2847
|
-
}
|
2848
2843
|
|
2849
2844
|
|
2850
2845
|
|
@@ -4132,6 +4127,11 @@
|
|
4132
4127
|
font-variant-numeric: tabular-nums !important;
|
4133
4128
|
}
|
4134
4129
|
|
4130
|
+
.govuk-\!-text-break-word {
|
4131
|
+
word-wrap: break-word !important;
|
4132
|
+
overflow-wrap: break-word !important;
|
4133
|
+
}
|
4134
|
+
|
4135
4135
|
|
4136
4136
|
.govuk-\!-width-full {
|
4137
4137
|
width: 100% !important;
|
@@ -102,9 +102,9 @@
|
|
102
102
|
&:hover {
|
103
103
|
color: $govuk-accordion-base-colour;
|
104
104
|
background: $govuk-accordion-hover-colour;
|
105
|
-
// The
|
106
|
-
// button. We add a grey box-shadow on hover too, to make the height of
|
107
|
-
// match the height of the focus state.
|
105
|
+
// The focus state adds a box-shadow to the top and bottom of the
|
106
|
+
// button. We add a grey box-shadow on hover too, to make the height of
|
107
|
+
// the hover state match the height of the focus state.
|
108
108
|
box-shadow:
|
109
109
|
0 -2px $govuk-accordion-hover-colour,
|
110
110
|
0 4px $govuk-accordion-hover-colour;
|
@@ -147,7 +147,7 @@
|
|
147
147
|
|
148
148
|
position: relative;
|
149
149
|
|
150
|
-
// Set size using rems
|
150
|
+
// Set size using rems so icon scales with text
|
151
151
|
width: govuk-px-to-rem(20px);
|
152
152
|
height: govuk-px-to-rem(20px);
|
153
153
|
|
@@ -184,14 +184,15 @@
|
|
184
184
|
.govuk-accordion__section-button {
|
185
185
|
width: 100%;
|
186
186
|
|
187
|
-
padding: govuk-spacing(2) 0 0
|
187
|
+
padding: govuk-spacing(2) 0 0;
|
188
188
|
|
189
189
|
border: 0;
|
190
190
|
|
191
191
|
border-top: $govuk-accordion-bottom-border-width solid $govuk-border-colour;
|
192
192
|
|
193
|
-
// Visually separate the section from the one underneath when user changes
|
194
|
-
// browser. See
|
193
|
+
// Visually separate the section from the one underneath when user changes
|
194
|
+
// colours in their browser. See
|
195
|
+
// https://github.com/alphagov/govuk-frontend/issues/2321#issuecomment-924201488
|
195
196
|
border-bottom: govuk-spacing(2) solid transparent;
|
196
197
|
|
197
198
|
color: $govuk-text-colour;
|
@@ -230,8 +231,8 @@
|
|
230
231
|
}
|
231
232
|
|
232
233
|
&:focus {
|
233
|
-
// Remove default focus border around button as
|
234
|
-
//
|
234
|
+
// Remove default focus border around button as styling is being applied
|
235
|
+
// to inner text elements that receive focus
|
235
236
|
outline: 0;
|
236
237
|
|
237
238
|
.govuk-accordion__section-heading-text-focus,
|
@@ -257,9 +258,10 @@
|
|
257
258
|
}
|
258
259
|
}
|
259
260
|
|
260
|
-
// Remove the transparent border when the section is expanded to make it
|
261
|
-
// relates to the content below. Adjust padding to
|
262
|
-
//
|
261
|
+
// Remove the transparent border when the section is expanded to make it
|
262
|
+
// clear that the heading relates to the content below. Adjust padding to
|
263
|
+
// maintain the height of the element. See
|
264
|
+
// https://github.com/alphagov/govuk-frontend/pull/2257#issuecomment-951920798
|
263
265
|
.govuk-accordion__section--expanded .govuk-accordion__section-button {
|
264
266
|
padding-bottom: govuk-spacing(3);
|
265
267
|
border-bottom: 0;
|
@@ -269,8 +271,8 @@
|
|
269
271
|
}
|
270
272
|
}
|
271
273
|
|
272
|
-
// As Chevron icon is vertically aligned it overlaps with the focus state
|
273
|
-
//
|
274
|
+
// As Chevron icon is vertically aligned it overlaps with the focus state
|
275
|
+
// bottom border – this adds some spacing
|
274
276
|
.govuk-accordion__section-button:focus .govuk-accordion__section-toggle-focus {
|
275
277
|
padding-bottom: 3px;
|
276
278
|
|
@@ -299,9 +301,9 @@
|
|
299
301
|
color: $govuk-link-colour;
|
300
302
|
}
|
301
303
|
|
302
|
-
// Add space between the icon and text.
|
303
|
-
//
|
304
|
-
//
|
304
|
+
// Add space between the icon and text. Avoid applying spacing directly to
|
305
|
+
// the icon as the use of `transform` will change the placement of any
|
306
|
+
// margins.
|
305
307
|
.govuk-accordion__show-all-text,
|
306
308
|
.govuk-accordion__section-toggle-text {
|
307
309
|
margin-left: govuk-spacing(1);
|
@@ -310,23 +312,25 @@
|
|
310
312
|
|
311
313
|
// Background colour adjustment when user changes colours in Firefox
|
312
314
|
//
|
313
|
-
// When user changes colours in Firefox, text colour inside <button> is
|
314
|
-
// (regardless of the custom colours the user has set). This is
|
315
|
-
// button is not nested inside another element
|
316
|
-
//
|
317
|
-
// custom
|
315
|
+
// When user changes colours in Firefox, text colour inside <button> is
|
316
|
+
// always black (regardless of the custom colours the user has set). This is
|
317
|
+
// fine when the text in the button is not nested inside another element
|
318
|
+
// because when user changes colours in Firefox, the immediate background
|
319
|
+
// colour of buttons is always white (again, regardless of user's custom
|
320
|
+
// colours).
|
318
321
|
//
|
319
|
-
// However, when the text inside <button> is wrapped inside another element
|
320
|
-
// sets a background colour, the text colour is still black
|
321
|
-
//
|
322
|
-
//
|
323
|
-
//
|
322
|
+
// However, when the text inside <button> is wrapped inside another element
|
323
|
+
// AND that element sets a background colour, the text colour is still black
|
324
|
+
// but the background of that nested element gets the user's custom
|
325
|
+
// background colour. When the custom background is a lighter hue, the
|
326
|
+
// contrast might be sufficient. But if the user's custom background colour
|
327
|
+
// is a darker colour, the contrast with the text might not be sufficient.
|
324
328
|
//
|
325
|
-
// To ensure sufficient contrast, override the background colour set by the
|
326
|
-
// nested elements to be transparent.
|
329
|
+
// To ensure sufficient contrast, override the background colour set by the
|
330
|
+
// focus state on the nested elements to be transparent.
|
327
331
|
//
|
328
|
-
// Also override the background colour of the Show/Hide chevrons which set a
|
329
|
-
// on hover.
|
332
|
+
// Also override the background colour of the Show/Hide chevrons which set a
|
333
|
+
// background colour on hover.
|
330
334
|
@media screen and (forced-colors: active) {
|
331
335
|
.govuk-accordion__show-all:hover,
|
332
336
|
.govuk-accordion__section-button:hover {
|
@@ -19,10 +19,10 @@
|
|
19
19
|
margin-bottom: 0;
|
20
20
|
|
21
21
|
&::after {
|
22
|
-
// Zero-width space that will reserve vertical space when no hint is
|
23
|
-
// as:
|
24
|
-
// - setting a min-height is not possible without a magic number
|
25
|
-
//
|
22
|
+
// Zero-width space that will reserve vertical space when no hint is
|
23
|
+
// provided as:
|
24
|
+
// - setting a min-height is not possible without a magic number because
|
25
|
+
// the line-height is set by the `govuk-font` call above
|
26
26
|
// - using `:empty` is not possible as the hint macro outputs line breaks
|
27
27
|
content: "\200B";
|
28
28
|
}
|
@@ -159,7 +159,7 @@
|
|
159
159
|
// to be an even number in order to be centred under the 40px checkbox or radio.
|
160
160
|
$conditional-border-width: $govuk-border-width-narrow;
|
161
161
|
// Calculate the amount of padding needed to keep the border centered against the checkbox.
|
162
|
-
$conditional-border-padding: ($govuk-
|
162
|
+
$conditional-border-padding: ($govuk-touch-target-size / 2) - ($conditional-border-width / 2);
|
163
163
|
// Move the border centered with the checkbox
|
164
164
|
$conditional-margin-left: $conditional-border-padding;
|
165
165
|
// Move the contents of the conditional inline with the label
|
@@ -255,6 +255,11 @@
|
|
255
255
|
padding-left: ($govuk-touch-target-size - $input-offset) - ($margin-left + $conditional-border-width);
|
256
256
|
}
|
257
257
|
|
258
|
+
.govuk-checkboxes__divider {
|
259
|
+
width: $govuk-small-checkboxes-size;
|
260
|
+
margin-bottom: govuk-spacing(1);
|
261
|
+
}
|
262
|
+
|
258
263
|
// Hover state for small checkboxes.
|
259
264
|
//
|
260
265
|
// We use a hover state for small checkboxes because the touch target size
|
@@ -4,11 +4,11 @@
|
|
4
4
|
|
5
5
|
.govuk-cookie-banner {
|
6
6
|
padding-top: govuk-spacing(4);
|
7
|
-
// The component does not set bottom spacing.
|
8
|
-
//
|
7
|
+
// The component does not set bottom spacing. The bottom spacing should be
|
8
|
+
// created by the items inside the component.
|
9
9
|
|
10
|
-
// Visually separate the cookie banner from content underneath
|
11
|
-
//
|
10
|
+
// Visually separate the cookie banner from content underneath when user
|
11
|
+
// changes colours in their browser.
|
12
12
|
border-bottom: $border-bottom-width solid transparent;
|
13
13
|
|
14
14
|
background-color: $govuk-canvas-background-colour;
|
@@ -25,21 +25,24 @@
|
|
25
25
|
margin-bottom: -$border-bottom-width;
|
26
26
|
|
27
27
|
&[hidden] {
|
28
|
-
// Support older browsers which don't hide elements with the `hidden`
|
29
|
-
// when the visibility of cookie and replacement messages is
|
28
|
+
// Support older browsers which don't hide elements with the `hidden`
|
29
|
+
// attribute when the visibility of cookie and replacement messages is
|
30
|
+
// toggled.
|
30
31
|
display: none;
|
31
32
|
}
|
32
33
|
|
33
34
|
&:focus {
|
34
|
-
// Remove the native visible focus indicator when the element is
|
35
|
+
// Remove the native visible focus indicator when the element is
|
36
|
+
// programmatically focused.
|
35
37
|
//
|
36
|
-
// The focused cookie banner is the first element on the page and the last
|
37
|
-
// interacted with prior to it gaining focus.
|
38
|
-
//
|
39
|
-
// it a visible focus indicator could be more confusing than
|
40
|
-
// element is not normally keyboard operable.
|
38
|
+
// The focused cookie banner is the first element on the page and the last
|
39
|
+
// thing the user interacted with prior to it gaining focus. We therefore
|
40
|
+
// assume that moving focus to it is not going to surprise users, and that
|
41
|
+
// giving it a visible focus indicator could be more confusing than
|
42
|
+
// helpful, especially as the element is not normally keyboard operable.
|
41
43
|
//
|
42
|
-
// We have flagged this in the research section of the guidance as
|
44
|
+
// We have flagged this in the research section of the guidance as
|
45
|
+
// something to monitor.
|
43
46
|
//
|
44
47
|
// A related discussion: https://github.com/w3c/wcag/issues/1001
|
45
48
|
outline: none;
|
@@ -6,8 +6,7 @@
|
|
6
6
|
@include govuk-exports("govuk/component/date-input") {
|
7
7
|
.govuk-date-input {
|
8
8
|
@include govuk-clearfix;
|
9
|
-
|
10
|
-
font-size: 0;
|
9
|
+
font-size: 0; // removes whitespace caused by inline-block
|
11
10
|
}
|
12
11
|
|
13
12
|
.govuk-date-input__item {
|
@@ -7,9 +7,8 @@
|
|
7
7
|
@include govuk-clearfix;
|
8
8
|
}
|
9
9
|
|
10
|
-
// Fix for Firefox < 53
|
11
|
-
//
|
12
|
-
// stylelint-disable selector-type-no-unknown -- Ignore unknown 'x:-moz-any-link'
|
10
|
+
// Fix for Firefox < 53 (https://bugzil.la/504622)
|
11
|
+
// stylelint-disable selector-type-no-unknown -- Ignore 'x:-moz-any-link'
|
13
12
|
@supports not (caret-color: auto) {
|
14
13
|
.govuk-fieldset,
|
15
14
|
x:-moz-any-link {
|
@@ -59,8 +58,7 @@
|
|
59
58
|
}
|
60
59
|
|
61
60
|
// When the legend contains an H1, we want the H1 to inherit all styles from
|
62
|
-
// the legend. Effectively
|
63
|
-
// not there.
|
61
|
+
// the legend. Effectively treat the heading as if it is not there.
|
64
62
|
.govuk-fieldset__heading {
|
65
63
|
margin: 0;
|
66
64
|
font-size: inherit;
|
@@ -12,11 +12,10 @@
|
|
12
12
|
margin-left: -$component-padding;
|
13
13
|
padding: $component-padding;
|
14
14
|
|
15
|
-
// The default file upload button in Safari does not
|
16
|
-
//
|
17
|
-
//
|
18
|
-
//
|
19
|
-
// https://bugs.webkit.org/show_bug.cgi?id=224746
|
15
|
+
// The default file upload button in Safari does not support setting a
|
16
|
+
// custom font-size. Set `-webkit-appearance` to `button` to drop out of the
|
17
|
+
// native appearance so the font-size is set to 19px
|
18
|
+
// https://webkit.org/b/224746
|
20
19
|
&::-webkit-file-upload-button {
|
21
20
|
-webkit-appearance: button;
|
22
21
|
color: inherit;
|
@@ -26,13 +25,13 @@
|
|
26
25
|
&:focus {
|
27
26
|
outline: $govuk-focus-width solid $govuk-focus-colour;
|
28
27
|
// Use `box-shadow` to add border instead of changing `border-width`
|
29
|
-
// (which changes element size) and since `outline` is already used for
|
30
|
-
// yellow focus state.
|
28
|
+
// (which changes element size) and since `outline` is already used for
|
29
|
+
// the yellow focus state.
|
31
30
|
box-shadow: inset 0 0 0 4px $govuk-input-border-colour;
|
32
31
|
}
|
33
32
|
|
34
|
-
// Set "focus-within" to fix https://
|
35
|
-
//
|
33
|
+
// Set "focus-within" to fix https://bugzil.la/1430196 so that component
|
34
|
+
// receives focus in Firefox.
|
36
35
|
// This can't be set together with `:focus` as all versions of IE fail
|
37
36
|
// to recognise `focus-within` and don't set any styles from the block
|
38
37
|
// when it's a selector.
|
@@ -38,6 +38,14 @@
|
|
38
38
|
border-bottom: $govuk-header-border-width solid $govuk-header-border-color;
|
39
39
|
}
|
40
40
|
|
41
|
+
.govuk-header--full-width-border {
|
42
|
+
border-bottom-color: $govuk-header-border-color;
|
43
|
+
|
44
|
+
.govuk-header__container {
|
45
|
+
border-bottom-color: transparent;
|
46
|
+
}
|
47
|
+
}
|
48
|
+
|
41
49
|
.govuk-header__logotype {
|
42
50
|
display: inline-block;
|
43
51
|
position: relative;
|
@@ -11,8 +11,10 @@
|
|
11
11
|
height: govuk-px-to-rem(40px);
|
12
12
|
margin-top: 0;
|
13
13
|
padding: govuk-spacing(1);
|
14
|
-
//
|
15
|
-
//
|
14
|
+
// Setting any background-color makes text invisible when changing colours
|
15
|
+
// to dark backgrounds in Firefox (https://bugzil.la/1335476). As
|
16
|
+
// background-color and color need to always be set together, color should
|
17
|
+
// not be set either
|
16
18
|
border: $govuk-border-width-form-element solid $govuk-input-border-colour;
|
17
19
|
border-radius: 0;
|
18
20
|
|
@@ -24,7 +26,8 @@
|
|
24
26
|
outline: $govuk-focus-width solid $govuk-focus-colour;
|
25
27
|
// Ensure outline appears outside of the element
|
26
28
|
outline-offset: 0;
|
27
|
-
// Double the border by adding its width again. Use `box-shadow` for this
|
29
|
+
// Double the border by adding its width again. Use `box-shadow` for this
|
30
|
+
// instead of changing `border-width` - this is for consistency with
|
28
31
|
// components such as textarea where we avoid changing `border-width` as
|
29
32
|
// it will change the element size. Also, `outline` cannot be utilised
|
30
33
|
// here as it is already used for the yellow focus state.
|
@@ -63,7 +66,7 @@
|
|
63
66
|
}
|
64
67
|
|
65
68
|
// em measurements are based on the point size of the typeface
|
66
|
-
// Extra space is added on the right
|
69
|
+
// Extra space is added on the right to allow for the Safari prefill icon
|
67
70
|
|
68
71
|
.govuk-input--width-30 {
|
69
72
|
max-width: 29.5em;
|
@@ -15,7 +15,8 @@
|
|
15
15
|
.govuk-notification-banner__header {
|
16
16
|
padding: 2px govuk-spacing(3) govuk-spacing(1);
|
17
17
|
|
18
|
-
// Ensures the notification header appears separate to the notification body
|
18
|
+
// Ensures the notification header appears separate to the notification body
|
19
|
+
// text in high contrast mode
|
19
20
|
border-bottom: 1px solid transparent;
|
20
21
|
|
21
22
|
@include govuk-media-query($from: tablet) {
|
@@ -68,7 +69,7 @@
|
|
68
69
|
@include govuk-font-size($size: 24);
|
69
70
|
@include govuk-typography-weight-bold;
|
70
71
|
|
71
|
-
margin: 0 0 govuk-spacing(3)
|
72
|
+
margin: 0 0 govuk-spacing(3);
|
72
73
|
|
73
74
|
padding: 0;
|
74
75
|
}
|
@@ -54,8 +54,8 @@
|
|
54
54
|
.govuk-pagination__next {
|
55
55
|
@include govuk-typography-weight-bold;
|
56
56
|
|
57
|
-
// Use flex to
|
58
|
-
//
|
57
|
+
// Use flex to avoid extra space being introduced when whitespace exists
|
58
|
+
// between the arrow svg and the link text
|
59
59
|
.govuk-pagination__link {
|
60
60
|
display: flex;
|
61
61
|
align-items: center;
|
@@ -96,7 +96,7 @@
|
|
96
96
|
@include govuk-typography-weight-bold;
|
97
97
|
color: $govuk-secondary-text-colour;
|
98
98
|
|
99
|
-
// Remove hover state for ellipsis items as they don't
|
99
|
+
// Remove hover state for ellipsis items as they don't contain links
|
100
100
|
&:hover {
|
101
101
|
background-color: transparent;
|
102
102
|
}
|
@@ -118,8 +118,8 @@
|
|
118
118
|
}
|
119
119
|
}
|
120
120
|
|
121
|
-
// Add link hover decoration to prev/next text if no label present on
|
122
|
-
//
|
121
|
+
// Add link hover decoration to prev/next text if no label present on
|
122
|
+
// prev/next only mode, so that we have a hover state in all cases
|
123
123
|
&:hover,
|
124
124
|
&:active {
|
125
125
|
.govuk-pagination__link-title--decorated {
|
@@ -151,11 +151,10 @@
|
|
151
151
|
@include govuk-typography-weight-regular;
|
152
152
|
@include govuk-link-decoration;
|
153
153
|
display: inline-block;
|
154
|
-
padding-left: govuk-spacing(6);
|
155
154
|
}
|
156
155
|
|
157
156
|
.govuk-pagination__icon {
|
158
|
-
// Set size using rems to make the icon scale with text
|
157
|
+
// Set size using rems to make the icon scale with text
|
159
158
|
width: govuk-px-to-rem(15px);
|
160
159
|
height: govuk-px-to-rem(13px);
|
161
160
|
color: $govuk-secondary-text-colour;
|
@@ -175,23 +174,18 @@
|
|
175
174
|
.govuk-pagination--block {
|
176
175
|
display: block;
|
177
176
|
|
178
|
-
.govuk-pagination__item {
|
179
|
-
padding: govuk-spacing(3);
|
180
|
-
float: none;
|
181
|
-
}
|
182
|
-
|
183
177
|
.govuk-pagination__next,
|
184
178
|
.govuk-pagination__prev {
|
185
179
|
padding-left: 0;
|
186
180
|
float: none;
|
181
|
+
|
182
|
+
.govuk-pagination__link {
|
183
|
+
display: inline-block;
|
184
|
+
}
|
187
185
|
}
|
188
186
|
|
189
187
|
.govuk-pagination__next {
|
190
188
|
padding-right: govuk-spacing(3);
|
191
|
-
|
192
|
-
.govuk-pagination__icon {
|
193
|
-
margin-left: 0;
|
194
|
-
}
|
195
189
|
}
|
196
190
|
|
197
191
|
// Only apply a border between prev and next if both are present
|
@@ -199,41 +193,34 @@
|
|
199
193
|
border-top: 1px solid $govuk-border-colour;
|
200
194
|
}
|
201
195
|
|
202
|
-
//
|
203
|
-
//
|
204
|
-
|
205
|
-
|
206
|
-
display: inline;
|
207
|
-
}
|
208
|
-
|
209
|
-
// Set the after pseudo element to a block which makes the title visually display
|
210
|
-
// as block level whilst programmatically being inline
|
211
|
-
// We do this to get around an NVDA quirk where adjacent block level
|
212
|
-
// elements are always read out separately
|
196
|
+
// Set the after pseudo element to a block which makes the title visually
|
197
|
+
// display as block level whilst programmatically being inline. We do this
|
198
|
+
// to get around an NVDA quirk where adjacent block level elements are
|
199
|
+
// always read out separately
|
213
200
|
.govuk-pagination__link-title::after {
|
214
201
|
content: "";
|
215
202
|
display: block;
|
216
203
|
}
|
217
204
|
|
218
205
|
.govuk-pagination__link {
|
206
|
+
padding-left: govuk-spacing(6);
|
219
207
|
text-align: left;
|
220
208
|
|
221
|
-
&:focus {
|
222
|
-
// apply focus styling to the label within the link as if it were being focused
|
223
|
-
// to get around a display issue with a focusable inline element containing a mixture
|
224
|
-
// of inline and inline-block level elements
|
225
|
-
.govuk-pagination__link-label {
|
226
|
-
@include govuk-focused-text;
|
227
|
-
}
|
228
|
-
}
|
229
|
-
|
230
209
|
&:not(:focus) {
|
231
210
|
text-decoration: none;
|
232
211
|
}
|
233
212
|
}
|
234
213
|
|
235
214
|
.govuk-pagination__icon {
|
236
|
-
|
215
|
+
// This magic number is brought to you by the following equation:
|
216
|
+
// ((lineHeight − arrowHeight) ÷ 2) ÷ fontSize
|
217
|
+
// ((25 − 13) ÷ 2) ÷ 19 = 0.326em
|
218
|
+
//
|
219
|
+
// This could have been done programmatically but we don't have functions
|
220
|
+
// for grabbing the line-height of specific typography sizes just yet.
|
221
|
+
margin-top: 0.326em;
|
222
|
+
margin-left: govuk-spacing(6) * -1;
|
223
|
+
float: left;
|
237
224
|
}
|
238
225
|
}
|
239
226
|
}
|