From cc496570d0dbd12c1931007bfc295831cc68ac11 Mon Sep 17 00:00:00 2001
From: Artur Signell <artur@vaadin.com>
Date: Wed, 17 Aug 2016 23:37:24 +0300
Subject: [PATCH] Remove IE8-IE10 references from themes

Change-Id: I36a72137095ea86d1fbb5a737714549b99b8a396
---
 .../VAADIN/themes/base/common/common.scss     |  9 ++-
 .../themes/base/datefield/datefield.scss      |  6 +-
 .../themes/base/escalator/escalator.scss      | 22 -------
 .../themes/VAADIN/themes/base/grid/grid.scss  | 66 ++++---------------
 .../VAADIN/themes/base/menubar/menubar.scss   | 14 +---
 .../VAADIN/themes/base/shadow/shadow.scss     |  6 +-
 .../VAADIN/themes/base/window/window.scss     |  9 +--
 .../chameleon/components/button/button.scss   | 15 ++---
 .../themes/reindeer/button/button-ie.scss     |  8 ---
 .../themes/reindeer/button/nativebutton.scss  |  6 --
 .../VAADIN/themes/reindeer/grid/grid.scss     |  6 --
 .../VAADIN/themes/reindeer/label/label.scss   |  5 +-
 .../reindeer/notification/notification.scss   |  6 --
 .../VAADIN/themes/reindeer/panel/panel.scss   |  8 +--
 .../tabsheet/tabsheet-minimal-style.scss      | 15 +----
 .../tabsheet/tabsheet-small-style.scss        |  8 +--
 .../VAADIN/themes/runo/label/label.scss       |  5 +-
 .../VAADIN/themes/runo/panel/panel.scss       | 15 +----
 .../themes/valo/components/_button.scss       | 27 ++++----
 .../themes/valo/components/_colorpicker.scss  | 19 +-----
 .../themes/valo/components/_combobox.scss     |  7 +-
 .../themes/valo/components/_datefield.scss    | 29 ++++----
 .../VAADIN/themes/valo/components/_grid.scss  | 24 ++-----
 .../VAADIN/themes/valo/components/_panel.scss | 30 ++++-----
 .../themes/valo/components/_slider.scss       | 43 ++++--------
 .../VAADIN/themes/valo/components/_table.scss | 35 +++-------
 .../themes/valo/components/_tabsheet.scss     | 51 ++++++--------
 .../themes/valo/components/_textarea.scss     |  6 --
 .../themes/valo/components/_textfield.scss    | 29 ++++----
 .../VAADIN/themes/valo/components/_tree.scss  | 49 +-------------
 .../themes/valo/components/_window.scss       | 12 +---
 .../VAADIN/themes/valo/shared/_global.scss    | 28 +-------
 .../valo/shared/_loading-indicator.scss       | 15 -----
 .../VAADIN/themes/valo/shared/_overlay.scss   | 23 -------
 .../VAADIN/themes/valo/shared/_tooltip.scss   |  1 -
 35 files changed, 147 insertions(+), 510 deletions(-)
 delete mode 100644 themes/src/main/themes/VAADIN/themes/reindeer/button/button-ie.scss

diff --git a/themes/src/main/themes/VAADIN/themes/base/common/common.scss b/themes/src/main/themes/VAADIN/themes/base/common/common.scss
index ea8b5e5aa0..ae811bac79 100644
--- a/themes/src/main/themes/VAADIN/themes/base/common/common.scss
+++ b/themes/src/main/themes/VAADIN/themes/base/common/common.scss
@@ -46,7 +46,7 @@ body &.v-app .v-app-loading {
 	border-top: 1px solid transparent;
 }
 /**
- * Try to handle printing somehow. Reasonable printing support 
+ * Try to handle printing somehow. Reasonable printing support
  * needs application specific planning and CSS tuning.
  */
  /* Disabled for now, see #10336
@@ -186,7 +186,7 @@ body &.v-app .v-app-loading {
 .v-label h5,
 .v-label h6 {
 	line-height: normal;
-} 
+}
 /* Loading indicator states
  * Note: client side expects that loading indicator has a height. It depends on
  * this css property to ensure browsers have applied all required styles.
@@ -224,7 +224,7 @@ body &.v-app .v-app-loading {
 	padding: 2px;
 }
 
-/* Removes clear button from input fields introduced by IE10 */
+/* Removes clear button from input fields */
 input::-ms-clear {
     display: none;
 }
@@ -252,7 +252,7 @@ input::-ms-clear {
 	font-size: $font-size;
 }
 .v-ios.v-webkit & .v-scrollable {
-	-webkit-overflow-scrolling: touch; 
+	-webkit-overflow-scrolling: touch;
 }
 /* Disable native scrolling on iOS 5 due to #8792 */
 .v-ios5.v-webkit & .v-scrollable {
@@ -290,4 +290,3 @@ input::-ms-clear {
 .v-radiobutton {
 	-webkit-user-select: none;
 }
-
diff --git a/themes/src/main/themes/VAADIN/themes/base/datefield/datefield.scss b/themes/src/main/themes/VAADIN/themes/base/datefield/datefield.scss
index 57a691211d..480f2e56d1 100644
--- a/themes/src/main/themes/VAADIN/themes/base/datefield/datefield.scss
+++ b/themes/src/main/themes/VAADIN/themes/base/datefield/datefield.scss
@@ -34,7 +34,7 @@
 	margin: 0;
 }
 .#{$primaryStyleName}-calendarpanel:focus {
-	outline:none;	
+	outline:none;
 }
 .#{$primaryStyleName}-calendarpanel-header td {
 	text-align: center;
@@ -95,9 +95,9 @@
 }
 .#{$primaryStyleName}-popup {
 	background: #fff;
-	 .v-ie9 &, .v-ie10 &, .v-ie11 & {
+	 .v-ie11 & {
 	 	box-shadow: 0 2px 10px 0 rgba(0, 0, 0, .5);
-    }	
+    }
 }
 .#{$primaryStyleName}-popupcalendar input.#{$primaryStyleName}-textfield {
 	-webkit-box-sizing: border-box;
diff --git a/themes/src/main/themes/VAADIN/themes/base/escalator/escalator.scss b/themes/src/main/themes/VAADIN/themes/base/escalator/escalator.scss
index 2d5ad729fc..1abf754584 100644
--- a/themes/src/main/themes/VAADIN/themes/base/escalator/escalator.scss
+++ b/themes/src/main/themes/VAADIN/themes/base/escalator/escalator.scss
@@ -88,20 +88,6 @@
   .#{$primaryStyleName}-row {
     display: block;
 
-    .v-ie8 &, .v-ie9 & {
-      // Neither IE8 nor IE9 let table rows be longer than tbody, with only
-      // "display: block". Moar hax.
-
-      float: left;
-      clear: left;
-
-      // The inline style of margin-top from the <tbody> to offset the
-      // header's dimension is, for some strange reason, inherited into each
-      // contained <tr>. We need to cancel it:
-
-      margin-top: 0;
-    }
-
     > td,
     > th {
       // IE8 likes the bgcolor here instead of on the row
@@ -144,13 +130,5 @@
       height: 100%;
       @include box-sizing(border-box);
     }
-    
-    .v-ie8 &, .v-ie9 & {
-      // The inline style of margin-top from the <tbody> to offset the
-      // header's dimension is, for some strange reason, inherited into each
-      // contained <tr>. We need to cancel it:
-
-      margin-top: 0;
-    }
   }
 }
diff --git a/themes/src/main/themes/VAADIN/themes/base/grid/grid.scss b/themes/src/main/themes/VAADIN/themes/base/grid/grid.scss
index 983463381b..fdbf2a0cf5 100644
--- a/themes/src/main/themes/VAADIN/themes/base/grid/grid.scss
+++ b/themes/src/main/themes/VAADIN/themes/base/grid/grid.scss
@@ -59,7 +59,7 @@ $v-grid-details-border-bottom-stripe: 1px solid darken($v-grid-row-background-co
   .#{$primaryStyleName}-tablewrapper {
     border: $v-grid-border;
   }
-  
+
   // Column drag and drop elements
 
   .#{$primaryStyleName} .header-drag-table {
@@ -150,12 +150,6 @@ $v-grid-details-border-bottom-stripe: 1px solid darken($v-grid-row-background-co
       vertical-align: middle;
     }
 
-    .v-ie8 &.open .#{$primaryStyleName}-sidebar-button:after {
-      vertical-align: middle;
-      text-align: center;
-      display: inline;
-    }
-
     .#{$primaryStyleName}-sidebar-content {
       padding: 4px 0;
       overflow-y: auto;
@@ -211,7 +205,7 @@ $v-grid-details-border-bottom-stripe: 1px solid darken($v-grid-row-background-co
       border-left: none;
     }
   }
-  
+
   .#{$primaryStyleName}-editor-cells.frozen > div {
     @include box-shadow(1px 0 2px rgba(0,0,0,.1));
     border-right: $v-grid-cell-vertical-border;
@@ -356,17 +350,6 @@ $v-grid-details-border-bottom-stripe: 1px solid darken($v-grid-row-background-co
       display: none;
       pointer-events: none;
     }
