The Button Component Strikes Back

Fixes many theme issues with Button (mostly Reindeer theme), including #3110, #3193, #3194, #3180 and 3079.

Default button is now rendered on the client side with a DIV. Disabled buttons can now have descriptions, which fixes #2085.

Added a "new" component, NativeButton, which uses native BUTTON element rendering on the client side.

Theme compilation script now understands simple @import statements, which help keep things more organized in theme development.

svn changeset:8558/svn branch:6.1

13 files changed, 389 insertions, 421 deletions

diff --git a/WebContent/VAADIN/themes/reindeer/button/button.css b/WebContent/VAADIN/themes/reindeer/button/button.css
index 36a5f998b4..1dc2e25551 100644
--- a/WebContent/VAADIN/themes/reindeer/button/button.css
+++ b/WebContent/VAADIN/themes/reindeer/button/button.css
@@ -1,157 +1,27 @@
-/* We serve simpler buttons for IE6, since it doesn't support the adjacent 
- * sibling selector (+) that is needed to position .v-icon properly.
+/* Standard implementation of the button theme
+ * These files contain styles that apply to all browsers
  */
-div > .v-button,
-.v-ie7 .v-button,
-div > .v-button.v-disabled,
-.v-ie7 .v-button.v-disabled {
-	height: 26px;
-	padding: 0 0 0 6px;
-	background-color: transparent;
-	background-repeat: no-repeat;
-	background-image: url(img/left.png); /** sprite-ref: buttons */
-	border: none;
-	cursor: default;
-}
-/* Error indicator need this */
-.v-ff .v-button,
-.v-sa .v-button {
-	position: relative;
-}
-div > .v-button .v-button-caption,
-.v-ie7 .v-button .v-button-caption,
-div > .v-button.v-disabled .v-button-caption,
-.v-ie7 .v-button.v-disabled .v-button-caption {
-	display: inline-block;
-	height: 22px;
-	padding: 4px 15px 0 9px;
-	background-color: transparent;
-	background-repeat: no-repeat;
-	background-position: right top;
-	background-image: url(img/right.png);  /** sprite-ref: buttons; sprite-alignment: right */
-	text-shadow: #fff 0 1px 0;
-	font-weight: bold;
-	font-size: 11px;
-	line-height: 16px;
-	float: none;
-}
-.v-sa .v-button .v-button-caption {
-	height: 21px;
-	padding-top: 5px;
-}
-.v-ch .v-button .v-button-caption,
-.v-ch .v-button .v-icon {
-	position: relative;
-	top: -1px;
-	left: -3px;
-}
-.v-button:focus {
-	background-image: url(img/left-focus.png); /** sprite-ref: buttons */
-	outline: none;
-}
-.v-button:focus .v-button-caption {
-	background-image: url(img/right-focus.png); /** sprite-ref: buttons; sprite-alignment: right */
-	outline: none;
-}
-.v-button:active,
-.v-ie7 .v-button.v-pressed {
-	background-image: url(img/left-pressed.png); /** sprite-ref: buttons */
-	outline: none;
-}
-.v-button:active .v-button-caption,
-.v-ie7 .v-button.v-pressed .v-button-caption {
-	background-image: url(img/right-pressed.png); /** sprite-ref: buttons; sprite-alignment: right */
-	outline: none;
-}
-/* FF3 & FF2 */
-.v-button::-moz-focus-inner {
-	border: none;
-	padding: 0;
-}
-.v-ff2 .v-button .v-button-caption {
-	display: -moz-inline-box;
-	padding-top: 6px;
-	height: 20px;
-}
-/* IE7 */
-.v-ie7 .v-button.v-pressed .v-button-caption {
-	position: relative;
-}
-.v-ie7 .v-button.v-pressed .v-icon {
-	z-index: 2;
-}
-/* Opera */
-.v-op .v-button:active .v-button-caption {
-	margin-top: -1px;
-	margin-left: -1px;
-}
-.v-op .v-button:active .v-icon + .v-button-caption,
-.v-op .v-button:active .v-icon + .v-errorindicator + .v-button-caption {
-	margin-left: -26px;
-}
-/* Modifications for buttons with icons */
-div > .v-button .v-icon,
-.v-ie7 .v-button .v-icon,
-div > .v-button.v-disabled .v-icon,
-.v-ie7 .v-button.v-disabled .v-icon {
-	display: inline-block;
-	width: 16px;
-	overflow: hidden;
-	position: relative;
-	margin: -1px 3px 0 6px;
-}
-.v-ff2 .v-button .v-icon,
-.v-ff2 .v-button.v-disabled .v-icon {
-	display: block;
-	float: left;
-	margin-top: 4px;
-}
-.v-ch .v-button .v-icon,
-.v-ch .v-button.v-disabled .v-icon {
-	z-index: 2;
-}
-.v-ff2 .v-button-link .v-icon,
-.v-ff2 .v-button-link.v-disabled .v-icon {
-	margin: 0;
-}
-.v-button .v-icon + .v-button-caption,
-.v-button .v-icon + .v-errorindicator + .v-button-caption,
-.v-button.v-disabled .v-icon + .v-button-caption,
-.v-button.v-disabled .v-icon + .v-errorindicator + .v-button-caption {
-	margin-left: -25px;
-	padding-left: 25px;
-}
-/* Buttons with error indicator */
-div > .v-button .v-errorindicator,
-.v-ie7 .v-button .v-errorindicator {
-	position: absolute;
-	display: block;
-	width: 9px;
-	height: 16px;
-	background: transparent url(../common/icons/error.png) no-repeat 50%;
-	padding: 0;
-	margin: 0;
-	z-index: 3;
-}
-.v-ie7 .v-button.v-pressed .v-errorindicator {
-	display: none;
-}
-.v-ie7 .v-button .v-icon + .v-errorindicator + .v-button-caption {
-	margin-left: 0;
-}
-.v-ie6 .v-button .v-errorindicator {
-	position: absolute;
-	display: inline;
-	width: 9px;
-	height: 16px;
-	background: transparent url(../common/icons/error-ie6.png) no-repeat 50%;
-}
+@import "standard.css";
+@import "primary-style.css";
+@import "small-style.css";
+@import "link-style.css";
+
+/* Browser-specific corrections to the standard implementation */
+@import "safari.css";
+@import "firefox.css";
+@import "opera.css";
+@import "ie.css";
+
+
+
+/*
+
 .v-ff .v-button .v-errorindicator,
 .v-sa .v-button .v-errorindicator {
 	top: 2px;
 	left: 16px;
 }
-/* Buttons with explicit size */
+/* Buttons with explicit size *
 .v-button[style*="width"] .v-button-caption {
 	display: block;
 }
@@ -168,277 +38,5 @@ div > .v-button .v-errorindicator,
 	display: block;
 	margin-left: 0;
 }
+*/
 
