Merged core back into main project

client/scss/components/alert.scss

@@ -0,0 +1,114 @@
+/*#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');
+				}
+			}
+
+		}
+
+	}
+
+}