wikijs/client/scss/components/alert.scss

/*#alerts {
	position: fixed;
	top: 60px;
	right: 10px;
	width: 350px;
	z-index: 10;
	text-shadow: 1px 1px 0 rgba(0,0,0,0.1);

	.notification {
		animation: 0.5s ease slideInRight;
		margin-top: 5px;

		&.exit {
			animation: 0.5s ease fadeOutRight;
		}

	}

	h3 {
		font-size: 16px;
		font-size: 500;
	}

}*/

#alerts {
	position: fixed;
	top: 55px;
	right: 10px;
	width: 350px;
	z-index: 100;

	> ul {
		margin: 0;
		padding: 0;
		list-style-type: none;

		> li {
			background-color: material-color('blue-grey', '800');
			box-shadow: 5px 5px 0 transparentize(material-color('blue-grey', '900'), 0.7);
			border: 1px solid material-color('blue-grey', '500');
			border-left-width: 5px;
			margin-top: 5px;
			padding: 8px 12px;
			animation-name: slideFromRight;
			animation-duration: 1s;
			cursor: pointer;
			position: relative;

			&:hover {
				background-color: material-color('blue-grey', '900');
			}

			&.exit {
				animation-name: zoomOut;
				animation-duration: 1s;
				transform-origin: top center;
			}

			> button {
        background-color: transparent;
        border: none;
        color: #FFF;
        width: 15px;
        height: 15px;
        padding: 0;
        position: absolute;
        top: 10px;
        right: 10px;

        &:before {
          content: 'X';
        }

      }

			> strong {
				display: block;
				font-size: 13px;
				font-weight: 500;
				color: #FFF;

				> i {
					margin-right: 5px;
				}

			}

			> span {
				font-size: 12px;
				font-weight: 500;
				color: material-color('blue-grey', '100');
			}

			&.error {
				border-color: material-color('red', '400');
				background-color: material-color('red', '600');
				> span {
					color: material-color('red', '50');
				}
			}
			&.success {
				border-color: material-color('green', '400');
				background-color: material-color('green', '700');
				> span {
					color: material-color('green', '50');
				}
			}

		}

	}

}