theme/themes/stylesheets/ext4/default/widgets/_tab.scss
/**
* Creates the base structure of a Tab.
* @member Ext.tab.Tab
*/
@mixin extjs-tab {
@include x-frame(
$cls: 'tab',
$ui: 'default-top',
$border-radius: $tab-top-border-radius,
$border-width: $tab-top-border-width,
$background-color: $tab-base-color,
$background-gradient: $tab-background-gradient,
$background-direction: top,
$table: true
);
@include x-frame(
$cls: 'tab',
$ui: 'default-bottom',
$border-radius: $tab-bottom-border-radius,
$border-width: $tab-bottom-border-width,
$background-color: $tab-base-color,
$background-gradient: $tab-background-gradient,
$background-direction: bottom,
$table: true
);
.#{$prefix}tab {
z-index: 1;
margin: 0 0 0 $tab-spacing;
display: inline-block;
zoom: 1;
*display: inline;
white-space: nowrap;
height: $tab-height;
border-color: $tab-border-color;
cursor: pointer;
cursor: hand;
button {
cursor: pointer;
cursor: hand;
}
em {
display: block;
padding: 0 6px;
line-height: 1px;
}
button {
background: none;
border: 0;
padding: 0;
margin: 0;
-webkit-appearance: none;
font-size: $tab-font-size;
@if $tab-font-weight {
font-weight: $tab-font-weight;
}
@if $tab-font-family {
font-family: $tab-font-family;
}
color: $tab-color;
outline: 0 none;
overflow-x: visible;
&::-moz-focus-inner {
border: 0;
padding: 0;
}
.#{$prefix}tab-inner {
background-color: transparent;
background-repeat: no-repeat;
background-position: 0 -2px;
display: block;
text-align: center;
white-space: nowrap;
text-overflow: ellipsis;
-o-text-overflow: ellipsis;
overflow: hidden;
}
}
img {
display: none;
}
}
.#{$prefix}border-box {
.#{$prefix}tab-default-top {
height: $tab-height + top($tabbar-top-strip-border-width);
}
.#{$prefix}tab-default-bottom {
height: $tab-height + bottom($tabbar-bottom-strip-border-width);
}
}
@if $include-ie {
* html .#{$prefix}ie {
.#{$prefix}tab button {
width: 1px;
}
}
.#{$prefix}strict .#{$prefix}ie6,
.#{$prefix}strict .#{$prefix}ie7 {
.#{$prefix}tab .#{$prefix}frame-mc {
height: 100%;
}
}
.#{$prefix}ie .#{$prefix}tab-active button:active {
position: relative;
top: -1px;
left: -1px;
}
}
$framepad: max(top($tab-top-border-radius), right($tab-top-border-radius)) - top($tab-top-border-width);
.#{$prefix}tab-default-top {
@if $tab-inner-border {
@include inner-border(
$width: $tab-top-inner-border-width,
$color: $tab-inner-border-color
);
}
border-bottom: 1px solid $tabbar-strip-border-color !important;
em {
padding-bottom: $framepad;
}
button,
.#{$prefix}tab-inner {
height: $tab-height - $framepad * 2 - top($tab-top-border-width);
line-height: $tab-height - $framepad * 2 - top($tab-top-border-width);
}
}
// corrects text being clipped at the bottom in safari4 & 5.0.5
.#{$prefix}safari4,
.#{$prefix}safari5_0 {
.#{$prefix}tab-default-top .#{$prefix}tab-inner {
line-height: $tab-height - $framepad * 2 - top($tab-top-border-width) - 2;
}
}
.#{$prefix}nbr .#{$prefix}tab-default-top {
border-bottom-width: 1px !important;
}
.#{$prefix}tab-default-top-active {
border-bottom-color: $tabbar-strip-background-color !important;
}
$framepad: max(bottom($tab-bottom-border-radius), left($tab-bottom-border-radius)) - bottom($tab-bottom-border-width);
.#{$prefix}tab-default-bottom {
@if $tab-inner-border {
@include inner-border(
$width: $tab-bottom-inner-border-width,
$color: $tab-inner-border-color
);
}
border-top: 1px solid $tabbar-strip-border-color !important;
@include inner-border(
$width: $tab-bottom-inner-border-width,
$color: $tab-inner-border-color
);
em {
padding-top: $framepad;
}
button,
.#{$prefix}tab-inner {
height: $tab-height - $framepad * 2 - bottom($tab-bottom-border-width);
line-height: $tab-height - $framepad * 2 - bottom($tab-bottom-border-width);
}
}
.#{$prefix}nbr .#{$prefix}tab-default-bottom {
border-top-width: 1px !important;
}
.#{$prefix}tab-default-bottom-active {
border-top-color: $tabbar-strip-background-color !important;
}
.#{$prefix}tab-default-disabled {
cursor: default;
border-color: $tab-border-color-disabled;
@include background-gradient($tab-base-color-disabled, $tab-background-gradient-disabled);
button {
color: $tab-color-disabled !important;
}
}
.#{$prefix}tab-icon-text-left {
.#{$prefix}tab-inner {
padding-left: 20px;
}
}
.#{$prefix}tab button {
position: relative;
}
.#{$prefix}tab-icon {
position: absolute;
background-repeat: no-repeat;
background-position: 0 -1px;
top: 0;
left: 0;
right: auto;
bottom: 0;
width: 18px;
height: 18px;
}
// Stop icons being clipped by the bottom of the button element
.#{$prefix}strict {
.#{$prefix}ie8 .#{$prefix}tab button,
.#{$prefix}ie9 .#{$prefix}tab button {
overflow-y: visible;
}
}
.#{$prefix}tab-default-disabled .#{$prefix}tab-icon {
@include opacity(.5);
}
/* In IE a disabled icon needs to be hidden or the opacity effect covers some of the text */
.#{$prefix}tab-noicon .#{$prefix}tab-icon {
display: none;
}
//over
.#{$prefix}tab-over {
@if $tab-border-color-over != $tab-border-color {
border-color: $tab-border-color-over;
}
button {
@if $tab-color-over != $tab-color {
color: $tab-color-over;
}
@if $tab-font-weight-over != $tab-font-weight {
font-weight: $tab-font-weight-over;
}
@if $tab-font-size-over != $tab-font-size {
font-size: $tab-font-size-over;
}
@if $tab-font-family-over != $tab-font-family {
font-family: $tab-font-family-over;
}
}
}
.#{$prefix}tab-top-over {
@include background-gradient($tab-base-color-over, $tab-background-gradient-over, top);
}
.#{$prefix}tab-bottom-over {
@include background-gradient($tab-base-color-over, $tab-background-gradient-over, bottom);
}
//active
.#{$prefix}tab-active {
z-index: 3;
@if $tab-border-color-active != $tab-border-color {
border-color: $tab-border-color-active;
}
button {
@if $tab-color-active != $tab-color {
color: $tab-color-active;
}
color: white;
text-shadow: 0 0 1px #000;
@if $tab-font-weight-active != $tab-font-weight {
font-weight: $tab-font-weight-active;
}
@if $tab-font-size-active != $tab-font-size {
font-size: $tab-font-size-active;
}
@if $tab-font-family-active != $tab-font-family {
font-family: $tab-font-family-active;
}
}
}
.#{$prefix}tab-top-active {
@include background-gradient($tab-base-color-active, $tab-background-gradient-active, top);
}
.#{$prefix}tab-bottom-active {
@include background-gradient($tab-base-color-active, $tab-background-gradient-active, bottom);
}
//disabled
.#{$prefix}tab-disabled {
@if $tab-border-color-disabled != $tab-border-color {
border-color: $tab-border-color-disabled;
}
button {
@if $tab-color-disabled != $tab-color {
color: $tab-color-disabled;
}
@if $tab-font-weight-disabled != $tab-font-weight {
font-weight: $tab-font-weight-disabled;
}
@if $tab-font-size-disabled != $tab-font-size {
font-size: $tab-font-size-disabled;
}
@if $tab-font-family-disabled != $tab-font-family {
font-family: $tab-font-family-disabled;
}
}
}
.#{$prefix}tab-top-disabled {
background-image: none;
background: transparent;
@include background-gradient($tab-base-color-disabled, $tab-background-gradient-disabled, top);
}
.#{$prefix}tab-bottom-disabled {
background-image: none;
background: transparent;
@include background-gradient($tab-base-color-disabled, $tab-background-gradient-disabled, bottom);
}
@if not $supports-gradients or $compile-all {
.#{$prefix}nlg {
@if $tab-background-gradient != null {
.#{$prefix}tab-top { background-image: theme-background-image($theme-name, 'tab/tab-default-top-bg.gif'); }
.#{$prefix}tab-bottom { background-image: theme-background-image($theme-name, 'tab/tab-default-bottom-bg.gif'); }
}
@if $tab-background-gradient-over != null {
.#{$prefix}tab-top-over { background-image: theme-background-image($theme-name, 'tab/tab-default-top-over-bg.gif'); }
.#{$prefix}tab-bottom-over { background-image: theme-background-image($theme-name, 'tab/tab-default-bottom-over-bg.gif'); }
}
@if $tab-background-gradient-active != null {
.#{$prefix}tab-top-active { background-image: theme-background-image($theme-name, 'tab/tab-default-top-active-bg.gif'); }
.#{$prefix}tab-bottom-active { background-image: theme-background-image($theme-name, 'tab/tab-default-bottom-active-bg.gif'); }
}
@if $tab-background-gradient-disabled != null {
.#{$prefix}tab-top-disabled { background-image: theme-background-image($theme-name, 'tab/tab-default-top-disabled-bg.gif') !important; }
.#{$prefix}tab-bottom-disabled { background-image: theme-background-image($theme-name, 'tab/tab-default-bottom-disabled-bg.gif') !important; }
}
}
}
.#{$prefix}tab-closable em {
padding-right: $tab-closable-icon-width + 3;
}
.#{$prefix}tab-close-btn {
position: absolute;
top: $tab-closable-icon-top;
right: $tab-closable-icon-right;
width: $tab-closable-icon-width;
height: $tab-closable-icon-height;
font-size: 0;
line-height: 0;
text-indent: -999px;
background: no-repeat;
background-image: theme-background-image($theme-name, $tab-closable-icon);
@include opacity(.6);
}
.#{$prefix}nbr .#{$prefix}tab-close-btn {
top: $nbr-tab-closable-icon-top;
right: $nbr-tab-closable-icon-right;
}
/* Include the element name otherwise Internet Explorer 7 & 8 take a performance hit */
a.#{$prefix}tab-close-btn:hover {
@include opacity(1);
}
/* Include the element name to raise the specificity to equal the :hover */
.#{$prefix}tab-default-disabled a.#{$prefix}tab-close-btn {
@include opacity(0.3);
}
@if not $supports-border-radius or $compile-all {
.#{$prefix}nbr {
.#{$prefix}tab-top-over {
.#{$prefix}frame-tl,
.#{$prefix}frame-bl,
.#{$prefix}frame-tr,
.#{$prefix}frame-br,
.#{$prefix}frame-tc,
.#{$prefix}frame-bc {
background-image: theme-background-image($theme-name, 'tab/tab-default-top-over-corners.gif');
}
.#{$prefix}frame-ml,
.#{$prefix}frame-mr {
background-image: theme-background-image($theme-name, 'tab/tab-default-top-over-sides.gif');
}
@if $tab-background-gradient-over != null {
.#{$prefix}frame-mc {
background-color: $tab-base-color-over;
background-repeat: repeat-x;
background-image: theme-background-image($theme-name, 'tab/tab-default-top-over-bg.gif');
}
}
}
.#{$prefix}tab-bottom-over {
.#{$prefix}frame-tl,
.#{$prefix}frame-bl,
.#{$prefix}frame-tr,
.#{$prefix}frame-br,
.#{$prefix}frame-tc,
.#{$prefix}frame-bc {
background-image: theme-background-image($theme-name, 'tab/tab-default-bottom-over-corners.gif');
}
.#{$prefix}frame-ml,
.#{$prefix}frame-mr {
background-image: theme-background-image($theme-name, 'tab/tab-default-bottom-over-sides.gif');
}
@if $tab-background-gradient-over != null {
.#{$prefix}frame-mc {
background-color: $tab-base-color-over;
background-repeat: repeat-x;
background-image: theme-background-image($theme-name, 'tab/tab-default-bottom-over-bg.gif');
}
}
}
.#{$prefix}tab-top-active {
.#{$prefix}frame-tl,
.#{$prefix}frame-bl,
.#{$prefix}frame-tr,
.#{$prefix}frame-br,
.#{$prefix}frame-tc,
.#{$prefix}frame-bc {
background-image: theme-background-image($theme-name, 'tab/tab-default-top-active-corners.gif');
}
.#{$prefix}frame-ml,
.#{$prefix}frame-mr {
background-image: theme-background-image($theme-name, 'tab/tab-default-top-active-sides.gif');
}
@if $tab-background-gradient-active != null {
.#{$prefix}frame-mc {
background-color: $tab-base-color-active;
background-repeat: repeat-x;
background-image: theme-background-image($theme-name, 'tab/tab-default-top-active-bg.gif');
}
}
}
.#{$prefix}tab-bottom-active {
.#{$prefix}frame-tl,
.#{$prefix}frame-bl,
.#{$prefix}frame-tr,
.#{$prefix}frame-br,
.#{$prefix}frame-tc,
.#{$prefix}frame-bc {
background-image: theme-background-image($theme-name, 'tab/tab-default-bottom-active-corners.gif');
}
.#{$prefix}frame-ml,
.#{$prefix}frame-mr {
background-image: theme-background-image($theme-name, 'tab/tab-default-bottom-active-sides.gif');
}
@if $tab-background-gradient-active != null {
.#{$prefix}frame-mc {
background-color: $tab-base-color-active;
background-repeat: repeat-x;
background-image: theme-background-image($theme-name, 'tab/tab-default-bottom-active-bg.gif');
}
}
}
.#{$prefix}tab-top-disabled {
.#{$prefix}frame-tl,
.#{$prefix}frame-bl,
.#{$prefix}frame-tr,
.#{$prefix}frame-br,
.#{$prefix}frame-tc,
.#{$prefix}frame-bc {
background-image: theme-background-image($theme-name, 'tab/tab-default-top-disabled-corners.gif');
}
.#{$prefix}frame-ml,
.#{$prefix}frame-mr {
background-image: theme-background-image($theme-name, 'tab/tab-default-top-disabled-sides.gif');
}
@if $tab-background-gradient-disabled != null {
.#{$prefix}frame-mc {
background-repeat: repeat-x;
background-image: theme-background-image($theme-name, 'tab/tab-default-top-disabled-bg.gif');
}
}
}
.#{$prefix}tab-bottom-disabled {
.#{$prefix}frame-tl,
.#{$prefix}frame-bl,
.#{$prefix}frame-tr,
.#{$prefix}frame-br,
.#{$prefix}frame-tc,
.#{$prefix}frame-bc {
background-image: theme-background-image($theme-name, 'tab/tab-default-bottom-disabled-corners.gif');
}
.#{$prefix}frame-ml,
.#{$prefix}frame-mr {
background-image: theme-background-image($theme-name, 'tab/tab-default-bottom-disabled-sides.gif');
}
@if $tab-background-gradient-disabled != null {
.#{$prefix}frame-mc {
background-repeat: repeat-x;
background-image: theme-background-image($theme-name, 'tab/tab-default-bottom-disabled-bg.gif');
}
}
}
}
}
}