refactor: alerts + admin profile + user create dialog as Vue components

client/scss/components/alert.scss

@@ -1,114 +1,48 @@
-/*#alerts {
-	position: fixed;
-	top: 60px;
-	right: 10px;
-	width: 350px;
-	z-index: 10;
-	text-shadow: 1px 1px 0 rgba(0,0,0,0.1);
+.alert {
+  background-color: #FFF;
+  border-right: 3px solid mc('grey', '500');
+  position: fixed;
+  top: 60px;
+  margin-left: 10px;
+  right: 10px;
+  max-width: 500px;
+  z-index: 1000;
+  display: flex;
+  box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
+  animation-duration: .6s;
 
-	.notification {
-		animation: 0.5s ease slideInRight;
-		margin-top: 5px;
+  &-icon {
+    width: 50px;
+    height: 50px;
+    background-color: mc('grey', '500');
+    color: #FFF;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
 
-		&.exit {
-			animation: 0.5s ease fadeOutRight;
-		}
+  &-msg {
+    padding: 0 15px;
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    border-top: 1px solid mc('grey', '200');
+    font-size: 14px;
+    font-weight: 500;
+  }
 
-	}
-
-	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';
-        }
+  @each $color, $colorvalue in $material-colors {
+		&.is-#{$color} {
+			border-right-color: mc($color, '500');
 
+      .alert-icon {
+        background-color: mc($color, '500');
+      }
+      .alert-msg {
+        color: mc($color, '900');
       }
 
-			> 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');
-				}
-			}
-
 		}
-
 	}
 
 }