diff --git a/CHANGELOG.md b/CHANGELOG.md index 7fe42aecfa..7b77bc31ea 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -32,6 +32,12 @@ ([PR #N](https://github.com/alphagov/govuk-frontend/pull/N)) +- Fixes styling of the accordion component when there is no JavaScript or it has been turned off + + Thanks @dankmitchell for reporting this issue ([#1130](https://github.com/alphagov/govuk-frontend/issues/1130)) + + ([PR #1149](https://github.com/alphagov/govuk-frontend/pull/1149)) + - Remove hover state for accordion sections on mobile ([PR #1148](https://github.com/alphagov/govuk-frontend/pull/1148)) diff --git a/src/components/accordion/_accordion.scss b/src/components/accordion/_accordion.scss index 64a72a46d2..4e72fe2afb 100644 --- a/src/components/accordion/_accordion.scss +++ b/src/components/accordion/_accordion.scss @@ -7,13 +7,11 @@ .govuk-accordion { @include govuk-responsive-margin(6, "bottom"); - // Border at the bottom of the whole accordion - border-bottom: 1px solid $govuk-border-colour; } // Borders between accordion sections .govuk-accordion__section { - border-top: 1px solid $govuk-border-colour; + padding-top: govuk-spacing(3); } .govuk-accordion__section-header { @@ -28,6 +26,7 @@ // Buttons within the sections don’t need default styling .govuk-accordion__section-button { @include govuk-font($size: 24, $weight: bold); + display: inline-block; margin-bottom: 0; padding-top: govuk-spacing(3); } @@ -37,9 +36,25 @@ margin-bottom: 0; } + // Remove the bottom margin from the last item inside the content + .govuk-accordion__section-content > :last-child { + margin-bottom: 0; + } + // JavaScript enabled .js-enabled { + .govuk-accordion { + // Border at the bottom of the whole accordion + border-bottom: 1px solid $govuk-border-colour; + } + + // Borders between accordion sections + .govuk-accordion__section { + padding-top: 0; + border-top: 1px solid $govuk-border-colour; + } + // Hide the body of collapsed sections .govuk-accordion__section-content { display: none; @@ -47,11 +62,6 @@ @include govuk-responsive-padding(3, "bottom"); } - // Remove the bottom margin from the last item inside the content - .govuk-accordion__section-content > :last-child { - margin-bottom: 0; - } - // Show the body of expanded sections .govuk-accordion__section--expanded .govuk-accordion__section-content { display: block;