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.

38 files changed, 230 insertions, 21 deletions

diff --git a/WebContent/VAADIN/themes/reindeer/a-sprite-definitions/a-sprite-definitions.css b/WebContent/VAADIN/themes/reindeer/a-sprite-definitions/a-sprite-definitions.scss
index 87c598956f..87c598956f 100644
--- a/WebContent/VAADIN/themes/reindeer/a-sprite-definitions/a-sprite-definitions.css
+++ b/WebContent/VAADIN/themes/reindeer/a-sprite-definitions/a-sprite-definitions.scss
diff --git a/WebContent/VAADIN/themes/reindeer/accordion/accordion.css b/WebContent/VAADIN/themes/reindeer/accordion/accordion.scss
index 5e51a115d9..8ba0b2151f 100644
--- a/WebContent/VAADIN/themes/reindeer/accordion/accordion.css
+++ b/WebContent/VAADIN/themes/reindeer/accordion/accordion.scss
@@ -1,3 +1,5 @@
+@mixin reindeer-accordion {
+
 .v-accordion {
 	border: 1px solid #bebebe;
 	border-radius: 2px;
@@ -42,4 +44,6 @@
 	border-radius: 0;
 	-webkit-border-radius: 0;
 	-moz-border-radius: 0;
+}
+
 }
