git.ithinksw.org / extjs.git / blobdiff
? search:
summary | shortlog | log | commit | commitdiff | tree
raw | inline | side by side
Upgrade to ExtJS 4.0.7 - Released 10/19/2011
[extjs.git] / resources / themes / stylesheets / ext4 / default / widgets / _tab.scss
diff --git a/resources/themes/stylesheets/ext4/default/widgets/_tab.scss b/resources/themes/stylesheets/ext4/default/widgets/_tab.scss
index 15f479c..860c001 100644 (file)
--- a/resources/themes/stylesheets/ext4/default/widgets/_tab.scss
+++ b/resources/themes/stylesheets/ext4/default/widgets/_tab.scss
@@ -77,7 +77,7 @@
             .#{$prefix}tab-inner {
                 background-color: transparent;
                 background-repeat: no-repeat;
-                background-position: 0 -1px;
+                background-position: 0 -2px;
                 display: block;
                 text-align: center;
                 white-space: nowrap;
@@ -89,6 +89,10 @@
         }
     }
 
+    .#{$prefix}tab-disabled {
+        @include opacity(1);
+    }
+
     .#{$prefix}border-box {
         .#{$prefix}tab-default-top {
             height: $tab-height + top($tabbar-top-strip-border-width);
@@ -207,6 +211,23 @@
         }
     }
 
+    .#{$prefix}tab {
+        button, a {
+            position: relative;
+
+            .#{$prefix}tab-icon {
+                position: absolute;
+                background-repeat: no-repeat;
+                top: 0;
+                left:0;
+                right:auto;
+                bottom:0;
+                width: 18px;
+                height: 18px;
+            }
+        }
+    }
+
     //over
     .#{$prefix}tab-over {
         @if $tab-border-color-over != $tab-border-color {
@@ -229,19 +250,11 @@
         }
     }
 
-    @if $tab-background-gradient-over != $tab-background-gradient {
-        .#{$prefix}tab-top-over {
-            @include background-gradient($tab-base-color-over, $tab-background-gradient-over, top);
-        }
-        .#{$prefix}tab-bottom-over {
-            @include background-gradient($tab-base-color-over, $tab-background-gradient-over, bottom);
-        }
+    .#{$prefix}tab-top-over {
+        @include background-gradient($tab-base-color-over, $tab-background-gradient-over, top);
     }
-    @else if $tab-base-color-over != $tab-base-color {
-        .#{$prefix}tab-top-over,
-        .#{$prefix}tab-bottom-over {
-            background-color: $tab-base-color-over;
-        }
+    .#{$prefix}tab-bottom-over {
+        @include background-gradient($tab-base-color-over, $tab-background-gradient-over, bottom);
     }
 
     //active
@@ -267,19 +280,11 @@
         }
     }
 
-    @if $tab-background-gradient-active != $tab-background-gradient {
-        .#{$prefix}tab-top-active {
-            @include background-gradient($tab-base-color-active, $tab-background-gradient-active, top);
-        }
-        .#{$prefix}tab-bottom-active {
-            @include background-gradient($tab-base-color-active, $tab-background-gradient-active, bottom);
-        }
+    .#{$prefix}tab-top-active {
+        @include background-gradient($tab-base-color-active, $tab-background-gradient-active, top);
     }
-    @else if $tab-base-color-active != $tab-base-color {
-        .#{$prefix}tab-top-active,
-        .#{$prefix}tab-bottom-active {
-            background-color: $tab-base-color-active;
-        }
+    .#{$prefix}tab-bottom-active {
+        @include background-gradient($tab-base-color-active, $tab-background-gradient-active, bottom);
     }
 
     //disabled
@@ -304,38 +309,38 @@
         }
     }
 
-    @if $tab-background-gradient-disabled != $tab-background-gradient {
-        .#{$prefix}tab-top-disabled {
-            background-image: none;
-            background: transparent;
-            @include background-gradient($tab-base-color-disabled, $tab-background-gradient-disabled, top);
-        }
-        .#{$prefix}tab-bottom-disabled {
-            background-image: none;
-            background: transparent;
-            @include background-gradient($tab-base-color-disabled, $tab-background-gradient-disabled, bottom);
-        }
+    .#{$prefix}tab-top-disabled {
+        background-image: none;
+        background: transparent;
+        @include background-gradient($tab-base-color-disabled, $tab-background-gradient-disabled, top);
     }
