govuk_publishing_components 18.3.1 → 19.0.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/stylesheets/govuk_publishing_components/_all_components.scss +1 -7
- data/app/assets/stylesheets/govuk_publishing_components/_all_components_print.scss +0 -6
- data/app/assets/stylesheets/govuk_publishing_components/components/_contents-list.scss +4 -5
- data/app/assets/stylesheets/govuk_publishing_components/components/_image-card.scss +13 -7
- data/app/assets/stylesheets/govuk_publishing_components/components/_related-navigation.scss +11 -0
- data/app/assets/stylesheets/govuk_publishing_components/components/_share-links.scss +2 -0
- data/app/assets/stylesheets/govuk_publishing_components/components/_step-by-step-nav.scss +78 -68
- data/app/assets/stylesheets/govuk_publishing_components/components/helpers/_variables.scss +4 -4
- data/app/assets/stylesheets/govuk_publishing_components/components/mixins/_govuk-template-link-focus-override.scss +14 -0
- data/app/assets/stylesheets/govuk_publishing_components/components/mixins/_margins.scss +6 -6
- data/app/assets/stylesheets/govuk_publishing_components/components/print/_step-by-step-nav.scss +12 -5
- data/app/views/govuk_publishing_components/components/_summary_list.html.erb +4 -3
- data/app/views/govuk_publishing_components/components/docs/summary_list.yml +24 -8
- data/lib/govuk_publishing_components/version.rb +1 -1
- metadata +17 -2
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: a99efb997d66a0e0b8352a2a278679c8eb2d58d3f6173aae146c232dcb4dc5e0
|
|
4
|
+
data.tar.gz: 91ef81fded7dc833d48994f6b405dfd07a3de3901c9af119c6a2ca271961a3e0
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 9d6532435e8af54f7f1bd9adf37f4c28f7ff8a77b986d9e016b50e70185d3f2e46725bf89b01b7403373b1df9d7eb81c17d9371fd68619d6f19fcd5e6a45f941
|
|
7
|
+
data.tar.gz: 6ed9732bef8db933228174bbba6ba556685ab514d759f6b78251aa2d86097516fff0a5a93bfe6449f7215e499f1f8ff6878daa13c126e7bfe74f629cfa2d6c78
|
|
@@ -8,15 +8,9 @@
|
|
|
8
8
|
// Include common imports used by many components
|
|
9
9
|
@import "govuk/all";
|
|
10
10
|
|
|
11
|
-
// `govuk_frontend_toolkit`
|
|
12
|
-
@import "measurements";
|
|
13
|
-
@import "grid_layout";
|
|
14
|
-
@import "typography";
|
|
15
|
-
@import "colours";
|
|
16
|
-
@import "css3";
|
|
17
|
-
|
|
18
11
|
@import "components/helpers/variables";
|
|
19
12
|
@import "components/helpers/brand-colours";
|
|
13
|
+
@import "components/mixins/govuk-template-link-focus-override";
|
|
20
14
|
@import "components/mixins/media-down";
|
|
21
15
|
@import "components/mixins/margins";
|
|
22
16
|
@import "components/mixins/clearfix";
|
|
@@ -3,12 +3,6 @@
|
|
|
3
3
|
|
|
4
4
|
@import "components/helpers/govuk-frontend-settings";
|
|
5
5
|
|
|
6
|
-
// `govuk_frontend_toolkit`
|
|
7
|
-
@import "measurements";
|
|
8
|
-
@import "grid_layout";
|
|
9
|
-
@import "typography";
|
|
10
|
-
@import "colours";
|
|
11
|
-
|
|
12
6
|
@import "components/print/accordion";
|
|
13
7
|
@import "components/print/contents-list";
|
|
14
8
|
@import "components/print/feedback";
|
|
@@ -40,11 +40,6 @@
|
|
|
40
40
|
list-style-type: none;
|
|
41
41
|
}
|
|
42
42
|
|
|
43
|
-
.gem-c-contents-list__link {
|
|
44
|
-
@include govuk-link-common;
|
|
45
|
-
@include govuk-link-style-default;
|
|
46
|
-
}
|
|
47
|
-
|
|
48
43
|
.gem-c-contents-list--no-underline {
|
|
49
44
|
.gem-c-contents-list__link {
|
|
50
45
|
text-decoration: none;
|
|
@@ -53,6 +48,8 @@
|
|
|
53
48
|
&:active {
|
|
54
49
|
text-decoration: underline;
|
|
55
50
|
}
|
|
51
|
+
|
|
52
|
+
@include govuk-template-link-focus-override;
|
|
56
53
|
}
|
|
57
54
|
}
|
|
58
55
|
|
|
@@ -60,6 +57,8 @@
|
|
|
60
57
|
.gem-c-contents-list__list-item--parent > & {
|
|
61
58
|
font-weight: bold;
|
|
62
59
|
}
|
|
60
|
+
|
|
61
|
+
@include govuk-template-link-focus-override;
|
|
63
62
|
}
|
|
64
63
|
|
|
65
64
|
.gem-c-contents-list__list-item {
|
|
@@ -2,6 +2,7 @@
|
|
|
2
2
|
@include govuk-clearfix;
|
|
3
3
|
@include govuk-text-colour;
|
|
4
4
|
position: relative;
|
|
5
|
+
margin-bottom: govuk-spacing(6);
|
|
5
6
|
}
|
|
6
7
|
|
|
7
8
|
.gem-c-image-card__image-wrapper {
|
|
@@ -62,12 +63,19 @@
|
|
|
62
63
|
position: absolute;
|
|
63
64
|
z-index: 1;
|
|
64
65
|
top: 0;
|
|
65
|
-
left:
|
|
66
|
-
right:
|
|
66
|
+
left: 0;
|
|
67
|
+
right: 0;
|
|
67
68
|
height: 100%;
|
|
68
69
|
$ie-background: rgba(255, 255, 255, 0);
|
|
69
70
|
background: $ie-background; // because internet explorer
|
|
70
71
|
}
|
|
72
|
+
|
|
73
|
+
@include govuk-media-query($from: mobile, $until: tablet) {
|
|
74
|
+
&:after {
|
|
75
|
+
left: govuk-spacing(3);
|
|
76
|
+
right: govuk-spacing(3);
|
|
77
|
+
}
|
|
78
|
+
}
|
|
71
79
|
}
|
|
72
80
|
|
|
73
81
|
.gem-c-image-card__context,
|
|
@@ -158,11 +166,9 @@
|
|
|
158
166
|
padding-bottom: govuk-spacing(2);
|
|
159
167
|
}
|
|
160
168
|
|
|
161
|
-
.gem-c-image-card__title-link {
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
right: 0;
|
|
165
|
-
}
|
|
169
|
+
.gem-c-image-card__title-link:after {
|
|
170
|
+
left: 0;
|
|
171
|
+
right: 0;
|
|
166
172
|
}
|
|
167
173
|
|
|
168
174
|
.gem-c-image-card__description {
|
|
@@ -47,6 +47,8 @@
|
|
|
47
47
|
@include govuk-media-query($from: tablet) {
|
|
48
48
|
line-height: 1.28;
|
|
49
49
|
}
|
|
50
|
+
|
|
51
|
+
@include govuk-template-link-focus-override;
|
|
50
52
|
}
|
|
51
53
|
|
|
52
54
|
.gem-c-related-navigation__toggle {
|
|
@@ -62,10 +64,19 @@
|
|
|
62
64
|
.gem-c-related-navigation__section-link {
|
|
63
65
|
@extend %govuk-link;
|
|
64
66
|
font-weight: bold;
|
|
67
|
+
|
|
68
|
+
@include govuk-template-link-focus-override;
|
|
65
69
|
}
|
|
66
70
|
|
|
67
71
|
.gem-c-related-navigation__section-link--other {
|
|
68
72
|
font-weight: normal;
|
|
73
|
+
|
|
74
|
+
@include govuk-template-link-focus-override;
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
.gem-c-related-navigation__section-link--footer {
|
|
78
|
+
|
|
79
|
+
@include govuk-template-link-focus-override;
|
|
69
80
|
}
|
|
70
81
|
|
|
71
82
|
// reset the default browser styles
|
|
@@ -2,7 +2,7 @@ $stroke-width: 2px;
|
|
|
2
2
|
$stroke-width-large: 3px;
|
|
3
3
|
$number-circle-size: 26px;
|
|
4
4
|
$number-circle-size-large: 35px;
|
|
5
|
-
$top-border: solid 2px $grey-3;
|
|
5
|
+
$top-border: solid 2px govuk-colour("mid-grey", $legacy: "grey-3");
|
|
6
6
|
|
|
7
7
|
@mixin step-nav-vertical-line ($line-style: solid) {
|
|
8
8
|
content: "";
|
|
@@ -10,8 +10,8 @@ $top-border: solid 2px $grey-3;
|
|
|
10
10
|
z-index: 2;
|
|
11
11
|
width: 0;
|
|
12
12
|
height: 100%;
|
|
13
|
-
border-left: $line-style $stroke-width $grey-2;
|
|
14
|
-
background:
|
|
13
|
+
border-left: $line-style $stroke-width govuk-colour("mid-grey", $legacy: "grey-2");
|
|
14
|
+
background: govuk-colour("white");
|
|
15
15
|
}
|
|
16
16
|
|
|
17
17
|
@mixin step-nav-line-position {
|
|
@@ -25,12 +25,27 @@ $top-border: solid 2px $grey-3;
|
|
|
25
25
|
border-width: $stroke-width-large;
|
|
26
26
|
}
|
|
27
27
|
|
|
28
|
+
// custom mixin as govuk-font does undesirable things at different breakpoints
|
|
29
|
+
// we want to ensure that both large and small step navs have the same size font on mobile
|
|
30
|
+
// this will stop text resizing if compatibility mode is turned off
|
|
31
|
+
@mixin step-nav-font($size, $tablet-size: $size, $weight: normal, $line-height: 1.3, $tablet-line-height: $line-height) {
|
|
32
|
+
@include govuk-typography-common();
|
|
33
|
+
font-size: $size + px;
|
|
34
|
+
font-weight: $weight;
|
|
35
|
+
line-height: $line-height;
|
|
36
|
+
|
|
37
|
+
@include govuk-media-query($from: tablet) {
|
|
38
|
+
font-size: $tablet-size + px;
|
|
39
|
+
line-height: $tablet-line-height;
|
|
40
|
+
}
|
|
41
|
+
}
|
|
42
|
+
|
|
28
43
|
.gem-c-step-nav {
|
|
29
|
-
margin-bottom:
|
|
44
|
+
margin-bottom: govuk-spacing(6);
|
|
30
45
|
|
|
31
46
|
&.gem-c-step-nav--large {
|
|
32
|
-
@include media(tablet) {
|
|
33
|
-
margin-bottom:
|
|
47
|
+
@include govuk-media-query($from: tablet) {
|
|
48
|
+
margin-bottom: govuk-spacing(9);
|
|
34
49
|
}
|
|
35
50
|
}
|
|
36
51
|
|
|
@@ -45,7 +60,7 @@ $top-border: solid 2px $grey-3;
|
|
|
45
60
|
}
|
|
46
61
|
|
|
47
62
|
.gem-c-step-nav__button {
|
|
48
|
-
color: $link-colour;
|
|
63
|
+
color: $govuk-link-colour;
|
|
49
64
|
cursor: pointer;
|
|
50
65
|
background: none;
|
|
51
66
|
border: 0;
|
|
@@ -63,30 +78,26 @@ $top-border: solid 2px $grey-3;
|
|
|
63
78
|
}
|
|
64
79
|
|
|
65
80
|
.gem-c-step-nav__button--title {
|
|
66
|
-
@include
|
|
81
|
+
@include step-nav-font(19, $weight: bold, $line-height: 1.4);
|
|
67
82
|
display: inline-block;
|
|
68
83
|
padding: 0;
|
|
69
84
|
text-align: left;
|
|
70
|
-
color:
|
|
85
|
+
color: govuk-colour("black");
|
|
71
86
|
|
|
72
87
|
.gem-c-step-nav--large & {
|
|
73
|
-
@include
|
|
88
|
+
@include step-nav-font(19, $tablet-size: 24, $weight: bold, $line-height: 1.4);
|
|
74
89
|
}
|
|
75
90
|
}
|
|
76
91
|
|
|
77
92
|
.gem-c-step-nav__button--controls {
|
|
78
|
-
@include
|
|
93
|
+
@include step-nav-font(14, $line-height: 1);
|
|
79
94
|
position: relative;
|
|
80
95
|
z-index: 1; // this and relative position stops focus outline underlap with border of accordion
|
|
81
96
|
padding: .5em 0;
|
|
82
97
|
text-decoration: underline;
|
|
83
98
|
|
|
84
|
-
&:hover {
|
|
85
|
-
color: $link-hover-colour;
|
|
86
|
-
}
|
|
87
|
-
|
|
88
99
|
.gem-c-step-nav--large & {
|
|
89
|
-
@include
|
|
100
|
+
@include step-nav-font(14, $tablet-size: 16, $line-height: 1);
|
|
90
101
|
}
|
|
91
102
|
}
|
|
92
103
|
|
|
@@ -97,23 +108,23 @@ $top-border: solid 2px $grey-3;
|
|
|
97
108
|
|
|
98
109
|
.gem-c-step-nav__step {
|
|
99
110
|
position: relative;
|
|
100
|
-
padding-left:
|
|
111
|
+
padding-left: govuk-spacing(6) + govuk-spacing(3);
|
|
101
112
|
list-style: none;
|
|
102
113
|
|
|
103
114
|
// line down the side of a step
|
|
104
115
|
&:after {
|
|
105
116
|
@include step-nav-vertical-line;
|
|
106
117
|
@include step-nav-line-position;
|
|
107
|
-
top:
|
|
118
|
+
top: govuk-spacing(3);
|
|
108
119
|
}
|
|
109
120
|
|
|
110
121
|
.gem-c-step-nav--large & {
|
|
111
|
-
@include media(tablet) {
|
|
112
|
-
padding-left:
|
|
122
|
+
@include govuk-media-query($from: tablet) {
|
|
123
|
+
padding-left: govuk-spacing(9);
|
|
113
124
|
|
|
114
125
|
&:after {
|
|
115
126
|
@include step-nav-line-position-large;
|
|
116
|
-
top:
|
|
127
|
+
top: govuk-spacing(6);
|
|
117
128
|
}
|
|
118
129
|
}
|
|
119
130
|
}
|
|
@@ -130,14 +141,14 @@ $top-border: solid 2px $grey-3;
|
|
|
130
141
|
margin-left: $number-circle-size / 4;
|
|
131
142
|
width: $number-circle-size / 2;
|
|
132
143
|
height: 0;
|
|
133
|
-
border-bottom: solid $stroke-width $grey-2;
|
|
144
|
+
border-bottom: solid $stroke-width govuk-colour("mid-grey", $legacy: "grey-2");
|
|
134
145
|
}
|
|
135
146
|
|
|
136
147
|
&:after {
|
|
137
148
|
// scss-lint:disable DuplicateProperty
|
|
138
149
|
// sass-lint:disable no-duplicate-properties
|
|
139
|
-
height: -webkit-calc(100% - #{
|
|
140
|
-
height: calc(100% - #{
|
|
150
|
+
height: -webkit-calc(100% - #{govuk-spacing(3)}); // fallback for iphone 4
|
|
151
|
+
height: calc(100% - #{govuk-spacing(3)});
|
|
141
152
|
// sass-lint:enable no-duplicate-properties
|
|
142
153
|
// scss-lint:enable DuplicateProperty
|
|
143
154
|
}
|
|
@@ -147,7 +158,7 @@ $top-border: solid 2px $grey-3;
|
|
|
147
158
|
}
|
|
148
159
|
|
|
149
160
|
.gem-c-step-nav--large & {
|
|
150
|
-
@include media(tablet) {
|
|
161
|
+
@include govuk-media-query($from: tablet) {
|
|
151
162
|
&:before {
|
|
152
163
|
margin-left: $number-circle-size-large / 4;
|
|
153
164
|
width: $number-circle-size-large / 2;
|
|
@@ -155,7 +166,7 @@ $top-border: solid 2px $grey-3;
|
|
|
155
166
|
}
|
|
156
167
|
|
|
157
168
|
&:after {
|
|
158
|
-
height: calc(100% - #{
|
|
169
|
+
height: calc(100% - #{govuk-spacing(6)});
|
|
159
170
|
}
|
|
160
171
|
}
|
|
161
172
|
}
|
|
@@ -166,26 +177,26 @@ $top-border: solid 2px $grey-3;
|
|
|
166
177
|
.gem-c-step-nav__circle--number,
|
|
167
178
|
&:after,
|
|
168
179
|
.gem-c-step-nav__help:after {
|
|
169
|
-
border-color:
|
|
180
|
+
border-color: govuk-colour("black");
|
|
170
181
|
}
|
|
171
182
|
}
|
|
172
183
|
|
|
173
184
|
.gem-c-step-nav__circle {
|
|
174
|
-
|
|
185
|
+
box-sizing: border-box;
|
|
175
186
|
position: absolute;
|
|
176
187
|
z-index: 5;
|
|
177
|
-
top:
|
|
188
|
+
top: govuk-spacing(3);
|
|
178
189
|
left: 0;
|
|
179
190
|
width: $number-circle-size;
|
|
180
191
|
height: $number-circle-size;
|
|
181
|
-
color:
|
|
182
|
-
background:
|
|
192
|
+
color: govuk-colour("black");
|
|
193
|
+
background: govuk-colour("white");
|
|
183
194
|
border-radius: 100px;
|
|
184
195
|
text-align: center;
|
|
185
196
|
|
|
186
197
|
.gem-c-step-nav--large & {
|
|
187
|
-
@include media(tablet) {
|
|
188
|
-
top:
|
|
198
|
+
@include govuk-media-query($from: tablet) {
|
|
199
|
+
top: govuk-spacing(6);
|
|
189
200
|
width: $number-circle-size-large;
|
|
190
201
|
height: $number-circle-size-large;
|
|
191
202
|
}
|
|
@@ -193,23 +204,23 @@ $top-border: solid 2px $grey-3;
|
|
|
193
204
|
}
|
|
194
205
|
|
|
195
206
|
.gem-c-step-nav__circle--number {
|
|
196
|
-
@include
|
|
197
|
-
border: solid $stroke-width $grey-2;
|
|
207
|
+
@include step-nav-font(16, $weight: bold, $line-height: 23px);
|
|
208
|
+
border: solid $stroke-width govuk-colour("mid-grey", $legacy: "grey-2");
|
|
198
209
|
|
|
199
210
|
.gem-c-step-nav--large & {
|
|
200
|
-
@include
|
|
211
|
+
@include step-nav-font(16, $tablet-size: 19, $weight: bold, $line-height: 23px, $tablet-line-height: 30px);
|
|
201
212
|
|
|
202
|
-
@include media(tablet) {
|
|
213
|
+
@include govuk-media-query($from: tablet) {
|
|
203
214
|
border-width: $stroke-width-large;
|
|
204
215
|
}
|
|
205
216
|
}
|
|
206
217
|
}
|
|
207
218
|
|
|
208
219
|
.gem-c-step-nav__circle--logic {
|
|
209
|
-
@include
|
|
220
|
+
@include step-nav-font(16, $weight: bold, $line-height: 28px);
|
|
210
221
|
|
|
211
222
|
.gem-c-step-nav--large & {
|
|
212
|
-
@include
|
|
223
|
+
@include step-nav-font(16, $tablet-size: 19, $weight: bold, $line-height: 28px, $tablet-line-height: 34px);
|
|
213
224
|
}
|
|
214
225
|
}
|
|
215
226
|
|
|
@@ -221,7 +232,7 @@ $top-border: solid 2px $grey-3;
|
|
|
221
232
|
|
|
222
233
|
.gem-c-step-nav__circle-background {
|
|
223
234
|
$shadow-offset: .1em;
|
|
224
|
-
$shadow-colour:
|
|
235
|
+
$shadow-colour: govuk-colour("white");
|
|
225
236
|
|
|
226
237
|
// to make numbers readable for users zooming text only in browsers such as Firefox
|
|
227
238
|
text-shadow: 0 -#{$shadow-offset} 0 $shadow-colour, $shadow-offset 0 0 $shadow-colour, 0 $shadow-offset 0 $shadow-colour, -#{$shadow-offset} 0 0 $shadow-colour;
|
|
@@ -233,7 +244,7 @@ $top-border: solid 2px $grey-3;
|
|
|
233
244
|
}
|
|
234
245
|
|
|
235
246
|
.gem-c-step-nav__header {
|
|
236
|
-
padding:
|
|
247
|
+
padding: govuk-spacing(3) 0;
|
|
237
248
|
border-top: $top-border;
|
|
238
249
|
|
|
239
250
|
.gem-c-step-nav--active & {
|
|
@@ -253,7 +264,7 @@ $top-border: solid 2px $grey-3;
|
|
|
253
264
|
&:hover {
|
|
254
265
|
.gem-c-step-nav__button,
|
|
255
266
|
.gem-c-step-nav__circle {
|
|
256
|
-
color: $link-colour;
|
|
267
|
+
color: $govuk-link-colour;
|
|
257
268
|
}
|
|
258
269
|
|
|
259
270
|
.gem-c-step-nav__toggle-link {
|
|
@@ -268,40 +279,39 @@ $top-border: solid 2px $grey-3;
|
|
|
268
279
|
}
|
|
269
280
|
|
|
270
281
|
.gem-c-step-nav--large & {
|
|
271
|
-
@include media(tablet) {
|
|
272
|
-
padding:
|
|
282
|
+
@include govuk-media-query($from: tablet) {
|
|
283
|
+
padding: govuk-spacing(6) 0;
|
|
273
284
|
}
|
|
274
285
|
}
|
|
275
286
|
}
|
|
276
287
|
|
|
277
288
|
.gem-c-step-nav__title {
|
|
278
289
|
@include govuk-text-colour;
|
|
279
|
-
@include
|
|
290
|
+
@include step-nav-font(19, $weight: bold, $line-height: 1.4);
|
|
280
291
|
margin: 0;
|
|
281
292
|
|
|
282
293
|
.gem-c-step-nav--large & {
|
|
283
|
-
@include
|
|
294
|
+
@include step-nav-font(19, $tablet-size: 24, $weight: bold, $line-height: 1.4);
|
|
284
295
|
}
|
|
285
296
|
}
|
|
286
297
|
|
|
287
298
|
.gem-c-step-nav__toggle-link {
|
|
288
|
-
@include
|
|
299
|
+
@include step-nav-font(14, $line-height: 1.2);
|
|
289
300
|
display: block;
|
|
290
|
-
color: $link-colour;
|
|
291
|
-
|
|
292
|
-
text-transform: capitalize !important;
|
|
301
|
+
color: $govuk-link-colour;
|
|
302
|
+
text-transform: capitalize;
|
|
293
303
|
|
|
294
304
|
.gem-c-step-nav--large & {
|
|
295
|
-
@include
|
|
305
|
+
@include step-nav-font(14, $tablet-size: 16, $line-height: 1.2);
|
|
296
306
|
}
|
|
297
307
|
}
|
|
298
308
|
|
|
299
309
|
.gem-c-step-nav__panel {
|
|
300
310
|
@include govuk-text-colour;
|
|
301
|
-
@include
|
|
311
|
+
@include step-nav-font(16);
|
|
302
312
|
|
|
303
313
|
.gem-c-step-nav--large & {
|
|
304
|
-
@include
|
|
314
|
+
@include step-nav-font(16, $tablet-size: 19);
|
|
305
315
|
}
|
|
306
316
|
|
|
307
317
|
.js-enabled &.js-hidden {
|
|
@@ -312,7 +322,7 @@ $top-border: solid 2px $grey-3;
|
|
|
312
322
|
// contents of the steps, such as paragraphs and links
|
|
313
323
|
|
|
314
324
|
.gem-c-step-nav__paragraph {
|
|
315
|
-
padding-bottom:
|
|
325
|
+
padding-bottom: govuk-spacing(3);
|
|
316
326
|
margin: 0;
|
|
317
327
|
font-size: inherit;
|
|
318
328
|
|
|
@@ -320,15 +330,15 @@ $top-border: solid 2px $grey-3;
|
|
|
320
330
|
margin-top: -5px;
|
|
321
331
|
|
|
322
332
|
.gem-c-step-nav--large & {
|
|
323
|
-
@include media(tablet) {
|
|
324
|
-
margin-top:
|
|
333
|
+
@include govuk-media-query($from: tablet) {
|
|
334
|
+
margin-top: -govuk-spacing(3);
|
|
325
335
|
}
|
|
326
336
|
}
|
|
327
337
|
}
|
|
328
338
|
|
|
329
339
|
.gem-c-step-nav--large & {
|
|
330
|
-
@include media(tablet) {
|
|
331
|
-
padding-bottom:
|
|
340
|
+
@include govuk-media-query($from: tablet) {
|
|
341
|
+
padding-bottom: govuk-spacing(6);
|
|
332
342
|
}
|
|
333
343
|
}
|
|
334
344
|
}
|
|
@@ -339,7 +349,7 @@ $top-border: solid 2px $grey-3;
|
|
|
339
349
|
list-style: none;
|
|
340
350
|
|
|
341
351
|
.gem-c-step-nav--large & {
|
|
342
|
-
@include media(tablet) {
|
|
352
|
+
@include govuk-media-query($from: tablet) {
|
|
343
353
|
padding-bottom: 20px;
|
|
344
354
|
}
|
|
345
355
|
}
|
|
@@ -352,13 +362,13 @@ $top-border: solid 2px $grey-3;
|
|
|
352
362
|
list-style: disc;
|
|
353
363
|
|
|
354
364
|
.gem-c-step-nav__list-item--active:before {
|
|
355
|
-
left: -(
|
|
365
|
+
left: -(govuk-spacing(6) + govuk-spacing(3)) - $links-margin;
|
|
356
366
|
}
|
|
357
367
|
|
|
358
368
|
.gem-c-step-nav--large & {
|
|
359
|
-
@include media(tablet) {
|
|
369
|
+
@include govuk-media-query($from: tablet) {
|
|
360
370
|
.gem-c-step-nav__list-item--active:before {
|
|
361
|
-
left: -(
|
|
371
|
+
left: -(govuk-spacing(9)) - $links-margin;
|
|
362
372
|
}
|
|
363
373
|
}
|
|
364
374
|
}
|
|
@@ -381,23 +391,23 @@ $top-border: solid 2px $grey-3;
|
|
|
381
391
|
position: relative;
|
|
382
392
|
|
|
383
393
|
&:before {
|
|
384
|
-
|
|
394
|
+
box-sizing: border-box;
|
|
385
395
|
content: "";
|
|
386
396
|
position: absolute;
|
|
387
397
|
z-index: 5;
|
|
388
398
|
top: .6em; // position the dot to align with the first row of text in the link
|
|
389
|
-
left: -(
|
|
399
|
+
left: -(govuk-spacing(6) + govuk-spacing(3));
|
|
390
400
|
margin-top: -($stroke-width / 2);
|
|
391
401
|
margin-left: ($number-circle-size / 2);
|
|
392
402
|
width: $number-circle-size / 2;
|
|
393
403
|
height: $stroke-width;
|
|
394
|
-
background:
|
|
404
|
+
background: govuk-colour("black");
|
|
395
405
|
}
|
|
396
406
|
|
|
397
407
|
.gem-c-step-nav--large & {
|
|
398
|
-
@include media(tablet) {
|
|
408
|
+
@include govuk-media-query($from: tablet) {
|
|
399
409
|
&:before {
|
|
400
|
-
left: -(
|
|
410
|
+
left: -(govuk-spacing(9));
|
|
401
411
|
margin-left: ($number-circle-size-large / 2);
|
|
402
412
|
height: $stroke-width-large;
|
|
403
413
|
}
|
|
@@ -412,7 +422,7 @@ $top-border: solid 2px $grey-3;
|
|
|
412
422
|
.gem-c-step-nav__context {
|
|
413
423
|
display: inline-block;
|
|
414
424
|
font-weight: normal;
|
|
415
|
-
color: $grey-1;
|
|
425
|
+
color: govuk-colour("dark-grey", $legacy: "grey-1");
|
|
416
426
|
|
|
417
427
|
&:before {
|
|
418
428
|
content: " \2013\00a0"; // dash followed by
|
|
@@ -10,7 +10,7 @@ $gem-spacing-scale-6: 40px;
|
|
|
10
10
|
$gem-spacing-scale-7: 50px;
|
|
11
11
|
$gem-spacing-scale-8: 60px;
|
|
12
12
|
|
|
13
|
-
$gem-text-colour: $text-colour;
|
|
13
|
+
$gem-text-colour: $govuk-text-colour;
|
|
14
14
|
$gem-secondary-text-colour: $govuk-secondary-text-colour;
|
|
15
15
|
|
|
16
16
|
// Border widths
|
|
@@ -21,7 +21,7 @@ $gem-border-width-error: 4px;
|
|
|
21
21
|
|
|
22
22
|
// Focus
|
|
23
23
|
$gem-focus-width: 3px;
|
|
24
|
-
$gem-focus-colour: $focus-colour;
|
|
24
|
+
$gem-focus-colour: $govuk-focus-colour;
|
|
25
25
|
|
|
26
|
-
$gem-error-colour:
|
|
27
|
-
$gem-success-colour:
|
|
26
|
+
$gem-error-colour: govuk-colour("red");
|
|
27
|
+
$gem-success-colour: govuk-colour("green");
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
// TODO: Remove when appropriate
|
|
2
|
+
// govuk_template overrides the styles set by
|
|
3
|
+
// govuk-frontend 3.0.0. This mixin is intended as a temporary fix
|
|
4
|
+
// to ensure focus styles are as expected in apps using govuk_template
|
|
5
|
+
|
|
6
|
+
@mixin govuk-template-link-focus-override {
|
|
7
|
+
&:focus,
|
|
8
|
+
&:active:focus,
|
|
9
|
+
&:link:focus,
|
|
10
|
+
&:visited:focus {
|
|
11
|
+
@include govuk-focused-text;
|
|
12
|
+
color: govuk-colour("black") !important;
|
|
13
|
+
}
|
|
14
|
+
}
|
|
@@ -1,16 +1,16 @@
|
|
|
1
1
|
@mixin responsive-bottom-margin {
|
|
2
|
-
margin-bottom:
|
|
2
|
+
margin-bottom: govuk-spacing(3);
|
|
3
3
|
|
|
4
|
-
@include media(tablet) {
|
|
5
|
-
margin-bottom:
|
|
4
|
+
@include govuk-media-query($from: tablet) {
|
|
5
|
+
margin-bottom: govuk-spacing(6) * 1.5;
|
|
6
6
|
}
|
|
7
7
|
}
|
|
8
8
|
|
|
9
9
|
@mixin responsive-top-margin {
|
|
10
|
-
margin-top:
|
|
10
|
+
margin-top: govuk-spacing(3);
|
|
11
11
|
|
|
12
|
-
@include media(tablet) {
|
|
13
|
-
margin-top:
|
|
12
|
+
@include govuk-media-query($from: tablet) {
|
|
13
|
+
margin-top: govuk-spacing(6) * 1.5;
|
|
14
14
|
}
|
|
15
15
|
}
|
|
16
16
|
|
data/app/assets/stylesheets/govuk_publishing_components/components/print/_step-by-step-nav.scss
CHANGED
|
@@ -49,16 +49,18 @@ $stroke-width: 3px;
|
|
|
49
49
|
}
|
|
50
50
|
|
|
51
51
|
.gem-c-step-nav__circle {
|
|
52
|
-
@include _core-font-generator(19px, 16px, 19px, 30px, 23px, false, bold);
|
|
53
52
|
box-sizing: border-box;
|
|
54
53
|
position: absolute;
|
|
55
54
|
top: 0;
|
|
56
55
|
left: 0;
|
|
57
56
|
width: $number-circle-size;
|
|
58
57
|
height: $number-circle-size;
|
|
59
|
-
background:
|
|
58
|
+
background: govuk-colour("white");
|
|
60
59
|
border-radius: 100px;
|
|
61
60
|
text-align: center;
|
|
61
|
+
font-size: 19px;
|
|
62
|
+
font-weight: bold;
|
|
63
|
+
line-height: 1.5;
|
|
62
64
|
}
|
|
63
65
|
|
|
64
66
|
.gem-c-step-nav__circle--number {
|
|
@@ -68,7 +70,7 @@ $stroke-width: 3px;
|
|
|
68
70
|
.gem-c-step-nav__step,
|
|
69
71
|
.gem-c-step-nav__paragraph,
|
|
70
72
|
.gem-c-step-nav__links {
|
|
71
|
-
@include
|
|
73
|
+
@include govuk-font(16);
|
|
72
74
|
padding-bottom: 1em;
|
|
73
75
|
}
|
|
74
76
|
|
|
@@ -78,13 +80,13 @@ $stroke-width: 3px;
|
|
|
78
80
|
}
|
|
79
81
|
|
|
80
82
|
.gem-c-step-nav__title {
|
|
81
|
-
@include
|
|
83
|
+
@include govuk-font(19, $weight: bold);
|
|
82
84
|
margin: 0 0 .5em 0;
|
|
83
85
|
padding: 0;
|
|
84
86
|
}
|
|
85
87
|
|
|
86
88
|
.gem-c-step-nav__button--title {
|
|
87
|
-
@include
|
|
89
|
+
@include govuk-font(19, $weight: bold);
|
|
88
90
|
padding: 0;
|
|
89
91
|
border: 0;
|
|
90
92
|
background: none;
|
|
@@ -114,4 +116,9 @@ $stroke-width: 3px;
|
|
|
114
116
|
margin-bottom: .3em;
|
|
115
117
|
}
|
|
116
118
|
|
|
119
|
+
.gem-c-step-nav__circle-step-label,
|
|
120
|
+
.gem-c-step-nav__circle-step-colon {
|
|
121
|
+
display: none;
|
|
122
|
+
}
|
|
123
|
+
|
|
117
124
|
// scss-lint:enable SelectorFormat
|
|
@@ -1,12 +1,13 @@
|
|
|
1
1
|
<%
|
|
2
2
|
id ||= nil
|
|
3
3
|
title ||= nil
|
|
4
|
+
borderless ||= false
|
|
4
5
|
edit ||= {}
|
|
5
6
|
items ||= []
|
|
6
7
|
block ||= yield
|
|
7
8
|
%>
|
|
8
9
|
<% if title || items.any? %>
|
|
9
|
-
<%= tag.div class: "gem-c-summary-list", id: id do %>
|
|
10
|
+
<%= tag.div class: "gem-c-summary-list #{"govuk-summary-list--no-border" if borderless}", id: id do %>
|
|
10
11
|
<% if title %>
|
|
11
12
|
<%= tag.h3 title, class: "govuk-heading-m" %>
|
|
12
13
|
<% if edit.any? %>
|
|
@@ -14,9 +15,9 @@
|
|
|
14
15
|
<%= tag.li class: "govuk-summary-list__actions-list-item" do %>
|
|
15
16
|
<%= link_to edit.fetch(:href),
|
|
16
17
|
class: "govuk-link gem-c-summary-list__edit-section-link",
|
|
17
|
-
title: "Edit #{title}",
|
|
18
|
+
title: "#{edit.fetch(:link_text, "Edit")} #{title}",
|
|
18
19
|
data: edit.fetch(:data_attributes, {}) do %>
|
|
19
|
-
Edit <%= tag.span title, class: "govuk-visually-hidden" %>
|
|
20
|
+
<%= edit.fetch(:link_text, "Edit") %> <%= tag.span title, class: "govuk-visually-hidden" %>
|
|
20
21
|
<% end %>
|
|
21
22
|
<% end %>
|
|
22
23
|
<% end %>
|
|
@@ -10,7 +10,7 @@ govuk_frontend_components:
|
|
|
10
10
|
- summary-list
|
|
11
11
|
examples:
|
|
12
12
|
default:
|
|
13
|
-
data:
|
|
13
|
+
data: &default-example-data
|
|
14
14
|
title: "Title, summary and body"
|
|
15
15
|
items:
|
|
16
16
|
- field: "Title"
|
|
@@ -28,20 +28,36 @@ examples:
|
|
|
28
28
|
- field: "Summary"
|
|
29
29
|
value: "Find out more about our reviews on the subject of ethical standards for public service providers, including our 2014 report, 2015 guidance and 2018 follow-up publication."
|
|
30
30
|
|
|
31
|
+
without_borders:
|
|
32
|
+
data:
|
|
33
|
+
<<: *default-example-data
|
|
34
|
+
borderless: true
|
|
35
|
+
|
|
31
36
|
with_edit_on_section:
|
|
32
37
|
data:
|
|
33
|
-
|
|
38
|
+
<<: *default-example-data
|
|
34
39
|
edit:
|
|
35
40
|
href: "edit-title-summary-body"
|
|
36
41
|
data_attributes:
|
|
37
42
|
gtm: "edit-title-summary-body"
|
|
43
|
+
|
|
44
|
+
with_custom_link_on_section:
|
|
45
|
+
data:
|
|
46
|
+
edit:
|
|
47
|
+
href: "custom-link"
|
|
48
|
+
link_text: "Reorder"
|
|
49
|
+
title: "Items"
|
|
38
50
|
items:
|
|
39
|
-
- field: "
|
|
40
|
-
value: "
|
|
41
|
-
- field: "
|
|
42
|
-
value: "
|
|
43
|
-
- field: "
|
|
44
|
-
value: "
|
|
51
|
+
- field: "Item 1"
|
|
52
|
+
value: "Value 2"
|
|
53
|
+
- field: "Item 2"
|
|
54
|
+
value: "Value 2"
|
|
55
|
+
- field: "Item 3"
|
|
56
|
+
value: "Value 3"
|
|
57
|
+
accessibility_criteria: |
|
|
58
|
+
Take care that the provided `link_text` still makes sense to screen readers when combined with the title.
|
|
59
|
+
For instance, `Reorder` link text and `Items` title becomes `Reorder Items`, which reads fine, but link text
|
|
60
|
+
of `Summary` would read as `Summary Items`, which does not make sense.
|
|
45
61
|
|
|
46
62
|
with_edit_on_individual_items:
|
|
47
63
|
data:
|
metadata
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
|
2
2
|
name: govuk_publishing_components
|
|
3
3
|
version: !ruby/object:Gem::Version
|
|
4
|
-
version:
|
|
4
|
+
version: 19.0.0
|
|
5
5
|
platform: ruby
|
|
6
6
|
authors:
|
|
7
7
|
- GOV.UK Dev
|
|
8
8
|
autorequire:
|
|
9
9
|
bindir: bin
|
|
10
10
|
cert_chain: []
|
|
11
|
-
date: 2019-
|
|
11
|
+
date: 2019-09-03 00:00:00.000000000 Z
|
|
12
12
|
dependencies:
|
|
13
13
|
- !ruby/object:Gem::Dependency
|
|
14
14
|
name: gds-api-adapters
|
|
@@ -262,6 +262,20 @@ dependencies:
|
|
|
262
262
|
- - "~>"
|
|
263
263
|
- !ruby/object:Gem::Version
|
|
264
264
|
version: '3.8'
|
|
265
|
+
- !ruby/object:Gem::Dependency
|
|
266
|
+
name: selenium-webdriver
|
|
267
|
+
requirement: !ruby/object:Gem::Requirement
|
|
268
|
+
requirements:
|
|
269
|
+
- - '='
|
|
270
|
+
- !ruby/object:Gem::Version
|
|
271
|
+
version: 3.142.3
|
|
272
|
+
type: :development
|
|
273
|
+
prerelease: false
|
|
274
|
+
version_requirements: !ruby/object:Gem::Requirement
|
|
275
|
+
requirements:
|
|
276
|
+
- - '='
|
|
277
|
+
- !ruby/object:Gem::Version
|
|
278
|
+
version: 3.142.3
|
|
265
279
|
- !ruby/object:Gem::Dependency
|
|
266
280
|
name: uglifier
|
|
267
281
|
requirement: !ruby/object:Gem::Requirement
|
|
@@ -449,6 +463,7 @@ files:
|
|
|
449
463
|
- app/assets/stylesheets/govuk_publishing_components/components/mixins/_back-arrow.scss
|
|
450
464
|
- app/assets/stylesheets/govuk_publishing_components/components/mixins/_clearfix.scss
|
|
451
465
|
- app/assets/stylesheets/govuk_publishing_components/components/mixins/_css3.scss
|
|
466
|
+
- app/assets/stylesheets/govuk_publishing_components/components/mixins/_govuk-template-link-focus-override.scss
|
|
452
467
|
- app/assets/stylesheets/govuk_publishing_components/components/mixins/_margins.scss
|
|
453
468
|
- app/assets/stylesheets/govuk_publishing_components/components/mixins/_media-down.scss
|
|
454
469
|
- app/assets/stylesheets/govuk_publishing_components/components/print/_accordion.scss
|