-    
-    // IE 8-10 apply "pointer-events" only to SVG elements. 
-    // Using an empty SVG instead of an empty text node makes IE
-    // obey the "pointer-events: none" and forwards click events 
-    // to the underlying element. The data decodes to:
-    // <svg xmlns="http://www.w3.org/2000/svg"></svg>
-    .ie8 &:before,
-    .ie9 &:before,
-    .ie10 &:before {
-      content: url(data:image/svg+xml;charset=utf-8;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==);
-    } 
   }
 
   .#{$primaryStyleName}:focus .#{$primaryStyleName}-cell-focused:before {
@@ -391,7 +374,7 @@ $v-grid-details-border-bottom-stripe: 1px solid darken($v-grid-row-background-co
     -moz-box-sizing: border-box;
     margin-top: nth($v-grid-border, 1) * -1;
     @include box-shadow(0 0 9px rgba(0,0,0,.2));
-    
+
     // Unbuffered footer needs to be 100% width to display correctly
     &.unbuffered {
       .#{$primaryStyleName}-editor-footer {
@@ -403,7 +386,7 @@ $v-grid-details-border-bottom-stripe: 1px solid darken($v-grid-row-background-co
   .#{$primaryStyleName}-editor-cells {
     position: relative;
     white-space: nowrap;
-    
+
     &.frozen {
       z-index: 2;
     }
@@ -422,26 +405,26 @@ $v-grid-details-border-bottom-stripe: 1px solid darken($v-grid-row-background-co
         vertical-align: middle;
         display: inline-block;
       }
-      
+
       .v-filterselect {
       	padding-left: 0;
       }
-      
+
       input[type="text"],
       input[type="text"].v-filterselect-input,
       input[type="password"] {
       	padding-left: $v-grid-cell-padding-horizontal;
       }
-      
+
       input[type="text"]:not(.v-filterselect-input),
       input[type="password"] {
       	padding-right: $v-grid-cell-padding-horizontal / 2;
       }
-      
+
       input[type="checkbox"] {
       	margin-left: $v-grid-cell-padding-horizontal;
       }
-      
+
       .v-textfield,
       .v-datefield,
       .v-filterselect {
@@ -450,25 +433,13 @@ $v-grid-details-border-bottom-stripe: 1px solid darken($v-grid-row-background-co
         min-height: 100%;
         max-height: 100%;
       }
-      
-      .v-datefield-button {
-        .v-ie8 & {
-          margin-left: -37px;
-        }
-      }
-      
-      .v-filterselect-button {
-        .v-ie8 & {
-          margin-left: -25px;
-        }
-      }
 
       .v-select,
       .v-select-select {
         min-width: 100%;
         max-width: 100%;
       }
-      
+
       &.not-editable.#{$primaryStyleName}-cell {
         float: none;
       }
@@ -555,33 +526,22 @@ $v-grid-details-border-bottom-stripe: 1px solid darken($v-grid-row-background-co
     border-top: $v-grid-details-border-top-stripe;
     border-bottom: $v-grid-details-border-bottom-stripe;
   }
-  
+
   .#{$primaryStyleName}-spacer-deco-container {
-    border-top: $v-grid-border-size solid transparent; // same size as table wrapper border 
+    border-top: $v-grid-border-size solid transparent; // same size as table wrapper border
     position: relative;
     top: 0; // escalator will override top for scrolling and margin-top for header offset.
     z-index: 5;
   }
 
   .#{$primaryStyleName}-spacer-deco {
-    top: 0; // this will be overridden by code, but it's a good default. 
+    top: 0; // this will be overridden by code, but it's a good default.
     left: 0;
     width: $v-grid-details-marker-width;
     background-color: $v-grid-details-marker-color;
     position: absolute;
     height: 100%; // this will be overridden by code, but it's a good default.
     pointer-events: none;
-
-    // IE 8-10 apply "pointer-events" only to SVG elements. 
-    // Using an empty SVG instead of an empty text node makes IE
-    // obey the "pointer-events: none" and forwards click events 
-    // to the underlying element. The data decodes to:
-    // <svg xmlns="http://www.w3.org/2000/svg"></svg>
-    .ie8 &:before,
-    .ie9 &:before,
-    .ie10 &:before {
-      content: url(data:image/svg+xml;charset=utf-8;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==);
-    }
   }
 
   // Renderers
diff --git a/themes/src/main/themes/VAADIN/themes/base/menubar/menubar.scss b/themes/src/main/themes/VAADIN/themes/base/menubar/menubar.scss
index ad701f1b42..1017e38992 100644
--- a/themes/src/main/themes/VAADIN/themes/base/menubar/menubar.scss
+++ b/themes/src/main/themes/VAADIN/themes/base/menubar/menubar.scss
@@ -24,7 +24,7 @@
 	background: #333;
 	color: #fff;
 }
-.#{$primaryStyleName}-submenu .#{$primaryStyleName}-menuitem { 
+.#{$primaryStyleName}-submenu .#{$primaryStyleName}-menuitem {
 	cursor: default;
 	display: block;
 	position: relative;
@@ -56,14 +56,6 @@
 .#{$primaryStyleName} span.#{$primaryStyleName}-menuitem-disabled:active {
 	opacity: .5;
 	filter: alpha(opacity=50);
-	
-	.v-ie8 & {
-		filter: none;
-		color: #999;
-		img {
-			filter: alpha(opacity=50);
-		}
-	}
 }
 
 .#{$primaryStyleName}-more-menuitem {
@@ -91,7 +83,7 @@
 .#{$primaryStyleName}-popup:focus,
 .#{$primaryStyleName}-popup .popupContent:focus,
 .#{$primaryStyleName}-popup .popupContent .#{$primaryStyleName}-submenu:focus{
-	outline: none;	
+	outline: none;
 }
 /* Checkboxes for checkable/checked menu items */
 /* Checked/unchecked requires combined style selected-(un)checked for IE6 */
@@ -101,7 +93,7 @@
 .#{$primaryStyleName}-submenu-check-column .#{$primaryStyleName}-menuitem-caption {
 	padding-left: 18px;
 }
-.#{$primaryStyleName}-submenu .#{$primaryStyleName}-menuitem-checked .#{$primaryStyleName}-menuitem-caption { 
+.#{$primaryStyleName}-submenu .#{$primaryStyleName}-menuitem-checked .#{$primaryStyleName}-menuitem-caption {
 	background: transparent url(img/check.gif) no-repeat left;
 }
 
diff --git a/themes/src/main/themes/VAADIN/themes/base/shadow/shadow.scss b/themes/src/main/themes/VAADIN/themes/base/shadow/shadow.scss
index 3c369d3fef..b690ce02bd 100644
--- a/themes/src/main/themes/VAADIN/themes/base/shadow/shadow.scss
+++ b/themes/src/main/themes/VAADIN/themes/base/shadow/shadow.scss
@@ -4,10 +4,6 @@
 	position: absolute;
 	display: none;
 	pointer-events: none;
-	
-	.v-ie8 & {
-	  display: block;
-	}
 }
 
 .#{$primaryStyleName} .top-left {
@@ -75,4 +71,4 @@
     background: transparent url(img/bottom-right.png);
 }
 
-}
\ No newline at end of file
+}
diff --git a/themes/src/main/themes/VAADIN/themes/base/window/window.scss b/themes/src/main/themes/VAADIN/themes/base/window/window.scss
index bdc16999b0..e264c486e9 100644
--- a/themes/src/main/themes/VAADIN/themes/base/window/window.scss
+++ b/themes/src/main/themes/VAADIN/themes/base/window/window.scss
@@ -34,7 +34,7 @@
 
 .#{$primaryStyleName}-outerheader,
 .#{$primaryStyleName}-draggingCurtain {
- 	cursor: move;	
+ 	cursor: move;
 }
 .#{$primaryStyleName}-header {
 	font-weight: bold;
@@ -128,10 +128,7 @@ div.#{$primaryStyleName}-header {
 	position: absolute;
 	display: none;
 	pointer-events: none;
-	
-	.v-ie8 & {
-	  display: block;
-	}
+
 }
 .v-shadow-window .top-left {
     position: absolute; overflow: hidden;
@@ -191,4 +188,4 @@ div.#{$primaryStyleName}-header {
     background: transparent url(img/shadow/bottom-right.png);
 }
 
-}
\ No newline at end of file
+}
diff --git a/themes/src/main/themes/VAADIN/themes/chameleon/components/button/button.scss b/themes/src/main/themes/VAADIN/themes/chameleon/components/button/button.scss
index f2b597c59a..a5bb4d44fa 100644
--- a/themes/src/main/themes/VAADIN/themes/chameleon/components/button/button.scss
+++ b/themes/src/main/themes/VAADIN/themes/chameleon/components/button/button.scss
@@ -1,14 +1,12 @@
 @mixin chameleon-button($primaryStyleName : v-button) {
 
 .#{$primaryStyleName}:active,
-.v-ie8 & .v-pressed.#{$primaryStyleName},
 div.#{$primaryStyleName}-down {
 	background-image: url(../../img/grad-dark-bottom2.png);
 	background-color: #afafaf;
 	}
 
 .#{$primaryStyleName}:active .#{$primaryStyleName}-wrap,
-.v-ie8 & .v-pressed.#{$primaryStyleName} .#{$primaryStyleName}-wrap,
 .#{$primaryStyleName}-down .#{$primaryStyleName}-wrap {
 	background-image: url(../../img/grad-dark-top2.png);
 	border: 1px solid #888;
@@ -61,7 +59,7 @@ div.#{$primaryStyleName}-down .#{$primaryStyleName}-wrap {
 .v-ff & .#{$primaryStyleName}-wrap {
 	overflow: hidden;
 	}
