icloudtweetdeckhipchattelegramhangoutsslackgmailskypefacebook-workplaceoutlookemailmicrosoft-teamsdiscordmessengercustom-servicesmacoslinuxwindowsinboxwhatsapp
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1817 lines
69 KiB
1817 lines
69 KiB
9 years ago
|
/**
|
||
|
|
* 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} [$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 {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 {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,
|
||
|
|
$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,
|
||
|
|
$split-width: $button-large-split-width,
|
||
|
|
$split-height: $button-large-split-height,
|
||
|
|
$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-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,
|
||
|
|
$icon-spacing: $icon-spacing,
|
||
|
|
$glyph-color: $glyph-color,
|
||
|
|
$glyph-opacity: $glyph-opacity,
|
||
|
|
$arrow-width: $arrow-width,
|
||
|
|
$arrow-height: $arrow-height,
|
||
|
|
$split-width: $split-width,
|
||
|
|
$split-height: $split-height,
|
||
|
|
$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} [$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 {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 {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,
|
||
|
|
$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,
|
||
|
|
$split-width: $button-large-split-width,
|
||
|
|
$split-height: $button-large-split-height,
|
||
|
|
$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-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,
|
||
|
|
$icon-spacing: $icon-spacing,
|
||
|
|
$glyph-color: $glyph-color,
|
||
|
|
$glyph-opacity: $glyph-opacity,
|
||
|
|
$arrow-width: $arrow-width,
|
||
|
|
$arrow-height: $arrow-height,
|
||
|
|
$split-width: $split-width,
|
||
|
|
$split-height: $split-height,
|
||
|
|
$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
|
||
|
|
);
|
||
|
|
}
|