\ No newline at end of file
diff --git a/WebContent/VAADIN/themes/reindeer/button/button-ie.css b/WebContent/VAADIN/themes/reindeer/button/button-ie.scss
index 47d9496e81..5bf38c4442 100644
--- a/WebContent/VAADIN/themes/reindeer/button/button-ie.css
+++ b/WebContent/VAADIN/themes/reindeer/button/button-ie.scss
@@ -1,4 +1,8 @@
+@mixin reindeer-button-ie {
+
 .v-ie8 .v-nativebutton-link {
 	padding: 0;
 	text-align: left;
 }
+
+}
\ No newline at end of file
diff --git a/WebContent/VAADIN/themes/reindeer/button/button-link-style.css b/WebContent/VAADIN/themes/reindeer/button/button-link-style.scss
index f4ba80b3cd..aebda24cd4 100644
--- a/WebContent/VAADIN/themes/reindeer/button/button-link-style.css
+++ b/WebContent/VAADIN/themes/reindeer/button/button-link-style.scss
@@ -1,3 +1,5 @@
+@mixin reindeer-button-link-style {
+
 .v-button.v-button-link,
 .v-button.v-button-link:focus,
 .v-button.v-button-link:active,
@@ -32,4 +34,6 @@
 .v-button-link:focus .v-button-caption,
 .v-nativebutton-link:focus .v-nativebutton-caption {
 	outline: 1px dotted #1b699f;
-	}
\ No newline at end of file
+	}
+
+}
\ No newline at end of file
diff --git a/WebContent/VAADIN/themes/reindeer/button/button-primary-style.css b/WebContent/VAADIN/themes/reindeer/button/button-primary-style.scss
index fdfe90ce3a..ffb4d250d3 100644
--- a/WebContent/VAADIN/themes/reindeer/button/button-primary-style.css
+++ b/WebContent/VAADIN/themes/reindeer/button/button-primary-style.scss
@@ -1,3 +1,5 @@
+@mixin reindeer-button-primary-style {
+
 .v-button-primary:focus {
 	background-image: url(img/primary-left-focus.png); /** sprite-ref: buttons */
 	}
@@ -60,3 +62,5 @@
 .black .v-disabled.v-button-primary .v-button-wrap {
 	background-image: url(img/black/primary-right.png); /** sprite-ref: black-buttons; sprite-alignment: right */
 	}
+
+}
\ No newline at end of file
diff --git a/WebContent/VAADIN/themes/reindeer/button/button-small-style.css b/WebContent/VAADIN/themes/reindeer/button/button-small-style.scss
index fa6b177624..0ec33e330c 100644
--- a/WebContent/VAADIN/themes/reindeer/button/button-small-style.css
+++ b/WebContent/VAADIN/themes/reindeer/button/button-small-style.scss
@@ -1,3 +1,5 @@
+@mixin reindeer-button-small-style {
+
 .v-button-small:focus {
 	background-image: url(img/small-left-focus.png); /** sprite-ref: buttons */
 	}
@@ -64,4 +66,6 @@
 .black .v-button-small .v-button-wrap,
 .black .v-disabled.v-button-small .v-button-wrap {
 	background-image: url(img/black/small-right.png); /** sprite-ref: black-buttons; sprite-alignment: right */
-	}
\ No newline at end of file
+	}
+
+}
\ No newline at end of file
diff --git a/WebContent/VAADIN/themes/reindeer/button/button-standard.css b/WebContent/VAADIN/themes/reindeer/button/button-standard.scss
index becd20457d..4df09bc1bd 100644
--- a/WebContent/VAADIN/themes/reindeer/button/button-standard.css
+++ b/WebContent/VAADIN/themes/reindeer/button/button-standard.scss
@@ -1,3 +1,5 @@
+@mixin reindeer-button-standard {
+
 .v-button:focus {
 	background-image: url(img/left-focus.png); /** sprite-ref: buttons */
 	outline: none;
@@ -87,4 +89,6 @@
 .black .v-button-caption {
 	color: #c9ccce;
 	text-shadow: #121314 0 -1px 0;
-	}
\ No newline at end of file
+	}
+
+}
\ No newline at end of file
diff --git a/WebContent/VAADIN/themes/reindeer/button/button.css b/WebContent/VAADIN/themes/reindeer/button/button.css
deleted file mode 100644
index 1948e5aafb..0000000000
--- a/WebContent/VAADIN/themes/reindeer/button/button.css
+++ /dev/null
@@ -1,10 +0,0 @@
-/* Standard implementation of the button theme
- * These files contain styles that apply to all browsers
- */
-@import "button-standard.css";
-@import "button-primary-style.css";
-@import "button-small-style.css";
-@import "button-link-style.css";
-
-/* Browser-specific corrections to the standard implementation */
-@import "button-ie.css";
\ No newline at end of file
diff --git a/WebContent/VAADIN/themes/reindeer/button/button.scss b/WebContent/VAADIN/themes/reindeer/button/button.scss
new file mode 100644
index 0000000000..34a4efda04
--- /dev/null
+++ b/WebContent/VAADIN/themes/reindeer/button/button.scss
@@ -0,0 +1,22 @@
+/* Standard implementation of the button theme
+ * These files contain styles that apply to all browsers
+ */
+@import "button-standard.scss";
+@import "button-primary-style.scss";
+@import "button-small-style.scss";
+@import "button-link-style.scss";
+
+/* Browser-specific corrections to the standard implementation */
+@import "button-ie.scss";
+
+@mixin reindeer-button {
+
+	@include reindeer-button-standard;
+	@include reindeer-button-primary-style;
+	@include reindeer-button-small-style;
+	@include reindeer-button-link-style;
+
+	/* Browser-specific corrections to the standard implementation */
+	@include reindeer-button-ie;
+
+}
diff --git a/WebContent/VAADIN/themes/reindeer/common/common.css b/WebContent/VAADIN/themes/reindeer/common/common.scss
index ff8ae47036..86f546a6a2 100644
--- a/WebContent/VAADIN/themes/reindeer/common/common.css
+++ b/WebContent/VAADIN/themes/reindeer/common/common.scss
@@ -1,3 +1,5 @@
+@mixin reindeer-common {
+
 .v-generated-body,
 .v-app {
 	background: #f5f5f5;
@@ -119,4 +121,6 @@
 .portlet .v-popupview-popup .v-checkbox input {
 	margin-right: 3px;
 	background: transparent;
+}
+
 }
\ No newline at end of file
diff --git a/WebContent/VAADIN/themes/reindeer/datefield/datefield.css b/WebContent/VAADIN/themes/reindeer/datefield/datefield.scss
index 1ececf9fb4..17b9d42cdb 100644
--- a/WebContent/VAADIN/themes/reindeer/datefield/datefield.css
+++ b/WebContent/VAADIN/themes/reindeer/datefield/datefield.scss
@@ -1,3 +1,5 @@
+@mixin reindeer-datefield {
+
 .v-datefield {
 	overflow: hidden;
 }
@@ -366,4 +368,6 @@ td.v-datefield-calendarpanel-nextyear {
 }
 .black .v-datefield-prompt .v-datefield-textfield {
 	color: #5f6366;
+}
+
 }
\ No newline at end of file
diff --git a/WebContent/VAADIN/themes/reindeer/formlayout/formlayout.css b/WebContent/VAADIN/themes/reindeer/formlayout/formlayout.scss
index b28040a0e9..ab47767dcf 100644
--- a/WebContent/VAADIN/themes/reindeer/formlayout/formlayout.css
+++ b/WebContent/VAADIN/themes/reindeer/formlayout/formlayout.scss
@@ -1,3 +1,5 @@
+@mixin reindeer-formlayout {
+
 .v-formlayout-errorcell {
 	width: 13px;
 }
@@ -57,4 +59,6 @@
 }
 .black .v-form legend {
 	color: #e3e6e8;
+}
+
 }
