katalyst-govuk-formbuilder 1.10.1 → 1.11.0
Sign up to get free protection for your applications and to get access to all the features.
- 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
|
}
|