Fixed browser specific theme selectors (#10362)

Browser specific class names are set on the body element and the theme class name is inside body. Theme selectors must therefore be of type ".v-ie & "

Change-Id: I1893946ed9b5441a6977945a757a85ae87c07ce8

13 files changed, 65 insertions, 65 deletions

diff --git a/WebContent/VAADIN/themes/reindeer/accordion/accordion.scss b/WebContent/VAADIN/themes/reindeer/accordion/accordion.scss
index 64190b8820..2646bfaa8b 100644
--- a/WebContent/VAADIN/themes/reindeer/accordion/accordion.scss
+++ b/WebContent/VAADIN/themes/reindeer/accordion/accordion.scss
@@ -30,7 +30,7 @@
 .#{$primaryStyleName}-item-caption .v-caption {
 	padding: 3px 0 5px 10px;
 }
-.v-ie .#{$primaryStyleName}-item-caption .v-caption {
+.v-ie & .#{$primaryStyleName}-item-caption .v-caption {
 	padding: 2px 0 6px 10px;
 }
 .#{$primaryStyleName}-item-open .#{$primaryStyleName}-item-caption {
@@ -40,7 +40,7 @@
 .#{$primaryStyleName}-item-caption .v-icon {
 	margin-top: -1px;
 }
-.v-ie .#{$primaryStyleName}-item-caption .v-icon {
+.v-ie & .#{$primaryStyleName}-item-caption .v-icon {
 	vertical-align: top;
 }
 /* Borderless style */
diff --git a/WebContent/VAADIN/themes/reindeer/button/button-ie.scss b/WebContent/VAADIN/themes/reindeer/button/button-ie.scss
index e0d6c35091..6732aeb2aa 100644
--- a/WebContent/VAADIN/themes/reindeer/button/button-ie.scss
+++ b/WebContent/VAADIN/themes/reindeer/button/button-ie.scss
@@ -1,6 +1,6 @@
 @mixin reindeer-button-ie($primaryStyleName : v-nativebutton) {
 
-.v-ie8 .#{$primaryStyleName}-link {
+.v-ie8 & .#{$primaryStyleName}-link {
 	padding: 0;
 	text-align: left;
 }
diff --git a/WebContent/VAADIN/themes/reindeer/common/common.scss b/WebContent/VAADIN/themes/reindeer/common/common.scss
index f06a7a7638..5e85cb09bc 100644
--- a/WebContent/VAADIN/themes/reindeer/common/common.scss
+++ b/WebContent/VAADIN/themes/reindeer/common/common.scss
@@ -99,7 +99,7 @@
 	color: #fff;
 	text-shadow: #3b5a7a 0 1px 0;
 }
-.v-ie .v-contextmenu .gwt-MenuItem-selected {
+.v-ie & .v-contextmenu .gwt-MenuItem-selected {
 	background-image: url(img/sel-bg.png);
 	background-position: left top;
 }
diff --git a/WebContent/VAADIN/themes/reindeer/datefield/datefield.scss b/WebContent/VAADIN/themes/reindeer/datefield/datefield.scss
index 0969be3532..83761ba1ff 100644
--- a/WebContent/VAADIN/themes/reindeer/datefield/datefield.scss
+++ b/WebContent/VAADIN/themes/reindeer/datefield/datefield.scss
@@ -79,10 +79,10 @@ td.#{$primaryStyleName}-calendarpanel-nextyear {
 	-moz-border-radius: 0;
 	border-radius: 0;
 }
-.v-ie .#{$primaryStyleName}-calendarpanel-prevyear button,
-.v-ie .#{$primaryStyleName}-calendarpanel-nextyear button,
-.v-ie .#{$primaryStyleName}-calendarpanel-prevmonth button,
-.v-ie .#{$primaryStyleName}-calendarpanel-nextmonth button {
+.v-ie & .#{$primaryStyleName}-calendarpanel-prevyear button,
+.v-ie & .#{$primaryStyleName}-calendarpanel-nextyear button,
+.v-ie & .#{$primaryStyleName}-calendarpanel-prevmonth button,
+.v-ie & .#{$primaryStyleName}-calendarpanel-nextmonth button {
 	text-indent: 0;
 	font-size: 1px;
 }