-/**
- * Default action button style --------------------------
- */
-div > .v-button-primary,
-.v-ie7 .v-button-primary,
-div > .v-button-primary.v-disabled,
-.v-ie7 .v-button-primary.v-disabled {
-	background-image: url(img/primary-left.png); /** sprite-ref: buttons */
-}
-div > .v-button-primary .v-button-caption,
-.v-ie7 .v-button-primary .v-button-caption,
-div > .v-button-primary.v-disabled .v-button-caption,
-.v-ie7 .v-button-primary.v-disabled .v-button-caption {
-	background-image: url(img/primary-right.png); /** sprite-ref: buttons; sprite-alignment: right */
-}
-.v-button-primary:focus {
-	background-image: url(img/primary-left-focus.png); /** sprite-ref: buttons */
-}
-.v-button-primary:focus .v-button-caption {
-	background-image: url(img/primary-right-focus.png); /** sprite-ref: buttons; sprite-alignment: right */
-}
-.v-button-primary:active,
-.v-ie7 .v-button-primary.v-pressed {
-	background-image: url(img/primary-left-pressed.png); /** sprite-ref: buttons */
-}
-.v-button-primary:active .v-button-caption,
-.v-ie7 .v-button-primary.v-pressed .v-button-caption {
-	background-image: url(img/primary-right-pressed.png); /** sprite-ref: buttons; sprite-alignment: right */
-}
-/* 
- * Small-style --------------------------
- */
-div > .v-button-small,
-.v-ie7 .v-button-small,
-div > .v-button-small.v-disabled,
-.v-ie7 .v-button-small.v-disabled {
-	background-image: url(img/small-left.png); /** sprite-ref: buttons */
-	height: 20px;
-}
-div > .v-button-small .v-button-caption,
-.v-ie7 .v-button-small .v-button-caption,
-div > .v-button-small.v-disabled .v-button-caption,
-.v-ie7 .v-button-small.v-disabled .v-button-caption {
-	background-image: url(img/small-right.png); /** sprite-ref: buttons; sprite-alignment: right */
-	height: 19px;
-	padding: 1px 11px 0 5px;
-	font-weight: normal;
-}
-.v-ff2 .v-button-small .v-button-caption {
-	height: 17px;
-	padding-top: 3px;
-}
-.v-sa .v-button-small .v-button-caption {
-	height: 18px;
-	padding-top: 2px;
-}
-.v-button-small:focus {
-	background-image: url(img/small-left-focus.png); /** sprite-ref: buttons */
-}
-.v-button-small:focus .v-button-caption {
-	background-image: url(img/small-right-focus.png); /** sprite-ref: buttons; sprite-alignment: right */
-}
-.v-button-small:active,
-.v-ie7 .v-button-small.v-pressed {
-	background-image: url(img/small-left-pressed.png); /** sprite-ref: buttons */
-}
-.v-button-small:active .v-button-caption,
-.v-ie7 .v-button-small.v-pressed .v-button-caption {
-	background-image: url(img/small-right-pressed.png); /** sprite-ref: buttons; sprite-alignment: right */
-}
-
-/*------------
-* Black buttons
-*------------*/
-.black div > .v-button,
-.v-ie7 .black .v-button,
-.black div > .v-button.v-disabled,
-.v-ie7 .black .v-button.v-disabled {
-	background-image: url(img/black/left.png); /** sprite-ref: black-buttons */
-}
-.black div > .v-button .v-button-caption,
-.v-ie7 .black .v-button .v-button-caption,
-.black div > .v-button.v-disabled .v-button-caption,
-.v-ie7 .black .v-button.v-disabled .v-button-caption {
-	background-image: url(img/black/right.png); /** sprite-ref: black-buttons; sprite-alignment: right */
-	color: #c9ccce;
-	text-shadow: rgba(0,0,0,.8) 0 -1px 0;
-}
-.black .v-button:focus {
-	background-image: url(img/black/left-focus.png); /** sprite-ref: black-buttons */
-}
-.black .v-button:focus .v-button-caption {
-	background-image: url(img/black/right-focus.png); /** sprite-ref: black-buttons; sprite-alignment: right */
-}
-.black .v-button:active,
-.v-ie7 .black .v-button.v-pressed {
-	background-image: url(img/black/left-pressed.png); /** sprite-ref: black-buttons */
-}
-.black .v-button:active .v-button-caption,
-.v-ie7 .black .v-button.v-pressed .v-button-caption {
-	background-image: url(img/black/right-pressed.png); /** sprite-ref: black-buttons; sprite-alignment: right */
-}
-
-/*
- * Primary-style ----------------------------
- */
-.black div > .v-button-primary,
-.v-ie7 .black .v-button-primary,
-.black div > .v-button-primary.v-disabled,
-.v-ie7 .black .v-button-primary.v-disabled {
-	background-image: url(img/black/primary-left.png); /** sprite-ref: black-buttons */
-}
-.black div > .v-button-primary .v-button-caption,
-.v-ie7 .black .v-button-primary .v-button-caption,
-.black div > .v-button-primary.v-disabled .v-button-caption,
-.v-ie7 .black .v-button-primary.v-disabled .v-button-caption {
-	background-image: url(img/black/primary-right.png); /** sprite-ref: black-buttons; sprite-alignment: right */
-}
-.black .v-button-primary:focus {
-	background-image: url(img/black/primary-left-focus.png); /** sprite-ref: black-buttons */
-}
-.black .v-button-primary:focus .v-button-caption {
-	background-image: url(img/black/primary-right-focus.png); /** sprite-ref: black-buttons; sprite-alignment: right */
-	color: #eaf4fb;
-}
-.black .v-button-primary:active,
-.v-ie7 .black .v-button-primary.v-pressed {
-	background-image: url(img/black/primary-left-pressed.png); /** sprite-ref: black-buttons */
-}
-.black .v-button-primary:active .v-button-caption,
-.v-ie7 .black .v-button-primary.v-pressed .v-button-caption {
-	background-image: url(img/black/primary-right-pressed.png); /** sprite-ref: black-buttons; sprite-alignment: right */
-}
-
-/* 
- * Small-style --------------------------
- */
-.black div > .v-button-small,
-.v-ie7 .black .v-button-small,
-.black div > .v-button-small.v-disabled,
-.v-ie7 .black .v-button-small.v-disabled {
-	background-image: url(img/black/small-left.png); /** sprite-ref: black-buttons */
-}
-.black div > .v-button-small .v-button-caption,
-.v-ie7 .black .v-button-small .v-button-caption,
-.black div > .v-button-small.v-disabled .v-button-caption,
-.v-ie7 .black .v-button-small.v-disabled .v-button-caption {
-	background-image: url(img/black/small-right.png); /** sprite-ref: black-buttons; sprite-alignment: right */
-}
-.black .v-button-small:focus {
-	background-image: url(img/black/small-left-focus.png); /** sprite-ref: black-buttons */
-}
-.black .v-button-small:focus .v-button-caption {
-	background-image: url(img/black/small-right-focus.png); /** sprite-ref: black-buttons; sprite-alignment: right */
-}
-.black .v-button-small:active,
-.v-ie7 .black .v-button-small.v-pressed {
-	background-image: url(img/black/small-left-pressed.png); /** sprite-ref: black-buttons */
-}
-.black .v-button-small:active .v-button-caption,
-.v-ie7 .black .v-button-small.v-pressed .v-button-caption {
-	background-image: url(img/black/small-right-pressed.png); /** sprite-ref: black-buttons; sprite-alignment: right */
-}
-
-
-
-
-/**
- * Link style buttons -----------------------
- */
-div > .v-button.v-button-link,
-div > .v-button.v-button-link:focus,
-div > .v-button.v-button-link:active,
-.v-ie7 .v-button-link,
-.v-ie7 .v-button-link.v-pressed,
-div > .v-button.v-button-link.v-disabled,
-.v-ie7 .v-button-link.v-disabled {
-	background: transparent;
-	height: auto;
-	padding: 0;
-	cursor: pointer;
-}
-div > .v-button.v-button-link .v-button-caption,
-div > .v-button.v-button-link:focus .v-button-caption,
-div > .v-button.v-button-link:active .v-button-caption,
-.v-ie7 .v-button-link .v-button-caption,
-.v-ie7 .v-button-link.v-pressed .v-button-caption,
-div > .v-button.v-button-link.v-disabled .v-button-caption,
-.v-ie7 .v-button-link.v-disabled .v-button-caption {
-	background: transparent;
-	height: auto;
-	padding: 0;
-	display: inline;
-	font-weight: normal;
-	color: #1b699f;
-	font-size: 12px;
-	text-shadow: none;
-}
-.v-button.v-button-link .v-icon + .v-button-caption {
-	margin: 0;
-	padding: 0;
-}
-.v-button.v-button-link:focus {
-	outline: 1px dotted #1b699f;
-}
-div > .v-button-link .v-icon,
-.v-ie7 .v-button-link .v-icon,
-div > .v-disabled.v-button-link .v-icon,
-.v-ie7 .v-disabled.v-button-link .v-icon {
-	position: static;
-	width: auto;
-}
-
-
-
-/**
- * IE6 buttons --------------------------
- */
-.v-ie6 .v-button {
-	border: 1px solid #b3b3b3;
-	border-bottom-color: #9a9a9a;
-	background: #d8d8d8 url(img/right.png) no-repeat 0 -1px;
-	padding: 3px 15px 2px 15px;
-	font-weight: bold;
-	font-size: 11px;
-	line-height: 16px;
-	height: 16px;
-	outline: none;
-	cursor: default;
-}
-.v-ie6 .v-button-primary {
-	background-image: url(img/primary-right.png);
-}
-.v-ie6 .v-button-small {
-	font-weight: normal;
-	padding: 1px 11px 0 11px;
-	height: 12px;
-	line-height: normal;
-	background-image: url(img/small-right.png);
-}
-.v-ie6 .v-button.v-pressed {
-	background: transparent url(img/right-pressed.png) no-repeat 0 -1px;
-}
-/* Buttons on blue background */
-.v-ie6 .blue .v-button {
-	border-color: #84949c;
-	border-top-color: #83939b;
-	border-bottom-color: #888d91;
-}
-/* Buttons on black background */
-.v-ie6 .black .v-button {
-	border: 1px solid #0d0e0f;
-	background: #202224 url(img/black/right.png) no-repeat 0 -1px;
-	color: #c9ccce;
-}
-.v-ie6 .black .v-button-primary {
-	background-image: url(img/black/primary-right.png);
-}
-.v-ie6 .black .v-button-small {
-	background-image: url(img/black/small-right.png);
-}
-.v-ie6 .black .v-button.v-pressed {
-	background-image: url(img/black/right-pressed.png);
-}
-/* Link button in IE6 */
-.v-ie6 .v-button-link {
-	border: none;
-	padding: 0;
-	background: transparent;
-	line-height: normal;
-	font-size: 12px;
-	font-weight: normal;
-}
\ No newline at end of file
diff --git a/WebContent/VAADIN/themes/reindeer/button/firefox.css b/WebContent/VAADIN/themes/reindeer/button/firefox.css
new file mode 100644
index 0000000000..76393e637a
--- /dev/null
+++ b/WebContent/VAADIN/themes/reindeer/button/firefox.css
@@ -0,0 +1,20 @@
+.v-ff2 .v-button .v-button-caption {
+	display: -moz-inline-box;
+	padding-top: 6px;
+	height: 20px;
+	}
+
+
+/* Modifications for buttons with icons *
+.v-ff2 .v-button .v-icon,
+.v-ff2 .v-button.v-disabled .v-icon {
+	display: block;
+	float: left;
+	margin-top: 4px;
+	}
+
+.v-ff2 .v-button-link .v-icon,
+.v-ff2 .v-button-link.v-disabled .v-icon {
+	margin: 0;
+	}
+	*/
\ No newline at end of file
diff --git a/WebContent/VAADIN/themes/reindeer/button/ie.css b/WebContent/VAADIN/themes/reindeer/button/ie.css
new file mode 100644
index 0000000000..4aab3e0d5b
--- /dev/null
+++ b/WebContent/VAADIN/themes/reindeer/button/ie.css
@@ -0,0 +1,79 @@
+.v-ie6 .v-nativebutton-link,
+.v-ie7 .v-nativebutton-link,
+.v-ie8 .v-nativebutton-link {
+	padding: 0;
+	text-align: left;
+}
+
+
+
+
+
+/**
+ * IE6 buttons --------------------------
+ */
+.v-ie6 .v-button {
+	border: 1px solid #b3b3b3;
+	border-bottom-color: #9a9a9a;
+	background: #d8d8d8 url(img/right.png) no-repeat 0 -1px;
+	padding: 0 15px;
+	height: 23px;
+}
+.v-ie6 .v-button .v-button-wrap {
+	background: transparent;
+	height: 20px;
+	padding: 3px 0 0;
+	display: inline;
+	zoom: 1;
+}
+.v-ie6 .v-button-primary {
+	background-image: url(img/primary-right.png);
+}
+.v-ie6 .v-button-small {
+	background-image: url(img/small-right.png);
+	height: 17px;
+}
+.v-ie6 .v-button-small .v-button-wrap {
+	height: 17px;
+	padding: 0;
+}
+.v-ie6 .v-button.v-pressed {
+	background: transparent url(img/right-pressed.png) no-repeat 0 -1px;
+}
+/* Buttons on blue background */
+.v-ie6 .blue .v-button {
+	border-color: #84949c;
+	border-top-color: #83939b;
+	border-bottom-color: #888d91;
+}
+/* Buttons on black background */
+.v-ie6 .black .v-button {
+	border: 1px solid #0d0e0f;
+	background: #202224 url(img/black/right.png) no-repeat 0 -1px;
+	color: #c9ccce;
+}
+.v-ie6 .black .v-button-primary {
+	background-image: url(img/black/primary-right.png);
+}
+.v-ie6 .black .v-button-small {
+	background-image: url(img/black/small-right.png);
+}
+.v-ie6 .black .v-button.v-pressed {
+	background-image: url(img/black/right-pressed.png);
+}
+
+
+/* Link style button */
+.v-ie6 .v-button-link,
+.v-ie6 .black .v-button-link {
+	background: transparent;
+	border: none;
+	height: auto;
+	line-height: normal;
+	padding: 0;
+}
+.v-ie6 .v-button-link .v-button-wrap,
+.v-ie6 .black .v-button-link .v-button-wrap {
+	padding: 0;
+	height: auto;
+}
\ No newline at end of file
diff --git a/WebContent/VAADIN/themes/reindeer/button/img/black-button-sprites-ie6.png b/WebContent/VAADIN/themes/reindeer/button/img/black-button-sprites-ie6.png
index 9f7f7c4659..90a73be23f 100644
--- a/WebContent/VAADIN/themes/reindeer/button/img/black-button-sprites-ie6.png
+++ b/WebContent/VAADIN/themes/reindeer/button/img/black-button-sprites-ie6.png
diff --git a/WebContent/VAADIN/themes/reindeer/button/img/black-button-sprites.png b/WebContent/VAADIN/themes/reindeer/button/img/black-button-sprites.png
index 197b9b5d21..744ca30d64 100644
--- a/WebContent/VAADIN/themes/reindeer/button/img/black-button-sprites.png
+++ b/WebContent/VAADIN/themes/reindeer/button/img/black-button-sprites.png
diff --git a/WebContent/VAADIN/themes/reindeer/button/img/button-sprites-ie6.png b/WebContent/VAADIN/themes/reindeer/button/img/button-sprites-ie6.png
index 87af82f1c9..8ccaa56edd 100644
--- a/WebContent/VAADIN/themes/reindeer/button/img/button-sprites-ie6.png
+++ b/WebContent/VAADIN/themes/reindeer/button/img/button-sprites-ie6.png
diff --git a/WebContent/VAADIN/themes/reindeer/button/img/button-sprites.png b/WebContent/VAADIN/themes/reindeer/button/img/button-sprites.png
index c048e47b62..5087e8e957 100644
--- a/WebContent/VAADIN/themes/reindeer/button/img/button-sprites.png
+++ b/WebContent/VAADIN/themes/reindeer/button/img/button-sprites.png
diff --git a/WebContent/VAADIN/themes/reindeer/button/link-style.css b/WebContent/VAADIN/themes/reindeer/button/link-style.css
new file mode 100644
index 0000000000..14530c8dff
--- /dev/null
+++ b/WebContent/VAADIN/themes/reindeer/button/link-style.css
@@ -0,0 +1,30 @@
+.v-button.v-button-link,
+.v-button.v-button-link:focus,
+.v-button.v-button-link:active,
+.v-button-link.v-pressed,
+.v-disabled.v-button.v-button-link,
+.v-button.v-button-link .v-button-wrap,
+.v-button.v-button-link:focus .v-button-wrap,
+.v-button.v-button-link:active .v-button-wrap,
+.v-button-link.v-pressed .v-button-wrap,
+.v-disabled.v-button.v-button-link .v-button-wrap {
+	background: transparent;
+	height: auto;
+	padding: 0;
+	cursor: pointer;
+	line-height: inherit;
+	}
+	
+.v-button-link .v-button-caption,
+.v-nativebutton-link .v-nativebutton-caption {
+	line-height: inherit;
+	font-weight: normal;
+	color: #1b699f;
+	font-size: 12px;
+	text-shadow: none;
+	}
+	
+.v-button-link:focus .v-button-caption,
+.v-nativebutton-link:focus .v-nativebutton-caption {
+	outline: 1px dotted #1b699f;
+	}
\ No newline at end of file
diff --git a/WebContent/VAADIN/themes/reindeer/button/opera.css b/WebContent/VAADIN/themes/reindeer/button/opera.css
new file mode 100644
index 0000000000..c1e22c9258
--- /dev/null
+++ b/WebContent/VAADIN/themes/reindeer/button/opera.css
@@ -0,0 +1,8 @@
+/*.v-op .v-button:active .v-button-caption {
+	margin-top: -1px;
+	margin-left: -1px;
+}
+.v-op .v-button:active .v-icon + .v-button-caption,
+.v-op .v-button:active .v-icon + .v-errorindicator + .v-button-caption {
+	margin-left: -26px;
+}*/
\ No newline at end of file
diff --git a/WebContent/VAADIN/themes/reindeer/button/primary-style.css b/WebContent/VAADIN/themes/reindeer/button/primary-style.css
new file mode 100644
index 0000000000..fdfe90ce3a
--- /dev/null
+++ b/WebContent/VAADIN/themes/reindeer/button/primary-style.css
@@ -0,0 +1,62 @@
+.v-button-primary:focus {
+	background-image: url(img/primary-left-focus.png); /** sprite-ref: buttons */
+	}
+	
+.v-button-primary:focus .v-button-wrap {
+	background-image: url(img/primary-right-focus.png); /** sprite-ref: buttons; sprite-alignment: right */
+	}
+	
+.v-button-primary:active,
+.v-button-primary.v-pressed {
+	background-image: url(img/primary-left-pressed.png); /** sprite-ref: buttons */
+	}
+
+.v-button-primary:active .v-button-wrap,
+.v-button-primary.v-pressed .v-button-wrap {
+	background-image: url(img/primary-right-pressed.png); /** sprite-ref: buttons; sprite-alignment: right */
+	}
+
+.v-button-primary,
+.v-disabled.v-button-primary {
+	background-image: url(img/primary-left.png); /** sprite-ref: buttons */
+	}
+	
+.v-button-primary .v-button-wrap,
+.v-disabled.v-button-primary .v-button-wrap {
+	background-image: url(img/primary-right.png); /** sprite-ref: buttons; sprite-alignment: right */
+	}
+	
+
+
+
+/* Black style */
+
+
+.black .v-button-primary:focus {
+	background-image: url(img/black/primary-left-focus.png); /** sprite-ref: black-buttons */
+	}
+	
+.black .v-button-primary:focus .v-button-wrap {
+	background-image: url(img/black/primary-right-focus.png); /** sprite-ref: black-buttons; sprite-alignment: right */
+	color: #eaf4fb;
+	}
+	
+.black .v-button-primary:active,
+.black .v-button-primary.v-pressed {
+	background-image: url(img/black/primary-left-pressed.png); /** sprite-ref: black-buttons */
+	}
+	
+.black .v-button-primary:active .v-button-wrap,
+.black .v-button-primary.v-pressed .v-button-wrap {
+	background-image: url(img/black/primary-right-pressed.png); /** sprite-ref: black-buttons; sprite-alignment: right */
+	}
+
+.black .v-button-primary,
+.black .v-disabled.v-button-primary {
+	background-image: url(img/black/primary-left.png); /** sprite-ref: black-buttons */
+	}
+	
+.black .v-button-primary .v-button-wrap,
+.black .v-disabled.v-button-primary .v-button-wrap {
+	background-image: url(img/black/primary-right.png); /** sprite-ref: black-buttons; sprite-alignment: right */
+	}
diff --git a/WebContent/VAADIN/themes/reindeer/button/safari.css b/WebContent/VAADIN/themes/reindeer/button/safari.css
new file mode 100644
index 0000000000..e32721d261
--- /dev/null
+++ b/WebContent/VAADIN/themes/reindeer/button/safari.css
@@ -0,0 +1,10 @@
+.v-sa .v-button-caption {
+	height: 21px;
+	padding-top: 5px;
+	line-height: 17px;
+	}
+
+.v-sa .v-button-small .v-button-caption {
+	height: 18px;
+	padding-top: 2px;
+	}
\ No newline at end of file
diff --git a/WebContent/VAADIN/themes/reindeer/button/small-style.css b/WebContent/VAADIN/themes/reindeer/button/small-style.css
new file mode 100644
index 0000000000..fa6b177624
--- /dev/null
+++ b/WebContent/VAADIN/themes/reindeer/button/small-style.css
@@ -0,0 +1,67 @@
+.v-button-small:focus {
+	background-image: url(img/small-left-focus.png); /** sprite-ref: buttons */
+	}
+	
+.v-button-small:focus .v-button-wrap {
+	background-image: url(img/small-right-focus.png); /** sprite-ref: buttons; sprite-alignment: right */
+	}
+	
+.v-button-small:active,
+.v-button-small.v-pressed {
+	background-image: url(img/small-left-pressed.png); /** sprite-ref: buttons */
+	}
+
+.v-button-small:active .v-button-wrap,
+.v-button-small.v-pressed .v-button-wrap {
+	background-image: url(img/small-right-pressed.png); /** sprite-ref: buttons; sprite-alignment: right */
+	}
+
+.v-button-small,
+.v-disabled.v-button-small {
+	background-image: url(img/small-left.png); /** sprite-ref: buttons */
+	height: 20px;
+	}
+	
+.v-button-small .v-button-wrap,
+.v-disabled.v-button-small .v-button-wrap {
+	background-image: url(img/small-right.png); /** sprite-ref: buttons; sprite-alignment: right */
+	height: 19px;
+	padding: 1px 14px 0 8px;
+	}
+
+.v-button-small .v-button-caption {
+	font-weight: normal;
+	}
+	
+
+
+
+/* Black style */
+
+.black .v-button-small:focus {
+	background-image: url(img/black/small-left-focus.png); /** sprite-ref: black-buttons */
+	}
+	
+.black .v-button-small:focus .v-button-wrap {
+	background-image: url(img/black/small-right-focus.png); /** sprite-ref: black-buttons; sprite-alignment: right */
+	}
+	
+.black .v-button-small:active,
+.black .v-button-small.v-pressed {
+	background-image: url(img/black/small-left-pressed.png); /** sprite-ref: black-buttons */
+	}
+	
+.black .v-button-small:active .v-button-wrap,
+.black .v-button-small.v-pressed .v-button-wrap {
+	background-image: url(img/black/small-right-pressed.png); /** sprite-ref: black-buttons; sprite-alignment: right */
+	}
+
+.black .v-button-small,
+.black .v-disabled.v-button-small {
+	background-image: url(img/black/small-left.png); /** sprite-ref: black-buttons */
+	}
+	
+.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
diff --git a/WebContent/VAADIN/themes/reindeer/button/standard.css b/WebContent/VAADIN/themes/reindeer/button/standard.css
new file mode 100644
index 0000000000..5510f82295
--- /dev/null
+++ b/WebContent/VAADIN/themes/reindeer/button/standard.css
@@ -0,0 +1,94 @@
+.v-button:focus {
+	background-image: url(img/left-focus.png); /** sprite-ref: buttons */
+	outline: none;
+	}
+
+.v-button:focus .v-button-wrap {
+	background-image: url(img/right-focus.png); /** sprite-ref: buttons; sprite-alignment: right */
+	outline: none;
+	}
+
+.v-button:active,
+.v-button.v-pressed {
+	background-image: url(img/left-pressed.png); /** sprite-ref: buttons */
+	outline: none;
+	}
+
+.v-button:active .v-button-wrap,
+.v-button.v-pressed .v-button-wrap {
+	background-image: url(img/right-pressed.png); /** sprite-ref: buttons; sprite-alignment: right */
+	outline: none;
+	}
+
+.v-button,
+.v-disabled.v-button {
+	height: 26px;
+	padding: 0 0 0 6px;
+	background-color: transparent;
+	background-repeat: no-repeat;
+	background-image: url(img/left.png); /** sprite-ref: buttons */
+	border: none;
+	cursor: default;
+	-webkit-box-sizing: border-box;
+	-moz-box-sizing: border-box;
+	-ms-box-sizing: border-box;
+	box-sizing: border-box;
+	}
+
+.v-button-wrap,
+.v-disabled.v-button .v-button-wrap {
+	display: block;
+	height: 22px;
+	padding: 4px 15px 0 9px;
+	background-color: transparent;
+	background-repeat: no-repeat;
+	background-position: right top;
+	background-image: url(img/right.png);  /** sprite-ref: buttons; sprite-alignment: right */
+	}
+
+.v-button-caption {
+	color: #222;
+	text-shadow: #fff 0 1px 0;
+	font-weight: bold;
+	font-size: 11px;
+	line-height: 16px;
+	}
+
+
+
+
+/**************************
+ * Black style
+ **************************/
+.black .v-button:focus {
+	background-image: url(img/black/left-focus.png); /** sprite-ref: black-buttons */
+	}
+	
+.black .v-button:focus .v-button-wrap {
+	background-image: url(img/black/right-focus.png); /** sprite-ref: black-buttons; sprite-alignment: right */
+	}
+	
+.black .v-button:active,
+.black .v-button.v-pressed {
+	background-image: url(img/black/left-pressed.png); /** sprite-ref: black-buttons */
+	}
+	
+.black .v-button:active .v-button-wrap,
+.black .v-button.v-pressed .v-button-wrap {
+	background-image: url(img/black/right-pressed.png); /** sprite-ref: black-buttons; sprite-alignment: right */
+	}
+
+.black .v-button,
+.black .v-disabled.v-button {
+	background-image: url(img/black/left.png); /** sprite-ref: black-buttons */
+	}
+	
+.black .v-button-wrap,
+.black .v-disabled.v-button .v-button-wrap {
+	background-image: url(img/black/right.png); /** sprite-ref: black-buttons; sprite-alignment: right */
+	}
+	
+.black .v-button-caption {
+	color: #c9ccce;
+	text-shadow: #121314 0 -1px 0;
+	}
\ No newline at end of file