From f9f5e6750799ca53d9e5f690c5c3c59038c586c3 Mon Sep 17 00:00:00 2001
From: Raphael Goetter <raphael@goetter.fr>
Date: Mon, 31 Jul 2017 16:01:20 +0200
Subject: [PATCH] Alerts added

---
 changelog.md                 |  1 +
 sass/_config/_variables.scss | 24 ++++++++---------
 sass/components/alerts.scss  | 50 ++++++++++++++++++++++++++++++++++++
 sass/components/badges.scss  |  3 +++
 sass/components/forms.scss   |  1 -
 sass/knacss.scss             | 11 +++++---
 6 files changed, 73 insertions(+), 17 deletions(-)

diff --git a/changelog.md b/changelog.md
index a663aa8..9dc194c 100644
--- a/changelog.md
+++ b/changelog.md
@@ -3,6 +3,7 @@
 - normalize.css v7.0.0
 - refonte complète des boutons, avec possibilités de variantes (primary, success, warning, etc.)
 - ajout des badges (tags), avec possibilités de variantes (primary, success, warning, etc.)
+- ajout des alertes, avec possibilités de variantes (primary, success, warning, etc.)
 - autogrid object en Grid Layout
 - regroupement des styles des tableaux
 - suppression du namespace "kna-", ne devrait pas être problématique dès lors que Grillade sera devenu inutile dans KNACSS
diff --git a/sass/_config/_variables.scss b/sass/_config/_variables.scss
index b9b20b6..5c43d17 100644
--- a/sass/_config/_variables.scss
+++ b/sass/_config/_variables.scss
@@ -52,6 +52,18 @@ $color-link-hover: $color4;
 
 $brand-primary: $color5;
 
+// button, badges, alerts color variants list
+// name - background-color - color - border
+$variants-list: (
+  (primary,    $color-primary,    $color-light,    none),
+  (success,    $color-success,    $color-light,    none),
+  (info,       $color-info,       $color-light,    none),
+  (warning,    $color-warning,    $color-light,    none),
+  (danger,     $color-danger,     $color-light,    none),
+  (inverse,    $color-inverse,    $color-light,    none),
+  (ghost,      $color-ghost,      $color-light,    0 0 0 1px $color-light inset)
+);
+
 // spacings (choose unit you prefer)
 $tiny-value             : .5rem ; // tiny value for margins / paddings
 $tiny-plus-value        : .7rem ; // tiny+ value for margins / paddings
@@ -71,15 +83,3 @@ $grid-gutters: ( '': 1rem, '-l': 2rem, '-xl': 4rem );
 
 // border-radius
 $border-radius: 0;
-
-// button and badges color variants list
-// name - background-color - color - border
-$variants-list: (
-  (primary,    $color-primary,    $color-light,    none),
-  (success,    $color-success,    $color-light,    none),
-  (info,       $color-info,       $color-light,    none),
-  (warning,    $color-warning,    $color-light,    none),
-  (danger,     $color-danger,     $color-light,    none),
-  (inverse,    $color-inverse,    $color-light,    none),
-  (ghost,      $color-ghost,      $color-light,    0 0 0 1px $color-light inset)
-);
diff --git a/sass/components/alerts.scss b/sass/components/alerts.scss
index 8e6cb1d..c4058bb 100644
--- a/sass/components/alerts.scss
+++ b/sass/components/alerts.scss
@@ -1,3 +1,53 @@
 /* ----------------------------- */
 /* ==Alerts                      */
 /* ----------------------------- */
+/* use .alert-- classes for variants */
+
+.alert {
+  padding: $small-value $small-value;
+  margin-top: 0.75em;
+  margin-bottom: 0;
+  color: $color-base;
+  border-radius: $border-radius;
+  background-color: $color-muted;
+
+  & a {
+    color: inherit;
+    text-decoration: underline;
+  }
+}
+
+.alert {
+  @each $name, $background-color, $color, $border in $variants-list {
+    &--#{$name} {
+      @extend .alert;
+      background-color: $background-color;
+      color: $color;
+      box-shadow: $border;
+    }
+  }
+}
+
+// badge state variants
+.badge {
+  &--small {
+    font-size: $base-font-size - 0.4rem;
+  }
+
+  &--big {
+    font-size: $base-font-size + 0.4rem;
+  }
+
+  &--block {
+    width: 100% !important;
+    display: block;
+  }
+  &.disabled,
+  &--disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+  &:empty {
+    display: none;
+  }
+}
diff --git a/sass/components/badges.scss b/sass/components/badges.scss
index 3390470..85c782f 100644
--- a/sass/components/badges.scss
+++ b/sass/components/badges.scss
@@ -43,4 +43,7 @@
     opacity: 0.5;
     cursor: not-allowed;
   }
+  &:empty {
+    display: none;
+  }
 }
diff --git a/sass/components/forms.scss b/sass/components/forms.scss
index 191c2e0..1931a4b 100644
--- a/sass/components/forms.scss
+++ b/sass/components/forms.scss
@@ -1,7 +1,6 @@
 /* ----------------------------- */
 /* ==Forms                       */
 /* ----------------------------- */
-
 /* thanks to HTML5boilerplate,
 * github.com/nathansmith/formalize and www.sitepen.com
 */
diff --git a/sass/knacss.scss b/sass/knacss.scss
index 4338233..4e8a0c3 100644
--- a/sass/knacss.scss
+++ b/sass/knacss.scss
@@ -24,7 +24,9 @@
   - Skip Links
   - Tables (data tables consistency)
   - Forms (forms consistency)
-  - Buttons (forms consistency)
+  - Buttons (buttons consistency)
+  - Badges (badges consistency)
+  - Alerts (alerts consistency)
   - Grillade (Grid System in Flexbox)
 */
 
@@ -52,9 +54,10 @@
 @import "components/autogrid.scss"; // media autogrid
 @import "components/skip-links.scss"; // skip links
 @import "components/tables.scss"; // data tables consistency
-@import "components/forms.scss"; // forms consistency
-@import "components/buttons.scss"; // buttons consistency
-@import "components/badges.scss"; // badges consistency
+@import "components/forms.scss"; // forms consistency and styles
+@import "components/buttons.scss"; // buttons styles
+@import "components/badges.scss"; // badges styls
+@import "components/alerts.scss"; // alerts styles
 @import "components/grillade.scss"; // grids