@@ -91,11 +91,11 @@ td.#{$primaryStyleName}-calendarpanel-nextyear {
 	background-image: url(img/year-next.png); /** sprite-ref: verticals */
 }
 .#{$primaryStyleName}-calendarpanel-prevyear button:active,
-.v-ie .#{$primaryStyleName}-calendarpanel-prevyear button.v-pressed {
+.v-ie & .#{$primaryStyleName}-calendarpanel-prevyear button.v-pressed {
 	background-image: url(img/year-prev-pressed.png); /** sprite-ref: verticals */
 }
 .#{$primaryStyleName}-calendarpanel-nextyear button:active,
-.v-ie .#{$primaryStyleName}-calendarpanel-nextyear button.v-pressed  {
+.v-ie & .#{$primaryStyleName}-calendarpanel-nextyear button.v-pressed  {
 	background-image: url(img/year-next-pressed.png); /** sprite-ref: verticals */
 }
 .#{$primaryStyleName}-calendarpanel-prevmonth,
@@ -116,20 +116,20 @@ td.#{$primaryStyleName}-calendarpanel-nextyear {
 	min-width: 24px;
 	margin-top: 1px;
 }
-.v-ie .#{$primaryStyleName}-calendarpanel-prevmonth button,
-.v-ie .#{$primaryStyleName}-calendarpanel-nextmonth button {
+.v-ie & .#{$primaryStyleName}-calendarpanel-prevmonth button,
+.v-ie & .#{$primaryStyleName}-calendarpanel-nextmonth button {
 	border: none;
 }
 .#{$primaryStyleName}-calendarpanel-nextmonth button {
 	background-image: url(img/month-next.png); /** sprite-ref: verticals; sprite-alignment: center */
 }
 .#{$primaryStyleName}-calendarpanel-prevmonth button:active,
-.v-ie .#{$primaryStyleName}-calendarpanel-prevmonth button.v-pressed {
+.v-ie & .#{$primaryStyleName}-calendarpanel-prevmonth button.v-pressed {
 	background-position: center top;
 	background-image: url(img/month-prev-pressed.png); /** sprite-ref: verticals; sprite-alignment: center */
 }
 .#{$primaryStyleName}-calendarpanel-nextmonth button:active,
-.v-ie .#{$primaryStyleName}-calendarpanel-nextmonth button.v-pressed {
+.v-ie & .#{$primaryStyleName}-calendarpanel-nextmonth button.v-pressed {
 	background-position: center top;
 	background-image: url(img/month-next-pressed.png); /** sprite-ref: verticals; sprite-alignment: center */
 }
@@ -178,14 +178,14 @@ td.#{$primaryStyleName}-calendarpanel-nextyear {
 	background-image: url(img/weekday-last.png); /** sprite-ref: verticals; sprite-alignment: right; sprite-margin-bottom: 3px */
 }
 /* IE fails to position backgrounds inside table element */
-.v-ie .#{$primaryStyleName}-calendarpanel-weekdays td {
+.v-ie & .#{$primaryStyleName}-calendarpanel-weekdays td {
 	background: url(img/weekday-bg.png) repeat-x;
 	background-position: left top;
 }
-.v-ie .#{$primaryStyleName}-calendarpanel .v-first {
+.v-ie & .#{$primaryStyleName}-calendarpanel .v-first {
 	background: url(img/weekday-first.png) no-repeat;
 }
-.v-ie .#{$primaryStyleName}-calendarpanel .v-last {
+.v-ie & .#{$primaryStyleName}-calendarpanel .v-last {
 	background: url(img/weekday-last.png) no-repeat right top;
 }
 .#{$primaryStyleName}-calendarpanel-body td {
@@ -228,8 +228,8 @@ td.#{$primaryStyleName}-calendarpanel-nextyear {
 	-webkit-border-radius: 3px;
 	-moz-border-radius: 3px;
 }
-.v-sa .#{$primaryStyleName}-popup,
-.v-op .#{$primaryStyleName}-popup {
+.v-sa & .#{$primaryStyleName}-popup,
+.v-op & .#{$primaryStyleName}-popup {
 	background: rgba(255,255,255,.95);
 }
 .v-has-width > input.#{$primaryStyleName}-textfield {