-	
+
 .#{$primaryStyleName}:focus {
 	outline: none;
 	}
@@ -96,7 +94,6 @@ div.#{$primaryStyleName}-down .#{$primaryStyleName}-wrap {
 	}
 
 .#{$primaryStyleName}-small:active .#{$primaryStyleName}-wrap,
-.v-ie8 & .#{$primaryStyleName}-small.v-pressed .#{$primaryStyleName}-wrap,
 .#{$primaryStyleName}-down.small .#{$primaryStyleName}-wrap {
 	padding: 2px 10px;
 	}
@@ -115,8 +112,7 @@ div.#{$primaryStyleName}-down .#{$primaryStyleName}-wrap {
 	padding-right: 26px;
 	}
 
-.#{$primaryStyleName}-wide:active .#{$primaryStyleName}-wrap,
-.v-ie8 & .#{$primaryStyleName}-wide.v-pressed .#{$primaryStyleName}-wrap {
+.#{$primaryStyleName}-wide:active .#{$primaryStyleName}-wrap {
 	padding-left: 25px;
 	padding-right: 25px;
 	}
@@ -130,8 +126,7 @@ div.#{$primaryStyleName}-down .#{$primaryStyleName}-wrap {
 	padding-bottom: 13px;
 	}
 
-.#{$primaryStyleName}-tall:active .#{$primaryStyleName}-wrap,
-.v-ie8 & .#{$primaryStyleName}-tall.v-pressed .#{$primaryStyleName}-wrap {
+.#{$primaryStyleName}-tall:active .#{$primaryStyleName}-wrap {
 	padding-top: 12px;
 	padding-bottom: 12px;
 	}
@@ -245,7 +240,7 @@ body.v-ie & .v-pressed.#{$primaryStyleName}-borderless .#{$primaryStyleName}-wra
 	margin-left: 3px;
 	margin-right: -0.5em;
 	}
-	
+
 
 /*******************************************************************************
  * Icon-only
@@ -258,4 +253,4 @@ body.v-ie & .v-pressed.#{$primaryStyleName}-borderless .#{$primaryStyleName}-wra
 	margin-right: -.5em;
 	}
 
-}
\ No newline at end of file
+}
diff --git a/themes/src/main/themes/VAADIN/themes/reindeer/button/button-ie.scss b/themes/src/main/themes/VAADIN/themes/reindeer/button/button-ie.scss
deleted file mode 100644
index 6732aeb2aa..0000000000
--- a/themes/src/main/themes/VAADIN/themes/reindeer/button/button-ie.scss
+++ /dev/null
@@ -1,8 +0,0 @@
-@mixin reindeer-button-ie($primaryStyleName : v-nativebutton) {
-
-.v-ie8 & .#{$primaryStyleName}-link {
-	padding: 0;
-	text-align: left;
-}
-
-}
\ No newline at end of file
diff --git a/themes/src/main/themes/VAADIN/themes/reindeer/button/nativebutton.scss b/themes/src/main/themes/VAADIN/themes/reindeer/button/nativebutton.scss
index ca7a16e88e..5d13f3b56e 100644
--- a/themes/src/main/themes/VAADIN/themes/reindeer/button/nativebutton.scss
+++ b/themes/src/main/themes/VAADIN/themes/reindeer/button/nativebutton.scss
@@ -1,6 +1,3 @@
-/* Browser-specific corrections to the standard implementation */
-@import "button-ie.scss";
-
 @mixin reindeer-nativebutton-link($primaryStyleName : v-nativebutton) {
 
 .#{$primaryStyleName}-link .#{$primaryStyleName}-caption {
@@ -19,7 +16,4 @@
 
 @mixin reindeer-nativebutton($primaryStyleName : v-nativebutton) {
 	@include reindeer-nativebutton-link($primaryStyleName);
-	
-	/* Browser-specific corrections to the standard implementation */
-	@include reindeer-button-ie($primaryStyleName);
 }
\ No newline at end of file
diff --git a/themes/src/main/themes/VAADIN/themes/reindeer/grid/grid.scss b/themes/src/main/themes/VAADIN/themes/reindeer/grid/grid.scss
index 71d7a864f6..05b93c1259 100644
--- a/themes/src/main/themes/VAADIN/themes/reindeer/grid/grid.scss
+++ b/themes/src/main/themes/VAADIN/themes/reindeer/grid/grid.scss
@@ -86,12 +86,6 @@
       border-radius: 0;
       background: transparent;
     }
-
-    .v-datefield-button {
-      .v-ie8 & {
-        margin-top: -2px;
-      }
-    }
       
     .v-filterselect {
       overflow: hidden;
diff --git a/themes/src/main/themes/VAADIN/themes/reindeer/label/label.scss b/themes/src/main/themes/VAADIN/themes/reindeer/label/label.scss
index 9a6f9b33ad..b18eb7432f 100644
--- a/themes/src/main/themes/VAADIN/themes/reindeer/label/label.scss
+++ b/themes/src/main/themes/VAADIN/themes/reindeer/label/label.scss
@@ -113,8 +113,7 @@
 	border-bottom: 1px solid #fff;
 }
 
-.v-sa & .#{$primaryStyleName} hr,
-.v-ie8 & .#{$primaryStyleName} hr {
+.v-sa & .#{$primaryStyleName} hr {
 	height: 1px;
 }
 
@@ -123,4 +122,4 @@
 	line-height: normal;
 }
 
-}
\ No newline at end of file
+}
diff --git a/themes/src/main/themes/VAADIN/themes/reindeer/notification/notification.scss b/themes/src/main/themes/VAADIN/themes/reindeer/notification/notification.scss
index 85eab598fe..7aed10d46c 100644
--- a/themes/src/main/themes/VAADIN/themes/reindeer/notification/notification.scss
+++ b/themes/src/main/themes/VAADIN/themes/reindeer/notification/notification.scss
@@ -10,12 +10,6 @@
 	font-weight: bold;
 }
 
-.v-ie9 &, .v-ie10 & {
-	.#{$primaryStyleName}-caption {
-		/* Fix for #6793 */
-		font-weight: bold;
-	}
-}
 .#{$primaryStyleName}-description {
 	line-height: 1.3;
 }
diff --git a/themes/src/main/themes/VAADIN/themes/reindeer/panel/panel.scss b/themes/src/main/themes/VAADIN/themes/reindeer/panel/panel.scss
index 74ee10837d..2499c8c4ab 100644
--- a/themes/src/main/themes/VAADIN/themes/reindeer/panel/panel.scss
+++ b/themes/src/main/themes/VAADIN/themes/reindeer/panel/panel.scss
@@ -13,10 +13,8 @@
 	line-height: 16px; /* accommodate minimum icon size */
 }
 
-.v-webkit &, 
-.v-gecko &, 
-.v-ie9 &, 
-.v-ie10 & {
+.v-webkit &,
+.v-gecko & {
 	.#{$primaryStyleName}-caption,
 	.#{$primaryStyleName}-nocaption {
 		border-bottom-color: rgba(0,0,0,.08);
@@ -75,4 +73,4 @@
 	border: none;
 }
 
-}
\ No newline at end of file
+}
diff --git a/themes/src/main/themes/VAADIN/themes/reindeer/tabsheet/tabsheet-minimal-style.scss b/themes/src/main/themes/VAADIN/themes/reindeer/tabsheet/tabsheet-minimal-style.scss
index 77d4922535..1446b5b93c 100644
--- a/themes/src/main/themes/VAADIN/themes/reindeer/tabsheet/tabsheet-minimal-style.scss
+++ b/themes/src/main/themes/VAADIN/themes/reindeer/tabsheet/tabsheet-minimal-style.scss
@@ -105,19 +105,6 @@
 	-moz-border-radius: 7px;
 }
 
-.v-ie9 &, .v-ie10 & {
-	.#{$primaryStyleName}-tabs-minimal .#{$primaryStyleName}-tabitem .#{$primaryStyleName}-caption-close { 
-  	  &, &:hover, &:active {
-        
-        /* IE9/IE10 suffers from rounding subpixel values errors when measuring the tabs which makes the close button wrap. */
-        margin-left: 2.5px;
-            
-        /* The close button is a pixel too high in IE9/IE10, adjust for that */
-        margin-top: 1px;
-	    }        
-	}
-}
-
 .#{$primaryStyleName}-tabs-minimal .#{$primaryStyleName}-caption-close:hover,
 .white .#{$primaryStyleName}-tabs-minimal .#{$primaryStyleName}-caption-close:hover {
 	color: #fff;
@@ -154,4 +141,4 @@
 	background: #626669;
 }
 
-}
\ No newline at end of file
+}
diff --git a/themes/src/main/themes/VAADIN/themes/reindeer/tabsheet/tabsheet-small-style.scss b/themes/src/main/themes/VAADIN/themes/reindeer/tabsheet/tabsheet-small-style.scss
index 4141586d5a..4e84176cd4 100644
--- a/themes/src/main/themes/VAADIN/themes/reindeer/tabsheet/tabsheet-small-style.scss
+++ b/themes/src/main/themes/VAADIN/themes/reindeer/tabsheet/tabsheet-small-style.scss
@@ -55,12 +55,6 @@
 .v-ff & .#{$primaryStyleName}-tabs-bar .#{$primaryStyleName}-caption-close {
 	margin-top: -14px;
 }
