From 8b9068801c003ac9b513156ffb8ac46a1c3140e7 Mon Sep 17 00:00:00 2001 From: Dave House Date: Fri, 3 Aug 2018 10:43:12 +0100 Subject: [PATCH 1/2] Change spacing relationship on default and small legends and hints to align with labels --- src/components/fieldset/_fieldset.scss | 5 ++++- src/components/hint/_hint.scss | 31 +++++++++++++++++++++----- 2 files changed, 30 insertions(+), 6 deletions(-) diff --git a/src/components/fieldset/_fieldset.scss b/src/components/fieldset/_fieldset.scss index cc4117175d..a507892eb8 100644 --- a/src/components/fieldset/_fieldset.scss +++ b/src/components/fieldset/_fieldset.scss @@ -20,7 +20,7 @@ box-sizing: border-box; // 1 display: table; // 2 max-width: 100%; // 1 - margin-bottom: govuk-spacing(3); + margin-bottom: govuk-spacing(2); padding: 0; // Hack to let legends or elements within legends have margins in webkit browsers overflow: hidden; @@ -32,14 +32,17 @@ .govuk-fieldset__legend--xl { @include govuk-font($size: 48, $weight: bold); + margin-bottom: govuk-spacing(3); } .govuk-fieldset__legend--l { @include govuk-font($size: 36, $weight: bold); + margin-bottom: govuk-spacing(3); } .govuk-fieldset__legend--m { @include govuk-font($size: 24, $weight: bold); + margin-bottom: govuk-spacing(3); } .govuk-fieldset__legend--s { diff --git a/src/components/hint/_hint.scss b/src/components/hint/_hint.scss index 2ae2cda736..7dab10c46a 100644 --- a/src/components/hint/_hint.scss +++ b/src/components/hint/_hint.scss @@ -16,14 +16,35 @@ // Reduces margin-bottom of hint when used after the default label (no class) // or govuk-label--s for better vertical alignment. - // This adjustment will not work when the label is inside the

, however - // it is unlikely that the default or govuk-label--s class would be used in - // this case. + // This adjustment will not work when the label is inside the

, however it + // is unlikely that the default or govuk-label--s class would be used in this + // case. - // This adjustment will not work in browsers that do not support :not() - // Users with these browsers will see the default size margin (5px larger) + // This adjustment will not work in browsers that do not support :not(). + // Users with these browsers will see the default size margin (5px larger). .govuk-label:not(.govuk-label--m):not(.govuk-label--l):not(.govuk-label--xl) + .govuk-hint { margin-bottom: govuk-spacing(2); } + + // Reduces margin-bottom of hint when used after the default legend (no class) + // or govuk-fieldset__legend--s for better vertical alignment. + + // This adjustment will not work when the legend is outside the

, however + // it is unlikely that the default or govuk-fieldset__legend--s class would be + // used in this case. + + // This adjustment will not work in browsers that do not support :not(). + // Users with these browsers will see the default size margin (5px larger). + + .govuk-fieldset__legend:not(.govuk-fieldset__legend--m):not(.govuk-fieldset__legend--l):not(.govuk-fieldset__legend--xl) + .govuk-hint { + margin-bottom: govuk-spacing(2); + } + + // Reduces visual spacing of legend when there is a hint + + .govuk-fieldset__legend + .govuk-hint, + .govuk-fieldset__legend + .govuk-hint { + margin-top: -(govuk-spacing(1)); + } } From a75c74698ab8623cacdb569338bf15a969d6a68b Mon Sep 17 00:00:00 2001 From: Nick Colley Date: Thu, 9 Aug 2018 15:36:38 +0100 Subject: [PATCH 2/2] Add CHANGELOG entry --- CHANGELOG.md | 3 +++ 1 file changed, 3 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 2c585de5bd..c69388c597 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -57,6 +57,9 @@ - Update date input component to use `display: inline-block` ([PR #938](https://github.com/alphagov/govuk-frontend/pull/938)) + +- Change spacing relationship on default and small legends and hints + ([PR #940](https://github.com/alphagov/govuk-frontend/pull/940)) ## 1.2.0 (feature release)