X-Git-Url: http://git.ithinksw.org/extjs.git/blobdiff_plain/0494b8d9b9bb03ab6c22b34dae81261e3cd7e3e6..7a654f8d43fdb43d78b63d90528bed6e86b608cc:/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
new file mode 100644
index 00000000..15f479c7
--- /dev/null
+++ b/resources/themes/stylesheets/ext4/default/widgets/_tab.scss
@@ -0,0 +1,483 @@
+/**
+  * @class Ext.Tab
+  */
+@mixin extjs-tab {
+    @include x-frame(
+        $cls: 'tab',
+        $ui: 'default-top',
+        $border-radius: $tab-top-border-radius,
+        $border-width: $tab-top-border-width,
+        $background-color: $tab-base-color,
+        $background-gradient: $tab-background-gradient,
+        $background-direction: top,
+        $table: true
+    );
+
+    @include x-frame(
+        $cls: 'tab',
+        $ui: 'default-bottom',
+        $border-radius: $tab-bottom-border-radius,
+        $border-width: $tab-bottom-border-width,
+        $background-color: $tab-base-color,
+        $background-gradient: $tab-background-gradient,
+        $background-direction: bottom,
+        $table: true
+    );
+
+    .#{$prefix}tab {
+        z-index: 1;
+        margin: 0 0 0 $tab-spacing;
+        display: inline-block;
+        zoom: 1;
+        *display: inline;
+        white-space: nowrap;
+        height: $tab-height;
+        border-color: $tab-border-color;
+        cursor: pointer;
+        cursor: hand;
+
+        * {
+            cursor: pointer;
+            cursor: hand;
+        }
+
+        em {
+            display: block;
+            padding: 0 6px;
+            line-height: 1px;
+        }
+
+        button {
+            background: none;
+            border: 0;
+            padding: 0;
+            margin: 0;
+            -webkit-appearance: none;
+            font-size: $tab-font-size;
+            @if $tab-font-weight {
+                font-weight: $tab-font-weight;
+            }
+            @if $tab-font-family {
+                $font-family: $tab-font-family;
+            }
+
+            color: $tab-color;
+            outline: 0 none;
+
+            overflow: hidden;
+            overflow-x: visible;
+            -o-text-overflow: ellipsis;
+            text-overflow: ellipsis;
+
+            &::-moz-focus-inner {
+                border: 0;
+                padding: 0;
+            }
+
+            .#{$prefix}tab-inner {
+                background-color: transparent;
+                background-repeat: no-repeat;
+                background-position: 0 -1px;
+                display: block;
+                text-align: center;
+                white-space: nowrap;
+            }
+        }
+
+        img {
+            display: none;
+        }
+    }
+
+    .#{$prefix}border-box {
+        .#{$prefix}tab-default-top {
+            height: $tab-height + top($tabbar-top-strip-border-width);
+        }
+        .#{$prefix}tab-default-bottom {
+            height: $tab-height + bottom($tabbar-bottom-strip-border-width);
+        }
+    }
+
+    @if $include-ie {
+        * html .#{$prefix}ie {
+            .#{$prefix}tab button {
+                width: 1px;
+            }
+        }
+
+        .#{$prefix}strict .#{$prefix}ie6,
+        .#{$prefix}strict .#{$prefix}ie7 {
+            .#{$prefix}tab .#{$prefix}frame-mc {
+                height: 100%;
+            }
+        }
+
+        .#{$prefix}ie .#{$prefix}tab-active button:active {
+            position: relative;
+            top: -1px;
+            left: -1px;
+        }
+    }
+
+    $framepad: max(top($tab-top-border-radius), right($tab-top-border-radius)) - top($tab-top-border-width);
+
+    .#{$prefix}tab-default-top {
+        @if $tab-inner-border {
+            @include inner-border(
+                $width: $tab-top-inner-border-width,
+                $color: $tab-inner-border-color
+            );
+        }
+
+        border-bottom: 1px solid $tabbar-strip-border-color !important;
+
+        em {
+            padding-bottom: $framepad;
+        }
+
+        button,
+        .#{$prefix}tab-inner {
+            height: $tab-height - $framepad * 2 - top($tab-top-border-width);
+            line-height: $tab-height - $framepad * 2 - top($tab-top-border-width);
+        }
+    }
+
+    .#{$prefix}nbr .#{$prefix}tab-default-top {
+        border-bottom-width: 1px !important;
+    }
+
+    .#{$prefix}tab-default-top-active {
+        border-bottom-color: $tabbar-strip-background-color !important;
+    }
+
+    $framepad: max(bottom($tab-bottom-border-radius), left($tab-bottom-border-radius)) - bottom($tab-bottom-border-width);
+
+    .#{$prefix}tab-default-bottom {
+        @if $tab-inner-border {
+            @include inner-border(
+                $width: $tab-bottom-inner-border-width,
+                $color: $tab-inner-border-color
+            );
+        }
+
+        border-top: 1px solid $tabbar-strip-border-color !important;
+
+        @include inner-border(
+            $width: $tab-bottom-inner-border-width,
+            $color: $tab-inner-border-color
+        );
+
+        em {
+            padding-top: $framepad;
+        }
+
+        button,
+        .#{$prefix}tab-inner {
+            height: $tab-height - $framepad * 2 - bottom($tab-bottom-border-width);
+            line-height: $tab-height - $framepad * 2 - bottom($tab-bottom-border-width);
+        }
+    }
+
+    .#{$prefix}nbr .#{$prefix}tab-default-bottom {
+        border-top-width: 1px !important;
+    }
+
+    .#{$prefix}tab-default-bottom-active {
+        border-top-color: $tabbar-strip-background-color !important;
+    }
+
+    .#{$prefix}tab-default-disabled {
+        cursor: default;
+
+        * {
+            cursor: default;
+        }
+
+        border-color: $tab-border-color-disabled;
+        @include background-gradient($tab-base-color-disabled, $tab-background-gradient-disabled);
+
+        button {
+            color: $tab-color-disabled !important;
+        }
+    }
+
+    .#{$prefix}tab-icon-text-left {
+        .#{$prefix}tab-inner {
+            padding-left: 20px;
+        }
+    }
+
+    //over
+    .#{$prefix}tab-over {
+        @if $tab-border-color-over != $tab-border-color {
+            border-color: $tab-border-color-over;
+        }
+
+        button {
+            @if $tab-color-over != $tab-color {
+                color: $tab-color-over;
+            }
+            @if $tab-font-weight-over != $tab-font-weight {
+                font-weight: $tab-font-weight-over;
+            }
+            @if $tab-font-size-over != $tab-font-size {
+                font-size: $tab-font-size-over;
+            }
+            @if $tab-font-family-over != $tab-font-family {
+                font-family: $tab-font-family-over;
+            }
+        }
+    }
+
+    @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);
+        }
+    }
+    @else if $tab-base-color-over != $tab-base-color {
+        .#{$prefix}tab-top-over,
+        .#{$prefix}tab-bottom-over {
+            background-color: $tab-base-color-over;
+        }
+    }
+
+    //active
+    .#{$prefix}tab-active {
+        z-index: 3;
+        @if $tab-border-color-active != $tab-border-color {
+            border-color: $tab-border-color-active;
+        }
+
+        button {
+            @if $tab-color-active != $tab-color {
+                color: $tab-color-active;
+            }
+            @if $tab-font-weight-active != $tab-font-weight {
+                font-weight: $tab-font-weight-active;
+            }
+            @if $tab-font-size-active != $tab-font-size {
+                font-size: $tab-font-size-active;
+            }
+            @if $tab-font-family-active != $tab-font-family {
+                font-family: $tab-font-family-active;
+            }
+        }
+    }
+
+    @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);
+        }
+    }
+    @else if $tab-base-color-active != $tab-base-color {
+        .#{$prefix}tab-top-active,
+        .#{$prefix}tab-bottom-active {
+            background-color: $tab-base-color-active;
+        }
+    }
+
+    //disabled
+    .#{$prefix}tab-disabled {
+        @if $tab-border-color-disabled != $tab-border-color {
+            border-color: $tab-border-color-disabled;
+        }
+
+        button {
+            @if $tab-color-disabled != $tab-color {
+                color: $tab-color-disabled;
+            }
+            @if $tab-font-weight-disabled != $tab-font-weight {
+                font-weight: $tab-font-weight-disabled;
+            }
+            @if $tab-font-size-disabled != $tab-font-size {
+                font-size: $tab-font-size-disabled;
+            }
+            @if $tab-font-family-disabled != $tab-font-family {
+                font-family: $tab-font-family-disabled;
+            }
+        }
+    }
+
+    @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);
+        }
+    }
+    @else if $tab-base-color-disabled != $tab-base-color {
+        .#{$prefix}tab-top-disabled,
+        .#{$prefix}tab-bottom-disabled {
+            background-color: $tab-base-color-disabled;
+        }
+    }
+
+    @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'); }
+
+            .#{$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'); }
+
+            .#{$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'); }
+
+            .#{$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; }
+        }
+    }
+
+    .#{$prefix}tab-closable em {
+        padding-right: $tab-closable-icon-width + 3;
+    }
+
+    .#{$prefix}tab-close-btn {
+        position: absolute;
+        top: $tab-closable-icon-top;
+        right: $tab-closable-icon-right;
+        width: $tab-closable-icon-width;
+        height: $tab-closable-icon-height;
+        font-size: 0;
+        line-height: 0;
+        text-indent: -999px;
+        background: theme-image($theme-name, $tab-closable-icon) no-repeat;
+        @include opacity(.6);
+    }
+    .#{$prefix}tab-close-btn:hover {
+        @include opacity(1);
+    }
+
+    @if not $supports-border-radius or $compile-all {
+        .#{$prefix}nbr {
+            .#{$prefix}tab-top-over {
+                .#{$prefix}frame-tl,
+                .#{$prefix}frame-bl,
+                .#{$prefix}frame-tr,
+                .#{$prefix}frame-br,
+                .#{$prefix}frame-tc,
+                .#{$prefix}frame-bc {
+                    background-image: theme-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');
+                }
+                .#{$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');
+                }
+            }
+
+            .#{$prefix}tab-bottom-over {
+                .#{$prefix}frame-tl,
+                .#{$prefix}frame-bl,
+                .#{$prefix}frame-tr,
+                .#{$prefix}frame-br,
+                .#{$prefix}frame-tc,
+                .#{$prefix}frame-bc {
+                    background-image: theme-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');
+                }
+                .#{$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');
+                }
+            }
+
+            .#{$prefix}tab-top-active {
+                .#{$prefix}frame-tl,
+                .#{$prefix}frame-bl,
+                .#{$prefix}frame-tr,
+                .#{$prefix}frame-br,
+                .#{$prefix}frame-tc,
+                .#{$prefix}frame-bc {
+                    background-image: theme-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');
+                }
+                .#{$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');
+                }
+            }
+
+            .#{$prefix}tab-bottom-active {
+                .#{$prefix}frame-tl,
+                .#{$prefix}frame-bl,
+                .#{$prefix}frame-tr,
+                .#{$prefix}frame-br,
+                .#{$prefix}frame-tc,
+                .#{$prefix}frame-bc {
+                    background-image: theme-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');
+                }
+                .#{$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');
+                }
+            }
+
+            .#{$prefix}tab-top-disabled {
+                .#{$prefix}frame-tl,
+                .#{$prefix}frame-bl,
+                .#{$prefix}frame-tr,
+                .#{$prefix}frame-br,
+                .#{$prefix}frame-tc,
+                .#{$prefix}frame-bc {
+                    background-image: theme-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');
+                }
+                .#{$prefix}frame-mc {
+                    background-repeat: repeat-x;
+                    background-image: theme-image($theme-name, 'tab/tab-default-top-disabled-bg.gif');
+                }
+            }
+
+            .#{$prefix}tab-bottom-disabled {
+                .#{$prefix}frame-tl,
+                .#{$prefix}frame-bl,
+                .#{$prefix}frame-tr,
+                .#{$prefix}frame-br,
+                .#{$prefix}frame-tc,
+                .#{$prefix}frame-bc {
+                    background-image: theme-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');
+                }
+                .#{$prefix}frame-mc {
+                    background-repeat: repeat-x;
+                    background-image: theme-image($theme-name, 'tab/tab-default-bottom-disabled-bg.gif');
+                }
+            }
+        }
+    }
+}