5 years ago · cd54b352a7
--- a/README.md
+++ b/README.md
@@ -11,7 +11,11 @@
 
				 **HTML:**
			
 
				 
			
 
				 ```html
			
 
				-<div id="toasts-container" class="position-right position-bottom"></div>
			
 
				+<div id="toasts-container" class="position-right position-bottom">
			
 
				+	<div id="toasts-content">
			
 
				+		<!-- toasts will be added or removed from here -->
			
 
				+	</div>
			
 
				+</div>
			
 
				 ```
			
 
				 
			
 
				 **JS:**
			
--- a/dist/toasters.js
+++ b/dist/toasters.js
--- a/example/index.html
+++ b/example/index.html
@@ -5,7 +5,9 @@
 
				         <title>Example</title>

			
 
				 </head>

			
 
				 <body>

			
 
				-        <div id="toasts-container" class="position-right position-bottom"></div>

			
 
				+        <div id="toasts-container" class="position-right position-top">

			
 
				+                <div id="toasts-content"></div>

			
 
				+        </div>

			
 
				         <script src="../dist/example.js"></script>

			
 
				 </body>

			
 
				 </html>

			
--- a/src/index.css
+++ b/src/index.css
@@ -9,34 +9,36 @@ body {
 
				 
			
 
				 #toasts-container {
			
 
				 	position: fixed;
			
 
				-	height: auto;
			
 
				+	top: 20px;
			
 
				+	right: 20px;
			
 
				+}
			
 
				+
			
 
				+#toasts-content {
			
 
				 	display: flex;
			
 
				 	flex-direction: column;
			
 
				-	top: 20px;
			
 
				-	left: 20px;
			
 
				 }
			
 
				 
			
 
				 #toasts-container.position-left {
			
 
				-	right: 0;
			
 
				+	right: unset;
			
 
				 	left: 20px;
			
 
				 	align-items: flex-start;
			
 
				 }
			
 
				 
			
 
				 #toasts-container.position-right {
			
 
				-	left: 0;
			
 
				+	left: unset;
			
 
				 	right: 20px;
			
 
				 	align-items: flex-end;
			
 
				 }
			
 
				 
			
 
				 #toasts-container.position-top {
			
 
				-	bottom: 0;
			
 
				+	bottom: unset;
			
 
				 	top: 20px;
			
 
				 	justify-content: flex-start;
			
 
				 }
			
 
				 
			
 
				 #toasts-container.position-bottom {
			
 
				-	top: 0;
			
 
				-	margin-top: -20px;
			
 
				+	top: unset;
			
 
				+	bottom: 20px;
			
 
				 	justify-content: flex-end;
			
 
				 }
			
 
				 
			
@@ -56,3 +58,7 @@ body {
 
				 	width: var(--max-width);
			
 
				 	box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
			
 
				 }
			
 
				+
			
 
				+.toast:not(:first-of-type) {
			
 
				+	margin-top: 5px;
			
 
				+}
			
--- a/src/toasters.js
+++ b/src/toasters.js
@@ -1,7 +1,6 @@
 
				 document.body.style.backgroundColor = "#eee";

			
 
				 

			
 
				-const container = document.getElementById("toasts-container");

			
 
				-console.log(container);

			
 
				+const container = document.getElementById("toasts-content");

			
 
				 

			
 
				 let incrementer = 0;