Alerts added

This commit is contained in:
Raphael Goetter 2017-07-31 16:01:20 +02:00
parent dee0e61697
commit f9f5e67507
6 changed files with 73 additions and 17 deletions

View file

@ -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

View file

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

View file

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

View file

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

View file

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

View file

@ -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