Specify widescreen margins

This commit is contained in:
CocoByte 2024-12-11 20:29:24 -07:00
parent 7542b9a4f2
commit 37ecbffe10
No known key found for this signature in database
GPG key ID: BBFAA2526384C97F
4 changed files with 17 additions and 0 deletions

View file

@ -29,6 +29,8 @@
// NOTE: !important is used because _font.scss overrides this // NOTE: !important is used because _font.scss overrides this
.usa-alert__body--widescreen { .usa-alert__body--widescreen {
max-width: $widescreen-max-width !important; max-width: $widescreen-max-width !important;
margin-left: $widescreen-left-margin !important;
margin-right: $widescreen-right-margin !important;
} }
.usa-site-alert--hot-pink { .usa-site-alert--hot-pink {

View file

@ -2,6 +2,9 @@
@use "cisa_colors" as *; @use "cisa_colors" as *;
$widescreen-max-width: 1920px; $widescreen-max-width: 1920px;
$widescreen-left-margin: 48px;
$widescreen-right-margin: 48px;
$hot-pink: #FFC3F9; $hot-pink: #FFC3F9;
/* Styles for making visible to screen reader / AT users only. */ /* Styles for making visible to screen reader / AT users only. */
@ -245,6 +248,14 @@ abbr[title] {
.usa-banner__inner--widescreen { .usa-banner__inner--widescreen {
max-width: $widescreen-max-width; max-width: $widescreen-max-width;
margin-left: $widescreen-left-margin !important;
margin-right: $widescreen-right-margin !important;
}
// This is used in cases where we want to align content to widescreen margins
// but we don't want the content itself to have widescreen widths
.margin-left--widescreen {
margin-left: $widescreen-left-margin !important;
} }
.margin-right-neg-4px { .margin-right-neg-4px {

View file

@ -5,4 +5,6 @@
.grid-container--widescreen, .grid-container--widescreen,
.usa-identifier__container--widescreen { .usa-identifier__container--widescreen {
max-width: $widescreen-max-width !important; max-width: $widescreen-max-width !important;
margin-left: $widescreen-left-margin !important;
margin-right: $widescreen-right-margin !important;
} }

View file

@ -133,4 +133,6 @@
.usa-navbar--widescreen, .usa-navbar--widescreen,
.usa-nav-container--widescreen { .usa-nav-container--widescreen {
max-width: $widescreen-max-width !important; max-width: $widescreen-max-width !important;
margin-left: $widescreen-left-margin;
margin-right: $widescreen-right-margin;
} }