diff --git a/CHANGELOG.md b/CHANGELOG.md index f472d03fea..872fb9e6f3 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,12 @@ ## Unreleased +### Fixes + +We’ve made fixes to GOV.UK Frontend in the following pull requests: + +- [#2668: Fix Summary List action link alignment](https://github.com/alphagov/govuk-frontend/pull/2668) + ## 4.2.0 (Feature release) ### New features diff --git a/src/govuk/components/summary-list/_index.scss b/src/govuk/components/summary-list/_index.scss index 236546fde4..95e0ebdc68 100644 --- a/src/govuk/components/summary-list/_index.scss +++ b/src/govuk/components/summary-list/_index.scss @@ -93,21 +93,43 @@ } .govuk-summary-list__actions-list-item { - display: inline; - margin-right: govuk-spacing(2); - padding-right: govuk-spacing(2); + display: inline-block; } // In older browsers such as IE8, :last-child is not available, // so only show the border divider where it is available. - .govuk-summary-list__actions-list-item:not(:last-child) { - border-right: 1px solid $govuk-border-colour; + @include govuk-media-query($until: tablet) { + .govuk-summary-list__actions-list-item { + margin-right: govuk-spacing(2); + padding-right: govuk-spacing(2); + } + + .govuk-summary-list__actions-list-item:not(:last-child) { + border-right: 1px solid $govuk-border-colour; + } + + .govuk-summary-list__actions-list-item:last-child { + margin-right: 0; + padding-right: 0; + border: 0; + } } - .govuk-summary-list__actions-list-item:last-child { - margin-right: 0; - padding-right: 0; - border: 0; + @include govuk-media-query($from: tablet) { + .govuk-summary-list__actions-list-item { + margin-left: govuk-spacing(2); + padding-left: govuk-spacing(2); + } + + .govuk-summary-list__actions-list-item:not(:first-child) { + border-left: 1px solid $govuk-border-colour; + } + + .govuk-summary-list__actions-list-item:first-child { + margin-left: 0; + padding-left: 0; + border: 0; + } } // No border on entire summary list diff --git a/src/govuk/components/summary-list/template.njk b/src/govuk/components/summary-list/template.njk index e6ad25cf2e..2e2c3bd017 100644 --- a/src/govuk/components/summary-list/template.njk +++ b/src/govuk/components/summary-list/template.njk @@ -29,11 +29,11 @@ {{ _actionLink(row.actions.items[0]) | indent(12) | trim }} {% else %} {% endif %} diff --git a/tasks/gulp/compile-assets.js b/tasks/gulp/compile-assets.js index 7869924cde..e72c9974de 100644 --- a/tasks/gulp/compile-assets.js +++ b/tasks/gulp/compile-assets.js @@ -21,7 +21,7 @@ const cssnano = require('cssnano') const postcsspseudoclasses = require('postcss-pseudo-classes')({ // Work around a bug in pseudo classes plugin that badly transforms // :not(:whatever) pseudo selectors - blacklist: [':not(', ':disabled)', ':last-child)', ':focus)', ':active)', ':hover)'] + blacklist: [':not(', ':disabled)', ':first-child)', ':last-child)', ':focus)', ':active)', ':hover)'] }) // Compile CSS and JS task --------------