/** * @class Ext.tab.Tab */ /** * @var {color} * Tab background-color */$tab-background-color: dynamic(mix(#fff, $base-highlight-color, 10%)); /** * @var {color} * Tab background-color when hovered */$tab-hovered-background-color: dynamic(mix(#fff, $base-highlight-color, 20%)); /** * @var {color} * Tab background-color when pressed */$tab-pressed-background-color: dynamic($tab-hovered-background-color); /** * @var {color} * Tab background-color when active */$tab-active-background-color: dynamic($base-light-color); /** * @var {color} * Tab background-color when focused */$tab-focused-background-color: dynamic(null); /** * @var {color} * Tab background-color when active and focused */$tab-active-focused-background-color: dynamic(null); /** * @var {color} * Tab background-color when disabled */$tab-disabled-background-color: dynamic(null); /** * @var {list} * Tab box-shadow */$tab-box-shadow: dynamic(null); /** * @var {list} * Tab box-shadow when hovered */$tab-hovered-box-shadow: dynamic(null); /** * @var {list} * Tab box-shadow when pressed */$tab-pressed-box-shadow: dynamic(null); /** * @var {list} * Tab box-shadow when active */$tab-active-box-shadow: dynamic(null); /** * @var {list} * Tab box-shadow when focused */$tab-focused-box-shadow: dynamic(null); /** * @var {list} * Tab box-shadow when active and focused */$tab-active-focused-box-shadow: dynamic(null); /** * @var {list} * Tab box-shadow when disabled */$tab-disabled-box-shadow: dynamic(null); /** * @var {string/list} * Tab background-gradient. Can be either the name of a gradient defined by * {@link Global_CSS#background-gradient} or a list of color stops. */$tab-background-gradient: dynamic(none); /** * @var {string/list} * Tab background-gradient when hovered. Can be either the name of a gradient * defined by {@link Global_CSS#background-gradient} or a list of color stops. */$tab-hovered-background-gradient: dynamic(none); /** * @var {string/list} * Tab background-gradient when pressed. Can be either the name of a gradient * defined by {@link Global_CSS#background-gradient} or a list of color stops. */$tab-pressed-background-gradient: dynamic(none); /** * @var {string/list} * Tab background-gradient when active. Can be either the name of a gradient * defined by {@link Global_CSS#background-gradient} or a list of color stops. */$tab-active-background-gradient: dynamic(none); /** * @var {string/list} * Tab background-gradient when focused. Can be either the name of a gradient * defined by {@link Global_CSS#background-gradient} or a list of color stops. */$tab-focused-background-gradient: dynamic(none); /** * @var {string/list} * Tab background-gradient when active and focused. Can be either the name of a gradient * defined by {@link Global_CSS#background-gradient} or a list of color stops. */$tab-active-focused-background-gradient: dynamic(none); /** * @var {string/list} * Tab background-gradient when disabled. Can be either the name of a gradient * defined by {@link Global_CSS#background-gradient} or a list of color stops. */$tab-disabled-background-gradient: dynamic(none); /** * @var {color} * Tab text color */$tab-color: dynamic($light-color); /** * @var {color} * Tab text color when hovered */$tab-hovered-color: dynamic($tab-color); /** * @var {color} * Tab text color when pressed */$tab-pressed-color: dynamic($tab-color); /** * @var {color} * Tab text color when active */$tab-active-color: dynamic($base-color); /** * @var {color} * Tab text color when focused */$tab-focused-color: dynamic($tab-color); /** * @var {color} * Tab text color when active and focused */$tab-active-focused-color: dynamic($tab-active-color); /** * @var {color} * Tab color when disabled */$tab-disabled-color: dynamic($tab-color); /** * @var {color/list} * Tab border-color */$tab-border-color: dynamic(null); /** * @var {color/list} * Tab border-color when hovered */$tab-hovered-border-color: dynamic(null); /** * @var {color/list} * Tab border-color when pressed */$tab-pressed-border-color: dynamic(null); /** * @var {color/list} * Tab border-color when active */$tab-active-border-color: dynamic(null); /** * @var {color/list} * Tab border-color when focused */$tab-focused-border-color: dynamic(null); /** * @var {color/list} * Tab border-color when active and focused */$tab-active-focused-border-color: dynamic(null); /** * @var {color/list} * Tab border-color when disabled */$tab-disabled-border-color: dynamic(null); /** * @var {color} * Tab focus outline color */$tab-focused-outline-color: dynamic(mix($tab-background-color, $tab-color, 20%)); /** * @var {color} * Tab focus outline color when active */$tab-active-focused-outline-color: dynamic(mix($tab-active-background-color, $tab-active-color, 20%)); /** * @var {string} * Tab focus outline style */$tab-focused-outline-style: dynamic(solid); /** * @var {number} * Tab focus outline width */$tab-focused-outline-width: dynamic(1px); /** * @var {number} * Tab focus outline offset */$tab-focused-outline-offset: dynamic(-2px); /** * @var {number/list} * Tab border-width */$tab-border-width: dynamic(0); /** * @var {string/list} * Tab border-style */$tab-border-style: dynamic(null); /** * @var {number} * Tab border-radius */$tab-border-radius: dynamic(3px 3px 0 0); /** * @var {number} * Tab border-radius in the {@link Global_CSS#$enable-big big} sizing scheme */$tab-border-radius-big: dynamic($tab-border-radius); /** * @var {string/number} * Tab font-weight */$tab-font-weight: dynamic($font-weight-bold); /** * @var {number} * Tab font-size */$tab-font-size: dynamic($font-size); /** * @var {number} * Tab font-size in the {@link Global_CSS#$enable-big big} sizing scheme */$tab-font-size-big: dynamic($font-size-big); /** * @var {number} * Tab font-size when {@link #iconAlign} is `'top'` or `'bottom'` */$tab-stacked-font-size: dynamic(null); /** * @var {number} * Tab font-size in the {@link Global_CSS#$enable-big big} sizing scheme when {@link #iconAlign} is `'top'` or `'bottom'` */$tab-stacked-font-size-big: dynamic(null); /** * @var {number} * Tab line-height */$tab-line-height: dynamic(16px); /** * @var {number} * Tab line-height in the {@link Global_CSS#$enable-big big} sizing scheme */$tab-line-height-big: dynamic(20px); /** * @var {string} * Tab font-family */$tab-font-family: dynamic($font-family); /** * @var {string} * Tab text-transform */$tab-text-transform: dynamic(null); /** * @var {string} * Tab text-transform in the {@link Global_CSS#$enable-big big} sizing scheme */$tab-text-transform-big: dynamic(null); /** * @var {number/list} * Tab padding */$tab-padding: dynamic(8px 12px 7px); /** * @var {number/list} * Tab padding in the {@link Global_CSS#$enable-big big} sizing scheme */$tab-padding-big: dynamic(10px 10px 9px); /** * @var {number/list} * Tab padding when an icon is present without text */$tab-icon-only-padding: dynamic($tab-padding); /** * @var {number/list} * Tab padding when an icon is present without text in the {@link Global_CSS#$enable-big big} sizing scheme */$tab-icon-only-padding-big: dynamic($tab-padding-big); /** * @var {color} * Tab icon color. */$tab-icon-color: dynamic($tab-color); /** * @var {color} * Tab icon color when hovered. */$tab-hovered-icon-color: dynamic($tab-hovered-color); /** * @var {color} * Tab icon color when pressed. */$tab-pressed-icon-color: dynamic($tab-pressed-color); /** * @var {color} * Tab icon color when active */$tab-active-icon-color: dynamic($tab-active-color); /** * @var {color} * Tab icon color when focused */$tab-focused-icon-color: dynamic($tab-focused-color); /** * @var {color} * Tab icon color when active and focused */$tab-active-focused-icon-color: dynamic($tab-active-icon-color); /** * @var {color} * Tab icon color when disabled */$tab-disabled-icon-color: dynamic($tab-disabled-color); /** * @var {number} * Tab icon size */$tab-icon-size: dynamic($tab-line-height); /** * @var {number} * Tab icon size in the {@link Global_CSS#$enable-big big} sizing scheme */$tab-icon-size-big: dynamic($tab-line-height-big); /** * @var {number} * Tab icon font-size */$tab-icon-font-size: dynamic(null); /** * @var {number} * Tab icon font-size in the {@link Global_CSS#$enable-big big} sizing scheme */$tab-icon-font-size-big: dynamic(null); /** * @var {number} * The space between the tab icon and text when the icon is horizontally aligned */$tab-icon-horizontal-spacing: dynamic(5px); /** * @var {number} * The space between the tab icon and text when the icon is horizontally aligned * in the {@link Global_CSS#$enable-big big} sizing scheme */$tab-icon-horizontal-spacing-big: dynamic(8px); /** * @var {number} * The space between the tab icon and text when the icon is vertically aligned */$tab-icon-vertical-spacing: dynamic(2px); /** * @var {number} * The space between the tab icon and text when the icon is vertically aligned * in the {@link Global_CSS#$enable-big big} sizing scheme */$tab-icon-vertical-spacing-big: dynamic(3px); /** * @var {number} * Tab opacity when disabled */$tab-disabled-opacity: dynamic(.5); /** * @var {string} * Tab arrow icon */$tab-arrow-icon: dynamic(null); /** * @var {color} * Tab arrow icon color */$tab-arrow-icon-color: dynamic($tab-color); /** * @var {color} * Tab arrow icon color when hovered */$tab-hovered-arrow-icon-color: dynamic($tab-hovered-icon-color); /** * @var {color} * Tab arrow icon color when pressed */$tab-pressed-arrow-icon-color: dynamic($tab-pressed-icon-color); /** * @var {color} * Tab arrow icon color when active */$tab-active-arrow-icon-color: dynamic($tab-active-icon-color); /** * @var {color} * Tab arrow icon color when focused */$tab-focused-arrow-icon-color: dynamic($tab-focused-icon-color); /** * @var {color} * Tab arrow icon color when active and focused */$tab-active-focused-arrow-icon-color: dynamic($tab-active-arrow-icon-color); /** * @var {color} * Tab arrow icon color when disabled */$tab-disabled-arrow-icon-color: dynamic($tab-disabled-icon-color); /** * @var {number} * Tab arrow icon size */$tab-arrow-icon-size: dynamic($tab-line-height); /** * @var {number} * Tab arrow icon size in the {@link Global_CSS#$enable-big big} sizing scheme */$tab-arrow-icon-size-big: dynamic($tab-line-height-big); /** * @var {number} * Tab arrow icon font-size */$tab-arrow-icon-font-size: dynamic(null); /** * @var {number} * Tab arrow icon font-size in the {@link Global_CSS#$enable-big big} sizing scheme */$tab-arrow-icon-font-size-big: dynamic(null); /** * @var {number} * The space between the tab arrow and text when {@link #arrowAlign} is `'right'` */$tab-arrow-horizontal-spacing: dynamic(5px); /** * @var {number} * The space between the tab arrow and text when {@link #arrowAlign} is `'right'` * in the {@link Global_CSS#$enable-big big} sizing scheme */$tab-arrow-horizontal-spacing-big: dynamic(8px); /** * @var {number} * The space between the tab arrow and text when {@link #arrowAlign} is `'bottom'` */$tab-arrow-vertical-spacing: dynamic(null); /** * @var {number} * The space between the tab arrow and text when {@link #arrowAlign} is `'bottom'` * in the {@link Global_CSS#$enable-big big} sizing scheme */$tab-arrow-vertical-spacing-big: dynamic(null); /** * @var {color} * The background-color of the tab's {@link #badgeText badge} */$tab-badge-background-color: dynamic(darken($alert-color, 10%)); /** * @var {string/list} * The background-gradient of the tab's {@link #badgeText badge} Can be either the name * of a gradient defined by {@link Global_CSS#background-gradient} or a list of color stops. */$tab-badge-background-gradient: dynamic($base-background-gradient); /** * @var {color} * The text color of the tab's {@link #badgeText badge} */$tab-badge-color: dynamic(color-by-background($tab-badge-background-color)); /** * @var {color} * The border-color of the tab's {@link #badgeText badge} */$tab-badge-border-color: dynamic(darken($tab-badge-background-color, 10%)); /** * @var {number/list} * The border-radius of the tab's {@link #badgeText badge} */$tab-badge-border-radius: dynamic(3px); /** * @var {number} * The min-width of the tab's {@link #badgeText badge} */$tab-badge-min-width: dynamic($button-badge-min-width); /** * @var {number} * The max-width of the tab's {@link #badgeText badge} */$tab-badge-max-width: dynamic(95%); /** * @var {string/number} * The font-weight of the tab's {@link #badgeText badge} */$tab-badge-font-weight: dynamic(null); /** * @var {number} * The font-size of the tab's {@link #badgeText badge} */$tab-badge-font-size: dynamic($button-badge-font-size); /** * @var {number} * The font-size of the tab's {@link #badgeText badge} in the {@link Global_CSS#$enable-big big} sizing scheme */$tab-badge-font-size-big: dynamic($button-badge-font-size-big); /** * @var {string} * The font-family of the tab's {@link #badgeText badge} */$tab-badge-font-family: dynamic($tab-font-family); /** * @var {number} * The line-height of the tab's {@link #badgeText badge} */$tab-badge-line-height: dynamic($button-badge-line-height); /** * @var {number} * The line-height of the tab's {@link #badgeText badge} in the {@link Global_CSS#$enable-big big} sizing scheme */$tab-badge-line-height-big: dynamic($button-badge-line-height-big); /** * @var {number} * Offset of the {@link #badgeText badge} from the top of the tab */$tab-badge-top: dynamic(0); /** * @var {number} * Offset of the {@link #badgeText badge} from the right of the tab */$tab-badge-right: dynamic(0); /** * @var {number} * Offset of the {@link #badgeText badge} from the bottom of the tab */$tab-badge-bottom: dynamic(null); /** * @var {number} * Offset of the {@link #badgeText badge} from the left of the tab */$tab-badge-left: dynamic(null); /** * @var {number} * The padding of the tab's {@link #badgeText badge} */$tab-badge-padding: dynamic(1px 4px); /** * @var {number} * The padding of the tab's {@link #badgeText badge} in the {@link Global_CSS#$enable-big big} sizing scheme */$tab-badge-padding-big: dynamic($tab-badge-padding); /** * @var {color} * The background-color of the tab's "active indicator" */$tab-active-indicator-background-color: dynamic(null); /** * @var {number} * The height of the tab's "active indicator" */$tab-active-indicator-height: dynamic(null); /** * @var {string} * Tab close icon */$tab-close-icon: dynamic($fa-var-close); /** * @var {color} * Tab close icon color */$tab-close-icon-color: dynamic(null); /** * @var {color} * Tab close icon color when the close icon is hovered */$tab-close-icon-hovered-color: dynamic(null); /** * @var {color} * Tab close icon color when the close icon is pressed */$tab-close-icon-pressed-color: dynamic(null); /** * @var {color} * Tab close icon color when the tab is active */$tab-active-close-icon-color: dynamic(null); /** * @var {color} * Tab close icon color when the tab is active and the close icon is hovered */$tab-active-close-icon-hovered-color: dynamic(null); /** * @var {color} * Tab close icon color when the tab is active and the close icon is pressed */$tab-active-close-icon-pressed-color: dynamic(null); /** * @var {color} * Tab close icon background-color */$tab-close-icon-background-color: dynamic(null); /** * @var {color} * Tab close icon background-color when the close icon is hovered */$tab-close-icon-hovered-background-color: dynamic(rgba(0, 0, 0, 0.1)); /** * @var {color} * Tab close icon background-color when the close icon is pressed */$tab-close-icon-pressed-background-color: dynamic(rgba(0, 0, 0, 0.2)); /** * @var {color} * Tab close icon background-color when the tab is active */$tab-active-close-icon-background-color: dynamic(null); /** * @var {color} * Tab close icon background-color when the tab is active and the close icon is hovered */$tab-active-close-icon-hovered-background-color: dynamic(null); /** * @var {color} * Tab close icon background-color when the tab is active and the close icon is pressed */$tab-active-close-icon-pressed-background-color: dynamic(null); /** * @var {number/list} * Tab close icon border-radius */$tab-close-icon-border-radius: dynamic(3px); /** * @var {number/list} * Tab close icon border-radius in the {@link Global_CSS#$enable-big big} sizing scheme */$tab-close-icon-border-radius-big: dynamic(null); /** * @var {number} * Tab close icon size */$tab-close-icon-size: dynamic(12px); /** * @var {number} * Tab close icon size in the {@link Global_CSS#$enable-big big} sizing scheme */$tab-close-icon-size-big: dynamic(18px); /** * @var {number} * Tab close icon font-size */$tab-close-icon-font-size: dynamic(null); /** * @var {number} * Tab close icon font-size in the {@link Global_CSS#$enable-big big} sizing scheme */$tab-close-icon-font-size-big: dynamic(null); /** * @var {number/list} * Tab close icon margin. * Used to position the close icon relative to the top right corner of the tab. */$tab-close-icon-margin: dynamic(3px); /** * @var {number/list} * Tab close icon margin in the {@link Global_CSS#$enable-big big} sizing scheme. * Used to position the close icon relative to the top right corner of the tab. */$tab-close-icon-margin-big: dynamic(null); /** * @var {number} * Additional spacing to add to the side of the tab that contains the close icon when closable */$tab-close-icon-spacing: dynamic(10px); /** * @var {number} * Additional spacing to add to the side of the tab that contains the close icon when closable * in the {@link Global_CSS#$enable-big big} sizing scheme */$tab-close-icon-spacing-big: dynamic(20px); /** * Creates a visual theme for a Tab. * * @param {string} $ui * The name of the UI being created. Can not included spaces or special punctuation * (used in CSS class names). * * @param {String} [$xtype=tab] (protected) The {@link Ext.Class#xtype} to use * in CSS selectors. For use by UI mixins of derived classes. * * @param {color} $background-color * Tab background-color * * @param {color} $hovered-background-color * Tab background-color when hovered * * @param {color} $pressed-background-color * Tab background-color when pressed * * @param {color} $active-background-color * Tab background-color when active * * @param {color} $focused-background-color * Tab background-color when focused * * @param {color} $active-focused-background-color * Tab background-color when active and focused * * @param {color} $disabled-background-color * Tab background-color when disabled * * @param {list} $box-shadow * Tab box-shadow * * @param {list} $hovered-box-shadow * Tab box-shadow when hovered * * @param {list} $pressed-box-shadow * Tab box-shadow when pressed * * @param {list} $active-box-shadow * Tab box-shadow when active * * @param {list} $focused-box-shadow * Tab box-shadow when focused * * @param {list} $active-focused-box-shadow * Tab box-shadow when active and focused * * @param {list} $disabled-box-shadow * Tab box-shadow when disabled * * @param {string/list} $background-gradient * Tab background-gradient. Can be either the name of a gradient defined by * {@link Global_CSS#background-gradient} or a list of color stops. * * @param {string/list} $hovered-background-gradient * Tab background-gradient when hovered. Can be either the name of a gradient * defined by {@link Global_CSS#background-gradient} or a list of color stops. * * @param {string/list} $pressed-background-gradient * Tab background-gradient when pressed. Can be either the name of a gradient * defined by {@link Global_CSS#background-gradient} or a list of color stops. * * @param {string/list} $active-background-gradient * Tab background-gradient when active. Can be either the name of a gradient * defined by {@link Global_CSS#background-gradient} or a list of color stops. * * @param {string/list} $focused-background-gradient * Tab background-gradient when focused. Can be either the name of a gradient * defined by {@link Global_CSS#background-gradient} or a list of color stops. * * @param {string/list} $active-focused-background-gradient * Tab background-gradient when active and focused. Can be either the name of a gradient * defined by {@link Global_CSS#background-gradient} or a list of color stops. * * @param {string/list} $disabled-background-gradient * Tab background-gradient when disabled. Can be either the name of a gradient * defined by {@link Global_CSS#background-gradient} or a list of color stops. * * @param {color} $color * Tab text color * * @param {color} $hovered-color * Tab text color when hovered * * @param {color} $pressed-color * Tab text color when pressed * * @param {color} $active-color * Tab text color when active * * @param {color} $focused-color * Tab text color when focused * * @param {color} $active-focused-color * Tab text color when active and focused * * @param {color} $disabled-color * Tab color when disabled * * @param {color/list} $border-color * Tab border-color * * @param {color/list} $hovered-border-color * Tab border-color when hovered * * @param {color/list} $pressed-border-color * Tab border-color when pressed * * @param {color/list} $active-border-color * Tab border-color when active * * @param {color/list} $focused-border-color * Tab border-color when focused * * @param {color/list} $active-focused-border-color * Tab border-color when active and focused * * @param {color/list} $disabled-border-color * Tab border-color when disabled * * @param {color} $focused-outline-color * Tab focus outline color * * @param {color} $active-focused-outline-color * Tab focus outline color when active * * @param {string} $focused-outline-style * Tab focus outline style * * @param {number} $focused-outline-width * Tab focus outline width * * @param {number} $focused-outline-offset * Tab focus outline offset * * @param {number/list} $border-width * Tab border-width * * @param {string/list} $border-style * Tab border-style * * @param {number} $border-radius * Tab border-radius * * @param {number} $border-radius-big * Tab border-radius in the {@link Global_CSS#$enable-big big} sizing scheme * * @param {string/number} $font-weight * Tab font-weight * * @param {number} $font-size * Tab font-size * * @param {number} $font-size-big * Tab font-size in the {@link Global_CSS#$enable-big big} sizing scheme * * @param {number} $stacked-font-size * Tab font-size when {@link #iconAlign} is `'top'` or `'bottom'` * * @param {number} $stacked-font-size-big * Tab font-size in the {@link Global_CSS#$enable-big big} sizing scheme when {@link #iconAlign} is `'top'` or `'bottom'` * * @param {number} $line-height * Tab line-height * * @param {number} $line-height-big * Tab line-height in the {@link Global_CSS#$enable-big big} sizing scheme * * @param {string} $font-family * Tab font-family * * @param {string} $text-transform * Tab text-transform * * @param {string} $text-transform-big * Tab text-transform in the {@link Global_CSS#$enable-big big} sizing scheme * * @param {number/list} $padding * Tab padding * * @param {number/list} $padding-big * Tab padding in the {@link Global_CSS#$enable-big big} sizing scheme * * @param {number/list} $icon-only-padding * Tab padding when an icon is present without text * * @param {number/list} $icon-only-padding-big * Tab padding when an icon is present without text in the {@link Global_CSS#$enable-big big} sizing scheme * * @param {color} $icon-color * Tab icon color. * * @param {color} $hovered-icon-color * Tab icon color when hovered. * * @param {color} $pressed-icon-color * Tab icon color when pressed. * * @param {color} $active-icon-color * Tab icon color when active * * @param {color} $focused-icon-color * Tab icon color when focused * * @param {color} $active-focused-icon-color * Tab icon color when active and focused * * @param {color} $disabled-icon-color * Tab icon color when disabled * * @param {number} $icon-size * Tab icon size * * @param {number} $icon-size-big * Tab icon size in the {@link Global_CSS#$enable-big big} sizing scheme * * @param {number} $icon-font-size * Tab icon font-size * * @param {number} $icon-font-size-big * Tab icon font-size in the {@link Global_CSS#$enable-big big} sizing scheme * * @param {number} $icon-horizontal-spacing * The space between the tab icon and text when the icon is horizontally aligned * * @param {number} $icon-horizontal-spacing-big * The space between the tab icon and text when the icon is horizontally aligned * in the {@link Global_CSS#$enable-big big} sizing scheme * * @param {number} $icon-vertical-spacing * The space between the tab icon and text when the icon is vertically aligned * * @param {number} $icon-vertical-spacing-big * The space between the tab icon and text when the icon is vertically aligned * in the {@link Global_CSS#$enable-big big} sizing scheme * * @param {number} $disabled-opacity * Tab opacity when disabled * * @param {string} $arrow-icon * Tab arrow icon * * @param {color} $arrow-icon-color * Tab arrow icon color * * @param {color} $hovered-arrow-icon-color * Tab arrow icon color when hovered * * @param {color} $pressed-arrow-icon-color * Tab arrow icon color when pressed * * @param {color} $active-arrow-icon-color * Tab arrow icon color when active * * @param {color} $focused-arrow-icon-color * Tab arrow icon color when focused * * @param {color} $active-focused-arrow-icon-color * Tab arrow icon color when active and focused * * @param {color} $disabled-arrow-icon-color * Tab arrow icon color when disabled * * @param {number} $arrow-icon-size * Tab arrow icon size * * @param {number} $arrow-icon-size-big * Tab arrow icon size in the {@link Global_CSS#$enable-big big} sizing scheme * * @param {number} $arrow-icon-font-size * Tab arrow icon font-size * * @param {number} $arrow-icon-font-size-big * Tab arrow icon font-size in the {@link Global_CSS#$enable-big big} sizing scheme * * @param {number} $arrow-horizontal-spacing * The space between the tab arrow and text when {@link #arrowAlign} is `'right'` * * @param {number} $arrow-horizontal-spacing-big * The space between the tab arrow and text when {@link #arrowAlign} is `'right'` * in the {@link Global_CSS#$enable-big big} sizing scheme * * @param {number} $arrow-vertical-spacing * The space between the tab arrow and text when {@link #arrowAlign} is `'bottom'` * * @param {number} $arrow-vertical-spacing-big * The space between the tab arrow and text when {@link #arrowAlign} is `'bottom'` * in the {@link Global_CSS#$enable-big big} sizing scheme * * @param {color} $badge-background-color * The background-color of the tab's {@link #badgeText badge} * * @param {string/list} $badge-background-gradient * The background-gradient of the tab's {@link #badgeText badge} Can be either the name * of a gradient defined by {@link Global_CSS#background-gradient} or a list of color stops. * * @param {color} $badge-color * The text color of the tab's {@link #badgeText badge} * * @param {color} $badge-border-color * The border-color of the tab's {@link #badgeText badge} * * @param {number/list} $badge-border-radius * The border-radius of the tab's {@link #badgeText badge} * * @param {number} $badge-min-width * The min-width of the tab's {@link #badgeText badge} * * @param {number} $badge-max-width * The max-width of the tab's {@link #badgeText badge} * * @param {string/number} $badge-font-weight * The font-weight of the tab's {@link #badgeText badge} * * @param {number} $badge-font-size * The font-size of the tab's {@link #badgeText badge} * * @param {number} $badge-font-size-big * The font-size of the tab's {@link #badgeText badge} in the {@link Global_CSS#$enable-big big} sizing scheme * * @param {string} $badge-font-family * The font-family of the tab's {@link #badgeText badge} * * @param {number} $badge-line-height * The line-height of the tab's {@link #badgeText badge} * * @param {number} $badge-line-height-big * The line-height of the tab's {@link #badgeText badge} in the {@link Global_CSS#$enable-big big} sizing scheme * * @param {number} $badge-top * Offset of the {@link #badgeText badge} from the top of the tab * * @param {number} $badge-right * Offset of the {@link #badgeText badge} from the right of the tab * * @param {number} $badge-bottom * Offset of the {@link #badgeText badge} from the bottom of the tab * * @param {number} $badge-left * Offset of the {@link #badgeText badge} from the left of the tab * * @param {number} $badge-padding * The padding of the tab's {@link #badgeText badge} * * @param {number} $badge-padding-big * The padding of the tab's {@link #badgeText badge} in the {@link Global_CSS#$enable-big big} sizing scheme * * @param {color} $active-indicator-background-color * The background-color of the tab's "active indicator" * * @param {number} $active-indicator-height * The height of the tab's "active indicator" * * @param {string} $close-icon * Tab close icon * * @param {color} $close-icon-color * Tab close icon color * * @param {color} $close-icon-hovered-color * Tab close icon color when the close icon is hovered * * @param {color} $close-icon-pressed-color * Tab close icon color when the close icon is pressed * * @param {color} $active-close-icon-color * Tab close icon color when the tab is active * * @param {color} $active-close-icon-hovered-color * Tab close icon color when the tab is active and the close icon is hovered * * @param {color} $active-close-icon-pressed-color * Tab close icon color when the tab is active and the close icon is pressed * * @param {color} $close-icon-background-color * Tab close icon background-color * * @param {color} $close-icon-hovered-background-color * Tab close icon background-color when the close icon is hovered * * @param {color} $close-icon-pressed-background-color * Tab close icon background-color when the close icon is pressed * * @param {color} $active-close-icon-background-color * Tab close icon background-color when the tab is active * * @param {color} $active-close-icon-hovered-background-color * Tab close icon background-color when the tab is active and the close icon is hovered * * @param {color} $active-close-icon-pressed-background-color * Tab close icon background-color when the tab is active and the close icon is pressed * * @param {number/list} $close-icon-border-radius * Tab close icon border-radius * * @param {number/list} $close-icon-border-radius-big * Tab close icon border-radius in the {@link Global_CSS#$enable-big big} sizing scheme * * @param {number} $close-icon-size * Tab close icon size * * @param {number} $close-icon-size-big * Tab close icon size in the {@link Global_CSS#$enable-big big} sizing scheme * * @param {number} $close-icon-font-size * Tab close icon font-size * * @param {number} $close-icon-font-size-big * Tab close icon font-size in the {@link Global_CSS#$enable-big big} sizing scheme * * @param {number/list} $close-icon-margin * Tab close icon margin. * Used to position the close icon relative to the top right corner of the tab. * * @param {number/list} $close-icon-margin-big * Tab close icon margin in the {@link Global_CSS#$enable-big big} sizing scheme. * Used to position the close icon relative to the top right corner of the tab. * * @param {number} $close-icon-spacing * Additional spacing to add to the side of the tab that contains the close icon when closable * * @param {number} $close-icon-spacing-big * Additional spacing to add to the side of the tab that contains the close icon when closable * in the {@link Global_CSS#$enable-big big} sizing scheme */@mixin tab-ui( $ui: null, $xtype: tab, $background-color: null, $hovered-background-color: null, $pressed-background-color: null, $active-background-color: null, $focused-background-color: null, $active-focused-background-color: null, $disabled-background-color: null, $box-shadow: null, $hovered-box-shadow: null, $pressed-box-shadow: null, $active-box-shadow: null, $focused-box-shadow: null, $active-focused-box-shadow: null, $disabled-box-shadow: null, $background-gradient: null, $hovered-background-gradient: null, $pressed-background-gradient: null, $active-background-gradient: null, $focused-background-gradient: null, $active-focused-background-gradient: null, $disabled-background-gradient: null, $color: null, $hovered-color: null, $pressed-color: null, $active-color: null, $focused-color: null, $active-focused-color: null, $disabled-color: null, $border-color: null, $hovered-border-color: null, $pressed-border-color: null, $active-border-color: null, $focused-border-color: null, $active-focused-border-color: null, $disabled-border-color: null, $focused-outline-color: null, $active-focused-outline-color: null, $focused-outline-style: null, $focused-outline-width: null, $focused-outline-offset: null, $border-width: null, $border-style: null, $border-radius: null, $border-radius-big: null, $font-weight: null, $font-size: null, $font-size-big: null, $stacked-font-size: null, $stacked-font-size-big: null, $line-height: null, $line-height-big: null, $font-family: null, $text-transform: null, $text-transform-big: null, $padding: null, $padding-big: null, $icon-only-padding: null, $icon-only-padding-big: null, $icon-color: null, $hovered-icon-color: null, $pressed-icon-color: null, $active-icon-color: null, $focused-icon-color: null, $active-focused-icon-color: null, $disabled-icon-color: null, $icon-size: null, $icon-size-big: null, $icon-font-size: null, $icon-font-size-big: null, $icon-horizontal-spacing: null, $icon-horizontal-spacing-big: null, $icon-vertical-spacing: null, $icon-vertical-spacing-big: null, $disabled-opacity: null, $arrow-icon: null, $arrow-icon-color: null, $hovered-arrow-icon-color: null, $pressed-arrow-icon-color: null, $active-arrow-icon-color: null, $focused-arrow-icon-color: null, $active-focused-arrow-icon-color: null, $disabled-arrow-icon-color: null, $arrow-icon-size: null, $arrow-icon-size-big: null, $arrow-icon-font-size: null, $arrow-icon-font-size-big: null, $arrow-horizontal-spacing: null, $arrow-horizontal-spacing-big: null, $arrow-vertical-spacing: null, $arrow-vertical-spacing-big: null, $badge-background-color: null, $badge-background-gradient: null, $badge-color: null, $badge-border-color: null, $badge-border-radius: null, $badge-min-width: null, $badge-max-width: null, $badge-font-weight: null, $badge-font-size: null, $badge-font-size-big: null, $badge-font-family: null, $badge-line-height: null, $badge-line-height-big: null, $badge-top: null, $badge-right: null, $badge-bottom: null, $badge-left: null, $badge-padding: null, $badge-padding-big: null, $active-indicator-background-color: null, $active-indicator-height: null, $close-icon: null, $close-icon-color: null, $close-icon-hovered-color: null, $close-icon-pressed-color: null, $active-close-icon-color: null, $active-close-icon-hovered-color: null, $active-close-icon-pressed-color: null, $close-icon-background-color: null, $close-icon-hovered-background-color: null, $close-icon-pressed-background-color: null, $active-close-icon-background-color: null, $active-close-icon-hovered-background-color: null, $active-close-icon-pressed-background-color: null, $close-icon-border-radius: null, $close-icon-border-radius-big: null, $close-icon-size: null, $close-icon-size-big: null, $close-icon-font-size: null, $close-icon-font-size-big: null, $close-icon-margin: null, $close-icon-margin-big: null, $close-icon-spacing: null, $close-icon-spacing-big: null) { $ui-suffix: ui-suffix($ui); $arguments: map-merge(( derive-colors: false, derive-border-colors: false, derive-outline-colors: false, derive-background-colors: false, derive-background-gradients: false ), intersect-arguments(tab-ui, button-ui)); @include button-ui($arguments...); .#{$prefix}#{$xtype}#{$ui-suffix} { .#{$prefix}close-icon-el { background-color: $close-icon-background-color; border-radius: $close-icon-border-radius; margin: $close-icon-margin; @include icon( $icon: $close-icon, $color: $close-icon-color, $size: $close-icon-size, $size-big: $close-icon-size-big, $font-size: $close-icon-font-size, $font-size-big: $close-icon-font-size-big ); @if $enable-big { .#{$prefix}big & { border-radius: $close-icon-border-radius-big; margin: $close-icon-margin-big; } } &:hover { color: $close-icon-hovered-color; background-color: $close-icon-hovered-background-color; } &:active { color: $close-icon-pressed-color; background-color: $close-icon-pressed-background-color; } } &.#{$prefix}active { color: $active-color; box-shadow: $active-box-shadow; .#{$prefix}inner-el { border-color: $active-border-color; @include background-gradient($active-background-color, $active-background-gradient); } .#{$prefix}icon-el { color: $active-icon-color; } .#{$prefix}arrow-el { color: $active-arrow-icon-color; } .#{$prefix}active-indicator-el { background-color: $active-indicator-background-color; height: $active-indicator-height; } .#{$prefix}close-icon-el { color: $active-close-icon-color; background-color: $active-close-icon-background-color; &:hover { color: $active-close-icon-hovered-color; background-color: $active-close-icon-hovered-background-color; } &:active { color: $active-close-icon-pressed-color; background-color: $active-close-icon-pressed-background-color; } } } &.#{$prefix}active.#{$prefix}focused { color: $active-focused-color; box-shadow: $active-focused-box-shadow; .#{$prefix}inner-el { border-color: $active-focused-border-color; @include background-gradient($active-focused-background-color, $active-focused-background-gradient); } .#{$prefix}icon-el { color: $active-focused-icon-color; } .#{$prefix}arrow-el { color: $active-focused-arrow-icon-color; } &:after { .#{$prefix}keyboard-mode & { border-color: $active-focused-outline-color; } } } &.#{$prefix}icon-align-top, &.#{$prefix}icon-align-bottom { &.#{$prefix}has-icon { font-size: $stacked-font-size; @if $enable-big { .#{$prefix}big & { font-size: $tab-stacked-font-size-big; } } } } &.#{$prefix}closable .#{$prefix}body-el { margin-right: $close-icon-spacing; @if $enable-big { .#{$prefix}big & { margin-right: $close-icon-spacing-big; } } } }}