From fb67deb8a9c1493b65a40c6c1b91908ca2e790af Mon Sep 17 00:00:00 2001 From: Matt Hill Date: Fri, 13 Sep 2024 15:51:14 +0100 Subject: [PATCH] New class for collapsing columns for print --- CHANGELOG.md | 1 + .../component_support.scss | 2 ++ .../lib/_print_support.scss | 27 +++++++++++++++++++ 3 files changed, 30 insertions(+) create mode 100644 app/assets/stylesheets/govuk_publishing_components/lib/_print_support.scss diff --git a/CHANGELOG.md b/CHANGELOG.md index db30f63695..8b20a4ab29 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -16,6 +16,7 @@ * Remove 100 character limit on search results ([PR #4230](https://github.com/alphagov/govuk_publishing_components/pull/4230)) * Add GA4 redaction to GWF and GB EORI numbers ([PR #4227](https://github.com/alphagov/govuk_publishing_components/pull/4227)) * Add files for secondary navigation: ([PR #4229](https://github.com/alphagov/govuk_publishing_components/pull/4229)) +* New class to collapse columns for print ([PR #4224](https://github.com/alphagov/govuk_publishing_components/pull/4224)) ## 43.1.1 diff --git a/app/assets/stylesheets/govuk_publishing_components/component_support.scss b/app/assets/stylesheets/govuk_publishing_components/component_support.scss index 9d97802cb8..e339cfda42 100644 --- a/app/assets/stylesheets/govuk_publishing_components/component_support.scss +++ b/app/assets/stylesheets/govuk_publishing_components/component_support.scss @@ -12,3 +12,5 @@ @import "govuk_publishing_components/components/mixins/media-down"; @import "govuk_publishing_components/components/mixins/margins"; @import "govuk_publishing_components/components/mixins/css3"; + +@import "govuk_publishing_components/lib/print_support"; diff --git a/app/assets/stylesheets/govuk_publishing_components/lib/_print_support.scss b/app/assets/stylesheets/govuk_publishing_components/lib/_print_support.scss new file mode 100644 index 0000000000..508c2b293e --- /dev/null +++ b/app/assets/stylesheets/govuk_publishing_components/lib/_print_support.scss @@ -0,0 +1,27 @@ +// A helper class for removing column layouts when printing. +// This should be applied to row/column layouts, by adding the +// class to elements with a `govuk-grid-row` class. The columns +// will then print at the full width of the page. +// Note that only the immediate child columns will be affected. +// If a child column also contains a row/column layout of +// further elements, these will be unaffected and will retain +// their existing column layout. Use the class again on these +// nested grids to apply fullwidth column printing if required. + +@include govuk-media-query($media-type: print) { + .gem-print-columns-none { + width: 100%; + + > .govuk-width-container { + margin: 0; + max-width: none; + } + + > [class*="govuk-grid-column"] { + position: static !important; // stylelint-disable-line declaration-no-important + float: none; + clear: both; + width: 100%; + } + } +}