darkhelm/notifications-admin
1
0
Fork 0
mirror of https://github.com/GSA/notifications-admin.git synced 2026-08-23 15:57:23 -04:00
Code Issues Packages Projects Releases Wiki Activity

Removing or changing more govuk styles

Browse Source
This commit is contained in:
Jonathan Bobel
2023-08-25 10:40:56 -04:00
parent 769f1e9355
commit a388178e2a
43 changed files with 198 additions and 211 deletions
Download Patch File Download Diff File Expand all files Collapse all files

82
app/templates/components/components/footer/_footer.scss
View File

@@ -6,41 +6,41 @@
@include govuk-exports("govuk/component/footer") {
$govuk-footer-background: $govuk-canvas-background-colour;
$govuk-footer-border-top: #a1acb2;
$govuk-footer-border: govuk-colour("grey-2");
$govuk-footer-text: #454a4c;
$govuk-footer-link: $govuk-footer-text;
$govuk-footer-link-hover: #171819;
$usa-footer-background: $govuk-canvas-background-colour;
$usa-footer-border-top: #a1acb2;
$usa-footer-border: govuk-colour("grey-2");
$usa-footer-text: #454a4c;
$usa-footer-link: $usa-footer-text;
$usa-footer-link-hover: #171819;
// Based on the govuk-crest-2x.png image dimensions.
$govuk-footer-crest-image-width-2x: 250px;
$govuk-footer-crest-image-height-2x: 204px;
$usa-footer-crest-image-width-2x: 250px;
$usa-footer-crest-image-height-2x: 204px;
// Half the 2x image so that it fits the regular 1x size.
$govuk-footer-crest-image-width: ($govuk-footer-crest-image-width-2x / 2);
$govuk-footer-crest-image-height: ($govuk-footer-crest-image-height-2x / 2);
$usa-footer-crest-image-width: ($usa-footer-crest-image-width-2x / 2);
$usa-footer-crest-image-height: ($usa-footer-crest-image-height-2x / 2);
.govuk-footer {
.usa-footer {
@include govuk-font($size: 16);
@include govuk-responsive-padding(7, "top");
@include govuk-responsive-padding(5, "bottom");
border-top: 1px solid $govuk-footer-border-top;
color: $govuk-footer-text;
background: $govuk-footer-background;
border-top: 1px solid $usa-footer-border-top;
color: $usa-footer-text;
background: $usa-footer-background;
}
.govuk-footer__link {
.usa-footer__link {
@include govuk-focusable-fill;
&:link,
&:visited {
color: $govuk-footer-link;
color: $usa-footer-link;
}
&:hover,
&:active {
color: $govuk-footer-link-hover;
color: $usa-footer-link-hover;
}
// When focussed, the text colour needs to be darker to ensure that colour
@@ -59,14 +59,14 @@
}
}
.govuk-footer__section-break {
.usa-footer__section-break {
margin: 0; // Reset `<hr>` default margins
@include govuk-responsive-margin(8, "bottom");
border: 0; // Reset `<hr>` default borders
border-bottom: 1px solid $govuk-footer-border;
border-bottom: 1px solid $usa-footer-border;
}
.govuk-footer__meta {
.usa-footer__meta {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
@@ -86,13 +86,13 @@
justify-content: center; // Support: Flexbox
}
.govuk-footer__meta-item {
.usa-footer__meta-item {
margin-right: $govuk-gutter-half;
margin-bottom: govuk-spacing(5);
margin-left: $govuk-gutter-half;
}
.govuk-footer__meta-item--grow {
.usa-footer__meta-item--grow {
-webkit-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
@@ -104,7 +104,7 @@
}
}
.govuk-footer__licence-logo {
.usa-footer__licence-logo {
display: inline-block;
margin-right: govuk-spacing(2);
@include mq ($until: desktop) {
@@ -113,52 +113,52 @@
vertical-align: top;
}
.govuk-footer__licence-description {
.usa-footer__licence-description {
display: inline-block;
}
.govuk-footer__copyright-logo {
.usa-footer__copyright-logo {
display: inline-block;
min-width: $govuk-footer-crest-image-width;
padding-top: ($govuk-footer-crest-image-height + govuk-spacing(2));
min-width: $usa-footer-crest-image-width;
padding-top: ($usa-footer-crest-image-height + govuk-spacing(2));
background-image: govuk-image-url("govuk-crest.png");
@include govuk-device-pixel-ratio {
background-image: govuk-image-url("govuk-crest-2x.png");
}
background-repeat: no-repeat;
background-position: 50% 0%;
background-size: $govuk-footer-crest-image-width $govuk-footer-crest-image-height;
background-size: $usa-footer-crest-image-width $usa-footer-crest-image-height;
text-align: center;
text-decoration: none;
white-space: nowrap;
}
.govuk-footer__inline-list {
.usa-footer__inline-list {
margin-top: 0;
margin-bottom: govuk-spacing(3);
padding: 0;
}
.govuk-footer__meta-custom {
.usa-footer__meta-custom {
margin-bottom: govuk-spacing(4);
}
.govuk-footer__inline-list-item {
.usa-footer__inline-list-item {
display: inline-block;
margin-right: govuk-spacing(3);
margin-bottom: govuk-spacing(1);
}
.govuk-footer__heading {
.usa-footer__heading {
@include govuk-responsive-margin(7, "bottom");
padding-bottom: govuk-spacing(4);
@include mq ($until: tablet) {
padding-bottom: govuk-spacing(2);
}
border-bottom: 1px solid $govuk-footer-border;
border-bottom: 1px solid $usa-footer-border;
}
.govuk-footer__navigation {
.usa-footer__navigation {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
@@ -170,7 +170,7 @@
flex-wrap: wrap; // Support: Flexbox
}
.govuk-footer__section {
.usa-footer__section {
display: inline-block;
margin-right: $govuk-gutter-half;
margin-bottom: $govuk-gutter;
@@ -195,7 +195,7 @@
// Sections two-third:one-third on desktop
@include mq ($from: desktop) {
.govuk-footer__section:first-child {
.usa-footer__section:first-child {
-webkit-box-flex: 2;
-webkit-flex-grow: 2;
-ms-flex-positive: 2;
@@ -203,7 +203,7 @@
}
}
.govuk-footer__list {
.usa-footer__list {
margin: 0;
padding: 0;
list-style: none;
@@ -213,24 +213,24 @@
}
@include mq ($from: desktop) {
.govuk-footer__list--columns-2 {
.usa-footer__list--columns-2 {
-webkit-column-count: 2;
-moz-column-count: 2;
column-count: 2; // Support: Columns
}
.govuk-footer__list--columns-3 {
.usa-footer__list--columns-3 {
-webkit-column-count: 3;
-moz-column-count: 3;
column-count: 3; // Support: Columns
}
}
.govuk-footer__list-item {
.usa-footer__list-item {
@include govuk-responsive-margin(4, "bottom");
}
.govuk-footer__list-item:last-child {
.usa-footer__list-item:last-child {
margin-bottom: 0;
}
}

2
app/templates/components/components/footer/template.njk
View File

@@ -41,7 +41,7 @@
<h2 class="usa-sr-only">{{ params.meta.visuallyHiddenTitle | default("Support links") }}</h2>
{% if params.meta.items %}
{% for item in params.meta.items %}
<a class="govuk-footer__link" href="{{ item.href }}" {% for attribute, value in item.attributes %}
<a class="usa-footer__link" href="{{ item.href }}" {% for attribute, value in item.attributes %}
{{attribute}}="{{value}}" {% endfor %}>
{{ item.text }}
</a>

10
app/templates/components/components/hint/_hint.scss
View File

@@ -3,7 +3,7 @@
@import "../../helpers/all";
@include govuk-exports("govuk/component/hint") {
.govuk-hint {
.usa-hint {
@include govuk-font($size: 19);
display: block;
@@ -23,7 +23,7 @@
// 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 {
.govuk-label:not(.govuk-label--m):not(.govuk-label--l):not(.govuk-label--xl) + .usa-hint {
margin-bottom: govuk-spacing(2);
}
@@ -37,14 +37,14 @@
// 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 {
.govuk-fieldset__legend:not(.govuk-fieldset__legend--m):not(.govuk-fieldset__legend--l):not(.govuk-fieldset__legend--xl) + .usa-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 {
.govuk-fieldset__legend + .usa-hint,
.govuk-fieldset__legend + .usa-hint {
margin-top: -(govuk-spacing(1));
}
}