docs/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 -1px;
  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     //over
 211     .#{$prefix}tab-over {
 212         @if $tab-border-color-over != $tab-border-color {
 213             border-color: $tab-border-color-over;
 214         }
 215
 216         button {
 217             @if $tab-color-over != $tab-color {
 218                 color: $tab-color-over;
 219             }
 220             @if $tab-font-weight-over != $tab-font-weight {
 221                 font-weight: $tab-font-weight-over;
 222             }
 223             @if $tab-font-size-over != $tab-font-size {
 224                 font-size: $tab-font-size-over;
 225             }
 226             @if $tab-font-family-over != $tab-font-family {
 227                 font-family: $tab-font-family-over;
 228             }
 229         }
 230     }
 231
 232     @if $tab-background-gradient-over != $tab-background-gradient {
 233         .#{$prefix}tab-top-over {
 234             @include background-gradient($tab-base-color-over, $tab-background-gradient-over, top);
 235         }
 236         .#{$prefix}tab-bottom-over {
 237             @include background-gradient($tab-base-color-over, $tab-background-gradient-over, bottom);
 238         }
 239     }
 240     @else if $tab-base-color-over != $tab-base-color {
 241         .#{$prefix}tab-top-over,
 242         .#{$prefix}tab-bottom-over {
 243             background-color: $tab-base-color-over;
 244         }
 245     }
 246
 247     //active
 248     .#{$prefix}tab-active {
 249         z-index: 3;
 250         @if $tab-border-color-active != $tab-border-color {
 251             border-color: $tab-border-color-active;
 252         }
 253
 254         button {
 255             @if $tab-color-active != $tab-color {
 256                 color: $tab-color-active;
 257             }
 258             @if $tab-font-weight-active != $tab-font-weight {
 259                 font-weight: $tab-font-weight-active;
 260             }
 261             @if $tab-font-size-active != $tab-font-size {
 262                 font-size: $tab-font-size-active;
 263             }
 264             @if $tab-font-family-active != $tab-font-family {
 265                 font-family: $tab-font-family-active;
 266             }
 267         }
 268     }
 269
 270     @if $tab-background-gradient-active != $tab-background-gradient {
 271         .#{$prefix}tab-top-active {
 272             @include background-gradient($tab-base-color-active, $tab-background-gradient-active, top);
 273         }
 274         .#{$prefix}tab-bottom-active {
 275             @include background-gradient($tab-base-color-active, $tab-background-gradient-active, bottom);
 276         }
 277     }
 278     @else if $tab-base-color-active != $tab-base-color {
 279         .#{$prefix}tab-top-active,
 280         .#{$prefix}tab-bottom-active {
 281             background-color: $tab-base-color-active;
 282         }
 283     }
 284
 285     //disabled
 286     .#{$prefix}tab-disabled {
 287         @if $tab-border-color-disabled != $tab-border-color {
 288             border-color: $tab-border-color-disabled;
 289         }
 290
 291         button {
 292             @if $tab-color-disabled != $tab-color {
 293                 color: $tab-color-disabled;
 294             }
 295             @if $tab-font-weight-disabled != $tab-font-weight {
 296                 font-weight: $tab-font-weight-disabled;
 297             }
 298             @if $tab-font-size-disabled != $tab-font-size {
 299                 font-size: $tab-font-size-disabled;
 300             }
 301             @if $tab-font-family-disabled != $tab-font-family {
 302                 font-family: $tab-font-family-disabled;
 303             }
 304         }
 305     }
 306
 307     @if $tab-background-gradient-disabled != $tab-background-gradient {
 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     @else if $tab-base-color-disabled != $tab-base-color {
 320         .#{$prefix}tab-top-disabled,
 321         .#{$prefix}tab-bottom-disabled {
 322             background-color: $tab-base-color-disabled;
 323         }
 324     }
 325
 326     @if not $supports-gradients or $compile-all {
 327         .#{$prefix}nlg {
 328             .#{$prefix}tab-top { background-image: theme-image($theme-name, 'tab/tab-default-top-bg.gif'); }
 329             .#{$prefix}tab-bottom { background-image: theme-image($theme-name, 'tab/tab-default-bottom-bg.gif'); }
 330
 331             .#{$prefix}tab-top-over { background-image: theme-image($theme-name, 'tab/tab-default-top-over-bg.gif'); }
 332             .#{$prefix}tab-bottom-over { background-image: theme-image($theme-name, 'tab/tab-default-bottom-over-bg.gif'); }
 333
 334             .#{$prefix}tab-top-active { background-image: theme-image($theme-name, 'tab/tab-default-top-active-bg.gif'); }
 335             .#{$prefix}tab-bottom-active { background-image: theme-image($theme-name, 'tab/tab-default-bottom-active-bg.gif'); }
 336
 337             .#{$prefix}tab-top-disabled { background-image: theme-image($theme-name, 'tab/tab-default-top-disabled-bg.gif') !important; }
 338             .#{$prefix}tab-bottom-disabled { background-image: theme-image($theme-name, 'tab/tab-default-bottom-disabled-bg.gif') !important; }
 339         }
 340     }
 341
 342     .#{$prefix}tab-closable em {
 343         padding-right: $tab-closable-icon-width + 3;
 344     }
 345
 346     .#{$prefix}tab-close-btn {
 347         position: absolute;
 348         top: $tab-closable-icon-top;
 349         right: $tab-closable-icon-right;
 350         width: $tab-closable-icon-width;
 351         height: $tab-closable-icon-height;
 352         font-size: 0;
 353         line-height: 0;
 354         text-indent: -999px;
 355         background: theme-image($theme-name, $tab-closable-icon) no-repeat;
 356         @include opacity(.6);
 357     }
 358     .#{$prefix}tab-close-btn:hover {
 359         @include opacity(1);
 360     }
 361
 362     @if not $supports-border-radius or $compile-all {
 363         .#{$prefix}nbr {
 364             .#{$prefix}tab-top-over {
 365                 .#{$prefix}frame-tl,
 366                 .#{$prefix}frame-bl,
 367                 .#{$prefix}frame-tr,
 368                 .#{$prefix}frame-br,
 369                 .#{$prefix}frame-tc,
 370                 .#{$prefix}frame-bc {
 371                     background-image: theme-image($theme-name, 'tab/tab-default-top-over-corners.gif');
 372                 }
 373                 .#{$prefix}frame-ml,
 374                 .#{$prefix}frame-mr {
 375                     background-image: theme-image($theme-name, 'tab/tab-default-top-over-sides.gif');
 376                 }
 377                 .#{$prefix}frame-mc {
 378                     background-color: $tab-base-color-over;
 379                     background-repeat: repeat-x;
 380                     background-image: theme-image($theme-name, 'tab/tab-default-top-over-bg.gif');
 381                 }
 382             }
 383
 384             .#{$prefix}tab-bottom-over {
 385                 .#{$prefix}frame-tl,
 386                 .#{$prefix}frame-bl,
 387                 .#{$prefix}frame-tr,
 388                 .#{$prefix}frame-br,
 389                 .#{$prefix}frame-tc,
 390                 .#{$prefix}frame-bc {
 391                     background-image: theme-image($theme-name, 'tab/tab-default-bottom-over-corners.gif');
 392                 }
 393                 .#{$prefix}frame-ml,
 394                 .#{$prefix}frame-mr {
 395                     background-image: theme-image($theme-name, 'tab/tab-default-bottom-over-sides.gif');
 396                 }
 397                 .#{$prefix}frame-mc {
 398                     background-color: $tab-base-color-over;
 399                     background-repeat: repeat-x;
 400                     background-image: theme-image($theme-name, 'tab/tab-default-bottom-over-bg.gif');
 401                 }
 402             }
 403
 404             .#{$prefix}tab-top-active {
 405                 .#{$prefix}frame-tl,
 406                 .#{$prefix}frame-bl,
 407                 .#{$prefix}frame-tr,
 408                 .#{$prefix}frame-br,
 409                 .#{$prefix}frame-tc,
 410                 .#{$prefix}frame-bc {
 411                     background-image: theme-image($theme-name, 'tab/tab-default-top-active-corners.gif');
 412                 }
 413                 .#{$prefix}frame-ml,
 414                 .#{$prefix}frame-mr {
 415                     background-image: theme-image($theme-name, 'tab/tab-default-top-active-sides.gif');
 416                 }
 417                 .#{$prefix}frame-mc {
 418                     background-color: $tab-base-color-active;
 419                     background-repeat: repeat-x;
 420                     background-image: theme-image($theme-name, 'tab/tab-default-top-active-bg.gif');
 421                 }
 422             }
 423
 424             .#{$prefix}tab-bottom-active {
 425                 .#{$prefix}frame-tl,
 426                 .#{$prefix}frame-bl,
 427                 .#{$prefix}frame-tr,
 428                 .#{$prefix}frame-br,
 429                 .#{$prefix}frame-tc,
 430                 .#{$prefix}frame-bc {
 431                     background-image: theme-image($theme-name, 'tab/tab-default-bottom-active-corners.gif');
 432                 }
 433                 .#{$prefix}frame-ml,
 434                 .#{$prefix}frame-mr {
 435                     background-image: theme-image($theme-name, 'tab/tab-default-bottom-active-sides.gif');
 436                 }
 437                 .#{$prefix}frame-mc {
 438                     background-color: $tab-base-color-active;
 439                     background-repeat: repeat-x;
 440                     background-image: theme-image($theme-name, 'tab/tab-default-bottom-active-bg.gif');
 441                 }
 442             }
 443
 444             .#{$prefix}tab-top-disabled {
 445                 .#{$prefix}frame-tl,
 446                 .#{$prefix}frame-bl,
 447                 .#{$prefix}frame-tr,
 448                 .#{$prefix}frame-br,
 449                 .#{$prefix}frame-tc,
 450                 .#{$prefix}frame-bc {
 451                     background-image: theme-image($theme-name, 'tab/tab-default-top-disabled-corners.gif');
 452                 }
 453                 .#{$prefix}frame-ml,
 454                 .#{$prefix}frame-mr {
 455                     background-image: theme-image($theme-name, 'tab/tab-default-top-disabled-sides.gif');
 456                 }
 457                 .#{$prefix}frame-mc {
 458                     background-repeat: repeat-x;
 459                     background-image: theme-image($theme-name, 'tab/tab-default-top-disabled-bg.gif');
 460                 }
 461             }
 462
 463             .#{$prefix}tab-bottom-disabled {
 464                 .#{$prefix}frame-tl,
 465                 .#{$prefix}frame-bl,
 466                 .#{$prefix}frame-tr,
 467                 .#{$prefix}frame-br,
 468                 .#{$prefix}frame-tc,
 469                 .#{$prefix}frame-bc {
 470                     background-image: theme-image($theme-name, 'tab/tab-default-bottom-disabled-corners.gif');
 471                 }
 472                 .#{$prefix}frame-ml,
 473                 .#{$prefix}frame-mr {
 474                     background-image: theme-image($theme-name, 'tab/tab-default-bottom-disabled-sides.gif');
 475                 }
 476                 .#{$prefix}frame-mc {
 477                     background-repeat: repeat-x;
 478                     background-image: theme-image($theme-name, 'tab/tab-default-bottom-disabled-bg.gif');
 479                 }
 480             }
 481         }
 482     }
 483 }