diff options
| author | Jouni Koivuviita <jouni.koivuviita@itmill.com> | 2009-08-27 12:26:49 +0000 |
|---|---|---|
| committer | Jouni Koivuviita <jouni.koivuviita@itmill.com> | 2009-08-27 12:26:49 +0000 |
| commit | ad101f842727ca84a184f1bf1ad7c5e63878302b (patch) | |
| tree | b636516fa19ef5dab996c9160e576e3169e50f7b /WebContent/VAADIN/themes/base/button | |
| parent | 7072fbb2f053ab9a390ee5e004d65e465c7b93e7 (diff) | |
| download | vaadin-framework-ad101f842727ca84a184f1bf1ad7c5e63878302b.tar.gz vaadin-framework-ad101f842727ca84a184f1bf1ad7c5e63878302b.zip | |
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
Diffstat (limited to 'WebContent/VAADIN/themes/base/button')
| -rw-r--r-- | WebContent/VAADIN/themes/base/button/button.css | 149 |
1 files changed, 113 insertions, 36 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;
|