Merge pull request #60 from vaadin/icon-size

Use the `--valo-icon-size` property
vaadin · Dec 20, 2017 · 33f1343 · 33f1343
2 parents d31f084 + c97ed13
commit 33f1343
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 13 deletions.
diff --git a/bower.json b/bower.json
@@ -35,7 +35,7 @@
     "polymer": "^2.0.0",
     "vaadin-control-state-mixin": "vaadin/vaadin-control-state-mixin#^2.0.0",
     "vaadin-themable-mixin": "^1.1.0",
-    "vaadin-valo-theme": "^2.0.0",
+    "vaadin-valo-styles": "vaadin/vaadin-valo-styles#^2.0.0",
     "vaadin-element-mixin": "vaadin/vaadin-element-mixin#^1.0.1"
   }
 }
diff --git a/demo/index.html b/demo/index.html
@@ -20,7 +20,7 @@
   <link rel="import" href="button-demo.html">
 
   <link rel="import" href="../vaadin-button.html">
-  <link rel="import" href="../../vaadin-valo-theme/icons.html">
+  <link rel="import" href="../../vaadin-valo-styles/icons.html">
 
   <vaadin-component-demo config-src="demos.json"></vaadin-component-demo>
 </body>

diff --git a/test/visual/valo.html b/test/visual/valo.html
@@ -1,7 +1,7 @@
 <!doctype html>
 <script src="../../../webcomponentsjs/webcomponents-loader.js"></script>
 <link rel="import" href="../../vaadin-button.html">
-<link rel="import" href="../../../vaadin-valo-theme/icons.html">
+<link rel="import" href="../../../vaadin-valo-styles/icons.html">
 
 <custom-style>
   <style include="valo-typography valo-color">

diff --git a/theme/valo/vaadin-button.html b/theme/valo/vaadin-button.html
@@ -1,10 +1,10 @@
 <link rel="import" href="../../src/vaadin-button.html">
 
-<link rel="import" href="../../../vaadin-valo-theme/color.html">
-<link rel="import" href="../../../vaadin-valo-theme/sizing.html">
-<link rel="import" href="../../../vaadin-valo-theme/spacing.html">
-<link rel="import" href="../../../vaadin-valo-theme/style.html">
-<link rel="import" href="../../../vaadin-valo-theme/typography.html">
+<link rel="import" href="../../../vaadin-valo-styles/color.html">
+<link rel="import" href="../../../vaadin-valo-styles/sizing.html">
+<link rel="import" href="../../../vaadin-valo-styles/spacing.html">
+<link rel="import" href="../../../vaadin-valo-styles/style.html">
+<link rel="import" href="../../../vaadin-valo-styles/typography.html">
 
 <dom-module id="valo-button" theme-for="vaadin-button">
   <template>
@@ -239,15 +239,15 @@
     <style>
       :host ::slotted(iron-icon) {
         display: inline-block;
-        width: 1.5em;
-        height: 1.5em;
+        width: var(--valo-icon-size);
+        height: var(--valo-icon-size);
       }
 
       /* Vaadin icons are based on a 16x16 grid (unlike Valo and Material icons with 24x24), so they look too big by default */
       :host ::slotted(iron-icon[icon^="vaadin:"]) {
-        width: 1em;
-        height: 1em;
-        padding: 4px;
+        width: calc(var(--valo-icon-size) - 0.5em);
+        height: calc(var(--valo-icon-size) - 0.5em);
+        padding: 0.25em;
       }
 
       [part="prefix"] {