/** * @class Ext.tab.Bar */ /** * @var {number/list} * The padding of the Tab Bar */$tabbar-padding: dynamic(0); /** * @var {number/list} * The padding of the Tab Bar when {@link #plain} is `true`. */$tabbar-plain-padding: dynamic($tabbar-padding); /** * @var {color} * The base color of the Tab Bar */$tabbar-base-color: dynamic($base-color); /** * @var {string/list} * The background-gradient of the Tab Bar. Can be either the name of a predefined gradient * or a list of color stops. Used as the `$type` parameter for * {@link Global_CSS#background-gradient}. */$tabbar-background-gradient: dynamic('tabbar'); /** * @var {color} * The border-color of the Tab Bar */$tabbar-border-color: dynamic($panel-header-border-color); /** * @var {number/list} * The border-width of the Tab Bar */$tabbar-border-width: dynamic(1px 1px 0); /** * @var {number} * The height of the Tab Bar strip */$tabbar-strip-height: dynamic(3px); /** * @var {color} * The border-color of the Tab Bar strip */$tabbar-strip-border-color: dynamic($panel-header-border-color); /** * @var {color} * The background-color of the Tab Bar strip */$tabbar-strip-background-color: dynamic($tab-base-color-active); /** * @var {number/list} * The border-width of the Tab Bar strip */$tabbar-strip-border-width: dynamic(1px 0 0); /** * @var {number} * The width of the Tab Bar scrollers */$tabbar-scroller-width: dynamic(24px); /** * @var {number} * The height of the Tab Bar scrollers */$tabbar-scroller-height: dynamic(24px); /** * @var {number/list} * The margin of "top" Tab Bar scroller buttons */$tabbar-scroller-top-margin: dynamic(0); /** * @var {number/list} * The margin of "right" Tab Bar scroller buttons */$tabbar-scroller-right-margin: dynamic(0); /** * @var {number/list} * The margin of "bottom" Tab Bar scroller buttons */$tabbar-scroller-bottom-margin: dynamic(0); /** * @var {number/list} * The margin of "left" Tab Bar scroller buttons */$tabbar-scroller-left-margin: dynamic(0); /** * @var {string} * The cursor of the Tab Bar scrollers */$tabbar-scroller-cursor: dynamic(pointer); /** * @var {string} * The cursor of disabled Tab Bar scrollers */$tabbar-scroller-cursor-disabled: dynamic(default); /** * @var {number} * The opacity of Tab Bar scrollers */$tabbar-scroller-opacity: dynamic(0.5); /** * @var {number} * The opacity of hovered Tab Bar scrollers */$tabbar-scroller-opacity-over: dynamic(0.6); /** * @var {number} * The opacity of pressed Tab Bar scrollers */$tabbar-scroller-opacity-pressed: dynamic(0.7); /** * @var {number} * The opacity of disabled Tab Bar scrollers */$tabbar-scroller-opacity-disabled: dynamic(0.25); /** * @var {color} * The color to use for Tab Bar scroller icons when {@link Global_CSS#$enable-font-icons} is `true`. */$tabbar-scroller-glyph-color: dynamic($neutral-color); /** * @var {color} * The color to use for "plain" Tab Bar scroller icons when {@link Global_CSS#$enable-font-icons} is `true`. */$tabbar-plain-scroller-glyph-color: dynamic($tabbar-scroller-glyph-color); /** * @var {number} * The font size for Tab Bar scroller icons when {@link Global_CSS#$enable-font-icons} is `true`. */$tabbar-scroller-glyph-font-size: dynamic(16px); /** * @var {string/list} * Glyph for the "top" scroller icon when {@link Global_CSS#$enable-font-icons} is `true`. */$tabbar-scroller-top-glyph: dynamic($fa-var-chevron-up $tabbar-scroller-glyph-font-size $font-icon-font-family); /** * @var {string/list} * Glyph for the "right" scroller icon when {@link Global_CSS#$enable-font-icons} is `true`. */$tabbar-scroller-right-glyph: dynamic($fa-var-chevron-right $tabbar-scroller-glyph-font-size $font-icon-font-family); /** * @var {string/list} * Glyph for the "bottom" scroller icon when {@link Global_CSS#$enable-font-icons} is `true`. */$tabbar-scroller-bottom-glyph: dynamic($fa-var-chevron-down $tabbar-scroller-glyph-font-size $font-icon-font-family); /** * @var {string/list} * Glyph for the "left" scroller icon when {@link Global_CSS#$enable-font-icons} is `true`. */$tabbar-scroller-left-glyph: dynamic($fa-var-chevron-left $tabbar-scroller-glyph-font-size $font-icon-font-family); /** * @var {boolean} * `true` to use classic-style scroller buttons. When `true` scroller buttons are given their * hover state by changing their background-position, When `false` scroller buttons are * given their hover state by applying opacity. */$tabbar-classic-scrollers: dynamic(false); /** * @var {boolean} * true to include separate scroller icons for "plain" tabbars */$tabbar-scroller-include-plain-icon: dynamic(false); /** * @var {boolean} * if true, the tabbar will use symmetrical scroller icons. Top and bottom tabbars * will share icons, and Left and right will share icons. */$tabbar-scroller-symmetrical-icons: dynamic(true); /** * @var {color} * The color to use for the {@link #cfg-overflowHandler menu overflow} "more" icon when * {@link Global_CSS#$enable-font-icons} is `true`. */$tabbar-menu-overflow-glyph-color: dynamic($button-default-glyph-color); /** * @var {string/list} * Glyph for the {@link #cfg-overflowHandler menu overflow} "more" icon when * {@link Global_CSS#$enable-font-icons} is `true`. */$tabbar-menu-overflow-glyph: dynamic($fa-var-bars $button-small-glyph-font-size $font-icon-font-family); /** * @var {boolean} * True to include the "default" tabbar UI */$include-tabbar-default-ui: dynamic($include-default-uis); /** * Creates a visual theme for a Tab Bar * * Note: When creating a tab bar UI with the extjs-tab-bar-ui mixin, * you will need to create a corresponding tab-ui of the same name. * This will ensure that the tabs render properly in your theme. * Not creating a matching tab theme may result in unpredictable * tab rendering. * * See `Ext.tab.Tab-css_mixin-extjs-tab-ui` * * @param {string} $ui * The name of the UI being created. Can not included spaces or special punctuation * (used in CSS class names). * * @param {number} [$ui-strip-height=$tabbar-strip-height] * The height of the Tab Bar strip * * @param {number/list} [$ui-strip-border-width=$tabbar-strip-border-width] * The border-width of the Tab Bar strip * * @param {color} [$ui-strip-border-color=$tabbar-strip-border-color] * The border-color of the Tab Bar strip * * @param {color} [$ui-strip-background-color=$tabbar-strip-background-color] * The background-color of the Tab Bar strip * * @param {number/list} [$ui-border-width=$tabbar-border-width] * The border-width of the Tab Bar * * @param {color} [$ui-border-color=$tabbar-border-color] * The border-color of the Tab Bar * * @param {number/list} [$ui-padding=$tabbar-padding] * The padding of the Tab Bar * * @param {number/list} [$ui-plain-padding=$tabbar-plain-padding] * The padding of the Tab Bar when {@link #plain} is `true` * * @param {color} [$ui-background-color=$tabbar-background-color] * The background color of the Tab Bar * * @param {string/list} [$ui-background-gradient=$tabbar-background-gradient] * The background-gradient of the Tab Bar. Can be either the name of a predefined gradient * or a list of color stops. Used as the `$type` parameter for * {@link Global_CSS#background-gradient}. * * @param {number} [$ui-scroller-width=$tabbar-scroller-width] * The width of the Tab Bar scrollers * * @param {number} [$ui-scroller-height=$tabbar-scroller-height] * The height of the Tab Bar scrollers * * @param {number/list} [$ui-scroller-top-margin=$tabbar-scroller-top-margin] * The margin of "top" scroller buttons * * @param {number/list} [$ui-scroller-right-margin=$tabbar-scroller-right-margin] * The margin of "right" scroller buttons * * @param {number/list} [$ui-scroller-bottom-margin=$tabbar-scroller-bottom-margin] * The margin of "bottom" scroller buttons * * @param {number/list} [$ui-scroller-left-margin=$tabbar-scroller-left-margin] * The margin of "left" scroller buttons * * @param {string} [$ui-scroller-cursor=$tabbar-scroller-cursor] * The cursor of the Tab Bar scrollers * * @param {string} [$ui-scroller-cursor-disabled=$tabbar-scroller-cursor-disabled] * The cursor of disabled Tab Bar scrollers * * @param {number} [$ui-scroller-opacity=$tabbar-scroller-opacity] * The opacity of Tab Bar scrollers * * @param {number} [$ui-scroller-opacity-over=$tabbar-scroller-opacity-over] * The opacity of hovered Tab Bar scrollers * * @param {number} [$ui-scroller-opacity-pressed=$tabbar-scroller-opacity-pressed] * The opacity of pressed Tab Bar scrollers * * @param {number} [$ui-scroller-opacity-disabled=$tabbar-scroller-opacity-disabled] * The opacity of disabled Tab Bar scrollers * * @param {color} [$ui-scroller-glyph-color=$tabbar-scroller-glyph-color] * The color to use for Tab Bar scroller icons when {@link Global_CSS#$enable-font-icons} is `true`. * * @param {color} [$ui-plain-scroller-glyph-color=$tabbar-plain-scroller-glyph-color] * The color to use for "plain" Tab Bar scroller icons when {@link Global_CSS#$enable-font-icons} is `true`. * * @param {string/list} [$ui-scroller-top-glyph=$tabbar-scroller-top-glyph] * Glyph for the "top" scroller icon when {@link Global_CSS#$enable-font-icons} is `true`. * * @param {string/list} [$ui-scroller-right-glyph=$tabbar-scroller-right-glyph] * Glyph for the "right" scroller icon when {@link Global_CSS#$enable-font-icons} is `true`. * * @param {string/list} [$ui-scroller-bottom-glyph=$tabbar-scroller-bottom-glyph] * Glyph for the "bottom" scroller icon when {@link Global_CSS#$enable-font-icons} is `true`. * * @param {string/list} [$ui-scroller-left-glyph=$tabbar-scroller-left-glyph] * Glyph for the "left" scroller icon when {@link Global_CSS#$enable-font-icons} is `true`. * * @param {boolean} [$ui-classic-scrollers=$tabbar-classic-scrollers] * `true` to use classic-style scroller buttons. When `true` scroller buttons are given * their hover state by changing their background-position, When `false` scroller buttons * are given their hover state by applying opacity. * * @param {color} [$ui-menu-overflow-glyph-color=$tabbar-menu-overflow-glyph-color] * The color to use for the {@link #overflowHandler menu overflow} "more" icon when * {@link Global_CSS#$enable-font-icons} is `true`. * * @param {string/list} [$ui-menu-overflow-glyph=$tabbar-menu-overflow-glyph] * Glyph for the {@link #overflowHandler menu overflow} "more" icon when * {@link Global_CSS#$enable-font-icons} is `true`. * * @param {number} [$ui-tab-height] * The minimum height of tabs that will be used in this tabbar UI. The tabbar body is given * a min-height so that it does not collapse when it does not contain any tabs, but it * is allowed to expand to be larger than the default tab height if it contains a tab * that's larger than the default height. * * @member Ext.tab.Bar */ @mixin extjs-tab-bar-ui( $ui, $ui-strip-height: $tabbar-strip-height, $ui-strip-border-width: $tabbar-strip-border-width, $ui-strip-border-color: $tabbar-strip-border-color, $ui-strip-background-color: $tabbar-strip-background-color, $ui-border-width: $tabbar-border-width, $ui-border-color: $tabbar-border-color, $ui-padding: $tabbar-padding, $ui-plain-padding: $tabbar-plain-padding, $ui-background-color: $tabbar-base-color, $ui-background-gradient: $tabbar-background-gradient, $ui-scroller-width: $tabbar-scroller-width, $ui-scroller-height: $tabbar-scroller-height, $ui-scroller-top-margin: $tabbar-scroller-top-margin, $ui-scroller-right-margin: $tabbar-scroller-right-margin, $ui-scroller-bottom-margin: $tabbar-scroller-bottom-margin, $ui-scroller-left-margin: $tabbar-scroller-left-margin, $ui-scroller-cursor: $tabbar-scroller-cursor, $ui-scroller-cursor-disabled: $tabbar-scroller-cursor-disabled, $ui-scroller-opacity: $tabbar-scroller-opacity, $ui-scroller-opacity-over: $tabbar-scroller-opacity-over, $ui-scroller-opacity-pressed: $tabbar-scroller-opacity-pressed, $ui-scroller-opacity-disabled: $tabbar-scroller-opacity-disabled, $ui-scroller-glyph-color: $tabbar-scroller-glyph-color, $ui-plain-scroller-glyph-color: $tabbar-plain-scroller-glyph-color, $ui-scroller-top-glyph: $tabbar-scroller-top-glyph, $ui-scroller-right-glyph: $tabbar-scroller-right-glyph, $ui-scroller-bottom-glyph: $tabbar-scroller-bottom-glyph, $ui-scroller-left-glyph: $tabbar-scroller-left-glyph, $ui-classic-scrollers: $tabbar-classic-scrollers, $ui-menu-overflow-glyph-color: $tabbar-menu-overflow-glyph-color, $ui-menu-overflow-glyph: $tabbar-menu-overflow-glyph, $ui-tab-height: if($tabbar-strip-height > 0, top($ui-strip-border-width), vertical($tab-border-width)) + max($tab-icon-height, $tab-line-height) + vertical($tab-padding)) { $ui-strip-plain-border-width: top($ui-strip-border-width) max(right($ui-strip-border-width), left($ui-border-width)) bottom($ui-strip-border-width) max(left($ui-strip-border-width), left($ui-border-width)); .#{$prefix}tab-bar-#{$ui} { background-color: $ui-background-color; @if $ui-border-width != 0 { border-style: solid; border-color: $ui-border-color; } } @if $ui-border-width != 0 { .#{$prefix}tab-bar-#{$ui}-top { border-width: $ui-border-width; } .#{$prefix}tab-bar-#{$ui}-bottom { border-width: flip-vertical($ui-border-width); } .#{$prefix}tab-bar-#{$ui}-left { border-width: rotate270($ui-border-width); } @if $include-rtl { .#{$prefix}rtl.#{$prefix}tab-bar-#{$ui}-left { border-width: rtl(rotate270($ui-border-width)); } } .#{$prefix}tab-bar-#{$ui}-right { border-width: rotate90($ui-border-width); } @if $include-rtl { .#{$prefix}rtl.#{$prefix}tab-bar-#{$ui}-right { border-width: rtl(rotate90($ui-border-width)); } } } .#{$prefix}tab-bar-body-#{$ui} { .#{$prefix}tab-bar-#{$ui}-top > & { padding: $ui-padding; } .#{$prefix}tab-bar-#{$ui}-bottom > & { padding: flip-vertical($ui-padding); } .#{$prefix}tab-bar-#{$ui}-left > & { padding: rotate270($ui-padding); } @if $include-rtl { .#{$prefix}rtl.#{$prefix}tab-bar-#{$ui}-left > & { padding: rtl(rotate270($ui-padding)); } } .#{$prefix}tab-bar-#{$ui}-right > & { padding: rotate90($ui-padding); } @if $include-rtl { .#{$prefix}rtl.#{$prefix}tab-bar-#{$ui}-right > & { padding: rtl(rotate90($ui-padding)); } } } @if $ui-plain-padding != $ui-padding { .#{$prefix}tab-bar-body-#{$ui} { .#{$prefix}tab-bar-plain.#{$prefix}tab-bar-#{$ui}-top > & { padding: $ui-plain-padding; } .#{$prefix}tab-bar-plain.#{$prefix}tab-bar-#{$ui}-bottom > & { padding: flip-vertical($ui-plain-padding); } .#{$prefix}tab-bar-plain.#{$prefix}tab-bar-#{$ui}-left > & { padding: rotate270($ui-plain-padding); } @if $include-rtl { .#{$prefix}rtl.#{$prefix}tab-bar-plain.#{$prefix}tab-bar-#{$ui}-left > & { padding: rtl(rotate270($ui-plain-padding)); } } .#{$prefix}tab-bar-plain.#{$prefix}tab-bar-#{$ui}-right > & { padding: rotate90($ui-plain-padding); } @if $include-rtl { .#{$prefix}rtl.#{$prefix}tab-bar-plain.#{$prefix}tab-bar-#{$ui}-right > & { padding: rtl(rotate90($ui-plain-padding)); } } } } .#{$prefix}tab-bar-plain { &.#{$prefix}tab-bar-#{$ui}-horizontal { border-top-color: transparent; border-bottom-color: transparent; border-left-width: 0; border-right-width: 0; } &.#{$prefix}tab-bar-#{$ui}-vertical { border-right-color: transparent; border-left-color: transparent; border-top-width: 0; border-bottom-width: 0; } } $strip-size: max($ui-strip-height - vertical($ui-strip-border-width), 0); @if $ui-strip-height != 0 { .#{$prefix}tab-bar-body-#{$ui} { .#{$prefix}tab-bar-top > & { padding-bottom: $strip-size; } .#{$prefix}tab-bar-bottom > & { padding-top: $strip-size; } .#{$prefix}tab-bar-left > & { padding-right: $strip-size; @if $include-rtl { &.#{$prefix}rtl { padding-right: 0; padding-left: $strip-size; } } } .#{$prefix}tab-bar-right > & { padding-left: $strip-size; @if $include-rtl { &.#{$prefix}rtl { padding-left: 0; padding-right: $strip-size; } } } } .#{$prefix}tab-bar-strip-#{$ui} { border-style: solid; border-color: $ui-strip-border-color; background-color: $ui-strip-background-color; } .#{$prefix}tab-bar-top { > .#{$prefix}tab-bar-strip-#{$ui} { border-width: $ui-strip-border-width; height: $ui-strip-height; } &.#{$prefix}tab-bar-plain > .#{$prefix}tab-bar-strip-#{$ui} { border-width: $ui-strip-plain-border-width; } } .#{$prefix}tab-bar-bottom { > .#{$prefix}tab-bar-strip-#{$ui} { border-width: flip-vertical($ui-strip-border-width); height: $ui-strip-height; } &.#{$prefix}tab-bar-plain > .#{$prefix}tab-bar-strip-#{$ui} { border-width: flip-vertical($ui-strip-plain-border-width); } } .#{$prefix}tab-bar-left { > .#{$prefix}tab-bar-strip-#{$ui} { border-width: rotate270($ui-strip-border-width); width: $ui-strip-height; @if $include-rtl { &.#{$prefix}rtl { border-width: rtl(rotate270($ui-strip-border-width)); } } } &.#{$prefix}tab-bar-plain > .#{$prefix}tab-bar-strip-#{$ui} { border-width: rotate270($ui-strip-plain-border-width); @if $include-rtl { &.#{$prefix}rtl { border-width: rtl(rotate270($ui-strip-plain-border-width)); } } } } .#{$prefix}tab-bar-right { > .#{$prefix}tab-bar-strip-#{$ui} { border-width: rotate90($ui-strip-border-width); width: $ui-strip-height; @if $include-rtl { &.#{$prefix}rtl { border-width: rtl(rotate90($ui-strip-border-width)); } } } &.#{$prefix}tab-bar-plain > .#{$prefix}tab-bar-strip-#{$ui} { border-width: rotate90($ui-strip-plain-border-width); @if $include-rtl { &.#{$prefix}rtl { border-width: rtl(rotate90($ui-strip-plain-border-width)); } } } } } // tabbars need a min-height/width so that horizontal tabbars don't lose height and // vertical tabbars don't lose width when all tabs are closed. $ui-body-height: $ui-tab-height + $ui-strip-height + vertical($ui-padding) - top($ui-strip-border-width); .#{$prefix}tab-bar-horizontal > .#{$prefix}tab-bar-body-#{$ui} { min-height: $ui-body-height; .#{$prefix}ie8m & { // border-box model is busted in IE8m when min-height is used. Won't include // the padding min-height: $ui-body-height - $ui-strip-height - vertical($ui-padding) + top($ui-strip-border-width); } } .#{$prefix}tab-bar-vertical > .#{$prefix}tab-bar-body-#{$ui} { min-width: $ui-body-height; .#{$prefix}ie8m & { // border-box model is busted in IE8m when min-width is used. Won't include // the padding min-width: $ui-body-height - $ui-strip-height - vertical($ui-padding) + top($ui-strip-border-width); } } @if not is-null($ui-background-gradient) { .#{$prefix}tab-bar-#{$ui}-top { @include background-gradient($ui-background-color, $ui-background-gradient, top); @if $include-slicer-gradient { .#{$prefix}nlg & { background: slicer-background-image(tab-bar-#{$ui}-top, 'tab-bar/tab-bar-#{$ui}-top-bg'); } } } .#{$prefix}tab-bar-#{$ui}-bottom { @include background-gradient($ui-background-color, $ui-background-gradient, bottom); @if $include-slicer-gradient { .#{$prefix}nlg & { background: slicer-background-image(tab-bar-#{$ui}-bottom, 'tab-bar/tab-bar-#{$ui}-bottom-bg') bottom 0; } } } .#{$prefix}tab-bar-#{$ui}-left { @include background-gradient($ui-background-color, $ui-background-gradient, left); @if $include-slicer-gradient { .#{$prefix}nlg & { background: slicer-background-image(tab-bar-#{$ui}-left, 'tab-bar/tab-bar-#{$ui}-left-bg'); } } } .#{$prefix}tab-bar-#{$ui}-right { @include background-gradient($ui-background-color, $ui-background-gradient, right); @if $include-slicer-gradient { .#{$prefix}nlg & { background: slicer-background-image(tab-bar-#{$ui}-right, 'tab-bar/tab-bar-#{$ui}-right-bg') 0 right; } } } } @if $include-ext-layout-container-boxoverflow-scroller { @include extjs-box-scroller-ui( $ui: $ui, $type: 'tab-bar', $horizontal-width: $ui-scroller-width, $horizontal-height: $ui-scroller-height, $vertical-width: $ui-scroller-height, $vertical-height: $ui-scroller-width, $top-margin: $ui-scroller-top-margin, $right-margin: $ui-scroller-right-margin, $bottom-margin: $ui-scroller-bottom-margin, $left-margin: $ui-scroller-left-margin, $glyph-color: $ui-scroller-glyph-color, $top-glyph: $ui-scroller-top-glyph, $right-glyph: $ui-scroller-right-glyph, $bottom-glyph: $ui-scroller-bottom-glyph, $left-glyph: $ui-scroller-left-glyph, $container-padding: $ui-padding, $cursor: $ui-scroller-cursor, $cursor-disabled: $ui-scroller-cursor-disabled, $align: if($ui-classic-scrollers, stretch, middle), $opacity: $ui-scroller-opacity, $opacity-over: $ui-scroller-opacity-over, $opacity-pressed: $ui-scroller-opacity-pressed, $opacity-disabled: $ui-scroller-opacity-disabled, $classic: $ui-classic-scrollers, $include-background-images: $tabbar-scroller-symmetrical-icons ); } @if $include-ext-layout-container-boxoverflow-menu { .#{$prefix}tab-bar-more-icon { @if $enable-font-icons and ($ui-menu-overflow-glyph != null) { @include font-icon($ui-menu-overflow-glyph); color: $ui-menu-overflow-glyph-color; } @else { background-image: theme-background-image('tab-bar/#{$ui}-more'); @if $include-rtl { &.#{$prefix}rtl { background-image: theme-background-image('tab-bar/#{$ui}-more-left'); } } } } } .#{$prefix}tab-bar-plain { &.#{$prefix}tab-bar-#{$ui}-scroller { .#{$prefix}box-scroller-body-horizontal { margin-left: max($ui-scroller-width + horizontal($ui-scroller-left-margin) - left($ui-plain-padding), 0); } } &.#{$prefix}tab-bar-#{$ui}-vertical-scroller { .#{$prefix}box-scroller-body-vertical { margin-top: max($ui-scroller-width + vertical($ui-scroller-top-margin) - top($ui-plain-padding), 0); } } .#{$prefix}box-scroller-tab-bar-#{$ui} { color: $ui-plain-scroller-glyph-color; } } @if $ui-classic-scrollers { .#{$prefix}tab-bar-#{$ui}-right { .#{$prefix}box-scroller-top { background-position: right (-$ui-scroller-width); &.#{$prefix}box-scroller-hover { background-position: right 0; } } .#{$prefix}box-scroller-bottom { background-position: right 0; &.#{$prefix}box-scroller-hover { background-position: right (-$ui-scroller-width); } } } .#{$prefix}tab-bar-#{$ui}-bottom { .#{$prefix}box-scroller-left { background-position: -$ui-scroller-width bottom; &.#{$prefix}box-scroller-hover { background-position: 0 bottom; } } .#{$prefix}box-scroller-right { background-position: 0 bottom; &.#{$prefix}box-scroller-hover { background-position: -$ui-scroller-width bottom; } } } } @else { $ui-scroller-align-offset: floor((top($ui-padding) - bottom($ui-padding)) / 2) - floor($ui-strip-height / 2); $ui-scroller-half-height: -(floor($ui-scroller-height / 2)); $ui-scroller-top-left-offset: $ui-scroller-half-height + $ui-scroller-align-offset; $ui-scroller-bottom-right-offset: $ui-scroller-half-height - $ui-scroller-align-offset; .#{$prefix}box-scroller-tab-bar-#{$ui} { .#{$prefix}tab-bar-#{$ui}-top & { margin-top: $ui-scroller-top-left-offset; } .#{$prefix}tab-bar-#{$ui}-right & { margin-left: $ui-scroller-bottom-right-offset; } .#{$prefix}tab-bar-#{$ui}-bottom & { margin-top: $ui-scroller-bottom-right-offset; } .#{$prefix}tab-bar-#{$ui}-left & { margin-left: $ui-scroller-top-left-offset; } } } @if (($ui-scroller-opacity != 1 or $ui-scroller-opacity-over != 1 or $ui-scroller-opacity-pressed != 1) and is-null($ui-background-gradient)) { .#{$prefix}box-scroller-tab-bar-#{$ui} { // EXTJSIV-8846: partially transparent png images do not display correctly // in winXP/IE8 when the image element has a transparent background. // to fix this, we give the element the same background-color as the tabbar. background-color: $ui-background-color; .#{$prefix}ie8 .#{$prefix}box-scroller-plain { // plain tabbars have transparent backgrounds, so we use a white bg to overcome // the png transparency issues. See EXTJSIV-8846 background-color: #fff; } } } @if $tabbar-scroller-symmetrical-icons { @if $tabbar-scroller-include-plain-icon { .#{$prefix}box-scroller-plain.#{$prefix}box-scroller-tab-bar-#{$ui} { @if (not $enable-font-icons) or ($ui-scroller-left-glyph == null) { &.#{$prefix}box-scroller-left { background-image: theme-background-image('tab-bar/#{$ui}-plain-scroll-left'); } } @if (not $enable-font-icons) or ($ui-scroller-right-glyph == null) { &.#{$prefix}box-scroller-right { background-image: theme-background-image('tab-bar/#{$ui}-plain-scroll-right'); } } @if (not $enable-font-icons) or ($ui-scroller-top-glyph == null) { &.#{$prefix}box-scroller-top { background-image: theme-background-image('tab-bar/#{$ui}-plain-scroll-top'); } } @if (not $enable-font-icons) or ($ui-scroller-bottom-glyph == null) { &.#{$prefix}box-scroller-bottom { background-image: theme-background-image('tab-bar/#{$ui}-plain-scroll-bottom'); } } } } } @else { .#{$prefix}tab-bar-#{$ui}-top { .#{$prefix}box-scroller-left { background-image: theme-background-image('tab-bar/#{$ui}-scroll-left-top'); } .#{$prefix}box-scroller-right { background-image: theme-background-image('tab-bar/#{$ui}-scroll-right-top'); } } .#{$prefix}tab-bar-#{$ui}-bottom { .#{$prefix}box-scroller-left { background-image: theme-background-image('tab-bar/#{$ui}-scroll-left-bottom'); } .#{$prefix}box-scroller-right { background-image: theme-background-image('tab-bar/#{$ui}-scroll-right-bottom'); } } .#{$prefix}tab-bar-#{$ui}-left { .#{$prefix}box-scroller-top { background-image: theme-background-image('tab-bar/#{$ui}-scroll-top-left'); } .#{$prefix}box-scroller-bottom { background-image: theme-background-image('tab-bar/#{$ui}-scroll-bottom-left'); } } .#{$prefix}tab-bar-#{$ui}-right { .#{$prefix}box-scroller-top { background-image: theme-background-image('tab-bar/#{$ui}-scroll-top-right'); } .#{$prefix}box-scroller-bottom { background-image: theme-background-image('tab-bar/#{$ui}-scroll-bottom-right'); } } } $stretch: slicer-background-stretch(tab-bar-#{$ui}-top, bottom); $stretch: slicer-background-stretch(tab-bar-#{$ui}-bottom, top); $stretch: slicer-background-stretch(tab-bar-#{$ui}-left, right); $stretch: slicer-background-stretch(tab-bar-#{$ui}-right, left); @include x-slicer(tab-bar-#{$ui}-top); @include x-slicer(tab-bar-#{$ui}-bottom); @include x-slicer(tab-bar-#{$ui}-left); @include x-slicer(tab-bar-#{$ui}-right);} /** * Creates a visual theme for a Tab Panel * * @param {string} $ui * The name of the UI being created. Can not included spaces or special punctuation * (used in CSS class names). * * @param {color} [$ui-tab-background-color=$tab-base-color] * The background-color of Tabs * * @param {color} [$ui-tab-background-color-focus=$tab-base-color-focus] * The background-color of focused Tabs * * @param {color} [$ui-tab-background-color-over=$tab-base-color-over] * The background-color of hovered Tabs * * @param {color} [$ui-tab-background-color-active=$tab-base-color-active] * The background-color of the active Tab * * @param {color} [$ui-tab-background-color-focus-over=$tab-base-color-focus-over] * The background-color of focused hovered Tabs * * @param {color} [$ui-tab-background-color-focus-active=$tab-base-color-focus-active] * The background-color of the active Tab when focused * * @param {color} [$ui-tab-background-color-disabled=$tab-base-color-disabled] * The background-color of disabled Tabs * * @param {color} [$ui-tab-plain-background-color=$tab-plain-background-color] * The background-color of {@link Ext.tab.Bar#plain} Tabs * * @param {color} [$ui-tab-plain-background-color-focus=$tab-plain-background-color-focus] * The background-color of focused {@link Ext.tab.Bar#plain} Tabs * * @param {color} [$ui-tab-plain-background-color-over=$tab-plain-background-color-over] * The background-color of hovered {@link Ext.tab.Bar#plain} Tabs * * @param {color} [$ui-tab-plain-background-color-active=$tab-plain-background-color-active] * The background-color of the active {@link Ext.tab.Bar#plain} Tabs * * @param {color} [$ui-tab-plain-background-color-focus-over=$tab-plain-background-color-focus-over] * The background-color of focused hovered {@link Ext.tab.Bar#plain} Tabs * * @param {color} [$ui-tab-plain-background-color-focus-active=$tab-plain-background-color-focus-active] * The background-color of the active {@link Ext.tab.Bar#plain} Tab when focused * * @param {color} [$ui-tab-plain-background-color-disabled=$tab-plain-background-color-disabled] * The background-color of disabled {@link Ext.tab.Bar#plain} Tabs * * @param {list} [$ui-tab-border-radius=$tab-border-radius] * The border-radius of Tabs * * @param {number} [$ui-tab-border-width=$tab-border-width] * The border-width of Tabs * * @param {number/list} [$ui-tab-border-width-focus=$tab-border-width-focus] * The border-width of focused Tabs * * @param {number/list} [$ui-tab-border-width-over=$tab-border-width-over] * The border-width of hovered Tabs * * @param {number/list} [$ui-tab-border-width-active=$tab-border-width-active] * The border-width of active Tabs * * @param {number/list} [$ui-tab-border-width-disabled=$tab-border-width-disabled] * The border-width of disabled Tabs * * @param {number/list} [$ui-tab-margin=$tab-margin] * The border-width of Tabs * * @param {number/list} [$ui-tab-padding=$tab-padding] * The padding of Tabs * * @param {number/list} [$ui-tab-text-padding=$tab-text-padding] * The padding of the Tab's text element * * @param {color} [$ui-tab-border-color=$tab-border-color] * The border-color of Tabs * * @param {color} [$ui-tab-border-color-focus=$tab-border-color-focus] * The border-color of focused Tabs * * @param {color} [$ui-tab-border-color-over=$tab-border-color-over] * The border-color of hovered Tabs * * @param {color} [$ui-tab-border-color-active=$tab-border-color-active] * The border-color of the active Tab * * @param {color} [$ui-tab-border-color-focus-over=$tab-border-color-focus-over] * The border-color of focused hovered Tabs * * @param {color} [$ui-tab-border-color-focus-active=$tab-border-color-focus-active] * The border-color of the active Tab when focused * * @param {color} [$ui-tab-border-color-disabled=$tab-border-color-disabled] * The border-color of disabled Tabs * * @param {color} [$ui-tab-plain-border-color=$tab-plain-border-color] * The border-color of {@link Ext.tab.Bar#plain} Tabs * * @param {color} [$ui-tab-plain-border-color-focus=$tab-plain-border-color-focus] * The border-color of focused {@link Ext.tab.Bar#plain} Tabs * * @param {color} [$ui-tab-plain-border-color-over=$tab-plain-border-color-over] * The border-color of hovered {@link Ext.tab.Bar#plain} Tabs * * @param {color} [$ui-tab-plain-border-color-active=$tab-plain-border-color-active] * The border-color of the active {@link Ext.tab.Bar#plain} Tabs * * @param {color} [$ui-tab-plain-border-color-focus-over=$tab-plain-border-color-focus-over] * The border-color of focused hovered {@link Ext.tab.Bar#plain} Tabs * * @param {color} [$ui-tab-plain-border-color-focus-active=$tab-plain-border-color-focus-active] * The border-color of the active {@link Ext.tab.Bar#plain} Tab when focused * * @param {color} [$ui-tab-plain-border-color-disabled=$tab-plain-border-color-disabled] * The border-color of disabled {@link Ext.tab.Bar#plain} Tabs * * @param {string} [$ui-tab-cursor=$tab-cursor] * The Tab cursor * * @param {string} [$ui-tab-cursor-disabled=$tab-cursor-disabled] * The cursor of disabled Tabs * * @param {number} [$ui-tab-font-size=$tab-font-size] * The font-size of Tabs * * @param {number} [$ui-tab-font-size-focus=$tab-font-size-focus] * The font-size of focused Tabs * * @param {number} [$ui-tab-font-size-over=$tab-font-size-over] * The font-size of hovered Tabs * * @param {number} [$ui-tab-font-size-active=$tab-font-size-active] * The font-size of the active Tab * * @param {number} [$ui-tab-font-size-focus-over=$tab-font-size-focus-over] * The font-size of focused hovered Tabs * * @param {number} [$ui-tab-font-size-focus-active=$tab-font-size-focus-active] * The font-size of the active Tab when focused * * @param {number} [$ui-tab-font-size-disabled=$tab-font-size-disabled] * The font-size of disabled Tabs * * @param {string} [$ui-tab-font-weight=$tab-font-weight] * The font-weight of Tabs * * @param {string} [$ui-tab-font-weight-focus=$tab-font-weight-focus] * The font-weight of focused Tabs * * @param {string} [$ui-tab-font-weight-over=$tab-font-weight-over] * The font-weight of hovered Tabs * * @param {string} [$ui-tab-font-weight-active=$tab-font-weight-active] * The font-weight of the active Tab * * @param {string} [$ui-tab-font-weight-focus-over=$tab-font-weight-focus-over] * The font-weight of focused hovered Tabs * * @param {string} [$ui-tab-font-weight-focus-active=$tab-font-weight-focus-active] * The font-weight of the active Tab when focused * * @param {string} [$ui-tab-font-weight-disabled=$tab-font-weight-disabled] * The font-weight of disabled Tabs * * @param {string} [$ui-tab-font-family=$tab-font-family] * The font-family of Tabs * * @param {string} [$ui-tab-font-family-focus=$tab-font-family-focus] * The font-family of focused Tabs * * @param {string} [$ui-tab-font-family-over=$tab-font-family-over] * The font-family of hovered Tabs * * @param {string} [$ui-tab-font-family-active=$tab-font-family-active] * The font-family of the active Tab * * @param {string} [$ui-tab-font-family-focus-over=$tab-font-family-focus-over] * The font-family of focused hovered Tabs * * @param {string} [$ui-tab-font-family-focus-active=$tab-font-family-focus-active] * The font-family of the active Tab when focused * * @param {string} [$ui-tab-font-family-disabled=$tab-font-family-disabled] * The font-family of disabled Tabs * * @param {number} [$ui-tab-line-height=$tab-line-height] * The line-height of Tabs * * @param {color} [$ui-tab-color=$tab-color] * The text color of Tabs * * @param {color} [$ui-tab-color-focus=$tab-color-focus] * The text color of focused Tabs * * @param {color} [$ui-tab-color-over=$tab-color-over] * The text color of hovered Tabs * * @param {color} [$ui-tab-color-active=$tab-color-active] * The text color of the active Tab * * @param {color} [$ui-tab-color-focus-over=$tab-color-focus-over] * The text color of focused hovered Tabs * * @param {color} [$ui-tab-color-focus-active=$tab-color-focus-active] * The text color of the active Tab when focused * * @param {color} [$ui-tab-color-disabled=$tab-color-disabled] * The text color of disabled Tabs * * @param {color} [$ui-tab-plain-color=$tab-plain-color] * The text color of {@link Ext.tab.Bar#plain} Tabs * * @param {color} [$ui-tab-plain-color-focus=$tab-plain-color-focus] * The text color of focused {@link Ext.tab.Bar#plain} Tabs * * @param {color} [$ui-tab-plain-color-over=$tab-plain-color-over] * The text color of hovered {@link Ext.tab.Bar#plain} Tabs * * @param {color} [$ui-tab-plain-color-active=$tab-plain-color-active] * The text color of the active {@link Ext.tab.Bar#plain} Tab * * @param {color} [$ui-tab-plain-color-focus-over=$tab-plain-color-focus-over] * The text color of focused hovered {@link Ext.tab.Bar#plain} Tabs * * @param {color} [$ui-tab-plain-color-focus-active=$tab-plain-color-focus-active] * The text color of the active {@link Ext.tab.Bar#plain} Tab when focused * * @param {color} [$ui-tab-plain-color-disabled=$tab-plain-color-disabled] * The text color of disabled {@link Ext.tab.Bar#plain} Tabs * * @param {string/list} [$ui-tab-background-gradient=$tab-background-gradient] * The background-gradient for Tabs. Can be either the name of a predefined gradient * or a list of color stops. Used as the `$type` parameter for * {@link Global_CSS#background-gradient}. * * @param {string/list} [$ui-tab-background-gradient-focus=$tab-background-gradient-focus] * The background-gradient for focused Tabs. Can be either the name of a predefined gradient * or a list of color stops. Used as the `$type` parameter for * {@link Global_CSS#background-gradient}. * * @param {string/list} [$ui-tab-background-gradient-over=$tab-background-gradient-over] * The background-gradient for hovered Tabs. Can be either the name of a predefined gradient * or a list of color stops. Used as the `$type` parameter for * {@link Global_CSS#background-gradient}. * * @param {string/list} [$ui-tab-background-gradient-active=$tab-background-gradient-active] * The background-gradient for the active Tab. Can be either the name of a predefined gradient * or a list of color stops. Used as the `$type` parameter for * {@link Global_CSS#background-gradient}. * * @param {string/list} [$ui-tab-background-gradient-focus-over=$tab-background-gradient-focus-over] * The background-gradient for focused hovered Tabs. Can be either the name of a * predefined gradient or a list of color stops. Used as the `$type` parameter for * {@link Global_CSS#background-gradient}. * * @param {string/list} [$ui-tab-background-gradient-focus-active=$tab-background-gradient-focus-active] * The background-gradient for the active Tab when focused. Can be either the name of a * predefined gradient or a list of color stops. Used as the `$type` parameter for * {@link Global_CSS#background-gradient}. * * @param {string/list} [$ui-tab-background-gradient-disabled=$tab-background-gradient-disabled] * The background-gradient for disabled Tabs. Can be either the name of a predefined gradient * or a list of color stops. Used as the `$type` parameter for * {@link Global_CSS#background-gradient}. * * @param {number} [$ui-tab-inner-border-width=$tab-inner-border-width] * The inner border-width of Tabs * * @param {number} [$ui-tab-inner-border-width-focus=$tab-inner-border-width-focus] * The inner border-width of focused Tabs * * @param {number} [$ui-tab-inner-border-width-over=$tab-inner-border-width-over] * The inner border-width of hovered Tabs * * @param {number} [$ui-tab-inner-border-width-active=$tab-inner-border-width-active] * The inner border-width of active Tabs * * @param {number} [$ui-tab-inner-border-width-focus-over=$tab-inner-border-width-focus-over] * The inner border-width of focused hovered Tabs * * @param {number} [$ui-tab-inner-border-width-focus-active=$tab-inner-border-width-focus-active] * The inner border-width of active Tabs when focused * * @param {number} [$ui-tab-inner-border-width-disabled=$tab-inner-border-width-disabled] * The inner border-width of disabled Tabs * * @param {color} [$ui-tab-inner-border-color=$tab-inner-border-color] * The inner border-color of Tabs * * @param {color} [$ui-tab-inner-border-color-focus=$tab-inner-border-color-focus] * The inner border-color of focused Tabs * * @param {color} [$ui-tab-inner-border-color-over=$tab-inner-border-color-over] * The inner border-color of hovered Tabs * * @param {color} [$ui-tab-inner-border-color-active=$tab-inner-border-color-active] * The inner border-color of active Tabs * * @param {color} [$ui-tab-inner-border-color-focus-over=$tab-inner-border-color-focus-over] * The inner border-color of focused hovered Tabs * * @param {color} [$ui-tab-inner-border-color-focus-active=$tab-inner-border-color-focus-active] * The inner border-color of active Tabs when focused * * @param {color} [$ui-tab-inner-border-color-disabled=$tab-inner-border-color-disabled] * The inner border-color of disabled Tabs * * @param {boolean} [$ui-tab-inner-border-collapse=$tab-inner-border-collapse] * `true` to suppress the inner border of the tab on the side adjacent to the tab strip * * @param {boolean} [$ui-tab-inner-border-collapse-focus=$tab-inner-border-collapse-focus] * `true` to suppress the inner border of the tab on the side adjacent to the tab strip * when the tab is focused * * @param {boolean} [$ui-tab-inner-border-collapse-over=$tab-inner-border-collapse-over] * `true` to suppress the inner border of the tab on the side adjacent to the tab strip * when the tab is hovered * * @param {boolean} [$ui-tab-inner-border-collapse-active=$tab-inner-border-collapse-active] * `true` to suppress the inner border of the tab on the side adjacent to the tab strip * when the tab is active * * @param {boolean} [$ui-tab-inner-border-collapse-focus-over=$tab-inner-border-collapse-focus-over] * `true` to suppress the inner border of the tab on the side adjacent to the tab strip * when the tab is focused and hovered * * @param {boolean} [$ui-tab-inner-border-collapse-focus-active=$tab-inner-border-collapse-focus-active] * `true` to suppress the inner border of the tab on the side adjacent to the tab strip * when the tab is focused and active * * @param {boolean} [$ui-tab-inner-border-collapse-disabled=$tab-inner-border-collapse-disabled] * `true` to suppress the inner border of the tab on the side adjacent to the tab strip * when the tab is disabled * * @param {number} [$ui-tab-outline-width-focus=$tab-outline-width-focus] * The outline width of focused Tabs * * @param {string} [$ui-tab-outline-style-focus=$tab-outline-style-focus] * The outline-style of focused Tabs * * @param {color} [$ui-tab-outline-color-focus=$tab-outline-color-focus] * The outline color of focused Tabs * * @param {number} [$ui-tab-outline-offset-focus=$tab-outline-offset-focus] * The outline offset of focused Tabs * * @param {number} [$ui-tab-body-outline-width-focus=$tab-body-outline-width-focus] * The body outline width of focused Tabs * * @param {string} [$ui-tab-body-outline-style-focus=$tab-body-outline-style-focus] * The body outline-style of focused Tabs * * @param {color} [$ui-tab-body-outline-color-focus=$tab-body-outline-color-focus] * The body outline color of focused Tabs * * @param {number} [$ui-tab-icon-width=$tab-icon-width] * The width of the Tab close icon * * @param {number} [$ui-tab-icon-height=$tab-icon-height] * The height of the Tab close icon * * @param {number} [$ui-tab-icon-spacing=$tab-icon-spacing] * the space in between the text and the close button * * @param {list} [$ui-tab-icon-background-position=$tab-icon-background-position] * The background-position of Tab icons * * @param {color} [$ui-tab-glyph-color=$tab-glyph-color] * The color of Tab glyph icons * * @param {color} [$ui-tab-glyph-color-focus=$tab-glyph-color-focus] * The color of a Tab glyph icon when the Tab is focused * * @param {color} [$ui-tab-glyph-color-over=$tab-glyph-color-over] * The color of a Tab glyph icon when the Tab is hovered * * @param {color} [$ui-tab-glyph-color-active=$tab-glyph-color-active] * The color of a Tab glyph icon when the Tab is active * * @param {color} [$ui-tab-glyph-color-focus-over=$tab-glyph-color-focus-over] * The color of a Tab glyph icon when the Tab is focused and hovered * * @param {color} [$ui-tab-glyph-color-focus-active=$tab-glyph-color-focus-active] * The color of a Tab glyph icon when the Tab is focused and active * * @param {color} [$ui-tab-glyph-color-disabled=$tab-glyph-color-disabled] * The color of a Tab glyph icon when the Tab is disabled * * @param {color} [$ui-tab-plain-glyph-color=$tab-plain-glyph-color] * The color of {@link Ext.tab.Bar#plain} Tab glyph icons * * @param {color} [$ui-tab-plain-glyph-color-focus=$tab-plain-glyph-color-focus] * The color of a {@link Ext.tab.Bar#plain} Tab glyph icon when the Tab is focused * * @param {color} [$ui-tab-plain-glyph-color-over=$tab-plain-glyph-color-over] * The color of a {@link Ext.tab.Bar#plain} Tab glyph icon when the Tab is hovered * * @param {color} [$ui-tab-plain-glyph-color-active=$tab-plain-glyph-color-active] * The color of a {@link Ext.tab.Bar#plain} Tab glyph icon when the Tab is active * * @param {color} [$ui-tab-plain-glyph-color-focus-over=$tab-plain-glyph-color-focus-over] * The color of a {@link Ext.tab.Bar#plain} Tab glyph icon when the Tab is focused and hovered * * @param {color} [$ui-tab-plain-glyph-color-focus-active=$tab-plain-glyph-color-focus-active] * The color of a {@link Ext.tab.Bar#plain} Tab glyph icon when the Tab is focused and active * * @param {color} [$ui-tab-plain-glyph-color-disabled=$tab-plain-glyph-color-disabled] * The color of a {@link Ext.tab.Bar#plain} Tab glyph icon when the Tab is disabled * * @param {number} [$ui-tab-glyph-opacity=$tab-glyph-opacity] * The opacity of a Tab glyph icon * * @param {number} [$ui-tab-glyph-opacity-disabled=$tab-glyph-opacity-disabled] * The opacity of a Tab glyph icon when the Tab is disabled * * @param {number} [$ui-tab-opacity=$tab-opacity] * Tab opacity * * @param {number} [$ui-tab-opacity-focus=$tab-opacity-focus] * Tab opacity when focused * * @param {number} [$ui-tab-opacity-over=$tab-opacity-over] * Tab opacity when hovered * * @param {number} [$ui-tab-opacity-active=$tab-opacity-active] * Opacity of the active tab * * @param {number} [$ui-tab-opacity-focus-over=$tab-opacity-focus-over] * Tab opacity when focused and hovered * * @param {number} [$ui-tab-opacity-focus-active=$tab-opacity-focus-active] * Opacity of the active tab when focused * * @param {number} [$ui-tab-opacity-disabled=$tab-opacity-disabled] * opacity to apply to the tab's main element when the tab is disabled * * @param {number} [$ui-tab-background-opacity=$tab-background-opacity] * Tab background opacity * * @param {number} [$ui-tab-background-opacity-focus=$tab-background-opacity-focus] * Tab background opacity when focused * * @param {number} [$ui-tab-background-opacity-over=$tab-background-opacity-over] * Tab background opacity when hovered * * @param {number} [$ui-tab-background-opacity-active=$tab-background-opacity-active] * background opacity of the active tab * * @param {number} [$ui-tab-background-opacity-focus-over=$tab-background-opacity-focus-over] * Tab background opacity when focused and hovered * * @param {number} [$ui-tab-background-opacity-focus-active=$tab-background-opacity-focus-active] * Background opacity of the active tab when focused * * @param {number} [$ui-tab-background-opacity-disabled=$tab-background-opacity-disabled] * Tab background opacity when disabled * * @param {number} [$ui-tab-text-opacity-disabled=$tab-text-opacity-disabled] * opacity to apply to the tab's text element when the tab is disabled * * @param {number} [$ui-tab-icon-opacity-disabled=$tab-icon-opacity-disabled] * opacity to apply to the tab's icon element when the tab is disabled * * @param {number} [$ui-strip-height=$tabbar-strip-height] * The height of the Tab Bar strip * * @param {number/list} [$ui-strip-border-width=$tabbar-strip-border-width] * The border-width of the Tab Bar strip * * @param {color} [$ui-strip-border-color=$tabbar-strip-border-color] * The border-color of the Tab Bar strip * * @param {color} [$ui-strip-background-color=$tabbar-strip-background-color] * The background-color of the Tab Bar strip * * @param {number/list} [$ui-bar-border-width=$tabbar-border-width] * The border-width of the Tab Bar * * @param {color} [$ui-bar-border-color=$tabbar-border-color] * The border-color of the Tab Bar * * @param {number/list} [$ui-bar-padding=$tabbar-padding] * The padding of the Tab Bar * * @param {number/list} [$ui-bar-plain-padding=$tabbar-plain-padding] * The padding of the Tab Bar when {@link #plain} is `true` * * @param {color} [$ui-bar-background-color=$tabbar-background-color] * The background color of the Tab Bar * * @param {string/list} [$ui-bar-background-gradient=$tabbar-background-gradient] * The background-gradient of the Tab Bar. Can be either the name of a predefined gradient * or a list of color stops. Used as the `$type` parameter for * {@link Global_CSS#background-gradient}. * * @param {number} [$ui-bar-scroller-width=$tabbar-scroller-width] * The width of the Tab Bar scrollers * * @param {string} [$ui-bar-scroller-cursor=$tabbar-scroller-cursor] * The cursor of the Tab Bar scrollers * * @param {string} [$ui-bar-scroller-cursor-disabled=$tabbar-scroller-cursor-disabled] * The cursor of disabled Tab Bar scrollers * * @param {number} [$ui-bar-scroller-opacity=$tabbar-scroller-opacity] * The opacity of Tab Bar scrollers * * @param {number} [$ui-bar-scroller-opacity-over=$tabbar-scroller-opacity-over] * The opacity of hovered Tab Bar scrollers * * @param {number} [$ui-bar-scroller-opacity-pressed=$tabbar-scroller-opacity-pressed] * The opacity of pressed Tab Bar scrollers * * @param {number} [$ui-bar-scroller-opacity-disabled=$tabbar-scroller-opacity-disabled] * The opacity of disabled Tab Bar scrollers * * @param {color} [$ui-bar-scroller-glyph-color=$tabbar-scroller-glyph-color] * The color to use for Tab Bar scroller icons when {@link Global_CSS#$enable-font-icons} is `true`. * * @param {color} [$ui-bar-plain-scroller-glyph-color=$tabbar-plain-scroller-glyph-color] * The color to use for "plain" Tab Bar scroller icons when {@link Global_CSS#$enable-font-icons} is `true`. * * @param {string/list} [$ui-bar-scroller-top-glyph=$tabbar-scroller-top-glyph] * Glyph for the "top" scroller icon when {@link Global_CSS#$enable-font-icons} is `true`. * * @param {string/list} [$ui-bar-scroller-right-glyph=$tabbar-scroller-right-glyph] * Glyph for the "right" scroller icon when {@link Global_CSS#$enable-font-icons} is `true`. * * @param {string/list} [$ui-bar-scroller-bottom-glyph=$tabbar-scroller-bottom-glyph] * Glyph for the "bottom" scroller icon when {@link Global_CSS#$enable-font-icons} is `true`. * * @param {string/list} [$ui-bar-scroller-left-glyph=$tabbar-scroller-left-glyph] * Glyph for the "left" scroller icon when {@link Global_CSS#$enable-font-icons} is `true`. * * @param {number} [$ui-tab-closable-icon-width=$tab-closable-icon-width] * The width of the Tab close icon * * @param {number} [$ui-tab-closable-icon-height=$tab-closable-icon-height] * The height of the Tab close icon * * @param {number} [$ui-tab-closable-icon-top=$tab-closable-icon-top] * The distance to offset the Tab close icon from the top of the tab * * @param {number} [$ui-tab-closable-icon-right=$tab-closable-icon-right] * The distance to offset the Tab close icon from the right of the tab * * @param {number} [$ui-tab-closable-icon-spacing=$tab-closable-icon-spacing] * the space in between the text and the close button * * @param {color} [$ui-tab-closable-icon-glyph-color=$tab-closable-icon-glyph-color] * The color of the Tab close icon when {@link Global_CSS#$enable-font-icons} is `true`. * * @param {color} [$ui-tab-closable-icon-glyph-color-focus=$tab-closable-icon-glyph-color-focus] * The color of the focused Tab's close icon when {@link Global_CSS#$enable-font-icons} is `true`. * * @param {color} [$ui-tab-closable-icon-glyph-color-over=$tab-closable-icon-glyph-color-over] * The color of the hovered Tab's close icon when {@link Global_CSS#$enable-font-icons} is `true`. * * @param {color} [$ui-tab-closable-icon-glyph-color-active=$tab-closable-icon-glyph-color-active] * The color of the active Tab's close icon when {@link Global_CSS#$enable-font-icons} is `true`. * * @param {color} [$ui-tab-closable-icon-glyph-color-focus-over=$tab-closable-icon-glyph-color-focus-over] * The color of a focused and hovered Tab's close icon when {@link Global_CSS#$enable-font-icons} is `true`. * * @param {color} [$ui-tab-closable-icon-glyph-color-focus-active=$tab-closable-icon-glyph-color-focus-active] * The color of a focused and active Tab's close icon when {@link Global_CSS#$enable-font-icons} is `true`. * * @param {color} [$ui-tab-closable-icon-glyph-color-disabled=$tab-closable-icon-glyph-color-disabled] * The color of a disabled Tab's close icon when {@link Global_CSS#$enable-font-icons} is `true`. * * @param {color} [$ui-tab-plain-closable-icon-glyph-color=$tab-plain-closable-icon-glyph-color] * The color of the Tab close icon when {@link Global_CSS#$enable-font-icons} is `true`. * * @param {color} [$ui-tab-plain-closable-icon-glyph-color-focus=$tab-plain-closable-icon-glyph-color-focus] * The color of the focused {@link Ext.tab.Bar#plain} Tab's close icon when {@link Global_CSS#$enable-font-icons} is `true`. * * @param {color} [$ui-tab-plain-closable-icon-glyph-color-over=$tab-plain-closable-icon-glyph-color-over] * The color of the hovered {@link Ext.tab.Bar#plain} Tab's close icon when {@link Global_CSS#$enable-font-icons} is `true`. * * @param {color} [$ui-tab-plain-closable-icon-glyph-color-active=$tab-plain-closable-icon-glyph-color-active] * The color of the active {@link Ext.tab.Bar#plain} Tab's close icon when {@link Global_CSS#$enable-font-icons} is `true`. * * @param {color} [$ui-tab-plain-closable-icon-glyph-color-focus-over=$tab-plain-closable-icon-glyph-color-focus-over] * The color of a focused and hovered {@link Ext.tab.Bar#plain} Tab's close icon when {@link Global_CSS#$enable-font-icons} is `true`. * * @param {color} [$ui-tab-plain-closable-icon-glyph-color-focus-active=$tab-plain-closable-icon-glyph-color-focus-active] * The color of a focused and active {@link Ext.tab.Bar#plain} Tab's close icon when {@link Global_CSS#$enable-font-icons} is `true`. * * @param {color} [$ui-tab-plain-closable-icon-glyph-color-disabled=$tab-plain-closable-icon-glyph-color-disabled] * The color of a disabled {@link Ext.tab.Bar#plain} Tab's close icon when {@link Global_CSS#$enable-font-icons} is `true`. * * @param {string/list} [$ui-tab-closable-icon-glyph=$tab-closable-icon-glyph] * Glyph for the Tab close icon when {@link Global_CSS#$enable-font-icons} is `true`. * * @member Ext.tab.Panel */ @mixin extjs-tab-panel-ui( $ui, $ui-tab-background-color: null, $ui-tab-background-color-focus: null, $ui-tab-background-color-over: null, $ui-tab-background-color-active: null, $ui-tab-background-color-focus-over: null, $ui-tab-background-color-focus-active: null, $ui-tab-background-color-disabled: null, $ui-tab-plain-background-color: null, $ui-tab-plain-background-color-focus: null, $ui-tab-plain-background-color-over: null, $ui-tab-plain-background-color-active: null, $ui-tab-plain-background-color-focus-over: null, $ui-tab-plain-background-color-focus-active: null, $ui-tab-plain-background-color-disabled: null, $ui-tab-border-radius: $tab-border-radius, $ui-tab-border-width: $tab-border-width, $ui-tab-border-width-focus: $tab-border-width-focus, $ui-tab-border-width-over: $tab-border-width-over, $ui-tab-border-width-active: $tab-border-width-active, $ui-tab-border-width-disabled: $tab-border-width-disabled, $ui-tab-margin: $tab-margin, $ui-tab-padding: $tab-padding, $ui-tab-text-padding: $tab-text-padding, $ui-tab-border-color: null, $ui-tab-border-color-focus: null, $ui-tab-border-color-over: null, $ui-tab-border-color-active: null, $ui-tab-border-color-focus-over: null, $ui-tab-border-color-focus-active: null, $ui-tab-border-color-disabled: null, $ui-tab-plain-border-color: null, $ui-tab-plain-border-color-focus: null, $ui-tab-plain-border-color-over: null, $ui-tab-plain-border-color-active: null, $ui-tab-plain-border-color-focus-over: null, $ui-tab-plain-border-color-focus-active: null, $ui-tab-plain-border-color-disabled: null, $ui-tab-cursor: $tab-cursor, $ui-tab-cursor-disabled: $tab-cursor-disabled, $ui-tab-font-size: null, $ui-tab-font-size-focus: null, $ui-tab-font-size-over: null, $ui-tab-font-size-active: null, $ui-tab-font-size-focus-over: null, $ui-tab-font-size-focus-active: null, $ui-tab-font-size-disabled: null, $ui-tab-font-weight: null, $ui-tab-font-weight-focus: null, $ui-tab-font-weight-over: null, $ui-tab-font-weight-active: null, $ui-tab-font-weight-focus-over: null, $ui-tab-font-weight-focus-active: null, $ui-tab-font-weight-disabled: null, $ui-tab-font-family: null, $ui-tab-font-family-focus: null, $ui-tab-font-family-over: null, $ui-tab-font-family-active: null, $ui-tab-font-family-focus-over: null, $ui-tab-font-family-focus-active: null, $ui-tab-font-family-disabled: null, $ui-tab-line-height: $tab-line-height, $ui-tab-color: null, $ui-tab-color-focus: null, $ui-tab-color-over: null, $ui-tab-color-active: null, $ui-tab-color-focus-over: null, $ui-tab-color-focus-active: null, $ui-tab-color-disabled: null, $ui-tab-plain-color: null, $ui-tab-plain-color-focus: null, $ui-tab-plain-color-over: null, $ui-tab-plain-color-active: null, $ui-tab-plain-color-focus-over: null, $ui-tab-plain-color-focus-active: null, $ui-tab-plain-color-disabled: null, $ui-tab-background-gradient: null, $ui-tab-background-gradient-focus: null, $ui-tab-background-gradient-over: null, $ui-tab-background-gradient-active: null, $ui-tab-background-gradient-focus-over: null, $ui-tab-background-gradient-focus-active: null, $ui-tab-background-gradient-disabled: null, $ui-tab-inner-border-width: null, $ui-tab-inner-border-width-focus: null, $ui-tab-inner-border-width-over: null, $ui-tab-inner-border-width-active: null, $ui-tab-inner-border-width-focus-over: null, $ui-tab-inner-border-width-focus-active: null, $ui-tab-inner-border-width-disabled: null, $ui-tab-inner-border-color: null, $ui-tab-inner-border-color-focus: null, $ui-tab-inner-border-color-over: null, $ui-tab-inner-border-color-active: null, $ui-tab-inner-border-color-focus-over: null, $ui-tab-inner-border-color-focus-active: null, $ui-tab-inner-border-color-disabled: null, $ui-tab-inner-border-collapse: null, $ui-tab-inner-border-collapse-focus: null, $ui-tab-inner-border-collapse-over: null, $ui-tab-inner-border-collapse-active: null, $ui-tab-inner-border-collapse-focus-over: null, $ui-tab-inner-border-collapse-focus-active: null, $ui-tab-inner-border-collapse-disabled: null, $ui-tab-outline-width-focus: $tab-outline-width-focus, $ui-tab-outline-style-focus: $tab-outline-style-focus, $ui-tab-outline-color-focus: $tab-outline-color-focus, $ui-tab-outline-offset-focus: $tab-outline-offset-focus, $ui-tab-body-outline-width-focus: $tab-body-outline-width-focus, $ui-tab-body-outline-style-focus: $tab-body-outline-style-focus, $ui-tab-body-outline-color-focus: $tab-body-outline-color-focus, $ui-tab-icon-width: $tab-icon-width, $ui-tab-icon-height: $tab-icon-height, $ui-tab-icon-spacing: $tab-icon-spacing, $ui-tab-icon-background-position: $tab-icon-background-position, $ui-tab-glyph-color: null, $ui-tab-glyph-color-focus: null, $ui-tab-glyph-color-over: null, $ui-tab-glyph-color-active: null, $ui-tab-glyph-color-focus-over: null, $ui-tab-glyph-color-focus-active: null, $ui-tab-glyph-color-disabled: null, $ui-tab-plain-glyph-color: null, $ui-tab-plain-glyph-color-focus: null, $ui-tab-plain-glyph-color-over: null, $ui-tab-plain-glyph-color-active: null, $ui-tab-plain-glyph-color-focus-over: null, $ui-tab-plain-glyph-color-focus-active: null, $ui-tab-plain-glyph-color-disabled: null, $ui-tab-glyph-opacity: $tab-glyph-opacity, $ui-tab-glyph-opacity-disabled: $tab-glyph-opacity-disabled, $ui-tab-opacity: $tab-opacity, $ui-tab-opacity-focus: $tab-opacity-focus, $ui-tab-opacity-over: $tab-opacity-over, $ui-tab-opacity-active: $tab-opacity-active, $ui-tab-opacity-focus-over: $tab-opacity-focus-over, $ui-tab-opacity-focus-active: $tab-opacity-focus-active, $ui-tab-opacity-disabled: $tab-opacity-disabled, $ui-tab-background-opacity: $tab-background-opacity, $ui-tab-background-opacity-focus: $tab-background-opacity-focus, $ui-tab-background-opacity-over: $tab-background-opacity-over, $ui-tab-background-opacity-active: $tab-background-opacity-active, $ui-tab-background-opacity-focus-over: $tab-background-opacity-focus-over, $ui-tab-background-opacity-focus-active: $tab-background-opacity-focus-active, $ui-tab-background-opacity-disabled: $tab-background-opacity-disabled, $ui-tab-text-opacity-disabled: $tab-text-opacity-disabled, $ui-tab-icon-opacity-disabled: $tab-icon-opacity-disabled, $ui-strip-height: $tabbar-strip-height, $ui-strip-border-width: $tabbar-strip-border-width, $ui-strip-border-color: $tabbar-strip-border-color, $ui-strip-background-color: $tabbar-strip-background-color, $ui-bar-border-width: $tabbar-border-width, $ui-bar-border-color: $tabbar-border-color, $ui-bar-padding: $tabbar-padding, $ui-bar-plain-padding: $tabbar-plain-padding, $ui-bar-background-color: $tabbar-base-color, $ui-bar-background-gradient: $tabbar-background-gradient, $ui-bar-scroller-width: $tabbar-scroller-width, $ui-bar-scroller-cursor: $tabbar-scroller-cursor, $ui-bar-scroller-cursor-disabled: $tabbar-scroller-cursor-disabled, $ui-bar-scroller-opacity: $tabbar-scroller-opacity, $ui-bar-scroller-opacity-over: $tabbar-scroller-opacity-over, $ui-bar-scroller-opacity-pressed: $tabbar-scroller-opacity-pressed, $ui-bar-scroller-opacity-disabled: $tabbar-scroller-opacity-disabled, $ui-bar-scroller-glyph-color: $tabbar-scroller-glyph-color, $ui-bar-plain-scroller-glyph-color: $tabbar-plain-scroller-glyph-color, $ui-bar-scroller-top-glyph: $tabbar-scroller-top-glyph, $ui-bar-scroller-right-glyph: $tabbar-scroller-right-glyph, $ui-bar-scroller-bottom-glyph: $tabbar-scroller-bottom-glyph, $ui-bar-scroller-left-glyph: $tabbar-scroller-left-glyph, $ui-tab-closable-icon-width: $tab-closable-icon-width, $ui-tab-closable-icon-height: $tab-closable-icon-height, $ui-tab-closable-icon-top: $tab-closable-icon-top, $ui-tab-closable-icon-right: $tab-closable-icon-right, $ui-tab-closable-icon-spacing: $tab-closable-icon-spacing, $ui-tab-closable-icon-glyph-color: null, $ui-tab-closable-icon-glyph-color-focus: null, $ui-tab-closable-icon-glyph-color-over: null, $ui-tab-closable-icon-glyph-color-active: null, $ui-tab-closable-icon-glyph-color-focus-over: null, $ui-tab-closable-icon-glyph-color-focus-active: null, $ui-tab-closable-icon-glyph-color-disabled: null, $ui-tab-plain-closable-icon-glyph-color: $tab-plain-closable-icon-glyph-color, $ui-tab-plain-closable-icon-glyph-color-focus: $tab-plain-closable-icon-glyph-color-focus, $ui-tab-plain-closable-icon-glyph-color-over: $tab-plain-closable-icon-glyph-color-over, $ui-tab-plain-closable-icon-glyph-color-active: $tab-plain-closable-icon-glyph-color-active, $ui-tab-plain-closable-icon-glyph-color-focus-over: $tab-plain-closable-icon-glyph-color-focus-over, $ui-tab-plain-closable-icon-glyph-color-focus-active: $tab-plain-closable-icon-glyph-color-focus-active, $ui-tab-plain-closable-icon-glyph-color-disabled: $tab-plain-closable-icon-glyph-color-disabled, $ui-tab-closable-icon-glyph: $tab-closable-icon-glyph ) { @if $include-tab-default-ui or $ui != 'default' { @include extjs-tab-ui( $ui: $ui, $ui-background-color: $ui-tab-background-color, $ui-background-color-focus: $ui-tab-background-color-focus, $ui-background-color-over: $ui-tab-background-color-over, $ui-background-color-active: $ui-tab-background-color-active, $ui-background-color-focus-over: $ui-tab-background-color-focus-over, $ui-background-color-focus-active: $ui-tab-background-color-focus-active, $ui-background-color-disabled: $ui-tab-background-color-disabled, $ui-plain-background-color: $ui-tab-plain-background-color, $ui-plain-background-color-focus: $ui-tab-plain-background-color-focus, $ui-plain-background-color-over: $ui-tab-plain-background-color-over, $ui-plain-background-color-active: $ui-tab-plain-background-color-active, $ui-plain-background-color-focus-over: $ui-tab-plain-background-color-focus-over, $ui-plain-background-color-focus-active: $ui-tab-plain-background-color-focus-active, $ui-plain-background-color-disabled: $ui-tab-plain-background-color-disabled, $ui-border-radius: $ui-tab-border-radius, $ui-border-width: $ui-tab-border-width, $ui-margin: $ui-tab-margin, $ui-padding: $ui-tab-padding, $ui-text-padding: $ui-tab-text-padding, $ui-border-color: $ui-tab-border-color, $ui-border-color-focus: $ui-tab-border-color-focus, $ui-border-color-over: $ui-tab-border-color-over, $ui-border-color-active: $ui-tab-border-color-active, $ui-border-color-focus-over: $ui-tab-border-color-focus-over, $ui-border-color-focus-active: $ui-tab-border-color-focus-active, $ui-border-color-disabled: $ui-tab-border-color-disabled, $ui-plain-border-color: $ui-tab-plain-border-color, $ui-plain-border-color-focus: $ui-tab-plain-border-color-focus, $ui-plain-border-color-over: $ui-tab-plain-border-color-over, $ui-plain-border-color-active: $ui-tab-plain-border-color-active, $ui-plain-border-color-focus-over: $ui-tab-plain-border-color-focus-over, $ui-plain-border-color-focus-active: $ui-tab-plain-border-color-focus-active, $ui-plain-border-color-disabled: $ui-tab-plain-border-color-disabled, $ui-cursor: $ui-tab-cursor, $ui-cursor-disabled: $ui-tab-cursor-disabled, $ui-font-size: $ui-tab-font-size, $ui-font-size-focus: $ui-tab-font-size-focus, $ui-font-size-over: $ui-tab-font-size-over, $ui-font-size-active: $ui-tab-font-size-active, $ui-font-size-focus-over: $ui-tab-font-size-focus-over, $ui-font-size-focus-active: $ui-tab-font-size-focus-active, $ui-font-size-disabled: $ui-tab-font-size-disabled, $ui-font-weight: $ui-tab-font-weight, $ui-font-weight-focus: $ui-tab-font-weight-focus, $ui-font-weight-over: $ui-tab-font-weight-over, $ui-font-weight-active: $ui-tab-font-weight-active, $ui-font-weight-focus-over: $ui-tab-font-weight-focus-over, $ui-font-weight-focus-active: $ui-tab-font-weight-focus-active, $ui-font-weight-disabled: $ui-tab-font-weight-disabled, $ui-font-family: $ui-tab-font-family, $ui-font-family-focus: $ui-tab-font-family-focus, $ui-font-family-over: $ui-tab-font-family-over, $ui-font-family-active: $ui-tab-font-family-active, $ui-font-family-focus-over: $ui-tab-font-family-focus-over, $ui-font-family-focus-active: $ui-tab-font-family-focus-active, $ui-font-family-disabled: $ui-tab-font-family-disabled, $ui-line-height: $ui-tab-line-height, $ui-color: $ui-tab-color, $ui-color-focus: $ui-tab-color-focus, $ui-color-over: $ui-tab-color-over, $ui-color-active: $ui-tab-color-active, $ui-color-focus-over: $ui-tab-color-focus-over, $ui-color-focus-active: $ui-tab-color-focus-active, $ui-color-disabled: $ui-tab-color-disabled, $ui-plain-color: $ui-tab-plain-color, $ui-plain-color-focus: $ui-tab-plain-color-focus, $ui-plain-color-over: $ui-tab-plain-color-over, $ui-plain-color-active: $ui-tab-plain-color-active, $ui-plain-color-focus-over: $ui-tab-plain-color-focus-over, $ui-plain-color-focus-active: $ui-tab-plain-color-focus-active, $ui-plain-color-disabled: $ui-tab-plain-color-disabled, $ui-background-gradient: $ui-tab-background-gradient, $ui-background-gradient-focus: $ui-tab-background-gradient-focus, $ui-background-gradient-over: $ui-tab-background-gradient-over, $ui-background-gradient-active: $ui-tab-background-gradient-active, $ui-background-gradient-focus-over: $ui-tab-background-gradient-focus-over, $ui-background-gradient-focus-active: $ui-tab-background-gradient-focus-active, $ui-background-gradient-disabled: $ui-tab-background-gradient-disabled, $ui-inner-border-width: $ui-tab-inner-border-width, $ui-inner-border-width-focus: $ui-tab-inner-border-width-focus, $ui-inner-border-width-over: $ui-tab-inner-border-width-over, $ui-inner-border-width-active: $ui-tab-inner-border-width-active, $ui-inner-border-width-focus-over: $ui-tab-inner-border-width-focus-over, $ui-inner-border-width-focus-active: $ui-tab-inner-border-width-focus-active, $ui-inner-border-width-disabled: $ui-tab-inner-border-width-disabled, $ui-inner-border-color: $ui-tab-inner-border-color, $ui-inner-border-color-focus: $ui-tab-inner-border-color-focus, $ui-inner-border-color-over: $ui-tab-inner-border-color-over, $ui-inner-border-color-active: $ui-tab-inner-border-color-active, $ui-inner-border-color-focus-over: $ui-tab-inner-border-color-focus-over, $ui-inner-border-color-focus-active: $ui-tab-inner-border-color-focus-active, $ui-inner-border-color-disabled: $ui-tab-inner-border-color-disabled, $ui-inner-border-collapse: $ui-tab-inner-border-collapse, $ui-inner-border-collapse-focus: $ui-tab-inner-border-collapse-focus, $ui-inner-border-collapse-over: $ui-tab-inner-border-collapse-over, $ui-inner-border-collapse-active: $ui-tab-inner-border-collapse-active, $ui-inner-border-collapse-focus-over: $ui-tab-inner-border-collapse-focus-over, $ui-inner-border-collapse-focus-active: $ui-tab-inner-border-collapse-focus-active, $ui-inner-border-collapse-disabled: $ui-tab-inner-border-collapse-disabled, $ui-outline-width-focus: $ui-tab-outline-width-focus, $ui-outline-style-focus: $ui-tab-outline-style-focus, $ui-outline-color-focus: $ui-tab-outline-color-focus, $ui-outline-offset-focus: $ui-tab-outline-offset-focus, $ui-body-outline-width-focus: $ui-tab-body-outline-width-focus, $ui-body-outline-style-focus: $ui-tab-body-outline-style-focus, $ui-body-outline-color-focus: $ui-tab-body-outline-color-focus, $ui-icon-width: $ui-tab-icon-width, $ui-icon-height: $ui-tab-icon-height, $ui-icon-spacing: $ui-tab-icon-spacing, $ui-icon-background-position: $ui-tab-icon-background-position, $ui-glyph-color: $ui-tab-glyph-color, $ui-glyph-color-focus: $ui-tab-glyph-color-focus, $ui-glyph-color-over: $ui-tab-glyph-color-over, $ui-glyph-color-active: $ui-tab-glyph-color-active, $ui-glyph-color-focus-over: $ui-tab-glyph-color-focus-over, $ui-glyph-color-focus-active: $ui-tab-glyph-color-focus-active, $ui-glyph-color-disabled: $ui-tab-glyph-color-disabled, $ui-plain-glyph-color: $ui-tab-plain-glyph-color, $ui-plain-glyph-color-focus: $ui-tab-plain-glyph-color-focus, $ui-plain-glyph-color-over: $ui-tab-plain-glyph-color-over, $ui-plain-glyph-color-active: $ui-tab-plain-glyph-color-active, $ui-plain-glyph-color-focus-over: $ui-tab-plain-glyph-color-focus-over, $ui-plain-glyph-color-focus-active: $ui-tab-plain-glyph-color-focus-active, $ui-plain-glyph-color-disabled: $ui-tab-plain-glyph-color-disabled, $ui-glyph-opacity: $ui-tab-glyph-opacity, $ui-glyph-opacity-disabled: $ui-tab-glyph-opacity-disabled, $ui-opacity: $ui-tab-opacity, $ui-opacity-focus: $ui-tab-opacity-focus, $ui-opacity-over: $ui-tab-opacity-over, $ui-opacity-active: $ui-tab-opacity-active, $ui-opacity-focus-over: $ui-tab-opacity-focus-over, $ui-opacity-focus-active: $ui-tab-opacity-focus-active, $ui-opacity-disabled: $ui-tab-opacity-disabled, $ui-background-opacity: $ui-tab-background-opacity, $ui-background-opacity-focus: $ui-tab-background-opacity-focus, $ui-background-opacity-over: $ui-tab-background-opacity-over, $ui-background-opacity-active: $ui-tab-background-opacity-active, $ui-background-opacity-focus-over: $ui-tab-background-opacity-focus-over, $ui-background-opacity-focus-active: $ui-tab-background-opacity-focus-active, $ui-background-opacity-disabled: $ui-tab-background-opacity-disabled, $ui-text-opacity-disabled: $ui-tab-text-opacity-disabled, $ui-icon-opacity-disabled: $ui-tab-icon-opacity-disabled, $ui-closable-icon-width: $ui-tab-closable-icon-width, $ui-closable-icon-height: $ui-tab-closable-icon-height, $ui-closable-icon-top: $ui-tab-closable-icon-top, $ui-closable-icon-right: $ui-tab-closable-icon-right, $ui-closable-icon-spacing: $ui-tab-closable-icon-spacing, $ui-closable-icon-glyph-color: $ui-tab-closable-icon-glyph-color, $ui-closable-icon-glyph-color-focus: $ui-tab-closable-icon-glyph-color-focus, $ui-closable-icon-glyph-color-over: $ui-tab-closable-icon-glyph-color-over, $ui-closable-icon-glyph-color-active: $ui-tab-closable-icon-glyph-color-active, $ui-closable-icon-glyph-color-focus-over: $ui-tab-closable-icon-glyph-color-focus-over, $ui-closable-icon-glyph-color-focus-active: $ui-tab-closable-icon-glyph-color-focus-active, $ui-closable-icon-glyph-color-disabled: $ui-tab-closable-icon-glyph-color-disabled, $ui-plain-closable-icon-glyph-color: $ui-tab-plain-closable-icon-glyph-color, $ui-plain-closable-icon-glyph-color-focus: $ui-tab-plain-closable-icon-glyph-color-focus, $ui-plain-closable-icon-glyph-color-over: $ui-tab-plain-closable-icon-glyph-color-over, $ui-plain-closable-icon-glyph-color-active: $ui-tab-plain-closable-icon-glyph-color-active, $ui-plain-closable-icon-glyph-color-focus-over: $ui-tab-plain-closable-icon-glyph-color-focus-over, $ui-plain-closable-icon-glyph-color-focus-active: $ui-tab-plain-closable-icon-glyph-color-focus-active, $ui-plain-closable-icon-glyph-color-disabled: $ui-tab-plain-closable-icon-glyph-color-disabled, $ui-closable-icon-glyph: $ui-tab-closable-icon-glyph ); } // When the tab border/background is the same color as the background color of the // tabbar (crisp) darker corners show up when the tab is rotated vertically in IE8. // Removing the background-image on the corners of the framing prevents this. @if $include-slicer-border-radius and ($ui-bar-background-color == $ui-tab-border-color) and ($ui-tab-border-color == $ui-tab-background-color) { .#{$prefix}tab-default-tl, .#{$prefix}tab-default-tc, .#{$prefix}tab-default-tr, .#{$prefix}tab-default-bl, .#{$prefix}tab-default-bc, .#{$prefix}tab-default-br { background-image: none; } } @if $include-tabbar-default-ui or $ui != 'default' { @include extjs-tab-bar-ui( $ui: $ui, $ui-strip-height: $ui-strip-height, $ui-strip-border-width: $ui-strip-border-width, $ui-strip-border-color: $ui-strip-border-color, $ui-strip-background-color: $ui-strip-background-color, $ui-border-width: $ui-bar-border-width, $ui-border-color: $ui-bar-border-color, $ui-padding: $ui-bar-padding, $ui-plain-padding: $ui-bar-plain-padding, $ui-background-color: $ui-bar-background-color, $ui-background-gradient: $ui-bar-background-gradient, $ui-scroller-width: $ui-bar-scroller-width, $ui-scroller-cursor: $ui-bar-scroller-cursor, $ui-scroller-cursor-disabled: $ui-bar-scroller-cursor-disabled, $ui-scroller-opacity: $ui-bar-scroller-opacity, $ui-scroller-opacity-over: $ui-bar-scroller-opacity-over, $ui-scroller-opacity-pressed: $ui-bar-scroller-opacity-pressed, $ui-scroller-opacity-disabled: $ui-bar-scroller-opacity-disabled, $ui-scroller-glyph-color: $ui-bar-scroller-glyph-color, $ui-plain-scroller-glyph-color: $ui-bar-plain-scroller-glyph-color, $ui-scroller-top-glyph: $ui-bar-scroller-top-glyph, $ui-scroller-right-glyph: $ui-bar-scroller-right-glyph, $ui-scroller-bottom-glyph: $ui-bar-scroller-bottom-glyph, $ui-scroller-left-glyph: $ui-bar-scroller-left-glyph, $ui-tab-height: if($ui-strip-height > 0, top($ui-strip-border-width), vertical($ui-tab-border-width)) + max($ui-tab-icon-height, $ui-tab-line-height) + vertical($ui-tab-padding) ); }}