govuk_publishing_components 23.13.1 → 24.1.1

Sign up to get free protection for your applications and to get access to all the features.
Files changed (85) hide show
  1. checksums.yaml +4 -4
  2. data/app/assets/images/govuk_publishing_components/take-action-amber.svg +4 -0
  3. data/app/assets/images/govuk_publishing_components/take-action-green.svg +4 -0
  4. data/app/assets/images/govuk_publishing_components/take-action-red.svg +4 -0
  5. data/app/assets/javascripts/govuk_publishing_components/components/accordion.js +286 -4
  6. data/app/assets/javascripts/govuk_publishing_components/components/cookie-banner.js +0 -4
  7. data/app/assets/javascripts/govuk_publishing_components/components/step-by-step-nav.js +23 -14
  8. data/app/assets/javascripts/govuk_publishing_components/vendor/polyfills/common.js +8 -0
  9. data/app/assets/stylesheets/govuk_publishing_components/_all_components.scss +0 -1
  10. data/app/assets/stylesheets/govuk_publishing_components/component_support.scss +0 -2
  11. data/app/assets/stylesheets/govuk_publishing_components/components/_accordion.scss +298 -14
  12. data/app/assets/stylesheets/govuk_publishing_components/components/_contextual-sidebar.scss +34 -17
  13. data/app/assets/stylesheets/govuk_publishing_components/components/_document-list.scss +14 -8
  14. data/app/assets/stylesheets/govuk_publishing_components/components/_error-alert.scss +4 -4
  15. data/app/assets/stylesheets/govuk_publishing_components/components/_feedback.scss +35 -44
  16. data/app/assets/stylesheets/govuk_publishing_components/components/_layout-header.scss +21 -5
  17. data/app/assets/stylesheets/govuk_publishing_components/components/_step-by-step-nav.scss +105 -48
  18. data/app/assets/stylesheets/govuk_publishing_components/components/_success-alert.scss +8 -8
  19. data/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_contact.scss +0 -5
  20. data/app/assets/stylesheets/govuk_publishing_components/components/print/_accordion.scss +17 -9
  21. data/app/assets/stylesheets/govuk_publishing_components/components/print/_step-by-step-nav.scss +2 -2
  22. data/app/assets/stylesheets/govuk_publishing_components/govuk_frontend_support.scss +1 -11
  23. data/app/models/govuk_publishing_components/audit_applications.rb +1 -1
  24. data/app/models/govuk_publishing_components/component_doc.rb +1 -1
  25. data/app/views/govuk_publishing_components/audit/show.html.erb +26 -26
  26. data/app/views/govuk_publishing_components/components/_accordion.html.erb +13 -20
  27. data/app/views/govuk_publishing_components/components/_attachment.html.erb +3 -3
  28. data/app/views/govuk_publishing_components/components/_contextual_sidebar.html.erb +2 -8
  29. data/app/views/govuk_publishing_components/components/_document_list.html.erb +12 -2
  30. data/app/views/govuk_publishing_components/components/_layout_footer.html.erb +9 -4
  31. data/app/views/govuk_publishing_components/components/attachment/{_thumbnail_document.svg → _thumbnail_document.html.erb} +0 -0
  32. data/app/views/govuk_publishing_components/components/attachment/{_thumbnail_generic.svg → _thumbnail_generic.html.erb} +0 -0
  33. data/app/views/govuk_publishing_components/components/attachment/{_thumbnail_spreadsheet.svg → _thumbnail_spreadsheet.html.erb} +0 -0
  34. data/app/views/govuk_publishing_components/components/contextual_sidebar/_brexit_cta.html.erb +21 -0
  35. data/app/views/govuk_publishing_components/components/docs/accordion.yml +8 -3
  36. data/app/views/govuk_publishing_components/components/docs/contextual_sidebar.yml +65 -1
  37. data/app/views/govuk_publishing_components/components/docs/document_list.yml +50 -7
  38. data/app/views/govuk_publishing_components/components/docs/govspeak.yml +3 -3
  39. data/app/views/govuk_publishing_components/components/docs/layout_header.yml +11 -0
  40. data/app/views/govuk_publishing_components/components/layout_header/_header_logo.html.erb +1 -1
  41. data/app/views/govuk_publishing_components/components/layout_header/_navigation_items.html.erb +9 -4
  42. data/config/initializers/assets.rb +3 -1
  43. data/config/locales/cy.yml +6 -1
  44. data/config/locales/en.yml +6 -1
  45. data/lib/govuk_publishing_components/presenters/contextual_navigation.rb +183 -2
  46. data/lib/govuk_publishing_components/version.rb +1 -1
  47. data/node_modules/govuk-frontend/govuk/all.js +1 -1
  48. data/node_modules/govuk-frontend/govuk/components/_all.scss +1 -0
  49. data/node_modules/govuk-frontend/govuk/components/breadcrumbs/fixtures.json +10 -10
  50. data/node_modules/govuk-frontend/govuk/components/breadcrumbs/template.njk +2 -2
  51. data/node_modules/govuk-frontend/govuk/components/button/_index.scss +2 -0
  52. data/node_modules/govuk-frontend/govuk/components/character-count/_index.scss +1 -0
  53. data/node_modules/govuk-frontend/govuk/components/character-count/character-count.js +1 -1
  54. data/node_modules/govuk-frontend/govuk/components/character-count/fixtures.json +13 -0
  55. data/node_modules/govuk-frontend/govuk/components/cookie-banner/_cookie-banner.scss +2 -0
  56. data/node_modules/govuk-frontend/govuk/components/cookie-banner/_index.scss +51 -0
  57. data/node_modules/govuk-frontend/govuk/components/cookie-banner/fixtures.json +425 -0
  58. data/node_modules/govuk-frontend/govuk/components/cookie-banner/macro-options.json +132 -0
  59. data/node_modules/govuk-frontend/govuk/components/cookie-banner/macro.njk +3 -0
  60. data/node_modules/govuk-frontend/govuk/components/cookie-banner/template.njk +63 -0
  61. data/node_modules/govuk-frontend/govuk/components/details/fixtures.json +2 -2
  62. data/node_modules/govuk-frontend/govuk/components/header/fixtures.json +18 -18
  63. data/node_modules/govuk-frontend/govuk/components/header/template.njk +4 -4
  64. data/node_modules/govuk-frontend/govuk/components/table/_index.scss +21 -0
  65. data/node_modules/govuk-frontend/govuk/components/table/macro-options.json +2 -2
  66. data/node_modules/govuk-frontend/govuk/objects/_all.scss +1 -0
  67. data/node_modules/govuk-frontend/govuk/objects/_button-group.scss +94 -0
  68. data/node_modules/govuk-frontend/package.json +1 -1
  69. metadata +16 -21
  70. data/app/assets/images/govuk_publishing_components/chevron-banner/chevron-banner-small-focus.svg +0 -4
  71. data/app/assets/images/govuk_publishing_components/chevron-banner/chevron-banner-small.svg +0 -4
  72. data/app/assets/javascripts/govuk_publishing_components/components/header.js +0 -8
  73. data/app/assets/javascripts/govuk_publishing_components/lib/auto-track-event.js +0 -31
  74. data/app/assets/stylesheets/govuk_publishing_components/components/_chevron-banner.scss +0 -138
  75. data/app/assets/stylesheets/govuk_publishing_components/components/_list.scss +0 -1
  76. data/app/assets/stylesheets/govuk_publishing_components/components/helpers/_variables.scss +0 -27
  77. data/app/assets/stylesheets/govuk_publishing_components/components/mixins/_back-arrow.scss +0 -13
  78. data/app/assets/stylesheets/govuk_publishing_components/components/mixins/_clearfix.scss +0 -8
  79. data/app/views/govuk_publishing_components/components/_chevron_banner.html.erb +0 -19
  80. data/app/views/govuk_publishing_components/components/_subscription-links.html.erb +0 -85
  81. data/app/views/govuk_publishing_components/components/_translation-nav.html.erb +0 -33
  82. data/app/views/govuk_publishing_components/components/contextual_sidebar/_brexit_related_links.html.erb +0 -6
  83. data/app/views/govuk_publishing_components/components/docs/chevron_banner.yml +0 -33
  84. data/app/views/govuk_publishing_components/components/docs/subscription-links.yml +0 -103
  85. data/app/views/govuk_publishing_components/components/docs/translation-nav.yml +0 -139
