govuk_publishing_components 17.6.1 → 17.7.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.
Files changed (27) hide show
  1. checksums.yaml +4 -4
  2. data/app/assets/stylesheets/govuk_publishing_components/components/_govspeak-html-publication.scss +19 -15
  3. data/app/assets/stylesheets/govuk_publishing_components/components/_phase-banner.scss +19 -0
  4. data/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_advisory.scss +2 -2
  5. data/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_attachment.scss +15 -17
  6. data/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_call-to-action.scss +1 -1
  7. data/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_charts.scss +22 -44
  8. data/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_contact.scss +6 -6
  9. data/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_example.scss +1 -1
  10. data/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_footnotes.scss +3 -3
  11. data/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_form-download.scss +1 -1
  12. data/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_images.scss +4 -4
  13. data/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_information-callout.scss +1 -1
  14. data/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_legislative-list.scss +1 -1
  15. data/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_place.scss +1 -1
  16. data/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_stat-headline.scss +4 -4
  17. data/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_steps.scss +1 -1
  18. data/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_summary.scss +1 -1
  19. data/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_tables.scss +5 -5
  20. data/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_typography.scss +13 -13
  21. data/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_warning-callout.scss +1 -1
  22. data/app/assets/stylesheets/govuk_publishing_components/components/print/_govspeak.scss +6 -6
  23. data/app/views/govuk_publishing_components/components/_phase_banner.html.erb +9 -5
  24. data/app/views/govuk_publishing_components/components/docs/phase_banner.yml +10 -1
  25. data/lib/govuk_publishing_components/version.rb +1 -1
  26. data/node_modules/accessible-autocomplete/package.json +1 -1
  27. metadata +1 -1
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 326e0dc7a825b9bb97c66d22745196ef226d0d69d6ce6a615359b77a2cda2018
4
- data.tar.gz: e8e284660bf9f21af02e2e49f2e361cebdd81a3242f3bb10f893b4d1875b5468
3
+ metadata.gz: 5a3c34586d67a16119aeac7a55f462e222d46afedbc1676d9189de64879c69b6
4
+ data.tar.gz: 8d3435fb34861e37f3be74f810b8c347142875be94555a35e1e99be964078056
5
5
  SHA512:
6
- metadata.gz: b0c044df17483b9628fb9c3ded6f7cf4f94953fc6dc37d5a78a0dd11989b1b3c5b9c913e0d359324d0fd1bfcb2d3a0fc5bcc5687accd457e6db8ba865ec26519
7
- data.tar.gz: ed146dd8af8b4dfad569bc10c079881104fe3a81afe9660e902f29b1079b79833b96832bc7d5550253ef6830ac77c28b3a3531efec245f0194424c50fae5158f
6
+ metadata.gz: 35a3fda9195eb7f0449af19ce54086cbb4371a44c352c90395b96092716d5799d1b8438d4b35a2e27d2e3e95f7f6d91eb47df322c1ce5f8760cb792ef2a16444
7
+ data.tar.gz: 79dd0c477f41e0e0f9966765e9623ab14860d06c76c6139f65d77e0ddee5f555ceec1bb9619b394a37c6edafd0d85c28d6ec4bc4e78b6816857ae7b5a9465f77
@@ -1,6 +1,6 @@
1
1
  // Override govspeak styles with HTML publication specific ones
2
2
  .gem-c-govspeak-html-publication {
3
- margin-bottom: $gutter * 1.5;
3
+ margin-bottom: govuk-spacing(6) * 1.5;
4
4
  z-index: 2;
5
5
 
6
6
  // This fixes the positioning of the sticky element. The reason it's done on the parent element
@@ -22,25 +22,25 @@
22
22
  }
23
23
 
24
24
  .stat-headline:first-child {
25
- margin-top: $gutter;
25
+ margin-top: govuk-spacing(6);
26
26
 
27
27
  @include govuk-media-query($from: tablet) {
28
- margin-top: ($gutter * 2) + $gutter-two-thirds;
28
+ margin-top: govuk-spacing(9) + govuk-spacing(4);
29
29
  }
30
30
  }
