Browse Source

优化样式

es6
guy 3 years ago
parent
commit
ec75ce9944
  1. 15
      src/less/base/colorchooser/farbtastic/farbtastic.less
  2. 10
      src/less/base/foundation/bi.message.less
  3. 23
      src/less/base/tree/ztree.less
  4. 34
      src/less/resource/background.less
  5. 32
      src/less/visual.less

15
src/less/base/colorchooser/farbtastic/farbtastic.less

File diff suppressed because one or more lines are too long

10
src/less/base/foundation/bi.message.less

@ -1,21 +1,21 @@
@import "../../index"; @import "../../index";
.bi-message-title { .bi-message-title {
font-size: 14px; font-size: @font-size-14;
cursor: pointer; cursor: pointer;
} }
.bi-message-text { .bi-message-text {
font-size: 16px; font-size: @font-size-16;
.user-select-enable(); .user-select-enable();
} }
.bi-message-content { .bi-message-content {
font-size: 16px; font-size: @font-size-16;
} }
.bi-message-close { .bi-message-close {
font-size: 16px; font-size: @font-size-16;
} }
.bi-message-animate { .bi-message-animate {
@ -30,4 +30,4 @@
.bi-message-leave { .bi-message-leave {
opacity: 0; opacity: 0;
transform: translateY(-100%); transform: translateY(-100%);
} }

23
src/less/base/tree/ztree.less

@ -25,6 +25,29 @@
padding: 0 0 0 18px padding: 0 0 0 18px
} }
// 此处不用2倍图,改用css画虚线
// z-tree的line是一整块子节点区域,所以不能使用background-size: contain
// 使用1倍图太模糊,这边就使用css自己画了,calc属性支持IE9, IE8反正会走hack, 不影响
.ztree li ul.line {
position: relative;
&:before {
position: absolute;
content: '';
border-left: 1px dashed @border-color-dark-gray-line;
height: calc(~"100% - 3px");
left: 11px;
margin-top: 1px;
}
}
.bi-theme-dark {
.ztree li ul.line {
&:before {
border-left: 1px dashed @border-color-dark-gray-line;
}
}
}
.ztree li a { .ztree li a {
padding: 1px 3px 0 0; padding: 1px 3px 0 0;
margin: 0; margin: 0;

34
src/less/resource/background.less

@ -2,18 +2,6 @@
@import "../lib/icon"; @import "../lib/icon";
@import "../lib/background"; @import "../lib/background";
.bi-farbtastic .wheel {
.imagePath(@background-farbtastic-wheel);
}
.bi-farbtastic .overlay {
.imagePath(@background-farbtastic-overlay);
}
.bi-farbtastic .marker {
.imagePath(@background-farbtastic-marker);
}
.bi-display-tree { .bi-display-tree {
& .ztree li span.button.switch.center_open { & .ztree li span.button.switch.center_open {
.image2xPath(@icon-tree-vertical-line-3); .image2xPath(@icon-tree-vertical-line-3);
@ -40,31 +28,11 @@
} }
} }
// 此处不用2倍图,改用css画虚线
// z-tree的line是一整块子节点区域,所以不能使用background-size: contain
// 使用1倍图太模糊,这边就使用css自己画了,calc属性支持IE9, IE8反正会走hack, 不影响
.ztree li ul.line {
position: relative;
&:before {
position: absolute;
content: '';
border-left: 1px dashed #D0D4DA;
height: calc(~"100% - 3px");
left: 11px;
margin-top: 1px;
}
}
.ztree.hack li ul.line { .ztree.hack li ul.line {
.imagePath(@icon-tree-vertical-line-1, 0, 1px, repeat-y); .imagePath(@icon-tree-vertical-line-1, 0, 1px, repeat-y);
} }
.bi-theme-dark { .bi-theme-dark {
.ztree li ul.line {
&:before {
border-left: 1px dashed #606479;
}
}
.ztree.hack li ul.line { .ztree.hack li ul.line {
.imagePath(@icon-tree-vertical-line-1-theme-dark, 0, 1px, repeat-y); .imagePath(@icon-tree-vertical-line-1-theme-dark, 0, 1px, repeat-y);
} }
@ -379,4 +347,4 @@
} }
} }
.background(wave-loading, @icon-wave-loading); .background(wave-loading, @icon-wave-loading);