@@ -3,45 +3,38 @@ $transition-campaign-dark-blue: #1e1348;
3
3
 
4
4
  .gem-c-contextual-sidebar__brexit-related-links {
5
5
  border-top: 2px solid $govuk-brand-colour;
6
+ }
6
7
 
7
- .gem-c-contextual-sidebar__brexit-heading {
8
- @include govuk-font(19, $weight: bold);
9
- padding-top: govuk-spacing(3);
10
- margin-bottom: govuk-spacing(2);
11
- }
8
+ .gem-c-contextual-sidebar__brexit-heading {
9
+ @extend %govuk-heading-s;
10
+ margin-top: govuk-spacing(3);
11
+ margin-bottom: govuk-spacing(2);
12
12
  }
13
13
 
14
14
  .gem-c-contextual-sidebar__brexit-cta {
15
- @include govuk-font(19);
16
15
  margin-bottom: govuk-spacing(6);
17
16
  background-color: govuk-colour('light-grey', $legacy: 'grey-4');
18
- border-top: 4px solid $transition-campaign-red;
17
+ border-top: 2px solid $transition-campaign-red;
19
18
  display: block;
20
- padding: govuk-spacing(3);
19
+ padding: 0 govuk-spacing(3) govuk-spacing(3);
21
20
  text-decoration: none;
22
21
 
23
22
  .gem-c-contextual-sidebar__brexit-heading {
24
- @extend %govuk-heading-m;
25
- color: $transition-campaign-dark-blue;
23
+ color: $govuk-text-colour;
26
24
  }
27
25
 
28
26
  .gem-c-contextual-sidebar__brexit-text {
29
27
  @extend %govuk-link;
28
+ @include govuk-font(16);
30
29
 
31
30
  margin-top: 0;
32
- margin-bottom: 0;
31
+ margin-bottom: govuk-spacing(1);
33
32
  text-decoration: underline;
34
33
 
35
34
  @include govuk-media-query($from: tablet) {
36
35
  margin-bottom: govuk-spacing(2);
37
36
  }
38
37
  }
39
-
40
- @include govuk-compatibility(govuk_template) {
41
- .gem-c-contextual-sidebar__brexit-title {
42
- margin-bottom: govuk-spacing(3);
43
- }
44
- }
45
38
  }
