add

demo.html

@@ -8,6 +8,8 @@
           href="./dist/core.css"/>
     <link rel="stylesheet" type="text/css"
           href="./dist/base.css"/>
+    <link rel="stylesheet" type="text/css"
+          href="./dist/widget.css"/>
     <link rel="stylesheet" type="text/css"
           href="demo/dist/demo.css"/>
 

src/css/base/segment/segment.css

@@ -2,6 +2,7 @@
 /****** common color(常用颜色,可用于普遍场景) *****/
 /**** custom color(自定义颜色,用于特定场景) ****/
 .bi-segment > .center-element {
+  overflow: hidden;
   overflow-x: hidden;
   overflow-y: hidden;
   background: #ffffff;

src/css/base/single/editor/editor.textarea.css

@@ -2,6 +2,7 @@
 /****** common color(常用颜色,可用于普遍场景) *****/
 /**** custom color(自定义颜色,用于特定场景) ****/
 .bi-textarea-editor {
+  overflow: hidden;
   overflow-x: hidden;
   overflow-y: hidden;
 }

src/css/base/single/text.css

@@ -4,6 +4,7 @@
 .bi-text {
   text-overflow: ellipsis;
   overflow-x: hidden;
+  overflow-y: hidden;
   white-space: nowrap;
   word-break: break-all;
 }

src/css/utils/overflow.css

@@ -36,5 +36,6 @@
 .overflow-dot {
   text-overflow: ellipsis;
   overflow-x: hidden;
+  overflow-y: hidden;
   white-space: nowrap;
 }

src/css/widget/base/toolbar/toolbar.progress.processor.css

@@ -6,6 +6,7 @@
   -webkit-border-radius: 20px;
   -moz-border-radius: 20px;
   border-radius: 20px;
+  overflow: hidden;
   overflow-x: hidden;
   overflow-y: hidden;
 }

src/css/widget/sequencetable/dynamicnumber.sequencetable.css

