Skip to content

Commit

Permalink
Change spacing relationship on default and small legends and hints to…
Browse files Browse the repository at this point in the history
… align with labels
  • Loading branch information
Dave House authored and igloosi committed Aug 13, 2018
1 parent 47407ed commit 81c62ec
Show file tree
Hide file tree
Showing 2 changed files with 30 additions and 6 deletions.
5 changes: 4 additions & 1 deletion src/components/fieldset/_fieldset.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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 {
Expand Down
31 changes: 26 additions & 5 deletions src/components/hint/_hint.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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 <h1>, 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 <h1>, 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 <h1>, 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));
}
}

0 comments on commit 81c62ec

Please sign in to comment.