\ No newline at end of file
diff --git a/WebContent/VAADIN/themes/reindeer/label/label.css b/WebContent/VAADIN/themes/reindeer/label/label.scss
index 905ed7251d..a8418718e0 100644
--- a/WebContent/VAADIN/themes/reindeer/label/label.css
+++ b/WebContent/VAADIN/themes/reindeer/label/label.scss
@@ -1,3 +1,5 @@
+@mixin reindeer-label {
+
 .v-label {
 	line-height: 18px;
 }
@@ -119,4 +121,6 @@
 /* Labels inside Table don't need a line-height */
 .v-table .v-label {
 	line-height: normal;
+}
+
 }
\ No newline at end of file
diff --git a/WebContent/VAADIN/themes/reindeer/layouts/layouts.css b/WebContent/VAADIN/themes/reindeer/layouts/layouts.scss
index 528d4b9174..832e480010 100644
--- a/WebContent/VAADIN/themes/reindeer/layouts/layouts.css
+++ b/WebContent/VAADIN/themes/reindeer/layouts/layouts.scss
@@ -1,3 +1,5 @@
+@mixin reindeer-layouts {
+
 .v-orderedlayout-margin-top,
 .v-horizontallayout-margin-top,
 .v-verticallayout-margin-top {
@@ -85,4 +87,6 @@
 }
 .v-panel-content > div.black {
 	background: #1e2022 url(img/black-bg.png) repeat-x;
+}
+
 }
\ No newline at end of file
diff --git a/WebContent/VAADIN/themes/reindeer/link/link.css b/WebContent/VAADIN/themes/reindeer/link/link.scss
index e3847f1180..291479b2d1 100644
--- a/WebContent/VAADIN/themes/reindeer/link/link.css
+++ b/WebContent/VAADIN/themes/reindeer/link/link.scss
@@ -1,3 +1,5 @@
+@mixin reindeer-link {
+
 .v-link a:link span {
 	color: #1b699f;
 }
@@ -6,4 +8,6 @@
 }
 .v-link a:hover span {
 	color: #2483c4;
+}
+
 }
