Fix typography responsive and apply reset

FabricElements · Oct 6, 2017 · 07599a9 · 07599a9
1 parent c475080
commit 07599a9
Showing 1 changed file with 32 additions and 0 deletions.
diff --git a/classes/typography.html b/classes/typography.html
@@ -16,6 +16,24 @@
 <dom-module id="skin-typography">
   <template>
     <style is="custom-style">
+      /*
+      * Reset browser fonts
+      */
+      h1,
+      h2,
+      h3,
+      h4,
+      h5,
+      h6,
+      p,
+      span,
+      li {
+        @apply --paper-font-common-base;
+        @apply --paper-font-body1;
+        margin: 0;
+        padding: 0;
+      }
+
       /*
       "Line wrapping only applies to Body, Subhead, Headline, and the smaller Display
       styles. All other styles should exist as single lines."
@@ -170,58 +188,72 @@
 
       /*noinspection ALL*/
       .paper-font-display4 {
+        @apply --paper-font-display4;
       }
 
       /*noinspection ALL*/
       .paper-font-display3 {
+        @apply --paper-font-display3;
       }
 
       /*noinspection ALL*/
       .paper-font-display2 {
+        @apply --paper-font-display2;
       }
 
       /*noinspection ALL*/
       .paper-font-display1 {
+        @apply --paper-font-display1;
       }
 
       /*noinspection ALL*/
       .paper-font-headline {
+        @apply --paper-font-headline;
       }
 
       /*noinspection ALL*/
       .paper-font-title {
+        @apply --paper-font-title;
       }
 
       /*noinspection ALL*/
       .paper-font-subhead {
+        @apply --paper-font-subhead;
       }
 
       /*noinspection ALL*/
       .paper-font-body2 {
+        @apply --paper-font-body2;
       }
 
       /*noinspection ALL*/
       .paper-font-body1 {
+        @apply --paper-font-body2;
       }
 
       /*noinspection ALL*/
       .paper-font-caption {
+        @apply --paper-font-caption;
       }
 
       /*noinspection ALL*/
       .paper-font-menu {
+        @apply --paper-font-menu;
       }
 
       /*noinspection ALL*/
       .paper-font-button {
+        @apply --paper-font-button;
       }
 
       /*noinspection ALL*/
       .paper-font-code2 {
+        @apply --paper-font-code2;
       }
 
       /*noinspection ALL*/
       .paper-font-code1 {
+        @apply --paper-font-code1;
       }
 
       /* ===========================