diff --git a/CHANGELOG.md b/CHANGELOG.md index 2827e5243c..553e0280fa 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,9 +1,15 @@ # Changelog -## Unreleased +## 3.0.0 (Breaking release) 💥 Breaking changes: +- Rename `$govuk-border-width-mobile` to `$govuk-border-width-narrow` + + To migrate: If you are using `$govuk-border-width-mobile` in your own custom code, you need to rename any instances to `$govuk-border-width-narrow`. + + ([PR #1287](https://github.com/alphagov/govuk-frontend/pull/1287)) + - The colour palette has been updated. **Note:** If you are using [compatibility mode], the existing palette will be @@ -106,11 +112,13 @@ 🔧 Fixes: -- Pull Request Title goes here +- Rename `$govuk-border-width-mobile` to `$govuk-border-width-narrow` - Description goes here (optional) + This better reflects how the variable is used. - ([PR #N](https://github.com/alphagov/govuk-frontend/pull/N)) + Also make the error summary border the standard width on mobile. + + ([PR #1287](https://github.com/alphagov/govuk-frontend/pull/1287)) [compatibility mode]: https://github.com/alphagov/govuk-frontend/blob/master/docs/installation/installing-with-npm.md#compatibility-mode diff --git a/src/components/checkboxes/_checkboxes.scss b/src/components/checkboxes/_checkboxes.scss index 0ff04c3325..0f0f1ff9a0 100644 --- a/src/components/checkboxes/_checkboxes.scss +++ b/src/components/checkboxes/_checkboxes.scss @@ -149,7 +149,9 @@ // Conditional reveals // ========================================================= - $conditional-border-width: $govuk-border-width-mobile; + // The narrow border is used in the conditional reveals because the border has + // to be an even number in order to be centred under the 40px checkbox or radio. + $conditional-border-width: $govuk-border-width-narrow; // Calculate the amount of padding needed to keep the border centered against the checkbox. $conditional-border-padding: ($govuk-checkboxes-size / 2) - ($conditional-border-width / 2); // Move the border centered with the checkbox diff --git a/src/components/error-summary/_error-summary.scss b/src/components/error-summary/_error-summary.scss index 81a38abd87..2b2d0e6823 100644 --- a/src/components/error-summary/_error-summary.scss +++ b/src/components/error-summary/_error-summary.scss @@ -12,11 +12,7 @@ @include govuk-responsive-margin(8, "bottom"); @include govuk-focusable; - border: $govuk-border-width-mobile solid $govuk-error-colour; - - @include govuk-media-query($from: tablet) { - border: $govuk-border-width solid $govuk-error-colour; - } + border: $govuk-border-width solid $govuk-error-colour; } .govuk-error-summary__title { diff --git a/src/components/radios/_radios.scss b/src/components/radios/_radios.scss index 8333e035ae..bf2c1ce1c5 100644 --- a/src/components/radios/_radios.scss +++ b/src/components/radios/_radios.scss @@ -187,7 +187,9 @@ // Conditional reveals // ========================================================= - $conditional-border-width: $govuk-border-width-mobile; + // The narrow border is used in the conditional reveals because the border has + // to be an even number in order to be centred under the 40px checkbox or radio. + $conditional-border-width: $govuk-border-width-narrow; // Calculate the amount of padding needed to keep the border centered against the radios. $conditional-border-padding: ($govuk-radios-size / 2) - ($conditional-border-width / 2); // Move the border centered with the radios diff --git a/src/settings/_measurements.scss b/src/settings/_measurements.scss index bd2ac483aa..bbbd73c7f1 100644 --- a/src/settings/_measurements.scss +++ b/src/settings/_measurements.scss @@ -63,12 +63,12 @@ $govuk-border-width: 5px !default; $govuk-border-width-wide: 10px !default; -/// Border width on mobile +/// Narrow border width /// /// @type Number /// @access public -$govuk-border-width-mobile: 4px !default; +$govuk-border-width-narrow: 4px !default; /// Form control border width ///