guy 8 years ago
parent
commit
c407eb91ca
  1. 2
      demo.html
  2. 1
      src/css/base/segment/segment.css
  3. 1
      src/css/base/single/editor/editor.textarea.css
  4. 1
      src/css/base/single/text.css
  5. 1
      src/css/utils/overflow.css
  6. 1
      src/css/widget/base/toolbar/toolbar.progress.processor.css
  7. 1
      src/css/widget/sequencetable/dynamicnumber.sequencetable.css
  8. 1
      src/css/widget/sequencetable/listnumber.sequencetable.css
  9. 1
      src/css/widget/sequencetable/treenumber.sequencetable.css
  10. 3
      src/less/typographic.less
  11. 173
      src/less/visual.less

2
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"/>

1
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;

1
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;
}

1
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;
}

1
src/css/utils/overflow.css

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

1
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;
}

1
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;

1
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;

1
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;

3
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){

173
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: "";
}
}
Loading…
Cancel
Save