From c6489d0b8aa82b109efecde4a1cd630166bbb756 Mon Sep 17 00:00:00 2001
From: xaralis <filip.varecha@fragaria.cz>
Date: Wed, 6 Jan 2021 11:04:15 +0100
Subject: [PATCH] feat: add alerts
---
.../00-atoms/17-alerts/alert-colors.mustache | 10 +++++
.../00-atoms/17-alerts/alert-faded.mustache | 10 +++++
.../17-alerts/alert-semantic.mustache | 10 +++++
.../00-atoms/17-alerts/alert.mustache | 6 +++
source/css/atoms/alert.pcss | 41 +++++++++++++++++++
source/css/style.pcss | 1 +
6 files changed, 78 insertions(+)
create mode 100644 source/_patterns/00-atoms/17-alerts/alert-colors.mustache
create mode 100644 source/_patterns/00-atoms/17-alerts/alert-faded.mustache
create mode 100644 source/_patterns/00-atoms/17-alerts/alert-semantic.mustache
create mode 100644 source/_patterns/00-atoms/17-alerts/alert.mustache
create mode 100644 source/css/atoms/alert.pcss
diff --git a/source/_patterns/00-atoms/17-alerts/alert-colors.mustache b/source/_patterns/00-atoms/17-alerts/alert-colors.mustache
new file mode 100644
index 0000000..3479e7f
--- /dev/null
+++ b/source/_patterns/00-atoms/17-alerts/alert-colors.mustache
@@ -0,0 +1,10 @@
+<div class="inline-flex flex-col sm:flex-row space-y-8 sm:space-y-0 sm:space-x-8">
+ <div class="inline-flex flex-col space-y-2">
+ {{> atoms-alert(classes: "alert--black", icon: "ico--pirati") }}
+ {{> atoms-alert(classes: "alert--grey-125", icon: "ico--pirati") }}
+ {{> atoms-alert(classes: "alert--red-600", icon: "ico--pirati") }}
+ {{> atoms-alert(classes: "alert--yellow-400", icon: "ico--pirati") }}
+ {{> atoms-alert(classes: "alert--green-400", icon: "ico--pirati") }}
+ {{> atoms-alert(classes: "alert--blue-300", icon: "ico--pirati") }}
+ </div>
+</div>
diff --git a/source/_patterns/00-atoms/17-alerts/alert-faded.mustache b/source/_patterns/00-atoms/17-alerts/alert-faded.mustache
new file mode 100644
index 0000000..9a6594f
--- /dev/null
+++ b/source/_patterns/00-atoms/17-alerts/alert-faded.mustache
@@ -0,0 +1,10 @@
+<div class="inline-flex flex-col sm:flex-row space-y-8 sm:space-y-0 sm:space-x-8">
+ <div class="inline-flex flex-col space-y-2">
+ {{> atoms-alert(classes: "alert--black alert--faded", icon: "ico--pirati") }}
+ {{> atoms-alert(classes: "alert--grey-125 alert--faded", icon: "ico--pirati") }}
+ {{> atoms-alert(classes: "alert--red-600 alert--faded", icon: "ico--pirati") }}
+ {{> atoms-alert(classes: "alert--yellow-400 alert--faded", icon: "ico--pirati") }}
+ {{> atoms-alert(classes: "alert--green-400 alert--faded", icon: "ico--pirati") }}
+ {{> atoms-alert(classes: "alert--blue-300 alert--faded", icon: "ico--pirati") }}
+ </div>
+</div>
diff --git a/source/_patterns/00-atoms/17-alerts/alert-semantic.mustache b/source/_patterns/00-atoms/17-alerts/alert-semantic.mustache
new file mode 100644
index 0000000..5078415
--- /dev/null
+++ b/source/_patterns/00-atoms/17-alerts/alert-semantic.mustache
@@ -0,0 +1,10 @@
+<div class="inline-flex flex-col sm:flex-row space-y-8 sm:space-y-0 sm:space-x-8">
+ <div class="inline-flex flex-col space-y-2">
+ {{> atoms-alert(classes: "alert--dark", icon: "ico--pirati") }}
+ {{> atoms-alert(classes: "alert--light", icon: "ico--pirati") }}
+ {{> atoms-alert(classes: "alert--error", icon: "ico--pirati") }}
+ {{> atoms-alert(classes: "alert--warning", icon: "ico--pirati") }}
+ {{> atoms-alert(classes: "alert--success", icon: "ico--pirati") }}
+ {{> atoms-alert(classes: "alert--info", icon: "ico--pirati") }}
+ </div>
+</div>
diff --git a/source/_patterns/00-atoms/17-alerts/alert.mustache b/source/_patterns/00-atoms/17-alerts/alert.mustache
new file mode 100644
index 0000000..a442a8f
--- /dev/null
+++ b/source/_patterns/00-atoms/17-alerts/alert.mustache
@@ -0,0 +1,6 @@
+<span class="alert {{ classes }}">
+ {{# icon }}
+ <i class="alert__icon {{ icon }}"></i>
+ {{/ icon }}
+ <span>{{ excerpt.short }}</span>
+</span>
diff --git a/source/css/atoms/alert.pcss b/source/css/atoms/alert.pcss
new file mode 100644
index 0000000..75bc1fe
--- /dev/null
+++ b/source/css/atoms/alert.pcss
@@ -0,0 +1,41 @@
+.alert {
+ @apply p-4 flex leading-snug;
+
+ &--dark,
+ &--black {
+ @apply bg-black text-white;
+ }
+
+ &--light,
+ &--grey-125 {
+ @apply bg-grey-125 text-grey-300;
+ }
+
+ &--error,
+ &--red-600 {
+ @apply bg-red-600 text-white;
+ }
+
+ &--warning,
+ &--yellow-400 {
+ @apply bg-yellow-400 text-black;
+ }
+
+ &--success,
+ &--green-400 {
+ @apply bg-green-400 text-white;
+ }
+
+ &--info,
+ &--blue-300 {
+ @apply bg-blue-300 text-white;
+ }
+
+ &--faded {
+ @apply bg-opacity-75;
+ }
+}
+
+.alert__icon {
+ @apply mr-2;
+}
diff --git a/source/css/style.pcss b/source/css/style.pcss
index 18db66f..61e8630 100644
--- a/source/css/style.pcss
+++ b/source/css/style.pcss
@@ -19,6 +19,7 @@
* Custom components
*/
@import "./atoms/animations.pcss";
+@import "./atoms/alert.pcss";
@import "./atoms/avatar.pcss";
@import "./atoms/card.pcss";
@import "./atoms/contact-line.pcss";
--
GitLab