/**
* @class Ext.toolbar.Toolbar
*/
/**
* @var {number}
* The default font-size of Toolbar text
*/
$toolbar-font-size: dynamic($font-size);
/**
* @var {color}
* The background-color of the Toolbar
*/
$toolbar-background-color: dynamic($base-color);
/**
* @var {string/list}
* The background-gradient of the Toolbar. 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}.
*/
$toolbar-background-gradient: dynamic('none');
/**
* @var {number}
* The horizontal spacing of Toolbar items
*/
$toolbar-horizontal-spacing: dynamic(2px);
/**
* @var {number}
* The vertical spacing of Toolbar items
*/
$toolbar-vertical-spacing: dynamic(2px);
/**
* @var {number}
* The horizontal spacing of {@link Ext.panel.Panel#fbar footer} Toolbar items
*/
$toolbar-footer-horizontal-spacing: dynamic(6px);
/**
* @var {number}
* The vertical spacing of {@link Ext.panel.Panel#fbar footer} Toolbar items
*/
$toolbar-footer-vertical-spacing: dynamic(4px);
/**
* @var {color}
* The background-color of {@link Ext.panel.Panel#fbar footer} Toolbars
*/
$toolbar-footer-background-color: dynamic(transparent);
/**
* @var {number}
* The border-width of {@link Ext.panel.Panel#fbar footer} Toolbars
*/
$toolbar-footer-border-width: dynamic(0);
/**
* @var {color}
* The border-color of Toolbars
*/
$toolbar-border-color: dynamic($base-color);
/**
* @var {number}
* The border-width of Toolbars
*/
$toolbar-border-width: dynamic(1px);
/**
* @var {string}
* The border-style of Toolbars
*/
$toolbar-border-style: dynamic(solid);
/**
* @var {number}
* The width of Toolbar {@link Ext.toolbar.Spacer Spacers}
*/
$toolbar-spacer-width: dynamic(2px);
/**
* @var {color}
* The main border-color of Toolbar {@link Ext.toolbar.Separator Separators}
*/
$toolbar-separator-color: dynamic(adjust-color($base-color, $hue: -1deg, $saturation: 100%, $lightness: -4.3%));
/**
* @var {color}
* The highlight border-color of Toolbar {@link Ext.toolbar.Separator Separators}
*/
$toolbar-separator-highlight-color: dynamic(#fff);
/**
* @var {number/list}
* The margin of {@link Ext.toolbar.Separator Separators} on a horizontally oriented Toolbar
*/
$toolbar-separator-horizontal-margin: dynamic(0 $toolbar-horizontal-spacing 0 0);
/**
* @var {number}
* The height of {@link Ext.toolbar.Separator Separators} on a horizontally oriented Toolbar
*/
$toolbar-separator-horizontal-height: dynamic(14px);
/**
* @var {string}
* The border-style of {@link Ext.toolbar.Separator Separators} on a horizontally oriented Toolbar
*/
$toolbar-separator-horizontal-border-style: dynamic(solid);
/**
* @var {number}
* The border-width of {@link Ext.toolbar.Separator Separators} on a horizontally oriented Toolbar
*/
$toolbar-separator-horizontal-border-width: dynamic(0 1px);
/**
* @var {number/list}
* The margin of {@link Ext.toolbar.Separator Separators} on a vertically oriented Toolbar
*/
$toolbar-separator-vertical-margin: dynamic(0 5px $toolbar-vertical-spacing);
/**
* @var {string}
* The border-style of {@link Ext.toolbar.Separator Separators} on a vertically oriented Toolbar
*/
$toolbar-separator-vertical-border-style: dynamic(solid none);
/**
* @var {number}
* The border-width of {@link Ext.toolbar.Separator Separators} on a vertically oriented Toolbar
*/
$toolbar-separator-vertical-border-width: dynamic(1px 0);
/**
* @var {string}
* The default font-family of Toolbar text
*/
$toolbar-text-font-family: dynamic($font-family);
/**
* @var {number}
* The default font-size of Toolbar text
*/
$toolbar-text-font-size: dynamic($toolbar-font-size);
/**
* @var {number}
* The default font-size of Toolbar text
*/
$toolbar-text-font-weight: dynamic($font-weight);
/**
* @var {color}
* The text-color of Toolbar text
*/
$toolbar-text-color: dynamic(mix(desaturate(lighten($base-color, 37), 5), #000, 30));
/**
* @var {number}
* The line-height of Toolbar text
*/
$toolbar-text-line-height: dynamic(16px);
/**
* @var {number/list}
* The padding of Toolbar text
*/
$toolbar-text-padding: dynamic(0 4px);
/**
* @var {number}
* The width of Toolbar scrollers
*/
$toolbar-scroller-width: dynamic(14px);
/**
* @var {number}
* The height of Toolbar scrollers
*/
$toolbar-scroller-height: dynamic(22px);
/**
* @var {number}
* The width of scrollers on vertically aligned toolbars
*/
$toolbar-scroller-vertical-width: dynamic($toolbar-scroller-height);
/**
* @var {number}
* The height of scrollers on vertically aligned toolbars
*/
$toolbar-scroller-vertical-height: dynamic($toolbar-scroller-width);
/**
* @var {color}
* The border-color of Toolbar scroller buttons
*/
$toolbar-scroller-border-color: dynamic(#8db2e3);
/**
* @var {number}
* The border-width of Toolbar scroller buttons
*/
$toolbar-scroller-border-width: dynamic(0 0 1px);
/**
* @var {color}
* The border-color of scroller buttons on vertically aligned toolbars
*/
$toolbar-scroller-vertical-border-color: dynamic($toolbar-scroller-border-color);
/**
* @var {number}
* The border-width of scroller buttons on vertically aligned toolbars
*/
$toolbar-scroller-vertical-border-width: dynamic(0);
/**
* @var {number/list}
* The margin of "top" Toolbar scroller buttons
*/
$toolbar-scroller-top-margin: dynamic(4px 0);
/**
* @var {number/list}
* The margin of "right" Toolbar scroller buttons
*/
$toolbar-scroller-right-margin: dynamic(0 4px);
/**
* @var {number/list}
* The margin of "bottom" Toolbar scroller buttons
*/
$toolbar-scroller-bottom-margin: dynamic(4px 0);
/**
* @var {number/list}
* The margin of "left" Toolbar scroller buttons
*/
$toolbar-scroller-left-margin: dynamic(0 4px);
/**
* @var {string}
* The cursor of Toolbar scroller buttons
*/
$toolbar-scroller-cursor: dynamic(pointer);
/**
* @var {string}
* The cursor of disabled Toolbar scroller buttons
*/
$toolbar-scroller-cursor-disabled: dynamic(default);
/**
* @var {number}
* The opacity of Toolbar scroller buttons. Only applicable when
* {@link #$toolbar-classic-scrollers} is `false`.
*/
$toolbar-scroller-opacity: dynamic(0.6);
/**
* @var {number}
* The opacity of hovered Toolbar scroller buttons. Only applicable when
* {@link #$toolbar-classic-scrollers} is `false`.
*/
$toolbar-scroller-opacity-over: dynamic(0.8);
/**
* @var {number}
* The opacity of pressed Toolbar scroller buttons. Only applicable when
* {@link #$toolbar-classic-scrollers} is `false`.
*/
$toolbar-scroller-opacity-pressed: dynamic(1);
/**
* @var {number}
* The opacity of disabled Toolbar scroller buttons.
*/
$toolbar-scroller-opacity-disabled: dynamic(0.25);
/**
* @var {color}
* The color to use for toolbar scroller icons when {@link Global_CSS#$enable-font-icons} is `true`.
*/
$toolbar-scroller-glyph-color: dynamic($neutral-color);
/**
* @var {number}
* The font size for toolbar scroller icons when {@link Global_CSS#$enable-font-icons} is `true`.
*/
$toolbar-scroller-glyph-font-size: dynamic(16px);
/**
* @var {string/list}
* Glyph for the "top" scroller icon when {@link Global_CSS#$enable-font-icons} is `true`.
*/
$toolbar-scroller-top-glyph: dynamic($fa-var-chevron-up $toolbar-scroller-glyph-font-size $font-icon-font-family);
/**
* @var {string/list}
* Glyph for the "right" scroller icon when {@link Global_CSS#$enable-font-icons} is `true`.
*/
$toolbar-scroller-right-glyph: dynamic($fa-var-chevron-right $toolbar-scroller-glyph-font-size $font-icon-font-family);
/**
* @var {string/list}
* Glyph for the "bottom" scroller icon when {@link Global_CSS#$enable-font-icons} is `true`.
*/
$toolbar-scroller-bottom-glyph: dynamic($fa-var-chevron-down $toolbar-scroller-glyph-font-size $font-icon-font-family);
/**
* @var {string/list}
* Glyph for the "left" scroller icon when {@link Global_CSS#$enable-font-icons} is `true`.
*/
$toolbar-scroller-left-glyph: dynamic($fa-var-chevron-left $toolbar-scroller-glyph-font-size $font-icon-font-family);
/**
* @var {boolean}
* `true` to use classic-style scroller buttons. When `true` scroller buttons are given their
* hover state by changing their background-position, When `false` scroller buttons are
* given their hover state by applying opacity.
*/
$toolbar-classic-scrollers: dynamic(false);
/**
* @var {string}
* The sprite to use for {@link Ext.panel.Tool Tools} on a Toolbar
*/
$toolbar-tool-background-image: dynamic('none');
/**
* @var {color}
* The color to use for the Toolbar's tool icons when {@link Global_CSS#$enable-font-icons} is `true`.
*/
$toolbar-tool-glyph-color: dynamic($neutral-color);
/**
* @var {color}
* The color to use for the {@link #overflowHandler menu overflow} "more" icon when
* {@link Global_CSS#$enable-font-icons} is `true`.
*/
$toolbar-menu-overflow-glyph-color: dynamic($button-toolbar-glyph-color);
/**
* @var {string/list}
* Glyph for the {@link #overflowHandler menu overflow} "more" icon when
* {@link Global_CSS#$enable-font-icons} is `true`.
*/
$toolbar-menu-overflow-glyph: dynamic($fa-var-bars $button-small-glyph-font-size $font-icon-font-family);
/**
* @var {boolean}
* True to include the "default" toolbar UI
*/
$include-toolbar-default-ui: dynamic($include-default-uis);
/**
* @var {boolean}
* True to include the "footer" toolbar UI
*/
$include-toolbar-footer-ui: dynamic($include-default-uis);
/**
* Creates a visual theme for a Toolbar.
* @param {String} $ui
* The name of the UI being created. Can not included spaces or special punctuation
* (used in CSS class names).
*
* @param {color} [$background-color=$toolbar-background-color]
* The background color of the toolbar
*
* @param {string/list} [$background-gradient=$toolbar-background-gradient]
* The background gradient of the toolbar
*
* @param {string/list} [$vertical-spacing=$toolbar-vertical-spacing]
* The vertical spacing of the toolbar's items
*
* @param {string/list} [$horizontal-spacing=$toolbar-horizontal-spacing]
* The horizontal spacing of the toolbar's items
*
* @param {color} [$border-color=$toolbar-border-color]
* The border color of the toolbar
*
* @param {number} [$border-width=$toolbar-border-width]
* The border-width of the toolbar
*
* @param {number} [$border-style=$toolbar-border-style]
* The border-style of the toolbar
*
* @param {number} [$spacer-width=$toolbar-spacer-width]
* The width of the toolbar's {@link Ext.toolbar.Spacer Spacers}
*
* @param {color} [$separator-color=$toolbar-separator-color]
* The main border-color of the toolbar's {@link Ext.toolbar.Separator Separators}
*
* @param {color} [$separator-highlight-color=$toolbar-separator-highlight-color]
* The highlight border-color of the toolbar's {@link Ext.toolbar.Separator Separators}
*
* @param {number/list} [$separator-horizontal-margin=$toolbar-separator-horizontal-margin]
* The margin of {@link Ext.toolbar.Separator Separators} when the toolbar is horizontally aligned
*
* @param {number} [$separator-horizontal-height=$toolbar-separator-horizontal-height]
* The height of {@link Ext.toolbar.Separator Separators} when the toolbar is vertically aligned
*
* @param {string} [$separator-horizontal-border-style=$toolbar-separator-horizontal-border-style]
* The border-style of {@link Ext.toolbar.Separator Separators} when the toolbar is horizontally aligned
*
* @param {number} [$separator-horizontal-border-width=$toolbar-separator-horizontal-border-width]
* The border-width of {@link Ext.toolbar.Separator Separators} when the toolbar is horizontally aligned
*
* @param {number/list} [$separator-vertical-margin=$toolbar-separator-vertical-margin]
* The margin of {@link Ext.toolbar.Separator Separators} when the toolbar is vertically aligned
*
* @param {string} [$separator-vertical-border-style=$toolbar-separator-vertical-border-style]
* The border-style of {@link Ext.toolbar.Separator Separators} when the toolbar is vertically aligned
*
* @param {number} [$separator-vertical-border-width=$toolbar-separator-vertical-border-width]
* The border-width of {@link Ext.toolbar.Separator Separators} when the toolbar is vertically aligned
*
* @param {string} [$text-font-family=$toolbar-text-font-family]
* The default font-family of the toolbar's text items
*
* @param {number} [$text-font-size=$toolbar-text-font-size]
* The default font-size of the toolbar's text items
*
* @param {number} [$text-font-weight=$toolbar-text-font-weight]
* The default font-weight of the toolbar's text items
*
* @param {color} [$text-color=$toolbar-text-color]
* The color of the toolbar's text items
*
* @param {number} [$text-line-height=$toolbar-text-line-height]
* The line-height of the toolbar's text items
*
* @param {number/list} [$text-padding=$toolbar-text-padding]
* The padding of the toolbar's text items
*
* @param {number} [$scroller-width=$toolbar-scroller-width]
* The width of the scroller buttons
*
* @param {number} [$scroller-height=$toolbar-scroller-height]
* The height of the scroller buttons
*
* @param {number} [$scroller-vertical-width=$toolbar-scroller-vertical-width]
* The width of scrollers on vertically aligned toolbars
*
* @param {number} [$scroller-vertical-height=$toolbar-scroller-vertical-height]
* The height of scrollers on vertically aligned toolbars
*
* @param {color} [$scroller-border-color=$toolbar-scroller-border-color]
* The border-color of the scroller buttons
*
* @param {color} [$scroller-border-width=$toolbar-scroller-border-width]
* The border-width of the scroller buttons
*
* @param {color} [$scroller-vertical-border-color=$toolbar-scroller-vertical-border-color]
* The border-color of scroller buttons on vertically aligned toolbars
*
* @param {color} [$scroller-vertical-border-width=$toolbar-scroller-vertical-border-width]
* The border-width of scroller buttons on vertically aligned toolbars
*
* @param {number/list} [$scroller-top-margin=$toolbar-scroller-top-margin]
* The margin of "top" scroller buttons
*
* @param {number/list} [$scroller-right-margin=$toolbar-scroller-right-margin]
* The margin of "right" scroller buttons
*
* @param {number/list} [$scroller-bottom-margin=$toolbar-scroller-bottom-margin]
* The margin of "bottom" scroller buttons
*
* @param {number/list} [$scroller-left-margin=$toolbar-scroller-left-margin]
* The margin of "left" scroller buttons
*
* @param {string} [$scroller-cursor=$toolbar-scroller-cursor]
* The cursor of Toolbar scrollers
*
* @param {string} [$scroller-cursor-disabled=$toolbar-scroller-cursor-disabled]
* The cursor of disabled Toolbar scrollers
*
* @param {number} [$scroller-opacity=$toolbar-scroller-opacity]
* The opacity of Toolbar scroller buttons. Only applicable when
* `$classic-scrollers` is `false`.
*
* @param {number} [$scroller-opacity-over=$toolbar-scroller-opacity-over]
* The opacity of hovered Toolbar scroller buttons. Only applicable when
* `$classic-scrollers` is `false`.
*
* @param {number} [$scroller-opacity-pressed=$toolbar-scroller-opacity-pressed]
* The opacity of pressed Toolbar scroller buttons. Only applicable when
* `$classic-scrollers` is `false`.
*
* @param {number} [$scroller-opacity-disabled=$toolbar-scroller-opacity-disabled]
* The opacity of disabled Toolbar scroller buttons.
*
* @param {color} [$scroller-glyph-color=$toolbar-scroller-glyph-color]
* The color to use for toolbar scroller icons when {@link Global_CSS#$enable-font-icons} is `true`.
*
* @param {string/list} [$scroller-top-glyph=$toolbar-scroller-top-glyph]
* Glyph for the "top" scroller icon when {@link Global_CSS#$enable-font-icons} is `true`.
*
* @param {string/list} [$scroller-right-glyph=$toolbar-scroller-right-glyph]
* Glyph for the "right" scroller icon when {@link Global_CSS#$enable-font-icons} is `true`.
*
* @param {string/list} [$scroller-bottom-glyph=$toolbar-scroller-bottom-glyph]
* Glyph for the "bottom" scroller icon when {@link Global_CSS#$enable-font-icons} is `true`.
*
* @param {string/list} [$scroller-left-glyph=$toolbar-scroller-left-glyph]
* Glyph for the "left" scroller icon when {@link Global_CSS#$enable-font-icons} is `true`.
*
* @param {string} [$tool-background-image=$toolbar-tool-background-image]
* The sprite to use for {@link Ext.panel.Tool Tools} on a Toolbar
*
* @param {color} [$tool-glyph-color=$toolbar-tool-glyph-color]
* The color to use for the Toolbar's tool icons when {@link Global_CSS#$enable-font-icons} is `true`.
*
* @param {color} [$menu-overflow-glyph-color=$toolbar-menu-overflow-glyph-color]
* The color to use for the {@link #overflowHandler menu overflow} "more" icon when
* {@link Global_CSS#$enable-font-icons} is `true`.
*
* @param {string/list} [$menu-overflow-glyph=$toolbar-menu-overflow-glyph]
* Glyph for the {@link #overflowHandler menu overflow} "more" icon when
* {@link Global_CSS#$enable-font-icons} is `true`.
*
* @param {boolean} [$classic-scrollers=$toolbar-classic-scrollers]
* `true` to use classic-style scroller buttons. When `true` scroller buttons are given
* their hover state by changing their background-position, When `false` scroller buttons
* are given their hover state by applying opacity.
*
* @member Ext.toolbar.Toolbar
*/
@mixin extjs-toolbar-ui(
$ui,
$background-color: $toolbar-background-color,
$background-gradient: $toolbar-background-gradient,
$vertical-spacing: $toolbar-vertical-spacing,
$horizontal-spacing: $toolbar-horizontal-spacing,
$border-color: $toolbar-border-color,
$border-width: $toolbar-border-width,
$border-style: $toolbar-border-style,
$spacer-width: $toolbar-spacer-width,
$separator-color: $toolbar-separator-color,
$separator-highlight-color: $toolbar-separator-highlight-color,
$separator-horizontal-margin: $toolbar-separator-horizontal-margin,
$separator-horizontal-height: $toolbar-separator-horizontal-height,
$separator-horizontal-border-style: $toolbar-separator-horizontal-border-style,
$separator-horizontal-border-width: $toolbar-separator-horizontal-border-width,
$separator-vertical-margin: $toolbar-separator-vertical-margin,
$separator-vertical-border-style: $toolbar-separator-vertical-border-style,
$separator-vertical-border-width: $toolbar-separator-vertical-border-width,
$text-font-family: $toolbar-text-font-family,
$text-font-size: $toolbar-text-font-size,
$text-font-weight: $toolbar-text-font-weight,
$text-color: $toolbar-text-color,
$text-line-height: $toolbar-text-line-height,
$text-padding: $toolbar-text-padding,
$scroller-width: $toolbar-scroller-width,
$scroller-height: $toolbar-scroller-height,
$scroller-vertical-width: $toolbar-scroller-vertical-width,
$scroller-vertical-height: $toolbar-scroller-vertical-height,
$scroller-border-color: $toolbar-scroller-border-color,
$scroller-border-width: $toolbar-scroller-border-width,
$scroller-vertical-border-color: $toolbar-scroller-vertical-border-color,
$scroller-vertical-border-width: $toolbar-scroller-vertical-border-width,
$scroller-top-margin: $toolbar-scroller-top-margin,
$scroller-right-margin: $toolbar-scroller-right-margin,
$scroller-bottom-margin: $toolbar-scroller-bottom-margin,
$scroller-left-margin: $toolbar-scroller-left-margin,
$scroller-cursor: $toolbar-scroller-cursor,
$scroller-cursor-disabled: $toolbar-scroller-cursor-disabled,
$scroller-opacity: $toolbar-scroller-opacity,
$scroller-opacity-over: $toolbar-scroller-opacity-over,
$scroller-opacity-pressed: $toolbar-scroller-opacity-pressed,
$scroller-opacity-disabled: $toolbar-scroller-opacity-disabled,
$scroller-glyph-color: $toolbar-scroller-glyph-color,
$scroller-top-glyph: $toolbar-scroller-top-glyph,
$scroller-right-glyph: $toolbar-scroller-right-glyph,
$scroller-bottom-glyph: $toolbar-scroller-bottom-glyph,
$scroller-left-glyph: $toolbar-scroller-left-glyph,
$tool-background-image: $toolbar-tool-background-image,
$tool-glyph-color: $toolbar-tool-glyph-color,
$menu-overflow-glyph-color: $toolbar-menu-overflow-glyph-color,
$menu-overflow-glyph: $toolbar-menu-overflow-glyph,
$classic-scrollers: $toolbar-classic-scrollers
) {
$ui-padding: $vertical-spacing 0 $vertical-spacing $horizontal-spacing;
.#{$prefix}toolbar-#{$ui} {
padding: $ui-padding;
@if $include-rtl {
&.#{$prefix}rtl {
padding: $vertical-spacing $horizontal-spacing $vertical-spacing 0;
}
}
border-style: $border-style;
border-color: $border-color;
border-width: $border-width;
@include background-gradient($background-color, $background-gradient);
@if $include-ext-panel-tool {
.#{$prefix}tool-img {
@if $enable-font-icons {
color: $tool-glyph-color;
} @else if not is-null($tool-background-image) {
background-image: theme-background-image($tool-background-image);
}
@if is-null($background-gradient) {
// EXTJSIV-8846: partially transparent png images do not display correctly
// in winXP/IE8m when the image element has a transparent background.
// to fix this, we give the element the same background-color as the toolbar.
background-color: $background-color;
}
}
}
.#{$prefix}toolbar-item {
margin: 0 $horizontal-spacing 0 0;
@if $include-rtl {
&.#{$prefix}rtl {
margin: 0 0 0 $horizontal-spacing;
}
}
}
.#{$prefix}toolbar-separator-horizontal {
margin: $separator-horizontal-margin;
height: $separator-horizontal-height;
border-style: $separator-horizontal-border-style;
border-width: $separator-horizontal-border-width;
border-left-color: $separator-color;
border-right-color: $separator-highlight-color;
}
.#{$prefix}box-menu-after {
margin: 0 $horizontal-spacing;
}
}
.#{$prefix}toolbar-#{$ui}-vertical {
padding: $vertical-spacing $horizontal-spacing 0;
@if $include-rtl {
&.#{$prefix}rtl {
padding: $vertical-spacing $horizontal-spacing 0;
}
}
.#{$prefix}toolbar-item {
margin: 0 0 $vertical-spacing 0;
@if $include-rtl {
&.#{$prefix}rtl {
margin: 0 0 $vertical-spacing 0;
}
}
}
.#{$prefix}toolbar-separator-vertical {
margin: $separator-vertical-margin;
border-style: $separator-vertical-border-style;
border-width: $separator-vertical-border-width;
border-top-color: $separator-color;
border-bottom-color: $separator-highlight-color;
}
.#{$prefix}box-menu-after {
margin: $vertical-spacing 0;
}
}
@if $include-slicer-gradient and not is-null($background-gradient) {
.#{$prefix}nlg {
.#{$prefix}toolbar-#{$ui} {
background-image: slicer-background-image(toolbar-#{$ui}, 'toolbar/toolbar-#{$ui}-bg') !important;
background-repeat: repeat-x;
}
}
$stretch: slicer-background-stretch(toolbar-#{$ui}, bottom);
}
.#{$prefix}toolbar-text-#{$ui} {
padding: $text-padding;
color: $text-color;
font: $text-font-weight #{$text-font-size}/#{$text-line-height} $text-font-family;
}
.#{$prefix}toolbar-spacer-#{$ui} {
width: $spacer-width;
}
@if $include-ext-layout-container-boxoverflow-scroller {
@include extjs-box-scroller-ui(
$ui: $ui,
$type: 'toolbar',
$horizontal-width: $scroller-width,
$horizontal-height: $scroller-height,
$vertical-width: $scroller-vertical-width,
$vertical-height: $scroller-vertical-height,
$top-margin: $scroller-top-margin,
$right-margin: $scroller-right-margin,
$bottom-margin: $scroller-bottom-margin,
$left-margin: $scroller-left-margin,
$glyph-color: $scroller-glyph-color,
$top-glyph: $scroller-top-glyph,
$right-glyph: $scroller-right-glyph,
$bottom-glyph: $scroller-bottom-glyph,
$left-glyph: $scroller-left-glyph,
$horizontal-border-color: $scroller-border-color,
$horizontal-border-width: $scroller-border-width,
$vertical-border-color: $scroller-vertical-border-color,
$vertical-border-width: $scroller-vertical-border-width,
$container-padding: $ui-padding,
$cursor: $scroller-cursor,
$cursor-disabled: $scroller-cursor-disabled,
$align: middle,
$opacity: $scroller-opacity,
$opacity-over: $scroller-opacity-over,
$opacity-pressed: $scroller-opacity-pressed,
$opacity-disabled: $scroller-opacity-disabled,
$classic: $classic-scrollers,
$include-vertical: if($ui == 'footer', false, true)
);
}
// EXTJSIV-8846: partially transparent png images do not display correctly
// in winXP/IE8 when the image element has a transparent background.
// to fix this, we give the element the same background-color as the toolbar.
.#{$prefix}ie8 {
.#{$prefix}box-scroller-toolbar-#{$ui} {
background-color: $background-color;
}
}
@if $include-ext-layout-container-boxoverflow-menu {
.#{$prefix}toolbar-more-icon {
@if $enable-font-icons and ($menu-overflow-glyph != null) {
@include font-icon($menu-overflow-glyph);
color: $menu-overflow-glyph-color;
} @else {
background-image: theme-background-image('toolbar/#{$ui}-more');
@if $include-rtl {
&.#{$prefix}rtl {
background-image: theme-background-image('toolbar/#{$ui}-more-left');
}
}
}
}
}
@include x-slicer(toolbar-#{$ui});
}