-    @else if $tab-base-color-disabled != $tab-base-color {
-        .#{$prefix}tab-top-disabled,
-        .#{$prefix}tab-bottom-disabled {
-            background-color: $tab-base-color-disabled;
-        }
+    .#{$prefix}tab-bottom-disabled {
+        background-image: none;
+        background: transparent;
+        @include background-gradient($tab-base-color-disabled, $tab-background-gradient-disabled, bottom);
     }
 
     @if not $supports-gradients or $compile-all {
         .#{$prefix}nlg {
-            .#{$prefix}tab-top { background-image: theme-image($theme-name, 'tab/tab-default-top-bg.gif'); }
-            .#{$prefix}tab-bottom { background-image: theme-image($theme-name, 'tab/tab-default-bottom-bg.gif'); }
+            @if $tab-background-gradient != null {
+                .#{$prefix}tab-top { background-image: theme-background-image($theme-name, 'tab/tab-default-top-bg.gif'); }
+                .#{$prefix}tab-bottom { background-image: theme-background-image($theme-name, 'tab/tab-default-bottom-bg.gif'); }
+            }
 
-            .#{$prefix}tab-top-over { background-image: theme-image($theme-name, 'tab/tab-default-top-over-bg.gif'); }
-            .#{$prefix}tab-bottom-over { background-image: theme-image($theme-name, 'tab/tab-default-bottom-over-bg.gif'); }
+            @if $tab-background-gradient-over != null {
+                .#{$prefix}tab-top-over { background-image: theme-background-image($theme-name, 'tab/tab-default-top-over-bg.gif'); }
+                .#{$prefix}tab-bottom-over { background-image: theme-background-image($theme-name, 'tab/tab-default-bottom-over-bg.gif'); }
+            }
 
-            .#{$prefix}tab-top-active { background-image: theme-image($theme-name, 'tab/tab-default-top-active-bg.gif'); }
-            .#{$prefix}tab-bottom-active { background-image: theme-image($theme-name, 'tab/tab-default-bottom-active-bg.gif'); }
+            @if $tab-background-gradient-active != null {
+                .#{$prefix}tab-top-active { background-image: theme-background-image($theme-name, 'tab/tab-default-top-active-bg.gif'); }
+                .#{$prefix}tab-bottom-active { background-image: theme-background-image($theme-name, 'tab/tab-default-bottom-active-bg.gif'); }
+            }
 
-            .#{$prefix}tab-top-disabled { background-image: theme-image($theme-name, 'tab/tab-default-top-disabled-bg.gif') !important; }
-            .#{$prefix}tab-bottom-disabled { background-image: theme-image($theme-name, 'tab/tab-default-bottom-disabled-bg.gif') !important; }
+            @if $tab-background-gradient-disabled != null {
+                .#{$prefix}tab-top-disabled { background-image: theme-background-image($theme-name, 'tab/tab-default-top-disabled-bg.gif') !important; }
+                .#{$prefix}tab-bottom-disabled { background-image: theme-background-image($theme-name, 'tab/tab-default-bottom-disabled-bg.gif') !important; }
+            }
         }
     }
 
@@ -344,7 +349,7 @@
     }
 
     .#{$prefix}tab-close-btn {
-        position: absolute;
+        position: absolute !important;
         top: $tab-closable-icon-top;
         right: $tab-closable-icon-right;
         width: $tab-closable-icon-width;
@@ -352,7 +357,8 @@
         font-size: 0;
         line-height: 0;
         text-indent: -999px;
-        background: theme-image($theme-name, $tab-closable-icon) no-repeat;
+        background: no-repeat;
+        background-image: theme-background-image($theme-name, $tab-closable-icon);
         @include opacity(.6);
     }
     .#{$prefix}tab-close-btn:hover {
@@ -368,16 +374,18 @@
                 .#{$prefix}frame-br,
                 .#{$prefix}frame-tc,
                 .#{$prefix}frame-bc {
-                    background-image: theme-image($theme-name, 'tab/tab-default-top-over-corners.gif');
+                    background-image: theme-background-image($theme-name, 'tab/tab-default-top-over-corners.gif');
                 }
                 .#{$prefix}frame-ml,
                 .#{$prefix}frame-mr {
-                    background-image: theme-image($theme-name, 'tab/tab-default-top-over-sides.gif');
+                    background-image: theme-background-image($theme-name, 'tab/tab-default-top-over-sides.gif');
                 }
-                .#{$prefix}frame-mc {
-                    background-color: $tab-base-color-over;
-                    background-repeat: repeat-x;
-                    background-image: theme-image($theme-name, 'tab/tab-default-top-over-bg.gif');
+                @if $tab-background-gradient-over != null {
+                    .#{$prefix}frame-mc {
+                        background-color: $tab-base-color-over;
+                        background-repeat: repeat-x;
+                        background-image: theme-background-image($theme-name, 'tab/tab-default-top-over-bg.gif');
+                    }
                 }
             }
 
@@ -388,16 +396,18 @@
                 .#{$prefix}frame-br,
                 .#{$prefix}frame-tc,
                 .#{$prefix}frame-bc {
-                    background-image: theme-image($theme-name, 'tab/tab-default-bottom-over-corners.gif');
+                    background-image: theme-background-image($theme-name, 'tab/tab-default-bottom-over-corners.gif');
                 }
                 .#{$prefix}frame-ml,
                 .#{$prefix}frame-mr {
-                    background-image: theme-image($theme-name, 'tab/tab-default-bottom-over-sides.gif');
+                    background-image: theme-background-image($theme-name, 'tab/tab-default-bottom-over-sides.gif');
                 }
