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}tab-disabled {
  93         @include opacity(1);
  94     }
  95
  96     .#{$prefix}border-box {
  97         .#{$prefix}tab-default-top {
  98             height: $tab-height + top($tabbar-top-strip-border-width);
  99         }
 100         .#{$prefix}tab-default-bottom {
 101             height: $tab-height + bottom($tabbar-bottom-strip-border-width);
 102         }
 103     }
 104
 105     @if $include-ie {
 106         * html .#{$prefix}ie {
 107             .#{$prefix}tab button {
 108                 width: 1px;
 109             }
 110         }
 111
 112         .#{$prefix}strict .#{$prefix}ie6,
 113         .#{$prefix}strict .#{$prefix}ie7 {
 114             .#{$prefix}tab .#{$prefix}frame-mc {
 115                 height: 100%;
 116             }
 117         }
 118
 119         .#{$prefix}ie .#{$prefix}tab-active button:active {
 120             position: relative;
 121             top: -1px;
 122             left: -1px;
 123         }
 124     }
 125
 126     $framepad: max(top($tab-top-border-radius), right($tab-top-border-radius)) - top($tab-top-border-width);
 127
 128     .#{$prefix}tab-default-top {
 129         @if $tab-inner-border {
 130             @include inner-border(
 131                 $width: $tab-top-inner-border-width,
 132                 $color: $tab-inner-border-color
 133             );
 134         }
 135
 136         border-bottom: 1px solid $tabbar-strip-border-color !important;
 137
 138         em {
 139             padding-bottom: $framepad;
 140         }
 141
 142         button,
 143         .#{$prefix}tab-inner {
 144             height: $tab-height - $framepad * 2 - top($tab-top-border-width);
 145             line-height: $tab-height - $framepad * 2 - top($tab-top-border-width);
 146         }
 147     }
 148
 149     .#{$prefix}nbr .#{$prefix}tab-default-top {
 150         border-bottom-width: 1px !important;
 151     }
 152
 153     .#{$prefix}tab-default-top-active {
 154         border-bottom-color: $tabbar-strip-background-color !important;
 155     }
 156
 157     $framepad: max(bottom($tab-bottom-border-radius), left($tab-bottom-border-radius)) - bottom($tab-bottom-border-width);
 158
 159     .#{$prefix}tab-default-bottom {
 160         @if $tab-inner-border {
 161             @include inner-border(
 162                 $width: $tab-bottom-inner-border-width,
 163                 $color: $tab-inner-border-color
 164             );
 165         }
 166
 167         border-top: 1px solid $tabbar-strip-border-color !important;
 168
 169         @include inner-border(
 170             $width: $tab-bottom-inner-border-width,
 171             $color: $tab-inner-border-color
 172         );
 173
 174         em {
 175             padding-top: $framepad;
 176         }
 177
 178         button,
 179         .#{$prefix}tab-inner {
 180             height: $tab-height - $framepad * 2 - bottom($tab-bottom-border-width);
 181             line-height: $tab-height - $framepad * 2 - bottom($tab-bottom-border-width);
 182         }
 183     }
 184
 185     .#{$prefix}nbr .#{$prefix}tab-default-bottom {
 186         border-top-width: 1px !important;
 187     }
 188
 189     .#{$prefix}tab-default-bottom-active {
 190         border-top-color: $tabbar-strip-background-color !important;
 191     }
 192
 193     .#{$prefix}tab-default-disabled {
 194         cursor: default;
 195
 196         * {
 197             cursor: default;
 198         }
 199
 200         border-color: $tab-border-color-disabled;
 201         @include background-gradient($tab-base-color-disabled, $tab-background-gradient-disabled);
 202
 203         button {
 204             color: $tab-color-disabled !important;
 205         }
 206     }
 207
 208     .#{$prefix}tab-icon-text-left {
 209         .#{$prefix}tab-inner {
 210             padding-left: 20px;
 211         }
 212     }
 213
 214     .#{$prefix}tab {
 215         button, a {
 216             position: relative;
 217
 218             .#{$prefix}tab-icon {
 219                 position: absolute;
 220                 background-repeat: no-repeat;
 221                 top: 0;
 222                 left:0;
 223                 right:auto;
 224                 bottom:0;
 225                 width: 18px;
 226                 height: 18px;
 227             }
 228         }
 229     }
 230
 231     //over
 232     .#{$prefix}tab-over {
 233         @if $tab-border-color-over != $tab-border-color {
 234             border-color: $tab-border-color-over;
 235         }
 236
 237         button {
 238             @if $tab-color-over != $tab-color {
 239                 color: $tab-color-over;
 240             }
 241             @if $tab-font-weight-over != $tab-font-weight {
 242                 font-weight: $tab-font-weight-over;
 243             }
 244             @if $tab-font-size-over != $tab-font-size {
 245                 font-size: $tab-font-size-over;
 246             }
 247             @if $tab-font-family-over != $tab-font-family {
 248                 font-family: $tab-font-family-over;
 249             }
 250         }
 251     }
 252
 253     .#{$prefix}tab-top-over {
 254         @include background-gradient($tab-base-color-over, $tab-background-gradient-over, top);
 255     }
 256     .#{$prefix}tab-bottom-over {
 257         @include background-gradient($tab-base-color-over, $tab-background-gradient-over, bottom);
 258     }
 259
 260     //active
 261     .#{$prefix}tab-active {
 262         z-index: 3;
 263         @if $tab-border-color-active != $tab-border-color {
 264             border-color: $tab-border-color-active;
 265         }
 266
 267         button {
 268             @if $tab-color-active != $tab-color {
 269                 color: $tab-color-active;
 270             }
 271             @if $tab-font-weight-active != $tab-font-weight {
 272                 font-weight: $tab-font-weight-active;
 273             }
 274             @if $tab-font-size-active != $tab-font-size {
 275                 font-size: $tab-font-size-active;
 276             }
 277             @if $tab-font-family-active != $tab-font-family {
 278                 font-family: $tab-font-family-active;
 279             }
 280         }
 281     }
 282
 283     .#{$prefix}tab-top-active {
 284         @include background-gradient($tab-base-color-active, $tab-background-gradient-active, top);
 285     }
 286     .#{$prefix}tab-bottom-active {
 287         @include background-gradient($tab-base-color-active, $tab-background-gradient-active, bottom);
 288     }
 289
 290     //disabled
 291     .#{$prefix}tab-disabled {
 292         @if $tab-border-color-disabled != $tab-border-color {
 293             border-color: $tab-border-color-disabled;
 294         }
 295
 296         button {
 297             @if $tab-color-disabled != $tab-color {
 298                 color: $tab-color-disabled;
 299             }
 300             @if $tab-font-weight-disabled != $tab-font-weight {
 301                 font-weight: $tab-font-weight-disabled;
 302             }
 303             @if $tab-font-size-disabled != $tab-font-size {
 304                 font-size: $tab-font-size-disabled;
 305             }
 306             @if $tab-font-family-disabled != $tab-font-family {
 307                 font-family: $tab-font-family-disabled;
 308             }
 309         }
 310     }
 311
 312     .#{$prefix}tab-top-disabled {
 313         background-image: none;
 314         background: transparent;
 315         @include background-gradient($tab-base-color-disabled, $tab-background-gradient-disabled, top);
 316     }
 317     .#{$prefix}tab-bottom-disabled {
 318         background-image: none;
 319         background: transparent;
 320         @include background-gradient($tab-base-color-disabled, $tab-background-gradient-disabled, bottom);
 321     }
 322
 323     @if not $supports-gradients or $compile-all {
 324         .#{$prefix}nlg {
 325             @if $tab-background-gradient != null {
 326                 .#{$prefix}tab-top { background-image: theme-background-image($theme-name, 'tab/tab-default-top-bg.gif'); }
 327                 .#{$prefix}tab-bottom { background-image: theme-background-image($theme-name, 'tab/tab-default-bottom-bg.gif'); }
 328             }
 329
 330             @if $tab-background-gradient-over != null {
 331                 .#{$prefix}tab-top-over { background-image: theme-background-image($theme-name, 'tab/tab-default-top-over-bg.gif'); }
 332                 .#{$prefix}tab-bottom-over { background-image: theme-background-image($theme-name, 'tab/tab-default-bottom-over-bg.gif'); }
 333             }
 334
 335             @if $tab-background-gradient-active != null {
 336                 .#{$prefix}tab-top-active { background-image: theme-background-image($theme-name, 'tab/tab-default-top-active-bg.gif'); }
 337                 .#{$prefix}tab-bottom-active { background-image: theme-background-image($theme-name, 'tab/tab-default-bottom-active-bg.gif'); }
 338             }
 339
 340             @if $tab-background-gradient-disabled != null {
 341                 .#{$prefix}tab-top-disabled { background-image: theme-background-image($theme-name, 'tab/tab-default-top-disabled-bg.gif') !important; }
 342                 .#{$prefix}tab-bottom-disabled { background-image: theme-background-image($theme-name, 'tab/tab-default-bottom-disabled-bg.gif') !important; }
 343             }
 344         }
 345     }
 346
 347     .#{$prefix}tab-closable em {
 348         padding-right: $tab-closable-icon-width + 3;
 349     }
 350
 351     .#{$prefix}tab-close-btn {
 352         position: absolute !important;
 353         top: $tab-closable-icon-top;
 354         right: $tab-closable-icon-right;
 355         width: $tab-closable-icon-width;
 356         height: $tab-closable-icon-height;
 357         font-size: 0;
 358         line-height: 0;
 359         text-indent: -999px;
 360         background: no-repeat;
 361         background-image: theme-background-image($theme-name, $tab-closable-icon);
 362         @include opacity(.6);
 363     }
 364     .#{$prefix}tab-close-btn:hover {
 365         @include opacity(1);
 366     }
 367
 368     @if not $supports-border-radius or $compile-all {
 369         .#{$prefix}nbr {
 370             .#{$prefix}tab-top-over {
 371                 .#{$prefix}frame-tl,
 372                 .#{$prefix}frame-bl,
 373                 .#{$prefix}frame-tr,
 374                 .#{$prefix}frame-br,
 375                 .#{$prefix}frame-tc,
 376                 .#{$prefix}frame-bc {
 377                     background-image: theme-background-image($theme-name, 'tab/tab-default-top-over-corners.gif');
 378                 }
 379                 .#{$prefix}frame-ml,
 380                 .#{$prefix}frame-mr {
 381                     background-image: theme-background-image($theme-name, 'tab/tab-default-top-over-sides.gif');
 382                 }
 383                 @if $tab-background-gradient-over != null {
 384                     .#{$prefix}frame-mc {
 385                         background-color: $tab-base-color-over;
 386                         background-repeat: repeat-x;
 387                         background-image: theme-background-image($theme-name, 'tab/tab-default-top-over-bg.gif');
 388                     }
 389                 }
 390             }
 391
 392             .#{$prefix}tab-bottom-over {
 393                 .#{$prefix}frame-tl,
 394                 .#{$prefix}frame-bl,
 395                 .#{$prefix}frame-tr,
 396                 .#{$prefix}frame-br,
 397                 .#{$prefix}frame-tc,
 398                 .#{$prefix}frame-bc {
 399                     background-image: theme-background-image($theme-name, 'tab/tab-default-bottom-over-corners.gif');
 400                 }
 401                 .#{$prefix}frame-ml,
 402                 .#{$prefix}frame-mr {
 403                     background-image: theme-background-image($theme-name, 'tab/tab-default-bottom-over-sides.gif');
 404                 }
 405                 @if $tab-background-gradient-over != null {
 406                     .#{$prefix}frame-mc {
 407                         background-color: $tab-base-color-over;
 408                         background-repeat: repeat-x;
 409                         background-image: theme-background-image($theme-name, 'tab/tab-default-bottom-over-bg.gif');
 410                     }
 411                 }
 412             }
 413
 414             .#{$prefix}tab-top-active {
 415                 .#{$prefix}frame-tl,
 416                 .#{$prefix}frame-bl,
 417                 .#{$prefix}frame-tr,
 418                 .#{$prefix}frame-br,
 419                 .#{$prefix}frame-tc,
 420                 .#{$prefix}frame-bc {
 421                     background-image: theme-background-image($theme-name, 'tab/tab-default-top-active-corners.gif');
 422                 }
 423                 .#{$prefix}frame-ml,
 424                 .#{$prefix}frame-mr {
 425                     background-image: theme-background-image($theme-name, 'tab/tab-default-top-active-sides.gif');
 426                 }
 427                 @if $tab-background-gradient-active != null {
 428                     .#{$prefix}frame-mc {
 429                         background-color: $tab-base-color-active;
 430                         background-repeat: repeat-x;
 431                         background-image: theme-background-image($theme-name, 'tab/tab-default-top-active-bg.gif');
 432                     }
 433                 }
 434             }
 435
 436             .#{$prefix}tab-bottom-active {
 437                 .#{$prefix}frame-tl,
 438                 .#{$prefix}frame-bl,
 439                 .#{$prefix}frame-tr,
 440                 .#{$prefix}frame-br,
 441                 .#{$prefix}frame-tc,
 442                 .#{$prefix}frame-bc {
 443                     background-image: theme-background-image($theme-name, 'tab/tab-default-bottom-active-corners.gif');
 444                 }
 445                 .#{$prefix}frame-ml,
 446                 .#{$prefix}frame-mr {
 447                     background-image: theme-background-image($theme-name, 'tab/tab-default-bottom-active-sides.gif');
 448                 }
 449                 @if $tab-background-gradient-active != null {
 450                     .#{$prefix}frame-mc {
 451                         background-color: $tab-base-color-active;
 452                         background-repeat: repeat-x;
 453                         background-image: theme-background-image($theme-name, 'tab/tab-default-bottom-active-bg.gif');
 454                     }
 455                 }
 456             }
 457
 458             .#{$prefix}tab-top-disabled {
 459                 .#{$prefix}frame-tl,
 460                 .#{$prefix}frame-bl,
 461                 .#{$prefix}frame-tr,
 462                 .#{$prefix}frame-br,
 463                 .#{$prefix}frame-tc,
 464                 .#{$prefix}frame-bc {
 465                     background-image: theme-background-image($theme-name, 'tab/tab-default-top-disabled-corners.gif');
 466                 }
 467                 .#{$prefix}frame-ml,
 468                 .#{$prefix}frame-mr {
 469                     background-image: theme-background-image($theme-name, 'tab/tab-default-top-disabled-sides.gif');
 470                 }
 471                 @if $tab-background-gradient-disabled != null {
 472                     .#{$prefix}frame-mc {
 473                         background-repeat: repeat-x;
 474                         background-image: theme-background-image($theme-name, 'tab/tab-default-top-disabled-bg.gif');
 475                     }
 476                 }
 477             }
 478
 479             .#{$prefix}tab-bottom-disabled {
 480                 .#{$prefix}frame-tl,
 481                 .#{$prefix}frame-bl,
 482                 .#{$prefix}frame-tr,
 483                 .#{$prefix}frame-br,
 484                 .#{$prefix}frame-tc,
 485                 .#{$prefix}frame-bc {
 486                     background-image: theme-background-image($theme-name, 'tab/tab-default-bottom-disabled-corners.gif');
 487                 }
 488                 .#{$prefix}frame-ml,
 489                 .#{$prefix}frame-mr {
 490                     background-image: theme-background-image($theme-name, 'tab/tab-default-bottom-disabled-sides.gif');
 491                 }
 492                 @if $tab-background-gradient-disabled != null {
 493                     .#{$prefix}frame-mc {
 494                         background-repeat: repeat-x;
 495                         background-image: theme-background-image($theme-name, 'tab/tab-default-bottom-disabled-bg.gif');
 496                     }
 497                 }
 498             }
 499         }
 500     }
 501 }