]> source.dussan.org Git - vaadin-framework.git/commitdiff
New tabsheet style for Reindeer: "bar".
authorJouni Koivuviita <jouni.koivuviita@itmill.com>
Wed, 27 May 2009 11:37:06 +0000 (11:37 +0000)
committerJouni Koivuviita <jouni.koivuviita@itmill.com>
Wed, 27 May 2009 11:37:06 +0000 (11:37 +0000)
Notifications better styled for Reindeer.

Other minor improvements panel.

Fixed Sampler styles when using Reindeer theme (additional panel backgound color).

svn changeset:8030/svn branch:6.0

15 files changed:
WebContent/VAADIN/themes/reindeer/common/img/vertical-sprites-ie6.png
WebContent/VAADIN/themes/reindeer/common/img/vertical-sprites.png
WebContent/VAADIN/themes/reindeer/notification/notification.css
WebContent/VAADIN/themes/reindeer/panel/panel.css
WebContent/VAADIN/themes/reindeer/styles.css
WebContent/VAADIN/themes/reindeer/tabsheet/img/bar/tab-bg-sel.png [new file with mode: 0644]
WebContent/VAADIN/themes/reindeer/tabsheet/img/bar/tab-bg.png [new file with mode: 0644]
WebContent/VAADIN/themes/reindeer/tabsheet/img/bar/tab-first-left-sel.png [new file with mode: 0644]
WebContent/VAADIN/themes/reindeer/tabsheet/img/bar/tab-first-left.png [new file with mode: 0644]
WebContent/VAADIN/themes/reindeer/tabsheet/img/bar/tab-left-sel.png [new file with mode: 0644]
WebContent/VAADIN/themes/reindeer/tabsheet/img/bar/tab-left.png [new file with mode: 0644]
WebContent/VAADIN/themes/reindeer/tabsheet/img/bar/tab-right-sel.png [new file with mode: 0644]
WebContent/VAADIN/themes/reindeer/tabsheet/img/bar/tab-right.png [new file with mode: 0644]
WebContent/VAADIN/themes/reindeer/tabsheet/tabsheet.css
WebContent/VAADIN/themes/sampler/sampler/styles.css

index 0cd0917f631c3ca145a5c1e12f0e1e09ffac4d17..e5b9930df35a1297cfcacf9ba61353a9be911780 100644 (file)
Binary files a/WebContent/VAADIN/themes/reindeer/common/img/vertical-sprites-ie6.png and b/WebContent/VAADIN/themes/reindeer/common/img/vertical-sprites-ie6.png differ
index c69166af1f347f61227d9d5d89bf882c2ff58e96..a57a7bd2b9dad2733b13b74ed5848d3bde6b6d2e 100644 (file)
Binary files a/WebContent/VAADIN/themes/reindeer/common/img/vertical-sprites.png and b/WebContent/VAADIN/themes/reindeer/common/img/vertical-sprites.png differ
index 8e41470a1fe3cec047f64c5f4dd1a86951a27326..74df1c164346ea1612e6f006ee334f9807a790fa 100644 (file)
@@ -3,4 +3,22 @@
        border-radius: 4px
        -moz-border-radius: 4px;
        -webkit-border-radius: 4px;
+       font-size: 100%;
+       background: #babcbe;
+}
+.v-Notification.warning {
+       background: #f4a100;
+}
+.v-Notification.error {
+       background: #d82000;
+}
+.v-Notification.tray {
+       margin: 0 5px 5px 0;
+       background: #16181a;
+}
+.v-Notification.tray h1 {
+       font-size: 14px;
+}
+.v-Notification.tray p {
+       font-size: 12px;
 }
\ No newline at end of file
index f60daf70e482f920444c6682e111e00be31ecff8..5eab9912396098525b56d5e49387598c46cb7ad3 100644 (file)
@@ -16,8 +16,6 @@
        border: 1px solid #dcdcdc;
        border-bottom: none;
        border-top: none;
