IRMA

Alert 

<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"
}
  • Content: 
    .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;
		}
	}
}
  • URL: /components/raw/alert/_alert.scss
  • Filesystem Path: components/01-components/alert/_alert.scss
  • Size: 1.5 KB
  • Content: 
    /* 
 *	_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
	};

}());
  • URL: /components/raw/alert/alert.js
  • Filesystem Path: components/01-components/alert/alert.js
  • Size: 1.1 KB

  • 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”