41 files changed, 329 insertions, 113 deletions
diff --git a/WebContent/VAADIN/themes/base/absolutelayout/absolutelayout.css b/WebContent/VAADIN/themes/base/absolutelayout/absolutelayout.scss
index 0eb557560e..ddb030c00f 100644
--- a/WebContent/VAADIN/themes/base/absolutelayout/absolutelayout.css
+++ b/WebContent/VAADIN/themes/base/absolutelayout/absolutelayout.scss
@@ -1,15 +1,4 @@
-/* THIS IS HERE ONLY BECAUSE WE WANT TO DEFINE IT FIRST, TO MAKE IT EASY TO OVERRIDE */
-/* TODO fix by using a better build script that allows us to define the order of the imports */
-.v {
-	-webkit-box-sizing: border-box;
-	-moz-box-sizing: border-box;
-	box-sizing: border-box;
-	text-align: left;
-	display: inline-block;
-	white-space: normal;
-}
-
-/* Actual AbsoluteLayout styles begin here */
+@mixin base-absolutelayout {
 
 .v-absolutelayout-wrapper {
 	position: absolute;
@@ -26,3 +15,5 @@
 .v-absolutelayout.v-has-width > div, .v-absolutelayout.v-has-width > div > div {
 	width: 100%;
 }
+
+}
+\ No newline at end of file
diff --git a/WebContent/VAADIN/themes/base/accordion/accordion.css b/WebContent/VAADIN/themes/base/accordion/accordion.scss
index ad762ee0ac..6f4825f16b 100644
--- a/WebContent/VAADIN/themes/base/accordion/accordion.css
+++ b/WebContent/VAADIN/themes/base/accordion/accordion.scss
@@ -1,8 +1,10 @@
+@mixin base-accordion {
+
 .v-accordion {
 	position: relative;
 	outline: none;
 	overflow: hidden;
-	text-align: left /* Force default alignment */
+	text-align: left; /* Force default alignment */
 }
 .v-accordion-item {
 	position: relative;
@@ -23,4 +25,6 @@
 .v-accordion-item-content {
 	position: absolute;
 	width: 100%;
+}
+
 }
 \ No newline at end of file
diff --git a/WebContent/VAADIN/themes/base/base.scss b/WebContent/VAADIN/themes/base/base.scss
new file mode 100644
index 0000000000..58f0c32af7
--- /dev/null
+++ b/WebContent/VAADIN/themes/base/base.scss
@@ -0,0 +1,34 @@
+@import "absolutelayout/absolutelayout.scss";
+@import "accordion/accordion.scss";
+@import "button/button.scss";
+@import "caption/caption.scss";
+@import "common/common.scss";
+@import "csslayout/csslayout.scss";
+@import "customcomponent/customcomponent.scss";
+@import "customlayout/customlayout.scss";
+@import "datefield/datefield.scss";
+@import "dragwrapper/dragwrapper.scss";
+@import "embedded/embedded.scss";
+@import "formlayout/formlayout.scss";
+@import "gridlayout/gridlayout.scss";
+@import "label/label.scss";
+@import "link/link.scss";
+@import "loginform/loginform.scss";
+@import "menubar/menubar.scss";
+@import "notification/notification.scss";
+@import "orderedlayout/orderedlayout.scss";
+@import "paintable/paintable.scss";
+@import "panel/panel.scss";
+@import "popupview/popupview.scss";
+@import "progressindicator/progressindicator.scss";
+@import "select/select.scss";
+@import "shadow/shadow.scss";
+@import "slider/slider.scss";
+@import "splitpanel/splitpanel.scss";
+@import "table/table.scss";
+@import "tabsheet/tabsheet.scss";
+@import "textfield/textfield.scss";
+@import "tree/tree.scss";
+@import "treetable/treetable.scss";
+@import "upload/upload.scss";
+@import "window/window.scss";
diff --git a/WebContent/VAADIN/themes/base/button/button.css b/WebContent/VAADIN/themes/base/button/button.scss
index 53141a86a8..a9e7867268 100644
--- a/WebContent/VAADIN/themes/base/button/button.css
+++ b/WebContent/VAADIN/themes/base/button/button.scss
@@ -1,3 +1,5 @@
+@mixin base-button {
+
 /*
  * Default button (more customizable)
  * -------------------------------------- */
@@ -155,4 +157,6 @@
 .v-checkbox-required {
 	background: #ffe0e0;
 }
-*/
-\ No newline at end of file
+*/
+
+}
diff --git a/WebContent/VAADIN/themes/base/caption/caption.css b/WebContent/VAADIN/themes/base/caption/caption.scss
index 364b68a226..c6fd124ad6 100644
--- a/WebContent/VAADIN/themes/base/caption/caption.css
+++ b/WebContent/VAADIN/themes/base/caption/caption.scss
@@ -1,3 +1,5 @@
+@mixin base-caption {
+
 .v-captionwrapper {
 	text-align: left; /* Force default alignment */
 }
@@ -21,3 +23,5 @@
 .v-caption .v-required-field-indicator {
 	display: inline-block;
 }
+
+}
+\ No newline at end of file
diff --git a/WebContent/VAADIN/themes/base/common/common.css b/WebContent/VAADIN/themes/base/common/common.scss
index d2695a8015..40bea2c9d6 100644
--- a/WebContent/VAADIN/themes/base/common/common.css
+++ b/WebContent/VAADIN/themes/base/common/common.scss
@@ -1,3 +1,5 @@
+@mixin base-common {
+
 /* References the BODY tag generated by Vaadin application servlet */
 .v-generated-body {
 	width: 100%;
@@ -249,3 +251,5 @@ div.v-app-loading {
 .v-scrollable {
 	overflow: auto;
 }
+
+}
+\ No newline at end of file
diff --git a/WebContent/VAADIN/themes/base/csslayout/csslayout.css b/WebContent/VAADIN/themes/base/csslayout/csslayout.scss
index 40cec4889f..c2c1b698ad 100644
--- a/WebContent/VAADIN/themes/base/csslayout/csslayout.css
+++ b/WebContent/VAADIN/themes/base/csslayout/csslayout.scss
@@ -1,3 +1,5 @@
+@mixin base-csslayout {
+
 .v-csslayout {
 	overflow: hidden;
 }
@@ -29,4 +31,6 @@ div.v-csslayout {
 }
 .v-csslayout-margin-right {
 	padding-right: 12px;	
+}
+
 }
 \ No newline at end of file
diff --git a/WebContent/VAADIN/themes/base/customcomponent/customcomponent.css b/WebContent/VAADIN/themes/base/customcomponent/customcomponent.scss
index f6cfd31390..aaf3e75251 100644
--- a/WebContent/VAADIN/themes/base/customcomponent/customcomponent.css
+++ b/WebContent/VAADIN/themes/base/customcomponent/customcomponent.scss
@@ -1,3 +1,7 @@
+@mixin base-customcomponent {
+
 .v-customcomponent {
 	overflow: hidden;
+}
+
 }
 \ No newline at end of file
diff --git a/WebContent/VAADIN/themes/base/customlayout/customlayout.css b/WebContent/VAADIN/themes/base/customlayout/customlayout.scss
index b9c20dbbf8..26e1538d29 100644
--- a/WebContent/VAADIN/themes/base/customlayout/customlayout.css
+++ b/WebContent/VAADIN/themes/base/customlayout/customlayout.scss
@@ -1,3 +1,7 @@
+@mixin base-customlayout {
+
 .v-customlayout {
 	overflow: hidden;
+}
+
 }
 \ No newline at end of file
diff --git a/WebContent/VAADIN/themes/base/datefield/datefield.css b/WebContent/VAADIN/themes/base/datefield/datefield.scss
index 71b9ad07a5..bf95baa3e6 100644
--- a/WebContent/VAADIN/themes/base/datefield/datefield.css
+++ b/WebContent/VAADIN/themes/base/datefield/datefield.scss
@@ -1,3 +1,5 @@
+@mixin base-datefield {
+
 .v-datefield {
 	white-space: nowrap;
 	display: inline-block; /* Force minimum width */
@@ -87,3 +89,5 @@
 	background-color: #ffe0e0;
 }
 */
+
+}
diff --git a/WebContent/VAADIN/themes/base/dragwrapper/dragwrapper.css b/WebContent/VAADIN/themes/base/dragwrapper/dragwrapper.scss
index 2061fec8c3..558b305742 100644
--- a/WebContent/VAADIN/themes/base/dragwrapper/dragwrapper.css
+++ b/WebContent/VAADIN/themes/base/dragwrapper/dragwrapper.scss
@@ -1,3 +1,5 @@
+@mixin base-dragwrapper {
+
 .v-ddwrapper {
 	padding: 2px;
 	-moz-border-radius: 4px;
@@ -156,3 +158,5 @@
 .no-vertical-drag-hints .v-ddwrapper-over-bottom:after {
 	display: none;
 }
+
+}
+\ No newline at end of file
diff --git a/WebContent/VAADIN/themes/base/embedded/embedded.css b/WebContent/VAADIN/themes/base/embedded/embedded.scss
index eea5937e59..53faaef2e8 100644
--- a/WebContent/VAADIN/themes/base/embedded/embedded.css
+++ b/WebContent/VAADIN/themes/base/embedded/embedded.scss
@@ -1,5 +1,8 @@
+@mixin base-embedded {
 
 .v-table .v-embedded-image {
     /* make embeddeds be centered in centered table cells. */
 	display: inline-block;
+}
+
 }
 \ No newline at end of file
diff --git a/WebContent/VAADIN/themes/base/formlayout/formlayout.css b/WebContent/VAADIN/themes/base/formlayout/formlayout.scss
index 755a59bc89..a45840ebab 100644
--- a/WebContent/VAADIN/themes/base/formlayout/formlayout.css
+++ b/WebContent/VAADIN/themes/base/formlayout/formlayout.scss
@@ -1,3 +1,5 @@
+@mixin base-formlayout {
+
 .v-formlayout.v-has-width > table {
 	width: 100%;
 }
@@ -49,4 +51,6 @@
 }
 .v-formlayout-captioncell .v-caption .v-required-field-indicator {
 	float: none;
+}
+
 }
 \ No newline at end of file
diff --git a/WebContent/VAADIN/themes/base/gridlayout/gridlayout.css b/WebContent/VAADIN/themes/base/gridlayout/gridlayout.scss
index 9edaf152a0..72f7437e6e 100644
--- a/WebContent/VAADIN/themes/base/gridlayout/gridlayout.css
+++ b/WebContent/VAADIN/themes/base/gridlayout/gridlayout.scss
@@ -1,3 +1,5 @@
+@mixin base-gridlayout {
+
 .v-gridlayout {
 	position: relative;
 }
@@ -29,3 +31,5 @@
 .v-gridlayout-spacing-off {
 	overflow: hidden;
 }
+
+}
+\ No newline at end of file
diff --git a/WebContent/VAADIN/themes/base/label/label.css b/WebContent/VAADIN/themes/base/label/label.scss
index 953584ffd7..ae1539acc9 100644
--- a/WebContent/VAADIN/themes/base/label/label.css
+++ b/WebContent/VAADIN/themes/base/label/label.scss
@@ -1,7 +1,11 @@
+@mixin base-label {
+
 .v-label {
 	overflow: hidden;
 }
 
 .v-label.v-has-width {
 	white-space: normal;
+}
+
 }
 \ No newline at end of file
diff --git a/WebContent/VAADIN/themes/base/link/link.css b/WebContent/VAADIN/themes/base/link/link.scss
index 322fb3e7ba..710f95d832 100644
--- a/WebContent/VAADIN/themes/base/link/link.css
+++ b/WebContent/VAADIN/themes/base/link/link.scss
@@ -1,3 +1,5 @@
+@mixin base-link {
+
 .v-link {
 	white-space: nowrap;	
 }
@@ -15,4 +17,6 @@
 .v-link img {
 	vertical-align: middle;
 	border:none;
+}
+
 }
 \ No newline at end of file
diff --git a/WebContent/VAADIN/themes/base/loginform/loginform.css b/WebContent/VAADIN/themes/base/loginform/loginform.scss
index 109d1a0a69..d2784fad47 100644
--- a/WebContent/VAADIN/themes/base/loginform/loginform.css
+++ b/WebContent/VAADIN/themes/base/loginform/loginform.scss
@@ -1,3 +1,5 @@
+@mixin base-loginform {
+
 .v-loginform {
 	height: 140px;
 	width: 200px;
@@ -6,4 +8,6 @@
 .v-app-loginpage .v-button,
 .v-app-loginpage .v-button {
 	float: left; /* Force minimum width for button */
+}
+
 }
 \ No newline at end of file
diff --git a/WebContent/VAADIN/themes/base/menubar/menubar.css b/WebContent/VAADIN/themes/base/menubar/menubar.scss
index 0e2340bb91..512a8ee1d5 100644
--- a/WebContent/VAADIN/themes/base/menubar/menubar.css
+++ b/WebContent/VAADIN/themes/base/menubar/menubar.scss
@@ -1,3 +1,5 @@
+@mixin base-menubar {
+
 .v-menubar {
 	display: inline-block;
 	white-space: nowrap;
@@ -92,3 +94,5 @@
 .v-menubar-submenu .v-menubar-menuitem-checked .v-menubar-menuitem-caption { 
 	background: transparent url(img/check.gif) no-repeat left;
 }
+
+}
diff --git a/WebContent/VAADIN/themes/base/notification/notification.css b/WebContent/VAADIN/themes/base/notification/notification.scss
index ccd5b8d218..e67ac14050 100644
--- a/WebContent/VAADIN/themes/base/notification/notification.css
+++ b/WebContent/VAADIN/themes/base/notification/notification.scss
@@ -1,3 +1,5 @@
+@mixin base-notification {
+
 .v-Notification {
 	background: #999;
 	color: #fff;
@@ -37,3 +39,5 @@
 	display: block;
 	margin: 0;
 }
+
+}
+\ No newline at end of file
diff --git a/WebContent/VAADIN/themes/base/orderedlayout/orderedlayout.css b/WebContent/VAADIN/themes/base/orderedlayout/orderedlayout.scss
index 727ca92f72..7820d842fc 100644
--- a/WebContent/VAADIN/themes/base/orderedlayout/orderedlayout.css
+++ b/WebContent/VAADIN/themes/base/orderedlayout/orderedlayout.scss
@@ -1,3 +1,5 @@
+@mixin base-orderedlayout {
+
 .v-orderedlayout,
 .v-horizontallayout,
 .v-verticallayout {
@@ -41,3 +43,5 @@
 .v-horizontallayout-slot, .v-verticallayout-slot {
 	position: absolute;
 }
+
+}
+\ No newline at end of file
diff --git a/WebContent/VAADIN/themes/base/paintable/paintable.css b/WebContent/VAADIN/themes/base/paintable/paintable.css
deleted file mode 100644
index e69de29bb2..0000000000
--- a/WebContent/VAADIN/themes/base/paintable/paintable.css
+++ /dev/null
diff --git a/WebContent/VAADIN/themes/base/paintable/paintable.scss b/WebContent/VAADIN/themes/base/paintable/paintable.scss
new file mode 100644
index 0000000000..92f30604ff
--- /dev/null
+++ b/WebContent/VAADIN/themes/base/paintable/paintable.scss
@@ -0,0 +1,12 @@
+@mixin base-paintable {
+
+.v {
+	-webkit-box-sizing: border-box;
+	-moz-box-sizing: border-box;
+	box-sizing: border-box;
+	text-align: left;
+	display: inline-block;
+	white-space: normal;
+}
+
+}
+\ No newline at end of file
diff --git a/WebContent/VAADIN/themes/base/panel/panel.css b/WebContent/VAADIN/themes/base/panel/panel.scss
index d5a9915490..93d82cd615 100644
--- a/WebContent/VAADIN/themes/base/panel/panel.css
+++ b/WebContent/VAADIN/themes/base/panel/panel.scss
@@ -1,3 +1,5 @@
+@mixin base-panel {
+
 .v-panel,
 .v-panel-caption,
 .v-panel-content,
@@ -7,7 +9,7 @@
 .v-panel-content-light,
 .v-panel-deco-light {
 	outline: none; /* Prevent selection outline which might break layouts or cause scrollbars */
-	text-align: left /* Force default alignment */
+	text-align: left; /* Force default alignment */
 }
 .v-panel-caption .v-errorindicator {
 	float: none;
@@ -40,4 +42,6 @@
 	height: 100%;
 }
 .v-panel-deco {
+}
+
 }
 \ No newline at end of file
diff --git a/WebContent/VAADIN/themes/base/popupview/popupview.css b/WebContent/VAADIN/themes/base/popupview/popupview.scss
index 8e31681c2d..e192d0d147 100644
--- a/WebContent/VAADIN/themes/base/popupview/popupview.css
+++ b/WebContent/VAADIN/themes/base/popupview/popupview.scss
@@ -1,3 +1,5 @@
+@mixin base-popupview {
+
 .v-popupview {
 	cursor: pointer;
 	text-decoration: underline;
@@ -10,4 +12,6 @@
 	width: 30px;
 	height: 30px;
 	background: transparent url(../common/img/ajax-loader-medium.gif) no-repeat 50%;
+}
+
 }
 \ No newline at end of file
diff --git a/WebContent/VAADIN/themes/base/progressindicator/progressindicator.css b/WebContent/VAADIN/themes/base/progressindicator/progressindicator.scss
index 4037802cf2..4c1483886b 100644
--- a/WebContent/VAADIN/themes/base/progressindicator/progressindicator.css
+++ b/WebContent/VAADIN/themes/base/progressindicator/progressindicator.scss
@@ -1,3 +1,5 @@
+@mixin base-progressindicator {
+
 .v-progressindicator {
 	width: 150px;
 }
@@ -28,4 +30,6 @@ div.v-progressindicator-indeterminate-disabled {
 	height: 20px;
 	width: 20px;
 	background: transparent;
+}
+
 }
 \ No newline at end of file
diff --git a/WebContent/VAADIN/themes/base/select/select.css b/WebContent/VAADIN/themes/base/select/select.scss
index b9d0dda51f..d6ef6d3585 100644
--- a/WebContent/VAADIN/themes/base/select/select.css
+++ b/WebContent/VAADIN/themes/base/select/select.scss
@@ -1,3 +1,5 @@
+@mixin base-select {
+
 .v-select {
 	text-align: left;
 }
@@ -161,4 +163,6 @@
 .v-select-required .v-select-twincol-options {
 	background: #ffaaaa;
 }
-*/
-\ No newline at end of file
+*/
+
+}
+\ No newline at end of file
diff --git a/WebContent/VAADIN/themes/base/shadow/shadow.css b/WebContent/VAADIN/themes/base/shadow/shadow.scss
index c576a026bd..4e1085aa5a 100644
--- a/WebContent/VAADIN/themes/base/shadow/shadow.css
+++ b/WebContent/VAADIN/themes/base/shadow/shadow.scss
@@ -1,3 +1,5 @@
+@mixin base-shadow {
+
 .v-shadow {
 	position: absolute;
 }
@@ -66,3 +68,5 @@
     width: 10px;          height: 10px;
     background: transparent url(img/bottom-right.png);
 }
+
+}
+\ No newline at end of file
diff --git a/WebContent/VAADIN/themes/base/slider/slider.css b/WebContent/VAADIN/themes/base/slider/slider.scss
index 1be474f04e..0c65bf1e73 100644
--- a/WebContent/VAADIN/themes/base/slider/slider.css
+++ b/WebContent/VAADIN/themes/base/slider/slider.scss
@@ -1,3 +1,5 @@
+@mixin base-slider {
+
 .v-slider {
 	margin: 5px 0;
 }
@@ -63,3 +65,5 @@
 	background: #FFE0E0;
 }
 */
+
+}
+\ No newline at end of file
diff --git a/WebContent/VAADIN/themes/base/splitpanel/splitpanel.css b/WebContent/VAADIN/themes/base/splitpanel/splitpanel.scss
index 7831a8d9ce..2c3e578b0b 100644
--- a/WebContent/VAADIN/themes/base/splitpanel/splitpanel.css
+++ b/WebContent/VAADIN/themes/base/splitpanel/splitpanel.scss
@@ -1,3 +1,5 @@
+@mixin base-splitpanel {
+
 .v-splitpanel-horizontal,
 .v-splitpanel-vertical {
 	overflow: hidden;
@@ -29,3 +31,5 @@
 .v-disabled .v-splitpanel-vsplitter div {
 	cursor: default;
 }
+
+}
+\ No newline at end of file
diff --git a/WebContent/VAADIN/themes/base/styles.scss b/WebContent/VAADIN/themes/base/styles.scss
new file mode 100644
index 0000000000..a1bf1ec42c
--- /dev/null
+++ b/WebContent/VAADIN/themes/base/styles.scss
@@ -0,0 +1,46 @@
+@import "base.scss";
+
+// @include base-app;
+
+// everything included from base theme
+// other themes should enclose corresponding definitions in theme selectors
+
+@include base-paintable;
+
+@include base-absolutelayout;
+@include base-accordion;
+@include base-button;
+@include base-caption;
+
+// here for now to preserve old semantics
+@include base-common;
+
+@include base-csslayout;
+@include base-customcomponent;
+@include base-customlayout;
+@include base-datefield;
+@include base-dragwrapper;
+@include base-embedded;
+@include base-formlayout;
+@include base-gridlayout;
+@include base-label;
+@include base-link;
+@include base-loginform;
+@include base-menubar;
+@include base-notification;
+@include base-orderedlayout;
+@include base-panel;
+@include base-popupview;
+@include base-progressindicator;
+@include base-select;
+@include base-shadow;
+@include base-slider;
+@include base-splitpanel;
+@include base-table;
+@include base-tabsheet;
+@include base-textfield;
+@include base-richtextarea;
+@include base-tree;
+@include base-treetable;
+@include base-upload;
+@include base-window;
diff --git a/WebContent/VAADIN/themes/base/table/table.css b/WebContent/VAADIN/themes/base/table/table.scss
index 55728e3264..d521b5ebae 100644
--- a/WebContent/VAADIN/themes/base/table/table.css
+++ b/WebContent/VAADIN/themes/base/table/table.scss
@@ -1,3 +1,5 @@
+@mixin base-table {
+
 /* Table theme building instructions
  * 
  * Vaadin scroll table is very complex widget with dozens of features. These 
@@ -241,11 +243,6 @@
 .v-off {
 	color: #ddd;
 }
-
-.v-table .v-checkbox {
-	display: inline-block;
-}
-
 /*************************************
  * Drag'n'drop styles
  *************************************/
@@ -281,4 +278,6 @@
 .v-ff .v-table-row-drag-bottom .v-table-cell-content:first-child:after,
 .v-ie .v-table-row-drag-bottom .v-table-cell-content:first-child:after {
 	margin-top: -2px;
+}
+
 }
 \ No newline at end of file
diff --git a/WebContent/VAADIN/themes/base/tabsheet/tabsheet.css b/WebContent/VAADIN/themes/base/tabsheet/tabsheet.scss
index d369cd99f0..c58c25be58 100644
--- a/WebContent/VAADIN/themes/base/tabsheet/tabsheet.css
+++ b/WebContent/VAADIN/themes/base/tabsheet/tabsheet.scss
@@ -1,8 +1,10 @@
+@mixin base-tabsheet {
+
 .v-tabsheet,
 .v-tabsheet-content,
 .v-tabsheet-deco {
 	outline: none; /* Prevent selection outline which might break layouts or cause scrollbars */
-	text-align: left /* Force default alignment */
+	text-align: left; /* Force default alignment */
 }
 .v-tabsheet-tabs {
 	empty-cells: hide;
@@ -121,4 +123,6 @@
 }
 .v-tabsheet-hidetabs .v-tabsheet-deco {
 	height: 0;
+}
+
 }
 \ No newline at end of file
diff --git a/WebContent/VAADIN/themes/base/textfield/textfield-normal.css b/WebContent/VAADIN/themes/base/textfield/textfield-normal.css
deleted file mode 100644
index 51ad0a9077..0000000000
--- a/WebContent/VAADIN/themes/base/textfield/textfield-normal.css
+++ /dev/null
@@ -1,48 +0,0 @@
-.v-textfield {
-	text-align: left /* Force default alignment */
-}
-.v-textarea {
-	resize: none;
-	white-space: pre-wrap;
-}
-.v-textfield-focus,
-.v-textarea-focus {
-}
-input.v-textfield-prompt,
-textarea.v-textarea-prompt {
-	color: #999;
-	font-style: italic;
-}
-input.v-textfield-readonly,
-textarea.v-textarea-readonly {
-	background: transparent;
-	border: none;
-	resize: none;
-}
-input.v-disabled,
-textarea.v-disabled {
-	resize: none;
-}
-input.v-textfield-readonly:focus,
-textarea.v-textarea-readonly:focus {
-	outline: none;
-}
-/* Disabled by default
-.v-textarea-error,
-.v-textfield-error,
-.v-richtextarea-error iframe.gwt-RichTextArea {
-	background: #FFE0E0;	
-}
-*/
-/* Disabled by default
-.v-textarea-required,
-.v-textfield-required,
-.v-richtextarea-required iframe.gwt-RichTextArea {
-	background: #FFE0E0;	
-}
-*/
-/* Safari focus glow fix */
-.v-sa input:focus, 
-.v-sa textarea:focus {
-	outline-width: medium;
-}
-\ No newline at end of file
diff --git a/WebContent/VAADIN/themes/base/textfield/textfield.css b/WebContent/VAADIN/themes/base/textfield/textfield.css
deleted file mode 100644
index 956b302efe..0000000000
--- a/WebContent/VAADIN/themes/base/textfield/textfield.css
+++ /dev/null
@@ -1,2 +0,0 @@
-@import "textfield-normal.css";
-@import "richtext.css";
-\ No newline at end of file
diff --git a/WebContent/VAADIN/themes/base/textfield/richtext.css b/WebContent/VAADIN/themes/base/textfield/textfield.scss
index 6a236886cc..dc6a4d9aa3 100644
--- a/WebContent/VAADIN/themes/base/textfield/richtext.css
+++ b/WebContent/VAADIN/themes/base/textfield/textfield.scss
@@ -1,3 +1,62 @@
+// textfield-normal.css
+
+@mixin base-textfield {
+
+.v-textfield {
+	text-align: left; /* Force default alignment */
+}
+.v-textarea {
+	resize: none;
+	white-space: pre-wrap;
+}
+.v-textfield-focus,
+.v-textarea-focus {
+}
+input.v-textfield-prompt,
+textarea.v-textarea-prompt {
+	color: #999;
+	font-style: italic;
+}
+input.v-textfield-readonly,
+textarea.v-textarea-readonly {
+	background: transparent;
+	border: none;
+	resize: none;
+}
+input.v-disabled,
+textarea.v-disabled {
+	resize: none;
+}
+input.v-textfield-readonly:focus,
+textarea.v-textarea-readonly:focus {
+	outline: none;
+}
+/* Disabled by default
+.v-textarea-error,
+.v-textfield-error,
+.v-richtextarea-error iframe.gwt-RichTextArea {
+	background: #FFE0E0;	
+}
+*/
+/* Disabled by default
+.v-textarea-required,
+.v-textfield-required,
+.v-richtextarea-required iframe.gwt-RichTextArea {
+	background: #FFE0E0;	
+}
+*/
+/* Safari focus glow fix */
+.v-sa input:focus, 
+.v-sa textarea:focus {
+	outline-width: medium;
+}
+
+}
+
+// richtext.css
+
+@mixin base-richtextarea {
+
 .v-richtextarea {
 	border: 1px solid #aaa;
 	overflow: hidden;
@@ -55,4 +114,6 @@
 
 .v-richtextarea-readonly {
 	border: none;
+}
+
 }
 \ No newline at end of file
diff --git a/WebContent/VAADIN/themes/base/tree/tree-connectors.css b/WebContent/VAADIN/themes/base/tree/tree-connectors.css
deleted file mode 100644
index c60e41c48b..0000000000
--- a/WebContent/VAADIN/themes/base/tree/tree-connectors.css
+++ /dev/null
@@ -1,35 +0,0 @@
-/* Make item caption height an even number (so that the connector dots overlap nicely) */
-.v-tree-connectors .v-tree-node-caption {
-	padding-top: 1px;
-}
-.v-tree-connectors .v-tree-node {
-	background: transparent url(img/connector-expand.png) no-repeat 2px -52px;
-}
-.v-tree-connectors .v-tree-node-expanded {
-	background: transparent url(img/connector-collapse.png) no-repeat 2px -52px;
-}
-.v-tree-connectors .v-tree-node-last {
-	background: transparent url(img/connector-expand-last.png) no-repeat 2px -52px;
-}
-.v-tree-connectors .v-tree-node-expanded.v-tree-node-last {
-	background: transparent url(img/connector-collapse-last.png) no-repeat 2px -52px;
-}
-.v-tree-connectors .v-tree-node-leaf {
-	background: transparent url(img/connector-leaf.png) repeat-y 2px 50%;
-}
-.v-tree-connectors .v-tree-node-leaf-last {
-	background: transparent url(img/connector-leaf-last.png) repeat-y 2px 50%;
-}
-.v-tree-connectors .v-tree-node-children {
-	background: transparent url(img/connector.png) repeat-y 2px 0;
-}
-.v-tree-connectors .v-tree-node-children-last {
-	background: transparent;
-}
-.v-tree-connectors .v-tree-node-drag-top,
-.v-tree-connectors .v-tree-node-expanded.v-tree-node-drag-top {
-	background-position: 2px -53px;
-}
-.v-tree-connectors .v-tree-node-drag-top.v-tree-node-leaf {
-	background-position: 2px 50%;
-}
diff --git a/WebContent/VAADIN/themes/base/tree/tree.css b/WebContent/VAADIN/themes/base/tree/tree.css
deleted file mode 100644
index 59987731b0..0000000000
--- a/WebContent/VAADIN/themes/base/tree/tree.css
+++ /dev/null
@@ -1,2 +0,0 @@
-@import "tree-default.css";
-@import "tree-connectors.css";
-\ No newline at end of file
diff --git a/WebContent/VAADIN/themes/base/tree/tree-default.css b/WebContent/VAADIN/themes/base/tree/tree.scss
index 23721c77ae..0319bbe994 100644
--- a/WebContent/VAADIN/themes/base/tree/tree-default.css
+++ b/WebContent/VAADIN/themes/base/tree/tree.scss
@@ -1,3 +1,7 @@
+@mixin base-tree {
+
+// tree-default.css
+
 .v-tree {
 	text-align: left; /* Force default alignment */
 	overflow: hidden;
@@ -37,9 +41,9 @@ div.v-tree-node-leaf {
 .v-tree-node-children {
 	padding-left: 1em;
 }
-/***************************************
- * Drag'n'drop styles
- ***************************************/
+
+// Drag'n'drop styles
+
 .v-tree .v-tree-node-drag-top {
 	border-top: 2px solid #1d9dff;
 	margin-top: -1px;
@@ -92,4 +96,46 @@ div.v-tree-node-leaf {
 .v-tree .v-tree-node-drag-top,
 .v-tree .v-tree-node-drag-bottom {
 	border-color: rgba(0,109,232,.6);
+}
+
+// tree-connectors.css
+
+.v-tree-connectors {
+	// Make item caption height an even number (so that the connector dots overlap nicely)
+	.v-tree-node-caption {
+		padding-top: 1px;
+	}
+	.v-tree-node {
+		background: transparent url(img/connector-expand.png) no-repeat 2px -52px;
+	}
+	.v-tree-node-expanded {
+		background: transparent url(img/connector-collapse.png) no-repeat 2px -52px;
+	}
+	.v-tree-node-last {
+		background: transparent url(img/connector-expand-last.png) no-repeat 2px -52px;
+	}
+	.v-tree-node-expanded.v-tree-node-last {
+		background: transparent url(img/connector-collapse-last.png) no-repeat 2px -52px;
+	}
+	.v-tree-node-leaf {
+		background: transparent url(img/connector-leaf.png) repeat-y 2px 50%;
+	}
+	.v-tree-node-leaf-last {
+		background: transparent url(img/connector-leaf-last.png) repeat-y 2px 50%;
+	}
+	.v-tree-node-children {
+		background: transparent url(img/connector.png) repeat-y 2px 0;
+	}
+	.v-tree-node-children-last {
+		background: transparent;
+	}
+	.v-tree-node-drag-top,
+	.v-tree-node-expanded.v-tree-node-drag-top {
+		background-position: 2px -53px;
+	}
+	.v-tree-node-drag-top.v-tree-node-leaf {
+		background-position: 2px 50%;
+	}
+}
+
 }
 \ No newline at end of file
diff --git a/WebContent/VAADIN/themes/base/treetable/treetable.css b/WebContent/VAADIN/themes/base/treetable/treetable.scss
index 4d9ad5031b..30e6b9ccbd 100644
--- a/WebContent/VAADIN/themes/base/treetable/treetable.css
+++ b/WebContent/VAADIN/themes/base/treetable/treetable.scss
@@ -1,3 +1,5 @@
+@mixin base-treetable {
+
 .v-treetable-treespacer {
     display: inline-block;
     background: transparent;
@@ -63,3 +65,5 @@ div table.v-treetable-animation-clone tr.v-table-row td.v-table-cell-content,
 div table.v-treetable-animation-clone tr.v-table-row-odd td.v-table-cell-content {
 	visibility: visible;
 }
+
+}
+\ No newline at end of file
diff --git a/WebContent/VAADIN/themes/base/upload/upload.css b/WebContent/VAADIN/themes/base/upload/upload.scss
index adc5751d7c..e5d94ce678 100644
--- a/WebContent/VAADIN/themes/base/upload/upload.css
+++ b/WebContent/VAADIN/themes/base/upload/upload.scss
@@ -1,3 +1,5 @@
+@mixin base-upload {
+
 .v-upload {
 	white-space: nowrap;
 }
@@ -33,4 +35,5 @@
 	width: 100%;
 	text-align: left;
 }
-  
-\ No newline at end of file
+
+}
+\ No newline at end of file
diff --git a/WebContent/VAADIN/themes/base/window/window.css b/WebContent/VAADIN/themes/base/window/window.scss
index d728e7f60e..33e54b046f 100644
--- a/WebContent/VAADIN/themes/base/window/window.css
+++ b/WebContent/VAADIN/themes/base/window/window.scss
@@ -1,3 +1,5 @@
+@mixin base-window {
+
 .v-window {
 	background: #fff;
 }
@@ -160,3 +162,5 @@ div.v-window-header {
     width: 28px;          height: 28px;
     background: transparent url(img/shadow/bottom-right.png);
 }
+
+}
+\ No newline at end of file