31
31
 
32
32
  h2,
33
33
  h3 {
34
- margin-top: $gutter;
34
+ margin-top: govuk-spacing(6);
35
35
 
36
36
  @include govuk-media-query($from: tablet) {
37
- margin-top: ($gutter * 2) + $gutter-two-thirds;
37
+ margin-top: govuk-spacing(9) + govuk-spacing(4);
38
38
  }
39
39
  }
40
40
 
41
41
  h2:first-child,
42
42
  h3:first-child {
43
- margin-top: $gutter-two-thirds;
43
+ margin-top: govuk-spacing(4);
44
44
 
45
45
  @include govuk-media-query($from: tablet) {
46
46
  margin-top: 0;
@@ -67,7 +67,7 @@
67
67
 
68
68
  .numeric {
69
69
  text-align: right;
70
- font-family: $nta-light-tabular;
70
+ @include govuk-font(14, $weight: regular, $tabular: true);
71
71
  }
72
72
 
73
73
  // make all elements inside thead look the same
@@ -75,12 +75,16 @@
75
75
  // and make all of thead and tfoot stand out
76
76
  thead,
77
77
  tfoot {
78
- background-color: $grey-3;
78
+ background-color: govuk-colour("grey-3");
79
79
  }
80
80
 
81
81
  thead th,
82
82
  thead td {
83
- font-weight: bold;
83
+ @include govuk-font(14, $weight: bold, $tabular: true);
84
+
85
+ &.numeric {
86
+ @include govuk-font(14, $weight: bold, $tabular: true);
87
+ }
84
88
  }
85
89
 
86
90
  // don't make `th`s bold unless they are a section heading or a (sub)total row
@@ -93,30 +97,30 @@
93
97
  // is intentionally small and not balanced with other padding
94
98
  // as tables can be quite wide
95
99
  tr > :first-child {
96
- padding-left: $gutter-one-third / 2;
100
+ padding-left: govuk-spacing(1);
97
101
  }
98
102
 
99
103
  // add spacing so that groupings are clearer
100
104
  tr.section-heading > * {
101
105
  font-weight: bold;
102
- padding-top: $gutter;
106
+ padding-top: govuk-spacing(6);
103
107
  }
104
108
 
105
109
  // ideally this should be just a top margin on the tfoot
106
110
  // but as that is very tricky, this is more complex
107
111
  tbody:last-of-type tr:last-child > *,
108
112
  tfoot ~ tbody:last-of-type tr:last-child > * {
109
- padding-bottom: $gutter;
113
+ padding-bottom: govuk-spacing(6);
110
114
  }
111
115
 
112
116
  tbody:last-child tr:last-child > * {
113
- padding-bottom: $gutter-one-third;
117
+ padding-bottom: govuk-spacing(2);
114
118
  }
115
119
 
116
120
  // total and subtotal rows
117
121
  tr.subtotal > *,
118
122
  tr.total > * {
119
- border-top: 3px solid $grey-2;
123
+ border-top: 3px solid govuk-colour("grey-2");
120
124
  }
121
125
 
122
126
  tr.total > *,
@@ -127,7 +131,7 @@
127
131
  // the total is usually in the tfoot, so already has that background colour
128
132
  // but when it's used inside the tbody, it should also be highlighted
129
133
  tr.total {
130
- background-color: $grey-3;
134
+ background-color: govuk-colour("grey-3");
131
135
  }
132
136
  }
133
137
  // sass-lint:enable no-qualifying-elements
@@ -6,3 +6,22 @@
6
6
  margin-right: govuk-spacing(2);
7
7
  }
8
8
  }
9
+
10
+ .gem-c-phase-banner--inverse {
11
+ background: $govuk-brand-colour;
12
+
13
+ .govuk-phase-banner__content__tag {
14
+ background: govuk-colour("white");
15
+ color: $govuk-brand-colour;
16
+ }
17
+
18
+ .govuk-phase-banner__content__app-name,
19
+ .govuk-phase-banner__text,
20
+ .govuk-link {
21
+ color: govuk-colour("white");
22
+
23
+ &:focus {
24
+ color: govuk-colour("black");
25
+ }
26
+ }
27
+ }
@@ -8,7 +8,7 @@ $high-alert-border: #cc0000;
8
8
  padding: 1em;