46
39
 
47
40
  .gem-c-contextual-sidebar__brexit-cta:focus {
@@ -49,3 +42,27 @@ $transition-campaign-dark-blue: #1e1348;
49
42
  text-decoration: none;
50
43
  }
51
44
  }
45
+
46
+ .gem-c-contextual-sidebar__take-action-traffic-lights {
47
+ text-align: left;
48
+ margin-bottom: govuk-spacing(2);
49
+ }
50
+
51
+ .gem-c-contextual-sidebar__take-action-traffic-lights > li {
52
+ white-space: nowrap;
53
+ display: inline;
54
+ margin-right: 7px;
55
+ margin-bottom: govuk-spacing(1);
56
+ }
57
+
58
+ .gem-c-contextual-sidebar__take-action-traffic-lists-icon {
59
+ vertical-align: middle;
60
+ margin-top: -2px;
61
+ width: 22px;
62
+ margin-right: 2px;
63
+ }
64
+
65
+ .gem-c-contextual-sidebar__take-action-traffic-lists-text {
66
+ @include govuk-font($size: 19, $weight: bold, $line-height: 2);
67
+ vertical-align: middle;
68
+ }
@@ -7,14 +7,10 @@
7
7
 
8
8
  .gem-c-document-list__item {
9
9
  overflow: hidden;
10
- margin-bottom: govuk-spacing(4);
11
- padding-bottom: govuk-spacing(4);
12
- border-bottom: 1px solid $govuk-border-colour;
10
+ margin-bottom: govuk-spacing(5);
11
+ padding-top: govuk-spacing(2);
12
+ border-top: 1px solid $govuk-border-colour;
13
13
  list-style: none;
14
-
15
- &:last-child {
16
- border-bottom: 0;
17
- }
18
14
  }
