react-jam-ui/components/Toast/styles.styl

React JAM UI components

.react-toasts-container {
	position: fixed;
	z-index: 9999;
	overflow: hidden;
	max-height: calc(100vh - 10px);
	text-align: right;

	.react-toasts {
		font-family: 'Arial';
		display: inline-block;
		padding: 10px 15px;
		line-height: 1.4em;
		margin-bottom: 10px;
		border-radius: 5px;
		color: #FFFFFF;
		max-width: 350px;
		position: relative;

		&.success {
			background-color: rgba(46, 204, 113, 1);
		}
		&.info {
			background-color: #186be7;
		}
		&.warning {
			background-color: rgba(241, 196, 15, 1);
		}
		&.error {
			background-color: rgba(231, 76, 60, 1);
		}

		.icon-close {
			position: absolute;
			right: 10px;
			top: 13px;
			cursor: pointer;
		}

		&-close {
			padding-right: 35px;
		}
	}
	.react-toasts-animation {
		animation-name: fadeInDown;
		animation-duration: 500ms;
		animation-fill-mode: both;
	}
}