Merge pull request #29 from mickelsonmichael/positioning-center

Add options for center positioning

README.md

@@ -27,7 +27,7 @@ To customize a Snackbar, pass the function a JS object with any of the following
 | status      | `string`             |                 | Possible statuses include "success", "green", "warning", "alert", "orange", "danger", "error", "red." All other values will default to the blue "info" status|
 | actions     | `array`              | `[]`            | See [Actions](#actions)|
 | fixed       | `boolean`            | `false`         | `true` indicates a `positioning:fixed;` be added to the container|
-| position    | `string`             | `"br"`          | Possible values are "br", "tr", "tl", or "bl"|
+| position    | `string`             | `"br"`          | Possible values are `"br"`, `"tr"`, `"tc"`, `"tm"`, `"bc"`, `"bm"`, `"tl"`, or `"bl"` |
 | container   | `DOMNode` or `string`| `document.body` | If a string is provided, the string is passed to `querySelector` to find the container|
 | width       | `string`             |                 | Any valid CSS value for `width` |
 | speed       | `string` or `number` |                 | Any valid CSS value for `transition-duration` or a duration in milliseconds |

dist/js-snackbar.css

@@ -17,6 +17,14 @@
     left: 0;
 }
 
+.js-snackbar-container--top-center {
+    top: 0;
+    bottom: unset;
+    left: 50%;
+    right: unset;
+    transform: translateX(-50%);
+}
+
 .js-snackbar-container--top-right {
     bottom: unset;
     right: 0;
@@ -31,6 +39,14 @@
     top: unset;
 }
 
+.js-snackbar-container--bottom-center {
+    bottom: 0;
+    right: unset;
+    left: 50%;
+    top: unset;
+    transform: translateX(-50%);
+}
+
 .js-snackbar-container--fixed {
     position: fixed;
 }

dist/js-snackbar.js

@@ -249,6 +249,14 @@ function SnackBar(userOptions) {
       case "tr":
         return "js-snackbar-container--top-right";
 
+      case "tc":
+      case "tm":
+        return "js-snackbar-container--top-center";
+
+      case "bc":
+      case "bm":
+        return "js-snackbar-container--bottom-center";
+
       default:
         return "js-snackbar-container--bottom-right";
     }