Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Change spacing relationship on default and small legends and hints #940

Merged
merged 2 commits into from
Aug 13, 2018
Merged

Change spacing relationship on default and small legends and hints #940

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
8b90688
Change spacing relationship on default and small legends and hints to…
Aug 3, 2018
a75c746
Add CHANGELOG entry
NickColley Aug 9, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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)

Expand Down
5 changes: 4 additions & 1 deletion src/components/fieldset/_fieldset.scss
View file
Open in desktop
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
View file
Open in desktop
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));
}
}