9
9
  text-align: left;
10
10
 
11
- @include device-pixel-ratio {
11
+ @include govuk-device-pixel-ratio {
12
12
  background-image: image-url("icon-information-2x.png");
13
13
  background-size: 27px 27px;
14
14
  }
@@ -24,7 +24,7 @@ $high-alert-border: #cc0000;
24
24
  }
25
25
 
26
26
  &.high-alert {
27
- background-color: $panel-colour;
27
+ background-color: govuk-colour("grey-3");
28
28
  border-color: $high-alert-border;
29
29
  }
30
30
 
@@ -19,9 +19,9 @@
19
19
 
20
20
  .attachment {
21
21
  position: relative;
22
- margin: $gutter 0;
23
- padding: $gutter-half 0 0 ($thumbnail-width + $gutter);
24
- @extend %contain-floats;
22
+ margin: govuk-spacing(6) 0;
23
+ padding: govuk-spacing(3) 0 0 ($thumbnail-width + govuk-spacing(6));
24
+ @include govuk-clearfix;
25
25
 
26
26
  &:first-child {
27
27
  margin-top: 0;
@@ -29,32 +29,30 @@
29
29
  }
30
30
 
31
31
  .attachment-thumb {
32
- $thumb-border-width: $gutter-one-third / 2;
33
-
34
32
  position: relative;
35
33
  float: left;
36
- margin-top: $thumb-border-width;
37
- margin-left: -($thumbnail-width + $gutter - $thumb-border-width);
38
- padding-bottom: $gutter-half;
34
+ margin-top: $govuk-border-width;
35
+ margin-left: -($thumbnail-width + govuk-spacing(6) - $govuk-border-width);
36
+ padding-bottom: govuk-spacing(3);
39
37
 
40
38
  img {
41
39
  display: block;
42
40
  width: $thumbnail-width;
43
41
  height: 140px;
44
- background: $white;
45
- outline: $thumb-border-width solid transparentize($black, .9);
42
+ background: govuk-colour("white");
43
+ outline: $govuk-border-width solid transparentize(govuk-colour("black"), .9);
46
44
 
47
- @include ie-lte(8) {
45
+ @include govuk-if-ie8 {
48
46
  // IE8 incorrectly asserts the "max-width: 100%" rule to be 0
49
47
  // because of the collapsed width on its floating container
50
48
  // Reset the max-width so that thumbnails render at the specified
51
49
  // width above.
52
50
  // http://www.456bereastreet.com/archive/201202/using_max-width_on_images_can_make_them_disappear_in_ie8/
53
51
  max-width: none;
54
- border: $thumb-border-width solid $grey-3;
52
+ border: $govuk-border-width solid govuk-colour("grey-3");
55
53
  }
56
54
 
57
- @include box-shadow(0 2px 2px rgba($black, .4));
55
+ box-shadow: 0 2px 2px rgba(govuk-colour("black"), .4);
58
56
  }
59
57
  }
60
58
 
@@ -65,7 +63,7 @@
65
63
  }
66
64
 
67
65
  p {
68
- margin: $gutter-one-third 0;
66
+ margin: govuk-spacing(2) 0;
69
67
  }
70
68
 
71
69
  .metadata {
@@ -88,7 +86,7 @@
88
86
  }
89
87
 
90
88
  .preview {
91
- padding-right: $gutter-half;
89
+ padding-right: govuk-spacing(3);
92
90
  }
93
91
 
94
92
  .opendocument-help {
@@ -109,12 +107,12 @@
109
107
  }
110
108
 
111
109
  &.direction-rtl .attachment {
112
- padding: $gutter-half ($thumbnail-width + $gutter) 0 0;
110
+ padding: govuk-spacing(3) ($thumbnail-width + govuk-spacing(6)) 0 0;
113
111
 
114
112
  .attachment-thumb {
115
113
  float: right;
116
114
  margin-left: 0;
117
- margin-right: (($thumbnail-width * -1) - $gutter-half);
115
+ margin-right: (($thumbnail-width * -1) - govuk-spacing(3));
118
116
  }
119
117
  }
120
118
  }
