Initial commit. Added pwa starter kit to project for the application.

1 files changed, 54 insertions, 0 deletions

diff --git a/src/components/snack-bar.js b/src/components/snack-bar.js
new file mode 100644
index 0000000..521c1e9
--- /dev/null
+++ b/src/components/snack-bar.js
@@ -0,0 +1,54 @@
+/**
+@license
+Copyright (c) 2018 The Polymer Project Authors. All rights reserved.
+This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
+The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
+The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
+Code distributed by Google as part of the polymer project is also
+subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
+*/
+
+import { LitElement, html } from '@polymer/lit-element';
+
+class SnackBar extends LitElement {
+  _render(props) {
+    return html`
+      <style>
+      :host {
+        display: block;
+        position: fixed;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        padding: 12px;
+        background-color: var(--app-secondary-color);
+        color: white;
+        box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
+        text-align: center;
+        will-change: transform;
+        transform: translate3d(0, 100%, 0);
+        transition-property: visibility, transform;
+        transition-duration: 0.2s;
+        visibility: hidden;
+      }
+      :host([active]) {
+        visibility: visible;
+        transform: translate3d(0, 0, 0);
+      }
+      @media (min-width: 460px) {
+        :host {
+          width: 320px;
+          margin: auto;
+        }
+      }
+    </style>
+    <slot></slot>
+    `;
+  }
+
+  static get properties() { return {
+    active: Boolean,
+  }}
+}
+
+window.customElements.define('snack-bar', SnackBar);