-.v-ie9 &, .v-ie10 & {
-	.#{$primaryStyleName}-tabs-bar .#{$primaryStyleName}-caption-close:only-child,
-	.#{$primaryStyleName}-tabs-bar .v-captiontext:first-child + .#{$primaryStyleName}-caption-close {
-    margin-top: -14px;
-	}
-}
 .#{$primaryStyleName}-tabs-bar .#{$primaryStyleName}-caption-close:hover {
 	background: #bfbfbf;
 	-webkit-box-shadow: 0 1px 0 #fff;
@@ -116,4 +110,4 @@
 }
 /* Content area font color specified with minimal style (reduces additional selectors) */
 
-}
\ No newline at end of file
+}
diff --git a/themes/src/main/themes/VAADIN/themes/runo/label/label.scss b/themes/src/main/themes/VAADIN/themes/runo/label/label.scss
index 50792d61a1..bd16f91902 100644
--- a/themes/src/main/themes/VAADIN/themes/runo/label/label.scss
+++ b/themes/src/main/themes/VAADIN/themes/runo/label/label.scss
@@ -66,9 +66,8 @@
 	height: 1px;
 }
 
-.v-sa & .#{$primaryStyleName} hr,
-.v-ie8 & .#{$primaryStyleName} hr {
+.v-sa & .#{$primaryStyleName} hr {
 	height: 1px;
 }
 
-}
\ No newline at end of file
+}
diff --git a/themes/src/main/themes/VAADIN/themes/runo/panel/panel.scss b/themes/src/main/themes/VAADIN/themes/runo/panel/panel.scss
index 66fb751d88..180ab93b41 100644
--- a/themes/src/main/themes/VAADIN/themes/runo/panel/panel.scss
+++ b/themes/src/main/themes/VAADIN/themes/runo/panel/panel.scss
@@ -6,7 +6,7 @@
 .#{$primaryStyleName}-caption .v-errorindicator {
 	padding-right: 20px;
 	background: transparent url(../icons/16/error.png) no-repeat bottom center;
-	
+
 }
 .#{$primaryStyleName}-caption,
 .#{$primaryStyleName}-caption-light {
@@ -68,16 +68,5 @@
 	height: 0;
 	overflow: hidden;
 }
-/* IE specific rules */
-.v-ie8 & .#{$primaryStyleName}-content {
-	border-bottom: 1px solid #babfc0;
-}
-.v-ie8 & .#{$primaryStyleName}-content-light {
-	border-bottom: none;
-}
-.v-ie8 & .#{$primaryStyleName}-deco { 
-	height: 0;
-	overflow: hidden;
-}
 
-}
\ No newline at end of file
+}
diff --git a/themes/src/main/themes/VAADIN/themes/valo/components/_button.scss b/themes/src/main/themes/VAADIN/themes/valo/components/_button.scss
index 3a4bca615d..c7674f1c8f 100644
--- a/themes/src/main/themes/VAADIN/themes/valo/components/_button.scss
+++ b/themes/src/main/themes/VAADIN/themes/valo/components/_button.scss
@@ -21,11 +21,6 @@
       font-weight: bold;
       $min-width: round($v-unit-size * 2.2);
       min-width: $min-width;
-
-      // IE8 + border-box + min-width == fail
-      .v-ie8 & {
-        min-width: $min-width - ($padding-width * 2);
-      }
     }
 
     .#{$primary-stylename}-friendly {