19
15
 
20
16
  .gem-c-document-list__item-title {
@@ -33,6 +29,12 @@
33
29
  }
34
30
  }
35
31
 
32
+ .gem-c-document-list--no-top-border {
33
+ .gem-c-document-list__item {
34
+ border-top: none;
35
+ }
36
+ }
37
+
36
38
  .gem-c-document-list__item-title--context {
37
39
  margin-right: govuk-spacing(2);
38
40
 
@@ -52,7 +54,7 @@
52
54
  }
53
55
 
54
56
  .gem-c-document-list__subtext {
55
- margin: govuk-spacing(1) 0 0 0;
57
+ margin: 0;
56
58
  }
57
59
 
58
60
  .gem-c-document-list__item-description,
@@ -60,6 +62,10 @@
60
62
  @include govuk-font($size: 16, $line-height: 1.5);
61
63
  }
62
64
 
65
+ .gem-c-document-list__item-description--full-size {
66
+ @include govuk-font($size: 19);
67
+ }
68
+
63
69
  .gem-c-document-list__item-metadata {
64
70
  padding: 0;
65
71
  }
@@ -1,12 +1,12 @@
1
1
  .gem-c-error-alert {
2
- color: $gem-text-colour;
2
+ color: $govuk-text-colour;
3
3
  padding: govuk-spacing(3);
4
- border: $gem-border-width-mobile solid $gem-error-colour;
4
+ border: $govuk-border-width-narrow solid $govuk-error-colour;
5
5
  @include govuk-responsive-margin(8, "bottom");
6
6
 
7
7
  @include govuk-media-query($from: tablet) {
8
8
  padding: govuk-spacing(4);
9
- border-width: $gem-border-width-tablet;
9
+ border-width: $govuk-border-width;
10
10
  }
11
11
  }
12
12
 
@@ -32,5 +32,5 @@
32
32
  }
33
33
 
34
34
  .gem-c-error-alert:focus {
35
- outline: $gem-focus-width solid $gem-focus-colour;
35
+ outline: $govuk-focus-width solid $govuk-focus-colour;
36
36
  }
@@ -8,41 +8,6 @@
8
8
  }
9
9
  }
10
10
 
11
- // hide without js
12
- // show with js, unless also has the js-hidden class
13
- .gem-c-feedback__js-show,
14
- .gem-c-feedback__prompt-success,
15
- .gem-c-feedback__prompt-questions,
16
- .gem-c-feedback__error-summary {
17
- display: none;
18
-
19
- .js-enabled & {
20
- display: block;
21
-
22
- &.js-hidden {
23
- display: none;
24
- }
25
- }
26
- }
27
-
28
- // maintain table display for prompt and prompt-questions
29
- .js-enabled .gem-c-feedback__prompt {
30
- @include govuk-media-query($from: tablet) {
31
- display: table;
32
- }
33
- }
34
-
35
- .js-enabled .gem-c-feedback__prompt-questions {
36
- @include govuk-media-query($from: tablet) {
37
- display: table-cell;
38
- }
39
- }
40
-
41
- // show the default feedback form without js
42
- .js-enabled .gem-c-feedback__form.js-hidden {
43
- display: none;
44
- }
45
-
46
11
  .gem-c-feedback__prompt-questions {
47
12
  text-align: center;
48
13
  border-bottom: 1px solid govuk-colour("white");
@@ -137,15 +102,6 @@
137
102
  .gem-c-feedback__email-link,
138
103
  .gem-c-feedback__prompt-link {
139
104
  position: relative;
140
-
141
- &:after {
142
- content: "";
143
- position: absolute;
144
- top: -14px;
145
- right: -14px;
146
- left: -14px;
147
- bottom: -14px;
148
- }
149
105
  }
150
106
 
151
107
  .gem-c-feedback__prompt-link:link,
@@ -282,3 +238,38 @@
282
238
  outline: $govuk-focus-width solid $govuk-focus-colour;
283
239
  }
284
240
  }
