$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: nth($banner-icon-colors, 1); $banner-icon-hover: nth($banner-icon-colors, 2); $banner-icon-chevron: (
"name": "chevron", "svg-height": 39, "svg-width": 64, "height": 0.8ex, "color": $banner-icon-color, "color-variant": "white", "color-hover": $banner-icon-hover,
); $banner-icon-chevron-up: map-merge(
$banner-icon-chevron, ( "rotate": 180deg, )
); $banner-icon-close: (
"name": "usa-icons/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); }
}
.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 - 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: $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; }
}
.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", 2px, middle, $theme-banner-background-color ); @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; }
}
.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 + 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, baseline); @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%; } @include at-media("tablet") { @include place-icon( $banner-icon-chevron, "after", 2px, middle, $theme-banner-background-color ); @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; &:hover { // Underline added to inner text instead. text-decoration: none; } } &[aria-expanded="false"] { background-image: none; } &[aria-expanded="true"] { background-image: none; @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; } }
}
.usa-banner__button-text {
@include add-sr-only; text-decoration: underline; @include at-media("tablet") { @include add-no-sr-only; display: inline; }
}
.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; }
}