mirror of
https://github.com/GSA/notifications-admin.git
synced 2026-09-06 14:48:24 -04:00
ece956e324
Includes making the legend the page header to follow design system guidance: https://design-system.service.gov.uk/get-started/labels-legends-headings/ I had to add some override styles to allow the legend to classes as a full-width column, and the radios to be in one that is three-quarters.
55 lines
1.3 KiB
SCSS
55 lines
1.3 KiB
SCSS
// Overrides for certain GOV.UK Frontend styles to make its components match this application's design
|
|
|
|
// Additional padding-bottom override, following the GOV.UK Frontend spacing scale:
|
|
// https://design-system.service.gov.uk/styles/spacing/#the-responsive-spacing-scale
|
|
.govuk-\!-padding-bottom-12 {
|
|
padding-bottom: 70px;
|
|
|
|
@include govuk-media-query($from: tablet) {
|
|
padding-bottom: 90px;
|
|
}
|
|
}
|
|
|
|
.govuk-footer__navigation {
|
|
-webkit-flex-wrap: wrap;
|
|
-ms-flex-wrap: wrap;
|
|
flex-wrap: wrap
|
|
}
|
|
|
|
.govuk-footer__section {
|
|
-webkit-flex-basis: 200px;
|
|
-ms-flex-preferred-size: 200px;
|
|
flex-basis: 100%;
|
|
}
|
|
|
|
@include govuk-media-query($from: tablet) {
|
|
|
|
.govuk-footer__navigation {
|
|
-webkit-flex-wrap: nowrap;
|
|
-ms-flex-wrap: nowrap;
|
|
flex-wrap: nowrap
|
|
}
|
|
|
|
.govuk-footer__section {
|
|
-webkit-flex-basis: 200px;
|
|
-ms-flex-preferred-size: 200px;
|
|
flex-basis: 200px;
|
|
}
|
|
|
|
}
|
|
|
|
// Make column headings smaller to prevent wrapping
|
|
.govuk-footer__heading {
|
|
@include govuk-font($size: 19, $weight: bold);
|
|
}
|
|
|
|
.govuk-button {
|
|
margin-bottom: 0px;
|
|
}
|
|
|
|
// Allow legends that contain the h1 to go full width
|
|
.govuk-fieldset__legend.govuk-grid-column-full {
|
|
// $class parameter is deprecated but needed for v2 of GOVUK Frontend. Remove for v3 & above
|
|
@include govuk-grid-column(full, $class: false);
|
|
}
|