From eae50d9efa18753b29aa6765b6d495b6bda5a973 Mon Sep 17 00:00:00 2001
From: cubicroot <cccv@cubicroot.xyz>
Date: Thu, 26 Dec 2024 21:54:28 +0000
Subject: [PATCH] Update Alert Styles
---
src/core/markdown.py | 6 +++---
.../jinja2/plainui/components/alert.html.j2 | 5 +----
src/plainui/styles/_variables-hub.scss | 18 ++++++++--------
src/plainui/styles/components/_alert.scss | 21 +++++++------------
src/plainui/styles/themes/38c3.scss | 4 ----
5 files changed, 20 insertions(+), 34 deletions(-)
diff --git a/src/core/markdown.py b/src/core/markdown.py
index 685481c9b..4b45c5d70 100644
--- a/src/core/markdown.py
+++ b/src/core/markdown.py
@@ -51,7 +51,7 @@ class Tag(SpanToken):
class AlertBlock(BlockToken):
- pattern = re.compile(r'^!!! (danger|warning|info)(\s+".+")?\s*$')
+ pattern = re.compile(r'^!!! (danger|warning|info|success)(\s+".+")?\s*$')
def __init__(self, match):
self.alert_type = match[0]
@@ -89,9 +89,9 @@ class MyHtmlRenderer(HTMLRenderer):
return html.escape(token.content)
def render_alert_block(self, token: AlertBlock) -> str:
- result = f'<div class="mx-1 my-3 alert alert-{token.alert_type}">'
+ result = f'<div class="mx-1 my-3 hub-alert hub-alert--{token.alert_type}">'
if token.alert_caption:
- result += f'<p class="fw-bold">{token.alert_caption}</p>'
+ result += f'{token.alert_caption}'
result += self.render_inner(token)
result += '</div>\n'
return result
diff --git a/src/plainui/jinja2/plainui/components/alert.html.j2 b/src/plainui/jinja2/plainui/components/alert.html.j2
index 771e28fe8..b44676ece 100644
--- a/src/plainui/jinja2/plainui/components/alert.html.j2
+++ b/src/plainui/jinja2/plainui/components/alert.html.j2
@@ -1,8 +1,5 @@
{% macro alert(type, class="") -%}
- <div class="hub-alert hub-alert--{{ type }} {{ class }}">
- <div class="hub-alert__bar"></div>
- <div role="alert">{{ caller() }}</div>
- </div>
+ <div class="hub-alert hub-alert--{{ type }} {{ class }}" role"alert">{{ caller() }}</div>
{%- endmacro %}
{% macro info(class="") -%}
diff --git a/src/plainui/styles/_variables-hub.scss b/src/plainui/styles/_variables-hub.scss
index 98d5265d0..b1e666d29 100644
--- a/src/plainui/styles/_variables-hub.scss
+++ b/src/plainui/styles/_variables-hub.scss
@@ -38,21 +38,21 @@ $hub-event-list-upcoming-color: $info !default;
/* Alerts */
-$hub-alert-success-border: $success-border-subtle !default;
-$hub-alert-success-color: $success !default;
-$hub-alert-success-fill: $success !default;
+$hub-alert-success-border: $secondary-border-subtle !default;
+$hub-alert-success-color: $white !default;
+$hub-alert-success-bg: $success !default;
$hub-alert-info-border: $info-border-subtle !default;
-$hub-alert-info-color: $info !default;
-$hub-alert-info-fill: $info !default;
+$hub-alert-info-color: $black !default;
+$hub-alert-info-bg: $info !default;
$hub-alert-warning-border: $warning-border-subtle !default;
-$hub-alert-warning-color: $warning !default;
-$hub-alert-warning-fill: $warning !default;
+$hub-alert-warning-color: $black !default;
+$hub-alert-warning-bg: $warning !default;
$hub-alert-danger-border: $danger-border-subtle !default;
-$hub-alert-danger-color: $danger !default;
-$hub-alert-danger-fill: $danger !default;
+$hub-alert-danger-color: $white !default;
+$hub-alert-danger-bg: $danger !default;
/* Tags */
diff --git a/src/plainui/styles/components/_alert.scss b/src/plainui/styles/components/_alert.scss
index 63f40215f..ebf6c2a75 100644
--- a/src/plainui/styles/components/_alert.scss
+++ b/src/plainui/styles/components/_alert.scss
@@ -1,40 +1,33 @@
.hub-alert {
align-items: center;
+ background-color: var(--hub-alert-background-color);
+ border-left: 0.2rem solid var(--hub-alert-border-color);
color: var(--hub-alert-text-color);
- border: 1px solid var(--hub-alert-border-color);
display: flex;
font: $hub-text-main-font;
- gap: map-get($spacers, 3);
- padding: map-get($spacers, 1) map-get($spacers, 2);
-}
-
-.hub-alert__bar {
- background-color: var(--hub-alert-fill-color);
- border-radius: 0.25rem;
- min-height: 32px;
- width: 0.1875rem;
+ padding: map-get($spacers, 2);
}
.hub-alert--info {
+ --hub-alert-background-color: #{$hub-alert-info-bg};
--hub-alert-border-color: #{$hub-alert-info-border};
- --hub-alert-fill-color: #{$hub-alert-info-fill};
--hub-alert-text-color: #{$hub-alert-info-color};
}
.hub-alert--warning {
+ --hub-alert-background-color: #{$hub-alert-warning-bg};
--hub-alert-border-color: #{$hub-alert-warning-border};
- --hub-alert-fill-color: #{$hub-alert-warning-fill};
--hub-alert-text-color: #{$hub-alert-warning-color};
}
.hub-alert--success {
+ --hub-alert-background-color: #{$hub-alert-success-bg};
--hub-alert-border-color: #{$hub-alert-success-border};
- --hub-alert-fill-color: #{$hub-alert-success-fill};
--hub-alert-text-color: #{$hub-alert-success-color};
}
.hub-alert--danger {
+ --hub-alert-background-color: #{$hub-alert-danger-bg};
--hub-alert-border-color: #{$hub-alert-danger-border};
- --hub-alert-fill-color: #{$hub-alert-danger-fill};
--hub-alert-text-color: #{$hub-alert-danger-color};
}
diff --git a/src/plainui/styles/themes/38c3.scss b/src/plainui/styles/themes/38c3.scss
index b73b380cf..398e0fdf5 100644
--- a/src/plainui/styles/themes/38c3.scss
+++ b/src/plainui/styles/themes/38c3.scss
@@ -18,7 +18,3 @@ body {
background-position: 100% 100%;
background-repeat: no-repeat;
}
-
-.hub-alert {
- background-color: $black;
-}
--
GitLab