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