From e96af5ce5e8dd00cf8a31d4812f416583defa449 Mon Sep 17 00:00:00 2001
From: Ariel Costas Guerrero <ariel@costas.dev>
Date: Sun, 13 Apr 2025 13:00:43 +0200
Subject: New article, fix sass

---
 styles/_alert.scss | 65 ++++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 65 insertions(+)
 create mode 100644 styles/_alert.scss

(limited to 'styles/_alert.scss')

diff --git a/styles/_alert.scss b/styles/_alert.scss
new file mode 100644
index 0000000..b0935ce
--- /dev/null
+++ b/styles/_alert.scss
@@ -0,0 +1,65 @@
+@use "./variables" as *;
+
+div[role="alert"] {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  gap: 0.75rem;
+
+  padding: 1rem;
+  margin-block: 1.5rem;
+  margin-inline: 0.5rem;
+
+  border-radius: 0.5rem;
+
+  svg {
+    width: 1.5em;
+    height: 1.5em;
+    margin-inline-end: 0.5rem;
+    color: inherit;
+    vertical-align: middle;
+    flex-shrink: 0;
+  }
+
+  p {
+    margin-block: 0;
+  }
+
+  &::before {
+    flex-shrink: 0;
+    display: block;
+
+    width: 24px;
+    height: 24px;
+    line-height: 24px;
+
+    border-radius: 50%;
+    font-size: 1rem;
+
+    text-align: center;
+  }
+}
+
+div[role="alert"].note {
+  background-color: $noteBackground;
+  color: $noteText;
+  box-shadow: 0 0 0 1px $noteText;
+
+  &::before {
+    content: "i";
+    background-color: $noteText;
+    color: $light;
+  }
+}
+
+div[role="alert"].warning {
+  background-color: $warningBackground;
+  color: $warningText;
+  box-shadow: 0 0 0 1px $warningText;
+
+  &::before {
+    content: "!";
+    background-color: $warningText;
+    color: $light;
+  }
+}
-- 
cgit v1.3