diff options
| author | Jouni Koivuviita <jouni.koivuviita@itmill.com> | 2009-08-27 12:26:49 +0000 |
|---|---|---|
| committer | Jouni Koivuviita <jouni.koivuviita@itmill.com> | 2009-08-27 12:26:49 +0000 |
| commit | ad101f842727ca84a184f1bf1ad7c5e63878302b (patch) | |
| tree | b636516fa19ef5dab996c9160e576e3169e50f7b /WebContent/VAADIN/themes | |
| parent | 7072fbb2f053ab9a390ee5e004d65e465c7b93e7 (diff) | |
| download | vaadin-framework-ad101f842727ca84a184f1bf1ad7c5e63878302b.tar.gz vaadin-framework-ad101f842727ca84a184f1bf1ad7c5e63878302b.zip | |
The Button Component Strikes Back
Fixes many theme issues with Button (mostly Reindeer theme), including #3110, #3193, #3194, #3180 and 3079.
Default button is now rendered on the client side with a DIV. Disabled buttons can now have descriptions, which fixes #2085.
Added a "new" component, NativeButton, which uses native BUTTON element rendering on the client side.
Theme compilation script now understands simple @import statements, which help keep things more organized in theme development.
svn changeset:8558/svn branch:6.1
Diffstat (limited to 'WebContent/VAADIN/themes')
19 files changed, 1236 insertions, 1125 deletions
diff --git a/WebContent/VAADIN/themes/base/button/button.css b/WebContent/VAADIN/themes/base/button/button.css index c7e2fab8f6..31f091487c 100644 --- a/WebContent/VAADIN/themes/base/button/button.css +++ b/WebContent/VAADIN/themes/base/button/button.css @@ -1,57 +1,139 @@ +/*
+ * Default button (more customizable)
+ * -------------------------------------- */
.v-button {
+ display: inline-block;
+ zoom: 1;
+ text-align: center;
+ text-decoration: none;
+ border: 2px outset #ddd;
+ background: #eee;
cursor: pointer;
white-space: nowrap;
margin: 0;
+ padding: .2em 1em;
+ color: inherit;
+ font: inherit;
+ line-height: normal;
+ -khtml-user-select: none;
+ -moz-user-select: none;
+ -ie-user-select: none;
+ user-select: none;
+ }
+
+.v-ie6 .v-button {
+ display: inline;
}
-.v-button span {
- white-space: nowrap;
-}
-.v-checkbox input {
+
+.v-button-wrap,
+.v-button-caption {
vertical-align: middle;
-}
-.v-button img,
-.v-checkbox img {
- display: inline;
+ white-space: nowrap;
+ font: inherit;
+ color: inherit;
+ line-height: normal;
+ }
+
+.v-button .v-icon,
+.v-nativebutton .v-icon {
vertical-align: middle;
margin-right: 3px;
-}
-.v-button span,
-.v-checkbox label {
+ border: none;
+ }
+
+.v-button .v-errorindicator,
+.v-nativebutton .v-errorindicator {
+ display: inline-block;
+ zoom: 1;
vertical-align: middle;
+ float: none;
}
-.v-button-link {
+
+/* Link style (we really should deprecate this) */
+.v-button-link,
+.v-nativebutton-link {
border: none;
text-align: left;
- background: none;
+ background: transparent;
padding: 0;
-}
+ color: inherit;
+ }
+
/* Inset Safari focus outline a bit */
-.v-sa .v-button-link:focus {
+.v-sa .v-button-link:focus{
outline-offset: -3px;
-}
-.v-button-link span {
+ }
+
+.v-button-link .v-button-caption,
+.v-nativebutton-link .v-nativebutton-caption {
text-decoration: underline;
-}
-.v-checkbox {
- white-space: nowrap;
-}
-.v-checkbox .v-errorindicator {
+ color: inherit;
+ text-align: left;
+ }
+
+
+/*
+ * NativeButton styles (html button element)
+ * -------------------------------------- */
+.v-nativebutton {
+ text-align: center;
+ cursor: pointer;
+ white-space: nowrap;
+ margin: 0;
+ color: inherit;
+ font: inherit;
+ line-height: normal;
+ }
+.v-nativebutton .v-nativebutton-caption {
+ vertical-align: middle;
+ white-space: nowrap;
+ font: inherit;
+ color: inherit;
+ }
+
+.v-nativebutton .v-icon {
+ vertical-align: middle;
+ margin-right: 3px;
+ }
+
+.v-nativebutton .v-errorindicator {
+ display: inline-block;
+ zoom: 1;
float: none;
- display: inline;
- padding-left: 1em;
- background-position: left;
}
/* Fixes streched buttons in IE6 and IE7*/
-.v-ie6 .v-button {
+.v-ie6 .v-nativebutton {
width: 1px;
}
-.v-ie6 .v-button,
-.v-ie7 .v-button,
-.v-ie8 .v-button {
+.v-ie6 .v-nativebutton,
+.v-ie7 .v-nativebutton,
+.v-ie8 .v-nativebutton {
overflow: visible;
padding-left: 1em;
padding-right: 1em;
}
+
+/*
+ * Checkbox styles
+ * -------------------------------------- */
+
+.v-checkbox,
+.v-checkbox label,
+.v-checkbox input {
+ vertical-align: middle;
+ white-space: nowrap;
+}
+.v-checkbox img {
+ display: inline;
+ vertical-align: middle;
+ margin-right: 3px;
+}
+.v-checkbox .v-errorindicator {
+ float: none;
+ display: inline;
+ padding-left: 1em;
+ background-position: left;
+}
/* Error indicator on checkbox fix for IE6 */
.v-ie6 .v-checkbox * {
float: left;
@@ -76,13 +158,8 @@ padding-left: 0;
padding-right: 0.7em;
}
-/* Error indicator on button fix for IE */
-.v-ie6 button .v-errorindicator,
-.v-ie7 button .v-errorindicator,
-.v-ie8 button .v-errorindicator {
- display: inline;
- padding-right: 0.5em;
-}
+
+
/* Disabled by default
.v-checkbox-error {
background: #ffe0e0;
diff --git a/WebContent/VAADIN/themes/base/select/select.css b/WebContent/VAADIN/themes/base/select/select.css index 9bfcfefd45..7da7c1201f 100644 --- a/WebContent/VAADIN/themes/base/select/select.css +++ b/WebContent/VAADIN/themes/base/select/select.css @@ -33,11 +33,9 @@ clear: left; } .v-select-twincol .v-button { - display: block; float: left; } .v-select-twincol-buttons .v-button { - display: inline; float: none; } .v-filterselect { diff --git a/WebContent/VAADIN/themes/base/styles.css b/WebContent/VAADIN/themes/base/styles.css index 528c9dc4a9..fcd22a8afc 100644 --- a/WebContent/VAADIN/themes/base/styles.css +++ b/WebContent/VAADIN/themes/base/styles.css @@ -1,12 +1,10 @@ /* Automatically compiled css file from subdirectories. */ -/* ./WebContent/VAADIN/themes/base/absolutelayout/absolutelayout.css */ .v-absolutelayout-wrapper { position: absolute; overflow: hidden; } -/* ./WebContent/VAADIN/themes/base/accordion/accordion.css */ .v-accordion { position: relative; outline: none; @@ -34,61 +32,142 @@ width: 100%; } -/* ./WebContent/VAADIN/themes/base/button/button.css */ +/* + * Default button (more customizable) + * -------------------------------------- */ .v-button { + display: inline-block; + zoom: 1; + text-align: center; + text-decoration: none; + border: 2px outset #ddd; + background: #eee; cursor: pointer; white-space: nowrap; margin: 0; + padding: .2em 1em; + color: inherit; + font: inherit; + line-height: normal; + -khtml-user-select: none; + -moz-user-select: none; + -ie-user-select: none; + user-select: none; + } + +.v-ie6 .v-button { + display: inline; } -.v-button span { - white-space: nowrap; -} -.v-checkbox input { + +.v-button-wrap, +.v-button-caption { vertical-align: middle; -} -.v-button img, -.v-checkbox img { - display: inline; + white-space: nowrap; + font: inherit; + color: inherit; + line-height: normal; + } + +.v-button .v-icon, +.v-nativebutton .v-icon { vertical-align: middle; margin-right: 3px; -} -.v-button span, -.v-checkbox label { + border: none; + } + +.v-button .v-errorindicator, +.v-nativebutton .v-errorindicator { + display: inline-block; + zoom: 1; vertical-align: middle; + float: none; } -.v-button-link { + +/* Link style (we really should deprecate this) */ +.v-button-link, +.v-nativebutton-link { border: none; text-align: left; - background: none; + background: transparent; padding: 0; -} + color: inherit; + } + /* Inset Safari focus outline a bit */ -.v-sa .v-button-link:focus { +.v-sa .v-button-link:focus{ outline-offset: -3px; -} -.v-button-link span { + } + +.v-button-link .v-button-caption, +.v-nativebutton-link .v-nativebutton-caption { text-decoration: underline; -} -.v-checkbox { - white-space: nowrap; -} -.v-checkbox .v-errorindicator { + color: inherit; + text-align: left; + } + + +/* + * NativeButton styles (html button element) + * -------------------------------------- */ +.v-nativebutton { + text-align: center; + cursor: pointer; + white-space: nowrap; + margin: 0; + color: inherit; + font: inherit; + line-height: normal; + } +.v-nativebutton .v-nativebutton-caption { + vertical-align: middle; + white-space: nowrap; + font: inherit; + color: inherit; + } + +.v-nativebutton .v-icon { + vertical-align: middle; + margin-right: 3px; + } + +.v-nativebutton .v-errorindicator { + display: inline-block; + zoom: 1; float: none; - display: inline; - padding-left: 1em; - background-position: left; } /* Fixes streched buttons in IE6 and IE7*/ -.v-ie6 .v-button { +.v-ie6 .v-nativebutton { width: 1px; } -.v-ie6 .v-button, -.v-ie7 .v-button, -.v-ie8 .v-button { +.v-ie6 .v-nativebutton, +.v-ie7 .v-nativebutton, +.v-ie8 .v-nativebutton { overflow: visible; padding-left: 1em; padding-right: 1em; } + +/* + * Checkbox styles + * -------------------------------------- */ + +.v-checkbox, +.v-checkbox label, +.v-checkbox input { + vertical-align: middle; + white-space: nowrap; +} +.v-checkbox img { + display: inline; + vertical-align: middle; + margin-right: 3px; +} +.v-checkbox .v-errorindicator { + float: none; + display: inline; + padding-left: 1em; + background-position: left; +} /* Error indicator on checkbox fix for IE6 */ .v-ie6 .v-checkbox * { float: left; @@ -113,13 +192,8 @@ padding-left: 0; padding-right: 0.7em; } -/* Error indicator on button fix for IE */ -.v-ie6 button .v-errorindicator, -.v-ie7 button .v-errorindicator, -.v-ie8 button .v-errorindicator { - display: inline; - padding-right: 0.5em; -} + + /* Disabled by default .v-checkbox-error { background: #ffe0e0; @@ -131,7 +205,6 @@ } */ -/* ./WebContent/VAADIN/themes/base/caption/caption.css */ .v-captionwrapper { text-align: left; /* Force default alignment */ } @@ -164,7 +237,6 @@ display: inline; } -/* ./WebContent/VAADIN/themes/base/common/common.css */ /* References the BODY tag generated by Vaadin application servlet */ .v-generated-body { width: 100%; @@ -370,17 +442,14 @@ div.v-app-loading { padding: 2px; } -/* ./WebContent/VAADIN/themes/base/customcomponent/customcomponent.css */ .v-customcomponent { overflow: hidden; } -/* ./WebContent/VAADIN/themes/base/customlayout/customlayout.css */ .v-customlayout { overflow: hidden; } -/* ./WebContent/VAADIN/themes/base/datefield/datefield.css */ .v-datefield { white-space: nowrap; } @@ -452,7 +521,6 @@ div.v-app-loading { filter: alpha(opacity=30); } -/* ./WebContent/VAADIN/themes/base/formlayout/formlayout.css */ .v-formlayout-cell .v-errorindicator { display: block; } @@ -497,7 +565,6 @@ div.v-app-loading { float: none; } -/* ./WebContent/VAADIN/themes/base/gridlayout/gridlayout.css */ .v-gridlayout-margin-top { padding-top: 2em; } @@ -529,7 +596,6 @@ div.v-app-loading { overflow: hidden; } -/* ./WebContent/VAADIN/themes/base/link/link.css */ .v-link { white-space: nowrap; } @@ -549,7 +615,6 @@ div.v-app-loading { border:none; } -/* ./WebContent/VAADIN/themes/base/menubar/menubar.css */ .v-menubar table { white-space: nowrap; border-collapse: collapse; @@ -588,7 +653,6 @@ div.v-app-loading { cursor: default; } -/* ./WebContent/VAADIN/themes/base/notification/notification.css */ .v-Notification { background: #999; color: #fff; @@ -631,7 +695,6 @@ div.v-app-loading { white-space: nowrap; } -/* ./WebContent/VAADIN/themes/base/orderedlayout/orderedlayout.css */ .v-orderedlayout-margin-top, .v-horizontallayout-margin-top, .v-verticallayout-margin-top { @@ -675,7 +738,6 @@ div.v-app-loading { overflow: hidden; } -/* ./WebContent/VAADIN/themes/base/panel/panel.css */ .v-panel, .v-panel-caption, .v-panel-content, @@ -712,7 +774,6 @@ div.v-app-loading { .v-panel-deco { } -/* ./WebContent/VAADIN/themes/base/popupview/popupview.css */ .v-popupview { cursor: pointer; background: #aaa; @@ -721,7 +782,6 @@ div.v-app-loading { overflow: auto; } -/* ./WebContent/VAADIN/themes/base/progressindicator/progressindicator.css */ .v-progressindicator { overflow: hidden; /* for IE6 */ width: 150px; @@ -759,7 +819,6 @@ div.v-progressindicator-indeterminate-disabled { background: transparent; } -/* ./WebContent/VAADIN/themes/base/select/select.css */ .v-select { text-align: left; } @@ -795,11 +854,9 @@ div.v-progressindicator-indeterminate-disabled { clear: left; } .v-select-twincol .v-button { - display: block; float: left; } .v-select-twincol-buttons .v-button { - display: inline; float: none; } .v-filterselect { @@ -895,7 +952,6 @@ div.v-progressindicator-indeterminate-disabled { } */ -/* ./WebContent/VAADIN/themes/base/shadow/shadow.css */ .v-shadow { position: absolute; } @@ -982,7 +1038,6 @@ div.v-progressindicator-indeterminate-disabled { margin-left: -4px; } -/* ./WebContent/VAADIN/themes/base/slider/slider.css */ .v-slider { margin: 5px 0; } @@ -1046,7 +1101,6 @@ div.v-progressindicator-indeterminate-disabled { margin: 0 -1px; } -/* ./WebContent/VAADIN/themes/base/splitpanel/splitpanel.css */ .v-splitpanel-horizontal, .v-splitpanel-vertical { overflow: hidden; @@ -1085,7 +1139,6 @@ div.v-progressindicator-indeterminate-disabled { position: relative; } -/* ./WebContent/VAADIN/themes/base/table/table.css */ /* Table theme building instructions * * Vaadin scroll table is very complex widget with dozens of features. These @@ -1236,7 +1289,6 @@ div.v-progressindicator-indeterminate-disabled { color: #ddd; } -/* ./WebContent/VAADIN/themes/base/tabsheet/tabsheet.css */ .v-tabsheet, .v-tabsheet-content, .v-tabsheet-deco { @@ -1326,7 +1378,6 @@ div.v-progressindicator-indeterminate-disabled { height: 0; } -/* ./WebContent/VAADIN/themes/base/textfield/textfield.css */ .v-textfield { text-align: left /* Force default alignment */ } @@ -1380,7 +1431,6 @@ textarea.v-textarea-prompt { outline-width: medium; } -/* ./WebContent/VAADIN/themes/base/tree/tree.css */ .v-tree { text-align: left; /* Force default alignment */ overflow: hidden; @@ -1436,7 +1486,6 @@ div.v-tree-node-leaf { clear: left; } -/* ./WebContent/VAADIN/themes/base/upload/upload.css */ .v-upload-immediate { position: relative; width: 10em; @@ -1462,7 +1511,6 @@ div.v-tree-node-leaf { } -/* ./WebContent/VAADIN/themes/base/window/window.css */ .v-window { background: #fff; } diff --git a/WebContent/VAADIN/themes/reindeer/button/button.css b/WebContent/VAADIN/themes/reindeer/button/button.css index 36a5f998b4..1dc2e25551 100644 --- a/WebContent/VAADIN/themes/reindeer/button/button.css +++ b/WebContent/VAADIN/themes/reindeer/button/button.css @@ -1,157 +1,27 @@ -/* We serve simpler buttons for IE6, since it doesn't support the adjacent - * sibling selector (+) that is needed to position .v-icon properly. +/* Standard implementation of the button theme + * These files contain styles that apply to all browsers */ -div > .v-button, -.v-ie7 .v-button, -div > .v-button.v-disabled, -.v-ie7 .v-button.v-disabled { - height: 26px; - padding: 0 0 0 6px; - background-color: transparent; - background-repeat: no-repeat; - background-image: url(img/left.png); /** sprite-ref: buttons */ - border: none; - cursor: default; -} -/* Error indicator need this */ -.v-ff .v-button, -.v-sa .v-button { - position: relative; -} -div > .v-button .v-button-caption, -.v-ie7 .v-button .v-button-caption, -div > .v-button.v-disabled .v-button-caption, -.v-ie7 .v-button.v-disabled .v-button-caption { - display: inline-block; - height: 22px; - padding: 4px 15px 0 9px; - background-color: transparent; - background-repeat: no-repeat; - background-position: right top; - background-image: url(img/right.png); /** sprite-ref: buttons; sprite-alignment: right */ - text-shadow: #fff 0 1px 0; - font-weight: bold; - font-size: 11px; - line-height: 16px; - float: none; -} -.v-sa .v-button .v-button-caption { - height: 21px; - padding-top: 5px; -} -.v-ch .v-button .v-button-caption, -.v-ch .v-button .v-icon { - position: relative; - top: -1px; - left: -3px; -} -.v-button:focus { - background-image: url(img/left-focus.png); /** sprite-ref: buttons */ - outline: none; -} -.v-button:focus .v-button-caption { - background-image: url(img/right-focus.png); /** sprite-ref: buttons; sprite-alignment: right */ - outline: none; -} -.v-button:active, -.v-ie7 .v-button.v-pressed { - background-image: url(img/left-pressed.png); /** sprite-ref: buttons */ - outline: none; -} -.v-button:active .v-button-caption, -.v-ie7 .v-button.v-pressed .v-button-caption { - background-image: url(img/right-pressed.png); /** sprite-ref: buttons; sprite-alignment: right */ - outline: none; -} -/* FF3 & FF2 */ -.v-button::-moz-focus-inner { - border: none; - padding: 0; -} -.v-ff2 .v-button .v-button-caption { - display: -moz-inline-box; - padding-top: 6px; - height: 20px; -} -/* IE7 */ -.v-ie7 .v-button.v-pressed .v-button-caption { - position: relative; -} -.v-ie7 .v-button.v-pressed .v-icon { - z-index: 2; -} -/* Opera */ -.v-op .v-button:active .v-button-caption { - margin-top: -1px; - margin-left: -1px; -} -.v-op .v-button:active .v-icon + .v-button-caption, -.v-op .v-button:active .v-icon + .v-errorindicator + .v-button-caption { - margin-left: -26px; -} -/* Modifications for buttons with icons */ -div > .v-button .v-icon, -.v-ie7 .v-button .v-icon, -div > .v-button.v-disabled .v-icon, -.v-ie7 .v-button.v-disabled .v-icon { - display: inline-block; - width: 16px; - overflow: hidden; - position: relative; - margin: -1px 3px 0 6px; -} -.v-ff2 .v-button .v-icon, -.v-ff2 .v-button.v-disabled .v-icon { - display: block; - float: left; - margin-top: 4px; -} -.v-ch .v-button .v-icon, -.v-ch .v-button.v-disabled .v-icon { - z-index: 2; -} -.v-ff2 .v-button-link .v-icon, -.v-ff2 .v-button-link.v-disabled .v-icon { - margin: 0; -} -.v-button .v-icon + .v-button-caption, -.v-button .v-icon + .v-errorindicator + .v-button-caption, -.v-button.v-disabled .v-icon + .v-button-caption, -.v-button.v-disabled .v-icon + .v-errorindicator + .v-button-caption { - margin-left: -25px; - padding-left: 25px; -} -/* Buttons with error indicator */ -div > .v-button .v-errorindicator, -.v-ie7 .v-button .v-errorindicator { - position: absolute; - display: block; - width: 9px; - height: 16px; - background: transparent url(../common/icons/error.png) no-repeat 50%; - padding: 0; - margin: 0; - z-index: 3; -} -.v-ie7 .v-button.v-pressed .v-errorindicator { - display: none; -} -.v-ie7 .v-button .v-icon + .v-errorindicator + .v-button-caption { - margin-left: 0; -} -.v-ie6 .v-button .v-errorindicator { - position: absolute; - display: inline; - width: 9px; - height: 16px; - background: transparent url(../common/icons/error-ie6.png) no-repeat 50%; -} +@import "standard.css"; +@import "primary-style.css"; +@import "small-style.css"; +@import "link-style.css"; + +/* Browser-specific corrections to the standard implementation */ +@import "safari.css"; +@import "firefox.css"; +@import "opera.css"; +@import "ie.css"; + + + +/* + .v-ff .v-button .v-errorindicator, .v-sa .v-button .v-errorindicator { top: 2px; left: 16px; } -/* Buttons with explicit size */ +/* Buttons with explicit size * .v-button[style*="width"] .v-button-caption { display: block; } @@ -168,277 +38,5 @@ div > .v-button .v-errorindicator, display: block; margin-left: 0; } +*/ -/** - * Default action button style -------------------------- - */ -div > .v-button-primary, -.v-ie7 .v-button-primary, -div > .v-button-primary.v-disabled, -.v-ie7 .v-button-primary.v-disabled { - background-image: url(img/primary-left.png); /** sprite-ref: buttons */ -} -div > .v-button-primary .v-button-caption, -.v-ie7 .v-button-primary .v-button-caption, -div > .v-button-primary.v-disabled .v-button-caption, -.v-ie7 .v-button-primary.v-disabled .v-button-caption { - background-image: url(img/primary-right.png); /** sprite-ref: buttons; sprite-alignment: right */ -} -.v-button-primary:focus { - background-image: url(img/primary-left-focus.png); /** sprite-ref: buttons */ -} -.v-button-primary:focus .v-button-caption { - background-image: url(img/primary-right-focus.png); /** sprite-ref: buttons; sprite-alignment: right */ -} -.v-button-primary:active, -.v-ie7 .v-button-primary.v-pressed { - background-image: url(img/primary-left-pressed.png); /** sprite-ref: buttons */ -} -.v-button-primary:active .v-button-caption, -.v-ie7 .v-button-primary.v-pressed .v-button-caption { - background-image: url(img/primary-right-pressed.png); /** sprite-ref: buttons; sprite-alignment: right */ -} -/* - * Small-style -------------------------- - */ -div > .v-button-small, -.v-ie7 .v-button-small, -div > .v-button-small.v-disabled, -.v-ie7 .v-button-small.v-disabled { - background-image: url(img/small-left.png); /** sprite-ref: buttons */ - height: 20px; -} -div > .v-button-small .v-button-caption, -.v-ie7 .v-button-small .v-button-caption, -div > .v-button-small.v-disabled .v-button-caption, -.v-ie7 .v-button-small.v-disabled .v-button-caption { - background-image: url(img/small-right.png); /** sprite-ref: buttons; sprite-alignment: right */ - height: 19px; - padding: 1px 11px 0 5px; - font-weight: normal; -} -.v-ff2 .v-button-small .v-button-caption { - height: 17px; - padding-top: 3px; -} -.v-sa .v-button-small .v-button-caption { - height: 18px; - padding-top: 2px; -} -.v-button-small:focus { - background-image: url(img/small-left-focus.png); /** sprite-ref: buttons */ -} -.v-button-small:focus .v-button-caption { - background-image: url(img/small-right-focus.png); /** sprite-ref: buttons; sprite-alignment: right */ -} -.v-button-small:active, -.v-ie7 .v-button-small.v-pressed { - background-image: url(img/small-left-pressed.png); /** sprite-ref: buttons */ -} -.v-button-small:active .v-button-caption, -.v-ie7 .v-button-small.v-pressed .v-button-caption { - background-image: url(img/small-right-pressed.png); /** sprite-ref: buttons; sprite-alignment: right */ -} - -/*------------ -* Black buttons -*------------*/ -.black div > .v-button, -.v-ie7 .black .v-button, -.black div > .v-button.v-disabled, -.v-ie7 .black .v-button.v-disabled { - background-image: url(img/black/left.png); /** sprite-ref: black-buttons */ -} -.black div > .v-button .v-button-caption, -.v-ie7 .black .v-button .v-button-caption, -.black div > .v-button.v-disabled .v-button-caption, -.v-ie7 .black .v-button.v-disabled .v-button-caption { - background-image: url(img/black/right.png); /** sprite-ref: black-buttons; sprite-alignment: right */ - color: #c9ccce; - text-shadow: rgba(0,0,0,.8) 0 -1px 0; -} -.black .v-button:focus { - background-image: url(img/black/left-focus.png); /** sprite-ref: black-buttons */ -} -.black .v-button:focus .v-button-caption { - background-image: url(img/black/right-focus.png); /** sprite-ref: black-buttons; sprite-alignment: right */ -} -.black .v-button:active, -.v-ie7 .black .v-button.v-pressed { - background-image: url(img/black/left-pressed.png); /** sprite-ref: black-buttons */ -} -.black .v-button:active .v-button-caption, -.v-ie7 .black .v-button.v-pressed .v-button-caption { - background-image: url(img/black/right-pressed.png); /** sprite-ref: black-buttons; sprite-alignment: right */ -} - -/* - * Primary-style ---------------------------- - */ -.black div > .v-button-primary, -.v-ie7 .black .v-button-primary, -.black div > .v-button-primary.v-disabled, -.v-ie7 .black .v-button-primary.v-disabled { - background-image: url(img/black/primary-left.png); /** sprite-ref: black-buttons */ -} -.black div > .v-button-primary .v-button-caption, -.v-ie7 .black .v-button-primary .v-button-caption, -.black div > .v-button-primary.v-disabled .v-button-caption, -.v-ie7 .black .v-button-primary.v-disabled .v-button-caption { - background-image: url(img/black/primary-right.png); /** sprite-ref: black-buttons; sprite-alignment: right */ -} -.black .v-button-primary:focus { - background-image: url(img/black/primary-left-focus.png); /** sprite-ref: black-buttons */ -} -.black .v-button-primary:focus .v-button-caption { - background-image: url(img/black/primary-right-focus.png); /** sprite-ref: black-buttons; sprite-alignment: right */ - color: #eaf4fb; -} -.black .v-button-primary:active, -.v-ie7 .black .v-button-primary.v-pressed { - background-image: url(img/black/primary-left-pressed.png); /** sprite-ref: black-buttons */ -} -.black .v-button-primary:active .v-button-caption, -.v-ie7 .black .v-button-primary.v-pressed .v-button-caption { - background-image: url(img/black/primary-right-pressed.png); /** sprite-ref: black-buttons; sprite-alignment: right */ -} - -/* - * Small-style -------------------------- - */ -.black div > .v-button-small, -.v-ie7 .black .v-button-small, -.black div > .v-button-small.v-disabled, -.v-ie7 .black .v-button-small.v-disabled { - background-image: url(img/black/small-left.png); /** sprite-ref: black-buttons */ -} -.black div > .v-button-small .v-button-caption, -.v-ie7 .black .v-button-small .v-button-caption, -.black div > .v-button-small.v-disabled .v-button-caption, -.v-ie7 .black .v-button-small.v-disabled .v-button-caption { - background-image: url(img/black/small-right.png); /** sprite-ref: black-buttons; sprite-alignment: right */ -} -.black .v-button-small:focus { - background-image: url(img/black/small-left-focus.png); /** sprite-ref: black-buttons */ -} -.black .v-button-small:focus .v-button-caption { - background-image: url(img/black/small-right-focus.png); /** sprite-ref: black-buttons; sprite-alignment: right */ -} -.black .v-button-small:active, -.v-ie7 .black .v-button-small.v-pressed { - background-image: url(img/black/small-left-pressed.png); /** sprite-ref: black-buttons */ -} -.black .v-button-small:active .v-button-caption, -.v-ie7 .black .v-button-small.v-pressed .v-button-caption { - background-image: url(img/black/small-right-pressed.png); /** sprite-ref: black-buttons; sprite-alignment: right */ -} - - - - -/** - * Link style buttons ----------------------- - */ -div > .v-button.v-button-link, -div > .v-button.v-button-link:focus, -div > .v-button.v-button-link:active, -.v-ie7 .v-button-link, -.v-ie7 .v-button-link.v-pressed, -div > .v-button.v-button-link.v-disabled, -.v-ie7 .v-button-link.v-disabled { - background: transparent; - height: auto; - padding: 0; - cursor: pointer; -} -div > .v-button.v-button-link .v-button-caption, -div > .v-button.v-button-link:focus .v-button-caption, -div > .v-button.v-button-link:active .v-button-caption, -.v-ie7 .v-button-link .v-button-caption, -.v-ie7 .v-button-link.v-pressed .v-button-caption, -div > .v-button.v-button-link.v-disabled .v-button-caption, -.v-ie7 .v-button-link.v-disabled .v-button-caption { - background: transparent; - height: auto; - padding: 0; - display: inline; - font-weight: normal; - color: #1b699f; - font-size: 12px; - text-shadow: none; -} -.v-button.v-button-link .v-icon + .v-button-caption { - margin: 0; - padding: 0; -} -.v-button.v-button-link:focus { - outline: 1px dotted #1b699f; -} -div > .v-button-link .v-icon, -.v-ie7 .v-button-link .v-icon, -div > .v-disabled.v-button-link .v-icon, -.v-ie7 .v-disabled.v-button-link .v-icon { - position: static; - width: auto; -} - - - -/** - * IE6 buttons -------------------------- - */ -.v-ie6 .v-button { - border: 1px solid #b3b3b3; - border-bottom-color: #9a9a9a; - background: #d8d8d8 url(img/right.png) no-repeat 0 -1px; - padding: 3px 15px 2px 15px; - font-weight: bold; - font-size: 11px; - line-height: 16px; - height: 16px; - outline: none; - cursor: default; -} -.v-ie6 .v-button-primary { - background-image: url(img/primary-right.png); -} -.v-ie6 .v-button-small { - font-weight: normal; - padding: 1px 11px 0 11px; - height: 12px; - line-height: normal; - background-image: url(img/small-right.png); -} -.v-ie6 .v-button.v-pressed { - background: transparent url(img/right-pressed.png) no-repeat 0 -1px; -} -/* Buttons on blue background */ -.v-ie6 .blue .v-button { - border-color: #84949c; - border-top-color: #83939b; - border-bottom-color: #888d91; -} -/* Buttons on black background */ -.v-ie6 .black .v-button { - border: 1px solid #0d0e0f; - background: #202224 url(img/black/right.png) no-repeat 0 -1px; - color: #c9ccce; -} -.v-ie6 .black .v-button-primary { - background-image: url(img/black/primary-right.png); -} -.v-ie6 .black .v-button-small { - background-image: url(img/black/small-right.png); -} -.v-ie6 .black .v-button.v-pressed { - background-image: url(img/black/right-pressed.png); -} -/* Link button in IE6 */ -.v-ie6 .v-button-link { - border: none; - padding: 0; - background: transparent; - line-height: normal; - font-size: 12px; - font-weight: normal; -}
\ No newline at end of file diff --git a/WebContent/VAADIN/themes/reindeer/button/firefox.css b/WebContent/VAADIN/themes/reindeer/button/firefox.css new file mode 100644 index 0000000000..76393e637a --- /dev/null +++ b/WebContent/VAADIN/themes/reindeer/button/firefox.css @@ -0,0 +1,20 @@ +.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 diff --git a/WebContent/VAADIN/themes/reindeer/button/ie.css b/WebContent/VAADIN/themes/reindeer/button/ie.css new file mode 100644 index 0000000000..4aab3e0d5b --- /dev/null +++ b/WebContent/VAADIN/themes/reindeer/button/ie.css @@ -0,0 +1,79 @@ +.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 diff --git a/WebContent/VAADIN/themes/reindeer/button/img/black-button-sprites-ie6.png b/WebContent/VAADIN/themes/reindeer/button/img/black-button-sprites-ie6.png Binary files differindex 9f7f7c4659..90a73be23f 100644 --- a/WebContent/VAADIN/themes/reindeer/button/img/black-button-sprites-ie6.png +++ b/WebContent/VAADIN/themes/reindeer/button/img/black-button-sprites-ie6.png diff --git a/WebContent/VAADIN/themes/reindeer/button/img/black-button-sprites.png b/WebContent/VAADIN/themes/reindeer/button/img/black-button-sprites.png Binary files differindex 197b9b5d21..744ca30d64 100644 --- a/WebContent/VAADIN/themes/reindeer/button/img/black-button-sprites.png +++ b/WebContent/VAADIN/themes/reindeer/button/img/black-button-sprites.png diff --git a/WebContent/VAADIN/themes/reindeer/button/img/button-sprites-ie6.png b/WebContent/VAADIN/themes/reindeer/button/img/button-sprites-ie6.png Binary files differindex 87af82f1c9..8ccaa56edd 100644 --- a/WebContent/VAADIN/themes/reindeer/button/img/button-sprites-ie6.png +++ b/WebContent/VAADIN/themes/reindeer/button/img/button-sprites-ie6.png diff --git a/WebContent/VAADIN/themes/reindeer/button/img/button-sprites.png b/WebContent/VAADIN/themes/reindeer/button/img/button-sprites.png Binary files differindex c048e47b62..5087e8e957 100644 --- a/WebContent/VAADIN/themes/reindeer/button/img/button-sprites.png +++ b/WebContent/VAADIN/themes/reindeer/button/img/button-sprites.png diff --git a/WebContent/VAADIN/themes/reindeer/button/link-style.css b/WebContent/VAADIN/themes/reindeer/button/link-style.css new file mode 100644 index 0000000000..14530c8dff --- /dev/null +++ b/WebContent/VAADIN/themes/reindeer/button/link-style.css @@ -0,0 +1,30 @@ +.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 diff --git a/WebContent/VAADIN/themes/reindeer/button/opera.css b/WebContent/VAADIN/themes/reindeer/button/opera.css new file mode 100644 index 0000000000..c1e22c9258 --- /dev/null +++ b/WebContent/VAADIN/themes/reindeer/button/opera.css @@ -0,0 +1,8 @@ +/*.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 diff --git a/WebContent/VAADIN/themes/reindeer/button/primary-style.css b/WebContent/VAADIN/themes/reindeer/button/primary-style.css new file mode 100644 index 0000000000..fdfe90ce3a --- /dev/null +++ b/WebContent/VAADIN/themes/reindeer/button/primary-style.css @@ -0,0 +1,62 @@ +.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 */ + } diff --git a/WebContent/VAADIN/themes/reindeer/button/safari.css b/WebContent/VAADIN/themes/reindeer/button/safari.css new file mode 100644 index 0000000000..e32721d261 --- /dev/null +++ b/WebContent/VAADIN/themes/reindeer/button/safari.css @@ -0,0 +1,10 @@ +.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 diff --git a/WebContent/VAADIN/themes/reindeer/button/small-style.css b/WebContent/VAADIN/themes/reindeer/button/small-style.css new file mode 100644 index 0000000000..fa6b177624 --- /dev/null +++ b/WebContent/VAADIN/themes/reindeer/button/small-style.css @@ -0,0 +1,67 @@ +.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 diff --git a/WebContent/VAADIN/themes/reindeer/button/standard.css b/WebContent/VAADIN/themes/reindeer/button/standard.css new file mode 100644 index 0000000000..5510f82295 --- /dev/null +++ b/WebContent/VAADIN/themes/reindeer/button/standard.css @@ -0,0 +1,94 @@ +.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 diff --git a/WebContent/VAADIN/themes/reindeer/styles.css b/WebContent/VAADIN/themes/reindeer/styles.css index 81993989c0..78be75158f 100644 --- a/WebContent/VAADIN/themes/reindeer/styles.css +++ b/WebContent/VAADIN/themes/reindeer/styles.css @@ -1,12 +1,10 @@ /* Automatically compiled css file from subdirectories. */ -/* ./WebContent/VAADIN/themes/base/absolutelayout/absolutelayout.css */ .v-absolutelayout-wrapper { position: absolute; overflow: hidden; } -/* ./WebContent/VAADIN/themes/base/accordion/accordion.css */ .v-accordion { position: relative; outline: none; @@ -34,61 +32,142 @@ width: 100%; } -/* ./WebContent/VAADIN/themes/base/button/button.css */ +/* + * Default button (more customizable) + * -------------------------------------- */ .v-button { + display: inline-block; + zoom: 1; + text-align: center; + text-decoration: none; + border: 2px outset #ddd; + background: #eee; cursor: pointer; white-space: nowrap; margin: 0; + padding: .2em 1em; + color: inherit; + font: inherit; + line-height: normal; + -khtml-user-select: none; + -moz-user-select: none; + -ie-user-select: none; + user-select: none; + } + +.v-ie6 .v-button { + display: inline; } -.v-button span { - white-space: nowrap; -} -.v-checkbox input { + +.v-button-wrap, +.v-button-caption { vertical-align: middle; -} -.v-button img, -.v-checkbox img { - display: inline; + white-space: nowrap; + font: inherit; + color: inherit; + line-height: normal; + } + +.v-button .v-icon, +.v-nativebutton .v-icon { vertical-align: middle; margin-right: 3px; -} -.v-button span, -.v-checkbox label { + border: none; + } + +.v-button .v-errorindicator, +.v-nativebutton .v-errorindicator { + display: inline-block; + zoom: 1; vertical-align: middle; + float: none; } -.v-button-link { + +/* Link style (we really should deprecate this) */ +.v-button-link, +.v-nativebutton-link { border: none; text-align: left; - background: none; + background: transparent; padding: 0; -} + color: inherit; + } + /* Inset Safari focus outline a bit */ -.v-sa .v-button-link:focus { +.v-sa .v-button-link:focus{ outline-offset: -3px; -} -.v-button-link span { + } + +.v-button-link .v-button-caption, +.v-nativebutton-link .v-nativebutton-caption { text-decoration: underline; -} -.v-checkbox { - white-space: nowrap; -} -.v-checkbox .v-errorindicator { + color: inherit; + text-align: left; + } + + +/* + * NativeButton styles (html button element) + * -------------------------------------- */ +.v-nativebutton { + text-align: center; + cursor: pointer; + white-space: nowrap; + margin: 0; + color: inherit; + font: inherit; + line-height: normal; + } +.v-nativebutton .v-nativebutton-caption { + vertical-align: middle; + white-space: nowrap; + font: inherit; + color: inherit; + } + +.v-nativebutton .v-icon { + vertical-align: middle; + margin-right: 3px; + } + +.v-nativebutton .v-errorindicator { + display: inline-block; + zoom: 1; float: none; - display: inline; - padding-left: 1em; - background-position: left; } /* Fixes streched buttons in IE6 and IE7*/ -.v-ie6 .v-button { +.v-ie6 .v-nativebutton { width: 1px; } -.v-ie6 .v-button, -.v-ie7 .v-button, -.v-ie8 .v-button { +.v-ie6 .v-nativebutton, +.v-ie7 .v-nativebutton, +.v-ie8 .v-nativebutton { overflow: visible; padding-left: 1em; padding-right: 1em; } + +/* + * Checkbox styles + * -------------------------------------- */ + +.v-checkbox, +.v-checkbox label, +.v-checkbox input { + vertical-align: middle; + white-space: nowrap; +} +.v-checkbox img { + display: inline; + vertical-align: middle; + margin-right: 3px; +} +.v-checkbox .v-errorindicator { + float: none; + display: inline; + padding-left: 1em; + background-position: left; +} /* Error indicator on checkbox fix for IE6 */ .v-ie6 .v-checkbox * { float: left; @@ -113,13 +192,8 @@ padding-left: 0; padding-right: 0.7em; } -/* Error indicator on button fix for IE */ -.v-ie6 button .v-errorindicator, -.v-ie7 button .v-errorindicator, -.v-ie8 button .v-errorindicator { - display: inline; - padding-right: 0.5em; -} + + /* Disabled by default .v-checkbox-error { background: #ffe0e0; @@ -131,7 +205,6 @@ } */ -/* ./WebContent/VAADIN/themes/base/caption/caption.css */ .v-captionwrapper { text-align: left; /* Force default alignment */ } @@ -164,7 +237,6 @@ display: inline; } -/* ./WebContent/VAADIN/themes/base/common/common.css */ /* References the BODY tag generated by Vaadin application servlet */ .v-generated-body { width: 100%; @@ -370,17 +442,14 @@ div.v-app-loading { padding: 2px; } -/* ./WebContent/VAADIN/themes/base/customcomponent/customcomponent.css */ .v-customcomponent { overflow: hidden; } -/* ./WebContent/VAADIN/themes/base/customlayout/customlayout.css */ .v-customlayout { overflow: hidden; } -/* ./WebContent/VAADIN/themes/base/datefield/datefield.css */ .v-datefield { white-space: nowrap; } @@ -452,7 +521,6 @@ div.v-app-loading { filter: alpha(opacity=30); } -/* ./WebContent/VAADIN/themes/base/formlayout/formlayout.css */ .v-formlayout-cell .v-errorindicator { display: block; } @@ -497,7 +565,6 @@ div.v-app-loading { float: none; } -/* ./WebContent/VAADIN/themes/base/gridlayout/gridlayout.css */ .v-gridlayout-margin-top { padding-top: 2em; } @@ -529,7 +596,6 @@ div.v-app-loading { overflow: hidden; } -/* ./WebContent/VAADIN/themes/base/link/link.css */ .v-link { white-space: nowrap; } @@ -549,7 +615,6 @@ div.v-app-loading { border:none; } -/* ./WebContent/VAADIN/themes/base/menubar/menubar.css */ .v-menubar table { white-space: nowrap; border-collapse: collapse; @@ -588,7 +653,6 @@ div.v-app-loading { cursor: default; } -/* ./WebContent/VAADIN/themes/base/notification/notification.css */ .v-Notification { background: #999; color: #fff; @@ -631,7 +695,6 @@ div.v-app-loading { white-space: nowrap; } -/* ./WebContent/VAADIN/themes/base/orderedlayout/orderedlayout.css */ .v-orderedlayout-margin-top, .v-horizontallayout-margin-top, .v-verticallayout-margin-top { @@ -675,7 +738,6 @@ div.v-app-loading { overflow: hidden; } -/* ./WebContent/VAADIN/themes/base/panel/panel.css */ .v-panel, .v-panel-caption, .v-panel-content, @@ -712,7 +774,6 @@ div.v-app-loading { .v-panel-deco { } -/* ./WebContent/VAADIN/themes/base/popupview/popupview.css */ .v-popupview { cursor: pointer; background: #aaa; @@ -721,7 +782,6 @@ div.v-app-loading { overflow: auto; } -/* ./WebContent/VAADIN/themes/base/progressindicator/progressindicator.css */ .v-progressindicator { overflow: hidden; /* for IE6 */ width: 150px; @@ -759,7 +819,6 @@ div.v-progressindicator-indeterminate-disabled { background: transparent; } -/* ./WebContent/VAADIN/themes/base/select/select.css */ .v-select { text-align: left; } @@ -795,11 +854,9 @@ div.v-progressindicator-indeterminate-disabled { clear: left; } .v-select-twincol .v-button { - display: block; float: left; } .v-select-twincol-buttons .v-button { - display: inline; float: none; } .v-filterselect { @@ -895,7 +952,6 @@ div.v-progressindicator-indeterminate-disabled { } */ -/* ./WebContent/VAADIN/themes/base/shadow/shadow.css */ .v-shadow { position: absolute; } @@ -982,7 +1038,6 @@ div.v-progressindicator-indeterminate-disabled { margin-left: -4px; } -/* ./WebContent/VAADIN/themes/base/slider/slider.css */ .v-slider { margin: 5px 0; } @@ -1046,7 +1101,6 @@ div.v-progressindicator-indeterminate-disabled { margin: 0 -1px; } -/* ./WebContent/VAADIN/themes/base/splitpanel/splitpanel.css */ .v-splitpanel-horizontal, .v-splitpanel-vertical { overflow: hidden; @@ -1085,7 +1139,6 @@ div.v-progressindicator-indeterminate-disabled { position: relative; } -/* ./WebContent/VAADIN/themes/base/table/table.css */ /* Table theme building instructions * * Vaadin scroll table is very complex widget with dozens of features. These @@ -1236,7 +1289,6 @@ div.v-progressindicator-indeterminate-disabled { color: #ddd; } -/* ./WebContent/VAADIN/themes/base/tabsheet/tabsheet.css */ .v-tabsheet, .v-tabsheet-content, .v-tabsheet-deco { @@ -1326,7 +1378,6 @@ div.v-progressindicator-indeterminate-disabled { height: 0; } -/* ./WebContent/VAADIN/themes/base/textfield/textfield.css */ .v-textfield { text-align: left /* Force default alignment */ } @@ -1380,7 +1431,6 @@ textarea.v-textarea-prompt { outline-width: medium; } -/* ./WebContent/VAADIN/themes/base/tree/tree.css */ .v-tree { text-align: left; /* Force default alignment */ overflow: hidden; @@ -1436,7 +1486,6 @@ div.v-tree-node-leaf { clear: left; } -/* ./WebContent/VAADIN/themes/base/upload/upload.css */ .v-upload-immediate { position: relative; width: 10em; @@ -1462,7 +1511,6 @@ div.v-tree-node-leaf { } -/* ./WebContent/VAADIN/themes/base/window/window.css */ .v-window { background: #fff; } @@ -1621,7 +1669,6 @@ div.v-tree-node-leaf { } /* Automatically compiled css file from subdirectories. */ -/* ./WebContent/VAADIN/themes/reindeer/a-sprite-definitions/a-sprite-definitions.css */ /*------------ * General vertical and horizontal sprites * -----------*/ @@ -1631,7 +1678,6 @@ div.v-tree-node-leaf { * Buttons * -----------*/ -/* ./WebContent/VAADIN/themes/reindeer/accordion/accordion.css */ .v-accordion { border: 1px solid #bebebe; border-radius: 2px; @@ -1682,34 +1728,60 @@ div.v-tree-node-leaf { -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; @@ -1717,430 +1789,332 @@ div > .v-button.v-disabled .v-button-caption, 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 { - background-image: url(button/img/button-sprites.png); - -background-image: url(button/img/button-sprites-ie6.png); + } + + + + +/************************** + * 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; - outline: none; -} -.v-button:focus .v-button-caption { - background-image: url(button/img/button-sprites.png); - -background-image: url(button/img/button-sprites-ie6.png); + } + +.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; - outline: none; -} -.v-button:active, -.v-ie7 .v-button.v-pressed { - background-image: url(button/img/button-sprites.png); - -background-image: url(button/img/button-sprites-ie6.png); + } + +.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; - outline: none; -} -.v-button:active .v-button-caption, -.v-ie7 .v-button.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-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; - 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; -} + } + +.black .v-button-caption { + color: #c9ccce; + text-shadow: #121314 0 -1px 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 { +.v-button-primary:focus { 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 { + } + +.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 -182px; -} -.v-button-primary:focus { + } + +.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 -208px; -} -.v-button-primary:focus .v-button-caption { + } + +.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 -234px; -} -.v-button-primary:active, -.v-ie7 .v-button-primary.v-pressed { + } + +.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 -260px; -} -.v-button-primary:active .v-button-caption, -.v-ie7 .v-button-primary.v-pressed .v-button-caption { + } + +.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; -} -/* - * 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(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 { - 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 { - 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 { - 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 { - 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 { - background-image: url(button/img/button-sprites.png); - -background-image: url(button/img/button-sprites-ie6.png); - background-position: right -412px; -} + } + -/*------------ -* 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; -} -/* - * 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 { + +/* 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 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 { + } + +.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; -} -.black .v-button-primary:focus { + 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; -} -.black .v-button-primary:focus .v-button-caption { + } + +.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; - color: #eaf4fb; -} -.black .v-button-primary:active, -.v-ie7 .black .v-button-primary.v-pressed { + } + +.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; -} -.black .v-button-primary:active .v-button-caption, -.v-ie7 .black .v-button-primary.v-pressed .v-button-caption { + } + +.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 -------------------------- - */ -.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 { +.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; + } + +.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; + } + +.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: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, +.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; + 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; + } + +.v-button-small .v-button-caption { + font-weight: normal; + } + + + + +/* 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 -------------------------- */ @@ -2148,23 +2122,26 @@ div > .v-disabled.v-button-link .v-icon, 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; @@ -2190,17 +2167,52 @@ div > .v-disabled.v-button-link .v-icon, .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; +} + + + +/* + +.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; +} +*/ + -/* ./WebContent/VAADIN/themes/reindeer/common/common.css */ .v-generated-body, .v-app { background: #f5f5f5; @@ -2338,7 +2350,6 @@ div > .v-disabled.v-button-link .v-icon, cursor: default; } -/* ./WebContent/VAADIN/themes/reindeer/datefield/datefield.css */ .v-datefield-calendarpanel { border-collapse: collapse; margin: 0; @@ -2750,7 +2761,6 @@ td.v-datefield-calendarpanel-nextyear { background-position: right -294px; } -/* ./WebContent/VAADIN/themes/reindeer/formlayout/formlayout.css */ .v-formlayout-errorcell { width: 13px; } @@ -2809,7 +2819,6 @@ td.v-datefield-calendarpanel-nextyear { font-weight: bold; } -/* ./WebContent/VAADIN/themes/reindeer/label/label.css */ .v-label { line-height: 18px; } @@ -2885,7 +2894,6 @@ td.v-datefield-calendarpanel-nextyear { line-height: normal; } -/* ./WebContent/VAADIN/themes/reindeer/layouts/layouts.css */ .v-orderedlayout-margin-top, .v-horizontallayout-margin-top, .v-verticallayout-margin-top { @@ -2931,7 +2939,6 @@ td.v-datefield-calendarpanel-nextyear { background-color: #1e2022; } -/* ./WebContent/VAADIN/themes/reindeer/menubar/menubar.css */ .v-menubar { height: 23px; overflow: hidden; @@ -2987,7 +2994,6 @@ td.v-datefield-calendarpanel-nextyear { margin-top: -14px; } -/* ./WebContent/VAADIN/themes/reindeer/notification/notification.css */ .v-Notification { color: #fff; border-radius: 4px; @@ -3013,7 +3019,6 @@ td.v-datefield-calendarpanel-nextyear { font-size: 12px; } -/* ./WebContent/VAADIN/themes/reindeer/panel/panel.css */ .v-panel-caption, .v-panel-nocaption { border-bottom: 1px solid #dcdcdc; @@ -3091,7 +3096,6 @@ td.v-datefield-calendarpanel-nextyear { 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; @@ -3103,7 +3107,6 @@ td.v-datefield-calendarpanel-nextyear { background: #f7f9f9 url(progressindicator/img/progress.png); } -/* ./WebContent/VAADIN/themes/reindeer/select/select.css */ .v-filterselect { height: 24px; background-repeat: no-repeat; @@ -3449,7 +3452,6 @@ td.v-datefield-calendarpanel-nextyear { overflow: hidden; } -/* ./WebContent/VAADIN/themes/reindeer/slider/slider.css */ .v-slider { border-top: 1px solid #9a9c9e; border-bottom: 1px solid #bdbfc1; @@ -3496,7 +3498,6 @@ td.v-datefield-calendarpanel-nextyear { margin-left: -5px; } -/* ./WebContent/VAADIN/themes/reindeer/splitpanel/splitpanel.css */ .v-splitpanel-hsplitter, .v-splitpanel-hsplitter-locked { width: 7px; @@ -3564,7 +3565,6 @@ td.v-datefield-calendarpanel-nextyear { background: #4e5253; } -/* ./WebContent/VAADIN/themes/reindeer/table/table.css */ .v-table-header-wrap { border-color: #c2c3c4; background: transparent repeat-x; @@ -3862,7 +3862,6 @@ td.v-datefield-calendarpanel-nextyear { border: none; } -/* ./WebContent/VAADIN/themes/reindeer/tabsheet/tabsheet.css */ .v-tabsheet-tabitemcell, .v-tabsheet-spacertd { height: 32px; @@ -4235,7 +4234,6 @@ td.v-datefield-calendarpanel-nextyear { } /* 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; @@ -4381,7 +4379,6 @@ input.v-textfield-readonly, 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; @@ -4426,7 +4423,6 @@ input.v-textfield-readonly, padding: 1px; } -/* ./WebContent/VAADIN/themes/reindeer/window/window.css */ .v-window { background: transparent; } diff --git a/WebContent/VAADIN/themes/runo/styles.css b/WebContent/VAADIN/themes/runo/styles.css index 265fdfb387..0dffa94902 100644 --- a/WebContent/VAADIN/themes/runo/styles.css +++ b/WebContent/VAADIN/themes/runo/styles.css @@ -1,12 +1,10 @@ /* Automatically compiled css file from subdirectories. */ -/* ./WebContent/VAADIN/themes/base/absolutelayout/absolutelayout.css */ .v-absolutelayout-wrapper { position: absolute; overflow: hidden; } -/* ./WebContent/VAADIN/themes/base/accordion/accordion.css */ .v-accordion { position: relative; outline: none; @@ -34,61 +32,142 @@ width: 100%; } -/* ./WebContent/VAADIN/themes/base/button/button.css */ +/* + * Default button (more customizable) + * -------------------------------------- */ .v-button { + display: inline-block; + zoom: 1; + text-align: center; + text-decoration: none; + border: 2px outset #ddd; + background: #eee; cursor: pointer; white-space: nowrap; margin: 0; + padding: .2em 1em; + color: inherit; + font: inherit; + line-height: normal; + -khtml-user-select: none; + -moz-user-select: none; + -ie-user-select: none; + user-select: none; + } + +.v-ie6 .v-button { + display: inline; } -.v-button span { - white-space: nowrap; -} -.v-checkbox input { + +.v-button-wrap, +.v-button-caption { vertical-align: middle; -} -.v-button img, -.v-checkbox img { - display: inline; + white-space: nowrap; + font: inherit; + color: inherit; + line-height: normal; + } + +.v-button .v-icon, +.v-nativebutton .v-icon { vertical-align: middle; margin-right: 3px; -} -.v-button span, -.v-checkbox label { + border: none; + } + +.v-button .v-errorindicator, +.v-nativebutton .v-errorindicator { + display: inline-block; + zoom: 1; vertical-align: middle; + float: none; } -.v-button-link { + +/* Link style (we really should deprecate this) */ +.v-button-link, +.v-nativebutton-link { border: none; text-align: left; - background: none; + background: transparent; padding: 0; -} + color: inherit; + } + /* Inset Safari focus outline a bit */ -.v-sa .v-button-link:focus { +.v-sa .v-button-link:focus{ outline-offset: -3px; -} -.v-button-link span { + } + +.v-button-link .v-button-caption, +.v-nativebutton-link .v-nativebutton-caption { text-decoration: underline; -} -.v-checkbox { - white-space: nowrap; -} -.v-checkbox .v-errorindicator { + color: inherit; + text-align: left; + } + + +/* + * NativeButton styles (html button element) + * -------------------------------------- */ +.v-nativebutton { + text-align: center; + cursor: pointer; + white-space: nowrap; + margin: 0; + color: inherit; + font: inherit; + line-height: normal; + } +.v-nativebutton .v-nativebutton-caption { + vertical-align: middle; + white-space: nowrap; + font: inherit; + color: inherit; + } + +.v-nativebutton .v-icon { + vertical-align: middle; + margin-right: 3px; + } + +.v-nativebutton .v-errorindicator { + display: inline-block; + zoom: 1; float: none; - display: inline; - padding-left: 1em; - background-position: left; } /* Fixes streched buttons in IE6 and IE7*/ -.v-ie6 .v-button { +.v-ie6 .v-nativebutton { width: 1px; } -.v-ie6 .v-button, -.v-ie7 .v-button, -.v-ie8 .v-button { +.v-ie6 .v-nativebutton, +.v-ie7 .v-nativebutton, +.v-ie8 .v-nativebutton { overflow: visible; padding-left: 1em; padding-right: 1em; } + +/* + * Checkbox styles + * -------------------------------------- */ + +.v-checkbox, +.v-checkbox label, +.v-checkbox input { + vertical-align: middle; + white-space: nowrap; +} +.v-checkbox img { + display: inline; + vertical-align: middle; + margin-right: 3px; +} +.v-checkbox .v-errorindicator { + float: none; + display: inline; + padding-left: 1em; + background-position: left; +} /* Error indicator on checkbox fix for IE6 */ .v-ie6 .v-checkbox * { float: left; @@ -113,13 +192,8 @@ padding-left: 0; padding-right: 0.7em; } -/* Error indicator on button fix for IE */ -.v-ie6 button .v-errorindicator, -.v-ie7 button .v-errorindicator, -.v-ie8 button .v-errorindicator { - display: inline; - padding-right: 0.5em; -} + + /* Disabled by default .v-checkbox-error { background: #ffe0e0; @@ -131,7 +205,6 @@ } */ -/* ./WebContent/VAADIN/themes/base/caption/caption.css */ .v-captionwrapper { text-align: left; /* Force default alignment */ } @@ -164,7 +237,6 @@ display: inline; } -/* ./WebContent/VAADIN/themes/base/common/common.css */ /* References the BODY tag generated by Vaadin application servlet */ .v-generated-body { width: 100%; @@ -370,17 +442,14 @@ div.v-app-loading { padding: 2px; } -/* ./WebContent/VAADIN/themes/base/customcomponent/customcomponent.css */ .v-customcomponent { overflow: hidden; } -/* ./WebContent/VAADIN/themes/base/customlayout/customlayout.css */ .v-customlayout { overflow: hidden; } -/* ./WebContent/VAADIN/themes/base/datefield/datefield.css */ .v-datefield { white-space: nowrap; } @@ -452,7 +521,6 @@ div.v-app-loading { filter: alpha(opacity=30); } -/* ./WebContent/VAADIN/themes/base/formlayout/formlayout.css */ .v-formlayout-cell .v-errorindicator { display: block; } @@ -497,7 +565,6 @@ div.v-app-loading { float: none; } -/* ./WebContent/VAADIN/themes/base/gridlayout/gridlayout.css */ .v-gridlayout-margin-top { padding-top: 2em; } @@ -529,7 +596,6 @@ div.v-app-loading { overflow: hidden; } -/* ./WebContent/VAADIN/themes/base/link/link.css */ .v-link { white-space: nowrap; } @@ -549,7 +615,6 @@ div.v-app-loading { border:none; } -/* ./WebContent/VAADIN/themes/base/menubar/menubar.css */ .v-menubar table { white-space: nowrap; border-collapse: collapse; @@ -588,7 +653,6 @@ div.v-app-loading { cursor: default; } -/* ./WebContent/VAADIN/themes/base/notification/notification.css */ .v-Notification { background: #999; color: #fff; @@ -631,7 +695,6 @@ div.v-app-loading { white-space: nowrap; } -/* ./WebContent/VAADIN/themes/base/orderedlayout/orderedlayout.css */ .v-orderedlayout-margin-top, .v-horizontallayout-margin-top, .v-verticallayout-margin-top { @@ -675,7 +738,6 @@ div.v-app-loading { overflow: hidden; } -/* ./WebContent/VAADIN/themes/base/panel/panel.css */ .v-panel, .v-panel-caption, .v-panel-content, @@ -712,7 +774,6 @@ div.v-app-loading { .v-panel-deco { } -/* ./WebContent/VAADIN/themes/base/popupview/popupview.css */ .v-popupview { cursor: pointer; background: #aaa; @@ -721,7 +782,6 @@ div.v-app-loading { overflow: auto; } -/* ./WebContent/VAADIN/themes/base/progressindicator/progressindicator.css */ .v-progressindicator { overflow: hidden; /* for IE6 */ width: 150px; @@ -759,7 +819,6 @@ div.v-progressindicator-indeterminate-disabled { background: transparent; } -/* ./WebContent/VAADIN/themes/base/select/select.css */ .v-select { text-align: left; } @@ -795,11 +854,9 @@ div.v-progressindicator-indeterminate-disabled { clear: left; } .v-select-twincol .v-button { - display: block; float: left; } .v-select-twincol-buttons .v-button { - display: inline; float: none; } .v-filterselect { @@ -895,7 +952,6 @@ div.v-progressindicator-indeterminate-disabled { } */ -/* ./WebContent/VAADIN/themes/base/shadow/shadow.css */ .v-shadow { position: absolute; } @@ -982,7 +1038,6 @@ div.v-progressindicator-indeterminate-disabled { margin-left: -4px; } -/* ./WebContent/VAADIN/themes/base/slider/slider.css */ .v-slider { margin: 5px 0; } @@ -1046,7 +1101,6 @@ div.v-progressindicator-indeterminate-disabled { margin: 0 -1px; } -/* ./WebContent/VAADIN/themes/base/splitpanel/splitpanel.css */ .v-splitpanel-horizontal, .v-splitpanel-vertical { overflow: hidden; @@ -1085,7 +1139,6 @@ div.v-progressindicator-indeterminate-disabled { position: relative; } -/* ./WebContent/VAADIN/themes/base/table/table.css */ /* Table theme building instructions * * Vaadin scroll table is very complex widget with dozens of features. These @@ -1236,7 +1289,6 @@ div.v-progressindicator-indeterminate-disabled { color: #ddd; } -/* ./WebContent/VAADIN/themes/base/tabsheet/tabsheet.css */ .v-tabsheet, .v-tabsheet-content, .v-tabsheet-deco { @@ -1326,7 +1378,6 @@ div.v-progressindicator-indeterminate-disabled { height: 0; } -/* ./WebContent/VAADIN/themes/base/textfield/textfield.css */ .v-textfield { text-align: left /* Force default alignment */ } @@ -1380,7 +1431,6 @@ textarea.v-textarea-prompt { outline-width: medium; } -/* ./WebContent/VAADIN/themes/base/tree/tree.css */ .v-tree { text-align: left; /* Force default alignment */ overflow: hidden; @@ -1436,7 +1486,6 @@ div.v-tree-node-leaf { clear: left; } -/* ./WebContent/VAADIN/themes/base/upload/upload.css */ .v-upload-immediate { position: relative; width: 10em; @@ -1462,7 +1511,6 @@ div.v-tree-node-leaf { } -/* ./WebContent/VAADIN/themes/base/window/window.css */ .v-window { background: #fff; } @@ -1621,13 +1669,11 @@ div.v-tree-node-leaf { } /* 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; } @@ -1650,7 +1696,6 @@ div.v-tree-node-leaf { border-bottom: 1px solid #c8cccd; } -/* ./WebContent/VAADIN/themes/runo/button/button.css */ .v-button { font-size: 13px; } @@ -1673,7 +1718,6 @@ div.v-tree-node-leaf { padding-right: 5px; } -/* ./WebContent/VAADIN/themes/runo/caption/caption.css */ .v-captionwrapper { margin: 0.3em 0 0 0; } @@ -1690,7 +1734,6 @@ div.v-tree-node-leaf { margin-left: -3px; } -/* ./WebContent/VAADIN/themes/runo/common/common.css */ .v-generated-body { background: #e9eced; } @@ -1788,7 +1831,6 @@ div.v-tree-node-leaf { margin-right: 10px; } -/* ./WebContent/VAADIN/themes/runo/datefield/datefield.css */ .v-datefield-button { font-size:13px; width: 22px; @@ -1926,7 +1968,6 @@ div.v-tree-node-leaf { margin: 0; } -/* ./WebContent/VAADIN/themes/runo/formlayout/formlayout.css */ .v-formlayout-cell .v-errorindicator { width: 10px; height: 16px; @@ -1978,7 +2019,6 @@ div.v-tree-node-leaf { font-weight: bold; } -/* ./WebContent/VAADIN/themes/runo/gridlayout/gridlayout.css */ .v-gridlayout-margin-top { padding-top: 15px; } @@ -1996,12 +2036,10 @@ div.v-tree-node-leaf { 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; @@ -2035,7 +2073,6 @@ div.v-tree-node-leaf { 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; @@ -2112,7 +2149,6 @@ div.v-tree-node-leaf { white-space: nowrap; } -/* ./WebContent/VAADIN/themes/runo/orderedlayout/orderedlayout.css */ .v-orderedlayout-margin-top, .v-horizontallayout-margin-top, .v-verticallayout-margin-top { @@ -2140,7 +2176,6 @@ div.v-tree-node-leaf { padding-left: 8px; } -/* ./WebContent/VAADIN/themes/runo/panel/panel.css */ .v-panel { background: transparent url(panel/img/top-left.png) no-repeat; } @@ -2241,7 +2276,6 @@ div.v-tree-node-leaf { overflow: hidden; } -/* ./WebContent/VAADIN/themes/runo/popupview/popupview.css */ .v-popupview-popup { border: 1px solid #babfc0; border-bottom: 1px solid #dee2e3; @@ -2249,7 +2283,6 @@ div.v-tree-node-leaf { 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; @@ -2270,7 +2303,6 @@ div.v-tree-node-leaf { background: #dfe2e4; } -/* ./WebContent/VAADIN/themes/runo/select/select.css */ .v-select-select { font-size: 13px; } @@ -2433,7 +2465,6 @@ div.v-tree-node-leaf { } */ -/* ./WebContent/VAADIN/themes/runo/shadow/shadow.css */ .v-shadow { position: absolute; } @@ -2503,7 +2534,6 @@ div.v-tree-node-leaf { 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; @@ -2588,7 +2618,6 @@ div.v-tree-node-leaf { margin: 0 -1px; } -/* ./WebContent/VAADIN/themes/runo/splitpanel/splitpanel.css */ .v-splitpanel-horizontal, .v-splitpanel-vertical { overflow: hidden; } @@ -2643,7 +2672,6 @@ div.v-tree-node-leaf { } -/* ./WebContent/VAADIN/themes/runo/table/table.css */ .v-table-header-wrap { height: 36px; border: 1px solid #b6bbbc; @@ -2786,7 +2814,6 @@ div.v-tree-node-leaf { 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; } @@ -3057,7 +3084,6 @@ div.v-tree-node-leaf { height: 0; } -/* ./WebContent/VAADIN/themes/runo/textfield/textfield.css */ .v-textfield { background: #fff url(textfield/img/bg.png) repeat-x; padding: 2px; @@ -3095,7 +3121,6 @@ textarea.v-textarea-prompt { 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; } @@ -3123,7 +3148,6 @@ textarea.v-textarea-prompt { padding: 1px; } -/* ./WebContent/VAADIN/themes/runo/window/window.css */ .v-window { color: #464f52; font-family: "Trebuchet MS", geneva, helvetica, arial, tahoma, verdana, sans-serif; diff --git a/WebContent/VAADIN/themes/sampler/sampler/styles.css b/WebContent/VAADIN/themes/sampler/sampler/styles.css index f675875c5d..63c0c264d5 100644 --- a/WebContent/VAADIN/themes/sampler/sampler/styles.css +++ b/WebContent/VAADIN/themes/sampler/sampler/styles.css @@ -111,14 +111,14 @@ text-decoration: none; } -.v-app-SamplerApplication .v-horizontallayout-topbar .v-button-link span { +.v-app-SamplerApplication .v-horizontallayout-topbar .v-nativebutton-link span { text-decoration: none; } -.v-app-SamplerApplication .v-horizontallayout-topbar .v-button-link:hover span { +.v-app-SamplerApplication .v-horizontallayout-topbar .v-nativebutton-link:hover span { text-decoration: underline; } -.v-app-SamplerApplication .v-horizontallayout-segment .v-button, -.v-app-SamplerApplication .v-horizontallayout-segment .v-button.v-disabled, +.v-app-SamplerApplication .v-horizontallayout-segment .v-nativebutton, +.v-app-SamplerApplication .v-horizontallayout-segment .v-nativebutton.v-disabled, .v-app-SamplerApplication .v-horizontallayout-segment .v-popupview { width: 30px; height: 24px; @@ -128,50 +128,50 @@ background: transparent url(segment.png) no-repeat; cursor: default; } -.v-app-SamplerApplication .v-horizontallayout-segment .v-button:active, -.v-app-SamplerApplication .v-horizontallayout-segment .v-button.v-pressed, +.v-app-SamplerApplication .v-horizontallayout-segment .v-nativebutton:active, +.v-app-SamplerApplication .v-horizontallayout-segment .v-nativebutton.v-pressed, .v-app-SamplerApplication .v-horizontallayout-segment .v-popupview:active { background-position: left bottom; } -.v-app-SamplerApplication .v-horizontallayout-segment .v-button-next, -.v-app-SamplerApplication .v-horizontallayout-segment .v-button-tree-switch { +.v-app-SamplerApplication .v-horizontallayout-segment .v-nativebutton-next, +.v-app-SamplerApplication .v-horizontallayout-segment .v-nativebutton-tree-switch { background-position: right top; } -.v-app-SamplerApplication .v-horizontallayout-segment .v-button-next:active, -.v-app-SamplerApplication .v-horizontallayout-segment .v-button-next.v-pressed, -.v-app-SamplerApplication .v-horizontallayout-segment .v-button-next.v-disabled, -.v-app-SamplerApplication .v-horizontallayout-segment .v-button-tree-switch:active, -.v-app-SamplerApplication .v-horizontallayout-segment .v-button-tree-switch.v-pressed { +.v-app-SamplerApplication .v-horizontallayout-segment .v-nativebutton-next:active, +.v-app-SamplerApplication .v-horizontallayout-segment .v-nativebutton-next.v-pressed, +.v-app-SamplerApplication .v-horizontallayout-segment .v-nativebutton-next.v-disabled, +.v-app-SamplerApplication .v-horizontallayout-segment .v-nativebutton-tree-switch:active, +.v-app-SamplerApplication .v-horizontallayout-segment .v-nativebutton-tree-switch.v-pressed { background-position: right bottom; } -.v-app-SamplerApplication .v-horizontallayout-segment .v-button-down { +.v-app-SamplerApplication .v-horizontallayout-segment .v-nativebutton-down { background-position: right bottom; } -.v-app-SamplerApplication .v-horizontallayout-segment .v-button span, +.v-app-SamplerApplication .v-horizontallayout-segment .v-nativebutton span, .v-app-SamplerApplication .v-horizontallayout-segment .v-popupview span, -.v-app-SamplerApplication .v-horizontallayout-segment .v-button.v-pressed span, -.v-app-SamplerApplication .v-horizontallayout-segment .v-button.v-disabled span { +.v-app-SamplerApplication .v-horizontallayout-segment .v-nativebutton.v-pressed span, +.v-app-SamplerApplication .v-horizontallayout-segment .v-nativebutton.v-disabled span { display: block; height: 24px; background-repeat: no-repeat; background-position: 50% 30%; } -.v-app-SamplerApplication .v-horizontallayout-segment .v-button-tree-switch span, -.v-app-SamplerApplication .v-horizontallayout-segment .v-button-tree-switch.v-pressed span { +.v-app-SamplerApplication .v-horizontallayout-segment .v-nativebutton-tree-switch span, +.v-app-SamplerApplication .v-horizontallayout-segment .v-nativebutton-tree-switch.v-pressed span { background-image: url(tree.png); } .v-app-SamplerApplication .v-horizontallayout-segment .v-popupview span { background-image: url(magnifier.png); background-position: 50% 40%; } -.v-app-SamplerApplication .v-horizontallayout-segment .v-button-previous span, -.v-app-SamplerApplication .v-horizontallayout-segment .v-button-previous.v-pressed span, -.v-app-SamplerApplication .v-horizontallayout-segment .v-button-previous.v-disabled span { +.v-app-SamplerApplication .v-horizontallayout-segment .v-nativebutton-previous span, +.v-app-SamplerApplication .v-horizontallayout-segment .v-nativebutton-previous.v-pressed span, +.v-app-SamplerApplication .v-horizontallayout-segment .v-nativebutton-previous.v-disabled span { background-image: url(prev.png); } -.v-app-SamplerApplication .v-horizontallayout-segment .v-button-next span, -.v-app-SamplerApplication .v-horizontallayout-segment .v-button-next.v-pressed span, -.v-app-SamplerApplication .v-horizontallayout-segment .v-button-next.v-disabled span { +.v-app-SamplerApplication .v-horizontallayout-segment .v-nativebutton-next span, +.v-app-SamplerApplication .v-horizontallayout-segment .v-nativebutton-next.v-pressed span, +.v-app-SamplerApplication .v-horizontallayout-segment .v-nativebutton-next.v-disabled span { background-image: url(next.png); } .v-popupview-popup-quickjump { @@ -237,16 +237,16 @@ text-indent: 15px; padding-right: 20px; } -.v-app-SamplerApplication .v-button-screenshot { +.v-app-SamplerApplication .v-nativebutton-screenshot { border: 3px solid #ccc; -moz-border-radius: 5px; -webkit-border-radius: 5px; overflow: hidden; } -.v-app-SamplerApplication .v-button-screenshot:hover { +.v-app-SamplerApplication .v-nativebutton-screenshot:hover { border-color: #abc; } -.v-app-SamplerApplication .v-button-screenshot img.v-icon { +.v-app-SamplerApplication .v-nativebutton-screenshot img.v-icon { margin: 0; margin-top: -2px; margin-left: -3px; @@ -257,7 +257,7 @@ overflow: hidden; position: static; } -.v-ie .v-app-SamplerApplication .v-button-screenshot img.v-icon { +.v-ie .v-app-SamplerApplication .v-nativebutton-screenshot img.v-icon { margin-left: -12px; } @@ -453,9 +453,9 @@ .v-app-SamplerApplication .v-link-showcode { margin-left: 3px; } -.v-app-SamplerApplication div > .v-button-showcode, -.v-app-SamplerApplication div > .v-button-showcode:active, -.v-app-SamplerApplication div > .v-button-showcode:focus, +.v-app-SamplerApplication div > .v-nativebutton-showcode, +.v-app-SamplerApplication div > .v-nativebutton-showcode:active, +.v-app-SamplerApplication div > .v-nativebutton-showcode:focus, .v-app-SamplerApplication .v-link-showcode { font-family: arial, helvetica, verdana, sans-serif; display: inline; @@ -464,17 +464,17 @@ height: 20px; margin-right: 3px; } -.v-sa .v-app-SamplerApplication .v-button-showcode, +.v-sa .v-app-SamplerApplication .v-nativebutton-showcode, .v-sa .v-app-SamplerApplication .v-link-showcode { font-family: helvetica, arial, verdana, sans-serif; } -.v-app-SamplerApplication div > .v-button-showcode.v-button-link span, +.v-app-SamplerApplication div > .v-nativebutton-showcode.v-nativebutton-link span, .v-app-SamplerApplication .v-link-showcode span { color: #8b8e91; text-decoration: none; } -.v-app-SamplerApplication div > .v-button-showcode:hover span, -.v-app-SamplerApplication div > .v-button-showcode:active span, +.v-app-SamplerApplication div > .v-nativebutton-showcode:hover span, +.v-app-SamplerApplication div > .v-nativebutton-showcode:active span, .v-app-SamplerApplication .v-link-showcode:hover span { color: #62696f; text-decoration: underline; @@ -484,7 +484,7 @@ background: #fff; } -.v-app .v-customcomponent-ModeSwitch button.v-button { +.v-app .v-customcomponent-ModeSwitch button.v-nativebutton { height: 24px; width: 30px; border: none; @@ -492,35 +492,35 @@ cursor: default; padding: 0; } -.v-app .v-customcomponent-ModeSwitch button.v-button span.v-button-caption { +.v-app .v-customcomponent-ModeSwitch button.v-nativebutton span.v-nativebutton-caption { display: none; } -.v-app .v-customcomponent-ModeSwitch button.v-button img.v-icon { +.v-app .v-customcomponent-ModeSwitch button.v-nativebutton img.v-icon { width: auto; height: auto; margin: 0; position: static; } -.v-app .v-customcomponent-ModeSwitch button.v-button-first-on, -.v-app .v-customcomponent-ModeSwitch button.v-button-first:active, -.v-app .v-customcomponent-ModeSwitch button.v-button-first.v-pressed { +.v-app .v-customcomponent-ModeSwitch button.v-nativebutton-first-on, +.v-app .v-customcomponent-ModeSwitch button.v-nativebutton-first:active, +.v-app .v-customcomponent-ModeSwitch button.v-nativebutton-first.v-pressed { background-position: left bottom; } -.v-app .v-customcomponent-ModeSwitch button.v-button-first { +.v-app .v-customcomponent-ModeSwitch button.v-nativebutton-first { background-position: left top; } /* -.v-customcomponent-ModeSwitch .v-button-mid-on { +.v-customcomponent-ModeSwitch .v-nativebutton-mid-on { background: transparent url(mid-on.gif) no-repeat; } -.v-customcomponent-ModeSwitch .v-button-mid { +.v-customcomponent-ModeSwitch .v-nativebutton-mid { background: transparent url(mid.gif) no-repeat; }*/ -.v-app .v-customcomponent-ModeSwitch button.v-button-last-on, -.v-app .v-customcomponent-ModeSwitch button.v-button-last:active, -.v-app .v-customcomponent-ModeSwitch button.v-button-last.v-pressed { +.v-app .v-customcomponent-ModeSwitch button.v-nativebutton-last-on, +.v-app .v-customcomponent-ModeSwitch button.v-nativebutton-last:active, +.v-app .v-customcomponent-ModeSwitch button.v-nativebutton-last.v-pressed { background-position: right bottom; } -.v-app .v-customcomponent-ModeSwitch button.v-button-last { +.v-app .v-customcomponent-ModeSwitch button.v-nativebutton-last { background-position: right top; } |