@@ -321,11 +321,11 @@ td.#{$primaryStyleName}-calendarpanel-nextyear {
 	background-image: url(img/year-next-black.png); /** sprite-ref: black-verticals */
 }
 .black .#{$primaryStyleName}-calendarpanel-prevyear button:active,
-.v-ie .black .#{$primaryStyleName}-calendarpanel-prevyear button.v-pressed {
+.v-ie & .black .#{$primaryStyleName}-calendarpanel-prevyear button.v-pressed {
 	background-image: url(img/year-prev-black-pressed.png); /** sprite-ref: black-verticals */
 }
 .black .#{$primaryStyleName}-calendarpanel-nextyear button:active,
-.v-ie .black .#{$primaryStyleName}-calendarpanel-nextyear button.v-pressed  {
+.v-ie & .black .#{$primaryStyleName}-calendarpanel-nextyear button.v-pressed  {
 	background-image: url(img/year-next-black-pressed.png); /** sprite-ref: black-verticals */
 }
 .black .#{$primaryStyleName}-calendarpanel-prevmonth,
@@ -343,15 +343,15 @@ td.#{$primaryStyleName}-calendarpanel-nextyear {
 	background-image: url(img/month-next-black.png); /** sprite-ref: black-verticals; sprite-alignment: center */
 }
 .black .#{$primaryStyleName}-calendarpanel-prevmonth button:active,
-.v-ie .black .#{$primaryStyleName}-calendarpanel-prevmonth button.v-pressed {
+.v-ie & .black .#{$primaryStyleName}-calendarpanel-prevmonth button.v-pressed {
 	background-image: url(img/month-prev-black-pressed.png); /** sprite-ref: black-verticals; sprite-alignment: center */
 }
 .black .#{$primaryStyleName}-calendarpanel-nextmonth button:active,
-.v-ie .black .#{$primaryStyleName}-calendarpanel-nextmonth button.v-pressed {
+.v-ie & .black .#{$primaryStyleName}-calendarpanel-nextmonth button.v-pressed {
 	background-image: url(img/month-next-black-pressed.png); /** sprite-ref: black-verticals; sprite-alignment: center */
 }
-.v-ie .black .#{$primaryStyleName}-calendarpanel-prevmonth button,
-.v-ie .black .#{$primaryStyleName}-calendarpanel-nextmonth button {
+.v-ie & .black .#{$primaryStyleName}-calendarpanel-prevmonth button,
+.v-ie & .black .#{$primaryStyleName}-calendarpanel-nextmonth button {
 	border: none;
 }
 .black .#{$primaryStyleName}-calendarpanel-weekdays td {
diff --git a/WebContent/VAADIN/themes/reindeer/label/label.scss b/WebContent/VAADIN/themes/reindeer/label/label.scss
index 68b0d58eb0..9a6f9b33ad 100644
--- a/WebContent/VAADIN/themes/reindeer/label/label.scss
+++ b/WebContent/VAADIN/themes/reindeer/label/label.scss
@@ -113,8 +113,8 @@
 	border-bottom: 1px solid #fff;
 }
 
-.v-sa .#{$primaryStyleName} hr,
-.v-ie8 .#{$primaryStyleName} hr {
+.v-sa & .#{$primaryStyleName} hr,
+.v-ie8 & .#{$primaryStyleName} hr {
 	height: 1px;
 }
 
diff --git a/WebContent/VAADIN/themes/reindeer/notification/notification.scss b/WebContent/VAADIN/themes/reindeer/notification/notification.scss
index 6eb53dc70a..4884f19f8b 100644
--- a/WebContent/VAADIN/themes/reindeer/notification/notification.scss
+++ b/WebContent/VAADIN/themes/reindeer/notification/notification.scss
@@ -10,7 +10,7 @@
 	font-weight: bold;
 }
 
-.v-ie9 .#{$primaryStyleName} H1 {
+.v-ie9 & .#{$primaryStyleName} H1 {
 	/* Fix for #6793 */
 	font-weight: bold;
 }
