diff --git a/CHANGELOG.md b/CHANGELOG.md index 0458829b52..c3c1e01f55 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -5,6 +5,15 @@ ### Breaking changes You must make the following changes when you migrate to this release, or your service may break. +#### Remove deprecated `govuk-main-wrapper` and `govuk-main-wrapper--l` mixins +In [GOV.UK Frontend version 3.0.0](https://github.com/alphagov/govuk-frontend/releases/tag/v3.0.0), we deprecated the `govuk-main-wrapper` and `govuk-main-wrapper--l` Sass mixins. + +We've now removed the `govuk-main-wrapper` and `govuk-main-wrapper--l` mixins. + +Remove any use of these mixins in your own Sass. You can replace these mixins with direct references to the [spacing mixins](https://design-system.service.gov.uk/styles/spacing/#spacing-on-custom-components) + +This change was introduced in [pull request #2385: Remove deprecated `govuk-main-wrapper` and `govuk-main-wrapper--l` mixins](https://github.com/alphagov/govuk-frontend/pull/2385). + #### Remove deprecated `$govuk-border-width-form-element-error` variable In [GOV.UK Frontend version 3.8.0](https://github.com/alphagov/govuk-frontend/releases/tag/v3.8.0), we made the border width of form elements in their error state the same as for form elements in their normal state, and deprecated the `$govuk-border-width-form-element-error` variable. diff --git a/src/govuk/objects/_main-wrapper.scss b/src/govuk/objects/_main-wrapper.scss index 44779db0db..49d214f9c6 100644 --- a/src/govuk/objects/_main-wrapper.scss +++ b/src/govuk/objects/_main-wrapper.scss @@ -21,37 +21,22 @@ // // -/// @deprecated Replace this mixin with more direct references to the [spacing -/// mixins](https://design-system.service.gov.uk/styles/spacing/#spacing-on-custom-components). -@mixin govuk-main-wrapper { - // In IE11 the `main` element can be used, but is not recognized – - // meaning it's not defined in IE's default style sheet, - // so it uses CSS initial value, which is inline. - display: block; - padding-top: govuk-spacing(4); - padding-bottom: govuk-spacing(4); - - @include govuk-media-query($from: tablet) { - // This spacing is manually adjusted to replicate the margin of - // govuk-heading-xl (50px) minus the spacing of back link and - // breadcrumbs (10px) - padding-top: govuk-spacing(7); - padding-bottom: govuk-spacing(7); - } -} - -/// Use govuk-main-wrapper--l when you page does not have Breadcrumbs, phase -/// banners or back links. -/// -/// @deprecated Replace this mixin with more direct references to the [spacing -/// mixins](https://design-system.service.gov.uk/styles/spacing/#spacing-on-custom-components). -@mixin govuk-main-wrapper--l { - @include govuk-responsive-padding(8, "top"); -} - @include govuk-exports("govuk/objects/main-wrapper") { .govuk-main-wrapper { - @include govuk-main-wrapper; + // In IE11 the `main` element can be used, but is not recognized – + // meaning it's not defined in IE's default style sheet, + // so it uses CSS initial value, which is inline. + display: block; + padding-top: govuk-spacing(4); + padding-bottom: govuk-spacing(4); + + @include govuk-media-query($from: tablet) { + // This spacing is manually adjusted to replicate the margin of + // govuk-heading-xl (50px) minus the spacing of back link and + // breadcrumbs (10px) + padding-top: govuk-spacing(7); + padding-bottom: govuk-spacing(7); + } } // Using the `.govuk-main-wrapper--auto-spacing` modifier should apply the @@ -63,6 +48,6 @@ // `govuk-main-wrapper--l` modifier instead. .govuk-main-wrapper--auto-spacing:first-child, .govuk-main-wrapper--l { - @include govuk-main-wrapper--l; + @include govuk-responsive-padding(8, "top"); } }