/** * 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 {color} [$ui-background-color=$tab-base-color] * The background-color of Tabs * * @param {color} [$ui-background-color-focus=$tab-base-color-focus] * The background-color of focused Tabs * * @param {color} [$ui-background-color-over=$tab-base-color-over] * The background-color of hovered Tabs * * @param {color} [$ui-background-color-active=$tab-base-color-active] * The background-color of the active Tab * * @param {color} [$ui-background-color-focus-over=$tab-base-color-focus-over] * The background-color of focused hovered Tabs * * @param {color} [$ui-background-color-focus-active=$tab-base-color-focus-active] * The background-color of the active Tab when focused * * @param {color} [$ui-background-color-disabled=$tab-base-color-disabled] * The background-color of disabled Tabs * * @param {color} [$ui-plain-background-color=$tab-plain-background-color] * The background-color of {@link Ext.tab.Bar#plain} Tabs * * @param {color} [$ui-plain-background-color-focus=$tab-plain-background-color-focus] * The background-color of focused {@link Ext.tab.Bar#plain} Tabs * * @param {color} [$ui-plain-background-color-over=$tab-plain-background-color-over] * The background-color of hovered {@link Ext.tab.Bar#plain} Tabs * * @param {color} [$ui-plain-background-color-active=$tab-plain-background-color-active] * The background-color of the active {@link Ext.tab.Bar#plain} Tabs * * @param {color} [$ui-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-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-plain-background-color-disabled=$tab-plain-background-color-disabled] * The background-color of disabled {@link Ext.tab.Bar#plain} Tabs * * @param {list} [$ui-border-radius=$tab-border-radius] * The border-radius of Tabs * * @param {number/list} [$ui-border-width=$tab-border-width] * The border-width of Tabs * * @param {number/list} [$ui-border-width-focus=$tab-border-width-focus] * The border-width of focused Tabs * * @param {number/list} [$ui-border-width-over=$tab-border-width-over] * The border-width of hovered Tabs * * @param {number/list} [$ui-border-width-active=$tab-border-width-active] * The border-width of active Tabs * * @param {number/list} [$ui-border-width-focus-over=$tab-border-width-focus-over] * The border-width of focused hovered Tabs * * @param {number/list} [$ui-border-width-focus-active=$tab-border-width-focus-active] * The border-width of active Tabs when focused * * @param {number/list} [$ui-border-width-disabled=$tab-border-width-disabled] * The border-width of disabled Tabs * * @param {number/list} [$ui-margin=$tab-margin] * The border-width of Tabs * * @param {number/list} [$ui-padding=$tab-padding] * The padding of Tabs * * @param {number/list} [$ui-text-padding=$tab-text-padding] * The padding of the Tab's text element * * @param {color} [$ui-border-color=$tab-border-color] * The border-color of Tabs * * @param {color} [$ui-border-color-focus=$tab-border-color-focus] * The border-color of focused Tabs * * @param {color} [$ui-border-color-over=$tab-border-color-over] * The border-color of hovered Tabs * * @param {color} [$ui-border-color-active=$tab-border-color-active] * The border-color of the active Tab * * @param {color} [$ui-border-color-focus-over=$tab-border-color-focus-over] * The border-color of focused hovered Tabs * * @param {color} [$ui-border-color-focus-active=$tab-border-color-focus-active] * The border-color of the active Tab when focused * * @param {color} [$ui-border-color-disabled=$tab-border-color-disabled] * The border-color of disabled Tabs * * @param {color} [$ui-plain-border-color=$tab-plain-border-color] * The border-color of {@link Ext.tab.Bar#plain} Tabs * * @param {color} [$ui-plain-border-color-focus=$tab-plain-border-color-focus] * The border-color of focused {@link Ext.tab.Bar#plain} Tabs * * @param {color} [$ui-plain-border-color-over=$tab-plain-border-color-over] * The border-color of hovered {@link Ext.tab.Bar#plain} Tabs * * @param {color} [$ui-plain-border-color-active=$tab-plain-border-color-active] * The border-color of the active {@link Ext.tab.Bar#plain} Tabs * * @param {color} [$ui-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-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-plain-border-color-disabled=$tab-plain-border-color-disabled] * The border-color of disabled {@link Ext.tab.Bar#plain} Tabs * * @param {string} [$ui-cursor=$tab-cursor] * The Tab cursor * * @param {string} [$ui-cursor-disabled=$tab-cursor-disabled] * The cursor of disabled Tabs * * @param {number} [$ui-font-size=$tab-font-size] * The font-size of Tabs * * @param {number} [$ui-font-size-focus=$tab-font-size-focus] * The font-size of focused Tabs * * @param {number} [$ui-font-size-over=$tab-font-size-over] * The font-size of hovered Tabs * * @param {number} [$ui-font-size-active=$tab-font-size-active] * The font-size of the active Tab * * @param {number} [$ui-font-size-focus-over=$tab-font-size-focus-over] * The font-size of focused hovered Tabs * * @param {number} [$ui-font-size-focus-active=$tab-font-size-focus-active] * The font-size of the active Tab when focused * * @param {number} [$ui-font-size-disabled=$tab-font-size-disabled] * The font-size of disabled Tabs * * @param {string} [$ui-font-weight=$tab-font-weight] * The font-weight of Tabs * * @param {string} [$ui-font-weight-focus=$tab-font-weight-focus] * The font-weight of focused Tabs * * @param {string} [$ui-font-weight-over=$tab-font-weight-over] * The font-weight of hovered Tabs * * @param {string} [$ui-font-weight-active=$tab-font-weight-active] * The font-weight of the active Tab * * @param {string} [$ui-font-weight-focus-over=$tab-font-weight-focus-over] * The font-weight of focused hovered Tabs * * @param {string} [$ui-font-weight-focus-active=$tab-font-weight-focus-active] * The font-weight of the active Tab when focused * * @param {string} [$ui-font-weight-disabled=$tab-font-weight-disabled] * The font-weight of disabled Tabs * * @param {string} [$ui-font-family=$tab-font-family] * The font-family of Tabs * * @param {string} [$ui-font-family-focus=$tab-font-family-focus] * The font-family of focused Tabs * * @param {string} [$ui-font-family-over=$tab-font-family-over] * The font-family of hovered Tabs * * @param {string} [$ui-font-family-active=$tab-font-family-active] * The font-family of the active Tab * * @param {string} [$ui-font-family-focus-over=$tab-font-family-focus-over] * The font-family of focused hovered Tabs * * @param {string} [$ui-font-family-focus-active=$tab-font-family-focus-active] * The font-family of the active Tab when focused * * @param {string} [$ui-font-family-disabled=$tab-font-family-disabled] * The font-family of disabled Tabs * * @param {number} [$ui-line-height=$tab-line-height] * The line-height of Tabs * * @param {color} [$ui-color=$tab-color] * The text color of Tabs * * @param {color} [$ui-color-focus=$tab-color-focus] * The text color of focused Tabs * * @param {color} [$ui-color-over=$tab-color-over] * The text color of hovered Tabs * * @param {color} [$ui-color-active=$tab-color-active] * The text color of the active Tab * * @param {color} [$ui-color-focus-over=$tab-color-focus-over] * The text color of focused hovered Tabs * * @param {color} [$ui-color-focus-active=$tab-color-focus-active] * The text color of the active Tab when focused * * @param {color} [$ui-color-disabled=$tab-color-disabled] * The text color of disabled Tabs * * @param {color} [$ui-plain-color=$tab-plain-color] * The text color of {@link Ext.tab.Bar#plain} Tabs * * @param {color} [$ui-plain-color-focus=$tab-plain-color-focus] * The text color of focused {@link Ext.tab.Bar#plain} Tabs * * @param {color} [$ui-plain-color-over=$tab-plain-color-over] * The text color of hovered {@link Ext.tab.Bar#plain} Tabs * * @param {color} [$ui-plain-color-active=$tab-plain-color-active] * The text color of the active {@link Ext.tab.Bar#plain} Tab * * @param {color} [$ui-plain-color-focus-over=$tab-plain-color-focus-over] * The text color of focused hovered {@link Ext.tab.Bar#plain} Tabs * * @param {color} [$ui-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-plain-color-disabled=$tab-plain-color-disabled] * The text color of disabled {@link Ext.tab.Bar#plain} Tabs * * @param {string/list} [$ui-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-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-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-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-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-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-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-inner-border-width=$tab-inner-border-width] * The inner border-width of Tabs * * @param {number} [$ui-inner-border-width-focus=$tab-inner-border-width-focus] * The inner border-width of focused Tabs * * @param {number} [$ui-inner-border-width-over=$tab-inner-border-width-over] * The inner border-width of hovered Tabs * * @param {number} [$ui-inner-border-width-active=$tab-inner-border-width-active] * The inner border-width of active Tabs * * @param {number} [$ui-inner-border-width-focus-over=$tab-inner-border-width-focus-over] * The inner border-width of focused hovered Tabs * * @param {number} [$ui-inner-border-width-focus-active=$tab-inner-border-width-focus-active] * The inner border-width of active Tabs when focused * * @param {number} [$ui-inner-border-width-disabled=$tab-inner-border-width-disabled] * The inner border-width of disabled Tabs * * @param {color} [$ui-inner-border-color=$tab-inner-border-color] * The inner border-color of Tabs * * @param {color} [$ui-inner-border-color-focus=$tab-inner-border-color-focus] * The inner border-color of focused Tabs * * @param {color} [$ui-inner-border-color-over=$tab-inner-border-color-over] * The inner border-color of hovered Tabs * * @param {color} [$ui-inner-border-color-active=$tab-inner-border-color-active] * The inner border-color of active Tabs * * @param {color} [$ui-inner-border-color-focus-over=$tab-inner-border-color-focus-over] * The inner border-color of focused hovered Tabs * * @param {color} [$ui-inner-border-color-focus-active=$tab-inner-border-color-focus-active] * The inner border-color of active Tabs when focused * * @param {color} [$ui-inner-border-color-disabled=$tab-inner-border-color-disabled] * The inner border-color of disabled Tabs * * @param {boolean} [$ui-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-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-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-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-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-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-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-outline-width-focus=$tab-outline-width-focus] * The outline width of focused Tabs * * @param {string} [$ui-outline-style-focus=$tab-outline-style-focus] * The outline-style of focused Tabs * * @param {color} [$ui-outline-color-focus=$tab-outline-color-focus] * The outline color of focused Tabs * * @param {number} [$ui-outline-offset-focus=$tab-outline-offset-focus] * The outline offset of focused Tabs * * @param {number} [$ui-body-outline-width-focus=$tab-body-outline-width-focus] * The body outline width of focused Tabs * * @param {string} [$ui-body-outline-style-focus=$tab-body-outline-style-focus] * The body outline-style of focused Tabs * * @param {color} [$ui-body-outline-color-focus=$tab-body-outline-color-focus] * The body outline color of focused Tabs * * @param {number} [$ui-icon-width=$tab-icon-width] * The width of the Tab close icon * * @param {number} [$ui-icon-height=$tab-icon-height] * The height of the Tab close icon * * @param {number} [$ui-icon-spacing=$tab-icon-spacing] * the space in between the text and the close button * * @param {list} [$ui-icon-background-position=$tab-icon-background-position] * The background-position of Tab icons * * @param {color} [$ui-glyph-color=$tab-glyph-color] * The color of Tab glyph icons * * @param {color} [$ui-glyph-color-focus=$tab-glyph-color-focus] * The color of a Tab glyph icon when the Tab is focused * * @param {color} [$ui-glyph-color-over=$tab-glyph-color-over] * The color of a Tab glyph icon when the Tab is hovered * * @param {color} [$ui-glyph-color-active=$tab-glyph-color-active] * The color of a Tab glyph icon when the Tab is active * * @param {color} [$ui-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-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-glyph-color-disabled=$tab-glyph-color-disabled] * The color of a Tab glyph icon when the Tab is disabled * * @param {color} [$ui-plain-glyph-color=$tab-plain-glyph-color] * The color of {@link Ext.tab.Bar#plain} Tab glyph icons * * @param {color} [$ui-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-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-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-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-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-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-glyph-opacity=$tab-glyph-opacity] * The opacity of a Tab glyph icon * * @param {number} [$ui-glyph-opacity-disabled=$tab-glyph-opacity-disabled] * The opacity of a Tab glyph icon when the Tab is disabled * * @param {number} [$ui-opacity=$tab-opacity] * Tab opacity * * @param {number} [$ui-opacity-focus=$tab-opacity-focus] * Tab opacity when focused * * @param {number} [$ui-opacity-over=$tab-opacity-over] * Tab opacity when hovered * * @param {number} [$ui-opacity-active=$tab-opacity-active] * Opacity of the active tab * * @param {number} [$ui-opacity-focus-over=$tab-opacity-focus-over] * Tab opacity when focused and hovered * * @param {number} [$ui-opacity-focus-active=$tab-opacity-focus-active] * Opacity of the active tab when focused * * @param {number} [$ui-opacity-disabled=$tab-opacity-disabled] * opacity to apply to the tab's main element when the tab is disabled * * @param {number} [$ui-background-opacity=$tab-background-opacity] * Tab background opacity * * @param {number} [$ui-background-opacity-focus=$tab-background-opacity-focus] * Tab background opacity when focused * * @param {number} [$ui-background-opacity-over=$tab-background-opacity-over] * Tab background opacity when hovered * * @param {number} [$ui-background-opacity-active=$tab-background-opacity-active] * background opacity of the active tab * * @param {number} [$ui-background-opacity-focus-over=$tab-background-opacity-focus-over] * Tab background opacity when focused and hovered * * @param {number} [$ui-background-opacity-focus-active=$tab-background-opacity-focus-active] * Background opacity of the active tab when focused * * @param {number} [$ui-background-opacity-disabled=$tab-background-opacity-disabled] * Tab background opacity when disabled * * @param {number} [$ui-text-opacity-disabled=$tab-text-opacity-disabled] * opacity to apply to the tab's text element when the tab is disabled * * @param {number} [$ui-icon-opacity-disabled=$tab-icon-opacity-disabled] * opacity to apply to the tab's icon element when the tab is disabled * * @param {number} [$ui-closable-icon-width=$tab-closable-icon-width] * The width of the Tab close icon * * @param {number} [$ui-closable-icon-height=$tab-closable-icon-height] * The height of the Tab close icon * * @param {number} [$ui-closable-icon-top=$tab-closable-icon-top] * The distance to offset the Tab close icon from the top of the tab * * @param {number} [$ui-closable-icon-right=$tab-closable-icon-right] * The distance to offset the Tab close icon from the right of the tab * * @param {number} [$ui-closable-icon-spacing=$tab-closable-icon-spacing] * The space in between the text and the close button * * @param {color} [$ui-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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.Tab */ @mixin extjs-tab-ui( $ui, $ui-background-color: null, $ui-background-color-focus: null, $ui-background-color-over: null, $ui-background-color-active: null, $ui-background-color-focus-over: null, $ui-background-color-focus-active: null, $ui-background-color-disabled: null, $ui-plain-background-color: null, $ui-plain-background-color-focus: null, $ui-plain-background-color-over: null, $ui-plain-background-color-active: null, $ui-plain-background-color-focus-over: null, $ui-plain-background-color-focus-active: null, $ui-plain-background-color-disabled: null, $ui-border-radius: $tab-border-radius, $ui-border-width: $tab-border-width, $ui-border-width-focus: $tab-border-width-focus, $ui-border-width-over: $tab-border-width-over, $ui-border-width-active: $tab-border-width-active, $ui-border-width-focus-over: $tab-border-width-focus-over, $ui-border-width-focus-active: $tab-border-width-focus-active, $ui-border-width-disabled: $tab-border-width-disabled, $ui-margin: $tab-margin, $ui-padding: $tab-padding, $ui-text-padding: $tab-text-padding, $ui-border-color: null, $ui-border-color-focus: null, $ui-border-color-over: null, $ui-border-color-active: null, $ui-border-color-focus-over: null, $ui-border-color-focus-active: null, $ui-border-color-disabled: null, $ui-plain-border-color: null, $ui-plain-border-color-focus: null, $ui-plain-border-color-over: null, $ui-plain-border-color-active: null, $ui-plain-border-color-focus-over: null, $ui-plain-border-color-focus-active: null, $ui-plain-border-color-disabled: null, $ui-cursor: $tab-cursor, $ui-cursor-disabled: $tab-cursor-disabled, $ui-font-size: null, $ui-font-size-focus: null, $ui-font-size-over: null, $ui-font-size-active: null, $ui-font-size-focus-over: null, $ui-font-size-focus-active: null, $ui-font-size-disabled: null, $ui-font-weight: null, $ui-font-weight-focus: null, $ui-font-weight-over: null, $ui-font-weight-active: null, $ui-font-weight-focus-over: null, $ui-font-weight-focus-active: null, $ui-font-weight-disabled: null, $ui-font-family: null, $ui-font-family-focus: null, $ui-font-family-over: null, $ui-font-family-active: null, $ui-font-family-focus-over: null, $ui-font-family-focus-active: null, $ui-font-family-disabled: null, $ui-line-height: $tab-line-height, $ui-color: null, $ui-color-focus: null, $ui-color-over: null, $ui-color-active: null, $ui-color-focus-over: null, $ui-color-focus-active: null, $ui-color-disabled: null, $ui-plain-color: null, $ui-plain-color-focus: null, $ui-plain-color-over: null, $ui-plain-color-active: null, $ui-plain-color-focus-over: null, $ui-plain-color-focus-active: null, $ui-plain-color-disabled: null, $ui-background-gradient: null, $ui-background-gradient-focus: null, $ui-background-gradient-over: null, $ui-background-gradient-active: null, $ui-background-gradient-focus-over: null, $ui-background-gradient-focus-active: null, $ui-background-gradient-disabled: null, $ui-inner-border-width: null, $ui-inner-border-width-focus: null, $ui-inner-border-width-over: null, $ui-inner-border-width-active: null, $ui-inner-border-width-focus-over: null, $ui-inner-border-width-focus-active: null, $ui-inner-border-width-disabled: null, $ui-inner-border-color: null, $ui-inner-border-color-focus: null, $ui-inner-border-color-over: null, $ui-inner-border-color-active: null, $ui-inner-border-color-focus-over: null, $ui-inner-border-color-focus-active: null, $ui-inner-border-color-disabled: null, $ui-inner-border-collapse: null, $ui-inner-border-collapse-focus: null, $ui-inner-border-collapse-over: null, $ui-inner-border-collapse-active: null, $ui-inner-border-collapse-focus-over: null, $ui-inner-border-collapse-focus-active: null, $ui-inner-border-collapse-disabled: null, $ui-outline-width-focus: $tab-outline-width-focus, $ui-outline-style-focus: $tab-outline-style-focus, $ui-outline-color-focus: $tab-outline-color-focus, $ui-outline-offset-focus: $tab-outline-offset-focus, $ui-body-outline-width-focus: $tab-body-outline-width-focus, $ui-body-outline-style-focus: $tab-body-outline-style-focus, $ui-body-outline-color-focus: $tab-body-outline-color-focus, $ui-icon-width: $tab-icon-width, $ui-icon-height: $tab-icon-height, $ui-icon-spacing: $tab-icon-spacing, $ui-icon-background-position: $tab-icon-background-position, $ui-glyph-color: null, $ui-glyph-color-focus: null, $ui-glyph-color-over: null, $ui-glyph-color-active: null, $ui-glyph-color-focus-over: null, $ui-glyph-color-focus-active: null, $ui-glyph-color-disabled: null, $ui-plain-glyph-color: null, $ui-plain-glyph-color-focus: null, $ui-plain-glyph-color-over: null, $ui-plain-glyph-color-active: null, $ui-plain-glyph-color-focus-over: null, $ui-plain-glyph-color-focus-active: null, $ui-plain-glyph-color-disabled: null, $ui-glyph-opacity: $tab-glyph-opacity, $ui-glyph-opacity-disabled: $tab-glyph-opacity-disabled, $ui-opacity: $tab-opacity, $ui-opacity-focus: $tab-opacity-focus, $ui-opacity-over: $tab-opacity-over, $ui-opacity-active: $tab-opacity-active, $ui-opacity-focus-over: $tab-opacity-focus-over, $ui-opacity-focus-active: $tab-opacity-focus-active, $ui-opacity-disabled: $tab-opacity-disabled, $ui-background-opacity: $tab-background-opacity, $ui-background-opacity-focus: $tab-background-opacity-focus, $ui-background-opacity-over: $tab-background-opacity-over, $ui-background-opacity-active: $tab-background-opacity-active, $ui-background-opacity-focus-over: $tab-background-opacity-focus-over, $ui-background-opacity-focus-active: $tab-background-opacity-focus-active, $ui-background-opacity-disabled: $tab-background-opacity-disabled, $ui-text-opacity-disabled: $tab-text-opacity-disabled, $ui-icon-opacity-disabled: $tab-icon-opacity-disabled, $ui-closable-icon-width: $tab-closable-icon-width, $ui-closable-icon-height: $tab-closable-icon-height, $ui-closable-icon-top: $tab-closable-icon-top, $ui-closable-icon-right: $tab-closable-icon-right, $ui-closable-icon-spacing: $tab-closable-icon-spacing, $ui-closable-icon-glyph-color: null, $ui-closable-icon-glyph-color-focus: null, $ui-closable-icon-glyph-color-over: null, $ui-closable-icon-glyph-color-active: null, $ui-closable-icon-glyph-color-focus-over: null, $ui-closable-icon-glyph-color-focus-active: null, $ui-closable-icon-glyph-color-disabled: null, $ui-plain-closable-icon-glyph-color: $tab-plain-closable-icon-glyph-color, $ui-plain-closable-icon-glyph-color-focus: $tab-plain-closable-icon-glyph-color-focus, $ui-plain-closable-icon-glyph-color-over: $tab-plain-closable-icon-glyph-color-over, $ui-plain-closable-icon-glyph-color-active: $tab-plain-closable-icon-glyph-color-active, $ui-plain-closable-icon-glyph-color-focus-over: $tab-plain-closable-icon-glyph-color-focus-over, $ui-plain-closable-icon-glyph-color-focus-active: $tab-plain-closable-icon-glyph-color-focus-active, $ui-plain-closable-icon-glyph-color-disabled: $tab-plain-closable-icon-glyph-color-disabled, $ui-closable-icon-glyph: $tab-closable-icon-glyph ) { @if $ui-background-color == null { $ui-background-color: $tab-base-color; @if $ui-background-color-focus == null { $ui-background-color-focus: $tab-base-color-focus; } @if $ui-background-color-disabled == null { $ui-background-color-disabled: $tab-base-color-disabled; } } @else { @if $ui-background-color-focus == null { $ui-background-color-focus: $ui-background-color; } @if $ui-background-color-disabled == null { $ui-background-color-disabled: $ui-background-color; } } @if $ui-background-color-over == null { $ui-background-color-over: $tab-base-color-over; @if $ui-background-color-focus-over == null { $ui-background-color-focus-over: $tab-base-color-focus-over; } } @else { @if $ui-background-color-focus-over == null { $ui-background-color-focus-over: $ui-background-color-over; } } @if $ui-background-color-active == null { $ui-background-color-active: $tab-base-color-active; @if $ui-background-color-focus-active == null { $ui-background-color-focus-active: $tab-base-color-focus-active; } } @else { @if $ui-background-color-focus-active == null { $ui-background-color-focus-active: $ui-background-color-active; } } @if $ui-plain-background-color == null { $ui-plain-background-color: if($ui == 'default', $tab-plain-background-color, $ui-background-color); @if $ui-plain-background-color-focus == null { $ui-plain-background-color-focus: $tab-plain-background-color-focus; } @if $ui-plain-background-color-disabled == null { $ui-plain-background-color-disabled: $tab-plain-background-color-disabled; } } @else { @if $ui-plain-background-color-focus == null { $ui-plain-background-color-focus: $ui-plain-background-color; } @if $ui-plain-background-color-disabled == null { $ui-plain-background-color-disabled: $ui-plain-background-color; } } @if $ui-plain-background-color-over == null { $ui-plain-background-color-over: $tab-plain-background-color-over; @if $ui-plain-background-color-focus-over == null { $ui-plain-background-color-focus-over: $tab-plain-background-color-focus-over; } } @else { @if $ui-plain-background-color-focus-over == null { $ui-plain-background-color-focus-over: $ui-plain-background-color-over; } } @if $ui-plain-background-color-active == null { $ui-plain-background-color-active: $tab-plain-background-color-active; @if $ui-plain-background-color-focus-active == null { $ui-plain-background-color-focus-active: $tab-plain-background-color-focus-active; } } @else { @if $ui-plain-background-color-focus-active == null { $ui-plain-background-color-focus-active: $ui-plain-background-color-active; } } @if $ui-border-color == null { $ui-border-color: $tab-border-color; @if $ui-border-color-focus == null { $ui-border-color-focus: $tab-border-color-focus; } @if $ui-border-color-disabled == null { $ui-border-color-disabled: $tab-border-color-disabled; }} @else { @if $ui-border-color-focus == null { $ui-border-color-focus: $ui-border-color; } @if $ui-border-color-disabled == null { $ui-border-color-disabled: $ui-border-color; }} @if $ui-border-color-over == null { $ui-border-color-over: $tab-border-color-over; @if $ui-border-color-focus-over == null { $ui-border-color-focus-over: $tab-border-color-focus-over; } } @else { @if $ui-border-color-focus-over == null { $ui-border-color-focus-over: $ui-border-color-over; } } @if $ui-border-color-active == null { $ui-border-color-active: $tab-border-color-active; @if $ui-border-color-focus-active == null { $ui-border-color-focus-active: $tab-border-color-focus-active; } } @else { @if $ui-border-color-focus-active == null { $ui-border-color-focus-active: $ui-border-color-active; } } @if $ui-plain-border-color == null { $ui-plain-border-color: if($ui == 'default', $tab-plain-border-color, $ui-border-color); @if $ui-plain-border-color-focus == null { $ui-plain-border-color-focus: $tab-plain-border-color-focus; } @if $ui-plain-border-color-disabled == null { $ui-plain-border-color-disabled: $tab-plain-border-color-disabled; } } @else { @if $ui-plain-border-color-focus == null { $ui-plain-border-color-focus: $ui-plain-border-color; } @if $ui-plain-border-color-disabled == null { $ui-plain-border-color-disabled: $ui-plain-border-color; } } @if $ui-plain-border-color-over == null { $ui-plain-border-color-over: $tab-plain-border-color-over; @if $ui-plain-border-color-focus-over == null { $ui-plain-border-color-focus-over: $tab-plain-border-color-focus-over; } } @else { @if $ui-plain-border-color-focus-over == null { $ui-plain-border-color-focus-over: $ui-plain-border-color-over; } } @if $ui-plain-border-color-active == null { $ui-plain-border-color-active: $tab-plain-border-color-active; @if $ui-plain-border-color-focus-active == null { $ui-plain-border-color-focus-active: $tab-plain-border-color-focus-active; } } @else { @if $ui-plain-border-color-focus-active == null { $ui-plain-border-color-focus-active: $ui-plain-border-color-active; } } @if $ui-font-size == null { $ui-font-size: $tab-font-size; @if $ui-font-size-focus == null { $ui-font-size-focus: $tab-font-size-focus; } @if $ui-font-size-over == null { $ui-font-size-over: $tab-font-size-over; } @if $ui-font-size-active == null { $ui-font-size-active: $tab-font-size-active; } @if $ui-font-size-focus-over == null { $ui-font-size-focus-over: $tab-font-size-focus-over; } @if $ui-font-size-focus-active == null { $ui-font-size-focus-active: $tab-font-size-focus-active; } @if $ui-font-size-disabled == null { $ui-font-size-disabled: $tab-font-size-disabled; } } @else { @if $ui-font-size-focus == null { $ui-font-size-focus: $ui-font-size; } @if $ui-font-size-over == null { $ui-font-size-over: $ui-font-size; } @if $ui-font-size-active == null { $ui-font-size-active: $ui-font-size; } @if $ui-font-size-focus-over == null { $ui-font-size-focus-over: $ui-font-size-focus; } @if $ui-font-size-focus-active == null { $ui-font-size-focus-active: $ui-font-size-focus; } @if $ui-font-size-disabled == null { $ui-font-size-disabled: $ui-font-size; } } @if $ui-font-weight == null { $ui-font-weight: $tab-font-weight; @if $ui-font-weight-focus == null { $ui-font-weight-focus: $tab-font-weight-focus; } @if $ui-font-weight-over == null { $ui-font-weight-over: $tab-font-weight-over; } @if $ui-font-weight-active == null { $ui-font-weight-active: $tab-font-weight-active; } @if $ui-font-weight-focus-over == null { $ui-font-weight-focus-over: $tab-font-weight-focus-over; } @if $ui-font-weight-focus-active == null { $ui-font-weight-focus-active: $tab-font-weight-focus-active; } @if $ui-font-weight-disabled == null { $ui-font-weight-disabled: $tab-font-weight-disabled; } } @else { @if $ui-font-weight-focus == null { $ui-font-weight-focus: $ui-font-weight; } @if $ui-font-weight-over == null { $ui-font-weight-over: $ui-font-weight; } @if $ui-font-weight-active == null { $ui-font-weight-active: $ui-font-weight; } @if $ui-font-weight-focus-over == null { $ui-font-weight-focus-over: $ui-font-weight-focus; } @if $ui-font-weight-focus-active == null { $ui-font-weight-focus-active: $ui-font-weight-focus; } @if $ui-font-weight-disabled == null { $ui-font-weight-disabled: $ui-font-weight; } } @if $ui-font-family == null { $ui-font-family: $tab-font-family; @if $ui-font-family-focus == null { $ui-font-family-focus: $tab-font-family-focus; } @if $ui-font-family-over == null { $ui-font-family-over: $tab-font-family-over; } @if $ui-font-family-active == null { $ui-font-family-active: $tab-font-family-active; } @if $ui-font-family-focus-over == null { $ui-font-family-focus-over: $tab-font-family-focus-over; } @if $ui-font-family-focus-active == null { $ui-font-family-focus-active: $tab-font-family-focus-active; } @if $ui-font-family-disabled == null { $ui-font-family-disabled: $tab-font-family-disabled; } } @else { @if $ui-font-family-focus == null { $ui-font-family-focus: $ui-font-family; } @if $ui-font-family-over == null { $ui-font-family-over: $ui-font-family; } @if $ui-font-family-active == null { $ui-font-family-active: $ui-font-family; } @if $ui-font-family-focus-over == null { $ui-font-family-focus-over: $ui-font-family-focus; } @if $ui-font-family-focus-active == null { $ui-font-family-focus-active: $ui-font-family-focus; } @if $ui-font-family-disabled == null { $ui-font-family-disabled: $ui-font-family; } } @if $ui-color == null { $ui-color: $tab-color; @if $ui-color-focus == null { $ui-color-focus: $tab-color-focus; } @if $ui-color-disabled == null { $ui-color-disabled: $tab-color-disabled; } } @else { @if $ui-color-focus == null { $ui-color-focus: $ui-color; } @if $ui-color-disabled == null { $ui-color-disabled: $ui-color; } } @if $ui-color-over == null { $ui-color-over: $tab-color-over; @if $ui-color-focus-over == null { $ui-color-focus-over: $tab-color-focus-over; } } @else { @if $ui-color-focus-over == null { $ui-color-focus-over: $ui-color-over; } } @if $ui-color-active == null { $ui-color-active: $tab-color-active; @if $ui-color-focus-active == null { $ui-color-focus-active: $tab-color-focus-active; } } @else { @if $ui-color-focus-active == null { $ui-color-focus-active: $ui-color-active; } } @if $ui-plain-color == null { $ui-plain-color: if($ui == 'default', $tab-plain-color, $ui-color); @if $ui-plain-color-focus == null { $ui-plain-color-focus: $tab-plain-color-focus; } @if $ui-plain-color-disabled == null { $ui-plain-color-disabled: $tab-plain-color-disabled; } } @else { @if $ui-plain-color-focus == null { $ui-plain-color-focus: $ui-plain-color; } @if $ui-plain-color-disabled == null { $ui-plain-color-disabled: $ui-plain-color; } } @if $ui-plain-color-over == null { $ui-plain-color-over: $tab-plain-color-over; @if $ui-plain-color-focus-over == null { $ui-plain-color-focus-over: $tab-plain-color-focus-over; } } @else { @if $ui-plain-color-focus-over == null { $ui-plain-color-focus-over: $ui-plain-color-over; } } @if $ui-plain-color-active == null { $ui-plain-color-active: $tab-plain-color-active; @if $ui-plain-color-focus-active == null { $ui-plain-color-focus-active: $tab-plain-color-focus-active; } } @else { @if $ui-plain-color-focus-active == null { $ui-plain-color-focus-active: $ui-plain-color-active; } } @if $ui-background-gradient == null { $ui-background-gradient: $tab-background-gradient; @if $ui-background-gradient-focus == null { $ui-background-gradient-focus: $tab-background-gradient-focus; } @if $ui-background-gradient-disabled == null { $ui-background-gradient-disabled: $tab-background-gradient-disabled; } } @else { @if $ui-background-gradient-focus == null { $ui-background-gradient-focus: $ui-background-gradient; } @if $ui-background-gradient-disabled == null { $ui-background-gradient-disabled: $ui-background-gradient; } } @if $ui-background-gradient-over == null { $ui-background-gradient-over: $tab-background-gradient-over; @if $ui-background-gradient-focus-over == null { $ui-background-gradient-focus-over: $tab-background-gradient-focus-over; } } @else { @if $ui-background-gradient-focus-over == null { $ui-background-gradient-focus-over: $ui-background-gradient-over; } } @if $ui-background-gradient-active == null { $ui-background-gradient-active: $tab-background-gradient-active; @if $ui-background-gradient-focus-active == null { $ui-background-gradient-focus-active: $tab-background-gradient-focus-active; } } @else { @if $ui-background-gradient-focus-active == null { $ui-background-gradient-focus-active: $ui-background-gradient-active; } } @if $ui-inner-border-width == null { $ui-inner-border-width: $tab-inner-border-width; @if $ui-inner-border-width-focus == null { $ui-inner-border-width-focus: $tab-inner-border-width-focus; } @if $ui-inner-border-width-over == null { $ui-inner-border-width-over: $tab-inner-border-width-over; } @if $ui-inner-border-width-active == null { $ui-inner-border-width-active: $tab-inner-border-width-active; } @if $ui-inner-border-width-focus-over == null { $ui-inner-border-width-focus-over: $tab-inner-border-width-focus-over; } @if $ui-inner-border-width-focus-active == null { $ui-inner-border-width-focus-active: $tab-inner-border-width-focus-active; } @if $ui-inner-border-width-disabled == null { $ui-inner-border-width-disabled: $tab-inner-border-width-disabled; } } @else { @if $ui-inner-border-width-focus == null { $ui-inner-border-width-focus: $ui-inner-border-width; } @if $ui-inner-border-width-over == null { $ui-inner-border-width-over: $ui-inner-border-width; } @if $ui-inner-border-width-active == null { $ui-inner-border-width-active: $ui-inner-border-width; } @if $ui-inner-border-width-focus-over == null { $ui-inner-border-width-focus-over: $ui-inner-border-width-focus; } @if $ui-inner-border-width-focus-active == null { $ui-inner-border-width-focus-active: $ui-inner-border-width-focus; } @if $ui-inner-border-width-disabled == null { $ui-inner-border-width-disabled: $ui-inner-border-width; } } @if $ui-inner-border-color == null { $ui-inner-border-color: tab-inner-border-color($ui-background-color, $ui-border-color); @if $ui-inner-border-color-focus == null { $ui-inner-border-color-focus: $tab-inner-border-color-focus; } @if $ui-inner-border-color-over == null { $ui-inner-border-color-over: $tab-inner-border-color-over; } @if $ui-inner-border-color-active == null { $ui-inner-border-color-active: $tab-inner-border-color-active; } @if $ui-inner-border-color-focus-over == null { $ui-inner-border-color-focus-over: $tab-inner-border-color-focus-over; } @if $ui-inner-border-color-focus-active == null { $ui-inner-border-color-focus-active: $tab-inner-border-color-focus-active; } @if $ui-inner-border-color-disabled == null { $ui-inner-border-color-disabled: $tab-inner-border-color-disabled; } } @else { @if $ui-inner-border-color-focus == null { $ui-inner-border-color-focus: tab-inner-border-color-focus($ui-background-color-focus, $ui-border-color-focus); } @if $ui-inner-border-color-over == null { $ui-inner-border-color-over: tab-inner-border-color-over($ui-background-color-over, $ui-border-color-over); } @if $ui-inner-border-color-active == null { $ui-inner-border-color-active: tab-inner-border-color-active($ui-background-color-active, $ui-border-color-active); } @if $ui-inner-border-color-focus-over == null { $ui-inner-border-color-focus-over: tab-inner-border-color-focus-over($ui-background-color-focus-over, $ui-border-color-focus-over); } @if $ui-inner-border-color-focus-active == null { $ui-inner-border-color-focus-active: tab-inner-border-color-focus-active($ui-background-color-focus-active, $ui-border-color-focus-active); } @if $ui-inner-border-color-disabled == null { $ui-inner-border-color-disabled: tab-inner-border-color-disabled($ui-background-color-disabled, $ui-border-color-disabled); } } @if $ui-inner-border-collapse == null { $ui-inner-border-collapse: $tab-inner-border-collapse; @if $ui-inner-border-collapse-focus == null { $ui-inner-border-collapse-focus: $tab-inner-border-collapse-focus; } @if $ui-inner-border-collapse-over == null { $ui-inner-border-collapse-over: $tab-inner-border-collapse-over; } @if $ui-inner-border-collapse-active == null { $ui-inner-border-collapse-active: $tab-inner-border-collapse-active; } @if $ui-inner-border-collapse-focus-over == null { $ui-inner-border-collapse-focus-over: $tab-inner-border-collapse-focus-over; } @if $ui-inner-border-collapse-focus-active == null { $ui-inner-border-collapse-focus-active: $tab-inner-border-collapse-focus-active; } @if $ui-inner-border-collapse-disabled == null { $ui-inner-border-collapse-disabled: $tab-inner-border-collapse-disabled; } } @else { @if $ui-inner-border-collapse-focus == null { $ui-inner-border-collapse-focus: $ui-inner-border-collapse; } @if $ui-inner-border-collapse-over == null { $ui-inner-border-collapse-over: $ui-inner-border-collapse; } @if $ui-inner-border-collapse-active == null { $ui-inner-border-collapse-active: $ui-inner-border-collapse; } @if $ui-inner-border-collapse-focus-over == null { $ui-inner-border-collapse-focus-over: $ui-inner-border-collapse-focus; } @if $ui-inner-border-collapse-focus-active == null { $ui-inner-border-collapse-focus-active: $ui-inner-border-collapse-focus; } @if $ui-inner-border-collapse-disabled == null { $ui-inner-border-collapse-disabled: $ui-inner-border-collapse; } } @if $ui-glyph-color == null { $ui-glyph-color: $tab-glyph-color; @if $ui-glyph-color-focus == null { $ui-glyph-color-focus: $tab-glyph-color-focus; } @if $ui-glyph-color-disabled == null { $ui-glyph-color-disabled: $tab-glyph-color-disabled; } } @else { @if $ui-glyph-color-focus == null { $ui-glyph-color-focus: $ui-glyph-color; } @if $ui-glyph-color-disabled == null { $ui-glyph-color-disabled: $ui-glyph-color; } } @if $ui-glyph-color-over == null { $ui-glyph-color-over: $tab-glyph-color-over; @if $ui-glyph-color-focus-over == null { $ui-glyph-color-focus-over: $tab-glyph-color-focus-over; } } @else { @if $ui-glyph-color-focus-over == null { $ui-glyph-color-focus-over: $ui-glyph-color-over; } } @if $ui-glyph-color-active == null { $ui-glyph-color-active: $tab-glyph-color-active; @if $ui-glyph-color-focus-active == null { $ui-glyph-color-focus-active: $tab-glyph-color-focus-active; } } @else { @if $ui-glyph-color-focus-active == null { $ui-glyph-color-focus-active: $ui-glyph-color-active; } } @if $ui-plain-glyph-color == null { $ui-plain-glyph-color: $tab-plain-glyph-color; @if $ui-plain-glyph-color-focus == null { $ui-plain-glyph-color-focus: $tab-plain-glyph-color-focus; } @if $ui-plain-glyph-color-disabled == null { $ui-plain-glyph-color-disabled: $tab-plain-glyph-color-disabled; } } @else { @if $ui-plain-glyph-color-focus == null { $ui-plain-glyph-color-focus: $ui-plain-glyph-color; } @if $ui-plain-glyph-color-disabled == null { $ui-plain-glyph-color-disabled: $ui-plain-glyph-color; } } @if $ui-plain-glyph-color-over == null { $ui-plain-glyph-color-over: $tab-plain-glyph-color-over; @if $ui-plain-glyph-color-focus-over == null { $ui-plain-glyph-color-focus-over: $tab-plain-glyph-color-focus-over; } } @else { @if $ui-plain-glyph-color-focus-over == null { $ui-plain-glyph-color-focus-over: $ui-plain-glyph-color-over; } } @if $ui-plain-glyph-color-active == null { $ui-plain-glyph-color-active: $tab-plain-glyph-color-active; @if $ui-plain-glyph-color-focus-active == null { $ui-plain-glyph-color-focus-active: $tab-plain-glyph-color-focus-active; } } @else { @if $ui-plain-glyph-color-focus-active == null { $ui-plain-glyph-color-focus-active: $ui-plain-glyph-color-active; } } @if $ui-closable-icon-glyph-color == null { $ui-closable-icon-glyph-color: $tab-closable-icon-glyph-color; @if $ui-closable-icon-glyph-color-focus == null { $ui-closable-icon-glyph-color-focus: $tab-closable-icon-glyph-color-focus; } @if $ui-closable-icon-glyph-color-disabled == null { $ui-closable-icon-glyph-color-disabled: $tab-closable-icon-glyph-color-disabled; } } @else { @if $ui-closable-icon-glyph-color-focus == null { $ui-closable-icon-glyph-color-focus: $ui-closable-icon-glyph-color; } @if $ui-closable-icon-glyph-color-disabled == null { $ui-closable-icon-glyph-color-disabled: $ui-closable-icon-glyph-color; } } @if $ui-closable-icon-glyph-color-over == null { $ui-closable-icon-glyph-color-over: $tab-closable-icon-glyph-color-over; @if $ui-closable-icon-glyph-color-focus-over == null { $ui-closable-icon-glyph-color-focus-over: $tab-closable-icon-glyph-color-focus-over; } } @else { @if $ui-closable-icon-glyph-color-focus-over == null { $ui-closable-icon-glyph-color-focus-over: $ui-closable-icon-glyph-color-over; } } @if $ui-closable-icon-glyph-color-active == null { $ui-closable-icon-glyph-color-active: $tab-closable-icon-glyph-color-active; @if $ui-closable-icon-glyph-color-focus-active == null { $ui-closable-icon-glyph-color-focus-active: $tab-closable-icon-glyph-color-focus-active; } } @else { @if $ui-closable-icon-glyph-color-focus-active == null { $ui-closable-icon-glyph-color-focus-active: $ui-closable-icon-glyph-color-active; } } @if $ui-plain-closable-icon-glyph-color == null { $ui-plain-closable-icon-glyph-color: $tab-plain-closable-icon-glyph-color; @if $ui-plain-closable-icon-glyph-color-focus == null { $ui-plain-closable-icon-glyph-color-focus: $tab-plain-closable-icon-glyph-color-focus; } @if $ui-plain-closable-icon-glyph-color-disabled == null { $ui-plain-closable-icon-glyph-color-disabled: $tab-plain-closable-icon-glyph-color-disabled; } } @else { @if $ui-plain-closable-icon-glyph-color-focus == null { $ui-plain-closable-icon-glyph-color-focus: $ui-plain-closable-icon-glyph-color; } @if $ui-plain-closable-icon-glyph-color-disabled == null { $ui-plain-closable-icon-glyph-color-disabled: $ui-plain-closable-icon-glyph-color; } } @if $ui-plain-closable-icon-glyph-color-over == null { $ui-plain-closable-icon-glyph-color-over: $tab-plain-closable-icon-glyph-color-over; @if $ui-plain-closable-icon-glyph-color-focus-over == null { $ui-plain-closable-icon-glyph-color-focus-over: $tab-plain-closable-icon-glyph-color-focus-over; } } @else { @if $ui-plain-closable-icon-glyph-color-focus-over == null { $ui-plain-closable-icon-glyph-color-focus-over: $ui-plain-closable-icon-glyph-color-over; } } @if $ui-plain-closable-icon-glyph-color-active == null { $ui-plain-closable-icon-glyph-color-active: $tab-plain-closable-icon-glyph-color-active; @if $ui-plain-closable-icon-glyph-color-focus-active == null { $ui-plain-closable-icon-glyph-color-focus-active: $tab-plain-closable-icon-glyph-color-focus-active; } } @else { @if $ui-plain-closable-icon-glyph-color-focus-active == null { $ui-plain-closable-icon-glyph-color-focus-active: $ui-plain-closable-icon-glyph-color-active; } } $inner-border-max: max( max(top($ui-inner-border-width) right($ui-inner-border-width) bottom($ui-inner-border-width) left($ui-inner-border-width)) max(top($ui-inner-border-width-focus) right($ui-inner-border-width-focus) bottom($ui-inner-border-width-focus) left($ui-inner-border-width-focus)) max(top($ui-inner-border-width-over) right($ui-inner-border-width-over) bottom($ui-inner-border-width-over) left($ui-inner-border-width-over)) max(top($ui-inner-border-width-active) right($ui-inner-border-width-active) bottom($ui-inner-border-width-active) left($ui-inner-border-width-active)) max(top($ui-inner-border-width-disabled) right($ui-inner-border-width-disabled) bottom($ui-inner-border-width-disabled) left($ui-inner-border-width-disabled)) ); $frame-size: frame-size($ui-border-width, $inner-border-max, $ui-border-radius); @include x-frame( $cls: 'tab', $ui: $ui + '-top', $border-radius: $ui-border-radius, $border-width: $ui-border-width, $background-color: $ui-background-color, $background-gradient: $ui-background-gradient, $background-direction: top, $padding: $ui-padding, $inner-border-width: $ui-inner-border-width, $table: true ); @include x-frame( $cls: 'tab', $ui: $ui + '-bottom', $border-radius: rotate180($ui-border-radius), $border-width: rotate180($ui-border-width), $background-color: $ui-background-color, $background-gradient: $ui-background-gradient, $background-direction: bottom, $padding: rotate180($ui-padding), $inner-border-width: $ui-inner-border-width, $table: true ); @include x-frame( $cls: 'tab', $ui: $ui + '-left', $border-radius: rotate270($ui-border-radius), $border-width: rotate270($ui-border-width), $background-color: $ui-background-color, $background-gradient: $ui-background-gradient, $background-direction: top, $padding: $ui-padding, $inner-border-width: $ui-inner-border-width, $table: true ); @include x-frame( $cls: 'tab', $ui: $ui + '-right', $border-radius: rotate90($ui-border-radius), $border-width: rotate90($ui-border-width), $background-color: $ui-background-color, $background-gradient: $ui-background-gradient, $background-direction: top, $padding: $ui-padding, $inner-border-width: $ui-inner-border-width, $table: true ); @if $include-ie { @mixin ie-tab-rotate($rotate) { -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=#{$rotate})"; } @mixin ie-tab-alpharotate($alpha, $rotate) { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=#{$alpha * 100}),progid:DXImageTransform.Microsoft.BasicImage(rotation=#{$rotate})"; } } .#{$prefix}tab-#{$ui} { border-color: $ui-border-color; @if not is-null($ui-cursor) { cursor: $ui-cursor; } @if not is-null($ui-inner-border-width) and not is-null($ui-inner-border-color) and $ui-inner-border-width != 0 { @include inner-border($ui-inner-border-width, $ui-inner-border-color); } @if ($ui-opacity != null) and ($ui-opacity != 1) { @include opacity($ui-opacity); @if $include-ie { &.#{$prefix}tab-rotate-left { .#{$prefix}ie8 & { @include ie-tab-alpharotate($ui-opacity, 3); } } &.#{$prefix}tab-rotate-right { .#{$prefix}ie8 & { @include ie-tab-alpharotate($ui-opacity, 1); } } } } @if ($ui-background-opacity != null) and ($ui-background-opacity != 1) { @include background-opacity($ui-background-color, $ui-background-opacity); @if $include-ie { // Background opacity uses a filter in IE8, which overrides the rotation filter // Unfortunately rotation and opacity cannot coexist, or the tab background // turns black, so we will just have to do without background opacity in IE8 &.#{$prefix}tab-rotate-left { .#{$prefix}ie8 & { @include ie-tab-rotate(3); } } &.#{$prefix}tab-rotate-right { .#{$prefix}ie8 & { @include ie-tab-rotate(1); } } } } @if $ui-plain-background-color != $ui-background-color { .#{$prefix}tab-bar-plain & { background-color: $ui-plain-background-color; } } @if $ui-plain-border-color != $ui-border-color { .#{$prefix}tab-bar-plain & { border-color: $ui-plain-border-color; } } } .#{$prefix}tab-#{$ui}-top { margin: $ui-margin; @if $include-rtl { &.#{$prefix}rtl { margin: rtl($ui-margin); } } &.#{$prefix}tab-rotate-left { margin: rtl($ui-margin); @if $include-rtl { &.#{$prefix}rtl { margin: $ui-margin; } } } @if not is-null($ui-inner-border-width) and not is-null($ui-inner-border-color) and $ui-inner-border-width != 0 { @include inner-border( if( $ui-inner-border-collapse, top($ui-inner-border-width) right($ui-inner-border-width) 0 left($ui-inner-border-width), $ui-inner-border-width ), $ui-inner-border-color ); } @if not is-null($ui-inner-border-width-focus) and not is-null($ui-inner-border-color-focus) { &.#{$prefix}tab-focus { @include inner-border( if( $ui-inner-border-collapse-focus, top($ui-inner-border-width-focus) right($ui-inner-border-width-focus) 0 left($ui-inner-border-width-focus), $ui-inner-border-width-focus ), $ui-inner-border-color-focus ); } } @if not is-null($ui-inner-border-width-over) and not is-null($ui-inner-border-color-over) { &.#{$prefix}tab-over { @include inner-border( if( $ui-inner-border-collapse-over, top($ui-inner-border-width-over) right($ui-inner-border-width-over) 0 left($ui-inner-border-width-over), $ui-inner-border-width-over ), $ui-inner-border-color-over ); } } @if not is-null($ui-inner-border-width-focus-over) and not is-null($ui-inner-border-color-focus-over) and ($ui-inner-border-width-focus-over != $ui-inner-border-width-over or $ui-inner-border-color-focus-over != $ui-inner-border-color-over or $ui-inner-border-collapse-focus-over != $ui-inner-border-collapse-over) { &.#{$prefix}tab-focus.#{$prefix}tab-over { @include inner-border( if( $ui-inner-border-collapse-focus-over, top($ui-inner-border-width-focus-over) right($ui-inner-border-width-focus-over) 0 left($ui-inner-border-width-focus-over), $ui-inner-border-width-focus-over ), $ui-inner-border-color-focus-over ); } } @if not is-null($ui-inner-border-width-active) and not is-null($ui-inner-border-color-active) { &.#{$prefix}tab.#{$prefix}tab-active { @include inner-border( if( $ui-inner-border-collapse-active, top($ui-inner-border-width-active) right($ui-inner-border-width-active) 0 left($ui-inner-border-width-active), $ui-inner-border-width-active ), $ui-inner-border-color-active ); } } @if not is-null($ui-inner-border-width-focus-active) and not is-null($ui-inner-border-color-focus-active) and ($ui-inner-border-width-focus-active != $ui-inner-border-width-active or $ui-inner-border-color-focus-active != $ui-inner-border-color-active or $ui-inner-border-collapse-focus-active != $ui-inner-border-collapse-active) { &.#{$prefix}tab-focus.#{$prefix}tab-active { @include inner-border( if( $ui-inner-border-collapse-focus-active, top($ui-inner-border-width-focus-active) right($ui-inner-border-width-focus-active) 0 left($ui-inner-border-width-focus-active), $ui-inner-border-width-focus-active ), $ui-inner-border-color-focus-active ); } } @if not is-null($ui-inner-border-width-disabled) and not is-null($ui-inner-border-color-disabled) { &.#{$prefix}tab.#{$prefix}tab-disabled { @include inner-border( if( $ui-inner-border-collapse-disabled, top($ui-inner-border-width-disabled) right($ui-inner-border-width-disabled) 0 left($ui-inner-border-width-disabled), $ui-inner-border-width-disabled ), $ui-inner-border-color-disabled ); } } } .#{$prefix}tab-#{$ui}-right { margin: rotate90($ui-margin); @if $include-rtl { &.#{$prefix}rtl { margin: rtl(rotate90($ui-margin)); } } &.#{$prefix}tab-rotate-right { margin: flip-vertical(rotate90($ui-margin)); @if $include-rtl { &.#{$prefix}rtl { margin: rtl(flip-vertical(rotate90($ui-margin))); } } } @if not is-null($ui-inner-border-width) and not is-null($ui-inner-border-color) and $ui-inner-border-width != 0 { @include inner-border( if( $ui-inner-border-collapse, top($ui-inner-border-width) right($ui-inner-border-width) bottom($ui-inner-border-width) 0, $ui-inner-border-width ), $ui-inner-border-color ); } @if not is-null($ui-inner-border-width-focus) and not is-null($ui-inner-border-color-focus) { &.#{$prefix}tab-focus { @include inner-border( if( $ui-inner-border-collapse-focus, top($ui-inner-border-width-focus) right($ui-inner-border-width-focus) bottom($ui-inner-border-width-focus) 0, $ui-inner-border-width-focus ), $ui-inner-border-color-focus ); } } @if not is-null($ui-inner-border-width-over) and not is-null($ui-inner-border-color-over) { &.#{$prefix}tab-over { @include inner-border( if( $ui-inner-border-collapse-over, top($ui-inner-border-width-over) right($ui-inner-border-width-over) bottom($ui-inner-border-width-over) 0, $ui-inner-border-width-over ), $ui-inner-border-color-over ); } } @if not is-null($ui-inner-border-width-focus-over) and not is-null($ui-inner-border-color-focus-over) and ($ui-inner-border-width-focus-over != $ui-inner-border-width-over or $ui-inner-border-color-focus-over != $ui-inner-border-color-over or $ui-inner-border-collapse-focus-over != $ui-inner-border-collapse-over) { &.#{$prefix}tab-focus.#{$prefix}tab-over { @include inner-border( if( $ui-inner-border-collapse-focus-over, top($ui-inner-border-width-focus-over) right($ui-inner-border-width-focus-over) bottom($ui-inner-border-width-focus-over) 0, $ui-inner-border-width-focus-over ), $ui-inner-border-color-focus-over ); } } @if not is-null($ui-inner-border-width-active) and not is-null($ui-inner-border-color-active) { &.#{$prefix}tab.#{$prefix}tab-active { @include inner-border( if( $ui-inner-border-collapse-active, top($ui-inner-border-width-active) right($ui-inner-border-width-active) bottom($ui-inner-border-width-active) 0, $ui-inner-border-width-active ), $ui-inner-border-color-active ); } } @if not is-null($ui-inner-border-width-focus-active) and not is-null($ui-inner-border-color-focus-active) and ($ui-inner-border-width-focus-active != $ui-inner-border-width-active or $ui-inner-border-color-focus-active != $ui-inner-border-color-active or $ui-inner-border-collapse-focus-active != $ui-inner-border-collapse-active) { &.#{$prefix}tab-focus.#{$prefix}tab-active { @include inner-border( if( $ui-inner-border-collapse-focus-active, top($ui-inner-border-width-focus-active) right($ui-inner-border-width-focus-active) bottom($ui-inner-border-width-focus-active) 0, $ui-inner-border-width-focus-active ), $ui-inner-border-color-focus-active ); } } @if not is-null($ui-inner-border-width-disabled) and not is-null($ui-inner-border-color-disabled) { &.#{$prefix}tab.#{$prefix}tab-disabled { @include inner-border( if( $ui-inner-border-collapse-disabled, top($ui-inner-border-width-disabled) right($ui-inner-border-width-disabled) bottom($ui-inner-border-width-disabled) 0, $ui-inner-border-width-disabled ), $ui-inner-border-color-disabled ); } } } .#{$prefix}tab-#{$ui}-bottom { margin: flip-vertical($ui-margin); @if $include-rtl { &.#{$prefix}rtl { margin: rtl(flip-vertical($ui-margin)); } } &.#{$prefix}tab-rotate-left { margin: rotate180($ui-margin); @if $include-rtl { &.#{$prefix}rtl { margin: rtl(rotate180($ui-margin)); } } } @if not is-null($ui-inner-border-width) and not is-null($ui-inner-border-color) and $ui-inner-border-width != 0 { @include inner-border( if( $ui-inner-border-collapse, 0 right($ui-inner-border-width) top($ui-inner-border-width) left($ui-inner-border-width), $ui-inner-border-width ), $ui-inner-border-color ); } @if not is-null($ui-inner-border-width-focus) and not is-null($ui-inner-border-color-focus) { &.#{$prefix}tab-focus { @include inner-border( if( $ui-inner-border-collapse-focus, 0 right($ui-inner-border-width-focus) top($ui-inner-border-width-focus) left($ui-inner-border-width-focus), $ui-inner-border-width-focus ), $ui-inner-border-color-focus ); } } @if not is-null($ui-inner-border-width-over) and not is-null($ui-inner-border-color-over) { &.#{$prefix}tab-over { @include inner-border( if( $ui-inner-border-collapse-over, 0 right($ui-inner-border-width-over) top($ui-inner-border-width-over) left($ui-inner-border-width-over), $ui-inner-border-width-over ), $ui-inner-border-color-over ); } } @if not is-null($ui-inner-border-width-focus-over) and not is-null($ui-inner-border-color-focus-over) and ($ui-inner-border-width-focus-over != $ui-inner-border-width-over or $ui-inner-border-color-focus-over != $ui-inner-border-color-over or $ui-inner-border-collapse-focus-over != $ui-inner-border-collapse-over) { &.#{$prefix}tab-focus.#{$prefix}tab-over { @include inner-border( if( $ui-inner-border-collapse-focus-over, 0 right($ui-inner-border-width-focus-over) top($ui-inner-border-width-focus-over) left($ui-inner-border-width-focus-over), $ui-inner-border-width-focus-over ), $ui-inner-border-color-focus-over ); } } @if not is-null($ui-inner-border-width-active) and not is-null($ui-inner-border-color-active) { &.#{$prefix}tab.#{$prefix}tab-active { @include inner-border( if( $ui-inner-border-collapse-active, 0 right($ui-inner-border-width-active) top($ui-inner-border-width-active) left($ui-inner-border-width-active), $ui-inner-border-width-active ), $ui-inner-border-color-active ); } } @if not is-null($ui-inner-border-width-focus-active) and not is-null($ui-inner-border-color-focus-active) and ($ui-inner-border-width-focus-active != $ui-inner-border-width-active or $ui-inner-border-color-focus-active != $ui-inner-border-color-active or $ui-inner-border-collapse-focus-active != $ui-inner-border-collapse-active) { &.#{$prefix}tab-focus.#{$prefix}tab-active { @include inner-border( if( $ui-inner-border-collapse-focus-active, 0 right($ui-inner-border-width-focus-active) top($ui-inner-border-width-focus-active) left($ui-inner-border-width-focus-active), $ui-inner-border-width-focus-active ), $ui-inner-border-color-focus-active ); } } @if not is-null($ui-inner-border-width-disabled) and not is-null($ui-inner-border-color-disabled) { &.#{$prefix}tab.#{$prefix}tab-disabled { @include inner-border( if( $ui-inner-border-collapse-disabled, 0 right($ui-inner-border-width-disabled) top($ui-inner-border-width-disabled) left($ui-inner-border-width-disabled), $ui-inner-border-width-disabled ), $ui-inner-border-color-disabled ); } } } .#{$prefix}tab-#{$ui}-left { margin: rtl(rotate90($ui-margin)); @if $include-rtl { &.#{$prefix}rtl { margin: rotate90($ui-margin); } } &.#{$prefix}tab-rotate-right { margin: rotate270($ui-margin); @if $include-rtl { &.#{$prefix}rtl { margin: rtl(rotate270($ui-margin)); } } } @if not is-null($ui-inner-border-width) and not is-null($ui-inner-border-color) and $ui-inner-border-width != 0 { @include inner-border( if( $ui-inner-border-collapse, top($ui-inner-border-width) 0 bottom($ui-inner-border-width) left($ui-inner-border-width), $ui-inner-border-width ), $ui-inner-border-color ); } @if not is-null($ui-inner-border-width-focus) and not is-null($ui-inner-border-color-focus) { &.#{$prefix}tab-focus { @include inner-border( if( $ui-inner-border-collapse-focus, top($ui-inner-border-width-focus) 0 bottom($ui-inner-border-width-focus) left($ui-inner-border-width-focus), $ui-inner-border-width-focus ), $ui-inner-border-color-focus ); } } @if not is-null($ui-inner-border-width-over) and not is-null($ui-inner-border-color-over) { &.#{$prefix}tab-over { @include inner-border( if( $ui-inner-border-collapse-over, top($ui-inner-border-width-over) 0 bottom($ui-inner-border-width-over) left($ui-inner-border-width-over), $ui-inner-border-width-over ), $ui-inner-border-color-over ); } } @if not is-null($ui-inner-border-width-focus-over) and not is-null($ui-inner-border-color-focus-over) and ($ui-inner-border-width-focus-over != $ui-inner-border-width-over or $ui-inner-border-color-focus-over != $ui-inner-border-color-over or $ui-inner-border-collapse-focus-over != $ui-inner-border-collapse-over) { &.#{$prefix}tab-focus.#{$prefix}tab-over { @include inner-border( if( $ui-inner-border-collapse-focus-over, top($ui-inner-border-width-focus-over) 0 bottom($ui-inner-border-width-focus-over) left($ui-inner-border-width-focus-over), $ui-inner-border-width-focus-over ), $ui-inner-border-color-focus-over ); } } @if not is-null($ui-inner-border-width-active) and not is-null($ui-inner-border-color-active) { &.#{$prefix}tab.#{$prefix}tab-active { @include inner-border( if( $ui-inner-border-collapse-active, top($ui-inner-border-width-active) 0 bottom($ui-inner-border-width-active) left($ui-inner-border-width-active), $ui-inner-border-width-active ), $ui-inner-border-color-active ); } } @if not is-null($ui-inner-border-width-focus-active) and not is-null($ui-inner-border-color-focus-active) and ($ui-inner-border-width-focus-active != $ui-inner-border-width-active or $ui-inner-border-color-focus-active != $ui-inner-border-color-active or $ui-inner-border-collapse-focus-active != $ui-inner-border-collapse-active) { &.#{$prefix}tab-focus.#{$prefix}tab-active { @include inner-border( if( $ui-inner-border-collapse-focus-active, top($ui-inner-border-width-focus-active) 0 bottom($ui-inner-border-width-focus-active) left($ui-inner-border-width-focus-active), $ui-inner-border-width-focus-active ), $ui-inner-border-color-focus-active ); } } @if not is-null($ui-inner-border-width-disabled) and not is-null($ui-inner-border-color-disabled) { &.#{$prefix}tab.#{$prefix}tab-disabled { @include inner-border( if( $ui-inner-border-collapse-disabled, top($ui-inner-border-width-disabled) 0 bottom($ui-inner-border-width-disabled) left($ui-inner-border-width-disabled), $ui-inner-border-width-disabled ), $ui-inner-border-color-disabled ); } } } .#{$prefix}tab-button-#{$ui} { // this is a table cell, so height here is essentially min-height height: max($ui-icon-height, $ui-line-height); } .#{$prefix}tab-inner-#{$ui} { font: $ui-font-weight #{$ui-font-size}/#{$ui-line-height} $ui-font-family; color: $ui-color; @if $ui-text-padding != 0 { padding: 0 $ui-text-padding; } @if ($ui-plain-color != null) and ($ui-plain-color != $ui-color) { .#{$prefix}tab-bar-plain & { color: $ui-plain-color; } } // inner el requires max-width in order for ellipsis to work. max-width: 100%; .#{$prefix}tab-icon-right > &, .#{$prefix}tab-icon-left > & { // since calc is only supported in IE9+ ellipsis will not work in IE8 when // there is a left or right icon present max-width: calc(100% - #{$ui-icon-width}); } } .#{$prefix}tab-icon-el-#{$ui} { .#{$prefix}tab-icon-left > &, .#{$prefix}tab-icon-right > & { width: $ui-icon-width; } .#{$prefix}tab-icon-top > &, .#{$prefix}tab-icon-bottom > & { min-width: $ui-icon-width; } min-height: $ui-icon-height; background-position: $ui-icon-background-position; font-size: $ui-icon-height; line-height: $ui-icon-height; color: $ui-glyph-color; @if $ui-plain-glyph-color != null { .#{$prefix}tab-bar-plain & { color: $ui-plain-glyph-color; } } &.#{$prefix}tab-glyph { @if $ui-glyph-opacity != 1 { // do not use the opacity mixin because we do not want IE's filter version of // opacity to be included. We emulate the opacity setting in IE8m by mixing // the icon color into the background color. (see below) opacity: $ui-glyph-opacity; } // In IE8 and below when a glyph contains partially transparent pixels, we // can't apply an opacity filter to the glyph element, because IE8m will render // the partially transparent pixels of the glyph as black. To work around this, // we emulate the approximate color that the glyph would have if it had opacity // applied by mixing the glyph color with the tab's background-color. @if $include-ie and $ui-background-color != transparent { .#{$prefix}ie8 & { color: mix($ui-glyph-color, $ui-background-color, $ui-glyph-opacity * 100); } } } // when the tab contains both icon and text, add $icon-spacing to the icon .#{$prefix}tab-text.#{$prefix}tab-icon-left > & { margin-right: max($ui-icon-spacing - $ui-text-padding, 0); @if $include-rtl { &.#{$prefix}rtl { margin-right: 0; margin-left: max($ui-icon-spacing - $ui-text-padding, 0); } } } .#{$prefix}tab-text.#{$prefix}tab-icon-right > & { margin-left: max($ui-icon-spacing - $ui-text-padding, 0); @if $include-rtl { &.#{$prefix}rtl { margin-left: 0; margin-right: max($ui-icon-spacing - $ui-text-padding, 0); } } } .#{$prefix}tab-text.#{$prefix}tab-icon-top > & { margin-bottom: $ui-icon-spacing; } .#{$prefix}tab-text.#{$prefix}tab-icon-bottom > & { margin-top: $ui-icon-spacing; } } .#{$prefix}tab-focus.#{$prefix}tab-#{$ui} { border-color: $ui-border-color-focus; @if ($ui-opacity-focus != null) { @include opacity($ui-opacity-focus); @if $include-ie { &.#{$prefix}tab-rotate-left { .#{$prefix}ie8 & { @include ie-tab-alpharotate($ui-opacity-focus, 3); } } &.#{$prefix}tab-rotate-right { .#{$prefix}ie8 & { @include ie-tab-alpharotate($ui-opacity-focus, 1); } } } } @if ($ui-background-opacity-focus != null) { @include background-opacity($ui-background-color-focus, $ui-background-opacity-focus); @if $include-ie { // Background opacity uses a filter in IE8, which overrides the rotation filter // Unfortunately rotation and opacity cannot coexist, or the tab background // turns black, so we will just have to do without background opacity in IE8 &.#{$prefix}tab-rotate-left { .#{$prefix}ie8 & { @include ie-tab-rotate(3); } } &.#{$prefix}tab-rotate-right { .#{$prefix}ie8 & { @include ie-tab-rotate(1); } } } } @else { background-color: $ui-background-color-focus; } @if $ui-plain-background-color-focus != $ui-background-color-focus { .#{$prefix}tab-bar-plain & { background-color: $ui-plain-background-color-focus; } } @if $ui-plain-border-color-focus != $ui-border-color-focus { .#{$prefix}tab-bar-plain & { border-color: $ui-plain-border-color-focus; } } @if $ui-outline-width-focus != 0 { @include css-outline( $ui-outline-width-focus, $ui-outline-style-focus, $ui-outline-color-focus, $ui-outline-offset-focus ) } @if not is-null($ui-body-outline-width-focus) and $ui-body-outline-width-focus != 0 { .#{$prefix}tab-button:before { // use pseudo element for displaying focus outline instead of putting it on // the tab-wrap element so that it does not overlap the close icon position: absolute; content: ' '; top: 0; right: 0; bottom: 0; left: 0; pointer-events: none; $outline-color: if(not is-null($ui-body-outline-color-focus), $ui-body-outline-color-focus, $color); $outline-style: if(not is-null($ui-body-outline-style-focus), $ui-body-outline-style-focus, dotted); outline: $ui-body-outline-width-focus $outline-style $outline-color; } &.#{$prefix}tab-closable { .#{$prefix}tab-button:before { // make sure the focus border does not overlap the close icon right: $ui-closable-icon-width + $ui-closable-icon-spacing; } } } .#{$prefix}tab-inner-#{$ui} { @if $ui-color-focus != $ui-color { color: $ui-color-focus; } @if ($ui-plain-color-focus != null) and ($ui-plain-color-focus != $ui-color-focus) { .#{$prefix}tab-bar-plain & { color: $ui-plain-color-focus; } } @if $ui-font-weight-focus != $ui-font-weight { font-weight: $ui-font-weight-focus; } @if $ui-font-size-focus != $ui-font-size { font-size: $ui-font-size-focus; } @if $ui-font-family-focus != $ui-font-family { font-family: $ui-font-family-focus; } } .#{$prefix}tab-icon-el { @if $ui-glyph-color-focus != $ui-glyph-color { color: $ui-glyph-color-focus; // In IE8 and below when a glyph contains partially transparent pixels, we // can't apply an opacity filter to the glyph element, because IE8m will render // the partially transparent pixels of the glyph as black. To work around this, // we emulate the approximate color that the glyph would have if it had opacity // applied by mixing the glyph color with the tab's background-color. @if $ui-background-color != transparent { .#{$prefix}ie8m & { color: mix($ui-glyph-color-focus, $ui-background-color-focus, $ui-glyph-opacity * 100); } } } @if ($ui-plain-glyph-color-focus != null) and ($ui-plain-glyph-color-focus != $ui-glyph-color-focus) { .#{$prefix}tab-bar-plain & { color: $ui-plain-glyph-color-focus; } } } } .#{$prefix}tab-over { &.#{$prefix}tab-#{$ui} { border-color: $ui-border-color-over; @if ($ui-opacity-over != null) { @include opacity($ui-opacity-over); @if $include-ie { &.#{$prefix}tab-rotate-left { .#{$prefix}ie8 & { @include ie-tab-alpharotate($ui-opacity-over, 3); } } &.#{$prefix}tab-rotate-right { .#{$prefix}ie8 & { @include ie-tab-alpharotate($ui-opacity-over, 1); } } } } @if ($ui-background-opacity-over != null) { @include background-opacity($ui-background-color-over, $ui-background-opacity-over); @if $include-ie { // Background opacity uses a filter in IE8, which overrides the rotation filter // Unfortunately rotation and opacity cannot coexist, or the tab background // turns black, so we will just have to do without background opacity in IE8 &.#{$prefix}tab-rotate-left { .#{$prefix}ie8 & { @include ie-tab-rotate(3); } } &.#{$prefix}tab-rotate-right { .#{$prefix}ie8 & { @include ie-tab-rotate(1); } } } } @else { background-color: $ui-background-color-over; } @if $ui-plain-background-color-over != $ui-background-color-over { .#{$prefix}tab-bar-plain & { background-color: $ui-plain-background-color-over; } } @if $ui-plain-border-color-over != $ui-border-color-over { .#{$prefix}tab-bar-plain & { border-color: $ui-plain-border-color-over; } } .#{$prefix}tab-inner-#{$ui} { @if $ui-color-over != $ui-color { color: $ui-color-over; } @if ($ui-plain-color-over != null) and ($ui-plain-color-over != $ui-color-over) { .#{$prefix}tab-bar-plain & { color: $ui-plain-color-over; } } @if $ui-font-weight-over != $ui-font-weight { font-weight: $ui-font-weight-over; } @if $ui-font-size-over != $ui-font-size { font-size: $ui-font-size-over; } @if $ui-font-family-over != $ui-font-family { font-family: $ui-font-family-over; } } .#{$prefix}tab-icon-el { @if $ui-glyph-color-over != $ui-glyph-color { color: $ui-glyph-color-over; // In IE8 and below when a glyph contains partially transparent pixels, we // can't apply an opacity filter to the glyph element, because IE8m will render // the partially transparent pixels of the glyph as black. To work around this, // we emulate the approximate color that the glyph would have if it had opacity // applied by mixing the glyph color with the tab's background-color. @if $ui-background-color-over != transparent { .#{$prefix}ie8m & { color: mix($ui-glyph-color-over, $ui-background-color-over, $ui-glyph-opacity * 100); } } } @if ($ui-plain-glyph-color-over != null) and ($ui-plain-glyph-color-over != $ui-glyph-color-over) { .#{$prefix}tab-bar-plain & { color: $ui-plain-glyph-color-over; } } } } @if not is-null($ui-background-gradient-over) { &.#{$prefix}tab-#{$ui}-top, &.#{$prefix}tab-#{$ui}-left, &.#{$prefix}tab-#{$ui}-right { @include background-gradient($ui-background-color-over, $ui-background-gradient-over, top); } &.#{$prefix}tab-#{$ui}-bottom { @include background-gradient($ui-background-color-over, $ui-background-gradient-over, bottom); } } } .#{$prefix}tab-focus.#{$prefix}tab-over { &.#{$prefix}tab-#{$ui} { border-color: $ui-border-color-focus-over; @if ($ui-opacity-focus-over != null) { @include opacity($ui-opacity-focus-over); @if $include-ie { &.#{$prefix}tab-rotate-left { .#{$prefix}ie8 & { @include ie-tab-alpharotate($ui-opacity-focus-over, 3); } } &.#{$prefix}tab-rotate-right { .#{$prefix}ie8 & { @include ie-tab-alpharotate($ui-opacity-focus-over, 1); } } } } @if ($ui-background-opacity-focus-over != null) { @include background-opacity($ui-background-color-focus-over, $ui-background-opacity-focus-over); @if $include-ie { // Background opacity uses a filter in IE8, which overrides the rotation filter // Unfortunately rotation and opacity cannot coexist, or the tab background // turns black, so we will just have to do without background opacity in IE8 &.#{$prefix}tab-rotate-left { .#{$prefix}ie8 & { @include ie-tab-rotate(3); } } &.#{$prefix}tab-rotate-right { .#{$prefix}ie8 & { @include ie-tab-rotate(1); } } } } @else { background-color: $ui-background-color-focus-over; } @if $ui-plain-background-color-focus-over != $ui-background-color-focus-over { .#{$prefix}tab-bar-plain & { background-color: $ui-plain-background-color-focus-over; } } @if $ui-plain-border-color-focus-over != $ui-border-color-focus-over { .#{$prefix}tab-bar-plain & { border-color: $ui-plain-border-color-focus-over; } } .#{$prefix}tab-inner-#{$ui} { @if $ui-color-focus-over != $ui-color-over { color: $ui-color-focus-over; } @if ($ui-plain-color-focus-over != null) and ($ui-plain-color-focus-over != $ui-color-focus-over) { .#{$prefix}tab-bar-plain & { color: $ui-plain-color-focus-over; } } @if $ui-font-weight-focus-over != $ui-font-weight-over { font-weight: $ui-font-weight-focus-over; } @if $ui-font-size-focus-over != $ui-font-size-over { font-size: $ui-font-size-focus-over; } @if $ui-font-family-focus-over != $ui-font-family-over { font-family: $ui-font-family-focus-over; } } .#{$prefix}tab-icon-el { @if $ui-glyph-color-focus-over != $ui-glyph-color-over { color: $ui-glyph-color-focus-over; // In IE8 and below when a glyph contains partially transparent pixels, we // can't apply an opacity filter to the glyph element, because IE8m will render // the partially transparent pixels of the glyph as black. To work around this, // we emulate the approximate color that the glyph would have if it had opacity // applied by mixing the glyph color with the tab's background-color. @if $ui-background-color-focus-over != transparent { .#{$prefix}ie8m & { color: mix($ui-glyph-color-focus-over, $ui-background-color-focus-over, $ui-glyph-opacity * 100); } } } @if ($ui-plain-glyph-color-focus-over != null) and ($ui-plain-glyph-color-focus-over != $ui-glyph-color-focus-over) { .#{$prefix}tab-bar-plain & { color: $ui-plain-glyph-color-focus-over; } } } } @if not is-null($ui-background-gradient-focus-over) and ($ui-background-gradient-focus-over != $ui-background-gradient-over or $ui-background-color-focus-over != $ui-background-color-over) { &.#{$prefix}tab-#{$ui}-top, &.#{$prefix}tab-#{$ui}-left, &.#{$prefix}tab-#{$ui}-right { @include background-gradient($ui-background-color-focus-over, $ui-background-gradient-focus-over, top); } &.#{$prefix}tab-#{$ui}-bottom { @include background-gradient($ui-background-color-focus-over, $ui-background-gradient-focus-over, bottom); } } } // add x-tab class to increase specificity over .x-tab-focus.x-tab-over .#{$prefix}tab.#{$prefix}tab-active { &.#{$prefix}tab-#{$ui} { border-color: $ui-border-color-active; @if ($ui-opacity-active != null) { @include opacity($ui-opacity-active); @if $include-ie { &.#{$prefix}tab-rotate-left { .#{$prefix}ie8 & { @include ie-tab-alpharotate($ui-opacity-active, 3); } } &.#{$prefix}tab-rotate-right { .#{$prefix}ie8 & { @include ie-tab-alpharotate($ui-opacity-active, 1); } } } } @if ($ui-background-opacity-active != null) { @include background-opacity($ui-background-color-active, $ui-background-opacity-active); @if $include-ie { // Background opacity uses a filter in IE8, which overrides the rotation filter // Unfortunately rotation and opacity cannot coexist, or the tab background // turns black, so we will just have to do without background opacity in IE8 &.#{$prefix}tab-rotate-left { .#{$prefix}ie8 & { @include ie-tab-rotate(3); } } &.#{$prefix}tab-rotate-right { .#{$prefix}ie8 & { @include ie-tab-rotate(1); } } } } @else { background-color: $ui-background-color-active; } @if $ui-plain-background-color-active != $ui-background-color-active { .#{$prefix}tab-bar-plain & { background-color: $ui-plain-background-color-active; } } @if $ui-plain-border-color-active != $ui-border-color-active { .#{$prefix}tab-bar-plain & { border-color: $ui-plain-border-color-active; } } .#{$prefix}tab-inner-#{$ui} { @if $ui-color-active != $ui-color { color: $ui-color-active; } @if ($ui-plain-color-active != null) and ($ui-plain-color-active != $ui-color-active) { .#{$prefix}tab-bar-plain & { color: $ui-plain-color-active; } } @if $ui-font-weight-active != $ui-font-weight { font-weight: $ui-font-weight-active; } @if $ui-font-size-active != $ui-font-size { font-size: $ui-font-size-active; } @if $ui-font-family-active != $ui-font-family { font-family: $ui-font-family-active; } } .#{$prefix}tab-icon-el { color: $ui-glyph-color-active; // In IE8 and below when a glyph contains partially transparent pixels, we // can't apply an opacity filter to the glyph element, because IE8m will render // the partially transparent pixels of the glyph as black. To work around this, // we emulate the approximate color that the glyph would have if it had opacity // applied by mixing the glyph color with the tab's background-color. @if $ui-background-color-active != transparent { .#{$prefix}ie8 & { color: mix($ui-glyph-color-active, $ui-background-color-active, $ui-glyph-opacity * 100); } } @if ($ui-plain-glyph-color-active != null) and ($ui-plain-glyph-color-active != $ui-glyph-color-active) { .#{$prefix}tab-bar-plain & { color: $ui-plain-glyph-color-active; } } } } @if not is-null($ui-background-gradient-active) { &.#{$prefix}tab-#{$ui}-top, &.#{$prefix}tab-#{$ui}-left, &.#{$prefix}tab-#{$ui}-right { @include background-gradient($ui-background-color-active, $ui-background-gradient-active, top); } &.#{$prefix}tab-#{$ui}-bottom { @include background-gradient($ui-background-color-active, $ui-background-gradient-active, bottom); } } } .#{$prefix}tab-focus.#{$prefix}tab-active { &.#{$prefix}tab-#{$ui} { border-color: $ui-border-color-focus-active; @if ($ui-opacity-focus-active != null) { @include opacity($ui-opacity-focus-active); @if $include-ie { &.#{$prefix}tab-rotate-left { .#{$prefix}ie8 & { @include ie-tab-alpharotate($ui-opacity-focus-active, 3); } } &.#{$prefix}tab-rotate-right { .#{$prefix}ie8 & { @include ie-tab-alpharotate($ui-opacity-focus-active, 1); } } } } @if ($ui-background-opacity-focus-active != null) { @include background-opacity($ui-background-color-focus-active, $ui-background-opacity-focus-active); @if $include-ie { // Background opacity uses a filter in IE8, which overrides the rotation filter // Unfortunately rotation and opacity cannot coexist, or the tab background // turns black, so we will just have to do without background opacity in IE8 &.#{$prefix}tab-rotate-left { .#{$prefix}ie8 & { @include ie-tab-rotate(3); } } &.#{$prefix}tab-rotate-right { .#{$prefix}ie8 & { @include ie-tab-rotate(1); } } } } @else { background-color: $ui-background-color-focus-active; } @if $ui-plain-background-color-focus-active != $ui-background-color-focus-active { .#{$prefix}tab-bar-plain & { background-color: $ui-plain-background-color-focus-active; } } @if $ui-plain-border-color-focus-active != $ui-border-color-focus-active { .#{$prefix}tab-bar-plain & { border-color: $ui-plain-border-color-focus-active; } } .#{$prefix}tab-inner-#{$ui} { @if $ui-color-focus-active != $ui-color-active { color: $ui-color-focus-active; } @if ($ui-plain-color-focus-active != null) and ($ui-plain-color-focus-active != $ui-color-focus-active) { .#{$prefix}tab-bar-plain & { color: $ui-plain-color-focus-active; } } @if $ui-font-weight-focus-active != $ui-font-weight-active { font-weight: $ui-font-weight-focus-active; } @if $ui-font-size-focus-active != $ui-font-size-active { font-size: $ui-font-size-focus-active; } @if $ui-font-family-focus-active != $ui-font-family-active { font-family: $ui-font-family-focus-active; } } .#{$prefix}tab-icon-el { @if $ui-glyph-color-focus-active != $ui-glyph-color-active { color: $ui-glyph-color-focus-active; // In IE8 and below when a glyph contains partially transparent pixels, we // can't apply an opacity filter to the glyph element, because IE8m will render // the partially transparent pixels of the glyph as black. To work around this, // we emulate the approximate color that the glyph would have if it had opacity // applied by mixing the glyph color with the tab's background-color. @if $ui-background-color-active != transparent { .#{$prefix}ie8 & { color: mix($ui-glyph-color-focus-active, $ui-background-color-focus-active, $ui-glyph-opacity * 100); } } } @if ($ui-plain-glyph-color-focus-active != null) and ($ui-plain-glyph-color-focus-active != $ui-glyph-color-focus-active) { .#{$prefix}tab-bar-plain & { color: $ui-plain-glyph-color-focus-active; } } } } @if not is-null($ui-background-gradient-focus-active) and ($ui-background-gradient-focus-active != $ui-background-gradient-active or $ui-background-color-focus-active != $ui-background-color-active) { &.#{$prefix}tab-#{$ui}-top, &.#{$prefix}tab-#{$ui}-left, &.#{$prefix}tab-#{$ui}-right { @include background-gradient($ui-background-color-focus-active, $ui-background-gradient-focus-active, top); } &.#{$prefix}tab-#{$ui}-bottom { @include background-gradient($ui-background-color-focus-active, $ui-background-gradient-focus-active, bottom); } } } // add x-tab class to increase specificity over .x-tab.x-tab-active/.x-focus.x-active .#{$prefix}tab.#{$prefix}tab-disabled { &.#{$prefix}tab-#{$ui} { border-color: $ui-border-color-disabled; @if $ui-opacity-disabled != null { @include opacity($ui-opacity-disabled); @if $include-ie { &.#{$prefix}tab-rotate-left { .#{$prefix}ie8 & { @include ie-tab-alpharotate($ui-opacity-disabled, 3); } } &.#{$prefix}tab-rotate-right { .#{$prefix}ie8 & { @include ie-tab-alpharotate($ui-opacity-disabled, 1); } } } } @if $ui-background-opacity-disabled != null { @include background-opacity($ui-background-color-disabled, $ui-background-opacity-disabled); @if $include-ie { // Background opacity uses a filter in IE8, which overrides the rotation filter // Unfortunately rotation and opacity cannot coexist, or the tab background // turns black, so we will just have to do without background opacity in IE8 &.#{$prefix}tab-rotate-left { .#{$prefix}ie8 & { @include ie-tab-rotate(3); } } &.#{$prefix}tab-rotate-right { .#{$prefix}ie8 & { @include ie-tab-rotate(1); } } } } @else { background-color: $ui-background-color-disabled; } @if $ui-plain-background-color-disabled != $ui-background-color-disabled { .#{$prefix}tab-bar-plain & { background-color: $ui-plain-background-color-disabled; } } @if $ui-plain-border-color-disabled != $ui-border-color-disabled { .#{$prefix}tab-bar-plain & { border-color: $ui-plain-border-color-disabled; } } @if not is-null($ui-cursor-disabled) { cursor: $ui-cursor-disabled; } .#{$prefix}tab-inner-#{$ui} { @if $ui-color-disabled != $ui-color { color: $ui-color-disabled; } @if ($ui-plain-color-disabled != null) and ($ui-plain-color-disabled != $ui-color-disabled) { .#{$prefix}tab-bar-plain & { color: $ui-plain-color-disabled; } } @if $ui-font-weight-disabled != $ui-font-weight { font-weight: $ui-font-weight-disabled; } @if $ui-font-size-disabled != $ui-font-size { font-size: $ui-font-size-disabled; } @if $ui-font-family-disabled != $ui-font-family { font-family: $ui-font-family-disabled; } @if $ui-text-opacity-disabled != 1 { @include opacity($ui-text-opacity-disabled); } } @if $ui-icon-opacity-disabled != 1 { .#{$prefix}tab-icon-el-#{$ui} { @include opacity($ui-icon-opacity-disabled); } } .#{$prefix}tab-icon-el { color: $ui-glyph-color-disabled; @if $ui-glyph-opacity-disabled != 1 { // do not use the opacity mixin because we do not want IE's filter version of // opacity to be included. We emulate the opacity setting in IE8m by mixing // the icon color into the background color. (see below) opacity: $ui-glyph-opacity-disabled; } filter: none; // override opacity from tab-icon-el // In IE8 and below when a glyph contains partially transparent pixels, we // can't apply an opacity filter to the glyph element, because IE8m will render // the partially transparent pixels of the glyph as black. To work around this, // we emulate the approximate color that the glyph would have if it had opacity // applied by mixing the glyph color with the tab's background-color. @if $ui-background-color != transparent { .#{$prefix}ie8 & { color: mix($ui-glyph-color-disabled, $ui-background-color-disabled, $ui-glyph-opacity-disabled * 100); } } @if ($ui-plain-glyph-color-disabled != null) and ($ui-plain-glyph-color-disabled != $ui-glyph-color-disabled) { .#{$prefix}tab-bar-plain & { color: $ui-plain-glyph-color-disabled; } } } } @if not is-null($ui-background-gradient-disabled) { &.#{$prefix}tab-#{$ui}-top, &.#{$prefix}tab-#{$ui}-left, &.#{$prefix}tab-#{$ui}-right { @include background-gradient($ui-background-color-disabled, $ui-background-gradient-disabled, top); } &.#{$prefix}tab-#{$ui}-bottom { @include background-gradient($ui-background-color-disabled, $ui-background-gradient-disabled, bottom); } } } @if $include-slicer-border-radius { .#{$prefix}nbr .#{$prefix}tab-#{$ui} { background-image: none; } $states: (over '.#{$prefix}tab-over' 'tab-over') (focus '.#{$prefix}tab-focus' 'tab-focus') (focus-over '.#{$prefix}tab-focus.#{$prefix}tab-over' 'tab-focus.#{$prefix}tab-over') (active '.#{$prefix}tab.#{$prefix}tab-active' 'tab-active') (focus-active '.#{$prefix}tab-focus.#{$prefix}tab-active' 'tab-focus.#{$prefix}tab-active') (disabled '.#{$prefix}tab.#{$prefix}tab-disabled' 'tab-disabled'); @each $side in top right bottom left { @each $item in $states { $state: nth($item, 1); $cls: nth($item, 2); $id-prefix: nth($item, 3); #{$cls} { .#{$prefix}tab-#{$ui}-#{$side}-tl, .#{$prefix}tab-#{$ui}-#{$side}-bl, .#{$prefix}tab-#{$ui}-#{$side}-tr, .#{$prefix}tab-#{$ui}-#{$side}-br, .#{$prefix}tab-#{$ui}-#{$side}-tc, .#{$prefix}tab-#{$ui}-#{$side}-bc { background-image: slicer-corner-sprite('#{$id-prefix}.#{$prefix}tab-#{$ui}-#{$side}', 'tab/tab-#{$ui}-#{$side}-#{$state}-corners'); } .#{$prefix}tab-#{$ui}-#{$side}-ml, .#{$prefix}tab-#{$ui}-#{$side}-mr { background-image: slicer-sides-sprite('#{$id-prefix}.#{$prefix}tab-#{$ui}-#{$side}', 'tab/tab-#{$ui}-#{$side}-#{$state}-sides'); } .#{$prefix}tab-#{$ui}-#{$side}-mc { background-repeat: repeat-x; background-image: slicer-frame-background-image('#{$id-prefix}.#{$prefix}tab-#{$ui}-#{$side}', 'tab/tab-#{$ui}-#{$side}-#{$state}-fbg'); } } $frame: slicer-frame('#{$id-prefix}.#{$prefix}tab-#{$ui}-#{$side}', $frame-size); } } .#{$prefix}tab-#{$ui}-tl, .#{$prefix}tab-#{$ui}-bl, .#{$prefix}tab-#{$ui}-tr, .#{$prefix}tab-#{$ui}-br { // hack to make IE8 render partially transparent pixels in corners of rotated tabs: -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF)"; } } .#{$prefix}tab-#{$ui} { .#{$prefix}tab-close-btn { top: $ui-closable-icon-top; right: $ui-closable-icon-right; width: $ui-closable-icon-width; height: $ui-closable-icon-height; @if $enable-font-icons and ($ui-closable-icon-glyph != null) { @include font-icon($ui-closable-icon-glyph); color: $ui-closable-icon-glyph-color; @if $ui-plain-closable-icon-glyph-color != $ui-closable-icon-glyph-color { .#{$prefix}tab-bar-plain & { color: $ui-plain-closable-icon-glyph-color; } } } @else { background: theme-background-image('tab/tab-#{$ui}-close') 0 0; } @if $tab-closable-icon-opacity != 1 { @include opacity($tab-closable-icon-opacity); } } .#{$prefix}tab-close-btn-over { @if $tab-closable-icon-opacity-over != $tab-closable-icon-opacity { @include opacity($tab-closable-icon-opacity-over); } @if $tab-closable-icon-include-hover-background-position { background-position: (-$tab-closable-icon-width) 0; } } @if $tab-closable-icon-include-pressed-background-position { .#{$prefix}tab-close-btn-pressed { background-position: (-$ui-closable-icon-width * 2) 0; } } &.#{$prefix}tab-focus { @if $enable-font-icons and ($ui-closable-icon-glyph != null) { .#{$prefix}tab-close-btn { color: $ui-closable-icon-glyph-color-focus; @if $ui-plain-closable-icon-glyph-color-focus != $ui-closable-icon-glyph-color-focus { .#{$prefix}tab-bar-plain & { color: $ui-plain-closable-icon-glyph-color-focus; } } } } } &.#{$prefix}tab-over { @if $enable-font-icons and ($ui-closable-icon-glyph != null) { .#{$prefix}tab-close-btn { color: $ui-closable-icon-glyph-color-over; @if $ui-plain-closable-icon-glyph-color-over != $ui-closable-icon-glyph-color-over { .#{$prefix}tab-bar-plain & { color: $ui-plain-closable-icon-glyph-color-over; } } } } } &.#{$prefix}tab-focus.#{$prefix}tab-over { @if $enable-font-icons and ($ui-closable-icon-glyph != null) { .#{$prefix}tab-close-btn { color: $ui-closable-icon-glyph-color-focus-over; @if $ui-plain-closable-icon-glyph-color-focus-over != $ui-closable-icon-glyph-color-focus-over { .#{$prefix}tab-bar-plain & { color: $ui-plain-closable-icon-glyph-color-focus-over; } } } } } &.#{$prefix}tab-active { @if $enable-font-icons and ($ui-closable-icon-glyph != null) { .#{$prefix}tab-close-btn { color: $ui-closable-icon-glyph-color-active; @if $ui-plain-closable-icon-glyph-color-active != $ui-closable-icon-glyph-color-active { .#{$prefix}tab-bar-plain & { color: $ui-plain-closable-icon-glyph-color-active; } } } } @else { .#{$prefix}tab-close-btn { background-position: 0 (-$tab-closable-icon-height); } @if $tab-closable-icon-include-hover-background-position { .#{$prefix}tab-close-btn-over { background-position: (-$tab-closable-icon-width) (-$tab-closable-icon-height); } } @if $tab-closable-icon-include-pressed-background-position { .#{$prefix}tab-close-btn-pressed { background-position: (-$ui-closable-icon-width * 2) (-$ui-closable-icon-height); } } } } &.#{$prefix}tab-focus.#{$prefix}tab-active { @if $enable-font-icons and ($ui-closable-icon-glyph != null) { .#{$prefix}tab-close-btn { color: $ui-closable-icon-glyph-color-focus-active; @if $ui-plain-closable-icon-glyph-color-focus-active != $ui-closable-icon-glyph-color-focus-active { .#{$prefix}tab-bar-plain & { color: $ui-plain-closable-icon-glyph-color-focus-active; } } } } } &.#{$prefix}tab-disabled { .#{$prefix}tab-close-btn { @if $enable-font-icons and ($ui-closable-icon-glyph != null) { color: $ui-closable-icon-glyph-color-disabled; @if $ui-plain-closable-icon-glyph-color-disabled != $ui-closable-icon-glyph-color-disabled { .#{$prefix}tab-bar-plain & { color: $ui-plain-closable-icon-glyph-color-disabled; } } } @if $tab-closable-icon-opacity-disabled != $tab-closable-icon-opacity or $tab-closable-icon-opacity-disabled != $tab-closable-icon-opacity-over { @include opacity($tab-closable-icon-opacity-disabled); } @if $tab-closable-icon-include-hover-background-position { background-position: 0 0; } } } } @if $include-rtl { .#{$prefix}rtl.#{$prefix}tab-#{$ui} .#{$prefix}tab-close-btn { right: auto; left: $ui-closable-icon-right; } } .#{$prefix}tab-closable.#{$prefix}tab-#{$ui} .#{$prefix}tab-button { padding-right: $ui-closable-icon-width + $ui-closable-icon-spacing; } @if $include-rtl { .#{$prefix}rtl.#{$prefix}tab-closable.#{$prefix}tab-#{$ui} .#{$prefix}tab-button { padding-right: 0px; padding-left: $ui-closable-icon-width + $ui-closable-icon-spacing; } } $stretch: slicer-background-stretch(tab-#{$ui}-top, bottom); $stretch: slicer-background-stretch(tab-#{$ui}-right, left); $stretch: slicer-background-stretch(tab-#{$ui}-bottom, top); $stretch: slicer-background-stretch(tab-#{$ui}-left, right); $stretch: slicer-background-stretch('tab-focus.#{$prefix}tab-#{$ui}-top', bottom); $stretch: slicer-background-stretch('tab-focus.#{$prefix}tab-#{$ui}-right', left); $stretch: slicer-background-stretch('tab-focus.#{$prefix}tab-#{$ui}-bottom', top); $stretch: slicer-background-stretch('tab-focus.#{$prefix}tab-#{$ui}-left', right); $stretch: slicer-background-stretch('tab-over.#{$prefix}tab-#{$ui}-top', bottom); $stretch: slicer-background-stretch('tab-over.#{$prefix}tab-#{$ui}-right', left); $stretch: slicer-background-stretch('tab-over.#{$prefix}tab-#{$ui}-bottom', top); $stretch: slicer-background-stretch('tab-over.#{$prefix}tab-#{$ui}-left', right); $stretch: slicer-background-stretch('tab-active.#{$prefix}tab-#{$ui}-top', bottom); $stretch: slicer-background-stretch('tab-active.#{$prefix}tab-#{$ui}-right', left); $stretch: slicer-background-stretch('tab-active.#{$prefix}tab-#{$ui}-bottom', top); $stretch: slicer-background-stretch('tab-active.#{$prefix}tab-#{$ui}-left', right); $stretch: slicer-background-stretch('tab-focus.#{$prefix}tab-over.#{$prefix}tab-#{$ui}-top', bottom); $stretch: slicer-background-stretch('tab-focus.#{$prefix}tab-over.#{$prefix}tab-#{$ui}-right', left); $stretch: slicer-background-stretch('tab-focus.#{$prefix}tab-over.#{$prefix}tab-#{$ui}-bottom', top); $stretch: slicer-background-stretch('tab-focus.#{$prefix}tab-over.#{$prefix}tab-#{$ui}-left', right); $stretch: slicer-background-stretch('tab-focus.#{$prefix}tab-active.#{$prefix}tab-#{$ui}-top', bottom); $stretch: slicer-background-stretch('tab-focus.#{$prefix}tab-active.#{$prefix}tab-#{$ui}-right', left); $stretch: slicer-background-stretch('tab-focus.#{$prefix}tab-active.#{$prefix}tab-#{$ui}-bottom', top); $stretch: slicer-background-stretch('tab-focus.#{$prefix}tab-active.#{$prefix}tab-#{$ui}-left', right); $stretch: slicer-background-stretch('tab-disabled.#{$prefix}tab-#{$ui}-top', bottom); $stretch: slicer-background-stretch('tab-disabled.#{$prefix}tab-#{$ui}-right', left); $stretch: slicer-background-stretch('tab-disabled.#{$prefix}tab-#{$ui}-bottom', top); $stretch: slicer-background-stretch('tab-disabled.#{$prefix}tab-#{$ui}-left', right); @include x-slicer('tab-focus.#{$prefix}tab-#{$ui}-top'); @include x-slicer('tab-focus.#{$prefix}tab-#{$ui}-right'); @include x-slicer('tab-focus.#{$prefix}tab-#{$ui}-bottom'); @include x-slicer('tab-focus.#{$prefix}tab-#{$ui}-left'); @include x-slicer('tab-over.#{$prefix}tab-#{$ui}-top'); @include x-slicer('tab-over.#{$prefix}tab-#{$ui}-right'); @include x-slicer('tab-over.#{$prefix}tab-#{$ui}-bottom'); @include x-slicer('tab-over.#{$prefix}tab-#{$ui}-left'); @include x-slicer('tab-active.#{$prefix}tab-#{$ui}-top'); @include x-slicer('tab-active.#{$prefix}tab-#{$ui}-right'); @include x-slicer('tab-active.#{$prefix}tab-#{$ui}-bottom'); @include x-slicer('tab-active.#{$prefix}tab-#{$ui}-left'); @include x-slicer('tab-focus.#{$prefix}tab-over.#{$prefix}tab-#{$ui}-top'); @include x-slicer('tab-focus.#{$prefix}tab-over.#{$prefix}tab-#{$ui}-right'); @include x-slicer('tab-focus.#{$prefix}tab-over.#{$prefix}tab-#{$ui}-bottom'); @include x-slicer('tab-focus.#{$prefix}tab-over.#{$prefix}tab-#{$ui}-left'); @include x-slicer('tab-focus.#{$prefix}tab-active.#{$prefix}tab-#{$ui}-top'); @include x-slicer('tab-focus.#{$prefix}tab-active.#{$prefix}tab-#{$ui}-right'); @include x-slicer('tab-focus.#{$prefix}tab-active.#{$prefix}tab-#{$ui}-bottom'); @include x-slicer('tab-focus.#{$prefix}tab-active.#{$prefix}tab-#{$ui}-left'); @include x-slicer('tab-disabled.#{$prefix}tab-#{$ui}-top'); @include x-slicer('tab-disabled.#{$prefix}tab-#{$ui}-right'); @include x-slicer('tab-disabled.#{$prefix}tab-#{$ui}-bottom'); @include x-slicer('tab-disabled.#{$prefix}tab-#{$ui}-left');}