-                .#{$prefix}frame-mc {
-                    background-color: $tab-base-color-over;
-                    background-repeat: repeat-x;
-                    background-image: theme-image($theme-name, 'tab/tab-default-bottom-over-bg.gif');
+                @if $tab-background-gradient-over != null {
+                    .#{$prefix}frame-mc {
+                        background-color: $tab-base-color-over;
+                        background-repeat: repeat-x;
+                        background-image: theme-background-image($theme-name, 'tab/tab-default-bottom-over-bg.gif');
+                    }
                 }
             }
 
@@ -408,16 +418,18 @@
                 .#{$prefix}frame-br,
                 .#{$prefix}frame-tc,
                 .#{$prefix}frame-bc {
-                    background-image: theme-image($theme-name, 'tab/tab-default-top-active-corners.gif');
+                    background-image: theme-background-image($theme-name, 'tab/tab-default-top-active-corners.gif');
                 }
                 .#{$prefix}frame-ml,
                 .#{$prefix}frame-mr {
-                    background-image: theme-image($theme-name, 'tab/tab-default-top-active-sides.gif');
+                    background-image: theme-background-image($theme-name, 'tab/tab-default-top-active-sides.gif');
                 }
-                .#{$prefix}frame-mc {
-                    background-color: $tab-base-color-active;
-                    background-repeat: repeat-x;
-                    background-image: theme-image($theme-name, 'tab/tab-default-top-active-bg.gif');
+                @if $tab-background-gradient-active != null {
+                    .#{$prefix}frame-mc {
+                        background-color: $tab-base-color-active;
+                        background-repeat: repeat-x;
+                        background-image: theme-background-image($theme-name, 'tab/tab-default-top-active-bg.gif');
+                    }
                 }
             }
 
@@ -428,16 +440,18 @@
                 .#{$prefix}frame-br,
                 .#{$prefix}frame-tc,
                 .#{$prefix}frame-bc {
-                    background-image: theme-image($theme-name, 'tab/tab-default-bottom-active-corners.gif');
+                    background-image: theme-background-image($theme-name, 'tab/tab-default-bottom-active-corners.gif');
                 }
                 .#{$prefix}frame-ml,
                 .#{$prefix}frame-mr {
-                    background-image: theme-image($theme-name, 'tab/tab-default-bottom-active-sides.gif');
+                    background-image: theme-background-image($theme-name, 'tab/tab-default-bottom-active-sides.gif');
                 }
-                .#{$prefix}frame-mc {
-                    background-color: $tab-base-color-active;
-                    background-repeat: repeat-x;
-                    background-image: theme-image($theme-name, 'tab/tab-default-bottom-active-bg.gif');
+                @if $tab-background-gradient-active != null {
+                    .#{$prefix}frame-mc {
+                        background-color: $tab-base-color-active;
+                        background-repeat: repeat-x;
+                        background-image: theme-background-image($theme-name, 'tab/tab-default-bottom-active-bg.gif');
+                    }
                 }
             }
 
@@ -448,15 +462,17 @@
                 .#{$prefix}frame-br,
                 .#{$prefix}frame-tc,
                 .#{$prefix}frame-bc {
-                    background-image: theme-image($theme-name, 'tab/tab-default-top-disabled-corners.gif');
+                    background-image: theme-background-image($theme-name, 'tab/tab-default-top-disabled-corners.gif');
                 }
                 .#{$prefix}frame-ml,
                 .#{$prefix}frame-mr {
-                    background-image: theme-image($theme-name, 'tab/tab-default-top-disabled-sides.gif');
+                    background-image: theme-background-image($theme-name, 'tab/tab-default-top-disabled-sides.gif');
                 }
-                .#{$prefix}frame-mc {
-                    background-repeat: repeat-x;
-                    background-image: theme-image($theme-name, 'tab/tab-default-top-disabled-bg.gif');
+                @if $tab-background-gradient-disabled != null {
+                    .#{$prefix}frame-mc {
+                        background-repeat: repeat-x;
+                        background-image: theme-background-image($theme-name, 'tab/tab-default-top-disabled-bg.gif');
+                    }
                 }
             }
 
@@ -467,15 +483,17 @@
                 .#{$prefix}frame-br,
                 .#{$prefix}frame-tc,
                 .#{$prefix}frame-bc {
-                    background-image: theme-image($theme-name, 'tab/tab-default-bottom-disabled-corners.gif');
+                    background-image: theme-background-image($theme-name, 'tab/tab-default-bottom-disabled-corners.gif');
                 }
                 .#{$prefix}frame-ml,
                 .#{$prefix}frame-mr {
-                    background-image: theme-image($theme-name, 'tab/tab-default-bottom-disabled-sides.gif');
+                    background-image: theme-background-image($theme-name, 'tab/tab-default-bottom-disabled-sides.gif');
                 }
-                .#{$prefix}frame-mc {
-                    background-repeat: repeat-x;
-                    background-image: theme-image($theme-name, 'tab/tab-default-bottom-disabled-bg.gif');
+                @if $tab-background-gradient-disabled != null {
+                    .#{$prefix}frame-mc {
+                        background-repeat: repeat-x;
+                        background-image: theme-background-image($theme-name, 'tab/tab-default-bottom-disabled-bg.gif');
+                    }
                 }
             }
         }
Mirror of ExtJS by Sencha Inc. <http://www.sencha.com/>.