_tab.scss (18244B)
1 /** 2 * Creates the base structure of a Tab. 3 * @member Ext.tab.Tab 4 */ 5 @mixin extjs-tab { 6 @include x-frame( 7 $cls: 'tab', 8 $ui: 'default-top', 9 $border-radius: $tab-top-border-radius, 10 $border-width: $tab-top-border-width, 11 $background-color: $tab-base-color, 12 $background-gradient: $tab-background-gradient, 13 $background-direction: top, 14 $table: true 15 ); 16 17 @include x-frame( 18 $cls: 'tab', 19 $ui: 'default-bottom', 20 $border-radius: $tab-bottom-border-radius, 21 $border-width: $tab-bottom-border-width, 22 $background-color: $tab-base-color, 23 $background-gradient: $tab-background-gradient, 24 $background-direction: bottom, 25 $table: true 26 ); 27 28 .#{$prefix}tab { 29 z-index: 1; 30 margin: 0 0 0 $tab-spacing; 31 display: inline-block; 32 zoom: 1; 33 *display: inline; 34 white-space: nowrap; 35 height: $tab-height; 36 border-color: $tab-border-color; 37 cursor: pointer; 38 cursor: hand; 39 40 button { 41 cursor: pointer; 42 cursor: hand; 43 } 44 45 em { 46 display: block; 47 padding: 0 6px; 48 line-height: 1px; 49 } 50 51 button { 52 background: none; 53 border: 0; 54 padding: 0; 55 margin: 0; 56 -webkit-appearance: none; 57 font-size: $tab-font-size; 58 @if $tab-font-weight { 59 font-weight: $tab-font-weight; 60 } 61 @if $tab-font-family { 62 font-family: $tab-font-family; 63 } 64 65 color: $tab-color; 66 outline: 0 none; 67 overflow-x: visible; 68 69 &::-moz-focus-inner { 70 border: 0; 71 padding: 0; 72 } 73 74 .#{$prefix}tab-inner { 75 background-color: transparent; 76 background-repeat: no-repeat; 77 background-position: 0 -2px; 78 display: block; 79 text-align: center; 80 white-space: nowrap; 81 text-overflow: ellipsis; 82 -o-text-overflow: ellipsis; 83 overflow: hidden; 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 // corrects text being clipped at the bottom in safari4 & 5.0.5 146 .#{$prefix}safari4, 147 .#{$prefix}safari5_0 { 148 .#{$prefix}tab-default-top .#{$prefix}tab-inner { 149 line-height: $tab-height - $framepad * 2 - top($tab-top-border-width) - 2; 150 } 151 } 152 153 .#{$prefix}nbr .#{$prefix}tab-default-top { 154 border-bottom-width: 1px !important; 155 } 156 157 .#{$prefix}tab-default-top-active { 158 border-bottom-color: $tabbar-strip-background-color !important; 159 } 160 161 $framepad: max(bottom($tab-bottom-border-radius), left($tab-bottom-border-radius)) - bottom($tab-bottom-border-width); 162 163 .#{$prefix}tab-default-bottom { 164 @if $tab-inner-border { 165 @include inner-border( 166 $width: $tab-bottom-inner-border-width, 167 $color: $tab-inner-border-color 168 ); 169 } 170 171 border-top: 1px solid $tabbar-strip-border-color !important; 172 173 @include inner-border( 174 $width: $tab-bottom-inner-border-width, 175 $color: $tab-inner-border-color 176 ); 177 178 em { 179 padding-top: $framepad; 180 } 181 182 button, 183 .#{$prefix}tab-inner { 184 height: $tab-height - $framepad * 2 - bottom($tab-bottom-border-width); 185 line-height: $tab-height - $framepad * 2 - bottom($tab-bottom-border-width); 186 } 187 } 188 189 .#{$prefix}nbr .#{$prefix}tab-default-bottom { 190 border-top-width: 1px !important; 191 } 192 193 .#{$prefix}tab-default-bottom-active { 194 border-top-color: $tabbar-strip-background-color !important; 195 } 196 197 .#{$prefix}tab-default-disabled { 198 cursor: default; 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 button { 215 position: relative; 216 } 217 218 .#{$prefix}tab-icon { 219 position: absolute; 220 background-repeat: no-repeat; 221 background-position: 0 -1px; 222 top: 0; 223 left: 0; 224 right: auto; 225 bottom: 0; 226 width: 18px; 227 height: 18px; 228 } 229 230 // Stop icons being clipped by the bottom of the button element 231 .#{$prefix}strict { 232 .#{$prefix}ie8 .#{$prefix}tab button, 233 .#{$prefix}ie9 .#{$prefix}tab button { 234 overflow-y: visible; 235 } 236 } 237 238 .#{$prefix}tab-default-disabled .#{$prefix}tab-icon { 239 @include opacity(.5); 240 } 241 242 /* In IE a disabled icon needs to be hidden or the opacity effect covers some of the text */ 243 .#{$prefix}tab-noicon .#{$prefix}tab-icon { 244 display: none; 245 } 246 247 //over 248 .#{$prefix}tab-over { 249 @if $tab-border-color-over != $tab-border-color { 250 border-color: $tab-border-color-over; 251 } 252 253 button { 254 @if $tab-color-over != $tab-color { 255 color: $tab-color-over; 256 } 257 @if $tab-font-weight-over != $tab-font-weight { 258 font-weight: $tab-font-weight-over; 259 } 260 @if $tab-font-size-over != $tab-font-size { 261 font-size: $tab-font-size-over; 262 } 263 @if $tab-font-family-over != $tab-font-family { 264 font-family: $tab-font-family-over; 265 } 266 } 267 } 268 269 .#{$prefix}tab-top-over { 270 @include background-gradient($tab-base-color-over, $tab-background-gradient-over, top); 271 } 272 .#{$prefix}tab-bottom-over { 273 @include background-gradient($tab-base-color-over, $tab-background-gradient-over, bottom); 274 } 275 276 //active 277 .#{$prefix}tab-active { 278 z-index: 3; 279 @if $tab-border-color-active != $tab-border-color { 280 border-color: $tab-border-color-active; 281 } 282 283 button { 284 @if $tab-color-active != $tab-color { 285 color: $tab-color-active; 286 } 287 color: white; 288 text-shadow: 0 0 1px #000; 289 @if $tab-font-weight-active != $tab-font-weight { 290 font-weight: $tab-font-weight-active; 291 } 292 @if $tab-font-size-active != $tab-font-size { 293 font-size: $tab-font-size-active; 294 } 295 @if $tab-font-family-active != $tab-font-family { 296 font-family: $tab-font-family-active; 297 } 298 } 299 } 300 301 .#{$prefix}tab-top-active { 302 @include background-gradient($tab-base-color-active, $tab-background-gradient-active, top); 303 } 304 .#{$prefix}tab-bottom-active { 305 @include background-gradient($tab-base-color-active, $tab-background-gradient-active, bottom); 306 } 307 308 //disabled 309 .#{$prefix}tab-disabled { 310 @if $tab-border-color-disabled != $tab-border-color { 311 border-color: $tab-border-color-disabled; 312 } 313 314 button { 315 @if $tab-color-disabled != $tab-color { 316 color: $tab-color-disabled; 317 } 318 @if $tab-font-weight-disabled != $tab-font-weight { 319 font-weight: $tab-font-weight-disabled; 320 } 321 @if $tab-font-size-disabled != $tab-font-size { 322 font-size: $tab-font-size-disabled; 323 } 324 @if $tab-font-family-disabled != $tab-font-family { 325 font-family: $tab-font-family-disabled; 326 } 327 } 328 } 329 330 .#{$prefix}tab-top-disabled { 331 background-image: none; 332 background: transparent; 333 @include background-gradient($tab-base-color-disabled, $tab-background-gradient-disabled, top); 334 } 335 .#{$prefix}tab-bottom-disabled { 336 background-image: none; 337 background: transparent; 338 @include background-gradient($tab-base-color-disabled, $tab-background-gradient-disabled, bottom); 339 } 340 341 @if not $supports-gradients or $compile-all { 342 .#{$prefix}nlg { 343 @if $tab-background-gradient != null { 344 .#{$prefix}tab-top { background-image: theme-background-image($theme-name, 'tab/tab-default-top-bg.gif'); } 345 .#{$prefix}tab-bottom { background-image: theme-background-image($theme-name, 'tab/tab-default-bottom-bg.gif'); } 346 } 347 348 @if $tab-background-gradient-over != null { 349 .#{$prefix}tab-top-over { background-image: theme-background-image($theme-name, 'tab/tab-default-top-over-bg.gif'); } 350 .#{$prefix}tab-bottom-over { background-image: theme-background-image($theme-name, 'tab/tab-default-bottom-over-bg.gif'); } 351 } 352 353 @if $tab-background-gradient-active != null { 354 .#{$prefix}tab-top-active { background-image: theme-background-image($theme-name, 'tab/tab-default-top-active-bg.gif'); } 355 .#{$prefix}tab-bottom-active { background-image: theme-background-image($theme-name, 'tab/tab-default-bottom-active-bg.gif'); } 356 } 357 358 @if $tab-background-gradient-disabled != null { 359 .#{$prefix}tab-top-disabled { background-image: theme-background-image($theme-name, 'tab/tab-default-top-disabled-bg.gif') !important; } 360 .#{$prefix}tab-bottom-disabled { background-image: theme-background-image($theme-name, 'tab/tab-default-bottom-disabled-bg.gif') !important; } 361 } 362 } 363 } 364 365 .#{$prefix}tab-closable em { 366 padding-right: $tab-closable-icon-width + 3; 367 } 368 369 .#{$prefix}tab-close-btn { 370 position: absolute; 371 top: $tab-closable-icon-top; 372 right: $tab-closable-icon-right; 373 width: $tab-closable-icon-width; 374 height: $tab-closable-icon-height; 375 font-size: 0; 376 line-height: 0; 377 text-indent: -999px; 378 background: no-repeat; 379 background-image: theme-background-image($theme-name, $tab-closable-icon); 380 @include opacity(.6); 381 } 382 383 .#{$prefix}nbr .#{$prefix}tab-close-btn { 384 top: $nbr-tab-closable-icon-top; 385 right: $nbr-tab-closable-icon-right; 386 } 387 388 /* Include the element name otherwise Internet Explorer 7 & 8 take a performance hit */ 389 a.#{$prefix}tab-close-btn:hover { 390 @include opacity(1); 391 } 392 393 /* Include the element name to raise the specificity to equal the :hover */ 394 .#{$prefix}tab-default-disabled a.#{$prefix}tab-close-btn { 395 @include opacity(0.3); 396 } 397 398 @if not $supports-border-radius or $compile-all { 399 .#{$prefix}nbr { 400 .#{$prefix}tab-top-over { 401 .#{$prefix}frame-tl, 402 .#{$prefix}frame-bl, 403 .#{$prefix}frame-tr, 404 .#{$prefix}frame-br, 405 .#{$prefix}frame-tc, 406 .#{$prefix}frame-bc { 407 background-image: theme-background-image($theme-name, 'tab/tab-default-top-over-corners.gif'); 408 } 409 .#{$prefix}frame-ml, 410 .#{$prefix}frame-mr { 411 background-image: theme-background-image($theme-name, 'tab/tab-default-top-over-sides.gif'); 412 } 413 @if $tab-background-gradient-over != null { 414 .#{$prefix}frame-mc { 415 background-color: $tab-base-color-over; 416 background-repeat: repeat-x; 417 background-image: theme-background-image($theme-name, 'tab/tab-default-top-over-bg.gif'); 418 } 419 } 420 } 421 422 .#{$prefix}tab-bottom-over { 423 .#{$prefix}frame-tl, 424 .#{$prefix}frame-bl, 425 .#{$prefix}frame-tr, 426 .#{$prefix}frame-br, 427 .#{$prefix}frame-tc, 428 .#{$prefix}frame-bc { 429 background-image: theme-background-image($theme-name, 'tab/tab-default-bottom-over-corners.gif'); 430 } 431 .#{$prefix}frame-ml, 432 .#{$prefix}frame-mr { 433 background-image: theme-background-image($theme-name, 'tab/tab-default-bottom-over-sides.gif'); 434 } 435 @if $tab-background-gradient-over != null { 436 .#{$prefix}frame-mc { 437 background-color: $tab-base-color-over; 438 background-repeat: repeat-x; 439 background-image: theme-background-image($theme-name, 'tab/tab-default-bottom-over-bg.gif'); 440 } 441 } 442 } 443 444 .#{$prefix}tab-top-active { 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-background-image($theme-name, 'tab/tab-default-top-active-corners.gif'); 452 } 453 .#{$prefix}frame-ml, 454 .#{$prefix}frame-mr { 455 background-image: theme-background-image($theme-name, 'tab/tab-default-top-active-sides.gif'); 456 } 457 @if $tab-background-gradient-active != null { 458 .#{$prefix}frame-mc { 459 background-color: $tab-base-color-active; 460 background-repeat: repeat-x; 461 background-image: theme-background-image($theme-name, 'tab/tab-default-top-active-bg.gif'); 462 } 463 } 464 } 465 466 .#{$prefix}tab-bottom-active { 467 .#{$prefix}frame-tl, 468 .#{$prefix}frame-bl, 469 .#{$prefix}frame-tr, 470 .#{$prefix}frame-br, 471 .#{$prefix}frame-tc, 472 .#{$prefix}frame-bc { 473 background-image: theme-background-image($theme-name, 'tab/tab-default-bottom-active-corners.gif'); 474 } 475 .#{$prefix}frame-ml, 476 .#{$prefix}frame-mr { 477 background-image: theme-background-image($theme-name, 'tab/tab-default-bottom-active-sides.gif'); 478 } 479 @if $tab-background-gradient-active != null { 480 .#{$prefix}frame-mc { 481 background-color: $tab-base-color-active; 482 background-repeat: repeat-x; 483 background-image: theme-background-image($theme-name, 'tab/tab-default-bottom-active-bg.gif'); 484 } 485 } 486 } 487 488 .#{$prefix}tab-top-disabled { 489 .#{$prefix}frame-tl, 490 .#{$prefix}frame-bl, 491 .#{$prefix}frame-tr, 492 .#{$prefix}frame-br, 493 .#{$prefix}frame-tc, 494 .#{$prefix}frame-bc { 495 background-image: theme-background-image($theme-name, 'tab/tab-default-top-disabled-corners.gif'); 496 } 497 .#{$prefix}frame-ml, 498 .#{$prefix}frame-mr { 499 background-image: theme-background-image($theme-name, 'tab/tab-default-top-disabled-sides.gif'); 500 } 501 @if $tab-background-gradient-disabled != null { 502 .#{$prefix}frame-mc { 503 background-repeat: repeat-x; 504 background-image: theme-background-image($theme-name, 'tab/tab-default-top-disabled-bg.gif'); 505 } 506 } 507 } 508 509 .#{$prefix}tab-bottom-disabled { 510 .#{$prefix}frame-tl, 511 .#{$prefix}frame-bl, 512 .#{$prefix}frame-tr, 513 .#{$prefix}frame-br, 514 .#{$prefix}frame-tc, 515 .#{$prefix}frame-bc { 516 background-image: theme-background-image($theme-name, 'tab/tab-default-bottom-disabled-corners.gif'); 517 } 518 .#{$prefix}frame-ml, 519 .#{$prefix}frame-mr { 520 background-image: theme-background-image($theme-name, 'tab/tab-default-bottom-disabled-sides.gif'); 521 } 522 @if $tab-background-gradient-disabled != null { 523 .#{$prefix}frame-mc { 524 background-repeat: repeat-x; 525 background-image: theme-background-image($theme-name, 'tab/tab-default-bottom-disabled-bg.gif'); 526 } 527 } 528 } 529 } 530 } 531 }