Badges added

changelog.md

@@ -2,6 +2,7 @@
 - architecture globale revisitée (vendor, config, library, components)
 - 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.)
 - 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,20 +52,34 @@ $color-link-hover: $color4;
 
 $brand-primary: $color5;
 
-
 // spacings (choose unit you prefer)
-$tiny-value             : .5rem !default; // tiny value for margins / paddings
+$tiny-value             : .5rem ; // tiny value for margins / paddings
-$tiny-plus-value        : .7rem !default; // tiny+ value for margins / paddings
+$tiny-plus-value        : .7rem ; // tiny+ value for margins / paddings
-$small-value            : 1rem !default; // small value for margins / paddings
+$small-value            : 1rem ; // small value for margins / paddings
-$small-plus-value       : 1.5rem !default; // small+ value for margins / paddings
+$small-plus-value       : 1.5rem ; // small+ value for margins / paddings
-$medium-value           : 2rem !default; // medium value for margins / paddings
+$medium-value           : 2rem ; // medium value for margins / paddings
-$medium-plus-value      : 3rem !default; // medium+ value for margins / paddings
+$medium-plus-value      : 3rem ; // medium+ value for margins / paddings
-$large-value            : 4rem !default; // large value for margins / paddings
+$large-value            : 4rem ; // large value for margins / paddings
-$large-plus-value       : 6rem !default; // large value for margins / paddings
+$large-plus-value       : 6rem ; // large value for margins / paddings
-$extra-large-value      : 8rem !default; // extra large value for margins / paddings
+$extra-large-value      : 8rem ; // extra large value for margins / paddings
-$extra-large-plus-value : 12rem !default; // extra large value for margins / paddings
+$extra-large-plus-value : 12rem ; // extra large value for margins / paddings
-$ultra-large-value      : 16rem !default; // ultra large value for margins / paddings
+$ultra-large-value      : 16rem ; // ultra large value for margins / paddings
-$ultra-large-plus-value : 20rem !default; // ultra large value for margins / paddings
+$ultra-large-plus-value : 20rem ; // ultra large value for margins / paddings
 
 // grid gutters (for .has-gutter-* classes)
 $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/badges.scss

@@ -1,3 +1,46 @@
 /* ----------------------------- */
 /* ==Badges                      */
 /* ----------------------------- */
+/* use .badge-- classes for variants */
+
+.badge {
+  display: inline-block;
+  padding: 3px $tiny-value;
+  vertical-align: baseline;
+  white-space: nowrap;
+  color: $color-base;
+  border-radius: $border-radius;
+  background-color: $color-muted;
+}
+
+.badge {
+  @each $name, $background-color, $color, $border in $variants-list {
+    &--#{$name} {
+      @extend .badge;
+      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;
+  }
+}

sass/components/buttons.scss

@@ -7,23 +7,24 @@
 %btn {
   display: inline-block;
   padding: $tiny-value $small-value;
-  font-family: inherit;
-  font-size: inherit;
-  line-height: 1;
-  vertical-align: middle;
-  white-space: nowrap;
-  color: $color-base;
-  background-color: $color-muted;
-  text-align: center;
-  text-decoration: none;
-  border: none;
   cursor: pointer;
-  transition: 0.25s;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
+  transition: 0.25s;
   transition-property: box-shadow, background-color, color, border;
+  text-align: center;
+  vertical-align: middle;
+  white-space: nowrap;
+  text-decoration: none;
+  color: $color-base;
+  border: none;
+  border-radius: $border-radius;
+  background-color: $color-muted;
+  font-family: inherit;
+  font-size: inherit;
+  line-height: 1;
 }
 
 .btn,
@@ -37,21 +38,9 @@ button {
   }
 }
 
-// button color variants
-// name - background-color - color - border
-$buttons-variants: (
-  (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)
-);
-
 .btn,
 .button {
-  @each $name, $background-color, $color, $border in $buttons-variants {
+  @each $name, $background-color, $color, $border in $variants-list {
     &--#{$name} {
       @extend %btn;
       background-color: $background-color;
@@ -82,30 +71,12 @@ $buttons-variants: (
     width: 100% !important;
     display: block;
   }
-}
-
-/* disabled buttons */
-.btn,
-.button,
-[type="button"],
-[type="reset"],
-[type="submit"],
-button {
   &.disabled,
-  &:disabled {
+  &--disabled {
     opacity: 0.5;
     cursor: not-allowed;
   }
-}
+  &--unstyled {
-
-/* unstyled buttons */
-.btn,
-.button,
-[type="button"],
-[type="reset"],
-[type="submit"],
-button {
-  &.unstyled {
     padding: 0;
     border: none;
     text-align: left;

sass/knacss.scss

@@ -24,6 +24,7 @@
   - Skip Links
   - Tables (data tables consistency)
   - Forms (forms consistency)
+  - Buttons (forms consistency)
   - Grillade (Grid System in Flexbox)
 */
 
@@ -52,6 +53,8 @@
 @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/grillade.scss"; // grids