@@ -2,6 +2,7 @@
 /****** common color(常用颜色,可用于普遍场景) *****/
 /**** custom color(自定义颜色,用于特定场景) ****/
 .bi-sequence-table-dynamic-number .sequence-table-title-cell {
+  overflow: hidden;
   overflow-x: hidden;
   overflow-y: hidden;
   -webkit-box-sizing: border-box;

src/css/widget/sequencetable/listnumber.sequencetable.css

@@ -2,6 +2,7 @@
 /****** common color(常用颜色,可用于普遍场景) *****/
 /**** custom color(自定义颜色,用于特定场景) ****/
 .bi-sequence-table-list-number .sequence-table-title-cell {
+  overflow: hidden;
   overflow-x: hidden;
   overflow-y: hidden;
   -webkit-box-sizing: border-box;

src/css/widget/sequencetable/treenumber.sequencetable.css

@@ -2,6 +2,7 @@
 /****** common color(常用颜色,可用于普遍场景) *****/
 /**** custom color(自定义颜色,用于特定场景) ****/
 .bi-sequence-table-tree-number .sequence-table-title-cell {
+  overflow: hidden;
   overflow-x: hidden;
   overflow-y: hidden;
   -webkit-box-sizing: border-box;

src/less/typographic.less

@@ -9,17 +9,20 @@
 }
 
 .overflow-auto(){
+  overflow: auto;
   overflow-x: auto;
   overflow-y: auto;
 }
 
 .overflow-hidden(){
+  overflow: hidden;
   overflow-x: hidden;
   overflow-y: hidden;
 }
 .overflow-dot(){
   text-overflow:ellipsis;
   overflow-x: hidden;
+  overflow-y: hidden;
   white-space:nowrap;
 }
 .user-select(@select){

src/less/visual.less

@@ -1,36 +1,48 @@
-.text-shadow(none){
+.text-shadow(none) {
   text-shadow: none;
   -moz-text-shadow: none;
   -webkit-text-shadow: none;
 }
-.text-shadow(@x, @y, @blur, @color) when not (@x = none){
+
+.text-shadow(@x, @y, @blur, @color) when not (@x = none) {
   text-shadow: @arguments;
   -moz-text-shadow: @arguments;
   -webkit-text-shadow: @arguments;
 }
-.box-shadow(none){
+
+.box-shadow(none) {
   box-shadow: none;
   -webkit-box-shadow: none;
   -moz-box-shadow: none;
 }
+
 .box-shadow(@style, @c) when (iscolor(@c)) {
   -webkit-box-shadow: @style @c;
   -moz-box-shadow: @style @c;
   box-shadow: @style @c;
 }
+
 .box-shadow(@x, @y, @blur, @spreed: 0px, @color, @inset: outset) when (iscolor(@color)) and (isnumber(unit(@spreed))){
   box-shadow: @arguments;
   -webkit-box-shadow: @arguments;
   -moz-box-shadow: @arguments;
 }
 
-.opacity(@opa){
+.opacity(@opa) {
   opacity: @opa;
-  @opa-ie:@opa*100;
+  @opa-ie: @opa*100;
   filter: ~'alpha(opacity=@{opa-ie})';
 }
+
+.transition(@transition) {
+  -webkit-transition: @transition;
+  -moz-transition: @transition;
+  -o-transition: @transition;
+  transition: @transition;
+}
+
 //渐变
-.gradient(@start, @end){
+.gradient(@start, @end) {
   background: @start; //不支持的用这个
   background: -webkit-gradient(linear, 0 0, 0 100%, from(@start) to(@end)); /*old webkit*/
   background: -webkit-linear-gradient(@start, @end); /*new webkit*/
@@ -40,49 +52,170 @@
   background: linear-gradient(@start, @end); /*future CSS3 browsers*/
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='@{start}', endColorstr='@{end}', GradientType='0');
 }
-.border-radius(@radius: 5px){
+
+.border-radius(@radius: 5px) {
   -webkit-border-radius: @radius;
   -moz-border-radius: @radius;
   border-radius: @radius;
 }
-.border-corner-top-radius(@leftTop, @rightTop){
+
+.border-corner-top-radius(@leftTop, @rightTop) {
   -moz-border-radius-topleft: @leftTop;
   -webkit-border-top-left-radius: @leftTop;
   -moz-border-radius-topright: @rightTop;
   -webkit-border-top-right-radius: @rightTop;
 
-  border-top-left-radius:@leftTop;
-  border-top-right-radius:@rightTop;
+  border-top-left-radius: @leftTop;
+  border-top-right-radius: @rightTop;
 }
-.border-corner-bottom-radius(@leftBottom, @rightBottom){
+
+.border-corner-bottom-radius(@leftBottom, @rightBottom) {
   -moz-border-radius-bottomleft: @rightBottom;
   -webkit-border-bottom-left-radius: @rightBottom;
   -moz-border-radius-bottomright: @leftBottom;
   -webkit-border-bottom-right-radius: @rightBottom;
 
-  border-bottom-right-radius:@rightBottom;
-  border-bottom-left-radius:@leftBottom;
+  border-bottom-right-radius: @rightBottom;
+  border-bottom-left-radius: @leftBottom;
 }
-.border-corner-left-radius(@leftTop, @leftBottom){
+
+.border-corner-left-radius(@leftTop, @leftBottom) {
   -moz-border-radius-topleft: @leftTop;
   -webkit-border-top-left-radius: @leftTop;
   -moz-border-radius-bottomleft: @leftBottom;
   -webkit-border-bottom-left-radius: @leftBottom;
 
-  border-top-left-radius:@leftTop;
-  border-bottom-left-radius:@leftBottom;
+  border-top-left-radius: @leftTop;
+  border-bottom-left-radius: @leftBottom;
 }
-.border-corner-right-radius(@rightTop, @rightBottom){
+
+.border-corner-right-radius(@rightTop, @rightBottom) {
   -moz-border-radius-topright: @rightTop;
   -webkit-border-top-right-radius: @rightTop;
   -moz-border-radius-bottomright: @rightBottom;
   -webkit-border-bottom-right-radius: @rightBottom;
 
-  border-top-right-radius:@rightTop;
-  border-bottom-right-radius:@rightBottom;
+  border-top-right-radius: @rightTop;
+  border-bottom-right-radius: @rightBottom;
 }
-.border-corner-radius(@leftTop, @rightTop, @rightBottom, @leftBottom){
+
+.border-corner-radius(@leftTop, @rightTop, @rightBottom, @leftBottom) {
   -webkit-border-radius: @arguments;
   -moz-border-radius: @arguments;
   border-radius: @arguments;
 }
+
+@sideHeight: 6px;
+@sideLength: 12px;
+.solid-triangle-up(@color) {
+  width: 0;
+  height: 0;
+  border-left: (@sideLength/2) solid transparent;
+  border-right: (@sideLength/2) solid transparent;
+  border-bottom: @sideHeight solid @color;
+}
+
+.solid-triangle-down(@color) {
+  width: 0;
+  height: 0;
+  border-left: (@sideLength/2) solid transparent;
+  border-right: (@sideLength/2) solid transparent;
+  border-top: @sideHeight solid @color;
+}
+
+.solid-triangle-left(@color) {
+  width: 0;
+  height: 0;
+  border-top: (@sideLength/2) solid transparent;
+  border-right: @sideHeight solid @color;
+  border-bottom: (@sideLength/2) solid transparent;
+}
+
+.solid-triangle-right(@color) {
+  width: 0;
+  height: 0;
+  border-top: (@sideLength/2) solid transparent;
+  border-left: @sideHeight solid @color;
+  border-bottom: (@sideLength/2) solid transparent;
+}
+
+.solid-triangle-top-left(@color) {
+  width: 0;
+  height: 0;
+  border-top: @sideHeight solid @color;
+  border-right: @sideHeight solid transparent;
+}
+
+.solid-triangle-top-right(@color) {
+  width: 0;
+  height: 0;
+  border-top: @sideHeight solid @color;
+  border-left: @sideHeight solid transparent;
+}
+
+.solid-triangle-bottom-left(@color) {
+  width: 0;
+  height: 0;
+  border-bottom: @sideHeight solid @color;
+  border-right: @sideHeight solid transparent;
+}
+
+.solid-triangle-bottom-right(@color) {
+  width: 0;
+  height: 0;
+  border-bottom: @sideHeight solid @color;
+  border-left: @sideHeight solid transparent;
+}
+
+.triangle-top() {
+  position: absolute;
+  width: 16px;
+  height: 10px;
+  border-bottom: 1px solid #f5f5f5;
+
+  &:before {
+    position: absolute;
+    top: 0px;
+    right: 0px;
+    bottom: 0px;
+    border-bottom: 10px solid #ccc;
+    border-left: 8px solid transparent;
+    border-right: 8px solid transparent;
+    content: "";
+  }
+  &:after {
+    position: absolute;
+    right: 1px;
+    top: 1px;
+    bottom: 0px;
+    border-bottom: 9px solid #f5f5f5;
+    border-left: 7px solid transparent;
+    border-right: 7px solid transparent;
+    content: "";
+  }
+}
+
+.triangle-bottom() {
+  position: absolute;
+  width: 16px;
+  height: 10px;
+  border-top: 1px solid #f5f5f5;
+
+  &:after {
+    position: absolute;
+    right: 1px;
+    top: -1px;
+    border-top: 9px solid #f5f5f5;
+    border-left: 7px solid transparent;
+    border-right: 7px solid transparent;
+    content: "";
+  }
+  &:before {
+    position: absolute;
+    border-top: 10px solid #cccccc;
+    border-left: 8px solid transparent;
+    border-right: 8px solid transparent;
+    content: "";
+  }
+
+}