From d7d968db639a650a07ee0c43a2da33bc1f769ccf Mon Sep 17 00:00:00 2001
From: Kevin Paxman <kpaxman@uwaterloo.ca>
Date: Fri, 18 Oct 2024 10:28:41 -0400
Subject: [PATCH] ISTWCMS-7158: don't make emergency notifications require an
additional class to make them look like emergencies
---
.../_emergency-notification.scss | 105 +++++++-----------
.../emergency-notification.twig | 2 +-
2 files changed, 42 insertions(+), 65 deletions(-)
diff --git a/src/patterns/03-layouts/emergency-notification/_emergency-notification.scss b/src/patterns/03-layouts/emergency-notification/_emergency-notification.scss
index 5cc6f4da..cfd931b5 100644
--- a/src/patterns/03-layouts/emergency-notification/_emergency-notification.scss
+++ b/src/patterns/03-layouts/emergency-notification/_emergency-notification.scss
@@ -17,82 +17,59 @@
@include uw-contained-width(var(--layout-max-width));
}
- .block-uw-cbl-emergency-notification {
- background: #f0f0f0;
- border: 2px solid #96172e;
- margin: var(--size-2) 0;
- padding: var(--size-2);
-
- // Prevent excess space at top from elements that have a margin-top.
- > *:first-child {
- margin-top: 0;
- }
-
- // Prevent excess space at bottom from elements that have a margin-bottom.
- > *:last-child {
- margin-bottom: 0;
- }
-
- p:last-of-type {
- margin-bottom: 0;
- }
-
- }
}
- &.emergency-notification {
- background: var(--uw-alert);
- max-width: 100%;
+ background: var(--uw-alert);
+ max-width: 100%;
+
+ .uw-emergency-notification__content {
+ display: grid;
+ gap: var(--size-2);
+ grid-template-columns: 100%;
+ margin: var(--size-4) auto;
+ max-width: 80%;
+ padding: 0;
+ text-align: center;
- .uw-emergency-notification__content {
- display: grid;
- gap: var(--size-2);
- grid-template-columns: 100%;
- margin: var(--size-4) auto;
- max-width: 80%;
- padding: 0;
- text-align: center;
+ .uw-icon {
+ align-self: center;
+ height: var(--size-8);
+ margin-left: auto;
+ margin-right: auto;
+ width: var(--size-8);
- .uw-icon {
- align-self: center;
+ svg {
+ fill: var(--uw-white);
height: var(--size-8);
- margin-left: auto;
- margin-right: auto;
width: var(--size-8);
-
- svg {
- fill: var(--uw-white);
- height: var(--size-8);
- width: var(--size-8);
- }
}
+ }
- @media(min-width: $screen-md) {
- @include uw-contained-width(var(--layout-max-width));
- grid-template-columns: var(--size-10) auto;
- margin: var(--size-2) auto;
- padding: 0 var(--size-2);
- text-align: left;
+ @media(min-width: $screen-md) {
+ @include uw-contained-width(var(--layout-max-width));
+ grid-template-columns: var(--size-10) auto;
+ margin: var(--size-2) auto;
+ padding: 0 var(--size-2);
+ text-align: left;
+ }
+
+ .block-uw-cbl-emergency-notification {
+ border: 0 solid transparent;
+ background-color: var(--uw-alert);
+ padding: var(--size-1);
+ margin: 0;
+ * {
+ color: var(--uw-white);
}
- .block-uw-cbl-emergency-notification {
- border: 0 solid transparent;
- background-color: var(--uw-alert);
- padding: var(--size-1);
- margin: 0;
+ .emergency-notification__content {
* {
- color: var(--uw-white);
+ font-family: var(--font-systemmedium);
+ font-size: var(--font-size-1);
}
-
- .emergency-notification__content {
- * {
- font-family: var(--font-systemmedium);
- font-size: var(--font-size-1);
- }
- p {
- &:last-of-type {
- margin-bottom: 0;
- }
+ p {
+ &:last-of-type {
+ margin-bottom: 0;
}
}
}
diff --git a/src/patterns/03-layouts/emergency-notification/emergency-notification.twig b/src/patterns/03-layouts/emergency-notification/emergency-notification.twig
index bcf52a95..dd58edc3 100644
--- a/src/patterns/03-layouts/emergency-notification/emergency-notification.twig
+++ b/src/patterns/03-layouts/emergency-notification/emergency-notification.twig
@@ -1,4 +1,4 @@
-<div class="uw-emergency-notification emergency-notification">
+<div class="uw-emergency-notification">
<div role="complementary" class="uw-emergency-notification__content">
{% include '@components/icon/icon.twig' with {
'name': 'special-alert',
--
GitLab