241
+
242
+ // hide without js
243
+ // show with js, unless also has the js-hidden class
244
+ .gem-c-feedback__js-show,
245
+ .gem-c-feedback__prompt-success,
246
+ .gem-c-feedback__prompt-questions,
247
+ .gem-c-feedback__error-summary {
248
+ display: none;
249
+
250
+ .js-enabled & {
251
+ display: block;
252
+
253
+ &.js-hidden {
254
+ display: none;
255
+ }
256
+ }
257
+ }
258
+
259
+ // maintain table display for prompt and prompt-questions
260
+ .js-enabled .gem-c-feedback__prompt {
261
+ @include govuk-media-query($from: tablet) {
262
+ display: table;
263
+ }
264
+ }
265
+
266
+ .js-enabled .gem-c-feedback__prompt-questions {
267
+ @include govuk-media-query($from: tablet) {
268
+ display: table-cell;
269
+ }
270
+ }
271
+
272
+ // show the default feedback form without js
273
+ .js-enabled .gem-c-feedback__form.js-hidden {
274
+ display: none;
275
+ }
@@ -31,7 +31,7 @@
31
31
  }
32
32
 
33
33
  .gem-c-layout-header--search-left {
34
- .gem-c-header__menu-button {
34
+ .gem-c-header__menu-button.govuk-header__menu-button {
35
35
  margin-top: - govuk-spacing(7);
36
36
  left: 0;
37
37
  }
@@ -70,7 +70,7 @@
70
70
  margin-top: 0;
71
71
  }
72
72
 
73
- .gem-c-header__content {
73
+ .gem-c-header__content.govuk-header__content {
74
74
  @include govuk-grid-column(two-thirds);
75
75
  padding-left: govuk-spacing(6);
76
76
  padding-right: govuk-spacing(1);
@@ -78,10 +78,16 @@
78
78
  }
79
79
  }
80
80
 
81
+ .gem-c-layout-header__search.govuk-grid-column-one-third-from-desktop,
82
+ .gem-c-layout-header__logo.govuk-grid-column-one-third-from-desktop,
83
+ .gem-c-layout-header__search.govuk-grid-column-one-third,
84
+ .gem-c-layout-header__logo.govuk-grid-column-two-thirds {
85
+ padding-right: 0;
86
+ padding-left: 0;
87
+ }
88
+
81
89
  .gem-c-layout-header__logo,
82
90
  .gem-c-layout-header__search {
83
- padding: 0;
84
-
85
91
  @include govuk-media-query($until: "tablet") {
86
92
  margin-bottom: govuk-spacing(3);
87
93
  }
@@ -96,8 +102,9 @@
96
102
  }
97
103
  }
98
104
 
99
- .gem-c-header__content {
105
+ .gem-c-header__content.govuk-header__content {
100
106
  width: auto;
107
+ padding-left: 0;
101
108
 
102
109
  @include govuk-media-query($from: desktop) {
103
110
  float: right;
@@ -159,3 +166,12 @@
159
166
  display: block;
160
167
  }
161
168
  }
169
+
170
+ .govuk-header__menu-button.gem-c-header__menu-button {
171
+ top: govuk-spacing(4);
172
+ right: 0;
173
+ }
174
+
175
+ .gem-c-header__nav {
176
+ clear: both;
177
+ }
@@ -1,8 +1,7 @@
1
- $stroke-width: 2px;
2
- $stroke-width-large: 3px;
3
- $number-circle-size: 26px;
1
+ $stroke-width: 1px;
2
+ $number-circle-size: 30px;
4
3
  $number-circle-size-large: 35px;
5
- $top-border: solid 2px govuk-colour("mid-grey", $legacy: "grey-3");
4
+ $top-border: solid 1px govuk-colour("mid-grey", $legacy: "grey-3");
6
5
 
7
6
  @mixin step-nav-vertical-line ($line-style: solid) {
8
7
  content: "";
@@ -16,13 +15,12 @@ $top-border: solid 2px govuk-colour("mid-grey", $legacy: "grey-3");
16
15
 
17
16
  @mixin step-nav-line-position {
18
17
  left: 0;
19
- margin-left: ($number-circle-size / 2) - ($stroke-width / 2);
18
+ margin-left: em(($number-circle-size / 2) - ($stroke-width / 2), 16);
20
19
  }
21
20
 
22
21
  @mixin step-nav-line-position-large {
23
22
  left: 0;
24
- margin-left: ($number-circle-size-large / 2) - ($stroke-width-large / 2);
25
- border-width: $stroke-width-large;
23
+ margin-left: em(($number-circle-size-large / 2) - ($stroke-width / 2), 16);
26
24
  }
27
25
 
28
26
  // custom mixin as govuk-font does undesirable things at different breakpoints
@@ -40,6 +38,13 @@ $top-border: solid 2px govuk-colour("mid-grey", $legacy: "grey-3");
40
38
  }
41
39
  }
