diff options
author | Jouni Koivuviita <jouni.koivuviita@itmill.com> | 2009-11-12 08:44:03 +0000 |
---|---|---|
committer | Jouni Koivuviita <jouni.koivuviita@itmill.com> | 2009-11-12 08:44:03 +0000 |
commit | 42a83baa7af1d2d5b9c739d1e6ce81e5608bdf9e (patch) | |
tree | 4badfc58c4c8899fa26ad7d55826c331c5d6f7f9 /WebContent/VAADIN/themes/reindeer/tabsheet | |
parent | 8af77e9683e7411481c39d8e67ccfbee79ccf208 (diff) | |
download | vaadin-framework-42a83baa7af1d2d5b9c739d1e6ce81e5608bdf9e.tar.gz vaadin-framework-42a83baa7af1d2d5b9c739d1e6ce81e5608bdf9e.zip |
Fixes #1595: Close button on TabSheet control
* Added new sample to Sampler/TabSheets
* Made all tabs in Reindeer theme demo closable.
svn changeset:9737/svn branch:6.2
Diffstat (limited to 'WebContent/VAADIN/themes/reindeer/tabsheet')
-rw-r--r-- | WebContent/VAADIN/themes/reindeer/tabsheet/img/close-btn-hover.png | bin | 0 -> 495 bytes | |||
-rw-r--r-- | WebContent/VAADIN/themes/reindeer/tabsheet/img/close-btn-pressed.png | bin | 0 -> 520 bytes | |||
-rw-r--r-- | WebContent/VAADIN/themes/reindeer/tabsheet/img/close-btn-sel-hover.png | bin | 0 -> 909 bytes | |||
-rw-r--r-- | WebContent/VAADIN/themes/reindeer/tabsheet/img/close-btn-sel-pressed.png | bin | 0 -> 952 bytes | |||
-rw-r--r-- | WebContent/VAADIN/themes/reindeer/tabsheet/img/close-btn-sel.png | bin | 0 -> 636 bytes | |||
-rw-r--r-- | WebContent/VAADIN/themes/reindeer/tabsheet/img/close-btn.png | bin | 0 -> 339 bytes | |||
-rw-r--r-- | WebContent/VAADIN/themes/reindeer/tabsheet/tabsheet-bar-style.css | 108 | ||||
-rw-r--r-- | WebContent/VAADIN/themes/reindeer/tabsheet/tabsheet-minimal-style.css | 135 | ||||
-rw-r--r-- | WebContent/VAADIN/themes/reindeer/tabsheet/tabsheet-normal-style.css | 160 | ||||
-rw-r--r-- | WebContent/VAADIN/themes/reindeer/tabsheet/tabsheet-scroller.css | 52 | ||||
-rw-r--r-- | WebContent/VAADIN/themes/reindeer/tabsheet/tabsheet.css | 330 |
11 files changed, 460 insertions, 325 deletions
diff --git a/WebContent/VAADIN/themes/reindeer/tabsheet/img/close-btn-hover.png b/WebContent/VAADIN/themes/reindeer/tabsheet/img/close-btn-hover.png Binary files differnew file mode 100644 index 0000000000..f548db838a --- /dev/null +++ b/WebContent/VAADIN/themes/reindeer/tabsheet/img/close-btn-hover.png diff --git a/WebContent/VAADIN/themes/reindeer/tabsheet/img/close-btn-pressed.png b/WebContent/VAADIN/themes/reindeer/tabsheet/img/close-btn-pressed.png Binary files differnew file mode 100644 index 0000000000..a39a4431b3 --- /dev/null +++ b/WebContent/VAADIN/themes/reindeer/tabsheet/img/close-btn-pressed.png diff --git a/WebContent/VAADIN/themes/reindeer/tabsheet/img/close-btn-sel-hover.png b/WebContent/VAADIN/themes/reindeer/tabsheet/img/close-btn-sel-hover.png Binary files differnew file mode 100644 index 0000000000..31a0d1f3f5 --- /dev/null +++ b/WebContent/VAADIN/themes/reindeer/tabsheet/img/close-btn-sel-hover.png diff --git a/WebContent/VAADIN/themes/reindeer/tabsheet/img/close-btn-sel-pressed.png b/WebContent/VAADIN/themes/reindeer/tabsheet/img/close-btn-sel-pressed.png Binary files differnew file mode 100644 index 0000000000..9aae58c427 --- /dev/null +++ b/WebContent/VAADIN/themes/reindeer/tabsheet/img/close-btn-sel-pressed.png diff --git a/WebContent/VAADIN/themes/reindeer/tabsheet/img/close-btn-sel.png b/WebContent/VAADIN/themes/reindeer/tabsheet/img/close-btn-sel.png Binary files differnew file mode 100644 index 0000000000..e0cd398707 --- /dev/null +++ b/WebContent/VAADIN/themes/reindeer/tabsheet/img/close-btn-sel.png diff --git a/WebContent/VAADIN/themes/reindeer/tabsheet/img/close-btn.png b/WebContent/VAADIN/themes/reindeer/tabsheet/img/close-btn.png Binary files differnew file mode 100644 index 0000000000..9407f7b82c --- /dev/null +++ b/WebContent/VAADIN/themes/reindeer/tabsheet/img/close-btn.png diff --git a/WebContent/VAADIN/themes/reindeer/tabsheet/tabsheet-bar-style.css b/WebContent/VAADIN/themes/reindeer/tabsheet/tabsheet-bar-style.css new file mode 100644 index 0000000000..ec985ad993 --- /dev/null +++ b/WebContent/VAADIN/themes/reindeer/tabsheet/tabsheet-bar-style.css @@ -0,0 +1,108 @@ +/** + * Tabsheet bar style --------------- + */ +.v-tabsheet-bar .v-tabsheet-tabitemcell, +.v-tabsheet-bar .v-tabsheet-spacertd { + height: 20px; +} +.v-tabsheet-bar .v-tabsheet-spacertd { + background: transparent; +} +.v-tabsheet-bar .v-tabsheet-tabitemcell { + background-image: url(img/bar/tab-left.png); /** sprite-ref: verticals */ +} +.v-tabsheet-bar .v-tabsheet-tabitemcell-first { + padding-left: 6px; + background-image: url(img/bar/tab-first-left.png); /** sprite-ref: verticals */ +} +.v-tabsheet-bar .v-tabsheet-tabitem, +.v-tabsheet-bar .v-tabsheet-spacertd div { + height: 20px; + background-image: url(img/bar/tab-bg.png); /** sprite-ref: verticals; sprite-alignment: repeat */ + font-size: 11px; + margin: 0; +} +.v-tabsheet-bar .v-tabsheet-tabitem .v-caption { + height: 18px; + background-image: url(img/bar/tab-right.png); /** sprite-ref: verticals; sprite-alignment: right */ + padding: 2px 12px 0 10px; +} +.v-tabsheet-bar .v-tabsheet-tabitem .v-caption-closable, +.v-tabsheet-bar .v-tabsheet-tabitem-selected .v-caption-closable { + padding-right: 8px; + padding-left: 14px; +} +.v-tabsheet-bar .v-tabsheet-caption-close, +.v-tabsheet-bar .v-tabsheet-caption-close:hover, +.v-tabsheet-bar .v-tabsheet-caption-close:active { + text-indent: 0; + background: transparent; + margin-left: 3px; + margin-right: -3px; + padding: 0; + color: #3c3c3c; + width: 14px; + height: 14px; + line-height: 12px; + -webkit-border-radius: 7px; + -moz-border-radius: 7px; +} +.v-tabsheet-bar .v-tabsheet-caption-close { + margin-top: 0; +} +.v-ff .v-tabsheet-bar .v-tabsheet-caption-close, +.v-ie7 .v-tabsheet-bar .v-tabsheet-caption-close { + margin-top: -15px; +} +.v-tabsheet-bar .v-tabsheet-caption-close:hover { + background: #bfbfbf; + -webkit-box-shadow: 0 1px 0 #fff; +} +.v-tabsheet-bar .v-tabsheet-caption-close:active { + background: #a9a9a9; +} +.v-tabsheet-bar .v-tabsheet-tabitem-selected .v-tabsheet-caption-close { + color: #404142; +} +.v-tabsheet-bar .v-tabsheet-tabitem-selected .v-tabsheet-caption-close:hover { + background: #5e666e; + color: #fff; + text-shadow: 0 -1px 0 #222; +} +.v-tabsheet-bar .v-tabsheet-tabitem-selected .v-tabsheet-caption-close:active { + background: #404142; +} + +.v-tabsheet-bar .v-tabsheet-tabitemcell-selected { + background-image: url(img/bar/tab-left-sel.png); /** sprite-ref: verticals */ +} +.v-tabsheet-bar .v-tabsheet-tabitemcell-selected-first { + background-image: url(img/bar/tab-first-left-sel.png); /** sprite-ref: verticals */ +} +.v-tabsheet-bar .v-tabsheet-tabitem-selected { + background-image: url(img/bar/tab-bg-sel.png); /** sprite-ref: verticals; sprite-alignment: repeat */ + color: #232930; +} +.v-tabsheet-bar .v-tabsheet-tabitem-selected .v-caption { + background-image: url(img/bar/tab-right-sel.png); /** sprite-ref: verticals; sprite-alignment: right */ +} +.v-tabsheet-bar .v-tabsheet-scroller { + margin-top: -20px; + height: 19px; + border-right: none; + background-image: url(img/bar/tab-bg.png); /** sprite-ref: verticals; sprite-alignment: repeat */ +} +.v-tabsheet-bar .v-tabsheet-scroller button { + margin-top: 1px; +} +.v-tabsheet-content-bar { + border: none; +} +.v-tabsheet-content-bar .v-tabsheet-tabsheetpanel { + background: transparent; +} +.v-tabsheet-deco-bar { + height: 0; + border: none; +} +/* Content area font color specified with minimal style (reduces additional selectors) */ diff --git a/WebContent/VAADIN/themes/reindeer/tabsheet/tabsheet-minimal-style.css b/WebContent/VAADIN/themes/reindeer/tabsheet/tabsheet-minimal-style.css new file mode 100644 index 0000000000..d80f292055 --- /dev/null +++ b/WebContent/VAADIN/themes/reindeer/tabsheet/tabsheet-minimal-style.css @@ -0,0 +1,135 @@ +/** + * Tabsheet "minimal" style -------------- + */ +.v-tabsheet-minimal .v-tabsheet-spacertd div { + border-bottom: 1px solid #bfbfbf; + height: auto; + background: transparent; +} +.v-tabsheet-minimal .v-tabsheet-tabitemcell, +.v-tabsheet-minimal .v-tabsheet-spacertd { + height: auto; + background: transparent; + padding-left: 0; +} +.v-tabsheet-minimal .v-tabsheet-tabitem { + border: none; + border-bottom: 1px solid #bfbfbf; + color: #4d748f; + padding: 0; + height: auto; + background: transparent; + text-shadow: none; +} +.v-tabsheet-minimal .v-tabsheet-tabitem .v-caption { + padding: 5px 16px; + height: auto; + background: transparent; +} +.v-tabsheet-minimal .v-tabsheet-tabitemcell-selected { + background: transparent; +} +.v-tabsheet-minimal .v-tabsheet-tabitem-selected { + background: transparent; + border: 1px solid #bfbfbf; + border-bottom: none; + color: #222; +} +.v-tabsheet-minimal .v-tabsheet-tabitem-selected .v-caption { + background: transparent; + padding: 4px 15px 6px 15px; +} +.v-tabsheet-minimal .v-tabsheet-tabitem .v-caption-closable, +.v-tabsheet-minimal .v-tabsheet-tabitem-selected .v-caption-closable { + padding-right: 6px; +} +.v-tabsheet-content-minimal { + border: none; +} +.v-tabsheet-content-minimal .v-tabsheet-tabsheetpanel { + background: transparent; +} +.v-tabsheet-deco-minimal { + height: 0; + border: none; +} +.v-tabsheet-minimal .v-tabsheet-scroller { + margin-top: -20px; + height: 17px; + padding: 0; + border: none; + background: transparent; +} +.v-tabsheet-minimal .v-tabsheet-scroller button { + margin-top: 0; +} +.v-tabsheet-minimal .v-tabsheet-caption-close, +.v-tabsheet-minimal .v-tabsheet-caption-close:hover, +.v-tabsheet-minimal .v-tabsheet-caption-close:active { + text-indent: 0; + background: transparent; + margin-left: 3px; + margin-right: -3px; + padding: 0; + color: #999; + width: 15px; + height: 15px; + line-height: 14px; + -webkit-border-radius: 7px; + -moz-border-radius: 7px; +} +.v-tabsheet-minimal .v-tabsheet-caption-close { + margin-top: 1px; +} +.v-ff .v-tabsheet-minimal .v-tabsheet-caption-close, +.v-ie7 .v-tabsheet-minimal .v-tabsheet-caption-close { + margin-top: -15px; +} +.v-tabsheet-minimal .v-tabsheet-caption-close:hover { + color: #fff; + background: #aaa; +} +.v-tabsheet-minimal .v-tabsheet-caption-close:active { + background: #777; +} +/* Minimal tabsheet on blue background */ +.blue .v-tabsheet-minimal .v-tabsheet-spacertd div, +.blue .v-tabsheet-minimal .v-tabsheet-tabitem, +.blue .v-tabsheet-minimal .v-tabsheet-tabitem-selected { + border-color: #7c8a91; +} +.blue .v-tabsheet-minimal .v-tabsheet-caption-close { + color: #7c8a91; +} +.blue .v-tabsheet-minimal .v-tabsheet-caption-close:hover { + color: #BCD3DE; + background: #778d98; +} +.blue .v-tabsheet-minimal .v-tabsheet-caption-close:active { + background: #4f6874; +} +/* Minimal tabsheet on black background */ +.black .v-tabsheet-minimal .v-tabsheet-spacertd div, +.black .v-tabsheet-minimal .v-tabsheet-tabitem, +.black .v-tabsheet-minimal .v-tabsheet-tabitem-selected { + border-color: #3e4044; + color: #6a7f89; +} +.black .v-tabsheet-minimal .v-tabsheet-tabitem-selected { + color: #c9ccce; +} +.black .v-tabsheet-content-minimal, +.black .v-tabsheet-content-bar { + color: #c9ccce; + text-shadow: #000 0 0 1px; +} +.black .v-tabsheet-minimal .v-tabsheet-caption-close { + color: #72787c; +} +.black .v-tabsheet-minimal .v-tabsheet-caption-close:hover { + color: #1d2021; + background: #4d5154; +} +.black .v-tabsheet-minimal .v-tabsheet-caption-close:active { + background: #626669; +}
\ No newline at end of file diff --git a/WebContent/VAADIN/themes/reindeer/tabsheet/tabsheet-normal-style.css b/WebContent/VAADIN/themes/reindeer/tabsheet/tabsheet-normal-style.css new file mode 100644 index 0000000000..607b25b794 --- /dev/null +++ b/WebContent/VAADIN/themes/reindeer/tabsheet/tabsheet-normal-style.css @@ -0,0 +1,160 @@ +/* Default Tabsheet styles */ + +.v-tabsheet-tabitemcell, +.v-tabsheet-spacertd { + height: 32px; +} +.v-tabsheet-tabitemcell { + background: no-repeat; + background-image: url(img/framed/tab-left.png); /** sprite-ref: verticals */ + padding-left: 3px; +} +.v-tabsheet-tabitemcell-first { + padding-left: 10px; + background-image: url(img/framed/tab-first-left.png); /** sprite-ref: verticals */ +} +.v-tabsheet-tabitem, +.v-tabsheet-spacertd div { + border: none; + height: 32px; + background: transparent repeat-x; + background-image: url(img/framed/tab-bg.png); /** sprite-ref: verticals; sprite-alignment: repeat */ + padding: 0; + color: #222; + text-shadow: #fff 0 1px 0; +} +.v-tabsheet-tabitem .v-caption { + border: none; + height: 23px; + background: no-repeat right top; + background-image: url(img/framed/tab-right.png); /** sprite-ref: verticals; sprite-alignment: right */ + padding: 9px 8px 0 6px; +} +.v-tabsheet-tabitem .v-caption-closable { + padding-right: 0; + padding-left: 17px; +} +.v-tabsheet-tabitem .v-captiontext { + height: 16px; + line-height: 16px; +} +.v-tabsheet-caption-close { + float: right; + width: 19px; + height: 18px; + margin: -1px -1px 0; + padding-left: 2px; + background: transparent; + background-image: url(img/close-btn.png); /** sprite-ref: verticals */ + cursor: default; + text-indent: -999px; + overflow: hidden; +} +.v-ff .v-tabsheet-caption-close, +.v-ie7 .v-tabsheet-caption-close { + margin-top: -17px; +} +.v-ie6 .v-tabsheet-caption-close { + float: none; +} +.v-tabsheet-caption-close:hover { + background-image: url(img/close-btn-hover.png); /** sprite-ref: verticals */ +} +.v-tabsheet-caption-close:active { + background-image: url(img/close-btn-pressed.png); /** sprite-ref: verticals */ +} +.v-tabsheet-tabitem-selected .v-tabsheet-caption-close { + background-image: url(img/close-btn-sel.png); /** sprite-ref: verticals */ +} +.v-tabsheet-tabitem-selected .v-tabsheet-caption-close:hover { + background-image: url(img/close-btn-sel-hover.png); /** sprite-ref: verticals */ +} +.v-tabsheet-tabitem-selected .v-tabsheet-caption-close:active { + background-image: url(img/close-btn-sel-pressed.png); /** sprite-ref: verticals */ +} +.v-tabsheet-tabitemcell-selected { + background-image: url(img/framed/tab-left-sel.png); /** sprite-ref: verticals */ +} +.v-tabsheet-tabitemcell-selected-first { + background-image: url(img/framed/tab-first-left-sel.png); /** sprite-ref: verticals */ +} +.v-tabsheet-tabitem-selected { + background-image: url(img/framed/tab-bg-sel.png); /** sprite-ref: verticals; sprite-alignment: repeat */ + color: #232930; +} +.v-tabsheet-tabitem-selected .v-caption { + background-image: url(img/framed/tab-right-sel.png); /** sprite-ref: verticals; sprite-alignment: right */ +} +.v-tabsheet-spacertd div { + margin-right: 4px; +} +.v-tabsheet-spacertd { + background: transparent no-repeat right top; + background-image: url(img/framed/tab-spacer-right.png); /** sprite-ref: verticals; sprite-alignment: right */ +} +.v-tabsheet-content { + border: 1px solid #dcdcdc; + border-bottom: none; + border-top: none; + color: #222; + text-shadow: none; +} +.blue .v-tabsheet-content { + border-color: #a8bcc5; +} +.v-tabsheet-tabsheetpanel { + background: #fff; +} +.v-sa .v-tabsheet-content, +.v-ff3 .v-tabsheet-content { + border-color: rgba(0,0,0,.1); +} +.v-tabsheet-deco { + height: 1px; + border-top: 1px solid #bebebe; + background: #e2e2e2; + overflow: hidden; +} +.blue .v-tabsheet-deco { + border-color: #92a3ac; + background: #adc2cd; +} +.v-sa .v-tabsheet-deco, +.v-ff3 .v-tabsheet-deco { + border-top-color: rgba(0,0,0,.1); + background: rgba(0,0,0,.08); +} + + +/* Icons & error indicators */ + +.v-tabsheet-tabs .v-icon, +.v-tabsheet-tabs .v-captiontext, +.v-tabsheet-tabs .v-errorindicator { + display: inline; + float: none; +} +.v-sa .v-tabsheet-tabs .v-captiontext { + display: inline-block; +} +.v-tabsheet-tabs .v-icon { + width: 16px !important; + height: 16px !important; +} +.v-tabsheet-tabs .v-errorindicator { + display: inline-block; + width: 13px; + height: 16px; + background: transparent url(../common/icons/error.png) no-repeat 50%; +} +.v-ff2 .v-tabsheet-tabs .v-icon, +.v-ff2 .v-tabsheet-tabs .v-errorindicator { + display: -moz-inline-stack; +} +.v-ie6 .v-tabsheet-tabs .v-errorindicator { + background-image: url(../common/icons/error-ie6.png); +} +.v-ie .v-tabsheet-tabs .v-errorindicator { + zoom: 1; + display: inline; +}
\ No newline at end of file diff --git a/WebContent/VAADIN/themes/reindeer/tabsheet/tabsheet-scroller.css b/WebContent/VAADIN/themes/reindeer/tabsheet/tabsheet-scroller.css new file mode 100644 index 0000000000..217676558e --- /dev/null +++ b/WebContent/VAADIN/themes/reindeer/tabsheet/tabsheet-scroller.css @@ -0,0 +1,52 @@ +/* Tabsheet scroller styles */ + +.v-tabsheet-scroller { + height: 31px; + margin-top: -31px; + padding: 0 3px 0 4px; + border-right: 1px solid #c2c2c2; + border-left: 1px solid #cfcfcf; + position: relative; + float: right; + background: transparent url(img/framed/tab-bg.png) repeat-x left -1px; + width: 36px; +} +.v-tabsheet-scroller button { + margin-top: 7px; +} +.v-tabsheet-scrollerPrev, +.v-tabsheet-scrollerNext, +.v-tabsheet-scrollerPrev-disabled, +.v-tabsheet-scrollerNext-disabled { + border: none; + background: transparent; + background-image: url(img/tab-prev.png); /** sprite-ref: verticals */ + width: 18px; + height: 17px; + overflow: hidden; + cursor: default; +} +.v-tabsheet-scroller button::-moz-focus-inner { + border: none; +} +.v-tabsheet-scrollerNext { + background-image: url(img/tab-next.png); /** sprite-ref: verticals */ +} +.v-tabsheet-scrollerPrev:active { + background-image: url(img/tab-prev-pressed.png); /** sprite-ref: verticals */ +} +.v-tabsheet-scrollerNext:active { + background-image: url(img/tab-next-pressed.png); /** sprite-ref: verticals */ +} +.v-tabsheet-scrollerPrev-disabled, +.v-tabsheet-scrollerPrev-disabled:active { + background-image: url(img/tab-prev-disabled.png); /** sprite-ref: verticals */ + opacity: 1; + filter: none; +} +.v-tabsheet-scrollerNext-disabled, +.v-tabsheet-scrollerNext-disabled:active { + background-image: url(img/tab-next-disabled.png); /** sprite-ref: verticals; sprite-margin-bottom: 1px */ + opacity: 1; + filter: none; +}
\ No newline at end of file diff --git a/WebContent/VAADIN/themes/reindeer/tabsheet/tabsheet.css b/WebContent/VAADIN/themes/reindeer/tabsheet/tabsheet.css index 289660eb3b..fddef9a287 100644 --- a/WebContent/VAADIN/themes/reindeer/tabsheet/tabsheet.css +++ b/WebContent/VAADIN/themes/reindeer/tabsheet/tabsheet.css @@ -1,325 +1,5 @@ -.v-tabsheet-tabitemcell, -.v-tabsheet-spacertd { - height: 32px; -} -.v-tabsheet-tabitemcell { - background: no-repeat; - background-image: url(img/framed/tab-left.png); /** sprite-ref: verticals */ - padding-left: 3px; -} -.v-tabsheet-tabitemcell-first { - padding-left: 10px; - background-image: url(img/framed/tab-first-left.png); /** sprite-ref: verticals */ -} -.v-tabsheet-tabitem, -.v-tabsheet-spacertd div { - border: none; - height: 32px; - background: transparent repeat-x; - background-image: url(img/framed/tab-bg.png); /** sprite-ref: verticals; sprite-alignment: repeat */ - padding: 0; - color: #222; - text-shadow: #fff 0 1px 0; -} -.v-tabsheet-tabitem .v-caption { - border: none; - height: 23px; - background: no-repeat right top; - background-image: url(img/framed/tab-right.png); /** sprite-ref: verticals; sprite-alignment: right */ - padding: 9px 8px 0 6px; -} -.v-tabsheet-tabitem .v-captiontext { - height: 16px; - line-height: 16px; -} -.v-tabsheet-tabitemcell-selected { - background-image: url(img/framed/tab-left-sel.png); /** sprite-ref: verticals */ -} -.v-tabsheet-tabitemcell-selected-first { - background-image: url(img/framed/tab-first-left-sel.png); /** sprite-ref: verticals */ -} -.v-tabsheet-tabitem-selected { - background-image: url(img/framed/tab-bg-sel.png); /** sprite-ref: verticals; sprite-alignment: repeat */ - color: #232930; -} -.v-tabsheet-tabitem-selected .v-caption { - background-image: url(img/framed/tab-right-sel.png); /** sprite-ref: verticals; sprite-alignment: right */ -} -.v-tabsheet-spacertd div { - margin-right: 4px; -} -.v-tabsheet-spacertd { - background: transparent no-repeat right top; - background-image: url(img/framed/tab-spacer-right.png); /** sprite-ref: verticals; sprite-alignment: right */ -} -.v-tabsheet-content { - border: 1px solid #dcdcdc; - border-bottom: none; - border-top: none; - color: #222; - text-shadow: none; -} -.blue .v-tabsheet-content { - border-color: #a8bcc5; -} -.v-tabsheet-tabsheetpanel { - background: #fff; -} -.v-sa .v-tabsheet-content, -.v-ff3 .v-tabsheet-content { - border-color: rgba(0,0,0,.1); -} -.v-tabsheet-deco { - height: 1px; - border-top: 1px solid #bebebe; - background: #e2e2e2; - overflow: hidden; -} -.blue .v-tabsheet-deco { - border-color: #92a3ac; - background: #adc2cd; -} -.v-sa .v-tabsheet-deco, -.v-ff3 .v-tabsheet-deco { - border-top-color: rgba(0,0,0,.1); - background: rgba(0,0,0,.08); -} -.v-tabsheet-scroller { - height: 31px; - margin-top: -31px; - padding-right: 3px; - border-right: 1px solid #afafaf; - position: relative; - float: right; -} -.v-tabsheet-scroller button { - margin-top: 7px; -} -.v-tabsheet-scrollerPrev, -.v-tabsheet-scrollerNext, -.v-tabsheet-scrollerPrev-disabled, -.v-tabsheet-scrollerNext-disabled { - border: none; - background: transparent; - background-image: url(img/tab-prev.png); /** sprite-ref: verticals */ - width: 18px; - height: 17px; - overflow: hidden; - cursor: default; -} -.v-tabsheet-scroller button::-moz-focus-inner { - border: none; -} -.v-tabsheet-scrollerNext { - background-image: url(img/tab-next.png); /** sprite-ref: verticals */ -} -.v-tabsheet-scrollerPrev:active { - background-image: url(img/tab-prev-pressed.png); /** sprite-ref: verticals */ -} -.v-tabsheet-scrollerNext:active { - background-image: url(img/tab-next-pressed.png); /** sprite-ref: verticals */ -} -.v-tabsheet-scrollerPrev-disabled, -.v-tabsheet-scrollerPrev-disabled:active { - background-image: url(img/tab-prev-disabled.png); /** sprite-ref: verticals */ - opacity: 1; - filter: none; -} -.v-tabsheet-scrollerNext-disabled, -.v-tabsheet-scrollerNext-disabled:active { - background-image: url(img/tab-next-disabled.png); /** sprite-ref: verticals; sprite-margin-bottom: 1px */ - opacity: 1; - filter: none; -} -.v-tabsheet-tabs .v-icon, -.v-tabsheet-tabs .v-captiontext, -.v-tabsheet-tabs .v-errorindicator { - display: inline; - float: none; -} -.v-sa .v-tabsheet-tabs .v-captiontext { - display: inline-block; -} -.v-tabsheet-tabs .v-icon { - width: 16px !important; - height: 16px !important; -} -.v-tabsheet-tabs .v-errorindicator { - display: inline-block; - width: 13px; - height: 16px; - background: transparent url(../common/icons/error.png) no-repeat 50%; -} -.v-ff2 .v-tabsheet-tabs .v-icon, -.v-ff2 .v-tabsheet-tabs .v-errorindicator { - display: -moz-inline-stack; -} -.v-ie6 .v-tabsheet-tabs .v-errorindicator { - background-image: url(../common/icons/error-ie6.png); -} -.v-ie .v-tabsheet-tabs .v-errorindicator { - zoom: 1; - display: inline; -} - - - - - - -/** - * Minimal style -------------- - */ -.v-tabsheet-minimal .v-tabsheet-spacertd div { - border-bottom: 1px solid #bfbfbf; - height: auto; - background: transparent; -} -.v-tabsheet-minimal .v-tabsheet-tabitemcell, -.v-tabsheet-minimal .v-tabsheet-spacertd { - height: auto; - background: transparent; - padding-left: 0; -} -.v-tabsheet-minimal .v-tabsheet-tabitem { - border: none; - border-bottom: 1px solid #bfbfbf; - color: #4d748f; - padding: 0; - height: auto; - background: transparent; - text-shadow: none; -} -.v-tabsheet-minimal .v-tabsheet-tabitem .v-caption { - padding: 5px 16px; - height: auto; - background: transparent; -} -.v-tabsheet-minimal .v-tabsheet-tabitemcell-selected { - background: transparent; -} -.v-tabsheet-minimal .v-tabsheet-tabitem-selected { - background: transparent; - border: 1px solid #bfbfbf; - border-bottom: none; - color: #222; -} -.v-tabsheet-minimal .v-tabsheet-tabitem-selected .v-caption { - background: transparent; - padding: 4px 15px 6px 15px; -} -.v-tabsheet-content-minimal { - border: none; -} -.v-tabsheet-content-minimal .v-tabsheet-tabsheetpanel { - background: transparent; -} -.v-tabsheet-deco-minimal { - height: 0; - border: none; -} -.v-tabsheet-minimal .v-tabsheet-scroller { - margin-top: -20px; - height: 17px; - padding-right: 0; - border-right: none; - position: static; - float: none; -} -.v-tabsheet-minimal .v-tabsheet-scroller button { - margin-top: 0; -} -/* Minimal tabsheet on blue background */ -.blue .v-tabsheet-minimal .v-tabsheet-spacertd div, -.blue .v-tabsheet-minimal .v-tabsheet-tabitem, -.blue .v-tabsheet-minimal .v-tabsheet-tabitem-selected { - border-color: #7c8a91; -} -/* Minimal tabsheet on black background */ -.black .v-tabsheet-minimal .v-tabsheet-spacertd div, -.black .v-tabsheet-minimal .v-tabsheet-tabitem, -.black .v-tabsheet-minimal .v-tabsheet-tabitem-selected { - border-color: #3e4044; - color: #6a7f89; -} -.black .v-tabsheet-minimal .v-tabsheet-tabitem-selected { - color: #c9ccce; -} -.black .v-tabsheet-content-minimal, -.black .v-tabsheet-content-bar { - color: #c9ccce; - text-shadow: #000 0 0 1px; -} - - - - - - -/** - * Bar style --------------- - */ -.v-tabsheet-bar .v-tabsheet-tabitemcell, -.v-tabsheet-bar .v-tabsheet-spacertd { - height: 20px; -} -.v-tabsheet-bar .v-tabsheet-spacertd { - background: transparent; -} -.v-tabsheet-bar .v-tabsheet-tabitemcell { - background-image: url(img/bar/tab-left.png); /** sprite-ref: verticals */ -} -.v-tabsheet-bar .v-tabsheet-tabitemcell-first { - padding-left: 6px; - background-image: url(img/bar/tab-first-left.png); /** sprite-ref: verticals */ -} -.v-tabsheet-bar .v-tabsheet-tabitem, -.v-tabsheet-bar .v-tabsheet-spacertd div { - height: 20px; - background-image: url(img/bar/tab-bg.png); /** sprite-ref: verticals; sprite-alignment: repeat */ - font-size: 11px; - margin: 0; -} -.v-tabsheet-bar .v-tabsheet-tabitem .v-caption { - height: 18px; - background-image: url(img/bar/tab-right.png); /** sprite-ref: verticals; sprite-alignment: right */ - padding: 2px 12px 0 10px; -} -.v-tabsheet-bar .v-tabsheet-tabitemcell-selected { - background-image: url(img/bar/tab-left-sel.png); /** sprite-ref: verticals */ -} -.v-tabsheet-bar .v-tabsheet-tabitemcell-selected-first { - background-image: url(img/bar/tab-first-left-sel.png); /** sprite-ref: verticals */ -} -.v-tabsheet-bar .v-tabsheet-tabitem-selected { - background-image: url(img/bar/tab-bg-sel.png); /** sprite-ref: verticals; sprite-alignment: repeat */ - color: #232930; -} -.v-tabsheet-bar .v-tabsheet-tabitem-selected .v-caption { - background-image: url(img/bar/tab-right-sel.png); /** sprite-ref: verticals; sprite-alignment: right */ -} -.v-tabsheet-bar .v-tabsheet-scroller { - margin-top: -19px; -} -.v-tabsheet-bar .v-tabsheet-scroller { - margin-top: -19px; - height: 17px; - padding-right: 0; - border-right: none; - position: static; - float: none; -} -.v-tabsheet-bar .v-tabsheet-scroller button { - margin-top: 0; -} -.v-tabsheet-content-bar { - border: none; -} -.v-tabsheet-content-bar .v-tabsheet-tabsheetpanel { - background: transparent; -} -.v-tabsheet-deco-bar { - height: 0; - border: none; -} -/* Content area font color specified with minimal style (reduces additional selectors) */
\ No newline at end of file +/* These styles get catenated together on build */ +@import "tabsheet-normal-style.css"; +@import "tabsheet-scroller.css"; +@import "tabsheet-minimal-style.css"; +@import "tabsheet-bar-style.css";
\ No newline at end of file |