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

3 files changed, 226 insertions, 103 deletions

diff --git a/WebContent/VAADIN/themes/base/button/button.css b/WebContent/VAADIN/themes/base/button/button.css
index c7e2fab8f6..31f091487c 100644
--- a/WebContent/VAADIN/themes/base/button/button.css
+++ b/WebContent/VAADIN/themes/base/button/button.css
@@ -1,57 +1,139 @@
+/*

+ * Default button (more customizable)

+ * -------------------------------------- */

 .v-button {

+	display: inline-block;

+	zoom: 1;

+	text-align: center;

+	text-decoration: none;

+	border: 2px outset #ddd;

+	background: #eee;

 	cursor: pointer;

 	white-space: nowrap;

 	margin: 0;

+	padding: .2em 1em;

+	color: inherit;

+	font: inherit;

+	line-height: normal;

+	-khtml-user-select: none;

+	-moz-user-select: none;

+	-ie-user-select: none;

+	user-select: none;

+	}

+

+.v-ie6 .v-button {

+	display: inline;

 }

-.v-button span {

-	white-space: nowrap;

-}

-.v-checkbox input {

+

+.v-button-wrap,

+.v-button-caption {

 	vertical-align: middle;

-}

-.v-button img,

-.v-checkbox img {

-	display: inline;

+	white-space: nowrap;

+	font: inherit;

+	color: inherit;

+	line-height: normal;

+	}

+

+.v-button .v-icon,

+.v-nativebutton .v-icon {

 	vertical-align: middle;

 	margin-right: 3px;

-}

-.v-button span,

-.v-checkbox label {

+	border: none;

+	}

+

+.v-button .v-errorindicator,

+.v-nativebutton .v-errorindicator {

+	display: inline-block;

+	zoom: 1;

 	vertical-align: middle;

+	float: none;

 }

-.v-button-link {

+

+/* Link style (we really should deprecate this) */

+.v-button-link,

+.v-nativebutton-link {

 	border: none;

 	text-align: left;

-	background: none;

+	background: transparent;

 	padding: 0;

-}

+	color: inherit;

+	}

+

 /* Inset Safari focus outline a bit */

-.v-sa .v-button-link:focus {

+.v-sa .v-button-link:focus{

 	outline-offset: -3px;

-}

-.v-button-link span {

+	}

+

+.v-button-link .v-button-caption,

+.v-nativebutton-link .v-nativebutton-caption {

 	text-decoration: underline;

-}

-.v-checkbox {

-	white-space: nowrap;	

-}

-.v-checkbox .v-errorindicator {

+	color: inherit;

+	text-align: left;

+	}

+

+

+/*

+ * NativeButton styles (html button element)

+ * -------------------------------------- */

+.v-nativebutton {

+	text-align: center;

+	cursor: pointer;

+	white-space: nowrap;

+	margin: 0;

+	color: inherit;

+	font: inherit;

+	line-height: normal;

+	}

+.v-nativebutton .v-nativebutton-caption {

+	vertical-align: middle;

+	white-space: nowrap;

+	font: inherit;

+	color: inherit;

+	}

+

+.v-nativebutton .v-icon {

+	vertical-align: middle;

+	margin-right: 3px;

+	}

+

+.v-nativebutton .v-errorindicator {

+	display: inline-block;

+	zoom: 1;

 	float: none;

-	display: inline;

-	padding-left: 1em;

-	background-position: left;

 }

 /* Fixes streched buttons in IE6 and IE7*/

-.v-ie6 .v-button {

+.v-ie6 .v-nativebutton {

 	width: 1px;

 }

-.v-ie6 .v-button,

-.v-ie7 .v-button,

-.v-ie8 .v-button {

+.v-ie6 .v-nativebutton,

+.v-ie7 .v-nativebutton,

+.v-ie8 .v-nativebutton {

 	overflow: visible;

 	padding-left: 1em;

 	padding-right: 1em;

 }

+

+/*

+ * Checkbox styles

+ * -------------------------------------- */

+

+.v-checkbox,

+.v-checkbox label,

+.v-checkbox input {

+	vertical-align: middle;

+	white-space: nowrap;

+}

+.v-checkbox img {

+	display: inline;

+	vertical-align: middle;

+	margin-right: 3px;

+}

+.v-checkbox .v-errorindicator {

+	float: none;

+	display: inline;

+	padding-left: 1em;

+	background-position: left;

+}

 /* Error indicator on checkbox fix for IE6 */

 .v-ie6 .v-checkbox * {

 	float: left;

@@ -76,13 +158,8 @@
 	padding-left: 0;

 	padding-right: 0.7em;

 }

-/* Error indicator on button fix for IE */

-.v-ie6 button .v-errorindicator,

-.v-ie7 button .v-errorindicator,

-.v-ie8 button .v-errorindicator {

-	display: inline;

-	padding-right: 0.5em;

-}

+

+

 /* Disabled by default

 .v-checkbox-error {

 	background: #ffe0e0;

diff --git a/WebContent/VAADIN/themes/base/select/select.css b/WebContent/VAADIN/themes/base/select/select.css
index 9bfcfefd45..7da7c1201f 100644
--- a/WebContent/VAADIN/themes/base/select/select.css
+++ b/WebContent/VAADIN/themes/base/select/select.css
@@ -33,11 +33,9 @@
 	clear: left;
 }
 .v-select-twincol .v-button {
-	display: block;
 	float: left;
 }
 .v-select-twincol-buttons .v-button {
-	display: inline;
 	float: none;
 }
 .v-filterselect {
diff --git a/WebContent/VAADIN/themes/base/styles.css b/WebContent/VAADIN/themes/base/styles.css
index 528c9dc4a9..fcd22a8afc 100644
--- a/WebContent/VAADIN/themes/base/styles.css
+++ b/WebContent/VAADIN/themes/base/styles.css
@@ -1,12 +1,10 @@
 /* Automatically compiled css file from subdirectories. */
 
-/* ./WebContent/VAADIN/themes/base/absolutelayout/absolutelayout.css */
 .v-absolutelayout-wrapper {
 	position: absolute;
 	overflow: hidden;
 }
 
-/* ./WebContent/VAADIN/themes/base/accordion/accordion.css */
 .v-accordion {
 	position: relative;
 	outline: none;
@@ -34,61 +32,142 @@
 	width: 100%;
 }
 
-/* ./WebContent/VAADIN/themes/base/button/button.css */
+/*
+ * Default button (more customizable)
+ * -------------------------------------- */
 .v-button {
+	display: inline-block;
+	zoom: 1;
+	text-align: center;
+	text-decoration: none;
+	border: 2px outset #ddd;
+	background: #eee;
 	cursor: pointer;
 	white-space: nowrap;
 	margin: 0;
+	padding: .2em 1em;
+	color: inherit;
+	font: inherit;
+	line-height: normal;
+	-khtml-user-select: none;
+	-moz-user-select: none;
+	-ie-user-select: none;
+	user-select: none;
+	}
+
+.v-ie6 .v-button {
+	display: inline;
 }
-.v-button span {
-	white-space: nowrap;
-}
-.v-checkbox input {
+
+.v-button-wrap,
+.v-button-caption {
 	vertical-align: middle;
-}
-.v-button img,
-.v-checkbox img {
-	display: inline;
+	white-space: nowrap;
+	font: inherit;
+	color: inherit;
+	line-height: normal;
+	}
+
+.v-button .v-icon,
+.v-nativebutton .v-icon {
 	vertical-align: middle;
 	margin-right: 3px;
-}
-.v-button span,
-.v-checkbox label {
+	border: none;
+	}
+
+.v-button .v-errorindicator,
+.v-nativebutton .v-errorindicator {
+	display: inline-block;
+	zoom: 1;
 	vertical-align: middle;
+	float: none;
 }
-.v-button-link {
+
+/* Link style (we really should deprecate this) */
+.v-button-link,
+.v-nativebutton-link {
 	border: none;
 	text-align: left;
-	background: none;
+	background: transparent;
 	padding: 0;
-}
+	color: inherit;
+	}
+
 /* Inset Safari focus outline a bit */
-.v-sa .v-button-link:focus {
+.v-sa .v-button-link:focus{
 	outline-offset: -3px;
-}
-.v-button-link span {
+	}
+
+.v-button-link .v-button-caption,
+.v-nativebutton-link .v-nativebutton-caption {
 	text-decoration: underline;
-}
-.v-checkbox {
-	white-space: nowrap;	
-}
-.v-checkbox .v-errorindicator {
+	color: inherit;
+	text-align: left;
+	}
+
+
+/*
+ * NativeButton styles (html button element)
+ * -------------------------------------- */
+.v-nativebutton {
+	text-align: center;
+	cursor: pointer;
+	white-space: nowrap;
+	margin: 0;
+	color: inherit;
+	font: inherit;
+	line-height: normal;
+	}
+.v-nativebutton .v-nativebutton-caption {
+	vertical-align: middle;
+	white-space: nowrap;
+	font: inherit;
+	color: inherit;
+	}
+
+.v-nativebutton .v-icon {
+	vertical-align: middle;
+	margin-right: 3px;
+	}
+
+.v-nativebutton .v-errorindicator {
+	display: inline-block;
+	zoom: 1;
 	float: none;
-	display: inline;
-	padding-left: 1em;
-	background-position: left;
 }
 /* Fixes streched buttons in IE6 and IE7*/
-.v-ie6 .v-button {
+.v-ie6 .v-nativebutton {
 	width: 1px;
 }
-.v-ie6 .v-button,
-.v-ie7 .v-button,
-.v-ie8 .v-button {
+.v-ie6 .v-nativebutton,
+.v-ie7 .v-nativebutton,
+.v-ie8 .v-nativebutton {
 	overflow: visible;
 	padding-left: 1em;
 	padding-right: 1em;
 }
+
+/*
+ * Checkbox styles
+ * -------------------------------------- */
+
+.v-checkbox,
+.v-checkbox label,
+.v-checkbox input {
+	vertical-align: middle;
+	white-space: nowrap;
+}
+.v-checkbox img {
+	display: inline;
+	vertical-align: middle;
+	margin-right: 3px;
+}
+.v-checkbox .v-errorindicator {
+	float: none;
+	display: inline;
+	padding-left: 1em;
+	background-position: left;
+}
 /* Error indicator on checkbox fix for IE6 */
 .v-ie6 .v-checkbox * {
 	float: left;
@@ -113,13 +192,8 @@
 	padding-left: 0;
 	padding-right: 0.7em;
 }
-/* Error indicator on button fix for IE */
-.v-ie6 button .v-errorindicator,
-.v-ie7 button .v-errorindicator,
-.v-ie8 button .v-errorindicator {
-	display: inline;
-	padding-right: 0.5em;
-}
+
+
 /* Disabled by default
 .v-checkbox-error {
 	background: #ffe0e0;
@@ -131,7 +205,6 @@
 }
 */
 
-/* ./WebContent/VAADIN/themes/base/caption/caption.css */
 .v-captionwrapper {
 	text-align: left; /* Force default alignment */
 }
@@ -164,7 +237,6 @@
 	display: inline;
 }
 
-/* ./WebContent/VAADIN/themes/base/common/common.css */
 /* References the BODY tag generated by Vaadin application servlet */
 .v-generated-body {
 	width: 100%;
@@ -370,17 +442,14 @@ div.v-app-loading {
 	padding: 2px;
 }
 
-/* ./WebContent/VAADIN/themes/base/customcomponent/customcomponent.css */
 .v-customcomponent {
 	overflow: hidden;
 }
 
-/* ./WebContent/VAADIN/themes/base/customlayout/customlayout.css */
 .v-customlayout {
 	overflow: hidden;
 }
 
-/* ./WebContent/VAADIN/themes/base/datefield/datefield.css */
 .v-datefield {
 	white-space: nowrap;
 }
@@ -452,7 +521,6 @@ div.v-app-loading {
 	filter: alpha(opacity=30);
 }
 
-/* ./WebContent/VAADIN/themes/base/formlayout/formlayout.css */
 .v-formlayout-cell .v-errorindicator {
 	display: block;
 }
@@ -497,7 +565,6 @@ div.v-app-loading {
 	float: none;
 }
 
-/* ./WebContent/VAADIN/themes/base/gridlayout/gridlayout.css */
 .v-gridlayout-margin-top {
 	padding-top: 2em;
 }
@@ -529,7 +596,6 @@ div.v-app-loading {
 	overflow: hidden;
 }
 
-/* ./WebContent/VAADIN/themes/base/link/link.css */
 .v-link {
 	white-space: nowrap;	
 }
@@ -549,7 +615,6 @@ div.v-app-loading {
 	border:none;
 }
 
-/* ./WebContent/VAADIN/themes/base/menubar/menubar.css */
 .v-menubar table {
 	white-space: nowrap;
 	border-collapse: collapse;
@@ -588,7 +653,6 @@ div.v-app-loading {
 	cursor: default;
 }
 
-/* ./WebContent/VAADIN/themes/base/notification/notification.css */
 .v-Notification {
 	background: #999;
 	color: #fff;
@@ -631,7 +695,6 @@ div.v-app-loading {
 	white-space: nowrap;
 }
 
-/* ./WebContent/VAADIN/themes/base/orderedlayout/orderedlayout.css */
 .v-orderedlayout-margin-top,
 .v-horizontallayout-margin-top,
 .v-verticallayout-margin-top {
@@ -675,7 +738,6 @@ div.v-app-loading {
 	overflow: hidden;
 }
 
-/* ./WebContent/VAADIN/themes/base/panel/panel.css */
 .v-panel,
 .v-panel-caption,
 .v-panel-content,
@@ -712,7 +774,6 @@ div.v-app-loading {
 .v-panel-deco {
 }
 
-/* ./WebContent/VAADIN/themes/base/popupview/popupview.css */
 .v-popupview {
 	cursor: pointer;
 	background: #aaa;
@@ -721,7 +782,6 @@ div.v-app-loading {
 	overflow: auto;
 }
 
-/* ./WebContent/VAADIN/themes/base/progressindicator/progressindicator.css */
 .v-progressindicator {
 	overflow: hidden; /* for IE6 */
 	width: 150px;
@@ -759,7 +819,6 @@ div.v-progressindicator-indeterminate-disabled {
 	background: transparent;
 }
 
-/* ./WebContent/VAADIN/themes/base/select/select.css */
 .v-select {
 	text-align: left;
 }
@@ -795,11 +854,9 @@ div.v-progressindicator-indeterminate-disabled {
 	clear: left;
 }
 .v-select-twincol .v-button {
-	display: block;
 	float: left;
 }
 .v-select-twincol-buttons .v-button {
-	display: inline;
 	float: none;
 }
 .v-filterselect {
@@ -895,7 +952,6 @@ div.v-progressindicator-indeterminate-disabled {
 }
 */
 
-/* ./WebContent/VAADIN/themes/base/shadow/shadow.css */
 .v-shadow {
 	position: absolute;
 }
@@ -982,7 +1038,6 @@ div.v-progressindicator-indeterminate-disabled {
 	margin-left: -4px;
 }  
 
-/* ./WebContent/VAADIN/themes/base/slider/slider.css */
 .v-slider {
 	margin: 5px 0;
 }
@@ -1046,7 +1101,6 @@ div.v-progressindicator-indeterminate-disabled {
 	margin: 0 -1px;
 }
 
-/* ./WebContent/VAADIN/themes/base/splitpanel/splitpanel.css */
 .v-splitpanel-horizontal,
 .v-splitpanel-vertical {
 	overflow: hidden;
@@ -1085,7 +1139,6 @@ div.v-progressindicator-indeterminate-disabled {
 	position: relative;
 }
 
-/* ./WebContent/VAADIN/themes/base/table/table.css */
 /* Table theme building instructions
  * 
  * Vaadin scroll table is very complex widget with dozens of features. These 
@@ -1236,7 +1289,6 @@ div.v-progressindicator-indeterminate-disabled {
 	color: #ddd;
 }
 
-/* ./WebContent/VAADIN/themes/base/tabsheet/tabsheet.css */
 .v-tabsheet,
 .v-tabsheet-content,
 .v-tabsheet-deco {
@@ -1326,7 +1378,6 @@ div.v-progressindicator-indeterminate-disabled {
 	height: 0;
 }
 
-/* ./WebContent/VAADIN/themes/base/textfield/textfield.css */
 .v-textfield {
 	text-align: left /* Force default alignment */
 }
@@ -1380,7 +1431,6 @@ textarea.v-textarea-prompt {
 	outline-width: medium;
 }
 
-/* ./WebContent/VAADIN/themes/base/tree/tree.css */
 .v-tree {
 	text-align: left; /* Force default alignment */
 	overflow: hidden;
@@ -1436,7 +1486,6 @@ div.v-tree-node-leaf {
 	clear: left;
 }
 
-/* ./WebContent/VAADIN/themes/base/upload/upload.css */
 .v-upload-immediate {
 	position: relative;
 	width: 10em;
@@ -1462,7 +1511,6 @@ div.v-tree-node-leaf {
 }
   
 
-/* ./WebContent/VAADIN/themes/base/window/window.css */
 .v-window {
 	background: #fff;
 }