gradle module and build

webapp/app/styles/shared-styles.html

@@ -0,0 +1,76 @@
+<!-- shared styles for all elements and index.html -->
+<dom-module id="shared-styles">
+  <template>
+    <style>
+      .page-title {
+        @apply(--paper-font-display2);
+      }
+
+      @media (max-width: 600px) {
+        .page-title {
+          font-size: 24px!important;
+        }
+      }
+
+      paper-material {
+        border-radius: 2px;
+        height: 100%;
+        padding: 16px 0 16px 0;
+        width: calc(98.66% - 16px);
+        margin: 16px auto;
+        background: white;
+      }
+
+      /* Breakpoints */
+
+      /* Small */
+      @media (max-width: 600px) {
+
+      paper-material {
+      --menu-container-display: none;
+      width: calc(97.33% - 32px);
+      padding-left: 16px;
+      padding-right: 16px;
+      }
+
+      paper-toolbar.tall .app-name {
+      font-size: 24px;
+      font-weight: 400;
+      }
+
+      #drawer .paper-toolbar {
+      margin-left: 16px;
+      }
+
+      #overlay {
+      min-width: 360px;
+      }
+
+      .bg {
+      background: white;
+      }
+
+      }
+
+      /* Tablet+ */
+      @media (min-width: 601px) {
+
+      paper-material {
+      width: calc(98% - 46px);
+      margin-bottom: 32px;
+      padding-left: 30px;
+      padding-right: 30px;
+      }
+
+      #drawer.paper-drawer-panel > [drawer] {
+      border-right: 1px solid rgba(0, 0, 0, 0.14);
+      }
+
+      iron-pages {
+      padding: 48px 62px;
+      }
+
+      }
+    </style>
+  </template>
+</dom-module>