From: Jouni Koivuviita Date: Fri, 8 May 2009 10:23:31 +0000 (+0000) Subject: "Poro" theme update: button enhancements, initial panel, splitpanel and tabsheet... X-Git-Tag: 6.7.0.beta1~2936^2~4 X-Git-Url: https://source.dussan.org/?a=commitdiff_plain;h=a19709a9b2c9a5597d4455b6e7eeaeb74f1f0821;p=vaadin-framework.git "Poro" theme update: button enhancements, initial panel, splitpanel and tabsheet styles + SmartSprites definitions. svn changeset:7668/svn branch:theme_2009_03 --- diff --git a/WebContent/ITMILL/themes/reindeer/a-sprite-definitions/a-sprite-definitions.css b/WebContent/ITMILL/themes/reindeer/a-sprite-definitions/a-sprite-definitions.css new file mode 100644 index 0000000000..a54d8d83fd --- /dev/null +++ b/WebContent/ITMILL/themes/reindeer/a-sprite-definitions/a-sprite-definitions.css @@ -0,0 +1,5 @@ +/** sprite: verticals; sprite-image: url(../common/img/vertical-sprites.png); sprite-layout: vertical */ + +/** sprite: horizontals; sprite-image: url(../common/img/horizontal-sprites.png); sprite-layout: horizontal */ + +/** sprite: buttons; sprite-image: url(../button/img/button-sprites.png); sprite-layout: vertical */ \ No newline at end of file diff --git a/WebContent/ITMILL/themes/reindeer/button/button.css b/WebContent/ITMILL/themes/reindeer/button/button.css index b0156f0aae..3023690de5 100644 --- a/WebContent/ITMILL/themes/reindeer/button/button.css +++ b/WebContent/ITMILL/themes/reindeer/button/button.css @@ -1,5 +1,3 @@ -/** sprite: buttons; sprite-image: url(img/buttons.png); sprite-layout: vertical */ - /* We serve simpler buttons for IE6, since it doesn't support the adjacent * sibling selector (+) that is needed to position .i-icon properly. */ @@ -60,6 +58,8 @@ div > .i-button span, } .i-ff2 .i-button span { display: -moz-inline-box; + padding-top: 6px; + height: 20px; } /* IE7 */ .i-ie7 .i-button.i-pressed .i-icon { @@ -181,6 +181,10 @@ div > .i-button-small span, padding: 1px 11px 0 5px; font-weight: normal; } +.i-ff2 .i-button-small span { + height: 17px; + padding-top: 3px; +} .i-sa .i-button-small span { height: 18px; padding-top: 2px; diff --git a/WebContent/ITMILL/themes/reindeer/button/img/button-sprites-ie6.png b/WebContent/ITMILL/themes/reindeer/button/img/button-sprites-ie6.png new file mode 100644 index 0000000000..6ba8bc2864 Binary files /dev/null and b/WebContent/ITMILL/themes/reindeer/button/img/button-sprites-ie6.png differ diff --git a/WebContent/ITMILL/themes/reindeer/button/img/button-sprites.png b/WebContent/ITMILL/themes/reindeer/button/img/button-sprites.png new file mode 100644 index 0000000000..c14b6864ae Binary files /dev/null and b/WebContent/ITMILL/themes/reindeer/button/img/button-sprites.png differ diff --git a/WebContent/ITMILL/themes/reindeer/common/img/horizontal-sprites.png b/WebContent/ITMILL/themes/reindeer/common/img/horizontal-sprites.png new file mode 100644 index 0000000000..7980a5aa18 Binary files /dev/null and b/WebContent/ITMILL/themes/reindeer/common/img/horizontal-sprites.png differ diff --git a/WebContent/ITMILL/themes/reindeer/common/img/vertical-sprites.png b/WebContent/ITMILL/themes/reindeer/common/img/vertical-sprites.png new file mode 100644 index 0000000000..07ebba5e3d Binary files /dev/null and b/WebContent/ITMILL/themes/reindeer/common/img/vertical-sprites.png differ diff --git a/WebContent/ITMILL/themes/reindeer/splitpanel/img/hor-bg.png b/WebContent/ITMILL/themes/reindeer/splitpanel/img/hor-bg.png new file mode 100644 index 0000000000..4ce1cabffc Binary files /dev/null and b/WebContent/ITMILL/themes/reindeer/splitpanel/img/hor-bg.png differ diff --git a/WebContent/ITMILL/themes/reindeer/splitpanel/img/hor-handle.png b/WebContent/ITMILL/themes/reindeer/splitpanel/img/hor-handle.png new file mode 100644 index 0000000000..50645f41f1 Binary files /dev/null and b/WebContent/ITMILL/themes/reindeer/splitpanel/img/hor-handle.png differ diff --git a/WebContent/ITMILL/themes/reindeer/splitpanel/img/ver-bg.png b/WebContent/ITMILL/themes/reindeer/splitpanel/img/ver-bg.png new file mode 100644 index 0000000000..1e6968dd1c Binary files /dev/null and b/WebContent/ITMILL/themes/reindeer/splitpanel/img/ver-bg.png differ diff --git a/WebContent/ITMILL/themes/reindeer/splitpanel/img/ver-handle.png b/WebContent/ITMILL/themes/reindeer/splitpanel/img/ver-handle.png new file mode 100644 index 0000000000..bf5ca89ca5 Binary files /dev/null and b/WebContent/ITMILL/themes/reindeer/splitpanel/img/ver-handle.png differ diff --git a/WebContent/ITMILL/themes/reindeer/splitpanel/splitpanel.css b/WebContent/ITMILL/themes/reindeer/splitpanel/splitpanel.css new file mode 100644 index 0000000000..00689373cd --- /dev/null +++ b/WebContent/ITMILL/themes/reindeer/splitpanel/splitpanel.css @@ -0,0 +1,24 @@ +.i-splitpanel-horizontal .i-splitpanel-hsplitter { + width: 7px; + background-repeat: repeat-y; + background-image: url(img/hor-bg.png); /** sprite-ref: horizontals; sprite-alignment: repeat */ +} +.i-splitpanel-horizontal .i-splitpanel-hsplitter div { + width: 7px; + background: transparent; + background-repeat: no-repeat; + background-position: 50%; + background-image: url(img/hor-handle.png); /** sprite-ref: horizontals; sprite-alignment: middle */ +} +.i-splitpanel-vertical .i-splitpanel-vsplitter { + height: 7px; + background-repeat: repeat-x; + background-image: url(img/ver-bg.png); /** sprite-ref: verticals; sprite-alignment: repeat */ +} +.i-splitpanel-vertical .i-splitpanel-vsplitter div { + height: 7px; + background: transparent; + background-repeat: no-repeat; + background-position: 50%; + background-image: url(img/ver-handle.png); /** sprite-ref: verticals; sprite-alignment: center */ +} \ No newline at end of file diff --git a/WebContent/ITMILL/themes/reindeer/styles.css b/WebContent/ITMILL/themes/reindeer/styles.css index 8ddeee8a65..36f0998768 100644 --- a/WebContent/ITMILL/themes/reindeer/styles.css +++ b/WebContent/ITMILL/themes/reindeer/styles.css @@ -1548,9 +1548,11 @@ div.i-window-header { } /* Automatically compiled css file from subdirectories. */ -/* ./WebContent/ITMILL/themes/reindeer/button/button.css */ -/** sprite: buttons; sprite-image: url(button/img/buttons.png); sprite-layout: vertical */ +/* ./WebContent/ITMILL/themes/reindeer/a-sprite-definitions/a-sprite-definitions.css */ + + +/* ./WebContent/ITMILL/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 .i-icon properly. */ @@ -1560,7 +1562,9 @@ div > .i-button, padding: 0 0 0 6px; background-color: transparent; background-repeat: no-repeat; - background-image: url(button/img/left.png); /** sprite-ref: buttons */ + background-image: url(button/img/button-sprites.png); + -background-image: url(button/img/button-sprites-ie6.png); + background-position: left -0px; border: none; cursor: default; } @@ -1572,7 +1576,9 @@ div > .i-button span, background-color: transparent; background-repeat: no-repeat; background-position: right top; - background-image: url(button/img/right.png); /** sprite-ref: buttons; sprite-alignment: right */ + background-image: url(button/img/button-sprites.png); + -background-image: url(button/img/button-sprites-ie6.png); + background-position: right -26px; text-shadow: #fff 0 1px 0; font-weight: bold; font-size: 11px; @@ -1584,21 +1590,29 @@ div > .i-button span, padding-top: 5px; } .i-button:focus { - background-image: url(button/img/left-focus.png); /** sprite-ref: buttons */ + background-image: url(button/img/button-sprites.png); + -background-image: url(button/img/button-sprites-ie6.png); + background-position: left -52px; outline: none; } .i-button:focus span { - background-image: url(button/img/right-focus.png); /** sprite-ref: buttons; sprite-alignment: right */ + background-image: url(button/img/button-sprites.png); + -background-image: url(button/img/button-sprites-ie6.png); + background-position: right -78px; outline: none; } .i-button:active, .i-ie7 .i-button.i-pressed { - background-image: url(button/img/left-pressed.png); /** sprite-ref: buttons */ + background-image: url(button/img/button-sprites.png); + -background-image: url(button/img/button-sprites-ie6.png); + background-position: left -104px; outline: none; } .i-button:active span, .i-ie7 .i-button.i-pressed span { - background-image: url(button/img/right-pressed.png); /** sprite-ref: buttons; sprite-alignment: right */ + background-image: url(button/img/button-sprites.png); + -background-image: url(button/img/button-sprites-ie6.png); + background-position: right -130px; outline: none; } .i-ie7 .i-button.i-pressed span { @@ -1611,6 +1625,8 @@ div > .i-button span, } .i-ff2 .i-button span { display: -moz-inline-box; + padding-top: 6px; + height: 20px; } /* IE7 */ .i-ie7 .i-button.i-pressed .i-icon { @@ -1697,58 +1713,86 @@ div > .i-button .i-errorindicator, */ div > .i-button-primary, .i-ie7 .i-button-primary { - background-image: url(button/img/primary-left.png); /** sprite-ref: buttons */ + background-image: url(button/img/button-sprites.png); + -background-image: url(button/img/button-sprites-ie6.png); + background-position: left -156px; } div > .i-button-primary span, .i-ie7 .i-button-primary span { - background-image: url(button/img/primary-right.png); /** sprite-ref: buttons; sprite-alignment: right */ + background-image: url(button/img/button-sprites.png); + -background-image: url(button/img/button-sprites-ie6.png); + background-position: right -182px; } .i-button-primary:focus { - background-image: url(button/img/primary-left-focus.png); /** sprite-ref: buttons */ + background-image: url(button/img/button-sprites.png); + -background-image: url(button/img/button-sprites-ie6.png); + background-position: left -208px; } .i-button-primary:focus span { - background-image: url(button/img/primary-right-focus.png); /** sprite-ref: buttons; sprite-alignment: right */ + background-image: url(button/img/button-sprites.png); + -background-image: url(button/img/button-sprites-ie6.png); + background-position: right -234px; } .i-button-primary:active, .i-ie7 .i-button-primary.i-pressed { - background-image: url(button/img/primary-left-pressed.png); /** sprite-ref: buttons */ + background-image: url(button/img/button-sprites.png); + -background-image: url(button/img/button-sprites-ie6.png); + background-position: left -260px; } .i-button-primary:active span, .i-ie7 .i-button-primary.i-pressed span { - background-image: url(button/img/primary-right-pressed.png); /** sprite-ref: buttons; sprite-alignment: right */ + background-image: url(button/img/button-sprites.png); + -background-image: url(button/img/button-sprites-ie6.png); + background-position: right -286px; } /* * Small-style -------------------------- */ div > .i-button-small, .i-ie7 .i-button-small { - background-image: url(button/img/small-left.png); /** sprite-ref: buttons */ + background-image: url(button/img/button-sprites.png); + -background-image: url(button/img/button-sprites-ie6.png); + background-position: left -312px; height: 20px; } div > .i-button-small span, .i-ie7 .i-button-small span { - background-image: url(button/img/small-right.png); /** sprite-ref: buttons; sprite-alignment: right */ + 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; } +.i-ff2 .i-button-small span { + height: 17px; + padding-top: 3px; +} .i-sa .i-button-small span { height: 18px; padding-top: 2px; } .i-button-small:focus { - background-image: url(button/img/small-left-focus.png); /** sprite-ref: buttons */ + background-image: url(button/img/button-sprites.png); + -background-image: url(button/img/button-sprites-ie6.png); + background-position: left -352px; } .i-button-small:focus span { - background-image: url(button/img/small-right-focus.png); /** sprite-ref: buttons; sprite-alignment: right */ + background-image: url(button/img/button-sprites.png); + -background-image: url(button/img/button-sprites-ie6.png); + background-position: right -372px; } .i-button-small:active, .i-ie7 .i-button-small.i-pressed { - background-image: url(button/img/small-left-pressed.png); /** sprite-ref: buttons */ + background-image: url(button/img/button-sprites.png); + -background-image: url(button/img/button-sprites-ie6.png); + background-position: left -392px; } .i-button-small:active span, .i-ie7 .i-button-small.i-pressed span { - background-image: url(button/img/small-right-pressed.png); /** sprite-ref: buttons; sprite-alignment: right */ + background-image: url(button/img/button-sprites.png); + -background-image: url(button/img/button-sprites-ie6.png); + background-position: right -412px; } /** @@ -1919,6 +1963,36 @@ div > .i-button-small span, background: rgba(0,0,0,.08); } +/* ./WebContent/ITMILL/themes/reindeer/splitpanel/splitpanel.css */ +.i-splitpanel-horizontal .i-splitpanel-hsplitter { + width: 7px; + background-repeat: repeat-y; + background-image: url(common/img/horizontal-sprites.png); + background-position: -0px top; +} +.i-splitpanel-horizontal .i-splitpanel-hsplitter div { + width: 7px; + background: transparent; + background-repeat: no-repeat; + background-position: 50%; + background-image: url(common/img/horizontal-sprites.png); + background-position: -7px center; +} +.i-splitpanel-vertical .i-splitpanel-vsplitter { + height: 7px; + background-repeat: repeat-x; + background-image: url(common/img/vertical-sprites.png); + background-position: left -0px; +} +.i-splitpanel-vertical .i-splitpanel-vsplitter div { + height: 7px; + background: transparent; + background-repeat: no-repeat; + background-position: 50%; + background-image: url(common/img/vertical-sprites.png); + background-position: center -7px; +} + /* ./WebContent/ITMILL/themes/reindeer/tabsheet/tabsheet.css */ .i-tabsheet-spacertd div { border-color: #bfbfbf; @@ -1942,3 +2016,33 @@ div > .i-button-small span, .i-tabsheet-deco { height: 0; } +.i-tabsheet-tabs .i-icon, +.i-tabsheet-tabs .i-captiontext, +.i-tabsheet-tabs .i-errorindicator { + display: inline; + float: none; +} +.i-sa .i-tabsheet-tabs .i-captiontext { + display: inline-block; +} +.i-tabsheet-tabs .i-icon { + width: 16px !important; + height: 16px !important; +} +.i-tabsheet-tabs .i-errorindicator { + display: inline-block; + width: 5px; + height: 16px; + background: transparent url(../default/icons/16/error.png) no-repeat -1px 50%; +} +.i-ff2 .i-tabsheet-tabs .i-icon, +.i-ff2 .i-tabsheet-tabs .i-errorindicator { + display: -moz-inline-stack; +} +.i-ie6 .i-tabsheet-tabs .i-errorindicator { + background-image: url(../default/icons/16/error.gif); +} +.i-ie .i-tabsheet-tabs .i-errorindicator { + zoom:1; + display:inline; +} diff --git a/WebContent/ITMILL/themes/reindeer/tabsheet/tabsheet.css b/WebContent/ITMILL/themes/reindeer/tabsheet/tabsheet.css index c067d275f3..8341e0fac0 100644 --- a/WebContent/ITMILL/themes/reindeer/tabsheet/tabsheet.css +++ b/WebContent/ITMILL/themes/reindeer/tabsheet/tabsheet.css @@ -19,4 +19,34 @@ } .i-tabsheet-deco { height: 0; +} +.i-tabsheet-tabs .i-icon, +.i-tabsheet-tabs .i-captiontext, +.i-tabsheet-tabs .i-errorindicator { + display: inline; + float: none; +} +.i-sa .i-tabsheet-tabs .i-captiontext { + display: inline-block; +} +.i-tabsheet-tabs .i-icon { + width: 16px !important; + height: 16px !important; +} +.i-tabsheet-tabs .i-errorindicator { + display: inline-block; + width: 5px; + height: 16px; + background: transparent url(../../default/icons/16/error.png) no-repeat -1px 50%; +} +.i-ff2 .i-tabsheet-tabs .i-icon, +.i-ff2 .i-tabsheet-tabs .i-errorindicator { + display: -moz-inline-stack; +} +.i-ie6 .i-tabsheet-tabs .i-errorindicator { + background-image: url(../../default/icons/16/error.gif); +} +.i-ie .i-tabsheet-tabs .i-errorindicator { + zoom:1; + display:inline; } \ No newline at end of file