/** @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 );}