\ No newline at end of file
diff --git a/WebContent/VAADIN/themes/reindeer/menubar/menubar.css b/WebContent/VAADIN/themes/reindeer/menubar/menubar.scss
index 165eacc840..78f4a9fa45 100644
--- a/WebContent/VAADIN/themes/reindeer/menubar/menubar.css
+++ b/WebContent/VAADIN/themes/reindeer/menubar/menubar.scss
@@ -1,3 +1,5 @@
+@mixin reindeer-menubar {
+
 .v-menubar {
 	height: 23px;
 	background: #323336 repeat-x;
@@ -70,3 +72,5 @@
 .v-menubar-submenu .v-menubar-menuitem-selected-unchecked .v-menubar-menuitem-caption {
 	background: transparent url(img/unchecked-selected.png) no-repeat left;
 }
+
+}
\ No newline at end of file
diff --git a/WebContent/VAADIN/themes/reindeer/notification/notification.css b/WebContent/VAADIN/themes/reindeer/notification/notification.scss
index 33b56ef891..d9ddd4da27 100644
--- a/WebContent/VAADIN/themes/reindeer/notification/notification.css
+++ b/WebContent/VAADIN/themes/reindeer/notification/notification.scss
@@ -1,3 +1,5 @@
+@mixin reindeer-notification {
+
 .v-Notification {
 	color: #fff;
 	border-radius: 4px;
@@ -41,4 +43,6 @@
 }
 .v-Notification-system {
 	background-color: #b40000;
+}
+
 }
\ No newline at end of file
diff --git a/WebContent/VAADIN/themes/reindeer/panel/panel.css b/WebContent/VAADIN/themes/reindeer/panel/panel.scss
index 23575799ab..00483c5546 100644
--- a/WebContent/VAADIN/themes/reindeer/panel/panel.css
+++ b/WebContent/VAADIN/themes/reindeer/panel/panel.scss
@@ -1,3 +1,5 @@
+@mixin reindeer-panel {
+
 .blue .v-panel-caption,
 .blue .v-panel-nocaption,
 .blue .v-panel-content {
@@ -71,4 +73,6 @@
 .v-panel-light .v-panel-deco-light {
 	height: 0;
 	border: none;
+}
+
 }
\ No newline at end of file
diff --git a/WebContent/VAADIN/themes/reindeer/popupview/popupview.css b/WebContent/VAADIN/themes/reindeer/popupview/popupview.scss
index 8336f46505..7e7f55fda5 100644
--- a/WebContent/VAADIN/themes/reindeer/popupview/popupview.css
+++ b/WebContent/VAADIN/themes/reindeer/popupview/popupview.scss
@@ -1,3 +1,5 @@
+@mixin reindeer-popupview {
+
 .v-popupview {
 	color: #1b699f;
 }
@@ -7,4 +9,6 @@
 .v-popupview-popup {
 	background: #fff;
 	padding: 3px;
+}
+
 }
\ No newline at end of file
diff --git a/WebContent/VAADIN/themes/reindeer/progressindicator/progressindicator.css b/WebContent/VAADIN/themes/reindeer/progressindicator/progressindicator.scss
index 70a42e483e..f3f3a59afb 100644
--- a/WebContent/VAADIN/themes/reindeer/progressindicator/progressindicator.css
+++ b/WebContent/VAADIN/themes/reindeer/progressindicator/progressindicator.scss
@@ -1,3 +1,5 @@
+@mixin reindeer-progressindicator {
+
 .v-progressindicator-wrapper {
 	background: #dfe2e4 url(img/base.gif) repeat-x;
 	border: 1px solid #bfbfbf;
@@ -7,4 +9,6 @@
 }
 .v-progressindicator-indicator {
 	background: #f7f9f9 url(img/progress.png);
+}
+
 }
\ No newline at end of file
diff --git a/WebContent/VAADIN/themes/reindeer/reindeer.scss b/WebContent/VAADIN/themes/reindeer/reindeer.scss
new file mode 100644
index 0000000000..6033466f63
--- /dev/null
+++ b/WebContent/VAADIN/themes/reindeer/reindeer.scss
@@ -0,0 +1,29 @@
+// this file just defines all reindeer mixins by importing them
+
+// common between others for now for backwards compatibility
+
+@import "accordion/accordion.scss";
+// TODO this is problematic: comments get stripped out
+@import "a-sprite-definitions/a-sprite-definitions.scss";
+@import "button/button.scss";
+
+@import "common/common.scss";
+
+@import "datefield/datefield.scss";
+@import "formlayout/formlayout.scss";
+@import "label/label.scss";
+@import "layouts/layouts.scss";
+@import "link/link.scss";
+@import "menubar/menubar.scss";
+@import "notification/notification.scss";
+@import "panel/panel.scss";
+@import "popupview/popupview.scss";
+@import "progressindicator/progressindicator.scss";
+@import "select/select.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 "window/window.scss";
diff --git a/WebContent/VAADIN/themes/reindeer/select/select.css b/WebContent/VAADIN/themes/reindeer/select/select.scss
index 8962862702..4a8d07fd91 100644
--- a/WebContent/VAADIN/themes/reindeer/select/select.css
+++ b/WebContent/VAADIN/themes/reindeer/select/select.scss
@@ -1,3 +1,5 @@
+@mixin reindeer-select {
+
 .v-filterselect {
 	height: 24px;
 	background-repeat: no-repeat;
@@ -258,3 +260,5 @@
 	background: #151717;
 	color: #c9ccce;
 }
+
+}
\ No newline at end of file
diff --git a/WebContent/VAADIN/themes/reindeer/slider/slider.css b/WebContent/VAADIN/themes/reindeer/slider/slider.scss
index cb5a0f7dbe..047237d262 100644
--- a/WebContent/VAADIN/themes/reindeer/slider/slider.css
+++ b/WebContent/VAADIN/themes/reindeer/slider/slider.scss
@@ -1,3 +1,5 @@
+@mixin reindeer-slider {
+
 .v-slider {
 	border-top: 1px solid #9a9c9e;
 	border-bottom: 1px solid #bdbfc1;
@@ -38,4 +40,6 @@
 	width: 10px;
 	height: 10px;
 	margin-left: -5px;
+}
+
 }
\ No newline at end of file
diff --git a/WebContent/VAADIN/themes/reindeer/splitpanel/splitpanel.css b/WebContent/VAADIN/themes/reindeer/splitpanel/splitpanel.scss
index ac27629187..07a38891f5 100644
--- a/WebContent/VAADIN/themes/reindeer/splitpanel/splitpanel.css
+++ b/WebContent/VAADIN/themes/reindeer/splitpanel/splitpanel.scss
@@ -1,3 +1,5 @@
+@mixin reindeer-splitpanel {
+
 .v-splitpanel-hsplitter,
 .v-splitpanel-hsplitter-locked {
 	width: 7px;
@@ -63,4 +65,6 @@
 	height: 5px;
 	margin-top: -2px;
 	background: transparent;
+}
+
 }
\ No newline at end of file
diff --git a/WebContent/VAADIN/themes/reindeer/styles.scss b/WebContent/VAADIN/themes/reindeer/styles.scss
new file mode 100644
index 0000000000..51daace9d3
--- /dev/null
+++ b/WebContent/VAADIN/themes/reindeer/styles.scss
@@ -0,0 +1,32 @@
+// this file actually attaches all reindeer mixins to a parent style
+
+@import "../base/styles.scss";
+@import "reindeer.scss";
+
+// .v-theme-reindeer {
+	@include reindeer-accordion;
+	// TODO this is problematic: comments get stripped out
+	// @include a-sprite-definitions;
+	@include reindeer-button;
+	
+	@include reindeer-common;
+	
+	@include reindeer-datefield;
+	@include reindeer-formlayout;
+	@include reindeer-label;
+	@include reindeer-layouts;
+	@include reindeer-link;
+	@include reindeer-menubar;
+	@include reindeer-notification;
+	@include reindeer-panel;
+	@include reindeer-popupview;
+	@include reindeer-progressindicator;
+	@include reindeer-select;
+	@include reindeer-slider;
+	@include reindeer-splitpanel;
+	@include reindeer-table;
+	@include reindeer-tabsheet;
+	@include reindeer-textfield;
+	@include reindeer-tree;
+	@include reindeer-window;
+// }
diff --git a/WebContent/VAADIN/themes/reindeer/table/table.css b/WebContent/VAADIN/themes/reindeer/table/table.scss
index 5d67cfe564..cb190e1f30 100644
--- a/WebContent/VAADIN/themes/reindeer/table/table.css
+++ b/WebContent/VAADIN/themes/reindeer/table/table.scss
@@ -1,3 +1,5 @@
+@mixin reindeer-table {
+
 /* Table on blue background */
 .blue .v-table-header-wrap {
 	border-color: #92a2aa;
@@ -286,4 +288,6 @@
 .v-table-borderless .v-table-header-wrap,
 .v-table-borderless .v-table-body {
 	border: none;
+}
+
 }
\ No newline at end of file
diff --git a/WebContent/VAADIN/themes/reindeer/tabsheet/tabsheet-borderless-style.css b/WebContent/VAADIN/themes/reindeer/tabsheet/tabsheet-borderless-style.scss
index e9325404da..1efdab68af 100644
--- a/WebContent/VAADIN/themes/reindeer/tabsheet/tabsheet-borderless-style.css
+++ b/WebContent/VAADIN/themes/reindeer/tabsheet/tabsheet-borderless-style.scss
@@ -1,3 +1,5 @@
+@mixin reindeer-tabsheet-borderless-style {
+
 .v-tabsheet-borderless .v-tabsheet-tabitemcell-first {
 	padding-left: 7px;
 	background: url(img/framed/tab-first-left.png) no-repeat -3px 0;
@@ -17,4 +19,6 @@
 .v-tabsheet-borderless .v-tabsheet-deco {
 	height: 0;
 	border-top: none;
+}
+
 }
\ No newline at end of file
diff --git a/WebContent/VAADIN/themes/reindeer/tabsheet/tabsheet-hover-closable-style.css b/WebContent/VAADIN/themes/reindeer/tabsheet/tabsheet-hover-closable-style.scss
index 40b75c59b3..dda381b1b0 100644
--- a/WebContent/VAADIN/themes/reindeer/tabsheet/tabsheet-hover-closable-style.css
+++ b/WebContent/VAADIN/themes/reindeer/tabsheet/tabsheet-hover-closable-style.scss
@@ -1,6 +1,10 @@
+@mixin reindeer-tabsheet-hover-closable-style {
+
 .v-tabsheet-tabs-hover-closable .v-tabsheet-caption-close {
 	visibility: hidden;
 }
 .v-tabsheet-tabs-hover-closable .v-tabsheet-tabitem:hover .v-tabsheet-caption-close {
 	visibility: visible;
+}
+
 }
\ No newline at end of file
diff --git a/WebContent/VAADIN/themes/reindeer/tabsheet/tabsheet-minimal-style.css b/WebContent/VAADIN/themes/reindeer/tabsheet/tabsheet-minimal-style.scss
index dfa83d7088..608aae55cb 100644
--- a/WebContent/VAADIN/themes/reindeer/tabsheet/tabsheet-minimal-style.css
+++ b/WebContent/VAADIN/themes/reindeer/tabsheet/tabsheet-minimal-style.scss
@@ -1,3 +1,5 @@
+@mixin reindeer-tabsheet-minimal-style {
+
 /**
  * Tabsheet "minimal" style --------------
  */
@@ -142,4 +144,6 @@
 }
 .black .v-tabsheet-tabs-minimal .v-tabsheet-caption-close:active {
 	background: #626669;
+}
+
 }
\ No newline at end of file
diff --git a/WebContent/VAADIN/themes/reindeer/tabsheet/tabsheet-normal-style.css b/WebContent/VAADIN/themes/reindeer/tabsheet/tabsheet-normal-style.scss
index 3d23fa110a..11bb98536a 100644
--- a/WebContent/VAADIN/themes/reindeer/tabsheet/tabsheet-normal-style.css
+++ b/WebContent/VAADIN/themes/reindeer/tabsheet/tabsheet-normal-style.scss
@@ -1,3 +1,5 @@
+@mixin reindeer-tabsheet-normal-style {
+
 /* Default Tabsheet styles */
 
 .v-tabsheet-tabitemcell,
@@ -149,4 +151,6 @@
 .v-ie8 .v-tabsheet-tabs .v-errorindicator,
 .v-ie9 .v-tabsheet-tabs .v-errorindicator {
 	display: inline-block;
+}
+
 }
\ No newline at end of file
diff --git a/WebContent/VAADIN/themes/reindeer/tabsheet/tabsheet-scroller.css b/WebContent/VAADIN/themes/reindeer/tabsheet/tabsheet-scroller.scss
index 18ad5c9194..8f176e2150 100644
--- a/WebContent/VAADIN/themes/reindeer/tabsheet/tabsheet-scroller.css
+++ b/WebContent/VAADIN/themes/reindeer/tabsheet/tabsheet-scroller.scss
@@ -1,3 +1,5 @@
+@mixin reindeer-tabsheet-scroller {
+
 /* Tabsheet scroller styles */
 
 .v-tabsheet-scroller {
@@ -48,4 +50,6 @@
 	background-image: url(img/tab-next-disabled.png); /** sprite-ref: verticals; sprite-margin-bottom: 1px */
 	opacity: 1;
 	filter: none;
+}
+
 }
\ No newline at end of file
diff --git a/WebContent/VAADIN/themes/reindeer/tabsheet/tabsheet-selected-closable-style.css b/WebContent/VAADIN/themes/reindeer/tabsheet/tabsheet-selected-closable-style.scss
index e4b8e0cd5f..d26a569c25 100644
--- a/WebContent/VAADIN/themes/reindeer/tabsheet/tabsheet-selected-closable-style.css
+++ b/WebContent/VAADIN/themes/reindeer/tabsheet/tabsheet-selected-closable-style.scss
@@ -1,3 +1,5 @@
+@mixin reindeer-tabsheet-selected-closable-style {
+
 .v-tabsheet-tabs-selected-closable .v-tabsheet-tabitem .v-tabsheet-caption-close,
 .v-tabsheet-tabs-selected-closable .v-tabsheet-tabitem:hover .v-tabsheet-caption-close {
 	visibility: hidden;
@@ -5,4 +7,6 @@
 .v-tabsheet-tabs-selected-closable .v-tabsheet-tabitem-selected .v-tabsheet-caption-close,
 .v-tabsheet-tabs-selected-closable .v-tabsheet-tabitem-selected:hover .v-tabsheet-caption-close {
 	visibility: visible;
+}
+
 }
\ No newline at end of file
diff --git a/WebContent/VAADIN/themes/reindeer/tabsheet/tabsheet-small-style.css b/WebContent/VAADIN/themes/reindeer/tabsheet/tabsheet-small-style.scss
index c7c79d35ee..e4f098046c 100644
--- a/WebContent/VAADIN/themes/reindeer/tabsheet/tabsheet-small-style.css
+++ b/WebContent/VAADIN/themes/reindeer/tabsheet/tabsheet-small-style.scss
@@ -1,3 +1,5 @@
+@mixin reindeer-tabsheet-small-style {
+
 /**
  * Tabsheet bar style ---------------
  */
@@ -107,3 +109,5 @@
 	border: none;
 }
 /* Content area font color specified with minimal style (reduces additional selectors) */
+
+}
\ No newline at end of file
diff --git a/WebContent/VAADIN/themes/reindeer/tabsheet/tabsheet.css b/WebContent/VAADIN/themes/reindeer/tabsheet/tabsheet.css
deleted file mode 100644
index b636effb0f..0000000000
--- a/WebContent/VAADIN/themes/reindeer/tabsheet/tabsheet.css
+++ /dev/null
@@ -1,8 +0,0 @@
-/* These styles get catenated together on build */
-@import "tabsheet-normal-style.css";
-@import "tabsheet-scroller.css";
-@import "tabsheet-borderless-style.css";
-@import "tabsheet-minimal-style.css";
-@import "tabsheet-small-style.css";
-@import "tabsheet-selected-closable-style.css";
-@import "tabsheet-hover-closable-style.css";
\ No newline at end of file
diff --git a/WebContent/VAADIN/themes/reindeer/tabsheet/tabsheet.scss b/WebContent/VAADIN/themes/reindeer/tabsheet/tabsheet.scss
new file mode 100644
index 0000000000..8b9252cf68
--- /dev/null
+++ b/WebContent/VAADIN/themes/reindeer/tabsheet/tabsheet.scss
@@ -0,0 +1,20 @@
+/* These styles get catenated together on build */
+@import "tabsheet-normal-style.scss";
+@import "tabsheet-scroller.scss";
+@import "tabsheet-borderless-style.scss";
+@import "tabsheet-minimal-style.scss";
+@import "tabsheet-small-style.scss";
+@import "tabsheet-selected-closable-style.scss";
+@import "tabsheet-hover-closable-style.scss";
+
+@mixin reindeer-tabsheet {
+
+	@include reindeer-tabsheet-normal-style;
+	@include reindeer-tabsheet-scroller;
+	@include reindeer-tabsheet-borderless-style;
+	@include reindeer-tabsheet-minimal-style;
+	@include reindeer-tabsheet-small-style;
+	@include reindeer-tabsheet-selected-closable-style;
+	@include reindeer-tabsheet-hover-closable-style;
+
+}
diff --git a/WebContent/VAADIN/themes/reindeer/textfield/textfield.css b/WebContent/VAADIN/themes/reindeer/textfield/textfield.scss
index 09c47dc8d4..8db2dda567 100644
--- a/WebContent/VAADIN/themes/reindeer/textfield/textfield.css
+++ b/WebContent/VAADIN/themes/reindeer/textfield/textfield.scss
@@ -1,3 +1,5 @@
+@mixin reindeer-textfield {
+
 /* Textfield on blue background */
 .blue .v-textfield,
 .blue .v-textarea {
@@ -113,4 +115,6 @@ textarea.v-textarea-readonly,
 .black textarea.v-textarea-readonly {
 	border: none;
 	background: transparent;
+}
+
 }
\ No newline at end of file
diff --git a/WebContent/VAADIN/themes/reindeer/tree/tree.css b/WebContent/VAADIN/themes/reindeer/tree/tree.scss
index f72f61c545..3a1ad35c81 100644
--- a/WebContent/VAADIN/themes/reindeer/tree/tree.css
+++ b/WebContent/VAADIN/themes/reindeer/tree/tree.scss
@@ -1,3 +1,5 @@
+@mixin reindeer-tree {
+
 .v-tree-node {
 	background: transparent url(img/arrows.png) no-repeat 6px -10px;
 }
@@ -48,4 +50,6 @@
 }
 .v-tree-connectors .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/reindeer/window/window.css b/WebContent/VAADIN/themes/reindeer/window/window.scss
index e1091ef98d..ac8fa9c2c9 100644
--- a/WebContent/VAADIN/themes/reindeer/window/window.css
+++ b/WebContent/VAADIN/themes/reindeer/window/window.scss
@@ -1,3 +1,5 @@
+@mixin reindeer-window {
+
 .v-window {
 	background: transparent;
 }
@@ -179,4 +181,6 @@
 	border: none;
 	background: transparent repeat-x;
 	background-image: url(img/black/content-bg.png); /** sprite-ref: black-verticals; sprite-alignment: repeat */
+}
+
 }
\ No newline at end of file