Badges added
This commit is contained in:
Raphael Goetter
parent
7f795fd09e
commit
dee0e61697
5 changed files with 89 additions and 57 deletions
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
);
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue