Merge pull request #5 from cletusw/sizeViaFontSize

Allow sizing via CSS font-size
googlearchive · Jul 31, 2014 · e833fde · e833fde
2 parents fd5f594 + daf3b6b
commit e833fde
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 3 deletions.
diff --git a/core-item.css b/core-item.css
@@ -14,6 +14,10 @@ html /deep/ core-item {
   white-space: nowrap;
 }
 
+html /deep/ core-item.font-scalable {
+  min-height: 2.5em;
+}
+
 html /deep/ core-item.core-selected {
   font-weight: bold;
 }
@@ -22,6 +26,12 @@ html /deep/ core-item::shadow core-icon {
   margin: 0 16px 0 4px;
 }
 
+html /deep/ core-item.font-scalable::shadow core-icon {
+  margin: 0 1em 0 0.25em;
+  height: 1.5em;
+  width: 1.5em;
+}
+
 html /deep/ core-item::shadow ::content > a {
   position: absolute;
   top: 0;

diff --git a/demo.html b/demo.html
@@ -13,18 +13,35 @@
 
     body {
       font-family: sans-serif;
+      font-size: 16px;
       margin: 20px;
     }
 
     core-item {
       width: 300px;
     }
+
+    core-item.big {
+      font-size: 24px;
+    }
+
+    core-item.small {
+      font-size: 12px;
+    }
 
     core-item.contact-item {
       height: 50px;
       background-color: #efefef;
       border: 1px solid #ddd;
     }
+
+    core-item.contact-item .name {
+      font-size: 1.125em;
+    }
+
+    core-item.contact-item .address {
+      font-size: 0.75em;
+    }
 
   </style>
 
@@ -45,13 +62,19 @@ <h2>links (via &lt;a&gt;):</h2>
 
     <core-item icon="settings" label="Settings"><a href="#settings" target="_self"></a></core-item>
     <core-item icon="account-box" label="Account"><a href="#account" target="_self"></a></core-item>
+
+    <h2>items sized with CSS:</h2>
+    <core-item icon="settings" label="Settings" class="font-scalable big"></core-item>
+    <core-item icon="account-box" label="Account" class="font-scalable big"></core-item>
+    <core-item icon="settings" label="Settings" class="font-scalable small"></core-item>
+    <core-item icon="account-box" label="Account" class="font-scalable small"></core-item>
 
     <h2>custom item:</h2>
 
-    <core-item icon="account-circle" class="label-outline">
+    <core-item icon="account-circle" class="contact-item">
       <div flex>
-        <div style="font-size: 18px;">John Doe</div>
-        <div style="font-size: 12px;">123 A Street, San Francisco, CA</div>
+        <div class="name">John Doe</div>
+        <div class="address">123 A Street, San Francisco, CA</div>
       </div>
       <core-icon icon="more-vert"></core-icon>
     </core-item>