From bb807a44991ee869ee1e4a7d7f7a40271b5ca3c9 Mon Sep 17 00:00:00 2001
From: guy <guy@finereport.com>
Date: Sun, 14 Feb 2021 15:10:47 +0800
Subject: [PATCH] =?UTF-8?q?=E7=A7=BB=E5=8A=A8=E7=AB=AF=E9=80=82=E9=85=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/case/segment/button.segment.js            |   2 +-
 src/less/core/utils/common.less               | 766 +-----------------
 src/less/core/utils/list-item.less            | 731 +++++++++++++++++
 .../core/utils/{pos.less => position.less}    |  13 +-
 .../utils/{overflow.less => typographic.less} |  18 +-
 src/less/lib/colors.less                      |  37 +-
 6 files changed, 785 insertions(+), 782 deletions(-)
 create mode 100644 src/less/core/utils/list-item.less
 rename src/less/core/utils/{pos.less => position.less} (74%)
 rename src/less/core/utils/{overflow.less => typographic.less} (73%)

diff --git a/src/case/segment/button.segment.js b/src/case/segment/button.segment.js
index d3bf0b286..d7ef1373d 100644
--- a/src/case/segment/button.segment.js
+++ b/src/case/segment/button.segment.js
@@ -10,7 +10,7 @@ BI.SegmentButton = BI.inherit(BI.BasicButton, {
     _defaultConfig: function () {
         var conf = BI.SegmentButton.superclass._defaultConfig.apply(this, arguments);
         return BI.extend(conf, {
-            baseCls: (conf.baseCls || "") + " bi-segment-button bi-list-item-select",
+            baseCls: (conf.baseCls || "") + " bi-segment-button bi-list-item-select2",
             shadow: true,
             readonly: true,
             hgap: 5
diff --git a/src/less/core/utils/common.less b/src/less/core/utils/common.less
index 1b5965b26..af6fa5e3d 100644
--- a/src/less/core/utils/common.less
+++ b/src/less/core/utils/common.less
@@ -170,7 +170,7 @@ textarea {
   }
 }
 
-//提示区域, 灰色字体
+// 提示区域, 灰色字体
 .bi-tips {
   color: @color-bi-text-tips;
   & .bi-input {
@@ -181,7 +181,7 @@ textarea {
   }
 }
 
-//边框
+// 边框
 .bi-border {
   border: 1px solid @color-bi-border-line;
   &.disabled {
@@ -254,7 +254,7 @@ textarea {
   }
 }
 
-//分割线
+// 分割线
 .bi-split {
   border: 1px solid @border-color-light-line;
 }
@@ -334,7 +334,7 @@ textarea {
   font-weight: 700;
 }
 
-//标红
+// 标红
 .bi-keyword-red-mark {
   color: @color-bi-text-redmark;
   & .bi-input {
@@ -345,7 +345,7 @@ textarea {
   }
 }
 
-//高亮
+// 高亮
 .bi-high-light {
   color: @color-bi-text-highlight;
   & .bi-input {
@@ -423,7 +423,7 @@ textarea {
   }
 }
 
-//水印
+// 水印
 .bi-water-mark {
   color: @font-color-tips;
   cursor: text;
@@ -448,7 +448,7 @@ textarea {
   }
 }
 
-//resize
+// resizer
 .bi-resizer {
   background: @color-bi-background-black;
   .opacity(0.2);
@@ -461,38 +461,33 @@ textarea {
   }
 }
 
+// 蒙板
 .bi-mask {
-  color: @color-bi-background-default;
+  color: @color-bi-text;
   & .bi-input {
-    color: @color-bi-background-default;
+    color: @color-bi-text;
   }
   & .bi-textarea {
-    color: @color-bi-background-default;
+    color: @color-bi-text;
   }
   .background-color(@color-bi-background-black, 20%);
 }
 
 .bi-theme-dark {
   .bi-mask {
-    color: @color-bi-background-default-theme-dark;
+    color: @color-bi-text-white-theme-dark;
     & .bi-input {
-      color: @color-bi-background-default-theme-dark;
+      color: @color-bi-text-white-theme-dark;
     }
     & .bi-textarea {
-      color: @color-bi-background-default-theme-dark;
+      color: @color-bi-text-white-theme-dark;
     }
     .background-color(@color-bi-background-default, 20%);
   }
 }
 
+// 遮罩
 .bi-z-index-mask {
-  //color: @color-bi-background-default;
-  //& .bi-input {
-  //  color: @color-bi-background-default;
-  //}
-  //& .bi-textarea {
-  //  color: @color-bi-background-default;
-  //}
   .background-color(@color-bi-background-black, 50%);
 }
 
@@ -508,734 +503,3 @@ textarea {
     .background-color(@color-bi-background-black-theme-dark, 50%);
   }
 }
-
-//只有背景变化
-.bi-list-item {
-  &:hover, &.hover {
-    color: @color-bi-text-black;
-    & .bi-input {
-      color: @color-bi-text-black;
-    }
-    & .bi-textarea {
-      color: @color-bi-text-black;
-    }
-    .background-color(@color-bi-background-highlight, 10%);
-  }
-  &.disabled {
-    &, &:hover, &:active {
-      background-color: transparent !important;
-      color: @color-bi-text-disabled !important;
-      & .bi-input {
-        color: @color-bi-text-disabled !important;
-      }
-      & .bi-textarea {
-        color: @color-bi-text-disabled !important;
-      }
-      & .bi-high-light {
-        color: @color-bi-text-disabled !important;
-      }
-    }
-  }
-}
-
-.bi-theme-dark {
-  .bi-list-item {
-    &:hover, &.hover {
-      color: @color-bi-text;
-      & .bi-input {
-        color: @color-bi-text;
-      }
-      & .bi-textarea {
-        color: @color-bi-text;
-      }
-      .background-color(@color-bi-background-highlight, 10%);
-    }
-    &.disabled {
-      &, &:hover, &:active {
-        background-color: transparent !important;
-        color: @color-bi-text-disabled-theme-dark !important;
-        & .bi-input {
-          color: @color-bi-text-disabled-theme-dark !important;
-        }
-        & .bi-textarea {
-          color: @color-bi-text-disabled-theme-dark !important;
-        }
-        & .bi-high-light {
-          color: @color-bi-text-disabled-theme-dark !important;
-        }
-      }
-    }
-  }
-}
-
-.bi-list-item-border {
-  &:active, &.active {
-    border: 1px solid @color-bi-border-highlight;
-  }
-}
-
-//极简,hover文字高亮一下
-.bi-list-item-simple {
-  &:hover, &.hover {
-    color: @color-bi-text-highlight;
-    & .bi-input {
-      color: @color-bi-text-highlight;
-    }
-    & .bi-textarea {
-      color: @color-bi-text-highlight;
-    }
-  }
-  &.disabled {
-    &, &:hover, &:active {
-      color: @color-bi-text-disabled !important;
-      & .bi-input {
-        color: @color-bi-text-disabled !important;
-      }
-      & .bi-textarea {
-        color: @color-bi-text-disabled !important;
-      }
-      & .bi-high-light {
-        color: @color-bi-text-disabled !important;
-      }
-    }
-  }
-}
-
-// 只有文字在hover和active时变化
-.bi-list-item-effect {
-  &:hover {
-    color: @color-bi-text-black;
-    & .bi-input {
-      color: @color-bi-text-black;
-    }
-    & .bi-textarea {
-      color: @color-bi-text-black;
-    }
-  }
-  &.active, &:active {
-    color: @color-bi-text-highlight;
-    & .bi-input {
-      color: @color-bi-text-highlight;
-    }
-    & .bi-textarea {
-      color: @color-bi-text-highlight;
-    }
-  }
-  &.disabled {
-    &, &:hover, &:active {
-      color: @color-bi-text-disabled !important;
-      & .bi-input {
-        color: @color-bi-text-disabled !important;
-      }
-      & .bi-textarea {
-        color: @color-bi-text-disabled !important;
-      }
-      & .bi-high-light {
-        color: @color-bi-text-disabled !important;
-      }
-    }
-  }
-}
-
-.bi-theme-dark {
-  .bi-list-item-effect {
-    &:hover {
-      color: @color-bi-text;
-      & .bi-input {
-        color: @color-bi-text;
-      }
-      & .bi-textarea {
-        color: @color-bi-text;
-      }
-    }
-    &.active, &:active {
-      color: @color-bi-text-highlight;
-      & .bi-input {
-        color: @color-bi-text-highlight;
-      }
-      & .bi-textarea {
-        color: @color-bi-text-highlight;
-      }
-    }
-    &.disabled {
-      &, &:hover, &:active {
-        background-color: transparent !important;
-        color: @color-bi-text-disabled-theme-dark !important;
-        & .bi-input {
-          color: @color-bi-text-disabled-theme-dark !important;
-        }
-        & .bi-textarea {
-          color: @color-bi-text-disabled-theme-dark !important;
-        }
-        & .bi-high-light {
-          color: @color-bi-text-disabled-theme-dark !important;
-        }
-      }
-    }
-  }
-}
-
-//文字和背景hover和active时变化, hover和点击时文本和背景变化，active后文本变化，背景不变化
-.bi-list-item-active {
-  &:hover, &.hover {
-    color: @color-bi-text-black;
-    & .bi-input {
-      color: @color-bi-text-black;
-    }
-    & .bi-textarea {
-      color: @color-bi-text-black;
-    }
-    .background-color(@color-bi-background-highlight, 10%);
-  }
-  &:active {
-    color: @color-bi-text-highlight;
-    & .bi-input {
-      color: @color-bi-text-highlight;
-    }
-    & .bi-textarea {
-      color: @color-bi-text-highlight;
-    }
-    .background-color(@color-bi-background-highlight, 15%);
-  }
-  &.active {
-    color: @color-bi-text-highlight;
-    & .bi-input {
-      color: @color-bi-text-highlight;
-    }
-    & .bi-textarea {
-      color: @color-bi-text-highlight;
-    }
-  }
-  &.disabled {
-    &, &:hover, &:active {
-      background-color: transparent !important;
-      color: @color-bi-text-disabled !important;
-      & .bi-input {
-        color: @color-bi-text-disabled !important;
-      }
-      & .bi-textarea {
-        color: @color-bi-text-disabled !important;
-      }
-      & .bi-high-light {
-        color: @color-bi-text-disabled !important;
-      }
-    }
-  }
-}
-
-.bi-theme-dark {
-  .bi-list-item-active {
-    &:hover, &.hover {
-      color: @color-bi-text;
-      & .bi-input {
-        color: @color-bi-text;
-      }
-      & .bi-textarea {
-        color: @color-bi-text;
-      }
-      .background-color(@color-bi-background-default, 5%);
-    }
-    &.active, &:active {
-      color: @color-bi-text-highlight;
-      & .bi-input {
-        color: @color-bi-text-highlight;
-      }
-      & .bi-textarea {
-        color: @color-bi-text-highlight;
-      }
-      .background-color(@color-bi-background-default, 5%);
-    }
-    &.disabled {
-      &, &:hover, &:active {
-        background-color: transparent !important;
-        color: @color-bi-text-disabled-theme-dark !important;
-        & .bi-input {
-          color: @color-bi-text-disabled-theme-dark !important;
-        }
-        & .bi-textarea {
-          color: @color-bi-text-disabled-theme-dark !important;
-        }
-        & .bi-high-light {
-          color: @color-bi-text-disabled-theme-dark !important;
-        }
-      }
-    }
-  }
-}
-
-//文字和背景hover和active时变化 hover
-.bi-list-item-active2 {
-  &:hover, &.hover {
-    color: @color-bi-text-black;
-    & .bi-input {
-      color: @color-bi-text-black;
-    }
-    & .bi-textarea {
-      color: @color-bi-text-black;
-    }
-    .background-color(@color-bi-background-highlight, 10%);
-  }
-  &:active, &.active {
-    color: @color-bi-text-highlight;
-    & .bi-input {
-      color: @color-bi-text-highlight;
-    }
-    & .bi-textarea {
-      color: @color-bi-text-highlight;
-    }
-    .background-color(@color-bi-background-highlight, 15%);
-  }
-  &.disabled {
-    &, &:hover, &:active {
-      background-color: transparent !important;
-      color: @color-bi-text-disabled !important;
-      & .bi-input {
-        color: @color-bi-text-disabled !important;
-      }
-      & .bi-textarea {
-        color: @color-bi-text-disabled !important;
-      }
-      & .bi-high-light {
-        color: @color-bi-text-disabled !important;
-      }
-    }
-  }
-}
-
-.bi-theme-dark {
-  .bi-list-item-active2 {
-    &:hover, &.hover {
-      color: @color-bi-text;
-      & .bi-input {
-        color: @color-bi-text;
-      }
-      & .bi-textarea {
-        color: @color-bi-text;
-      }
-      .background-color(@color-bi-background-highlight, 10%);
-    }
-    &:active, &.active {
-      color: @color-bi-text-highlight;
-      & .bi-input {
-        color: @color-bi-text-highlight;
-      }
-      & .bi-textarea {
-        color: @color-bi-text-highlight;
-      }
-      .background-color(@color-bi-background-highlight, 15%);
-    }
-    &.disabled {
-      &, &:hover, &:active {
-        background-color: transparent !important;
-        color: @color-bi-text-disabled-theme-dark !important;
-        & .bi-input {
-          color: @color-bi-text-disabled-theme-dark !important;
-        }
-        & .bi-textarea {
-          color: @color-bi-text-disabled-theme-dark !important;
-        }
-        & .bi-high-light {
-          color: @color-bi-text-disabled-theme-dark !important;
-        }
-      }
-    }
-  }
-}
-
-// 激活和选中时背景高亮
-.bi-list-item-select {
-  &:hover, &.hover {
-    .background-color(@color-bi-background-highlight, 10%);
-  }
-  &:active, &.active {
-    color: @color-bi-text;
-    & .bi-input {
-      color: @color-bi-text;
-    }
-    & .bi-textarea {
-      color: @color-bi-text;
-    }
-    background-color: @color-bi-background-highlight;
-    & .bi-high-light {
-      color: @color-bi-text;
-    }
-  }
-  &.button-success {
-    &:active, &.active {
-      color: @color-bi-text;
-      background-color: @color-bi-background-success;
-      & .bi-input {
-        color: @color-bi-text;
-      }
-      & .bi-textarea {
-        color: @color-bi-text;
-      }
-      & .bi-high-light {
-        color: @color-bi-text;
-      }
-      &.bi-high-light-border {
-        border-color: @color-bi-border-success;
-      }
-    }
-  }
-  &.button-warning {
-    & {
-      color: @color-bi-text-failure;
-      & .bi-input {
-        color: @color-bi-text-failure;
-      }
-      & .bi-textarea {
-        color: @color-bi-text-failure;
-      }
-      & .bi-high-light {
-        color: @color-bi-text-failure;
-      }
-      &.bi-high-light-border {
-        border-color: @color-bi-border-failure;
-      }
-    }
-    &:hover, &.hover {
-      color: @color-bi-text-failure;
-      & .bi-input {
-        color: @color-bi-text-failure;
-      }
-      & .bi-textarea {
-        color: @color-bi-text-failure;
-      }
-      background-color: @color-bi-background-light-failure;
-      & .bi-high-light {
-        color: @color-bi-text-failure;
-      }
-      &.bi-high-light-border {
-        border-color: @color-bi-border-failure;
-      }
-    }
-    &:active, &.active {
-      color: @color-bi-text;
-      & .bi-input {
-        color: @color-bi-text;
-      }
-      & .bi-textarea {
-        color: @color-bi-text;
-      }
-      background-color: @color-bi-background-failure;
-      & .bi-high-light {
-        color: @color-bi-text;
-      }
-      &.bi-high-light-border {
-        border-color: @color-bi-border-failure;
-      }
-    }
-  }
-  &.disabled {
-    &, &:hover, &:active {
-      color: @color-bi-text-disabled !important;
-      & .bi-input {
-        color: @color-bi-text-disabled !important;
-      }
-      & .bi-textarea {
-        color: @color-bi-text-disabled !important;
-      }
-      background-color: transparent !important;
-      & .bi-high-light {
-        color: @color-bi-text-disabled !important;
-      }
-      &.bi-high-light-border {
-        border-color: @color-bi-border-disabled;
-      }
-      &.hover, &.active {
-        color: @color-bi-text !important;
-        & .bi-input {
-          color: @color-bi-text !important;
-        }
-        & .bi-textarea {
-          color: @color-bi-text !important;
-        }
-        background-color: @color-bi-background-dark-gray !important;
-        & .bi-high-light {
-          color: @color-bi-text-disabled !important;
-        }
-        &.bi-high-light-border {
-          border-color: @color-bi-border-disabled;
-        }
-      }
-    }
-  }
-}
-
-.bi-theme-dark {
-  .bi-list-item-select {
-    &:hover, &.hover {
-      color: @color-bi-text;
-      & .bi-input {
-        color: @color-bi-text;
-      }
-      & .bi-textarea {
-        color: @color-bi-text;
-      }
-      .background-color(@color-bi-background-default, 5%);
-    }
-    &:active, &.active {
-      color: @color-bi-text;
-      & .bi-input {
-        color: @color-bi-text;
-      }
-      & .bi-textarea {
-        color: @color-bi-text;
-      }
-      background-color: @color-bi-background-highlight;
-      & .bi-high-light {
-        color: @color-bi-text;
-      }
-    }
-    &.disabled {
-      &, &:hover, &:active {
-        background-color: transparent !important;
-        color: @color-bi-text-disabled-theme-dark !important;
-        & .bi-input {
-          color: @color-bi-text-disabled-theme-dark !important;
-        }
-        & .bi-textarea {
-          color: @color-bi-text-disabled-theme-dark !important;
-        }
-        & .bi-high-light {
-          color: @color-bi-text-disabled-theme-dark !important;
-        }
-      }
-      &.hover, &.active {
-        background-color: @background-color-black-theme-dark !important;
-      }
-    }
-  }
-}
-
-//文字和背景hover和active时变化 hover和点击时边框变化，active后背景和边框变化
-.bi-list-item-select2 {
-  &:hover, &.hover {
-    color: @color-bi-text-black;
-    & .bi-input {
-      color: @color-bi-text-black;
-    }
-    & .bi-textarea {
-      color: @color-bi-text-black;
-    }
-    &.bi-border {
-      border-color: @color-bi-border-highlight;
-    }
-  }
-  &:active {
-    color: @color-bi-text-highlight;
-    & .bi-input {
-      color: @color-bi-text-highlight;
-    }
-    & .bi-textarea {
-      color: @color-bi-text-highlight;
-    }
-    &.bi-border {
-      border-color: @color-bi-border-highlight;
-    }
-  }
-  &.active {
-    color: @color-bi-text;
-    & .bi-input {
-      color: @color-bi-text;
-    }
-    & .bi-textarea {
-      color: @color-bi-text;
-    }
-    &.bi-border {
-      border-color: @color-bi-border-highlight;
-    }
-    background-color: @color-bi-background-highlight;
-  }
-  &.disabled {
-    &, &:hover, &:active {
-      background-color: transparent !important;
-      color: @color-bi-text-disabled !important;
-      & .bi-input {
-        color: @color-bi-text-disabled !important;
-      }
-      & .bi-textarea {
-        color: @color-bi-text-disabled !important;
-      }
-      & .bi-high-light {
-        color: @color-bi-text-disabled !important;
-      }
-    }
-  }
-}
-
-.bi-theme-dark {
-  .bi-list-item-select2 {
-    &:hover, &.hover {
-      color: @color-bi-text;
-      & .bi-input {
-        color: @color-bi-text;
-      }
-      & .bi-textarea {
-        color: @color-bi-text;
-      }
-    }
-
-    &.active {
-      background-color: @color-bi-background-default-theme-dark;
-    }
-
-    &.disabled {
-      &, &:hover, &:active {
-        background-color: transparent !important;
-        color: @color-bi-text-disabled-theme-dark !important;
-        & .bi-input {
-          color: @color-bi-text-disabled-theme-dark !important;
-        }
-        & .bi-textarea {
-          color: @color-bi-text-disabled-theme-dark !important;
-        }
-        & .bi-high-light {
-          color: @color-bi-text-disabled-theme-dark !important;
-        }
-      }
-      &.active {
-        background-color: @background-color-black-theme-dark !important;
-      }
-    }
-  }
-}
-
-//与bi-list-item-select的区别是背景是灰的
-.bi-list-item-select3 {
-  &:hover, &.hover {
-    background-color: @color-bi-background-normal;
-  }
-  &:active, &.active {
-    color: @color-bi-text-highlight;
-    & .bi-input {
-      color: @color-bi-text-highlight;
-    }
-    & .bi-textarea {
-      color: @color-bi-text-highlight;
-    }
-    background-color: @color-bi-background-normal;
-  }
-  &.disabled {
-    &:hover, &.hover, &:active, &.active {
-      background-color: @color-bi-background-default !important;
-    }
-  }
-}
-
-.bi-theme-dark {
-  .bi-list-item-select3 {
-    &:hover, &.hover {
-      background-color: @color-bi-background-normal-theme-dark;
-    }
-    &:active, &.active {
-      color: @color-bi-text-highlight;
-      & .bi-input {
-        color: @color-bi-text-highlight;
-      }
-      & .bi-textarea {
-        color: @color-bi-text-highlight;
-      }
-      background-color: @color-bi-background-normal-theme-dark;
-    }
-    &.disabled {
-      &:hover, &.hover, &:active, &.active {
-        background-color: @color-bi-background-default-theme-dark !important;
-      }
-    }
-  }
-}
-
-//去掉list-item效果
-.bi-list-item-none {
-  &:hover, &.hover {
-    color: inherit;
-    & .bi-input {
-      color: inherit;
-    }
-    & .bi-textarea {
-      color: inherit;
-    }
-    background-color: transparent;
-  }
-  &:active, &.active {
-    color: inherit;
-    & .bi-input {
-      color: inherit;
-    }
-    & .bi-textarea {
-      color: inherit;
-    }
-    background-color: transparent;
-    & .bi-high-light {
-      color: inherit;
-    }
-  }
-  &.disabled {
-    &, &:hover, &:active {
-      color: @color-bi-text-disabled !important;
-      & .bi-input {
-        color: @color-bi-text-disabled !important;
-      }
-      & .bi-textarea {
-        color: @color-bi-text-disabled !important;
-      }
-      background-color: transparent !important;
-      & .bi-high-light {
-        color: @color-bi-text-disabled !important;
-      }
-    }
-  }
-}
-
-.bi-theme-dark {
-  .bi-list-item-none {
-    &:hover, &.hover {
-      color: inherit;
-      & .bi-input {
-        color: inherit;
-      }
-      & .bi-textarea {
-        color: inherit;
-      }
-      background-color: transparent;
-    }
-    &:active, &.active {
-      color: inherit;
-      & .bi-input {
-        color: inherit;
-      }
-      & .bi-textarea {
-        color: inherit;
-      }
-      background-color: transparent;
-      & .bi-high-light {
-        color: inherit;
-      }
-    }
-    &.disabled {
-      &, &:hover, &:active {
-        background-color: transparent !important;
-        color: @color-bi-text-disabled-theme-dark !important;
-        & .bi-input {
-          color: @color-bi-text-disabled-theme-dark !important;
-        }
-        & .bi-textarea {
-          color: @color-bi-text-disabled-theme-dark !important;
-        }
-        & .bi-high-light {
-          color: @color-bi-text-disabled-theme-dark !important;
-        }
-      }
-    }
-  }
-}
-
-.bi-user-select-enable {
-  .user-select-enable();
-}
-
-.bi-user-select-disable {
-  .user-select-disable();
-}
diff --git a/src/less/core/utils/list-item.less b/src/less/core/utils/list-item.less
new file mode 100644
index 000000000..d2641d80e
--- /dev/null
+++ b/src/less/core/utils/list-item.less
@@ -0,0 +1,731 @@
+@import "../../index";
+
+// hover的时候背景变化
+.bi-list-item {
+  &:hover, &.hover {
+    color: @color-bi-text-black;
+    & .bi-input {
+      color: @color-bi-text-black;
+    }
+    & .bi-textarea {
+      color: @color-bi-text-black;
+    }
+    .background-color(@color-bi-background-highlight, 10%);
+  }
+  &.disabled {
+    &, &:hover, &:active {
+      background-color: transparent !important;
+      color: @color-bi-text-disabled !important;
+      & .bi-input {
+        color: @color-bi-text-disabled !important;
+      }
+      & .bi-textarea {
+        color: @color-bi-text-disabled !important;
+      }
+      & .bi-high-light {
+        color: @color-bi-text-disabled !important;
+      }
+    }
+  }
+}
+
+.bi-theme-dark {
+  .bi-list-item {
+    &:hover, &.hover {
+      color: @color-bi-text;
+      & .bi-input {
+        color: @color-bi-text;
+      }
+      & .bi-textarea {
+        color: @color-bi-text;
+      }
+      .background-color(@color-bi-background-highlight, 10%);
+    }
+    &.disabled {
+      &, &:hover, &:active {
+        background-color: transparent !important;
+        color: @color-bi-text-disabled-theme-dark !important;
+        & .bi-input {
+          color: @color-bi-text-disabled-theme-dark !important;
+        }
+        & .bi-textarea {
+          color: @color-bi-text-disabled-theme-dark !important;
+        }
+        & .bi-high-light {
+          color: @color-bi-text-disabled-theme-dark !important;
+        }
+      }
+    }
+  }
+}
+
+// active的时候边框高亮
+.bi-list-item-border {
+  &:active, &.active {
+    border: 1px solid @color-bi-border-highlight;
+  }
+}
+
+// 极简,hover的时候文字高亮
+.bi-list-item-simple {
+  &:hover, &.hover {
+    color: @color-bi-text-highlight;
+    & .bi-input {
+      color: @color-bi-text-highlight;
+    }
+    & .bi-textarea {
+      color: @color-bi-text-highlight;
+    }
+  }
+  &.disabled {
+    &, &:hover, &:active {
+      color: @color-bi-text-disabled !important;
+      & .bi-input {
+        color: @color-bi-text-disabled !important;
+      }
+      & .bi-textarea {
+        color: @color-bi-text-disabled !important;
+      }
+      & .bi-high-light {
+        color: @color-bi-text-disabled !important;
+      }
+    }
+  }
+}
+
+// active的时候文字高亮
+.bi-list-item-effect {
+  &:hover {
+    color: @color-bi-text-black;
+    & .bi-input {
+      color: @color-bi-text-black;
+    }
+    & .bi-textarea {
+      color: @color-bi-text-black;
+    }
+  }
+  &.active, &:active {
+    color: @color-bi-text-highlight;
+    & .bi-input {
+      color: @color-bi-text-highlight;
+    }
+    & .bi-textarea {
+      color: @color-bi-text-highlight;
+    }
+  }
+  &.disabled {
+    &, &:hover, &:active {
+      color: @color-bi-text-disabled !important;
+      & .bi-input {
+        color: @color-bi-text-disabled !important;
+      }
+      & .bi-textarea {
+        color: @color-bi-text-disabled !important;
+      }
+      & .bi-high-light {
+        color: @color-bi-text-disabled !important;
+      }
+    }
+  }
+}
+
+.bi-theme-dark {
+  .bi-list-item-effect {
+    &:hover {
+      color: @color-bi-text;
+      & .bi-input {
+        color: @color-bi-text;
+      }
+      & .bi-textarea {
+        color: @color-bi-text;
+      }
+    }
+    &.active, &:active {
+      color: @color-bi-text-highlight;
+      & .bi-input {
+        color: @color-bi-text-highlight;
+      }
+      & .bi-textarea {
+        color: @color-bi-text-highlight;
+      }
+    }
+    &.disabled {
+      &, &:hover, &:active {
+        background-color: transparent !important;
+        color: @color-bi-text-disabled-theme-dark !important;
+        & .bi-input {
+          color: @color-bi-text-disabled-theme-dark !important;
+        }
+        & .bi-textarea {
+          color: @color-bi-text-disabled-theme-dark !important;
+        }
+        & .bi-high-light {
+          color: @color-bi-text-disabled-theme-dark !important;
+        }
+      }
+    }
+  }
+}
+
+// hover的时候背景变化,
+// :active的时候文字高亮,背景变化
+.bi-list-item-active {
+  &:hover, &.hover {
+    color: @color-bi-text-black;
+    & .bi-input {
+      color: @color-bi-text-black;
+    }
+    & .bi-textarea {
+      color: @color-bi-text-black;
+    }
+    .background-color(@color-bi-background-highlight, 10%);
+  }
+  &:active {
+    color: @color-bi-text-highlight;
+    & .bi-input {
+      color: @color-bi-text-highlight;
+    }
+    & .bi-textarea {
+      color: @color-bi-text-highlight;
+    }
+    .background-color(@color-bi-background-highlight, 15%);
+  }
+  &.active {
+    color: @color-bi-text-highlight;
+    & .bi-input {
+      color: @color-bi-text-highlight;
+    }
+    & .bi-textarea {
+      color: @color-bi-text-highlight;
+    }
+  }
+  &.disabled {
+    &, &:hover, &:active {
+      background-color: transparent !important;
+      color: @color-bi-text-disabled !important;
+      & .bi-input {
+        color: @color-bi-text-disabled !important;
+      }
+      & .bi-textarea {
+        color: @color-bi-text-disabled !important;
+      }
+      & .bi-high-light {
+        color: @color-bi-text-disabled !important;
+      }
+    }
+  }
+}
+
+.bi-theme-dark {
+  .bi-list-item-active {
+    &:hover, &.hover {
+      color: @color-bi-text;
+      & .bi-input {
+        color: @color-bi-text;
+      }
+      & .bi-textarea {
+        color: @color-bi-text;
+      }
+      .background-color(@color-bi-background-default, 5%);
+    }
+    &.active, &:active {
+      color: @color-bi-text-highlight;
+      & .bi-input {
+        color: @color-bi-text-highlight;
+      }
+      & .bi-textarea {
+        color: @color-bi-text-highlight;
+      }
+      .background-color(@color-bi-background-default, 5%);
+    }
+    &.disabled {
+      &, &:hover, &:active {
+        background-color: transparent !important;
+        color: @color-bi-text-disabled-theme-dark !important;
+        & .bi-input {
+          color: @color-bi-text-disabled-theme-dark !important;
+        }
+        & .bi-textarea {
+          color: @color-bi-text-disabled-theme-dark !important;
+        }
+        & .bi-high-light {
+          color: @color-bi-text-disabled-theme-dark !important;
+        }
+      }
+    }
+  }
+}
+
+// hover的时候背景变化
+// active的时候文字高亮,背景变化
+.bi-list-item-active2 {
+  &:hover, &.hover {
+    color: @color-bi-text-black;
+    & .bi-input {
+      color: @color-bi-text-black;
+    }
+    & .bi-textarea {
+      color: @color-bi-text-black;
+    }
+    .background-color(@color-bi-background-highlight, 10%);
+  }
+  &:active, &.active {
+    color: @color-bi-text-highlight;
+    & .bi-input {
+      color: @color-bi-text-highlight;
+    }
+    & .bi-textarea {
+      color: @color-bi-text-highlight;
+    }
+    .background-color(@color-bi-background-highlight, 15%);
+  }
+  &.disabled {
+    &, &:hover, &:active {
+      background-color: transparent !important;
+      color: @color-bi-text-disabled !important;
+      & .bi-input {
+        color: @color-bi-text-disabled !important;
+      }
+      & .bi-textarea {
+        color: @color-bi-text-disabled !important;
+      }
+      & .bi-high-light {
+        color: @color-bi-text-disabled !important;
+      }
+    }
+  }
+}
+
+.bi-theme-dark {
+  .bi-list-item-active2 {
+    &:hover, &.hover {
+      color: @color-bi-text;
+      & .bi-input {
+        color: @color-bi-text;
+      }
+      & .bi-textarea {
+        color: @color-bi-text;
+      }
+      .background-color(@color-bi-background-highlight, 10%);
+    }
+    &:active, &.active {
+      color: @color-bi-text-highlight;
+      & .bi-input {
+        color: @color-bi-text-highlight;
+      }
+      & .bi-textarea {
+        color: @color-bi-text-highlight;
+      }
+      .background-color(@color-bi-background-highlight, 15%);
+    }
+    &.disabled {
+      &, &:hover, &:active {
+        background-color: transparent !important;
+        color: @color-bi-text-disabled-theme-dark !important;
+        & .bi-input {
+          color: @color-bi-text-disabled-theme-dark !important;
+        }
+        & .bi-textarea {
+          color: @color-bi-text-disabled-theme-dark !important;
+        }
+        & .bi-high-light {
+          color: @color-bi-text-disabled-theme-dark !important;
+        }
+      }
+    }
+  }
+}
+
+// hover的时候背景变化
+// active的时候背景高亮
+.bi-list-item-select {
+  &:hover, &.hover {
+    .background-color(@color-bi-background-highlight, 10%);
+  }
+  &:active, &.active {
+    color: @color-bi-text;
+    & .bi-input {
+      color: @color-bi-text;
+    }
+    & .bi-textarea {
+      color: @color-bi-text;
+    }
+    background-color: @color-bi-background-highlight;
+    & .bi-high-light {
+      color: @color-bi-text;
+    }
+  }
+  &.button-success {
+    &:active, &.active {
+      color: @color-bi-text;
+      background-color: @color-bi-background-success;
+      & .bi-input {
+        color: @color-bi-text;
+      }
+      & .bi-textarea {
+        color: @color-bi-text;
+      }
+      & .bi-high-light {
+        color: @color-bi-text;
+      }
+      &.bi-high-light-border {
+        border-color: @color-bi-border-success;
+      }
+    }
+  }
+  &.button-warning {
+    & {
+      color: @color-bi-text-failure;
+      & .bi-input {
+        color: @color-bi-text-failure;
+      }
+      & .bi-textarea {
+        color: @color-bi-text-failure;
+      }
+      & .bi-high-light {
+        color: @color-bi-text-failure;
+      }
+      &.bi-high-light-border {
+        border-color: @color-bi-border-failure;
+      }
+    }
+    &:hover, &.hover {
+      color: @color-bi-text-failure;
+      & .bi-input {
+        color: @color-bi-text-failure;
+      }
+      & .bi-textarea {
+        color: @color-bi-text-failure;
+      }
+      background-color: @color-bi-background-light-failure;
+      & .bi-high-light {
+        color: @color-bi-text-failure;
+      }
+      &.bi-high-light-border {
+        border-color: @color-bi-border-failure;
+      }
+    }
+    &:active, &.active {
+      color: @color-bi-text;
+      & .bi-input {
+        color: @color-bi-text;
+      }
+      & .bi-textarea {
+        color: @color-bi-text;
+      }
+      background-color: @color-bi-background-failure;
+      & .bi-high-light {
+        color: @color-bi-text;
+      }
+      &.bi-high-light-border {
+        border-color: @color-bi-border-failure;
+      }
+    }
+  }
+  &.disabled {
+    &, &:hover, &:active {
+      color: @color-bi-text-disabled !important;
+      & .bi-input {
+        color: @color-bi-text-disabled !important;
+      }
+      & .bi-textarea {
+        color: @color-bi-text-disabled !important;
+      }
+      background-color: transparent !important;
+      & .bi-high-light {
+        color: @color-bi-text-disabled !important;
+      }
+      &.bi-high-light-border {
+        border-color: @color-bi-border-disabled;
+      }
+      &.hover, &.active {
+        color: @color-bi-text !important;
+        & .bi-input {
+          color: @color-bi-text !important;
+        }
+        & .bi-textarea {
+          color: @color-bi-text !important;
+        }
+        background-color: @color-bi-background-dark-gray !important;
+        & .bi-high-light {
+          color: @color-bi-text-disabled !important;
+        }
+        &.bi-high-light-border {
+          border-color: @color-bi-border-disabled;
+        }
+      }
+    }
+  }
+}
+
+.bi-theme-dark {
+  .bi-list-item-select {
+    &:hover, &.hover {
+      color: @color-bi-text;
+      & .bi-input {
+        color: @color-bi-text;
+      }
+      & .bi-textarea {
+        color: @color-bi-text;
+      }
+      .background-color(@color-bi-background-default, 5%);
+    }
+    &:active, &.active {
+      color: @color-bi-text;
+      & .bi-input {
+        color: @color-bi-text;
+      }
+      & .bi-textarea {
+        color: @color-bi-text;
+      }
+      background-color: @color-bi-background-highlight;
+      & .bi-high-light {
+        color: @color-bi-text;
+      }
+    }
+    &.disabled {
+      &, &:hover, &:active {
+        background-color: transparent !important;
+        color: @color-bi-text-disabled-theme-dark !important;
+        & .bi-input {
+          color: @color-bi-text-disabled-theme-dark !important;
+        }
+        & .bi-textarea {
+          color: @color-bi-text-disabled-theme-dark !important;
+        }
+        & .bi-high-light {
+          color: @color-bi-text-disabled-theme-dark !important;
+        }
+      }
+      &.hover, &.active {
+        background-color: @background-color-black-theme-dark !important;
+      }
+    }
+  }
+}
+
+// hover的时候边框高亮
+// :active的时候文字高亮，边框高亮
+// .active的时候背景高亮，边框高亮
+.bi-list-item-select2 {
+  &:hover, &.hover {
+    color: @color-bi-text-black;
+    & .bi-input {
+      color: @color-bi-text-black;
+    }
+    & .bi-textarea {
+      color: @color-bi-text-black;
+    }
+    &.bi-border {
+      border-color: @color-bi-border-highlight;
+    }
+  }
+  &:active {
+    color: @color-bi-text-highlight;
+    & .bi-input {
+      color: @color-bi-text-highlight;
+    }
+    & .bi-textarea {
+      color: @color-bi-text-highlight;
+    }
+    &.bi-border {
+      border-color: @color-bi-border-highlight;
+    }
+  }
+  &.active {
+    color: @color-bi-text;
+    & .bi-input {
+      color: @color-bi-text;
+    }
+    & .bi-textarea {
+      color: @color-bi-text;
+    }
+    &.bi-border {
+      border-color: @color-bi-border-highlight;
+    }
+    background-color: @color-bi-background-highlight;
+  }
+  &.disabled {
+    &, &:hover, &:active {
+      background-color: transparent !important;
+      color: @color-bi-text-disabled !important;
+      & .bi-input {
+        color: @color-bi-text-disabled !important;
+      }
+      & .bi-textarea {
+        color: @color-bi-text-disabled !important;
+      }
+      & .bi-high-light {
+        color: @color-bi-text-disabled !important;
+      }
+    }
+  }
+}
+
+.bi-theme-dark {
+  .bi-list-item-select2 {
+    &:hover, &.hover {
+      color: @color-bi-text;
+      & .bi-input {
+        color: @color-bi-text;
+      }
+      & .bi-textarea {
+        color: @color-bi-text;
+      }
+    }
+
+    &.active {
+      background-color: @color-bi-background-default-theme-dark;
+    }
+
+    &.disabled {
+      &, &:hover, &:active {
+        background-color: transparent !important;
+        color: @color-bi-text-disabled-theme-dark !important;
+        & .bi-input {
+          color: @color-bi-text-disabled-theme-dark !important;
+        }
+        & .bi-textarea {
+          color: @color-bi-text-disabled-theme-dark !important;
+        }
+        & .bi-high-light {
+          color: @color-bi-text-disabled-theme-dark !important;
+        }
+      }
+      &.active {
+        background-color: @background-color-black-theme-dark !important;
+      }
+    }
+  }
+}
+
+// hover的时候背景变化 -- 变灰
+// active的时候文字高亮背景变化 -- 变灰
+.bi-list-item-select3 {
+  &:hover, &.hover {
+    background-color: @color-bi-background-normal;
+  }
+  &:active, &.active {
+    color: @color-bi-text-highlight;
+    & .bi-input {
+      color: @color-bi-text-highlight;
+    }
+    & .bi-textarea {
+      color: @color-bi-text-highlight;
+    }
+    background-color: @color-bi-background-normal;
+  }
+  &.disabled {
+    &:hover, &.hover, &:active, &.active {
+      background-color: @color-bi-background-default !important;
+    }
+  }
+}
+
+.bi-theme-dark {
+  .bi-list-item-select3 {
+    &:hover, &.hover {
+      background-color: @color-bi-background-normal-theme-dark;
+    }
+    &:active, &.active {
+      color: @color-bi-text-highlight;
+      & .bi-input {
+        color: @color-bi-text-highlight;
+      }
+      & .bi-textarea {
+        color: @color-bi-text-highlight;
+      }
+      background-color: @color-bi-background-normal-theme-dark;
+    }
+    &.disabled {
+      &:hover, &.hover, &:active, &.active {
+        background-color: @color-bi-background-default-theme-dark !important;
+      }
+    }
+  }
+}
+
+// 去掉list-item效果
+.bi-list-item-none {
+  &:hover, &.hover {
+    color: inherit;
+    & .bi-input {
+      color: inherit;
+    }
+    & .bi-textarea {
+      color: inherit;
+    }
+    background-color: transparent;
+  }
+  &:active, &.active {
+    color: inherit;
+    & .bi-input {
+      color: inherit;
+    }
+    & .bi-textarea {
+      color: inherit;
+    }
+    background-color: transparent;
+    & .bi-high-light {
+      color: inherit;
+    }
+  }
+  &.disabled {
+    &, &:hover, &:active {
+      color: @color-bi-text-disabled !important;
+      & .bi-input {
+        color: @color-bi-text-disabled !important;
+      }
+      & .bi-textarea {
+        color: @color-bi-text-disabled !important;
+      }
+      background-color: transparent !important;
+      & .bi-high-light {
+        color: @color-bi-text-disabled !important;
+      }
+    }
+  }
+}
+
+.bi-theme-dark {
+  .bi-list-item-none {
+    &:hover, &.hover {
+      color: inherit;
+      & .bi-input {
+        color: inherit;
+      }
+      & .bi-textarea {
+        color: inherit;
+      }
+      background-color: transparent;
+    }
+    &:active, &.active {
+      color: inherit;
+      & .bi-input {
+        color: inherit;
+      }
+      & .bi-textarea {
+        color: inherit;
+      }
+      background-color: transparent;
+      & .bi-high-light {
+        color: inherit;
+      }
+    }
+    &.disabled {
+      &, &:hover, &:active {
+        background-color: transparent !important;
+        color: @color-bi-text-disabled-theme-dark !important;
+        & .bi-input {
+          color: @color-bi-text-disabled-theme-dark !important;
+        }
+        & .bi-textarea {
+          color: @color-bi-text-disabled-theme-dark !important;
+        }
+        & .bi-high-light {
+          color: @color-bi-text-disabled-theme-dark !important;
+        }
+      }
+    }
+  }
+}
diff --git a/src/less/core/utils/pos.less b/src/less/core/utils/position.less
similarity index 74%
rename from src/less/core/utils/pos.less
rename to src/less/core/utils/position.less
index 255a8464b..a9693147e 100644
--- a/src/less/core/utils/pos.less
+++ b/src/less/core/utils/position.less
@@ -1,8 +1,10 @@
 @import "../../index";
-.display-block{
+
+.display-block {
   display: block;
 }
-.display-inline{
+
+.display-inline {
   .inline-block();
 }
 
@@ -11,10 +13,11 @@
 }
 
 /**常用于span元素在与combo并列时**/
-.vertical-super{
+.vertical-super {
   vertical-align: super;
 }
-.vertical-top{
+
+.vertical-top {
   vertical-align: top;
 }
 
@@ -22,6 +25,6 @@
   text-align: center;
 }
 
-.horizon-left{
+.horizon-left {
   text-align: left;
 }
\ No newline at end of file
diff --git a/src/less/core/utils/overflow.less b/src/less/core/utils/typographic.less
similarity index 73%
rename from src/less/core/utils/overflow.less
rename to src/less/core/utils/typographic.less
index 16f3b0d76..e15f24cf9 100644
--- a/src/less/core/utils/overflow.less
+++ b/src/less/core/utils/typographic.less
@@ -1,4 +1,5 @@
 @import "../../index";
+
 .y-overflow-auto {
   overflow-y: auto;
   overflow-x: hidden;
@@ -19,17 +20,17 @@
   overflow-x: scroll;
 }
 
-.overflow-auto{
+.overflow-auto {
   overflow-x: auto;
   overflow-y: auto;
 }
 
-.overflow-scroll{
+.overflow-scroll {
   overflow-x: scroll;
   overflow-y: scroll;
 }
 
-.overflow-hidden{
+.overflow-hidden {
   overflow-x: hidden;
   overflow-y: hidden;
 }
@@ -39,7 +40,14 @@
   word-break: break-all;
 }
 
-
-.overflow-dot{
+.overflow-dot {
   .overflow-dot();
+}
+
+.bi-user-select-enable {
+  .user-select-enable();
+}
+
+.bi-user-select-disable {
+  .user-select-disable();
 }
\ No newline at end of file
diff --git a/src/less/lib/colors.less b/src/less/lib/colors.less
index 8dc1ec5a2..28a3aaf7c 100644
--- a/src/less/lib/colors.less
+++ b/src/less/lib/colors.less
@@ -4,20 +4,24 @@
 
 //默认字体颜色
 @color-bi-text-normal: @font-color-normal;
-//默认字体颜色深色系
+//深色主题默认字体颜色
+@color-bi-text-theme-dark: @font-color-normal-theme-dark;
 @color-bi-text-normal-theme-dark: @font-color-normal-theme-dark;
 //黑色字体颜色
 @color-bi-text-black: @font-color-black;
-//深色主题默认字体颜色
-@color-bi-text-theme-dark: @font-color-normal-theme-dark;
+//深色主题黑色字体颜色
+@color-bi-text-black-theme-dark: @font-color-normal-theme-dark;
 //灰色字体颜色
 @color-bi-text-gray: @font-color-gray;
 //浅灰色字体
 @color-bi-text-light-gray: @font-color-light-gray;
-//深色浅灰色字体
+//深色主题浅灰色字体
 @color-bi-text-light-gray-theme-dark: @font-color-light-gray-theme-dark;
 //白色字体颜色
 @color-bi-text: @font-color-white;
+@color-bi-text-white: @font-color-white;
+//深色主题白色字体颜色
+@color-bi-text-white-theme-dark: @font-color-white-theme-dark;
 //灰化字体颜色
 @color-bi-text-disabled: @font-color-disabled;
 //深色主题灰化字体颜色
@@ -39,6 +43,7 @@
 
 //普通背景
 @color-bi-background-normal: @background-color-normal;
+//深色主题普通背景
 @color-bi-background-normal-theme-dark: @background-color-normal-theme-dark;
 //默认背景
 @color-bi-background-default: @background-color-default;
@@ -46,19 +51,19 @@
 @color-bi-background-default-theme-dark: @background-color-default-theme-dark;
 //黑色背景
 @color-bi-background-black: @background-color-black;
-//深色系黑色背景
+//深色主题黑色背景
 @color-bi-background-black-theme-dark: @background-color-black-theme-dark;
 //浅黑色背景
 @color-bi-background-light-black: @background-color-light-black;
-//深色系浅黑色背景
+//深色主题浅黑色背景
 @color-bi-background-light-black-theme-dark: @background-color-light-black-theme-dark;
 //深灰色背景
 @color-bi-background-dark-gray: @background-color-dark-gray;
-//深色系深灰色背景
+//深色主题深灰色背景
 @color-bi-background-dark-gray-theme-dark: @background-color-dark-gray-theme-dark;
 //灰色背景(浅)
 @color-bi-background-light-gray: @background-color-light-gray;
-//深色主题灰色背景
+//深色主题灰色背景(浅)
 @color-bi-background-light-gray-theme-dark: @background-color-light-gray-theme-dark;
 //灰色背景(中)
 @color-bi-background-medium-gray: @background-color-medium-gray;
@@ -95,17 +100,17 @@
 @color-bi-border-black: @border-color-black;
 //默认边框色
 @color-bi-border-default: @border-color-default;
-//边框线颜色
+//边框线色
 @color-bi-border-line: @border-color-line;
-//深色系边框线色
+//深色主题边框线色
 @color-bi-border-line-theme-dark: @border-color-line-theme-dark;
 //深色边框线
 @color-bi-border-dark-line: @border-color-dark-line;
-//深色系深色边框线
+//深色主题深色边框线
 @color-bi-border-dark-line-theme-dark: @border-color-dark-line-theme-dark;
 //灰化边框
 @color-bi-border-disabled: @border-color-disabled;
-//深色系灰化边框
+//深色主题灰化边框
 @color-bi-border-disabled-theme-dark: @border-color-disabled-theme-dark;
 //成功边框色
 @color-bi-border-success: @border-color-success;
@@ -179,11 +184,3 @@
 @color-bi-yellow-40: fade(@font-color-yellow, 40);
 @color-bi-yellow-20: fade(@font-color-yellow, 20);
 @color-bi-yellow-5: fade(@font-color-yellow, 5);
-
-
-
-
-
-
-
-