<div class="alert" data-status="success">
<div class="alert-inner">
<div class="alert-text">
<i class="alert-icon fa fa-check" aria-hidden="true"></i>
<div class="alert-title">Success</div>
<div class="alert-info">File has been uploaded</div>
</div>
<button class="btn btn-alert-dismiss js-alert-dismiss" type="button"></button>
</div>
</div>
<div class="alert" data-status="{{ status }}">
<div class="alert-inner">
<div class="alert-text">
{{#if icon }}
<i class="alert-icon fa fa-{{ icon }}" aria-hidden="true"></i>
{{/if}}
{{#if title }}
<div class="alert-title">{{ title }}</div>
{{/if}}
<div class="alert-info">{{{ info }}}</div>
</div>
<button class="btn btn-alert-dismiss js-alert-dismiss" type="button"></button>
</div>
</div>
{
"status": "success",
"icon": "check",
"title": "Success",
"info": "File has been uploaded"
}
.alert {
padding: 4rem;
margin-top: -2rem;
border-radius: 5px;
&[data-status="info"] {
background: rgba($color-irma-lavender, 0.33);
}
&[data-status="danger"] {
background: rgba($color-irma-danger, 1);
color: white;
}
&[data-status="success"] {
background: rgba($color-irma-success, 0.33);
}
&[data-status="caution"] {
background: rgba($color-irma-goldenrod, 0.33);
}
& + .alert {
margin-top: 2.5rem !important;
}
.alert-inner {
position: relative;
padding-right: 7.5rem;
}
.btn-alert-dismiss {
position: absolute;
right: -2rem;
top: 50%;
transform: translateY(-50%);
z-index: 1;
display: flex;
align-items: center;
justify-content: center;
width: 7.5rem;
height: 7.5rem;
transition: all $transition;
&::after {
content: '\f00d';
@include font-icon;
@include font-size-other(14px);
line-height: 0;
}
&::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(0);
z-index: -1;
display: block;
width: 5rem;
height: 5rem;
border-radius: 50%;
background: $color-irma-slate;
opacity: 0;
transition: all $transition;
}
&:hover, &:focus {
color: white;
&::before {
transform: translate(-50%, -50%) scale(1);
opacity: 1;
}
}
}
.alert-icon {
padding-right: 1rem;
@include font-size-other(14px);
}
.alert-text {
.alert-title {
display: inline;
@include font-primary-bold;
}
.alert-info {
display: inline;
}
}
}
/*
* _alert.js
*/
irma.alert = (function () {
'use strict';
var createAlert = function (options, $target) {
options = typeof(options) == "undefined" ? {} : options;
options.status = typeof(options.status) == "undefined" ? "danger" : options.status;
options.icon = typeof(options.icon) == "undefined" ? "danger" : options.icon;
options.title = typeof(options.title) == "undefined" ? "Error" : options.title;
options.info = typeof(options.info) == "undefined" ? "Something went wrong." : options.info;
$.get(irma.assetPath + '/templates/alert/alert.hbs?v=' + irma.templateVersion, function (template) {
var templateScript = Handlebars.compile(template);
var html = templateScript(options);
$target.prepend(html);
});
};
var init = function () {
$(document).on('click', '.js-alert-dismiss', function () {
var $alert = $(this).closest('.alert');
$alert.animate({
opacity: 0
}, 300, function () {
$alert.closest('.alert').remove();
});
});
};
return {
init: init,
createAlert: createAlert
};
}());
i class=”alert-icon fa fa-[xxxx]” determines icon; see https://fontawesome.com/v4.7.0/icons/ for full reference
recommended: use fa-exclamation for warning, fa-check for success, and fa-exclamation-circle for error
data-status options are “success”, “danger”, “caution”, and “info”