diff --git a/WebContent/VAADIN/themes/reindeer/panel/panel.scss b/WebContent/VAADIN/themes/reindeer/panel/panel.scss
index 8de6ea7f62..b095fb4ffb 100644
--- a/WebContent/VAADIN/themes/reindeer/panel/panel.scss
+++ b/WebContent/VAADIN/themes/reindeer/panel/panel.scss
@@ -12,12 +12,12 @@
 	border-bottom: 1px solid #e5e5e5;
 	line-height: 16px; /* accommodate minimum icon size */
 }
-.v-webkit .#{$primaryStyleName}-caption,
-.v-webkit .#{$primaryStyleName}-nocaption,
-.v-gecko .#{$primaryStyleName}-caption,
-.v-gecko .#{$primaryStyleName}-nocaption,
-.v-ie9 .#{$primaryStyleName}-caption,
-.v-ie9 .#{$primaryStyleName}-nocaption {
+.v-webkit & .#{$primaryStyleName}-caption,
+.v-webkit & .#{$primaryStyleName}-nocaption,
+.v-gecko & .#{$primaryStyleName}-caption,
+.v-gecko & .#{$primaryStyleName}-nocaption,
+.v-ie9 & .#{$primaryStyleName}-caption,
+.v-ie9 & .#{$primaryStyleName}-nocaption {
 	border-bottom-color: rgba(0,0,0,.08);
 }
 .#{$primaryStyleName}-caption {
@@ -30,9 +30,9 @@
 	border-bottom: none;
 	border-top: none;
 }
-.v-webkit .#{$primaryStyleName}-content,
-.v-gecko .#{$primaryStyleName}-content,
-.v-ie9 .#{$primaryStyleName}-content {
+.v-webkit & .#{$primaryStyleName}-content,
+.v-gecko & .#{$primaryStyleName}-content,
+.v-ie9 & .#{$primaryStyleName}-content {
 	border-top-color: rgba(0,0,0,.07);
 }
 .blue .#{$primaryStyleName}-deco {
@@ -46,9 +46,9 @@
 	background: #e2e2e2;
 	overflow: hidden;
 }
-.v-webkit .#{$primaryStyleName}-deco,
-.v-gecko .#{$primaryStyleName}-deco,
-.v-ie9 .#{$primaryStyleName}-deco {
+.v-webkit & .#{$primaryStyleName}-deco,
+.v-gecko & .#{$primaryStyleName}-deco,
+.v-ie9 & .#{$primaryStyleName}-deco {
 	border-top-color: rgba(0,0,0,.1);
 	background: rgba(0,0,0,.08);
 }
diff --git a/WebContent/VAADIN/themes/reindeer/select/select.scss b/WebContent/VAADIN/themes/reindeer/select/select.scss
index 1785a367e6..e902458ad1 100644
--- a/WebContent/VAADIN/themes/reindeer/select/select.scss
+++ b/WebContent/VAADIN/themes/reindeer/select/select.scss
@@ -84,7 +84,7 @@
 	-webkit-user-select: none;
 	cursor: default;
 }
-.v-ff .#{$primaryStyleName}-suggestmenu .gwt-MenuItem {
+.v-ff & .#{$primaryStyleName}-suggestmenu .gwt-MenuItem {
 	height: 18px;
 }
 .#{$primaryStyleName}-suggestmenu .gwt-MenuItem .v-icon {
@@ -170,28 +170,28 @@
 	-webkit-user-select: none;
 }
 /* IE fails to position background images properly inside table elements */
-.v-ie .#{$primaryStyleName}-suggestmenu .gwt-MenuItem-selected {
+.v-ie & .#{$primaryStyleName}-suggestmenu .gwt-MenuItem-selected {
 	background: transparent url(../common/img/sel-bg.png) repeat-x;
 }
-.v-ie .#{$primaryStyleName}-nextpage:hover {
+.v-ie & .#{$primaryStyleName}-nextpage:hover {
 	background: transparent url(img/page-down-hover.png) repeat-x;
 }
-.v-ie .#{$primaryStyleName}-prevpage:hover {
+.v-ie & .#{$primaryStyleName}-prevpage:hover {
 	background: transparent url(img/page-up-hover.png) repeat-x;
 }