-       color: #222;
-       text-shadow: none;
 }
 .blue .v-panel-content {
        border-color: #a8bcc5;
index e53bf04764682965f7af573b259867903dc3090c..ab0d1b1314a2f5c5ab0a1e0c5f478ea7211605b5 100644 (file)
@@ -2898,6 +2898,24 @@ td.v-datefield-calendarpanel-nextyear {
        border-radius: 4px
        -moz-border-radius: 4px;
        -webkit-border-radius: 4px;
+       font-size: 100%;
+       background: #babcbe;
+}
+.v-Notification.warning {
+       background: #f4a100;
+}
+.v-Notification.error {
+       background: #d82000;
+}
+.v-Notification.tray {
+       margin: 0 5px 5px 0;
+       background: #16181a;
+}
+.v-Notification.tray h1 {
+       font-size: 14px;
+}
+.v-Notification.tray p {
+       font-size: 12px;
 }
 
 /* ./WebContent/VAADIN/themes/reindeer/panel/panel.css */
@@ -2919,8 +2937,6 @@ td.v-datefield-calendarpanel-nextyear {
        border: 1px solid #dcdcdc;
        border-bottom: none;
        border-top: none;
-       color: #222;
-       text-shadow: none;
 }
 .blue .v-panel-content {
        border-color: #a8bcc5;
@@ -3746,18 +3762,19 @@ td.v-datefield-calendarpanel-nextyear {
 
 
 
-/* Framed style */
+/**
+ * Framed style ---------------
+ */
 .v-tabsheet-framed .v-tabsheet-tabitemcell,
 .v-tabsheet-framed .v-tabsheet-spacertd {
        height: 32px;
-       padding: 0;
 }
 .v-tabsheet-framed .v-tabsheet-tabitemcell {
        background: no-repeat;
   background-image: url(common/img/vertical-sprites.png);
   -background-image: url(common/img/vertical-sprites-ie6.png);
   background-position: left -1263px;
-       padding: 0 0 0 3px;
+       padding-left: 3px;
 }
 .v-tabsheet-framed .v-tabsheet-tabitemcell-first {
        padding-left: 10px;
@@ -3863,6 +3880,80 @@ td.v-datefield-calendarpanel-nextyear {
        margin-top: 7px;
 }
 
+
+
+
+/**
+ * Bar style ---------------
+ */
+.v-tabsheet-bar .v-tabsheet-tabitemcell,
+.v-tabsheet-bar .v-tabsheet-spacertd {
+       height: 20px;
+}
+.v-tabsheet-bar .v-tabsheet-tabitemcell {
+       background: no-repeat;
+  background-image: url(common/img/vertical-sprites.png);
+  -background-image: url(common/img/vertical-sprites-ie6.png);
+  background-position: left -1551px;
+       padding-left: 3px;
+}
+.v-tabsheet-bar .v-tabsheet-tabitemcell-first {
+       padding-left: 6px;
+  background-image: url(common/img/vertical-sprites.png);
+  -background-image: url(common/img/vertical-sprites-ie6.png);
+  background-position: left -1571px;
+}
+.v-tabsheet-bar .v-tabsheet-tabitem,
+.v-tabsheet-bar .v-tabsheet-spacertd div {
+       border: none;
+       height: 20px;
+       background: transparent repeat-x;
+  background-image: url(common/img/vertical-sprites.png);
+  -background-image: url(common/img/vertical-sprites-ie6.png);
+  background-position: left -1591px;
+       padding: 0;
+       color: #222;
+       text-shadow: #fff 0 1px 0;
+       font-size: 11px;
+}
+.v-tabsheet-bar .v-tabsheet-tabitem .v-caption {
+       border: none;
+       height: 18px;
+       background: no-repeat right top;
+  background-image: url(common/img/vertical-sprites.png);
+  -background-image: url(common/img/vertical-sprites-ie6.png);
+  background-position: right -1611px;
+       padding: 2px 12px 0 10px;
+}
+.v-tabsheet-bar .v-tabsheet-tabitem .v-captiontext {
+       height: 16px;
+       line-height: 16px;
+}
+.v-tabsheet-bar .v-tabsheet-tabitemcell-selected {
+  background-image: url(common/img/vertical-sprites.png);
+  -background-image: url(common/img/vertical-sprites-ie6.png);
+  background-position: left -1631px;
+}
+.v-tabsheet-bar .v-tabsheet-tabitemcell-selected-first {
+  background-image: url(common/img/vertical-sprites.png);
+  -background-image: url(common/img/vertical-sprites-ie6.png);
+  background-position: left -1651px;
+}
+.v-tabsheet-bar .v-tabsheet-tabitem-selected {
+  background-image: url(common/img/vertical-sprites.png);
+  -background-image: url(common/img/vertical-sprites-ie6.png);
+  background-position: left -1671px;
+       color: #232930;
+}
+.v-tabsheet-bar .v-tabsheet-tabitem-selected .v-caption {
+  background-image: url(common/img/vertical-sprites.png);
+  -background-image: url(common/img/vertical-sprites-ie6.png);
+  background-position: right -1691px;
+}
+.v-tabsheet-bar .v-tabsheet-scroller {
+       margin-top: -19px;
+}
+
 /* ./WebContent/VAADIN/themes/reindeer/textfield/textfield.css */
 .v-textfield {
        line-height: normal;
@@ -3874,7 +3965,7 @@ td.v-datefield-calendarpanel-nextyear {
        background-repeat: repeat-x;
   background-image: url(common/img/vertical-sprites.png);
   -background-image: url(common/img/vertical-sprites-ie6.png);
-  background-position: left -1551px;
+  background-position: left -1711px;
        border-radius: 3px;
        -moz-border-radius: 3px;
        margin: 0;
@@ -4025,7 +4116,7 @@ input.v-textfield-readonly,
        background: #4d749f repeat-x;
   background-image: url(common/img/vertical-sprites.png);
   -background-image: url(common/img/vertical-sprites-ie6.png);
-  background-position: left -1574px;
+  background-position: left -1734px;
        color: #fff;
        padding: 1px 2px;
        -webkit-border-radius: 2px;
@@ -4081,7 +4172,7 @@ input.v-textfield-readonly,
        background: transparent repeat-x;
   background-image: url(common/img/vertical-sprites.png);
   -background-image: url(common/img/vertical-sprites-ie6.png);
-  background-position: left -1594px;
+  background-position: left -1754px;
 }
 .v-window-header {
        font-weight: bold;
@@ -4104,13 +4195,13 @@ input.v-textfield-readonly,
        background: transparent;
   background-image: url(common/img/vertical-sprites.png);
   -background-image: url(common/img/vertical-sprites-ie6.png);
-  background-position: left -1631px;
+  background-position: left -1791px;
 }
 .v-window-footer {
        background-repeat: repeat-x;
   background-image: url(common/img/vertical-sprites.png);
   -background-image: url(common/img/vertical-sprites-ie6.png);
-  background-position: left -1646px;
+  background-position: left -1806px;
        height: 15px;
 }
 .v-window-closebox {
@@ -4121,17 +4212,17 @@ input.v-textfield-readonly,
        background: transparent;
   background-image: url(common/img/vertical-sprites.png);
   -background-image: url(common/img/vertical-sprites-ie6.png);
-  background-position: left -1661px;
+  background-position: left -1821px;
 }
 .v-window-closebox:hover {
   background-image: url(common/img/vertical-sprites.png);
   -background-image: url(common/img/vertical-sprites-ie6.png);
-  background-position: left -1677px;
+  background-position: left -1837px;
 }
 .v-window-closebox:active {
   background-image: url(common/img/vertical-sprites.png);
   -background-image: url(common/img/vertical-sprites-ie6.png);
-  background-position: left -1693px;
+  background-position: left -1853px;
 }
 .v-window-contents {
        background: #fff;
@@ -4164,7 +4255,7 @@ input.v-textfield-readonly,
        height: 12px;
   background-image: url(common/img/vertical-sprites.png);
   -background-image: url(common/img/vertical-sprites-ie6.png);
-  background-position: left -1709px;
+  background-position: left -1869px;
 }
 .v-window-light .v-window-footer {
        background: transparent;
@@ -4177,17 +4268,17 @@ input.v-textfield-readonly,
        height: 15px;
   background-image: url(common/img/vertical-sprites.png);
   -background-image: url(common/img/vertical-sprites-ie6.png);
-  background-position: left -1721px;
+  background-position: left -1881px;
 }
 .v-window-light .v-window-closebox:hover {
   background-image: url(common/img/vertical-sprites.png);
   -background-image: url(common/img/vertical-sprites-ie6.png);
-  background-position: left -1736px;
+  background-position: left -1896px;
 }
 .v-window-light .v-window-closebox:active {
   background-image: url(common/img/vertical-sprites.png);
   -background-image: url(common/img/vertical-sprites-ie6.png);
-  background-position: left -1751px;
+  background-position: left -1911px;
 }
 .v-window-light .v-window-contents {
        background: transparent;
@@ -4197,7 +4288,7 @@ input.v-textfield-readonly,
        background: #f7f7f8 repeat-x;
   background-image: url(common/img/vertical-sprites.png);
   -background-image: url(common/img/vertical-sprites-ie6.png);
-  background-position: left -1766px;
+  background-position: left -1926px;
 }
 .v-ie6 .v-window-light .v-window-wrap2 {
        background-image: none;
diff --git a/WebContent/VAADIN/themes/reindeer/tabsheet/img/bar/tab-bg-sel.png b/WebContent/VAADIN/themes/reindeer/tabsheet/img/bar/tab-bg-sel.png
new file mode 100644 (file)
index 0000000..3c6b3a8
Binary files /dev/null and b/WebContent/VAADIN/themes/reindeer/tabsheet/img/bar/tab-bg-sel.png differ
diff --git a/WebContent/VAADIN/themes/reindeer/tabsheet/img/bar/tab-bg.png b/WebContent/VAADIN/themes/reindeer/tabsheet/img/bar/tab-bg.png
new file mode 100644 (file)
index 0000000..033e1cb
Binary files /dev/null and b/WebContent/VAADIN/themes/reindeer/tabsheet/img/bar/tab-bg.png differ
diff --git a/WebContent/VAADIN/themes/reindeer/tabsheet/img/bar/tab-first-left-sel.png b/WebContent/VAADIN/themes/reindeer/tabsheet/img/bar/tab-first-left-sel.png
new file mode 100644 (file)
index 0000000..30188fb
Binary files /dev/null and b/WebContent/VAADIN/themes/reindeer/tabsheet/img/bar/tab-first-left-sel.png differ
diff --git a/WebContent/VAADIN/themes/reindeer/tabsheet/img/bar/tab-first-left.png b/WebContent/VAADIN/themes/reindeer/tabsheet/img/bar/tab-first-left.png
new file mode 100644 (file)
index 0000000..207a0a9
Binary files /dev/null and b/WebContent/VAADIN/themes/reindeer/tabsheet/img/bar/tab-first-left.png differ
diff --git a/WebContent/VAADIN/themes/reindeer/tabsheet/img/bar/tab-left-sel.png b/WebContent/VAADIN/themes/reindeer/tabsheet/img/bar/tab-left-sel.png
new file mode 100644 (file)
index 0000000..5aa0df6
Binary files /dev/null and b/WebContent/VAADIN/themes/reindeer/tabsheet/img/bar/tab-left-sel.png differ
diff --git a/WebContent/VAADIN/themes/reindeer/tabsheet/img/bar/tab-left.png b/WebContent/VAADIN/themes/reindeer/tabsheet/img/bar/tab-left.png
new file mode 100644 (file)
index 0000000..78a0bd6
Binary files /dev/null and b/WebContent/VAADIN/themes/reindeer/tabsheet/img/bar/tab-left.png differ
diff --git a/WebContent/VAADIN/themes/reindeer/tabsheet/img/bar/tab-right-sel.png b/WebContent/VAADIN/themes/reindeer/tabsheet/img/bar/tab-right-sel.png
new file mode 100644 (file)
index 0000000..acb8ace
Binary files /dev/null and b/WebContent/VAADIN/themes/reindeer/tabsheet/img/bar/tab-right-sel.png differ
diff --git a/WebContent/VAADIN/themes/reindeer/tabsheet/img/bar/tab-right.png b/WebContent/VAADIN/themes/reindeer/tabsheet/img/bar/tab-right.png
new file mode 100644 (file)
index 0000000..7aedf4c
Binary files /dev/null and b/WebContent/VAADIN/themes/reindeer/tabsheet/img/bar/tab-right.png differ
index 2f7fbd8fb745cf7e6d7c98e1b5f015e34caa6c45..c5c9b03d8b134709af97d84a0ae52ad819d332f7 100644 (file)
 
 
 
-/* Framed style */
+/**
+ * Framed style ---------------
+ */
 .v-tabsheet-framed .v-tabsheet-tabitemcell,
 .v-tabsheet-framed .v-tabsheet-spacertd {
        height: 32px;
-       padding: 0;
 }
 .v-tabsheet-framed .v-tabsheet-tabitemcell {
        background: no-repeat;
        background-image: url(img/framed/tab-left.png); /** sprite-ref: verticals */
-       padding: 0 0 0 3px;
+       padding-left: 3px;
 }
 .v-tabsheet-framed .v-tabsheet-tabitemcell-first {
        padding-left: 10px;
 }
 .v-tabsheet-framed .v-tabsheet-scroller button {
        margin-top: 7px;
+}
+
+
+
+
+/**
+ * Bar style ---------------
+ */
+.v-tabsheet-bar .v-tabsheet-tabitemcell,
+.v-tabsheet-bar .v-tabsheet-spacertd {
+       height: 20px;
+}
+.v-tabsheet-bar .v-tabsheet-tabitemcell {
+       background: no-repeat;
+       background-image: url(img/bar/tab-left.png); /** sprite-ref: verticals */
+       padding-left: 3px;
+}
+.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 {
+       border: none;
+       height: 20px;
+       background: transparent repeat-x;
+       background-image: url(img/bar/tab-bg.png); /** sprite-ref: verticals; sprite-alignment: repeat */
+       padding: 0;
+       color: #222;
+       text-shadow: #fff 0 1px 0;
+       font-size: 11px;
+}
+.v-tabsheet-bar .v-tabsheet-tabitem .v-caption {
+       border: none;
+       height: 18px;
+       background: no-repeat right top;
+       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-captiontext {
+       height: 16px;
+       line-height: 16px;
+}
+.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;
 }
\ No newline at end of file
index b43781f22d990d57e0abf7c424baae1f563e9d34..898a7703161f0d83753d0e8adee1a20288c0eba7 100644 (file)
        background: transparent url(info-bubble-top.png) no-repeat 0 -44px;
        border: none;
 }
+.v-app-SamplerApplication .feature-info .v-panel-content > div {
+       background: transparent;
+}
 .v-app-SamplerApplication .v-panel-deco-feature-info {
        height: 28px;
        background: transparent url(info-bubble-bottom.png);