42
40
 
41
+ // Adds a focus state for the chevron icon so that it turns black on button focus
42
+ @mixin step-nav-chevron-focus-state {
43
+ .gem-c-step-nav__chevron-stroke {
44
+ stroke: govuk-colour("black");
45
+ }
46
+ }
47
+
43
48
  .gem-c-step-nav {
44
49
  margin-bottom: govuk-spacing(6);
45
50
 
@@ -77,14 +82,29 @@ $top-border: solid 2px govuk-colour("mid-grey", $legacy: "grey-3");
77
82
  }
78
83
 
79
84
  .gem-c-step-nav__button--title {
80
- @include step-nav-font(19, $weight: bold, $line-height: 1.4);
85
+ @include step-nav-font(19, $weight: bold, $line-height: 1.2);
81
86
  display: inline-block;
82
- padding: 0;
87
+ padding: govuk-spacing(1) 0 0;
83
88
  text-align: left;
84
89
  color: govuk-colour("black");
90
+ width: 100%;
85
91
 
86
92
  .gem-c-step-nav--large & {
87
93
  @include step-nav-font(19, $tablet-size: 24, $weight: bold, $line-height: 1.4);
94
+
95
+ @include govuk-media_query($from: tablet) {
96
+ padding-top: govuk-spacing(2);
97
+ }
98
+ }
99
+
100
+ &:focus {
101
+ box-shadow: 0 -4px govuk-colour("black");
102
+
103
+ .gem-c-step-nav__toggle-link {
104
+ color: govuk-colour("black");
105
+ }
106
+
107
+ @include step-nav-chevron-focus-state;
88
108
  }
89
109
  }
90
110
 
@@ -92,15 +112,20 @@ $top-border: solid 2px govuk-colour("mid-grey", $legacy: "grey-3");
92
112
  @include step-nav-font(14, $line-height: 1);
93
113
  position: relative;
94
114
  z-index: 1; // this and relative position stops focus outline underlap with border of accordion
95
- padding: .5em 0 1.5em;
115
+ margin: .5em 0 1.5em;
116
+ padding: 0 0 govuk-spacing(1);
96
117
 
97
- &:hover {
118
+ &:hover .gem-c-step-nav__button-text {
98
119
  text-decoration: underline;
99
120
  }
100
121
 
101
122
  .gem-c-step-nav--large & {
102
123
  @include step-nav-font(14, $tablet-size: 16, $line-height: 1);
103
124
  }
125
+
126
+ &:focus {
127
+ @include step-nav-chevron-focus-state;
128
+ }
104
129
  }
105
130
 
106
131
  .gem-c-step-nav__title-text {
@@ -109,8 +134,35 @@ $top-border: solid 2px govuk-colour("mid-grey", $legacy: "grey-3");
109
134
  }
110
135
 
111
136
  .gem-c-step-nav__chevron {
112
- vertical-align: text-top;
113
- margin-right: govuk-spacing(1);
137
+ display: inline-block;
138
+ vertical-align: middle;
139
+ margin-left: em(5, 14);
140
+
141
+ .gem-c-step-nav--large & {
142
+ margin-left: em(5, 16);
143
+ }
144
+
145
+ svg {
146
+ pointer-events: none;
147
+ }
148
+ }
149
+
150
+ .gem-c-step-nav__button-text {
151
+ display: inline-block;
152
+ text-align: left;
153
+ min-width: em(35, 14);
154
+
155
+ .gem-c-step-nav--large & {
156
+ min-width: em(40, 16);
157
+ }
158
+ }
159
+
160
+ .gem-c-step-nav__button-text--all {
161
+ min-width: em(87, 14);
162
+
163
+ .gem-c-step-nav--large & {
164
+ min-width: em(100, 16);
165
+ }
114
166
  }
