diff --git a/CHANGELOG.md b/CHANGELOG.md index e17257bbcf..c6330646db 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -11,10 +11,13 @@ Breaking changes: `govuk-c-radios--inline` which will automatically make all the radio buttons within that block inline. (PR [#607](https://github.com/alphagov/govuk-frontend/pull/607)) - + +New features: +- Add `govuk-main-wrapper--l` a variant of the main page wrapper to use when a design does not include back links, breadcrumbs or phase banners (PR [#602](https://github.com/alphagov/govuk-frontend/pull/602)) + Internal: - Update check script for new components and tweak docs - (PR [#589](https://github.com/alphagov/govuk-frontend/pull/589)) + (PR [#589](https://github.com/alphagov/govuk-frontend/pull/589)) ## 0.0.26-alpha (Breaking release) diff --git a/src/globals/objects/_main-wrapper.scss b/src/globals/objects/_main-wrapper.scss index d2e81d4800..84dab312c6 100644 --- a/src/globals/objects/_main-wrapper.scss +++ b/src/globals/objects/_main-wrapper.scss @@ -1,4 +1,4 @@ -// Example usage: +// Example usage with Breadcrumbs, phase banners, back links: //
// //
@@ -6,17 +6,32 @@ // to the top / bottom --> //
//
+// +// Example usage without Breadcrumbs, phase banners, back links: +//
+//
+// +//
+//
+ @mixin govuk-main-wrapper { - padding: $govuk-spacing-scale-3 0; + @include govuk-responsive-padding($govuk-spacing-responsive-6, "top"); + @include govuk-responsive-padding($govuk-spacing-responsive-6, "bottom"); +} - @include mq($from: tablet) { - padding: $govuk-spacing-scale-6 0; - } +// Use govuk-main-wrapper--l when you page does not have Breadcrumbs, phase banners or back links +@mixin govuk-main-wrapper--l { + @include govuk-responsive-padding($govuk-spacing-responsive-8, "top"); } @include govuk-exports("main-wrapper") { .govuk-o-main-wrapper { @include govuk-main-wrapper; } + + .govuk-o-main-wrapper--l { + @include govuk-main-wrapper--l; + } }