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

1 files changed, 19 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