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, 49 insertions, 49 deletions

diff --git a/WebContent/VAADIN/themes/sampler/sampler/styles.css b/WebContent/VAADIN/themes/sampler/sampler/styles.css
index f675875c5d..63c0c264d5 100644
--- a/WebContent/VAADIN/themes/sampler/sampler/styles.css
+++ b/WebContent/VAADIN/themes/sampler/sampler/styles.css
@@ -111,14 +111,14 @@
 	text-decoration: none;
 }
 
-.v-app-SamplerApplication .v-horizontallayout-topbar .v-button-link span {
+.v-app-SamplerApplication .v-horizontallayout-topbar .v-nativebutton-link span {
 	text-decoration: none;
 }
-.v-app-SamplerApplication .v-horizontallayout-topbar .v-button-link:hover span {
+.v-app-SamplerApplication .v-horizontallayout-topbar .v-nativebutton-link:hover span {
 	text-decoration: underline;
 }
-.v-app-SamplerApplication .v-horizontallayout-segment .v-button,
-.v-app-SamplerApplication .v-horizontallayout-segment .v-button.v-disabled,
+.v-app-SamplerApplication .v-horizontallayout-segment .v-nativebutton,
+.v-app-SamplerApplication .v-horizontallayout-segment .v-nativebutton.v-disabled,
 .v-app-SamplerApplication .v-horizontallayout-segment .v-popupview {
 	width: 30px;
 	height: 24px;
@@ -128,50 +128,50 @@
 	background: transparent url(segment.png) no-repeat;
 	cursor: default;
 }
-.v-app-SamplerApplication .v-horizontallayout-segment .v-button:active,
-.v-app-SamplerApplication .v-horizontallayout-segment .v-button.v-pressed,
+.v-app-SamplerApplication .v-horizontallayout-segment .v-nativebutton:active,
+.v-app-SamplerApplication .v-horizontallayout-segment .v-nativebutton.v-pressed,
 .v-app-SamplerApplication .v-horizontallayout-segment .v-popupview:active {
 	background-position: left bottom;
 }
-.v-app-SamplerApplication .v-horizontallayout-segment .v-button-next,
-.v-app-SamplerApplication .v-horizontallayout-segment .v-button-tree-switch {
+.v-app-SamplerApplication .v-horizontallayout-segment .v-nativebutton-next,
+.v-app-SamplerApplication .v-horizontallayout-segment .v-nativebutton-tree-switch {
 	background-position: right top;
 }
-.v-app-SamplerApplication .v-horizontallayout-segment .v-button-next:active,
-.v-app-SamplerApplication .v-horizontallayout-segment .v-button-next.v-pressed,
-.v-app-SamplerApplication .v-horizontallayout-segment .v-button-next.v-disabled,
-.v-app-SamplerApplication .v-horizontallayout-segment .v-button-tree-switch:active,
-.v-app-SamplerApplication .v-horizontallayout-segment .v-button-tree-switch.v-pressed {
+.v-app-SamplerApplication .v-horizontallayout-segment .v-nativebutton-next:active,
+.v-app-SamplerApplication .v-horizontallayout-segment .v-nativebutton-next.v-pressed,
+.v-app-SamplerApplication .v-horizontallayout-segment .v-nativebutton-next.v-disabled,
+.v-app-SamplerApplication .v-horizontallayout-segment .v-nativebutton-tree-switch:active,
+.v-app-SamplerApplication .v-horizontallayout-segment .v-nativebutton-tree-switch.v-pressed {
 	background-position: right bottom;
 }
-.v-app-SamplerApplication .v-horizontallayout-segment .v-button-down {
+.v-app-SamplerApplication .v-horizontallayout-segment .v-nativebutton-down {
 	background-position: right bottom;
 }
-.v-app-SamplerApplication .v-horizontallayout-segment .v-button span,
+.v-app-SamplerApplication .v-horizontallayout-segment .v-nativebutton span,
 .v-app-SamplerApplication .v-horizontallayout-segment .v-popupview span,
-.v-app-SamplerApplication .v-horizontallayout-segment .v-button.v-pressed span,
-.v-app-SamplerApplication .v-horizontallayout-segment .v-button.v-disabled span {
+.v-app-SamplerApplication .v-horizontallayout-segment .v-nativebutton.v-pressed span,
+.v-app-SamplerApplication .v-horizontallayout-segment .v-nativebutton.v-disabled span {
 	display: block;
 	height: 24px;
 	background-repeat: no-repeat;
 	background-position: 50% 30%;
 }
-.v-app-SamplerApplication .v-horizontallayout-segment .v-button-tree-switch span,
-.v-app-SamplerApplication .v-horizontallayout-segment .v-button-tree-switch.v-pressed span {
+.v-app-SamplerApplication .v-horizontallayout-segment .v-nativebutton-tree-switch span,
+.v-app-SamplerApplication .v-horizontallayout-segment .v-nativebutton-tree-switch.v-pressed span {
 	background-image: url(tree.png);
 }
 .v-app-SamplerApplication .v-horizontallayout-segment .v-popupview span {
 	background-image: url(magnifier.png);
 	background-position: 50% 40%;
 }
-.v-app-SamplerApplication .v-horizontallayout-segment .v-button-previous span,
-.v-app-SamplerApplication .v-horizontallayout-segment .v-button-previous.v-pressed span,
-.v-app-SamplerApplication .v-horizontallayout-segment .v-button-previous.v-disabled span {
+.v-app-SamplerApplication .v-horizontallayout-segment .v-nativebutton-previous span,
+.v-app-SamplerApplication .v-horizontallayout-segment .v-nativebutton-previous.v-pressed span,
+.v-app-SamplerApplication .v-horizontallayout-segment .v-nativebutton-previous.v-disabled span {
 	background-image: url(prev.png);
 }
-.v-app-SamplerApplication .v-horizontallayout-segment .v-button-next span,
-.v-app-SamplerApplication .v-horizontallayout-segment .v-button-next.v-pressed span,
-.v-app-SamplerApplication .v-horizontallayout-segment .v-button-next.v-disabled span {
+.v-app-SamplerApplication .v-horizontallayout-segment .v-nativebutton-next span,
+.v-app-SamplerApplication .v-horizontallayout-segment .v-nativebutton-next.v-pressed span,
+.v-app-SamplerApplication .v-horizontallayout-segment .v-nativebutton-next.v-disabled span {
 	background-image: url(next.png);
 }
 .v-popupview-popup-quickjump {
@@ -237,16 +237,16 @@
 	text-indent: 15px;
 	padding-right: 20px;
 }
-.v-app-SamplerApplication .v-button-screenshot {
+.v-app-SamplerApplication .v-nativebutton-screenshot {
 	border: 3px solid #ccc;
 	-moz-border-radius: 5px;
 	-webkit-border-radius: 5px;
 	overflow: hidden;
 }
-.v-app-SamplerApplication .v-button-screenshot:hover {
+.v-app-SamplerApplication .v-nativebutton-screenshot:hover {
 	border-color: #abc;
 }
-.v-app-SamplerApplication .v-button-screenshot img.v-icon {
+.v-app-SamplerApplication .v-nativebutton-screenshot img.v-icon {
 	margin: 0;
 	margin-top: -2px;
 	margin-left: -3px;
@@ -257,7 +257,7 @@
 	overflow: hidden;
 	position: static;
 }
-.v-ie .v-app-SamplerApplication .v-button-screenshot img.v-icon {
+.v-ie .v-app-SamplerApplication .v-nativebutton-screenshot img.v-icon {
 	margin-left: -12px;
 }
 
@@ -453,9 +453,9 @@
 .v-app-SamplerApplication .v-link-showcode {
 	margin-left: 3px;
 }
-.v-app-SamplerApplication div > .v-button-showcode,
-.v-app-SamplerApplication div > .v-button-showcode:active,
-.v-app-SamplerApplication div > .v-button-showcode:focus,
+.v-app-SamplerApplication div > .v-nativebutton-showcode,
+.v-app-SamplerApplication div > .v-nativebutton-showcode:active,
+.v-app-SamplerApplication div > .v-nativebutton-showcode:focus,
 .v-app-SamplerApplication .v-link-showcode {
 	font-family: arial, helvetica, verdana, sans-serif;
 	display: inline;
@@ -464,17 +464,17 @@
 	height: 20px;
 	margin-right: 3px;
 }
-.v-sa .v-app-SamplerApplication .v-button-showcode,
+.v-sa .v-app-SamplerApplication .v-nativebutton-showcode,
 .v-sa .v-app-SamplerApplication .v-link-showcode {
 	font-family: helvetica, arial, verdana, sans-serif;
 }
-.v-app-SamplerApplication div > .v-button-showcode.v-button-link span,
+.v-app-SamplerApplication div > .v-nativebutton-showcode.v-nativebutton-link span,
 .v-app-SamplerApplication .v-link-showcode span {
 	color: #8b8e91;
 	text-decoration: none;
 }
-.v-app-SamplerApplication div > .v-button-showcode:hover span,
-.v-app-SamplerApplication div > .v-button-showcode:active span,
+.v-app-SamplerApplication div > .v-nativebutton-showcode:hover span,
+.v-app-SamplerApplication div > .v-nativebutton-showcode:active span,
 .v-app-SamplerApplication .v-link-showcode:hover span {
 	color: #62696f;
 	text-decoration: underline;
@@ -484,7 +484,7 @@
 	background: #fff;
 }
 
-.v-app .v-customcomponent-ModeSwitch button.v-button {
+.v-app .v-customcomponent-ModeSwitch button.v-nativebutton {
 	height: 24px;
 	width: 30px;
 	border: none;
@@ -492,35 +492,35 @@
 	cursor: default;
 	padding: 0;
 }
-.v-app .v-customcomponent-ModeSwitch button.v-button span.v-button-caption {
+.v-app .v-customcomponent-ModeSwitch button.v-nativebutton span.v-nativebutton-caption {
 	display: none;
 }
-.v-app .v-customcomponent-ModeSwitch button.v-button img.v-icon {
+.v-app .v-customcomponent-ModeSwitch button.v-nativebutton img.v-icon {
 	width: auto;
 	height: auto;
 	margin: 0;
 	position: static;
 }
-.v-app .v-customcomponent-ModeSwitch button.v-button-first-on,
-.v-app .v-customcomponent-ModeSwitch button.v-button-first:active,
-.v-app .v-customcomponent-ModeSwitch button.v-button-first.v-pressed {
+.v-app .v-customcomponent-ModeSwitch button.v-nativebutton-first-on,
+.v-app .v-customcomponent-ModeSwitch button.v-nativebutton-first:active,
+.v-app .v-customcomponent-ModeSwitch button.v-nativebutton-first.v-pressed {
 	background-position: left bottom;
 }
-.v-app .v-customcomponent-ModeSwitch button.v-button-first {
+.v-app .v-customcomponent-ModeSwitch button.v-nativebutton-first {
 	background-position: left top;
 }
 /*
-.v-customcomponent-ModeSwitch .v-button-mid-on {
+.v-customcomponent-ModeSwitch .v-nativebutton-mid-on {
 	background: transparent url(mid-on.gif) no-repeat;
 }
-.v-customcomponent-ModeSwitch .v-button-mid {
+.v-customcomponent-ModeSwitch .v-nativebutton-mid {
 	background: transparent url(mid.gif) no-repeat;
 }*/
-.v-app .v-customcomponent-ModeSwitch button.v-button-last-on,
-.v-app .v-customcomponent-ModeSwitch button.v-button-last:active,
-.v-app .v-customcomponent-ModeSwitch button.v-button-last.v-pressed {
+.v-app .v-customcomponent-ModeSwitch button.v-nativebutton-last-on,
+.v-app .v-customcomponent-ModeSwitch button.v-nativebutton-last:active,
+.v-app .v-customcomponent-ModeSwitch button.v-nativebutton-last.v-pressed {
 	background-position: right bottom;
 }
-.v-app .v-customcomponent-ModeSwitch button.v-button-last {
+.v-app .v-customcomponent-ModeSwitch button.v-nativebutton-last {
 	background-position: right top;
 }