Add shared styles

Add the new Polymer 1.1.0 share styles approach. Remove commented css
Polymer · Aug 24, 2015 · 1d99963 · 1d99963
1 parent d439e7d
commit 1d99963
Show file tree

Hide file tree

Showing 5 changed files with 23 additions and 18 deletions.
diff --git a/app/elements/elements.html b/app/elements/elements.html
@@ -36,5 +36,6 @@
 
 <!-- Add your elements here -->
 <link rel="import" href="../styles/app-theme.html">
+<link rel="import" href="../styles/shared-styles.html">
 <link rel="import" href="my-greeting/my-greeting.html">
 <link rel="import" href="my-list/my-list.html">
diff --git a/app/elements/my-greeting/my-greeting.html b/app/elements/my-greeting/my-greeting.html
@@ -8,22 +8,14 @@
 subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
 -->
 
+<link rel="import" href="../../styles/shared-styles.html">
 <dom-module id="my-greeting">
   <template>
+    <style include="shared-styles"></style>
     <style>
       :host {
         display: block;
       }
-
-      .page-title {
-        @apply(--paper-font-display2);
-      }
-
-      @media (max-width: 600px) {
-        .page-title {
-          font-size: 24px!important;
-        }
-      }
     </style>
     <h2 class="page-title"><span>{{greeting}}</span></h2>
     <span class="paper-font-body2">Update text to change the greeting.</span>

diff --git a/app/index.html b/app/index.html
@@ -53,6 +53,10 @@
   <!-- will be replaced with elements/elements.vulcanized.html -->
   <link rel="import" href="elements/elements.html">
   <!-- endreplace-->
+
+  <!-- For shared styles, shared-styles.html import in elements.html -->
+  <style is="custom-style" include="shared-styles"></style>
+
 </head>
 
 <body unresolved class="fullbleed layout vertical">

diff --git a/app/styles/app-theme.html b/app/styles/app-theme.html
@@ -127,10 +127,6 @@
     height: 900px;
   }
 
-  .page-title {
-    @apply(--paper-font-display2);
-  }
-
   /* Breakpoints */
 
   /* Small */
@@ -160,10 +156,6 @@
       background: white;
     }
 
-    .page-title {
-      font-size: 24px;
-    }
-
   }
 
   /* Tablet+ */

diff --git a/app/styles/shared-styles.html b/app/styles/shared-styles.html
@@ -0,0 +1,16 @@
+<!-- shared-styles.html -->
+<dom-module id="shared-styles">
+  <template>
+    <style>
+      .page-title {
+        @apply(--paper-font-display2);
+      }
+
+      @media (max-width: 600px) {
+        .page-title {
+          font-size: 24px!important;
+        }
+      }
+    </style>
+  </template>
+</dom-module>