Standard themes in SCSS form, updated CompileDefaultTheme (#9223)

Conversion performed for most themes trivial, just rename file and wrap
in a mixin. For chameleon compounds, also nesting used. In some cases,
related small files combined in a single SCSS file

Chameleon accordion and select contain fixes other than just a missing
semicolon.

28 files changed, 441 insertions, 307 deletions

diff --git a/WebContent/VAADIN/themes/chameleon/chameleon.scss b/WebContent/VAADIN/themes/chameleon/chameleon.scss
new file mode 100644
index 0000000000..16f95bbbb4
--- /dev/null
+++ b/WebContent/VAADIN/themes/chameleon/chameleon.scss
@@ -0,0 +1,10 @@
+// this file just defines all chameleon mixins by importing them
+
+// common (mostly application or page level) parts of the theme
+
+@import "common/common.scss";
+
+// components - can override or replace in user themes
+
+@import "components/components.scss";
+@import "compound/compound.scss";
diff --git a/WebContent/VAADIN/themes/chameleon/common/common.css b/WebContent/VAADIN/themes/chameleon/common/common.css
deleted file mode 100644
index 9d5a64b2ad..0000000000
--- a/WebContent/VAADIN/themes/chameleon/common/common.css
+++ /dev/null
@@ -1,157 +0,0 @@
-/*
- * Base theme is automatically included in the compiled theme.
- * @import "../../base/styles.css";
- */
-
-/*******************************************************************************
- * App background & tooltip
- ******************************************************************************/
-
-.v-app {
-	background: transparent;
-	overflow: hidden;
-	}
-
-.v-view {
-	margin-top: 0;
-	border-top: none;
-	}
-
-.v-tooltip {
-	background: #fdfdee;
-	border: 1px solid #c0c0b9;
-	padding: 1px 5px;
-	color: #222;
-	font-size: 0.9em;
-	line-height: normal;
-	-webkit-border-radius: 4px;
-	-moz-border-radius: 4px;
-	}
-
-.v-sa .v-tooltip {
-	outline: 1px solid rgba(0,0,0,.2);
-	-webkit-border-radius: 0;
-	-moz-border-radius: 0;
-	border: none;
-	}
-
-
-/*******************************************************************************
- * Global fonts
- ******************************************************************************/
-
-/* First all the containers that have other components inside them, and are 
- * possibly overlay elements (which reside inside the BODY element, not the .v-app element)
- */
-/* Then come all other overlay elements, that do not have other arbitrary 
- * components inside them (from v-filterselect-suggestpopup onwards) */
-.v-app,
-.v-window,
-.v-popupview-popup,
-.v-tooltip,
-.v-app input,
-.v-app select,
-.v-app button,
-.v-app textarea,
-.v-window input,
-.v-window select,
-.v-window button,
-.v-window textarea,
-.v-popupview-popup input,
-.v-popupview-popup select,
-.v-popupview-popup button,
-.v-popupview-popup textarea,
-.v-filterselect-suggestpopup,
-.v-datefield-popup,
-.v-contextmenu,
-.v-Notification,
-.v-menubar-submenu,
-.v-table-header-drag,
-.v-menubar-submenu,
-.v-drag-element {
-	font-family: Arial, Helvetica, "Lucida Grande", "Lucida Sans Unicode", Tahoma, Verdana, sans-serif;
-	font-size: 13px;
-	line-height: 1.4;
-	color: #222;
-	}
-
-
-
-/*******************************************************************************
- * Generic overlay elements
- ******************************************************************************/
-.v-window,
-.v-popupview-popup,
-.v-filterselect-suggestpopup,
-.v-datefield-popup,
-.v-contextmenu,
-.v-Notification,
-.v-menubar-submenu {
-	background: #fff url(../img/grad-light-top.png) repeat-x;
-	background-color: rgba(255,255,255,.85);
-	border: 1px solid #adadad;
-	border-color: rgba(0,0,0,.4);
-	border-radius: 4px;
-	-webkit-border-radius: 4px;
-	-moz-border-radius: 4px;
-	overflow: hidden;
-	}
-
-.v-filterselect-suggestpopup,
-.v-contextmenu,
-.v-menubar-submenu {
-	padding: 3px 0;
-	}
-
-.v-contextmenu .gwt-MenuItem,
-.v-filterselect-suggestpopup .gwt-MenuItem,
-.v-menubar-submenu .v-menubar-menuitem {
-	padding: .05em .7em;
-	user-select: none;
-	-webkit-user-select: none;
-	-moz-user-select: none;
-	-ms-user-select: none;
-	cursor: default;
-	}
-
-.v-contextmenu td.gwt-MenuItem-selected div,
-.v-filterselect-suggestpopup td.gwt-MenuItem-selected,
-.v-table .v-table-body .v-selected,
-.v-menubar-submenu span.v-menubar-menuitem-selected {
-	text-shadow: none;
-	}
-
-.v-contextmenu .gwt-MenuItem-selected,
-.v-filterselect-suggestpopup .gwt-MenuItem-selected,
-.v-table .v-selected,
-.v-menubar-submenu .v-menubar-menuitem-selected {
-	background-color: #333;
-	}
-
-.v-contextmenu .gwt-MenuItem-selected div {
-	background: transparent;
-	}
-
-
-/*******************************************************************************
- * Misc. generics
- ******************************************************************************/
-.v-errorindicator {
-	width: 13px;
-	height: 1.4em;
-	background: transparent url(../img/error-indicator.png) no-repeat right 50%;
-	}
-
-.v-caption-small .v-errorindicator {
-	height: 1.2em;
-	}
-
-.v-caption-big .v-errorindicator {
-	height: 1.8em;
-	}
-
-.v-tooltip .v-errormessage {
-	color: #b2320b;
-	padding-left: 14px;
-	background: transparent url(../img/error-indicator.png) no-repeat 0 50%;
-	}
\ No newline at end of file
diff --git a/WebContent/VAADIN/themes/chameleon/common/common.scss b/WebContent/VAADIN/themes/chameleon/common/common.scss
new file mode 100644
index 0000000000..a7878b38ec
--- /dev/null
+++ b/WebContent/VAADIN/themes/chameleon/common/common.scss
@@ -0,0 +1,164 @@
+// this file defines the common chameleon mixin any related variables etc.
+
+$chameleon-app-background: transparent;
+
+$chameleon-font-family: Arial, Helvetica, "Lucida Grande", "Lucida Sans Unicode", Tahoma, Verdana, sans-serif;
+$chameleon-font-size: 13px;
+$chameleon-line-height: 1.4;
+
+
+// rules on the application level, above theme selection
+@mixin chameleon-app {
+	// App background & tooltip
+	.v-app {
+		background: transparent;
+		overflow: hidden;
+		}
+	
+	.v-view {
+		margin-top: 0;
+		border-top: none;
+		}
+	
+	.v-tooltip {
+		background: #fdfdee;
+		border: 1px solid #c0c0b9;
+		padding: 1px 5px;
+		color: #222;
+		font-size: 0.9em;
+		line-height: normal;
+		-webkit-border-radius: 4px;
+		-moz-border-radius: 4px;
+		}
+	
+	.v-sa .v-tooltip {
+		outline: 1px solid rgba(0,0,0,.2);
+		-webkit-border-radius: 0;
+		-moz-border-radius: 0;
+		border: none;
+		}
+
+	// TODO move most of the rest to chameleon-common
+
+	// Global fonts
+	
+	// First all the containers that have other components inside them, and are 
+	// possibly overlay elements (which reside inside the BODY element, not the .v-app element)
+	
+	// Then come all other overlay elements, that do not have other arbitrary 
+	// components inside them (from v-filterselect-suggestpopup onwards)
+	
+	.v-app,
+	.v-window,
+	.v-popupview-popup,
+	.v-tooltip,
+	.v-app input,
+	.v-app select,
+	.v-app button,
+	.v-app textarea,
+	.v-window input,
+	.v-window select,
+	.v-window button,
+	.v-window textarea,
+	.v-popupview-popup input,
+	.v-popupview-popup select,
+	.v-popupview-popup button,
+	.v-popupview-popup textarea,
+	.v-filterselect-suggestpopup,
+	.v-datefield-popup,
+	.v-contextmenu,
+	.v-Notification,
+	.v-menubar-submenu,
+	.v-table-header-drag,
+	.v-menubar-submenu,
+	.v-drag-element {
+		font-family: $chameleon-font-family;
+		font-size: $chameleon-font-size;
+		line-height: $chameleon-line-height;
+		color: #222;
+		}
+	
+	
+	
+	// Generic overlay elements
+	
+	.v-window,
+	.v-popupview-popup,
+	.v-filterselect-suggestpopup,
+	.v-datefield-popup,
+	.v-contextmenu,
+	.v-Notification,
+	.v-menubar-submenu {
+		background: #fff url(../img/grad-light-top.png) repeat-x;
+		background-color: rgba(255,255,255,.85);
+		border: 1px solid #adadad;
+		border-color: rgba(0,0,0,.4);
+		border-radius: 4px;
+		-webkit-border-radius: 4px;
+		-moz-border-radius: 4px;
+		overflow: hidden;
+		}
+	
+	.v-filterselect-suggestpopup,
+	.v-contextmenu,
+	.v-menubar-submenu {
+		padding: 3px 0;
+		}
+	
+	.v-contextmenu .gwt-MenuItem,
+	.v-filterselect-suggestpopup .gwt-MenuItem,
+	.v-menubar-submenu .v-menubar-menuitem {
+		padding: .05em .7em;
+		user-select: none;
+		-webkit-user-select: none;
+		-moz-user-select: none;
+		-ms-user-select: none;
+		cursor: default;
+		}
+	
+	.v-contextmenu td.gwt-MenuItem-selected div,
+	.v-filterselect-suggestpopup td.gwt-MenuItem-selected,
+	.v-table .v-table-body .v-selected,
+	.v-menubar-submenu span.v-menubar-menuitem-selected {
+		text-shadow: none;
+		}
+	
+	.v-contextmenu .gwt-MenuItem-selected,
+	.v-filterselect-suggestpopup .gwt-MenuItem-selected,
+	.v-table .v-selected,
+	.v-menubar-submenu .v-menubar-menuitem-selected {
+		background-color: #333;
+		}
+	
+	.v-contextmenu .gwt-MenuItem-selected div {
+		background: transparent;
+		}
+	
+	
+	// Misc. generics
+	
+	.v-tooltip .v-errormessage {
+		color: #b2320b;
+		padding-left: 14px;
+		background: transparent url(../img/error-indicator.png) no-repeat 0 50%;
+		}
+
+}
+
+@mixin chameleon-common {
+	// Misc. generics
+	
+	.v-errorindicator {
+		width: 13px;
+		height: 1.4em;
+		background: transparent url(../img/error-indicator.png) no-repeat right 50%;
+		}
+	
+	.v-caption-small .v-errorindicator {
+		height: 1.2em;
+		}
+	
+	.v-caption-big .v-errorindicator {
+		height: 1.8em;
+		}	
+}
\ No newline at end of file
diff --git a/WebContent/VAADIN/themes/chameleon/components/accordion/accordion.css b/WebContent/VAADIN/themes/chameleon/components/accordion/accordion.scss
index 8fb7254008..f33577db9e 100644
--- a/WebContent/VAADIN/themes/chameleon/components/accordion/accordion.css
+++ b/WebContent/VAADIN/themes/chameleon/components/accordion/accordion.scss
@@ -1,3 +1,5 @@
+@mixin chameleon-accordion {
+
 .v-accordion {
 	border: 1px solid #b3b3b3;
 	}
@@ -39,7 +41,7 @@ div.v-accordion-item-open .v-accordion-item-caption:active {
 
 .v-accordion-opaque .v-accordion-item-caption,
 .v-accordion-opaque .v-accordion-item-open {
-	border-none;
+	border: none;
 	}
 
 .v-accordion-opaque .v-accordion-item-caption,
@@ -73,4 +75,6 @@ div.v-accordion-item-open .v-accordion-item-caption:active {
 	border-radius: 0;
 	-webkit-border-radius: 0;
 	-moz-border-radius: 0;
-	}
\ No newline at end of file
+	}
+
+}
\ No newline at end of file
diff --git a/WebContent/VAADIN/themes/chameleon/components/button/button.css b/WebContent/VAADIN/themes/chameleon/components/button/button.scss
index 1dffddb4c2..beeba2478f 100644
--- a/WebContent/VAADIN/themes/chameleon/components/button/button.css
+++ b/WebContent/VAADIN/themes/chameleon/components/button/button.scss
@@ -1,3 +1,5 @@
+@mixin chameleon-button {
+
 .v-button:active,
 .v-ie8 .v-pressed.v-button,
 div.v-button-down {
@@ -255,3 +257,5 @@ body.v-ie .v-pressed.v-button-borderless .v-button-wrap {
 .v-button-icon-only .v-icon {
 	margin-right: -.5em;
 	}
+
+}
\ No newline at end of file
diff --git a/WebContent/VAADIN/themes/chameleon/components/components.css b/WebContent/VAADIN/themes/chameleon/components/components.css
deleted file mode 100644
index c497a4a323..0000000000
--- a/WebContent/VAADIN/themes/chameleon/components/components.css
+++ /dev/null
@@ -1,17 +0,0 @@
-@import "accordion/accordion.css";
-@import "button/button.css";
-@import "label/label.css";
-@import "menubar/menubar.css";
-@import "notification/notification.css";
-@import "panel/panel.css";
-@import "popupview/popupview.css";
-@import "progressindicator/progressindicator.css";
-@import "slider/slider.css";
-@import "splitpanel/splitpanel.css";
-@import "table/table.css";
-@import "textfield/textfield.css";
-@import "datefield/datefield.css"; /* datefield and selects must be after textfield */
-@import "selects/selects.css";
-@import "tabsheet/tabsheet.css";
-@import "tree/tree.css";
-@import "window/window.css";
\ No newline at end of file
diff --git a/WebContent/VAADIN/themes/chameleon/components/components.scss b/WebContent/VAADIN/themes/chameleon/components/components.scss
new file mode 100644
index 0000000000..45a313ed60
--- /dev/null
+++ b/WebContent/VAADIN/themes/chameleon/components/components.scss
@@ -0,0 +1,41 @@
+@import "accordion/accordion.scss";
+@import "button/button.scss";
+@import "label/label.scss";
+@import "menubar/menubar.scss";
+@import "notification/notification.scss";
+@import "panel/panel.scss";
+@import "popupview/popupview.scss";
+@import "progressindicator/progressindicator.scss";
+@import "slider/slider.scss";
+@import "splitpanel/splitpanel.scss";
+@import "table/table.scss";
+@import "textfield/textfield.scss";
+// datefield and selects must be after textfield
+@import "datefield/datefield.scss";
+@import "selects/selects.scss";
+@import "tabsheet/tabsheet.scss";
+@import "tree/tree.scss";
+@import "window/window.scss";
+
+@mixin chameleon-components {
+
+	@include chameleon-accordion;
+	@include chameleon-button;
+	@include chameleon-label;
+	@include chameleon-menubar;
+	@include chameleon-notification;
+	@include chameleon-panel;
+	@include chameleon-popupview;
+	@include chameleon-progressindicator;
+	@include chameleon-slider;
+	@include chameleon-splitpanel;
+	@include chameleon-table;
+	@include chameleon-textfield;
+	// datefield and selects must be after textfield
+	@include chameleon-datefield;
+	@include chameleon-selects;
+	@include chameleon-tabsheet;
+	@include chameleon-tree;
+	@include chameleon-window;
+
+}
\ No newline at end of file
diff --git a/WebContent/VAADIN/themes/chameleon/components/datefield/datefield.css b/WebContent/VAADIN/themes/chameleon/components/datefield/datefield.scss
index 3804ab52e0..2f9705ca58 100644
--- a/WebContent/VAADIN/themes/chameleon/components/datefield/datefield.css
+++ b/WebContent/VAADIN/themes/chameleon/components/datefield/datefield.scss
@@ -1,3 +1,5 @@
+@mixin chameleon-datefield {
+
 .v-datefield-button {
 	background: #dadada url(../../img/date-btn.png) repeat-x 50% 0;
 	border: 1px solid gray;
@@ -272,4 +274,6 @@ td.v-datefield-calendarpanel-nextyear {
 	padding: 0;
 	font-size: 0.9em;
 	margin: 0;
-	}
\ No newline at end of file
+	}
+
+}
\ No newline at end of file
diff --git a/WebContent/VAADIN/themes/chameleon/components/label/label.css b/WebContent/VAADIN/themes/chameleon/components/label/label.scss
index f2d8e8ef69..7471242f70 100644
--- a/WebContent/VAADIN/themes/chameleon/components/label/label.css
+++ b/WebContent/VAADIN/themes/chameleon/components/label/label.scss
@@ -1,3 +1,5 @@
+@mixin chameleon-label {
+
 /*******************************************************************************
  * Different headers
  ******************************************************************************/
@@ -124,4 +126,6 @@ body .v-label-loading {
 	border-radius: 2px;
 	-webkit-border-radius: 2px;
 	-moz-border-radius: 2px;
-	}
\ No newline at end of file
+	}
+
+}
\ No newline at end of file
diff --git a/WebContent/VAADIN/themes/chameleon/components/menubar/menubar.css b/WebContent/VAADIN/themes/chameleon/components/menubar/menubar.scss
index 4f6be1b923..55ade4c060 100644
--- a/WebContent/VAADIN/themes/chameleon/components/menubar/menubar.css
+++ b/WebContent/VAADIN/themes/chameleon/components/menubar/menubar.scss
@@ -1,3 +1,5 @@
+@mixin chameleon-menubar {
+
 .v-menubar {
 	padding: 0 .4em;
 	background: #c9c9c9 url(../../img/grad-light-top.png) repeat-x;
@@ -22,3 +24,5 @@
 	background-image: url(../../img/grad-light-top2.png);
 	background-position: 0 -1px;
 	}
+
+}
\ No newline at end of file
diff --git a/WebContent/VAADIN/themes/chameleon/components/notification/notification.css b/WebContent/VAADIN/themes/chameleon/components/notification/notification.scss
index ee686912c5..9036c5c2d6 100644
--- a/WebContent/VAADIN/themes/chameleon/components/notification/notification.css
+++ b/WebContent/VAADIN/themes/chameleon/components/notification/notification.scss
@@ -1,3 +1,5 @@
+@mixin chameleon-notification {
+
 div.v-Notification {
 	-moz-border-radius: 0;
 	-webkit-border-radius: 0;
@@ -61,4 +63,6 @@ div.v-Notification-system {
 	color: #fff;
 	border: none;
 	background-color: #b40000;
-	}
\ No newline at end of file
+	}
+
+}
\ No newline at end of file
diff --git a/WebContent/VAADIN/themes/chameleon/components/panel/panel.css b/WebContent/VAADIN/themes/chameleon/components/panel/panel.scss
index 0e5dcb8a38..88b3d7b804 100644
--- a/WebContent/VAADIN/themes/chameleon/components/panel/panel.css
+++ b/WebContent/VAADIN/themes/chameleon/components/panel/panel.scss
@@ -1,3 +1,5 @@
+@mixin chameleon-panel {
+
 .v-panel-caption {
 	background: #b9dcff;
 	font-size: 1.2em;
@@ -117,4 +119,6 @@ div.v-panel-borderless .v-panel-deco-bubble {
 
 div.v-panel-borderless .v-panel-content-bubble {
 	background: transparent;
-	}
\ No newline at end of file
+	}
+
+}
\ No newline at end of file
diff --git a/WebContent/VAADIN/themes/chameleon/components/popupview/popupview.css b/WebContent/VAADIN/themes/chameleon/components/popupview/popupview.scss
index ab270d7c4b..88e13cb46d 100644
--- a/WebContent/VAADIN/themes/chameleon/components/popupview/popupview.css
+++ b/WebContent/VAADIN/themes/chameleon/components/popupview/popupview.scss
@@ -1,3 +1,7 @@
+@mixin chameleon-popupview {
+
 .v-popupview-popup {
 	padding: .3em .4em;
-	}
\ No newline at end of file
+	}
+
+}
\ No newline at end of file
diff --git a/WebContent/VAADIN/themes/chameleon/components/progressindicator/progressindicator.css b/WebContent/VAADIN/themes/chameleon/components/progressindicator/progressindicator.scss
index c080c0fc43..6bacf31e3e 100644
--- a/WebContent/VAADIN/themes/chameleon/components/progressindicator/progressindicator.css
+++ b/WebContent/VAADIN/themes/chameleon/components/progressindicator/progressindicator.scss
@@ -1,3 +1,5 @@
+@mixin chameleon-progressindicator {
+
 .v-progressindicator-wrapper {
 	border-radius: 2px;
 	-webkit-border-radius: 2px;
@@ -109,4 +111,6 @@
 
 .v-progressindicator-indeterminate.bar.v-disabled .v-progressindicator-indicator {
 	background: #fff;
-	}
\ No newline at end of file
+	}
+
+}
\ No newline at end of file
diff --git a/WebContent/VAADIN/themes/chameleon/components/selects/selects.css b/WebContent/VAADIN/themes/chameleon/components/selects/selects.scss
index 3c8496f0fe..5e21ddff35 100644
--- a/WebContent/VAADIN/themes/chameleon/components/selects/selects.css
+++ b/WebContent/VAADIN/themes/chameleon/components/selects/selects.scss
@@ -1,3 +1,5 @@
+@mixin chameleon-selects {
+
 .v-filterselect {
 	overflow: hidden;
 	}
@@ -86,7 +88,8 @@ body .v-filterselect-suggestpopup-big td {
 
 .v-filterselect-prevpage:active,
 .v-filterselect-nextpage:active {
-	background-image: (../../img/grad-dark-bottom2.png);
+	// TODO check - was missing a part of the rule
+	background-image: #c9c9c9 url(../../img/grad-dark-bottom2.png);
 	background-position: left bottom;
 	}
 
@@ -161,3 +164,5 @@ body .v-filterselect-suggestpopup-big td {
 	height: 100%;
 	background-position: 100% -8px;
 	}
+
+}
\ No newline at end of file
diff --git a/WebContent/VAADIN/themes/chameleon/components/slider/slider.css b/WebContent/VAADIN/themes/chameleon/components/slider/slider.scss
index 6a430723e2..bef69b3472 100644
--- a/WebContent/VAADIN/themes/chameleon/components/slider/slider.css
+++ b/WebContent/VAADIN/themes/chameleon/components/slider/slider.scss
@@ -1,3 +1,5 @@
+@mixin chameleon-slider {
+
 .v-slider {
 	border-top: 1px solid #9a9c9e;
 	border-bottom: 1px solid #bdbfc1;
@@ -54,3 +56,5 @@
 	margin: 0;
 	margin-left: -5px;
 	}
+
+}
\ No newline at end of file
diff --git a/WebContent/VAADIN/themes/chameleon/components/splitpanel/splitpanel.css b/WebContent/VAADIN/themes/chameleon/components/splitpanel/splitpanel.scss
index 1cb04bc29b..99f51edc01 100644
--- a/WebContent/VAADIN/themes/chameleon/components/splitpanel/splitpanel.css
+++ b/WebContent/VAADIN/themes/chameleon/components/splitpanel/splitpanel.scss
@@ -1,3 +1,5 @@
+@mixin chameleon-splitpanel {
+
 .v-splitpanel-hsplitter div,
 .v-splitpanel-vsplitter div {
 	background: transparent url(../../img/split-handle.png) no-repeat 2px 50%;
@@ -61,3 +63,5 @@ body .v-splitpanel-vsplitter-small-locked {
 	background: transparent;
 	overflow: hidden;
 	}
+
+}
\ No newline at end of file
diff --git a/WebContent/VAADIN/themes/chameleon/components/table/table.css b/WebContent/VAADIN/themes/chameleon/components/table/table.scss
index 2bc52bc844..8ecc1878ae 100644
--- a/WebContent/VAADIN/themes/chameleon/components/table/table.css
+++ b/WebContent/VAADIN/themes/chameleon/components/table/table.scss
@@ -1,3 +1,5 @@
+@mixin chameleon-table {
+
 .v-table-header-wrap,
 .v-table-header-drag {
 	background: #c9c9c9 url(../../img/grad-light-top.png) repeat-x;
@@ -160,4 +162,6 @@ div.v-table-focus-slot-right {
 
 div.v-table-borderless .v-table-body {
 	background: transparent;
-	}
\ No newline at end of file
+	}
+
+}
\ No newline at end of file
diff --git a/WebContent/VAADIN/themes/chameleon/components/tabsheet/tabsheet.css b/WebContent/VAADIN/themes/chameleon/components/tabsheet/tabsheet.scss
index d1697c584a..258df79922 100644
--- a/WebContent/VAADIN/themes/chameleon/components/tabsheet/tabsheet.css
+++ b/WebContent/VAADIN/themes/chameleon/components/tabsheet/tabsheet.scss
@@ -1,3 +1,5 @@
+@mixin chameleon-tabsheet {
+
 .v-tabsheet-spacertd div {
 	border-color: #b3b3b3;
 	border-left: none;
@@ -155,4 +157,6 @@
 .v-tabsheet-tabs-borderless .v-tabsheet-tabitem-selected,
 .v-tabsheet-tabs-borderless .v-tabsheet-tabitem-selected .v-caption {
 	background-color: transparent;
-	}
\ No newline at end of file
+	}
+
+}
\ No newline at end of file
diff --git a/WebContent/VAADIN/themes/chameleon/components/textfield/textfield.css b/WebContent/VAADIN/themes/chameleon/components/textfield/textfield.scss
index 74882fa693..f8f3788c9e 100644
--- a/WebContent/VAADIN/themes/chameleon/components/textfield/textfield.css
+++ b/WebContent/VAADIN/themes/chameleon/components/textfield/textfield.scss
@@ -1,3 +1,5 @@
+@mixin chameleon-textfield {
+
 input.v-textfield,
 textarea.v-textarea,
 .v-filterselect {
@@ -127,3 +129,5 @@ input.v-textfield-search[type=text],
 .v-filterselect-search {
 	padding-left: 17px;
 	}
+
+}
\ No newline at end of file
diff --git a/WebContent/VAADIN/themes/chameleon/components/tree/tree.css b/WebContent/VAADIN/themes/chameleon/components/tree/tree.scss
index 64f59c116a..fc80f51a2a 100644
--- a/WebContent/VAADIN/themes/chameleon/components/tree/tree.css
+++ b/WebContent/VAADIN/themes/chameleon/components/tree/tree.scss
@@ -1,3 +1,5 @@
+@mixin chameleon-tree {
+
 .v-tree-node-caption {
 	margin-left: 16px;
 	}
@@ -19,4 +21,6 @@
 
 .v-tree-connectors .v-tree-node-caption {
 	padding-bottom: 1px;
-	}
\ No newline at end of file
+	}
+
+}
\ No newline at end of file
diff --git a/WebContent/VAADIN/themes/chameleon/components/window/window.css b/WebContent/VAADIN/themes/chameleon/components/window/window.scss
index 6ca8622a76..f1a6b5e529 100644
--- a/WebContent/VAADIN/themes/chameleon/components/window/window.css
+++ b/WebContent/VAADIN/themes/chameleon/components/window/window.scss
@@ -1,3 +1,5 @@
+@mixin chameleon-window {
+
 .v-window-closebox {
 	width: 14px;
 	height: 15px;
@@ -50,4 +52,6 @@
 	width: 14px;
 	height: 14px;
 	bottom: 0;
-	}
\ No newline at end of file
+	}
+
+}
\ No newline at end of file
diff --git a/WebContent/VAADIN/themes/chameleon/compound/compound.css b/WebContent/VAADIN/themes/chameleon/compound/compound.css
deleted file mode 100644
index 2a193ae46b..0000000000
--- a/WebContent/VAADIN/themes/chameleon/compound/compound.css
+++ /dev/null
@@ -1,3 +0,0 @@
-@import "sidebar-menu/sidebar-menu.css";
-@import "segment/segment.css";
-@import "toolbar/toolbar.css";
\ No newline at end of file
diff --git a/WebContent/VAADIN/themes/chameleon/compound/compound.scss b/WebContent/VAADIN/themes/chameleon/compound/compound.scss
new file mode 100644
index 0000000000..b3f0e72f8f
--- /dev/null
+++ b/WebContent/VAADIN/themes/chameleon/compound/compound.scss
@@ -0,0 +1,134 @@
+@mixin chameleon-compound {
+
+	// segment.css
+
+	.v-horizontallayout-segment {
+		.v-button {
+			-webkit-border-radius: 0;
+			-moz-border-radius: 0;
+			border-radius: 0;
+			border-left-width: 0;
+			zoom: 1;
+			overflow: visible;
+
+			.v-button-wrap {
+				-webkit-border-radius: 0;
+				-moz-border-radius: 0;
+				border-radius: 0;
+				zoom: 1;
+				}
+			}
+		
+		.first {
+			-webkit-border-top-left-radius: 3px;
+			-webkit-border-bottom-left-radius: 3px;
+			-moz-border-radius-topleft: 3px;
+			-moz-border-radius-bottomleft: 3px;
+			border-top-left-radius: 3px;
+			border-bottom-left-radius: 3px;
+			border-left-width: 1px;
+
+			.v-button-wrap {
+				-webkit-border-top-left-radius: 2px;
+				-webkit-border-bottom-left-radius: 2px;
+				-moz-border-radius-topleft: 2px;
+				-moz-border-radius-bottomleft: 2px;
+				border-top-left-radius: 2px;
+				border-bottom-left-radius: 2px;
+				}
+		
+			}
+		
+		.last {
+			-webkit-border-top-right-radius: 3px;
+			-webkit-border-bottom-right-radius: 3px;
+			-moz-border-radius-topright: 3px;
+			-moz-border-radius-bottomright: 3px;
+			border-top-right-radius: 3px;
+			border-bottom-right-radius: 3px;
+		
+			.v-button-wrap {
+				-webkit-border-top-right-radius: 2px;
+				-webkit-border-bottom-right-radius: 2px;
+				-moz-border-radius-topright: 2px;
+				-moz-border-radius-bottomright: 2px;
+				border-top-right-radius: 2px;
+				border-bottom-right-radius: 2px;
+				}
+			}
+	}
+
+	// sidebar-menu.css
+	
+	.sidebar-menu * {
+		white-space: normal;
+		}
+	
+	.sidebar-menu {
+		.v-label {
+			font-size: 0.85em;
+			text-transform: uppercase;
+			font-weight: bold;
+			letter-spacing: 0.03em;
+			padding: 1em .9em .3em;
+			text-shadow: 0 1px 0 rgba(255,255,255,1);
+			}
+		
+		.v-nativebutton {
+			width: 100%;
+			padding: .1em 1.1em;
+			border: none;
+			background: transparent;
+			text-align: left;
+			}
+		
+		.v-nativebutton:focus {
+			outline: none;
+			font-weight: bold;
+			}
+		
+		.tab-selected,
+		.selected {
+			font-weight: bold;
+			background-color: #333;
+			background-image: url(../img/grad-light-top2.png);
+			background-position: 0 -1px;
+			color: #fff;
+			}
+		
+		.tab-selected:focus,
+		.selected:focus {
+			outline: none;
+			}
+		
+		.v-nativebutton::-moz-focus-inner {
+			border: none;
+			padding: 0;
+			}
+	}
+	
+	// toolbar.css
+	
+	.v-csslayout-toolbar {
+		background: transparent url(../img/grad-light-top.png) repeat-x;
+		border: 1px solid #b3b3b3;
+		border-width: 1px 0;
+	
+		.v-csslayout-margin {
+			margin: 3px .3em 2px;
+			padding-bottom: 1px;
+			overflow: hidden;
+			}
+		
+		.v-button,
+		.segment {
+			margin-right: 2px;
+			float: left;
+			}
+		
+		.segment .v-button {
+			margin-right: 0;
+			}
+		}
+
+}
\ No newline at end of file
diff --git a/WebContent/VAADIN/themes/chameleon/compound/segment/segment.css b/WebContent/VAADIN/themes/chameleon/compound/segment/segment.css
deleted file mode 100644
index a529bff173..0000000000
--- a/WebContent/VAADIN/themes/chameleon/compound/segment/segment.css
+++ /dev/null
@@ -1,52 +0,0 @@
-.v-horizontallayout-segment .v-button {
-	-webkit-border-radius: 0;
-	-moz-border-radius: 0;
-	border-radius: 0;
-	border-left-width: 0;
-	zoom: 1;
-	overflow: visible;
-	}
-
-.v-horizontallayout-segment .v-button .v-button-wrap {
-	-webkit-border-radius: 0;
-	-moz-border-radius: 0;
-	border-radius: 0;
-	zoom: 1;
-	}
-
-.v-horizontallayout-segment .first {
-	-webkit-border-top-left-radius: 3px;
-	-webkit-border-bottom-left-radius: 3px;
-	-moz-border-radius-topleft: 3px;
-	-moz-border-radius-bottomleft: 3px;
-	border-top-left-radius: 3px;
-	border-bottom-left-radius: 3px;
-	border-left-width: 1px;
-	}
-
-.v-horizontallayout-segment .first .v-button-wrap {
-	-webkit-border-top-left-radius: 2px;
-	-webkit-border-bottom-left-radius: 2px;
-	-moz-border-radius-topleft: 2px;
-	-moz-border-radius-bottomleft: 2px;
-	border-top-left-radius: 2px;
-	border-bottom-left-radius: 2px;
-	}
-
-.v-horizontallayout-segment .last {
-	-webkit-border-top-right-radius: 3px;
-	-webkit-border-bottom-right-radius: 3px;
-	-moz-border-radius-topright: 3px;
-	-moz-border-radius-bottomright: 3px;
-	border-top-right-radius: 3px;
-	border-bottom-right-radius: 3px;
-	}
-
-.v-horizontallayout-segment .last .v-button-wrap {
-	-webkit-border-top-right-radius: 2px;
-	-webkit-border-bottom-right-radius: 2px;
-	-moz-border-radius-topright: 2px;
-	-moz-border-radius-bottomright: 2px;
-	border-top-right-radius: 2px;
-	border-bottom-right-radius: 2px;
-	}
\ No newline at end of file
diff --git a/WebContent/VAADIN/themes/chameleon/compound/sidebar-menu/sidebar-menu.css b/WebContent/VAADIN/themes/chameleon/compound/sidebar-menu/sidebar-menu.css
deleted file mode 100644
index e2ab7f2080..0000000000
--- a/WebContent/VAADIN/themes/chameleon/compound/sidebar-menu/sidebar-menu.css
+++ /dev/null
@@ -1,44 +0,0 @@
-.sidebar-menu * {
-	white-space: normal;
-	}
-
-.sidebar-menu .v-label {
-	font-size: 0.85em;
-	text-transform: uppercase;
-	font-weight: bold;
-	letter-spacing: 0.03em;
-	padding: 1em .9em .3em;
-	text-shadow: 0 1px 0 rgba(255,255,255,1);
-	}
-
-.sidebar-menu .v-nativebutton {
-	width: 100%;
-	padding: .1em 1.1em;
-	border: none;
-	background: transparent;
-	text-align: left;
-	}
-
-.sidebar-menu .v-nativebutton:focus {
-	outline: none;
-	font-weight: bold;
-	}
-
-.sidebar-menu .tab-selected,
-.sidebar-menu .selected {
-	font-weight: bold;
-	background-color: #333;
-	background-image: url(../../img/grad-light-top2.png);
-	background-position: 0 -1px;
-	color: #fff;
-	}
-
-.sidebar-menu .tab-selected:focus,
-.sidebar-menu .selected:focus {
-	outline: none;
-	}
-
-.sidebar-menu .v-nativebutton::-moz-focus-inner {
-	border: none;
-	padding: 0;
-	}
\ No newline at end of file
diff --git a/WebContent/VAADIN/themes/chameleon/compound/toolbar/toolbar.css b/WebContent/VAADIN/themes/chameleon/compound/toolbar/toolbar.css
deleted file mode 100644
index 468172037e..0000000000
--- a/WebContent/VAADIN/themes/chameleon/compound/toolbar/toolbar.css
+++ /dev/null
@@ -1,21 +0,0 @@
-.v-csslayout-toolbar {
-	background: transparent url(../../img/grad-light-top.png) repeat-x;
-	border: 1px solid #b3b3b3;
-	border-width: 1px 0;
-	}
-
-.v-csslayout-toolbar .v-csslayout-margin {
-	margin: 3px .3em 2px;
-	padding-bottom: 1px;
-	overflow: hidden;
-	}
-
-.v-csslayout-toolbar .v-button,
-.v-csslayout-toolbar .segment {
-	margin-right: 2px;
-	float: left;
-	}
-
-.v-csslayout-toolbar .segment .v-button {
-	margin-right: 0;
-	}
\ No newline at end of file
diff --git a/WebContent/VAADIN/themes/chameleon/styles.scss b/WebContent/VAADIN/themes/chameleon/styles.scss
new file mode 100644
index 0000000000..ee905c17e9
--- /dev/null
+++ b/WebContent/VAADIN/themes/chameleon/styles.scss
@@ -0,0 +1,10 @@
+@import "../base/styles.scss";
+@import "chameleon.scss";
+
+@include chameleon-app;
+
+// .v-theme-chameleon {
+@include chameleon-common;
+@include chameleon-components;
+@include chameleon-compound;
+// }