Allow core-item to be sized via CSS font-size

googlearchive · Jul 31, 2014 · daf3b6b · daf3b6b
1 parent 4cef344
commit daf3b6b
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 0 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
@@ -20,6 +20,14 @@
     core-item {
       width: 300px;
     }
+
+    core-item.big {
+      font-size: 24px;
+    }
+
+    core-item.small {
+      font-size: 12px;
+    }
 
     core-item.contact-item {
       height: 50px;
@@ -54,6 +62,12 @@ <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>