saas-one/frontend/operation-web/ext/classic/theme-neutral/sass/var/toolbar/Toolbar.scss

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