115
167
 
116
168
  .gem-c-step-nav__steps {
@@ -120,23 +172,23 @@ $top-border: solid 2px govuk-colour("mid-grey", $legacy: "grey-3");
120
172
 
121
173
  .gem-c-step-nav__step {
122
174
  position: relative;
123
- padding-left: govuk-spacing(6) + govuk-spacing(3);
175
+ padding-left: em(govuk-spacing(6) + govuk-spacing(3), 16);
124
176
  list-style: none;
125
177
 
126
178
  // line down the side of a step
127
179
  &:after {
128
180
  @include step-nav-vertical-line;
129
181
  @include step-nav-line-position;
130
- top: govuk-spacing(3);
182
+ top: em(govuk-spacing(3), 16);
131
183
  }
132
184
 
133
185
  .gem-c-step-nav--large & {
134
186
  @include govuk-media-query($from: tablet) {
135
- padding-left: govuk-spacing(9);
187
+ padding-left: em(govuk-spacing(9), 16);
136
188
 
137
189
  &:after { // stylelint-disable-line max-nesting-depth
138
190
  @include step-nav-line-position-large;
139
- top: govuk-spacing(6);
191
+ top: em(govuk-spacing(6), 16);
140
192
  }
141
193
  }
142
194
  }
@@ -170,7 +222,6 @@ $top-border: solid 2px govuk-colour("mid-grey", $legacy: "grey-3");
170
222
  &:before {
171
223
  margin-left: $number-circle-size-large / 4;
172
224
  width: $number-circle-size-large / 2;
173
- border-width: $stroke-width-large;
174
225
  }
175
226
 
176
227
  &:after {
@@ -193,10 +244,10 @@ $top-border: solid 2px govuk-colour("mid-grey", $legacy: "grey-3");
193
244
  box-sizing: border-box;
194
245
  position: absolute;
195
246
  z-index: 5;
196
- top: govuk-spacing(1);
247
+ top: 3px;
197
248
  left: 0;
198
- width: $number-circle-size;
199
- height: $number-circle-size;
249
+ width: em($number-circle-size, 16);
250
+ height: em($number-circle-size, 16);
200
251
  color: govuk-colour("black");
201
252
  background: govuk-colour("white");
202
253
  border-radius: 100px;
@@ -204,31 +255,44 @@ $top-border: solid 2px govuk-colour("mid-grey", $legacy: "grey-3");
204
255
 
205
256
  .gem-c-step-nav--large & {
206
257
  @include govuk-media-query($from: tablet) {
207
- top: govuk-spacing(3);
208
- width: $number-circle-size-large;
209
- height: $number-circle-size-large;
258
+ top: 11px;
259
+ width: em($number-circle-size-large, 19);
260
+ height: em($number-circle-size-large, 19);
210
261
  }
211
262
  }
212
263
  }
213
264
 
214
265
  .gem-c-step-nav__circle--number {
215
- @include step-nav-font(16, $weight: bold, $line-height: 23px);
266
+ @include step-nav-font(16, $weight: bold, $line-height: 29px);
216
267
  border: solid $stroke-width govuk-colour("mid-grey", $legacy: "grey-2");
217
268
 
218
269
  .gem-c-step-nav--large & {
219
- @include step-nav-font(16, $tablet-size: 19, $weight: bold, $line-height: 23px, $tablet-line-height: 30px);
270
+ @include step-nav-font(16, $tablet-size: 19, $weight: bold, $line-height: 25px, $tablet-line-height: 34px);
271
+ }
220
272
 
221
- @include govuk-media-query($from: tablet) {
222
- border-width: $stroke-width-large;
273
+ .gem-c-step-nav__step--active & {
274
+ background-color: govuk-colour("black");
275
+
276
+ .gem-c-step-nav__circle-background {
277
+ text-shadow: none;
278
+ color: govuk-colour("white");
223
279
  }
224
280
  }
225
281
  }
226
282
 
227
283
  .gem-c-step-nav__circle--logic {
228
- @include step-nav-font(16, $weight: bold, $line-height: 28px);
284
+ @include step-nav-font(19, $weight: bold, $line-height: 28px);
285
+ left: 3px;
286
+ width: em($number-circle-size, 19);
287
+ height: em($number-circle-size, 19);
229
288
 
230
289
  .gem-c-step-nav--large & {
231
- @include step-nav-font(16, $tablet-size: 19, $weight: bold, $line-height: 28px, $tablet-line-height: 34px);
290
+ @include step-nav-font(19, $tablet-size: 24, $weight: bold, $line-height: 28px, $tablet-line-height: 34px);
291
+
292
+ @include govuk-media-query($from: tablet) {
293
+ width: em($number-circle-size-large, 24);
294
+ height: em($number-circle-size-large, 24);
295
+ }
232
296
  }
233
297
  }
234
298
 
@@ -252,21 +316,19 @@ $top-border: solid 2px govuk-colour("mid-grey", $legacy: "grey-3");
252
316
  }
253
317
 
254
318
  .gem-c-step-nav__header {
255
- padding: govuk-spacing(1) 0 govuk-spacing(3);
256
319
  border-top: $top-border;
320
+ padding: govuk-spacing(1) 0 govuk-spacing(6);
257
321
 
258
- .gem-c-step-nav--active & {
259
- cursor: pointer;
322
+ .gem-c-step-nav--large & {
323
+ padding-top: govuk-spacing(2);
260
324
  }
261
325
 
262
- .gem-c-step-nav__button {
263
- &:focus {
264
- @include govuk-focused-text;
326
+ .js-enabled & {
327
+ padding: 0;
328
+ }
265
329
 
266
- .gem-c-step-nav__toggle-link {
267
- @include govuk-focused-text;
268
- }
269
- }
330
+ .gem-c-step-nav--active & {
331
+ cursor: pointer;
270
332
  }
271
333
 
272
334
  &:hover {
@@ -275,16 +337,10 @@ $top-border: solid 2px govuk-colour("mid-grey", $legacy: "grey-3");
275
337
  color: $govuk-link-colour;
276
338
  }
277
339
 
278
- .gem-c-step-nav__toggle-link {
340
+ .gem-c-step-nav__button-text {
279
341
  text-decoration: underline;
280
342
  }
281
343
  }
282
-
283
- .gem-c-step-nav--large & {
284
- @include govuk-media-query($from: tablet) {
285
- padding: govuk-spacing(2) 0 govuk-spacing(6);
286
- }
287
- }
288
344
  }
289
345
 
290
346
  .gem-c-step-nav__title {
@@ -302,6 +358,7 @@ $top-border: solid 2px govuk-colour("mid-grey", $legacy: "grey-3");
302
358
  display: block;
303
359
  color: $govuk-link-colour;
304
360
  text-transform: capitalize;
361
+ padding-bottom: govuk-spacing(6);
305
362
 
306
363
  .gem-c-step-nav--large & {
307
364
  @include step-nav-font(14, $tablet-size: 16, $line-height: 1.2);
@@ -311,6 +368,7 @@ $top-border: solid 2px govuk-colour("mid-grey", $legacy: "grey-3");
311
368
  .gem-c-step-nav__panel {
312
369
  @include govuk-text-colour;
313
370
  @include step-nav-font(16);
371
+ padding-bottom: govuk-spacing(5);
314
372
 
315
373
  .gem-c-step-nav--large & {
316
374
  @include step-nav-font(16, $tablet-size: 19);
@@ -411,7 +469,6 @@ $top-border: solid 2px govuk-colour("mid-grey", $legacy: "grey-3");
411
469
  &:before {
412
470
  left: -(govuk-spacing(9));
413
471
  margin-left: ($number-circle-size-large / 2);
414
- height: $stroke-width-large;
415
472
  }
416
473
  }
417
474
  }