Fixes #6714 #10330 - wraps theme in themename{}, creates legacy-styles.css, updates themes to support this.

Change-Id: I185b67b2ee74dca2faf48ff2517f24280aff4375

6 files changed, 46 insertions, 37 deletions

diff --git a/WebContent/VAADIN/themes/base/common/common.scss b/WebContent/VAADIN/themes/base/common/common.scss
index b1e5ae1674..27a8f56a48 100644
--- a/WebContent/VAADIN/themes/base/common/common.scss
+++ b/WebContent/VAADIN/themes/base/common/common.scss
@@ -8,18 +8,18 @@
 	margin: 0;
 	overflow: hidden;
 }
-.v-app {
+&.v-app {
 	height: 100%;
 }
 /* Force arrow cursor for all elements inside the app */
-.v-app,
+&.v-app,
 .v-window,
 .v-popupview-popup,
 .v-label,
 .v-caption {
 	cursor: default;
 }
-div.v-app-loading {
+body &.v-app-loading {
 	/* You can use this to provide indication for the user that the application is loading. */
 	/* It is applied to the same element as .v-app */
 	background-image: url(img/loading-indicator.gif);
@@ -65,7 +65,7 @@ div.v-app-loading {
 .v-ui:focus {
 	outline: none;
 }
-.v-app select,
+&.v-app select,
 .v-window select {
 	margin: 0;
 }
@@ -77,10 +77,10 @@ div.v-app-loading {
 .v-disabled * {
 	cursor: default;
 }
-* html .v-disabled {
+* html & .v-disabled {
 	zoom: 1;
 }
-*+html .v-disabled {
+*+html & .v-disabled {
 	zoom: 1;
 }
 .v-disabled .v-disabled {
@@ -217,16 +217,16 @@ div.v-app-loading {
 	font-size: xx-small;
 }
 /* Debug style */
-.v-app .invalidlayout,
-.v-app .invalidlayout * {
+&.v-app .invalidlayout,
+&.v-app .invalidlayout * {
 	background: #f99 !important;
 }
 /* Fix for Liferay, issue #2384 */
-.v-app input[type="text"],
-.v-app input[type="password"],
-.v-app input[type="reset"],
-.v-app select,
-.v-app textarea ,
+&.v-app input[type="text"],
+&.v-app input[type="password"],
+&.v-app input[type="reset"],
+&.v-app select,
+&.v-app textarea ,
 .v-window input[type="text"],
 .v-window input[type="password"],
 .v-window input[type="reset"],
diff --git a/WebContent/VAADIN/themes/base/dragwrapper/dragwrapper.scss b/WebContent/VAADIN/themes/base/dragwrapper/dragwrapper.scss
index dae4320131..e9bc677b3e 100644
--- a/WebContent/VAADIN/themes/base/dragwrapper/dragwrapper.scss
+++ b/WebContent/VAADIN/themes/base/dragwrapper/dragwrapper.scss
@@ -40,7 +40,7 @@
 	background-color: transparent;
 	padding: 2px;
 }
-.v-app .#{$name}-over-top,
+&.v-app .#{$name}-over-top,
 .v-window .#{$name}-over-top,
 .v-popupview-popup .#{$name}-over-top {
 	border: none;
@@ -52,7 +52,7 @@
 	-webkit-border-radius: 0;
 	border-radius: 0;
 }
-.v-app .#{$name}-over-bottom,
+&.v-app .#{$name}-over-bottom,
 .v-window .#{$name}-over-bottom,
 .v-popupview-popup .#{$name}-over-bottom {
 	border: none;
@@ -64,7 +64,7 @@
 	-webkit-border-radius: 0;
 	border-radius: 0;
 }
-.v-app .#{$name}-over-left,
+&.v-app .#{$name}-over-left,
 .v-window .#{$name}-over-left,
 .v-popupview-popup .#{$name}-over-left {
 	border: none;
@@ -76,7 +76,7 @@
 	-webkit-border-radius: 0;
 	border-radius: 0;
 }
-.v-app .#{$name}-over-right,
+&.v-app .#{$name}-over-right,
 .v-window .#{$name}-over-right,
 .v-popupview-popup .#{$name}-over-right {
 	border: none;
@@ -90,16 +90,16 @@
 }
 .#{$name},
 .#{$name}-over,
-.v-app .#{$name}-over-top,
+&.v-app .#{$name}-over-top,
 .v-window .#{$name}-over-top,
 .v-popupview-popup .#{$name}-over-top,
-.v-app .#{$name}-over-bottom,
+&.v-app .#{$name}-over-bottom,
 .v-window .#{$name}-over-bottom,
 .v-popupview-popup .#{$name}-over-bottom,
-.v-app .#{$name}-over-left,
+&.v-app .#{$name}-over-left,
 .v-window .#{$name}-over-left,
 .v-popupview-popup .#{$name}-over-left,
-.v-app .#{$name}-over-right,
+&.v-app .#{$name}-over-right,
 .v-window .#{$name}-over-right,
 .v-popupview-popup .#{$name}-over-right {
 	border-color: rgba(0,109,232,.6);
diff --git a/WebContent/VAADIN/themes/base/legacy-styles.scss b/WebContent/VAADIN/themes/base/legacy-styles.scss
new file mode 100644
index 0000000000..188fc85d46
--- /dev/null
+++ b/WebContent/VAADIN/themes/base/legacy-styles.scss
@@ -0,0 +1,6 @@
+@import "base.scss";
+// For legacy themes; does not wrap styles in .themename
+// Creates legacy-styles.css that can be imported into non-sass themes.
+// NOTE: can not be used in scenarios where multiple themes are used on the
+// same page (e.g portals).
+@include base;
\ No newline at end of file
diff --git a/WebContent/VAADIN/themes/base/select/select.scss b/WebContent/VAADIN/themes/base/select/select.scss
index 483f0e16b6..8e252e1f60 100644
--- a/WebContent/VAADIN/themes/base/select/select.scss
+++ b/WebContent/VAADIN/themes/base/select/select.scss
@@ -63,7 +63,7 @@
 .v-filterselect .v-icon {
 	float: left;
 }
-.v-app .v-filterselect-input,
+&.v-app .v-filterselect-input,
 .v-window .v-filterselect-input,
 .v-popupview-popup .v-filterselect-input {
 	margin: 0;
diff --git a/WebContent/VAADIN/themes/base/styles.scss b/WebContent/VAADIN/themes/base/styles.scss
index 40990f2c31..1b6942944b 100644
--- a/WebContent/VAADIN/themes/base/styles.scss
+++ b/WebContent/VAADIN/themes/base/styles.scss
@@ -1,2 +1,4 @@
 @import "base.scss";
-@include base;
+.base {
+	@include base;
+}
diff --git a/WebContent/VAADIN/themes/base/tree/tree.scss b/WebContent/VAADIN/themes/base/tree/tree.scss
index 2eb2c5908b..fd998eac45 100644
--- a/WebContent/VAADIN/themes/base/tree/tree.scss
+++ b/WebContent/VAADIN/themes/base/tree/tree.scss
@@ -99,43 +99,44 @@ div.#{$name}-node-leaf {
 }
 
 // tree-connectors.css
+// This could be (and was) wrapped in a nested block instead of prefixing each 
+// row, but #10309 prevents us from doing that right now.
 
-.#{$name}-connectors {
 	// Make item caption height an even number (so that the connector dots overlap nicely)
-	.#{$name}-node-caption {
+	.#{$name}-connectors .#{$name}-node-caption {
 		padding-top: 1px;
 	}
-	.#{$name}-node {
+	.#{$name}-connectors .#{$name}-node {
 		background: transparent url(img/connector-expand.png) no-repeat 2px -52px;
 	}
-	.#{$name}-node-expanded {
+	.#{$name}-connectors .#{$name}-node-expanded {
 		background: transparent url(img/connector-collapse.png) no-repeat 2px -52px;
 	}
-	.#{$name}-node-last {
+	.#{$name}-connectors .#{$name}-node-last {
 		background: transparent url(img/connector-expand-last.png) no-repeat 2px -52px;
 	}
