Revise emergency banner colors and update code documentation

This commit is contained in:
Rachid Mrad 2024-11-14 13:55:08 -05:00
parent 55cb07660e
commit c876071392
No known key found for this signature in database
8 changed files with 45 additions and 9 deletions

View file

@ -1,3 +1,4 @@
@use "uswds-core" as *;
@use "base" as *; @use "base" as *;
// Fixes some font size disparities with the Figma // Fixes some font size disparities with the Figma
@ -29,3 +30,24 @@
.usa-alert__body--widescreen { .usa-alert__body--widescreen {
max-width: $widescreen-max-width !important; max-width: $widescreen-max-width !important;
} }
.usa-site-alert--hot-pink {
.usa-alert {
background-color: $hot-pink;
border-left-color: $hot-pink;
.usa-alert__body {
color: color('base-darkest');
background-color: $hot-pink;
}
}
}
@supports ((-webkit-mask:url()) or (mask:url())) {
.usa-site-alert--hot-pink .usa-alert .usa-alert__body::before {
background-color: color('base-darkest');
}
}
.usa-site-alert--hot-pink .usa-alert .usa-alert__body::before {
background-image: url('../img/usa-icons-bg/error.svg');
}

View file

@ -2,6 +2,7 @@
@use "cisa_colors" as *; @use "cisa_colors" as *;
$widescreen-max-width: 1920px; $widescreen-max-width: 1920px;
$hot-pink: #FFC3F9;
/* Styles for making visible to screen reader / AT users only. */ /* Styles for making visible to screen reader / AT users only. */
.sr-only { .sr-only {

View file

@ -119,7 +119,7 @@ in the form $setting: value,
/*--------------------------- /*---------------------------
## Emergency state ## Emergency state
----------------------------*/ ----------------------------*/
$theme-color-emergency: #FFC3F9, $theme-color-emergency: "red-warm-60v",
/*--------------------------- /*---------------------------
# Input settings # Input settings

View file

@ -76,17 +76,24 @@
{% endif %} {% endif %}
{% comment %} {% comment %}
Site banner / red alert banner / emergency banner / incident banner - Remove one of those includes and place outside the comment block to activate the banner. <!-- Site banner / red alert banner / emergency banner / incident banner - Remove one of those includes and place outside the comment block to activate the banner.
DO NOT FORGET TO EDIT THE BANNER CONTENT -->
<!-- Red banner with exclamation mark in a circle: -->
{% include "includes/banner-error.html" %} {% include "includes/banner-error.html" %}
<!-- Blue banner with 'i'' mark in a circle: -->
{% include "includes/banner-info.html" %} {% include "includes/banner-info.html" %}
<!-- Marron banner with exclamation mark in a circle: -->
{% include "includes/banner-service-disruption.html" %} {% include "includes/banner-service-disruption.html" %}
{% include "includes/banner-site-alert.html" %} {% include "includes/banner-site-alert.html" %}
{% include "includes/banner-system-outage.html" %} {% include "includes/banner-system-outage.html" %}
<!-- Yellow banner with exclamation mark in a triangle: -->
{% include "includes/banner-warning.html" %} {% include "includes/banner-warning.html" %}
{% endcomment %} {% endcomment %}
{% include "includes/banner-info.html" %}
<section class="usa-banner" aria-label="Official website of the United States government"> <section class="usa-banner" aria-label="Official website of the United States government">
<div class="usa-accordion"> <div class="usa-accordion">
<header class="usa-banner__header"> <header class="usa-banner__header">

View file

@ -1,7 +1,9 @@
<div class="margin-y-0 {% if add_class %}{{ add_class }}{% endif %}" aria-label="Site alert"> <div class="margin-y-0 {% if add_class %}{{ add_class }}{% endif %}" aria-label="Site alert">
<div class="usa-alert usa-alert--error"> <div class="usa-alert usa-alert--error">
<div class="usa-alert__body {% if is_widescreen_mode %}usa-alert__body--widescreen{% endif %}"> <div class="usa-alert__body {% if is_widescreen_mode %}usa-alert__body--widescreen{% endif %}">
<h4 class="usa-alert__heading">Header</h4> <h4 class="usa-alert__heading">
Header
</h4>
<p class="usa-alert__text maxw-none"> <p class="usa-alert__text maxw-none">
Text here Text here
</p> </p>

View file

@ -1,9 +1,11 @@
<section class="usa-site-alert usa-site-alert--info margin-y-0 {% if add_class %}{{ add_class }}{% endif %}" aria-label="Site alert"> <section class="usa-site-alert usa-site-alert--info margin-y-0 {% if add_class %}{{ add_class }}{% endif %}" aria-label="Site alert">
<div class="usa-alert"> <div class="usa-alert">
<div class="usa-alert__body {% if is_widescreen_mode %}usa-alert__body--widescreen{% endif %}"> <div class="usa-alert__body {% if is_widescreen_mode %}usa-alert__body--widescreen{% endif %}">
<h4 class="usa-alert__heading">Announcement:</h4> <h4 class="usa-alert__heading">
Header
</h4>
<p class="usa-alert__text maxw-none"> <p class="usa-alert__text maxw-none">
Katherine & Rachid are now ruling the world! Text here
</p> </p>
</div> </div>
</div> </div>

View file

@ -1,4 +1,4 @@
<section class="usa-site-alert usa-site-alert--emergency margin-y-0 {% if add_class %}{{ add_class }}{% endif %}" aria-label="Site alert"> <section class="usa-site-alert usa-site-alert--emergency usa-site-alert--hot-pink margin-y-0 {% if add_class %}{{ add_class }}{% endif %}" aria-label="Site alert">
<div class="usa-alert"> <div class="usa-alert">
<div class="usa-alert__body {% if add_body_class %}{{ add_body_class }}{% endif %} {% if is_widescreen_mode %}usa-alert__body--widescreen{% endif %}"> <div class="usa-alert__body {% if add_body_class %}{{ add_body_class }}{% endif %} {% if is_widescreen_mode %}usa-alert__body--widescreen{% endif %}">
<p class="usa-alert__text maxw-none"> <p class="usa-alert__text maxw-none">

View file

@ -1,7 +1,9 @@
<div class="margin-y-0 {% if add_class %}{{ add_class }}{% endif %}" aria-label="Site alert"> <div class="margin-y-0 {% if add_class %}{{ add_class }}{% endif %}" aria-label="Site alert">
<div class="usa-alert usa-alert--warning"> <div class="usa-alert usa-alert--warning">
<div class="usa-alert__body {% if is_widescreen_mode %}usa-alert__body--widescreen{% endif %}"> <div class="usa-alert__body {% if is_widescreen_mode %}usa-alert__body--widescreen{% endif %}">
<h4 class="usa-alert__heading">Header</h4> <h4 class="usa-alert__heading">
Header
</h4>
<p class="usa-alert__text maxw-none"> <p class="usa-alert__text maxw-none">
Text here Text here
</p> </p>