@@ -320,9 +315,9 @@
 
 
 /**
- * Outputs styles to allow vertical centering of the icon and the caption, independent of the 
+ * Outputs styles to allow vertical centering of the icon and the caption, independent of the
  * height of the button.
- * 
+ *
  * @group button
  */
 @mixin valo-button-vertical-centering {
@@ -346,11 +341,11 @@
 
 
 /**
- * Output styles for a borderless button. Expects that the targeted element 
+ * Output styles for a borderless button. Expects that the targeted element
  * already has both valo-button-static-style and valo-button-style included.
- * 
+ *
  * @param {color} $font-color (inherit) - The font color of the borderless button
- * 
+ *
  * @group button
  */
 @mixin valo-button-borderless-style ($font-color: inherit) {
@@ -380,11 +375,11 @@
 
 
 /**
- * Output styles for a "quiet" button (a button whose outline is only shown 
- * once the user hovers over the button caption). Expects that the targeted 
- * element already has both valo-button-static-style and valo-button-style 
+ * Output styles for a "quiet" button (a button whose outline is only shown
+ * once the user hovers over the button caption). Expects that the targeted
+ * element already has both valo-button-static-style and valo-button-style
  * included.
- * 
+ *
  * @group button
  */
 @mixin valo-button-quiet-style {
@@ -408,7 +403,7 @@
 
 /**
  * Output styles to align a button's icon on the right side of its caption.
- * 
+ *
  * @group button
  */
 @mixin valo-button-icon-align-right-style {
@@ -430,7 +425,7 @@
 
 /**
  * Output styles to align a button's icon on top of its caption.
- * 
+ *
  * @group button
  */
 @mixin valo-button-icon-align-top-style {
diff --git a/themes/src/main/themes/VAADIN/themes/valo/components/_colorpicker.scss b/themes/src/main/themes/VAADIN/themes/valo/components/_colorpicker.scss
index 3f334e893c..d6cd8ad093 100644
--- a/themes/src/main/themes/VAADIN/themes/valo/components/_colorpicker.scss
+++ b/themes/src/main/themes/VAADIN/themes/valo/components/_colorpicker.scss
@@ -1,5 +1,5 @@
 /**
- * Outputs the global selectors and properties for the ColorPicker component - styles which are 
+ * Outputs the global selectors and properties for the ColorPicker component - styles which are
  * considered mandatory for the component to work properly.
  *
  * @param {string} $primary-stylename (v-colorpicker) - the primary style name for the selectors
@@ -214,23 +214,6 @@
     + .v-button-caption:not(:empty) {
       margin-left: round($v-unit-size/2);
     }
-
-    .v-ie8 & {
-      position: relative;
-      top: auto;
-      right: auto;
-      bottom: auto;
-      left: auto;
-      width: $v-font-size;
-      height: $v-font-size;
-      display: inline-block;
-      vertical-align: middle;
-      margin: 0 round($v-font-size / -2);
-
-      + .v-button-caption {
-        margin-left: round($v-unit-size/2);
-      }
-    }
   }
 
 }
diff --git a/themes/src/main/themes/VAADIN/themes/valo/components/_combobox.scss b/themes/src/main/themes/VAADIN/themes/valo/components/_combobox.scss
index e9056ef17a..f9a9c9e63d 100644
--- a/themes/src/main/themes/VAADIN/themes/valo/components/_combobox.scss
+++ b/themes/src/main/themes/VAADIN/themes/valo/components/_combobox.scss
@@ -200,7 +200,7 @@
 
 /**
  * Outputs the styles for a combobox variant input element.
- * 
+ *
  * @param {size} $unit-size ($v-unit-size) - The sizing of the input (affects the padding only, width and height are 100%)
  * @param {size | list} $padding (null) - The padding of the input. Computed from other parameters by default.
  * @param {color} $font-color (null) - The font color of the input. Computed from the $background-color by default.
@@ -256,7 +256,7 @@
 
 /**
  * Outputs the styles for a combobox variant button element.
- * 
+ *
  * @param {size} $unit-size ($v-unit-size) - The sizing of the button, which corresponds its width.
  * @param {list} $bevel ($v-textfield-bevel) - Box-shadow value according to $v-bevel documentation
  * @param {color} $background-color ($v-textfield-background-color) - The background color of the input, which affects the font color of the button
@@ -283,9 +283,6 @@
     }
     color: mix($background-color, valo-font-color($background-color));
 
-    .v-ie8 & {
-      background-color: $background-color;
-    }
   }
 
   @if $v-border-radius > 0 {
diff --git a/themes/src/main/themes/VAADIN/themes/valo/components/_datefield.scss b/themes/src/main/themes/VAADIN/themes/valo/components/_datefield.scss
index 6ff8a70dba..ea2dbf95c1 100644
--- a/themes/src/main/themes/VAADIN/themes/valo/components/_datefield.scss
+++ b/themes/src/main/themes/VAADIN/themes/valo/components/_datefield.scss
@@ -188,7 +188,7 @@
 
 /**
  * Outputs the styles for a date field variant button element.
- * 
+ *
  * @param {size} $unit-size ($v-unit-size) - The sizing of the button, which corresponds its width.
  * @param {list} $bevel ($v-textfield-bevel) - Box-shadow value according to $v-bevel documentation
  * @param {color} $background-color ($v-textfield-background-color) - The background color of the input, which affects the font color of the button
@@ -301,7 +301,7 @@
 
 /**
  * Outputs the styles for calendar panel (i.e. month view).
- * 
+ *
  * @param {string} $primary-stylename (v-datefield-calendarpanel) - the primary style name for the selectors
  *
  * @group datefield
@@ -472,7 +472,7 @@
 
 /**
  * Outputs the styles for an individual day element in a calendar panel.
- * 
+ *
  * @group datefield
  */
 @mixin valo-datefield-calendarpanel-day-style {
@@ -496,7 +496,7 @@
 
 /**
  * Outputs the hover state styles for an individual day element in a calendar panel.
- * 
+ *
  * @group datefield
  */
 @mixin valo-datefield-calendarpanel-day-hover-style {
@@ -506,7 +506,7 @@
 
 /**
  * Outputs the styles for an individual day element, which are not part of the current month, in a calendar panel.
- * 
+ *
  * @group datefield
  */
 @mixin valo-datefield-calendarpanel-day-offmonth-style {
@@ -526,7 +526,7 @@
 
 /**
  * Outputs the styles for todays day element in a calendar panel.
- * 
+ *
  * @group datefield
  */
 @mixin valo-datefield-calendarpanel-day-today-style {
@@ -538,7 +538,7 @@
 
 /**
  * Outputs the styles for the selected day element in a calendar panel.
- * 
+ *
  * @group datefield
  */
 @mixin valo-datefield-calendarpanel-day-selected-style {
@@ -551,22 +551,19 @@
 
 /**
  * Outputs the focus state styles for an individual day element in a calendar panel.
- * 
+ *
  * @group datefield
  */
 @mixin valo-datefield-calendarpanel-day-focused-style {
   @include valo-focus-style;
   position: relative; // Show above other cells
 
-  .v-ie8 & {
-    border-color: $v-focus-color;
-  }
 }
 
 
 /**
  * Outputs the font icon styles for the next month button in a calendar panel.
- * 
+ *
  * @group datefield
  */
 @mixin valo-datefield-calendarpanel-nextmonth-icon-style {
@@ -577,7 +574,7 @@
 
 /**
  * Outputs the font icon styles for the previous month button in a calendar panel.
- * 
+ *
  * @group datefield
  */
 @mixin valo-datefield-calendarpanel-prevmonth-icon-style {
@@ -588,7 +585,7 @@
 
 /**
  * Outputs the font icon styles for the next year button in a calendar panel.
- * 
+ *
  * @group datefield
  */
 @mixin valo-datefield-calendarpanel-nextyear-icon-style {
@@ -599,7 +596,7 @@
 
 /**
  * Outputs the font icon styles for the previous year button in a calendar panel.
- * 
+ *
  * @group datefield
  */
 @mixin valo-datefield-calendarpanel-prevyear-icon-style {
@@ -610,7 +607,7 @@
 
 /**
  * Outputs the styles for the current month and year title element in a calendar panel.
- * 
+ *
  * @group datefield
  */
 @mixin valo-datefield-calendarpanel-month-style {
diff --git a/themes/src/main/themes/VAADIN/themes/valo/components/_grid.scss b/themes/src/main/themes/VAADIN/themes/valo/components/_grid.scss
index 1552c9591b..4471b91b47 100644
--- a/themes/src/main/themes/VAADIN/themes/valo/components/_grid.scss
+++ b/themes/src/main/themes/VAADIN/themes/valo/components/_grid.scss
@@ -127,16 +127,16 @@ $v-grid-details-border-bottom-stripe: $v-grid-cell-horizontal-border !default;
       height: 100%;
       vertical-align: middle;
     }
-    
+
     &.not-editable.#{$primary-stylename}-cell {
       float: none;
     }
-    
+
     .error::before {
       border-top: round($v-unit-size / 4) solid $v-error-indicator-color;
       border-right: round($v-unit-size / 4) solid transparent;
     }
-    
+
     .error,
     .error > input {
       // taken from @mixin valo-textfield-error-style()
@@ -159,22 +159,10 @@ $v-grid-details-border-bottom-stripe: $v-grid-cell-horizontal-border !default;
         @include box-shadow(none);
       }
     }
-    
+
     input[type="text"].v-datefield-textfield {
     	padding-left: $v-unit-size * 1.2;
     }
-    
-    .v-datefield-button {
-      .v-ie8 & {
-        margin-left: 0px;
-      }
-    }
-      
-    .v-filterselect-button {
-      .v-ie8 & {
-        margin-left: 0px;
-      }
-    }
 
     .v-textfield-focus,
     .v-datefield .v-textfield-focus,
@@ -193,7 +181,7 @@ $v-grid-details-border-bottom-stripe: $v-grid-cell-horizontal-border !default;
 	  > input[type="checkbox"] {
       	margin-left: 0;
       }
-      
+
       > label {
         white-space: nowrap;
       }
@@ -215,7 +203,7 @@ $v-grid-details-border-bottom-stripe: $v-grid-cell-horizontal-border !default;
     padding: round($v-layout-spacing-vertical / 2) round($v-layout-spacing-horizontal / 2);
     margin: 0;
     outline: none;
-  }  
+  }
 
   .#{$primary-stylename}-spacer {
     margin-top: first-number($v-grid-border) * -1;
diff --git a/themes/src/main/themes/VAADIN/themes/valo/components/_panel.scss b/themes/src/main/themes/VAADIN/themes/valo/components/_panel.scss
index 42a4ff3a3d..1753ff536b 100644
--- a/themes/src/main/themes/VAADIN/themes/valo/components/_panel.scss
+++ b/themes/src/main/themes/VAADIN/themes/valo/components/_panel.scss
@@ -13,8 +13,8 @@ $v-panel-background-color: scale-color(lighten($v-app-background-color, 5%), $sa
 /**
  *
  *
- * @param {string} $primary-stylename (v-panel) - 
- * @param {bool} $include-additional-styles - 
+ * @param {string} $primary-stylename (v-panel) -
+ * @param {bool} $include-additional-styles -
  *
  * @group panel
  */
@@ -72,11 +72,11 @@ $v-panel-background-color: scale-color(lighten($v-app-background-color, 5%), $sa
 /**
  *
  *
- * @param {string} $primary-stylename (v-panel) - 
- * @param {color} $background-color ($v-panel-background-color) - 
- * @param {list} $shadow ($v-shadow) - 
- * @param {list} $border ($v-panel-border) - 
- * @param {string} $border-radius ($v-border-radius) - 
+ * @param {string} $primary-stylename (v-panel) -
+ * @param {color} $background-color ($v-panel-background-color) -
+ * @param {list} $shadow ($v-shadow) -
+ * @param {list} $border ($v-panel-border) -
+ * @param {string} $border-radius ($v-border-radius) -
  *
  * @group panel
  */
@@ -93,10 +93,10 @@ $v-panel-background-color: scale-color(lighten($v-app-background-color, 5%), $sa
 /**
  *
  *
- * @param {color} $background-color ($v-background-color) - 
- * @param {list} $bevel ($v-bevel) - 
- * @param {list} $gradient (valo-gradient-style($v-gradient) valo-gradient-opacity($v-gradient)/4) - 
- * @param {list} $border ($v-panel-border) - 
+ * @param {color} $background-color ($v-background-color) -
+ * @param {list} $bevel ($v-bevel) -
+ * @param {list} $gradient (valo-gradient-style($v-gradient) valo-gradient-opacity($v-gradient)/4) -
+ * @param {list} $border ($v-panel-border) -
  *
  * @group panel
  */
@@ -112,10 +112,6 @@ $v-panel-background-color: scale-color(lighten($v-app-background-color, 5%), $sa
     $shadow: 0 0 0 first-number($border-style) first-color($border-style);
     border-bottom: none;
     margin-bottom: first-number($border-style);
-
-    .v-ie8 & {
-      outline: first-number($border-style) solid first-color($border-style);
-    }
   } @else {
     border-bottom: valo-border($border: $border, $color: $v-background-color, $strength: 0.7);
   }
@@ -132,7 +128,7 @@ $v-panel-background-color: scale-color(lighten($v-app-background-color, 5%), $sa
 /**
  *
  *
- * @param {list} $shadow (false) - 
+ * @param {list} $shadow (false) -
  *
  * @group panel
  */
@@ -192,7 +188,7 @@ $v-panel-background-color: scale-color(lighten($v-app-background-color, 5%), $sa
 /**
  *
  *
- * @param {size} $border-width (max(1px, first-number($v-panel-border))) - 
+ * @param {size} $border-width (max(1px, first-number($v-panel-border))) -
  *
  * @group panel
  */
diff --git a/themes/src/main/themes/VAADIN/themes/valo/components/_slider.scss b/themes/src/main/themes/VAADIN/themes/valo/components/_slider.scss
index 6dab5be94b..687ab073c0 100644
--- a/themes/src/main/themes/VAADIN/themes/valo/components/_slider.scss
+++ b/themes/src/main/themes/VAADIN/themes/valo/components/_slider.scss
@@ -44,8 +44,8 @@ $_valo-slider-base-margin-horizontal: round($v-slider-handle-width/2);
 /**
  *
  *
- * @param {string} $primary-stylename (v-slider) - 
- * @param {bool} $include-additional-styles - 
+ * @param {string} $primary-stylename (v-slider) -
+ * @param {bool} $include-additional-styles -
  *
  * @group slider
  */
@@ -64,10 +64,6 @@ $_valo-slider-base-margin-horizontal: round($v-slider-handle-width/2);
 
       .#{$primary-stylename}-handle:after {
         opacity: 1;
-
-        .v-ie8 & {
-          visibility: visible;
-        }
       }
     }
 
@@ -103,11 +99,6 @@ $_valo-slider-base-margin-horizontal: round($v-slider-handle-width/2);
       margin-left: -100%;
       width: 100%;
       vertical-align: top;
-
-      .v-ie8 & {
-        position: relative;
-        left: round(-$v-slider-handle-width/2);
-      }
     }
   }
 
@@ -132,10 +123,6 @@ $_valo-slider-base-margin-horizontal: round($v-slider-handle-width/2);
       @if $v-animations-enabled {
         @include transition(opacity 200ms);
       }
-
-      .v-ie8 & {
-        visibility: hidden;
-      }
     }
 
     &:before,
@@ -190,12 +177,6 @@ $_valo-slider-base-margin-horizontal: round($v-slider-handle-width/2);
         height: 101%;
         margin-left: 0;
         @include valo-gradient($color: $v-selection-color, $direction: to right);
-
-        .v-ie8 & {
-          top: round($v-slider-handle-width/2);
-          left: 0;
-          height: 130%;
-        }
       }
     }
 
@@ -229,8 +210,8 @@ $_valo-slider-base-margin-horizontal: round($v-slider-handle-width/2);
 /**
  *
  *
- * @param {string} $primary-stylename (v-slider) - 
- * @param {color} $background-color ($v-background-color) - 
+ * @param {string} $primary-stylename (v-slider) -
+ * @param {color} $background-color ($v-background-color) -
  *
  * @group slider
  */
@@ -251,9 +232,9 @@ $_valo-slider-base-margin-horizontal: round($v-slider-handle-width/2);
 /**
  *
  *
- * @param {string} $primary-stylename (v-slider) - 
- * @param {color} $background-color ($v-selection-color) - 
- * @param {list} $border ($v-border) - 
+ * @param {string} $primary-stylename (v-slider) -
+ * @param {color} $background-color ($v-selection-color) -
+ * @param {list} $border ($v-border) -
  *
  * @group slider
  */
@@ -281,7 +262,7 @@ $_valo-slider-base-margin-horizontal: round($v-slider-handle-width/2);
 /**
  *
  *
- * @param {string} $primary-stylename (v-slider) - 
+ * @param {string} $primary-stylename (v-slider) -
  *
  * @group slider
  */
@@ -296,8 +277,8 @@ $_valo-slider-base-margin-horizontal: round($v-slider-handle-width/2);
 /**
  *
  *
- * @param {string} $primary-stylename (v-slider) - 
- * @param {color} $background-color ($v-background-color) - 
+ * @param {string} $primary-stylename (v-slider) -
+ * @param {color} $background-color ($v-background-color) -
  *
  * @group slider
  */
@@ -318,8 +299,8 @@ $_valo-slider-base-margin-horizontal: round($v-slider-handle-width/2);
 /**
  *
  *
- * @param {string} $primary-stylename (v-slider) - 
- * @param {number} $tick-count (5) - 
+ * @param {string} $primary-stylename (v-slider) -
+ * @param {number} $tick-count (5) -
  *
  * @group slider
  */
diff --git a/themes/src/main/themes/VAADIN/themes/valo/components/_table.scss b/themes/src/main/themes/VAADIN/themes/valo/components/_table.scss
index 86efb96637..5b87dc1674 100644
--- a/themes/src/main/themes/VAADIN/themes/valo/components/_table.scss
+++ b/themes/src/main/themes/VAADIN/themes/valo/components/_table.scss
@@ -57,7 +57,7 @@ $v-table-background-color: null !default;
 /**
  *
  *
- * @param {string} $primary-stylename (v-table) - 
+ * @param {string} $primary-stylename (v-table) -
  *
  * @group table
  */
@@ -105,9 +105,9 @@ $v-table-background-color: null !default;
 /**
  *
  *
- * @param {color} $context ($v-background-color) - 
+ * @param {color} $context ($v-background-color) -
  *
- * @return {color} - 
+ * @return {color} -
  *
  * @group table
  */
@@ -122,8 +122,8 @@ $v-table-background-color: null !default;
 /**
  *
  *
- * @param {string} $primary-stylename (v-table) - 
- * @param {bool} $include-additional-styles - 
+ * @param {string} $primary-stylename (v-table) -
+ * @param {bool} $include-additional-styles -
  *
  * @group table
  */
@@ -146,10 +146,6 @@ $v-table-background-color: null !default;
   .#{$primary-stylename}-footer table,
   .#{$primary-stylename}-table {
     @include box-shadow(0 0 0 $v-table-border-width $border-color);
-
-    .v-ie8 & {
-      outline: $v-table-border-width solid $border-color;
-    }
   }
 
   .#{$primary-stylename}-header-wrap,
@@ -196,13 +192,6 @@ $v-table-background-color: null !default;
     line-height: 1;
     min-height: $v-table-row-height;
     @include box-sizing(border-box);
-
-    .v-ie8 & {
-      // IE8 has issues with border-box and min-height
-      // -> custom calculations to subtract vertical padding from row height.
-      $vertical-padding: round(($v-table-row-height - $v-table-header-font-size)/2);
-      min-height: $v-table-row-height - ($vertical-padding - $v-table-border-width) - $vertical-padding;
-    }
   }
 
   .#{$primary-stylename}-footer-container {
@@ -519,10 +508,6 @@ $v-table-background-color: null !default;
       border-color: $v-focus-color;
     }
 
-    .v-ie8 & {
-      border-color: $v-focus-color;
-    }
-
     .#{$primary-stylename}-focus {
       outline: none;
     }
@@ -645,7 +630,7 @@ $v-table-background-color: null !default;
 /**
  *
  *
- * @param {string} $primary-stylename (v-table) - 
+ * @param {string} $primary-stylename (v-table) -
  *
  * @group table
  */
@@ -660,7 +645,7 @@ $v-table-background-color: null !default;
 /**
  *
  *
- * @param {string} $primary-stylename (v-table) - 
+ * @param {string} $primary-stylename (v-table) -
  *
  * @group table
  */
@@ -681,7 +666,7 @@ $v-table-background-color: null !default;
 /**
  *
  *
- * @param {string} $primary-stylename (v-table) - 
+ * @param {string} $primary-stylename (v-table) -
  *
  * @group table
  */
@@ -701,7 +686,7 @@ $v-table-background-color: null !default;
 /**
  *
  *
- * @param {string} $primary-stylename (v-table) - 
+ * @param {string} $primary-stylename (v-table) -
  *
  * @group table
  */
@@ -715,7 +700,7 @@ $v-table-background-color: null !default;
 /**
  *
  *
- * @param {string} $primary-stylename (v-table) - 
+ * @param {string} $primary-stylename (v-table) -
  *
  * @group table
  */
diff --git a/themes/src/main/themes/VAADIN/themes/valo/components/_tabsheet.scss b/themes/src/main/themes/VAADIN/themes/valo/components/_tabsheet.scss
index 07fdb4650b..472a793215 100644
--- a/themes/src/main/themes/VAADIN/themes/valo/components/_tabsheet.scss
+++ b/themes/src/main/themes/VAADIN/themes/valo/components/_tabsheet.scss
@@ -1,13 +1,13 @@
 /**
  * Should the tabsheet content changes be animated.
- * 
+ *
  * @group tabsheet
  */
 $v-tabsheet-content-animation-enabled: $v-animations-enabled !default;
 
 
 /**
- * Outputs the global selectors and properties for the TabSheet component - styles which are 
+ * Outputs the global selectors and properties for the TabSheet component - styles which are
  * considered mandatory for the component to work properly.
  *
  * @param {string} $primary-stylename (v-tabsheet) - the primary style name for the selectors
@@ -157,7 +157,7 @@ $v-tabsheet-content-animation-enabled: $v-animations-enabled !default;
 
 /**
  * Outputs the styles for the tabcontainer element of a tabsheet.
- * 
+ *
  * @group tabsheet
  */
 @mixin valo-tabsheet-tabcontainer-style ($primary-stylename: v-tabsheet) {
@@ -183,7 +183,7 @@ $v-tabsheet-content-animation-enabled: $v-animations-enabled !default;
 
 /**
  * Outputs the styles for the tabitemcell element of a tabsheet.
- * 
+ *
  * @group tabsheet
  */
 @mixin valo-tabsheet-tabitemcell-style ($primary-stylename: v-tabsheet) {
@@ -286,7 +286,7 @@ $v-tabsheet-content-animation-enabled: $v-animations-enabled !default;
 
 /**
  * Outputs the styles for the tab scroller element of a tabsheet.
- * 
+ *
  * @group tabsheet
  */
 @mixin valo-tabsheet-scroller-style ($primary-stylename: v-tabsheet) {
@@ -311,15 +311,6 @@ $v-tabsheet-content-animation-enabled: $v-animations-enabled !default;
     @include linear-gradient(to left, $border-color 70%, rgba($border-color, 0) 100%, $fallback: transparent);
   }
 
-  .v-ie8 &,
-  .v-ie9 & {
-    background-color: $v-background-color;
-
-    &:after {
-      background-color: $border-color;
-    }
-  }
-
   button {
     @include appearance(none);
     border: none;
@@ -374,7 +365,7 @@ $v-tabsheet-content-animation-enabled: $v-animations-enabled !default;
 
 /**
  * Outputs the font icon styles for the previous button element of a tabsheet scroller.
- * 
+ *
  * @group tabsheet
  */
 @mixin valo-tabsheet-scroller-prev-icon-style {
@@ -385,7 +376,7 @@ $v-tabsheet-content-animation-enabled: $v-animations-enabled !default;
 
 /**
  * Outputs the font icon styles for the next button element of a tabsheet scroller.
- * 
+ *
  * @group tabsheet
  */
 @mixin valo-tabsheet-scroller-next-icon-style {
@@ -396,12 +387,12 @@ $v-tabsheet-content-animation-enabled: $v-animations-enabled !default;
 
 /**
  * Outputs the styles for the framed tabsheet style.
- * 
+ *
  * @param {string} $primary-stylename (v-tabsheet) - The primary style name for the selectors
  * @param {bool} $frame-inactive-tabs (true) - Should inactive tabs be framed as well (the active tab is always framed with this style)
  * @param {bool} $outer-frame (true) - Should the frame contain the whole tabsheet (i.e. tabbar and tab content). If false, works like a "borderless" style.
  * @param {size} $tab-spacing ($v-unit-size/10) - The spacing between tabs
- * 
+ *
  * @group tabsheet
  */
 @mixin valo-tabsheet-framed-style ($primary-stylename: v-tabsheet, $frame-inactive-tabs: true, $outer-frame: true, $tab-spacing: round($v-unit-size/10)) {
@@ -493,10 +484,10 @@ $v-tabsheet-content-animation-enabled: $v-animations-enabled !default;
 
 /**
  * Outputs the styles for a tabsheet where the tabs are aligned to the position specified by the parameter in the tabbar.
- * 
+ *
  * @param {string} $primary-stylename (v-tabsheet) - The primary style name for the selectors
  * @param {string} $align (center) - The alignment of the tabs inside the tabbar. Possible values: left, right, center.
- * 
+ *
  * @group tabsheet
  */
 @mixin valo-tabsheet-align-tabs-style ($primary-stylename: v-tabsheet, $align: center) {
@@ -508,10 +499,10 @@ $v-tabsheet-content-animation-enabled: $v-animations-enabled !default;
 
 /**
  * Outputs the styles for a tabsheet where all tabs in the tabbar have equal width and span the entire width of the tabbar.
- * 
+ *
  * @param {string} $primary-stylename (v-tabsheet) - The primary style name for the selectors
  * @param {bool} $flex (false) - Should the size of the tabs be proportional to their content, i.e. should the available space in the tabbar be distributed to the tabs in relation to their content sizes.
- * 
+ *
  * @group tabsheet
  */
 @mixin valo-tabsheet-equal-width-tabs-style ($primary-stylename: v-tabsheet, $flex: false) {
@@ -543,9 +534,9 @@ $v-tabsheet-content-animation-enabled: $v-animations-enabled !default;
 
 /**
  * Outputs the styles for a tabsheet where the icons of individual tabs are on top of the tab captions.
- * 
+ *
  * @param {string} $primary-stylename (v-tabsheet) - The primary style name for the selectors
- *  
+ *
  * @group tabsheet
  */
 @mixin valo-tabsheet-icons-on-top-style ($primary-stylename: v-tabsheet) {
@@ -577,11 +568,11 @@ $v-tabsheet-content-animation-enabled: $v-animations-enabled !default;
 
 
 /**
- * Outputs the styles for a tabsheet where only the selected tab has the close button visible. 
+ * Outputs the styles for a tabsheet where only the selected tab has the close button visible.
  * Note that the other tabs can still be closed programmatically.
- * 
+ *
  * @param {string} $primary-stylename (v-tabsheet) - The primary style name for the selectors
- *  
+ *
  * @group tabsheet
  */
 @mixin valo-tabsheet-only-selected-closable-style ($primary-stylename: v-tabsheet) {
@@ -596,11 +587,11 @@ $v-tabsheet-content-animation-enabled: $v-animations-enabled !default;
 
 
 /**
- * Outputs the styles for a tabsheet where the tabbar has increased padding to separate the tabs 
+ * Outputs the styles for a tabsheet where the tabbar has increased padding to separate the tabs
  * inside it from their surrounding container.
- * 
+ *
  * @param {string} $primary-stylename (v-tabsheet) - The primary style name for the selectors
- *  
+ *
  * @group tabsheet
  */
 @mixin valo-tabsheet-padded-tabbar-style ($primary-stylename: v-tabsheet) {
diff --git a/themes/src/main/themes/VAADIN/themes/valo/components/_textarea.scss b/themes/src/main/themes/VAADIN/themes/valo/components/_textarea.scss
index d600bc14c2..ee71802648 100644
--- a/themes/src/main/themes/VAADIN/themes/valo/components/_textarea.scss
+++ b/themes/src/main/themes/VAADIN/themes/valo/components/_textarea.scss
@@ -111,10 +111,4 @@
   resize: none;
   white-space: pre-wrap; // Restore default, because .v-widget sets it to normal
 
-  .v-ie8 &,
-  .v-ie9 & {
-    line-height: inherit;
-    padding-top: round($unit-size/9);
-    padding-bottom: round($unit-size/9);
-  }
 }
diff --git a/themes/src/main/themes/VAADIN/themes/valo/components/_textfield.scss b/themes/src/main/themes/VAADIN/themes/valo/components/_textfield.scss
index 50cb7b8042..a460ba4ca8 100644
--- a/themes/src/main/themes/VAADIN/themes/valo/components/_textfield.scss
+++ b/themes/src/main/themes/VAADIN/themes/valo/components/_textfield.scss
@@ -166,13 +166,6 @@ $v-textfield-disabled-opacity: $v-disabled-opacity !default;
     height: $unit-size;
     border-radius: $border-radius;
 
-    .v-ie8 &,
-    .v-ie9 & {
-      line-height: $unit-size;
-      padding-top: 0;
-      padding-bottom: 0;
-    }
-
     @if type-of($padding) == number or type-of($padding) == list {
       padding: $padding;
     } @else {
@@ -227,9 +220,9 @@ $v-textfield-disabled-opacity: $v-disabled-opacity !default;
 
 /**
  * Outputs the styles for a text field input prompt.
- * 
+ *
  * @param {color} $background-color ($v-textfield-background-color) - The background color of the text field
- * 
+ *
  * @group textfield
  */
 @mixin valo-textfield-prompt-style ($background-color: $v-textfield-background-color) {
@@ -250,12 +243,12 @@ $v-textfield-disabled-opacity: $v-disabled-opacity !default;
 
 /**
  * Outputs the styles for a text field focus state.
- * 
+ *
  * @param {list} $bevel ($v-textfield-bevel) - Box-shadow value according to $v-bevel documentation
  * @param {list} $shadow ($v-textfield-shadow) - Box-shadow value according to $v-shadow documentation
  * @param {color} $background-color ($v-textfield-background-color) - The background color of the text field
  * @param {list} $gradient (null) - Valo specific gradient value. See the documentation for $v-gradient.
- * 
+ *
  * @group textfield
  */
 @mixin valo-textfield-focus-style ($bevel: $v-textfield-bevel, $shadow: $v-textfield-shadow, $background-color: $v-textfield-background-color, $gradient: null) {
@@ -278,7 +271,7 @@ $v-textfield-disabled-opacity: $v-disabled-opacity !default;
 
 /**
  * Outputs the styles for a read-only text field.
- * 
+ *
  * @group textfield
  */
 @mixin valo-textfield-readonly-style {
@@ -294,9 +287,9 @@ $v-textfield-disabled-opacity: $v-disabled-opacity !default;
 
 /**
  * Outputs the styles for a borderless style text field.
- * 
+ *
  * @param {color} $background-color (transparent) - The background color of the text field
- * 
+ *
  * @group textfield
  */
 @mixin valo-textfield-borderless-style ($background-color: transparent) {
@@ -323,7 +316,7 @@ $v-textfield-disabled-opacity: $v-disabled-opacity !default;
 
 /**
  * Outputs the styles for a text field error state.
- * 
+ *
  * @group textfield
  */
 @mixin valo-textfield-error-style {
@@ -335,15 +328,15 @@ $v-textfield-disabled-opacity: $v-disabled-opacity !default;
 
 
 /**
- * Outputs the selectors and styles for an inline-icon style for a text field. Included indipendently (i.e. not enclosed with a parent text field selector). 
- * 
+ * Outputs the selectors and styles for an inline-icon style for a text field. Included indipendently (i.e. not enclosed with a parent text field selector).
+ *
  * @param {string} $primary-stylename (v-textfield) - The primary style name for the selectors
  * @param {string | list} $stylenames (inline-icon) - The additional style names which will define the inline-icon style
  * @param {string} $input-selector (null) - Additional selector for a nested input element which should be targeted
  * @param {size} $unit-size ($v-unit-size) - The unit size which the resulting style will support
  * @param {size} $font-size ($v-font-size) - The font size which the resulting style will support (needed for font icons)
  * @param {size} $image-icon-size (16px) - The image icon height which the resulting style will support (needed to center the icon vertically inside the text field)
- * 
+ *
  * @group text field
  */
 @mixin valo-textfield-inline-icon($primary-stylename: v-textfield, $stylenames: inline-icon, $input-selector: null, $unit-size: $v-unit-size, $font-size: $v-font-size, $image-icon-size: 16px) {
diff --git a/themes/src/main/themes/VAADIN/themes/valo/components/_tree.scss b/themes/src/main/themes/VAADIN/themes/valo/components/_tree.scss
index 95ae8d3b5e..0241fe97c8 100644
--- a/themes/src/main/themes/VAADIN/themes/valo/components/_tree.scss
+++ b/themes/src/main/themes/VAADIN/themes/valo/components/_tree.scss
@@ -41,7 +41,7 @@ $v-tree-expand-animation-enabled: false !default;
 /**
  *
  *
- * @param {string} $primary-stylename (v-tree) - 
+ * @param {string} $primary-stylename (v-tree) -
  *
  * @group tree
  */
@@ -70,18 +70,6 @@ $v-tree-expand-animation-enabled: false !default;
       background: red;
       opacity: 0;
 
-      .v-ie8 & {
-        position: static;
-        margin-left: -1.9em;
-        vertical-align: top;
-        @include valo-tree-collapsed-icon-style;
-        text-align: center;
-        background: transparent;
-      }
-    }
-
-    .v-ie8 & {
-      padding-left: 1.9em;
     }
   }
 
@@ -110,10 +98,6 @@ $v-tree-expand-animation-enabled: false !default;
         @if $v-tree-animations-enabled {
           @include transition(all 100ms);
         }
-
-        .v-ie8 & {
-          display: none;
-        }
       }
     }
 
@@ -153,14 +137,8 @@ $v-tree-expand-animation-enabled: false !default;
         @include transition(opacity 120ms);
       }
 
-      .v-ie8 & {
-        content: none;
-      }
     }
 
-    .v-ie8 & {
-      display: inline-block;
-    }
   }
 
   .#{$primary-stylename}-node-expanded > .#{$primary-stylename}-node-caption > div:before {
@@ -172,10 +150,6 @@ $v-tree-expand-animation-enabled: false !default;
     }
   }
 
-  .v-ie8 & .#{$primary-stylename}-node-expanded:before {
-    @include valo-tree-expanded-icon-style(true);
-  }
-
   .#{$primary-stylename}-node-leaf:before,
   .#{$primary-stylename}-node-leaf > .#{$primary-stylename}-node-caption > div:before {
     visibility: hidden;
@@ -188,9 +162,6 @@ $v-tree-expand-animation-enabled: false !default;
       border: 1px solid $v-focus-color;
     }
 
-    .v-ie8 & {
-      outline: 1px dotted $v-focus-color;
-    }
   }
 
 
@@ -205,22 +176,13 @@ $v-tree-expand-animation-enabled: false !default;
       @include valo-gradient($v-selection-color);
       border: none;
 
-      .v-ie8 & {
-        //visibility: visible;
-      }
     }
 
-    .v-ie8 & {
-      @include valo-gradient($v-selection-color);
-    }
   }
 
   .#{$primary-stylename}-node-children {
     padding-left: round($v-unit-size/2);
 
-    .v-ie8 & {
-      padding-left: 0;
-    }
   }
 
   @if $v-tree-expand-animation-enabled {
@@ -265,9 +227,6 @@ $v-tree-expand-animation-enabled: false !default;
     position: relative;
     border-radius: $v-border-radius;
 
-    .v-ie8 & {
-      outline: 2px solid $v-focus-color;
-    }
   }
 
   .v-ff & .#{$primary-stylename}-node-drag-top:before,
@@ -275,10 +234,6 @@ $v-tree-expand-animation-enabled: false !default;
     line-height: 1px;
   }
 
-  .v-ie8 & .#{$primary-stylename}-node-drag-top:before,
-  .v-ie8 & .#{$primary-stylename}-node-drag-bottom:after {
-    line-height: 0;
-  }
 }
 
 
@@ -296,7 +251,7 @@ $v-tree-expand-animation-enabled: false !default;
 /**
  *
  *
- * @param {bool} $force (false) - 
+ * @param {bool} $force (false) -
  *
  * @group tree
  */
diff --git a/themes/src/main/themes/VAADIN/themes/valo/components/_window.scss b/themes/src/main/themes/VAADIN/themes/valo/components/_window.scss
index 0b01949593..ba3d075bcf 100644
--- a/themes/src/main/themes/VAADIN/themes/valo/components/_window.scss
+++ b/themes/src/main/themes/VAADIN/themes/valo/components/_window.scss
@@ -47,7 +47,7 @@ $v-window-modality-curtain-background-color: #222 !default;
 /**
  *
  *
- * @param {string} $primary-stylename (v-window) - 
+ * @param {string} $primary-stylename (v-window) -
  *
  * @group window
  */
@@ -291,16 +291,6 @@ $v-window-modality-curtain-background-color: #222 !default;
     width: round($v-unit-size/2);
     height: round($v-unit-size/2);
     cursor: nwse-resize;
-
-    .v-ie8 & {
-      background: #000;
-      filter: alpha(opacity=0.1);
-    }
-
-    .v-ie8 &,
-    .v-ie9 & {
-      cursor: se-resize;
-    }
   }
 
 
diff --git a/themes/src/main/themes/VAADIN/themes/valo/shared/_global.scss b/themes/src/main/themes/VAADIN/themes/valo/shared/_global.scss
index 55de987120..3c4761ad32 100644
--- a/themes/src/main/themes/VAADIN/themes/valo/shared/_global.scss
+++ b/themes/src/main/themes/VAADIN/themes/valo/shared/_global.scss
@@ -63,7 +63,7 @@ $valo-global-included: false !default;
         @include user-select(text);
       }
 
-      // Removes clear button from input fields introduced by IE10
+      // Removes clear button from input fields
       input::-ms-clear {
         display: none;
       }
@@ -282,32 +282,6 @@ $valo-shared-pathPrefix: null;
   @include valo-loading-bar;
 
 
-  // Fallback spinner for browsers without CSS animations
-  .v-ie8 &,
-  .v-ie9 & {
-    .v-loading-indicator,
-    .v-loading-indicator-delay,
-    .v-loading-indicator-wait {
-      width: 28px !important;
-      height: 28px;
-      padding: round($v-unit-size/4);
-      background: #fff url(#{$valo-shared-pathPrefix}img/spinner.gif) no-repeat 50%;
-      border-radius: $v-border-radius;
-      top: round($v-unit-size/4);
-      right: round($v-unit-size/4);
-      left: auto;
-      filter: alpha(opacity=50);
-
-      &[style*="none"] {
-        display: none !important;
-      }
-    }
-
-    .v-loading-indicator-wait {
-      filter: alpha(opacity=100);
-    }
-  }
-
   .v-scrollable:focus {
     outline: none;
   }
diff --git a/themes/src/main/themes/VAADIN/themes/valo/shared/_loading-indicator.scss b/themes/src/main/themes/VAADIN/themes/valo/shared/_loading-indicator.scss
index 645e188b09..0df2e99f94 100644
--- a/themes/src/main/themes/VAADIN/themes/valo/shared/_loading-indicator.scss
+++ b/themes/src/main/themes/VAADIN/themes/valo/shared/_loading-indicator.scss
@@ -32,21 +32,6 @@
   border-radius: 100%;
   @include animation(v-rotate-360 $speed infinite linear);
   pointer-events: none;
-
-  // No CSS animation in IE8 and IE9
-  .v-ie8 &,
-  .v-ie9 & {
-    border: none;
-    border-radius: $v-border-radius;
-    background: #fff url(#{$valo-shared-pathPrefix}img/spinner.gif) no-repeat 50% 50%;
-    background-size: 80%;
-  }
-
-  // No background-size for IE8
-  .v-ie8 & {
-    min-width: 30px;
-    min-height: 30px;
-  }
 }
 
 
