resources/themes/stylesheets/ext4/default/widgets/_tabbar.scss

   1 /**
   2   * @class Ext.tab.Bar
   3   */
   4 @mixin extjs-tabbar {
   5     .#{$prefix}tab-bar {
   6         position: relative;
   7         background-color: transparent;
   8         @include background-gradient($tabbar-base-color, $tabbar-background-gradient);
   9         font-size: $tab-font-size;
  10     }
  11
  12     .#{$prefix}nlg .#{$prefix}tab-bar {
  13         background-image: theme-image($theme-name, 'tab-bar/tab-bar-bg.gif');
  14     }
  15
  16     .#{$prefix}tab-bar-default-plain,
  17     .#{$prefix}nlg .#{$prefix}tab-bar-default-plain {
  18         background: transparent none;
  19     }
  20
  21
  22     .#{$prefix}tab-bar-body {
  23         border-style: solid;
  24         border-color: $tabbar-border-color;
  25
  26         position: relative;
  27         z-index: 2;
  28         zoom: 1;
  29     }
  30
  31     @mixin tab-bar-top($toolbarCls, $bodyCls, $stripCls, $body-padding, $body-border-width, $strip-border-width, $strip-height) {
  32         .#{$prefix}#{$toolbarCls} {
  33             .#{$prefix}#{$bodyCls} {
  34                 height: $tab-height;
  35                 border-width: $body-border-width;
  36                 padding: $body-padding;
  37             }
  38
  39             .#{$prefix}#{$stripCls} {
  40                 /*position strip from top rather than bottom to avoid off-by-one error in IE6*/
  41                 top: $tab-height + top($body-border-width) + top($body-padding);
  42                 border-width: $strip-border-width;
  43                 height: $strip-height - vertical($strip-border-width);
  44             }
  45         }
  46         .#{$prefix}border-box {
  47             .#{$prefix}#{$toolbarCls} {
  48                 .#{$prefix}#{$bodyCls} {
  49                     height: $tab-height + vertical($body-border-width) + vertical($body-padding);
  50                 }
  51
  52                 .#{$prefix}#{$stripCls} {
  53                     height: $strip-height;
  54                 }
  55             }
  56         }
  57     }
  58
  59     @mixin tab-bar-bottom($toolbarCls, $bodyCls, $stripCls, $body-padding, $body-border-width, $strip-border-width, $strip-height) {
  60         .#{$prefix}#{$toolbarCls} {
  61             .#{$prefix}#{$bodyCls} {
  62                 height: $tab-height;
  63                 border-width: $body-border-width;
  64                 padding: $body-padding;
  65
  66                 .#{$prefix}box-inner {
  67                     position: relative;
  68                     top: 0 - bottom($strip-border-width);
  69                 }
  70
  71                 .#{$prefix}box-scroller,
  72                 .#{$prefix}box-scroller-left,
  73                 .#{$prefix}box-scroller-right {
  74                     height: $tab-height + bottom($body-padding) + bottom($strip-border-width);
  75                 }
  76             }
  77
  78             .#{$prefix}#{$stripCls} {
  79                 top: top($body-border-width);
  80                 border-width: $strip-border-width;
  81                 height: $strip-height - vertical($strip-border-width);
  82             }
  83         }
  84         .#{$prefix}border-box {
  85             .#{$prefix}#{$toolbarCls} {
  86                 .#{$prefix}#{$bodyCls} {
  87                     height: $tab-height + vertical($body-border-width) + vertical($body-padding);
  88                 }
  89
  90                 .#{$prefix}#{$stripCls} {
  91                     height: $strip-height;
  92                 }
  93             }
  94         }
  95     }
  96
  97
  98     /* Top Tabs */
  99     @include tab-bar-top(
 100         "tab-bar-top",
 101         "tab-bar-body",
 102         "tab-bar-strip",
 103         $tabbar-top-body-padding,
 104         $tabbar-top-body-border-width,
 105         $tabbar-top-strip-border-width,
 106         $tabbar-strip-height
 107     );
 108     @include tab-bar-top(
 109         "tab-bar-top",
 110         "tab-bar-body-default-plain",
 111         "tab-bar-strip-default-plain",
 112         $tabbar-top-plain-body-padding,
 113         $tabbar-top-plain-body-border-width,
 114         $tabbar-top-strip-border-width,
 115         $tabbar-strip-height
 116     );
 117
 118     /* Bottom Tabs */
 119     @include tab-bar-bottom(
 120         "tab-bar-bottom",
 121         "tab-bar-body",
 122         "tab-bar-strip",
 123         $tabbar-bottom-body-padding,
 124         $tabbar-bottom-body-border-width,
 125         $tabbar-bottom-strip-border-width,
 126         $tabbar-strip-height
 127     );
 128
 129     @include tab-bar-bottom(
 130         "tab-bar-bottom",
 131         "tab-bar-body-default-plain",
 132         "tab-bar-strip-default-plain",
 133         $tabbar-bottom-plain-body-padding,
 134         $tabbar-bottom-plain-body-border-width,
 135         $tabbar-bottom-strip-border-width,
 136         $tabbar-strip-height
 137     );
 138
 139     .#{$prefix}tab-bar-strip-default,
 140     .#{$prefix}tab-bar-strip-default-plain {
 141         font-size: 0;
 142         line-height: 0;
 143         position: absolute;
 144         z-index: 1;
 145         border-style: solid;
 146         overflow: hidden;
 147         border-color: $tabbar-strip-border-color;
 148         background-color: $tabbar-strip-background-color;
 149         zoom: 1;
 150     }
 151 }