| Current Path : /home/atelierpru/www/OLD/squelettes/less/framework_components/ |
| Current File : /home/atelierpru/www/OLD/squelettes/less/framework_components/alerts.less |
// MARKUP:
//
// <div class="alert">
// <div class="alert__body"></div>
// <div class="alert__close"></div>
// </div>
//
// MODIFIERS:
//
// .bg--error, .bg--success, .bg--primary
.alert{
overflow: hidden;
border: 1px solid darken(@color-bg-site, 10%);
padding: @base-line-height/2;
.alert__body, .alert__close{
display: inline-block;
user-select: none;
}
.alert__body{
float: left;
}
.alert__close{
float: right;
cursor: pointer;
}
&.bg--error{
background: lighten(@color-error, 40%);
border-color: @color-error;
.alert__close{
color: @color-error;
}
}
&.bg--success{
background: lighten(@color-success, 40%);
border-color: @color-success;
.alert__close{
color: @color-success;
}
}
&.bg--primary{
background: lighten(@color-primary, 40%);
border-color: @color-primary;
.alert__body{
> span{
color: @color-body;
}
}
.alert__close{
color: @color-primary;
}
}
&.alert--dismissed{
display: none;
}
}