diff --git a/themes/src/main/themes/VAADIN/themes/valo/shared/_overlay.scss b/themes/src/main/themes/VAADIN/themes/valo/shared/_overlay.scss
index 926b00f529..5af159b4ff 100644
--- a/themes/src/main/themes/VAADIN/themes/valo/shared/_overlay.scss
+++ b/themes/src/main/themes/VAADIN/themes/valo/shared/_overlay.scss
@@ -186,29 +186,6 @@ $v-selection-item-selection-color: $v-selection-color !default;
 .v-shadow,
 .v-shadow-window {
   display: none;
-
-  // In IE8 windows get the same shadow as other overlays
-  .v-ie8 & {
-    display: block;
-
-    // Up to 8 shadows are supported
-    $elements: top, top-left, top-right, left, right, bottom, bottom-left, bottom-right;
-    $shadows: valo-bevel-and-shadow($shadow: $v-overlay-shadow);
-
-    @if type-of(last($shadows)) == color {
-      @include valo-ie8-shadow($shadows);
-    } @else {
-      @for $i from 1 through min(length($elements), length($shadows)) {
-        $shadow: nth($shadows, $i);
-        @if length($shadow) == 2 {
-          $shadow: flatten-list($shadow); // Workaround for a weird issue when sometimes a shadow is appended to a null list
-        }
-        @if length($shadow) > 3 {
-          @include valo-ie8-shadow($shadow: $shadow, $element: nth($elements, $i));
-        }
-      }
-    }
-  }
 }
 
 
diff --git a/themes/src/main/themes/VAADIN/themes/valo/shared/_tooltip.scss b/themes/src/main/themes/VAADIN/themes/valo/shared/_tooltip.scss
index 3c9c914499..e0c24c8b65 100644
--- a/themes/src/main/themes/VAADIN/themes/valo/shared/_tooltip.scss
+++ b/themes/src/main/themes/VAADIN/themes/valo/shared/_tooltip.scss
@@ -125,7 +125,6 @@ $v-tooltip-border-radius: $v-border-radius - 1px !default;
  * @group tooltip
  */
 @mixin valo-tooltip-style {
-  background-color: opacify($v-tooltip-background-color, 1);  // For IE8
   background-color: $v-tooltip-background-color;
   @include box-shadow($v-tooltip-box-shadow);
   color: $v-tooltip-font-color;
-- 
2.39.5