/** * @class Ext.grid.cell.Tree */ /** * @var {color} * Tree Cell text color */$treecell-color: dynamic(null); /** * @var {color} * Tree Cell text color when hovered */$treecell-hovered-color: dynamic(null); /** * @var {color} * Tree Cell text color when selected */$treecell-selected-color: dynamic(null); /** * @var {color} * Tree Cell text color when pressed */$treecell-pressed-color: dynamic(null); /** * @var {color} * Tree Cell background-color */$treecell-background-color: dynamic(null); /** * @var {color} * Tree Cell background-color when hovered */$treecell-hovered-background-color: dynamic(null); /** * @var {color} * Tree Cell background-color when selected */$treecell-selected-background-color: dynamic(null); /** * @var {color} * Tree Cell background-color when pressed */$treecell-pressed-background-color: dynamic(null); /** * @var {number} * Tree Cell {@link Ext.grid.Grid#columnLines column} border-width */$treecell-column-border-width: dynamic(null); /** * @var {string} * Tree Cell {@link Ext.grid.Grid#columnLines column} border-style */$treecell-column-border-style: dynamic(null); /** * @var {color} * Tree Cell {@link Ext.grid.Grid#columnLines column} border-color */$treecell-column-border-color: dynamic(null); /** * @var {number} * Tree Cell outline-width when focused */$treecell-focused-outline-width: dynamic(null); /** * @var {string} * Tree Cell outline-style when focused */$treecell-focused-outline-style: dynamic(null); /** * @var {color} * Tree Cell outline-color when focused */$treecell-focused-outline-color: dynamic(null); /** * @var {number} * Tree Cell outline-offset when focused */$treecell-focused-outline-offset: dynamic(null); /** * @var {string/number} * Tree Cell font-weight */$treecell-font-weight: dynamic(null); /** * @var {number} * Tree Cell font-size */$treecell-font-size: dynamic(null); /** * @var {number} * Tree Cell font-size in the {@link Global_CSS#$enable-big big} sizing scheme */$treecell-font-size-big: dynamic(null); /** * @var {number} * Tree Cell line-height */$treecell-line-height: dynamic(null); /** * @var {number} * Tree Cell line-height in the {@link Global_CSS#$enable-big big} sizing scheme */$treecell-line-height-big: dynamic(null); /** * @var {string} * Tree Cell font-family */$treecell-font-family: dynamic(null); /** * @var {number/list} * Tree Cell padding */$treecell-padding: dynamic($gridcell-padding); /** * @var {number/list} * Tree Cell padding in the {@link Global_CSS#$enable-big big} sizing scheme */$treecell-padding-big: dynamic($gridcell-padding-big); /** * @var {color} * Tree Cell icon color */$treecell-icon-color: dynamic($neutral-dark-color); /** * @var {number} * Tree Cell icon size */$treecell-icon-size: dynamic(16px); /** * @var {number} * Tree Cell icon size in the {@link Global_CSS#$enable-big big} sizing scheme */$treecell-icon-size-big: dynamic(18px); /** * @var {number} * Tree Cell icon font-size */$treecell-icon-font-size: dynamic(null); /** * @var {number} * Tree Cell icon font-size in the {@link Global_CSS#$enable-big big} sizing scheme */$treecell-icon-font-size-big: dynamic(null); /** * @var {number} * Tree Cell icon margin */$treecell-icon-margin: dynamic(0 5px); /** * @var {number} * Tree Cell icon margin in the {@link Global_CSS#$enable-big big} sizing scheme */$treecell-icon-margin-big: dynamic(0 8px); /** * @var {string} * Tree Cell branch node icon when collapsed */$treecell-collapsed-icon: dynamic($fa-var-folder); /** * @var {string} * Tree cell branch node icon when expanded */$treecell-expanded-icon: dynamic($fa-var-folder-open); /** * @var {string} * Tree Cell leaf node icon */$treecell-leaf-icon: dynamic($fa-var-file); /** * @var {string} * Tree Cell expander icon when collapsed */$treecell-expander-icon: dynamic($fa-var-caret-right); /** * @var {string} * Tree Cell expander icon when expanded */$treecell-expander-expanded-icon: dynamic($fa-var-caret-down); /** * @var {color} * Tree Cell expander icon color */$treecell-expander-color: dynamic($treecell-icon-color); /** * @var {number} * Tree Cell expander icon size */$treecell-expander-size: dynamic($treecell-icon-size); /** * @var {number} * Tree Cell expander icon size in the {@link Global_CSS#$enable-big big} sizing scheme */$treecell-expander-size-big: dynamic($treecell-icon-size-big); /** * @var {number} * Tree Cell expander icon font-size */$treecell-expander-font-size: dynamic(null); /** * @var {number} * Tree Cell expander icon font-size in the {@link Global_CSS#$enable-big big} sizing schem */$treecell-expander-font-size-big: dynamic(null); /** * @var {string/list} * Tree Cell checkbox icon when checked */$treecell-checked-checkbox-icon: dynamic($checkboxfield-checked-checkbox-icon); /** * @var {string/list} * Tree Cell checkbox icon */$treecell-checkbox-icon: dynamic($checkboxfield-checkbox-icon); /** * @var {string/list} * Tree Cell checkbox tri-state icon */$treecell-tri-state-checkbox-icon: dynamic($checkboxfield-intermediate-checkbox-icon); /** * @var {color} * tree Cell checkbox color when checked */$treecell-checked-checkbox-color: dynamic($checkboxfield-checked-checkbox-color); /** * @var {color} * tree Cell checkbox color when checked */$treecell-checkbox-color: dynamic($checkboxfield-checkbox-color); // To do - Need to remove this variable once we get tri state icon /** * @var {number} * tree Cell checkbox size */$treecell-checkbox-size: dynamic(18px); /** * @var {number} * tree Cell checkbox size */$treecell-horizonal-spacing: dynamic(0 5px); /** * @var {number} * Tree Cell checkbox icon left padding */$treecell-checkbox-padding: dynamic(5px); /** * Creates a visual theme for a Tree Cell. * * @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=gridcell] (protected) The {@link Ext.Class#xtype} to use * in CSS selectors. For use by UI mixins of derived classes. * * @param {color} $color * Tree Cell text color * * @param {color} $hovered-color * Tree Cell text color when hovered * * @param {color} $selected-color * Tree Cell text color when selected * * @param {color} $pressed-color * Tree Cell text color when pressed * * @param {color} $background-color * Tree Cell background-color * * @param {color} $hovered-background-color * Tree Cell background-color when hovered * * @param {color} $selected-background-color * Tree Cell background-color when selected * * @param {color} $pressed-background-color * Tree Cell background-color when pressed * * @param {number} $column-border-width * Tree Cell {@link Ext.grid.Grid#columnLines column} border-width * * @param {string} $column-border-style * Tree Cell {@link Ext.grid.Grid#columnLines column} border-style * * @param {color} $column-border-color * Tree Cell {@link Ext.grid.Grid#columnLines column} border-color * * @param {number} $focused-outline-width * Tree Cell outline-width when focused * * @param {string} $focused-outline-style * Tree Cell outline-style when focused * * @param {color} $focused-outline-color * Tree Cell outline-color when focused * * @param {number} $focused-outline-offset * Tree Cell outline-offset when focused * * @param {string/number} $font-weight * Tree Cell font-weight * * @param {number} $font-size * Tree Cell font-size * * @param {number} $font-size-big * Tree Cell font-size in the {@link Global_CSS#$enable-big big} sizing scheme * * @param {number} $line-height * Tree Cell line-height * * @param {number} $line-height-big * Tree Cell line-height in the {@link Global_CSS#$enable-big big} sizing scheme * * @param {string} $font-family * Tree Cell font-family * * @param {number/list} $padding * Tree Cell padding * * @param {number/list} $padding-big * Tree Cell padding in the {@link Global_CSS#$enable-big big} sizing scheme * * @param {color} $icon-color * Tree Cell icon color * * @param {number} $icon-size * Tree Cell icon size * * @param {number} $icon-size-big * Tree Cell icon size in the {@link Global_CSS#$enable-big big} sizing scheme * * @param {number} $icon-font-size * Tree Cell icon font-size * * @param {number} $icon-font-size-big * Tree Cell icon font-size in the {@link Global_CSS#$enable-big big} sizing scheme * * @param {number} $icon-margin * Tree Cell icon margin * * @param {number} $icon-margin-big * Tree Cell icon margin in the {@link Global_CSS#$enable-big big} sizing scheme * * @param {string} $collapsed-icon * Tree Cell branch node icon when collapsed * * @param {string} $expanded-icon * Tree cell branch node icon when expanded * * @param {string} $leaf-icon * Tree Cell leaf node icon * * @param {string} $expander-icon * Tree Cell expander icon when collapsed * * @param {string} $expander-expanded-icon * Tree Cell expander icon when expanded * * @param {color} $expander-color * Tree Cell expander icon color * * @param {number} $expander-size * Tree Cell expander icon size * * @param {number} $expander-size-big * Tree Cell expander icon size in the {@link Global_CSS#$enable-big big} sizing scheme * * @param {number} $expander-font-size * Tree Cell expander icon font-size * * @param {number} $expander-font-size-big * Tree Cell expander icon font-size in the {@link Global_CSS#$enable-big big} sizing schem * * @param {string} $checkbox-checked-icon * Tree Cell checkbox icon when it is checked * * @param {string} $checkbox-unchecked-icon * Tree Cell checkbox icon when it is unchecked * * @param {color} $checkbox-checked-icon-color * Tree Cell checkbox icon color when it is checked * * @param {color} $checkbox-unchecked-icon-color * Tree Cell checkbox icon color when it is unchecked * * @param {number} $checkbox-size * Tree Cell checkbox icon size * * @param {number} $checkbox-font-size * Tree Cell checkbox icon font-size */@mixin treecell-ui( $ui: null, $xtype: treecell, $color: null, $hovered-color: null, $selected-color: null, $pressed-color: null, $background-color: null, $hovered-background-color: null, $selected-background-color: null, $pressed-background-color: null, $column-border-width: null, $column-border-style: null, $column-border-color: null, $focused-outline-width: null, $focused-outline-style: null, $focused-outline-color: null, $focused-outline-offset: null, $font-weight: null, $font-size: null, $font-size-big: null, $line-height: null, $line-height-big: null, $font-family: null, $padding: null, $padding-big: null, $icon-color: null, $icon-size: null, $icon-size-big: null, $icon-font-size: null, $icon-font-size-big: null, $icon-margin: null, $icon-margin-big: null, $collapsed-icon: null, $expanded-icon: null, $leaf-icon: null, $expander-icon: null, $expander-expanded-icon: null, $expander-color: null, $expander-size: null, $expander-size-big: null, $expander-font-size: null, $expander-font-size-big: null, $checkbox-checked-icon: null, $checkbox-unchecked-icon: null, $checkbox-checked-icon-color: null, $checkbox-unchecked-icon-color: null, $checkbox-font-size:null) { $ui-suffix: ui-suffix($ui); $arguments: intersect-arguments(treecell-ui, gridcell-ui); $arguments: map-merge($arguments, ( // Padding has special handling in the treecell-ui mixin. Null out any padding // values to prevent gridcell-ui mixin from generating padding styles padding: null, padding-big: null )); @include gridcell-ui($arguments...); .#{$prefix}#{$xtype}#{$ui-suffix} { padding: box(0 right($padding) 0 left($padding)); @if $enable-big { .#{$prefix}big & { padding: box(0 right($padding-big) 0 left($padding-big)); } } .#{$prefix}expander-el { @include icon( $icon: $expander-icon, $color: $expander-color, $size: $expander-size, $size-big: $expander-size-big, $font-size: $expander-font-size, $font-size-big: $expander-font-size-big ); } &.#{$prefix}expanded .#{$prefix}expander-el { @include icon($expander-expanded-icon); } .#{$prefix}icon-el { @include icon( $color: $icon-color, $size: $icon-size, $size-big: $icon-size-big, $font-size: $icon-font-size, $font-size-big: $icon-font-size-big ); margin: $icon-margin; @if $enable-big { .#{$prefix}big & { margin: $icon-margin-big; } } } // When no iconCls present, use folders &.#{$prefix}no-icon { .#{$prefix}icon-el { @include icon($collapsed-icon); } &.#{$prefix}expanded .#{$prefix}icon-el { @include icon($expanded-icon); } &.#{$prefix}leaf .#{$prefix}icon-el { @include icon($leaf-icon); } } &.#{$prefix}treecell-checkable { .#{$prefix}check-el { font-size: $treecell-checkbox-size; height: $treecell-checkbox-size; margin: $treecell-horizonal-spacing; font-family: $checkboxfield-box-font-family; } &.#{$prefix}treecell-checked { .#{$prefix}check-el { @include icon( $icon: $checkbox-checked-icon, $color: $checkbox-checked-icon-color, $font-size: $checkbox-font-size ); } } &.#{$prefix}treecell-trimode { .#{$prefix}check-el { @include icon( $icon: $treecell-tri-state-checkbox-icon, $color: $checkbox-checked-icon-color, $font-size: $checkbox-font-size ); } } &.#{$prefix}treecell-unchecked { .#{$prefix}check-el { @include icon( $icon: $checkbox-unchecked-icon, $color: $checkbox-unchecked-icon-color, $font-size: $checkbox-font-size ); } } } &.#{$prefix}leaf .#{$prefix}expander-el + .#{$prefix}check-el:before { padding-left: $treecell-checkbox-padding; } // The indentation quantum for tree node levels is passed into a readable style. // Some browsers (FF, IE) don't support reading background-position-x background-position: ($expander-size + (left($icon-margin) or 0)) 0%; @if $enable-big { .x-big & { background-position: ($expander-size-big + (left($icon-margin-big) or 0)) 0%; } } } .#{$prefix}#{$xtype}#{$ui-suffix}-body-el, .#{$prefix}#{$xtype}#{$ui-suffix}-tool-dock > .#{$prefix}body-el { padding: box(top($padding) 0 bottom($padding) 0); @if $enable-big { .#{$prefix}big & { padding: box(top($padding-big) 0 bottom($padding-big) 0); } } }}