-	.#{$name}-node-expanded.#{$name}-node-last {
+	.#{$name}-connectors .#{$name}-node-expanded.#{$name}-node-last {
 		background: transparent url(img/connector-collapse-last.png) no-repeat 2px -52px;
 	}
-	.#{$name}-node-leaf {
+	.#{$name}-connectors .#{$name}-node-leaf {
 		background: transparent url(img/connector-leaf.png) repeat-y 2px 50%;
 	}
-	.#{$name}-node-leaf-last {
+	.#{$name}-connectors .#{$name}-node-leaf-last {
 		background: transparent url(img/connector-leaf-last.png) repeat-y 2px 50%;
 	}
-	.#{$name}-node-children {
+	.#{$name}-connectors .#{$name}-node-children {
 		background: transparent url(img/connector.png) repeat-y 2px 0;
 	}
-	.#{$name}-node-children-last {
+	.#{$name}-connectors .#{$name}-node-children-last {
 		background: transparent;
 	}
-	.#{$name}-node-drag-top,
-	.#{$name}-node-expanded.#{$name}-node-drag-top {
+	.#{$name}-connectors .#{$name}-node-drag-top,
+	.#{$name}-connectors .#{$name}-node-expanded.#{$name}-node-drag-top {
 		background-position: 2px -53px;
 	}
-	.#{$name}-node-drag-top.#{$name}-node-leaf {
+	.#{$name}-connectors .#{$name}-node-drag-top.#{$name}-node-leaf {
 		background-position: 2px 50%;
 	}
-}
+
 
 }
\ No newline at end of file