govuk_publishing_components 18.3.1 → 19.0.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/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
|