From dee0e61697967b3c33e3cf62cc74c8ef783de4ba Mon Sep 17 00:00:00 2001 From: Raphael Goetter Date: Mon, 31 Jul 2017 15:49:38 +0200 Subject: [PATCH] Badges added --- changelog.md | 1 + sass/_config/_variables.scss | 40 ++++++++++++++++-------- sass/components/badges.scss | 43 ++++++++++++++++++++++++++ sass/components/buttons.scss | 59 +++++++++--------------------------- sass/knacss.scss | 3 ++ 5 files changed, 89 insertions(+), 57 deletions(-) diff --git a/changelog.md b/changelog.md index 9cc5b5b..a663aa8 100644 --- a/changelog.md +++ b/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 diff --git a/sass/_config/_variables.scss b/sass/_config/_variables.scss index 4cbe081..b9b20b6 100644 --- a/sass/_config/_variables.scss +++ b/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-plus-value : .7rem !default; // tiny+ value for margins / paddings -$small-value : 1rem !default; // small value for margins / paddings -$small-plus-value : 1.5rem !default; // small+ value for margins / paddings -$medium-value : 2rem !default; // medium value for margins / paddings -$medium-plus-value : 3rem !default; // medium+ value for margins / paddings -$large-value : 4rem !default; // large value for margins / paddings -$large-plus-value : 6rem !default; // large value for margins / paddings -$extra-large-value : 8rem !default; // extra large value for margins / paddings -$extra-large-plus-value : 12rem !default; // extra large value for margins / paddings -$ultra-large-value : 16rem !default; // ultra large value for margins / paddings -$ultra-large-plus-value : 20rem !default; // ultra large value for margins / paddings +$tiny-value : .5rem ; // tiny value for margins / paddings +$tiny-plus-value : .7rem ; // tiny+ value for margins / paddings +$small-value : 1rem ; // small value for margins / paddings +$small-plus-value : 1.5rem ; // small+ value for margins / paddings +$medium-value : 2rem ; // medium value for margins / paddings +$medium-plus-value : 3rem ; // medium+ value for margins / paddings +$large-value : 4rem ; // large value for margins / paddings +$large-plus-value : 6rem ; // large value for margins / paddings +$extra-large-value : 8rem ; // extra large value for margins / paddings +$extra-large-plus-value : 12rem ; // extra large value for margins / paddings +$ultra-large-value : 16rem ; // 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) +); diff --git a/sass/components/badges.scss b/sass/components/badges.scss index 654aa17..3390470 100644 --- a/sass/components/badges.scss +++ b/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; + } +} diff --git a/sass/components/buttons.scss b/sass/components/buttons.scss index a86849e..e88a040 100644 --- a/sass/components/buttons.scss +++ b/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 buttons */ -.btn, -.button, -[type="button"], -[type="reset"], -[type="submit"], -button { - &.unstyled { + &--unstyled { padding: 0; border: none; text-align: left; diff --git a/sass/knacss.scss b/sass/knacss.scss index 57ff3c5..4338233 100644 --- a/sass/knacss.scss +++ b/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