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

Change-Id: I185b67b2ee74dca2faf48ff2517f24280aff4375

6 files changed, 34 insertions, 26 deletions

diff --git a/WebContent/VAADIN/themes/reindeer/common/common.scss b/WebContent/VAADIN/themes/reindeer/common/common.scss
index 10e8e18e4c..821f041789 100644
--- a/WebContent/VAADIN/themes/reindeer/common/common.scss
+++ b/WebContent/VAADIN/themes/reindeer/common/common.scss
@@ -1,18 +1,18 @@
 @mixin reindeer-common {
 
 .v-generated-body,
-.v-app {
+&.v-app {
 	background: #f5f5f5;
 }
 /* Global font styles */
-.v-app,
+&.v-app,
 .v-window,
 .v-popupview-popup,
 .v-tooltip,
-.v-app input,
-.v-app select,
-.v-app button,
-.v-app textarea,
+&.v-app input,
+&.v-app select,
+&.v-app button,
+&.v-app textarea,
 .v-window input,
 .v-window select,
 .v-window button,
@@ -34,7 +34,7 @@
 	color: #222;
 }
 /* Fonts on black background */
-.v-app .black,
+&.v-app .black,
 .v-window-black,
 .v-window .black,
 .v-popupview-popup .black {
@@ -110,13 +110,13 @@
 }
 
 /* Fixes for Liferay 6.0 */
-.portlet .v-app {
+.portlet &.v-app {
 	background: transparent;
 }
-.portlet .v-app .v-radiobutton input,
+.portlet &.v-app .v-radiobutton input,
 .portlet .v-window .v-radiobutton input,
 .portlet .v-popupview-popup .v-radiobutton input,
-.portlet .v-app .v-checkbox input,
+.portlet &.v-app .v-checkbox input,
 .portlet .v-window .v-checkbox input,
 .portlet .v-popupview-popup .v-checkbox input {
 	margin-right: 3px;
diff --git a/WebContent/VAADIN/themes/reindeer/label/label.scss b/WebContent/VAADIN/themes/reindeer/label/label.scss
index 24337e2ff5..44abf64e36 100644
--- a/WebContent/VAADIN/themes/reindeer/label/label.scss
+++ b/WebContent/VAADIN/themes/reindeer/label/label.scss
@@ -41,9 +41,9 @@
 /**********************
  * Blue styles
  **********************/
-.v-app .white,
+&.v-app .white,
 .v-window .white,
-.v-app .blue,
+&.v-app .blue,
 .v-window .blue {
 	color: #222;
 	text-shadow: none;
diff --git a/WebContent/VAADIN/themes/reindeer/legacy-styles.scss b/WebContent/VAADIN/themes/reindeer/legacy-styles.scss
new file mode 100644
index 0000000000..6c59b887d8
--- /dev/null
+++ b/WebContent/VAADIN/themes/reindeer/legacy-styles.scss
@@ -0,0 +1,6 @@
+@import "reindeer.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 reindeer;
\ No newline at end of file
diff --git a/WebContent/VAADIN/themes/reindeer/select/select.scss b/WebContent/VAADIN/themes/reindeer/select/select.scss
index 1510896fb9..3ab415f813 100644
--- a/WebContent/VAADIN/themes/reindeer/select/select.scss
+++ b/WebContent/VAADIN/themes/reindeer/select/select.scss
@@ -7,7 +7,7 @@
 	padding-left: 2px;
 	padding-right: 25px; /* Space for the button */
 }
-.v-app .#{$name}-input,
+&.v-app .#{$name}-input,
 .v-window .#{$name}-input,
 .v-popupview-popup .#{$name}-input {
 	background: transparent repeat-x;
@@ -16,7 +16,7 @@
 	height: 24px;
 }
 /* More specific selector to override padding */
-.v-app input.#{$name}-input,
+&.v-app input.#{$name}-input,
 .v-window input.#{$name}-input,
 .v-popupview-popup input.#{$name}-input {
 	padding: 4px 0 4px 2px;
@@ -211,7 +211,7 @@
 .black .#{$name} {
 	background-image: url(img/black/left-black.png); /** sprite-ref: black-verticals; sprite-margin-bottom: 1px */
 }
-.v-app .black .#{$name}-input,
+&.v-app .black .#{$name}-input,
 .v-window .black .#{$name}-input,
 .v-window-black .#{$name}-input,
 .v-popupview-popup .black .#{$name}-input {
diff --git a/WebContent/VAADIN/themes/reindeer/styles.scss b/WebContent/VAADIN/themes/reindeer/styles.scss
index 7ae66252de..89ddb29341 100644
--- a/WebContent/VAADIN/themes/reindeer/styles.scss
+++ b/WebContent/VAADIN/themes/reindeer/styles.scss
@@ -1,3 +1,5 @@
 @import "reindeer.scss";
 
-@include reindeer;	
+.reindeer {
+	@include reindeer;	
+}
\ No newline at end of file
diff --git a/WebContent/VAADIN/themes/reindeer/textfield/textfield.scss b/WebContent/VAADIN/themes/reindeer/textfield/textfield.scss
index 7cd8166aa6..6c3d4000fa 100644
--- a/WebContent/VAADIN/themes/reindeer/textfield/textfield.scss
+++ b/WebContent/VAADIN/themes/reindeer/textfield/textfield.scss
@@ -31,20 +31,20 @@
 	height: auto;
 }
 /* Need more specific selector because of #2384 fixes in base/common/common.css */
-.v-app input.#{$name},
+&.v-app input.#{$name},
 .v-window input.#{$name},
-.v-app textarea.v-textarea,
+&.v-app textarea.v-textarea,
 .v-window textarea.v-textarea  {
 	padding: 3px 3px 4px;
 }
-.v-app input.#{$name}.v-widget,
+&.v-app input.#{$name}.v-widget,
 .v-window input.#{$name}.v-widget {
 	height: 24px;
 }
-.v-app .#{$name}-focus,
+&.v-app .#{$name}-focus,
 .v-window .#{$name}-focus,
 .v-popupview-popup .#{$name}-focus,
-.v-app .v-textarea-focus,
+&.v-app .v-textarea-focus,
 .v-window .v-textarea-focus,
 .v-popupview-popup .v-textarea-focus {
 	border-color: #5b97d0;
@@ -59,16 +59,16 @@ textarea.v-textarea-prompt {
 	color: #999;
 }
 /* Small style textfield */
-.v-app input.#{$name}-small {
+&.v-app input.#{$name}-small {
 	font-size: 11px;
 	line-height: normal;
 	height: auto;
 	padding: 2px;
 }
-.v-app textarea.v-textarea-small {
+&.v-app textarea.v-textarea-small {
 	font-size: 11px;
 }
-.v-app .v-table  input.#{$name}.v-widget,
+&.v-app .v-table  input.#{$name}.v-widget,
 .v-window .v-table input.#{$name}.v-widget {
 	padding: 1px 2px;
 	height: auto;
@@ -92,11 +92,11 @@ textarea.v-textarea-prompt {
 .black .v-textarea {
 	background-image: none;
 }
-.v-app .black .#{$name}-focus,
+&.v-app .black .#{$name}-focus,
 .v-window-black .#{$name}-focus,
 .v-window .black .#{$name}-focus,
 .v-popupview-popup .black .#{$name}-focus,
-.v-app .black .v-textarea-focus,
+&.v-app .black .v-textarea-focus,
 .v-window-black .v-textarea-focus,
 .v-window .black .v-textarea-focus,
 .v-popupview-popup .black .v-textarea-focus {