-.v-ie .#{$primaryStyleName}-prevpage span {
+.v-ie & .#{$primaryStyleName}-prevpage span {
 	background: transparent url(img/arrow-up.png) no-repeat center 3px;
 }
-.v-ie .#{$primaryStyleName}-nextpage span {
+.v-ie & .#{$primaryStyleName}-nextpage span {
 	background: transparent url(img/arrow-down.png) no-repeat center 3px;
 }
-.v-ie .#{$primaryStyleName}-prevpage:hover span {
+.v-ie & .#{$primaryStyleName}-prevpage:hover span {
 	background: transparent url(img/arrow-up-hover.png) no-repeat center 3px;
 }
-.v-ie .#{$primaryStyleName}-nextpage:hover span {
+.v-ie & .#{$primaryStyleName}-nextpage:hover span {
 	background: transparent url(img/arrow-down-hover.png) no-repeat center 3px;
 }
-.v-ie .#{$primaryStyleName}-status {
+.v-ie & .#{$primaryStyleName}-status {
 	background: transparent url(img/status-bg.png) repeat-x;
 }
 /* Filterselect with icon needs a similar fix than in buttons */
diff --git a/WebContent/VAADIN/themes/reindeer/table/table.scss b/WebContent/VAADIN/themes/reindeer/table/table.scss
index c2ada54e34..5896bef014 100644
--- a/WebContent/VAADIN/themes/reindeer/table/table.scss
+++ b/WebContent/VAADIN/themes/reindeer/table/table.scss
@@ -61,8 +61,8 @@
 	margin: -4px 3px 0 0;
 	vertical-align: middle;
 }
-.v-ie .#{$primaryStyleName}-caption-container .v-icon,
-.v-ie .#{$primaryStyleName}-header-drag .v-icon {
+.v-ie & .#{$primaryStyleName}-caption-container .v-icon,
+.v-ie & .#{$primaryStyleName}-header-drag .v-icon {
 	margin-top: -3px;
 }
 .#{$primaryStyleName}-resizer {
diff --git a/WebContent/VAADIN/themes/reindeer/tabsheet/tabsheet-minimal-style.scss b/WebContent/VAADIN/themes/reindeer/tabsheet/tabsheet-minimal-style.scss
index 7b6ed54c02..75ce9e1094 100644
--- a/WebContent/VAADIN/themes/reindeer/tabsheet/tabsheet-minimal-style.scss
+++ b/WebContent/VAADIN/themes/reindeer/tabsheet/tabsheet-minimal-style.scss
@@ -107,7 +107,7 @@
 .#{$primaryStyleName}-tabs-minimal .#{$primaryStyleName}-caption-close {
 	margin-top: 1px;
 }
-.v-ff .#{$primaryStyleName}-tabs-minimal .#{$primaryStyleName}-caption-close {
+.v-ff & .#{$primaryStyleName}-tabs-minimal .#{$primaryStyleName}-caption-close {
 	margin-top: -15px;
 }
 .#{$primaryStyleName}-tabs-minimal .#{$primaryStyleName}-caption-close:hover,
diff --git a/WebContent/VAADIN/themes/reindeer/tabsheet/tabsheet-normal-style.scss b/WebContent/VAADIN/themes/reindeer/tabsheet/tabsheet-normal-style.scss
index c13bb6f025..172c735933 100644
--- a/WebContent/VAADIN/themes/reindeer/tabsheet/tabsheet-normal-style.scss
+++ b/WebContent/VAADIN/themes/reindeer/tabsheet/tabsheet-normal-style.scss
@@ -104,7 +104,7 @@
 .#{$primaryStyleName}-tabsheetpanel {
 	background: #fff;
 }
-.v-sa .#{$primaryStyleName}-content {
+.v-sa & .#{$primaryStyleName}-content {
 	border-color: rgba(0,0,0,.1);
 }
 .blue .#{$primaryStyleName}-deco {
@@ -118,7 +118,7 @@
 	background: #e2e2e2;
 	overflow: hidden;
 }
-.v-sa .#{$primaryStyleName}-deco {
+.v-sa & .#{$primaryStyleName}-deco {
 	border-top-color: rgba(0,0,0,.1);
 	background: rgba(0,0,0,.08);
 }
@@ -132,7 +132,7 @@
 	display: inline;
 	float: none;
 }
