From 6dcb5d2d20da552e3067f0d659bdcb9a98dd7e29 Mon Sep 17 00:00:00 2001
From: codecalm <codecalm@gmail.com>
Date: Thu, 22 Feb 2018 21:28:24 +0100
Subject: [PATCH] alerts

---
 src/_docs/alerts.md                      | 73 +++++++++++++++++++++++-
 src/_layouts/docs.html                   |  2 +-
 src/assets/scss/dashboard/_alert.scss    | 25 ++++++++
 src/assets/scss/dashboard/_close.scss    | 10 ++++
 src/assets/scss/dashboard/dashboard.scss |  2 +
 5 files changed, 110 insertions(+), 2 deletions(-)
 create mode 100644 src/assets/scss/dashboard/_alert.scss
 create mode 100644 src/assets/scss/dashboard/_close.scss

diff --git a/src/_docs/alerts.md b/src/_docs/alerts.md
index 6f388ed3e..f56177cd7 100644
--- a/src/_docs/alerts.md
+++ b/src/_docs/alerts.md
@@ -1,5 +1,76 @@
 ---
 title: Alerts
 icon: fe fe-alert-triangle
+description: Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages.
 in_progress: true
----
\ No newline at end of file
+---
+
+### Default alerts
+
+Add color contextual class.
+
+{% example html %}
+{% for color in site.theme-colors %}
+<div class="alert alert-{{ color[0] }}" role="alert">
+  This is a {{ color[0] }} alert—check it out!
+</div>
+{% endfor %}
+{% endexample %}
+
+### Alert with icon
+
+Add `.alert-icon` class.
+
+{% example html %}
+<div class="alert alert-icon alert-primary" role="alert">
+  <i class="fe fe-bell mr-2" aria-hidden="true"></i> You have done 5 actions. 
+</div>
+<div class="alert alert-icon alert-success" role="alert">
+  <i class="fe fe-check mr-2" aria-hidden="true"></i> The page has been added. 
+</div>
+<div class="alert alert-icon alert-danger" role="alert">
+  <i class="fe fe-alert-triangle mr-2" aria-hidden="true"></i> The daily report has failed. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
+</div>
+{% endexample %}
+
+### Alert dismissible
+
+Add a dismiss button and the `.alert-dismissible` class, which adds extra padding to the right of the alert and positions the `.close` button. On the dismiss button, add the `data-dismiss="alert"` attribute, which triggers the JavaScript functionality. Be sure to use the `<button>` element with it for proper behavior across all devices.
+
+{% example html %}
+<div class="alert alert-warning alert-dismissible">
+  <button type="button" class="close" data-dismiss="alert"></button>
+  Lorem ipsum dolor sit amet, consectetur adipisicing elit.
+</div>
+{% endexample %}
+
+### Alert with avatar
+
+{% example html %}
+<div class="alert alert-avatar alert-primary alert-dismissible">
+  <span class="avatar" style="background-image: url({{ site.base }}/{{ site.data.users[12].photo }})"></span>
+  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
+</div>
+<div class="alert alert-avatar alert-success alert-dismissible">
+  <span class="avatar" style="background-image: url({{ site.base }}/{{ site.data.users[13].photo }})"></span>
+  Lorem ipsum dolor sit amet, consectetur adipisicing elit.
+</div>
+{% endexample %}
+
+### Alert with buttons
+
+{% example html %}
+<div class="alert alert-success alert-dismissible">
+  <button data-dismiss="alert" class="close"></button>
+    
+  <h4>Some Message</h4>
+  <p>
+    Lorem ipsum Minim ad pariatur eiusmod ea ut nulla aliqua est quis id dolore minim
+    voluptate.
+  </p>
+  <div class="btn-list">
+    <button class="btn btn-success btn-outline" type="button">Okay</button>
+    <button class="btn btn-secondary" type="button">No, thanks</button>
+  </div>
+</div>
+{% endexample %}
\ No newline at end of file
diff --git a/src/_layouts/docs.html b/src/_layouts/docs.html
index b39369418..7fe247d13 100644
--- a/src/_layouts/docs.html
+++ b/src/_layouts/docs.html
@@ -31,7 +31,7 @@ title: Documentation
 						{% endif %}
 
 						{% if page.in_progress %}
-						<div class="alert alert-info mt-5 mb-6">
+						<div class="alert alert-primary mt-5 mb-6">
 							<h4 class="mb-1">Work in progress!</h4>
 							<div>More detailed documentation is coming soon, but in the meantime here's a quick class reference.</div>
 						</div>
diff --git a/src/assets/scss/dashboard/_alert.scss b/src/assets/scss/dashboard/_alert.scss
new file mode 100644
index 000000000..6e664ff62
--- /dev/null
+++ b/src/assets/scss/dashboard/_alert.scss
@@ -0,0 +1,25 @@
+.alert {
+	font-size: $font-size-base;
+}
+
+.alert-icon {
+	padding-left: 3rem;
+
+	>i {
+		color: inherit !important;
+		font-size: 1rem;
+		position: absolute;
+		top: 1rem;
+		left: 1rem;
+	}
+}
+
+.alert-avatar {
+	padding-left: 3.75rem;
+
+	.avatar {
+		position: absolute;
+		top: .5rem;
+		left: .75rem;
+	}
+}
\ No newline at end of file
diff --git a/src/assets/scss/dashboard/_close.scss b/src/assets/scss/dashboard/_close.scss
new file mode 100644
index 000000000..095480008
--- /dev/null
+++ b/src/assets/scss/dashboard/_close.scss
@@ -0,0 +1,10 @@
+.close {
+	font-size: 1rem;
+	line-height: 1.5;
+	transition: .3s color;
+
+	&:before {
+		content: '\ea00';
+		font-family: "feather";
+	}
+}
\ No newline at end of file
diff --git a/src/assets/scss/dashboard/dashboard.scss b/src/assets/scss/dashboard/dashboard.scss
index a21a52592..9bc3b98da 100644
--- a/src/assets/scss/dashboard/dashboard.scss
+++ b/src/assets/scss/dashboard/dashboard.scss
@@ -16,6 +16,8 @@
 
 @import 'nav';
 @import 'button';
+@import 'alert';
+@import 'close';
 @import 'badge';
 @import 'tables';
 @import 'breadcrumb';