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

   1 /**
   2   * @class Ext.Tab
   3   */
   4 @mixin extjs-tab {
   5     @include x-frame(
   6         $cls: 'tab',
   7         $ui: 'default-top',
   8         $border-radius: $tab-top-border-radius,
   9         $border-width: $tab-top-border-width,
  10         $background-color: $tab-base-color,
  11         $background-gradient: $tab-background-gradient,
  12         $background-direction: top,
  13         $table: true
  14     );
  15
  16     @include x-frame(
  17         $cls: 'tab',
  18         $ui: 'default-bottom',
  19         $border-radius: $tab-bottom-border-radius,
  20         $border-width: $tab-bottom-border-width,
  21         $background-color: $tab-base-color,
  22         $background-gradient: $tab-background-gradient,
  23         $background-direction: bottom,
  24         $table: true
  25     );
  26
  27     .#{$prefix}tab {
  28         z-index: 1;
  29         margin: 0 0 0 $tab-spacing;
  30         display: inline-block;
  31         zoom: 1;
  32         *display: inline;
  33         white-space: nowrap;
  34         height: $tab-height;
  35         border-color: $tab-border-color;
  36         cursor: pointer;
  37         cursor: hand;
  38
  39         * {
  40             cursor: pointer;
  41             cursor: hand;
  42         }
  43
  44         em {
  45             display: block;
  46             padding: 0 6px;
  47             line-height: 1px;
  48         }
  49
  50         button {
  51             background: none;
  52             border: 0;
  53             padding: 0;
  54             margin: 0;
  55             -webkit-appearance: none;
  56             font-size: $tab-font-size;
  57             @if $tab-font-weight {
  58                 font-weight: $tab-font-weight;
  59             }
  60             @if $tab-font-family {
  61                 $font-family: $tab-font-family;
  62             }
  63
  64             color: $tab-color;
  65             outline: 0 none;
  66
  67             overflow: hidden;
  68             overflow-x: visible;
  69             -o-text-overflow: ellipsis;
  70             text-overflow: ellipsis;
  71
  72             &::-moz-focus-inner {
  73                 border: 0;
  74                 padding: 0;
  75             }
  76
  77             .#{$prefix}tab-inner {
  78                 background-color: transparent;
  79                 background-repeat: no-repeat;
  80                 background-position: 0 -2px;
  81                 display: block;
  82                 text-align: center;
  83                 white-space: nowrap;
  84             }
  85         }
  86
  87         img {
  88             display: none;
  89         }
  90     }
  91
  92     .#{$prefix}border-box {
  93         .#{$prefix}tab-default-top {
  94             height: $tab-height + top($tabbar-top-strip-border-width);
  95         }
  96         .#{$prefix}tab-default-bottom {
  97             height: $tab-height + bottom($tabbar-bottom-strip-border-width);
  98         }
  99     }
 100
 101     @if $include-ie {
 102         * html .#{$prefix}ie {
 103             .#{$prefix}tab button {
 104                 width: 1px;
 105             }
 106         }
 107
 108         .#{$prefix}strict .#{$prefix}ie6,
 109         .#{$prefix}strict .#{$prefix}ie7 {
 110             .#{$prefix}tab .#{$prefix}frame-mc {
 111                 height: 100%;
 112             }
 113         }
 114
 115         .#{$prefix}ie .#{$prefix}tab-active button:active {
 116             position: relative;
 117             top: -1px;
 118             left: -1px;
 119         }
 120     }
 121
 122     $framepad: max(top($tab-top-border-radius), right($tab-top-border-radius)) - top($tab-top-border-width);
 123
 124     .#{$prefix}tab-default-top {
 125         @if $tab-inner-border {
 126             @include inner-border(
 127                 $width: $tab-top-inner-border-width,
 128                 $color: $tab-inner-border-color
 129             );
 130         }
 131
 132         border-bottom: 1px solid $tabbar-strip-border-color !important;
 133
 134         em {
 135             padding-bottom: $framepad;
 136         }
 137
 138         button,
 139         .#{$prefix}tab-inner {
 140             height: $tab-height - $framepad * 2 - top($tab-top-border-width);
 141             line-height: $tab-height - $framepad * 2 - top($tab-top-border-width);
 142         }
 143     }
 144
 145     .#{$prefix}nbr .#{$prefix}tab-default-top {
 146         border-bottom-width: 1px !important;
 147     }
 148
 149     .#{$prefix}tab-default-top-active {
 150         border-bottom-color: $tabbar-strip-background-color !important;
 151     }
 152
 153     $framepad: max(bottom($tab-bottom-border-radius), left($tab-bottom-border-radius)) - bottom($tab-bottom-border-width);
 154
 155     .#{$prefix}tab-default-bottom {
 156         @if $tab-inner-border {
 157             @include inner-border(
 158                 $width: $tab-bottom-inner-border-width,
 159                 $color: $tab-inner-border-color
 160             );
 161         }
 162
 163         border-top: 1px solid $tabbar-strip-border-color !important;
 164
 165         @include inner-border(
 166             $width: $tab-bottom-inner-border-width,
 167             $color: $tab-inner-border-color
 168         );
 169
 170         em {
 171             padding-top: $framepad;
 172         }
 173
 174         button,
 175         .#{$prefix}tab-inner {
 176             height: $tab-height - $framepad * 2 - bottom($tab-bottom-border-width);
 177             line-height: $tab-height - $framepad * 2 - bottom($tab-bottom-border-width);
 178         }
 179     }
 180
 181     .#{$prefix}nbr .#{$prefix}tab-default-bottom {
 182         border-top-width: 1px !important;
 183     }
 184
 185     .#{$prefix}tab-default-bottom-active {
 186         border-top-color: $tabbar-strip-background-color !important;
 187     }
 188
 189     .#{$prefix}tab-default-disabled {
 190         cursor: default;
 191
 192         * {
 193             cursor: default;
 194         }
 195
 196         border-color: $tab-border-color-disabled;
 197         @include background-gradient($tab-base-color-disabled, $tab-background-gradient-disabled);
 198
 199         button {
 200             color: $tab-color-disabled !important;
 201         }
 202     }
 203
 204     .#{$prefix}tab-icon-text-left {
 205         .#{$prefix}tab-inner {
 206             padding-left: 20px;
 207         }
 208     }
 209
 210     .#{$prefix}tab {
 211         button, a {
 212             position: relative;
 213
 214             .#{$prefix}tab-icon {
 215                 position: absolute;
 216                 background-repeat: no-repeat;
 217                 top: 0;
 218                 left:0;
 219                 right:auto;
 220                 bottom:0;
 221                 width: 18px;
 222                 height: 18px;
 223             }
 224         }
 225     }
 226
 227     //over
 228     .#{$prefix}tab-over {
 229         @if $tab-border-color-over != $tab-border-color {
 230             border-color: $tab-border-color-over;
 231         }
 232
 233         button {
 234             @if $tab-color-over != $tab-color {
 235                 color: $tab-color-over;
 236             }
 237             @if $tab-font-weight-over != $tab-font-weight {
 238                 font-weight: $tab-font-weight-over;
 239             }
 240             @if $tab-font-size-over != $tab-font-size {
 241                 font-size: $tab-font-size-over;
 242             }
 243             @if $tab-font-family-over != $tab-font-family {
 244                 font-family: $tab-font-family-over;
 245             }
 246         }
 247     }
 248
 249     .#{$prefix}tab-top-over {
 250         @include background-gradient($tab-base-color-over, $tab-background-gradient-over, top);
 251     }
 252     .#{$prefix}tab-bottom-over {
 253         @include background-gradient($tab-base-color-over, $tab-background-gradient-over, bottom);
 254     }
 255
 256     //active
 257     .#{$prefix}tab-active {
 258         z-index: 3;
 259         @if $tab-border-color-active != $tab-border-color {
 260             border-color: $tab-border-color-active;
 261         }
 262
 263         button {
 264             @if $tab-color-active != $tab-color {
 265                 color: $tab-color-active;
 266             }
 267             @if $tab-font-weight-active != $tab-font-weight {
 268                 font-weight: $tab-font-weight-active;
 269             }
 270             @if $tab-font-size-active != $tab-font-size {
 271                 font-size: $tab-font-size-active;
 272             }
 273             @if $tab-font-family-active != $tab-font-family {
 274                 font-family: $tab-font-family-active;
 275             }
 276         }
 277     }
 278
 279     .#{$prefix}tab-top-active {
 280         @include background-gradient($tab-base-color-active, $tab-background-gradient-active, top);
 281     }
 282     .#{$prefix}tab-bottom-active {
 283         @include background-gradient($tab-base-color-active, $tab-background-gradient-active, bottom);
 284     }
 285
 286     //disabled
 287     .#{$prefix}tab-disabled {
 288         @if $tab-border-color-disabled != $tab-border-color {
 289             border-color: $tab-border-color-disabled;
 290         }
 291
 292         button {
 293             @if $tab-color-disabled != $tab-color {
 294                 color: $tab-color-disabled;
 295             }
 296             @if $tab-font-weight-disabled != $tab-font-weight {
 297                 font-weight: $tab-font-weight-disabled;
 298             }
 299             @if $tab-font-size-disabled != $tab-font-size {
 300                 font-size: $tab-font-size-disabled;
 301             }
 302             @if $tab-font-family-disabled != $tab-font-family {
 303                 font-family: $tab-font-family-disabled;
 304             }
 305         }
 306     }
 307
 308     .#{$prefix}tab-top-disabled {
 309         background-image: none;
 310         background: transparent;
 311         @include background-gradient($tab-base-color-disabled, $tab-background-gradient-disabled, top);
 312     }
 313     .#{$prefix}tab-bottom-disabled {
 314         background-image: none;
 315         background: transparent;
 316         @include background-gradient($tab-base-color-disabled, $tab-background-gradient-disabled, bottom);
 317     }
 318
 319     @if not $supports-gradients or $compile-all {
 320         .#{$prefix}nlg {
 321             .#{$prefix}tab-top { background-image: theme-image($theme-name, 'tab/tab-default-top-bg.gif'); }
 322             .#{$prefix}tab-bottom { background-image: theme-image($theme-name, 'tab/tab-default-bottom-bg.gif'); }
 323
 324             .#{$prefix}tab-top-over { background-image: theme-image($theme-name, 'tab/tab-default-top-over-bg.gif'); }
 325             .#{$prefix}tab-bottom-over { background-image: theme-image($theme-name, 'tab/tab-default-bottom-over-bg.gif'); }
 326
 327             .#{$prefix}tab-top-active { background-image: theme-image($theme-name, 'tab/tab-default-top-active-bg.gif'); }
 328             .#{$prefix}tab-bottom-active { background-image: theme-image($theme-name, 'tab/tab-default-bottom-active-bg.gif'); }
 329
 330             .#{$prefix}tab-top-disabled { background-image: theme-image($theme-name, 'tab/tab-default-top-disabled-bg.gif') !important; }
 331             .#{$prefix}tab-bottom-disabled { background-image: theme-image($theme-name, 'tab/tab-default-bottom-disabled-bg.gif') !important; }
 332         }
 333     }
 334
 335     .#{$prefix}tab-closable em {
 336         padding-right: $tab-closable-icon-width + 3;
 337     }
 338
 339     .#{$prefix}tab-close-btn {
 340         position: absolute !important;
 341         top: $tab-closable-icon-top;
 342         right: $tab-closable-icon-right;
 343         width: $tab-closable-icon-width;
 344         height: $tab-closable-icon-height;
 345         font-size: 0;
 346         line-height: 0;
 347         text-indent: -999px;
 348         background: theme-image($theme-name, $tab-closable-icon) no-repeat;
 349         @include opacity(.6);
 350     }
 351     .#{$prefix}tab-close-btn:hover {
 352         @include opacity(1);
 353     }
 354
 355     @if not $supports-border-radius or $compile-all {
 356         .#{$prefix}nbr {
 357             .#{$prefix}tab-top-over {
 358                 .#{$prefix}frame-tl,
 359                 .#{$prefix}frame-bl,
 360                 .#{$prefix}frame-tr,
 361                 .#{$prefix}frame-br,
 362                 .#{$prefix}frame-tc,
 363                 .#{$prefix}frame-bc {
 364                     background-image: theme-image($theme-name, 'tab/tab-default-top-over-corners.gif');
 365                 }
 366                 .#{$prefix}frame-ml,
 367                 .#{$prefix}frame-mr {
 368                     background-image: theme-image($theme-name, 'tab/tab-default-top-over-sides.gif');
 369                 }
 370                 .#{$prefix}frame-mc {
 371                     background-color: $tab-base-color-over;
 372                     background-repeat: repeat-x;
 373                     background-image: theme-image($theme-name, 'tab/tab-default-top-over-bg.gif');
 374                 }
 375             }
 376
 377             .#{$prefix}tab-bottom-over {
 378                 .#{$prefix}frame-tl,
 379                 .#{$prefix}frame-bl,
 380                 .#{$prefix}frame-tr,
 381                 .#{$prefix}frame-br,
 382                 .#{$prefix}frame-tc,
 383                 .#{$prefix}frame-bc {
 384                     background-image: theme-image($theme-name, 'tab/tab-default-bottom-over-corners.gif');
 385                 }
 386                 .#{$prefix}frame-ml,
 387                 .#{$prefix}frame-mr {
 388                     background-image: theme-image($theme-name, 'tab/tab-default-bottom-over-sides.gif');
 389                 }
 390                 .#{$prefix}frame-mc {
 391                     background-color: $tab-base-color-over;
 392                     background-repeat: repeat-x;
 393                     background-image: theme-image($theme-name, 'tab/tab-default-bottom-over-bg.gif');
 394                 }
 395             }
 396
 397             .#{$prefix}tab-top-active {
 398                 .#{$prefix}frame-tl,
 399                 .#{$prefix}frame-bl,
 400                 .#{$prefix}frame-tr,
 401                 .#{$prefix}frame-br,
 402                 .#{$prefix}frame-tc,
 403                 .#{$prefix}frame-bc {
 404                     background-image: theme-image($theme-name, 'tab/tab-default-top-active-corners.gif');
 405                 }
 406                 .#{$prefix}frame-ml,
 407                 .#{$prefix}frame-mr {
 408                     background-image: theme-image($theme-name, 'tab/tab-default-top-active-sides.gif');
 409                 }
 410                 .#{$prefix}frame-mc {
 411                     background-color: $tab-base-color-active;
 412                     background-repeat: repeat-x;
 413                     background-image: theme-image($theme-name, 'tab/tab-default-top-active-bg.gif');
 414                 }
 415             }
 416
 417             .#{$prefix}tab-bottom-active {
 418                 .#{$prefix}frame-tl,
 419                 .#{$prefix}frame-bl,
 420                 .#{$prefix}frame-tr,
 421                 .#{$prefix}frame-br,
 422                 .#{$prefix}frame-tc,
 423                 .#{$prefix}frame-bc {
 424                     background-image: theme-image($theme-name, 'tab/tab-default-bottom-active-corners.gif');
 425                 }
 426                 .#{$prefix}frame-ml,
 427                 .#{$prefix}frame-mr {
 428                     background-image: theme-image($theme-name, 'tab/tab-default-bottom-active-sides.gif');
 429                 }
 430                 .#{$prefix}frame-mc {
 431                     background-color: $tab-base-color-active;
 432                     background-repeat: repeat-x;
 433                     background-image: theme-image($theme-name, 'tab/tab-default-bottom-active-bg.gif');
 434                 }
 435             }
 436
 437             .#{$prefix}tab-top-disabled {
 438                 .#{$prefix}frame-tl,
 439                 .#{$prefix}frame-bl,
 440                 .#{$prefix}frame-tr,
 441                 .#{$prefix}frame-br,
 442                 .#{$prefix}frame-tc,
 443                 .#{$prefix}frame-bc {
 444                     background-image: theme-image($theme-name, 'tab/tab-default-top-disabled-corners.gif');
 445                 }
 446                 .#{$prefix}frame-ml,
 447                 .#{$prefix}frame-mr {
 448                     background-image: theme-image($theme-name, 'tab/tab-default-top-disabled-sides.gif');
 449                 }
 450                 .#{$prefix}frame-mc {
 451                     background-repeat: repeat-x;
 452                     background-image: theme-image($theme-name, 'tab/tab-default-top-disabled-bg.gif');
 453                 }
 454             }
 455
 456             .#{$prefix}tab-bottom-disabled {
 457                 .#{$prefix}frame-tl,
 458                 .#{$prefix}frame-bl,
 459                 .#{$prefix}frame-tr,
 460                 .#{$prefix}frame-br,
 461                 .#{$prefix}frame-tc,
 462                 .#{$prefix}frame-bc {
 463                     background-image: theme-image($theme-name, 'tab/tab-default-bottom-disabled-corners.gif');
 464                 }
 465                 .#{$prefix}frame-ml,
 466                 .#{$prefix}frame-mr {
 467                     background-image: theme-image($theme-name, 'tab/tab-default-bottom-disabled-sides.gif');
 468                 }
 469                 .#{$prefix}frame-mc {
 470                     background-repeat: repeat-x;
 471                     background-image: theme-image($theme-name, 'tab/tab-default-bottom-disabled-bg.gif');
 472                 }
 473             }
 474         }
 475     }
 476 }