Updated themes for TabPanel

Author: pborissow

themes/dark.css

@@ -527,6 +527,72 @@ input, select, textarea { /* Allows overriding native style of form elements on
 }
 
 
+/**************************************************************************/
+/** Tab Panel
+/**************************************************************************/
+/** The following classes are used to define the style for the tab panel.
+ */
+
+.tab-panel {
+    padding: 0 5px;
+}
+
+.tab-bar {
+    background-color: #335177; /* same as windows header */
+    height: 30px;
+    color: #fff;
+    border: 1px solid #2e588d;
+    border-width: 0 1px;
+    color: #bdbdbd;
+}
+
+.tab-active, .tab-inactive {
+    padding: 0 12px;
+    line-height: 30px;
+    cursor: default;
+}
+
+.tab-active {
+    background-color: #256d95;
+    color: #fff;
+}
+
+.tab-inactive {
+    background: none;
+}
+
+.tab-inactive:hover {
+    background-color: #3387b7;
+    color: #fff;
+}
+
+.tab-body {
+    padding: 7px;
+    vertical-align: top;
+    background-color: #3e4453;
+    border: 1px solid #4f5669;
+}
+
+
+
+/** Special case when tab is the first component inside a window  **/
+
+.window-body table:first-child .tab-bar {
+    background-color: #405672;
+}
+
+.window-body table:first-child .tab-active {
+    border-top: 2px solid #4a84b7;
+    margin-top: -2px;
+}
+
+.window-body table:first-child .tab-body {
+    border: 0 none;
+    border-radius: 0 0 8px 8px;
+}
+
+
+
 /**************************************************************************/
 /** Checkbox
 /**************************************************************************/

themes/default.css

@@ -645,6 +645,67 @@ select:focus, textarea:focus, input:focus{
 }
 
 
+
+/**************************************************************************/
+/** Tab Panel
+/**************************************************************************/
+/** The following classes are used to define the style for the tab panel.
+ */
+
+.tab-panel {
+    padding: 0 5px;
+}
+
+.tab-bar {
+    background-color: #0f6391; /* same as windows header */
+    height: 30px;
+    color: #fff;
+    border: 1px solid #6393bf;
+    border-width: 0 1px;
+}
+
+.tab-active, .tab-inactive {
+    padding: 0 12px;
+    line-height: 30px;
+    cursor: default;
+}
+
+.tab-active {
+    background-color: #379ad1;
+}
+
+.tab-inactive {
+    background: none;
+}
+
+.tab-inactive:hover {
+    background-color: #3dabe9;
+}
+
+.tab-body {
+    padding: 0;
+    background-color: #fff;
+    border: 1px solid #ccc;
+    vertical-align: top;
+}
+
+/** Special case when tab is the first component inside a window  **/
+
+.window-body table:first-child .tab-bar {
+    background-color: #208EC9;
+}
+
+.window-body table:first-child .tab-active {
+    background-color: #379ad1;
+    border-top: 2px solid #69b9ff;
+    margin-top: -2px;
+}
+
+.window-body table:first-child .tab-body {
+    border: 0 none;
+    border-radius: 0 0 8px 8px;
+}
+
 /**************************************************************************/
 /** Table
 /**************************************************************************/

themes/default.js

@@ -18,6 +18,7 @@ javaxt.dhtml.style.default = {
         title: "panel-title window-title",
         button: "window-header-button",
         buttonBar: "window-header-button-bar",
+        body: "window-body",
         mask: "window-mask"
     },
 
@@ -87,7 +88,10 @@ javaxt.dhtml.style.default = {
     },
 
     tabPanel: {
-
+        tabBar: "tab-bar",
+        activeTab: "tab-active",
+        inactiveTab: "tab-inactive",
+        tabBody: "tab-body"
     },
 
     switch: {