32
src/less/visual.less

@ -1,19 +1,19 @@
.text-shadow(none) { .text-shadow(none) {
text-shadow: none;
-moz-text-shadow: none;
-webkit-text-shadow: none; -webkit-text-shadow: none;
-moz-text-shadow: none;
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; -webkit-text-shadow: @arguments;
-moz-text-shadow: @arguments;
text-shadow: @arguments;
} }
.box-shadow(none) { .box-shadow(none) {
box-shadow: none;
-webkit-box-shadow: none; -webkit-box-shadow: none;
-moz-box-shadow: none; -moz-box-shadow: none;
box-shadow: none;
} }
.box-shadow(@style, @c) when (iscolor(@c)) { .box-shadow(@style, @c) when (iscolor(@c)) {
@ -23,15 +23,15 @@
} }
.box-shadow(@x, @y, @blur, @spreed: 0px, @color, @inset: outset) when (iscolor(@color)) and (isnumber(unit(@spreed))){ .box-shadow(@x, @y, @blur, @spreed: 0px, @color, @inset: outset) when (iscolor(@color)) and (isnumber(unit(@spreed))){
box-shadow: @arguments;
-webkit-box-shadow: @arguments; -webkit-box-shadow: @arguments;
-moz-box-shadow: @arguments; -moz-box-shadow: @arguments;
box-shadow: @arguments;
} }
.box-shadows(@shadow1, @shadow2, @shadow3) { .box-shadows(@shadow1, @shadow2, @shadow3) {
box-shadow: @shadow1, @shadow2, @shadow3;
-webkit-box-shadow: @shadow1, @shadow2, @shadow3; -webkit-box-shadow: @shadow1, @shadow2, @shadow3;
-moz-box-shadow: @shadow1, @shadow2, @shadow3; -moz-box-shadow: @shadow1, @shadow2, @shadow3;
box-shadow: @shadow1, @shadow2, @shadow3;
} }
.background-color(@color, @alpha) { .background-color(@color, @alpha) {
@ -97,40 +97,40 @@
} }
.border-corner-top-radius(@leftTop, @rightTop) { .border-corner-top-radius(@leftTop, @rightTop) {
-moz-border-radius-topleft: @leftTop;
-webkit-border-top-left-radius: @leftTop; -webkit-border-top-left-radius: @leftTop;
-moz-border-radius-topright: @rightTop; -moz-border-radius-topleft: @leftTop;
-webkit-border-top-right-radius: @rightTop; -webkit-border-top-right-radius: @rightTop;
-moz-border-radius-topright: @rightTop;
border-top-left-radius: @leftTop; border-top-left-radius: @leftTop;
border-top-right-radius: @rightTop; 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; -webkit-border-bottom-left-radius: @rightBottom;
-moz-border-radius-bottomright: @leftBottom; -moz-border-radius-bottomleft: @rightBottom;
-webkit-border-bottom-right-radius: @rightBottom; -webkit-border-bottom-right-radius: @rightBottom;
-moz-border-radius-bottomright: @leftBottom;
border-bottom-right-radius: @rightBottom; border-bottom-right-radius: @rightBottom;
border-bottom-left-radius: @leftBottom; 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; -webkit-border-top-left-radius: @leftTop;
-moz-border-radius-bottomleft: @leftBottom; -moz-border-radius-topleft: @leftTop;
-webkit-border-bottom-left-radius: @leftBottom; -webkit-border-bottom-left-radius: @leftBottom;
-moz-border-radius-bottomleft: @leftBottom;
border-top-left-radius: @leftTop; border-top-left-radius: @leftTop;
border-bottom-left-radius: @leftBottom; 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; -webkit-border-top-right-radius: @rightTop;
-moz-border-radius-bottomright: @rightBottom; -moz-border-radius-topright: @rightTop;
-webkit-border-bottom-right-radius: @rightBottom; -webkit-border-bottom-right-radius: @rightBottom;
-moz-border-radius-bottomright: @rightBottom;
border-top-right-radius: @rightTop; border-top-right-radius: @rightTop;
border-bottom-right-radius: @rightBottom; border-bottom-right-radius: @rightBottom;
@ -352,4 +352,4 @@
visibility: hidden; visibility: hidden;
} }
} }
} }

Loading…
Cancel
Save