mirror of
https://github.com/DOI-DO/j40-cejst-2.git
synced 2025-02-23 01:54:18 -08:00
Migrates global footer styles to USDS (#798)
- enables colors in settings file - updates snapshots
This commit is contained in:
Vim
GitHub
parent
d1511287b8
commit
54d07bddc8
7 changed files with 26 additions and 67 deletions
|
|
@ -97,7 +97,6 @@ const J40Footer = () => {
|
|||
<Logo
|
||||
size="medium"
|
||||
key={'logoimg'}
|
||||
className={'j40-footer-logo'}
|
||||
image={
|
||||
<img
|
||||
className={'usa-footer__logo-img'}
|
||||
|
|
|
|||
|
|
@ -152,7 +152,7 @@ exports[`J40Footer renders correctly 1`] = `
|
|||
data-testid="gridContainer"
|
||||
>
|
||||
<div
|
||||
class="usa-footer__logo grid-row mobile-lg:grid-col-6 mobile-lg:grid-gap-2 j40-footer-logo"
|
||||
class="usa-footer__logo grid-row mobile-lg:grid-col-6 mobile-lg:grid-gap-2"
|
||||
data-testid="footerLogo"
|
||||
>
|
||||
<div
|
||||
|
|
|
|||
|
|
@ -462,7 +462,7 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
|
|||
data-testid="gridContainer"
|
||||
>
|
||||
<div
|
||||
class="usa-footer__logo grid-row mobile-lg:grid-col-6 mobile-lg:grid-gap-2 j40-footer-logo"
|
||||
class="usa-footer__logo grid-row mobile-lg:grid-col-6 mobile-lg:grid-gap-2"
|
||||
data-testid="footerLogo"
|
||||
>
|
||||
<div
|
||||
|
|
|
|||
|
|
@ -782,7 +782,7 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
|
|||
data-testid="gridContainer"
|
||||
>
|
||||
<div
|
||||
class="usa-footer__logo grid-row mobile-lg:grid-col-6 mobile-lg:grid-gap-2 j40-footer-logo"
|
||||
class="usa-footer__logo grid-row mobile-lg:grid-col-6 mobile-lg:grid-gap-2"
|
||||
data-testid="footerLogo"
|
||||
>
|
||||
<div
|
||||
|
|
|
|||
|
|
@ -1268,7 +1268,7 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
|
|||
data-testid="gridContainer"
|
||||
>
|
||||
<div
|
||||
class="usa-footer__logo grid-row mobile-lg:grid-col-6 mobile-lg:grid-gap-2 j40-footer-logo"
|
||||
class="usa-footer__logo grid-row mobile-lg:grid-col-6 mobile-lg:grid-gap-2"
|
||||
data-testid="footerLogo"
|
||||
>
|
||||
<div
|
||||
|
|
|
|||
|
|
@ -35,9 +35,8 @@ There are 3 things that should be included in this file:
|
|||
|
||||
/***************** GLOBAL STYLES **************************************************************/
|
||||
|
||||
$primary-color: #112f4e;
|
||||
$j40-blue-background-color: #EFF6FB;
|
||||
$sidePanelBorderColor: #f2f2f2;
|
||||
$primary-color: #112f4e; // Used for header font color - selection color is #005EA2
|
||||
$j40-blue-background-color: #e7f2f5; // Hex value of 'blue-cool-5'
|
||||
|
||||
// The j40-element mixin is used to create any font element. E.g. <h1>, <p> tags, etc.
|
||||
// Arguments to the mixins must be tokens from USWDS
|
||||
|
|
@ -113,6 +112,9 @@ components include:
|
|||
.j40-header,
|
||||
.j40-primary-nav,
|
||||
.j40-header > li > a {
|
||||
|
||||
// Todo color: remove this global
|
||||
// May be able to place importance like this: u-bg('red-warm-50v', !important)
|
||||
color: $primary-color !important;
|
||||
z-index: 5;
|
||||
|
||||
|
|
@ -122,7 +124,7 @@ components include:
|
|||
|
||||
span {
|
||||
// make sure the open close chevron is colored correctly
|
||||
color: $primary-color;
|
||||
color: $primary-color; // Todo color: remove this global
|
||||
}
|
||||
|
||||
// this is the title
|
||||
|
|
@ -195,10 +197,12 @@ components include:
|
|||
|
||||
/* this is used by J40MainGridContainer to show a blue background */
|
||||
.j40-main-grid-blue-bk {
|
||||
background-color: $j40-blue-background-color;
|
||||
@include u-bg('blue-cool-5');
|
||||
|
||||
// This style is to remove the margin collapse occuring
|
||||
border-top: 1px solid $j40-blue-background-color;
|
||||
@include u-border-top(1px);
|
||||
@include u-border-top('solid');
|
||||
@include u-border-top('blue-cool-5');
|
||||
}
|
||||
|
||||
#main-content {
|
||||
|
|
@ -218,21 +222,16 @@ components include:
|
|||
@include u-padding-bottom(2);
|
||||
}
|
||||
|
||||
.j40-footer-logo {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.j40-footer-address {
|
||||
.usa-footer__contact-info {
|
||||
font-weight: normal;
|
||||
text-align: left;
|
||||
display: inline-block;
|
||||
line-height: 1.5;
|
||||
@include typeset('sans', 4, 5);
|
||||
@include u-text('normal');
|
||||
@include u-display('inline-block');
|
||||
}
|
||||
}
|
||||
|
||||
.footer-link-first-child{
|
||||
display: inline-block;
|
||||
@include u-display('inline-block');
|
||||
@include u-margin-top(1.5)
|
||||
}
|
||||
}
|
||||
|
|
@ -406,8 +405,8 @@ p.secondary.j40-indicator {
|
|||
***************************************
|
||||
*/
|
||||
|
||||
.usa-process-list__heading{
|
||||
border-left-color: $j40-blue-background-color;
|
||||
.usa-process-list__item{
|
||||
@include u-border-left('base-lightest');
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -459,36 +458,3 @@ p.secondary.j40-indicator {
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
******************************
|
||||
* ACCORDION STYLES
|
||||
******************************
|
||||
*/
|
||||
|
||||
.usa-accordion__heading button.usa-accordion__button {
|
||||
@include j40-element('3xs', 1, 'normal', 0);
|
||||
border-bottom: 1px solid $sidePanelBorderColor;
|
||||
}
|
||||
.usa-accordion__heading:first-child button.usa-accordion__button {
|
||||
@include j40-element('3xs', 1, 'normal', 0);
|
||||
background-color: white;
|
||||
}
|
||||
.usa-accordion__heading button.usa-accordion__button {
|
||||
@include j40-element('3xs', 1, 'normal', 0);
|
||||
background-color: #F3F3F3;
|
||||
}
|
||||
|
||||
.usa-accordion__heading:not(:first-child){
|
||||
@include u-margin-top(0);
|
||||
}
|
||||
|
||||
#prioritization-indicators, #additional-indicators {
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
#additional-indicators {
|
||||
background-color:#F3F3F3;
|
||||
}
|
||||
|
|
@ -1,13 +1,9 @@
|
|||
// This setting file will instantiate styles that are needed for J40 from the styles/theme folder
|
||||
|
||||
/*
|
||||
Import the entire theme spacing folder
|
||||
*/
|
||||
// Import the entire theme spacing folder
|
||||
@import "./theme/uswds-theme-spacing";
|
||||
|
||||
/*
|
||||
Selected general styles found in styles/theme/_uswds-theme-general.scss:
|
||||
*/
|
||||
// Selected general styles found in styles/theme/_uswds-theme-general.scss:
|
||||
$theme-image-path: "../../node_modules/uswds/src/img";
|
||||
$theme-show-compile-warnings: false;
|
||||
$theme-show-notifications: false;
|
||||
|
|
@ -23,7 +19,5 @@ $theme-namespace: (
|
|||
),
|
||||
);
|
||||
|
||||
/*
|
||||
Selected typography styles, found in styles/theme/_uswds-theme-typography.scss:
|
||||
*/
|
||||
// Selected typography styles, found in styles/theme/_uswds-theme-typography.scss:
|
||||
$theme-font-path: "../../node_modules/uswds/src/fonts";
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue