Moved DebugConsole (and related) styles to separate mixin which is applied globally; the console is a widgetset-wide singleton, not usually to be styled. Fixes #10357

Change-Id: I39940fa92f748a6ef7a143797f06ef9d7d68ce36

3 files changed, 35 insertions, 27 deletions

diff --git a/WebContent/VAADIN/themes/base/base.scss b/WebContent/VAADIN/themes/base/base.scss
index 7e2e20a969..c26c259e1d 100644
--- a/WebContent/VAADIN/themes/base/base.scss
+++ b/WebContent/VAADIN/themes/base/base.scss
@@ -36,7 +36,7 @@
 @import "upload/upload.scss";
 @import "widget/widget.scss";
 @import "window/window.scss";
-
+@import "debug/debug.scss";
 
 @mixin base {
 	// @include base-app;
@@ -89,3 +89,5 @@
 	@include base-window;
 }
 
+// always include, don't wrap in .themename{}
+@include debug-globals;
diff --git a/WebContent/VAADIN/themes/base/common/common.scss b/WebContent/VAADIN/themes/base/common/common.scss
index 7ff519a0d5..f636359a38 100644
--- a/WebContent/VAADIN/themes/base/common/common.scss
+++ b/WebContent/VAADIN/themes/base/common/common.scss
@@ -198,32 +198,6 @@ body &.v-app-loading {
 .v-loading-indicator-wait {
 	background-image: url(img/loading-indicator-wait.gif);
 }
-/* Debug dialog */
-.v-debug-console {
-	background: #fff;
-	opacity: .9;
-	border: 1px solid #000;
-	font-family: sans-serif;
-}
-.v-debug-console-caption {
-	background: #000;
-	border-bottom: 1px solid grey;
-	color: white;
-	font-weight: bold;
-}
-.v-debug-console-content {
-	font-size: x-small;
-	overflow: auto;
-	white-space: pre;
-}
-.v-debug-console-content input {
-	font-size: xx-small;
-}
-/* Debug style */
-&.v-app .invalidlayout,
-&.v-app .invalidlayout * {
-	background: #f99 !important;
-}
 /* Fix for Liferay, issue #2384 */
 &.v-app input[type="text"],
 &.v-app input[type="password"],
diff --git a/WebContent/VAADIN/themes/base/debug/debug.scss b/WebContent/VAADIN/themes/base/debug/debug.scss
new file mode 100644
index 0000000000..b6d22e8433
--- /dev/null
+++ b/WebContent/VAADIN/themes/base/debug/debug.scss
@@ -0,0 +1,32 @@
+/*
+* Debug console related styles. NOTE that these are global, and not really part
+* of a theme (the console is a sigleton). You can customize, but it will apply
+* globally, e.g in a portal environment.
+*/
+@mixin debug-globals {
+	.v-debug-console {
+		background: #fff;
+		opacity: .9;
+		border: 1px solid #000;
+		font-family: sans-serif;
+	}
+	.v-debug-console-caption {
+		background: #000;
+		border-bottom: 1px solid grey;
+		color: white;
+		font-weight: bold;
+	}
+	.v-debug-console-content {
+		font-size: x-small;
+		overflow: auto;
+		white-space: pre;
+	}
+	.v-debug-console-content input {
+		font-size: xx-small;
+	}
+	/* Debug style */
+	.v-app .invalidlayout,
+	.v-app .invalidlayout * {
+		background: #f99 !important;
+	}
+}
\ No newline at end of file