_tabbar.scss.html 5.19 KB
<!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">
@mixin tab-bar-top($toolbarCls, $bodyCls, $stripCls, $body-padding, $body-border-width, $strip-border-width, $strip-height) {
    .#{$prefix}#{$toolbarCls} {
        .#{$prefix}#{$bodyCls} {
            height: $tab-height;
            border-width: $body-border-width;
            padding: $body-padding;
        }

        .#{$prefix}#{$stripCls} {
            /*position strip from top rather than bottom to avoid off-by-one error in IE6*/
            top: $tab-height + top($body-border-width) + top($body-padding);
            border-width: $strip-border-width;
            height: $strip-height - vertical($strip-border-width);
        }
    }
    .#{$prefix}border-box {
        .#{$prefix}#{$toolbarCls} {
            .#{$prefix}#{$bodyCls} {
                height: $tab-height + vertical($body-border-width) + vertical($body-padding);
            }

            .#{$prefix}#{$stripCls} {
                height: $strip-height;
            }
        }
    }
}

@mixin tab-bar-bottom($toolbarCls, $bodyCls, $stripCls, $body-padding, $body-border-width, $strip-border-width, $strip-height) {
    .#{$prefix}#{$toolbarCls} {
        .#{$prefix}#{$bodyCls} {
            height: $tab-height;
            border-width: $body-border-width;
            padding: $body-padding;

            .#{$prefix}box-inner {
                position: relative;
                top: 0 - bottom($strip-border-width);
            }

            .#{$prefix}box-scroller,
            .#{$prefix}box-scroller-left,
            .#{$prefix}box-scroller-right {
                height: $tab-height + bottom($body-padding) + bottom($strip-border-width);
            }
        }

        .#{$prefix}#{$stripCls} {
            top: top($body-border-width);
            border-width: $strip-border-width;
            height: $strip-height - vertical($strip-border-width);
        }
    }
    .#{$prefix}border-box {
        .#{$prefix}#{$toolbarCls} {
            .#{$prefix}#{$bodyCls} {
                height: $tab-height + vertical($body-border-width) + vertical($body-padding);
            }

            .#{$prefix}#{$stripCls} {
                height: $strip-height;
            }
        }
    }
}

<span id='Ext-tab-Bar-css_mixin-extjs-tabbar'>/**
</span> * Creates a visual theme for TabBar
 * @member Ext.tab.Bar
 */
@mixin extjs-tabbar {
    .#{$prefix}tab-bar {
        position: relative;
        background-color: transparent;
        @include background-gradient($tabbar-base-color, $tabbar-background-gradient);
        font-size: $tab-font-size;
    }

    .#{$prefix}nlg .#{$prefix}tab-bar {
        background-image: theme-background-image($theme-name, 'tab-bar/tab-bar-default-bg.gif');
    }

    .#{$prefix}tab-bar-default-plain,
    .#{$prefix}nlg .#{$prefix}tab-bar-default-plain {
        background: transparent none;
    }


    .#{$prefix}tab-bar-body {
        border-style: solid;
        border-color: $tabbar-border-color;

        position: relative;
        z-index: 2;
        zoom: 1;
    }

    /* Top Tabs */
    @include tab-bar-top(
        &quot;tab-bar-top&quot;,
        &quot;tab-bar-body&quot;,
        &quot;tab-bar-strip&quot;,
        $tabbar-top-body-padding,
        $tabbar-top-body-border-width,
        $tabbar-top-strip-border-width,
        $tabbar-strip-height
    );
    @include tab-bar-top(
        &quot;tab-bar-top&quot;,
        &quot;tab-bar-body-default-plain&quot;,
        &quot;tab-bar-strip-default-plain&quot;,
        $tabbar-top-plain-body-padding,
        $tabbar-top-plain-body-border-width,
        $tabbar-top-strip-border-width,
        $tabbar-strip-height
    );

    /* Bottom Tabs */
    @include tab-bar-bottom(
        &quot;tab-bar-bottom&quot;,
        &quot;tab-bar-body&quot;,
        &quot;tab-bar-strip&quot;,
        $tabbar-bottom-body-padding,
        $tabbar-bottom-body-border-width,
        $tabbar-bottom-strip-border-width,
        $tabbar-strip-height
    );

    @include tab-bar-bottom(
        &quot;tab-bar-bottom&quot;,
        &quot;tab-bar-body-default-plain&quot;,
        &quot;tab-bar-strip-default-plain&quot;,
        $tabbar-bottom-plain-body-padding,
        $tabbar-bottom-plain-body-border-width,
        $tabbar-bottom-strip-border-width,
        $tabbar-strip-height
    );

    .#{$prefix}tab-bar-strip-default,
    .#{$prefix}tab-bar-strip-default-plain {
        font-size: 0;
        line-height: 0;
        position: absolute;
        z-index: 1;
        border-style: solid;
        overflow: hidden;
        border-color: $tabbar-strip-border-color;
        background-color: $tabbar-strip-background-color;
        zoom: 1;
    }
}
</pre>
</body>
</html>