Messaging is typically used for messages from the server - warnings, errors on form validation, site outage info, etc. An optional SVG-based icon is often used within messaging. We modify the icon’s vertical position to align to the top of its adjacent .messaging__content, accounting for messaging’s line-height. This allows for the icon to appear aligned to the cap height of .messaging__content‘a text, not to the top of .messaging__content bounding box.
It’s recommended to stick with rem units for messaging’s $font-size and $icon-size mixin arguments.
@mixin messaging()
None.
.messaging>.messaging__icon>svg^.messaging__content>{lorem ipsum}
<div class="messaging">
<svg class="messaging__icon" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path d="M3 20l1.3 -3.9a9 8 0 1 1 3.4 2.9l-4.7 1" />
<line x1="12" y1="12" x2="12" y2="12.01" />
<line x1="8" y1="12" x2="8" y2="12.01" />
<line x1="16" y1="12" x2="16" y2="12.01" />
</svg>
<div class="messaging__content">
<p><strong>Default</strong> – Message with a <a href="https://www.imarc.com/">link</a>.</p>
</div>
</div>
<div class="messaging -success">
<svg class="messaging__icon" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<circle cx="12" cy="12" r="9" />
<path d="M9 12l2 2l4 -4" />
</svg>
<div class="messaging__content">
<p><strong>Success</strong> – Message with a <a href="https://www.imarc.com/">link</a>.</p>
</div>
</div>
<div class="messaging -error">
<svg class="messaging__icon" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path d="M8.7 3h6.6c.3 0 .5 .1 .7 .3l4.7 4.7c.2 .2 .3 .4 .3 .7v6.6c0 .3 -.1 .5 -.3 .7l-4.7 4.7c-.2 .2 -.4 .3 -.7 .3h-6.6c-.3 0 -.5 -.1 -.7 -.3l-4.7 -4.7c-.2 -.2 -.3 -.4 -.3 -.7v-6.6c0 -.3 .1 -.5 .3 -.7l4.7 -4.7c.2 -.2 .4 -.3 .7 -.3z" />
<line x1="12" y1="8" x2="12" y2="12" />
<line x1="12" y1="16" x2="12.01" y2="16" />
</svg>
<div class="messaging__content">
<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>
<div class="messaging -info">
<svg class="messaging__icon" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<circle cx="12" cy="12" r="9" />
<line x1="12" y1="8" x2="12.01" y2="8" />
<polyline points="11 12 12 12 12 16 13 16" />
</svg>
<div class="messaging__content">
<p><strong>Info</strong> – Message with a <a href="https://www.imarc.com/">link</a>.</p>
</div>
</div>
<div class="messaging -warning">
<svg class="messaging__icon" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path d="M12 9v2m0 4v.01" />
<path d="M5 19h14a2 2 0 0 0 1.84 -2.75l-7.1 -12.25a2 2 0 0 0 -3.5 0l-7.1 12.25a2 2 0 0 0 1.75 2.75" />
</svg>
<div class="messaging__content">
<p><strong>Warning</strong> – Message with a <a href="https://www.imarc.com/">link</a>.</p>
</div>
</div>
///
/// For messages to the user.
///
/// @color
/// Icon color.
/// @link-color
/// Optionally override the default link color.
/// @link-hover-color
/// Optionally override the link hover color.
///
@mixin messaging (
$color: $info,
$font-size: $body-font-size,
$icon-size: 1.5rem,
$line-height: $body-line-height,
$link-color: inherit,
$link-hover-color: inherit
) {
$b: &;
$leading: $font-size * $line-height;
background-color: $gray-100;
box-shadow: .25rem 0 0 inset, $med-shadow;
font-size: $font-size;
line-height: $line-height;
margin-bottom: 2rem;
padding: $padding;
display: flex;
&__icon {
height: $icon-size;
flex-shrink: 0;
margin-right: $h-space;
width: $icon-size;
@if $leading != $icon-size {
transform: translateY(divide($leading - $icon-size, 2));
}
}
&__content {
flex-grow: 1;
}
a {
color: $link-color;
text-decoration: underline;
transition: color $fade-easing $fast;
&:hover {
color: $link-hover-color;
}
}
@include color-modifiers(success warning error info) using ($color) {
box-shadow: .25rem 0 0 $color inset, $med-shadow;
color: $plain-text;
#{$b}__icon {
color: $color;
}
}
&.-filled {
box-shadow: $med-shadow;
@include color-modifiers(success warning error info) using ($color) {
background-color: $color;
color: blackwhite($color, $plain-text);
#{$b}__icon {
color: inherit;
}
}
}
}
.messaging {
@include messaging;
}