From c407eb91cac2b8cffbd24fb279f6a86f862cafb3 Mon Sep 17 00:00:00 2001 From: guy Date: Wed, 22 Mar 2017 15:46:21 +0800 Subject: [PATCH] add --- demo.html | 2 + src/css/base/segment/segment.css | 1 + .../base/single/editor/editor.textarea.css | 1 + src/css/base/single/text.css | 1 + src/css/lib/animate.css | 4 +- src/css/utils/overflow.css | 1 + .../toolbar/toolbar.progress.processor.css | 1 + .../dynamicnumber.sequencetable.css | 1 + .../listnumber.sequencetable.css | 1 + .../treenumber.sequencetable.css | 1 + src/less/typographic.less | 3 + src/less/visual.less | 175 +++++++++++++++--- 12 files changed, 169 insertions(+), 23 deletions(-) diff --git a/demo.html b/demo.html index 20808e0f0..42110f141 100644 --- a/demo.html +++ b/demo.html @@ -8,6 +8,8 @@ href="./dist/core.css"/> + diff --git a/src/css/base/segment/segment.css b/src/css/base/segment/segment.css index f00f80ed6..11ddb87d9 100644 --- a/src/css/base/segment/segment.css +++ b/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; diff --git a/src/css/base/single/editor/editor.textarea.css b/src/css/base/single/editor/editor.textarea.css index 8544a6b47..150d4a224 100644 --- a/src/css/base/single/editor/editor.textarea.css +++ b/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; } diff --git a/src/css/base/single/text.css b/src/css/base/single/text.css index 0128c7c7c..34613e8aa 100644 --- a/src/css/base/single/text.css +++ b/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; } diff --git a/src/css/lib/animate.css b/src/css/lib/animate.css index 6f71778c1..05756ce92 100644 --- a/src/css/lib/animate.css +++ b/src/css/lib/animate.css @@ -2201,14 +2201,14 @@ } } @-webkit-keyframes zoomInUp { - from { + from { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } - 60% { + 60% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); diff --git a/src/css/utils/overflow.css b/src/css/utils/overflow.css index a8687e25f..c7feb6550 100644 --- a/src/css/utils/overflow.css +++ b/src/css/utils/overflow.css @@ -36,5 +36,6 @@ .overflow-dot { text-overflow: ellipsis; overflow-x: hidden; + overflow-y: hidden; white-space: nowrap; } diff --git a/src/css/widget/base/toolbar/toolbar.progress.processor.css b/src/css/widget/base/toolbar/toolbar.progress.processor.css index 552b25476..85df88113 100644 --- a/src/css/widget/base/toolbar/toolbar.progress.processor.css +++ b/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; } diff --git a/src/css/widget/sequencetable/dynamicnumber.sequencetable.css b/src/css/widget/sequencetable/dynamicnumber.sequencetable.css index 059def484..fed0aa1c3 100644 --- a/src/css/widget/sequencetable/dynamicnumber.sequencetable.css +++ b/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; diff --git a/src/css/widget/sequencetable/listnumber.sequencetable.css b/src/css/widget/sequencetable/listnumber.sequencetable.css index bd987fced..dace5ccd1 100644 --- a/src/css/widget/sequencetable/listnumber.sequencetable.css +++ b/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; diff --git a/src/css/widget/sequencetable/treenumber.sequencetable.css b/src/css/widget/sequencetable/treenumber.sequencetable.css index 616a45cfc..be1c1be2a 100644 --- a/src/css/widget/sequencetable/treenumber.sequencetable.css +++ b/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; diff --git a/src/less/typographic.less b/src/less/typographic.less index 4a2149c3f..f2cb38f7e 100644 --- a/src/less/typographic.less +++ b/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){ diff --git a/src/less/visual.less b/src/less/visual.less index 0e943dc42..8865353bb 100644 --- a/src/less/visual.less +++ b/src/less/visual.less @@ -1,37 +1,49 @@ -.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){ - background: @start; //不支持的用这个 +.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*/ background: -moz-linear-gradient(@start, @end); /*gecko*/ @@ -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: ""; + } + } \ No newline at end of file