NxTIC/css/notif.scss

body > #notification-container{

	display: flex;
	position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;

	flex-direction: column;
	flex-wrap: nowrap;

	z-index: 200;
	pointer-events: none;


	.notification-element{
		display: block;
		position: relative;
			margin: .2em auto;
			padding: 0 1em;

		border-radius: 3px;
		border: 1px solid #ddd;
		border-bottom: 1px solid darken(#ddd, 10);
		box-shadow: inset 0 0 1em #eee;

		background-color: #fff;

		pointer-events: all;
		cursor: default;

		// ECARTEMENT DU BOTTOM POUR LE DERNIER
		&:last-child{
			margin-bottom: 1em;
		}


		// ANIMATION DE fadeIn + fadeOut
		transition: opacity .5s ease-in-out;
		opacity: 0;

		&.notification-visible{
			opacity: 1;
		}


		// ANIMATION DE @HOVER
		&:hover{
			box-shadow: inset 0 0 1em #eee, 0 0 1em #555;
		}



		// TITRE ET BOULE DE COULEUR
		strong:first-child{

			text-transform: uppercase;
			padding-left: 1.5em;

			&:before{
				content: '';
				display: inline-block;
				position: absolute;
				top: 1.2em;
				left: 1em;
				width: .9em;
				height: .9em;

				border-radius: 50% / 50%;
				box-shadow: inset -1px 1px 2px rgba(50, 50, 50, .5);
			}

		}

		// DIFFERENTS THEMES
		// WARNING
		&[data-warning]{
			border-color: #dd6a45;
			border-bottom-color: darken(#dd6a45, 10);
			strong:first-child{ &:before{ background-color: #dd6a45; } }
		}
		// INFO
		&[data-info]{
			border-color: #2195da;
			border-bottom-color: darken(#2195da, 10);
			strong:first-child{ &:before{ background-color: #2195da; } }
		}
		// SUCCESS
		&[data-success]{
			border-color: #5fca4a;
			border-bottom-color: darken(#5fca4a, 10);
			strong:first-child{ &:before{ background-color: #5fca4a; } }
			}
		// ERROR
		&[data-error]{
			border-color: #d94747;
			border-bottom-color: darken(#d94747, 10);
			strong:first-child{ &:before{ background-color: #d94747; } }
		}


	}

}