@@ -9,7 +9,7 @@
9
9
  .gem-c-govspeak {
10
10
  .call-to-action {
11
11
  margin: 2em 0;
12
- background-color: $panel-colour;
12
+ background-color: govuk-colour("grey-3");
13
13
  padding: 2em;
14
14
 
15
15
  &:first-child {
@@ -6,16 +6,8 @@
6
6
  // - alphagov/whitehall: ✔︎
7
7
  // - alphagov/govspeak: ✔︎
8
8
 
9
- // Disable linting for vendor asset
10
- // scss-lint:disable all
11
- // sass-lint:disable-all
12
- /*
13
- * magna-charta example stylesheet
14
- * https://github.com/alphagov/magna-charta
15
- *
16
- * Author: Tim Paul
17
- * Licensed under the MIT license.
18
- */
9
+ // adapted from magna-charta example stylesheet
10
+ // https://github.com/alphagov/magna-charta/blob/master/demo/stylesheets/magna-charta.css
19
11
 
20
12
  .gem-c-govspeak {
21
13
  // DEFAULT CHART STYLES
@@ -32,24 +24,11 @@
32
24
 
33
25
  // CHART COLOUR SCHEME
34
26
 
35
- @import "colours"; // Cabinet Office colour palette (feel free to choose your own)
36
- $chart-border: $white; // Chart border colour
37
- $key-border: $white; // Key border colour
38
- $bar-colours: $govuk-blue, $turquoise, $green, $grass-green, $yellow, $orange, $red, $mellow-red;
39
-
40
- // HELPER MIXINS
41
-
42
- @mixin visually-hidden {
43
- // Hides content visually, but not from screen readers
44
- position: absolute !important;
45
- clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
46
- clip: rect(1px, 1px, 1px, 1px);
47
- padding: 0 !important;
48
- border: 0 !important;
49
- height: 1px !important;
50
- width: 1px !important;
51
- overflow: hidden;
52
- }
27
+ $chart-border: govuk-colour("white"); // Chart border colour
28
+ $key-border: govuk-colour("white"); // Key border colour
29
+ $bar-colours: govuk-colour("blue"), govuk-colour("turquoise"), govuk-colour("green"), govuk-colour("light-green"), govuk-colour("yellow"), govuk-colour("orange"), govuk-colour("red"), govuk-colour("bright-red");
30
+ $bar-cell-colour: #ebebeb;
31
+ $bar-outdented-colour: #111111;
53
32
 
54
33
  // CHART STYLES
55
34
  .mc-chart {
@@ -73,7 +52,7 @@
73
52
 
74
53
  // KEY STYLES
75
54
  .mc-thead {
76
- background-color: #ffffff;
55
+ background-color: govuk-colour("white");
77
56
  display: table-header-group;
78
57
  padding: $bar-spacing;
79
58
  border: 1px solid $key-border;
@@ -151,7 +130,7 @@
151
130
  text-align: left;
152
131
  padding: $bar-padding 0;
153
132
  margin-bottom: 1px;
154
- color: $white;
133
+ color: govuk-colour("white");
155
134
  text-indent: $bar-padding;
156
135
  }
157
136
 
@@ -196,7 +175,7 @@
196
175
  .mc-stacked-total {
197
176
  padding: $bar-padding 0;
198
177
  background-color: transparent !important;
199
- color: $black;
178
+ color: govuk-colour("black");
200
179
  display: inline-block;
201
180
  text-indent: 5px;
202
181
  }
@@ -228,7 +207,8 @@
228
207
  }
229
208
  }
230
209
 
231
- .mc-td, .mc-th {
210
+ .mc-td,
211
+ .mc-th {
232
212
  padding: 0;
233
213
  padding-right: $bar-spacing;
234
214
  margin-right: $stack-spacing;
@@ -236,11 +216,11 @@
236
216
 
237
217
  &.mc-bar-cell {
238
218
  display: block;
239
- background-color: #ebebeb; // Just for testing
219
+ background-color: $bar-cell-colour; // Just for testing
240
220
  text-align: left;
241
221
  padding: $bar-padding 0;
242
222
  margin-bottom: 1px;
243
- color: $white;
223
+ color: govuk-colour("white");
244
224
  text-indent: 4px;
245
225
  line-height: 1.5;
246
226
  }
@@ -248,7 +228,7 @@
248
228
 
249
229
  .mc-bar-outdented {
250
230
  span {
251
- color: #111111;
231
+ color: $bar-outdented-colour;
252
232
  }
253
233
  }
254
234
 
@@ -266,15 +246,13 @@
266
246
 
267
247
  // OUTDENTED BAR VALUES
268
248
  &.mc-outdented {
269
- .mc-tbody {
270
- .mc-tr {
271
- .mc-bar-cell {
272
- color: #111111;
273
- }
249
+ .mc-tr {
250
+ .mc-bar-cell {
251
+ color: $bar-cell-colour;
252
+ }
274
253
 
275
- .mc-bar-negative {
276
- text-align: left;
277
- }
254
+ .mc-bar-negative {
255
+ text-align: left;
278
256
  }
279
257
  }
280
258
  }
@@ -300,7 +278,7 @@
300
278
  // Hides the original table
301
279
  .visually-hidden,
302
280
  .visually-hidden caption {
303
- @include visually-hidden;
281
+ @include govuk-visually-hidden;
304
282
 
305
283
  // It's reapplied to captions because Firefox can't hide
306
284
  // table captions unless it's applied directly to it. Go figure.
@@ -9,19 +9,19 @@
9
9
  // .address is used by the `$A` markdown pattern
10
10
  .address,
11
11
  .contact {
12
- border-left: 1px solid $border-colour;
13
- padding-left: $gutter-half;
14
- margin-bottom: $gutter;
15
- margin-top: $gutter;
12
+ border-left: 1px solid govuk-colour("grey-2");
13
+ padding-left: govuk-spacing(3);
14
+ margin-bottom: govuk-spacing(6);
15
+ margin-top: govuk-spacing(6);
16
16
  }
17
17
 
18
18
  .contact {
19
- @extend %contain-floats;
19
+ @include govuk-clearfix;
20
20
  position: relative;
21
21
 
22
22
  .content {
23
23
  float: none;
24
- width: $full-width;
24
+ width: 100%;
25
25
 
26
26
  h3 {
27
27
  @include govuk-font($size: 19, $weight: bold);
@@ -7,7 +7,7 @@
7
7
 
8
8
  .gem-c-govspeak {
9
9
  .example {
10
- border-left: 1em solid $panel-colour;
10
+ border-left: 1em solid govuk-colour("grey-3");
11
11
  padding: 1em 0 1em 1em;
12
12
  margin: 2em 0;
13
13
 
@@ -11,9 +11,9 @@
11
11
 
12
12
  .gem-c-govspeak {
13
13
  .footnotes {
14
- border-top: 1px solid $border-colour;
15
- margin-top: $gutter;
16
- padding-top: $gutter-one-third;
14
+ border-top: 1px solid govuk-colour("grey-2");
15
+ margin-top: govuk-spacing(6);
16
+ padding-top: govuk-spacing(2);
17
17
 
18
18
  ol {
19
19
  margin-top: 0;
@@ -16,7 +16,7 @@
16
16
  min-height: 2.5em;
17
17
  padding: 0 0 0 2.5em;
18
18
 
19
- @include device-pixel-ratio {
19
+ @include govuk-device-pixel-ratio {
20
20
  background-image: image-url("icon-file-download-2x.png");
21
21
  background-size: 25px 25px;
22
22
  }
@@ -8,21 +8,21 @@
8
8
  img {
9
9
  width: auto;
10
10
  height: auto;
11
- max-width: $full-width;
11
+ max-width: 100%;
12
12
  }
13
13
 
14
14
  figure {
15
- width: $full-width;
15
+ width: 100%;
16
16
  clear: both;
17
17
  overflow: hidden;
18
- padding: $gutter-one-third 0 0;
18
+ padding: govuk-spacing(2) 0 0;
19
19
 
20
20
  img {
21
21
  display: inline;
22
22
  text-align: center;
23
23
  width: auto;
24
24
  height: auto;
25
- max-width: $full-width;
25
+ max-width: 100%;
26
26
  }
27
27
 
28
28
  figcaption {
@@ -8,7 +8,7 @@
8
8
 
9
9
  .gem-c-govspeak {
10
10
  .info-notice {
11
- border-left: 1em solid $panel-colour;
11
+ border-left: 1em solid govuk-colour("grey-3");
12
12
  padding: 1em 0 1em 1em;
13
13
  margin: 2em 0;
14
14
 
@@ -19,7 +19,7 @@
19
19
  }
20
20
 
21
21
  ol {
22
- margin: 10px 0 10px $gutter;
22
+ margin: govuk-spacing(2) 0 govuk-spacing(2) govuk-spacing(6);
23
23
  list-style: none;
24
24
  }
25
25
  }
@@ -1,6 +1,6 @@
1
1
  .gem-c-govspeak .place {
2
2
  margin: 1.5em 0;
3
- border-bottom: solid 1px $border-colour;
3
+ border-bottom: solid 1px govuk-colour("grey-2");
4
4
  padding-bottom: 1.5em;
5
5
 
6
6
  .address {
@@ -7,12 +7,12 @@
7
7
 
8
8
  .gem-c-govspeak {
9
9
  .stat-headline {
10
- margin-bottom: $gutter-half;
11
- margin-top: $gutter-half;
10
+ margin-bottom: govuk-spacing(3);
11
+ margin-top: govuk-spacing(3);
12
12
 
13
13
  @include govuk-media-query($from: tablet) {
14
- margin-bottom: $gutter-two-thirds;
15
- margin-top: $gutter-two-thirds;
14
+ margin-bottom: govuk-spacing(4);
15
+ margin-top: govuk-spacing(4);
16
16
  }
17
17
 
18
18
  p {
@@ -14,7 +14,7 @@
14
14
  &:nth-child(#{$i}) {
15
15
  background-image: image-url("icon-steps/icon-step-#{$i}.png");
16
16
 
17
- @include device-pixel-ratio {
17
+ @include govuk-device-pixel-ratio {
18
18
  background-image: image-url("icon-steps/icon-step-#{$i}-2x.png");
19
19
  background-size: 24px 24px;
20
20
  }
@@ -1,7 +1,7 @@
1
1
  .gem-c-govspeak .summary {
2
2
  margin: 0 0 2em;
3
3
  padding: 0;
4
- color: $text-colour;
4
+ color: $govuk-text-colour;
5
5
 
6
6
  p {
7
7
  @include govuk-font($size: 19);
@@ -9,8 +9,8 @@
9
9
  table {
10
10
  border-collapse: collapse;
11
11
  border-spacing: 0;
12
- margin: $gutter 0;
13
- width: $full-width;
12
+ margin: govuk-spacing(6) 0;
13
+ width: 100%;
14
14
  @include govuk-font($size: 14);
15
15
 
16
16
  caption {
@@ -21,14 +21,14 @@
21
21
  th,
22
22
  td {
23
23
  vertical-align: top;
24
- padding: $gutter-one-third $gutter-one-third $gutter-one-third 0;
25
- border-bottom: solid 1px $border-colour;
24
+ padding: govuk-spacing(2) govuk-spacing(2) govuk-spacing(2) 0;
25
+ border-bottom: solid 1px govuk-colour("grey-2");
26
26
  }
27
27
 
28
28
  th {
29
29
  @include govuk-font($size: 14, $weight: bold);
30
30
  text-align: left;
31
- color: $black;
31
+ color: $govuk-text-colour;
32
32
  }
33
33
 
34
34
  td small {
@@ -15,7 +15,7 @@
15
15
  &.direction-rtl ol,
16
16
  &.direction-rtl ul {
17
17
  margin-left: 0;
18
- margin-right: $gutter-two-thirds;
18
+ margin-right: govuk-spacing(4);
19
19
 
20
20
  ul,
21
21
  ol {
@@ -27,26 +27,26 @@
27
27
  // Block quotes
28
28
 
29
29
  blockquote {
30
- padding: 0 0 0 $gutter-two-thirds;
30
+ padding: 0 0 0 govuk-spacing(4);
31
31
  margin: 0;
32
32
  border: 0;
33
33
 
34
- @include media(desktop) {
35
- margin: 0 0 0 (-$gutter);
34
+ @include govuk-media-query($from: desktop) {
35
+ margin: 0 0 0 (- govuk-spacing(6));
36
36
  }
37
37
 
38
38
  p {
39
- padding-left: $gutter-half;
39
+ padding-left: govuk-spacing(3);
40
40
 
41
- @include media(tablet) {
42
- padding-left: $gutter;
41
+ @include govuk-media-query($from: tablet) {
42
+ padding-left: govuk-spacing(6);
43
43
  }
44
44
 
45
45
  &:before {
46
46
  content: "\201C";
47
47
  float: left;
48
48
  clear: both;
49
- margin-left: -$gutter-half;
49
+ margin-left: (- govuk-spacing(3));
50
50
  }
51
51
 
52
52
  &:last-child:after {
@@ -56,25 +56,25 @@
56
56
  }
57
57
 
58
58
  &.direction-rtl blockquote {
59
- padding: 0 $gutter-two-thirds 0 0;
59
+ padding: 0 govuk-spacing(4) 0 0;
60
60
 
61
61
  @include govuk-media-query($from: desktop) {
62
- margin: 0 (-$gutter) 0 0;
62
+ margin: 0 (- govuk-spacing(6)) 0 0;
63
63
  }
64
64
 
65
65
  p {
66
- padding-right: $gutter-half;
66
+ padding-right: govuk-spacing(3);
67
67
  padding-left: 0;
68
68
 
69
69
  @include govuk-media-query($from: tablet) {
70
- padding-right: $gutter;
70
+ padding-right: govuk-spacing(6);
71
71
  padding-left: 0;
72
72
  }
73
73
 
74
74
  &:before {
75
75
  content: "\201D";
76
76
  float: right;
77
- margin-right: -$gutter-half;
77
+ margin-right: (- govuk-spacing(3));
78
78
  margin-left: 0;
79
79
  }
80
80
 
@@ -19,7 +19,7 @@
19
19
  background-size: $icon-size $icon-size;
20
20
  background-repeat: no-repeat;
21
21
 
22
- @include device-pixel-ratio {
22
+ @include govuk-device-pixel-ratio {
23
23
  background-image: image-url("icon-important-2x.png");
24
24
  }
25
25
 
@@ -6,9 +6,9 @@
6
6
  .info-notice,
7
7
  .help-notice,
8
8
  .call-to-action {
9
- margin: $gutter-half 0;
10
- padding: 0 $gutter-half;
11
- border: 1pt solid $border-colour;
9
+ margin: govuk-spacing(3) 0;
10
+ padding: 0 govuk-spacing(3);
11
+ border: 1pt solid govuk-colour("grey-2");
12
12
  }
13
13
 
14
14
  .help-notice p {
@@ -23,7 +23,7 @@
23
23
  }
24
24
 
25
25
  .attachment {
26
- margin: $gutter 0;
26
+ margin: govuk-spacing(6) 0;
27
27
 
28
28
  &:first-child {
29
29
  margin-top: 0;
@@ -41,7 +41,7 @@
41
41
 
42
42
  .accessibility-warning {
43
43
  h2 {
44
- @include core-14;
44
+ @include govuk-font(14);
45
45
  }
46
46
 
47
47
  .toggler {
@@ -51,7 +51,7 @@
51
51
  }
52
52
 
53
53
  .footnotes {
54
- border-top: 1px solid $text-colour;
54
+ border-top: 1px solid $govuk-text-colour;
55
55
  }
56
56
 
57
57
  .legislative-list {
@@ -1,7 +1,8 @@
1
1
  <%
2
2
  app_name ||= nil
3
3
  phase ||= nil
4
- message ||= nil
4
+ message ||= nil
5
+ inverse ||= false
5
6
 
6
7
  unless phase.in?(%w[alpha beta])
7
8
  raise ArgumentError, "The phase banner component expects a `phase` (`beta` or `alpha`), #{phase.inspect} given"
@@ -9,14 +10,17 @@ end
9
10
 
10
11
  unless message.present?
11
12
  if phase == "beta"
12
- message = raw("This part of GOV.UK is being rebuilt &ndash; <a href=\"/help/beta\">find out what beta means</a>")
13
+ message = raw("This part of GOV.UK is being rebuilt &ndash; <a class=\"govuk-link\" href=\"/help/beta\">find out what beta means</a>")
13
14
  elsif phase == "alpha"
14
- message = raw("This part of GOV.UK is being built &ndash; <a href=\"/service-manual/phases/ideal-alphas\">find out what alpha means</a>")
15
+ message = raw("This part of GOV.UK is being built &ndash; <a class=\"govuk-link\" href=\"/service-manual/phases/ideal-alphas\">find out what alpha means</a>")
15
16
  end
16
- end
17
+ end
18
+
19
+ container_css_classes = %w(gem-c-phase-banner govuk-phase-banner)
20
+ container_css_classes << "gem-c-phase-banner--inverse" if inverse
17
21
  %>
18
22
 
19
- <%= tag.div class: "gem-c-phase-banner govuk-phase-banner" do %>
23
+ <%= tag.div class: container_css_classes do %>
20
24
  <%= tag.p class: "govuk-phase-banner__content" do %>
21
25
  <%= tag.strong app_name, class: "govuk-phase-banner__content__app-name" if app_name %>
22
26
  <%= tag.strong phase, class: "govuk-tag govuk-phase-banner__content__tag" %>
@@ -18,8 +18,17 @@ examples:
18
18
  data:
19
19
  phase: beta
20
20
  message: This is an optional different message to explain what the state means in this
21
- context which can take <a href='https://www.gov.uk'>HTML</a>
21
+ context which can take <a class="govuk-link" href='https://www.gov.uk'>HTML</a>
22
22
  with_app_name:
23
23
  data:
24
24
  app_name: Skittles Maker
25
25
  phase: beta
26
+ inverse_for_blue_background:
27
+ data:
28
+ phase: beta
29
+ inverse: true
30
+ inverse_for_blue_background_with_app_name:
31
+ data:
32
+ app_name: Skittles Maker
33
+ phase: beta
34
+ inverse: true
@@ -1,3 +1,3 @@
1
1
  module GovukPublishingComponents
2
- VERSION = '17.6.1'.freeze
2
+ VERSION = '17.7.0'.freeze
3
3
  end
@@ -49,7 +49,7 @@
49
49
  "/"
50
50
  ],
51
51
  "_resolved": "git://github.com/alphagov/accessible-autocomplete.git#3523dd9fffc70cbd9f6f555f75863c33a709f49e",
52
- "_shasum": "a8d82fdf44ee260077b8fc108db07667d0e8f5b9",
52
+ "_shasum": "1f80c0f6496bc9005bdc5742bd3a6f47e3a44be0",
53
53
  "_shrinkwrap": null,
54
54
  "_spec": "accessible-autocomplete@git://github.com/alphagov/accessible-autocomplete.git#add-multiselect-support",
55
55
  "_where": "/var/lib/jenkins/workspace/ublishing_components_master-N4FWJIUY4CIFHKGZOAAEVVXODRY3YBORQOPIBBXWX72VUPSGJRRQ",
metadata CHANGED
@@ -1,7 +1,7 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: govuk_publishing_components
3
3
  version: !ruby/object:Gem::Version
4
- version: 17.6.1
4
+ version: 17.7.0
5
5
  platform: ruby
6
6
  authors:
7
7
  - GOV.UK Dev