The .gov means it’s official. @@ -36,7 +34,7 @@
Secure .gov websites use HTTPS diff --git a/sass/uswds/_usa-banner.scss b/sass/uswds/_usa-banner.scss new file mode 100644 index 0000000..d006290 --- /dev/null +++ b/sass/uswds/_usa-banner.scss @@ -0,0 +1,371 @@ +@use "sass:math"; +@use "sass:list"; + +@use "uswds-core" as *; + +$banner-context: "Banner"; +$banner-guidance-measure: 3; +$banner-icon-colors: get-link-tokens-from-bg( + $theme-banner-background-color, + $theme-banner-link-color, + $context: $banner-context +); +$banner-icon-color: list.nth($banner-icon-colors, 1); +$banner-icon-hover: list.nth($banner-icon-colors, 2); +$banner-icon-chevron: ( + "name": "expand_more", + "svg-height": 40, + "svg-width": 40, + "height": 2, + "color": $banner-icon-color, + "color-variant": "white", + "color-hover": $banner-icon-hover, +); +$banner-icon-chevron-up: map-merge( + $banner-icon-chevron, + ( + "name": "expand_less", + ) +); +$banner-icon-close: ( + "name": "close", + "svg-height": 40, + "svg-width": 40, + "height": 3, + "color": "blue-60v", + "color-variant": "white", + "container-height": $size-touch-target, + "container-width": $size-touch-target, +); + +.usa-banner { + @include typeset($theme-banner-font-family); + @include border-box-sizing; + background-color: color($theme-banner-background-color); + + @include at-media("tablet") { + font-size: font-size($theme-banner-font-family, "3xs"); + padding-bottom: units(0); + } + + .usa-accordion { + @include typeset($theme-banner-font-family); + } + + // ! Stylelint will complain about BEM formatting. + // Added grid classes in #5000 to remove layout grid dependency. + // stylelint-disable selector-class-pattern + .grid-row { + @include grid-row; + + &.grid-gap-lg { + @include grid-gap("lg"); + } + + .tablet\:grid-col-6 { + @include at-media("tablet") { + @include grid-col(6); + } + } + } + // stylelint-enable +} + +.usa-banner__header, +.usa-banner__content { + @include set-text-from-bg( + $theme-banner-background-color, + $context: $banner-context + ); +} + +.usa-banner__content { + @include grid-container($theme-banner-max-width); + @include add-responsive-site-margins; + background-color: color("transparent"); + font-size: font-size($theme-banner-font-family, 4); + overflow: hidden; + padding-bottom: units(2); + padding-left: units($theme-site-margins-mobile-width) - units(1); + padding-top: units(0.5); + width: 100%; + + @include at-media("tablet") { + @include u-padding-y(3); + } + + p { + &:first-child { + margin: 0; + } + } +} + +.usa-banner__guidance { + @include u-display("flex"); + @include u-flex("align-start"); + @include u-measure($banner-guidance-measure); + padding-top: units(2); + + @include at-media("tablet") { + padding-top: units(0); + } +} + +.usa-banner__lock-image { + $lock-h: 64; // unitless height of svg + $lock-w: 52; // unitless width of svg + $lock-aspect: math.div($lock-w, $lock-h); + $icon-height: 1.5ex; // height of the lock icon; use ex for resilience + + height: $icon-height; + width: $icon-height * $lock-aspect; + path { + fill: currentColor; + + @media (forced-colors: active) { + fill: CanvasText; + } + } +} + +.usa-banner__inner { + @include add-responsive-site-margins; + @include grid-container($theme-banner-max-width); + @include grid-row; + @include u-flex("align-start"); + padding-right: units(0); + + @include at-media("tablet") { + @include u-flex("align-center"); + } +} + +.usa-banner__header { + @include u-padding-y(1); + font-size: font-size($theme-banner-font-family, 1); + font-weight: font-weight("normal"); + min-height: units($size-touch-target); + position: relative; + + @include at-media("tablet") { + @include u-padding-y(0.5); + min-height: 0; + } +} + +.usa-banner__header-text { + @include u-margin-y(0); + font-size: font-size($theme-banner-font-family, 1); + line-height: line-height($theme-banner-font-family, 2); +} + +.usa-banner__header-action { + @include place-icon($banner-icon-chevron, "after"); + @include set-link-from-bg( + $theme-banner-background-color, + $theme-banner-link-color, + $context: $banner-context + ); + + line-height: line-height($theme-banner-font-family, 2); + margin-bottom: units(0); + margin-top: units(2px); + text-decoration: underline; + + .usa-banner__header--expanded & { + display: none; + } + + @include at-media("tablet") { + display: none; + } + + @media (forced-colors: active) { + color: LinkText; + + &::after { + background-color: ButtonText; + } + } +} + +.usa-banner__header-flag { + @include u-float("left"); + margin-right: units(1); + width: units(2); + + @include at-media("tablet") { + margin-right: units(1); + padding-top: units(0); + } +} + +.usa-banner__header--expanded { + padding-right: units($size-touch-target) + units(1); + + @include at-media("tablet") { + background-color: transparent; + display: block; + font-size: font-size($theme-banner-font-family, 1); + font-weight: font-weight("normal"); + min-height: units(0); + padding-right: units(0); + } + + .usa-banner__inner { + margin-left: units(0); + + @include at-media("tablet") { + margin-left: units(auto); + } + } + + .usa-banner__header-action { + display: none; + } +} + +.usa-banner__button { + @include button-unstyled; + @include u-pin("left"); + @include u-pin("y"); + @include u-text("primary", underline); + @include set-link-from-bg( + $theme-banner-background-color, + $theme-banner-link-color, + $context: $banner-context + ); + display: block; + font-size: font-size($theme-banner-font-family, 1); + height: auto; + line-height: line-height($theme-banner-font-family, 2); + padding-top: units(0); + padding-left: units(0); + text-decoration: none; + width: auto; + + @include at-media-max("tablet") { + width: 100%; + + &:enabled:focus { + // adjust outline to render within the viewport + outline-offset: units(-0.5); + } + } + + @include at-media("tablet") { + @include place-icon($banner-icon-chevron, "after", "2px"); + @include set-link-from-bg( + $theme-banner-background-color, + $theme-banner-link-color, + $context: $banner-context + ); + @include u-pin("none"); + display: inline; + margin-left: units(1); + position: relative; + + &::after, + &:hover::after { + position: absolute; + + @media (forced-colors: active) { + background-color: ButtonText; + } + } + + &:hover { + // Underline added to inner text instead. + text-decoration: none; + } + } + + // Remove icon set from usa-accordion. + // Also removed in _usa-nav.scss. + &[aria-expanded="false"], + &[aria-expanded="false"]:hover, + &[aria-expanded="true"], + &[aria-expanded="true"]:hover { + background-image: none; + + @media (forced-colors: active) { + &::before { + content: none; + } + } + } + + &[aria-expanded="true"] { + @include at-media-max("tablet") { + @include place-icon( + $banner-icon-close, + "after", + 0, + middle, + "base-lighter" + ); + + &::before { + @include u-pin("y"); + @include u-pin("right"); + background-color: color("base-lighter"); + content: ""; + display: block; + height: units($size-touch-target); + width: units($size-touch-target); + } + &::after { + @include u-pin("y"); + @include u-pin("right"); + } + } + + @include at-media("tablet") { + @include place-icon( + $banner-icon-chevron-up, + "after", + "2px", + middle, + $theme-banner-background-color + ); + height: auto; + padding: units(0); + position: relative; + + &::after, + &:hover::after { + position: absolute; + + @media (forced-colors: active) { + background-color: ButtonText; + } + } + } + } +} + +.usa-banner__button-text { + @include add-sr-only; + text-decoration: underline; + + @include at-media("tablet") { + @include add-no-sr-only; + display: inline; + } + + @media (forced-colors: active) { + color: LinkText; + } +} + +.usa-banner__icon { + width: units(5); +} + +// [uswds-init.js] Offscreen content while js is loading +.usa-js-loading { + .usa-banner__content { + @include add-sr-only; + } +} diff --git a/sass/uswds/_uswds-theme.scss b/sass/uswds/_uswds-theme.scss index eead761..5281ac1 100644 --- a/sass/uswds/_uswds-theme.scss +++ b/sass/uswds/_uswds-theme.scss @@ -1,15 +1,6 @@ -/* ----------------------------------------- -USWDS with settings overrides ----------------------------------------- -Uncomment the following lines and add a list of changed settings -in the form $setting: value, ----------------------------------------- -*/ +/* _uswds-theme.scss */ -// -// @use "uswds-core" with ( -// $setting: value, -// $setting: value -// ); -// +@use "uswds-core" with ( + $theme-show-compile-warnings: false, + $theme-show-notifications: false, +); \ No newline at end of file diff --git a/sass/uswds/styles.scss b/sass/uswds/styles.scss index 6897863..931eee5 100644 --- a/sass/uswds/styles.scss +++ b/sass/uswds/styles.scss @@ -1,3 +1,4 @@ -@forward "uswds-theme"; -@forward "uswds"; -@forward "uswds-theme-custom-styles"; + +@forward "../../sass/uswds/uswds-theme"; +@forward "./node_modules/@uswds/uswds/packages/uswds/_index.scss"; +@forward "../../sass/uswds/uswds-theme-custom-styles";