Messages
Variables
var(--color-body)
: #333 - the default color of text inherits from the body
var(--color-message-error)
: #f2dede - for error messages
var(--color-message-info)
: #f0f0f0 - for info messages
var(--color-message-success)
: #dff0d8 - for success messages
var(--message-border-radius)
: 2px - default border radius for all messages
Mixins
message $color
Parameters
$color
(required) - Color; used to create the background and border
Usage
.message-blue {
@mixin message blue;
}
Output
.message-blue {
border: 1px solid color(blue lightness(-10%));
border-radius: 2px;
padding: 5px 10px;
background-color: blue;
color: #333;
}
Helpers
.message-error
.message-info
.message-sucess
Example
<div class="message-info">This is an info message</div>
<div class="message-success">This is an success message</div>
<div class="message-error">This is an error message</div>
<div class="message-error">
This is multiple error messages
<ul>
<li>Error message 1</li>
<li>Error message 2</li>
</ul>
</div>