lixinru
/
YtIoT


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549
							<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>The source code</title>
  <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
  <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
  <style type="text/css">
    .highlight { display: block; background-color: #ddd; }
  </style>
  <script type="text/javascript">
    function highlight() {
      document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
    }
  </script>
</head>
<body onload="prettyPrint(); highlight();">
  <pre class="prettyprint lang-js"><span id='Ext-tab-Tab-css_mixin-extjs-tab'>/**
</span> * Creates the base structure of a Tab.
 * @member Ext.tab.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;

        button {
            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-x: visible;

            &amp;::-moz-focus-inner {
                border: 0;
                padding: 0;
            }

            .#{$prefix}tab-inner {
                background-color: transparent;
                background-repeat: no-repeat;
                background-position: 0 -2px;
                display: block;
                text-align: center;
                white-space: nowrap;
                text-overflow: ellipsis;
                -o-text-overflow: ellipsis;
                overflow: hidden;
            }
        }

        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);
        }
    }

    // corrects text being clipped at the bottom in safari4 &amp; 5.0.5
    .#{$prefix}safari4,
    .#{$prefix}safari5_0 {
        .#{$prefix}tab-default-top .#{$prefix}tab-inner {
            line-height: $tab-height - $framepad * 2 - top($tab-top-border-width) - 2;
        }
    }

    .#{$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;

        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;
        }
    }

    .#{$prefix}tab button {
        position: relative;
    }

    .#{$prefix}tab-icon {
        position: absolute;
        background-repeat: no-repeat;
        background-position: 0 -1px;
        top: 0;
        left: 0;
        right: auto;
        bottom: 0;
        width: 18px;
        height: 18px;
    }

    // Stop icons being clipped by the bottom of the button element
    .#{$prefix}strict {
        .#{$prefix}ie8 .#{$prefix}tab button,
        .#{$prefix}ie9 .#{$prefix}tab button {
            overflow-y: visible;
        }
    }

    .#{$prefix}tab-default-disabled .#{$prefix}tab-icon {
        @include opacity(.5);
    }

    /* In IE a disabled icon needs to be hidden or the opacity effect covers some of the text */
    .#{$prefix}tab-noicon .#{$prefix}tab-icon {
        display: none;
    }

    //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;
            }
        }
    }

    .#{$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);
    }

    //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;
            }
        }
    }

    .#{$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);
    }

    //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;
            }
        }
    }

    .#{$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);
    }

    @if not $supports-gradients or $compile-all {
        .#{$prefix}nlg {
            @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'); }
            }

            @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'); }
            }

            @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'); }
            }

            @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; }
            }
        }
    }

    .#{$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: no-repeat;
        background-image: theme-background-image($theme-name, $tab-closable-icon);
        @include opacity(.6);
    }

    .#{$prefix}nbr .#{$prefix}tab-close-btn {
        top: $nbr-tab-closable-icon-top;
        right: $nbr-tab-closable-icon-right;
    }

    /* Include the element name otherwise Internet Explorer 7 &amp; 8 take a performance hit */
    a.#{$prefix}tab-close-btn:hover {
        @include opacity(1);
    }

    /* Include the element name to raise the specificity to equal the :hover */
    .#{$prefix}tab-default-disabled a.#{$prefix}tab-close-btn {
        @include opacity(0.3);
    }

    @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-background-image($theme-name, 'tab/tab-default-top-over-corners.gif');
                }
                .#{$prefix}frame-ml,
                .#{$prefix}frame-mr {
                    background-image: theme-background-image($theme-name, 'tab/tab-default-top-over-sides.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');
                    }
                }
            }

            .#{$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-background-image($theme-name, 'tab/tab-default-bottom-over-corners.gif');
                }
                .#{$prefix}frame-ml,
                .#{$prefix}frame-mr {
                    background-image: theme-background-image($theme-name, 'tab/tab-default-bottom-over-sides.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');
                    }
                }
            }

            .#{$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-background-image($theme-name, 'tab/tab-default-top-active-corners.gif');
                }
                .#{$prefix}frame-ml,
                .#{$prefix}frame-mr {
                    background-image: theme-background-image($theme-name, 'tab/tab-default-top-active-sides.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');
                    }
                }
            }

            .#{$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-background-image($theme-name, 'tab/tab-default-bottom-active-corners.gif');
                }
                .#{$prefix}frame-ml,
                .#{$prefix}frame-mr {
                    background-image: theme-background-image($theme-name, 'tab/tab-default-bottom-active-sides.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');
                    }
                }
            }

            .#{$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-background-image($theme-name, 'tab/tab-default-top-disabled-corners.gif');
                }
                .#{$prefix}frame-ml,
                .#{$prefix}frame-mr {
                    background-image: theme-background-image($theme-name, 'tab/tab-default-top-disabled-sides.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');
                    }
                }
            }

            .#{$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-background-image($theme-name, 'tab/tab-default-bottom-disabled-corners.gif');
                }
                .#{$prefix}frame-ml,
                .#{$prefix}frame-mr {
                    background-image: theme-background-image($theme-name, 'tab/tab-default-bottom-disabled-sides.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');
                    }
                }
            }
        }
    }
}
</pre>
</body>
</html>