add css-sizable mode to core-icon; activate using size=""

googlearchive · Jun 13, 2014 · e24f587 · e24f587
1 parent ae8bb68
commit e24f587
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 1 deletion.
diff --git a/core-icon.css b/core-icon.css
@@ -10,3 +10,15 @@ html /deep/ core-icon {
   vertical-align: middle;
   background-repeat: no-repeat;
 }
+
+html /deep/ core-icon[size=""] {
+  position: relative;
+}
+
+html /deep/ core-icon[size=""] > svg {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+}
diff --git a/core-icon.html b/core-icon.html
@@ -102,7 +102,7 @@
     },
 
     updateIcon: function() {
-      this.style.width = this.style.height = this.size + 'px';
+      this.style.width = this.style.height = this.size ? this.size + 'px' : '';
       if (this.icon) {
         var parts = String(this.icon).split(':');
         var icon = parts.pop();

diff --git a/demo.html b/demo.html
@@ -18,6 +18,11 @@
     segment {
       min-width: 200px;
     }
+
+    core-icon.sized {
+      height: 128px;
+      width: 128px;
+    }
   </style>
 </head>
 <body unresolved>
@@ -29,6 +34,10 @@
     </template>
   </div>
   <core-iconset id="meta"></core-iconset>
+  <div hidden?="{{!$.meta.metaData.icons.iconNames}}">
+    Sized icon:
+    <core-icon class="sized" icon="accessibility" size=""></core-icon>
+  </div>
 </template>
 
 </body>