/** @class Ext.button.Button */
/**
* @var {number}
* The default width for a button's {@link #cfg-menu} arrow
*/
$button-arrow-width: dynamic(8px);
/**
* @var {number}
* The default height for a button's {@link #cfg-menu} arrow
*/
$button-arrow-height: dynamic(8px);
/**
* @var {number}
* The default width for a {@link Ext.button.Split Split Button}'s arrow
*/
$button-split-width: dynamic(14px);
/**
* @var {number}
* The default height for a {@link Ext.button.Split Split Button}'s arrow
*/
$button-split-height: dynamic(14px);
/**
* @var {number}
* The default width for a {@link Ext.button.Split Split Button}'s line.
* Themes that include the line in the arrow background image should set this to 0
*/
$button-split-line-width: dynamic(0);
/**
* @var {number}
* The default space between a button's icon and text
*/
$button-icon-spacing: dynamic(4px);
/**
* @var {number}
* The default border-radius for a small {@link #scale} button
*/
$button-small-border-radius: dynamic(3px);
/**
* @var {number}
* The default border-width for a small {@link #scale} button
*/
$button-small-border-width: dynamic(1px);
/**
* @var {number}
* The default padding for a small {@link #scale} button
*/
$button-small-padding: dynamic(2px);
/**
* @var {number}
* The default horizontal padding to add to the left and right of the text element for
* a small {@link #scale} button
*/
$button-small-text-padding: dynamic(4px);
/**
* @var {number}
* The default font-size for a small {@link #scale} button
*/
$button-small-font-size: dynamic(ceil($font-size * .9)); //11px
/**
* @var {number}
* The default font-size for a small {@link #scale} button when the cursor is over the button
*/
$button-small-font-size-over: dynamic($button-small-font-size);
/**
* @var {number}
* The default font-size for a small {@link #scale} button when the button is focused
*/
$button-small-font-size-focus: dynamic($button-small-font-size-over);
/**
* @var {number}
* The default font-size for a small {@link #scale} button when the button is pressed
*/
$button-small-font-size-pressed: dynamic($button-small-font-size);
/**
* @var {number}
* The default font-size for a small {@link #scale} button when the button is focused and
* the cursor is over the button
*/
$button-small-font-size-focus-over: dynamic($button-small-font-size-over);
/**
* @var {number}
* The default font-size for a small {@link #scale} button when the button is focused and pressed
*/
$button-small-font-size-focus-pressed: dynamic($button-small-font-size-pressed);
/**
* @var {number}
* The default font-size for a small {@link #scale} button when the button is disabled
*/
$button-small-font-size-disabled: dynamic($button-small-font-size);
/**
* @var {string}
* The default font-weight for a small {@link #scale} button
*/
$button-small-font-weight: dynamic($font-weight);
/**
* @var {string}
* The default font-weight for a small {@link #scale} button when the cursor is over the button
*/
$button-small-font-weight-over: dynamic($button-small-font-weight);
/**
* @var {string}
* The default font-weight for a small {@link #scale} button when the button is focused
*/
$button-small-font-weight-focus: dynamic($button-small-font-weight-over);
/**
* @var {string}
* The default font-weight for a small {@link #scale} button when the button is pressed
*/
$button-small-font-weight-pressed: dynamic($button-small-font-weight);
/**
* @var {string}
* The default font-weight for a small {@link #scale} button when the button is focused
* and the cursor is over the button
*/
$button-small-font-weight-focus-over: dynamic($button-small-font-weight-over);
/**
* @var {string}
* The default font-weight for a small {@link #scale} button when the button is focused
* and pressed
*/
$button-small-font-weight-focus-pressed: dynamic($button-small-font-weight-pressed);
/**
* @var {string}
* The default font-weight for a small {@link #scale} button when the button is disabled
*/
$button-small-font-weight-disabled: dynamic($button-small-font-weight);
/**
* @var {string}
* The default font-family for a small {@link #scale} button
*/
$button-small-font-family: dynamic($font-family);
/**
* @var {string}
* The default font-family for a small {@link #scale} button when the cursor is over the button
*/
$button-small-font-family-over: dynamic($button-small-font-family);
/**
* @var {string}
* The default font-family for a small {@link #scale} button when the button is focused
*/
$button-small-font-family-focus: dynamic($button-small-font-family-over);
/**
* @var {string}
* The default font-family for a small {@link #scale} button when the button is pressed
*/
$button-small-font-family-pressed: dynamic($button-small-font-family);
/**
* @var {string}
* The default font-family for a small {@link #scale} button when the button is focused
* and the cursor is over the button
*/
$button-small-font-family-focus-over: dynamic($button-small-font-family-over);
/**
* @var {string}
* The default font-family for a small {@link #scale} button when the button is focused
* and pressed
*/
$button-small-font-family-focus-pressed: dynamic($button-small-font-family-pressed);
/**
* @var {string}
* The default font-family for a small {@link #scale} button when the button is disabled
*/
$button-small-font-family-disabled: dynamic($button-small-font-family);
/**
* @var {number}
* The line-height for the text in a small {@link #scale} button
*/
$button-small-line-height: dynamic(16px);
/**
* @var {number}
* The default icon size for a small {@link #scale} button
*/
$button-small-icon-size: dynamic(16px);
/**
* @var {number}
* The the font-size for small {@link #scale} button glyphs
*/
$button-small-glyph-font-size: dynamic($button-small-icon-size);
/**
* @var {number}
* The space between a small {@link #scale} button's icon and text
*/
$button-small-icon-spacing: dynamic($button-icon-spacing);
/**
* @var {number}
* The default width of a small {@link #scale} button's {@link #cfg-menu} arrow
*/
$button-small-arrow-width: dynamic($button-arrow-width);
/**
* @var {number}
* The default height of a small {@link #scale} button's {@link #cfg-menu} arrow
*/
$button-small-arrow-height: dynamic($button-arrow-height);
/**
* @var {string/list}
* Glyph for a small button arrow when when {@link Global_CSS#$enable-font-icons} is `true`.
*/
$button-small-arrow-glyph: dynamic($fa-var-caret-down 16px $font-icon-font-family);
/**
* @var {number}
* The default width of a small {@link #scale} {@link Ext.button.Split Split Button}'s arrow
*/
$button-small-split-width: dynamic($button-split-width);
/**
* @var {number}
* The default height of a small {@link #scale} {@link Ext.button.Split Split Button}'s arrow
*/
$button-small-split-height: dynamic($button-split-height);
/**
* @var {number}
* The width of a small {@link #scale} {@link Ext.button.Split Split Button}'s line.
* Themes that include the line in the arrow background image should set this to 0
*/
$button-small-split-line-width: dynamic($button-split-line-width);
/**
* @var {number}
* The default border-radius for a medium {@link #scale} button
*/
$button-medium-border-radius: dynamic(3px);
/**
* @var {number}
* The default border-width for a medium {@link #scale} button
*/
$button-medium-border-width: dynamic(1px);
/**
* @var {number}
* The default padding for a medium {@link #scale} button
*/
$button-medium-padding: dynamic(3px);
/**
* @var {number}
* The default horizontal padding to add to the left and right of the text element for
* a medium {@link #scale} button
*/
$button-medium-text-padding: dynamic(4px);
/**
* @var {number}
* The default font-size for a medium {@link #scale} button
*/
$button-medium-font-size: dynamic($font-size); //11px
/**
* @var {number}
* The default font-size for a medium {@link #scale} button when the cursor is over the button
*/
$button-medium-font-size-over: dynamic($button-medium-font-size);
/**
* @var {number}
* The default font-size for a medium {@link #scale} button when the button is focused
*/
$button-medium-font-size-focus: dynamic($button-medium-font-size-over);
/**
* @var {number}
* The default font-size for a medium {@link #scale} button when the button is pressed
*/
$button-medium-font-size-pressed: dynamic($button-medium-font-size);
/**
* @var {number}
* The default font-size for a medium {@link #scale} button when the button is focused
* and the cursor is over the button
*/
$button-medium-font-size-focus-over: dynamic($button-medium-font-size-over);
/**
* @var {number}
* The default font-size for a medium {@link #scale} button when the button is focused
* and pressed
*/
$button-medium-font-size-focus-pressed: dynamic($button-medium-font-size-pressed);
/**
* @var {number}
* The default font-size for a medium {@link #scale} button when the button is disabled
*/
$button-medium-font-size-disabled: dynamic($button-medium-font-size);
/**
* @var {string}
* The default font-weight for a medium {@link #scale} button
*/
$button-medium-font-weight: dynamic($font-weight);
/**
* @var {string}
* The default font-weight for a medium {@link #scale} button when the cursor is over the button
*/
$button-medium-font-weight-over: dynamic($button-medium-font-weight);
/**
* @var {string}
* The default font-weight for a medium {@link #scale} button when the button is focused
*/
$button-medium-font-weight-focus: dynamic($button-medium-font-weight-over);
/**
* @var {string}
* The default font-weight for a medium {@link #scale} button when the button is pressed
*/
$button-medium-font-weight-pressed: dynamic($button-medium-font-weight);
/**
* @var {string}
* The default font-weight for a medium {@link #scale} button when the button is focused
* and the cursor is over the button
*/
$button-medium-font-weight-focus-over: dynamic($button-medium-font-weight-over);
/**
* @var {string}
* The default font-weight for a medium {@link #scale} button when the button is focused
* and pressed
*/
$button-medium-font-weight-focus-pressed: dynamic($button-medium-font-weight-pressed);
/**
* @var {string}
* The default font-weight for a medium {@link #scale} button when the button is disabled
*/
$button-medium-font-weight-disabled: dynamic($button-medium-font-weight);
/**
* @var {string}
* The default font-family for a medium {@link #scale} button
*/
$button-medium-font-family: dynamic($font-family);
/**
* @var {string}
* The default font-family for a medium {@link #scale} button when the cursor is over the button
*/
$button-medium-font-family-over: dynamic($button-medium-font-family);
/**
* @var {string}
* The default font-family for a medium {@link #scale} button when the button is focused
*/
$button-medium-font-family-focus: dynamic($button-medium-font-family-over);
/**
* @var {string}
* The default font-family for a medium {@link #scale} button when the button is pressed
*/
$button-medium-font-family-pressed: dynamic($button-medium-font-family);
/**
* @var {string}
* The default font-family for a medium {@link #scale} button when the button is focused
* and the cursor is over the button
*/
$button-medium-font-family-focus-over: dynamic($button-medium-font-family-over);
/**
* @var {string}
* The default font-family for a medium {@link #scale} button when the button is focused
* and pressed
*/
$button-medium-font-family-focus-pressed: dynamic($button-medium-font-family-pressed);
/**
* @var {string}
* The default font-family for a medium {@link #scale} button when the button is disabled
*/
$button-medium-font-family-disabled: dynamic($button-medium-font-family);
/**
* @var {number}
* The line-height for the text in a medium {@link #scale} button
*/
$button-medium-line-height: dynamic(16px);
/**
* @var {number}
* The default icon size for a medium {@link #scale} button
*/
$button-medium-icon-size: dynamic(24px);
/**
* @var {number}
* The the font-size for medium {@link #scale} button glyphs
*/
$button-medium-glyph-font-size: dynamic($button-medium-icon-size);
/**
* @var {number}
* The space between a medium {@link #scale} button's icon and text
*/
$button-medium-icon-spacing: dynamic($button-icon-spacing);
/**
* @var {number}
* The default width of a medium {@link #scale} button's {@link #cfg-menu} arrow
*/
$button-medium-arrow-width: dynamic($button-arrow-width);
/**
* @var {number}
* The default height of a medium {@link #scale} button's {@link #cfg-menu} arrow
*/
$button-medium-arrow-height: dynamic($button-arrow-height);
/**
* @var {string/list}
* Glyph for a medium button arrow when when {@link Global_CSS#$enable-font-icons} is `true`.
*/
$button-medium-arrow-glyph: dynamic($fa-var-caret-down 20px $font-icon-font-family);
/**
* @var {number}
* The default width of a medium {@link #scale} {@link Ext.button.Split Split Button}'s arrow
*/
$button-medium-split-width: dynamic($button-split-width);
/**
* @var {number}
* The default height of a medium {@link #scale} {@link Ext.button.Split Split Button}'s arrow
*/
$button-medium-split-height: dynamic($button-split-height);
/**
* @var {number}
* The width of a medium {@link #scale} {@link Ext.button.Split Split Button}'s line.
* Themes that include the line in the arrow background image should set this to 0
*/
$button-medium-split-line-width: dynamic($button-split-line-width);
/**
* @var {number}
* The default border-radius for a large {@link #scale} button
*/
$button-large-border-radius: dynamic(3px);
/**
* @var {number}
* The default border-width for a large {@link #scale} button
*/
$button-large-border-width: dynamic(1px);
/**
* @var {number}
* The default padding for a large {@link #scale} button
*/
$button-large-padding: dynamic(3px);
/**
* @var {number}
* The default horizontal padding to add to the left and right of the text element for
* a large {@link #scale} button
*/
$button-large-text-padding: dynamic(4px);
/**
* @var {number}
* The default font-size for a large {@link #scale} button
*/
$button-large-font-size: dynamic($font-size); //11px
/**
* @var {number}
* The default font-size for a large {@link #scale} button when the cursor is over the button
*/
$button-large-font-size-over: dynamic($button-large-font-size);
/**
* @var {number}
* The default font-size for a large {@link #scale} button when the button is focused
*/
$button-large-font-size-focus: dynamic($button-large-font-size-over);
/**
* @var {number}
* The default font-size for a large {@link #scale} button when the button is pressed
*/
$button-large-font-size-pressed: dynamic($button-large-font-size);
/**
* @var {number}
* The default font-size for a large {@link #scale} button when the button is focused
* and the cursor is over the button
*/
$button-large-font-size-focus-over: dynamic($button-large-font-size-over);
/**
* @var {number}
* The default font-size for a large {@link #scale} button when the button is focused
* and pressed
*/
$button-large-font-size-focus-pressed: dynamic($button-large-font-size-pressed);
/**
* @var {number}
* The default font-size for a large {@link #scale} button when the button is disabled
*/
$button-large-font-size-disabled: dynamic($button-large-font-size);
/**
* @var {string}
* The default font-weight for a large {@link #scale} button
*/
$button-large-font-weight: dynamic($font-weight);
/**
* @var {string}
* The default font-weight for a large {@link #scale} button when the cursor is over the button
*/
$button-large-font-weight-over: dynamic($button-large-font-weight);
/**
* @var {string}
* The default font-weight for a large {@link #scale} button when the button is focused
*/
$button-large-font-weight-focus: dynamic($button-large-font-weight-over);
/**
* @var {string}
* The default font-weight for a large {@link #scale} button when the button is pressed
*/
$button-large-font-weight-pressed: dynamic($button-large-font-weight);
/**
* @var {string}
* The default font-weight for a large {@link #scale} button when the button is focused
* and the cursor is over the button
*/
$button-large-font-weight-focus-over: dynamic($button-large-font-weight-over);
/**
* @var {string}
* The default font-weight for a large {@link #scale} button when the button is focused
* and pressed
*/
$button-large-font-weight-focus-pressed: dynamic($button-large-font-weight-pressed);
/**
* @var {string}
* The default font-weight for a large {@link #scale} button when the button is disabled
*/
$button-large-font-weight-disabled: dynamic($button-large-font-weight);
/**
* @var {string}
* The default font-family for a large {@link #scale} button
*/
$button-large-font-family: dynamic($font-family);
/**
* @var {string}
* The default font-family for a large {@link #scale} button when the cursor is over the button
*/
$button-large-font-family-over: dynamic($button-large-font-family);
/**
* @var {string}
* The default font-family for a large {@link #scale} button when the button is focused
*/
$button-large-font-family-focus: dynamic($button-large-font-family-over);
/**
* @var {string}
* The default font-family for a large {@link #scale} button when the button is pressed
*/
$button-large-font-family-pressed: dynamic($button-large-font-family);
/**
* @var {string}
* The default font-family for a large {@link #scale} button when the button is focused
* and the cursor is over the button
*/
$button-large-font-family-focus-over: dynamic($button-large-font-family-over);
/**
* @var {string}
* The default font-family for a large {@link #scale} button when the button is focused
* and pressed
*/
$button-large-font-family-focus-pressed: dynamic($button-large-font-family-pressed);
/**
* @var {string}
* The default font-family for a large {@link #scale} button when the button is disabled
*/
$button-large-font-family-disabled: dynamic($button-large-font-family);
/**
* @var {number}
* The line-height for the text in a large {@link #scale} button
*/
$button-large-line-height: dynamic(16px);
/**
* @var {number}
* The default icon size for a large {@link #scale} button
*/
$button-large-icon-size: dynamic(32px);
/**
* @var {number}
* The the font-size for large {@link #scale} button glyphs
*/
$button-large-glyph-font-size: dynamic($button-large-icon-size);
/**
* @var {number}
* The space between a large {@link #scale} button's icon and text
*/
$button-large-icon-spacing: dynamic($button-icon-spacing);
/**
* @var {number}
* The default width of a large {@link #scale} button's {@link #cfg-menu} arrow
*/
$button-large-arrow-width: dynamic($button-arrow-width);
/**
* @var {number}
* The default height of a large {@link #scale} button's {@link #cfg-menu} arrow
*/
$button-large-arrow-height: dynamic($button-arrow-height);
/**
* @var {string/list}
* Glyph for a large button arrow when when {@link Global_CSS#$enable-font-icons} is `true`.
*/
$button-large-arrow-glyph: dynamic($fa-var-caret-down 24px $font-icon-font-family);
/**
* @var {number}
* The default width of a large {@link #scale} {@link Ext.button.Split Split Button}'s arrow
*/
$button-large-split-width: dynamic($button-split-width);
/**
* @var {number}
* The default height of a large {@link #scale} {@link Ext.button.Split Split Button}'s arrow
*/
$button-large-split-height: dynamic($button-split-height);
/**
* @var {number}
* The width of a large {@link #scale} {@link Ext.button.Split Split Button}'s line.
* Themes that include the line in the arrow background image should set this to 0
*/
$button-large-split-line-width: dynamic($button-split-line-width);
/**
* @var {color}
* The base color for the `default` button UI
*/
$button-default-base-color: dynamic($base-color);
/**
* @var {color}
* The base color for the `default` button UI when the cursor is over the button
*/
$button-default-base-color-over: dynamic(button-default-background-color-over($button-default-base-color));
/**
* @var {color}
* The base color for the `default` button UI when the button is focused
*/
$button-default-base-color-focus: dynamic(button-default-background-color-focus($button-default-base-color));
/**
* @var {color}
* The base color for the `default` button UI when the button is pressed
*/
$button-default-base-color-pressed: dynamic(button-default-background-color-pressed($button-default-base-color));
/**
* @var {color}
* The base color for the `default` button UI when the button is focused and the cursor
* is over the button
*/
$button-default-base-color-focus-over: dynamic($button-default-base-color-over);
/**
* @var {color}
* The base color for the `default` button UI when the button is focused and pressed
*/
$button-default-base-color-focus-pressed: dynamic($button-default-base-color-pressed);
/**
* @var {color}
* The base color for the `default` button UI when the button is disabled
*/
$button-default-base-color-disabled: dynamic(button-default-background-color-disabled($button-default-base-color));
/**
* @var {color}
* The border-color for the `default` button UI
*/
$button-default-border-color: dynamic($button-default-base-color);
/**
* @var {color}
* The border-color for the `default` button UI when the cursor is over the button
*/
$button-default-border-color-over: dynamic(button-default-border-color-over($button-default-border-color));
/**
* @var {color}
* The border-color for the `default` button UI when the button is focused
*/
$button-default-border-color-focus: dynamic(button-default-border-color-focus($button-default-border-color));
/**
* @var {color}
* The border-color for the `default` button UI when the button is pressed
*/
$button-default-border-color-pressed: dynamic(button-default-border-color-pressed($button-default-border-color));
/**
* @var {color}
* The border-color for the `default` button UI when the button is focused and the cursor
* is over the button
*/
$button-default-border-color-focus-over: dynamic($button-default-border-color-over);
/**
* @var {color}
* The border-color for the `default` button UI when the button is focused and pressed
*/
$button-default-border-color-focus-pressed: dynamic($button-default-border-color-pressed);
/**
* @var {color}
* The border-color for the `default` button UI when the button is disabled
*/
$button-default-border-color-disabled: dynamic(button-default-border-color-disabled($button-default-border-color));
/**
* @var {color}
* The background-color for the `default` button UI
*/
$button-default-background-color: dynamic($button-default-base-color);
/**
* @var {color}
* The background-color for the `default` button UI when the cursor is over the button
*/
$button-default-background-color-over: dynamic($button-default-base-color-over);
/**
* @var {color}
* The background-color for the `default` button UI when the button is focused
*/
$button-default-background-color-focus: dynamic($button-default-base-color-focus);
/**
* @var {color}
* The background-color for the `default` button UI when the button is pressed
*/
$button-default-background-color-pressed: dynamic($button-default-base-color-pressed);
/**
* @var {color}
* The background-color for the `default` button UI when the button is focused and the
* cursor is over the button
*/
$button-default-background-color-focus-over: dynamic($button-default-background-color-over);
/**
* @var {color}
* The background-color for the `default` button UI when the button is focused and pressed
*/
$button-default-background-color-focus-pressed: dynamic($button-default-background-color-pressed);
/**
* @var {color}
* The background-color for the `default` button UI when the button is disabled
*/
$button-default-background-color-disabled: dynamic($button-default-base-color-disabled);
/**
* @var {string/list}
* The background-gradient for the `default` button UI. 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}.
*/
$button-default-background-gradient: dynamic('glossy-button');
/**
* @var {string/list}
* The background-gradient for the `default` button UI when the cursor is over the button.
* 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}.
*/
$button-default-background-gradient-over: dynamic('glossy-button-over');
/**
* @var {string/list}
* The background-gradient for the `default` button UI when the button is 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}.
*/
$button-default-background-gradient-focus: dynamic($button-default-background-gradient-over);
/**
* @var {string/list}
* The background-gradient for the `default` button UI when the button is pressed. 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}.
*/
$button-default-background-gradient-pressed: dynamic('glossy-button-pressed');
/**
* @var {string/list}
* The background-gradient for the `default` button UI when the button is focused and the
* cursor is over the button. 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}.
*/
$button-default-background-gradient-focus-over: dynamic($button-default-background-gradient-over);
/**
* @var {string/list}
* The background-gradient for the `default` button UI when the button is focused and
* pressed. 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}.
*/
$button-default-background-gradient-focus-pressed: dynamic($button-default-background-gradient-pressed);
/**
* @var {string/list}
* The background-gradient for the `default` button UI when the button is disabled. 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}.
*/
$button-default-background-gradient-disabled: dynamic('glossy-button-disabled');
/**
* @var {color}
* The text color for the `default` button UI
*/
$button-default-color: dynamic(#000);
/**
* @var {color}
* The text color for the `default` button UI when the cursor is over the button
*/
$button-default-color-over: dynamic(button-default-color-over($button-default-color));
/**
* @var {color}
* The text color for the `default` button UI when the button is focused
*/
$button-default-color-focus: dynamic(button-default-color-focus($button-default-color));
/**
* @var {color}
* The text color for the `default` button UI when the button is pressed
*/
$button-default-color-pressed: dynamic(button-default-color-pressed($button-default-color));
/**
* @var {color}
* The text color for the `default` button UI when the button is focused and the cursor
* is over the button
*/
$button-default-color-focus-over: dynamic($button-default-color-over);
/**
* @var {color}
* The text color for the `default` button UI when the button is focused and pressed
*/
$button-default-color-focus-pressed: dynamic($button-default-color-pressed);
/**
* @var {color}
* The text color for the `default` button UI when the button is disabled
*/
$button-default-color-disabled: dynamic(button-default-color-disabled($button-default-color));
/**
* @var {number/list}
* The inner border-width for the `default` button UI
*/
$button-default-inner-border-width: dynamic('none');
/**
* @var {number/list}
* The inner border-width for the `default` button UI when the cursor is over the button
*/
$button-default-inner-border-width-over: dynamic($button-default-inner-border-width);
/**
* @var {number/list}
* The inner border-width for the `default` button UI when the button is focused
*/
$button-default-inner-border-width-focus: dynamic($button-default-inner-border-width);
/**
* @var {number/list}
* The inner border-width for the `default` button UI when the button is pressed
*/
$button-default-inner-border-width-pressed: dynamic($button-default-inner-border-width);
/**
* @var {number/list}
* The inner border-width for the `default` button UI when the button is focused and the
* cursor is over the button
*/
$button-default-inner-border-width-focus-over: dynamic($button-default-inner-border-width-focus);
/**
* @var {number/list}
* The inner border-width for the `default` button UI when the button is focused and pressed
*/
$button-default-inner-border-width-focus-pressed: dynamic($button-default-inner-border-width-focus);
/**
* @var {number/lipressed}
* The inner border-width for the `default` button UI when the button is disabled
*/
$button-default-inner-border-width-disabled: dynamic($button-default-inner-border-width);
/**
* @var {color}
* The inner border-color for the `default` button UI
*/
$button-default-inner-border-color: dynamic(button-default-inner-border-color($button-default-background-color, $button-default-color));
/**
* @var {color}
* The inner border-color for the `default` button UI when the cursor is over the button
*/
$button-default-inner-border-color-over: dynamic(button-default-inner-border-color-over($button-default-background-color-over, $button-default-color-over));
/**
* @var {color}
* The inner border-color for the `default` button UI when the button is focused
*/
$button-default-inner-border-color-focus: dynamic(button-default-inner-border-color-focus($button-default-background-color-focus, $button-default-color-focus));
/**
* @var {color}
* The inner border-color for the `default` button UI when the button is pressed
*/
$button-default-inner-border-color-pressed: dynamic(button-default-inner-border-color-pressed($button-default-background-color-pressed, $button-default-color-pressed));
/**
* @var {color}
* The inner border-color for the `default` button UI when the button is focused and the
* cursor is over the button
*/
$button-default-inner-border-color-focus-over: dynamic(button-default-inner-border-color-focus-over($button-default-background-color-focus-over, $button-default-color-focus-over));
/**
* @var {color}
* The inner border-color for the `default` button UI when the button is focused and pressed
*/
$button-default-inner-border-color-focus-pressed: dynamic(button-default-inner-border-color-focus-pressed($button-default-background-color-focus-pressed, $button-default-color-focus-pressed));
/**
* @var {color}
* The inner border-color for the `default` button UI when the button is disabled
*/
$button-default-inner-border-color-disabled: dynamic(button-default-inner-border-color-disabled($button-default-background-color-disabled, $button-default-color-disabled));
/**
* @var {number}
* The body outline width for the `default` button UI when the button is focused
*/
$button-default-body-outline-width-focus: dynamic(0);
/**
* @var {string}
* The body outline-style for the `default` button UI when the button is focused
*/
$button-default-body-outline-style-focus: dynamic(dotted);
/**
* @var {color}
* The body outline color for the `default` button UI when the button is focused
*/
$button-default-body-outline-color-focus: dynamic($button-default-color);
/**
* @var {color}
* The color of the {@link #glyph} icon for the `default` button UI
*/
$button-default-glyph-color: dynamic($button-default-color);
/**
* @var {string/list}
* Glyph color for the button arrow of the `default` button UI when
* {@link Global_CSS#$enable-font-icons} is `true`.
*/
$button-default-arrow-glyph-color: dynamic($button-default-color);
/**
* @var {color}
* The color for a {@link Ext.button.Split Split Button}'s line in the `default` button UI.
* Only applicable when {@link #$button-split-width} is greater than 0.
*/
$button-default-split-line-color: dynamic($button-default-arrow-glyph-color);
/**
* @var {color}
* The opacity of the {@link #glyph} icon for the `default` button UI
*/
$button-default-glyph-opacity: dynamic(0.5);
/**
* @var {color}
* The border-color for the `default-toolbar` button UI
*/
$button-toolbar-border-color: dynamic($base-color);
/**
* @var {color}
* The border-color for the `default-toolbar` button UI when the cursor is over the button
*/
$button-toolbar-border-color-over: dynamic(button-toolbar-border-color-over($button-toolbar-border-color));
/**
* @var {color}
* The border-color for the `default-toolbar` button UI when the button is focused
*/
$button-toolbar-border-color-focus: dynamic(button-toolbar-border-color-focus($button-toolbar-border-color));
/**
* @var {color}
* The border-color for the `default-toolbar` button UI when the button is pressed
*/
$button-toolbar-border-color-pressed: dynamic(button-toolbar-border-color-pressed($button-toolbar-border-color));
/**
* @var {color}
* The border-color for the `default-toolbar` button UI when the button is focused and the
* cursor is over the button
*/
$button-toolbar-border-color-focus-over: dynamic($button-toolbar-border-color-over);
/**
* @var {color}
* The border-color for the `default-toolbar` button UI when the button is focused and
* pressed
*/
$button-toolbar-border-color-focus-pressed: dynamic($button-toolbar-border-color-pressed);
/**
* @var {color}
* The border-color for the `default-toolbar` button UI when the button is disabled
*/
$button-toolbar-border-color-disabled: dynamic(button-toolbar-border-color-disabled($button-toolbar-border-color));
/**
* @var {color}
* The background-color for the `default-toolbar` button UI
*/
$button-toolbar-background-color: dynamic($base-color);
/**
* @var {color}
* The background-color for the `default-toolbar` button UI when the cursor is over the button
*/
$button-toolbar-background-color-over: dynamic(button-toolbar-background-color-over($button-toolbar-background-color));
/**
* @var {color}
* The background-color for the `default-toolbar` button UI when the button is focused
*/
$button-toolbar-background-color-focus: dynamic(button-toolbar-background-color-focus($button-toolbar-background-color));
/**
* @var {color}
* The background-color for the `default-toolbar` button UI when the button is pressed
*/
$button-toolbar-background-color-pressed: dynamic(button-toolbar-background-color-pressed($button-toolbar-background-color));
/**
* @var {color}
* The background-color for the `default-toolbar` button UI when the button is focused
* and the cursor is over the button
*/
$button-toolbar-background-color-focus-over: dynamic($button-toolbar-background-color-over);
/**
* @var {color}
* The background-color for the `default-toolbar` button UI when the button is focused
* and pressed
*/
$button-toolbar-background-color-focus-pressed: dynamic($button-toolbar-background-color-pressed);
/**
* @var {color}
* The background-color for the `default-toolbar` button UI when the button is disabled
*/
$button-toolbar-background-color-disabled: dynamic(button-toolbar-background-color-disabled($button-toolbar-background-color));
/**
* @var {string/list}
* The background-gradient for the `default-toolbar` button UI. 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}.
*/
$button-toolbar-background-gradient: dynamic('glossy-button');
/**
* @var {string/list}
* The background-gradient for the `default-toolbar` button UI when the cursor is over the
* button. 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}.
*/
$button-toolbar-background-gradient-over: dynamic('glossy-button-over');
/**
* @var {string/list}
* The background-gradient for the `default-toolbar` button UI when the button is 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}.
*/
$button-toolbar-background-gradient-focus: dynamic($button-toolbar-background-gradient-over);
/**
* @var {string/list}
* The background-gradient for the `default-toolbar` button UI when the button is pressed.
* 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}.
*/
$button-toolbar-background-gradient-pressed: dynamic('glossy-button-pressed');
/**
* @var {string/list}
* The background-gradient for the `default-toolbar` button UI when the button is focused
* and the cursor is over the button. 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}.
*/
$button-toolbar-background-gradient-focus-over: dynamic($button-toolbar-background-gradient-over);
/**
* @var {string/list}
* The background-gradient for the `default-toolbar` button UI when the button is focused
* and pressed. 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}.
*/
$button-toolbar-background-gradient-focus-pressed: dynamic($button-toolbar-background-gradient-pressed);
/**
* @var {string/list}
* The background-gradient for the `default-toolbar` button UI when the button is disabled.
* 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}.
*/
$button-toolbar-background-gradient-disabled: dynamic('glossy-button-disabled');
/**
* @var {color}
* The text color for the `default-toolbar` button UI
*/
$button-toolbar-color: dynamic(#000);
/**
* @var {color}
* The text color for the `default-toolbar` button UI when the cursor is over the button
*/
$button-toolbar-color-over: dynamic(button-toolbar-color-over($button-toolbar-color));
/**
* @var {color}
* The text color for the `default-toolbar` button UI when the button is focused
*/
$button-toolbar-color-focus: dynamic(button-toolbar-color-focus($button-toolbar-color));
/**
* @var {color}
* The text color for the `default-toolbar` button UI when the button is pressed
*/
$button-toolbar-color-pressed: dynamic(button-toolbar-color-pressed($button-toolbar-color));
/**
* @var {color}
* The text color for the `default-toolbar` button UI when the button is focused and the
* cursor is over the button
*/
$button-toolbar-color-focus-over: dynamic($button-toolbar-color-over);
/**
* @var {color}
* The text color for the `default-toolbar` button UI when the button is focused and pressed
*/
$button-toolbar-color-focus-pressed: dynamic($button-toolbar-color-pressed);
/**
* @var {color}
* The text color for the `default-toolbar` button UI when the button is disabled
*/
$button-toolbar-color-disabled: dynamic(button-toolbar-color-disabled($button-toolbar-color));
/**
* @var {number/list}
* The inner border-width for the `default-toolbar` button UI
*/
$button-toolbar-inner-border-width: dynamic('none');
/**
* @var {number/list}
* The inner border-width for the `default-toolbar` button UI when the cursor is over the button
*/
$button-toolbar-inner-border-width-over: dynamic($button-toolbar-inner-border-width);
/**
* @var {number/list}
* The inner border-width for the `default-toolbar` button UI when the button is focused
*/
$button-toolbar-inner-border-width-focus: dynamic($button-toolbar-inner-border-width);
/**
* @var {number/list}
* The inner border-width for the `default-toolbar` button UI when the button is pressed
*/
$button-toolbar-inner-border-width-pressed: dynamic($button-toolbar-inner-border-width);
/**
* @var {number/list}
* The inner border-width for the `default-toolbar` button UI when the button is focused
* and the cursor is over the button
*/
$button-toolbar-inner-border-width-focus-over: dynamic($button-toolbar-inner-border-width-focus);
/**
* @var {number/list}
* The inner border-width for the `default-toolbar` button UI when the button is focused
* and pressed
*/
$button-toolbar-inner-border-width-focus-pressed: dynamic($button-toolbar-inner-border-width-focus);
/**
* @var {number/list}
* The inner border-width for the `default-toolbar` button UI when the button is disabled
*/
$button-toolbar-inner-border-width-disabled: dynamic($button-toolbar-inner-border-width);
/**
* @var {color}
* The inner border-color for the `default-toolbar` button UI
*/
$button-toolbar-inner-border-color: dynamic(button-toolbar-inner-border-color($button-toolbar-background-color, $button-toolbar-color));
/**
* @var {color}
* The inner border-color for the `default-toolbar` button UI when the cursor is over the button
*/
$button-toolbar-inner-border-color-over: dynamic(button-toolbar-inner-border-color-over($button-toolbar-background-color-over, $button-toolbar-color-over));
/**
* @var {color}
* The inner border-color for the `default-toolbar` button UI when the button is focused
*/
$button-toolbar-inner-border-color-focus: dynamic(button-toolbar-inner-border-color-focus($button-toolbar-background-color-focus, $button-toolbar-color-focus));
/**
* @var {color}
* The inner border-color for the `default-toolbar` button UI when the button is pressed
*/
$button-toolbar-inner-border-color-pressed: dynamic(button-toolbar-inner-border-color-pressed($button-toolbar-background-color-pressed, $button-toolbar-color-pressed));
/**
* @var {color}
* The inner border-color for the `default-toolbar` button UI when the button is focused
* and the cursor is over the button
*/
$button-toolbar-inner-border-color-focus-over: dynamic(button-toolbar-inner-border-color-focus-over($button-toolbar-background-color-focus-over, $button-toolbar-color-focus-over));
/**
* @var {color}
* The inner border-color for the `default-toolbar` button UI when the button is focused
* and pressed
*/
$button-toolbar-inner-border-color-focus-pressed: dynamic(button-toolbar-inner-border-color-focus-pressed($button-toolbar-background-color-focus-pressed, $button-toolbar-color-focus-pressed));
/**
* @var {color}
* The inner border-color for the `default-toolbar` button UI when the button is disabled
*/
$button-toolbar-inner-border-color-disabled: dynamic(button-toolbar-inner-border-color-disabled($button-toolbar-background-color-disabled, $button-toolbar-color-disabled));
/**
* @var {number}
* The body outline width for the `default-toolbar` button UI when the button is focused
*/
$button-toolbar-body-outline-width-focus: dynamic($button-default-body-outline-width-focus);
/**
* @var {string}
* The body outline-style for the `default-toolbar` button UI when the button is focused
*/
$button-toolbar-body-outline-style-focus: dynamic($button-default-body-outline-style-focus);
/**
* @var {color}
* The body outline color for the `default-toolbar` button UI when the button is focused
*/
$button-toolbar-body-outline-color-focus: dynamic($button-default-body-outline-color-focus);
/**
* @var {color}
* The color of the {@link #glyph} icon for the `default-toolbar` button UI
*/
$button-toolbar-glyph-color: dynamic($button-toolbar-color);
/**
* @var {string/list}
* Glyph color for the button arrow of the `default-toolbar` button UI when when
* {@link Global_CSS#$enable-font-icons} is `true`.
*/
$button-toolbar-arrow-glyph-color: dynamic($button-toolbar-color);
/**
* @var {color}
* The color for a {@link Ext.button.Split Split Button}'s line in the `toolbar` button UI.
* Only applicable when {@link #$button-split-width} is greater than 0.
*/
$button-toolbar-split-line-color: dynamic($button-toolbar-arrow-glyph-color);
/**
* @var {color}
* The opacity of the {@link #glyph} icon for the `default-toolbar` button UI
*/
$button-toolbar-glyph-opacity: dynamic(.5);
/**
* @var {boolean} $button-include-ui-menu-arrows
* True to use a different image url for the menu button arrows for each button UI
*/
$button-include-ui-menu-arrows: dynamic(false);
/**
* @var {boolean} $button-include-ui-split-arrows
* True to use a different image url for the split button arrows for each button UI
*/
$button-include-ui-split-arrows: dynamic(false);
/**
* @var {boolean} $button-include-split-over-arrows
* True to include different split arrows for buttons' hover state.
*/
$button-include-split-over-arrows: dynamic(false);
/**
* @var {boolean} $button-include-split-noline-arrows
* True to include "noline" split arrows for buttons in their default state.
*/
$button-include-split-noline-arrows: dynamic(false);
/**
* @var {boolean} $button-toolbar-include-split-noline-arrows
* True to include "noline" split arrows for toolbar buttons in their default state.
*/
$button-toolbar-include-split-noline-arrows: dynamic(false);
/**
* @var {number} $button-opacity-disabled
* opacity to apply to the button's main element when the buton is disabled
*/
$button-opacity-disabled: dynamic(0.5);
/**
* @var {number} $button-inner-opacity-disabled
* opacity to apply to the button's inner elements (icon and text) when the buton is disabled
*/
$button-inner-opacity-disabled: dynamic(1);
/**
* @var {number} $button-toolbar-opacity-disabled
* opacity to apply to the toolbar button's main element when the button is disabled
*/
$button-toolbar-opacity-disabled: dynamic(0.5);
/**
* @var {number} $button-toolbar-inner-opacity-disabled
* opacity to apply to the toolbar button's inner elements (icon and text) when the buton is disabled
*/
$button-toolbar-inner-opacity-disabled: dynamic(1);
/**
* @var {boolean}
* True to include the "default" button UI
*/
$include-button-default-ui: dynamic($include-default-uis);
/**
* @var {boolean}
* True to include the "default" button UI for "small" scale buttons
*/
$include-button-default-small-ui: dynamic($include-button-default-ui);
/**
* @var {boolean}
* True to include the "default" button UI for "medium" scale buttons
*/
$include-button-default-medium-ui: dynamic($include-button-default-ui);
/**
* @var {boolean}
* True to include the "default" button UI for "large" scale buttons
*/
$include-button-default-large-ui: dynamic($include-button-default-ui);
/**
* @var {boolean}
* True to include the "default" button UI for buttons rendered inside a grid cell (Slightly smaller height than default)
*/
$include-button-grid-cell-ui: dynamic($include-button-default-ui);
/**
* @var {boolean}
* True to include the "default-toolbar" button UI
*/
$include-button-default-toolbar-ui: dynamic($include-default-uis);
/**
* @var {boolean}
* True to include the "default-toolbar" button UI for "small" scale buttons
*/
$include-button-default-toolbar-small-ui: dynamic($include-button-default-toolbar-ui);
/**
* @var {boolean}
* True to include the "default-toolbar" button UI for "medium" scale buttons
*/
$include-button-default-toolbar-medium-ui: dynamic($include-button-default-toolbar-ui);
/**
* @var {boolean}
* True to include the "default-toolbar" button UI for "large" scale buttons
*/
$include-button-default-toolbar-large-ui: dynamic($include-button-default-toolbar-ui);
/**
* @var {number}
* The default width for a grid cell button's {@link #cfg-menu} arrow
*/
$button-grid-cell-arrow-width: dynamic($button-arrow-width);
/**
* @var {number}
* The default height for a grid cell button's {@link #cfg-menu} arrow
*/
$button-grid-cell-arrow-height: dynamic($button-arrow-height);
/**
* @var {string/list}
* Glyph for a grid cell button arrow when when {@link Global_CSS#$enable-font-icons} is `true`.
*/
$button-grid-cell-arrow-glyph: dynamic($button-small-arrow-glyph);
/**
* @var {number}
* The default width a grid cell {@link Ext.button.Split Split Button}'s arrow
*/
$button-grid-cell-split-width: dynamic($button-split-width);
/**
* @var {number}
* The default height a grid cell {@link Ext.button.Split Split Button}'s arrow
*/
$button-grid-cell-split-height: dynamic($button-split-height);
/**
* @var {number}
* The default space between a grid cell button's icon and text
*/
$button-grid-cell-icon-spacing: dynamic($button-icon-spacing);
/**
* @var {number}
* The default border-radius for a grid cell button
*/
$button-grid-cell-border-radius: dynamic($button-small-border-radius);
/**
* @var {number}
* The default border-width for a grid cell button
*/
$button-grid-cell-border-width: dynamic($button-small-border-width);
/**
* @var {number}
* The default padding for a grid cell button
*/
$button-grid-cell-padding: dynamic($button-small-padding);
/**
* @var {number}
* The default horizontal padding to add to the left and right of the text element for
* a grid cell button
*/
$button-grid-cell-text-padding: dynamic($button-small-text-padding);
/**
* @var {number}
* The default font-size for a grid cell button
*/
$button-grid-cell-font-size: dynamic($button-small-font-size); //11px
/**
* @var {number}
* The default font-size for a grid cell button when the cursor is over the button
*/
$button-grid-cell-font-size-over: dynamic($button-grid-cell-font-size);
/**
* @var {number}
* The default font-size for a grid cell button when the button is focused
*/
$button-grid-cell-font-size-focus: dynamic($button-grid-cell-font-size-over);
/**
* @var {number}
* The default font-size for a grid cell button when the button is pressed
*/
$button-grid-cell-font-size-pressed: dynamic($button-grid-cell-font-size);
/**
* @var {number}
* The default font-size for a grid cell button when the button is focused and the cursor
* is over the button
*/
$button-grid-cell-font-size-focus-over: dynamic($button-grid-cell-font-size-over);
/**
* @var {number}
* The default font-size for a grid cell button when the button is focused and pressed
*/
$button-grid-cell-font-size-focus-pressed: dynamic($button-grid-cell-font-size-pressed);
/**
* @var {number}
* The default font-size for a grid cell button when the button is disabled
*/
$button-grid-cell-font-size-disabled: dynamic($button-grid-cell-font-size);
/**
* @var {string}
* The default font-weight for a grid cell button
*/
$button-grid-cell-font-weight: dynamic($button-small-font-weight);
/**
* @var {string}
* The default font-weight for a grid cell button when the cursor is over the button
*/
$button-grid-cell-font-weight-over: dynamic($button-grid-cell-font-weight);
/**
* @var {string}
* The default font-weight for a grid cell button when the button is focused
*/
$button-grid-cell-font-weight-focus: dynamic($button-grid-cell-font-weight-over);
/**
* @var {string}
* The default font-weight for a grid cell button when the button is pressed
*/
$button-grid-cell-font-weight-pressed: dynamic($button-grid-cell-font-weight);
/**
* @var {string}
* The default font-weight for a grid cell button when the button is focused and the
* cursor is over the button
*/
$button-grid-cell-font-weight-focus-over: dynamic($button-grid-cell-font-weight-over);
/**
* @var {string}
* The default font-weight for a grid cell button when the button is focused and pressed
*/
$button-grid-cell-font-weight-focus-pressed: dynamic($button-grid-cell-font-weight-pressed);
/**
* @var {string}
* The default font-weight for a grid cell button when the button is disabled
*/
$button-grid-cell-font-weight-disabled: dynamic($button-grid-cell-font-weight);
/**
* @var {string}
* The default font-family for a grid cell button
*/
$button-grid-cell-font-family: dynamic($button-small-font-family);
/**
* @var {string}
* The default font-family for a grid cell button when the cursor is over the button
*/
$button-grid-cell-font-family-over: dynamic($button-grid-cell-font-family);
/**
* @var {string}
* The default font-family for a grid cell button when the button is focused
*/
$button-grid-cell-font-family-focus: dynamic($button-grid-cell-font-family-over);
/**
* @var {string}
* The default font-family for a grid cell button when the button is pressed
*/
$button-grid-cell-font-family-pressed: dynamic($button-grid-cell-font-family);
/**
* @var {string}
* The default font-family for a grid cell button when the button is focused and the
* cursor is over the button
*/
$button-grid-cell-font-family-focus-over: dynamic($button-grid-cell-font-family-over);
/**
* @var {string}
* The default font-family for a grid cell button when the button is focused and pressed
*/
$button-grid-cell-font-family-focus-pressed: dynamic($button-grid-cell-font-family-pressed);
/**
* @var {string}
* The default font-family for a grid cell button when the button is disabled
*/
$button-grid-cell-font-family-disabled: dynamic($button-grid-cell-font-family);
/**
* @var {number}
* The line-height for the text in a grid cell button
*/
$button-grid-cell-line-height: dynamic($button-small-line-height);
/**
* @var {number}
* The default icon size for a grid cell button
*/
$button-grid-cell-icon-size: dynamic($button-small-icon-size);
/**
* @var {number}
* The the font-size for grid cell button glyphs
*/
$button-grid-cell-glyph-font-size: dynamic($button-grid-cell-icon-size);
/**
* @var {color}
* The border-color for the `cell` button UI
*/
$button-grid-cell-border-color: dynamic($button-default-border-color);
/**
* @var {color}
* The border-color for the `cell` button UI when the cursor is over the button
*/
$button-grid-cell-border-color-over: dynamic(button-default-border-color-over($button-grid-cell-border-color));
/**
* @var {color}
* The border-color for the `cell` button UI when the button is focused
*/
$button-grid-cell-border-color-focus: dynamic(button-default-border-color-focus($button-grid-cell-border-color));
/**
* @var {color}
* The border-color for the `cell` button UI when the button is pressed
*/
$button-grid-cell-border-color-pressed: dynamic(button-default-border-color-pressed($button-grid-cell-border-color));
/**
* @var {color}
* The border-color for the `cell` button UI when the button is focused and the cursor
* is over the button
*/
$button-grid-cell-border-color-focus-over: dynamic($button-grid-cell-border-color-over);
/**
* @var {color}
* The border-color for the `cell` button UI when the button is focused and pressed
*/
$button-grid-cell-border-color-focus-pressed: dynamic($button-grid-cell-border-color-pressed);
/**
* @var {color}
* The border-color for the `cell` button UI when the button is disabled
*/
$button-grid-cell-border-color-disabled: dynamic(button-default-border-color-disabled($button-grid-cell-border-color));
/**
* @var {color}
* The background-color for the `cell` button UI
*/
$button-grid-cell-background-color: dynamic($button-default-background-color);
/**
* @var {color}
* The background-color for the `cell` button UI when the cursor is over the button
*/
$button-grid-cell-background-color-over: dynamic(button-default-background-color-over($button-grid-cell-background-color));
/**
* @var {color}
* The background-color for the `cell` button UI when the button is focused
*/
$button-grid-cell-background-color-focus: dynamic(button-default-background-color-focus($button-grid-cell-background-color));
/**
* @var {color}
* The background-color for the `cell` button UI when the button is pressed
*/
$button-grid-cell-background-color-pressed: dynamic(button-default-background-color-pressed($button-grid-cell-background-color));
/**
* @var {color}
* The background-color for the `cell` button UI when the button is focused and the cursor
* is over the button
*/
$button-grid-cell-background-color-focus-over: dynamic($button-grid-cell-background-color-over);
/**
* @var {color}
* The background-color for the `cell` button UI when the button is focused and pressed
*/
$button-grid-cell-background-color-focus-pressed: dynamic($button-grid-cell-background-color-pressed);
/**
* @var {color}
* The background-color for the `cell` button UI when the button is disabled
*/
$button-grid-cell-background-color-disabled: dynamic(button-default-background-color-disabled($button-grid-cell-background-color));
/**
* @var {string/list}
* The background-gradient for the `cell` button UI. 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}.
*/
$button-grid-cell-background-gradient: dynamic($button-default-background-gradient);
/**
* @var {string/list}
* The background-gradient for the `cell` button UI when the cursor is over the button.
* 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}.
*/
$button-grid-cell-background-gradient-over: dynamic($button-default-background-gradient-over);
/**
* @var {string/list}
* The background-gradient for the `cell` button UI when the button is 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}.
*/
$button-grid-cell-background-gradient-focus: dynamic($button-grid-cell-background-gradient-over);
/**
* @var {string/list}
* The background-gradient for the `cell` button UI when the button is pressed. 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}.
*/
$button-grid-cell-background-gradient-pressed: dynamic($button-default-background-gradient-pressed);
/**
* @var {string/list}
* The background-gradient for the `cell` button UI when the button is focused and the
* cursor is over the button. 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}.
*/
$button-grid-cell-background-gradient-focus-over: dynamic($button-grid-cell-background-gradient-over);
/**
* @var {string/list}
* The background-gradient for the `cell` button UI when the button is focused and pressed.
* 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}.
*/
$button-grid-cell-background-gradient-focus-pressed: dynamic($button-grid-cell-background-gradient-pressed);
/**
* @var {string/list}
* The background-gradient for the `cell` button UI when the button is disabled. 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}.
*/
$button-grid-cell-background-gradient-disabled: dynamic($button-default-background-gradient-disabled);
/**
* @var {color}
* The text color for the `cell` button UI
*/
$button-grid-cell-color: dynamic($button-default-color);
/**
* @var {color}
* The text color for the `cell` button UI when the cursor is over the button
*/
$button-grid-cell-color-over: dynamic(button-default-color-over($button-grid-cell-color));
/**
* @var {color}
* The text color for the `cell` button UI when the button is focused
*/
$button-grid-cell-color-focus: dynamic(button-default-color-focus($button-grid-cell-color));
/**
* @var {color}
* The text color for the `cell` button UI when the button is pressed
*/
$button-grid-cell-color-pressed: dynamic(button-default-color-pressed($button-grid-cell-color));
/**
* @var {color}
* The text color for the `cell` button UI when the button is focused and the cursor is
* over the button
*/
$button-grid-cell-color-focus-over: dynamic($button-grid-cell-color-over);
/**
* @var {color}
* The text color for the `cell` button UI when the button is focused and pressed
*/
$button-grid-cell-color-focus-pressed: dynamic($button-grid-cell-color-pressed);
/**
* @var {color}
* The text color for the `cell` button UI when the button is disabled
*/
$button-grid-cell-color-disabled: dynamic(button-default-color-disabled($button-grid-cell-color));
/**
* @var {number/list}
* The inner border-width for the `cell` button UI
*/
$button-grid-cell-inner-border-width: dynamic('none');
/**
* @var {number/list}
* The inner border-width for the `cell` button UI when the cursor is over the button
*/
$button-grid-cell-inner-border-width-over: dynamic($button-grid-cell-inner-border-width);
/**
* @var {number/list}
* The inner border-width for the `cell` button UI when the button is focused
*/
$button-grid-cell-inner-border-width-focus: dynamic($button-grid-cell-inner-border-width);
/**
* @var {number/list}
* The inner border-width for the `cell` button UI when the button is pressed
*/
$button-grid-cell-inner-border-width-pressed: dynamic($button-grid-cell-inner-border-width);
/**
* @var {number/list}
* The inner border-width for the `cell` button UI when the button is focused and the
* cursor is over the button
*/
$button-grid-cell-inner-border-width-focus-over: dynamic($button-grid-cell-inner-border-width-focus);
/**
* @var {number/list}
* The inner border-width for the `cell` button UI when the button is focused and pressed
*/
$button-grid-cell-inner-border-width-focus-pressed: dynamic($button-grid-cell-inner-border-width-focus);
/**
* @var {number/list}
* The inner border-width for the `cell` button UI when the button is disabled
*/
$button-grid-cell-inner-border-width-disabled: dynamic($button-grid-cell-inner-border-width);
/**
* @var {color}
* The inner border-color for the `cell` button UI
*/
$button-grid-cell-inner-border-color: dynamic(button-default-inner-border-color($button-grid-cell-background-color, $button-grid-cell-color));
/**
* @var {color}
* The inner border-color for the `cell` button UI when the cursor is over the button
*/
$button-grid-cell-inner-border-color-over: dynamic(button-default-inner-border-color-over($button-grid-cell-background-color-over, $button-grid-cell-color-over));
/**
* @var {color}
* The inner border-color for the `cell` button UI when the button is focused
*/
$button-grid-cell-inner-border-color-focus: dynamic(button-default-inner-border-color-focus($button-grid-cell-background-color-focus, $button-grid-cell-color-focus));
/**
* @var {color}
* The inner border-color for the `cell` button UI when the button is pressed
*/
$button-grid-cell-inner-border-color-pressed: dynamic(button-default-inner-border-color-pressed($button-grid-cell-background-color-pressed, $button-grid-cell-color-pressed));
/**
* @var {color}
* The inner border-color for the `cell` button UI when the button is focused and the
* cursor is over the button
*/
$button-grid-cell-inner-border-color-focus-over: dynamic(button-default-inner-border-color-focus-over($button-grid-cell-background-color-focus-over, $button-grid-cell-color-focus-over));
/**
* @var {color}
* The inner border-color for the `cell` button UI when the button is focused and pressed
*/
$button-grid-cell-inner-border-color-focus-pressed: dynamic(button-default-inner-border-color-focus-pressed($button-grid-cell-background-color-focus-pressed, $button-grid-cell-color-focus-pressed));
/**
* @var {color}
* The inner border-color for the `cell` button UI when the button is disabled
*/
$button-grid-cell-inner-border-color-disabled: dynamic(button-default-inner-border-color-disabled($button-grid-cell-background-color-disabled, $button-grid-cell-color-disabled));
/**
* @var {number}
* The body outline width for the `cell` button UI when the button is focused
*/
$button-grid-cell-body-outline-width-focus: dynamic($button-default-body-outline-width-focus);
/**
* @var {string}
* The body outline-style for the `cell` button UI when the button is focused
*/
$button-grid-cell-body-outline-style-focus: dynamic($button-default-body-outline-style-focus);
/**
* @var {color}
* The body outline color for the `cell` button UI when the button is focused
*/
$button-grid-cell-body-outline-color-focus: dynamic($button-default-body-outline-color-focus);
/**
* @var {color}
* The color of the {@link #glyph} icon for the `cell` button UI
*/
$button-grid-cell-glyph-color: dynamic($button-grid-cell-color);
/**
* @var {string/list}
* Glyph color for the button arrow of the `cell` button UI when when
* {@link Global_CSS#$enable-font-icons} is `true`.
*/
$button-grid-cell-arrow-glyph-color: dynamic($button-grid-cell-color);
/**
* @var {color}
* The width for a {@link Ext.button.Split Split Button}'s line in the `cell` button UI.
*/
$button-grid-cell-split-line-width: dynamic($button-small-split-line-width);
/**
* @var {color}
* The color for a {@link Ext.button.Split Split Button}'s line in the `cell` button UI.
* Only applicable when {@link #$button-grid-cell-split-line-width} is greater than 0.
*/
$button-grid-cell-split-line-color: dynamic($button-grid-cell-arrow-glyph-color);
/**
* @var {color}
* The opacity of the {@link #glyph} icon for the `cell` button UI
*/
$button-grid-cell-glyph-opacity: dynamic($button-default-glyph-opacity);
/**
* @var {number} $button-grid-cell-opacity-disabled
* opacity to apply to the button's main element when the button is disabled
*/
$button-grid-cell-opacity-disabled: dynamic($button-opacity-disabled);
/**
* @var {number} $button-grid-cell-inner-opacity-disabled
* opacity to apply to the button's inner elements (icon and text) when the buton is disabled
*/
$button-grid-cell-inner-opacity-disabled: dynamic($button-inner-opacity-disabled);
/**
* Creates a visual theme for a Button. This mixin is not {@link #scale} aware, and therefore
* does not provide defaults for most parameters, so it is advisable to use one of the
* following mixins instead when creating a custom buttonUI:
*
* #extjs-button-small-ui - creates a button UI for a small button
* #extjs-button-medium-ui - creates a button UI for a medium button
* #extjs-button-large-ui - creates a button UI for a large button
* #extjs-button-toolbar-small-ui - creates a button UI for a small toolbar button
* #extjs-button-toolbar-medium-ui - creates a button UI for a medium toolbar button
* #extjs-button-toolbar-large-ui - creates a button UI for a large toolbar button
*
* @param {string} $ui
* The name of the UI being created. Can not included spaces or special punctuation
* (used in CSS class names).
*
* @param {number} [$border-radius=0px]
* The border-radius of the button
*
* @param {number} [$border-width=0px]
* The border-width of the button
*
* @param {color} $border-color
* The border-color of the button
*
* @param {color} $border-color-over
* The border-color of the button when the cursor is over the button
*
* @param {color} $border-color-focus
* The border-color of the button when focused
*
* @param {color} $border-color-pressed
* The border-color of the button when pressed
*
* @param {color} $border-color-focus-over
* The border-color of the button when the button is focused and the cursor is over the
* button
*
* @param {color} $border-color-focus-pressed
* The border-color of the button when focused and pressed
*
* @param {color} $border-color-disabled
* The border-color of the button when disabled
*
* @param {number} $padding
* The amount of padding inside the border of the button on all sides
*
* @param {number} $text-padding
* The amount of horizontal space to add to the left and right of the button text
*
* @param {color} $background-color
* The background-color of the button
*
* @param {color} $background-color-over
* The background-color of the button when the cursor is over the button
*
* @param {color} $background-color-focus
* The background-color of the button when focused
*
* @param {color} $background-color-pressed
* The background-color of the button when pressed
*
* @param {color} $background-color-focus-over
* The background-color of the button when the button is focused and the cursor is over
* the button
*
* @param {color} $background-color-focus-pressed
* The background-color of the button when focused and pressed
*
* @param {color} $background-color-disabled
* The background-color of the button when disabled
*
* @param {string/list} $background-gradient
* The background-gradient for the button. 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} $background-gradient-over
* The background-gradient to use when the cursor is over the button. 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} $background-gradient-focus
* The background-gradient to use when the the button is 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} $background-gradient-pressed
* The background-gradient to use when the the button is pressed. 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} $background-gradient-focus-over
* The background-gradient to use when the the button is focused and the cursor is over
* the button. 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} $background-gradient-focus-pressed
* The background-gradient to use when the the button is focused and pressed. 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} $background-gradient-disabled
* The background-gradient to use when the the button is disabled. 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 {color} $color
* The text color of the button
*
* @param {color} $color-over
* The text color of the button when the cursor is over the button
*
* @param {color} $color-focus
* The text color of the button when the button is focused
*
* @param {color} $color-pressed
* The text color of the button when the button is pressed
*
* @param {color} $color-focus-over
* The text color of the button when the button is focused and the cursor is over the button
*
* @param {color} $color-focus-pressed
* The text color of the button when the button is focused and pressed
*
* @param {color} $color-disabled
* The text color of the button when the button is disabled
*
* @param {number/list} $inner-border-width
* The inner border-width of the button
*
* @param {number/list} $inner-border-width-over
* The inner border-width of the button when the cursor is over the button
*
* @param {number/list} $inner-border-width-focus
* The inner border-width of the button when focused
*
* @param {number/list} $inner-border-width-pressed
* The inner border-width of the button when pressed
*
* @param {number/list} $inner-border-width-focus-over
* The inner border-width of the button when the button is focused and the cursor is over
* the button
*
* @param {number/list} $inner-border-width-focus-pressed
* The inner border-width of the button when focused and pressed
*
* @param {number/list} $inner-border-width-disabled
* The inner border-width of the button when disabled
*
* @param {color} $inner-border-color
* The inner border-color of the button
*
* @param {color} $inner-border-color-over
* The inner border-color of the button when the cursor is over the button
*
* @param {color} $inner-border-color-focus
* The inner border-color of the button when focused
*
* @param {color} $inner-border-color-pressed
* The inner border-color of the button when pressed
*
* @param {color} $inner-border-color-focus-over
* The inner border-color of the button when the button is focused and the cursor is over
* the button
*
* @param {color} $inner-border-color-focus-pressed
* The inner border-color of the button when focused and pressed
*
* @param {color} $inner-border-color-disabled
* The inner border-color of the button when disabled
*
* @param {number} $body-outline-width-focus
* The body outline width of the button when focused
*
* @param {string} $body-outline-style-focus
* The body outline-style of the button when focused
*
* @param {color} $body-outline-color-focus
* The body outline color of the button when focused
*
* @param {number} $font-size
* The font-size of the button
*
* @param {number} $font-size-over
* The font-size of the button when the cursor is over the button
*
* @param {number} $font-size-focus
* The font-size of the button when the button is focused
*
* @param {number} $font-size-pressed
* The font-size of the button when the button is pressed
*
* @param {number} $font-size-focus-over
* The font-size of the button when the button is focused and the cursor is over the
* button
*
* @param {number} $font-size-focus-pressed
* The font-size of the button when the button is focused and pressed
*
* @param {number} $font-size-disabled
* The font-size of the button when the button is disabled
*
* @param {string} $font-weight
* The font-weight of the button
*
* @param {string} $font-weight-over
* The font-weight of the button when the cursor is over the button
*
* @param {string} $font-weight-focus
* The font-weight of the button when the button is focused
*
* @param {string} $font-weight-pressed
* The font-weight of the button when the button is pressed
*
* @param {string} $font-weight-focus-over
* The font-weight of the button when the button is focused and the cursor is over the
* button
*
* @param {string} $font-weight-focus-pressed
* The font-weight of the button when the button is focused and pressed
*
* @param {string} $font-weight-disabled
* The font-weight of the button when the button is disabled
*
* @param {string} $font-family
* The font-family of the button
*
* @param {string} $font-family-over
* The font-family of the button when the cursor is over the button
*
* @param {string} $font-family-focus
* The font-family of the button when the button is focused
*
* @param {string} $font-family-pressed
* The font-family of the button when the button is pressed
*
* @param {string} $font-family-focus-over
* The font-family of the button when the button is focused and the cursor is over the
* button
*
* @param {string} $font-family-focus-pressed
* The font-family of the button when the button is focused and pressed
*
* @param {string} $font-family-disabled
* The font-family of the button when the button is disabled
*
* @param {number} $icon-size
* The size of the button icon
*
* @param {number} $glyph-font-size
* The font-size for the button glyph
*
* @param {number} [$line-height=$icon-size]
* The line-height for the button glyph
*
* @param {number} $icon-spacing
* The space between the button's icon and text
*
* @param {color} $glyph-color
* The color of the button's {@link #glyph} icon
*
* @param {number} [$glyph-opacity=1]
* The opacity of the button's {@link #glyph} icon
*
* @param {number} $arrow-width
* The width of the button's {@link #cfg-menu} arrow
*
* @param {number} $arrow-height
* The height of the button's {@link #cfg-menu} arrow
*
* @param {string/list} $arrow-glyph
* Glyph for the button arrow when when {@link Global_CSS#$enable-font-icons} is `true`.
*
* @param {string/list} $arrow-glyph-color
* Glyph color for the button arrow when when {@link Global_CSS#$enable-font-icons} is `true`.
*
* @param {number} $split-width
* The width of a {@link Ext.button.Split Split Button}'s arrow
*
* @param {number} $split-height
* The height of a {@link Ext.button.Split Split Button}'s arrow
*
* @param {number} $split-line-width
* The default width for a {@link Ext.button.Split Split Button}'s line.
* Themes that include the line in the arrow background image should set this to 0
*
* @param {color} $split-line-color
* The color for a {@link Ext.button.Split Split Button}'s line.
* Only applicable when `$split-line-width` is greater than 0.
*
* @param {boolean} [$include-ui-menu-arrows=$button-include-ui-menu-arrows]
* True to include the UI name in the file name of the {@link #cfg-menu}
* arrow icon. Set this to false to share the same arrow bewteen multiple UIs.
*
* @param {boolean} [$include-ui-split-arrows=$button-include-ui-split-arrows]
* True to include the UI name in the file name of the {@link Ext.button.Split Split Button}'s
* arrow icon. Set this to false to share the same arrow bewteen multiple UIs.
*
* @param {boolean} [$include-split-noline-arrows=$button-include-split-noline-arrows]
* True to add a "-noline" suffix to the file name of the {@link Ext.button.Split Split Button}'s
* arrow icon. Used for hiding the split line when toolbar buttons are in their default
* state.
*
* @param {boolean} [$include-split-over-arrows=$button-include-split-over-arrows]
* True to use a separate icon for {@link Ext.button.Split Split Button}s when the cursor
* is over the button. The over icon file name will have a "-o" suffix
*
* @param {number} [$opacity-disabled=1]
* The opacity of the button when it is disabled
*
* @param {number} [$inner-opacity-disabled=1]
* The opacity of the button's text and icon elements when when the button is disabled
*
* @member Ext.button.Button
*/
@mixin extjs-button-ui(
$ui,
$border-radius: 0px,
$border-width: 0px,
$border-color: null,
$border-color-over: null,
$border-color-focus: null,
$border-color-pressed: null,
$border-color-focus-over: null,
$border-color-focus-pressed: null,
$border-color-disabled: null,
$padding: null,
$text-padding: null,
$background-color: null,
$background-color-over: null,
$background-color-focus: null,
$background-color-pressed: null,
$background-color-focus-over: null,
$background-color-focus-pressed: null,
$background-color-disabled: null,
$background-gradient: null,
$background-gradient-over: null,
$background-gradient-focus: null,
$background-gradient-pressed: null,
$background-gradient-focus-over: null,
$background-gradient-focus-pressed: null,
$background-gradient-disabled: null,
$color: null,
$color-over: null,
$color-focus: null,
$color-pressed: null,
$color-focus-over: null,
$color-focus-pressed: null,
$color-disabled: null,
$inner-border-width: null,
$inner-border-width-over: null,
$inner-border-width-focus: null,
$inner-border-width-pressed: null,
$inner-border-width-focus-over: null,
$inner-border-width-focus-pressed: null,
$inner-border-width-disabled: null,
$inner-border-color: null,
$inner-border-color-over: null,
$inner-border-color-focus: null,
$inner-border-color-pressed: null,
$inner-border-color-focus-over: null,
$inner-border-color-focus-pressed: null,
$inner-border-color-disabled: null,
$body-outline-width-focus: null,
$body-outline-style-focus: null,
$body-outline-color-focus: null,
$font-size: null,
$font-size-over: null,
$font-size-focus: null,
$font-size-pressed: null,
$font-size-focus-over: null,
$font-size-focus-pressed: null,
$font-size-disabled: null,
$font-weight: null,
$font-weight-over: null,
$font-weight-focus: null,
$font-weight-pressed: null,
$font-weight-focus-over: null,
$font-weight-focus-pressed: null,
$font-weight-disabled: null,
$font-family: null,
$font-family-over: null,
$font-family-focus: null,
$font-family-pressed: null,
$font-family-focus-over: null,
$font-family-focus-pressed: null,
$font-family-disabled: null,
$icon-size: null,
$glyph-font-size: null,
$line-height: $icon-size,
$icon-spacing: $button-icon-spacing,
$glyph-color: $button-default-glyph-color,
$glyph-opacity: $button-default-glyph-opacity,
$arrow-width: null,
$arrow-height: null,
$arrow-glyph: null,
$arrow-glyph-color: null,
$split-width: null,
$split-height: null,
$split-line-width: null,
$split-line-color: null,
$include-ui-menu-arrows: $button-include-ui-menu-arrows,
$include-ui-split-arrows: $button-include-ui-split-arrows,
$include-split-noline-arrows: $button-include-split-noline-arrows,
$include-split-over-arrows: $button-include-split-over-arrows,
$opacity-disabled: $button-opacity-disabled,
$inner-opacity-disabled: $button-inner-opacity-disabled
) {
$inner-border-max: max(
max(top($inner-border-width) right($inner-border-width) bottom($inner-border-width) left($inner-border-width))
max(top($inner-border-width-over) right($inner-border-width-over) bottom($inner-border-width-over) left($inner-border-width-over))
max(top($inner-border-width-focus) right($inner-border-width-focus) bottom($inner-border-width-focus) left($inner-border-width-focus))
max(top($inner-border-width-pressed) right($inner-border-width-pressed) bottom($inner-border-width-pressed) left($inner-border-width-pressed))
max(top($inner-border-width-disabled) right($inner-border-width-disabled) bottom($inner-border-width-disabled) left($inner-border-width-disabled))
);
$frame-size: frame-size($border-width, $inner-border-max, $border-radius);
@include x-frame(
$cls: 'btn',
$ui: $ui,
$border-radius: $border-radius,
$border-width: $border-width,
$padding: $padding,
$background-color: $background-color,
$background-gradient: $background-gradient,
$table: true,
$inner-border-width: $inner-border-width
);
.#{$prefix}btn-#{$ui} {
border-color: $border-color;
@if not is-null($inner-border-width) and not is-null($inner-border-color) and $inner-border-width != 0 {
@include inner-border($inner-border-width, $inner-border-color);
}
}
.#{$prefix}btn-button-#{$ui} {
min-height: max($icon-size, $line-height);
@if $include-ie {
// In ie9m this element is a table cell, so height works like min-height
.#{$prefix}ie9m & {
min-height: auto;
height: max($icon-size, $line-height);
}
}
}
.#{$prefix}btn-inner-#{$ui} {
font: $font-weight #{$font-size}/#{$line-height} $font-family;
color: $color;
@if $text-padding != 0 {
padding: 0 $text-padding;
}
// Where table-based layouts are used (IE8/9) inner el requires max-width in order
// for ellipsis to work. Safari also requires max width because of a bug in its
// -webkit-box layout that allows an element to expand beyond its flexed width if
// its content is larger than the flexed width.
// Rather than target the max rule to all the browsers that need it, we'll just add
// it everywhere, and then disable it where it causes problems (IE10p)
max-width: 100%;
.#{$prefix}btn-icon-right > &,
.#{$prefix}btn-icon-left > & {
// since calc is only supported in IE9+ ellipsis will not work in IE8 when
// there is a left or right icon present
@if $include-ie {
.#{$prefix}ie9 & {
max-width: calc(100% - #{$icon-size});
}
}
// Safari calc() does not handle sub-pixel sizes correctly and therefore the max width
// can be larger than its parent and causes text-overflow. We remove 1px from the
// calculation to prevent overflow.
.#{$prefix}safari8m & {
max-width: calc(100% - #{$icon-size - 1px});
}
}
// Max-width interferes with the layout in IE11. Fortunately we don't need the hack there
.#{$prefix}ie10p & {
max-width: none;
}
}
.#{$prefix}btn-icon-el-#{$ui} {
font-size: $glyph-font-size;
height: $icon-size;
color: $glyph-color;
line-height: $icon-size;
.#{$prefix}btn-icon-left > &,
.#{$prefix}btn-icon-right > & {
width: $icon-size;
}
.#{$prefix}btn-icon-top > &,
.#{$prefix}btn-icon-bottom > & {
min-width: $icon-size;
}
&.#{$prefix}btn-glyph {
@if $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: $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 button's background-color.
$mix-color: $background-color;
@if $mix-color == transparent {
$mix-color: #fff;
}
@if $include-ie {
.#{$prefix}ie8 & {
color: mix($glyph-color, $mix-color, $glyph-opacity * 100);
}
}
}
// when the button contains both icon and text, add $icon-spacing to the icon
.#{$prefix}btn-text.#{$prefix}btn-icon-left > & {
margin-right: max($icon-spacing - $text-padding, 0);
@if $include-rtl {
&.#{$prefix}rtl {
margin-right: 0;
margin-left: max($icon-spacing - $text-padding, 0);
}
}
}
.#{$prefix}btn-text.#{$prefix}btn-icon-right > & {
margin-left: max($icon-spacing - $text-padding, 0);
@if $include-rtl {
&.#{$prefix}rtl {
margin-left: 0;
margin-right: max($icon-spacing - $text-padding, 0);
}
}
}
.#{$prefix}btn-text.#{$prefix}btn-icon-top > & {
margin-bottom: $icon-spacing;
}
.#{$prefix}btn-text.#{$prefix}btn-icon-bottom > & {
margin-top: $icon-spacing;
}
}
.#{$prefix}btn-arrow-right > {
.#{$prefix}btn-icon.#{$prefix}btn-no-text.#{$prefix}btn-button-#{$ui} {
padding-right: $icon-spacing;
}
.#{$prefix}btn-text.#{$prefix}btn-icon-right > .#{$prefix}btn-icon-el-#{$ui} {
margin-right: $text-padding;
}
}
.#{$prefix}btn-arrow-bottom,
.#{$prefix}btn-split-bottom {
> .#{$prefix}btn-button-#{$ui} {
padding-bottom: bottom($padding);
}
}
.#{$prefix}btn-wrap-#{$ui} {
&.#{$prefix}btn-arrow-right:after {
width: $arrow-width;
@if $enable-font-icons and ($arrow-glyph != null) {
@include font-icon($glyph: $arrow-glyph, $pseudo: false);
color: $arrow-glyph-color;
} @else {
@if $include-ui-menu-arrows {
background-image: theme-background-image('button/#{$ui}-arrow');
} @else {
background-image: theme-background-image('button/arrow');
}
// The arrow can get smashed into oblivion by an outer containing element if
// the container is smaller than the button. padding prevents this.
padding-right: $arrow-width;
}
}
@if $include-rtl and ((not $enable-font-icons) or ($arrow-glyph == null)) {
&.#{$prefix}rtl.#{$prefix}btn-arrow-right:after {
@if $include-ui-menu-arrows {
background-image: theme-background-image('button/#{$ui}-arrow-rtl');
} @else {
background-image: theme-background-image('button/arrow-rtl');
}
}
}
&.#{$prefix}btn-arrow-bottom:after {
height: $arrow-height;
@if $enable-font-icons and ($arrow-glyph != null) {
@include font-icon($glyph: $arrow-glyph, $pseudo: false, $line-height: $arrow-height);
color: $arrow-glyph-color;
} @else {
@if $include-ui-menu-arrows {
background-image: theme-background-image('button/#{$ui}-arrow');
} @else {
background-image: theme-background-image('button/arrow');
}
}
}
}
$arrow-prefix: '';
@if $include-ui-split-arrows {
$arrow-prefix: $ui + '-';
}
$arrow-suffix: '';
@if $include-split-noline-arrows {
$arrow-suffix: '-noline';
}
.#{$prefix}btn-wrap-#{$ui} {
&.#{$prefix}btn-split-right {
@if $split-line-width > 0 {
> .#{$prefix}btn-button {
padding-right: right($padding);
@if $include-rtl {
&.#{$prefix}rtl {
padding-right: 0;
padding-left: right($padding);
}
}
&:after {
border-right: $split-line-width solid $split-line-color;
}
}
}
&:after {
width: $split-width;
@if $enable-font-icons and ($arrow-glyph != null) {
@include font-icon($glyph: $arrow-glyph, $pseudo: false);
color: $arrow-glyph-color;
padding-left: right($padding); // center the arrow in the trigger area
} @else {
background-image: theme-background-image('button/#{$arrow-prefix}s-arrow#{$arrow-suffix}');
// The arrow can get smashed into oblivion by an outer containing element if
// the container is smaller than the button. padding prevents this.
padding-right: $split-width;
}
}
}
@if $include-rtl {
&.#{$prefix}rtl.#{$prefix}btn-split-right:after {
@if $enable-font-icons and ($arrow-glyph != null) {
padding-left: 0;
padding-right: right($padding);
} @else {
background-image: theme-background-image('button/#{$arrow-prefix}s-arrow#{$arrow-suffix}-rtl');
}
}
}
&.#{$prefix}btn-split-bottom {
@if $split-line-width > 0 {
> .#{$prefix}btn-button:after {
border-bottom: $split-line-width solid $split-line-color;
}
}
@if $enable-font-icons and ($arrow-glyph != null) {
// negate the effect of bottom padding so that the split arrow icon
// appears roughly vertically centered by virtue of its line-height
margin-bottom: -(bottom($padding));
}
&:after {
height: $split-height;
@if $enable-font-icons and ($arrow-glyph != null) {
@include font-icon($glyph: $arrow-glyph, $pseudo: false, $line-height: $split-height);
color: $arrow-glyph-color;
} @else {
background-image: theme-background-image('button/#{$arrow-prefix}s-arrow-b#{$arrow-suffix}');
}
}
}
}
@if $include-split-over-arrows and ((not $enable-font-icons) or ($arrow-glyph == null)) {
.#{$prefix}btn-over > {
.#{$prefix}btn-wrap-#{$ui} {
&.#{$prefix}btn-split-right:after {
background-image: theme-background-image('button/#{$arrow-prefix}s-arrow-o');
}
@if $include-rtl {
&.#{$prefix}rtl.#{$prefix}btn-split-right:after {
background-image: theme-background-image('button/#{$arrow-prefix}s-arrow-o-rtl');
}
}
&.#{$prefix}btn-split-bottom:after {
background-image: theme-background-image('button/#{$arrow-prefix}s-arrow-bo');
}
}
}
}
.#{$prefix}btn-split-right > {
.#{$prefix}btn-icon.#{$prefix}btn-no-text.#{$prefix}btn-button-#{$ui} {
padding-right: $icon-spacing;
}
.#{$prefix}btn-text.#{$prefix}btn-icon-right > .#{$prefix}btn-icon-el-#{$ui} {
margin-right: $text-padding;
}
}
.#{$prefix}btn-focus.#{$prefix}btn-#{$ui} {
.#{$prefix}keyboard-mode & {
@if $border-color-focus != $border-color {
border-color: $border-color-focus;
}
@if $background-color-focus != null {
@include background-gradient($background-color-focus, $background-gradient-focus);
}
@if not is-null($inner-border-width-focus) and not is-null($inner-border-color-focus) {
@include inner-border($inner-border-width-focus, $inner-border-color-focus);
}
@if not is-null($body-outline-width-focus) and $body-outline-width-focus != 0 {
.#{$prefix}btn-wrap {
$outline-color: if(not is-null($body-outline-color-focus), $body-outline-color-focus, $color);
$outline-style: if(not is-null($body-outline-style-focus), $body-outline-style-focus, dotted);
outline: $body-outline-width-focus $outline-style $outline-color;
}
}
.#{$prefix}btn-inner {
@if $color-focus != $color {
color: $color-focus;
}
@if $font-weight-focus != $font-weight {
font-weight: $font-weight-focus;
}
@if $font-size-focus != $font-size {
font-size: $font-size-focus;
}
@if $font-family-focus != $font-family {
font-family: $font-family-focus;
}
}
}
}
.#{$prefix}btn-#{$ui} .#{$prefix}btn-arrow-el {
position: absolute;
top: 0;
right: 0;
height: 100%;
width: $split-width + right($padding);
pointer-events: none;
@if $include-rtl {
&.#{$prefix}rtl {
right: inherit;
left: 0;
}
}
}
.#{$prefix}btn-#{$ui}.#{$prefix}arrow-focus .#{$prefix}btn-arrow-el {
.#{$prefix}keyboard-mode & {
@if not is-null($inner-border-width-focus) and not is-null($inner-border-color-focus) {
border: $inner-border-width-focus solid $inner-border-color-focus;
}
}
}
.#{$prefix}btn-over.#{$prefix}btn-#{$ui} {
@if $border-color-over != $border-color {
border-color: $border-color-over;
}
@if $background-color-over != null {
@include background-gradient($background-color-over, $background-gradient-over);
}
@if not is-null($inner-border-width-over) and not is-null($inner-border-color-over) {
@include inner-border($inner-border-width-over, $inner-border-color-over);
}
.#{$prefix}btn-inner {
@if $color-over != $color {
color: $color-over;
}
@if $font-weight-over != $font-weight {
font-weight: $font-weight-over;
}
@if $font-size-over != $font-size {
font-size: $font-size-over;
}
@if $font-family-over != $font-family {
font-family: $font-family-over;
}
}
}
.#{$prefix}btn-focus.#{$prefix}btn-over.#{$prefix}btn-#{$ui} {
.#{$prefix}keyboard-mode & {
@if $border-color-focus-over != $border-color-over {
border-color: $border-color-focus-over;
}
@if $background-color-focus-over != $background-color-over or $background-gradient-focus-over != $background-gradient-over {
@include background-gradient($background-color-focus-over, $background-gradient-focus-over);
}
@if not is-null($inner-border-width-focus-over) and not is-null($inner-border-color-focus-over) {
@include inner-border($inner-border-width-focus-over, $inner-border-color-focus-over);
}
.#{$prefix}btn-inner {
@if $color-focus-over != $color-over {
color: $color-focus-over;
}
@if $font-weight-focus-over != $font-weight-over {
font-weight: $font-weight-focus-over;
}
@if $font-size-focus-over != $font-size-over {
font-size: $font-size-focus-over;
}
@if $font-family-focus-over != $font-family-over {
font-family: $font-family-focus-over;
}
}
}
}
// add x-btn class to increase specificity over focus-over rule above
.#{$prefix}btn.#{$prefix}btn-menu-active.#{$prefix}btn-#{$ui},
.#{$prefix}btn.#{$prefix}btn-pressed.#{$prefix}btn-#{$ui} {
@if $border-color-pressed != $border-color {
border-color: $border-color-pressed;
}
@if $background-color-pressed != null {
@include background-gradient($background-color-pressed, $background-gradient-pressed);
}
@if not is-null($inner-border-width-pressed) and not is-null($inner-border-color-pressed) {
@include inner-border($inner-border-width-pressed, $inner-border-color-pressed);
}
.#{$prefix}btn-inner {
@if $color-pressed != $color {
color: $color-pressed;
}
@if $font-weight-pressed != $font-weight {
font-weight: $font-weight-pressed;
}
@if $font-size-pressed != $font-size {
font-size: $font-size-pressed;
}
@if $font-family-pressed != $font-family {
font-family: $font-family-pressed;
}
}
}
.#{$prefix}btn-focus.#{$prefix}btn-menu-active.#{$prefix}btn-#{$ui},
.#{$prefix}btn-focus.#{$prefix}btn-pressed.#{$prefix}btn-#{$ui} {
.#{$prefix}keyboard-mode & {
@if $border-color-focus-pressed != $border-color-pressed {
border-color: $border-color-focus-pressed;
}
@if $background-color-focus-pressed != $background-color-pressed or $background-gradient-focus-pressed != $background-gradient-pressed {
@include background-gradient($background-color-focus-pressed, $background-gradient-focus-pressed);
}
@if not is-null($inner-border-width-focus-pressed) and not is-null($inner-border-color-focus-pressed) {
@include inner-border($inner-border-width-focus-pressed, $inner-border-color-focus-pressed);
}
.#{$prefix}btn-inner {
@if $color-focus-pressed != $color-pressed {
color: $color-focus-pressed;
}
@if $font-weight-focus-pressed != $font-weight-pressed {
font-weight: $font-weight-focus-pressed;
}
@if $font-size-focus-pressed != $font-size-pressed {
font-size: $font-size-focus-pressed;
}
@if $font-family-focus-pressed != $font-family-pressed {
font-family: $font-family-focus-pressed;
}
}
}
}
// add x-btn class to increase specificity over focus-pressed
.#{$prefix}btn.#{$prefix}btn-disabled.#{$prefix}btn-#{$ui} {
@if $border-color-disabled != $border-color {
border-color: $border-color-disabled;
}
@if not is-null($background-color-disabled) {
@include background-gradient($background-color-disabled, $background-gradient-disabled);
}
@if not is-null($inner-border-width-disabled) and not is-null($inner-border-color-disabled) {
@include inner-border($inner-border-width-disabled, $inner-border-color-disabled);
}
.#{$prefix}btn-inner {
@if $color-disabled != $color {
color: $color-disabled;
}
@if $font-weight-disabled != $font-weight {
font-weight: $font-weight-disabled;
}
@if $font-size-disabled != $font-size {
font-size: $font-size-disabled;
}
@if $font-family-disabled != $font-family {
font-family: $font-family-disabled;
}
}
}
@if $include-slicer-border-radius {
.#{$prefix}btn-focus {
.#{$prefix}keyboard-mode & {
$stretch: slicer-background-stretch('btn-focus.#{$prefix}btn-#{$ui}', 'bottom');
$frame: slicer-frame('btn-focus.#{$prefix}btn-#{$ui}', $frame-size);
.#{$prefix}btn-#{$ui}-tl,
.#{$prefix}btn-#{$ui}-bl,
.#{$prefix}btn-#{$ui}-tr,
.#{$prefix}btn-#{$ui}-br,
.#{$prefix}btn-#{$ui}-tc,
.#{$prefix}btn-#{$ui}-bc {
background-image: slicer-corner-sprite('btn-focus.#{$prefix}btn-#{$ui}', 'btn/btn-#{$ui}-focus-corners');
}
.#{$prefix}btn-#{$ui}-ml,
.#{$prefix}btn-#{$ui}-mr {
background-image: slicer-sides-sprite('btn-focus.#{$prefix}btn-#{$ui}', 'btn/btn-#{$ui}-focus-sides');
}
.#{$prefix}btn-#{$ui}-mc {
background-color: $background-color-focus;
@if $background-gradient-focus != null {
background-image: slicer-frame-background-image('btn-focus.#{$prefix}btn-#{$ui}', 'btn/btn-#{$ui}-focus-fbg');
}
}
}
}
.#{$prefix}btn-over {
$stretch: slicer-background-stretch('btn-over.#{$prefix}btn-#{$ui}', 'bottom');
$frame: slicer-frame('btn-over.#{$prefix}btn-#{$ui}', $frame-size);
.#{$prefix}btn-#{$ui}-tl,
.#{$prefix}btn-#{$ui}-bl,
.#{$prefix}btn-#{$ui}-tr,
.#{$prefix}btn-#{$ui}-br,
.#{$prefix}btn-#{$ui}-tc,
.#{$prefix}btn-#{$ui}-bc {
background-image: slicer-corner-sprite('btn-over.#{$prefix}btn-#{$ui}', 'btn/btn-#{$ui}-over-corners');
}
.#{$prefix}btn-#{$ui}-ml,
.#{$prefix}btn-#{$ui}-mr {
background-image: slicer-sides-sprite('btn-over.#{$prefix}btn-#{$ui}', 'btn/btn-#{$ui}-over-sides');
}
.#{$prefix}btn-#{$ui}-mc {
background-color: $background-color-over;
@if $background-gradient-over != null {
background-image: slicer-frame-background-image('btn-over.#{$prefix}btn-#{$ui}', 'btn/btn-#{$ui}-over-fbg');
}
}
}
.#{$prefix}btn-focus.#{$prefix}btn-over {
.#{$prefix}keyboard-mode & {
$stretch: slicer-background-stretch('btn-focus.#{$prefix}btn-over.#{$prefix}btn-#{$ui}', 'bottom');
$frame: slicer-frame('btn-focus.#{$prefix}btn-over.#{$prefix}btn-#{$ui}', $frame-size);
.#{$prefix}btn-#{$ui}-tl,
.#{$prefix}btn-#{$ui}-bl,
.#{$prefix}btn-#{$ui}-tr,
.#{$prefix}btn-#{$ui}-br,
.#{$prefix}btn-#{$ui}-tc,
.#{$prefix}btn-#{$ui}-bc {
background-image: slicer-corner-sprite('btn-focus.#{$prefix}btn-over.#{$prefix}btn-#{$ui}', 'btn/btn-#{$ui}-focus-over-corners');
}
.#{$prefix}btn-#{$ui}-ml,
.#{$prefix}btn-#{$ui}-mr {
background-image: slicer-sides-sprite('btn-focus.#{$prefix}btn-over.#{$prefix}btn-#{$ui}', 'btn/btn-#{$ui}-focus-over-sides');
}
.#{$prefix}btn-#{$ui}-mc {
background-color: $background-color-focus-over;
@if $background-gradient-focus-over != null {
background-image: slicer-frame-background-image('btn-focus.#{$prefix}btn-over.#{$prefix}btn-#{$ui}', 'btn/btn-#{$ui}-focus-over-fbg');
}
}
}
}
// add x-btn class to increase specificity over focus-over rules above
.#{$prefix}btn.#{$prefix}btn-menu-active,
.#{$prefix}btn.#{$prefix}btn-pressed {
$stretch: slicer-background-stretch('btn-pressed.#{$prefix}btn-#{$ui}', 'bottom');
$frame: slicer-frame('btn-pressed.#{$prefix}btn-#{$ui}', $frame-size);
.#{$prefix}btn-#{$ui}-tl,
.#{$prefix}btn-#{$ui}-bl,
.#{$prefix}btn-#{$ui}-tr,
.#{$prefix}btn-#{$ui}-br,
.#{$prefix}btn-#{$ui}-tc,
.#{$prefix}btn-#{$ui}-bc {
background-image: slicer-corner-sprite('btn-pressed.#{$prefix}btn-#{$ui}', 'btn/btn-#{$ui}-pressed-corners');
}
.#{$prefix}btn-#{$ui}-ml,
.#{$prefix}btn-#{$ui}-mr {
background-image: slicer-sides-sprite('btn-pressed.#{$prefix}btn-#{$ui}', 'btn/btn-#{$ui}-pressed-sides');
}
.#{$prefix}btn-#{$ui}-mc {
background-color: $background-color-pressed;
@if $background-gradient-focus-pressed != null {
background-image: slicer-frame-background-image('btn-pressed.#{$prefix}btn-#{$ui}', 'btn/btn-#{$ui}-pressed-fbg');
}
}
}
.#{$prefix}btn-focus.#{$prefix}btn-menu-active,
.#{$prefix}btn-focus.#{$prefix}btn-pressed {
.#{$prefix}keyboard-mode & {
$stretch: slicer-background-stretch('btn-focus.#{$prefix}btn-pressed.#{$prefix}btn-#{$ui}', 'bottom');
$frame: slicer-frame('btn-focus.#{$prefix}btn-pressed.#{$prefix}btn-#{$ui}', $frame-size);
.#{$prefix}btn-#{$ui}-tl,
.#{$prefix}btn-#{$ui}-bl,
.#{$prefix}btn-#{$ui}-tr,
.#{$prefix}btn-#{$ui}-br,
.#{$prefix}btn-#{$ui}-tc,
.#{$prefix}btn-#{$ui}-bc {
background-image: slicer-corner-sprite('btn-focus.#{$prefix}btn-pressed.#{$prefix}btn-#{$ui}', 'btn/btn-#{$ui}-focus-pressed-corners');
}
.#{$prefix}btn-#{$ui}-ml,
.#{$prefix}btn-#{$ui}-mr {
background-image: slicer-sides-sprite('btn-focus.#{$prefix}btn-pressed.#{$prefix}btn-#{$ui}', 'btn/btn-#{$ui}-focus-pressed-sides');
}
.#{$prefix}btn-#{$ui}-mc {
background-color: $background-color-focus-pressed;
@if $background-gradient-focus-pressed != null {
background-image: slicer-frame-background-image('btn-focus.#{$prefix}btn-pressed.#{$prefix}btn-#{$ui}', 'btn/btn-#{$ui}-focus-pressed-fbg');
}
}
}
}
// add x-btn class to increase specificity over focus-pressed
.#{$prefix}btn.#{$prefix}btn-disabled {
$stretch: slicer-background-stretch('btn-disabled.#{$prefix}btn-#{$ui}', 'bottom');
$frame: slicer-frame('btn-disabled.#{$prefix}btn-#{$ui}', $frame-size);
.#{$prefix}btn-#{$ui}-tl,
.#{$prefix}btn-#{$ui}-bl,
.#{$prefix}btn-#{$ui}-tr,
.#{$prefix}btn-#{$ui}-br,
.#{$prefix}btn-#{$ui}-tc,
.#{$prefix}btn-#{$ui}-bc {
background-image: slicer-corner-sprite('btn-disabled.#{$prefix}btn-#{$ui}', 'btn/btn-#{$ui}-disabled-corners');
}
.#{$prefix}btn-#{$ui}-ml,
.#{$prefix}btn-#{$ui}-mr {
background-image: slicer-sides-sprite('btn-disabled.#{$prefix}btn-#{$ui}', 'btn/btn-#{$ui}-disabled-sides');
}
.#{$prefix}btn-#{$ui}-mc {
background-color: $background-color-disabled;
@if $background-gradient-disabled != null {
background-image: slicer-frame-background-image('btn-disabled.#{$prefix}btn-#{$ui}', 'btn/btn-#{$ui}-disabled-fbg');
}
}
}
}
@if $include-slicer-border-radius {
.#{$prefix}nbr .#{$prefix}btn-#{$ui} {
background-image: none;
}
}
@if $opacity-disabled != 1 {
.#{$prefix}btn-disabled.#{$prefix}btn-#{$ui} {
@include opacity($opacity-disabled);
}
}
@if $inner-opacity-disabled != 1 {
.#{$prefix}btn-disabled.#{$prefix}btn-#{$ui} {
.#{$prefix}btn-inner,
.#{$prefix}btn-icon-el {
@include opacity($inner-opacity-disabled);
}
}
}
@if $include-ext-button-segmented and $include-slicer-border-radius {
// These rules must use !important to overcome the !important border/padding
// removal rules from x-frame()
.#{$prefix}nbr {
.#{$prefix}segmented-button-item-horizontal.#{$prefix}btn-#{$ui} {
&.#{$prefix}segmented-button-first {
border-right-width: right($border-width) !important;
.#{$prefix}btn-#{$ui}-mc {
padding-right: right($padding) !important;
}
}
&.#{$prefix}segmented-button-middle {
border-right-width: right($border-width) !important;
.#{$prefix}btn-#{$ui}-mc {
padding-right: right($padding) !important;
padding-left: left($padding) !important;
}
}
&.#{$prefix}segmented-button-last {
.#{$prefix}btn-#{$ui}-mc {
padding-left: left($padding) !important;
}
}
}
.#{$prefix}segmented-button-item-vertical.#{$prefix}btn-#{$ui} {
&.#{$prefix}segmented-button-first {
border-bottom-width: bottom($border-width) !important;
.#{$prefix}btn-#{$ui}-mc {
padding-bottom: bottom($padding) !important;
}
}
&.#{$prefix}segmented-button-middle {
border-bottom-width: bottom($border-width) !important;
.#{$prefix}btn-#{$ui}-mc {
padding-top: top($padding) !important;
padding-bottom: bottom($padding) !important;
}
}
&.#{$prefix}segmented-button-last {
.#{$prefix}btn-#{$ui}-mc {
padding-top: top($padding) !important;
}
}
}
.#{$prefix}segmented-button-item.#{$prefix}btn-#{$ui}:after {
// Inner borders are contained in the framing elements of a button. Since
// we have suppressed the borders on the inner edges to remove the rounded
// corners, we need to simulate the inner-border using a pseudo el.
// Always set up the positioning of the pseudo element just in case
// it is needed by the following rules
content: ' ';
border-style: solid;
border-width: 0;
position: absolute;
@if not is-null($inner-border-width) and not is-null($inner-border-color) and $inner-border-width != 0 {
border-width: $inner-border-width;
border-color: $inner-border-color;
}
}
.#{$prefix}segmented-button-item-horizontal.#{$prefix}btn-#{$ui} {
&:after {
top: $border-width;
right: 0;
bottom: $border-width;
left: 0;
}
&.#{$prefix}segmented-button-first:after {
left: $border-width;
}
&.#{$prefix}segmented-button-last:after {
right: $border-width;
}
}
.#{$prefix}segmented-button-item-vertical.#{$prefix}btn-#{$ui} {
&:after {
top: 0;
right: $border-width;
bottom: 0;
left: $border-width;
}
&.#{$prefix}segmented-button-first:after {
top: $border-width;
}
&.#{$prefix}segmented-button-last:after {
bottom: $border-width;
}
}
.#{$prefix}segmented-button-item {
@if not is-null($inner-border-width-focus) and not is-null($inner-border-color-focus) {
&.#{$prefix}btn-focus.#{$prefix}btn-#{$ui}:after {
.#{$prefix}keyboard-mode & {
border-width: $inner-border-width-focus;
border-color: $inner-border-color-focus;
}
}
}
@if not is-null($inner-border-width-over) and not is-null($inner-border-color-over) {
&.#{$prefix}btn-over.#{$prefix}btn-#{$ui}:after {
border-width: $inner-border-width-over;
border-color: $inner-border-color-over;
}
}
@if not is-null($inner-border-width-focus-over) and not is-null($inner-border-color-focus-over) {
&.#{$prefix}btn-focus.#{$prefix}btn-over.#{$prefix}btn-#{$ui}:after {
.#{$prefix}keyboard-mode & {
border-width: $inner-border-width-focus-over;
border-color: $inner-border-color-focus-over;
}
}
}
@if not is-null($inner-border-width-pressed) and not is-null($inner-border-color-pressed) {
&.#{$prefix}btn.#{$prefix}btn-menu-active.#{$prefix}btn-#{$ui}:after,
&.#{$prefix}btn.#{$prefix}btn-pressed.#{$prefix}btn-#{$ui}:after {
border-width: $inner-border-width-pressed;
border-color: $inner-border-color-pressed;
}
}
@if not is-null($inner-border-width-focus-pressed) and not is-null($inner-border-color-focus-pressed) {
&.#{$prefix}btn-focus.#{$prefix}btn-menu-active.#{$prefix}btn-#{$ui}:after,
&.#{$prefix}btn-focus.#{$prefix}btn-pressed.#{$prefix}btn-#{$ui}:after {
.#{$prefix}keyboard-mode & {
border-width: $inner-border-width-focus-pressed;
border-color: $inner-border-color-focus-pressed;
}
}
}
@if not is-null($inner-border-width-disabled) and not is-null($inner-border-color-disabled) {
&.#{$prefix}btn.#{$prefix}btn-disabled.#{$prefix}btn-#{$ui}:after {
border-width: $inner-border-width-disabled;
border-color: $inner-border-color-disabled;
}
}
}
}
}
@include x-slicer('btn-focus.#{$prefix}btn-#{$ui}');
@include x-slicer('btn-over.#{$prefix}btn-#{$ui}');
@include x-slicer('btn-focus.#{$prefix}btn-over.#{$prefix}btn-#{$ui}');
@include x-slicer('btn-pressed.#{$prefix}btn-#{$ui}');
@include x-slicer('btn-focus.#{$prefix}btn-pressed.#{$prefix}btn-#{$ui}');
@include x-slicer('btn-disabled.#{$prefix}btn-#{$ui}');
// Button field or subclass inside cell - calculate top/bottom padding to keep row height correct
@if $include-ext-grid-column-widget {
$ui-height: $icon-size + vertical($padding) + vertical($border-width);
.#{$prefix}button-#{$ui}-cell > .#{$prefix}grid-cell-inner {
padding-top: max(ceil(($grid-row-height - $ui-height) / 2), 0);
padding-bottom: max(floor(($grid-row-height - $ui-height) / 2), 0);
// vertical-align: top needed when in grid cells to avoid margin stretching the cell-inner
>.#{$prefix}btn-#{$ui} {
vertical-align: top;
}
}
}
}
/**
* Creates a visual theme for a {@link #scale large} Button.
*
* @param {string} $ui
* The name of the UI being created. Can not included spaces or special punctuation
* (used in CSS class names).
*
* @param {number} [$border-radius=$button-large-border-radius]
* The border-radius of the button
*
* @param {number} [$border-width=$button-large-border-width]
* The border-width of the button
*
* @param {color} [$border-color=$button-default-border-color]
* The border-color of the button
*
* @param {color} [$border-color-over=$button-default-border-color-over]
* The border-color of the button when the cursor is over the button
*
* @param {color} [$border-color-focus=$button-default-border-color-focus]
* The border-color of the button when focused
*
* @param {color} [$border-color-pressed=$button-default-border-color-pressed]
* The border-color of the button when pressed
*
* @param {color} [$border-color-focus-over=$button-default-border-color-focus-over]
* The border-color of the button when the button is focused and the cursor is over the
* button
*
* @param {color} [$border-color-focus-pressed=$button-default-border-color-focus-pressed]
* The border-color of the button when focused and pressed
*
* @param {color} [$border-color-disabled=$button-default-border-color-disabled]
* The border-color of the button when disabled
*
* @param {number} [$padding=$button-large-padding]
* The amount of padding inside the border of the button on all sides
*
* @param {number} [$text-padding=$button-large-text-padding]
* The amount of horizontal space to add to the left and right of the button text
*
* @param {color} [$background-color=$button-default-background-color]
* The background-color of the button
*
* @param {color} [$background-color-over=$button-default-background-color-over]
* The background-color of the button when the cursor is over the button
*
* @param {color} [$background-color-focus=$button-default-background-color-focus]
* The background-color of the button when focused
*
* @param {color} [$background-color-pressed=$button-default-background-color-pressed]
* The background-color of the button when pressed
*
* @param {color} [$background-color-focus-over=$button-default-background-color-focus-over]
* The background-color of the button when the button is focused and the cursor is over
* the button
*
* @param {color} [$background-color-focus-pressed=$button-default-background-color-focus-pressed]
* The background-color of the button when focused and pressed
*
* @param {color} [$background-color-disabled=$button-default-background-color-disabled]
* The background-color of the button when disabled
*
* @param {string/list} [$background-gradient=$button-default-background-gradient]
* The background-gradient for the button. 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} [$background-gradient-over=$button-default-background-gradient-over]
* The background-gradient to use when the cursor is over the button. 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} [$background-gradient-focus=$button-default-background-gradient-focus]
* The background-gradient to use when the the button is 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} [$background-gradient-pressed=$button-default-background-gradient-pressed]
* The background-gradient to use when the the button is pressed. 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} [$background-gradient-focus-over=$button-default-background-gradient-focus-over]
* The background-gradient to use when the the button is focused and the cursor is over
* the button. 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} [$background-gradient-focus-pressed=$button-default-background-gradient-focus-pressed]
* The background-gradient to use when the the button is focused and pressed. 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} [$background-gradient-disabled=$button-default-background-gradient-disabled]
* The background-gradient to use when the the button is disabled. 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 {color} [$color=$button-default-color]
* The text color of the button
*
* @param {color} [$color-over=$button-default-color-over]
* The text color of the button when the cursor is over the button
*
* @param {color} [$color-focus=$button-default-color-focus]
* The text color of the button when the button is focused
*
* @param {color} [$color-pressed=$button-default-color-pressed]
* The text color of the button when the button is pressed
*
* @param {color} [$color-focus-over=$button-default-color-focus-over]
* The text color of the button when the button is focused and the cursor is over the button
*
* @param {color} [$color-focus-pressed=$button-default-color-focus-pressed]
* The text color of the button when the button is focused and pressed
*
* @param {color} [$color-disabled=$button-default-color-disabled]
* The text color of the button when the button is disabled
*
* @param {number/list} [$inner-border-width=$button-default-inner-border-width]
* The inner border-width of the button
*
* @param {number/list} [$inner-border-width-over=$button-default-inner-border-width-over]
* The inner border-width of the button when the cursor is over the button
*
* @param {number/list} [$inner-border-width-focus=$button-default-inner-border-width-focus]
* The inner border-width of the button when focused
*
* @param {number/list} [$inner-border-width-pressed=$button-default-inner-border-width-pressed]
* The inner border-width of the button when pressed
*
* @param {number/list} [$inner-border-width-focus-over=$button-default-inner-border-width-focus-over]
* The inner border-width of the button when the button is focused and the cursor is over
* the button
*
* @param {number/list} [$inner-border-width-focus-pressed=$button-default-inner-border-width-focus-pressed]
* The inner border-width of the button when focused and pressed
*
* @param {number/list} [$inner-border-width-disabled=$button-default-inner-border-width-disabled]
* The inner border-width of the button when disabled
*
* @param {color} [$inner-border-color=$button-default-inner-border-color]
* The inner border-color of the button
*
* @param {color} [$inner-border-color-over=$button-default-inner-border-color-over]
* The inner border-color of the button when the cursor is over the button
*
* @param {color} [$inner-border-color-focus=$button-default-inner-border-color-focus]
* The inner border-color of the button when focused
*
* @param {color} [$inner-border-color-pressed=$button-default-inner-border-color-pressed]
* The inner border-color of the button when pressed
*
* @param {color} [$inner-border-color-focus-over=$button-default-inner-border-color-focus-over]
* The inner border-color of the button when the button is focused and the cursor is over
* the button
*
* @param {color} [$inner-border-color-focus-pressed=$button-default-inner-border-color-focus-pressed]
* The inner border-color of the button when focused and pressed
*
* @param {color} [$inner-border-color-disabled=$button-default-inner-border-color-disabled]
* The inner border-color of the button when disabled
*
* @param {number} [$body-outline-width-focus=$button-default-body-outline-width-focus]
* The body outline width of the button when focused
*
* @param {number} [$body-outline-style-focus=$button-default-body-outline-style-focus]
* The body outline-style of the button when focused
*
* @param {number} [$body-outline-color-focus=$button-default-body-outline-color-focus]
* The body outline color of the button when focused
*
* @param {number} [$font-size=$button-large-font-size]
* The font-size of the button
*
* @param {number} [$font-size-over=$button-large-font-size-over]
* The font-size of the button when the cursor is over the button
*
* @param {number} [$font-size-focus=$button-large-font-size-focus]
* The font-size of the button when the button is focused
*
* @param {number} [$font-size-pressed=$button-large-font-size-pressed]
* The font-size of the button when the button is pressed
*
* @param {number} [$font-size-focus-over=$button-large-font-size-focus-over]
* The font-size of the button when the button is focused and the cursor is over the
* button
*
* @param {number} [$font-size-focus-pressed=$button-large-font-size-focus-pressed]
* The font-size of the button when the button is focused and pressed
*
* @param {number} [$font-size-disabled=$button-large-font-size-disabled]
* The font-size of the button when the button is disabled
*
* @param {string} [$font-weight=$button-large-font-weight]
* The font-weight of the button
*
* @param {string} [$font-weight-over=$button-large-font-weight-over]
* The font-weight of the button when the cursor is over the button
*
* @param {string} [$font-weight-focus=$button-large-font-weight-focus]
* The font-weight of the button when the button is focused
*
* @param {string} [$font-weight-pressed=$button-large-font-weight-pressed]
* The font-weight of the button when the button is pressed
*
* @param {string} [$font-weight-focus-over=$button-large-font-weight-focus-over]
* The font-weight of the button when the button is focused and the cursor is over the
* button
*
* @param {string} [$font-weight-focus-pressed=$button-large-font-weight-focus-pressed]
* The font-weight of the button when the button is focused and pressed
*
* @param {string} [$font-weight-disabled=$button-large-font-weight-disabled]
* The font-weight of the button when the button is disabled
*
* @param {string} [$font-family=$button-large-font-family]
* The font-family of the button
*
* @param {string} [$font-family-over=$button-large-font-family-over]
* The font-family of the button when the cursor is over the button
*
* @param {string} [$font-family-focus=$button-large-font-family-focus]
* The font-family of the button when the button is focused
*
* @param {string} [$font-family-pressed=$button-large-font-family-pressed]
* The font-family of the button when the button is pressed
*
* @param {string} [$font-family-focus-over=$button-large-font-family-focus-over]
* The font-family of the button when the button is focused and the cursor is over the
* button
*
* @param {string} [$font-family-focus-pressed=$button-large-font-family-focus-pressed]
* The font-family of the button when the button is focused and pressed
*
* @param {string} [$font-family-disabled=$button-large-font-family-disabled]
* The font-family of the button when the button is disabled
*
* @param {number} [$line-height=$button-large-line-height]
* The line-height of the button text
*
* @param {number} [$icon-size=$button-large-icon-size]
* The size of the button icon
*
* @param {number} [$glyph-font-size=$button-large-glyph-font-size]
* The font-size for the button glyph
*
* @param {number} [$icon-spacing=$button-large-icon-spacing]
* The space between the button's icon and text
*
* @param {color} [$glyph-color=$button-default-glyph-color]
* The color of the button's {@link #glyph} icon
*
* @param {number} [$glyph-opacity=$button-default-glyph-opacity]
* The opacity of the button's {@link #glyph} icon
*
* @param {number} [$arrow-width=$button-large-arrow-width]
* The width of the button's {@link #cfg-menu} arrow
*
* @param {number} [$arrow-height=$button-large-arrow-height]
* The height of the button's {@link #cfg-menu} arrow
*
* @param {string/list} [$arrow-glyph=$button-large-arrow-glyph]
* Glyph for the button arrow when when {@link Global_CSS#$enable-font-icons} is `true`.
*
* @param {string/list} [$arrow-glyph-color=$button-default-arrow-glyph-color]
* Glyph color for the button arrow when when {@link Global_CSS#$enable-font-icons} is `true`.
*
* @param {number} [$split-width=$button-large-split-width]
* The width of a {@link Ext.button.Split Split Button}'s arrow
*
* @param {number} [$split-height=$button-large-split-height]
* The height of a {@link Ext.button.Split Split Button}'s arrow
*
* @param {number} [$split-line-width=$button-large-split-line-width]
* The default width for a {@link Ext.button.Split Split Button}'s line.
* Themes that include the line in the arrow background image should set this to 0
*
* @param {color} [$split-line-color=$button-default-split-line-color]
* The color for a {@link Ext.button.Split Split Button}'s line.
* Only applicable when `$split-line-width` is greater than 0.
*
* @param {boolean} [$include-ui-menu-arrows=$button-include-ui-menu-arrows]
* True to include the UI name in the file name of the {@link #cfg-menu}
* arrow icon. Set this to false to share the same arrow bewteen multiple UIs.
*
* @param {boolean} [$include-ui-split-arrows=$button-include-ui-split-arrows]
* True to include the UI name in the file name of the {@link Ext.button.Split Split Button}'s
* arrow icon. Set this to false to share the same arrow bewteen multiple UIs.
*
* @param {boolean} [$include-split-noline-arrows=$button-include-split-noline-arrows]
* True to add a "-noline" suffix to the file name of the {@link Ext.button.Split Split Button}'s
* arrow icon. Used for hiding the split line when toolbar buttons are in their default
* state.
*
* @param {boolean} [$include-split-over-arrows=$button-include-split-over-arrows]
* True to use a separate icon for {@link Ext.button.Split Split Button}s when the cursor
* is over the button. The over icon file name will have a "-o" suffix
*
* @param {number} [$opacity-disabled=$button-opacity-disabled]
* The opacity of the button when it is disabled
*
* @param {number} [$inner-opacity-disabled=$button-inner-opacity-disabled]
* The opacity of the button's text and icon elements when when the button is disabled
*
* @member Ext.button.Button
*/
@mixin extjs-button-large-ui(
$ui,
$border-radius: $button-large-border-radius,
$border-width: $button-large-border-width,
$border-color: null,
$border-color-over: null,
$border-color-focus: null,
$border-color-pressed: null,
$border-color-focus-over: null,
$border-color-focus-pressed: null,
$border-color-disabled: null,
$padding: $button-large-padding,
$text-padding: $button-large-text-padding,
$background-color: null,
$background-color-over: null,
$background-color-focus: null,
$background-color-pressed: null,
$background-color-focus-over: null,
$background-color-focus-pressed: null,
$background-color-disabled: null,
$background-gradient: $button-default-background-gradient,
$background-gradient-over: $button-default-background-gradient-over,
$background-gradient-focus: $button-default-background-gradient-focus,
$background-gradient-pressed: $button-default-background-gradient-pressed,
$background-gradient-focus-over: $button-default-background-gradient-focus-over,
$background-gradient-focus-pressed: $button-default-background-gradient-focus-pressed,
$background-gradient-disabled: $button-default-background-gradient-disabled,
$color: null,
$color-over: null,
$color-focus: null,
$color-pressed: null,
$color-focus-over: null,
$color-focus-pressed: null,
$color-disabled: null,
$inner-border-width: null,
$inner-border-width-over: null,
$inner-border-width-focus: null,
$inner-border-width-pressed: null,
$inner-border-width-focus-over: null,
$inner-border-width-focus-pressed: null,
$inner-border-width-disabled: null,
$inner-border-color: null,
$inner-border-color-over: null,
$inner-border-color-focus: null,
$inner-border-color-pressed: null,
$inner-border-color-focus-over: null,
$inner-border-color-focus-pressed: null,
$inner-border-color-disabled: null,
$body-outline-width-focus: $button-default-body-outline-width-focus,
$body-outline-style-focus: $button-default-body-outline-style-focus,
$body-outline-color-focus: $button-default-body-outline-color-focus,
$font-size: null,
$font-size-over: null,
$font-size-focus: null,
$font-size-pressed: null,
$font-size-focus-over: null,
$font-size-focus-pressed: null,
$font-size-disabled: null,
$font-weight: null,
$font-weight-over: null,
$font-weight-focus: null,
$font-weight-pressed: null,
$font-weight-focus-over: null,
$font-weight-focus-pressed: null,
$font-weight-disabled: null,
$font-family: null,
$font-family-over: null,
$font-family-focus: null,
$font-family-pressed: null,
$font-family-focus-over: null,
$font-family-focus-pressed: null,
$font-family-disabled: null,
$line-height: $button-large-line-height,
$icon-size: $button-large-icon-size,
$glyph-font-size: $button-large-glyph-font-size,
$icon-spacing: $button-large-icon-spacing,
$glyph-color: $button-default-glyph-color,
$glyph-opacity: $button-default-glyph-opacity,
$arrow-width: $button-large-arrow-width,
$arrow-height: $button-large-arrow-height,
$arrow-glyph: $button-large-arrow-glyph,
$arrow-glyph-color: $button-default-arrow-glyph-color,
$split-width: $button-large-split-width,
$split-height: $button-large-split-height,
$split-line-width: $button-large-split-line-width,
$split-line-color: $button-default-split-line-color,
$include-ui-menu-arrows: $button-include-ui-menu-arrows,
$include-ui-split-arrows: $button-include-ui-split-arrows,
$include-split-noline-arrows: $button-include-split-noline-arrows,
$include-split-over-arrows: $button-include-split-over-arrows,
$opacity-disabled: $button-opacity-disabled,
$inner-opacity-disabled: $button-inner-opacity-disabled
) {
@if $border-color == null {
$border-color: $button-default-border-color;
@if $border-color-over == null {
$border-color-over: $button-default-border-color-over;
}
@if $border-color-focus == null {
$border-color-focus: $button-default-border-color-focus;
}
@if $border-color-pressed == null {
$border-color-pressed: $button-default-border-color-pressed;
}
@if $border-color-focus-over == null {
$border-color-focus-over: $button-default-border-color-focus-over;
}
@if $border-color-focus-pressed == null {
$border-color-focus-pressed: $button-default-border-color-focus-pressed;
}
@if $border-color-disabled == null {
$border-color-disabled: $button-default-border-color-disabled;
}
} @else {
@if $border-color-over == null {
$border-color-over: button-default-border-color-over($border-color);
}
@if $border-color-focus == null {
$border-color-focus: button-default-border-color-focus($border-color);
}
@if $border-color-pressed == null {
$border-color-pressed: button-default-border-color-pressed($border-color);
}
@if $border-color-focus-over == null {
$border-color-focus-over: $border-color-over;
}
@if $border-color-focus-pressed == null {
$border-color-focus-pressed: $border-color-pressed;
}
@if $border-color-disabled == null {
$border-color-disabled: button-default-border-color-disabled($border-color);
}
}
@if $background-color == null {
$background-color: $button-default-background-color;
@if $background-color-over == null {
$background-color-over: $button-default-background-color-over;
}
@if $background-color-focus == null {
$background-color-focus: $button-default-background-color-focus;
}
@if $background-color-pressed == null {
$background-color-pressed: $button-default-background-color-pressed;
}
@if $background-color-focus-over == null {
$background-color-focus-over: $button-default-background-color-focus-over;
}
@if $background-color-focus-pressed == null {
$background-color-focus-pressed: $button-default-background-color-focus-pressed;
}
@if $background-color-disabled == null {
$background-color-disabled: $button-default-background-color-disabled;
}
} @else {
@if $background-color-over == null {
$background-color-over: button-default-background-color-over($background-color);
}
@if $background-color-focus == null {
$background-color-focus: button-default-background-color-focus($background-color);
}
@if $background-color-pressed == null {
$background-color-pressed: button-default-background-color-pressed($background-color);
}
@if $background-color-focus-over == null {
$background-color-focus-over: $background-color-over;
}
@if $background-color-focus-pressed == null {
$background-color-focus-pressed: $background-color-pressed;
}
@if $background-color-disabled == null {
$background-color-disabled: button-default-background-color-disabled($background-color);
}
}
@if $color == null {
$color: $button-default-color;
@if $color-over == null {
$color-over: $button-default-color-over;
}
@if $color-focus == null {
$color-focus: $button-default-color-focus;
}
@if $color-pressed == null {
$color-pressed: $button-default-color-pressed;
}
@if $color-focus-over == null {
$color-focus-over: $button-default-color-focus-over;
}
@if $color-focus-pressed == null {
$color-focus-pressed: $button-default-color-focus-pressed;
}
@if $color-disabled == null {
$color-disabled: $button-default-color-disabled;
}
} @else {
@if $color-over == null {
$color-over: button-default-color-over($color);
}
@if $color-focus == null {
$color-focus: button-default-color-focus($color);
}
@if $color-pressed == null {
$color-pressed: button-default-color-pressed($color);
}
@if $color-focus-over == null {
$color-focus-over: $color-over;
}
@if $color-focus-pressed == null {
$color-focus-pressed: $color-pressed;
}
@if $color-disabled == null {
$color-disabled: button-default-color-disabled($color);
}
}
@if $inner-border-width == null {
$inner-border-width: $button-default-inner-border-width;
@if $inner-border-width-over == null {
$inner-border-width-over: $button-default-inner-border-width-over;
}
@if $inner-border-width-focus == null {
$inner-border-width-focus: $button-default-inner-border-width-focus;
}
@if $inner-border-width-pressed == null {
$inner-border-width-pressed: $button-default-inner-border-width-pressed;
}
@if $inner-border-width-focus-over == null {
$inner-border-width-focus-over: $button-default-inner-border-width-focus-over;
}
@if $inner-border-width-focus-pressed == null {
$inner-border-width-focus-pressed: $button-default-inner-border-width-focus-pressed;
}
@if $inner-border-width-disabled == null {
$inner-border-width-disabled: $button-default-inner-border-width-disabled;
}
} @else {
@if $inner-border-width-over == null {
$inner-border-width-over: $inner-border-width;
}
@if $inner-border-width-focus == null {
$inner-border-width-focus: $inner-border-width;
}
@if $inner-border-width-pressed == null {
$inner-border-width-pressed: $inner-border-width;
}
@if $inner-border-width-focus-over == null {
$inner-border-width-focus-over: $inner-border-width-over;
}
@if $inner-border-width-focus-pressed == null {
$inner-border-width-focus-pressed: $inner-border-width-pressed;
}
@if $inner-border-width-disabled == null {
$inner-border-width-disabled: $inner-border-width;
}
}
@if $inner-border-color == null {
$inner-border-color: $button-default-inner-border-color;
@if $inner-border-color-over == null {
$inner-border-color-over: $button-default-inner-border-color-over;
}
@if $inner-border-color-focus == null {
$inner-border-color-focus: $button-default-inner-border-color-focus;
}
@if $inner-border-color-pressed == null {
$inner-border-color-pressed: $button-default-inner-border-color-pressed;
}
@if $inner-border-color-focus-over == null {
$inner-border-color-focus-over: $button-default-inner-border-color-focus-over;
}
@if $inner-border-color-focus-pressed == null {
$inner-border-color-focus-pressed: $button-default-inner-border-color-focus-pressed;
}
@if $inner-border-color-disabled == null {
$inner-border-color-disabled: $button-default-inner-border-color-disabled;
}
} @else {
@if $inner-border-color-over == null {
$inner-border-color-over: button-default-inner-border-color-over($background-color-over, $color-over);
}
@if $inner-border-color-focus == null {
$inner-border-color-focus: button-default-inner-border-color-focus($background-color-focus, $color-focus);
}
@if $inner-border-color-pressed == null {
$inner-border-color-pressed: button-default-inner-border-color-pressed($background-color-pressed, $color-pressed);
}
@if $inner-border-color-focus-over == null {
$inner-border-color-focus-over: button-default-inner-border-color-focus-over($background-color-focus-over, $color-focus-over);
}
@if $inner-border-color-focus-pressed == null {
$inner-border-color-focus-pressed: button-default-inner-border-color-focus-pressed($background-color-focus-pressed, $color-focus-pressed);
}
@if $inner-border-color-disabled == null {
$inner-border-color-disabled: button-default-inner-border-color-disabled($background-color-disabled, $color-disabled);
}
}
@if $font-size == null {
$font-size: $button-large-font-size;
@if $font-size-over == null {
$font-size-over: $button-large-font-size-over;
}
@if $font-size-focus == null {
$font-size-focus: $button-large-font-size-focus;
}
@if $font-size-pressed == null {
$font-size-pressed: $button-large-font-size-pressed;
}
@if $font-size-focus-over == null {
$font-size-focus-over: $button-large-font-size-focus-over;
}
@if $font-size-focus-pressed == null {
$font-size-focus-pressed: $button-large-font-size-focus-pressed;
}
@if $font-size-disabled == null {
$font-size-disabled: $button-large-font-size-disabled;
}
} @else {
@if $font-size-over == null {
$font-size-over: $font-size;
}
@if $font-size-focus == null {
$font-size-focus: $font-size;
}
@if $font-size-pressed == null {
$font-size-pressed: $font-size;
}
@if $font-size-focus-over == null {
$font-size-focus-over: $font-size-over;
}
@if $font-size-focus-pressed == null {
$font-size-focus-pressed: $font-size-pressed;
}
@if $font-size-disabled == null {
$font-size-disabled: $font-size;
}
}
@if $font-weight == null {
$font-weight: $button-large-font-weight;
@if $font-weight-over == null {
$font-weight-over: $button-large-font-weight-over;
}
@if $font-weight-focus == null {
$font-weight-focus: $button-large-font-weight-focus;
}
@if $font-weight-pressed == null {
$font-weight-pressed: $button-large-font-weight-pressed;
}
@if $font-weight-focus-over == null {
$font-weight-focus-over: $button-large-font-weight-focus-over;
}
@if $font-weight-focus-pressed == null {
$font-weight-focus-pressed: $button-large-font-weight-focus-pressed;
}
@if $font-weight-disabled == null {
$font-weight-disabled: $button-large-font-weight-disabled;
}
} @else {
@if $font-weight-over == null {
$font-weight-over: $font-weight;
}
@if $font-weight-focus == null {
$font-weight-focus: $font-weight;
}
@if $font-weight-pressed == null {
$font-weight-pressed: $font-weight;
}
@if $font-weight-focus-over == null {
$font-weight-focus-over: $font-weight-over;
}
@if $font-weight-focus-pressed == null {
$font-weight-focus-pressed: $font-weight-pressed;
}
@if $font-weight-disabled == null {
$font-weight-disabled: $font-weight;
}
}
@if $font-family == null {
$font-family: $button-large-font-family;
@if $font-family-over == null {
$font-family-over: $button-large-font-family-over;
}
@if $font-family-focus == null {
$font-family-focus: $button-large-font-family-focus;
}
@if $font-family-pressed == null {
$font-family-pressed: $button-large-font-family-pressed;
}
@if $font-family-focus-over == null {
$font-family-focus-over: $button-large-font-family-focus-over;
}
@if $font-family-focus-pressed == null {
$font-family-focus-pressed: $button-large-font-family-focus-pressed;
}
@if $font-family-disabled == null {
$font-family-disabled: $button-large-font-family-disabled;
}
} @else {
@if $font-family-over == null {
$font-family-over: $font-family;
}
@if $font-family-focus == null {
$font-family-focus: $font-family;
}
@if $font-family-pressed == null {
$font-family-pressed: $font-family;
}
@if $font-family-focus-over == null {
$font-family-focus-over: $font-family-over;
}
@if $font-family-focus-pressed == null {
$font-family-focus-pressed: $font-family-pressed;
}
@if $font-family-disabled == null {
$font-family-disabled: $font-family;
}
}
@include extjs-button-ui(
$ui: '#{$ui}-large',
$border-radius: $border-radius,
$border-width: $border-width,
$border-color: $border-color,
$border-color-over: $border-color-over,
$border-color-focus: $border-color-focus,
$border-color-pressed: $border-color-pressed,
$border-color-focus-over: $border-color-focus-over,
$border-color-focus-pressed: $border-color-focus-pressed,
$border-color-disabled: $border-color-disabled,
$padding: $padding,
$text-padding: $text-padding,
$background-color: $background-color,
$background-color-over: $background-color-over,
$background-color-focus: $background-color-focus,
$background-color-pressed: $background-color-pressed,
$background-color-focus-over: $background-color-focus-over,
$background-color-focus-pressed: $background-color-focus-pressed,
$background-color-disabled: $background-color-disabled,
$background-gradient: $background-gradient,
$background-gradient-over: $background-gradient-over,
$background-gradient-focus: $background-gradient-focus,
$background-gradient-pressed: $background-gradient-pressed,
$background-gradient-focus-over: $background-gradient-focus-over,
$background-gradient-focus-pressed: $background-gradient-focus-pressed,
$background-gradient-disabled: $background-gradient-disabled,
$color: $color,
$color-over: $color-over,
$color-focus: $color-focus,
$color-pressed: $color-pressed,
$color-focus-over: $color-focus-over,
$color-focus-pressed: $color-focus-pressed,
$color-disabled: $color-disabled,
$inner-border-width: $inner-border-width,
$inner-border-width-over: $inner-border-width-over,
$inner-border-width-focus: $inner-border-width-focus,
$inner-border-width-pressed: $inner-border-width-pressed,
$inner-border-width-focus-over: $inner-border-width-focus-over,
$inner-border-width-focus-pressed: $inner-border-width-focus-pressed,
$inner-border-width-disabled: $inner-border-width-disabled,
$inner-border-color: $inner-border-color,
$inner-border-color-over: $inner-border-color-over,
$inner-border-color-focus: $inner-border-color-focus,
$inner-border-color-pressed: $inner-border-color-pressed,
$inner-border-color-focus-over: $inner-border-color-focus-over,
$inner-border-color-focus-pressed: $inner-border-color-focus-pressed,
$inner-border-color-disabled: $inner-border-color-disabled,
$body-outline-width-focus: $body-outline-width-focus,
$body-outline-style-focus: $body-outline-style-focus,
$body-outline-color-focus: $body-outline-color-focus,
$font-size: $font-size,
$font-size-over: $font-size-over,
$font-size-focus: $font-size-focus,
$font-size-pressed: $font-size-pressed,
$font-size-focus-over: $font-size-focus-over,
$font-size-focus-pressed: $font-size-focus-pressed,
$font-size-disabled: $font-size-disabled,
$font-weight: $font-weight,
$font-weight-over: $font-weight-over,
$font-weight-focus: $font-weight-focus,
$font-weight-pressed: $font-weight-pressed,
$font-weight-focus-over: $font-weight-focus-over,
$font-weight-focus-pressed: $font-weight-focus-pressed,
$font-weight-disabled: $font-weight-disabled,
$font-family: $font-family,
$font-family-over: $font-family-over,
$font-family-focus: $font-family-focus,
$font-family-pressed: $font-family-pressed,
$font-family-focus-over: $font-family-focus-over,
$font-family-focus-pressed: $font-family-focus-pressed,
$font-family-disabled: $font-family-disabled,
$line-height: $line-height,
$icon-size: $icon-size,
$glyph-font-size: $glyph-font-size,
$icon-spacing: $icon-spacing,
$glyph-color: $glyph-color,
$glyph-opacity: $glyph-opacity,
$arrow-width: $arrow-width,
$arrow-height: $arrow-height,
$arrow-glyph: $arrow-glyph,
$arrow-glyph-color: $arrow-glyph-color,
$split-width: $split-width,
$split-height: $split-height,
$split-line-width: $split-line-width,
$split-line-color: $split-line-color,
$include-ui-menu-arrows: $include-ui-menu-arrows,
$include-ui-split-arrows: $include-ui-split-arrows,
$include-split-noline-arrows: $include-split-noline-arrows,
$include-split-over-arrows: $include-split-over-arrows,
$opacity-disabled: $opacity-disabled,
$inner-opacity-disabled: $inner-opacity-disabled
);
}
/**
* Creates a visual theme for a {@link #scale small} Button.
*
* @param {string} $ui
* The name of the UI being created. Can not included spaces or special punctuation
* (used in CSS class names).
*
* @param {number} [$border-radius=$button-small-border-radius]
* The border-radius of the button
*
* @param {number} [$border-width=$button-small-border-width]
* The border-width of the button
*
* @param {color} [$border-color=$button-default-border-color]
* The border-color of the button
*
* @param {color} [$border-color-over=$button-default-border-color-over]
* The border-color of the button when the cursor is over the button
*
* @param {color} [$border-color-focus=$button-default-border-color-focus]
* The border-color of the button when focused
*
* @param {color} [$border-color-pressed=$button-default-border-color-pressed]
* The border-color of the button when pressed
*
* @param {color} [$border-color-focus-over=$button-default-border-color-focus-over]
* The border-color of the button when the button is focused and the cursor is over the
* button
*
* @param {color} [$border-color-focus-pressed=$button-default-border-color-focus-pressed]
* The border-color of the button when focused and pressed
*
* @param {color} [$border-color-disabled=$button-default-border-color-disabled]
* The border-color of the button when disabled
*
* @param {number} [$padding=$button-small-padding]
* The amount of padding inside the border of the button on all sides
*
* @param {number} [$text-padding=$button-small-text-padding]
* The amount of horizontal space to add to the left and right of the button text
*
* @param {color} [$background-color=$button-default-background-color]
* The background-color of the button
*
* @param {color} [$background-color-over=$button-default-background-color-over]
* The background-color of the button when the cursor is over the button
*
* @param {color} [$background-color-focus=$button-default-background-color-focus]
* The background-color of the button when focused
*
* @param {color} [$background-color-pressed=$button-default-background-color-pressed]
* The background-color of the button when pressed
*
* @param {color} [$background-color-focus-over=$button-default-background-color-focus-over]
* The background-color of the button when the button is focused and the cursor is over
* the button
*
* @param {color} [$background-color-focus-pressed=$button-default-background-color-focus-pressed]
* The background-color of the button when focused and pressed
*
* @param {color} [$background-color-disabled=$button-default-background-color-disabled]
* The background-color of the button when disabled
*
* @param {string/list} [$background-gradient=$button-default-background-gradient]
* The background-gradient for the button. 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} [$background-gradient-over=$button-default-background-gradient-over]
* The background-gradient to use when the cursor is over the button. 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} [$background-gradient-focus=$button-default-background-gradient-focus]
* The background-gradient to use when the the button is 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} [$background-gradient-pressed=$button-default-background-gradient-pressed]
* The background-gradient to use when the the button is pressed. 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} [$background-gradient-focus-over=$button-default-background-gradient-focus-over]
* The background-gradient to use when the the button is focused and the cursor is over
* the button. 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} [$background-gradient-focus-pressed=$button-default-background-gradient-focus-pressed]
* The background-gradient to use when the the button is focused and pressed. 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} [$background-gradient-disabled=$button-default-background-gradient-disabled]
* The background-gradient to use when the the button is disabled. 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 {color} [$color=$button-default-color]
* The text color of the button
*
* @param {color} [$color-over=$button-default-color-over]
* The text color of the button when the cursor is over the button
*
* @param {color} [$color-focus=$button-default-color-focus]
* The text color of the button when the button is focused
*
* @param {color} [$color-pressed=$button-default-color-pressed]
* The text color of the button when the button is pressed
*
* @param {color} [$color-focus-over=$button-default-color-focus-over]
* The text color of the button when the button is focused and the cursor is over the button
*
* @param {color} [$color-focus-pressed=$button-default-color-focus-pressed]
* The text color of the button when the button is focused and pressed
*
* @param {color} [$color-disabled=$button-default-color-disabled]
* The text color of the button when the button is disabled
*
* @param {number/list} [$inner-border-width=$button-default-inner-border-width]
* The inner border-width of the button
*
* @param {number/list} [$inner-border-width-over=$button-default-inner-border-width-over]
* The inner border-width of the button when the cursor is over the button
*
* @param {number/list} [$inner-border-width-focus=$button-default-inner-border-width-focus]
* The inner border-width of the button when focused
*
* @param {number/list} [$inner-border-width-pressed=$button-default-inner-border-width-pressed]
* The inner border-width of the button when pressed
*
* @param {number/list} [$inner-border-width-focus-over=$button-default-inner-border-width-focus-over]
* The inner border-width of the button when the button is focused and the cursor is over
* the button
*
* @param {number/list} [$inner-border-width-focus-pressed=$button-default-inner-border-width-focus-pressed]
* The inner border-width of the button when focused and pressed
*
* @param {number/list} [$inner-border-width-disabled=$button-default-inner-border-width-disabled]
* The inner border-width of the button when disabled
*
* @param {color} [$inner-border-color=$button-default-inner-border-color]
* The inner border-color of the button
*
* @param {color} [$inner-border-color-over=$button-default-inner-border-color-over]
* The inner border-color of the button when the cursor is over the button
*
* @param {color} [$inner-border-color-focus=$button-default-inner-border-color-focus]
* The inner border-color of the button when focused
*
* @param {color} [$inner-border-color-pressed=$button-default-inner-border-color-pressed]
* The inner border-color of the button when pressed
*
* @param {color} [$inner-border-color-focus-over=$button-default-inner-border-color-focus-over]
* The inner border-color of the button when the button is focused and the cursor is over
* the button
*
* @param {color} [$inner-border-color-focus-pressed=$button-default-inner-border-color-focus-pressed]
* The inner border-color of the button when focused and pressed
*
* @param {color} [$inner-border-color-disabled=$button-default-inner-border-color-disabled]
* The inner border-color of the button when disabled
*
* @param {number} [$body-outline-width-focus=$button-default-body-outline-width-focus]
* The body outline width of the button when focused
*
* @param {number} [$body-outline-style-focus=$button-default-body-outline-style-focus]
* The body outline-style of the button when focused
*
* @param {number} [$body-outline-color-focus=$button-default-body-outline-color-focus]
* The body outline color of the button when focused
*
* @param {number} [$font-size=$button-small-font-size]
* The font-size of the button
*
* @param {number} [$font-size-over=$button-small-font-size-over]
* The font-size of the button when the cursor is over the button
*
* @param {number} [$font-size-focus=$button-small-font-size-focus]
* The font-size of the button when the button is focused
*
* @param {number} [$font-size-pressed=$button-small-font-size-pressed]
* The font-size of the button when the button is pressed
*
* @param {number} [$font-size-focus-over=$button-small-font-size-focus-over]
* The font-size of the button when the button is focused and the cursor is over the
* button
*
* @param {number} [$font-size-focus-pressed=$button-small-font-size-focus-pressed]
* The font-size of the button when the button is focused and pressed
*
* @param {number} [$font-size-disabled=$button-small-font-size-disabled]
* The font-size of the button when the button is disabled
*
* @param {string} [$font-weight=$button-small-font-weight]
* The font-weight of the button
*
* @param {string} [$font-weight-over=$button-small-font-weight-over]
* The font-weight of the button when the cursor is over the button
*
* @param {string} [$font-weight-focus=$button-small-font-weight-focus]
* The font-weight of the button when the button is focused
*
* @param {string} [$font-weight-pressed=$button-small-font-weight-pressed]
* The font-weight of the button when the button is pressed
*
* @param {string} [$font-weight-focus-over=$button-small-font-weight-focus-over]
* The font-weight of the button when the button is focused and the cursor is over the
* button
*
* @param {string} [$font-weight-focus-pressed=$button-small-font-weight-focus-pressed]
* The font-weight of the button when the button is focused and pressed
*
* @param {string} [$font-weight-disabled=$button-small-font-weight-disabled]
* The font-weight of the button when the button is disabled
*
* @param {string} [$font-family=$button-small-font-family]
* The font-family of the button
*
* @param {string} [$font-family-over=$button-small-font-family-over]
* The font-family of the button when the cursor is over the button
*
* @param {string} [$font-family-focus=$button-small-font-family-focus]
* The font-family of the button when the button is focused
*
* @param {string} [$font-family-pressed=$button-small-font-family-pressed]
* The font-family of the button when the button is pressed
*
* @param {string} [$font-family-focus-over=$button-small-font-family-focus-over]
* The font-family of the button when the button is focused and the cursor is over the
* button
*
* @param {string} [$font-family-focus-pressed=$button-small-font-family-focus-pressed]
* The font-family of the button when the button is focused and pressed
*
* @param {string} [$font-family-disabled=$button-small-font-family-disabled]
* The font-family of the button when the button is disabled
*
* @param {number} [$line-height=$button-small-line-height]
* The line-height of the button text
*
* @param {number} [$icon-size=$button-small-icon-size]
* The size of the button icon
*
* @param {number} [$glyph-font-size=$button-small-glyph-font-size]
* The font-size for the button glyph
*
* @param {number} [$icon-spacing=$button-small-icon-spacing]
* The space between the button's icon and text
*
* @param {color} [$glyph-color=$button-default-glyph-color]
* The color of the button's {@link #glyph} icon
*
* @param {number} [$glyph-opacity=$button-default-glyph-opacity]
* The opacity of the button's {@link #glyph} icon
*
* @param {number} [$arrow-width=$button-small-arrow-width]
* The width of the button's {@link #cfg-menu} arrow
*
* @param {number} [$arrow-height=$button-small-arrow-height]
* The height of the button's {@link #cfg-menu} arrow
*
* @param {string/list} [$arrow-glyph=$button-small-arrow-glyph]
* Glyph for the button arrow when when {@link Global_CSS#$enable-font-icons} is `true`.
*
* @param {string/list} [$arrow-glyph-color=$button-default-arrow-glyph-color]
* Glyph color for the button arrow when when {@link Global_CSS#$enable-font-icons} is `true`.
*
* @param {number} [$split-width=$button-small-split-width]
* The width of a {@link Ext.button.Split Split Button}'s arrow
*
* @param {number} [$split-height=$button-small-split-height]
* The height of a {@link Ext.button.Split Split Button}'s arrow
*
* @param {number} [$split-line-width=$button-small-split-line-width]
* The default width for a {@link Ext.button.Split Split Button}'s line.
* Themes that include the line in the arrow background image should set this to 0
*
* @param {color} [$split-line-color=$button-default-split-line-color]
* The color for a {@link Ext.button.Split Split Button}'s line.
* Only applicable when `$split-line-width` is greater than 0.
*
* @param {boolean} [$include-ui-menu-arrows=$button-include-ui-menu-arrows]
* True to include the UI name in the file name of the {@link #cfg-menu}
* arrow icon. Set this to false to share the same arrow bewteen multiple UIs.
*
* @param {boolean} [$include-ui-split-arrows=$button-include-ui-split-arrows]
* True to include the UI name in the file name of the {@link Ext.button.Split Split Button}'s
* arrow icon. Set this to false to share the same arrow bewteen multiple UIs.
*
* @param {boolean} [$include-split-noline-arrows=$button-include-split-noline-arrows]
* True to add a "-noline" suffix to the file name of the {@link Ext.button.Split Split Button}'s
* arrow icon. Used for hiding the split line when toolbar buttons are in their default
* state.
*
* @param {boolean} [$include-split-over-arrows=$button-include-split-over-arrows]
* True to use a separate icon for {@link Ext.button.Split Split Button}s when the cursor
* is over the button. The over icon file name will have a "-o" suffix
*
* @param {number} [$opacity-disabled=$button-opacity-disabled]
* The opacity of the button when it is disabled
*
* @param {number} [$inner-opacity-disabled=$button-inner-opacity-disabled]
* The opacity of the button's text and icon elements when when the button is disabled
*
* @member Ext.button.Button
*/
@mixin extjs-button-small-ui(
$ui,
$border-radius: $button-small-border-radius,
$border-width: $button-small-border-width,
$border-color: null,
$border-color-over: null,
$border-color-focus: null,
$border-color-pressed: null,
$border-color-focus-over: null,
$border-color-focus-pressed: null,
$border-color-disabled: null,
$padding: $button-small-padding,
$text-padding: $button-small-text-padding,
$background-color: null,
$background-color-over: null,
$background-color-focus: null,
$background-color-pressed: null,
$background-color-focus-over: null,
$background-color-focus-pressed: null,
$background-color-disabled: null,
$background-gradient: $button-default-background-gradient,
$background-gradient-over: $button-default-background-gradient-over,
$background-gradient-focus: $button-default-background-gradient-focus,
$background-gradient-pressed: $button-default-background-gradient-pressed,
$background-gradient-focus-over: $button-default-background-gradient-focus-over,
$background-gradient-focus-pressed: $button-default-background-gradient-focus-pressed,
$background-gradient-disabled: $button-default-background-gradient-disabled,
$color: null,
$color-over: null,
$color-focus: null,
$color-pressed: null,
$color-focus-over: null,
$color-focus-pressed: null,
$color-disabled: null,
$inner-border-width: null,
$inner-border-width-over: null,
$inner-border-width-focus: null,
$inner-border-width-pressed: null,
$inner-border-width-focus-over: null,
$inner-border-width-focus-pressed: null,
$inner-border-width-disabled: null,
$inner-border-color: null,
$inner-border-color-over: null,
$inner-border-color-focus: null,
$inner-border-color-pressed: null,
$inner-border-color-focus-over: null,
$inner-border-color-focus-pressed: null,
$inner-border-color-disabled: null,
$body-outline-width-focus: $button-default-body-outline-width-focus,
$body-outline-style-focus: $button-default-body-outline-style-focus,
$body-outline-color-focus: $button-default-body-outline-color-focus,
$font-size: null,
$font-size-over: null,
$font-size-focus: null,
$font-size-pressed: null,
$font-size-focus-over: null,
$font-size-focus-pressed: null,
$font-size-disabled: null,
$font-weight: null,
$font-weight-over: null,
$font-weight-focus: null,
$font-weight-pressed: null,
$font-weight-focus-over: null,
$font-weight-focus-pressed: null,
$font-weight-disabled: null,
$font-family: null,
$font-family-over: null,
$font-family-focus: null,
$font-family-pressed: null,
$font-family-focus-over: null,
$font-family-focus-pressed: null,
$font-family-disabled: null,
$line-height: $button-small-line-height,
$icon-size: $button-small-icon-size,
$glyph-font-size: $button-small-glyph-font-size,
$icon-spacing: $button-small-icon-spacing,
$glyph-color: $button-default-glyph-color,
$glyph-opacity: $button-default-glyph-opacity,
$arrow-width: $button-small-arrow-width,
$arrow-height: $button-small-arrow-height,
$arrow-glyph: $button-small-arrow-glyph,
$arrow-glyph-color: $button-default-arrow-glyph-color,
$split-width: $button-small-split-width,
$split-height: $button-small-split-height,
$split-line-width: $button-small-split-line-width,
$split-line-color: $button-default-split-line-color,
$include-ui-menu-arrows: $button-include-ui-menu-arrows,
$include-ui-split-arrows: $button-include-ui-split-arrows,
$include-split-noline-arrows: $button-include-split-noline-arrows,
$include-split-over-arrows: $button-include-split-over-arrows,
$opacity-disabled: $button-opacity-disabled,
$inner-opacity-disabled: $button-inner-opacity-disabled
) {
@if $border-color == null {
$border-color: $button-default-border-color;
@if $border-color-over == null {
$border-color-over: $button-default-border-color-over;
}
@if $border-color-focus == null {
$border-color-focus: $button-default-border-color-focus;
}
@if $border-color-pressed == null {
$border-color-pressed: $button-default-border-color-pressed;
}
@if $border-color-focus-over == null {
$border-color-focus-over: $button-default-border-color-focus-over;
}
@if $border-color-focus-pressed == null {
$border-color-focus-pressed: $button-default-border-color-focus-pressed;
}
@if $border-color-disabled == null {
$border-color-disabled: $button-default-border-color-disabled;
}
} @else {
@if $border-color-over == null {
$border-color-over: button-default-border-color-over($border-color);
}
@if $border-color-focus == null {
$border-color-focus: button-default-border-color-focus($border-color);
}
@if $border-color-pressed == null {
$border-color-pressed: button-default-border-color-pressed($border-color);
}
@if $border-color-focus-over == null {
$border-color-focus-over: $border-color-over;
}
@if $border-color-focus-pressed == null {
$border-color-focus-pressed: $border-color-pressed;
}
@if $border-color-disabled == null {
$border-color-disabled: button-default-border-color-disabled($border-color);
}
}
@if $background-color == null {
$background-color: $button-default-background-color;
@if $background-color-over == null {
$background-color-over: $button-default-background-color-over;
}
@if $background-color-focus == null {
$background-color-focus: $button-default-background-color-focus;
}
@if $background-color-pressed == null {
$background-color-pressed: $button-default-background-color-pressed;
}
@if $background-color-focus-over == null {
$background-color-focus-over: $button-default-background-color-focus-over;
}
@if $background-color-focus-pressed == null {
$background-color-focus-pressed: $button-default-background-color-focus-pressed;
}
@if $background-color-disabled == null {
$background-color-disabled: $button-default-background-color-disabled;
}
} @else {
@if $background-color-over == null {
$background-color-over: button-default-background-color-over($background-color);
}
@if $background-color-focus == null {
$background-color-focus: button-default-background-color-focus($background-color);
}
@if $background-color-pressed == null {
$background-color-pressed: button-default-background-color-pressed($background-color);
}
@if $background-color-focus-over == null {
$background-color-focus-over: $background-color-over;
}
@if $background-color-focus-pressed == null {
$background-color-focus-pressed: $background-color-pressed;
}
@if $background-color-disabled == null {
$background-color-disabled: button-default-background-color-disabled($background-color);
}
}
@if $color == null {
$color: $button-default-color;
@if $color-over == null {
$color-over: $button-default-color-over;
}
@if $color-focus == null {
$color-focus: $button-default-color-focus;
}
@if $color-pressed == null {
$color-pressed: $button-default-color-pressed;
}
@if $color-focus-over == null {
$color-focus-over: $button-default-color-focus-over;
}
@if $color-focus-pressed == null {
$color-focus-pressed: $button-default-color-focus-pressed;
}
@if $color-disabled == null {
$color-disabled: $button-default-color-disabled;
}
} @else {
@if $color-over == null {
$color-over: button-default-color-over($color);
}
@if $color-focus == null {
$color-focus: button-default-color-focus($color);
}
@if $color-pressed == null {
$color-pressed: button-default-color-pressed($color);
}
@if $color-focus-over == null {
$color-focus-over: $color-over;
}
@if $color-focus-pressed == null {
$color-focus-pressed: $color-pressed;
}
@if $color-disabled == null {
$color-disabled: button-default-color-disabled($color);
}
}
@if $inner-border-width == null {
$inner-border-width: $button-default-inner-border-width;
@if $inner-border-width-over == null {
$inner-border-width-over: $button-default-inner-border-width-over;
}
@if $inner-border-width-focus == null {
$inner-border-width-focus: $button-default-inner-border-width-focus;
}
@if $inner-border-width-pressed == null {
$inner-border-width-pressed: $button-default-inner-border-width-pressed;
}
@if $inner-border-width-focus-over == null {
$inner-border-width-focus-over: $button-default-inner-border-width-focus-over;
}
@if $inner-border-width-focus-pressed == null {
$inner-border-width-focus-pressed: $button-default-inner-border-width-focus-pressed;
}
@if $inner-border-width-disabled == null {
$inner-border-width-disabled: $button-default-inner-border-width-disabled;
}
} @else {
@if $inner-border-width-over == null {
$inner-border-width-over: $inner-border-width;
}
@if $inner-border-width-focus == null {
$inner-border-width-focus: $inner-border-width;
}
@if $inner-border-width-pressed == null {
$inner-border-width-pressed: $inner-border-width;
}
@if $inner-border-width-focus-over == null {
$inner-border-width-focus-over: $inner-border-width-over;
}
@if $inner-border-width-focus-pressed == null {
$inner-border-width-focus-pressed: $inner-border-width-pressed;
}
@if $inner-border-width-disabled == null {
$inner-border-width-disabled: $inner-border-width;
}
}
@if $inner-border-color == null {
$inner-border-color: $button-default-inner-border-color;
@if $inner-border-color-over == null {
$inner-border-color-over: $button-default-inner-border-color-over;
}
@if $inner-border-color-focus == null {
$inner-border-color-focus: $button-default-inner-border-color-focus;
}
@if $inner-border-color-pressed == null {
$inner-border-color-pressed: $button-default-inner-border-color-pressed;
}
@if $inner-border-color-focus-over == null {
$inner-border-color-focus-over: $button-default-inner-border-color-focus-over;
}
@if $inner-border-color-focus-pressed == null {
$inner-border-color-focus-pressed: $button-default-inner-border-color-focus-pressed;
}
@if $inner-border-color-disabled == null {
$inner-border-color-disabled: $button-default-inner-border-color-disabled;
}
} @else {
@if $inner-border-color-over == null {
$inner-border-color-over: button-default-inner-border-color-over($background-color-over, $color-over);
}
@if $inner-border-color-focus == null {
$inner-border-color-focus: button-default-inner-border-color-focus($background-color-focus, $color-focus);
}
@if $inner-border-color-pressed == null {
$inner-border-color-pressed: button-default-inner-border-color-pressed($background-color-pressed, $color-pressed);
}
@if $inner-border-color-focus-over == null {
$inner-border-color-focus-over: button-default-inner-border-color-focus-over($background-color-focus-over, $color-focus-over);
}
@if $inner-border-color-focus-pressed == null {
$inner-border-color-focus-pressed: button-default-inner-border-color-focus-pressed($background-color-focus-pressed, $color-focus-pressed);
}
@if $inner-border-color-disabled == null {
$inner-border-color-disabled: button-default-inner-border-color-disabled($background-color-disabled, $color-disabled);
}
}
@if $font-size == null {
$font-size: $button-small-font-size;
@if $font-size-over == null {
$font-size-over: $button-small-font-size-over;
}
@if $font-size-focus == null {
$font-size-focus: $button-small-font-size-focus;
}
@if $font-size-pressed == null {
$font-size-pressed: $button-small-font-size-pressed;
}
@if $font-size-focus-over == null {
$font-size-focus-over: $button-small-font-size-focus-over;
}
@if $font-size-focus-pressed == null {
$font-size-focus-pressed: $button-small-font-size-focus-pressed;
}
@if $font-size-disabled == null {
$font-size-disabled: $button-small-font-size-disabled;
}
} @else {
@if $font-size-over == null {
$font-size-over: $font-size;
}
@if $font-size-focus == null {
$font-size-focus: $font-size;
}
@if $font-size-pressed == null {
$font-size-pressed: $font-size;
}
@if $font-size-focus-over == null {
$font-size-focus-over: $font-size-over;
}
@if $font-size-focus-pressed == null {
$font-size-focus-pressed: $font-size-pressed;
}
@if $font-size-disabled == null {
$font-size-disabled: $font-size;
}
}
@if $font-weight == null {
$font-weight: $button-small-font-weight;
@if $font-weight-over == null {
$font-weight-over: $button-small-font-weight-over;
}
@if $font-weight-focus == null {
$font-weight-focus: $button-small-font-weight-focus;
}
@if $font-weight-pressed == null {
$font-weight-pressed: $button-small-font-weight-pressed;
}
@if $font-weight-focus-over == null {
$font-weight-focus-over: $button-small-font-weight-focus-over;
}
@if $font-weight-focus-pressed == null {
$font-weight-focus-pressed: $button-small-font-weight-focus-pressed;
}
@if $font-weight-disabled == null {
$font-weight-disabled: $button-small-font-weight-disabled;
}
} @else {
@if $font-weight-over == null {
$font-weight-over: $font-weight;
}
@if $font-weight-focus == null {
$font-weight-focus: $font-weight;
}
@if $font-weight-pressed == null {
$font-weight-pressed: $font-weight;
}
@if $font-weight-focus-over == null {
$font-weight-focus-over: $font-weight-over;
}
@if $font-weight-focus-pressed == null {
$font-weight-focus-pressed: $font-weight-pressed;
}
@if $font-weight-disabled == null {
$font-weight-disabled: $font-weight;
}
}
@if $font-family == null {
$font-family: $button-small-font-family;
@if $font-family-over == null {
$font-family-over: $button-small-font-family-over;
}
@if $font-family-focus == null {
$font-family-focus: $button-small-font-family-focus;
}
@if $font-family-pressed == null {
$font-family-pressed: $button-small-font-family-pressed;
}
@if $font-family-focus-over == null {
$font-family-focus-over: $button-small-font-family-focus-over;
}
@if $font-family-focus-pressed == null {
$font-family-focus-pressed: $button-small-font-family-focus-pressed;
}
@if $font-family-disabled == null {
$font-family-disabled: $button-small-font-family-disabled;
}
} @else {
@if $font-family-over == null {
$font-family-over: $font-family;
}
@if $font-family-focus == null {
$font-family-focus: $font-family;
}
@if $font-family-pressed == null {
$font-family-pressed: $font-family;
}
@if $font-family-focus-over == null {
$font-family-focus-over: $font-family-over;
}
@if $font-family-focus-pressed == null {
$font-family-focus-pressed: $font-family-pressed;
}
@if $font-family-disabled == null {
$font-family-disabled: $font-family;
}
}
@include extjs-button-ui(
$ui: '#{$ui}-small',
$border-radius: $border-radius,
$border-width: $border-width,
$border-color: $border-color,
$border-color-over: $border-color-over,
$border-color-focus: $border-color-focus,
$border-color-pressed: $border-color-pressed,
$border-color-focus-over: $border-color-focus-over,
$border-color-focus-pressed: $border-color-focus-pressed,
$border-color-disabled: $border-color-disabled,
$padding: $padding,
$text-padding: $text-padding,
$background-color: $background-color,
$background-color-over: $background-color-over,
$background-color-focus: $background-color-focus,
$background-color-pressed: $background-color-pressed,
$background-color-focus-over: $background-color-focus-over,
$background-color-focus-pressed: $background-color-focus-pressed,
$background-color-disabled: $background-color-disabled,
$background-gradient: $background-gradient,
$background-gradient-over: $background-gradient-over,
$background-gradient-focus: $background-gradient-focus,
$background-gradient-pressed: $background-gradient-pressed,
$background-gradient-focus-over: $background-gradient-focus-over,
$background-gradient-focus-pressed: $background-gradient-focus-pressed,
$background-gradient-disabled: $background-gradient-disabled,
$color: $color,
$color-over: $color-over,
$color-focus: $color-focus,
$color-pressed: $color-pressed,
$color-focus-over: $color-focus-over,
$color-focus-pressed: $color-focus-pressed,
$color-disabled: $color-disabled,
$inner-border-width: $inner-border-width,
$inner-border-width-over: $inner-border-width-over,
$inner-border-width-focus: $inner-border-width-focus,
$inner-border-width-pressed: $inner-border-width-pressed,
$inner-border-width-focus-over: $inner-border-width-focus-over,
$inner-border-width-focus-pressed: $inner-border-width-focus-pressed,
$inner-border-width-disabled: $inner-border-width-disabled,
$inner-border-color: $inner-border-color,
$inner-border-color-over: $inner-border-color-over,
$inner-border-color-focus: $inner-border-color-focus,
$inner-border-color-pressed: $inner-border-color-pressed,
$inner-border-color-focus-over: $inner-border-color-focus-over,
$inner-border-color-focus-pressed: $inner-border-color-focus-pressed,
$inner-border-color-disabled: $inner-border-color-disabled,
$body-outline-width-focus: $body-outline-width-focus,
$body-outline-style-focus: $body-outline-style-focus,
$body-outline-color-focus: $body-outline-color-focus,
$font-size: $font-size,
$font-size-over: $font-size-over,
$font-size-focus: $font-size-focus,
$font-size-pressed: $font-size-pressed,
$font-size-focus-over: $font-size-focus-over,
$font-size-focus-pressed: $font-size-focus-pressed,
$font-size-disabled: $font-size-disabled,
$font-weight: $font-weight,
$font-weight-over: $font-weight-over,
$font-weight-focus: $font-weight-focus,
$font-weight-pressed: $font-weight-pressed,
$font-weight-focus-over: $font-weight-focus-over,
$font-weight-focus-pressed: $font-weight-focus-pressed,
$font-weight-disabled: $font-weight-disabled,
$font-family: $font-family,
$font-family-over: $font-family-over,
$font-family-focus: $font-family-focus,
$font-family-pressed: $font-family-pressed,
$font-family-focus-over: $font-family-focus-over,
$font-family-focus-pressed: $font-family-focus-pressed,
$font-family-disabled: $font-family-disabled,
$line-height: $line-height,
$icon-size: $icon-size,
$glyph-font-size: $glyph-font-size,
$icon-spacing: $icon-spacing,
$glyph-color: $glyph-color,
$glyph-opacity: $glyph-opacity,
$arrow-width: $arrow-width,
$arrow-height: $arrow-height,
$arrow-glyph: $arrow-glyph,
$arrow-glyph-color: $arrow-glyph-color,
$split-width: $split-width,
$split-height: $split-height,
$split-line-width: $split-line-width,
$split-line-color: $split-line-color,
$include-ui-menu-arrows: $include-ui-menu-arrows,
$include-ui-split-arrows: $include-ui-split-arrows,
$include-split-noline-arrows: $include-split-noline-arrows,
$include-split-over-arrows: $include-split-over-arrows,
$opacity-disabled: $opacity-disabled,
$inner-opacity-disabled: $inner-opacity-disabled
);
}
/**
* Creates a visual theme for a {@link #scale small} toolbar Button.
*
* @param {string} $ui
* The name of the UI being created. Can not included spaces or special punctuation
* (used in CSS class names).
*
* @param {number} [$border-radius=$button-small-border-radius]
* The border-radius of the button
*
* @param {number} [$border-width=$button-small-border-width]
* The border-width of the button
*
* @param {color} [$border-color=$button-toolbar-border-color]
* The border-color of the button
*
* @param {color} [$border-color-over=$button-toolbar-border-color-over]
* The border-color of the button when the cursor is over the button
*
* @param {color} [$border-color-focus=$button-toolbar-border-color-focus]
* The border-color of the button when focused
*
* @param {color} [$border-color-pressed=$button-toolbar-border-color-pressed]
* The border-color of the button when pressed
*
* @param {color} [$border-color-focus-over=$button-toolbar-border-color-focus-over]
* The border-color of the button when the button is focused and the cursor is over the
* button
*
* @param {color} [$border-color-focus-pressed=$button-toolbar-border-color-focus-pressed]
* The border-color of the button when focused and pressed
*
* @param {color} [$border-color-disabled=$button-toolbar-border-color-disabled]
* The border-color of the button when disabled
*
* @param {number} [$padding=$button-small-padding]
* The amount of padding inside the border of the button on all sides
*
* @param {number} [$text-padding=$button-small-text-padding]
* The amount of horizontal space to add to the left and right of the button text
*
* @param {color} [$background-color=$button-toolbar-background-color]
* The background-color of the button
*
* @param {color} [$background-color-over=$button-toolbar-background-color-over]
* The background-color of the button when the cursor is over the button
*
* @param {color} [$background-color-focus=$button-toolbar-background-color-focus]
* The background-color of the button when focused
*
* @param {color} [$background-color-pressed=$button-toolbar-background-color-pressed]
* The background-color of the button when pressed
*
* @param {color} [$background-color-focus-over=$button-toolbar-background-color-focus-over]
* The background-color of the button when the button is focused and the cursor is over
* the button
*
* @param {color} [$background-color-focus-pressed=$button-toolbar-background-color-focus-pressed]
* The background-color of the button when focused and pressed
*
* @param {color} [$background-color-disabled=$button-toolbar-background-color-disabled]
* The background-color of the button when disabled
*
* @param {string/list} [$background-gradient=$button-toolbar-background-gradient]
* The background-gradient for the button. 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} [$background-gradient-over=$button-toolbar-background-gradient-over]
* The background-gradient to use when the cursor is over the button. 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} [$background-gradient-focus=$button-toolbar-background-gradient-focus]
* The background-gradient to use when the the button is 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} [$background-gradient-pressed=$button-toolbar-background-gradient-pressed]
* The background-gradient to use when the the button is pressed. 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} [$background-gradient-focus-over=$button-toolbar-background-gradient-focus-over]
* The background-gradient to use when the the button is focused and the cursor is over
* the button. 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} [$background-gradient-focus-pressed=$button-toolbar-background-gradient-focus-pressed]
* The background-gradient to use when the the button is focused and pressed. 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} [$background-gradient-disabled=$button-toolbar-background-gradient-disabled]
* The background-gradient to use when the the button is disabled. 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 {color} [$color=$button-toolbar-color]
* The text color of the button
*
* @param {color} [$color-over=$button-toolbar-color-over]
* The text color of the button when the cursor is over the button
*
* @param {color} [$color-focus=$button-toolbar-color-focus]
* The text color of the button when the button is focused
*
* @param {color} [$color-pressed=$button-toolbar-color-pressed]
* The text color of the button when the button is pressed
*
* @param {color} [$color-focus-over=$button-toolbar-color-focus-over]
* The text color of the button when the button is focused and the cursor is over the button
*
* @param {color} [$color-focus-pressed=$button-toolbar-color-focus-pressed]
* The text color of the button when the button is focused and pressed
*
* @param {color} [$color-disabled=$button-toolbar-color-disabled]
* The text color of the button when the button is disabled
*
* @param {number/list} [$inner-border-width=$button-toolbar-inner-border-width]
* The inner border-width of the button
*
* @param {number/list} [$inner-border-width-over=$button-toolbar-inner-border-width-over]
* The inner border-width of the button when the cursor is over the button
*
* @param {number/list} [$inner-border-width-focus=$button-toolbar-inner-border-width-focus]
* The inner border-width of the button when focused
*
* @param {number/list} [$inner-border-width-pressed=$button-toolbar-inner-border-width-pressed]
* The inner border-width of the button when pressed
*
* @param {number/list} [$inner-border-width-focus-over=$button-toolbar-inner-border-width-focus-over]
* The inner border-width of the button when the button is focused and the cursor is over
* the button
*
* @param {number/list} [$inner-border-width-focus-pressed=$button-toolbar-inner-border-width-focus-pressed]
* The inner border-width of the button when focused and pressed
*
* @param {number/list} [$inner-border-width-disabled=$button-toolbar-inner-border-width-disabled]
* The inner border-width of the button when disabled
*
* @param {color} [$inner-border-color=$button-toolbar-inner-border-color]
* The inner border-color of the button
*
* @param {color} [$inner-border-color-over=$button-toolbar-inner-border-color-over]
* The inner border-color of the button when the cursor is over the button
*
* @param {color} [$inner-border-color-focus=$button-toolbar-inner-border-color-focus]
* The inner border-color of the button when focused
*
* @param {color} [$inner-border-color-pressed=$button-toolbar-inner-border-color-pressed]
* The inner border-color of the button when pressed
*
* @param {color} [$inner-border-color-focus-over=$button-toolbar-inner-border-color-focus-over]
* The inner border-color of the button when the button is focused and the cursor is over
* the button
*
* @param {color} [$inner-border-color-focus-pressed=$button-toolbar-inner-border-color-focus-pressed]
* The inner border-color of the button when focused and pressed
*
* @param {color} [$inner-border-color-disabled=$button-toolbar-inner-border-color-disabled]
* The inner border-color of the button when disabled
*
* @param {number} [$body-outline-width-focus=$button-toolbar-body-outline-width-focus]
* The body outline width of the button when focused
*
* @param {number} [$body-outline-style-focus=$button-toolbar-body-outline-style-focus]
* The body outline-style of the button when focused
*
* @param {number} [$body-outline-color-focus=$button-toolbar-body-outline-color-focus]
* The body outline color of the button when focused
*
* @param {number} [$font-size=$button-small-font-size]
* The font-size of the button
*
* @param {number} [$font-size-over=$button-small-font-size-over]
* The font-size of the button when the cursor is over the button
*
* @param {number} [$font-size-focus=$button-small-font-size-focus]
* The font-size of the button when the button is focused
*
* @param {number} [$font-size-pressed=$button-small-font-size-pressed]
* The font-size of the button when the button is pressed
*
* @param {number} [$font-size-focus-over=$button-small-font-size-focus-over]
* The font-size of the button when the button is focused and the cursor is over the
* button
*
* @param {number} [$font-size-focus-pressed=$button-small-font-size-focus-pressed]
* The font-size of the button when the button is focused and pressed
*
* @param {number} [$font-size-disabled=$button-small-font-size-disabled]
* The font-size of the button when the button is disabled
*
* @param {string} [$font-weight=$button-small-font-weight]
* The font-weight of the button
*
* @param {string} [$font-weight-over=$button-small-font-weight-over]
* The font-weight of the button when the cursor is over the button
*
* @param {string} [$font-weight-focus=$button-small-font-weight-focus]
* The font-weight of the button when the button is focused
*
* @param {string} [$font-weight-pressed=$button-small-font-weight-pressed]
* The font-weight of the button when the button is pressed
*
* @param {string} [$font-weight-focus-over=$button-small-font-weight-focus-over]
* The font-weight of the button when the button is focused and the cursor is over the
* button
*
* @param {string} [$font-weight-focus-pressed=$button-small-font-weight-focus-pressed]
* The font-weight of the button when the button is focused and pressed
*
* @param {string} [$font-weight-disabled=$button-small-font-weight-disabled]
* The font-weight of the button when the button is disabled
*
* @param {string} [$font-family=$button-small-font-family]
* The font-family of the button
*
* @param {string} [$font-family-over=$button-small-font-family-over]
* The font-family of the button when the cursor is over the button
*
* @param {string} [$font-family-focus=$button-small-font-family-focus]
* The font-family of the button when the button is focused
*
* @param {string} [$font-family-pressed=$button-small-font-family-pressed]
* The font-family of the button when the button is pressed
*
* @param {string} [$font-family-focus-over=$button-small-font-family-focus-over]
* The font-family of the button when the button is focused and the cursor is over the
* button
*
* @param {string} [$font-family-focus-pressed=$button-small-font-family-focus-pressed]
* The font-family of the button when the button is focused and pressed
*
* @param {string} [$font-family-disabled=$button-small-font-family-disabled]
* The font-family of the button when the button is disabled
*
* @param {number} [$line-height=$button-small-line-height]
* The line-height of the button text
*
* @param {number} [$icon-size=$button-small-icon-size]
* The size of the button icon
*
* @param {number} [$glyph-font-size=$button-small-glyph-font-size]
* The font-size for the button glyph
*
* @param {number} [$icon-spacing=$button-small-icon-spacing]
* The space between the button's icon and text
*
* @param {color} [$glyph-color=$button-toolbar-glyph-color]
* The color of the button's {@link #glyph} icon
*
* @param {number} [$glyph-opacity=$button-toolbar-glyph-opacity]
* The opacity of the button's {@link #glyph} icon
*
* @param {number} [$arrow-width=$button-small-arrow-width]
* The width of the button's {@link #cfg-menu} arrow
*
* @param {number} [$arrow-height=$button-small-arrow-height]
* The height of the button's {@link #cfg-menu} arrow
*
* @param {string/list} [$arrow-glyph=$button-small-arrow-glyph]
* Glyph for the button arrow when when {@link Global_CSS#$enable-font-icons} is `true`.
*
* @param {string/list} [$arrow-glyph-color=$button-toolbar-arrow-glyph-color]
* Glyph color for the button arrow when when {@link Global_CSS#$enable-font-icons} is `true`.
*
* @param {number} [$split-width=$button-small-split-width]
* The width of a {@link Ext.button.Split Split Button}'s arrow
*
* @param {number} [$split-height=$button-small-split-height]
* The height of a {@link Ext.button.Split Split Button}'s arrow
*
* @param {number} [$split-line-width=$button-small-split-line-width]
* The default width for a {@link Ext.button.Split Split Button}'s line.
* Themes that include the line in the arrow background image should set this to 0
*
* @param {color} [$split-line-color=$button-toolbar-split-line-color]
* The color for a {@link Ext.button.Split Split Button}'s line.
* Only applicable when `$split-line-width` is greater than 0.
*
* @param {boolean} [$include-ui-menu-arrows=$button-include-ui-menu-arrows]
* True to include the UI name in the file name of the {@link #cfg-menu}
* arrow icon. Set this to false to share the same arrow bewteen multiple UIs.
*
* @param {boolean} [$include-ui-split-arrows=$button-include-ui-split-arrows]
* True to include the UI name in the file name of the {@link Ext.button.Split Split Button}'s
* arrow icon. Set this to false to share the same arrow bewteen multiple UIs.
*
* @param {boolean} [$include-split-noline-arrows=$button-toolbar-include-split-noline-arrows]
* True to add a "-noline" suffix to the file name of the {@link Ext.button.Split Split Button}'s
* arrow icon. Used for hiding the split line when toolbar buttons are in their default
* state.
*
* @param {boolean} [$include-split-over-arrows=$button-include-split-over-arrows]
* True to use a separate icon for {@link Ext.button.Split Split Button}s when the cursor
* is over the button. The over icon file name will have a "-o" suffix
*
* @param {number} [$opacity-disabled=$button-toolbar-opacity-disabled]
* The opacity of the button when it is disabled
*
* @param {number} [$inner-opacity-disabled=$button-toolbar-inner-opacity-disabled]
* The opacity of the button's text and icon elements when when the button is disabled
*
* @member Ext.button.Button
*/
@mixin extjs-button-toolbar-small-ui(
$ui,
$border-radius: $button-small-border-radius,
$border-width: $button-small-border-width,
$border-color: null,
$border-color-over: null,
$border-color-focus: null,
$border-color-pressed: null,
$border-color-focus-over: null,
$border-color-focus-pressed: null,
$border-color-disabled: null,
$padding: $button-small-padding,
$text-padding: $button-small-text-padding,
$background-color: null,
$background-color-over: null,
$background-color-focus: null,
$background-color-pressed: null,
$background-color-focus-over: null,
$background-color-focus-pressed: null,
$background-color-disabled: null,
$background-gradient: $button-toolbar-background-gradient,
$background-gradient-over: $button-toolbar-background-gradient-over,
$background-gradient-focus: $button-toolbar-background-gradient-focus,
$background-gradient-pressed: $button-toolbar-background-gradient-pressed,
$background-gradient-focus-over: $button-toolbar-background-gradient-focus-over,
$background-gradient-focus-pressed: $button-toolbar-background-gradient-focus-pressed,
$background-gradient-disabled: $button-toolbar-background-gradient-disabled,
$color: null,
$color-over: null,
$color-focus: null,
$color-pressed: null,
$color-focus-over: null,
$color-focus-pressed: null,
$color-disabled: null,
$inner-border-width: null,
$inner-border-width-over: null,
$inner-border-width-focus: null,
$inner-border-width-pressed: null,
$inner-border-width-focus-over: null,
$inner-border-width-focus-pressed: null,
$inner-border-width-disabled: null,
$inner-border-color: null,
$inner-border-color-over: null,
$inner-border-color-focus: null,
$inner-border-color-pressed: null,
$inner-border-color-focus-over: null,
$inner-border-color-focus-pressed: null,
$inner-border-color-disabled: null,
$body-outline-width-focus: $button-toolbar-body-outline-width-focus,
$body-outline-style-focus: $button-toolbar-body-outline-style-focus,
$body-outline-color-focus: $button-toolbar-body-outline-color-focus,
$font-size: null,
$font-size-over: null,
$font-size-focus: null,
$font-size-pressed: null,
$font-size-focus-over: null,
$font-size-focus-pressed: null,
$font-size-disabled: null,
$font-weight: null,
$font-weight-over: null,
$font-weight-focus: null,
$font-weight-pressed: null,
$font-weight-focus-over: null,
$font-weight-focus-pressed: null,
$font-weight-disabled: null,
$font-family: null,
$font-family-over: null,
$font-family-focus: null,
$font-family-pressed: null,
$font-family-focus-over: null,
$font-family-focus-pressed: null,
$font-family-disabled: null,
$line-height: $button-small-line-height,
$icon-size: $button-small-icon-size,
$glyph-font-size: $button-small-glyph-font-size,
$icon-spacing: $button-small-icon-spacing,
$glyph-color: $button-toolbar-glyph-color,
$glyph-opacity: $button-toolbar-glyph-opacity,
$arrow-width: $button-small-arrow-width,
$arrow-height: $button-small-arrow-height,
$arrow-glyph: $button-small-arrow-glyph,
$arrow-glyph-color: $button-toolbar-arrow-glyph-color,
$split-width: $button-small-split-width,
$split-height: $button-small-split-height,
$split-line-width: $button-small-split-line-width,
$split-line-color: $button-toolbar-split-line-color,
$include-ui-menu-arrows: $button-include-ui-menu-arrows,
$include-ui-split-arrows: $button-include-ui-split-arrows,
$include-split-noline-arrows: $button-toolbar-include-split-noline-arrows,
$include-split-over-arrows: $button-include-split-over-arrows,
$opacity-disabled: $button-toolbar-opacity-disabled,
$inner-opacity-disabled: $button-toolbar-inner-opacity-disabled
) {
@if $border-color == null {
$border-color: $button-toolbar-border-color;
@if $border-color-over == null {
$border-color-over: $button-toolbar-border-color-over;
}
@if $border-color-focus == null {
$border-color-focus: $button-toolbar-border-color-focus;
}
@if $border-color-pressed == null {
$border-color-pressed: $button-toolbar-border-color-pressed;
}
@if $border-color-focus-over == null {
$border-color-focus-over: $button-toolbar-border-color-focus-over;
}
@if $border-color-focus-pressed == null {
$border-color-focus-pressed: $button-toolbar-border-color-focus-pressed;
}
@if $border-color-disabled == null {
$border-color-disabled: $button-toolbar-border-color-disabled;
}
} @else {
@if $border-color-over == null {
$border-color-over: button-toolbar-border-color-over($border-color);
}
@if $border-color-focus == null {
$border-color-focus: button-toolbar-border-color-focus($border-color);
}
@if $border-color-pressed == null {
$border-color-pressed: button-toolbar-border-color-pressed($border-color);
}
@if $border-color-focus-over == null {
$border-color-focus-over: $border-color-over;
}
@if $border-color-focus-pressed == null {
$border-color-focus-pressed: $border-color-pressed;
}
@if $border-color-disabled == null {
$border-color-disabled: button-toolbar-border-color-disabled($border-color);
}
}
@if $background-color == null {
$background-color: $button-toolbar-background-color;
@if $background-color-over == null {
$background-color-over: $button-toolbar-background-color-over;
}
@if $background-color-focus == null {
$background-color-focus: $button-toolbar-background-color-focus;
}
@if $background-color-pressed == null {
$background-color-pressed: $button-toolbar-background-color-pressed;
}
@if $background-color-focus-over == null {
$background-color-focus-over: $button-toolbar-background-color-focus-over;
}
@if $background-color-focus-pressed == null {
$background-color-focus-pressed: $button-toolbar-background-color-focus-pressed;
}
@if $background-color-disabled == null {
$background-color-disabled: $button-toolbar-background-color-disabled;
}
} @else {
@if $background-color-over == null {
$background-color-over: button-toolbar-background-color-over($background-color);
}
@if $background-color-focus == null {
$background-color-focus: button-toolbar-background-color-focus($background-color);
}
@if $background-color-pressed == null {
$background-color-pressed: button-toolbar-background-color-pressed($background-color);
}
@if $background-color-focus-over == null {
$background-color-focus-over: $background-color-over;
}
@if $background-color-focus-pressed == null {
$background-color-focus-pressed: $background-color-pressed;
}
@if $background-color-disabled == null {
$background-color-disabled: button-toolbar-background-color-disabled($background-color);
}
}
@if $color == null {
$color: $button-toolbar-color;
@if $color-over == null {
$color-over: $button-toolbar-color-over;
}
@if $color-focus == null {
$color-focus: $button-toolbar-color-focus;
}
@if $color-pressed == null {
$color-pressed: $button-toolbar-color-pressed;
}
@if $color-focus-over == null {
$color-focus-over: $button-toolbar-color-focus-over;
}
@if $color-focus-pressed == null {
$color-focus-pressed: $button-toolbar-color-focus-pressed;
}
@if $color-disabled == null {
$color-disabled: $button-toolbar-color-disabled;
}
} @else {
@if $color-over == null {
$color-over: button-toolbar-color-over($color);
}
@if $color-focus == null {
$color-focus: button-toolbar-color-focus($color);
}
@if $color-pressed == null {
$color-pressed: button-toolbar-color-pressed($color);
}
@if $color-focus-over == null {
$color-focus-over: $color-over;
}
@if $color-focus-pressed == null {
$color-focus-pressed: $color-pressed;
}
@if $color-disabled == null {
$color-disabled: button-toolbar-color-disabled($color);
}
}
@if $inner-border-width == null {
$inner-border-width: $button-toolbar-inner-border-width;
@if $inner-border-width-over == null {
$inner-border-width-over: $button-toolbar-inner-border-width-over;
}
@if $inner-border-width-focus == null {
$inner-border-width-focus: $button-toolbar-inner-border-width-focus;
}
@if $inner-border-width-pressed == null {
$inner-border-width-pressed: $button-toolbar-inner-border-width-pressed;
}
@if $inner-border-width-focus-over == null {
$inner-border-width-focus-over: $button-toolbar-inner-border-width-focus-over;
}
@if $inner-border-width-focus-pressed == null {
$inner-border-width-focus-pressed: $button-toolbar-inner-border-width-focus-pressed;
}
@if $inner-border-width-disabled == null {
$inner-border-width-disabled: $button-toolbar-inner-border-width-disabled;
}
} @else {
@if $inner-border-width-over == null {
$inner-border-width-over: $inner-border-width;
}
@if $inner-border-width-focus == null {
$inner-border-width-focus: $inner-border-width;
}
@if $inner-border-width-pressed == null {
$inner-border-width-pressed: $inner-border-width;
}
@if $inner-border-width-focus-over == null {
$inner-border-width-focus-over: $inner-border-width-over;
}
@if $inner-border-width-focus-pressed == null {
$inner-border-width-focus-pressed: $inner-border-width-pressed;
}
@if $inner-border-width-disabled == null {
$inner-border-width-disabled: $inner-border-width;
}
}
@if $inner-border-color == null {
$inner-border-color: $button-toolbar-inner-border-color;
@if $inner-border-color-over == null {
$inner-border-color-over: $button-toolbar-inner-border-color-over;
}
@if $inner-border-color-focus == null {
$inner-border-color-focus: $button-toolbar-inner-border-color-focus;
}
@if $inner-border-color-pressed == null {
$inner-border-color-pressed: $button-toolbar-inner-border-color-pressed;
}
@if $inner-border-color-focus-over == null {
$inner-border-color-focus-over: $button-toolbar-inner-border-color-focus-over;
}
@if $inner-border-color-focus-pressed == null {
$inner-border-color-focus-pressed: $button-toolbar-inner-border-color-focus-pressed;
}
@if $inner-border-color-disabled == null {
$inner-border-color-disabled: $button-toolbar-inner-border-color-disabled;
}
} @else {
@if $inner-border-color-over == null {
$inner-border-color-over: button-toolbar-inner-border-color-over($background-color-over, $color-over);
}
@if $inner-border-color-focus == null {
$inner-border-color-focus: button-toolbar-inner-border-color-focus($background-color-focus, $color-focus);
}
@if $inner-border-color-pressed == null {
$inner-border-color-pressed: button-toolbar-inner-border-color-pressed($background-color-pressed, $color-pressed);
}
@if $inner-border-color-focus-over == null {
$inner-border-color-focus-over: button-toolbar-inner-border-color-focus-over($background-color-focus-over, $color-focus-over);
}
@if $inner-border-color-focus-pressed == null {
$inner-border-color-focus-pressed: button-toolbar-inner-border-color-focus-pressed($background-color-focus-pressed, $color-focus-pressed)
}
@if $inner-border-color-disabled == null {
$inner-border-color-disabled: button-toolbar-inner-border-color-disabled($background-color-disabled, $color-disabled);
}
}
@if $font-size == null {
$font-size: $button-small-font-size;
@if $font-size-over == null {
$font-size-over: $button-small-font-size-over;
}
@if $font-size-focus == null {
$font-size-focus: $button-small-font-size-focus;
}
@if $font-size-pressed == null {
$font-size-pressed: $button-small-font-size-pressed;
}
@if $font-size-focus-over == null {
$font-size-focus-over: $button-small-font-size-focus-over;
}
@if $font-size-focus-pressed == null {
$font-size-focus-pressed: $button-small-font-size-focus-pressed;
}
@if $font-size-disabled == null {
$font-size-disabled: $button-small-font-size-disabled;
}
} @else {
@if $font-size-over == null {
$font-size-over: $font-size;
}
@if $font-size-focus == null {
$font-size-focus: $font-size;
}
@if $font-size-pressed == null {
$font-size-pressed: $font-size;
}
@if $font-size-focus-over == null {
$font-size-focus-over: $font-size-over;
}
@if $font-size-focus-pressed == null {
$font-size-focus-pressed: $font-size-pressed;
}
@if $font-size-disabled == null {
$font-size-disabled: $font-size;
}
}
@if $font-weight == null {
$font-weight: $button-small-font-weight;
@if $font-weight-over == null {
$font-weight-over: $button-small-font-weight-over;
}
@if $font-weight-focus == null {
$font-weight-focus: $button-small-font-weight-focus;
}
@if $font-weight-pressed == null {
$font-weight-pressed: $button-small-font-weight-pressed;
}
@if $font-weight-focus-over == null {
$font-weight-focus-over: $button-small-font-weight-focus-over;
}
@if $font-weight-focus-pressed == null {
$font-weight-focus-pressed: $button-small-font-weight-focus-pressed;
}
@if $font-weight-disabled == null {
$font-weight-disabled: $button-small-font-weight-disabled;
}
} @else {
@if $font-weight-over == null {
$font-weight-over: $font-weight;
}
@if $font-weight-focus == null {
$font-weight-focus: $font-weight;
}
@if $font-weight-pressed == null {
$font-weight-pressed: $font-weight;
}
@if $font-weight-focus-over == null {
$font-weight-focus-over: $font-weight-over;
}
@if $font-weight-focus-pressed == null {
$font-weight-focus-pressed: $font-weight-pressed;
}
@if $font-weight-disabled == null {
$font-weight-disabled: $font-weight;
}
}
@if $font-family == null {
$font-family: $button-small-font-family;
@if $font-family-over == null {
$font-family-over: $button-small-font-family-over;
}
@if $font-family-focus == null {
$font-family-focus: $button-small-font-family-focus;
}
@if $font-family-pressed == null {
$font-family-pressed: $button-small-font-family-pressed;
}
@if $font-family-focus-over == null {
$font-family-focus-over: $button-small-font-family-focus-over;
}
@if $font-family-focus-pressed == null {
$font-family-focus-pressed: $button-small-font-family-focus-pressed;
}
@if $font-family-disabled == null {
$font-family-disabled: $button-small-font-family-disabled;
}
} @else {
@if $font-family-over == null {
$font-family-over: $font-family;
}
@if $font-family-focus == null {
$font-family-focus: $font-family;
}
@if $font-family-pressed == null {
$font-family-pressed: $font-family;
}
@if $font-family-focus-over == null {
$font-family-focus-over: $font-family-over;
}
@if $font-family-focus-pressed == null {
$font-family-focus-pressed: $font-family-pressed;
}
@if $font-family-disabled == null {
$font-family-disabled: $font-family;
}
}
@include extjs-button-ui(
$ui: '#{$ui}-toolbar-small',
$border-radius: $border-radius,
$border-width: $border-width,
$border-color: $border-color,
$border-color-over: $border-color-over,
$border-color-focus: $border-color-focus,
$border-color-pressed: $border-color-pressed,
$border-color-focus-over: $border-color-focus-over,
$border-color-focus-pressed: $border-color-focus-pressed,
$border-color-disabled: $border-color-disabled,
$padding: $padding,
$text-padding: $text-padding,
$background-color: $background-color,
$background-color-over: $background-color-over,
$background-color-focus: $background-color-focus,
$background-color-pressed: $background-color-pressed,
$background-color-focus-over: $background-color-focus-over,
$background-color-focus-pressed: $background-color-focus-pressed,
$background-color-disabled: $background-color-disabled,
$background-gradient: $background-gradient,
$background-gradient-over: $background-gradient-over,
$background-gradient-focus: $background-gradient-focus,
$background-gradient-pressed: $background-gradient-pressed,
$background-gradient-focus-over: $background-gradient-focus-over,
$background-gradient-focus-pressed: $background-gradient-focus-pressed,
$background-gradient-disabled: $background-gradient-disabled,
$color: $color,
$color-over: $color-over,
$color-focus: $color-focus,
$color-pressed: $color-pressed,
$color-focus-over: $color-focus-over,
$color-focus-pressed: $color-focus-pressed,
$color-disabled: $color-disabled,
$inner-border-width: $inner-border-width,
$inner-border-width-over: $inner-border-width-over,
$inner-border-width-focus: $inner-border-width-focus,
$inner-border-width-pressed: $inner-border-width-pressed,
$inner-border-width-focus-over: $inner-border-width-focus-over,
$inner-border-width-focus-pressed: $inner-border-width-focus-pressed,
$inner-border-width-disabled: $inner-border-width-disabled,
$inner-border-color: $inner-border-color,
$inner-border-color-over: $inner-border-color-over,
$inner-border-color-focus: $inner-border-color-focus,
$inner-border-color-pressed: $inner-border-color-pressed,
$inner-border-color-focus-over: $inner-border-color-focus-over,
$inner-border-color-focus-pressed: $inner-border-color-focus-pressed,
$inner-border-color-disabled: $inner-border-color-disabled,
$body-outline-width-focus: $body-outline-width-focus,
$body-outline-style-focus: $body-outline-style-focus,
$body-outline-color-focus: $body-outline-color-focus,
$font-size: $font-size,
$font-size-over: $font-size-over,
$font-size-focus: $font-size-focus,
$font-size-pressed: $font-size-pressed,
$font-size-focus-over: $font-size-focus-over,
$font-size-focus-pressed: $font-size-focus-pressed,
$font-size-disabled: $font-size-disabled,
$font-weight: $font-weight,
$font-weight-over: $font-weight-over,
$font-weight-focus: $font-weight-focus,
$font-weight-pressed: $font-weight-pressed,
$font-weight-focus-over: $font-weight-focus-over,
$font-weight-focus-pressed: $font-weight-focus-pressed,
$font-weight-disabled: $font-weight-disabled,
$font-family: $font-family,
$font-family-over: $font-family-over,
$font-family-focus: $font-family-focus,
$font-family-pressed: $font-family-pressed,
$font-family-focus-over: $font-family-focus-over,
$font-family-focus-pressed: $font-family-focus-pressed,
$font-family-disabled: $font-family-disabled,
$line-height: $line-height,
$icon-size: $icon-size,
$glyph-font-size: $glyph-font-size,
$icon-spacing: $icon-spacing,
$glyph-color: $glyph-color,
$glyph-opacity: $glyph-opacity,
$arrow-width: $arrow-width,
$arrow-height: $arrow-height,
$arrow-glyph: $arrow-glyph,
$arrow-glyph-color: $arrow-glyph-color,
$split-width: $split-width,
$split-height: $split-height,
$split-line-width: $split-line-width,
$split-line-color: $split-line-color,
$include-ui-menu-arrows: $include-ui-menu-arrows,
$include-ui-split-arrows: $include-ui-split-arrows,
$include-split-noline-arrows: $include-split-noline-arrows,
$include-split-over-arrows: $include-split-over-arrows,
$opacity-disabled: $opacity-disabled,
$inner-opacity-disabled: $inner-opacity-disabled
);
}
/**
* Creates a visual theme for a {@link #scale medium} Button.
*
* @param {string} $ui
* The name of the UI being created. Can not included spaces or special punctuation
* (used in CSS class names).
*
* @param {number} [$border-radius=$button-medium-border-radius]
* The border-radius of the button
*
* @param {number} [$border-width=$button-medium-border-width]
* The border-width of the button
*
* @param {color} [$border-color=$button-default-border-color]
* The border-color of the button
*
* @param {color} [$border-color-over=$button-default-border-color-over]
* The border-color of the button when the cursor is over the button
*
* @param {color} [$border-color-focus=$button-default-border-color-focus]
* The border-color of the button when focused
*
* @param {color} [$border-color-pressed=$button-default-border-color-pressed]
* The border-color of the button when pressed
*
* @param {color} [$border-color-focus-over=$button-default-border-color-focus-over]
* The border-color of the button when the button is focused and the cursor is over the
* button
*
* @param {color} [$border-color-focus-pressed=$button-default-border-color-focus-pressed]
* The border-color of the button when focused and pressed
*
* @param {color} [$border-color-disabled=$button-default-border-color-disabled]
* The border-color of the button when disabled
*
* @param {number} [$padding=$button-medium-padding]
* The amount of padding inside the border of the button on all sides
*
* @param {number} [$text-padding=$button-medium-text-padding]
* The amount of horizontal space to add to the left and right of the button text
*
* @param {color} [$background-color=$button-default-background-color]
* The background-color of the button
*
* @param {color} [$background-color-over=$button-default-background-color-over]
* The background-color of the button when the cursor is over the button
*
* @param {color} [$background-color-focus=$button-default-background-color-focus]
* The background-color of the button when focused
*
* @param {color} [$background-color-pressed=$button-default-background-color-pressed]
* The background-color of the button when pressed
*
* @param {color} [$background-color-focus-over=$button-default-background-color-focus-over]
* The background-color of the button when the button is focused and the cursor is over
* the button
*
* @param {color} [$background-color-focus-pressed=$button-default-background-color-focus-pressed]
* The background-color of the button when focused and pressed
*
* @param {color} [$background-color-disabled=$button-default-background-color-disabled]
* The background-color of the button when disabled
*
* @param {string/list} [$background-gradient=$button-default-background-gradient]
* The background-gradient for the button. 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} [$background-gradient-over=$button-default-background-gradient-over]
* The background-gradient to use when the cursor is over the button. 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} [$background-gradient-focus=$button-default-background-gradient-focus]
* The background-gradient to use when the the button is 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} [$background-gradient-pressed=$button-default-background-gradient-pressed]
* The background-gradient to use when the the button is pressed. 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} [$background-gradient-focus-over=$button-default-background-gradient-focus-over]
* The background-gradient to use when the the button is focused and the cursor is over
* the button. 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} [$background-gradient-focus-pressed=$button-default-background-gradient-focus-pressed]
* The background-gradient to use when the the button is focused and pressed. 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} [$background-gradient-disabled=$button-default-background-gradient-disabled]
* The background-gradient to use when the the button is disabled. 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 {color} [$color=$button-default-color]
* The text color of the button
*
* @param {color} [$color-over=$button-default-color-over]
* The text color of the button when the cursor is over the button
*
* @param {color} [$color-focus=$button-default-color-focus]
* The text color of the button when the button is focused
*
* @param {color} [$color-pressed=$button-default-color-pressed]
* The text color of the button when the button is pressed
*
* @param {color} [$color-focus-over=$button-default-color-focus-over]
* The text color of the button when the button is focused and the cursor is over the button
*
* @param {color} [$color-focus-pressed=$button-default-color-focus-pressed]
* The text color of the button when the button is focused and pressed
*
* @param {color} [$color-disabled=$button-default-color-disabled]
* The text color of the button when the button is disabled
*
* @param {number/list} [$inner-border-width=$button-default-inner-border-width]
* The inner border-width of the button
*
* @param {number/list} [$inner-border-width-over=$button-default-inner-border-width-over]
* The inner border-width of the button when the cursor is over the button
*
* @param {number/list} [$inner-border-width-focus=$button-default-inner-border-width-focus]
* The inner border-width of the button when focused
*
* @param {number/list} [$inner-border-width-pressed=$button-default-inner-border-width-pressed]
* The inner border-width of the button when pressed
*
* @param {number/list} [$inner-border-width-focus-over=$button-default-inner-border-width-focus-over]
* The inner border-width of the button when the button is focused and the cursor is over
* the button
*
* @param {number/list} [$inner-border-width-focus-pressed=$button-default-inner-border-width-focus-pressed]
* The inner border-width of the button when focused and pressed
*
* @param {number/list} [$inner-border-width-disabled=$button-default-inner-border-width-disabled]
* The inner border-width of the button when disabled
*
* @param {color} [$inner-border-color=$button-default-inner-border-color]
* The inner border-color of the button
*
* @param {color} [$inner-border-color-over=$button-default-inner-border-color-over]
* The inner border-color of the button when the cursor is over the button
*
* @param {color} [$inner-border-color-focus=$button-default-inner-border-color-focus]
* The inner border-color of the button when focused
*
* @param {color} [$inner-border-color-pressed=$button-default-inner-border-color-pressed]
* The inner border-color of the button when pressed
*
* @param {color} [$inner-border-color-focus-over=$button-default-inner-border-color-focus-over]
* The inner border-color of the button when the button is focused and the cursor is over
* the button
*
* @param {color} [$inner-border-color-focus-pressed=$button-default-inner-border-color-focus-pressed]
* The inner border-color of the button when focused and pressed
*
* @param {color} [$inner-border-color-disabled=$button-default-inner-border-color-disabled]
* The inner border-color of the button when disabled
*
* @param {number} [$body-outline-width-focus=$button-default-body-outline-width-focus]
* The body outline width of the button when focused
*
* @param {number} [$body-outline-style-focus=$button-default-body-outline-style-focus]
* The body outline-style of the button when focused
*
* @param {number} [$body-outline-color-focus=$button-default-body-outline-color-focus]
* The body outline color of the button when focused
*
* @param {number} [$font-size=$button-medium-font-size]
* The font-size of the button
*
* @param {number} [$font-size-over=$button-medium-font-size-over]
* The font-size of the button when the cursor is over the button
*
* @param {number} [$font-size-focus=$button-medium-font-size-focus]
* The font-size of the button when the button is focused
*
* @param {number} [$font-size-pressed=$button-medium-font-size-pressed]
* The font-size of the button when the button is pressed
*
* @param {number} [$font-size-focus-over=$button-medium-font-size-focus-over]
* The font-size of the button when the button is focused and the cursor is over the
* button
*
* @param {number} [$font-size-focus-pressed=$button-medium-font-size-focus-pressed]
* The font-size of the button when the button is focused and pressed
*
* @param {number} [$font-size-disabled=$button-medium-font-size-disabled]
* The font-size of the button when the button is disabled
*
* @param {string} [$font-weight=$button-medium-font-weight]
* The font-weight of the button
*
* @param {string} [$font-weight-over=$button-medium-font-weight-over]
* The font-weight of the button when the cursor is over the button
*
* @param {string} [$font-weight-focus=$button-medium-font-weight-focus]
* The font-weight of the button when the button is focused
*
* @param {string} [$font-weight-pressed=$button-medium-font-weight-pressed]
* The font-weight of the button when the button is pressed
*
* @param {string} [$font-weight-focus-over=$button-medium-font-weight-focus-over]
* The font-weight of the button when the button is focused and the cursor is over the
* button
*
* @param {string} [$font-weight-focus-pressed=$button-medium-font-weight-focus-pressed]
* The font-weight of the button when the button is focused and pressed
*
* @param {string} [$font-weight-disabled=$button-medium-font-weight-disabled]
* The font-weight of the button when the button is disabled
*
* @param {string} [$font-family=$button-medium-font-family]
* The font-family of the button
*
* @param {string} [$font-family-over=$button-medium-font-family-over]
* The font-family of the button when the cursor is over the button
*
* @param {string} [$font-family-focus=$button-medium-font-family-focus]
* The font-family of the button when the button is focused
*
* @param {string} [$font-family-pressed=$button-medium-font-family-pressed]
* The font-family of the button when the button is pressed
*
* @param {string} [$font-family-focus-over=$button-medium-font-family-focus-over]
* The font-family of the button when the button is focused and the cursor is over the
* button
*
* @param {string} [$font-family-focus-pressed=$button-medium-font-family-focus-pressed]
* The font-family of the button when the button is focused and pressed
*
* @param {string} [$font-family-disabled=$button-medium-font-family-disabled]
* The font-family of the button when the button is disabled
*
* @param {number} [$line-height=$button-medium-line-height]
* The line-height of the button text
*
* @param {number} [$icon-size=$button-medium-icon-size]
* The size of the button icon
*
* @param {number} [$glyph-font-size=$button-medium-glyph-font-size]
* The font-size for the button glyph
*
* @param {number} [$icon-spacing=$button-medium-icon-spacing]
* The space between the button's icon and text
*
* @param {color} [$glyph-color=$button-default-glyph-color]
* The color of the button's {@link #glyph} icon
*
* @param {number} [$glyph-opacity=$button-default-glyph-opacity]
* The opacity of the button's {@link #glyph} icon
*
* @param {number} [$arrow-width=$button-medium-arrow-width]
* The width of the button's {@link #cfg-menu} arrow
*
* @param {number} [$arrow-height=$button-medium-arrow-height]
* The height of the button's {@link #cfg-menu} arrow
*
* @param {string/list} [$arrow-glyph=$button-medium-arrow-glyph]
* Glyph for the button arrow when when {@link Global_CSS#$enable-font-icons} is `true`.
*
* @param {string/list} [$arrow-glyph-color=$button-default-arrow-glyph-color]
* Glyph color for the button arrow when when {@link Global_CSS#$enable-font-icons} is `true`.
*
* @param {number} [$split-width=$button-medium-split-width]
* The width of a {@link Ext.button.Split Split Button}'s arrow
*
* @param {number} [$split-height=$button-medium-split-height]
* The height of a {@link Ext.button.Split Split Button}'s arrow
*
* @param {number} [$split-line-width=$button-medium-split-line-width]
* The default width for a {@link Ext.button.Split Split Button}'s line.
* Themes that include the line in the arrow background image should set this to 0
*
* @param {color} [$split-line-color=$button-default-split-line-color]
* The color for a {@link Ext.button.Split Split Button}'s line.
* Only applicable when `$split-line-width` is greater than 0.
*
* @param {boolean} [$include-ui-menu-arrows=$button-include-ui-menu-arrows]
* True to include the UI name in the file name of the {@link #cfg-menu}
* arrow icon. Set this to false to share the same arrow bewteen multiple UIs.
*
* @param {boolean} [$include-ui-split-arrows=$button-include-ui-split-arrows]
* True to include the UI name in the file name of the {@link Ext.button.Split Split Button}'s
* arrow icon. Set this to false to share the same arrow bewteen multiple UIs.
*
* @param {boolean} [$include-split-noline-arrows=$button-include-split-noline-arrows]
* True to add a "-noline" suffix to the file name of the {@link Ext.button.Split Split Button}'s
* arrow icon. Used for hiding the split line when toolbar buttons are in their default
* state.
*
* @param {boolean} [$include-split-over-arrows=$button-include-split-over-arrows]
* True to use a separate icon for {@link Ext.button.Split Split Button}s when the cursor
* is over the button. The over icon file name will have a "-o" suffix
*
* @param {number} [$opacity-disabled=$button-opacity-disabled]
* The opacity of the button when it is disabled
*
* @param {number} [$inner-opacity-disabled=$button-inner-opacity-disabled]
* The opacity of the button's text and icon elements when when the button is disabled
*
* @member Ext.button.Button
*/
@mixin extjs-button-medium-ui(
$ui,
$border-radius: $button-medium-border-radius,
$border-width: $button-medium-border-width,
$border-color: null,
$border-color-over: null,
$border-color-focus: null,
$border-color-pressed: null,
$border-color-focus-over: null,
$border-color-focus-pressed: null,
$border-color-disabled: null,
$padding: $button-medium-padding,
$text-padding: $button-medium-text-padding,
$background-color: null,
$background-color-over: null,
$background-color-focus: null,
$background-color-pressed: null,
$background-color-focus-over: null,
$background-color-focus-pressed: null,
$background-color-disabled: null,
$background-gradient: $button-default-background-gradient,
$background-gradient-over: $button-default-background-gradient-over,
$background-gradient-focus: $button-default-background-gradient-focus,
$background-gradient-pressed: $button-default-background-gradient-pressed,
$background-gradient-focus-over: $button-default-background-gradient-focus-over,
$background-gradient-focus-pressed: $button-default-background-gradient-focus-pressed,
$background-gradient-disabled: $button-default-background-gradient-disabled,
$color: null,
$color-over: null,
$color-focus: null,
$color-pressed: null,
$color-focus-over: null,
$color-focus-pressed: null,
$color-disabled: null,
$inner-border-width: null,
$inner-border-width-over: null,
$inner-border-width-focus: null,
$inner-border-width-pressed: null,
$inner-border-width-focus-over: null,
$inner-border-width-focus-pressed: null,
$inner-border-width-disabled: null,
$inner-border-color: null,
$inner-border-color-over: null,
$inner-border-color-focus: null,
$inner-border-color-pressed: null,
$inner-border-color-focus-over: null,
$inner-border-color-focus-pressed: null,
$inner-border-color-disabled: null,
$body-outline-width-focus: $button-default-body-outline-width-focus,
$body-outline-style-focus: $button-default-body-outline-style-focus,
$body-outline-color-focus: $button-default-body-outline-color-focus,
$font-size: null,
$font-size-over: null,
$font-size-focus: null,
$font-size-pressed: null,
$font-size-focus-over: null,
$font-size-focus-pressed: null,
$font-size-disabled: null,
$font-weight: null,
$font-weight-over: null,
$font-weight-focus: null,
$font-weight-pressed: null,
$font-weight-focus-over: null,
$font-weight-focus-pressed: null,
$font-weight-disabled: null,
$font-family: null,
$font-family-over: null,
$font-family-focus: null,
$font-family-pressed: null,
$font-family-focus-over: null,
$font-family-focus-pressed: null,
$font-family-disabled: null,
$line-height: $button-medium-line-height,
$icon-size: $button-medium-icon-size,
$glyph-font-size: $button-medium-glyph-font-size,
$icon-spacing: $button-medium-icon-spacing,
$glyph-color: $button-default-glyph-color,
$glyph-opacity: $button-default-glyph-opacity,
$arrow-width: $button-medium-arrow-width,
$arrow-height: $button-medium-arrow-height,
$arrow-glyph: $button-medium-arrow-glyph,
$arrow-glyph-color: $button-default-arrow-glyph-color,
$split-width: $button-medium-split-width,
$split-height: $button-medium-split-height,
$split-line-width: $button-medium-split-line-width,
$split-line-color: $button-default-split-line-color,
$include-ui-menu-arrows: $button-include-ui-menu-arrows,
$include-ui-split-arrows: $button-include-ui-split-arrows,
$include-split-noline-arrows: $button-include-split-noline-arrows,
$include-split-over-arrows: $button-include-split-over-arrows,
$opacity-disabled: $button-opacity-disabled,
$inner-opacity-disabled: $button-inner-opacity-disabled
) {
@if $border-color == null {
$border-color: $button-default-border-color;
@if $border-color-over == null {
$border-color-over: $button-default-border-color-over;
}
@if $border-color-focus == null {
$border-color-focus: $button-default-border-color-focus;
}
@if $border-color-pressed == null {
$border-color-pressed: $button-default-border-color-pressed;
}
@if $border-color-focus-over == null {
$border-color-focus-over: $button-default-border-color-focus-over;
}
@if $border-color-focus-pressed == null {
$border-color-focus-pressed: $button-default-border-color-focus-pressed;
}
@if $border-color-disabled == null {
$border-color-disabled: $button-default-border-color-disabled;
}
} @else {
@if $border-color-over == null {
$border-color-over: button-default-border-color-over($border-color);
}
@if $border-color-focus == null {
$border-color-focus: button-default-border-color-focus($border-color);
}
@if $border-color-pressed == null {
$border-color-pressed: button-default-border-color-pressed($border-color);
}
@if $border-color-focus-over == null {
$border-color-focus-over: $border-color-over;
}
@if $border-color-focus-pressed == null {
$border-color-focus-pressed: $border-color-pressed;
}
@if $border-color-disabled == null {
$border-color-disabled: button-default-border-color-disabled($border-color);
}
}
@if $background-color == null {
$background-color: $button-default-background-color;
@if $background-color-over == null {
$background-color-over: $button-default-background-color-over;
}
@if $background-color-focus == null {
$background-color-focus: $button-default-background-color-focus;
}
@if $background-color-pressed == null {
$background-color-pressed: $button-default-background-color-pressed;
}
@if $background-color-focus-over == null {
$background-color-focus-over: $button-default-background-color-focus-over;
}
@if $background-color-focus-pressed == null {
$background-color-focus-pressed: $button-default-background-color-focus-pressed;
}
@if $background-color-disabled == null {
$background-color-disabled: $button-default-background-color-disabled;
}
} @else {
@if $background-color-over == null {
$background-color-over: button-default-background-color-over($background-color);
}
@if $background-color-focus == null {
$background-color-focus: button-default-background-color-focus($background-color);
}
@if $background-color-pressed == null {
$background-color-pressed: button-default-background-color-pressed($background-color);
}
@if $background-color-focus-over == null {
$background-color-focus-over: $background-color-over;
}
@if $background-color-focus-pressed == null {
$background-color-focus-pressed: $background-color-pressed;
}
@if $background-color-disabled == null {
$background-color-disabled: button-default-background-color-disabled($background-color);
}
}
@if $color == null {
$color: $button-default-color;
@if $color-over == null {
$color-over: $button-default-color-over;
}
@if $color-focus == null {
$color-focus: $button-default-color-focus;
}
@if $color-pressed == null {
$color-pressed: $button-default-color-pressed;
}
@if $color-focus-over == null {
$color-focus-over: $button-default-color-focus-over;
}
@if $color-focus-pressed == null {
$color-focus-pressed: $button-default-color-focus-pressed;
}
@if $color-disabled == null {
$color-disabled: $button-default-color-disabled;
}
} @else {
@if $color-over == null {
$color-over: button-default-color-over($color);
}
@if $color-focus == null {
$color-focus: button-default-color-focus($color);
}
@if $color-pressed == null {
$color-pressed: button-default-color-pressed($color);
}
@if $color-focus-over == null {
$color-focus-over: $color-over;
}
@if $color-focus-pressed == null {
$color-focus-pressed: $color-pressed;
}
@if $color-disabled == null {
$color-disabled: button-default-color-disabled($color);
}
}
@if $inner-border-width == null {
$inner-border-width: $button-default-inner-border-width;
@if $inner-border-width-over == null {
$inner-border-width-over: $button-default-inner-border-width-over;
}
@if $inner-border-width-focus == null {
$inner-border-width-focus: $button-default-inner-border-width-focus;
}
@if $inner-border-width-pressed == null {
$inner-border-width-pressed: $button-default-inner-border-width-pressed;
}
@if $inner-border-width-focus-over == null {
$inner-border-width-focus-over: $button-default-inner-border-width-focus-over;
}
@if $inner-border-width-focus-pressed == null {
$inner-border-width-focus-pressed: $button-default-inner-border-width-focus-pressed;
}
@if $inner-border-width-disabled == null {
$inner-border-width-disabled: $button-default-inner-border-width-disabled;
}
} @else {
@if $inner-border-width-over == null {
$inner-border-width-over: $inner-border-width;
}
@if $inner-border-width-focus == null {
$inner-border-width-focus: $inner-border-width;
}
@if $inner-border-width-pressed == null {
$inner-border-width-pressed: $inner-border-width;
}
@if $inner-border-width-focus-over == null {
$inner-border-width-focus-over: $inner-border-width-over;
}
@if $inner-border-width-focus-pressed == null {
$inner-border-width-focus-pressed: $inner-border-width-pressed;
}
@if $inner-border-width-disabled == null {
$inner-border-width-disabled: $inner-border-width;
}
}
@if $inner-border-color == null {
$inner-border-color: $button-default-inner-border-color;
@if $inner-border-color-over == null {
$inner-border-color-over: $button-default-inner-border-color-over;
}
@if $inner-border-color-focus == null {
$inner-border-color-focus: $button-default-inner-border-color-focus;
}
@if $inner-border-color-pressed == null {
$inner-border-color-pressed: $button-default-inner-border-color-pressed;
}
@if $inner-border-color-focus-over == null {
$inner-border-color-focus-over: $button-default-inner-border-color-focus-over;
}
@if $inner-border-color-focus-pressed == null {
$inner-border-color-focus-pressed: $button-default-inner-border-color-focus-pressed;
}
@if $inner-border-color-disabled == null {
$inner-border-color-disabled: $button-default-inner-border-color-disabled;
}
} @else {
@if $inner-border-color-over == null {
$inner-border-color-over: button-default-inner-border-color-over($background-color-over, $color-over);
}
@if $inner-border-color-focus == null {
$inner-border-color-focus: button-default-inner-border-color-focus($background-color-focus, $color-focus);
}
@if $inner-border-color-pressed == null {
$inner-border-color-pressed: button-default-inner-border-color-pressed($background-color-pressed, $color-pressed);
}
@if $inner-border-color-focus-over == null {
$inner-border-color-focus-over: button-default-inner-border-color-focus-over($background-color-focus-over, $color-focus-over);
}
@if $inner-border-color-focus-pressed == null {
$inner-border-color-focus-pressed: button-default-inner-border-color-focus-pressed($background-color-focus-pressed, $color-focus-pressed);
}
@if $inner-border-color-disabled == null {
$inner-border-color-disabled: button-default-inner-border-color-disabled($background-color-disabled, $color-disabled);
}
}
@if $font-size == null {
$font-size: $button-medium-font-size;
@if $font-size-over == null {
$font-size-over: $button-medium-font-size-over;
}
@if $font-size-focus == null {
$font-size-focus: $button-medium-font-size-focus;
}
@if $font-size-pressed == null {
$font-size-pressed: $button-medium-font-size-pressed;
}
@if $font-size-focus-over == null {
$font-size-focus-over: $button-medium-font-size-focus-over;
}
@if $font-size-focus-pressed == null {
$font-size-focus-pressed: $button-medium-font-size-focus-pressed;
}
@if $font-size-disabled == null {
$font-size-disabled: $button-medium-font-size-disabled;
}
} @else {
@if $font-size-over == null {
$font-size-over: $font-size;
}
@if $font-size-focus == null {
$font-size-focus: $font-size;
}
@if $font-size-pressed == null {
$font-size-pressed: $font-size;
}
@if $font-size-focus-over == null {
$font-size-focus-over: $font-size-over;
}
@if $font-size-focus-pressed == null {
$font-size-focus-pressed: $font-size-pressed;
}
@if $font-size-disabled == null {
$font-size-disabled: $font-size;
}
}
@if $font-weight == null {
$font-weight: $button-medium-font-weight;
@if $font-weight-over == null {
$font-weight-over: $button-medium-font-weight-over;
}
@if $font-weight-focus == null {
$font-weight-focus: $button-medium-font-weight-focus;
}
@if $font-weight-pressed == null {
$font-weight-pressed: $button-medium-font-weight-pressed;
}
@if $font-weight-focus-over == null {
$font-weight-focus-over: $button-medium-font-weight-focus-over;
}
@if $font-weight-focus-pressed == null {
$font-weight-focus-pressed: $button-medium-font-weight-focus-pressed;
}
@if $font-weight-disabled == null {
$font-weight-disabled: $button-medium-font-weight-disabled;
}
} @else {
@if $font-weight-over == null {
$font-weight-over: $font-weight;
}
@if $font-weight-focus == null {
$font-weight-focus: $font-weight;
}
@if $font-weight-pressed == null {
$font-weight-pressed: $font-weight;
}
@if $font-weight-focus-over == null {
$font-weight-focus-over: $font-weight-over;
}
@if $font-weight-focus-pressed == null {
$font-weight-focus-pressed: $font-weight-pressed;
}
@if $font-weight-disabled == null {
$font-weight-disabled: $font-weight;
}
}
@if $font-family == null {
$font-family: $button-medium-font-family;
@if $font-family-over == null {
$font-family-over: $button-medium-font-family-over;
}
@if $font-family-focus == null {
$font-family-focus: $button-medium-font-family-focus;
}
@if $font-family-pressed == null {
$font-family-pressed: $button-medium-font-family-pressed;
}
@if $font-family-focus-over == null {
$font-family-focus-over: $button-medium-font-family-focus-over;
}
@if $font-family-focus-pressed == null {
$font-family-focus-pressed: $button-medium-font-family-focus-pressed;
}
@if $font-family-disabled == null {
$font-family-disabled: $button-medium-font-family-disabled;
}
} @else {
@if $font-family-over == null {
$font-family-over: $font-family;
}
@if $font-family-focus == null {
$font-family-focus: $font-family;
}
@if $font-family-pressed == null {
$font-family-pressed: $font-family;
}
@if $font-family-focus-over == null {
$font-family-focus-over: $font-family-over;
}
@if $font-family-focus-pressed == null {
$font-family-focus-pressed: $font-family-pressed;
}
@if $font-family-disabled == null {
$font-family-disabled: $font-family;
}
}
@include extjs-button-ui(
$ui: '#{$ui}-medium',
$border-radius: $border-radius,
$border-width: $border-width,
$border-color: $border-color,
$border-color-over: $border-color-over,
$border-color-focus: $border-color-focus,
$border-color-pressed: $border-color-pressed,
$border-color-focus-over: $border-color-focus-over,
$border-color-focus-pressed: $border-color-focus-pressed,
$border-color-disabled: $border-color-disabled,
$padding: $padding,
$text-padding: $text-padding,
$background-color: $background-color,
$background-color-over: $background-color-over,
$background-color-focus: $background-color-focus,
$background-color-pressed: $background-color-pressed,
$background-color-focus-over: $background-color-focus-over,
$background-color-focus-pressed: $background-color-focus-pressed,
$background-color-disabled: $background-color-disabled,
$background-gradient: $background-gradient,
$background-gradient-over: $background-gradient-over,
$background-gradient-focus: $background-gradient-focus,
$background-gradient-pressed: $background-gradient-pressed,
$background-gradient-focus-over: $background-gradient-focus-over,
$background-gradient-focus-pressed: $background-gradient-focus-pressed,
$background-gradient-disabled: $background-gradient-disabled,
$color: $color,
$color-over: $color-over,
$color-focus: $color-focus,
$color-pressed: $color-pressed,
$color-focus-over: $color-focus-over,
$color-focus-pressed: $color-focus-pressed,
$color-disabled: $color-disabled,
$inner-border-width: $inner-border-width,
$inner-border-width-over: $inner-border-width-over,
$inner-border-width-focus: $inner-border-width-focus,
$inner-border-width-pressed: $inner-border-width-pressed,
$inner-border-width-focus-over: $inner-border-width-focus-over,
$inner-border-width-focus-pressed: $inner-border-width-focus-pressed,
$inner-border-width-disabled: $inner-border-width-disabled,
$inner-border-color: $inner-border-color,
$inner-border-color-over: $inner-border-color-over,
$inner-border-color-focus: $inner-border-color-focus,
$inner-border-color-pressed: $inner-border-color-pressed,
$inner-border-color-focus-over: $inner-border-color-focus-over,
$inner-border-color-focus-pressed: $inner-border-color-focus-pressed,
$inner-border-color-disabled: $inner-border-color-disabled,
$body-outline-width-focus: $body-outline-width-focus,
$body-outline-style-focus: $body-outline-style-focus,
$body-outline-color-focus: $body-outline-color-focus,
$font-size: $font-size,
$font-size-over: $font-size-over,
$font-size-focus: $font-size-focus,
$font-size-pressed: $font-size-pressed,
$font-size-focus-over: $font-size-focus-over,
$font-size-focus-pressed: $font-size-focus-pressed,
$font-size-disabled: $font-size-disabled,
$font-weight: $font-weight,
$font-weight-over: $font-weight-over,
$font-weight-focus: $font-weight-focus,
$font-weight-pressed: $font-weight-pressed,
$font-weight-focus-over: $font-weight-focus-over,
$font-weight-focus-pressed: $font-weight-focus-pressed,
$font-weight-disabled: $font-weight-disabled,
$font-family: $font-family,
$font-family-over: $font-family-over,
$font-family-focus: $font-family-focus,
$font-family-pressed: $font-family-pressed,
$font-family-focus-over: $font-family-focus-over,
$font-family-focus-pressed: $font-family-focus-pressed,
$font-family-disabled: $font-family-disabled,
$line-height: $line-height,
$icon-size: $icon-size,
$glyph-font-size: $glyph-font-size,
$icon-spacing: $icon-spacing,
$glyph-color: $glyph-color,
$glyph-opacity: $glyph-opacity,
$arrow-width: $arrow-width,
$arrow-height: $arrow-height,
$arrow-glyph: $arrow-glyph,
$arrow-glyph-color: $arrow-glyph-color,
$split-width: $split-width,
$split-height: $split-height,
$split-line-width: $split-line-width,
$split-line-color: $split-line-color,
$include-ui-menu-arrows: $include-ui-menu-arrows,
$include-ui-split-arrows: $include-ui-split-arrows,
$include-split-noline-arrows: $include-split-noline-arrows,
$include-split-over-arrows: $include-split-over-arrows,
$opacity-disabled: $opacity-disabled,
$inner-opacity-disabled: $inner-opacity-disabled
);
}
/**
* Creates a visual theme for a {@link #scale medium} toolbar Button.
*
* @param {string} $ui
* The name of the UI being created. Can not included spaces or special punctuation
* (used in CSS class names).
*
* @param {number} [$border-radius=$button-medium-border-radius]
* The border-radius of the button
*
* @param {number} [$border-width=$button-medium-border-width]
* The border-width of the button
*
* @param {color} [$border-color=$button-toolbar-border-color]
* The border-color of the button
*
* @param {color} [$border-color-over=$button-toolbar-border-color-over]
* The border-color of the button when the cursor is over the button
*
* @param {color} [$border-color-focus=$button-toolbar-border-color-focus]
* The border-color of the button when focused
*
* @param {color} [$border-color-pressed=$button-toolbar-border-color-pressed]
* The border-color of the button when pressed
*
* @param {color} [$border-color-focus-over=$button-toolbar-border-color-focus-over]
* The border-color of the button when the button is focused and the cursor is over the
* button
*
* @param {color} [$border-color-focus-pressed=$button-toolbar-border-color-focus-pressed]
* The border-color of the button when focused and pressed
*
* @param {color} [$border-color-disabled=$button-toolbar-border-color-disabled]
* The border-color of the button when disabled
*
* @param {number} [$padding=$button-medium-padding]
* The amount of padding inside the border of the button on all sides
*
* @param {number} [$text-padding=$button-medium-text-padding]
* The amount of horizontal space to add to the left and right of the button text
*
* @param {color} [$background-color=$button-toolbar-background-color]
* The background-color of the button
*
* @param {color} [$background-color-over=$button-toolbar-background-color-over]
* The background-color of the button when the cursor is over the button
*
* @param {color} [$background-color-focus=$button-toolbar-background-color-focus]
* The background-color of the button when focused
*
* @param {color} [$background-color-pressed=$button-toolbar-background-color-pressed]
* The background-color of the button when pressed
*
* @param {color} [$background-color-focus-over=$button-toolbar-background-color-focus-over]
* The background-color of the button when the button is focused and the cursor is over
* the button
*
* @param {color} [$background-color-focus-pressed=$button-toolbar-background-color-focus-pressed]
* The background-color of the button when focused and pressed
*
* @param {color} [$background-color-disabled=$button-toolbar-background-color-disabled]
* The background-color of the button when disabled
*
* @param {string/list} [$background-gradient=$button-toolbar-background-gradient]
* The background-gradient for the button. 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} [$background-gradient-over=$button-toolbar-background-gradient-over]
* The background-gradient to use when the cursor is over the button. 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} [$background-gradient-focus=$button-toolbar-background-gradient-focus]
* The background-gradient to use when the the button is 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} [$background-gradient-pressed=$button-toolbar-background-gradient-pressed]
* The background-gradient to use when the the button is pressed. 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} [$background-gradient-focus-over=$button-toolbar-background-gradient-focus-over]
* The background-gradient to use when the the button is focused and the cursor is over
* the button. 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} [$background-gradient-focus-pressed=$button-toolbar-background-gradient-focus-pressed]
* The background-gradient to use when the the button is focused and pressed. 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} [$background-gradient-disabled=$button-toolbar-background-gradient-disabled]
* The background-gradient to use when the the button is disabled. 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 {color} [$color=$button-toolbar-color]
* The text color of the button
*
* @param {color} [$color-over=$button-toolbar-color-over]
* The text color of the button when the cursor is over the button
*
* @param {color} [$color-focus=$button-toolbar-color-focus]
* The text color of the button when the button is focused
*
* @param {color} [$color-pressed=$button-toolbar-color-pressed]
* The text color of the button when the button is pressed
*
* @param {color} [$color-focus-over=$button-toolbar-color-focus-over]
* The text color of the button when the button is focused and the cursor is over the button
*
* @param {color} [$color-focus-pressed=$button-toolbar-color-focus-pressed]
* The text color of the button when the button is focused and pressed
*
* @param {color} [$color-disabled=$button-toolbar-color-disabled]
* The text color of the button when the button is disabled
*
* @param {number/list} [$inner-border-width=$button-toolbar-inner-border-width]
* The inner border-width of the button
*
* @param {number/list} [$inner-border-width-over=$button-toolbar-inner-border-width-over]
* The inner border-width of the button when the cursor is over the button
*
* @param {number/list} [$inner-border-width-focus=$button-toolbar-inner-border-width-focus]
* The inner border-width of the button when focused
*
* @param {number/list} [$inner-border-width-pressed=$button-toolbar-inner-border-width-pressed]
* The inner border-width of the button when pressed
*
* @param {number/list} [$inner-border-width-focus-over=$button-toolbar-inner-border-width-focus-over]
* The inner border-width of the button when the button is focused and the cursor is over
* the button
*
* @param {number/list} [$inner-border-width-focus-pressed=$button-toolbar-inner-border-width-focus-pressed]
* The inner border-width of the button when focused and pressed
*
* @param {number/list} [$inner-border-width-disabled=$button-toolbar-inner-border-width-disabled]
* The inner border-width of the button when disabled
*
* @param {color} [$inner-border-color=$button-toolbar-inner-border-color]
* The inner border-color of the button
*
* @param {color} [$inner-border-color-over=$button-toolbar-inner-border-color-over]
* The inner border-color of the button when the cursor is over the button
*
* @param {color} [$inner-border-color-focus=$button-toolbar-inner-border-color-focus]
* The inner border-color of the button when focused
*
* @param {color} [$inner-border-color-pressed=$button-toolbar-inner-border-color-pressed]
* The inner border-color of the button when pressed
*
* @param {color} [$inner-border-color-focus-over=$button-toolbar-inner-border-color-focus-over]
* The inner border-color of the button when the button is focused and the cursor is over
* the button
*
* @param {color} [$inner-border-color-focus-pressed=$button-toolbar-inner-border-color-focus-pressed]
* The inner border-color of the button when focused and pressed
*
* @param {color} [$inner-border-color-disabled=$button-toolbar-inner-border-color-disabled]
* The inner border-color of the button when disabled
*
* @param {number} [$body-outline-width-focus=$button-toolbar-body-outline-width-focus]
* The body outline width of the button when focused
*
* @param {number} [$body-outline-style-focus=$button-toolbar-body-outline-style-focus]
* The body outline-style of the button when focused
*
* @param {number} [$body-outline-color-focus=$button-toolbar-body-outline-color-focus]
* The body outline color of the button when focused
*
* @param {number} [$font-size=$button-medium-font-size]
* The font-size of the button
*
* @param {number} [$font-size-over=$button-medium-font-size-over]
* The font-size of the button when the cursor is over the button
*
* @param {number} [$font-size-focus=$button-medium-font-size-focus]
* The font-size of the button when the button is focused
*
* @param {number} [$font-size-pressed=$button-medium-font-size-pressed]
* The font-size of the button when the button is pressed
*
* @param {number} [$font-size-focus-over=$button-medium-font-size-focus-over]
* The font-size of the button when the button is focused and the cursor is over the
* button
*
* @param {number} [$font-size-focus-pressed=$button-medium-font-size-focus-pressed]
* The font-size of the button when the button is focused and pressed
*
* @param {number} [$font-size-disabled=$button-medium-font-size-disabled]
* The font-size of the button when the button is disabled
*
* @param {string} [$font-weight=$button-medium-font-weight]
* The font-weight of the button
*
* @param {string} [$font-weight-over=$button-medium-font-weight-over]
* The font-weight of the button when the cursor is over the button
*
* @param {string} [$font-weight-focus=$button-medium-font-weight-focus]
* The font-weight of the button when the button is focused
*
* @param {string} [$font-weight-pressed=$button-medium-font-weight-pressed]
* The font-weight of the button when the button is pressed
*
* @param {string} [$font-weight-focus-over=$button-medium-font-weight-focus-over]
* The font-weight of the button when the button is focused and the cursor is over the
* button
*
* @param {string} [$font-weight-focus-pressed=$button-medium-font-weight-focus-pressed]
* The font-weight of the button when the button is focused and pressed
*
* @param {string} [$font-weight-disabled=$button-medium-font-weight-disabled]
* The font-weight of the button when the button is disabled
*
* @param {string} [$font-family=$button-medium-font-family]
* The font-family of the button
*
* @param {string} [$font-family-over=$button-medium-font-family-over]
* The font-family of the button when the cursor is over the button
*
* @param {string} [$font-family-focus=$button-medium-font-family-focus]
* The font-family of the button when the button is focused
*
* @param {string} [$font-family-pressed=$button-medium-font-family-pressed]
* The font-family of the button when the button is pressed
*
* @param {string} [$font-family-focus-over=$button-medium-font-family-focus-over]
* The font-family of the button when the button is focused and the cursor is over the
* button
*
* @param {string} [$font-family-focus-pressed=$button-medium-font-family-focus-pressed]
* The font-family of the button when the button is focused and pressed
*
* @param {string} [$font-family-disabled=$button-medium-font-family-disabled]
* The font-family of the button when the button is disabled
*
* @param {number} [$line-height=$button-medium-line-height]
* The line-height of the button text
*
* @param {number} [$icon-size=$button-medium-icon-size]
* The size of the button icon
*
* @param {number} [$glyph-font-size=$button-medium-glyph-font-size]
* The font-size for the button glyph
*
* @param {number} [$icon-spacing=$button-medium-icon-spacing]
* The space between the button's icon and text
*
* @param {color} [$glyph-color=$button-toolbar-glyph-color]
* The color of the button's {@link #glyph} icon
*
* @param {number} [$glyph-opacity=$button-toolbar-glyph-opacity]
* The opacity of the button's {@link #glyph} icon
*
* @param {number} [$arrow-width=$button-medium-arrow-width]
* The width of the button's {@link #cfg-menu} arrow
*
* @param {number} [$arrow-height=$button-medium-arrow-height]
* The height of the button's {@link #cfg-menu} arrow
*
* @param {string/list} [$arrow-glyph=$button-medium-arrow-glyph]
* Glyph for the button arrow when when {@link Global_CSS#$enable-font-icons} is `true`.
*
* @param {string/list} [$arrow-glyph-color=$button-toolbar-arrow-glyph-color]
* Glyph color for the button arrow when when {@link Global_CSS#$enable-font-icons} is `true`.
*
* @param {number} [$split-width=$button-medium-split-width]
* The width of a {@link Ext.button.Split Split Button}'s arrow
*
* @param {number} [$split-height=$button-medium-split-height]
* The height of a {@link Ext.button.Split Split Button}'s arrow
*
* @param {number} [$split-line-width=$button-medium-split-line-width]
* The default width for a {@link Ext.button.Split Split Button}'s line.
* Themes that include the line in the arrow background image should set this to 0
*
* @param {color} [$split-line-color=$button-toolbar-split-line-color]
* The color for a {@link Ext.button.Split Split Button}'s line.
* Only applicable when `$split-line-width` is greater than 0.
*
* @param {boolean} [$include-ui-menu-arrows=$button-include-ui-menu-arrows]
* True to include the UI name in the file name of the {@link #cfg-menu}
* arrow icon. Set this to false to share the same arrow bewteen multiple UIs.
*
* @param {boolean} [$include-ui-split-arrows=$button-include-ui-split-arrows]
* True to include the UI name in the file name of the {@link Ext.button.Split Split Button}'s
* arrow icon. Set this to false to share the same arrow bewteen multiple UIs.
*
* @param {boolean} [$include-split-noline-arrows=$button-toolbar-include-split-noline-arrows]
* True to add a "-noline" suffix to the file name of the {@link Ext.button.Split Split Button}'s
* arrow icon. Used for hiding the split line when toolbar buttons are in their default
* state.
*
* @param {boolean} [$include-split-over-arrows=$button-include-split-over-arrows]
* True to use a separate icon for {@link Ext.button.Split Split Button}s when the cursor
* is over the button. The over icon file name will have a "-o" suffix
*
* @param {number} [$opacity-disabled=$button-toolbar-opacity-disabled]
* The opacity of the button when it is disabled
*
* @param {number} [$inner-opacity-disabled=$button-toolbar-inner-opacity-disabled]
* The opacity of the button's text and icon elements when when the button is disabled
*
* @member Ext.button.Button
*/
@mixin extjs-button-toolbar-medium-ui(
$ui,
$border-radius: $button-medium-border-radius,
$border-width: $button-medium-border-width,
$border-color: null,
$border-color-over: null,
$border-color-focus: null,
$border-color-pressed: null,
$border-color-focus-over: null,
$border-color-focus-pressed: null,
$border-color-disabled: null,
$padding: $button-medium-padding,
$text-padding: $button-medium-text-padding,
$background-color: null,
$background-color-over: null,
$background-color-focus: null,
$background-color-pressed: null,
$background-color-focus-over: null,
$background-color-focus-pressed: null,
$background-color-disabled: null,
$background-gradient: $button-toolbar-background-gradient,
$background-gradient-over: $button-toolbar-background-gradient-over,
$background-gradient-focus: $button-toolbar-background-gradient-focus,
$background-gradient-pressed: $button-toolbar-background-gradient-pressed,
$background-gradient-focus-over: $button-toolbar-background-gradient-focus-over,
$background-gradient-focus-pressed: $button-toolbar-background-gradient-focus-pressed,
$background-gradient-disabled: $button-toolbar-background-gradient-disabled,
$color: null,
$color-over: null,
$color-focus: null,
$color-pressed: null,
$color-focus-over: null,
$color-focus-pressed: null,
$color-disabled: null,
$inner-border-width: null,
$inner-border-width-over: null,
$inner-border-width-focus: null,
$inner-border-width-pressed: null,
$inner-border-width-focus-over: null,
$inner-border-width-focus-pressed: null,
$inner-border-width-disabled: null,
$inner-border-color: null,
$inner-border-color-over: null,
$inner-border-color-focus: null,
$inner-border-color-pressed: null,
$inner-border-color-focus-over: null,
$inner-border-color-focus-pressed: null,
$inner-border-color-disabled: null,
$body-outline-width-focus: $button-toolbar-body-outline-width-focus,
$body-outline-style-focus: $button-toolbar-body-outline-style-focus,
$body-outline-color-focus: $button-toolbar-body-outline-color-focus,
$font-size: null,
$font-size-over: null,
$font-size-focus: null,
$font-size-pressed: null,
$font-size-focus-over: null,
$font-size-focus-pressed: null,
$font-size-disabled: null,
$font-weight: null,
$font-weight-over: null,
$font-weight-focus: null,
$font-weight-pressed: null,
$font-weight-focus-over: null,
$font-weight-focus-pressed: null,
$font-weight-disabled: null,
$font-family: null,
$font-family-over: null,
$font-family-focus: null,
$font-family-pressed: null,
$font-family-focus-over: null,
$font-family-focus-pressed: null,
$font-family-disabled: null,
$line-height: $button-medium-line-height,
$icon-size: $button-medium-icon-size,
$glyph-font-size: $button-medium-glyph-font-size,
$icon-spacing: $button-medium-icon-spacing,
$glyph-color: $button-toolbar-glyph-color,
$glyph-opacity: $button-toolbar-glyph-opacity,
$arrow-width: $button-medium-arrow-width,
$arrow-height: $button-medium-arrow-height,
$arrow-glyph: $button-medium-arrow-glyph,
$arrow-glyph-color: $button-toolbar-arrow-glyph-color,
$split-width: $button-medium-split-width,
$split-height: $button-medium-split-height,
$split-line-width: $button-medium-split-line-width,
$split-line-color: $button-toolbar-split-line-color,
$include-ui-menu-arrows: $button-include-ui-menu-arrows,
$include-ui-split-arrows: $button-include-ui-split-arrows,
$include-split-noline-arrows: $button-toolbar-include-split-noline-arrows,
$include-split-over-arrows: $button-include-split-over-arrows,
$opacity-disabled: $button-toolbar-opacity-disabled,
$inner-opacity-disabled: $button-toolbar-inner-opacity-disabled
) {
@if $border-color == null {
$border-color: $button-toolbar-border-color;
@if $border-color-over == null {
$border-color-over: $button-toolbar-border-color-over;
}
@if $border-color-focus == null {
$border-color-focus: $button-toolbar-border-color-focus;
}
@if $border-color-pressed == null {
$border-color-pressed: $button-toolbar-border-color-pressed;
}
@if $border-color-focus-over == null {
$border-color-focus-over: $button-toolbar-border-color-focus-over;
}
@if $border-color-focus-pressed == null {
$border-color-focus-pressed: $button-toolbar-border-color-focus-pressed;
}
@if $border-color-disabled == null {
$border-color-disabled: $button-toolbar-border-color-disabled;
}
} @else {
@if $border-color-over == null {
$border-color-over: button-toolbar-border-color-over($border-color);
}
@if $border-color-focus == null {
$border-color-focus: button-toolbar-border-color-focus($border-color);
}
@if $border-color-pressed == null {
$border-color-pressed: button-toolbar-border-color-pressed($border-color);
}
@if $border-color-focus-over == null {
$border-color-focus-over: $border-color-over;
}
@if $border-color-focus-pressed == null {
$border-color-focus-pressed: $border-color-pressed;
}
@if $border-color-disabled == null {
$border-color-disabled: button-toolbar-border-color-disabled($border-color);
}
}
@if $background-color == null {
$background-color: $button-toolbar-background-color;
@if $background-color-over == null {
$background-color-over: $button-toolbar-background-color-over;
}
@if $background-color-focus == null {
$background-color-focus: $button-toolbar-background-color-focus;
}
@if $background-color-pressed == null {
$background-color-pressed: $button-toolbar-background-color-pressed;
}
@if $background-color-focus-over == null {
$background-color-focus-over: $button-toolbar-background-color-focus-over;
}
@if $background-color-focus-pressed == null {
$background-color-focus-pressed: $button-toolbar-background-color-focus-pressed;
}
@if $background-color-disabled == null {
$background-color-disabled: $button-toolbar-background-color-disabled;
}
} @else {
@if $background-color-over == null {
$background-color-over: button-toolbar-background-color-over($background-color);
}
@if $background-color-focus == null {
$background-color-focus: button-toolbar-background-color-focus($background-color);
}
@if $background-color-pressed == null {
$background-color-pressed: button-toolbar-background-color-pressed($background-color);
}
@if $background-color-focus-over == null {
$background-color-focus-over: $background-color-over;
}
@if $background-color-focus-pressed == null {
$background-color-focus-pressed: $background-color-pressed;
}
@if $background-color-disabled == null {
$background-color-disabled: button-toolbar-background-color-disabled($background-color);
}
}
@if $color == null {
$color: $button-toolbar-color;
@if $color-over == null {
$color-over: $button-toolbar-color-over;
}
@if $color-focus == null {
$color-focus: $button-toolbar-color-focus;
}
@if $color-pressed == null {
$color-pressed: $button-toolbar-color-pressed;
}
@if $color-focus-over == null {
$color-focus-over: $button-toolbar-color-focus-over;
}
@if $color-focus-pressed == null {
$color-focus-pressed: $button-toolbar-color-focus-pressed;
}
@if $color-disabled == null {
$color-disabled: $button-toolbar-color-disabled;
}
} @else {
@if $color-over == null {
$color-over: button-toolbar-color-over($color);
}
@if $color-focus == null {
$color-focus: button-toolbar-color-focus($color);
}
@if $color-pressed == null {
$color-pressed: button-toolbar-color-pressed($color);
}
@if $color-focus-over == null {
$color-focus-over: $color-over;
}
@if $color-focus-pressed == null {
$color-focus-pressed: $color-pressed;
}
@if $color-disabled == null {
$color-disabled: button-toolbar-color-disabled($color);
}
}
@if $inner-border-width == null {
$inner-border-width: $button-toolbar-inner-border-width;
@if $inner-border-width-over == null {
$inner-border-width-over: $button-toolbar-inner-border-width-over;
}
@if $inner-border-width-focus == null {
$inner-border-width-focus: $button-toolbar-inner-border-width-focus;
}
@if $inner-border-width-pressed == null {
$inner-border-width-pressed: $button-toolbar-inner-border-width-pressed;
}
@if $inner-border-width-focus-over == null {
$inner-border-width-focus-over: $button-toolbar-inner-border-width-focus-over;
}
@if $inner-border-width-focus-pressed == null {
$inner-border-width-focus-pressed: $button-toolbar-inner-border-width-focus-pressed;
}
@if $inner-border-width-disabled == null {
$inner-border-width-disabled: $button-toolbar-inner-border-width-disabled;
}
} @else {
@if $inner-border-width-over == null {
$inner-border-width-over: $inner-border-width;
}
@if $inner-border-width-focus == null {
$inner-border-width-focus: $inner-border-width;
}
@if $inner-border-width-pressed == null {
$inner-border-width-pressed: $inner-border-width;
}
@if $inner-border-width-focus-over == null {
$inner-border-width-focus-over: $inner-border-width-over;
}
@if $inner-border-width-focus-pressed == null {
$inner-border-width-focus-pressed: $inner-border-width-pressed;
}
@if $inner-border-width-disabled == null {
$inner-border-width-disabled: $inner-border-width;
}
}
@if $inner-border-color == null {
$inner-border-color: $button-toolbar-inner-border-color;
@if $inner-border-color-over == null {
$inner-border-color-over: $button-toolbar-inner-border-color-over;
}
@if $inner-border-color-focus == null {
$inner-border-color-focus: $button-toolbar-inner-border-color-focus;
}
@if $inner-border-color-pressed == null {
$inner-border-color-pressed: $button-toolbar-inner-border-color-pressed;
}
@if $inner-border-color-focus-over == null {
$inner-border-color-focus-over: $button-toolbar-inner-border-color-focus-over;
}
@if $inner-border-color-focus-pressed == null {
$inner-border-color-focus-pressed: $button-toolbar-inner-border-color-focus-pressed;
}
@if $inner-border-color-disabled == null {
$inner-border-color-disabled: $button-toolbar-inner-border-color-disabled;
}
} @else {
@if $inner-border-color-over == null {
$inner-border-color-over: button-toolbar-inner-border-color-over($background-color-over, $color-over);
}
@if $inner-border-color-focus == null {
$inner-border-color-focus: button-toolbar-inner-border-color-focus($background-color-focus, $color-focus);
}
@if $inner-border-color-pressed == null {
$inner-border-color-pressed: button-toolbar-inner-border-color-pressed($background-color-pressed, $color-pressed);
}
@if $inner-border-color-focus-over == null {
$inner-border-color-focus-over: button-toolbar-inner-border-color-focus-over($background-color-focus-over, $color-focus-over);
}
@if $inner-border-color-focus-pressed == null {
$inner-border-color-focus-pressed: button-toolbar-inner-border-color-focus-pressed($background-color-focus-pressed, $color-focus-pressed)
}
@if $inner-border-color-disabled == null {
$inner-border-color-disabled: button-toolbar-inner-border-color-disabled($background-color-disabled, $color-disabled);
}
}
@if $font-size == null {
$font-size: $button-medium-font-size;
@if $font-size-over == null {
$font-size-over: $button-medium-font-size-over;
}
@if $font-size-focus == null {
$font-size-focus: $button-medium-font-size-focus;
}
@if $font-size-pressed == null {
$font-size-pressed: $button-medium-font-size-pressed;
}
@if $font-size-focus-over == null {
$font-size-focus-over: $button-medium-font-size-focus-over;
}
@if $font-size-focus-pressed == null {
$font-size-focus-pressed: $button-medium-font-size-focus-pressed;
}
@if $font-size-disabled == null {
$font-size-disabled: $button-medium-font-size-disabled;
}
} @else {
@if $font-size-over == null {
$font-size-over: $font-size;
}
@if $font-size-focus == null {
$font-size-focus: $font-size;
}
@if $font-size-pressed == null {
$font-size-pressed: $font-size;
}
@if $font-size-focus-over == null {
$font-size-focus-over: $font-size-over;
}
@if $font-size-focus-pressed == null {
$font-size-focus-pressed: $font-size-pressed;
}
@if $font-size-disabled == null {
$font-size-disabled: $font-size;
}
}
@if $font-weight == null {
$font-weight: $button-medium-font-weight;
@if $font-weight-over == null {
$font-weight-over: $button-medium-font-weight-over;
}
@if $font-weight-focus == null {
$font-weight-focus: $button-medium-font-weight-focus;
}
@if $font-weight-pressed == null {
$font-weight-pressed: $button-medium-font-weight-pressed;
}
@if $font-weight-focus-over == null {
$font-weight-focus-over: $button-medium-font-weight-focus-over;
}
@if $font-weight-focus-pressed == null {
$font-weight-focus-pressed: $button-medium-font-weight-focus-pressed;
}
@if $font-weight-disabled == null {
$font-weight-disabled: $button-medium-font-weight-disabled;
}
} @else {
@if $font-weight-over == null {
$font-weight-over: $font-weight;
}
@if $font-weight-focus == null {
$font-weight-focus: $font-weight;
}
@if $font-weight-pressed == null {
$font-weight-pressed: $font-weight;
}
@if $font-weight-focus-over == null {
$font-weight-focus-over: $font-weight-over;
}
@if $font-weight-focus-pressed == null {
$font-weight-focus-pressed: $font-weight-pressed;
}
@if $font-weight-disabled == null {
$font-weight-disabled: $font-weight;
}
}
@if $font-family == null {
$font-family: $button-medium-font-family;
@if $font-family-over == null {
$font-family-over: $button-medium-font-family-over;
}
@if $font-family-focus == null {
$font-family-focus: $button-medium-font-family-focus;
}
@if $font-family-pressed == null {
$font-family-pressed: $button-medium-font-family-pressed;
}
@if $font-family-focus-over == null {
$font-family-focus-over: $button-medium-font-family-focus-over;
}
@if $font-family-focus-pressed == null {
$font-family-focus-pressed: $button-medium-font-family-focus-pressed;
}
@if $font-family-disabled == null {
$font-family-disabled: $button-medium-font-family-disabled;
}
} @else {
@if $font-family-over == null {
$font-family-over: $font-family;
}
@if $font-family-focus == null {
$font-family-focus: $font-family;
}
@if $font-family-pressed == null {
$font-family-pressed: $font-family;
}
@if $font-family-focus-over == null {
$font-family-focus-over: $font-family-over;
}
@if $font-family-focus-pressed == null {
$font-family-focus-pressed: $font-family-pressed;
}
@if $font-family-disabled == null {
$font-family-disabled: $font-family;
}
}
@include extjs-button-ui(
$ui: '#{$ui}-toolbar-medium',
$border-radius: $border-radius,
$border-width: $border-width,
$border-color: $border-color,
$border-color-over: $border-color-over,
$border-color-focus: $border-color-focus,
$border-color-pressed: $border-color-pressed,
$border-color-focus-over: $border-color-focus-over,
$border-color-focus-pressed: $border-color-focus-pressed,
$border-color-disabled: $border-color-disabled,
$padding: $padding,
$text-padding: $text-padding,
$background-color: $background-color,
$background-color-over: $background-color-over,
$background-color-focus: $background-color-focus,
$background-color-pressed: $background-color-pressed,
$background-color-focus-over: $background-color-focus-over,
$background-color-focus-pressed: $background-color-focus-pressed,
$background-color-disabled: $background-color-disabled,
$background-gradient: $background-gradient,
$background-gradient-over: $background-gradient-over,
$background-gradient-focus: $background-gradient-focus,
$background-gradient-pressed: $background-gradient-pressed,
$background-gradient-focus-over: $background-gradient-focus-over,
$background-gradient-focus-pressed: $background-gradient-focus-pressed,
$background-gradient-disabled: $background-gradient-disabled,
$color: $color,
$color-over: $color-over,
$color-focus: $color-focus,
$color-pressed: $color-pressed,
$color-focus-over: $color-focus-over,
$color-focus-pressed: $color-focus-pressed,
$color-disabled: $color-disabled,
$inner-border-width: $inner-border-width,
$inner-border-width-over: $inner-border-width-over,
$inner-border-width-focus: $inner-border-width-focus,
$inner-border-width-pressed: $inner-border-width-pressed,
$inner-border-width-focus-over: $inner-border-width-focus-over,
$inner-border-width-focus-pressed: $inner-border-width-focus-pressed,
$inner-border-width-disabled: $inner-border-width-disabled,
$inner-border-color: $inner-border-color,
$inner-border-color-over: $inner-border-color-over,
$inner-border-color-focus: $inner-border-color-focus,
$inner-border-color-pressed: $inner-border-color-pressed,
$inner-border-color-focus-over: $inner-border-color-focus-over,
$inner-border-color-focus-pressed: $inner-border-color-focus-pressed,
$inner-border-color-disabled: $inner-border-color-disabled,
$body-outline-width-focus: $body-outline-width-focus,
$body-outline-style-focus: $body-outline-style-focus,
$body-outline-color-focus: $body-outline-color-focus,
$font-size: $font-size,
$font-size-over: $font-size-over,
$font-size-focus: $font-size-focus,
$font-size-pressed: $font-size-pressed,
$font-size-focus-over: $font-size-focus-over,
$font-size-focus-pressed: $font-size-focus-pressed,
$font-size-disabled: $font-size-disabled,
$font-weight: $font-weight,
$font-weight-over: $font-weight-over,
$font-weight-focus: $font-weight-focus,
$font-weight-pressed: $font-weight-pressed,
$font-weight-focus-over: $font-weight-focus-over,
$font-weight-focus-pressed: $font-weight-focus-pressed,
$font-weight-disabled: $font-weight-disabled,
$font-family: $font-family,
$font-family-over: $font-family-over,
$font-family-focus: $font-family-focus,
$font-family-pressed: $font-family-pressed,
$font-family-focus-over: $font-family-focus-over,
$font-family-focus-pressed: $font-family-focus-pressed,
$font-family-disabled: $font-family-disabled,
$line-height: $line-height,
$icon-size: $icon-size,
$glyph-font-size: $glyph-font-size,
$icon-spacing: $icon-spacing,
$glyph-color: $glyph-color,
$glyph-opacity: $glyph-opacity,
$arrow-width: $arrow-width,
$arrow-height: $arrow-height,
$arrow-glyph: $arrow-glyph,
$arrow-glyph-color: $arrow-glyph-color,
$split-width: $split-width,
$split-height: $split-height,
$split-line-width: $split-line-width,
$split-line-color: $split-line-color,
$include-ui-menu-arrows: $include-ui-menu-arrows,
$include-ui-split-arrows: $include-ui-split-arrows,
$include-split-noline-arrows: $include-split-noline-arrows,
$include-split-over-arrows: $include-split-over-arrows,
$opacity-disabled: $opacity-disabled,
$inner-opacity-disabled: $inner-opacity-disabled
);
}
/**
* Creates a visual theme for a {@link #scale large} toolbar Button.
*
* @param {string} $ui
* The name of the UI being created. Can not included spaces or special punctuation
* (used in CSS class names).
*
* @param {number} [$border-radius=$button-large-border-radius]
* The border-radius of the button
*
* @param {number} [$border-width=$button-large-border-width]
* The border-width of the button
*
* @param {color} [$border-color=$button-toolbar-border-color]
* The border-color of the button
*
* @param {color} [$border-color-over=$button-toolbar-border-color-over]
* The border-color of the button when the cursor is over the button
*
* @param {color} [$border-color-focus=$button-toolbar-border-color-focus]
* The border-color of the button when focused
*
* @param {color} [$border-color-pressed=$button-toolbar-border-color-pressed]
* The border-color of the button when pressed
*
* @param {color} [$border-color-focus-over=$button-toolbar-border-color-focus-over]
* The border-color of the button when the button is focused and the cursor is over the
* button
*
* @param {color} [$border-color-focus-pressed=$button-toolbar-border-color-focus-pressed]
* The border-color of the button when focused and pressed
*
* @param {color} [$border-color-disabled=$button-toolbar-border-color-disabled]
* The border-color of the button when disabled
*
* @param {number} [$padding=$button-large-padding]
* The amount of padding inside the border of the button on all sides
*
* @param {number} [$text-padding=$button-large-text-padding]
* The amount of horizontal space to add to the left and right of the button text
*
* @param {color} [$background-color=$button-toolbar-background-color]
* The background-color of the button
*
* @param {color} [$background-color-over=$button-toolbar-background-color-over]
* The background-color of the button when the cursor is over the button
*
* @param {color} [$background-color-focus=$button-toolbar-background-color-focus]
* The background-color of the button when focused
*
* @param {color} [$background-color-pressed=$button-toolbar-background-color-pressed]
* The background-color of the button when pressed
*
* @param {color} [$background-color-focus-over=$button-toolbar-background-color-focus-over]
* The background-color of the button when the button is focused and the cursor is over
* the button
*
* @param {color} [$background-color-focus-pressed=$button-toolbar-background-color-focus-pressed]
* The background-color of the button when focused and pressed
*
* @param {color} [$background-color-disabled=$button-toolbar-background-color-disabled]
* The background-color of the button when disabled
*
* @param {string/list} [$background-gradient=$button-toolbar-background-gradient]
* The background-gradient for the button. 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} [$background-gradient-over=$button-toolbar-background-gradient-over]
* The background-gradient to use when the cursor is over the button. 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} [$background-gradient-focus=$button-toolbar-background-gradient-focus]
* The background-gradient to use when the the button is 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} [$background-gradient-pressed=$button-toolbar-background-gradient-pressed]
* The background-gradient to use when the the button is pressed. 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} [$background-gradient-focus-over=$button-toolbar-background-gradient-focus-over]
* The background-gradient to use when the the button is focused and the cursor is over
* the button. 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} [$background-gradient-focus-pressed=$button-toolbar-background-gradient-focus-pressed]
* The background-gradient to use when the the button is focused and pressed. 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} [$background-gradient-disabled=$button-toolbar-background-gradient-disabled]
* The background-gradient to use when the the button is disabled. 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 {color} [$color=$button-toolbar-color]
* The text color of the button
*
* @param {color} [$color-over=$button-toolbar-color-over]
* The text color of the button when the cursor is over the button
*
* @param {color} [$color-focus=$button-toolbar-color-focus]
* The text color of the button when the button is focused
*
* @param {color} [$color-pressed=$button-toolbar-color-pressed]
* The text color of the button when the button is pressed
*
* @param {color} [$color-focus-over=$button-toolbar-color-focus-over]
* The text color of the button when the button is focused and the cursor is over the button
*
* @param {color} [$color-focus-pressed=$button-toolbar-color-focus-pressed]
* The text color of the button when the button is focused and pressed
*
* @param {color} [$color-disabled=$button-toolbar-color-disabled]
* The text color of the button when the button is disabled
*
* @param {number/list} [$inner-border-width=$button-toolbar-inner-border-width]
* The inner border-width of the button
*
* @param {number/list} [$inner-border-width-over=$button-toolbar-inner-border-width-over]
* The inner border-width of the button when the cursor is over the button
*
* @param {number/list} [$inner-border-width-focus=$button-toolbar-inner-border-width-focus]
* The inner border-width of the button when focused
*
* @param {number/list} [$inner-border-width-pressed=$button-toolbar-inner-border-width-pressed]
* The inner border-width of the button when pressed
*
* @param {number/list} [$inner-border-width-focus-over=$button-toolbar-inner-border-width-focus-over]
* The inner border-width of the button when the button is focused and the cursor is over
* the button
*
* @param {number/list} [$inner-border-width-focus-pressed=$button-toolbar-inner-border-width-focus-pressed]
* The inner border-width of the button when focused and pressed
*
* @param {number/list} [$inner-border-width-disabled=$button-toolbar-inner-border-width-disabled]
* The inner border-width of the button when disabled
*
* @param {color} [$inner-border-color=$button-toolbar-inner-border-color]
* The inner border-color of the button
*
* @param {color} [$inner-border-color-over=$button-toolbar-inner-border-color-over]
* The inner border-color of the button when the cursor is over the button
*
* @param {color} [$inner-border-color-focus=$button-toolbar-inner-border-color-focus]
* The inner border-color of the button when focused
*
* @param {color} [$inner-border-color-pressed=$button-toolbar-inner-border-color-pressed]
* The inner border-color of the button when pressed
*
* @param {color} [$inner-border-color-focus-over=$button-toolbar-inner-border-color-focus-over]
* The inner border-color of the button when the button is focused and the cursor is over
* the button
*
* @param {color} [$inner-border-color-focus-pressed=$button-toolbar-inner-border-color-focus-pressed]
* The inner border-color of the button when focused and pressed
*
* @param {color} [$inner-border-color-disabled=$button-toolbar-inner-border-color-disabled]
* The inner border-color of the button when disabled
*
* @param {number} [$body-outline-width-focus=$button-toolbar-body-outline-width-focus]
* The body outline width of the button when focused
*
* @param {number} [$body-outline-style-focus=$button-toolbar-body-outline-style-focus]
* The body outline-style of the button when focused
*
* @param {number} [$body-outline-color-focus=$button-toolbar-body-outline-color-focus]
* The body outline color of the button when focused
*
* @param {number} [$font-size=$button-large-font-size]
* The font-size of the button
*
* @param {number} [$font-size-over=$button-large-font-size-over]
* The font-size of the button when the cursor is over the button
*
* @param {number} [$font-size-focus=$button-large-font-size-focus]
* The font-size of the button when the button is focused
*
* @param {number} [$font-size-pressed=$button-large-font-size-pressed]
* The font-size of the button when the button is pressed
*
* @param {number} [$font-size-focus-over=$button-large-font-size-focus-over]
* The font-size of the button when the button is focused and the cursor is over the
* button
*
* @param {number} [$font-size-focus-pressed=$button-large-font-size-focus-pressed]
* The font-size of the button when the button is focused and pressed
*
* @param {number} [$font-size-disabled=$button-large-font-size-disabled]
* The font-size of the button when the button is disabled
*
* @param {string} [$font-weight=$button-large-font-weight]
* The font-weight of the button
*
* @param {string} [$font-weight-over=$button-large-font-weight-over]
* The font-weight of the button when the cursor is over the button
*
* @param {string} [$font-weight-focus=$button-large-font-weight-focus]
* The font-weight of the button when the button is focused
*
* @param {string} [$font-weight-pressed=$button-large-font-weight-pressed]
* The font-weight of the button when the button is pressed
*
* @param {string} [$font-weight-focus-over=$button-large-font-weight-focus-over]
* The font-weight of the button when the button is focused and the cursor is over the
* button
*
* @param {string} [$font-weight-focus-pressed=$button-large-font-weight-focus-pressed]
* The font-weight of the button when the button is focused and pressed
*
* @param {string} [$font-weight-disabled=$button-large-font-weight-disabled]
* The font-weight of the button when the button is disabled
*
* @param {string} [$font-family=$button-large-font-family]
* The font-family of the button
*
* @param {string} [$font-family-over=$button-large-font-family-over]
* The font-family of the button when the cursor is over the button
*
* @param {string} [$font-family-focus=$button-large-font-family-focus]
* The font-family of the button when the button is focused
*
* @param {string} [$font-family-pressed=$button-large-font-family-pressed]
* The font-family of the button when the button is pressed
*
* @param {string} [$font-family-focus-over=$button-large-font-family-focus-over]
* The font-family of the button when the button is focused and the cursor is over the
* button
*
* @param {string} [$font-family-focus-pressed=$button-large-font-family-focus-pressed]
* The font-family of the button when the button is focused and pressed
*
* @param {string} [$font-family-disabled=$button-large-font-family-disabled]
* The font-family of the button when the button is disabled
*
* @param {number} [$line-height=$button-large-line-height]
* The line-height of the button text
*
* @param {number} [$icon-size=$button-large-icon-size]
* The size of the button icon
*
* @param {number} [$glyph-font-size=$button-large-glyph-font-size]
* The font-size for the button glyph
*
* @param {number} [$icon-spacing=$button-large-icon-spacing]
* The space between the button's icon and text
*
* @param {color} [$glyph-color=$button-toolbar-glyph-color]
* The color of the button's {@link #glyph} icon
*
* @param {number} [$glyph-opacity=$button-toolbar-glyph-opacity]
* The opacity of the button's {@link #glyph} icon
*
* @param {number} [$arrow-width=$button-large-arrow-width]
* The width of the button's {@link #cfg-menu} arrow
*
* @param {number} [$arrow-height=$button-large-arrow-height]
* The height of the button's {@link #cfg-menu} arrow
*
* @param {string/list} [$arrow-glyph=$button-large-arrow-glyph]
* Glyph for the button arrow when when {@link Global_CSS#$enable-font-icons} is `true`.
*
* @param {string/list} [$arrow-glyph-color=$button-toolbar-arrow-glyph-color]
* Glyph color for the button arrow when when {@link Global_CSS#$enable-font-icons} is `true`.
*
* @param {number} [$split-width=$button-large-split-width]
* The width of a {@link Ext.button.Split Split Button}'s arrow
*
* @param {number} [$split-height=$button-large-split-height]
* The height of a {@link Ext.button.Split Split Button}'s arrow
*
* @param {number} [$split-line-width=$button-large-split-line-width]
* The default width for a {@link Ext.button.Split Split Button}'s line.
* Themes that include the line in the arrow background image should set this to 0
*
* @param {color} [$split-line-color=$button-toolbar-split-line-color]
* The color for a {@link Ext.button.Split Split Button}'s line.
* Only applicable when `$split-line-width` is greater than 0.
*
* @param {boolean} [$include-ui-menu-arrows=$button-include-ui-menu-arrows]
* True to include the UI name in the file name of the {@link #cfg-menu}
* arrow icon. Set this to false to share the same arrow bewteen multiple UIs.
*
* @param {boolean} [$include-ui-split-arrows=$button-include-ui-split-arrows]
* True to include the UI name in the file name of the {@link Ext.button.Split Split Button}'s
* arrow icon. Set this to false to share the same arrow bewteen multiple UIs.
*
* @param {boolean} [$include-split-noline-arrows=$button-toolbar-include-split-noline-arrows]
* True to add a "-noline" suffix to the file name of the {@link Ext.button.Split Split Button}'s
* arrow icon. Used for hiding the split line when toolbar buttons are in their default
* state.
*
* @param {boolean} [$include-split-over-arrows=$button-include-split-over-arrows]
* True to use a separate icon for {@link Ext.button.Split Split Button}s when the cursor
* is over the button. The over icon file name will have a "-o" suffix
*
* @param {number} [$opacity-disabled=$button-toolbar-opacity-disabled]
* The opacity of the button when it is disabled
*
* @param {number} [$inner-opacity-disabled=$button-toolbar-inner-opacity-disabled]
* The opacity of the button's text and icon elements when when the button is disabled
*
* @member Ext.button.Button
*/
@mixin extjs-button-toolbar-large-ui(
$ui,
$border-radius: $button-large-border-radius,
$border-width: $button-large-border-width,
$border-color: null,
$border-color-over: null,
$border-color-focus: null,
$border-color-pressed: null,
$border-color-focus-over: null,
$border-color-focus-pressed: null,
$border-color-disabled: null,
$padding: $button-large-padding,
$text-padding: $button-large-text-padding,
$background-color: null,
$background-color-over: null,
$background-color-focus: null,
$background-color-pressed: null,
$background-color-focus-over: null,
$background-color-focus-pressed: null,
$background-color-disabled: null,
$background-gradient: $button-toolbar-background-gradient,
$background-gradient-over: $button-toolbar-background-gradient-over,
$background-gradient-focus: $button-toolbar-background-gradient-focus,
$background-gradient-pressed: $button-toolbar-background-gradient-pressed,
$background-gradient-focus-over: $button-toolbar-background-gradient-focus-over,
$background-gradient-focus-pressed: $button-toolbar-background-gradient-focus-pressed,
$background-gradient-disabled: $button-toolbar-background-gradient-disabled,
$color: null,
$color-over: null,
$color-focus: null,
$color-pressed: null,
$color-focus-over: null,
$color-focus-pressed: null,
$color-disabled: null,
$inner-border-width: null,
$inner-border-width-over: null,
$inner-border-width-focus: null,
$inner-border-width-pressed: null,
$inner-border-width-focus-over: null,
$inner-border-width-focus-pressed: null,
$inner-border-width-disabled: null,
$inner-border-color: null,
$inner-border-color-over: null,
$inner-border-color-focus: null,
$inner-border-color-pressed: null,
$inner-border-color-focus-over: null,
$inner-border-color-focus-pressed: null,
$inner-border-color-disabled: null,
$body-outline-width-focus: $button-toolbar-body-outline-width-focus,
$body-outline-style-focus: $button-toolbar-body-outline-style-focus,
$body-outline-color-focus: $button-toolbar-body-outline-color-focus,
$font-size: null,
$font-size-over: null,
$font-size-focus: null,
$font-size-pressed: null,
$font-size-focus-over: null,
$font-size-focus-pressed: null,
$font-size-disabled: null,
$font-weight: null,
$font-weight-over: null,
$font-weight-focus: null,
$font-weight-pressed: null,
$font-weight-focus-over: null,
$font-weight-focus-pressed: null,
$font-weight-disabled: null,
$font-family: null,
$font-family-over: null,
$font-family-focus: null,
$font-family-pressed: null,
$font-family-focus-over: null,
$font-family-focus-pressed: null,
$font-family-disabled: null,
$line-height: $button-large-line-height,
$icon-size: $button-large-icon-size,
$glyph-font-size: $button-large-glyph-font-size,
$icon-spacing: $button-large-icon-spacing,
$glyph-color: $button-toolbar-glyph-color,
$glyph-opacity: $button-toolbar-glyph-opacity,
$arrow-width: $button-large-arrow-width,
$arrow-height: $button-large-arrow-height,
$arrow-glyph: $button-large-arrow-glyph,
$arrow-glyph-color: $button-toolbar-arrow-glyph-color,
$split-width: $button-large-split-width,
$split-height: $button-large-split-height,
$split-line-width: $button-large-split-line-width,
$split-line-color: $button-toolbar-split-line-color,
$include-ui-menu-arrows: $button-include-ui-menu-arrows,
$include-ui-split-arrows: $button-include-ui-split-arrows,
$include-split-noline-arrows: $button-toolbar-include-split-noline-arrows,
$include-split-over-arrows: $button-include-split-over-arrows,
$opacity-disabled: $button-toolbar-opacity-disabled,
$inner-opacity-disabled: $button-toolbar-inner-opacity-disabled
) {
@if $border-color == null {
$border-color: $button-toolbar-border-color;
@if $border-color-over == null {
$border-color-over: $button-toolbar-border-color-over;
}
@if $border-color-focus == null {
$border-color-focus: $button-toolbar-border-color-focus;
}
@if $border-color-pressed == null {
$border-color-pressed: $button-toolbar-border-color-pressed;
}
@if $border-color-focus-over == null {
$border-color-focus-over: $button-toolbar-border-color-focus-over;
}
@if $border-color-focus-pressed == null {
$border-color-focus-pressed: $button-toolbar-border-color-focus-pressed;
}
@if $border-color-disabled == null {
$border-color-disabled: $button-toolbar-border-color-disabled;
}
} @else {
@if $border-color-over == null {
$border-color-over: button-toolbar-border-color-over($border-color);
}
@if $border-color-focus == null {
$border-color-focus: button-toolbar-border-color-focus($border-color);
}
@if $border-color-pressed == null {
$border-color-pressed: button-toolbar-border-color-pressed($border-color);
}
@if $border-color-focus-over == null {
$border-color-focus-over: $border-color-over;
}
@if $border-color-focus-pressed == null {
$border-color-focus-pressed: $border-color-pressed;
}
@if $border-color-disabled == null {
$border-color-disabled: button-toolbar-border-color-disabled($border-color);
}
}
@if $background-color == null {
$background-color: $button-toolbar-background-color;
@if $background-color-over == null {
$background-color-over: $button-toolbar-background-color-over;
}
@if $background-color-focus == null {
$background-color-focus: $button-toolbar-background-color-focus;
}
@if $background-color-pressed == null {
$background-color-pressed: $button-toolbar-background-color-pressed;
}
@if $background-color-focus-over == null {
$background-color-focus-over: $button-toolbar-background-color-focus-over;
}
@if $background-color-focus-pressed == null {
$background-color-focus-pressed: $button-toolbar-background-color-focus-pressed;
}
@if $background-color-disabled == null {
$background-color-disabled: $button-toolbar-background-color-disabled;
}
} @else {
@if $background-color-over == null {
$background-color-over: button-toolbar-background-color-over($background-color);
}
@if $background-color-focus == null {
$background-color-focus: button-toolbar-background-color-focus($background-color);
}
@if $background-color-pressed == null {
$background-color-pressed: button-toolbar-background-color-pressed($background-color);
}
@if $background-color-focus-over == null {
$background-color-focus-over: $background-color-over;
}
@if $background-color-focus-pressed == null {
$background-color-focus-pressed: $background-color-pressed;
}
@if $background-color-disabled == null {
$background-color-disabled: button-toolbar-background-color-disabled($background-color);
}
}
@if $color == null {
$color: $button-toolbar-color;
@if $color-over == null {
$color-over: $button-toolbar-color-over;
}
@if $color-focus == null {
$color-focus: $button-toolbar-color-focus;
}
@if $color-pressed == null {
$color-pressed: $button-toolbar-color-pressed;
}
@if $color-focus-over == null {
$color-focus-over: $button-toolbar-color-focus-over;
}
@if $color-focus-pressed == null {
$color-focus-pressed: $button-toolbar-color-focus-pressed;
}
@if $color-disabled == null {
$color-disabled: $button-toolbar-color-disabled;
}
} @else {
@if $color-over == null {
$color-over: button-toolbar-color-over($color);
}
@if $color-focus == null {
$color-focus: button-toolbar-color-focus($color);
}
@if $color-pressed == null {
$color-pressed: button-toolbar-color-pressed($color);
}
@if $color-focus-over == null {
$color-focus-over: $color-over;
}
@if $color-focus-pressed == null {
$color-focus-pressed: $color-pressed;
}
@if $color-disabled == null {
$color-disabled: button-toolbar-color-disabled($color);
}
}
@if $inner-border-width == null {
$inner-border-width: $button-toolbar-inner-border-width;
@if $inner-border-width-over == null {
$inner-border-width-over: $button-toolbar-inner-border-width-over;
}
@if $inner-border-width-focus == null {
$inner-border-width-focus: $button-toolbar-inner-border-width-focus;
}
@if $inner-border-width-pressed == null {
$inner-border-width-pressed: $button-toolbar-inner-border-width-pressed;
}
@if $inner-border-width-focus-over == null {
$inner-border-width-focus-over: $button-toolbar-inner-border-width-focus-over;
}
@if $inner-border-width-focus-pressed == null {
$inner-border-width-focus-pressed: $button-toolbar-inner-border-width-focus-pressed;
}
@if $inner-border-width-disabled == null {
$inner-border-width-disabled: $button-toolbar-inner-border-width-disabled;
}
} @else {
@if $inner-border-width-over == null {
$inner-border-width-over: $inner-border-width;
}
@if $inner-border-width-focus == null {
$inner-border-width-focus: $inner-border-width;
}
@if $inner-border-width-pressed == null {
$inner-border-width-pressed: $inner-border-width;
}
@if $inner-border-width-focus-over == null {
$inner-border-width-focus-over: $inner-border-width-over;
}
@if $inner-border-width-focus-pressed == null {
$inner-border-width-focus-pressed: $inner-border-width-pressed;
}
@if $inner-border-width-disabled == null {
$inner-border-width-disabled: $inner-border-width;
}
}
@if $inner-border-color == null {
$inner-border-color: $button-toolbar-inner-border-color;
@if $inner-border-color-over == null {
$inner-border-color-over: $button-toolbar-inner-border-color-over;
}
@if $inner-border-color-focus == null {
$inner-border-color-focus: $button-toolbar-inner-border-color-focus;
}
@if $inner-border-color-pressed == null {
$inner-border-color-pressed: $button-toolbar-inner-border-color-pressed;
}
@if $inner-border-color-focus-over == null {
$inner-border-color-focus-over: $button-toolbar-inner-border-color-focus-over;
}
@if $inner-border-color-focus-pressed == null {
$inner-border-color-focus-pressed: $button-toolbar-inner-border-color-focus-pressed;
}
@if $inner-border-color-disabled == null {
$inner-border-color-disabled: $button-toolbar-inner-border-color-disabled;
}
} @else {
@if $inner-border-color-over == null {
$inner-border-color-over: button-toolbar-inner-border-color-over($background-color-over, $color-over);
}
@if $inner-border-color-focus == null {
$inner-border-color-focus: button-toolbar-inner-border-color-focus($background-color-focus, $color-focus);
}
@if $inner-border-color-pressed == null {
$inner-border-color-pressed: button-toolbar-inner-border-color-pressed($background-color-pressed, $color-pressed);
}
@if $inner-border-color-focus-over == null {
$inner-border-color-focus-over: button-toolbar-inner-border-color-focus-over($background-color-focus-over, $color-focus-over);
}
@if $inner-border-color-focus-pressed == null {
$inner-border-color-focus-pressed: button-toolbar-inner-border-color-focus-pressed($background-color-focus-pressed, $color-focus-pressed)
}
@if $inner-border-color-disabled == null {
$inner-border-color-disabled: button-toolbar-inner-border-color-disabled($background-color-disabled, $color-disabled);
}
}
@if $font-size == null {
$font-size: $button-large-font-size;
@if $font-size-over == null {
$font-size-over: $button-large-font-size-over;
}
@if $font-size-focus == null {
$font-size-focus: $button-large-font-size-focus;
}
@if $font-size-pressed == null {
$font-size-pressed: $button-large-font-size-pressed;
}
@if $font-size-focus-over == null {
$font-size-focus-over: $button-large-font-size-focus-over;
}
@if $font-size-focus-pressed == null {
$font-size-focus-pressed: $button-large-font-size-focus-pressed;
}
@if $font-size-disabled == null {
$font-size-disabled: $button-large-font-size-disabled;
}
} @else {
@if $font-size-over == null {
$font-size-over: $font-size;
}
@if $font-size-focus == null {
$font-size-focus: $font-size;
}
@if $font-size-pressed == null {
$font-size-pressed: $font-size;
}
@if $font-size-focus-over == null {
$font-size-focus-over: $font-size-over;
}
@if $font-size-focus-pressed == null {
$font-size-focus-pressed: $font-size-pressed;
}
@if $font-size-disabled == null {
$font-size-disabled: $font-size;
}
}
@if $font-weight == null {
$font-weight: $button-large-font-weight;
@if $font-weight-over == null {
$font-weight-over: $button-large-font-weight-over;
}
@if $font-weight-focus == null {
$font-weight-focus: $button-large-font-weight-focus;
}
@if $font-weight-pressed == null {
$font-weight-pressed: $button-large-font-weight-pressed;
}
@if $font-weight-focus-over == null {
$font-weight-focus-over: $button-large-font-weight-focus-over;
}
@if $font-weight-focus-pressed == null {
$font-weight-focus-pressed: $button-large-font-weight-focus-pressed;
}
@if $font-weight-disabled == null {
$font-weight-disabled: $button-large-font-weight-disabled;
}
} @else {
@if $font-weight-over == null {
$font-weight-over: $font-weight;
}
@if $font-weight-focus == null {
$font-weight-focus: $font-weight;
}
@if $font-weight-pressed == null {
$font-weight-pressed: $font-weight;
}
@if $font-weight-focus-over == null {
$font-weight-focus-over: $font-weight-over;
}
@if $font-weight-focus-pressed == null {
$font-weight-focus-pressed: $font-weight-pressed;
}
@if $font-weight-disabled == null {
$font-weight-disabled: $font-weight;
}
}
@if $font-family == null {
$font-family: $button-large-font-family;
@if $font-family-over == null {
$font-family-over: $button-large-font-family-over;
}
@if $font-family-focus == null {
$font-family-focus: $button-large-font-family-focus;
}
@if $font-family-pressed == null {
$font-family-pressed: $button-large-font-family-pressed;
}
@if $font-family-focus-over == null {
$font-family-focus-over: $button-large-font-family-focus-over;
}
@if $font-family-focus-pressed == null {
$font-family-focus-pressed: $button-large-font-family-focus-pressed;
}
@if $font-family-disabled == null {
$font-family-disabled: $button-large-font-family-disabled;
}
} @else {
@if $font-family-over == null {
$font-family-over: $font-family;
}
@if $font-family-focus == null {
$font-family-focus: $font-family;
}
@if $font-family-pressed == null {
$font-family-pressed: $font-family;
}
@if $font-family-focus-over == null {
$font-family-focus-over: $font-family-over;
}
@if $font-family-focus-pressed == null {
$font-family-focus-pressed: $font-family-pressed;
}
@if $font-family-disabled == null {
$font-family-disabled: $font-family;
}
}
@include extjs-button-ui(
$ui: '#{$ui}-toolbar-large',
$border-radius: $border-radius,
$border-width: $border-width,
$border-color: $border-color,
$border-color-over: $border-color-over,
$border-color-focus: $border-color-focus,
$border-color-pressed: $border-color-pressed,
$border-color-focus-over: $border-color-focus-over,
$border-color-focus-pressed: $border-color-focus-pressed,
$border-color-disabled: $border-color-disabled,
$padding: $padding,
$text-padding: $text-padding,
$background-color: $background-color,
$background-color-over: $background-color-over,
$background-color-focus: $background-color-focus,
$background-color-pressed: $background-color-pressed,
$background-color-focus-over: $background-color-focus-over,
$background-color-focus-pressed: $background-color-focus-pressed,
$background-color-disabled: $background-color-disabled,
$background-gradient: $background-gradient,
$background-gradient-over: $background-gradient-over,
$background-gradient-focus: $background-gradient-focus,
$background-gradient-pressed: $background-gradient-pressed,
$background-gradient-focus-over: $background-gradient-focus-over,
$background-gradient-focus-pressed: $background-gradient-focus-pressed,
$background-gradient-disabled: $background-gradient-disabled,
$color: $color,
$color-over: $color-over,
$color-focus: $color-focus,
$color-pressed: $color-pressed,
$color-focus-over: $color-focus-over,
$color-focus-pressed: $color-focus-pressed,
$color-disabled: $color-disabled,
$inner-border-width: $inner-border-width,
$inner-border-width-over: $inner-border-width-over,
$inner-border-width-focus: $inner-border-width-focus,
$inner-border-width-pressed: $inner-border-width-pressed,
$inner-border-width-focus-over: $inner-border-width-focus-over,
$inner-border-width-focus-pressed: $inner-border-width-focus-pressed,
$inner-border-width-disabled: $inner-border-width-disabled,
$inner-border-color: $inner-border-color,
$inner-border-color-over: $inner-border-color-over,
$inner-border-color-focus: $inner-border-color-focus,
$inner-border-color-pressed: $inner-border-color-pressed,
$inner-border-color-focus-over: $inner-border-color-focus-over,
$inner-border-color-focus-pressed: $inner-border-color-focus-pressed,
$inner-border-color-disabled: $inner-border-color-disabled,
$body-outline-width-focus: $body-outline-width-focus,
$body-outline-style-focus: $body-outline-style-focus,
$body-outline-color-focus: $body-outline-color-focus,
$font-size: $font-size,
$font-size-over: $font-size-over,
$font-size-focus: $font-size-focus,
$font-size-pressed: $font-size-pressed,
$font-size-focus-over: $font-size-focus-over,
$font-size-focus-pressed: $font-size-focus-pressed,
$font-size-disabled: $font-size-disabled,
$font-weight: $font-weight,
$font-weight-over: $font-weight-over,
$font-weight-focus: $font-weight-focus,
$font-weight-pressed: $font-weight-pressed,
$font-weight-focus-over: $font-weight-focus-over,
$font-weight-focus-pressed: $font-weight-focus-pressed,
$font-weight-disabled: $font-weight-disabled,
$font-family: $font-family,
$font-family-over: $font-family-over,
$font-family-focus: $font-family-focus,
$font-family-pressed: $font-family-pressed,
$font-family-focus-over: $font-family-focus-over,
$font-family-focus-pressed: $font-family-focus-pressed,
$font-family-disabled: $font-family-disabled,
$line-height: $line-height,
$icon-size: $icon-size,
$glyph-font-size: $glyph-font-size,
$icon-spacing: $icon-spacing,
$glyph-color: $glyph-color,
$glyph-opacity: $glyph-opacity,
$arrow-width: $arrow-width,
$arrow-height: $arrow-height,
$arrow-glyph: $arrow-glyph,
$arrow-glyph-color: $arrow-glyph-color,
$split-width: $split-width,
$split-height: $split-height,
$split-line-width: $split-line-width,
$split-line-color: $split-line-color,
$include-ui-menu-arrows: $include-ui-menu-arrows,
$include-ui-split-arrows: $include-ui-split-arrows,
$include-split-noline-arrows: $include-split-noline-arrows,
$include-split-over-arrows: $include-split-over-arrows,
$opacity-disabled: $opacity-disabled,
$inner-opacity-disabled: $inner-opacity-disabled
);
}