From fa4a9ce1d4e43e9e730dcfd23f7f2a3a25943357 Mon Sep 17 00:00:00 2001
From: Bram Wiepjes <bramw@protonmail.com>
Date: Sat, 16 Feb 2019 18:43:52 +0100
Subject: [PATCH] added alert component
---
web-frontend/public/index.html | 44 ++++++++++++++++++
web-frontend/src/scss/abstracts/_mixins.scss | 17 +++++++
web-frontend/src/scss/components/_alert.scss | 48 ++++++++++++++++++++
web-frontend/src/scss/default.scss | 1 +
4 files changed, 110 insertions(+)
create mode 100644 web-frontend/src/scss/components/_alert.scss
diff --git a/web-frontend/public/index.html b/web-frontend/public/index.html
index c02106403..35ff8ce69 100755
--- a/web-frontend/public/index.html
+++ b/web-frontend/public/index.html
@@ -18,6 +18,50 @@
<p>
Lorem ipsum dolor sit amet, <a href="#">consectetur</a> adipiscing elit. Sed quis gravida ante. Nulla nec elit dui. Nam nec dui ligula. Pellentesque feugiat erat vel porttitor euismod. Duis nec viverra urna. Praesent lobortis feugiat erat, nec volutpat nulla tincidunt vel. In hac habitasse platea dictumst. Aenean fringilla lacus nunc, non pharetra mauris pulvinar lacinia. Aenean ut sem lacinia, sagittis quam sed, pellentesque orci. Aenean non consequat mi. Nunc laoreet ligula a nunc eleifend, nec accumsan felis euismod.
</p>
+ <div style="margin-bottom: 20px;">
+ <div class="alert alert-has-icon">
+ <div class="alert-icon">
+ <i class="fas fa-exclamation"></i>
+ </div>
+ <div class="alert-title">Notification message</div>
+ <p class="alert-content">
+ Lorem ipsum dolor sit amet, <a href="#">consectetur</a> adipiscing elit. Sed quis gravida ante. Nulla nec elit dui. Nam nec dui ligula. Pellentesque feugiat erat vel porttitor euismod. Duis nec viverra urna. Praesent.
+ </p>
+ </div>
+ <div class="alert">
+ <div class="alert-title">Notification message</div>
+ <p class="alert-content">
+ Lorem ipsum dolor sit amet, <a href="#">consectetur</a> adipiscing elit. Sed quis gravida ante. Nulla nec elit dui. Nam nec dui ligula. Pellentesque feugiat erat vel porttitor euismod. Duis nec viverra urna. Praesent lobortis feugiat erat, nec volutpat nulla tincidunt vel. In hac habitasse platea dictumst. Aenean fringilla lacus nunc, non pharetra mauris pulvinar lacinia. Aenean ut sem lacinia, sagittis quam sed, pellentesque orci. Aenean non consequat mi. Nunc laoreet ligula a nunc eleifend, nec accumsan felis euismod.
+ </p>
+ </div>
+ <div class="alert alert-success alert-has-icon">
+ <div class="alert-icon">
+ <i class="fas fa-exclamation"></i>
+ </div>
+ <div class="alert-title">Notification message</div>
+ <p class="alert-content">
+ Lorem ipsum dolor sit amet, <a href="#">consectetur</a> adipiscing elit. Sed quis gravida ante. Nulla nec elit dui. Nam nec dui ligula. Pellentesque feugiat erat vel porttitor euismod. Duis nec viverra urna. Praesent.
+ </p>
+ </div>
+ <div class="alert alert-warning alert-has-icon">
+ <div class="alert-icon">
+ <i class="fas fa-exclamation"></i>
+ </div>
+ <div class="alert-title">Notification message</div>
+ <p class="alert-content">
+ Lorem ipsum dolor sit amet, <a href="#">consectetur</a> adipiscing elit. Sed quis gravida ante. Nulla nec elit dui. Nam nec dui ligula. Pellentesque feugiat erat vel porttitor euismod. Duis nec viverra urna. Praesent.
+ </p>
+ </div>
+ <div class="alert alert-error alert-has-icon">
+ <div class="alert-icon">
+ <i class="fas fa-exclamation"></i>
+ </div>
+ <div class="alert-title">Notification message</div>
+ <p class="alert-content">
+ Lorem ipsum dolor sit amet, <a href="#">consectetur</a> adipiscing elit. Sed quis gravida ante. Nulla nec elit dui. Nam nec dui ligula. Pellentesque feugiat erat vel porttitor euismod. Duis nec viverra urna. Praesent.
+ </p>
+ </div>
+ </div>
<div style="margin-bottom: 20px;">
<a href="#" class="button">Sign in</a>
<a href="#" class="button disabled">Sign in</a>
diff --git a/web-frontend/src/scss/abstracts/_mixins.scss b/web-frontend/src/scss/abstracts/_mixins.scss
index bf264f539..e6fabe786 100644
--- a/web-frontend/src/scss/abstracts/_mixins.scss
+++ b/web-frontend/src/scss/abstracts/_mixins.scss
@@ -18,3 +18,20 @@
line-height: $height;
padding: 0 $left-right-space;
}
+
+@mixin alert-style($background, $border, $title, $text, $icon-border) {
+ background-color: $background;
+ border-color: $border;
+
+ .alert-icon {
+ border-color: $icon-border;
+ }
+
+ .alert-title {
+ color: $title;
+ }
+
+ .alert-content {
+ color: $text;
+ }
+}
diff --git a/web-frontend/src/scss/components/_alert.scss b/web-frontend/src/scss/components/_alert.scss
new file mode 100644
index 000000000..562b9642f
--- /dev/null
+++ b/web-frontend/src/scss/components/_alert.scss
@@ -0,0 +1,48 @@
+.alert {
+ border: 1px solid;
+ border-radius: 3px;
+ margin: 30px 0;
+ padding: 16px;
+
+ @include alert-style($color-primary-100, $color-primary-300, $color-primary-900, $color-primary-700, $color-primary-400);
+
+ &.alert-has-icon {
+ position: relative;
+ padding-left: 72px;
+ }
+}
+
+.alert-icon {
+ position: absolute;
+ left: 16px;
+ top: 16px;
+ background-color: #ffffff;
+ border: 4px solid;
+ width: 40px;
+ height: 40px;
+ line-height: 32px;
+ text-align: center;
+ border-radius: 100%;
+}
+
+.alert-title {
+ font-size: 14px;
+ font-weight: 700;
+ margin-bottom: 8px;
+}
+
+.alert-content {
+ margin: 0;
+}
+
+.alert-success {
+ @include alert-style($color-success-100, $color-success-300, $color-success-900, $color-success-700, $color-success-400);
+}
+
+.alert-warning {
+ @include alert-style($color-warning-100, $color-warning-300, $color-warning-900, $color-warning-700, $color-warning-400);
+}
+
+.alert-error {
+ @include alert-style($color-error-100, $color-error-300, $color-error-900, $color-error-700, $color-error-400);
+}
diff --git a/web-frontend/src/scss/default.scss b/web-frontend/src/scss/default.scss
index 157419f8b..0392452ad 100755
--- a/web-frontend/src/scss/default.scss
+++ b/web-frontend/src/scss/default.scss
@@ -7,3 +7,4 @@
@import "base/typography";
@import "components/button";
+@import "components/alert";