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
+/*\r
+ * Default button (more customizable)\r
+ * -------------------------------------- */\r
.v-button {\r
+ display: inline-block;\r
+ zoom: 1;\r
+ text-align: center;\r
+ text-decoration: none;\r
+ border: 2px outset #ddd;\r
+ background: #eee;\r
cursor: pointer;\r
white-space: nowrap;\r
margin: 0;\r
+ padding: .2em 1em;\r
+ color: inherit;\r
+ font: inherit;\r
+ line-height: normal;\r
+ -khtml-user-select: none;\r
+ -moz-user-select: none;\r
+ -ie-user-select: none;\r
+ user-select: none;\r
+ }\r
+\r
+.v-ie6 .v-button {\r
+ display: inline;\r
}\r
-.v-button span {\r
- white-space: nowrap;\r
-}\r
-.v-checkbox input {\r
+\r
+.v-button-wrap,\r
+.v-button-caption {\r
vertical-align: middle;\r
-}\r
-.v-button img,\r
-.v-checkbox img {\r
- display: inline;\r
+ white-space: nowrap;\r
+ font: inherit;\r
+ color: inherit;\r
+ line-height: normal;\r
+ }\r
+\r
+.v-button .v-icon,\r
+.v-nativebutton .v-icon {\r
vertical-align: middle;\r
margin-right: 3px;\r
-}\r
-.v-button span,\r
-.v-checkbox label {\r
+ border: none;\r
+ }\r
+\r
+.v-button .v-errorindicator,\r
+.v-nativebutton .v-errorindicator {\r
+ display: inline-block;\r
+ zoom: 1;\r
vertical-align: middle;\r
+ float: none;\r
}\r
-.v-button-link {\r
+\r
+/* Link style (we really should deprecate this) */\r
+.v-button-link,\r
+.v-nativebutton-link {\r
border: none;\r
text-align: left;\r
- background: none;\r
+ background: transparent;\r
padding: 0;\r
-}\r
+ color: inherit;\r
+ }\r
+\r
/* Inset Safari focus outline a bit */\r
-.v-sa .v-button-link:focus {\r
+.v-sa .v-button-link:focus{\r
outline-offset: -3px;\r
-}\r
-.v-button-link span {\r
+ }\r
+\r
+.v-button-link .v-button-caption,\r
+.v-nativebutton-link .v-nativebutton-caption {\r
text-decoration: underline;\r
-}\r
-.v-checkbox {\r
- white-space: nowrap; \r
-}\r
-.v-checkbox .v-errorindicator {\r
+ color: inherit;\r
+ text-align: left;\r
+ }\r
+\r
+\r
+/*\r
+ * NativeButton styles (html button element)\r
+ * -------------------------------------- */\r
+.v-nativebutton {\r
+ text-align: center;\r
+ cursor: pointer;\r
+ white-space: nowrap;\r
+ margin: 0;\r
+ color: inherit;\r
+ font: inherit;\r
+ line-height: normal;\r
+ }\r
+.v-nativebutton .v-nativebutton-caption {\r
+ vertical-align: middle;\r
+ white-space: nowrap;\r
+ font: inherit;\r
+ color: inherit;\r
+ }\r
+\r
+.v-nativebutton .v-icon {\r
+ vertical-align: middle;\r
+ margin-right: 3px;\r
+ }\r
+\r
+.v-nativebutton .v-errorindicator {\r
+ display: inline-block;\r
+ zoom: 1;\r
float: none;\r
- display: inline;\r
- padding-left: 1em;\r
- background-position: left;\r
}\r
/* Fixes streched buttons in IE6 and IE7*/\r
-.v-ie6 .v-button {\r
+.v-ie6 .v-nativebutton {\r
width: 1px;\r
}\r
-.v-ie6 .v-button,\r
-.v-ie7 .v-button,\r
-.v-ie8 .v-button {\r
+.v-ie6 .v-nativebutton,\r
+.v-ie7 .v-nativebutton,\r
+.v-ie8 .v-nativebutton {\r
overflow: visible;\r
padding-left: 1em;\r
padding-right: 1em;\r
}\r
+\r
+/*\r
+ * Checkbox styles\r
+ * -------------------------------------- */\r
+\r
+.v-checkbox,\r
+.v-checkbox label,\r
+.v-checkbox input {\r
+ vertical-align: middle;\r
+ white-space: nowrap;\r
+}\r
+.v-checkbox img {\r
+ display: inline;\r
+ vertical-align: middle;\r
+ margin-right: 3px;\r
+}\r
+.v-checkbox .v-errorindicator {\r
+ float: none;\r
+ display: inline;\r
+ padding-left: 1em;\r
+ background-position: left;\r
+}\r
/* Error indicator on checkbox fix for IE6 */\r
.v-ie6 .v-checkbox * {\r
float: left;\r
padding-left: 0;\r
padding-right: 0.7em;\r
}\r
-/* Error indicator on button fix for IE */\r
-.v-ie6 button .v-errorindicator,\r
-.v-ie7 button .v-errorindicator,\r
-.v-ie8 button .v-errorindicator {\r
- display: inline;\r
- padding-right: 0.5em;\r
-}\r
+\r
+\r
/* Disabled by default\r
.v-checkbox-error {\r
background: #ffe0e0;\r
clear: left;
}
.v-select-twincol .v-button {
- display: block;
float: left;
}
.v-select-twincol-buttons .v-button {
- display: inline;
float: none;
}
.v-filterselect {
/* 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;
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;
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;
}
*/
-/* ./WebContent/VAADIN/themes/base/caption/caption.css */
.v-captionwrapper {
text-align: left; /* Force default alignment */
}
display: inline;
}
-/* ./WebContent/VAADIN/themes/base/common/common.css */
/* References the BODY tag generated by Vaadin application servlet */
.v-generated-body {
width: 100%;
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;
}
filter: alpha(opacity=30);
}
-/* ./WebContent/VAADIN/themes/base/formlayout/formlayout.css */
.v-formlayout-cell .v-errorindicator {
display: block;
}
float: none;
}
-/* ./WebContent/VAADIN/themes/base/gridlayout/gridlayout.css */
.v-gridlayout-margin-top {
padding-top: 2em;
}
overflow: hidden;
}
-/* ./WebContent/VAADIN/themes/base/link/link.css */
.v-link {
white-space: nowrap;
}
border:none;
}
-/* ./WebContent/VAADIN/themes/base/menubar/menubar.css */
.v-menubar table {
white-space: nowrap;
border-collapse: collapse;
cursor: default;
}
-/* ./WebContent/VAADIN/themes/base/notification/notification.css */
.v-Notification {
background: #999;
color: #fff;
white-space: nowrap;
}
-/* ./WebContent/VAADIN/themes/base/orderedlayout/orderedlayout.css */
.v-orderedlayout-margin-top,
.v-horizontallayout-margin-top,
.v-verticallayout-margin-top {
overflow: hidden;
}
-/* ./WebContent/VAADIN/themes/base/panel/panel.css */
.v-panel,
.v-panel-caption,
.v-panel-content,
.v-panel-deco {
}
-/* ./WebContent/VAADIN/themes/base/popupview/popupview.css */
.v-popupview {
cursor: pointer;
background: #aaa;
overflow: auto;
}
-/* ./WebContent/VAADIN/themes/base/progressindicator/progressindicator.css */
.v-progressindicator {
overflow: hidden; /* for IE6 */
width: 150px;
background: transparent;
}
-/* ./WebContent/VAADIN/themes/base/select/select.css */
.v-select {
text-align: left;
}
clear: left;
}
.v-select-twincol .v-button {
- display: block;
float: left;
}
.v-select-twincol-buttons .v-button {
- display: inline;
float: none;
}
.v-filterselect {
}
*/
-/* ./WebContent/VAADIN/themes/base/shadow/shadow.css */
.v-shadow {
position: absolute;
}
margin-left: -4px;
}
-/* ./WebContent/VAADIN/themes/base/slider/slider.css */
.v-slider {
margin: 5px 0;
}
margin: 0 -1px;
}
-/* ./WebContent/VAADIN/themes/base/splitpanel/splitpanel.css */
.v-splitpanel-horizontal,
.v-splitpanel-vertical {
overflow: hidden;
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
color: #ddd;
}
-/* ./WebContent/VAADIN/themes/base/tabsheet/tabsheet.css */
.v-tabsheet,
.v-tabsheet-content,
.v-tabsheet-deco {
height: 0;
}
-/* ./WebContent/VAADIN/themes/base/textfield/textfield.css */
.v-textfield {
text-align: left /* Force default alignment */
}
outline-width: medium;
}
-/* ./WebContent/VAADIN/themes/base/tree/tree.css */
.v-tree {
text-align: left; /* Force default alignment */
overflow: hidden;
clear: left;
}
-/* ./WebContent/VAADIN/themes/base/upload/upload.css */
.v-upload-immediate {
position: relative;
width: 10em;
}
-/* ./WebContent/VAADIN/themes/base/window/window.css */
.v-window {
background: #fff;
}
-/* 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;
}
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
--- /dev/null
+.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
--- /dev/null
+.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
--- /dev/null
+.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
--- /dev/null
+/*.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
--- /dev/null
+.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 */
+ }
--- /dev/null
+.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
--- /dev/null
+.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
--- /dev/null
+.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
/* 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;
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;
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;
}
*/
-/* ./WebContent/VAADIN/themes/base/caption/caption.css */
.v-captionwrapper {
text-align: left; /* Force default alignment */
}
display: inline;
}
-/* ./WebContent/VAADIN/themes/base/common/common.css */
/* References the BODY tag generated by Vaadin application servlet */
.v-generated-body {
width: 100%;
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;
}
filter: alpha(opacity=30);
}
-/* ./WebContent/VAADIN/themes/base/formlayout/formlayout.css */
.v-formlayout-cell .v-errorindicator {
display: block;
}
float: none;
}
-/* ./WebContent/VAADIN/themes/base/gridlayout/gridlayout.css */
.v-gridlayout-margin-top {
padding-top: 2em;
}
overflow: hidden;
}
-/* ./WebContent/VAADIN/themes/base/link/link.css */
.v-link {
white-space: nowrap;
}
border:none;
}
-/* ./WebContent/VAADIN/themes/base/menubar/menubar.css */
.v-menubar table {
white-space: nowrap;
border-collapse: collapse;
cursor: default;
}
-/* ./WebContent/VAADIN/themes/base/notification/notification.css */
.v-Notification {
background: #999;
color: #fff;
white-space: nowrap;
}
-/* ./WebContent/VAADIN/themes/base/orderedlayout/orderedlayout.css */
.v-orderedlayout-margin-top,
.v-horizontallayout-margin-top,
.v-verticallayout-margin-top {
overflow: hidden;
}
-/* ./WebContent/VAADIN/themes/base/panel/panel.css */
.v-panel,
.v-panel-caption,
.v-panel-content,
.v-panel-deco {
}
-/* ./WebContent/VAADIN/themes/base/popupview/popupview.css */
.v-popupview {
cursor: pointer;
background: #aaa;
overflow: auto;
}
-/* ./WebContent/VAADIN/themes/base/progressindicator/progressindicator.css */
.v-progressindicator {
overflow: hidden; /* for IE6 */
width: 150px;
background: transparent;
}
-/* ./WebContent/VAADIN/themes/base/select/select.css */
.v-select {
text-align: left;
}
clear: left;
}
.v-select-twincol .v-button {
- display: block;
float: left;
}
.v-select-twincol-buttons .v-button {
- display: inline;
float: none;
}
.v-filterselect {
}
*/
-/* ./WebContent/VAADIN/themes/base/shadow/shadow.css */
.v-shadow {
position: absolute;
}
margin-left: -4px;
}
-/* ./WebContent/VAADIN/themes/base/slider/slider.css */
.v-slider {
margin: 5px 0;
}
margin: 0 -1px;
}
-/* ./WebContent/VAADIN/themes/base/splitpanel/splitpanel.css */
.v-splitpanel-horizontal,
.v-splitpanel-vertical {
overflow: hidden;
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
color: #ddd;
}
-/* ./WebContent/VAADIN/themes/base/tabsheet/tabsheet.css */
.v-tabsheet,
.v-tabsheet-content,
.v-tabsheet-deco {
height: 0;
}
-/* ./WebContent/VAADIN/themes/base/textfield/textfield.css */
.v-textfield {
text-align: left /* Force default alignment */
}
outline-width: medium;
}
-/* ./WebContent/VAADIN/themes/base/tree/tree.css */
.v-tree {
text-align: left; /* Force default alignment */
overflow: hidden;
clear: left;
}
-/* ./WebContent/VAADIN/themes/base/upload/upload.css */
.v-upload-immediate {
position: relative;
width: 10em;
}
-/* ./WebContent/VAADIN/themes/base/window/window.css */
.v-window {
background: #fff;
}
}
/* Automatically compiled css file from subdirectories. */
-/* ./WebContent/VAADIN/themes/reindeer/a-sprite-definitions/a-sprite-definitions.css */
/*------------
* General vertical and horizontal sprites
* -----------*/
* Buttons
* -----------*/
-/* ./WebContent/VAADIN/themes/reindeer/accordion/accordion.css */
.v-accordion {
border: 1px solid #bebebe;
border-radius: 2px;
-moz-border-radius: 0;
}
-/* ./WebContent/VAADIN/themes/reindeer/button/button.css */
-/* 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 {
+
+.v-button:focus {
+ background-image: url(button/img/button-sprites.png);
+ -background-image: url(button/img/button-sprites-ie6.png);
+ background-position: left -0px;
+ outline: none;
+ }
+
+.v-button:focus .v-button-wrap {
+ background-image: url(button/img/button-sprites.png);
+ -background-image: url(button/img/button-sprites-ie6.png);
+ background-position: right -26px;
+ outline: none;
+ }
+
+.v-button:active,
+.v-button.v-pressed {
+ background-image: url(button/img/button-sprites.png);
+ -background-image: url(button/img/button-sprites-ie6.png);
+ background-position: left -52px;
+ outline: none;
+ }
+
+.v-button:active .v-button-wrap,
+.v-button.v-pressed .v-button-wrap {
+ background-image: url(button/img/button-sprites.png);
+ -background-image: url(button/img/button-sprites-ie6.png);
+ background-position: right -78px;
+ 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(button/img/button-sprites.png);
-background-image: url(button/img/button-sprites-ie6.png);
- background-position: left -0px;
+ background-position: left -104px;
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;
+ -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-position: right top;
background-image: url(button/img/button-sprites.png);
-background-image: url(button/img/button-sprites-ie6.png);
- background-position: right -26px;
+ background-position: right -130px;
+ }
+
+.v-button-caption {
+ color: #222;
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 {
+ }
+
+
+
+
+/**************************
+ * Black style
+ **************************/
+.black .v-button:focus {
+ background-image: url(button/img/black-button-sprites.png);
+ -background-image: url(button/img/black-button-sprites-ie6.png);
+ background-position: left -0px;
+ }
+
+.black .v-button:focus .v-button-wrap {
+ background-image: url(button/img/black-button-sprites.png);
+ -background-image: url(button/img/black-button-sprites-ie6.png);
+ background-position: right -26px;
+ }
+
+.black .v-button:active,
+.black .v-button.v-pressed {
+ background-image: url(button/img/black-button-sprites.png);
+ -background-image: url(button/img/black-button-sprites-ie6.png);
+ background-position: left -52px;
+ }
+
+.black .v-button:active .v-button-wrap,
+.black .v-button.v-pressed .v-button-wrap {
+ background-image: url(button/img/black-button-sprites.png);
+ -background-image: url(button/img/black-button-sprites-ie6.png);
+ background-position: right -78px;
+ }
+
+.black .v-button,
+.black .v-disabled.v-button {
+ background-image: url(button/img/black-button-sprites.png);
+ -background-image: url(button/img/black-button-sprites-ie6.png);
+ background-position: left -104px;
+ }
+
+.black .v-button-wrap,
+.black .v-disabled.v-button .v-button-wrap {
+ background-image: url(button/img/black-button-sprites.png);
+ -background-image: url(button/img/black-button-sprites-ie6.png);
+ background-position: right -130px;
+ }
+
+.black .v-button-caption {
+ color: #c9ccce;
+ text-shadow: #121314 0 -1px 0;
+ }
+
+.v-button-primary:focus {
background-image: url(button/img/button-sprites.png);
-background-image: url(button/img/button-sprites-ie6.png);
- background-position: left -52px;
- outline: none;
-}
-.v-button:focus .v-button-caption {
+ background-position: left -156px;
+ }
+
+.v-button-primary:focus .v-button-wrap {
background-image: url(button/img/button-sprites.png);
-background-image: url(button/img/button-sprites-ie6.png);
- background-position: right -78px;
- outline: none;
-}
-.v-button:active,
-.v-ie7 .v-button.v-pressed {
+ background-position: right -182px;
+ }
+
+.v-button-primary:active,
+.v-button-primary.v-pressed {
background-image: url(button/img/button-sprites.png);
-background-image: url(button/img/button-sprites-ie6.png);
- background-position: left -104px;
- outline: none;
-}
-.v-button:active .v-button-caption,
-.v-ie7 .v-button.v-pressed .v-button-caption {
+ background-position: left -208px;
+ }
+
+.v-button-primary:active .v-button-wrap,
+.v-button-primary.v-pressed .v-button-wrap {
background-image: url(button/img/button-sprites.png);
-background-image: url(button/img/button-sprites-ie6.png);
- background-position: right -130px;
- 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%;
-}
-.v-ff .v-button .v-errorindicator,
-.v-sa .v-button .v-errorindicator {
- top: 2px;
- left: 16px;
-}
-/* Buttons with explicit size */
-.v-button[style*="width"] .v-button-caption {
- display: block;
-}
-.v-button[style*="width"] .v-icon + .v-button-caption,
-.v-button[style*="width"] .v-icon + .v-errorindicator + .v-button-caption {
- margin-left: 0;
-}
-.v-button[style*="width"] .v-icon,
-.v-ie7 .v-button .v-icon {
- position: absolute;
- top: 4px;
-}
-.v-ie7 .v-button > .v-button-caption {
- display: block;
- margin-left: 0;
-}
+ background-position: right -234px;
+ }
-/**
- * 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 {
+.v-button-primary,
+.v-disabled.v-button-primary {
background-image: url(button/img/button-sprites.png);
-background-image: url(button/img/button-sprites-ie6.png);
- background-position: left -156px;
-}
-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-position: left -260px;
+ }
+
+.v-button-primary .v-button-wrap,
+.v-disabled.v-button-primary .v-button-wrap {
background-image: url(button/img/button-sprites.png);
-background-image: url(button/img/button-sprites-ie6.png);
+ background-position: right -286px;
+ }
+
+
+
+
+/* Black style */
+
+
+.black .v-button-primary:focus {
+ background-image: url(button/img/black-button-sprites.png);
+ -background-image: url(button/img/black-button-sprites-ie6.png);
+ background-position: left -156px;
+ }
+
+.black .v-button-primary:focus .v-button-wrap {
+ background-image: url(button/img/black-button-sprites.png);
+ -background-image: url(button/img/black-button-sprites-ie6.png);
background-position: right -182px;
-}
-.v-button-primary:focus {
- background-image: url(button/img/button-sprites.png);
- -background-image: url(button/img/button-sprites-ie6.png);
+ color: #eaf4fb;
+ }
+
+.black .v-button-primary:active,
+.black .v-button-primary.v-pressed {
+ background-image: url(button/img/black-button-sprites.png);
+ -background-image: url(button/img/black-button-sprites-ie6.png);
background-position: left -208px;
-}
-.v-button-primary:focus .v-button-caption {
- background-image: url(button/img/button-sprites.png);
- -background-image: url(button/img/button-sprites-ie6.png);
+ }
+
+.black .v-button-primary:active .v-button-wrap,
+.black .v-button-primary.v-pressed .v-button-wrap {
+ background-image: url(button/img/black-button-sprites.png);
+ -background-image: url(button/img/black-button-sprites-ie6.png);
background-position: right -234px;
-}
-.v-button-primary:active,
-.v-ie7 .v-button-primary.v-pressed {
- background-image: url(button/img/button-sprites.png);
- -background-image: url(button/img/button-sprites-ie6.png);
+ }
+
+.black .v-button-primary,
+.black .v-disabled.v-button-primary {
+ background-image: url(button/img/black-button-sprites.png);
+ -background-image: url(button/img/black-button-sprites-ie6.png);
background-position: left -260px;
-}
-.v-button-primary:active .v-button-caption,
-.v-ie7 .v-button-primary.v-pressed .v-button-caption {
- background-image: url(button/img/button-sprites.png);
- -background-image: url(button/img/button-sprites-ie6.png);
+ }
+
+.black .v-button-primary .v-button-wrap,
+.black .v-disabled.v-button-primary .v-button-wrap {
+ background-image: url(button/img/black-button-sprites.png);
+ -background-image: url(button/img/black-button-sprites-ie6.png);
background-position: right -286px;
-}
-/*
- * Small-style --------------------------
- */
-div > .v-button-small,
-.v-ie7 .v-button-small,
-div > .v-button-small.v-disabled,
-.v-ie7 .v-button-small.v-disabled {
+ }
+
+.v-button-small:focus {
background-image: url(button/img/button-sprites.png);
-background-image: url(button/img/button-sprites-ie6.png);
background-position: left -312px;
- 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 {
+ }
+
+.v-button-small:focus .v-button-wrap {
background-image: url(button/img/button-sprites.png);
-background-image: url(button/img/button-sprites-ie6.png);
background-position: right -332px;
- 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 {
+ }
+
+.v-button-small:active,
+.v-button-small.v-pressed {
background-image: url(button/img/button-sprites.png);
-background-image: url(button/img/button-sprites-ie6.png);
background-position: left -352px;
-}
-.v-button-small:focus .v-button-caption {
+ }
+
+.v-button-small:active .v-button-wrap,
+.v-button-small.v-pressed .v-button-wrap {
background-image: url(button/img/button-sprites.png);
-background-image: url(button/img/button-sprites-ie6.png);
background-position: right -372px;
-}
-.v-button-small:active,
-.v-ie7 .v-button-small.v-pressed {
+ }
+
+.v-button-small,
+.v-disabled.v-button-small {
background-image: url(button/img/button-sprites.png);
-background-image: url(button/img/button-sprites-ie6.png);
background-position: left -392px;
-}
-.v-button-small:active .v-button-caption,
-.v-ie7 .v-button-small.v-pressed .v-button-caption {
+ height: 20px;
+ }
+
+.v-button-small .v-button-wrap,
+.v-disabled.v-button-small .v-button-wrap {
background-image: url(button/img/button-sprites.png);
-background-image: url(button/img/button-sprites-ie6.png);
background-position: right -412px;
-}
+ height: 19px;
+ padding: 1px 14px 0 8px;
+ }
-/*------------
-* 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(button/img/black-button-sprites.png);
- -background-image: url(button/img/black-button-sprites-ie6.png);
- background-position: left -0px;
-}
-.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(button/img/black-button-sprites.png);
- -background-image: url(button/img/black-button-sprites-ie6.png);
- background-position: right -26px;
- color: #c9ccce;
- text-shadow: rgba(0,0,0,.8) 0 -1px 0;
-}
-.black .v-button:focus {
- background-image: url(button/img/black-button-sprites.png);
- -background-image: url(button/img/black-button-sprites-ie6.png);
- background-position: left -52px;
-}
-.black .v-button:focus .v-button-caption {
- background-image: url(button/img/black-button-sprites.png);
- -background-image: url(button/img/black-button-sprites-ie6.png);
- background-position: right -78px;
-}
-.black .v-button:active,
-.v-ie7 .black .v-button.v-pressed {
- background-image: url(button/img/black-button-sprites.png);
- -background-image: url(button/img/black-button-sprites-ie6.png);
- background-position: left -104px;
-}
-.black .v-button:active .v-button-caption,
-.v-ie7 .black .v-button.v-pressed .v-button-caption {
- background-image: url(button/img/black-button-sprites.png);
- -background-image: url(button/img/black-button-sprites-ie6.png);
- background-position: right -130px;
-}
+.v-button-small .v-button-caption {
+ font-weight: normal;
+ }
+
-/*
- * 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(button/img/black-button-sprites.png);
- -background-image: url(button/img/black-button-sprites-ie6.png);
- background-position: left -156px;
-}
-.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(button/img/black-button-sprites.png);
- -background-image: url(button/img/black-button-sprites-ie6.png);
- background-position: right -182px;
-}
-.black .v-button-primary:focus {
- background-image: url(button/img/black-button-sprites.png);
- -background-image: url(button/img/black-button-sprites-ie6.png);
- background-position: left -208px;
-}
-.black .v-button-primary:focus .v-button-caption {
- background-image: url(button/img/black-button-sprites.png);
- -background-image: url(button/img/black-button-sprites-ie6.png);
- background-position: right -234px;
- color: #eaf4fb;
-}
-.black .v-button-primary:active,
-.v-ie7 .black .v-button-primary.v-pressed {
- background-image: url(button/img/black-button-sprites.png);
- -background-image: url(button/img/black-button-sprites-ie6.png);
- background-position: left -260px;
-}
-.black .v-button-primary:active .v-button-caption,
-.v-ie7 .black .v-button-primary.v-pressed .v-button-caption {
- background-image: url(button/img/black-button-sprites.png);
- -background-image: url(button/img/black-button-sprites-ie6.png);
- background-position: right -286px;
-}
-/*
- * 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 {
+
+/* Black style */
+
+.black .v-button-small:focus {
background-image: url(button/img/black-button-sprites.png);
-background-image: url(button/img/black-button-sprites-ie6.png);
background-position: left -312px;
-}
-.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 {
+ }
+
+.black .v-button-small:focus .v-button-wrap {
background-image: url(button/img/black-button-sprites.png);
-background-image: url(button/img/black-button-sprites-ie6.png);
background-position: right -332px;
-}
-.black .v-button-small:focus {
+ }
+
+.black .v-button-small:active,
+.black .v-button-small.v-pressed {
background-image: url(button/img/black-button-sprites.png);
-background-image: url(button/img/black-button-sprites-ie6.png);
background-position: left -352px;
-}
-.black .v-button-small:focus .v-button-caption {
+ }
+
+.black .v-button-small:active .v-button-wrap,
+.black .v-button-small.v-pressed .v-button-wrap {
background-image: url(button/img/black-button-sprites.png);
-background-image: url(button/img/black-button-sprites-ie6.png);
background-position: right -372px;
-}
-.black .v-button-small:active,
-.v-ie7 .black .v-button-small.v-pressed {
+ }
+
+.black .v-button-small,
+.black .v-disabled.v-button-small {
background-image: url(button/img/black-button-sprites.png);
-background-image: url(button/img/black-button-sprites-ie6.png);
background-position: left -392px;
-}
-.black .v-button-small:active .v-button-caption,
-.v-ie7 .black .v-button-small.v-pressed .v-button-caption {
+ }
+
+.black .v-button-small .v-button-wrap,
+.black .v-disabled.v-button-small .v-button-wrap {
background-image: url(button/img/black-button-sprites.png);
-background-image: url(button/img/black-button-sprites-ie6.png);
background-position: right -412px;
-}
-
-
-
+ }
-/**
- * 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 {
+.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;
-}
-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;
+ 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.v-button-link .v-icon + .v-button-caption {
- margin: 0;
- padding: 0;
-}
-.v-button.v-button-link:focus {
+ }
+
+.v-button-link:focus .v-button-caption,
+.v-nativebutton-link:focus .v-nativebutton-caption {
outline: 1px dotted #1b699f;
+ }
+
+/* Browser-specific corrections to the standard implementation */
+
+.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;
+ }
+
+.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;
+ }
+ */
+
+/*.v-op .v-button:active .v-button-caption {
+ margin-top: -1px;
+ margin-left: -1px;
}
-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;
+.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;
+}*/
+
+.v-ie6 .v-nativebutton-link,
+.v-ie7 .v-nativebutton-link,
+.v-ie8 .v-nativebutton-link {
+ padding: 0;
+ text-align: left;
}
+
+
/**
* IE6 buttons --------------------------
*/
border: 1px solid #b3b3b3;
border-bottom-color: #9a9a9a;
background: #d8d8d8 url(button/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;
+ 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(button/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(button/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(button/img/right-pressed.png) no-repeat 0 -1px;
.v-ie6 .black .v-button.v-pressed {
background-image: url(button/img/black/right-pressed.png);
}
-/* Link button in IE6 */
-.v-ie6 .v-button-link {
- border: none;
- padding: 0;
+
+
+/* Link style button */
+.v-ie6 .v-button-link,
+.v-ie6 .black .v-button-link {
background: transparent;
+ border: none;
+ height: auto;
line-height: normal;
- font-size: 12px;
- font-weight: normal;
+ padding: 0;
+}
+.v-ie6 .v-button-link .v-button-wrap,
+.v-ie6 .black .v-button-link .v-button-wrap {
+ padding: 0;
+ height: auto;
}
-/* ./WebContent/VAADIN/themes/reindeer/common/common.css */
+
+
+/*
+
+.v-ff .v-button .v-errorindicator,
+.v-sa .v-button .v-errorindicator {
+ top: 2px;
+ left: 16px;
+}
+/* Buttons with explicit size *
+.v-button[style*="width"] .v-button-caption {
+ display: block;
+}
+.v-button[style*="width"] .v-icon + .v-button-caption,
+.v-button[style*="width"] .v-icon + .v-errorindicator + .v-button-caption {
+ margin-left: 0;
+}
+.v-button[style*="width"] .v-icon,
+.v-ie7 .v-button .v-icon {
+ position: absolute;
+ top: 4px;
+}
+.v-ie7 .v-button > .v-button-caption {
+ display: block;
+ margin-left: 0;
+}
+*/
+
+
.v-generated-body,
.v-app {
background: #f5f5f5;
cursor: default;
}
-/* ./WebContent/VAADIN/themes/reindeer/datefield/datefield.css */
.v-datefield-calendarpanel {
border-collapse: collapse;
margin: 0;
background-position: right -294px;
}
-/* ./WebContent/VAADIN/themes/reindeer/formlayout/formlayout.css */
.v-formlayout-errorcell {
width: 13px;
}
font-weight: bold;
}
-/* ./WebContent/VAADIN/themes/reindeer/label/label.css */
.v-label {
line-height: 18px;
}
line-height: normal;
}
-/* ./WebContent/VAADIN/themes/reindeer/layouts/layouts.css */
.v-orderedlayout-margin-top,
.v-horizontallayout-margin-top,
.v-verticallayout-margin-top {
background-color: #1e2022;
}
-/* ./WebContent/VAADIN/themes/reindeer/menubar/menubar.css */
.v-menubar {
height: 23px;
overflow: hidden;
margin-top: -14px;
}
-/* ./WebContent/VAADIN/themes/reindeer/notification/notification.css */
.v-Notification {
color: #fff;
border-radius: 4px;
font-size: 12px;
}
-/* ./WebContent/VAADIN/themes/reindeer/panel/panel.css */
.v-panel-caption,
.v-panel-nocaption {
border-bottom: 1px solid #dcdcdc;
border: none;
}
-/* ./WebContent/VAADIN/themes/reindeer/progressindicator/progressindicator.css */
.v-progressindicator-wrapper {
background: #dfe2e4 url(progressindicator/img/base.gif) repeat-x;
border: 1px solid #bfbfbf;
background: #f7f9f9 url(progressindicator/img/progress.png);
}
-/* ./WebContent/VAADIN/themes/reindeer/select/select.css */
.v-filterselect {
height: 24px;
background-repeat: no-repeat;
overflow: hidden;
}
-/* ./WebContent/VAADIN/themes/reindeer/slider/slider.css */
.v-slider {
border-top: 1px solid #9a9c9e;
border-bottom: 1px solid #bdbfc1;
margin-left: -5px;
}
-/* ./WebContent/VAADIN/themes/reindeer/splitpanel/splitpanel.css */
.v-splitpanel-hsplitter,
.v-splitpanel-hsplitter-locked {
width: 7px;
background: #4e5253;
}
-/* ./WebContent/VAADIN/themes/reindeer/table/table.css */
.v-table-header-wrap {
border-color: #c2c3c4;
background: transparent repeat-x;
border: none;
}
-/* ./WebContent/VAADIN/themes/reindeer/tabsheet/tabsheet.css */
.v-tabsheet-tabitemcell,
.v-tabsheet-spacertd {
height: 32px;
}
/* Content area font color specified with minimal style (reduces additional selectors) */
-/* ./WebContent/VAADIN/themes/reindeer/textfield/textfield.css */
.v-textfield,
.v-textarea {
line-height: normal;
border-width: 0;
}
-/* ./WebContent/VAADIN/themes/reindeer/tree/tree.css */
.v-tree-node {
background: transparent url(tree/img/arrows.png) no-repeat 6px -10px;
margin-bottom: 2px;
padding: 1px;
}
-/* ./WebContent/VAADIN/themes/reindeer/window/window.css */
.v-window {
background: transparent;
}
/* 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;
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;
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;
}
*/
-/* ./WebContent/VAADIN/themes/base/caption/caption.css */
.v-captionwrapper {
text-align: left; /* Force default alignment */
}
display: inline;
}
-/* ./WebContent/VAADIN/themes/base/common/common.css */
/* References the BODY tag generated by Vaadin application servlet */
.v-generated-body {
width: 100%;
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;
}
filter: alpha(opacity=30);
}
-/* ./WebContent/VAADIN/themes/base/formlayout/formlayout.css */
.v-formlayout-cell .v-errorindicator {
display: block;
}
float: none;
}
-/* ./WebContent/VAADIN/themes/base/gridlayout/gridlayout.css */
.v-gridlayout-margin-top {
padding-top: 2em;
}
overflow: hidden;
}
-/* ./WebContent/VAADIN/themes/base/link/link.css */
.v-link {
white-space: nowrap;
}
border:none;
}
-/* ./WebContent/VAADIN/themes/base/menubar/menubar.css */
.v-menubar table {
white-space: nowrap;
border-collapse: collapse;
cursor: default;
}
-/* ./WebContent/VAADIN/themes/base/notification/notification.css */
.v-Notification {
background: #999;
color: #fff;
white-space: nowrap;
}
-/* ./WebContent/VAADIN/themes/base/orderedlayout/orderedlayout.css */
.v-orderedlayout-margin-top,
.v-horizontallayout-margin-top,
.v-verticallayout-margin-top {
overflow: hidden;
}
-/* ./WebContent/VAADIN/themes/base/panel/panel.css */
.v-panel,
.v-panel-caption,
.v-panel-content,
.v-panel-deco {
}
-/* ./WebContent/VAADIN/themes/base/popupview/popupview.css */
.v-popupview {
cursor: pointer;
background: #aaa;
overflow: auto;
}
-/* ./WebContent/VAADIN/themes/base/progressindicator/progressindicator.css */
.v-progressindicator {
overflow: hidden; /* for IE6 */
width: 150px;
background: transparent;
}
-/* ./WebContent/VAADIN/themes/base/select/select.css */
.v-select {
text-align: left;
}
clear: left;
}
.v-select-twincol .v-button {
- display: block;
float: left;
}
.v-select-twincol-buttons .v-button {
- display: inline;
float: none;
}
.v-filterselect {
}
*/
-/* ./WebContent/VAADIN/themes/base/shadow/shadow.css */
.v-shadow {
position: absolute;
}
margin-left: -4px;
}
-/* ./WebContent/VAADIN/themes/base/slider/slider.css */
.v-slider {
margin: 5px 0;
}
margin: 0 -1px;
}
-/* ./WebContent/VAADIN/themes/base/splitpanel/splitpanel.css */
.v-splitpanel-horizontal,
.v-splitpanel-vertical {
overflow: hidden;
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
color: #ddd;
}
-/* ./WebContent/VAADIN/themes/base/tabsheet/tabsheet.css */
.v-tabsheet,
.v-tabsheet-content,
.v-tabsheet-deco {
height: 0;
}
-/* ./WebContent/VAADIN/themes/base/textfield/textfield.css */
.v-textfield {
text-align: left /* Force default alignment */
}
outline-width: medium;
}
-/* ./WebContent/VAADIN/themes/base/tree/tree.css */
.v-tree {
text-align: left; /* Force default alignment */
overflow: hidden;
clear: left;
}
-/* ./WebContent/VAADIN/themes/base/upload/upload.css */
.v-upload-immediate {
position: relative;
width: 10em;
}
-/* ./WebContent/VAADIN/themes/base/window/window.css */
.v-window {
background: #fff;
}
}
/* Automatically compiled css file from subdirectories. */
-/* ./WebContent/VAADIN/themes/runo/absolutelayout/absolutelayout.css */
.v-absolutelayout-wrapper {
position: absolute;
overflow:hidden;
}
-/* ./WebContent/VAADIN/themes/runo/accordion/accordion.css */
.v-accordion-item {
background-color: #fff;
}
border-bottom: 1px solid #c8cccd;
}
-/* ./WebContent/VAADIN/themes/runo/button/button.css */
.v-button {
font-size: 13px;
}
padding-right: 5px;
}
-/* ./WebContent/VAADIN/themes/runo/caption/caption.css */
.v-captionwrapper {
margin: 0.3em 0 0 0;
}
margin-left: -3px;
}
-/* ./WebContent/VAADIN/themes/runo/common/common.css */
.v-generated-body {
background: #e9eced;
}
margin-right: 10px;
}
-/* ./WebContent/VAADIN/themes/runo/datefield/datefield.css */
.v-datefield-button {
font-size:13px;
width: 22px;
margin: 0;
}
-/* ./WebContent/VAADIN/themes/runo/formlayout/formlayout.css */
.v-formlayout-cell .v-errorindicator {
width: 10px;
height: 16px;
font-weight: bold;
}
-/* ./WebContent/VAADIN/themes/runo/gridlayout/gridlayout.css */
.v-gridlayout-margin-top {
padding-top: 15px;
}
padding-top: 8px;
}
-/* ./WebContent/VAADIN/themes/runo/link/link.css */
.v-link a {
color: #464f52;
}
-/* ./WebContent/VAADIN/themes/runo/menubar/menubar.css */
.v-menubar {
color: #464f52;
border: 1px solid #c6cbcc;
background: #5daee8;
}
-/* ./WebContent/VAADIN/themes/runo/notification/notification.css */
.v-Notification {
font-family: "Trebuchet MS", geneva, helvetica, arial, tahoma, verdana, sans-serif;
background-color: #818e92;
white-space: nowrap;
}
-/* ./WebContent/VAADIN/themes/runo/orderedlayout/orderedlayout.css */
.v-orderedlayout-margin-top,
.v-horizontallayout-margin-top,
.v-verticallayout-margin-top {
padding-left: 8px;
}
-/* ./WebContent/VAADIN/themes/runo/panel/panel.css */
.v-panel {
background: transparent url(panel/img/top-left.png) no-repeat;
}
overflow: hidden;
}
-/* ./WebContent/VAADIN/themes/runo/popupview/popupview.css */
.v-popupview-popup {
border: 1px solid #babfc0;
border-bottom: 1px solid #dee2e3;
padding: 3px;
}
-/* ./WebContent/VAADIN/themes/runo/progressindicator/progressindicator.css */
.v-progressindicator-wrapper {
background: #dfe2e4 url(progressindicator/img/base.gif) repeat-x;
border: 1px solid #b6bbbc;
background: #dfe2e4;
}
-/* ./WebContent/VAADIN/themes/runo/select/select.css */
.v-select-select {
font-size: 13px;
}
}
*/
-/* ./WebContent/VAADIN/themes/runo/shadow/shadow.css */
.v-shadow {
position: absolute;
}
background: transparent url(shadow/img/bottom-right.png);
}
-/* ./WebContent/VAADIN/themes/runo/slider/slider.css */
.v-slider {
border-top: 1px solid #cccfd0;
border-bottom: 1px solid #cccfd0;
margin: 0 -1px;
}
-/* ./WebContent/VAADIN/themes/runo/splitpanel/splitpanel.css */
.v-splitpanel-horizontal, .v-splitpanel-vertical {
overflow: hidden;
}
}
-/* ./WebContent/VAADIN/themes/runo/table/table.css */
.v-table-header-wrap {
height: 36px;
border: 1px solid #b6bbbc;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="/VAADIN/themes/default/table/img/scroll-position-bg.png", sizingMethod="scale");
}
-/* ./WebContent/VAADIN/themes/runo/tabsheet/tabsheet.css */
.v-tabsheet-tabs {
height: 48px;
}
height: 0;
}
-/* ./WebContent/VAADIN/themes/runo/textfield/textfield.css */
.v-textfield {
background: #fff url(textfield/img/bg.png) repeat-x;
padding: 2px;
background: #fff url(textfield/img/bg.png) repeat-x;
}
-/* ./WebContent/VAADIN/themes/runo/tree/tree.css */
.v-tree-node {
background: transparent url(tree/img/collapsed.png) no-repeat 2px 1px;
}
padding: 1px;
}
-/* ./WebContent/VAADIN/themes/runo/window/window.css */
.v-window {
color: #464f52;
font-family: "Trebuchet MS", geneva, helvetica, arial, tahoma, verdana, sans-serif;
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;
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 {
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;
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;
}
.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;
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;
background: #fff;
}
-.v-app .v-customcomponent-ModeSwitch button.v-button {
+.v-app .v-customcomponent-ModeSwitch button.v-nativebutton {
height: 24px;
width: 30px;
border: none;
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;
}
* inheritance). The order is the same in which the styles are
* catenated. The resulted file is placed in the last specified
* theme folder.
+ *
+ * @param
* @throws IOException
*/
private static void combineTheme(String[] themeNames,
.append("/* Automatically compiled css file from subdirectories. */\n");
File[] subdir = f.listFiles();
- Arrays.sort(subdir, new Comparator() {
- public int compare(Object arg0, Object arg1) {
- return ((File) arg0).compareTo((File) arg1);
+ Arrays.sort(subdir, new Comparator<File>() {
+ public int compare(File arg0, File arg1) {
+ return arg0.compareTo(arg1);
}
});
for (int i = 0; i < subdir.length; i++) {
File dir = subdir[i];
- String name = dir.getName();
- String filename = dir.getPath() + "/" + name + ".css";
-
- File cssFile = new File(filename);
- if (cssFile.isFile()) {
-
- combinedCss.append("\n");
- combinedCss.append("/* " + filename.replaceAll("\\\\", "/")
- + " */");
- combinedCss.append("\n");
+ String folder = dir.getName();
+ String filename = dir.getPath() + "/" + folder + ".css";
- FileInputStream fstream = new FileInputStream(cssFile);
- // Get the object of DataInputStream
- DataInputStream in = new DataInputStream(fstream);
- BufferedReader br = new BufferedReader(
- new InputStreamReader(in));
- String strLine;
- while ((strLine = br.readLine()) != null) {
- // Define image url prefix
- String urlPrefix = "";
- if (j < themeNames.length - 1) {
- urlPrefix = "../" + themeNames[j] + "/";
- }
-
- if (strLine.indexOf("url(../") > 0) {
- strLine = strLine.replaceAll("url\\(../",
- ("url\\(" + urlPrefix));
-
- } else {
- strLine = strLine.replaceAll("url\\(", ("url\\("
- + urlPrefix + name + "/"));
-
- }
- combinedCss.append(strLine);
- combinedCss.append("\n");
- }
- // Close the input stream
- in.close();
- }
+ processCSSFile(new File(filename), folder, themeNames[j],
+ combinedCss, j < themeNames.length - 1);
}
}
}
}
+ private static void processCSSFile(File cssFile, String folder,
+ String themeName, StringBuffer combinedCss, boolean inheritedFile)
+ throws FileNotFoundException, IOException {
+ if (cssFile.isFile()) {
+
+ combinedCss.append("\n");
+
+ FileInputStream fstream = new FileInputStream(cssFile);
+ // Get the object of DataInputStream
+ DataInputStream in = new DataInputStream(fstream);
+ BufferedReader br = new BufferedReader(new InputStreamReader(in));
+ String strLine;
+ while ((strLine = br.readLine()) != null) {
+
+ // Parse import rules
+ if (strLine.startsWith("@import")) {
+ // All import statements must be exactly
+ // @import "file-to-import.css";
+ // No sub-directories are allowed in the url
+ String importFilename = strLine.split("\"")[1];
+
+ File importFile = new File(THEME_DIR + themeName + "/"
+ + folder + "/" + importFilename);
+ if (importFile.isFile()) {
+ processCSSFile(importFile, folder, themeName,
+ combinedCss, inheritedFile);
+ } else {
+ System.out
+ .println("File not found for @import statement "
+ + THEME_DIR
+ + themeName
+ + "/"
+ + folder
+ + "/" + importFilename);
+ }
+ }
+
+ // Define image url prefix
+ String urlPrefix = "";
+ if (inheritedFile) {
+ urlPrefix = "../" + themeName + "/";
+ }
+
+ if (strLine.indexOf("url(../") > 0) {
+ strLine = strLine.replaceAll("url\\(../",
+ ("url\\(" + urlPrefix));
+
+ } else {
+ strLine = strLine.replaceAll("url\\(", ("url\\("
+ + urlPrefix + folder + "/"));
+
+ }
+ if (!strLine.startsWith("@import")) {
+ combinedCss.append(strLine);
+ combinedCss.append("\n");
+ }
+ }
+ // Close the input stream
+ in.close();
+ }
+ }
+
private static void createSprites(String themeName)
throws FileNotFoundException, IOException {
String[] parameters = new String[] { "--sprite-png-depth", "AUTO",
import com.vaadin.ui.Button;
import com.vaadin.ui.CustomComponent;
import com.vaadin.ui.GridLayout;
+import com.vaadin.ui.NativeButton;
import com.vaadin.ui.Button.ClickEvent;
@SuppressWarnings("serial")
if (idToButton.containsKey(id)) {
removeMode(id);
}
- Button b = new Button();
+ Button b = new NativeButton();
if (caption != null) {
b.setCaption(caption);
}
import com.vaadin.ui.GridLayout;
import com.vaadin.ui.HorizontalLayout;
import com.vaadin.ui.Label;
+import com.vaadin.ui.NativeButton;
import com.vaadin.ui.Panel;
import com.vaadin.ui.PopupView;
import com.vaadin.ui.SplitPanel;
}
private Component createLogo() {
- Button logo = new Button("", new Button.ClickListener() {
+ Button logo = new NativeButton("", new Button.ClickListener() {
public void buttonClick(ClickEvent event) {
setFeature((Feature) null);
}
}
private Button createNextButton() {
- Button b = new Button("", new ClickListener() {
+ Button b = new NativeButton("", new ClickListener() {
public void buttonClick(ClickEvent event) {
Object curr = currentFeature.getValue();
Object next = allFeatures.nextItemId(curr);
}
private Button createPrevButton() {
- Button b = new Button("", new ClickListener() {
+ Button b = new NativeButton("", new ClickListener() {
public void buttonClick(ClickEvent event) {
Object curr = currentFeature.getValue();
Object prev = allFeatures.prevItemId(curr);
}
private Component createTreeSwitch() {
- final Button b = new Button();
+ final Button b = new NativeButton();
b.setStyleName("tree-switch");
b.setDescription("Toggle sample tree visibility");
b.addListener(new Button.ClickListener() {
if (grid.getCursorX() == 0) {
grid.space();
}
- Button b = new Button();
+ Button b = new NativeButton();
b.setStyleName(Button.STYLE_LINK);
b.addStyleName("screenshot");
String resId = "75-" + f.getIconName();
boolean enabled = !uidl.getBooleanAttribute("disabled");
if (component instanceof FocusWidget) {
FocusWidget fw = (FocusWidget) component;
- fw.setEnabled(enabled);
if (uidl.hasAttribute("tabindex")) {
fw.setTabIndex(uidl.getIntAttribute("tabindex"));
}
+ // Disabled state may affect tabindex
+ fw.setEnabled(enabled);
}
StringBuffer styleBuf = new StringBuffer();
import com.vaadin.terminal.gwt.client.ui.VLink;
import com.vaadin.terminal.gwt.client.ui.VListSelect;
import com.vaadin.terminal.gwt.client.ui.VMenuBar;
+import com.vaadin.terminal.gwt.client.ui.VNativeButton;
import com.vaadin.terminal.gwt.client.ui.VNativeSelect;
import com.vaadin.terminal.gwt.client.ui.VOptionGroup;
import com.vaadin.terminal.gwt.client.ui.VOrderedLayout;
return new VCheckBox();
} else if (VButton.class == classType) {
return new VButton();
+ } else if (VNativeButton.class == classType) {
+ return new VNativeButton();
} else if (VWindow.class == classType) {
return new VWindow();
} else if (VOrderedLayout.class == classType) {
protected Class resolveWidgetType(UIDL uidl) {
final String tag = uidl.getTag();
- if ("button".equals(tag)) {
+ if ("button".equals(tag) || "nativebutton".equals(tag)) {
if ("switch".equals(uidl.getStringAttribute("type"))) {
return VCheckBox.class;
+ } else if ("nativebutton".equals(tag)) {
+ return VNativeButton.class;
} else {
return VButton.class;
}
package com.vaadin.terminal.gwt.client.ui;
-import com.google.gwt.user.client.Command;
+import com.google.gwt.dom.client.Document;
+import com.google.gwt.dom.client.Element;
+import com.google.gwt.dom.client.NativeEvent;
+import com.google.gwt.event.dom.client.ClickEvent;
+import com.google.gwt.event.dom.client.ClickHandler;
import com.google.gwt.user.client.DOM;
-import com.google.gwt.user.client.DeferredCommand;
-import com.google.gwt.user.client.Element;
import com.google.gwt.user.client.Event;
-import com.google.gwt.user.client.ui.Button;
-import com.google.gwt.user.client.ui.ClickListener;
-import com.google.gwt.user.client.ui.Widget;
+import com.google.gwt.user.client.ui.Accessibility;
+import com.google.gwt.user.client.ui.FocusWidget;
import com.vaadin.terminal.gwt.client.ApplicationConnection;
import com.vaadin.terminal.gwt.client.BrowserInfo;
import com.vaadin.terminal.gwt.client.Paintable;
import com.vaadin.terminal.gwt.client.Util;
import com.vaadin.terminal.gwt.client.VTooltip;
-public class VButton extends Button implements Paintable {
-
- private String width = null;
+public class VButton extends FocusWidget implements Paintable {
public static final String CLASSNAME = "v-button";
+ private static final String CLASSNAME_PRESSED = "v-pressed";
- // Used only for IE, because it doesn't support :active CSS selector
- private static final String CLASSNAME_DOWN = "v-pressed";
-
- private String primaryStyleName;
+ protected String id;
- String id;
+ protected ApplicationConnection client;
- ApplicationConnection client;
+ protected final Element wrapper = DOM.createSpan();
- private Element errorIndicatorElement;
+ protected Element errorIndicatorElement;
- private final Element captionElement = DOM.createSpan();
+ protected final Element captionElement = DOM.createSpan();
- private Icon icon;
+ protected Icon icon;
/**
- * Helper flat to handle special-case where the button is moved from under
+ * Helper flag to handle special-case where the button is moved from under
* mouse while clicking it. In this case mouse leaves the button without
* moving.
*/
private boolean clickPending;
+ /*
+ * BELOW PRIVATE MEMBERS COPY-PASTED FROM GWT CustomButton
+ */
+
+ /**
+ * If <code>true</code>, this widget is capturing with the mouse held down.
+ */
+ private boolean isCapturing;
+
+ /**
+ * If <code>true</code>, this widget has focus with the space bar down.
+ */
+ private boolean isFocusing;
+
+ /**
+ * Used to decide whether to allow clicks to propagate up to the superclass
+ * or container elements.
+ */
+ private boolean allowClick;
+ private boolean isHovering;
+ private boolean enabled = true;
+ private int tabIndex = 0;
+
public VButton() {
+ super(DOM.createDiv());
+ setTabIndex(0);
+ sinkEvents(Event.ONCLICK | Event.MOUSEEVENTS | Event.FOCUSEVENTS
+ | Event.KEYEVENTS);
+ sinkEvents(VTooltip.TOOLTIP_EVENTS);
+
setStyleName(CLASSNAME);
- DOM.appendChild(getElement(), captionElement);
- captionElement.setPropertyString("className", CLASSNAME + "-caption");
+ // Add a11y role "button"
+ Accessibility.setRole(getElement(), Accessibility.ROLE_BUTTON);
- addClickListener(new ClickListener() {
- public void onClick(Widget sender) {
+ wrapper.setClassName(CLASSNAME + "-wrap");
+ getElement().appendChild(wrapper);
+ captionElement.setClassName(CLASSNAME + "-caption");
+ wrapper.appendChild(captionElement);
+
+ addClickHandler(new ClickHandler() {
+ public void onClick(ClickEvent event) {
if (id == null || client == null) {
return;
}
- /*
- * TODO isolate workaround. Safari don't always seem to fire
- * onblur previously focused component before button is clicked.
- */
- VButton.this.setFocus(true);
+ if (BrowserInfo.get().isSafari()) {
+ VButton.this.setFocus(true);
+ }
client.updateVariable(id, "state", true, true);
clickPending = false;
}
});
- sinkEvents(VTooltip.TOOLTIP_EVENTS);
- sinkEvents(Event.ONMOUSEDOWN);
- sinkEvents(Event.ONMOUSEUP);
}
public void updateFromUIDL(UIDL uidl, ApplicationConnection client) {
- // client.updateComponent depends on this, so this must come before
- if (uidl.hasAttribute("primarystyle")
- && primaryStyleName != uidl.getStringAttribute("primarystyle")) {
- primaryStyleName = uidl.getStringAttribute("primarystyle");
- setStyleName(primaryStyleName);
- captionElement.setPropertyString("className", getStylePrimaryName()
- + "-caption");
- }
-
// Ensure correct implementation,
// but don't let container manage caption etc.
if (client.updateComponent(this, uidl, false)) {
if (uidl.hasAttribute("error")) {
if (errorIndicatorElement == null) {
errorIndicatorElement = DOM.createSpan();
- DOM.setElementProperty(errorIndicatorElement, "className",
- "v-errorindicator");
+ errorIndicatorElement.setClassName("v-errorindicator");
}
- DOM.insertChild(getElement(), errorIndicatorElement, 0);
+ wrapper.insertBefore(errorIndicatorElement, captionElement);
// Fix for IE6, IE7
- if (BrowserInfo.get().isIE()) {
- DOM.setInnerText(errorIndicatorElement, " ");
+ if (BrowserInfo.get().isIE6() || BrowserInfo.get().isIE7()) {
+ errorIndicatorElement.setInnerText(" ");
}
} else if (errorIndicatorElement != null) {
- DOM.removeChild(getElement(), errorIndicatorElement);
+ wrapper.removeChild(errorIndicatorElement);
errorIndicatorElement = null;
}
- if (uidl.hasAttribute("readonly")) {
- setEnabled(false);
- }
-
if (uidl.hasAttribute("icon")) {
if (icon == null) {
icon = new Icon(client);
- DOM.insertChild(getElement(), icon.getElement(), 0);
+ wrapper.insertBefore(icon.getElement(), captionElement);
}
icon.setUri(uidl.getStringAttribute("icon"));
} else {
if (icon != null) {
- DOM.removeChild(getElement(), icon.getElement());
+ wrapper.removeChild(icon.getElement());
icon = null;
}
}
- if (BrowserInfo.get().isIE7()) {
- /*
- * Workaround for IE7 size calculation issues. Deferred because of
- * issues with a button with an icon using the reindeer theme
- */
- if (width.equals("")) {
- DeferredCommand.addCommand(new Command() {
-
- public void execute() {
- setWidth("");
- setWidth(getOffsetWidth() + "px");
- }
- });
- }
- }
}
- @Override
public void setText(String text) {
- DOM.setInnerText(captionElement, text);
+ captionElement.setInnerText(text);
}
+ @SuppressWarnings("deprecation")
@Override
+ /*
+ * Copy-pasted from GWT CustomButton, some minor modifications done:
+ *
+ * -for IE/Opera added CLASSNAME_PRESSED
+ *
+ * -event.preventDefault() commented from ONMOUSEDOWN (Firefox won't apply
+ * :active styles if it is present)
+ *
+ * -Tooltip event handling added
+ *
+ * -onload event handler added (for icon handling)
+ */
public void onBrowserEvent(Event event) {
- super.onBrowserEvent(event);
-
+ if (client != null) {
+ client.handleTooltipEvent(event, this);
+ }
if (DOM.eventGetType(event) == Event.ONLOAD) {
Util.notifyParentOfSizeChange(this, true);
+ }
+ // Should not act on button if disabled.
+ if (!isEnabled()) {
+ // This can happen when events are bubbled up from non-disabled
+ // children
+ return;
+ }
- } else if (DOM.eventGetType(event) == Event.ONMOUSEDOWN
- && event.getButton() == Event.BUTTON_LEFT) {
- clickPending = true;
- if (BrowserInfo.get().isIE()) {
- // Only for IE, because it doesn't support :active CSS selector
- // Simple check is cheaper than DOM manipulation
- addStyleName(CLASSNAME_DOWN);
+ int type = DOM.eventGetType(event);
+ switch (type) {
+ case Event.ONCLICK:
+ // If clicks are currently disallowed, keep it from bubbling or
+ // being passed to the superclass.
+ if (!allowClick) {
+ event.stopPropagation();
+ return;
}
- } else if (DOM.eventGetType(event) == Event.ONMOUSEMOVE) {
- clickPending = false;
- } else if (DOM.eventGetType(event) == Event.ONMOUSEOUT) {
- if (clickPending) {
- click();
+ break;
+ case Event.ONMOUSEDOWN:
+ if (event.getButton() == Event.BUTTON_LEFT) {
+ clickPending = true;
+ setFocus(true);
+ DOM.setCapture(getElement());
+ isCapturing = true;
+ // Prevent dragging (on some browsers);
+ // DOM.eventPreventDefault(event);
+ if (BrowserInfo.get().isIE() || BrowserInfo.get().isOpera()) {
+ addStyleName(CLASSNAME_PRESSED);
+ }
}
- if (BrowserInfo.get().isIE()) {
- removeStyleName(CLASSNAME_DOWN);
+ break;
+ case Event.ONMOUSEUP:
+ if (isCapturing) {
+ isCapturing = false;
+ DOM.releaseCapture(getElement());
+ if (isHovering() && event.getButton() == Event.BUTTON_LEFT) {
+ onClick();
+ }
+ if (BrowserInfo.get().isIE() || BrowserInfo.get().isOpera()) {
+ removeStyleName(CLASSNAME_PRESSED);
+ }
}
+ break;
+ case Event.ONMOUSEMOVE:
clickPending = false;
- } else if (DOM.eventGetType(event) == Event.ONMOUSEUP) {
- if (BrowserInfo.get().isIE()) {
- removeStyleName(CLASSNAME_DOWN);
+ if (isCapturing) {
+ // Prevent dragging (on other browsers);
+ DOM.eventPreventDefault(event);
+ }
+ break;
+ case Event.ONMOUSEOUT:
+ Element to = event.getRelatedTarget();
+ if (getElement().isOrHasChild(DOM.eventGetTarget(event))
+ && (to == null || !getElement().isOrHasChild(to))) {
+ if (clickPending) {
+ onClick();
+ break;
+ }
+ clickPending = false;
+ if (isCapturing) {
+ }
+ setHovering(false);
+ if (BrowserInfo.get().isIE() || BrowserInfo.get().isOpera()) {
+ removeStyleName(CLASSNAME_PRESSED);
+ }
+ }
+ break;
+ case Event.ONMOUSEOVER:
+ if (DOM.isOrHasChild(getElement(), DOM.eventGetTarget(event))) {
+ setHovering(true);
+ if (isCapturing) {
+ }
+ }
+ break;
+ case Event.ONBLUR:
+ if (isFocusing) {
+ isFocusing = false;
}
+ break;
+ case Event.ONLOSECAPTURE:
+ if (isCapturing) {
+ isCapturing = false;
+ }
+ break;
}
- if (client != null) {
- client.handleTooltipEvent(event, this);
+ super.onBrowserEvent(event);
+
+ // Synthesize clicks based on keyboard events AFTER the normal key
+ // handling.
+ if ((event.getTypeInt() & Event.KEYEVENTS) != 0) {
+ char keyCode = (char) DOM.eventGetKeyCode(event);
+ switch (type) {
+ case Event.ONKEYDOWN:
+ if (keyCode == ' ') {
+ isFocusing = true;
+ event.preventDefault();
+ }
+ break;
+ case Event.ONKEYUP:
+ if (isFocusing && keyCode == ' ') {
+ isFocusing = false;
+ onClick();
+ event.preventDefault();
+ }
+ break;
+ case Event.ONKEYPRESS:
+ if (keyCode == '\n' || keyCode == '\r') {
+ onClick();
+ event.preventDefault();
+ }
+ break;
+ }
+ }
+ }
+
+ final void setHovering(boolean hovering) {
+ if (hovering != isHovering()) {
+ isHovering = hovering;
}
}
+ final boolean isHovering() {
+ return isHovering;
+ }
+
+ /*
+ * ALL BELOW COPY-PASTED FROM GWT CustomButton
+ */
+
+ /**
+ * Called when the user finishes clicking on this button. The default
+ * behavior is to fire the click event to listeners. Subclasses that
+ * override {@link #onClickStart()} should override this method to restore
+ * the normal widget display.
+ */
+ protected void onClick() {
+ // Allow the click we're about to synthesize to pass through to the
+ // superclass and containing elements. Element.dispatchEvent() is
+ // synchronous, so we simply set and clear the flag within this method.
+ allowClick = true;
+
+ // Mouse coordinates are not always available (e.g., when the click is
+ // caused by a keyboard event).
+ NativeEvent evt = Document.get().createClickEvent(1, 0, 0, 0, 0, false,
+ false, false, false);
+ getElement().dispatchEvent(evt);
+
+ allowClick = false;
+ }
+
+ /**
+ * Sets whether this button is enabled.
+ *
+ * @param enabled
+ * <code>true</code> to enable the button, <code>false</code> to
+ * disable it
+ */
+
@Override
- public void setWidth(String width) {
- /* Workaround for IE7 button size part 1 (#2014) */
- if (BrowserInfo.get().isIE7() && this.width != null) {
- if (this.width.equals(width)) {
- return;
+ public final void setEnabled(boolean enabled) {
+ if (isEnabled() != enabled) {
+ this.enabled = enabled;
+ if (!enabled) {
+ cleanupCaptureState();
+ Accessibility.removeState(getElement(),
+ Accessibility.STATE_PRESSED);
+ super.setTabIndex(-1);
+ } else {
+ Accessibility.setState(getElement(),
+ Accessibility.STATE_PRESSED, "false");
+ super.setTabIndex(tabIndex);
}
+ }
+ }
- if (width == null) {
- width = "";
- }
+ @Override
+ public final boolean isEnabled() {
+ return enabled;
+ }
+
+ @Override
+ public final void setTabIndex(int index) {
+ super.setTabIndex(index);
+ tabIndex = index;
+ }
+
+ /**
+ * Resets internal state if this button can no longer service events. This
+ * can occur when the widget becomes detached or disabled.
+ */
+ private void cleanupCaptureState() {
+ if (isCapturing || isFocusing) {
+ DOM.releaseCapture(getElement());
+ isCapturing = false;
+ isFocusing = false;
}
+ }
- this.width = width;
+ @Override
+ public void setWidth(String width) {
+ if (BrowserInfo.get().isIE6() || BrowserInfo.get().isIE7()) {
+ if (width != null && width.length() > 2) {
+ // Assume pixel values are always sent from
+ // ApplicationConnection
+ int w = Integer
+ .parseInt(width.substring(0, width.length() - 2));
+ w -= getHorizontalBorderAndPaddingWidth(getElement());
+ width = w + "px";
+ }
+ }
super.setWidth(width);
+ }
- /* Workaround for IE7 button size part 2 (#2014) */
- if (BrowserInfo.get().isIE7()) {
- super.setWidth(width);
+ private static native int getHorizontalBorderAndPaddingWidth(Element elem)
+ /*-{
+ // THIS METHOD IS ONLY USED FOR INTERNET EXPLORER, IT DOESN'T WORK WITH OTHERS
+
+ var convertToPixel = function(elem, value) {
+ // From the awesome hack by Dean Edwards
+ // http://erik.eae.net/archives/2007/07/27/18.54.15/#comment-102291
+
+ // Remember the original values
+ var left = style.left, rsLeft = elem.runtimeStyle.left;
+
+ // Put in the new values to get a computed value out
+ elem.runtimeStyle.left = elem.currentStyle.left;
+ style.left = value || 0;
+ var ret = style.pixelLeft;
+
+ // Revert the changed values
+ style.left = left;
+ elem.runtimeStyle.left = rsLeft;
+
+ return ret;
+ }
+
+ var ret = 0;
+
+ var sides = ["Right","Left"];
+ for(var i=0; i<2; i++) {
+ var side = sides[i];
+ var value;
+ // Border -------------------------------------------------------
+ if(elem.currentStyle["border"+side+"Style"] != "none") {
+ value = elem.currentStyle["border"+side+"Width"];
+ if ( !/^\d+(px)?$/i.test( value ) && /^\d/.test( value ) ) {
+ ret += convertToPixel(elem, value);
+ } else if(value.length > 2) {
+ ret += parseInt(value.substr(0, value.length-2));
+ }
+ }
+
+ // Padding -------------------------------------------------------
+ value = elem.currentStyle["padding"+side];
+ if ( !/^\d+(px)?$/i.test( value ) && /^\d/.test( value ) ) {
+ ret += convertToPixel(elem, value);
+ } else if(value.length > 2) {
+ ret += parseInt(value.substr(0, value.length-2));
+ }
}
- }
+
+ return ret;
+ }-*/;
}
processClickEvent(sender, true);\r
}\r
\r
- private class VEventButton extends VButton implements SourcesMouseEvents {\r
+ private class VEventButton extends VNativeButton implements\r
+ SourcesMouseEvents {\r
\r
private MouseListenerCollection mouseListeners;\r
\r
| Event.MOUSEEVENTS);\r
}\r
\r
+ @Override\r
public void addMouseListener(MouseListener listener) {\r
if (mouseListeners == null) {\r
mouseListeners = new MouseListenerCollection();\r
mouseListeners.add(listener);\r
}\r
\r
+ @Override\r
public void removeMouseListener(MouseListener listener) {\r
if (mouseListeners != null) {\r
mouseListeners.remove(listener);\r
--- /dev/null
+/*
+@ITMillApache2LicenseForJavaFiles@
+ */
+
+package com.vaadin.terminal.gwt.client.ui;
+
+import com.google.gwt.dom.client.Element;
+import com.google.gwt.event.dom.client.ClickEvent;
+import com.google.gwt.event.dom.client.ClickHandler;
+import com.google.gwt.user.client.Command;
+import com.google.gwt.user.client.DOM;
+import com.google.gwt.user.client.DeferredCommand;
+import com.google.gwt.user.client.Event;
+import com.google.gwt.user.client.ui.Button;
+import com.vaadin.terminal.gwt.client.ApplicationConnection;
+import com.vaadin.terminal.gwt.client.BrowserInfo;
+import com.vaadin.terminal.gwt.client.Paintable;
+import com.vaadin.terminal.gwt.client.UIDL;
+import com.vaadin.terminal.gwt.client.Util;
+import com.vaadin.terminal.gwt.client.VTooltip;
+
+public class VNativeButton extends Button implements Paintable {
+
+ public static final String CLASSNAME = "v-nativebutton";
+
+ protected String width = null;
+
+ protected String id;
+
+ protected ApplicationConnection client;
+
+ protected Element errorIndicatorElement;
+
+ protected final Element captionElement = DOM.createSpan();
+
+ protected Icon icon;
+
+ /**
+ * Helper flag to handle special-case where the button is moved from under
+ * mouse while clicking it. In this case mouse leaves the button without
+ * moving.
+ */
+ private boolean clickPending;
+
+ public VNativeButton() {
+ setStyleName(CLASSNAME);
+
+ getElement().appendChild(captionElement);
+ captionElement.setClassName(getStyleName() + "-caption");
+
+ addClickHandler(new ClickHandler() {
+ public void onClick(ClickEvent event) {
+ if (id == null || client == null) {
+ return;
+ }
+ if (BrowserInfo.get().isSafari()) {
+ VNativeButton.this.setFocus(true);
+ }
+ client.updateVariable(id, "state", true, true);
+ clickPending = false;
+ }
+ });
+ sinkEvents(VTooltip.TOOLTIP_EVENTS);
+ sinkEvents(Event.ONMOUSEDOWN);
+ sinkEvents(Event.ONMOUSEUP);
+ }
+
+ public void updateFromUIDL(UIDL uidl, ApplicationConnection client) {
+
+ // Ensure correct implementation,
+ // but don't let container manage caption etc.
+ if (client.updateComponent(this, uidl, false)) {
+ return;
+ }
+
+ // Save details
+ this.client = client;
+ id = uidl.getId();
+
+ // Set text
+ setText(uidl.getStringAttribute("caption"));
+
+ // handle error
+ if (uidl.hasAttribute("error")) {
+ if (errorIndicatorElement == null) {
+ errorIndicatorElement = DOM.createSpan();
+ errorIndicatorElement.setClassName("v-errorindicator");
+ }
+ getElement().insertBefore(errorIndicatorElement, captionElement);
+
+ // Fix for IE6, IE7
+ if (BrowserInfo.get().isIE()) {
+ errorIndicatorElement.setInnerText(" ");
+ }
+
+ } else if (errorIndicatorElement != null) {
+ getElement().removeChild(errorIndicatorElement);
+ errorIndicatorElement = null;
+ }
+
+ if (uidl.hasAttribute("icon")) {
+ if (icon == null) {
+ icon = new Icon(client);
+ getElement().insertBefore(icon.getElement(), captionElement);
+ }
+ icon.setUri(uidl.getStringAttribute("icon"));
+ } else {
+ if (icon != null) {
+ getElement().removeChild(icon.getElement());
+ icon = null;
+ }
+ }
+
+ if (BrowserInfo.get().isIE7()) {
+ /*
+ * Workaround for IE7 size calculation issues. Deferred because of
+ * issues with a button with an icon using the reindeer theme
+ */
+ if (width.equals("")) {
+ DeferredCommand.addCommand(new Command() {
+
+ public void execute() {
+ setWidth("");
+ setWidth(getOffsetWidth() + "px");
+ }
+ });
+ }
+ }
+ }
+
+ @Override
+ public void setText(String text) {
+ captionElement.setInnerText(text);
+ }
+
+ @Override
+ public void onBrowserEvent(Event event) {
+ super.onBrowserEvent(event);
+
+ if (DOM.eventGetType(event) == Event.ONLOAD) {
+ Util.notifyParentOfSizeChange(this, true);
+
+ } else if (DOM.eventGetType(event) == Event.ONMOUSEDOWN
+ && event.getButton() == Event.BUTTON_LEFT) {
+ clickPending = true;
+ } else if (DOM.eventGetType(event) == Event.ONMOUSEMOVE) {
+ clickPending = false;
+ } else if (DOM.eventGetType(event) == Event.ONMOUSEOUT) {
+ if (clickPending) {
+ click();
+ }
+ clickPending = false;
+ }
+
+ if (client != null) {
+ client.handleTooltipEvent(event, this);
+ }
+ }
+
+ @Override
+ public void setWidth(String width) {
+ /* Workaround for IE7 button size part 1 (#2014) */
+ if (BrowserInfo.get().isIE7() && this.width != null) {
+ if (this.width.equals(width)) {
+ return;
+ }
+
+ if (width == null) {
+ width = "";
+ }
+ }
+
+ this.width = width;
+ super.setWidth(width);
+
+ /* Workaround for IE7 button size part 2 (#2014) */
+ if (BrowserInfo.get().isIE7()) {
+ super.setWidth(width);
+ }
+ }
+
+}
\r
private VTextField newItemField;\r
\r
- private VButton newItemButton;\r
+ private VNativeButton newItemButton;\r
\r
public VOptionGroupBase(String classname) {\r
container = new FlowPanel();\r
\r
if (uidl.getBooleanAttribute("allownewitem")) {\r
if (newItemField == null) {\r
- newItemButton = new VButton();\r
+ newItemButton = new VNativeButton();\r
newItemButton.setText("+");\r
newItemButton.addClickListener(this);\r
newItemField = new VTextField();\r
--- /dev/null
+package com.vaadin.tests.themes;
+
+import com.vaadin.terminal.ThemeResource;
+import com.vaadin.terminal.UserError;
+import com.vaadin.ui.Button;
+import com.vaadin.ui.CheckBox;
+import com.vaadin.ui.HorizontalLayout;
+import com.vaadin.ui.Layout;
+import com.vaadin.ui.NativeButton;
+import com.vaadin.ui.Window;
+import com.vaadin.ui.Button.ClickEvent;
+
+@SuppressWarnings("serial")
+public class ButtonsTest extends com.vaadin.Application {
+
+ final Window main = new Window("Button states & themes");
+
+ CheckBox styleToggle;
+ CheckBox iconToggle;
+ CheckBox nativeToggle;
+ CheckBox themeToggle;
+ boolean largeIcons = false;
+ boolean nativeButtons = false;
+
+ final HorizontalLayout toggles = new HorizontalLayout();
+
+ @Override
+ public void init() {
+ setMainWindow(main);
+ setTheme("reindeer");
+
+ themeToggle = new CheckBox("Runo theme", new Button.ClickListener() {
+ public void buttonClick(ClickEvent event) {
+ if (getTheme() == "reindeer") {
+ setTheme("runo");
+ } else {
+ setTheme("reindeer");
+ }
+ }
+ });
+ themeToggle.setStyleName("small");
+ themeToggle.setImmediate(true);
+
+ styleToggle = new CheckBox("Black style", new Button.ClickListener() {
+ public void buttonClick(ClickEvent event) {
+ if (!main.getContent().getStyleName().contains("black")) {
+ main.getContent().setStyleName("black");
+ } else {
+ main.getContent().setStyleName("");
+ }
+ }
+ });
+ styleToggle.setImmediate(true);
+ styleToggle.setStyleName("small");
+
+ iconToggle = new CheckBox("64x icons", new Button.ClickListener() {
+ public void buttonClick(ClickEvent event) {
+ largeIcons = !largeIcons;
+ recreateAll();
+ }
+ });
+ iconToggle.setImmediate(true);
+ iconToggle.setStyleName("small");
+
+ nativeToggle = new CheckBox("Native buttons",
+ new Button.ClickListener() {
+ public void buttonClick(ClickEvent event) {
+ nativeButtons = !nativeButtons;
+ recreateAll();
+ }
+ });
+ nativeToggle.setImmediate(true);
+ nativeToggle.setStyleName("small");
+
+ toggles.setSpacing(true);
+ toggles.addComponent(themeToggle);
+ toggles.addComponent(styleToggle);
+ toggles.addComponent(iconToggle);
+ toggles.addComponent(nativeToggle);
+ main.addComponent(toggles);
+
+ recreateAll();
+
+ }
+
+ private void recreateAll() {
+ main.removeAllComponents();
+ main.addComponent(toggles);
+
+ main.addComponent(buildButtons(false, false, false, false));
+ main.addComponent(buildButtons(false, false, true, false));
+ main.addComponent(buildButtons(false, true, false, false));
+ main.addComponent(buildButtons(false, true, true, false));
+ main.addComponent(buildButtons(true, false, false, false));
+ main.addComponent(buildButtons(true, false, true, false));
+ main.addComponent(buildButtons(true, true, false, false));
+ main.addComponent(buildButtons(true, true, true, false));
+
+ main.addComponent(buildButtons(false, false, false, true));
+ main.addComponent(buildButtons(false, false, true, true));
+ main.addComponent(buildButtons(false, true, false, true));
+ main.addComponent(buildButtons(false, true, true, true));
+ main.addComponent(buildButtons(true, false, false, true));
+ main.addComponent(buildButtons(true, false, true, true));
+ main.addComponent(buildButtons(true, true, false, true));
+ main.addComponent(buildButtons(true, true, true, true));
+
+ final Button b = new Button("Tabindex");
+ b.setTabIndex(1);
+ main.addComponent(b);
+
+ Button c = new Button("toggle enabled", new Button.ClickListener() {
+ public void buttonClick(ClickEvent event) {
+ b.setEnabled(!b.isEnabled());
+ }
+ });
+ main.addComponent(c);
+ }
+
+ private Layout buildButtons(boolean disabled, boolean icon, boolean error,
+ boolean sized) {
+
+ String[] buttonStyles = new String[] { "Normal", "Primary", "Small",
+ "Link" };
+
+ HorizontalLayout hl = new HorizontalLayout();
+ hl.setSpacing(true);
+ hl.setMargin(true);
+
+ for (int i = 0; i < buttonStyles.length; i++) {
+ Button b;
+ if (nativeButtons) {
+ b = new NativeButton(buttonStyles[i] + " style");
+ } else {
+ b = new Button(buttonStyles[i] + " style");
+ }
+ b.setStyleName(buttonStyles[i].toLowerCase());
+ if (icon) {
+ b.setIcon(new ThemeResource("../runo/icons/"
+ + (largeIcons ? "64" : "16") + "/document.png"));
+ }
+ if (error) {
+ b.setComponentError(new UserError("Error"));
+ }
+ if (disabled) {
+ b.setEnabled(false);
+ }
+ if (sized) {
+ b.setWidth("250px");
+ b.setCaption(b.getCaption() + " (250px)");
+ }
+ hl.addComponent(b);
+ }
+
+ return hl;
+ }
+
+}
\ No newline at end of file
+++ /dev/null
-package com.vaadin.tests.themes;
-
-import com.vaadin.terminal.ThemeResource;
-import com.vaadin.terminal.UserError;
-import com.vaadin.ui.Button;
-import com.vaadin.ui.HorizontalLayout;
-import com.vaadin.ui.Layout;
-import com.vaadin.ui.Window;
-import com.vaadin.ui.Button.ClickEvent;
-
-@SuppressWarnings("serial")
-public class ReindeerButtonsTest extends com.vaadin.Application {
-
- final Window main = new Window("Reindeer buttons");
-
- @Override
- public void init() {
- setMainWindow(main);
- setTheme("reindeer");
-
- Button toggle = new Button("Toggle black style",
- new Button.ClickListener() {
- public void buttonClick(ClickEvent event) {
- if (!main.getContent().getStyleName().contains("black")) {
- main.getContent().setStyleName("black");
- } else {
- main.getContent().setStyleName("");
- }
- }
- });
- main.addComponent(toggle);
-
- main.addComponent(buildButtons(false, false, false, false));
- main.addComponent(buildButtons(false, false, true, false));
- main.addComponent(buildButtons(false, true, false, false));
- main.addComponent(buildButtons(false, true, true, false));
- main.addComponent(buildButtons(true, false, false, false));
- main.addComponent(buildButtons(true, false, true, false));
- main.addComponent(buildButtons(true, true, false, false));
- main.addComponent(buildButtons(true, true, true, false));
-
- main.addComponent(buildButtons(false, false, false, true));
- main.addComponent(buildButtons(false, false, true, true));
- main.addComponent(buildButtons(false, true, false, true));
- main.addComponent(buildButtons(false, true, true, true));
- main.addComponent(buildButtons(true, false, false, true));
- main.addComponent(buildButtons(true, false, true, true));
- main.addComponent(buildButtons(true, true, false, true));
- main.addComponent(buildButtons(true, true, true, true));
- }
-
- private Layout buildButtons(boolean disabled, boolean icon, boolean error,
- boolean sized) {
-
- String[] buttonStyles = new String[] { "", "primary", "small", "link" };
-
- HorizontalLayout hl = new HorizontalLayout();
- hl.setSpacing(true);
- hl.setMargin(true);
-
- for (int i = 0; i < buttonStyles.length; i++) {
- Button b = new Button(buttonStyles[i] + " style");
- b.setStyleName(buttonStyles[i]);
- if (icon) {
- b.setIcon(new ThemeResource("../runo/icons/16/document.png"));
- }
- if (error) {
- b.setComponentError(new UserError("Error"));
- }
- if (disabled) {
- b.setEnabled(false);
- }
- if (sized) {
- b.setWidth("150px");
- }
- hl.addComponent(b);
- }
-
- return hl;
- }
-
-}
\ No newline at end of file
boolean switchMode = false;
- private String primaryStyleName;
-
/**
* Creates a new push button. The value of the push button is false and it
* is immediate by default.
public void paintContent(PaintTarget target) throws PaintException {
super.paintContent(target);
- if (primaryStyleName != null) {
- target.addAttribute("primarystyle", primaryStyleName);
- }
if (isSwitchMode()) {
target.addAttribute("type", "switch");
}
super.setInternalValue(newValue);
}
- /**
- *
- * <i><b>EXPERIMENTAL FEATURE</b> Use with caution, the method signature
- * might change in following releases.</i>
- * <p>
- * Sets the components primary style name.
- * <p>
- * The primary style name is usually used on the client-side as the prefix
- * for widget CSS classnames (this depends on the terminal implementation).
- * The default primary styles are usually prefixed with Vaadin proprietary
- * "v-" string, e.g. the primary style name for a default Vaadin button is
- * "v-button".
- * <p>
- * With this method, you can change the primary style name to "mybutton",
- * and then on the client-side you would have "mybutton" as the CSS
- * classname. After that, all other style names you set for the component
- * will be prefixed with the new primary style name, i.e. setting an
- * additional style name "red" for the same button would result in a CSS
- * classname "mybutton-red" on the client-side.
- */
- public void setPrimaryStyleName(String primary) {
- primaryStyleName = primary;
- requestRepaint();
- }
-
- public String getPrimaryStyleName() {
- return primaryStyleName;
- }
-
}
--- /dev/null
+package com.vaadin.ui;
+
+import com.vaadin.data.Property;
+
+@SuppressWarnings("serial")
+public class NativeButton extends Button {
+
+ public NativeButton() {
+ super();
+ }
+
+ public NativeButton(String caption) {
+ super(caption);
+ }
+
+ public NativeButton(String caption, ClickListener listener) {
+ super(caption, listener);
+ }
+
+ public NativeButton(String caption, Object target, String methodName) {
+ super(caption, target, methodName);
+ }
+
+ /**
+ * Creates a new switch button with initial value.
+ *
+ * @param state
+ * the Initial state of the switch-button.
+ * @param initialState
+ */
+ public NativeButton(String caption, boolean initialState) {
+ super(caption, initialState);
+ }
+
+ /**
+ * Creates a new switch button that is connected to a boolean property.
+ *
+ * @param state
+ * the Initial state of the switch-button.
+ * @param dataSource
+ */
+ public NativeButton(String caption, Property dataSource) {
+ super(caption, dataSource);
+ }
+
+ @Override
+ public String getTag() {
+ return "nativebutton";
+ }
+
+}
\ No newline at end of file
projects / vaadin-framework.git / commitdiff
