outlookemailmicrosoft-teamsdiscordmessengercustom-servicesmacoslinuxwindowsinboxwhatsappicloudtweetdeckhipchattelegramhangoutsslackgmailskypefacebook-workplace
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
708 lines
15 KiB
708 lines
15 KiB
/** |
|
* @class Ext.tab.Tab |
|
*/ |
|
|
|
/** |
|
* @var {color} |
|
* The base color of Tabs |
|
*/ |
|
$tab-base-color: $base-color !default; |
|
|
|
/** |
|
* @var {color} |
|
* The base color of focused Tabs |
|
*/ |
|
$tab-base-color-focus: $tab-base-color !default; |
|
|
|
/** |
|
* @var {color} |
|
* The base color of hovered Tabs |
|
*/ |
|
$tab-base-color-over: $tab-base-color !default; |
|
|
|
/** |
|
* @var {color} |
|
* The base color of the active Tabs |
|
*/ |
|
$tab-base-color-active: $tab-base-color !default; |
|
|
|
/** |
|
* @var {color} |
|
* The base color of focused hovered Tabs |
|
*/ |
|
$tab-base-color-focus-over: $tab-base-color-over !default; |
|
|
|
/** |
|
* @var {color} |
|
* The base color of the active Tab when focused |
|
*/ |
|
$tab-base-color-focus-active: $tab-base-color-active !default; |
|
|
|
/** |
|
* @var {color} |
|
* The base color of disabled Tabs |
|
*/ |
|
$tab-base-color-disabled: $tab-base-color !default; |
|
|
|
/** |
|
* @var {color} |
|
* The text color of Tabs |
|
*/ |
|
$tab-color: $color !default; |
|
|
|
/** |
|
* @var {color} |
|
* The text color of focused Tabs |
|
*/ |
|
$tab-color-focus: $tab-color !default; |
|
|
|
/** |
|
* @var {color} |
|
* The text color of hovered Tabs |
|
*/ |
|
$tab-color-over: $tab-color !default; |
|
|
|
/** |
|
* @var {color} |
|
* The text color of the active Tab |
|
*/ |
|
$tab-color-active: $tab-color !default; |
|
|
|
/** |
|
* @var {color} |
|
* The text color of focused hovered Tabs |
|
*/ |
|
$tab-color-focus-over: $tab-color-over !default; |
|
|
|
/** |
|
* @var {color} |
|
* The text color of the active Tab when focused |
|
*/ |
|
$tab-color-focus-active: $tab-color-active !default; |
|
|
|
/** |
|
* @var {color} |
|
* The text color of disabled Tabs |
|
*/ |
|
$tab-color-disabled: $tab-color !default; |
|
|
|
/** |
|
* @var {number} |
|
* The font-size of Tabs |
|
*/ |
|
$tab-font-size: $font-size !default; |
|
|
|
/** |
|
* @var {number} |
|
* The font-size of focused Tabs |
|
*/ |
|
$tab-font-size-focus: $tab-font-size !default; |
|
|
|
/** |
|
* @var {number} |
|
* The font-size of hovered Tabs |
|
*/ |
|
$tab-font-size-over: $tab-font-size !default; |
|
|
|
/** |
|
* @var {number} |
|
* The font-size of the active Tab |
|
*/ |
|
$tab-font-size-active: $tab-font-size !default; |
|
|
|
/** |
|
* @var {number} |
|
* The font-size of focused hovered Tabs |
|
*/ |
|
$tab-font-size-focus-over: $tab-font-size-over !default; |
|
|
|
/** |
|
* @var {number} |
|
* The font-size of the active Tab when focused |
|
*/ |
|
$tab-font-size-focus-active: $tab-font-size-active !default; |
|
|
|
/** |
|
* @var {number} |
|
* The font-size of disabled Tabs |
|
*/ |
|
$tab-font-size-disabled: $tab-font-size !default; |
|
|
|
/** |
|
* @var {string} |
|
* The font-family of Tabs |
|
*/ |
|
$tab-font-family: $font-family !default; |
|
|
|
/** |
|
* @var {string} |
|
* The font-family of focused Tabs |
|
*/ |
|
$tab-font-family-focus: $tab-font-family !default; |
|
|
|
/** |
|
* @var {string} |
|
* The font-family of hovered Tabs |
|
*/ |
|
$tab-font-family-over: $tab-font-family !default; |
|
|
|
/** |
|
* @var {string} |
|
* The font-family of the active Tab |
|
*/ |
|
$tab-font-family-active: $tab-font-family !default; |
|
|
|
/** |
|
* @var {string} |
|
* The font-family of focused hovered Tabs |
|
*/ |
|
$tab-font-family-focus-over: $tab-font-family-over !default; |
|
|
|
/** |
|
* @var {string} |
|
* The font-family of the active Tab when focused |
|
*/ |
|
$tab-font-family-focus-active: $tab-font-family-active !default; |
|
|
|
/** |
|
* @var {string} |
|
* The font-family of disabled Tabs |
|
*/ |
|
$tab-font-family-disabled: $tab-font-family !default; |
|
|
|
/** |
|
* @var {string} |
|
* The font-weight of Tabs |
|
*/ |
|
$tab-font-weight: $font-weight-bold !default; |
|
|
|
/** |
|
* @var {string} |
|
* The font-weight of focused Tabs |
|
*/ |
|
$tab-font-weight-focus: $tab-font-weight !default; |
|
|
|
/** |
|
* @var {string} |
|
* The font-weight of hovered Tabs |
|
*/ |
|
$tab-font-weight-over: $tab-font-weight !default; |
|
|
|
/** |
|
* @var {string} |
|
* The font-weight of the active Tab |
|
*/ |
|
$tab-font-weight-active: $tab-font-weight !default; |
|
|
|
/** |
|
* @var {string} |
|
* The font-weight of focused hovered Tabs |
|
*/ |
|
$tab-font-weight-focus-over: $tab-font-weight-over !default; |
|
|
|
/** |
|
* @var {string} |
|
* The font-weight of the active Tab when focused |
|
*/ |
|
$tab-font-weight-focus-active: $tab-font-weight-active !default; |
|
|
|
/** |
|
* @var {string} |
|
* The font-weight of disabled Tabs |
|
*/ |
|
$tab-font-weight-disabled: $tab-font-weight !default; |
|
|
|
/** |
|
* @var {string} |
|
* The Tab cursor |
|
*/ |
|
$tab-cursor: pointer !default; |
|
|
|
/** |
|
* @var {string} |
|
* The cursor of disabled Tabs |
|
*/ |
|
$tab-cursor-disabled: default !default; |
|
|
|
/** |
|
* @var {string/list} |
|
* 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}. |
|
*/ |
|
$tab-background-gradient: 'tab' !default; |
|
|
|
/** |
|
* @var {string/list} |
|
* 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}. |
|
*/ |
|
$tab-background-gradient-focus: 'tab' !default; |
|
|
|
/** |
|
* @var {string/list} |
|
* 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}. |
|
*/ |
|
$tab-background-gradient-over: 'tab-over' !default; |
|
|
|
/** |
|
* @var {string/list} |
|
* 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}. |
|
*/ |
|
$tab-background-gradient-active: 'tab-active' !default; |
|
|
|
/** |
|
* @var {string/list} |
|
* 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}. |
|
*/ |
|
$tab-background-gradient-focus-over: $tab-background-gradient-over !default; |
|
|
|
/** |
|
* @var {string/list} |
|
* 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}. |
|
*/ |
|
$tab-background-gradient-focus-active: $tab-background-gradient-active !default; |
|
|
|
/** |
|
* @var {string/list} |
|
* 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}. |
|
*/ |
|
$tab-background-gradient-disabled: 'tab-disabled' !default; |
|
|
|
/** |
|
* @var {list} |
|
* The border-radius of Tabs |
|
*/ |
|
$tab-border-radius: 4px 4px 0 0 !default; |
|
|
|
/** |
|
* @var {number/list} |
|
* The border-width of Tabs |
|
*/ |
|
$tab-border-width: 1px !default; |
|
|
|
/** |
|
* @var {number/list} |
|
* The border-width of focused Tabs |
|
*/ |
|
$tab-border-width-focus: $tab-border-width !default; |
|
|
|
/** |
|
* @var {number/list} |
|
* The border-width of hovered Tabs |
|
*/ |
|
$tab-border-width-over: $tab-border-width !default; |
|
|
|
/** |
|
* @var {number/list} |
|
* The border-width of active Tabs |
|
*/ |
|
$tab-border-width-active: $tab-border-width !default; |
|
|
|
/** |
|
* @var {number/list} |
|
* The border-width of focused hovered Tabs |
|
*/ |
|
$tab-border-width-focus-over: $tab-border-width-over !default; |
|
|
|
/** |
|
* @var {number/list} |
|
* The border-width of active Tabs when focused |
|
*/ |
|
$tab-border-width-focus-active: $tab-border-width-active !default; |
|
|
|
/** |
|
* @var {number/list} |
|
* The border-width of disabled Tabs |
|
*/ |
|
$tab-border-width-disabled: $tab-border-width !default; |
|
|
|
/** |
|
* @var {number/list} |
|
* The inner border-width of Tabs |
|
*/ |
|
$tab-inner-border-width: 'none' !default; |
|
|
|
/** |
|
* @var {number/list} |
|
* The inner border-width of focused Tabs |
|
*/ |
|
$tab-inner-border-width-focus: $tab-inner-border-width !default; |
|
|
|
/** |
|
* @var {number/list} |
|
* The inner border-width of hovered Tabs |
|
*/ |
|
$tab-inner-border-width-over: $tab-inner-border-width !default; |
|
|
|
/** |
|
* @var {number/list} |
|
* The inner border-width of active Tabs |
|
*/ |
|
$tab-inner-border-width-active: $tab-inner-border-width !default; |
|
|
|
/** |
|
* @var {number/list} |
|
* The inner border-width of focused hovered Tabs |
|
*/ |
|
$tab-inner-border-width-focus-over: $tab-inner-border-width-over !default; |
|
|
|
/** |
|
* @var {number/list} |
|
* The inner border-width of active Tabs when focused |
|
*/ |
|
$tab-inner-border-width-focus-active: $tab-inner-border-width-active !default; |
|
|
|
/** |
|
* @var {number/list} |
|
* The inner border-width of disabled Tabs |
|
*/ |
|
$tab-inner-border-width-disabled: $tab-inner-border-width !default; |
|
|
|
/** |
|
* @var {color} |
|
* The inner border-color of Tabs |
|
*/ |
|
$tab-inner-border-color: 'none' !default; |
|
|
|
/** |
|
* @var {color} |
|
* The inner border-color of focused Tabs |
|
*/ |
|
$tab-inner-border-color-focus: $tab-inner-border-color !default; |
|
|
|
/** |
|
* @var {color} |
|
* The inner border-color of hovered Tabs |
|
*/ |
|
$tab-inner-border-color-over: $tab-inner-border-color !default; |
|
|
|
/** |
|
* @var {color} |
|
* The inner border-color of active Tabs |
|
*/ |
|
$tab-inner-border-color-active: $tab-inner-border-color !default; |
|
|
|
/** |
|
* @var {color} |
|
* The inner border-color of focused hovered Tabs |
|
*/ |
|
$tab-inner-border-color-focus-over: $tab-inner-border-color-over !default; |
|
|
|
/** |
|
* @var {color} |
|
* The inner border-color of active Tabs when focused |
|
*/ |
|
$tab-inner-border-color-focus-active: $tab-inner-border-color-active !default; |
|
|
|
/** |
|
* @var {color} |
|
* The inner border-color of disabled Tabs |
|
*/ |
|
$tab-inner-border-color-disabled: $tab-inner-border-color !default; |
|
|
|
/** |
|
* @var {boolean} |
|
* `true` to suppress the inner border of the tab on the side adjacent to the tab strip |
|
*/ |
|
$tab-inner-border-collapse: false !default; |
|
|
|
/** |
|
* @var {boolean} |
|
* `true` to suppress the inner border of the tab on the side adjacent to the tab strip |
|
* when the tab is focused |
|
*/ |
|
$tab-inner-border-collapse-focus: $tab-inner-border-collapse !default; |
|
|
|
/** |
|
* @var {boolean} |
|
* `true` to suppress the inner border of the tab on the side adjacent to the tab strip |
|
* when the tab is hovered |
|
*/ |
|
$tab-inner-border-collapse-over: $tab-inner-border-collapse !default; |
|
|
|
/** |
|
* @var {boolean} |
|
* `true` to suppress the inner border of the tab on the side adjacent to the tab strip |
|
* when the tab is active |
|
*/ |
|
$tab-inner-border-collapse-active: $tab-inner-border-collapse !default; |
|
|
|
/** |
|
* @var {boolean} |
|
* `true` to suppress the inner border of the tab on the side adjacent to the tab strip |
|
* when the tab is focused and hovered |
|
*/ |
|
$tab-inner-border-collapse-focus-over: $tab-inner-border-collapse-over !default; |
|
|
|
/** |
|
* @var {boolean} |
|
* `true` to suppress the inner border of the tab on the side adjacent to the tab strip |
|
* when the tab is focused and active |
|
*/ |
|
$tab-inner-border-collapse-focus-active: $tab-inner-border-collapse-active !default; |
|
|
|
/** |
|
* @var {boolean} |
|
* `true` to suppress the inner border of the tab on the side adjacent to the tab strip |
|
* when the tab is disabled |
|
*/ |
|
$tab-inner-border-collapse-disabled: $tab-inner-border-collapse !default; |
|
|
|
/** |
|
* @var {number} |
|
* The body outline width of focused Tabs |
|
*/ |
|
$tab-body-outline-width-focus: 0 !default; |
|
|
|
/** |
|
* @var {string} |
|
* The body outline-style of focused Tabs |
|
*/ |
|
$tab-body-outline-style-focus: dotted !default; |
|
|
|
/** |
|
* @var {color} |
|
* The body outline color of focused Tabs |
|
*/ |
|
$tab-body-outline-color-focus: $tab-color !default; |
|
|
|
/** |
|
* @var {color} |
|
* The border-color of Tabs |
|
*/ |
|
$tab-border-color: $base-color !default; |
|
|
|
/** |
|
* @var {color} |
|
* The border-color of focused Tabs |
|
*/ |
|
$tab-border-color-focus: $tab-border-color !default; |
|
|
|
/** |
|
* @var {color} |
|
* The border-color of hovered Tabs |
|
*/ |
|
$tab-border-color-over: $tab-border-color !default; |
|
|
|
/** |
|
* @var {color} |
|
* The border-color of the active Tab |
|
*/ |
|
$tab-border-color-active: $tab-border-color !default; |
|
|
|
/** |
|
* @var {color} |
|
* The border-color of focused hovered Tabs |
|
*/ |
|
$tab-border-color-focus-over: $tab-border-color-over !default; |
|
|
|
/** |
|
* @var {color} |
|
* The border-color of the active Tab when focused |
|
*/ |
|
$tab-border-color-focus-active: $tab-border-color-active !default; |
|
|
|
/** |
|
* @var {color} |
|
* The border-color of disabled Tabs |
|
*/ |
|
$tab-border-color-disabled: $tab-border-color !default; |
|
|
|
/** |
|
* @var {number/list} |
|
* The padding of Tabs |
|
*/ |
|
$tab-padding: 3px 9px !default; |
|
|
|
/** |
|
* @var {number} |
|
* The horizontal padding to add to the left and right of the Tab's text element |
|
*/ |
|
$tab-text-padding: 0 !default; |
|
|
|
/** |
|
* @var {number/list} |
|
* The margin of Tabs. Typically used to add horizontal space between the tabs. |
|
*/ |
|
$tab-margin: 0 0 0 2px !default; |
|
|
|
/** |
|
* @var {number} |
|
* The width of the Tab close icon |
|
*/ |
|
$tab-closable-icon-width: 11px !default; |
|
|
|
/** |
|
* @var {number} |
|
* The height of the Tab close icon |
|
*/ |
|
$tab-closable-icon-height: 11px !default; |
|
|
|
/** |
|
* @var {number} |
|
* The distance to offset the Tab close icon from the top of the tab |
|
*/ |
|
$tab-closable-icon-top: 2px !default; |
|
|
|
/** |
|
* @var {number} |
|
* The distance to offset the Tab close icon from the right of the tab |
|
*/ |
|
$tab-closable-icon-right: 2px !default; |
|
/** |
|
* @var {number} |
|
* the space in between the text and the close button |
|
*/ |
|
$tab-closable-icon-spacing: 3px !default; |
|
|
|
/** |
|
* @var {number} |
|
* The opacity of the Tab close icon |
|
*/ |
|
$tab-closable-icon-opacity: 1 !default; |
|
|
|
/** |
|
* @var {number} |
|
* The opacity of the Tab close icon when hovered |
|
*/ |
|
$tab-closable-icon-opacity-over: 1 !default; |
|
|
|
/** |
|
* @var {number} |
|
* The opacity of the Tab close icon when the Tab is disabled |
|
*/ |
|
$tab-closable-icon-opacity-disabled: 1 !default; |
|
|
|
/** |
|
* @var {boolean} |
|
* True to change the x background-postition of the close icon background image on hover |
|
* to allow for a horizontally aligned background image sprite |
|
*/ |
|
$tab-closable-icon-include-hover-background-position: false !default; |
|
|
|
/** |
|
* @var {boolean} |
|
* True to change the x background-postition of the close icon background image on click |
|
* to allow for a horizontally aligned background image sprite |
|
*/ |
|
$tab-closable-icon-include-pressed-background-position: false !default; |
|
|
|
/** |
|
* @var {number} |
|
* The width of Tab icons |
|
*/ |
|
$tab-icon-width: 16px !default; |
|
|
|
/** |
|
* @var {number} |
|
* The height of Tab icons |
|
*/ |
|
$tab-icon-height: 16px !default; |
|
|
|
/** |
|
* @var {number} |
|
* The line-height of Tabs |
|
*/ |
|
$tab-line-height: $tab-icon-height !default; |
|
|
|
/** |
|
* @var {number} |
|
* The space between the Tab icon and the Tab text |
|
*/ |
|
$tab-icon-spacing: 4px !default; |
|
|
|
/** |
|
* @var {number} |
|
* The background-position of Tab icons |
|
*/ |
|
$tab-icon-background-position: center center !default; |
|
|
|
/** |
|
* @var {color} |
|
* The color of Tab glyph icons |
|
*/ |
|
$tab-glyph-color: $tab-color !default; |
|
|
|
/** |
|
* @var {color} |
|
* The color of a Tab glyph icon when the Tab is focused |
|
*/ |
|
$tab-glyph-color-focus: $tab-color-focus !default; |
|
|
|
/** |
|
* @var {color} |
|
* The color of a Tab glyph icon when the Tab is hovered |
|
*/ |
|
$tab-glyph-color-over: $tab-color-over !default; |
|
|
|
/** |
|
* @var {color} |
|
* The color of a Tab glyph icon when the Tab is active |
|
*/ |
|
$tab-glyph-color-active: $tab-color-active !default; |
|
|
|
/** |
|
* @var {color} |
|
* The color of a Tab glyph icon when the Tab is focused and hovered |
|
*/ |
|
$tab-glyph-color-focus-over: $tab-color-focus-over !default; |
|
|
|
/** |
|
* @var {color} |
|
* The color of a Tab glyph icon when the Tab is focused and active |
|
*/ |
|
$tab-glyph-color-focus-active: $tab-color-focus-active !default; |
|
|
|
/** |
|
* @var {color} |
|
* The color of a Tab glyph icon when the Tab is disabled |
|
*/ |
|
$tab-glyph-color-disabled: $tab-color-disabled !default; |
|
|
|
/** |
|
* @var {number} |
|
* The opacity of a Tab glyph icon |
|
*/ |
|
$tab-glyph-opacity: .5 !default; |
|
|
|
/** |
|
* @var {number} |
|
* The opacity of a Tab glyph icon when the Tab is disabled |
|
*/ |
|
$tab-glyph-opacity-disabled: .3 !default; |
|
|
|
/** |
|
* @var {number} |
|
* opacity to apply to the tab's main element when the tab is disabled |
|
*/ |
|
$tab-opacity-disabled: 1 !default; |
|
|
|
/** |
|
* @var {number} |
|
* opacity to apply to the tab's text element when the tab is disabled |
|
*/ |
|
$tab-text-opacity-disabled: .3 !default; |
|
|
|
/** |
|
* @var {number} |
|
* opacity to apply to the tab's icon element when the tab is disabled |
|
*/ |
|
$tab-icon-opacity-disabled: .5 !default; |
|
|
|
/** |
|
* @var {boolean} |
|
* True to include the "default" tab UI |
|
*/ |
|
$include-tab-default-ui: $include-default-uis !default;
|
|
|