zydronium/manage.get.gov
1
0
Fork 0
mirror of https://github.com/cisagov/manage.get.gov.git synced 2025-07-22 18:56:15 +02:00
Code Issues Projects Releases Packages Wiki Activity

Revise emergency banner colors and update code documentation

Browse source
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
Download patch file Download diff file Expand all files Collapse all files

22
src/registrar/assets/sass/_theme/_alerts.scss
View file

@ -1,3 +1,4 @@
@use "uswds-core" as *;
@use "base" as *;
// Fixes some font size disparities with the Figma
@ -29,3 +30,24 @@
.usa-alert__body--widescreen {
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');
}

1
src/registrar/assets/sass/_theme/_base.scss
View file

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

2
src/registrar/assets/sass/_theme/_uswds-theme.scss
View file

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

13
src/registrar/templates/base.html
View file

@ -76,17 +76,24 @@
{% endif %}
{% 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" %}
<!-- Blue banner with 'i'' mark in a circle: -->
{% include "includes/banner-info.html" %}
<!-- Marron banner with exclamation mark in a circle: -->
{% include "includes/banner-service-disruption.html" %}
{% include "includes/banner-site-alert.html" %}
{% include "includes/banner-system-outage.html" %}
<!-- Yellow banner with exclamation mark in a triangle: -->
{% include "includes/banner-warning.html" %}
{% endcomment %}
{% include "includes/banner-info.html" %}
<section class="usa-banner" aria-label="Official website of the United States government">
<div class="usa-accordion">
<header class="usa-banner__header">

4
src/registrar/templates/includes/banner-error.html
View file

@ -1,7 +1,9 @@
<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__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">
Text here
</p>

6
src/registrar/templates/includes/banner-info.html
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">
<div class="usa-alert">
<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">
Katherine & Rachid are now ruling the world!
Text here
</p>
</div>
</div>

2
src/registrar/templates/includes/banner-non-production-alert.html
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__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">

4
src/registrar/templates/includes/banner-warning.html
View file

@ -1,7 +1,9 @@
<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__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">
Text here
</p>