toaster components + deprecated alert.location

less/modules/alerts.less

@@ -1,35 +1,15 @@
 .alert-window {
-	position:fixed;
-	width:300px;
-	z-index:10002;
-	.toaster-alert {
-		.pointer;
-	}
+	position: fixed;
+	width: 300px;
+	z-index: 10002;
+
+	right: 20px;
+	bottom: 0px;
 
 	.alert {
 		img {
-			float:left;
-			padding-right:10px;
+			float: left;
+			padding-right: 10px;
 		}	
 	}
 }
-
-.alert-left-top {
-	left:20px;
-	top:70px;
-}
-
-.alert-left-bottom {
-	left:20px;
-	bottom:20px;
-}
-
-.alert-right-top {
-	right:20px;
-	top:70px;
-}
-
-.alert-right-bottom {
-	right:20px;
-	bottom:20px;
-}

templates/alert.tpl

@@ -1,4 +1,4 @@
-<div id="{alert_id}" class="alert alert-dismissable alert-{type} clearfix">
+<div id="{alert_id}" class="alert alert-dismissable alert-{type} clearfix" component="toaster/toast">
 	<button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
 
 	<!-- IF image -->

templates/footer.tpl

@@ -13,10 +13,7 @@
 			<button type="button" class="btn btn-default next"><i class="fa fa-fw fa-angle-down"></i></button>
 		</div>
 	</div>
-	<div class="alert-window alert-left-top"></div>
-	<div class="alert-window alert-left-bottom"></div>
-	<div class="alert-window alert-right-top"></div>
-	<div class="alert-window alert-right-bottom"></div>
+	<div component="toaster/tray" class="alert-window"></div>
 
 	<script>
 		require(['forum/footer']);