-.v-sa .#{$primaryStyleName}-tabs .v-captiontext {
+.v-sa & .#{$primaryStyleName}-tabs .v-captiontext {
 	display: inline-block;
 }
 .#{$primaryStyleName}-tabs .v-icon {
@@ -145,12 +145,12 @@
 	height: 16px;
 	background: transparent url(../common/icons/error.png) no-repeat 50%;
 }
-.v-ie .#{$primaryStyleName}-tabs .v-errorindicator {
+.v-ie & .#{$primaryStyleName}-tabs .v-errorindicator {
 	zoom: 1;
 	display: inline;
 }
-.v-ie8 .#{$primaryStyleName}-tabs .v-errorindicator,
-.v-ie9 .#{$primaryStyleName}-tabs .v-errorindicator {
+.v-ie8 & .#{$primaryStyleName}-tabs .v-errorindicator,
+.v-ie9 & .#{$primaryStyleName}-tabs .v-errorindicator {
 	display: inline-block;
 }
 
diff --git a/WebContent/VAADIN/themes/reindeer/tabsheet/tabsheet-small-style.scss b/WebContent/VAADIN/themes/reindeer/tabsheet/tabsheet-small-style.scss
index de0c29d516..2f1d0c7081 100644
--- a/WebContent/VAADIN/themes/reindeer/tabsheet/tabsheet-small-style.scss
+++ b/WebContent/VAADIN/themes/reindeer/tabsheet/tabsheet-small-style.scss
@@ -52,7 +52,7 @@
 .#{$primaryStyleName}-tabs-bar .#{$primaryStyleName}-caption-close {
 	margin-top: 1px;
 }
-.v-ff .#{$primaryStyleName}-tabs-bar .#{$primaryStyleName}-caption-close {
+.v-ff & .#{$primaryStyleName}-tabs-bar .#{$primaryStyleName}-caption-close {
 	margin-top: -14px;
 }
 .#{$primaryStyleName}-tabs-bar .#{$primaryStyleName}-caption-close:hover {
diff --git a/WebContent/VAADIN/themes/reindeer/window/window.scss b/WebContent/VAADIN/themes/reindeer/window/window.scss
index 7ba6b01675..073980e6d9 100644
--- a/WebContent/VAADIN/themes/reindeer/window/window.scss
+++ b/WebContent/VAADIN/themes/reindeer/window/window.scss
@@ -9,8 +9,8 @@
 	-moz-box-sizing: border-box;
 	box-sizing: border-box;
 }
-.v-sa .#{$primaryStyleName}-wrap,
-.v-op .#{$primaryStyleName}-wrap {
+.v-sa & .#{$primaryStyleName}-wrap,
+.v-op & .#{$primaryStyleName}-wrap {
 	border-color: rgba(0,0,0,.2);
 }
 .#{$primaryStyleName}-outerheader {
@@ -130,8 +130,8 @@
 	-moz-border-radius: 8px;
 	overflow: hidden;
 }
-.v-sa .#{$primaryStyleName}-black .#{$primaryStyleName}-wrap,
-.v-op .#{$primaryStyleName}-black .#{$primaryStyleName}-wrap {
+.v-sa & .#{$primaryStyleName}-black .#{$primaryStyleName}-wrap,
+.v-op & .#{$primaryStyleName}-black .#{$primaryStyleName}-wrap {
 	border-color: rgba(0,0,0,.8);
 }
 .#{$primaryStyleName}-black .#{$primaryStyleName}-wrap2 {
@@ -139,8 +139,8 @@
 	-moz-border-radius: 7px;
 	-webkit-border-radius: 7px;
 }
-.v-sa .#{$primaryStyleName}-black .#{$primaryStyleName}-wrap2,
-.v-op .#{$primaryStyleName}-black .#{$primaryStyleName}-wrap2 {
+.v-sa & .#{$primaryStyleName}-black .#{$primaryStyleName}-wrap2,
+.v-op & .#{$primaryStyleName}-black .#{$primaryStyleName}-wrap2 {
 	background-color: rgba(29,32,33,.9);
 }
 .#{$primaryStyleName}-black .#{$primaryStyleName}-outerheader {