/** * @class Ext.Tool */ /** * @var {color} * Tool color */$tool-color: dynamic($neutral-dark-color); /** * @var {number} * Tool color when hovered */$tool-hovered-color: dynamic(null); /** * @var {number} * Tool color when pressed */$tool-pressed-color: dynamic(null); /** * @var {number} * Tool color when disabled */$tool-disabled-color: dynamic(null); /** * @var {color} * Tool background-color */$tool-background-color: dynamic(null); /** * @var {number} * Tool background-color when hovered */$tool-hovered-background-color: dynamic(null); /** * @var {number} * Tool background-color when pressed */$tool-pressed-background-color: dynamic(null); /** * @var {number} * Tool background-color when disabled */$tool-disabled-background-color: dynamic(null); /** * @var {number} * Tool opacity */$tool-opacity: dynamic(null); /** * @var {number} * Tool opacity when hovered */$tool-hovered-opacity: dynamic(.8); /** * @var {number} * Tool opacity when pressed */$tool-pressed-opacity: dynamic(.6); /** * @var {number} * Tool opacity when disabled */$tool-disabled-opacity: dynamic(.3); /** * @var {number} * Tool border radius */$tool-border-radius: dynamic(null); /** * @var {number} * Tool border radius in the {@link Global_CSS#$enable-big big} sizing scheme */$tool-border-radius-big: dynamic(null); /** * @var {number} * Tool icon size */$tool-size: dynamic(16px); /** * @var {number} * Tool icon size in the {@link Global_CSS#$enable-big big} sizing scheme */$tool-size-big: dynamic(24px); /** * @var {number} * Tool width */$tool-width: dynamic(null); /** * @var {number} * Tool width in the {@link Global_CSS#$enable-big big} sizing scheme */$tool-width-big: dynamic(null); /** * @var {number} * Tool height */$tool-height: dynamic(null); /** * @var {number} * Tool height in the {@link Global_CSS#$enable-big big} sizing scheme */$tool-height-big: dynamic(null); /** * @var {number} * Tool margin */$tool-margin: dynamic(null); /** * @var {number} * Tool margin in the {@link Global_CSS#$enable-big big} sizing scheme */$tool-margin-big: dynamic(null); /** * @var {number} * Tool font-size */$tool-font-size: dynamic(null); /** * @var {number} * Tool font-size in the {@link Global_CSS#$enable-big big} sizing scheme */$tool-font-size-big: dynamic(null); /** * @var {number} * The space between Tools */$tool-spacing: dynamic(6px); /** * @var {number} * The space between Tools in the {@link Global_CSS#$enable-big big} sizing scheme */$tool-spacing-big: dynamic(8px); /** * @var {string} * Tool cursor */$tool-cursor: dynamic(pointer); /** * @var {string} * Tool cursor when disabled */$tool-disabled-cursor: dynamic(default); /** * @var {number} * Tool outline width when focused */$tool-focused-outline-width: dynamic(1px); /** * @var {string} * Tool outline style when focused */$tool-focused-outline-style: dynamic(solid); /** * @var {color} * Tool outline color when focused */$tool-focused-outline-color: dynamic($base-color); /** * @var {number} * Tool outline offset when focused */$tool-focused-outline-offset: dynamic(null); /** * @var {Map} * Parameters for the `itemheader` tool UI used for tools in a list item header */$tool-itemheader-ui: dynamic(null); /** * @var {Map} * Parameters for the `rowheader` tool UI used for tools in a grid row header * @ui tool-ui */$tool-rowheader-ui: dynamic(null); /** * @var {Map} * Parameters for the `listitem` tool UI used for tools in a list item */$tool-listitem-ui: dynamic(null); /** * @var {Map} * Parameters for the `gridcell` tool UI used for tools in a grid cell */$tool-gridcell-ui: dynamic(null); /** * @var {Map} * Parameters for the `gridcolumn` tool UI used for tools in a grid column header */$tool-gridcolumn-ui: dynamic(null); /** * @var {Map} * Parameters for the `boxscroller` tool UI used for tools in any container using box scroller * @ui tool-ui */$tool-boxscroller-ui: dynamic(( width: 24px, height: 24px, width-big: 32px, height-big: 32px )); /** * @var {Map} * Parameters for the `boxscroller` tool UI used for tools in toolbar using box scroller * @ui tool-ui */$tool-boxscroller-toolbar-ui: dynamic(( color: #fff, opacity: .5, hovered-opacity: .6, pressed-opacity: .7 )); /** * @var {Map} * Parameters for the `boxscroller` tool UI used for tools in a menu using box scroller * @ui tool-ui */$tool-boxscroller-menu-ui: dynamic(null); /** * @var {Map} * Parameters for the `boxscroller` tool UI used for tools in a tabbar using box scroller * @ui tool-ui */$tool-boxscroller-tabbar-ui: dynamic(( color: #fff, opacity: .5, hovered-opacity: .6, pressed-opacity: .7 )); /** * Creates a visual theme for a tool. * * @param {string} $ui * The name of the UI being created. Can not included spaces or special punctuation * (used in CSS class names). * * @param {String} [$xtype=tool] (protected) The {@link Ext.Class#xtype} to use * in CSS selectors. For use by UI mixins of derived classes. * * @param {color} $color * The color of tool icon * * @param {number} $hovered-color * Tool color when hovered * * @param {number} $pressed-color * Tool color when pressed * * @param {number} $disabled-color * Tool color when disabled * * @param {color} $background-color * The background color of tool icon * * @param {number} $hovered-background-color * Tool background color when hovered * * @param {number} $pressed-background-color * Tool background color when pressed * * @param {number} $disabled-background-color * Tool background-color when disabled * * @param {number} $opacity * Tool opacity * * @param {number} $hovered-opacity * Tool opacity when hovered * * @param {number} $pressed-opacity * Tool opacity when pressed * * @param {number} $disabled-opacity * Tool opacity when disabled * * @param {number} $border-radius * Tool border radius * * @param {number} $border-radius-big * Tool border radius in the {@link Global_CSS#$enable-big big} sizing scheme * * @param {number} $size * Tool icon size * * @param {number} $size-big * Tool icon size in the {@link Global_CSS#$enable-big big} sizing scheme * * @param {number} $width * Tool width * * @param {number} $width-big in the {@link Global_CSS#$enable-big big} sizing scheme * Tool width-big * * @param {number} $height * Tool height * * @param {number} $height-big in the {@link Global_CSS#$enable-big big} sizing scheme * Tool height-big * * @param {number} $margin * Tool margin * * @param {number} $margin-big in the {@link Global_CSS#$enable-big big} sizing scheme * Tool margin-big * * @param {number} $font-size * Tool icon font-size * * @param {number} $font-size-big * Tool icon font-size in the {@link Global_CSS#$enable-big big} sizing scheme * * @param {number} $spacing * The space between Tools * * @param {number} $spacing-big * The space between Tools in the {@link Global_CSS#$enable-big big} sizing scheme * * @param {string} $cursor * Tool cursor * * @param {string} $disabled-cursor * Tool cursor when disabled * * @param {number} $focused-outline-width * Tool outline width when focused * * @param {string} $focused-outline-style * Tool outline style when focused * * @param {color} $focused-outline-color * Tool outline color when focused * * @param {number} $focused-outline-offset * Tool outline offset when focused */@mixin tool-ui( $ui: null, $xtype: tool, $color: null, $hovered-color: null, $pressed-color: null, $disabled-color: null, $background-color: null, $hovered-background-color: null, $pressed-background-color: null, $disabled-background-color: null, $opacity: null, $hovered-opacity: null, $pressed-opacity: null, $disabled-opacity: null, $border-radius: null, $border-radius-big: null, $size: null, $size-big: null, $width: null, $width-big: null, $height: null, $height-big: null, $margin: null, $margin-big: null, $font-size: null, $font-size-big: null, $spacing: null, $spacing-big: null, $cursor: null, $disabled-cursor: null, $focused-outline-width: null, $focused-outline-style: null, $focused-outline-color: null, $focused-outline-offset: null) { $ui-suffix: ui-suffix($ui); .#{$prefix}#{$xtype}#{$ui-suffix} { width: $width; height: $height; margin: $margin; cursor: $cursor; border-radius: $border-radius; @if $enable-big { .#{$prefix}big & { width: $width-big; height: $height-big; margin: $margin-big; border-radius: $border-radius-big; } } .#{$prefix}icon-el { background-color: $background-color; opacity: $opacity; @include icon( $color: $color, $size: $size, $size-big: $size-big, $font-size: $font-size, $font-size-big: $font-size-big ); } @if $spacing != null { &.#{$prefix}start { margin: 0 $spacing 0 0; @if $enable-big { .#{$prefix}big & { margin: 0 $spacing-big 0 0; } } .#{$prefix}reverse > & { margin: 0 0 0 $spacing; @if $enable-big { .#{$prefix}big & { margin: 0 0 0 $spacing-big; } } } .#{$prefix}vertical > & { margin: 0 0 $spacing; @if $enable-big { .#{$prefix}big & { margin: 0 0 $spacing-big; } } } .#{$prefix}vertical.#{$prefix}reverse > & { margin: $spacing 0 0; @if $enable-big { .#{$prefix}big & { margin: $spacing-big 0 0; } } } } &.#{$prefix}end { margin: 0 0 0 $spacing; @if $enable-big { .#{$prefix}big & { margin: 0 0 0 $spacing-big; } } .#{$prefix}reverse > & { margin: 0 $spacing 0 0; @if $enable-big { .#{$prefix}big & { margin: 0 $spacing-big 0 0; } } } .#{$prefix}vertical > & { margin: $spacing 0 0; @if $enable-big { .#{$prefix}big & { margin: $spacing-big 0 0; } } } .#{$prefix}vertical.#{$prefix}reverse > & { margin: 0 0 $spacing; @if $enable-big { .#{$prefix}big & { margin: 0 0 $spacing-big; } } } } } &.#{$prefix}hovered { color: $hovered-color; background-color: $hovered-background-color; .#{$prefix}icon-el { opacity: $hovered-opacity; } } &.#{$prefix}pressed { color: $pressed-color; background-color: $pressed-background-color; .#{$prefix}icon-el { opacity: $pressed-opacity; } } &.#{$prefix}focused { .#{$prefix}keyboard-mode & { @include outline($focused-outline-width, $focused-outline-style, $focused-outline-color, $focused-outline-offset); } } &.#{$prefix}disabled { cursor: $disabled-cursor; } // Passive (purely decorative) Tools are set disabled, but they must not // *appear* disabled. &.#{$prefix}disabled:not(.#{$prefix}passive) { color: $disabled-color; background-color: $disabled-background-color; .#{$prefix}icon-el { opacity: $disabled-opacity; } } }} // ---------------------------------------------------------------- // Global variables that do not affect the UI // ---------------------------------------------------------------- //# fashion replaces $panel-tool-close-icon /** * @var {string/list} * The "close" tool icon */$tool-close-icon: dynamic($fa-var-times $font-icon-font-family); /** * @var {string/list} * The "disclosure" tool icon */$tool-disclosure-icon: dynamic($fa-var-arrow-circle-right $font-icon-font-family); //# fashion replaces $panel-tool-minimize-icon /** * @var {string/list} * The "minimize" tool icon */$tool-minimize-icon: dynamic($ext-var-minimize ExtJS); //# fashion replaces $panel-tool-maximize-icon /** * @var {string/list} * The "maximize" tool icon */$tool-maximize-icon: dynamic($fa-var-expand $font-icon-font-family); //# fashion replaces $panel-tool-restore-icon /** * @var {string/list} * The "restore" tool icon */$tool-restore-icon: dynamic($fa-var-compress $font-icon-font-family); //# fashion replaces $panel-tool-toggle-up-icon /** * @var {string/list} * The up "toggle" tool icon */$tool-toggle-up-icon: dynamic($fa-var-chevron-up $font-icon-font-family); //# fashion replaces $panel-tool-toggle-down-icon /** * @var {string/list} * The down "toggle" tool icon */$tool-toggle-down-icon: dynamic($fa-var-chevron-down $font-icon-font-family); //# fashion replaces $panel-tool-gear-icon /** * @var {string/list} * The "gear" tool icon */$tool-gear-icon: dynamic($fa-var-cog $font-icon-font-family); //# fashion replaces $panel-tool-prev-icon /** * @var {string/list} * The "prev" tool icon */$tool-prev-icon: dynamic($fa-var-chevron-left $font-icon-font-family); //# fashion replaces $panel-tool-next-icon /** * @var {string/list} * The "next" tool icon */$tool-next-icon: dynamic($fa-var-chevron-right $font-icon-font-family); //# fashion replaces $panel-tool-pin-icon /** * @var {string/list} * The "pin" tool icon */$tool-pin-icon: dynamic($fa-var-thumbtack $font-icon-font-family); //# fashion replaces $panel-tool-unpin-icon /** * @var {string/list} * The "unpin" tool icon */$tool-unpin-icon: dynamic($ext-var-unpin ExtJS); //# fashion replaces $panel-tool-right-icon /** * @var {string/list} * The "right" tool icon */$tool-right-icon: dynamic($fa-var-caret-right $font-icon-font-family); //# fashion replaces $panel-tool-left-icon /** * @var {string/list} * The "left" tool icon */$tool-left-icon: dynamic($fa-var-caret-left $font-icon-font-family); //# fashion replaces $panel-tool-down-icon /** * @var {string/list} * The "down" tool icon */$tool-down-icon: dynamic($fa-var-caret-down $font-icon-font-family); //# fashion replaces $panel-tool-up-icon /** * @var {string/list} * The "up" tool icon */$tool-up-icon: dynamic($fa-var-caret-up $font-icon-font-family); //# fashion replaces $panel-tool-refresh-icon /** * @var {string/list} * The "refresh" tool icon */$tool-refresh-icon: dynamic($fa-var-sync $font-icon-font-family); //# fashion replaces $panel-tool-plus-icon /** * @var {string/list} * The "plus" tool icon */$tool-plus-icon: dynamic($fa-var-plus $font-icon-font-family); //# fashion replaces $panel-tool-menu-icon /** * @var {string/list} * The "menu" tool icon */$tool-menu-icon: dynamic($fa-var-bars $font-icon-font-family); //# fashion replaces $panel-tool-minus-icon /** * @var {string/list} * The "minus" tool icon */$tool-minus-icon: dynamic($fa-var-minus $font-icon-font-family); //# fashion replaces $panel-tool-search-icon /** * @var {string/list} * The "search" tool icon */$tool-search-icon: dynamic($fa-var-search $font-icon-font-family); //# fashion replaces $panel-tool-save-icon /** * @var {string/list} * The "save" tool icon */$tool-save-icon: dynamic($fa-var-save $font-icon-font-family); //# fashion replaces $panel-tool-help-icon /** * @var {string/list} * The "help" tool icon */$tool-help-icon: dynamic($fa-var-question $font-icon-font-family); //# fashion replaces $panel-tool-print-icon /** * @var {string/list} * The "print" tool icon */$tool-print-icon: dynamic($fa-var-print $font-icon-font-family); //# fashion replaces $panel-tool-expand-icon /** * @var {string/list} * The "expand" tool icon */$tool-expand-icon: dynamic($ext-var-expand ExtJS); //# fashion replaces $panel-tool-collapse-icon /** * @var {string/list} * The "collapse" tool icon */$tool-collapse-icon: dynamic($ext-var-collapse ExtJS); //# fashion replaces $panel-tool-resize-icon /** * @var {string/list} * The "resize" tool icon */$tool-resize-icon: dynamic($fa-var-arrows-h $font-icon-font-family); //# fashion replaces $panel-tool-move-icon /** * @var {string/list} * The "move" tool icon */$tool-move-icon: dynamic($fa-var-arrows $font-icon-font-family); //# fashion replaces $panel-tool-expand-bottom-icon /** * @var {string/list} * The downward "expand" tool icon */$tool-expand-bottom-icon: dynamic($fa-var-caret-down $font-icon-font-family); //# fashion replaces $panel-tool-collapse-bottom-icon /** * @var {string/list} * The downward "collapse" tool icon */$tool-collapse-bottom-icon: dynamic($fa-var-caret-down $font-icon-font-family); //# fashion replaces $panel-tool-expand-top-icon /** * @var {string/list} * The upward "expand" tool icon */$tool-expand-top-icon: dynamic($fa-var-caret-up $font-icon-font-family); //# fashion replaces $panel-tool-collapse-top-icon /** * @var {string/list} * The upward "collapse" tool icon */$tool-collapse-top-icon: dynamic($fa-var-caret-up $font-icon-font-family); //# fashion replaces $panel-tool-expand-left-icon /** * @var {string/list} * The left "expand" tool icon */$tool-expand-left-icon: dynamic($fa-var-caret-left $font-icon-font-family); //# fashion replaces $panel-tool-collapse-left-icon /** * @var {string/list} * The left "collapse" tool icon */$tool-collapse-left-icon: dynamic($fa-var-caret-left $font-icon-font-family); //# fashion replaces $panel-tool-expand-right-icon /** * @var {string/list} * The right "expand" tool icon */$tool-expand-right-icon: dynamic($fa-var-caret-right $font-icon-font-family); //# fashion replaces $panel-tool-collapse-right-icon /** * @var {string/list} * The right "collapse" tool icon */$tool-collapse-right-icon: dynamic($fa-var-caret-right $font-icon-font-family); /** * @var {string/list} * The "edit" tool icon */$tool-edit-icon: dynamic($fa-var-edit $font-icon-font-family); /** * @var {string/list} * The "trash" tool icon */$tool-trash-icon: dynamic($fa-var-trash $font-icon-font-family); /** * @var {string/list} * The scroll up tool icon used by box scroller */$tool-scroll-up-icon: dynamic($fa-var-chevron-up $font-icon-font-family); /** * @var {string/list} * The scroll down tool icon used by box scroller */$tool-scroll-down-icon: dynamic($fa-var-chevron-down $font-icon-font-family); /** * @var {string/list} * The scroll left tool icon used by box scroller */$tool-scroll-left-icon: dynamic($fa-var-chevron-left $font-icon-font-family); /** * @var {string/list} * The scroll right tool icon used by box scroller */$tool-scroll-right-icon: dynamic($fa-var-chevron-right $font-icon-font-family);