<div class="notification-bar notification-bar__info">
<div class="notification-bar__header">
<div class="notification-bar__icon">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" class="icon">
<rect x="7" width="2" height="2" />
<polygon points="5,4 5,6 7,6 7,16 9,16 9,6 9,4 7,4" />
</svg>
</div>
<div class="notification-bar__title">Lorem ipsum dolor sit amet</div>
</div>
<div class="notification-bar__body">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. At corporis culpa deleniti distinctio eligendi exercitationem iste repudiandae. Ab ad aperiam, dolor, eaque esse necessitatibus nobis nulla obcaecati perspiciatis quis vero!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. At corporis culpa deleniti distinctio eligendi exercitationem iste repudiandae. Ab ad aperiam, dolor, eaque esse necessitatibus nobis nulla obcaecati perspiciatis quis vero!</p>
</div>
</div>
<div class="notification-bar{{#if themeClass}} {{themeClass}}{{/if}}">
<div class="notification-bar__header">
<div class="notification-bar__icon">
{{#if info }}
{{> @icon--info }}
{{/if}}
{{#if exclamation }}
{{> @icon--exclamation }}
{{/if}}
{{#if check}}
{{> @icon--check }}
{{/if}}
{{#if cross}}
{{> @icon--cross }}
{{/if}}
</div>
<div class="notification-bar__title">Lorem ipsum dolor sit amet</div>
</div>
<div class="notification-bar__body">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. At corporis culpa deleniti distinctio eligendi exercitationem iste repudiandae. Ab ad aperiam, dolor, eaque esse necessitatibus nobis nulla obcaecati perspiciatis quis vero!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. At corporis culpa deleniti distinctio eligendi exercitationem iste repudiandae. Ab ad aperiam, dolor, eaque esse necessitatibus nobis nulla obcaecati perspiciatis quis vero!</p>
</div>
</div>
{
"themeClass": "notification-bar__info",
"info": true
}
$notification-bar-icon-size: 20px;
$notification-bar-icon-padding: 4px;
$notification-bar-part-spacing: $space-s;
// Theme colors
$notification-bar-default-color: $grey;
$notification-bar-info-color: $blue;
@mixin notification-bar-theming($parent, $color: $notification-bar-default-color) {
background-color: rgba($color, .05);
border-left-color: $color;
#{$parent}__icon {
background-color: $color;
}
}
.notification-bar {
$parent: &;
display: flex;
flex-wrap: wrap;
border-left: 5px solid transparent;
padding: $notification-bar-part-spacing;
margin-bottom: $space-s;
&__header,
&__body {
flex: 0 1 100%;
}
&__header {
display: flex;
align-items: center;
}
&__body {
margin-left: calc(#{$notification-bar-icon-size} + #{$notification-bar-part-spacing});
p {
// Reset
margin-left: 0;
margin-right: 0;
margin-bottom: 0;
&:first-child {
margin-top: 0;
}
}
}
&__icon {
width: $notification-bar-icon-size;
height: $notification-bar-icon-size;
display: flex;
flex: 0 1 auto;
justify-content: center;
align-items: center;
border-radius: 50%;
color: $white;
padding: $notification-bar-icon-padding;
.icon {
padding: 0;
}
}
&__title {
display: flex;
flex: 1 1 auto;
padding-left: $notification-bar-part-spacing;
font-weight: $fw-bold;
}
/**
* Themes
*/
// Default
@include notification-bar-theming($parent);
// Info
&__info {
@include notification-bar-theming($parent, $notification-bar-info-color);
}
// Warning
&__warning {
@include notification-bar-theming($parent, $yellow);
#{$parent}__icon {
color: $grey-dark;
}
}
// Error
&__danger {
@include notification-bar-theming($parent, $red);
}
// Success
&__success {
@include notification-bar-theming($parent, $green);
}
}