Alerts added
This commit is contained in:
parent
dee0e61697
commit
f9f5e67507
6 changed files with 73 additions and 17 deletions
|
@ -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
|
||||
|
|
|
@ -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)
|
||||
);
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -43,4 +43,7 @@
|
|||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
&:empty {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -1,7 +1,6 @@
|
|||
/* ----------------------------- */
|
||||
/* ==Forms */
|
||||
/* ----------------------------- */
|
||||
|
||||
/* thanks to HTML5boilerplate,
|
||||
* github.com/nathansmith/formalize and www.sitepen.com
|
||||
*/
|
||||
|
|
|
@ -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
|
||||
|
||||
|
||||
|
|
Loading…
Reference in a new issue