@mixin extjs-tab-ui(
$ui,
$ui-background-color: null,
$ui-background-color-focus: null,
$ui-background-color-over: null,
$ui-background-color-active: null,
$ui-background-color-focus-over: null,
$ui-background-color-focus-active: null,
$ui-background-color-disabled: null,
$ui-plain-background-color: null,
$ui-plain-background-color-focus: null,
$ui-plain-background-color-over: null,
$ui-plain-background-color-active: null,
$ui-plain-background-color-focus-over: null,
$ui-plain-background-color-focus-active: null,
$ui-plain-background-color-disabled: null,
$ui-border-radius: $tab-border-radius,
$ui-border-width: $tab-border-width,
$ui-border-width-focus: $tab-border-width-focus,
$ui-border-width-over: $tab-border-width-over,
$ui-border-width-active: $tab-border-width-active,
$ui-border-width-focus-over: $tab-border-width-focus-over,
$ui-border-width-focus-active: $tab-border-width-focus-active,
$ui-border-width-disabled: $tab-border-width-disabled,
$ui-margin: $tab-margin,
$ui-padding: $tab-padding,
$ui-text-padding: $tab-text-padding,
$ui-border-color: null,
$ui-border-color-focus: null,
$ui-border-color-over: null,
$ui-border-color-active: null,
$ui-border-color-focus-over: null,
$ui-border-color-focus-active: null,
$ui-border-color-disabled: null,
$ui-plain-border-color: null,
$ui-plain-border-color-focus: null,
$ui-plain-border-color-over: null,
$ui-plain-border-color-active: null,
$ui-plain-border-color-focus-over: null,
$ui-plain-border-color-focus-active: null,
$ui-plain-border-color-disabled: null,
$ui-cursor: $tab-cursor,
$ui-cursor-disabled: $tab-cursor-disabled,
$ui-font-size: null,
$ui-font-size-focus: null,
$ui-font-size-over: null,
$ui-font-size-active: null,
$ui-font-size-focus-over: null,
$ui-font-size-focus-active: null,
$ui-font-size-disabled: null,
$ui-font-weight: null,
$ui-font-weight-focus: null,
$ui-font-weight-over: null,
$ui-font-weight-active: null,
$ui-font-weight-focus-over: null,
$ui-font-weight-focus-active: null,
$ui-font-weight-disabled: null,
$ui-font-family: null,
$ui-font-family-focus: null,
$ui-font-family-over: null,
$ui-font-family-active: null,
$ui-font-family-focus-over: null,
$ui-font-family-focus-active: null,
$ui-font-family-disabled: null,
$ui-line-height: $tab-line-height,
$ui-color: null,
$ui-color-focus: null,
$ui-color-over: null,
$ui-color-active: null,
$ui-color-focus-over: null,
$ui-color-focus-active: null,
$ui-color-disabled: null,
$ui-plain-color: null,
$ui-plain-color-focus: null,
$ui-plain-color-over: null,
$ui-plain-color-active: null,
$ui-plain-color-focus-over: null,
$ui-plain-color-focus-active: null,
$ui-plain-color-disabled: null,
$ui-background-gradient: null,
$ui-background-gradient-focus: null,
$ui-background-gradient-over: null,
$ui-background-gradient-active: null,
$ui-background-gradient-focus-over: null,
$ui-background-gradient-focus-active: null,
$ui-background-gradient-disabled: null,
$ui-inner-border-width: null,
$ui-inner-border-width-focus: null,
$ui-inner-border-width-over: null,
$ui-inner-border-width-active: null,
$ui-inner-border-width-focus-over: null,
$ui-inner-border-width-focus-active: null,
$ui-inner-border-width-disabled: null,
$ui-inner-border-color: null,
$ui-inner-border-color-focus: null,
$ui-inner-border-color-over: null,
$ui-inner-border-color-active: null,
$ui-inner-border-color-focus-over: null,
$ui-inner-border-color-focus-active: null,
$ui-inner-border-color-disabled: null,
$ui-inner-border-collapse: null,
$ui-inner-border-collapse-focus: null,
$ui-inner-border-collapse-over: null,
$ui-inner-border-collapse-active: null,
$ui-inner-border-collapse-focus-over: null,
$ui-inner-border-collapse-focus-active: null,
$ui-inner-border-collapse-disabled: null,
$ui-outline-width-focus: $tab-outline-width-focus,
$ui-outline-style-focus: $tab-outline-style-focus,
$ui-outline-color-focus: $tab-outline-color-focus,
$ui-outline-offset-focus: $tab-outline-offset-focus,
$ui-body-outline-width-focus: $tab-body-outline-width-focus,
$ui-body-outline-style-focus: $tab-body-outline-style-focus,
$ui-body-outline-color-focus: $tab-body-outline-color-focus,
$ui-icon-width: $tab-icon-width,
$ui-icon-height: $tab-icon-height,
$ui-icon-spacing: $tab-icon-spacing,
$ui-icon-background-position: $tab-icon-background-position,
$ui-glyph-color: null,
$ui-glyph-color-focus: null,
$ui-glyph-color-over: null,
$ui-glyph-color-active: null,
$ui-glyph-color-focus-over: null,
$ui-glyph-color-focus-active: null,
$ui-glyph-color-disabled: null,
$ui-plain-glyph-color: null,
$ui-plain-glyph-color-focus: null,
$ui-plain-glyph-color-over: null,
$ui-plain-glyph-color-active: null,
$ui-plain-glyph-color-focus-over: null,
$ui-plain-glyph-color-focus-active: null,
$ui-plain-glyph-color-disabled: null,
$ui-glyph-opacity: $tab-glyph-opacity,
$ui-glyph-opacity-disabled: $tab-glyph-opacity-disabled,
$ui-opacity: $tab-opacity,
$ui-opacity-focus: $tab-opacity-focus,
$ui-opacity-over: $tab-opacity-over,
$ui-opacity-active: $tab-opacity-active,
$ui-opacity-focus-over: $tab-opacity-focus-over,
$ui-opacity-focus-active: $tab-opacity-focus-active,
$ui-opacity-disabled: $tab-opacity-disabled,
$ui-background-opacity: $tab-background-opacity,
$ui-background-opacity-focus: $tab-background-opacity-focus,
$ui-background-opacity-over: $tab-background-opacity-over,
$ui-background-opacity-active: $tab-background-opacity-active,
$ui-background-opacity-focus-over: $tab-background-opacity-focus-over,
$ui-background-opacity-focus-active: $tab-background-opacity-focus-active,
$ui-background-opacity-disabled: $tab-background-opacity-disabled,
$ui-text-opacity-disabled: $tab-text-opacity-disabled,
$ui-icon-opacity-disabled: $tab-icon-opacity-disabled,
$ui-closable-icon-width: $tab-closable-icon-width,
$ui-closable-icon-height: $tab-closable-icon-height,
$ui-closable-icon-top: $tab-closable-icon-top,
$ui-closable-icon-right: $tab-closable-icon-right,
$ui-closable-icon-spacing: $tab-closable-icon-spacing,
$ui-closable-icon-glyph-color: null,
$ui-closable-icon-glyph-color-focus: null,
$ui-closable-icon-glyph-color-over: null,
$ui-closable-icon-glyph-color-active: null,
$ui-closable-icon-glyph-color-focus-over: null,
$ui-closable-icon-glyph-color-focus-active: null,
$ui-closable-icon-glyph-color-disabled: null,
$ui-plain-closable-icon-glyph-color: $tab-plain-closable-icon-glyph-color,
$ui-plain-closable-icon-glyph-color-focus: $tab-plain-closable-icon-glyph-color-focus,
$ui-plain-closable-icon-glyph-color-over: $tab-plain-closable-icon-glyph-color-over,
$ui-plain-closable-icon-glyph-color-active: $tab-plain-closable-icon-glyph-color-active,
$ui-plain-closable-icon-glyph-color-focus-over: $tab-plain-closable-icon-glyph-color-focus-over,
$ui-plain-closable-icon-glyph-color-focus-active: $tab-plain-closable-icon-glyph-color-focus-active,
$ui-plain-closable-icon-glyph-color-disabled: $tab-plain-closable-icon-glyph-color-disabled,
$ui-closable-icon-glyph: $tab-closable-icon-glyph
) {
@if $ui-background-color == null {
$ui-background-color: $tab-base-color;
@if $ui-background-color-focus == null {
$ui-background-color-focus: $tab-base-color-focus;
}
@if $ui-background-color-disabled == null {
$ui-background-color-disabled: $tab-base-color-disabled;
}
} @else {
@if $ui-background-color-focus == null {
$ui-background-color-focus: $ui-background-color;
}
@if $ui-background-color-disabled == null {
$ui-background-color-disabled: $ui-background-color;
}
}
@if $ui-background-color-over == null {
$ui-background-color-over: $tab-base-color-over;
@if $ui-background-color-focus-over == null {
$ui-background-color-focus-over: $tab-base-color-focus-over;
}
} @else {
@if $ui-background-color-focus-over == null {
$ui-background-color-focus-over: $ui-background-color-over;
}
}
@if $ui-background-color-active == null {
$ui-background-color-active: $tab-base-color-active;
@if $ui-background-color-focus-active == null {
$ui-background-color-focus-active: $tab-base-color-focus-active;
}
} @else {
@if $ui-background-color-focus-active == null {
$ui-background-color-focus-active: $ui-background-color-active;
}
}
@if $ui-plain-background-color == null {
$ui-plain-background-color: if($ui == 'default', $tab-plain-background-color, $ui-background-color);
@if $ui-plain-background-color-focus == null {
$ui-plain-background-color-focus: $tab-plain-background-color-focus;
}
@if $ui-plain-background-color-disabled == null {
$ui-plain-background-color-disabled: $tab-plain-background-color-disabled;
}
} @else {
@if $ui-plain-background-color-focus == null {
$ui-plain-background-color-focus: $ui-plain-background-color;
}
@if $ui-plain-background-color-disabled == null {
$ui-plain-background-color-disabled: $ui-plain-background-color;
}
}
@if $ui-plain-background-color-over == null {
$ui-plain-background-color-over: $tab-plain-background-color-over;
@if $ui-plain-background-color-focus-over == null {
$ui-plain-background-color-focus-over: $tab-plain-background-color-focus-over;
}
} @else {
@if $ui-plain-background-color-focus-over == null {
$ui-plain-background-color-focus-over: $ui-plain-background-color-over;
}
}
@if $ui-plain-background-color-active == null {
$ui-plain-background-color-active: $tab-plain-background-color-active;
@if $ui-plain-background-color-focus-active == null {
$ui-plain-background-color-focus-active: $tab-plain-background-color-focus-active;
}
} @else {
@if $ui-plain-background-color-focus-active == null {
$ui-plain-background-color-focus-active: $ui-plain-background-color-active;
}
}
@if $ui-border-color == null {
$ui-border-color: $tab-border-color;
@if $ui-border-color-focus == null {
$ui-border-color-focus: $tab-border-color-focus;
}
@if $ui-border-color-disabled == null {
$ui-border-color-disabled: $tab-border-color-disabled;
}
} @else {
@if $ui-border-color-focus == null {
$ui-border-color-focus: $ui-border-color;
}
@if $ui-border-color-disabled == null {
$ui-border-color-disabled: $ui-border-color;
}
}
@if $ui-border-color-over == null {
$ui-border-color-over: $tab-border-color-over;
@if $ui-border-color-focus-over == null {
$ui-border-color-focus-over: $tab-border-color-focus-over;
}
} @else {
@if $ui-border-color-focus-over == null {
$ui-border-color-focus-over: $ui-border-color-over;
}
}
@if $ui-border-color-active == null {
$ui-border-color-active: $tab-border-color-active;
@if $ui-border-color-focus-active == null {
$ui-border-color-focus-active: $tab-border-color-focus-active;
}
} @else {
@if $ui-border-color-focus-active == null {
$ui-border-color-focus-active: $ui-border-color-active;
}
}
@if $ui-plain-border-color == null {
$ui-plain-border-color: if($ui == 'default', $tab-plain-border-color, $ui-border-color);
@if $ui-plain-border-color-focus == null {
$ui-plain-border-color-focus: $tab-plain-border-color-focus;
}
@if $ui-plain-border-color-disabled == null {
$ui-plain-border-color-disabled: $tab-plain-border-color-disabled;
}
} @else {
@if $ui-plain-border-color-focus == null {
$ui-plain-border-color-focus: $ui-plain-border-color;
}
@if $ui-plain-border-color-disabled == null {
$ui-plain-border-color-disabled: $ui-plain-border-color;
}
}
@if $ui-plain-border-color-over == null {
$ui-plain-border-color-over: $tab-plain-border-color-over;
@if $ui-plain-border-color-focus-over == null {
$ui-plain-border-color-focus-over: $tab-plain-border-color-focus-over;
}
} @else {
@if $ui-plain-border-color-focus-over == null {
$ui-plain-border-color-focus-over: $ui-plain-border-color-over;
}
}
@if $ui-plain-border-color-active == null {
$ui-plain-border-color-active: $tab-plain-border-color-active;
@if $ui-plain-border-color-focus-active == null {
$ui-plain-border-color-focus-active: $tab-plain-border-color-focus-active;
}
} @else {
@if $ui-plain-border-color-focus-active == null {
$ui-plain-border-color-focus-active: $ui-plain-border-color-active;
}
}
@if $ui-font-size == null {
$ui-font-size: $tab-font-size;
@if $ui-font-size-focus == null {
$ui-font-size-focus: $tab-font-size-focus;
}
@if $ui-font-size-over == null {
$ui-font-size-over: $tab-font-size-over;
}
@if $ui-font-size-active == null {
$ui-font-size-active: $tab-font-size-active;
}
@if $ui-font-size-focus-over == null {
$ui-font-size-focus-over: $tab-font-size-focus-over;
}
@if $ui-font-size-focus-active == null {
$ui-font-size-focus-active: $tab-font-size-focus-active;
}
@if $ui-font-size-disabled == null {
$ui-font-size-disabled: $tab-font-size-disabled;
}
} @else {
@if $ui-font-size-focus == null {
$ui-font-size-focus: $ui-font-size;
}
@if $ui-font-size-over == null {
$ui-font-size-over: $ui-font-size;
}
@if $ui-font-size-active == null {
$ui-font-size-active: $ui-font-size;
}
@if $ui-font-size-focus-over == null {
$ui-font-size-focus-over: $ui-font-size-focus;
}
@if $ui-font-size-focus-active == null {
$ui-font-size-focus-active: $ui-font-size-focus;
}
@if $ui-font-size-disabled == null {
$ui-font-size-disabled: $ui-font-size;
}
}
@if $ui-font-weight == null {
$ui-font-weight: $tab-font-weight;
@if $ui-font-weight-focus == null {
$ui-font-weight-focus: $tab-font-weight-focus;
}
@if $ui-font-weight-over == null {
$ui-font-weight-over: $tab-font-weight-over;
}
@if $ui-font-weight-active == null {
$ui-font-weight-active: $tab-font-weight-active;
}
@if $ui-font-weight-focus-over == null {
$ui-font-weight-focus-over: $tab-font-weight-focus-over;
}
@if $ui-font-weight-focus-active == null {
$ui-font-weight-focus-active: $tab-font-weight-focus-active;
}
@if $ui-font-weight-disabled == null {
$ui-font-weight-disabled: $tab-font-weight-disabled;
}
} @else {
@if $ui-font-weight-focus == null {
$ui-font-weight-focus: $ui-font-weight;
}
@if $ui-font-weight-over == null {
$ui-font-weight-over: $ui-font-weight;
}
@if $ui-font-weight-active == null {
$ui-font-weight-active: $ui-font-weight;
}
@if $ui-font-weight-focus-over == null {
$ui-font-weight-focus-over: $ui-font-weight-focus;
}
@if $ui-font-weight-focus-active == null {
$ui-font-weight-focus-active: $ui-font-weight-focus;
}
@if $ui-font-weight-disabled == null {
$ui-font-weight-disabled: $ui-font-weight;
}
}
@if $ui-font-family == null {
$ui-font-family: $tab-font-family;
@if $ui-font-family-focus == null {
$ui-font-family-focus: $tab-font-family-focus;
}
@if $ui-font-family-over == null {
$ui-font-family-over: $tab-font-family-over;
}
@if $ui-font-family-active == null {
$ui-font-family-active: $tab-font-family-active;
}
@if $ui-font-family-focus-over == null {
$ui-font-family-focus-over: $tab-font-family-focus-over;
}
@if $ui-font-family-focus-active == null {
$ui-font-family-focus-active: $tab-font-family-focus-active;
}
@if $ui-font-family-disabled == null {
$ui-font-family-disabled: $tab-font-family-disabled;
}
} @else {
@if $ui-font-family-focus == null {
$ui-font-family-focus: $ui-font-family;
}
@if $ui-font-family-over == null {
$ui-font-family-over: $ui-font-family;
}
@if $ui-font-family-active == null {
$ui-font-family-active: $ui-font-family;
}
@if $ui-font-family-focus-over == null {
$ui-font-family-focus-over: $ui-font-family-focus;
}
@if $ui-font-family-focus-active == null {
$ui-font-family-focus-active: $ui-font-family-focus;
}
@if $ui-font-family-disabled == null {
$ui-font-family-disabled: $ui-font-family;
}
}
@if $ui-color == null {
$ui-color: $tab-color;
@if $ui-color-focus == null {
$ui-color-focus: $tab-color-focus;
}
@if $ui-color-disabled == null {
$ui-color-disabled: $tab-color-disabled;
}
} @else {
@if $ui-color-focus == null {
$ui-color-focus: $ui-color;
}
@if $ui-color-disabled == null {
$ui-color-disabled: $ui-color;
}
}
@if $ui-color-over == null {
$ui-color-over: $tab-color-over;
@if $ui-color-focus-over == null {
$ui-color-focus-over: $tab-color-focus-over;
}
} @else {
@if $ui-color-focus-over == null {
$ui-color-focus-over: $ui-color-over;
}
}
@if $ui-color-active == null {
$ui-color-active: $tab-color-active;
@if $ui-color-focus-active == null {
$ui-color-focus-active: $tab-color-focus-active;
}
} @else {
@if $ui-color-focus-active == null {
$ui-color-focus-active: $ui-color-active;
}
}
@if $ui-plain-color == null {
$ui-plain-color: if($ui == 'default', $tab-plain-color, $ui-color);
@if $ui-plain-color-focus == null {
$ui-plain-color-focus: $tab-plain-color-focus;
}
@if $ui-plain-color-disabled == null {
$ui-plain-color-disabled: $tab-plain-color-disabled;
}
} @else {
@if $ui-plain-color-focus == null {
$ui-plain-color-focus: $ui-plain-color;
}
@if $ui-plain-color-disabled == null {
$ui-plain-color-disabled: $ui-plain-color;
}
}
@if $ui-plain-color-over == null {
$ui-plain-color-over: $tab-plain-color-over;
@if $ui-plain-color-focus-over == null {
$ui-plain-color-focus-over: $tab-plain-color-focus-over;
}
} @else {
@if $ui-plain-color-focus-over == null {
$ui-plain-color-focus-over: $ui-plain-color-over;
}
}
@if $ui-plain-color-active == null {
$ui-plain-color-active: $tab-plain-color-active;
@if $ui-plain-color-focus-active == null {
$ui-plain-color-focus-active: $tab-plain-color-focus-active;
}
} @else {
@if $ui-plain-color-focus-active == null {
$ui-plain-color-focus-active: $ui-plain-color-active;
}
}
@if $ui-background-gradient == null {
$ui-background-gradient: $tab-background-gradient;
@if $ui-background-gradient-focus == null {
$ui-background-gradient-focus: $tab-background-gradient-focus;
}
@if $ui-background-gradient-disabled == null {
$ui-background-gradient-disabled: $tab-background-gradient-disabled;
}
} @else {
@if $ui-background-gradient-focus == null {
$ui-background-gradient-focus: $ui-background-gradient;
}
@if $ui-background-gradient-disabled == null {
$ui-background-gradient-disabled: $ui-background-gradient;
}
}
@if $ui-background-gradient-over == null {
$ui-background-gradient-over: $tab-background-gradient-over;
@if $ui-background-gradient-focus-over == null {
$ui-background-gradient-focus-over: $tab-background-gradient-focus-over;
}
} @else {
@if $ui-background-gradient-focus-over == null {
$ui-background-gradient-focus-over: $ui-background-gradient-over;
}
}
@if $ui-background-gradient-active == null {
$ui-background-gradient-active: $tab-background-gradient-active;
@if $ui-background-gradient-focus-active == null {
$ui-background-gradient-focus-active: $tab-background-gradient-focus-active;
}
} @else {
@if $ui-background-gradient-focus-active == null {
$ui-background-gradient-focus-active: $ui-background-gradient-active;
}
}
@if $ui-inner-border-width == null {
$ui-inner-border-width: $tab-inner-border-width;
@if $ui-inner-border-width-focus == null {
$ui-inner-border-width-focus: $tab-inner-border-width-focus;
}
@if $ui-inner-border-width-over == null {
$ui-inner-border-width-over: $tab-inner-border-width-over;
}
@if $ui-inner-border-width-active == null {
$ui-inner-border-width-active: $tab-inner-border-width-active;
}
@if $ui-inner-border-width-focus-over == null {
$ui-inner-border-width-focus-over: $tab-inner-border-width-focus-over;
}
@if $ui-inner-border-width-focus-active == null {
$ui-inner-border-width-focus-active: $tab-inner-border-width-focus-active;
}
@if $ui-inner-border-width-disabled == null {
$ui-inner-border-width-disabled: $tab-inner-border-width-disabled;
}
} @else {
@if $ui-inner-border-width-focus == null {
$ui-inner-border-width-focus: $ui-inner-border-width;
}
@if $ui-inner-border-width-over == null {
$ui-inner-border-width-over: $ui-inner-border-width;
}
@if $ui-inner-border-width-active == null {
$ui-inner-border-width-active: $ui-inner-border-width;
}
@if $ui-inner-border-width-focus-over == null {
$ui-inner-border-width-focus-over: $ui-inner-border-width-focus;
}
@if $ui-inner-border-width-focus-active == null {
$ui-inner-border-width-focus-active: $ui-inner-border-width-focus;
}
@if $ui-inner-border-width-disabled == null {
$ui-inner-border-width-disabled: $ui-inner-border-width;
}
}
@if $ui-inner-border-color == null {
$ui-inner-border-color: tab-inner-border-color($ui-background-color, $ui-border-color);
@if $ui-inner-border-color-focus == null {
$ui-inner-border-color-focus: $tab-inner-border-color-focus;
}
@if $ui-inner-border-color-over == null {
$ui-inner-border-color-over: $tab-inner-border-color-over;
}
@if $ui-inner-border-color-active == null {
$ui-inner-border-color-active: $tab-inner-border-color-active;
}
@if $ui-inner-border-color-focus-over == null {
$ui-inner-border-color-focus-over: $tab-inner-border-color-focus-over;
}
@if $ui-inner-border-color-focus-active == null {
$ui-inner-border-color-focus-active: $tab-inner-border-color-focus-active;
}
@if $ui-inner-border-color-disabled == null {
$ui-inner-border-color-disabled: $tab-inner-border-color-disabled;
}
} @else {
@if $ui-inner-border-color-focus == null {
$ui-inner-border-color-focus: tab-inner-border-color-focus($ui-background-color-focus, $ui-border-color-focus);
}
@if $ui-inner-border-color-over == null {
$ui-inner-border-color-over: tab-inner-border-color-over($ui-background-color-over, $ui-border-color-over);
}
@if $ui-inner-border-color-active == null {
$ui-inner-border-color-active: tab-inner-border-color-active($ui-background-color-active, $ui-border-color-active);
}
@if $ui-inner-border-color-focus-over == null {
$ui-inner-border-color-focus-over: tab-inner-border-color-focus-over($ui-background-color-focus-over, $ui-border-color-focus-over);
}
@if $ui-inner-border-color-focus-active == null {
$ui-inner-border-color-focus-active: tab-inner-border-color-focus-active($ui-background-color-focus-active, $ui-border-color-focus-active);
}
@if $ui-inner-border-color-disabled == null {
$ui-inner-border-color-disabled: tab-inner-border-color-disabled($ui-background-color-disabled, $ui-border-color-disabled);
}
}
@if $ui-inner-border-collapse == null {
$ui-inner-border-collapse: $tab-inner-border-collapse;
@if $ui-inner-border-collapse-focus == null {
$ui-inner-border-collapse-focus: $tab-inner-border-collapse-focus;
}
@if $ui-inner-border-collapse-over == null {
$ui-inner-border-collapse-over: $tab-inner-border-collapse-over;
}
@if $ui-inner-border-collapse-active == null {
$ui-inner-border-collapse-active: $tab-inner-border-collapse-active;
}
@if $ui-inner-border-collapse-focus-over == null {
$ui-inner-border-collapse-focus-over: $tab-inner-border-collapse-focus-over;
}
@if $ui-inner-border-collapse-focus-active == null {
$ui-inner-border-collapse-focus-active: $tab-inner-border-collapse-focus-active;
}
@if $ui-inner-border-collapse-disabled == null {
$ui-inner-border-collapse-disabled: $tab-inner-border-collapse-disabled;
}
} @else {
@if $ui-inner-border-collapse-focus == null {
$ui-inner-border-collapse-focus: $ui-inner-border-collapse;
}
@if $ui-inner-border-collapse-over == null {
$ui-inner-border-collapse-over: $ui-inner-border-collapse;
}
@if $ui-inner-border-collapse-active == null {
$ui-inner-border-collapse-active: $ui-inner-border-collapse;
}
@if $ui-inner-border-collapse-focus-over == null {
$ui-inner-border-collapse-focus-over: $ui-inner-border-collapse-focus;
}
@if $ui-inner-border-collapse-focus-active == null {
$ui-inner-border-collapse-focus-active: $ui-inner-border-collapse-focus;
}
@if $ui-inner-border-collapse-disabled == null {
$ui-inner-border-collapse-disabled: $ui-inner-border-collapse;
}
}
@if $ui-glyph-color == null {
$ui-glyph-color: $tab-glyph-color;
@if $ui-glyph-color-focus == null {
$ui-glyph-color-focus: $tab-glyph-color-focus;
}
@if $ui-glyph-color-disabled == null {
$ui-glyph-color-disabled: $tab-glyph-color-disabled;
}
} @else {
@if $ui-glyph-color-focus == null {
$ui-glyph-color-focus: $ui-glyph-color;
}
@if $ui-glyph-color-disabled == null {
$ui-glyph-color-disabled: $ui-glyph-color;
}
}
@if $ui-glyph-color-over == null {
$ui-glyph-color-over: $tab-glyph-color-over;
@if $ui-glyph-color-focus-over == null {
$ui-glyph-color-focus-over: $tab-glyph-color-focus-over;
}
} @else {
@if $ui-glyph-color-focus-over == null {
$ui-glyph-color-focus-over: $ui-glyph-color-over;
}
}
@if $ui-glyph-color-active == null {
$ui-glyph-color-active: $tab-glyph-color-active;
@if $ui-glyph-color-focus-active == null {
$ui-glyph-color-focus-active: $tab-glyph-color-focus-active;
}
} @else {
@if $ui-glyph-color-focus-active == null {
$ui-glyph-color-focus-active: $ui-glyph-color-active;
}
}
@if $ui-plain-glyph-color == null {
$ui-plain-glyph-color: $tab-plain-glyph-color;
@if $ui-plain-glyph-color-focus == null {
$ui-plain-glyph-color-focus: $tab-plain-glyph-color-focus;
}
@if $ui-plain-glyph-color-disabled == null {
$ui-plain-glyph-color-disabled: $tab-plain-glyph-color-disabled;
}
} @else {
@if $ui-plain-glyph-color-focus == null {
$ui-plain-glyph-color-focus: $ui-plain-glyph-color;
}
@if $ui-plain-glyph-color-disabled == null {
$ui-plain-glyph-color-disabled: $ui-plain-glyph-color;
}
}
@if $ui-plain-glyph-color-over == null {
$ui-plain-glyph-color-over: $tab-plain-glyph-color-over;
@if $ui-plain-glyph-color-focus-over == null {
$ui-plain-glyph-color-focus-over: $tab-plain-glyph-color-focus-over;
}
} @else {
@if $ui-plain-glyph-color-focus-over == null {
$ui-plain-glyph-color-focus-over: $ui-plain-glyph-color-over;
}
}
@if $ui-plain-glyph-color-active == null {
$ui-plain-glyph-color-active: $tab-plain-glyph-color-active;
@if $ui-plain-glyph-color-focus-active == null {
$ui-plain-glyph-color-focus-active: $tab-plain-glyph-color-focus-active;
}
} @else {
@if $ui-plain-glyph-color-focus-active == null {
$ui-plain-glyph-color-focus-active: $ui-plain-glyph-color-active;
}
}
@if $ui-closable-icon-glyph-color == null {
$ui-closable-icon-glyph-color: $tab-closable-icon-glyph-color;
@if $ui-closable-icon-glyph-color-focus == null {
$ui-closable-icon-glyph-color-focus: $tab-closable-icon-glyph-color-focus;
}
@if $ui-closable-icon-glyph-color-disabled == null {
$ui-closable-icon-glyph-color-disabled: $tab-closable-icon-glyph-color-disabled;
}
} @else {
@if $ui-closable-icon-glyph-color-focus == null {
$ui-closable-icon-glyph-color-focus: $ui-closable-icon-glyph-color;
}
@if $ui-closable-icon-glyph-color-disabled == null {
$ui-closable-icon-glyph-color-disabled: $ui-closable-icon-glyph-color;
}
}
@if $ui-closable-icon-glyph-color-over == null {
$ui-closable-icon-glyph-color-over: $tab-closable-icon-glyph-color-over;
@if $ui-closable-icon-glyph-color-focus-over == null {
$ui-closable-icon-glyph-color-focus-over: $tab-closable-icon-glyph-color-focus-over;
}
} @else {
@if $ui-closable-icon-glyph-color-focus-over == null {
$ui-closable-icon-glyph-color-focus-over: $ui-closable-icon-glyph-color-over;
}
}
@if $ui-closable-icon-glyph-color-active == null {
$ui-closable-icon-glyph-color-active: $tab-closable-icon-glyph-color-active;
@if $ui-closable-icon-glyph-color-focus-active == null {
$ui-closable-icon-glyph-color-focus-active: $tab-closable-icon-glyph-color-focus-active;
}
} @else {
@if $ui-closable-icon-glyph-color-focus-active == null {
$ui-closable-icon-glyph-color-focus-active: $ui-closable-icon-glyph-color-active;
}
}
@if $ui-plain-closable-icon-glyph-color == null {
$ui-plain-closable-icon-glyph-color: $tab-plain-closable-icon-glyph-color;
@if $ui-plain-closable-icon-glyph-color-focus == null {
$ui-plain-closable-icon-glyph-color-focus: $tab-plain-closable-icon-glyph-color-focus;
}
@if $ui-plain-closable-icon-glyph-color-disabled == null {
$ui-plain-closable-icon-glyph-color-disabled: $tab-plain-closable-icon-glyph-color-disabled;
}
} @else {
@if $ui-plain-closable-icon-glyph-color-focus == null {
$ui-plain-closable-icon-glyph-color-focus: $ui-plain-closable-icon-glyph-color;
}
@if $ui-plain-closable-icon-glyph-color-disabled == null {
$ui-plain-closable-icon-glyph-color-disabled: $ui-plain-closable-icon-glyph-color;
}
}
@if $ui-plain-closable-icon-glyph-color-over == null {
$ui-plain-closable-icon-glyph-color-over: $tab-plain-closable-icon-glyph-color-over;
@if $ui-plain-closable-icon-glyph-color-focus-over == null {
$ui-plain-closable-icon-glyph-color-focus-over: $tab-plain-closable-icon-glyph-color-focus-over;
}
} @else {
@if $ui-plain-closable-icon-glyph-color-focus-over == null {
$ui-plain-closable-icon-glyph-color-focus-over: $ui-plain-closable-icon-glyph-color-over;
}
}
@if $ui-plain-closable-icon-glyph-color-active == null {
$ui-plain-closable-icon-glyph-color-active: $tab-plain-closable-icon-glyph-color-active;
@if $ui-plain-closable-icon-glyph-color-focus-active == null {
$ui-plain-closable-icon-glyph-color-focus-active: $tab-plain-closable-icon-glyph-color-focus-active;
}
} @else {
@if $ui-plain-closable-icon-glyph-color-focus-active == null {
$ui-plain-closable-icon-glyph-color-focus-active: $ui-plain-closable-icon-glyph-color-active;
}
}
$inner-border-max: max(
max(top($ui-inner-border-width) right($ui-inner-border-width) bottom($ui-inner-border-width) left($ui-inner-border-width))
max(top($ui-inner-border-width-focus) right($ui-inner-border-width-focus) bottom($ui-inner-border-width-focus) left($ui-inner-border-width-focus))
max(top($ui-inner-border-width-over) right($ui-inner-border-width-over) bottom($ui-inner-border-width-over) left($ui-inner-border-width-over))
max(top($ui-inner-border-width-active) right($ui-inner-border-width-active) bottom($ui-inner-border-width-active) left($ui-inner-border-width-active))
max(top($ui-inner-border-width-disabled) right($ui-inner-border-width-disabled) bottom($ui-inner-border-width-disabled) left($ui-inner-border-width-disabled))
);
$frame-size: frame-size($ui-border-width, $inner-border-max, $ui-border-radius);
@include x-frame(
$cls: 'tab',
$ui: $ui + '-top',
$border-radius: $ui-border-radius,
$border-width: $ui-border-width,
$background-color: $ui-background-color,
$background-gradient: $ui-background-gradient,
$background-direction: top,
$padding: $ui-padding,
$inner-border-width: $ui-inner-border-width,
$table: true
);
@include x-frame(
$cls: 'tab',
$ui: $ui + '-bottom',
$border-radius: rotate180($ui-border-radius),
$border-width: rotate180($ui-border-width),
$background-color: $ui-background-color,
$background-gradient: $ui-background-gradient,
$background-direction: bottom,
$padding: rotate180($ui-padding),
$inner-border-width: $ui-inner-border-width,
$table: true
);
@include x-frame(
$cls: 'tab',
$ui: $ui + '-left',
$border-radius: rotate270($ui-border-radius),
$border-width: rotate270($ui-border-width),
$background-color: $ui-background-color,
$background-gradient: $ui-background-gradient,
$background-direction: top,
$padding: $ui-padding,
$inner-border-width: $ui-inner-border-width,
$table: true
);
@include x-frame(
$cls: 'tab',
$ui: $ui + '-right',
$border-radius: rotate90($ui-border-radius),
$border-width: rotate90($ui-border-width),
$background-color: $ui-background-color,
$background-gradient: $ui-background-gradient,
$background-direction: top,
$padding: $ui-padding,
$inner-border-width: $ui-inner-border-width,
$table: true
);
@if $include-ie {
@mixin ie-tab-rotate($rotate) {
-ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=#{$rotate})";
}
@mixin ie-tab-alpharotate($alpha, $rotate) {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=#{$alpha * 100}),progid:DXImageTransform.Microsoft.BasicImage(rotation=#{$rotate})";
}
}
.#{$prefix}tab-#{$ui} {
border-color: $ui-border-color;
@if not is-null($ui-cursor) {
cursor: $ui-cursor;
}
@if not is-null($ui-inner-border-width) and not is-null($ui-inner-border-color) and $ui-inner-border-width != 0 {
@include inner-border($ui-inner-border-width, $ui-inner-border-color);
}
@if ($ui-opacity != null) and ($ui-opacity != 1) {
@include opacity($ui-opacity);
@if $include-ie {
&.#{$prefix}tab-rotate-left {
.#{$prefix}ie8 & {
@include ie-tab-alpharotate($ui-opacity, 3);
}
}
&.#{$prefix}tab-rotate-right {
.#{$prefix}ie8 & {
@include ie-tab-alpharotate($ui-opacity, 1);
}
}
}
}
@if ($ui-background-opacity != null) and ($ui-background-opacity != 1) {
@include background-opacity($ui-background-color, $ui-background-opacity);
@if $include-ie {
&.#{$prefix}tab-rotate-left {
.#{$prefix}ie8 & {
@include ie-tab-rotate(3);
}
}
&.#{$prefix}tab-rotate-right {
.#{$prefix}ie8 & {
@include ie-tab-rotate(1);
}
}
}
}
@if $ui-plain-background-color != $ui-background-color {
.#{$prefix}tab-bar-plain & {
background-color: $ui-plain-background-color;
}
}
@if $ui-plain-border-color != $ui-border-color {
.#{$prefix}tab-bar-plain & {
border-color: $ui-plain-border-color;
}
}
}
.#{$prefix}tab-#{$ui}-top {
margin: $ui-margin;
@if $include-rtl {
&.#{$prefix}rtl {
margin: rtl($ui-margin);
}
}
&.#{$prefix}tab-rotate-left {
margin: rtl($ui-margin);
@if $include-rtl {
&.#{$prefix}rtl {
margin: $ui-margin;
}
}
}
@if not is-null($ui-inner-border-width) and not is-null($ui-inner-border-color) and $ui-inner-border-width != 0 {
@include inner-border(
if(
$ui-inner-border-collapse,
top($ui-inner-border-width) right($ui-inner-border-width) 0 left($ui-inner-border-width),
$ui-inner-border-width
),
$ui-inner-border-color
);
}
@if not is-null($ui-inner-border-width-focus) and not is-null($ui-inner-border-color-focus) {
&.#{$prefix}tab-focus {
@include inner-border(
if(
$ui-inner-border-collapse-focus,
top($ui-inner-border-width-focus) right($ui-inner-border-width-focus) 0 left($ui-inner-border-width-focus),
$ui-inner-border-width-focus
),
$ui-inner-border-color-focus
);
}
}
@if not is-null($ui-inner-border-width-over) and not is-null($ui-inner-border-color-over) {
&.#{$prefix}tab-over {
@include inner-border(
if(
$ui-inner-border-collapse-over,
top($ui-inner-border-width-over) right($ui-inner-border-width-over) 0 left($ui-inner-border-width-over),
$ui-inner-border-width-over
),
$ui-inner-border-color-over
);
}
}
@if not is-null($ui-inner-border-width-focus-over) and not is-null($ui-inner-border-color-focus-over) and
($ui-inner-border-width-focus-over != $ui-inner-border-width-over or
$ui-inner-border-color-focus-over != $ui-inner-border-color-over or
$ui-inner-border-collapse-focus-over != $ui-inner-border-collapse-over) {
&.#{$prefix}tab-focus.#{$prefix}tab-over {
@include inner-border(
if(
$ui-inner-border-collapse-focus-over,
top($ui-inner-border-width-focus-over) right($ui-inner-border-width-focus-over) 0 left($ui-inner-border-width-focus-over),
$ui-inner-border-width-focus-over
),
$ui-inner-border-color-focus-over
);
}
}
@if not is-null($ui-inner-border-width-active) and not is-null($ui-inner-border-color-active) {
&.#{$prefix}tab.#{$prefix}tab-active {
@include inner-border(
if(
$ui-inner-border-collapse-active,
top($ui-inner-border-width-active) right($ui-inner-border-width-active) 0 left($ui-inner-border-width-active),
$ui-inner-border-width-active
),
$ui-inner-border-color-active
);
}
}
@if not is-null($ui-inner-border-width-focus-active) and not is-null($ui-inner-border-color-focus-active) and
($ui-inner-border-width-focus-active != $ui-inner-border-width-active or
$ui-inner-border-color-focus-active != $ui-inner-border-color-active or
$ui-inner-border-collapse-focus-active != $ui-inner-border-collapse-active) {
&.#{$prefix}tab-focus.#{$prefix}tab-active {
@include inner-border(
if(
$ui-inner-border-collapse-focus-active,
top($ui-inner-border-width-focus-active) right($ui-inner-border-width-focus-active) 0 left($ui-inner-border-width-focus-active),
$ui-inner-border-width-focus-active
),
$ui-inner-border-color-focus-active
);
}
}
@if not is-null($ui-inner-border-width-disabled) and not is-null($ui-inner-border-color-disabled) {
&.#{$prefix}tab.#{$prefix}tab-disabled {
@include inner-border(
if(
$ui-inner-border-collapse-disabled,
top($ui-inner-border-width-disabled) right($ui-inner-border-width-disabled) 0 left($ui-inner-border-width-disabled),
$ui-inner-border-width-disabled
),
$ui-inner-border-color-disabled
);
}
}
}
.#{$prefix}tab-#{$ui}-right {
margin: rotate90($ui-margin);
@if $include-rtl {
&.#{$prefix}rtl {
margin: rtl(rotate90($ui-margin));
}
}
&.#{$prefix}tab-rotate-right {
margin: flip-vertical(rotate90($ui-margin));
@if $include-rtl {
&.#{$prefix}rtl {
margin: rtl(flip-vertical(rotate90($ui-margin)));
}
}
}
@if not is-null($ui-inner-border-width) and not is-null($ui-inner-border-color) and $ui-inner-border-width != 0 {
@include inner-border(
if(
$ui-inner-border-collapse,
top($ui-inner-border-width) right($ui-inner-border-width) bottom($ui-inner-border-width) 0,
$ui-inner-border-width
),
$ui-inner-border-color
);
}
@if not is-null($ui-inner-border-width-focus) and not is-null($ui-inner-border-color-focus) {
&.#{$prefix}tab-focus {
@include inner-border(
if(
$ui-inner-border-collapse-focus,
top($ui-inner-border-width-focus) right($ui-inner-border-width-focus) bottom($ui-inner-border-width-focus) 0,
$ui-inner-border-width-focus
),
$ui-inner-border-color-focus
);
}
}
@if not is-null($ui-inner-border-width-over) and not is-null($ui-inner-border-color-over) {
&.#{$prefix}tab-over {
@include inner-border(
if(
$ui-inner-border-collapse-over,
top($ui-inner-border-width-over) right($ui-inner-border-width-over) bottom($ui-inner-border-width-over) 0,
$ui-inner-border-width-over
),
$ui-inner-border-color-over
);
}
}
@if not is-null($ui-inner-border-width-focus-over) and not is-null($ui-inner-border-color-focus-over) and
($ui-inner-border-width-focus-over != $ui-inner-border-width-over or
$ui-inner-border-color-focus-over != $ui-inner-border-color-over or
$ui-inner-border-collapse-focus-over != $ui-inner-border-collapse-over) {
&.#{$prefix}tab-focus.#{$prefix}tab-over {
@include inner-border(
if(
$ui-inner-border-collapse-focus-over,
top($ui-inner-border-width-focus-over) right($ui-inner-border-width-focus-over) bottom($ui-inner-border-width-focus-over) 0,
$ui-inner-border-width-focus-over
),
$ui-inner-border-color-focus-over
);
}
}
@if not is-null($ui-inner-border-width-active) and not is-null($ui-inner-border-color-active) {
&.#{$prefix}tab.#{$prefix}tab-active {
@include inner-border(
if(
$ui-inner-border-collapse-active,
top($ui-inner-border-width-active) right($ui-inner-border-width-active) bottom($ui-inner-border-width-active) 0,
$ui-inner-border-width-active
),
$ui-inner-border-color-active
);
}
}
@if not is-null($ui-inner-border-width-focus-active) and not is-null($ui-inner-border-color-focus-active) and
($ui-inner-border-width-focus-active != $ui-inner-border-width-active or
$ui-inner-border-color-focus-active != $ui-inner-border-color-active or
$ui-inner-border-collapse-focus-active != $ui-inner-border-collapse-active) {
&.#{$prefix}tab-focus.#{$prefix}tab-active {
@include inner-border(
if(
$ui-inner-border-collapse-focus-active,
top($ui-inner-border-width-focus-active) right($ui-inner-border-width-focus-active) bottom($ui-inner-border-width-focus-active) 0,
$ui-inner-border-width-focus-active
),
$ui-inner-border-color-focus-active
);
}
}
@if not is-null($ui-inner-border-width-disabled) and not is-null($ui-inner-border-color-disabled) {
&.#{$prefix}tab.#{$prefix}tab-disabled {
@include inner-border(
if(
$ui-inner-border-collapse-disabled,
top($ui-inner-border-width-disabled) right($ui-inner-border-width-disabled) bottom($ui-inner-border-width-disabled) 0,
$ui-inner-border-width-disabled
),
$ui-inner-border-color-disabled
);
}
}
}
.#{$prefix}tab-#{$ui}-bottom {
margin: flip-vertical($ui-margin);
@if $include-rtl {
&.#{$prefix}rtl {
margin: rtl(flip-vertical($ui-margin));
}
}
&.#{$prefix}tab-rotate-left {
margin: rotate180($ui-margin);
@if $include-rtl {
&.#{$prefix}rtl {
margin: rtl(rotate180($ui-margin));
}
}
}
@if not is-null($ui-inner-border-width) and not is-null($ui-inner-border-color) and $ui-inner-border-width != 0 {
@include inner-border(
if(
$ui-inner-border-collapse,
0 right($ui-inner-border-width) top($ui-inner-border-width) left($ui-inner-border-width),
$ui-inner-border-width
),
$ui-inner-border-color
);
}
@if not is-null($ui-inner-border-width-focus) and not is-null($ui-inner-border-color-focus) {
&.#{$prefix}tab-focus {
@include inner-border(
if(
$ui-inner-border-collapse-focus,
0 right($ui-inner-border-width-focus) top($ui-inner-border-width-focus) left($ui-inner-border-width-focus),
$ui-inner-border-width-focus
),
$ui-inner-border-color-focus
);
}
}
@if not is-null($ui-inner-border-width-over) and not is-null($ui-inner-border-color-over) {
&.#{$prefix}tab-over {
@include inner-border(
if(
$ui-inner-border-collapse-over,
0 right($ui-inner-border-width-over) top($ui-inner-border-width-over) left($ui-inner-border-width-over),
$ui-inner-border-width-over
),
$ui-inner-border-color-over
);
}
}
@if not is-null($ui-inner-border-width-focus-over) and not is-null($ui-inner-border-color-focus-over) and
($ui-inner-border-width-focus-over != $ui-inner-border-width-over or
$ui-inner-border-color-focus-over != $ui-inner-border-color-over or
$ui-inner-border-collapse-focus-over != $ui-inner-border-collapse-over) {
&.#{$prefix}tab-focus.#{$prefix}tab-over {
@include inner-border(
if(
$ui-inner-border-collapse-focus-over,
0 right($ui-inner-border-width-focus-over) top($ui-inner-border-width-focus-over) left($ui-inner-border-width-focus-over),
$ui-inner-border-width-focus-over
),
$ui-inner-border-color-focus-over
);
}
}
@if not is-null($ui-inner-border-width-active) and not is-null($ui-inner-border-color-active) {
&.#{$prefix}tab.#{$prefix}tab-active {
@include inner-border(
if(
$ui-inner-border-collapse-active,
0 right($ui-inner-border-width-active) top($ui-inner-border-width-active) left($ui-inner-border-width-active),
$ui-inner-border-width-active
),
$ui-inner-border-color-active
);
}
}
@if not is-null($ui-inner-border-width-focus-active) and not is-null($ui-inner-border-color-focus-active) and
($ui-inner-border-width-focus-active != $ui-inner-border-width-active or
$ui-inner-border-color-focus-active != $ui-inner-border-color-active or
$ui-inner-border-collapse-focus-active != $ui-inner-border-collapse-active) {
&.#{$prefix}tab-focus.#{$prefix}tab-active {
@include inner-border(
if(
$ui-inner-border-collapse-focus-active,
0 right($ui-inner-border-width-focus-active) top($ui-inner-border-width-focus-active) left($ui-inner-border-width-focus-active),
$ui-inner-border-width-focus-active
),
$ui-inner-border-color-focus-active
);
}
}
@if not is-null($ui-inner-border-width-disabled) and not is-null($ui-inner-border-color-disabled) {
&.#{$prefix}tab.#{$prefix}tab-disabled {
@include inner-border(
if(
$ui-inner-border-collapse-disabled,
0 right($ui-inner-border-width-disabled) top($ui-inner-border-width-disabled) left($ui-inner-border-width-disabled),
$ui-inner-border-width-disabled
),
$ui-inner-border-color-disabled
);
}
}
}
.#{$prefix}tab-#{$ui}-left {
margin: rtl(rotate90($ui-margin));
@if $include-rtl {
&.#{$prefix}rtl {
margin: rotate90($ui-margin);
}
}
&.#{$prefix}tab-rotate-right {
margin: rotate270($ui-margin);
@if $include-rtl {
&.#{$prefix}rtl {
margin: rtl(rotate270($ui-margin));
}
}
}
@if not is-null($ui-inner-border-width) and not is-null($ui-inner-border-color) and $ui-inner-border-width != 0 {
@include inner-border(
if(
$ui-inner-border-collapse,
top($ui-inner-border-width) 0 bottom($ui-inner-border-width) left($ui-inner-border-width),
$ui-inner-border-width
),
$ui-inner-border-color
);
}
@if not is-null($ui-inner-border-width-focus) and not is-null($ui-inner-border-color-focus) {
&.#{$prefix}tab-focus {
@include inner-border(
if(
$ui-inner-border-collapse-focus,
top($ui-inner-border-width-focus) 0 bottom($ui-inner-border-width-focus) left($ui-inner-border-width-focus),
$ui-inner-border-width-focus
),
$ui-inner-border-color-focus
);
}
}
@if not is-null($ui-inner-border-width-over) and not is-null($ui-inner-border-color-over) {
&.#{$prefix}tab-over {
@include inner-border(
if(
$ui-inner-border-collapse-over,
top($ui-inner-border-width-over) 0 bottom($ui-inner-border-width-over) left($ui-inner-border-width-over),
$ui-inner-border-width-over
),
$ui-inner-border-color-over
);
}
}
@if not is-null($ui-inner-border-width-focus-over) and not is-null($ui-inner-border-color-focus-over) and
($ui-inner-border-width-focus-over != $ui-inner-border-width-over or
$ui-inner-border-color-focus-over != $ui-inner-border-color-over or
$ui-inner-border-collapse-focus-over != $ui-inner-border-collapse-over) {
&.#{$prefix}tab-focus.#{$prefix}tab-over {
@include inner-border(
if(
$ui-inner-border-collapse-focus-over,
top($ui-inner-border-width-focus-over) 0 bottom($ui-inner-border-width-focus-over) left($ui-inner-border-width-focus-over),
$ui-inner-border-width-focus-over
),
$ui-inner-border-color-focus-over
);
}
}
@if not is-null($ui-inner-border-width-active) and not is-null($ui-inner-border-color-active) {
&.#{$prefix}tab.#{$prefix}tab-active {
@include inner-border(
if(
$ui-inner-border-collapse-active,
top($ui-inner-border-width-active) 0 bottom($ui-inner-border-width-active) left($ui-inner-border-width-active),
$ui-inner-border-width-active
),
$ui-inner-border-color-active
);
}
}
@if not is-null($ui-inner-border-width-focus-active) and not is-null($ui-inner-border-color-focus-active) and
($ui-inner-border-width-focus-active != $ui-inner-border-width-active or
$ui-inner-border-color-focus-active != $ui-inner-border-color-active or
$ui-inner-border-collapse-focus-active != $ui-inner-border-collapse-active) {
&.#{$prefix}tab-focus.#{$prefix}tab-active {
@include inner-border(
if(
$ui-inner-border-collapse-focus-active,
top($ui-inner-border-width-focus-active) 0 bottom($ui-inner-border-width-focus-active) left($ui-inner-border-width-focus-active),
$ui-inner-border-width-focus-active
),
$ui-inner-border-color-focus-active
);
}
}
@if not is-null($ui-inner-border-width-disabled) and not is-null($ui-inner-border-color-disabled) {
&.#{$prefix}tab.#{$prefix}tab-disabled {
@include inner-border(
if(
$ui-inner-border-collapse-disabled,
top($ui-inner-border-width-disabled) 0 bottom($ui-inner-border-width-disabled) left($ui-inner-border-width-disabled),
$ui-inner-border-width-disabled
),
$ui-inner-border-color-disabled
);
}
}
}
.#{$prefix}tab-button-#{$ui} {
height: max($ui-icon-height, $ui-line-height);
}
.#{$prefix}tab-inner-#{$ui} {
font: $ui-font-weight #{$ui-font-size}/#{$ui-line-height} $ui-font-family;
color: $ui-color;
@if $ui-text-padding != 0 {
padding: 0 $ui-text-padding;
}
@if ($ui-plain-color != null) and ($ui-plain-color != $ui-color) {
.#{$prefix}tab-bar-plain & {
color: $ui-plain-color;
}
}
max-width: 100%;
.#{$prefix}tab-icon-right > &,
.#{$prefix}tab-icon-left > & {
max-width: calc(100% - #{$ui-icon-width});
}
}
.#{$prefix}tab-icon-el-#{$ui} {
.#{$prefix}tab-icon-left > &,
.#{$prefix}tab-icon-right > & {
width: $ui-icon-width;
}
.#{$prefix}tab-icon-top > &,
.#{$prefix}tab-icon-bottom > & {
min-width: $ui-icon-width;
}
min-height: $ui-icon-height;
background-position: $ui-icon-background-position;
font-size: $ui-icon-height;
line-height: $ui-icon-height;
color: $ui-glyph-color;
@if $ui-plain-glyph-color != null {
.#{$prefix}tab-bar-plain & {
color: $ui-plain-glyph-color;
}
}
&.#{$prefix}tab-glyph {
@if $ui-glyph-opacity != 1 {
opacity: $ui-glyph-opacity;
}
@if $include-ie and $ui-background-color != transparent {
.#{$prefix}ie8 & {
color: mix($ui-glyph-color, $ui-background-color, $ui-glyph-opacity * 100);
}
}
}
.#{$prefix}tab-text.#{$prefix}tab-icon-left > & {
margin-right: max($ui-icon-spacing - $ui-text-padding, 0);
@if $include-rtl {
&.#{$prefix}rtl {
margin-right: 0;
margin-left: max($ui-icon-spacing - $ui-text-padding, 0);
}
}
}
.#{$prefix}tab-text.#{$prefix}tab-icon-right > & {
margin-left: max($ui-icon-spacing - $ui-text-padding, 0);
@if $include-rtl {
&.#{$prefix}rtl {
margin-left: 0;
margin-right: max($ui-icon-spacing - $ui-text-padding, 0);
}
}
}
.#{$prefix}tab-text.#{$prefix}tab-icon-top > & {
margin-bottom: $ui-icon-spacing;
}
.#{$prefix}tab-text.#{$prefix}tab-icon-bottom > & {
margin-top: $ui-icon-spacing;
}
}
.#{$prefix}tab-focus.#{$prefix}tab-#{$ui} {
border-color: $ui-border-color-focus;
@if ($ui-opacity-focus != null) {
@include opacity($ui-opacity-focus);
@if $include-ie {
&.#{$prefix}tab-rotate-left {
.#{$prefix}ie8 & {
@include ie-tab-alpharotate($ui-opacity-focus, 3);
}
}
&.#{$prefix}tab-rotate-right {
.#{$prefix}ie8 & {
@include ie-tab-alpharotate($ui-opacity-focus, 1);
}
}
}
}
@if ($ui-background-opacity-focus != null) {
@include background-opacity($ui-background-color-focus, $ui-background-opacity-focus);
@if $include-ie {
&.#{$prefix}tab-rotate-left {
.#{$prefix}ie8 & {
@include ie-tab-rotate(3);
}
}
&.#{$prefix}tab-rotate-right {
.#{$prefix}ie8 & {
@include ie-tab-rotate(1);
}
}
}
} @else {
background-color: $ui-background-color-focus;
}
@if $ui-plain-background-color-focus != $ui-background-color-focus {
.#{$prefix}tab-bar-plain & {
background-color: $ui-plain-background-color-focus;
}
}
@if $ui-plain-border-color-focus != $ui-border-color-focus {
.#{$prefix}tab-bar-plain & {
border-color: $ui-plain-border-color-focus;
}
}
@if $ui-outline-width-focus != 0 {
@include css-outline(
$ui-outline-width-focus,
$ui-outline-style-focus,
$ui-outline-color-focus,
$ui-outline-offset-focus
)
}
@if not is-null($ui-body-outline-width-focus) and $ui-body-outline-width-focus != 0 {
.#{$prefix}tab-button:before {
position: absolute;
content: ' ';
top: 0;
right: 0;
bottom: 0;
left: 0;
pointer-events: none;
$outline-color: if(not is-null($ui-body-outline-color-focus), $ui-body-outline-color-focus, $color);
$outline-style: if(not is-null($ui-body-outline-style-focus), $ui-body-outline-style-focus, dotted);
outline: $ui-body-outline-width-focus $outline-style $outline-color;
}
&.#{$prefix}tab-closable {
.#{$prefix}tab-button:before {
right: $ui-closable-icon-width + $ui-closable-icon-spacing;
}
}
}
.#{$prefix}tab-inner-#{$ui} {
@if $ui-color-focus != $ui-color {
color: $ui-color-focus;
}
@if ($ui-plain-color-focus != null) and ($ui-plain-color-focus != $ui-color-focus) {
.#{$prefix}tab-bar-plain & {
color: $ui-plain-color-focus;
}
}
@if $ui-font-weight-focus != $ui-font-weight {
font-weight: $ui-font-weight-focus;
}
@if $ui-font-size-focus != $ui-font-size {
font-size: $ui-font-size-focus;
}
@if $ui-font-family-focus != $ui-font-family {
font-family: $ui-font-family-focus;
}
}
.#{$prefix}tab-icon-el {
@if $ui-glyph-color-focus != $ui-glyph-color {
color: $ui-glyph-color-focus;
@if $ui-background-color != transparent {
.#{$prefix}ie8m & {
color: mix($ui-glyph-color-focus, $ui-background-color-focus, $ui-glyph-opacity * 100);
}
}
}
@if ($ui-plain-glyph-color-focus != null) and ($ui-plain-glyph-color-focus != $ui-glyph-color-focus) {
.#{$prefix}tab-bar-plain & {
color: $ui-plain-glyph-color-focus;
}
}
}
}
.#{$prefix}tab-over {
&.#{$prefix}tab-#{$ui} {
border-color: $ui-border-color-over;
@if ($ui-opacity-over != null) {
@include opacity($ui-opacity-over);
@if $include-ie {
&.#{$prefix}tab-rotate-left {
.#{$prefix}ie8 & {
@include ie-tab-alpharotate($ui-opacity-over, 3);
}
}
&.#{$prefix}tab-rotate-right {
.#{$prefix}ie8 & {
@include ie-tab-alpharotate($ui-opacity-over, 1);
}
}
}
}
@if ($ui-background-opacity-over != null) {
@include background-opacity($ui-background-color-over, $ui-background-opacity-over);
@if $include-ie {
&.#{$prefix}tab-rotate-left {
.#{$prefix}ie8 & {
@include ie-tab-rotate(3);
}
}
&.#{$prefix}tab-rotate-right {
.#{$prefix}ie8 & {
@include ie-tab-rotate(1);
}
}
}
} @else {
background-color: $ui-background-color-over;
}
@if $ui-plain-background-color-over != $ui-background-color-over {
.#{$prefix}tab-bar-plain & {
background-color: $ui-plain-background-color-over;
}
}
@if $ui-plain-border-color-over != $ui-border-color-over {
.#{$prefix}tab-bar-plain & {
border-color: $ui-plain-border-color-over;
}
}
.#{$prefix}tab-inner-#{$ui} {
@if $ui-color-over != $ui-color {
color: $ui-color-over;
}
@if ($ui-plain-color-over != null) and ($ui-plain-color-over != $ui-color-over) {
.#{$prefix}tab-bar-plain & {
color: $ui-plain-color-over;
}
}
@if $ui-font-weight-over != $ui-font-weight {
font-weight: $ui-font-weight-over;
}
@if $ui-font-size-over != $ui-font-size {
font-size: $ui-font-size-over;
}
@if $ui-font-family-over != $ui-font-family {
font-family: $ui-font-family-over;
}
}
.#{$prefix}tab-icon-el {
@if $ui-glyph-color-over != $ui-glyph-color {
color: $ui-glyph-color-over;
@if $ui-background-color-over != transparent {
.#{$prefix}ie8m & {
color: mix($ui-glyph-color-over, $ui-background-color-over, $ui-glyph-opacity * 100);
}
}
}
@if ($ui-plain-glyph-color-over != null) and ($ui-plain-glyph-color-over != $ui-glyph-color-over) {
.#{$prefix}tab-bar-plain & {
color: $ui-plain-glyph-color-over;
}
}
}
}
@if not is-null($ui-background-gradient-over) {
&.#{$prefix}tab-#{$ui}-top,
&.#{$prefix}tab-#{$ui}-left,
&.#{$prefix}tab-#{$ui}-right {
@include background-gradient($ui-background-color-over, $ui-background-gradient-over, top);
}
&.#{$prefix}tab-#{$ui}-bottom {
@include background-gradient($ui-background-color-over, $ui-background-gradient-over, bottom);
}
}
}
.#{$prefix}tab-focus.#{$prefix}tab-over {
&.#{$prefix}tab-#{$ui} {
border-color: $ui-border-color-focus-over;
@if ($ui-opacity-focus-over != null) {
@include opacity($ui-opacity-focus-over);
@if $include-ie {
&.#{$prefix}tab-rotate-left {
.#{$prefix}ie8 & {
@include ie-tab-alpharotate($ui-opacity-focus-over, 3);
}
}
&.#{$prefix}tab-rotate-right {
.#{$prefix}ie8 & {
@include ie-tab-alpharotate($ui-opacity-focus-over, 1);
}
}
}
}
@if ($ui-background-opacity-focus-over != null) {
@include background-opacity($ui-background-color-focus-over, $ui-background-opacity-focus-over);
@if $include-ie {
&.#{$prefix}tab-rotate-left {
.#{$prefix}ie8 & {
@include ie-tab-rotate(3);
}
}
&.#{$prefix}tab-rotate-right {
.#{$prefix}ie8 & {
@include ie-tab-rotate(1);
}
}
}
} @else {
background-color: $ui-background-color-focus-over;
}
@if $ui-plain-background-color-focus-over != $ui-background-color-focus-over {
.#{$prefix}tab-bar-plain & {
background-color: $ui-plain-background-color-focus-over;
}
}
@if $ui-plain-border-color-focus-over != $ui-border-color-focus-over {
.#{$prefix}tab-bar-plain & {
border-color: $ui-plain-border-color-focus-over;
}
}
.#{$prefix}tab-inner-#{$ui} {
@if $ui-color-focus-over != $ui-color-over {
color: $ui-color-focus-over;
}
@if ($ui-plain-color-focus-over != null) and ($ui-plain-color-focus-over != $ui-color-focus-over) {
.#{$prefix}tab-bar-plain & {
color: $ui-plain-color-focus-over;
}
}
@if $ui-font-weight-focus-over != $ui-font-weight-over {
font-weight: $ui-font-weight-focus-over;
}
@if $ui-font-size-focus-over != $ui-font-size-over {
font-size: $ui-font-size-focus-over;
}
@if $ui-font-family-focus-over != $ui-font-family-over {
font-family: $ui-font-family-focus-over;
}
}
.#{$prefix}tab-icon-el {
@if $ui-glyph-color-focus-over != $ui-glyph-color-over {
color: $ui-glyph-color-focus-over;
@if $ui-background-color-focus-over != transparent {
.#{$prefix}ie8m & {
color: mix($ui-glyph-color-focus-over, $ui-background-color-focus-over, $ui-glyph-opacity * 100);
}
}
}
@if ($ui-plain-glyph-color-focus-over != null) and ($ui-plain-glyph-color-focus-over != $ui-glyph-color-focus-over) {
.#{$prefix}tab-bar-plain & {
color: $ui-plain-glyph-color-focus-over;
}
}
}
}
@if not is-null($ui-background-gradient-focus-over) and
($ui-background-gradient-focus-over != $ui-background-gradient-over or
$ui-background-color-focus-over != $ui-background-color-over) {
&.#{$prefix}tab-#{$ui}-top,
&.#{$prefix}tab-#{$ui}-left,
&.#{$prefix}tab-#{$ui}-right {
@include background-gradient($ui-background-color-focus-over, $ui-background-gradient-focus-over, top);
}
&.#{$prefix}tab-#{$ui}-bottom {
@include background-gradient($ui-background-color-focus-over, $ui-background-gradient-focus-over, bottom);
}
}
}
.#{$prefix}tab.#{$prefix}tab-active {
&.#{$prefix}tab-#{$ui} {
border-color: $ui-border-color-active;
@if ($ui-opacity-active != null) {
@include opacity($ui-opacity-active);
@if $include-ie {
&.#{$prefix}tab-rotate-left {
.#{$prefix}ie8 & {
@include ie-tab-alpharotate($ui-opacity-active, 3);
}
}
&.#{$prefix}tab-rotate-right {
.#{$prefix}ie8 & {
@include ie-tab-alpharotate($ui-opacity-active, 1);
}
}
}
}
@if ($ui-background-opacity-active != null) {
@include background-opacity($ui-background-color-active, $ui-background-opacity-active);
@if $include-ie {
&.#{$prefix}tab-rotate-left {
.#{$prefix}ie8 & {
@include ie-tab-rotate(3);
}
}
&.#{$prefix}tab-rotate-right {
.#{$prefix}ie8 & {
@include ie-tab-rotate(1);
}
}
}
} @else {
background-color: $ui-background-color-active;
}
@if $ui-plain-background-color-active != $ui-background-color-active {
.#{$prefix}tab-bar-plain & {
background-color: $ui-plain-background-color-active;
}
}
@if $ui-plain-border-color-active != $ui-border-color-active {
.#{$prefix}tab-bar-plain & {
border-color: $ui-plain-border-color-active;
}
}
.#{$prefix}tab-inner-#{$ui} {
@if $ui-color-active != $ui-color {
color: $ui-color-active;
}
@if ($ui-plain-color-active != null) and ($ui-plain-color-active != $ui-color-active) {
.#{$prefix}tab-bar-plain & {
color: $ui-plain-color-active;
}
}
@if $ui-font-weight-active != $ui-font-weight {
font-weight: $ui-font-weight-active;
}
@if $ui-font-size-active != $ui-font-size {
font-size: $ui-font-size-active;
}
@if $ui-font-family-active != $ui-font-family {
font-family: $ui-font-family-active;
}
}
.#{$prefix}tab-icon-el {
color: $ui-glyph-color-active;
@if $ui-background-color-active != transparent {
.#{$prefix}ie8 & {
color: mix($ui-glyph-color-active, $ui-background-color-active, $ui-glyph-opacity * 100);
}
}
@if ($ui-plain-glyph-color-active != null) and ($ui-plain-glyph-color-active != $ui-glyph-color-active) {
.#{$prefix}tab-bar-plain & {
color: $ui-plain-glyph-color-active;
}
}
}
}
@if not is-null($ui-background-gradient-active) {
&.#{$prefix}tab-#{$ui}-top,
&.#{$prefix}tab-#{$ui}-left,
&.#{$prefix}tab-#{$ui}-right {
@include background-gradient($ui-background-color-active, $ui-background-gradient-active, top);
}
&.#{$prefix}tab-#{$ui}-bottom {
@include background-gradient($ui-background-color-active, $ui-background-gradient-active, bottom);
}
}
}
.#{$prefix}tab-focus.#{$prefix}tab-active {
&.#{$prefix}tab-#{$ui} {
border-color: $ui-border-color-focus-active;
@if ($ui-opacity-focus-active != null) {
@include opacity($ui-opacity-focus-active);
@if $include-ie {
&.#{$prefix}tab-rotate-left {
.#{$prefix}ie8 & {
@include ie-tab-alpharotate($ui-opacity-focus-active, 3);
}
}
&.#{$prefix}tab-rotate-right {
.#{$prefix}ie8 & {
@include ie-tab-alpharotate($ui-opacity-focus-active, 1);
}
}
}
}
@if ($ui-background-opacity-focus-active != null) {
@include background-opacity($ui-background-color-focus-active, $ui-background-opacity-focus-active);
@if $include-ie {
&.#{$prefix}tab-rotate-left {
.#{$prefix}ie8 & {
@include ie-tab-rotate(3);
}
}
&.#{$prefix}tab-rotate-right {
.#{$prefix}ie8 & {
@include ie-tab-rotate(1);
}
}
}
} @else {
background-color: $ui-background-color-focus-active;
}
@if $ui-plain-background-color-focus-active != $ui-background-color-focus-active {
.#{$prefix}tab-bar-plain & {
background-color: $ui-plain-background-color-focus-active;
}
}
@if $ui-plain-border-color-focus-active != $ui-border-color-focus-active {
.#{$prefix}tab-bar-plain & {
border-color: $ui-plain-border-color-focus-active;
}
}
.#{$prefix}tab-inner-#{$ui} {
@if $ui-color-focus-active != $ui-color-active {
color: $ui-color-focus-active;
}
@if ($ui-plain-color-focus-active != null) and ($ui-plain-color-focus-active != $ui-color-focus-active) {
.#{$prefix}tab-bar-plain & {
color: $ui-plain-color-focus-active;
}
}
@if $ui-font-weight-focus-active != $ui-font-weight-active {
font-weight: $ui-font-weight-focus-active;
}
@if $ui-font-size-focus-active != $ui-font-size-active {
font-size: $ui-font-size-focus-active;
}
@if $ui-font-family-focus-active != $ui-font-family-active {
font-family: $ui-font-family-focus-active;
}
}
.#{$prefix}tab-icon-el {
@if $ui-glyph-color-focus-active != $ui-glyph-color-active {
color: $ui-glyph-color-focus-active;
@if $ui-background-color-active != transparent {
.#{$prefix}ie8 & {
color: mix($ui-glyph-color-focus-active, $ui-background-color-focus-active, $ui-glyph-opacity * 100);
}
}
}
@if ($ui-plain-glyph-color-focus-active != null) and ($ui-plain-glyph-color-focus-active != $ui-glyph-color-focus-active) {
.#{$prefix}tab-bar-plain & {
color: $ui-plain-glyph-color-focus-active;
}
}
}
}
@if not is-null($ui-background-gradient-focus-active) and
($ui-background-gradient-focus-active != $ui-background-gradient-active or
$ui-background-color-focus-active != $ui-background-color-active) {
&.#{$prefix}tab-#{$ui}-top,
&.#{$prefix}tab-#{$ui}-left,
&.#{$prefix}tab-#{$ui}-right {
@include background-gradient($ui-background-color-focus-active, $ui-background-gradient-focus-active, top);
}
&.#{$prefix}tab-#{$ui}-bottom {
@include background-gradient($ui-background-color-focus-active, $ui-background-gradient-focus-active, bottom);
}
}
}
.#{$prefix}tab.#{$prefix}tab-disabled {
&.#{$prefix}tab-#{$ui} {
border-color: $ui-border-color-disabled;
@if $ui-opacity-disabled != null {
@include opacity($ui-opacity-disabled);
@if $include-ie {
&.#{$prefix}tab-rotate-left {
.#{$prefix}ie8 & {
@include ie-tab-alpharotate($ui-opacity-disabled, 3);
}
}
&.#{$prefix}tab-rotate-right {
.#{$prefix}ie8 & {
@include ie-tab-alpharotate($ui-opacity-disabled, 1);
}
}
}
}
@if $ui-background-opacity-disabled != null {
@include background-opacity($ui-background-color-disabled, $ui-background-opacity-disabled);
@if $include-ie {
&.#{$prefix}tab-rotate-left {
.#{$prefix}ie8 & {
@include ie-tab-rotate(3);
}
}
&.#{$prefix}tab-rotate-right {
.#{$prefix}ie8 & {
@include ie-tab-rotate(1);
}
}
}
} @else {
background-color: $ui-background-color-disabled;
}
@if $ui-plain-background-color-disabled != $ui-background-color-disabled {
.#{$prefix}tab-bar-plain & {
background-color: $ui-plain-background-color-disabled;
}
}
@if $ui-plain-border-color-disabled != $ui-border-color-disabled {
.#{$prefix}tab-bar-plain & {
border-color: $ui-plain-border-color-disabled;
}
}
@if not is-null($ui-cursor-disabled) {
cursor: $ui-cursor-disabled;
}
.#{$prefix}tab-inner-#{$ui} {
@if $ui-color-disabled != $ui-color {
color: $ui-color-disabled;
}
@if ($ui-plain-color-disabled != null) and ($ui-plain-color-disabled != $ui-color-disabled) {
.#{$prefix}tab-bar-plain & {
color: $ui-plain-color-disabled;
}
}
@if $ui-font-weight-disabled != $ui-font-weight {
font-weight: $ui-font-weight-disabled;
}
@if $ui-font-size-disabled != $ui-font-size {
font-size: $ui-font-size-disabled;
}
@if $ui-font-family-disabled != $ui-font-family {
font-family: $ui-font-family-disabled;
}
@if $ui-text-opacity-disabled != 1 {
@include opacity($ui-text-opacity-disabled);
}
}
@if $ui-icon-opacity-disabled != 1 {
.#{$prefix}tab-icon-el-#{$ui} {
@include opacity($ui-icon-opacity-disabled);
}
}
.#{$prefix}tab-icon-el {
color: $ui-glyph-color-disabled;
@if $ui-glyph-opacity-disabled != 1 {
opacity: $ui-glyph-opacity-disabled;
}
filter: none;
@if $ui-background-color != transparent {
.#{$prefix}ie8 & {
color: mix($ui-glyph-color-disabled, $ui-background-color-disabled, $ui-glyph-opacity-disabled * 100);
}
}
@if ($ui-plain-glyph-color-disabled != null) and ($ui-plain-glyph-color-disabled != $ui-glyph-color-disabled) {
.#{$prefix}tab-bar-plain & {
color: $ui-plain-glyph-color-disabled;
}
}
}
}
@if not is-null($ui-background-gradient-disabled) {
&.#{$prefix}tab-#{$ui}-top,
&.#{$prefix}tab-#{$ui}-left,
&.#{$prefix}tab-#{$ui}-right {
@include background-gradient($ui-background-color-disabled, $ui-background-gradient-disabled, top);
}
&.#{$prefix}tab-#{$ui}-bottom {
@include background-gradient($ui-background-color-disabled, $ui-background-gradient-disabled, bottom);
}
}
}
@if $include-slicer-border-radius {
.#{$prefix}nbr .#{$prefix}tab-#{$ui} {
background-image: none;
}
$states:
(over '.#{$prefix}tab-over' 'tab-over')
(focus '.#{$prefix}tab-focus' 'tab-focus')
(focus-over '.#{$prefix}tab-focus.#{$prefix}tab-over' 'tab-focus.#{$prefix}tab-over')
(active '.#{$prefix}tab.#{$prefix}tab-active' 'tab-active')
(focus-active '.#{$prefix}tab-focus.#{$prefix}tab-active' 'tab-focus.#{$prefix}tab-active')
(disabled '.#{$prefix}tab.#{$prefix}tab-disabled' 'tab-disabled');
@each $side in top right bottom left {
@each $item in $states {
$state: nth($item, 1);
$cls: nth($item, 2);
$id-prefix: nth($item, 3);
#{$cls} {
.#{$prefix}tab-#{$ui}-#{$side}-tl,
.#{$prefix}tab-#{$ui}-#{$side}-bl,
.#{$prefix}tab-#{$ui}-#{$side}-tr,
.#{$prefix}tab-#{$ui}-#{$side}-br,
.#{$prefix}tab-#{$ui}-#{$side}-tc,
.#{$prefix}tab-#{$ui}-#{$side}-bc {
background-image: slicer-corner-sprite('#{$id-prefix}.#{$prefix}tab-#{$ui}-#{$side}', 'tab/tab-#{$ui}-#{$side}-#{$state}-corners');
}
.#{$prefix}tab-#{$ui}-#{$side}-ml,
.#{$prefix}tab-#{$ui}-#{$side}-mr {
background-image: slicer-sides-sprite('#{$id-prefix}.#{$prefix}tab-#{$ui}-#{$side}', 'tab/tab-#{$ui}-#{$side}-#{$state}-sides');
}
.#{$prefix}tab-#{$ui}-#{$side}-mc {
background-repeat: repeat-x;
background-image: slicer-frame-background-image('#{$id-prefix}.#{$prefix}tab-#{$ui}-#{$side}', 'tab/tab-#{$ui}-#{$side}-#{$state}-fbg');
}
}
$frame: slicer-frame('#{$id-prefix}.#{$prefix}tab-#{$ui}-#{$side}', $frame-size);
}
}
.#{$prefix}tab-#{$ui}-tl,
.#{$prefix}tab-#{$ui}-bl,
.#{$prefix}tab-#{$ui}-tr,
.#{$prefix}tab-#{$ui}-br {
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF)";
}
}
.#{$prefix}tab-#{$ui} {
.#{$prefix}tab-close-btn {
top: $ui-closable-icon-top;
right: $ui-closable-icon-right;
width: $ui-closable-icon-width;
height: $ui-closable-icon-height;
@if $enable-font-icons and ($ui-closable-icon-glyph != null) {
@include font-icon($ui-closable-icon-glyph);
color: $ui-closable-icon-glyph-color;
@if $ui-plain-closable-icon-glyph-color != $ui-closable-icon-glyph-color {
.#{$prefix}tab-bar-plain & {
color: $ui-plain-closable-icon-glyph-color;
}
}
} @else {
background: theme-background-image('tab/tab-#{$ui}-close') 0 0;
}
@if $tab-closable-icon-opacity != 1 {
@include opacity($tab-closable-icon-opacity);
}
}
.#{$prefix}tab-close-btn-over {
@if $tab-closable-icon-opacity-over != $tab-closable-icon-opacity {
@include opacity($tab-closable-icon-opacity-over);
}
@if $tab-closable-icon-include-hover-background-position {
background-position: (-$tab-closable-icon-width) 0;
}
}
@if $tab-closable-icon-include-pressed-background-position {
.#{$prefix}tab-close-btn-pressed {
background-position: (-$ui-closable-icon-width * 2) 0;
}
}
&.#{$prefix}tab-focus {
@if $enable-font-icons and ($ui-closable-icon-glyph != null) {
.#{$prefix}tab-close-btn {
color: $ui-closable-icon-glyph-color-focus;
@if $ui-plain-closable-icon-glyph-color-focus != $ui-closable-icon-glyph-color-focus {
.#{$prefix}tab-bar-plain & {
color: $ui-plain-closable-icon-glyph-color-focus;
}
}
}
}
}
&.#{$prefix}tab-over {
@if $enable-font-icons and ($ui-closable-icon-glyph != null) {
.#{$prefix}tab-close-btn {
color: $ui-closable-icon-glyph-color-over;
@if $ui-plain-closable-icon-glyph-color-over != $ui-closable-icon-glyph-color-over {
.#{$prefix}tab-bar-plain & {
color: $ui-plain-closable-icon-glyph-color-over;
}
}
}
}
}
&.#{$prefix}tab-focus.#{$prefix}tab-over {
@if $enable-font-icons and ($ui-closable-icon-glyph != null) {
.#{$prefix}tab-close-btn {
color: $ui-closable-icon-glyph-color-focus-over;
@if $ui-plain-closable-icon-glyph-color-focus-over != $ui-closable-icon-glyph-color-focus-over {
.#{$prefix}tab-bar-plain & {
color: $ui-plain-closable-icon-glyph-color-focus-over;
}
}
}
}
}
&.#{$prefix}tab-active {
@if $enable-font-icons and ($ui-closable-icon-glyph != null) {
.#{$prefix}tab-close-btn {
color: $ui-closable-icon-glyph-color-active;
@if $ui-plain-closable-icon-glyph-color-active != $ui-closable-icon-glyph-color-active {
.#{$prefix}tab-bar-plain & {
color: $ui-plain-closable-icon-glyph-color-active;
}
}
}
} @else {
.#{$prefix}tab-close-btn {
background-position: 0 (-$tab-closable-icon-height);
}
@if $tab-closable-icon-include-hover-background-position {
.#{$prefix}tab-close-btn-over {
background-position: (-$tab-closable-icon-width) (-$tab-closable-icon-height);
}
}
@if $tab-closable-icon-include-pressed-background-position {
.#{$prefix}tab-close-btn-pressed {
background-position: (-$ui-closable-icon-width * 2) (-$ui-closable-icon-height);
}
}
}
}
&.#{$prefix}tab-focus.#{$prefix}tab-active {
@if $enable-font-icons and ($ui-closable-icon-glyph != null) {
.#{$prefix}tab-close-btn {
color: $ui-closable-icon-glyph-color-focus-active;
@if $ui-plain-closable-icon-glyph-color-focus-active != $ui-closable-icon-glyph-color-focus-active {
.#{$prefix}tab-bar-plain & {
color: $ui-plain-closable-icon-glyph-color-focus-active;
}
}
}
}
}
&.#{$prefix}tab-disabled {
.#{$prefix}tab-close-btn {
@if $enable-font-icons and ($ui-closable-icon-glyph != null) {
color: $ui-closable-icon-glyph-color-disabled;
@if $ui-plain-closable-icon-glyph-color-disabled != $ui-closable-icon-glyph-color-disabled {
.#{$prefix}tab-bar-plain & {
color: $ui-plain-closable-icon-glyph-color-disabled;
}
}
}
@if $tab-closable-icon-opacity-disabled != $tab-closable-icon-opacity or $tab-closable-icon-opacity-disabled != $tab-closable-icon-opacity-over {
@include opacity($tab-closable-icon-opacity-disabled);
}
@if $tab-closable-icon-include-hover-background-position {
background-position: 0 0;
}
}
}
}
@if $include-rtl {
.#{$prefix}rtl.#{$prefix}tab-#{$ui} .#{$prefix}tab-close-btn {
right: auto;
left: $ui-closable-icon-right;
}
}
.#{$prefix}tab-closable.#{$prefix}tab-#{$ui} .#{$prefix}tab-button {
padding-right: $ui-closable-icon-width + $ui-closable-icon-spacing;
}
@if $include-rtl {
.#{$prefix}rtl.#{$prefix}tab-closable.#{$prefix}tab-#{$ui} .#{$prefix}tab-button {
padding-right: 0px;
padding-left: $ui-closable-icon-width + $ui-closable-icon-spacing;
}
}
$stretch: slicer-background-stretch(tab-#{$ui}-top, bottom);
$stretch: slicer-background-stretch(tab-#{$ui}-right, left);
$stretch: slicer-background-stretch(tab-#{$ui}-bottom, top);
$stretch: slicer-background-stretch(tab-#{$ui}-left, right);
$stretch: slicer-background-stretch('tab-focus.#{$prefix}tab-#{$ui}-top', bottom);
$stretch: slicer-background-stretch('tab-focus.#{$prefix}tab-#{$ui}-right', left);
$stretch: slicer-background-stretch('tab-focus.#{$prefix}tab-#{$ui}-bottom', top);
$stretch: slicer-background-stretch('tab-focus.#{$prefix}tab-#{$ui}-left', right);
$stretch: slicer-background-stretch('tab-over.#{$prefix}tab-#{$ui}-top', bottom);
$stretch: slicer-background-stretch('tab-over.#{$prefix}tab-#{$ui}-right', left);
$stretch: slicer-background-stretch('tab-over.#{$prefix}tab-#{$ui}-bottom', top);
$stretch: slicer-background-stretch('tab-over.#{$prefix}tab-#{$ui}-left', right);
$stretch: slicer-background-stretch('tab-active.#{$prefix}tab-#{$ui}-top', bottom);
$stretch: slicer-background-stretch('tab-active.#{$prefix}tab-#{$ui}-right', left);
$stretch: slicer-background-stretch('tab-active.#{$prefix}tab-#{$ui}-bottom', top);
$stretch: slicer-background-stretch('tab-active.#{$prefix}tab-#{$ui}-left', right);
$stretch: slicer-background-stretch('tab-focus.#{$prefix}tab-over.#{$prefix}tab-#{$ui}-top', bottom);
$stretch: slicer-background-stretch('tab-focus.#{$prefix}tab-over.#{$prefix}tab-#{$ui}-right', left);
$stretch: slicer-background-stretch('tab-focus.#{$prefix}tab-over.#{$prefix}tab-#{$ui}-bottom', top);
$stretch: slicer-background-stretch('tab-focus.#{$prefix}tab-over.#{$prefix}tab-#{$ui}-left', right);
$stretch: slicer-background-stretch('tab-focus.#{$prefix}tab-active.#{$prefix}tab-#{$ui}-top', bottom);
$stretch: slicer-background-stretch('tab-focus.#{$prefix}tab-active.#{$prefix}tab-#{$ui}-right', left);
$stretch: slicer-background-stretch('tab-focus.#{$prefix}tab-active.#{$prefix}tab-#{$ui}-bottom', top);
$stretch: slicer-background-stretch('tab-focus.#{$prefix}tab-active.#{$prefix}tab-#{$ui}-left', right);
$stretch: slicer-background-stretch('tab-disabled.#{$prefix}tab-#{$ui}-top', bottom);
$stretch: slicer-background-stretch('tab-disabled.#{$prefix}tab-#{$ui}-right', left);
$stretch: slicer-background-stretch('tab-disabled.#{$prefix}tab-#{$ui}-bottom', top);
$stretch: slicer-background-stretch('tab-disabled.#{$prefix}tab-#{$ui}-left', right);
@include x-slicer('tab-focus.#{$prefix}tab-#{$ui}-top');
@include x-slicer('tab-focus.#{$prefix}tab-#{$ui}-right');
@include x-slicer('tab-focus.#{$prefix}tab-#{$ui}-bottom');
@include x-slicer('tab-focus.#{$prefix}tab-#{$ui}-left');
@include x-slicer('tab-over.#{$prefix}tab-#{$ui}-top');
@include x-slicer('tab-over.#{$prefix}tab-#{$ui}-right');
@include x-slicer('tab-over.#{$prefix}tab-#{$ui}-bottom');
@include x-slicer('tab-over.#{$prefix}tab-#{$ui}-left');
@include x-slicer('tab-active.#{$prefix}tab-#{$ui}-top');
@include x-slicer('tab-active.#{$prefix}tab-#{$ui}-right');
@include x-slicer('tab-active.#{$prefix}tab-#{$ui}-bottom');
@include x-slicer('tab-active.#{$prefix}tab-#{$ui}-left');
@include x-slicer('tab-focus.#{$prefix}tab-over.#{$prefix}tab-#{$ui}-top');
@include x-slicer('tab-focus.#{$prefix}tab-over.#{$prefix}tab-#{$ui}-right');
@include x-slicer('tab-focus.#{$prefix}tab-over.#{$prefix}tab-#{$ui}-bottom');
@include x-slicer('tab-focus.#{$prefix}tab-over.#{$prefix}tab-#{$ui}-left');
@include x-slicer('tab-focus.#{$prefix}tab-active.#{$prefix}tab-#{$ui}-top');
@include x-slicer('tab-focus.#{$prefix}tab-active.#{$prefix}tab-#{$ui}-right');
@include x-slicer('tab-focus.#{$prefix}tab-active.#{$prefix}tab-#{$ui}-bottom');
@include x-slicer('tab-focus.#{$prefix}tab-active.#{$prefix}tab-#{$ui}-left');
@include x-slicer('tab-disabled.#{$prefix}tab-#{$ui}-top');
@include x-slicer('tab-disabled.#{$prefix}tab-#{$ui}-right');
@include x-slicer('tab-disabled.#{$prefix}tab-#{$ui}-bottom');
@include x-slicer('tab-disabled.#{$prefix}tab-#{$ui}-left');
}