extjs7 treelist自定义UI常用属性笔记

版本

7.4.0

SCSS

@include treelist-ui(
        $ui: mynav',
          // 背景色
        $background-color: $mainview-base-color,
        $padding: 5px 10px 0 10px,
          // micro模式样式============================
          // toolstrip
        $toolstrip-background-color: $mainview-base-color,
          // 浮动项指示器
        $tool-float-indicator-color: $base-color,
        $tool-float-indicator-width: 4px,
          // 选中项指示器
          //$tool-indicator-selected-color: $base-color,
          //$tool-indicator-selected-width: 5px,
          // 选中项
        $tool-selected-color: $base-color,
        $tool-selected-background-color: mix(white, $mainview-base-color, 10%),
          // 常规模式样式==============================
          // 展开项
        $item-expanded-background-color: #2c3845,
          // 选中项指示器
        $row-indicator-width: 5px,
        $row-indicator-selected-color: $base-color,
        $row-indicator-selected-over-color: lighten($base-color, 7%),
        $row-indicator-over-color: transparent,
          // 项目图标
        $item-icon-width: 44px,
        $item-icon-font-size: 18px,
        $item-icon-color: $panel-navigation-item-text-color,
        $item-icon-over-color: #fff,
          // 文本和图标间距
          //$item-text-icon-gap: 1px,
          // 项目文本
        $item-text-icon-gap: 0px,
        $item-text-font-size: 14px,
        $item-text-overflow: initial,
        $item-text-color: mix(white, $panel-navigation-item-text-color, 50%),
        $item-text-over-color: #ADB3B8,
          // 项目展开按钮
        $item-expander-width: 24px,
        $item-expander-font-size: 16px,
        $item-expander-color: #fff,
        $item-expander-over-color: #fff,
          //$item-expanded-child-background-color: $base-light-color,
          //$item-expanded-background-color: transparent,
          //
        $item-line-height: 35px,
        $row-over-background-color: mix(white, $mainview-base-color, 5%),
        $row-selected-background-color: mix(white, $mainview-base-color, 10%)
);