Messaging is typically used for messages from the server - info boxes, warnings, alerts, validation errors, etc.
@mixin messaging()
None.
.accordion>div>(.header{header}+.content>{lorem ipsum})
<!-- Default -->
<div class="messaging">
<p>
<strong>Default</strong> – Message with a <a href="https://www.imarc.com/">link</a>.
</p>
</div>
<div class="messaging -success">
<p>
<strong>Success</strong> – Message with a <a href="https://www.imarc.com/">link</a>.
</p>
</div>
<div class="messaging -error">
<p>
<strong>Error</strong> – Message with a <a href="https://www.imarc.com/">link</a>.
</p>
<ul>
<li>Error one</li>
<li>Error two</li>
</ul>
</div>
<div class="messaging -info">
<p>
<strong>Info</strong> – Message with a <a href="https://www.imarc.com/">link</a>.
</p>
</div>
<div class="messaging -warning">
<p>
<strong>Warning</strong> – Message with a <a href="https://www.imarc.com/">link</a>.
</p>
</div>
<!-- Filled -->
<div class="messaging -filled">
<p>
<strong>Default</strong> – Message with a <a href="https://www.imarc.com/">link</a>.
</p>
</div>
<div class="messaging -filled -success">
<p>
<strong>Success</strong> – Message with a <a href="https://www.imarc.com/">link</a>.
</p>
</div>
<div class="messaging -filled -error">
<p>
<strong>Error</strong> – Message with a <a href="https://www.imarc.com/">link</a>.
</p>
<ul>
<li>Error one</li>
<li>Error two</li>
</ul>
</div>
<div class="messaging -filled -warning">
<p>
<strong>Warning</strong> – Message with a <a href="https://www.imarc.com/">link</a>.
</p>
</div>
///
/// For messages to the user.
///
/// @character
/// Font awesome character to show.
/// @color
/// Dominant color.
/// @link-color
/// Optionally override the default link color.
/// @link-hover-color
/// Optionally override the link hover color.
///
@mixin messaging (
$character: $fa-var-info-circle,
$color: $info,
$link-color: inherit,
$link-hover-color: inherit
) {
background-color: $gray-100;
box-shadow: .25rem 0 0 inset;
margin-bottom: 2rem;
padding: 1rem 1.618rem 1rem 3.5rem;
position: relative;
a {
color: $link-color;
text-decoration: underline;
&:hover {
color: $link-hover-color;
}
}
&::before {
@include fontawesome(900, $character);
font-size: 1.5rem;
left: 1rem;
position: absolute;
top: 1rem;
}
&.-success::before {
@include fontawesome(900, $fa-var-check-circle);
}
&.-info::before {
@include fontawesome(900, $fa-var-info-circle);
}
&.-warning::before {
@include fontawesome(900, $fa-var-exclamation-circle);
}
&.-error::before {
@include fontawesome(900, $fa-var-minus-circle);
}
@include color-modifiers(success warning error info) using ($color) {
box-shadow: .25rem 0 0 $color inset;
color: $plain-text;
&::before {
color: $color;
}
}
&.-filled {
box-shadow: none;
@include color-modifiers(success warning error info) using ($color) {
background-color: $color;
color: blackwhite($color, $plain-text);
&::before {
color: inherit;
}
}
}
}