mirror of
https://github.com/DOI-DO/j40-cejst-2.git
synced 2025-07-31 07:01:17 -07:00
ec4344676d* Step progress list * Layout mostly done. Need to do intl() conversion but it's easier to understand the layout like this. Will do intl in a different PR * fix: `em` to `rem` * Add basic snapshot unit test
419 lines
8.7 KiB
SCSS
419 lines
8.7 KiB
SCSS
/*
|
|
These are necessary for the image and font urls referenced in the source
|
|
files to resolve correctly.
|
|
*/
|
|
$theme-image-path: "../../node_modules/uswds/src/img";
|
|
$theme-font-path: "../../node_modules/uswds/src/fonts";
|
|
|
|
/*
|
|
Example:
|
|
|
|
The url for the hero image in the source file is not currently prefixed by
|
|
the $theme-image-path above.
|
|
|
|
$theme-hero-image: '#{$theme-image-path}/hero.png';
|
|
*/
|
|
|
|
// Custom USWDS changes to variables go here
|
|
// see https://designsystem.digital.gov/documentation/settings/
|
|
$theme-show-compile-warnings: false;
|
|
$theme-show-notifications: false;
|
|
|
|
$theme-font-role-heading: "sans";
|
|
|
|
@import "../../node_modules/uswds";
|
|
|
|
@import "~@trussworks/react-uswds/lib/index.css";
|
|
@import "../../node_modules/mapbox-gl/dist/mapbox-gl.css";
|
|
|
|
// Custom SASS/CSS goes here
|
|
$j40-max-width: 80ex;
|
|
$primary-color: #112f4e;
|
|
|
|
#main-content {
|
|
border-top: 0;
|
|
}
|
|
|
|
.j40-two-column {
|
|
overflow: hidden;
|
|
padding: 0;
|
|
|
|
@media (min-width: 40em) {
|
|
column-count: 2;
|
|
column-gap: 1em;
|
|
}
|
|
@media (max-width: 40em) {
|
|
column-count: 1;
|
|
column-gap: 0;
|
|
}
|
|
}
|
|
|
|
.j40-two-column > * {
|
|
display: inline-flex;
|
|
width: 90%;
|
|
padding-bottom: 1.2em; /* space between items */
|
|
padding-left: 1em;
|
|
}
|
|
|
|
.j40-two-column-icons-spacing {
|
|
padding-right: 1em;
|
|
width: 2.3em;
|
|
max-width: revert;
|
|
}
|
|
|
|
.j40-two-column-confine {
|
|
display: inline-flex;
|
|
max-width: fit-content;
|
|
}
|
|
|
|
@include at-media("mobile-lg") {
|
|
.j40-grid-container {
|
|
line-height: 1.5rem;
|
|
padding-right: 0;
|
|
}
|
|
}
|
|
|
|
.j40-header,
|
|
.j40-primary-nav,
|
|
.j40-header > li > a {
|
|
color: $primary-color !important;
|
|
z-index: 5;
|
|
|
|
.usa-nav-container {
|
|
max-width: ($j40-max-width * 2);
|
|
}
|
|
|
|
span {
|
|
// make sure the open close chevron is colored correctly
|
|
color: $primary-color;
|
|
}
|
|
|
|
// this is the title
|
|
@include at-media("desktop") {
|
|
.j40-title {
|
|
font-size: 0.9em;
|
|
padding-bottom: 0; // allows vertical centering on logo and text
|
|
font-weight: normal;
|
|
}
|
|
|
|
.usa-navbar {
|
|
width: 100%;
|
|
}
|
|
|
|
// this actual site logo
|
|
.sitelogo {
|
|
float: left; // allows vertical centering on logo and text
|
|
margin-right: 0.5rem; // space between logo and text
|
|
width: 4rem;
|
|
padding: 0.5rem; // this will change the size of the logo too
|
|
}
|
|
|
|
// nav menu item font
|
|
.usa-nav__primary {
|
|
.usa-nav__primary-item {
|
|
a {
|
|
margin-bottom: 0.5em; // how far menu is from bottom edge of nav
|
|
font-weight: 600;
|
|
}
|
|
}
|
|
}
|
|
|
|
// this is forcing the whole toolbar much taller
|
|
.usa-logo {
|
|
margin-top: 1.2rem;
|
|
margin-bottom: 1.2rem;
|
|
}
|
|
}
|
|
|
|
@include at-media("mobile") {
|
|
.usa-logo__text {
|
|
padding-top: 3px; // allows vertical centering on logo and text
|
|
padding-bottom: 0; // allows vertical centering on logo and text
|
|
font-weight: normal;
|
|
}
|
|
|
|
.usa-navbar {
|
|
width: 100%;
|
|
}
|
|
|
|
.j40-sitelogo {
|
|
float: left; // allows vertical centering on logo and text
|
|
margin-right: 0.5em; // space between logo and text
|
|
width: 3em;
|
|
padding: 0.4em; // this will change the size of the logo too
|
|
}
|
|
}
|
|
}
|
|
|
|
.j40-aside {
|
|
background-color: #eff6fb;
|
|
padding-right: 1em;
|
|
padding-left: 1em;
|
|
|
|
h2 {
|
|
font-weight: 100;
|
|
font-size: 2em;
|
|
}
|
|
|
|
h3 {
|
|
font-weight: 100;
|
|
font-size: 1.4em;
|
|
}
|
|
|
|
.j40-aside-icon {
|
|
display: flex;
|
|
margin-top: 3px;
|
|
margin-bottom: 12px;
|
|
}
|
|
}
|
|
|
|
.j40-footer {
|
|
.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;
|
|
}
|
|
}
|
|
}
|
|
|
|
// spacing top & bottom around main content
|
|
.j40-main-content {
|
|
@include at-media("mobile-lg") {
|
|
margin-bottom: 0;
|
|
margin-top: 2.5rem;
|
|
}
|
|
|
|
h1 {
|
|
font-size: 2.7rem;
|
|
}
|
|
|
|
h2 {
|
|
font-size: 1.46rem;
|
|
}
|
|
}
|
|
|
|
// This should really be part of uswds and use $theme-step-indicator-segment-color-complete
|
|
// The Progress element doesn't really support color changing the line connecting progress
|
|
// (like the Steps element does) and the checkbox.
|
|
// The border-left-color required an !important to make work. Maybe add a feature request
|
|
// to have the process list officially support a more Steps-like behavior
|
|
.j40-usa-process-list__item--complete {
|
|
&::before {
|
|
color: white;
|
|
background-color: #00a91c;
|
|
}
|
|
|
|
border-left-color: #005ea2 !important; // todo: fix
|
|
}
|
|
|
|
// NOTE: uswds `.usa-prose` defines these all as Merriweather Web via $theme-font-role-heading
|
|
.usa-prose {
|
|
h1,
|
|
h2,
|
|
h3,
|
|
h4 {
|
|
font-family: Source Sans Pro Web, Helvetica Neue, Helvetica, Roboto, Arial,
|
|
sans-serif;
|
|
}
|
|
|
|
p,
|
|
div {
|
|
max-width: $j40-max-width;
|
|
}
|
|
}
|
|
|
|
.j40-sitealert {
|
|
p {
|
|
margin: 0;
|
|
}
|
|
|
|
min-height: 2.5em;
|
|
margin: 0;
|
|
|
|
.j40-sitealert-title {
|
|
font-weight: bold;
|
|
}
|
|
|
|
.usa-alert {
|
|
margin: 0;
|
|
padding-bottom: 0;
|
|
padding-top: 0;
|
|
}
|
|
|
|
.usa-alert__body {
|
|
padding-top: 0;
|
|
padding-bottom: 0;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.usa-alert__text {
|
|
padding-top: 0;
|
|
padding-bottom: 0;
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
|
|
// Maplibre overrides
|
|
// Note that these need to be here to properly override defaults
|
|
|
|
.mapboxgl-popup-close-button {
|
|
font-size: 3em;
|
|
margin-right: 12px;
|
|
margin-top: 15px;
|
|
}
|
|
|
|
.mapboxgl-popup-content {
|
|
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.5) !important;
|
|
border-radius: 8px !important;
|
|
pointer-events: all !important;
|
|
width: auto;
|
|
}
|
|
|
|
// Because we're using react-map-gl, you need to use
|
|
// the mapboxgl- class name variables.
|
|
// Maplibre has its own classnames with a maplibre prefix,
|
|
// but it after 1.14.0 it optionally still allows for the mapbox-gl prefix
|
|
|
|
// Below properties override mb defaults
|
|
.mapboxgl-ctrl-group:not(:empty) {
|
|
box-shadow: none;
|
|
}
|
|
|
|
@media (-ms-high-contrast: active) {
|
|
.mapboxgl-ctrl-group:not(:empty) {
|
|
box-shadow: none;
|
|
}
|
|
}
|
|
|
|
.mapboxgl-ctrl-group {
|
|
border-radius: 0;
|
|
}
|
|
|
|
.mapboxgl-ctrl {
|
|
button + button {
|
|
border-top: 1px;
|
|
}
|
|
|
|
button {
|
|
border-radius: 0;
|
|
height: 1.66em;
|
|
width: 1.66em;
|
|
box-sizing: border-box;
|
|
background-color: #ffffff;
|
|
border-width: 2px;
|
|
border-color: #000000;
|
|
border-style: solid;
|
|
font-size: 1.5em;
|
|
|
|
// It seems necessary to set an explicit size for one of the dimensions
|
|
// in order for this icon to be rendered correctly by gatsby build
|
|
// see more here: https://thatemil.com/blog/2014/04/06/intrinsic-sizing-of-svg-in-responsive-web-design/
|
|
.mapboxgl-ctrl-icon {
|
|
height: 1em;
|
|
}
|
|
}
|
|
|
|
button.mapboxgl-ctrl-zoom-in {
|
|
.mapboxgl-ctrl-icon {
|
|
background-image: url("../../node_modules/uswds/dist/img/usa-icons/add.svg");
|
|
}
|
|
}
|
|
|
|
button.mapboxgl-ctrl-zoom-out {
|
|
.mapboxgl-ctrl-icon {
|
|
background-image: url("../../node_modules/uswds/dist/img/usa-icons/remove.svg");
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
/* the > is for child only syntax in css. This is required so that lists that are nested under the
|
|
list are not affected (e.g. <ul><li><p><ul><li>not styled</li></ul></p></li><ul>*/
|
|
.j40-process-list-wrapper > {
|
|
$j40-steps-list-color: #002D3F;
|
|
ul {
|
|
margin-top: 3rem;
|
|
margin-bottom: 1rem;
|
|
padding-inline-start: 0;
|
|
|
|
> li {
|
|
list-style-type: none;
|
|
position: relative;
|
|
margin-left: 2.5rem;
|
|
/* do the lines */
|
|
border-left: .2rem solid $j40-steps-list-color;
|
|
padding-left: 1.88rem;
|
|
/* removes gap between line and circle */
|
|
margin-top: -1rem;
|
|
padding-bottom: 2rem;
|
|
}
|
|
|
|
> li:before {
|
|
content: " ";
|
|
border: 1rem solid $j40-steps-list-color;
|
|
border-radius: 100rem;
|
|
height: 0; /* it's all controlled by the border */
|
|
width: 0;
|
|
margin-top: -0.5rem;
|
|
margin-left: -3rem;
|
|
position: absolute;
|
|
}
|
|
|
|
> li:last-child {
|
|
/* no line on last item */
|
|
border-left: .2rem solid transparent;
|
|
margin-top: -1.9rem;
|
|
}
|
|
}
|
|
}
|
|
|
|
/* The math equation on the methodology page.. which is a royal pain */
|
|
.j40-math-division-container {
|
|
> .j40-math-eq-left-side {
|
|
text-align: right;
|
|
justify-content: center;
|
|
align-items: center;
|
|
padding: 0.5rem;
|
|
|
|
> .j40-math-eq-numerator {
|
|
border-bottom: solid 3px black;
|
|
text-align: center;
|
|
width: 90%;
|
|
}
|
|
|
|
> .j40-math-eq-denominator {
|
|
text-align: center;
|
|
width: 90%;
|
|
}
|
|
}
|
|
|
|
> .j40-math-eq-middle {
|
|
display: inline-flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
padding: 0.25rem;
|
|
}
|
|
|
|
> .j40-math-eq-right-side {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
padding: 0.25rem;
|
|
}
|
|
}
|
|
|
|
/* these are currently used in the list, but it seems like they should be globally consistent with the rest of the site */
|
|
.j40-item-list-title {
|
|
margin-block-end: auto;
|
|
}
|
|
|
|
.j40-item-list-subtitle {
|
|
margin-block-start: auto;
|
|
margin-block-end: auto;
|
|
font-style: italic;
|
|
}
|