Merge pull request #69 from vaadin/fix/ie11-workaround-theme

Remove IE11 workaround, update theme to use height
vaadin · Feb 28, 2018 · fd690ed · fd690ed
2 parents 95d1ab8 + 245dd2a
commit fd690ed
Show file tree

Hide file tree

Showing 3 changed files with 4 additions and 21 deletions.
diff --git a/demo/button-basic-demos.html b/demo/button-basic-demos.html
@@ -37,12 +37,6 @@ <h3>Using an Icon</h3>
           <iron-icon icon="lumo:arrow-right" slot="suffix"></iron-icon>
           Next
         </vaadin-button>
-
-        <vaadin-button>
-          <iron-icon icon="lumo:user"></iron-icon>
-          <br>
-          Profile
-        </vaadin-button>
       </template>
     </vaadin-demo-snippet>
 

diff --git a/src/vaadin-button.html b/src/vaadin-button.html
@@ -15,8 +15,7 @@
     <style>
       :host {
         display: inline-block;
-        align-items: center;
-        position: relative !important;
+        position: relative;
         outline: none;
         white-space: nowrap;
       }
@@ -57,16 +56,6 @@
         text-overflow: ellipsis;
       }
 
-      /* When there is no text label, icons are misaligned on IE11 */
-      ::-ms-backdrop,
-      [part="label"]::before {
-        content: "\2003";
-        display: inline-block;
-        width: 0;
-        /* Compensate the space the character reserves */
-        margin-right: -0.275em;
-      }
-
       #button {
         position: absolute;
         top: 0;

diff --git a/theme/lumo/vaadin-button.html b/theme/lumo/vaadin-button.html
@@ -25,7 +25,7 @@
       :host {
         --lumo-button-size: var(--lumo-size-m);
         min-width: calc(var(--lumo-button-size) * 2);
-        min-height: var(--lumo-button-size);
+        height: var(--lumo-button-size);
         padding: 0 calc(var(--lumo-button-size) / 3 + var(--lumo-border-radius) / 2);
         margin: var(--lumo-space-xs) 0;
         box-sizing: border-box;
@@ -173,7 +173,7 @@
       :host([theme~="tertiary-inline"]) {
         margin: 0;
         min-width: 0;
-        min-height: 0;
+        height: auto;
         padding: 0;
         line-height: inherit;
         font-size: inherit;
@@ -254,7 +254,7 @@
 <dom-module id="lumo-button-icons">
   <template>
     <style>
-      :host ::slotted(iron-icon) {
+      [part] ::slotted(iron-icon) {
         display: inline-block;
         width: var(--lumo-icon-size-m);
         height: var(--lumo-icon-size-m);