Alerts added

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

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)
-);

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;
+  }
+}

sass/components/badges.scss

@@ -43,4 +43,7 @@
     opacity: 0.5;
     cursor: not-allowed;
   }
+  &:empty {
+    display: none;
+  }
 }

sass/components/forms.scss

@@ -1,7 +1,6 @@
 /* ----------------------------- */
 /* ==Forms                       */
 /* ----------------------------- */
-
 /* thanks to HTML5boilerplate,
 * github.com/nathansmith/formalize and www.sitepen.com
 */

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/forms.scss"; // forms consistency and styles
-@import "components/buttons.scss"; // buttons consistency
+@import "components/buttons.scss"; // buttons styles
-@import "components/badges.scss"; // badges consistency
+@import "components/badges.scss"; // badges styls
+@import "components/alerts.scss"; // alerts styles
 @import "components/grillade.scss"; // grids