Skip to content

Commit

Permalink
Fix Accordion content padding during page load
Browse files Browse the repository at this point in the history
During a slow page load, the accordion content was briefly visible *without* padding
  • Loading branch information
colinrotherham committed Dec 12, 2022
1 parent b23cd4a commit dc49960
Showing 1 changed file with 9 additions and 5 deletions.
14 changes: 9 additions & 5 deletions src/govuk/components/accordion/_index.scss
Original file line number Diff line number Diff line change
Expand Up @@ -46,21 +46,25 @@
padding-top: 0;
}

.govuk-accordion__section-content {
@include govuk-responsive-padding(3, "top");
@include govuk-responsive-padding(8, "bottom");
}

// Manually apply display: none to browsers that don't have a user agent
// style for it, but override it with content-visibility if the browser
// supports that instead.
.govuk-accordion__section-content[hidden] {
display: none;

@supports (content-visibility: hidden) {
content-visibility: hidden;
display: inherit;
}
}

// Hide the padding of collapsed sections
.govuk-accordion__section--expanded .govuk-accordion__section-content {
@include govuk-responsive-padding(8, "bottom");
@include govuk-responsive-padding(3, "top");
// Hide the padding of collapsed sections
padding-top: 0;
padding-bottom: 0;
}

.govuk-accordion__show-all {
Expand Down

0 comments on commit dc49960

Please sign in to comment.