Browse Source

样式配置

es6
guy 8 years ago
parent
commit
8591f3dceb
  1. 5
      bi/base.css
  2. 118
      bi/base.js
  3. 38
      bi/core.css
  4. 5
      bi/core.js
  5. 2
      demo.html
  6. 12
      demo/css/face.css
  7. 9
      demo/css/main.css
  8. 12
      demo/css/preview.css
  9. 4
      demo/css/west.css
  10. 413
      demo/js/face.js
  11. 4
      demo/js/north.js
  12. 77
      demo/js/preview.js
  13. 13
      demo/less/face.less
  14. 9
      demo/less/main.less
  15. 18
      demo/less/preview.less
  16. 7
      demo/less/west.less
  17. 5
      docs/base.css
  18. 118
      docs/base.js
  19. 38
      docs/core.css
  20. 5
      docs/core.js
  21. 37
      docs/demo.css
  22. 495
      docs/demo.js
  23. 2
      docs/index.html
  24. 2
      src/base/foundation/bi.message.js
  25. 58
      src/base/table/table.collection.js
  26. 58
      src/base/table/table.grid.js
  27. 2
      src/core/func/function.js
  28. 3
      src/core/widget.js
  29. 5
      src/css/base/foundation/bi.message.css
  30. 38
      src/css/core/utils/common.css
  31. 120
      src/css/resources/app.css
  32. 25
      src/css/resources/background.css
  33. 3476
      src/css/resources/font.css
  34. 2230
      src/css/resources/icon.css
  35. 5
      src/less/base/foundation/bi.message.less
  36. 93
      src/less/core/utils/common.less
  37. 78
      src/less/lib/style.less

5
bi/base.css

@ -659,11 +659,6 @@ li.CodeMirror-hint-active {
/****添加计算宽度的--运算符直接需要space****/
/****** common color(常用颜色,可用于普遍场景) *****/
/**** custom color(自定义颜色,用于特定场景) ****/
.bi-message-mask {
background-color: #1a1a1a;
opacity: 0.5;
filter: alpha(opacity=50);
}
.bi-message-title {
background-color: #f4f4f4;
color: #808080;

118
bi/base.js

@ -14421,7 +14421,7 @@ $.extend(BI, {
})
},
_show: function (hasCancel, title, message, callback) {
$mask = $('<div class="bi-message-mask">').css({
$mask = $('<div class="bi-z-index-mask">').css({
position: 'absolute',
'zIndex': BI.zIndex_tip - 2,
top: 0,
@ -28516,15 +28516,6 @@ BI.CollectionTable = BI.inherit(BI.Widget, {
}
});
var tlw = regionSize;
var tlh = regionSize >= summaryColumnSizeArray[freezeColLength - 1] ? (o.header.length * o.headerRowSize) : (o.header.length * o.headerRowSize + this._scrollBarSize);
var trw = this._width - regionSize;
var trh = (this._width - regionSize >= totalColumnSize - (summaryColumnSizeArray[freezeColLength - 1] || 0)) ? (o.header.length * o.headerRowSize) : (o.header.length * o.headerRowSize + this._scrollBarSize);
var blw = (this._height - o.header.length * o.headerRowSize >= totalRowSize) ? regionSize : (regionSize + this._scrollBarSize);
var blh = (regionSize >= (summaryColumnSizeArray[freezeColLength - 1] || 0)) ? (this._height - o.header.length * o.headerRowSize) : (this._height - o.header.length * o.headerRowSize + this._scrollBarSize);
var brw = (this._height - o.header.length * o.headerRowSize >= totalRowSize) ? (this._width - regionSize) : (this._width - regionSize + this._scrollBarSize);
var brh = (this._width - regionSize >= totalColumnSize - (summaryColumnSizeArray[freezeColLength - 1] || 0)) ? (this._height - o.header.length * o.headerRowSize) : (this._height - o.header.length * o.headerRowSize + this._scrollBarSize);
var otlw = regionSize;
var otlh = o.header.length * o.headerRowSize;
var otrw = this._width - regionSize;
@ -28534,32 +28525,21 @@ BI.CollectionTable = BI.inherit(BI.Widget, {
var obrw = this._width - regionSize;
var obrh = this._height - o.header.length * o.headerRowSize;
var digest = function (w, h, tw, th, el) {
if (w >= tw && h >= th) {
el.element.css({
overflow: "hidden",
overflowX: "hidden",
overflowY: "hidden"
})
} else if (w >= tw) {
el.element.css({
overflow: "hidden",
overflowX: "hidden",
overflowY: "auto"
})
} else if (h >= th) {
el.element.css({
overflow: "hidden",
overflowX: "auto",
overflowY: "hidden"
})
} else {
el.element.css({
overflow: "auto",
overflowX: "auto",
overflowY: "auto"
})
}
var tlw = otlw + this._scrollBarSize;
var tlh = otlh + this._scrollBarSize;
var trw = otrw + this._scrollBarSize;
var trh = otrh + this._scrollBarSize;
var blw = oblw + this._scrollBarSize;
var blh = oblh + this._scrollBarSize;
var brw = obrw+ this._scrollBarSize;
var brh = obrh + this._scrollBarSize;
var digest = function (el) {
el.element.css({
overflow: "scroll",
overflowX: "scroll",
overflowY: "scroll"
})
};
this.topLeft.setWidth(otlw);
@ -28580,10 +28560,10 @@ BI.CollectionTable = BI.inherit(BI.Widget, {
this.bottomRightCollection.setWidth(brw);
this.bottomRightCollection.setHeight(brh);
digest(tlw, tlh, totalLeftColumnSize, o.header.length * o.headerRowSize, this.topLeftCollection);
digest(trw, trh, totalRightColumnSize, o.header.length * o.headerRowSize, this.topRightCollection);
digest(blw, blh, totalLeftColumnSize, o.items.length * o.rowSize, this.bottomLeftCollection);
digest(brw, brh, totalRightColumnSize, o.items.length * o.rowSize, this.bottomRightCollection);
digest(this.topLeftCollection);
digest(this.topRightCollection);
digest(this.bottomLeftCollection);
digest(this.bottomRightCollection);
var items = this.contextLayout.attr("items");
items[1].left = regionSize;
@ -29314,15 +29294,6 @@ BI.GridTable = BI.inherit(BI.Widget, {
}
});
var tlw = regionSize;
var tlh = regionSize >= summaryColumnSizeArray[freezeColLength - 1] ? (o.header.length * o.headerRowSize) : (o.header.length * o.headerRowSize + this._scrollBarSize);
var trw = this._width - regionSize;
var trh = (this._width - regionSize >= totalColumnSize - (summaryColumnSizeArray[freezeColLength - 1] || 0)) ? (o.header.length * o.headerRowSize) : (o.header.length * o.headerRowSize + this._scrollBarSize);
var blw = (this._height - o.header.length * o.headerRowSize >= totalRowSize) ? regionSize : (regionSize + this._scrollBarSize);
var blh = (regionSize >= (summaryColumnSizeArray[freezeColLength - 1] || 0)) ? (this._height - o.header.length * o.headerRowSize) : (this._height - o.header.length * o.headerRowSize + this._scrollBarSize);
var brw = (this._height - o.header.length * o.headerRowSize >= totalRowSize) ? (this._width - regionSize) : (this._width - regionSize + this._scrollBarSize);
var brh = (this._width - regionSize >= totalColumnSize - (summaryColumnSizeArray[freezeColLength - 1] || 0)) ? (this._height - o.header.length * o.headerRowSize) : (this._height - o.header.length * o.headerRowSize + this._scrollBarSize);
var otlw = regionSize;
var otlh = o.header.length * o.headerRowSize;
var otrw = this._width - regionSize;
@ -29332,32 +29303,21 @@ BI.GridTable = BI.inherit(BI.Widget, {
var obrw = this._width - regionSize;
var obrh = this._height - o.header.length * o.headerRowSize;
var digest = function (w, h, tw, th, el) {
if (w >= tw && h >= th) {
el.element.css({
overflow: "hidden",
overflowX: "hidden",
overflowY: "hidden"
})
} else if (w >= tw) {
el.element.css({
overflow: "hidden",
overflowX: "hidden",
overflowY: "auto"
})
} else if (h >= th) {
el.element.css({
overflow: "hidden",
overflowX: "auto",
overflowY: "hidden"
})
} else {
el.element.css({
overflow: "auto",
overflowX: "auto",
overflowY: "auto"
})
}
var tlw = otlw + this._scrollBarSize;
var tlh = otlh + this._scrollBarSize;
var trw = otrw + this._scrollBarSize;
var trh = otrh + this._scrollBarSize;
var blw = oblw + this._scrollBarSize;
var blh = oblh + this._scrollBarSize;
var brw = obrw+ this._scrollBarSize;
var brh = obrh + this._scrollBarSize;
var digest = function (el) {
el.element.css({
overflow: "scroll",
overflowX: "scroll",
overflowY: "scroll"
})
};
this.topLeft.setWidth(otlw);
@ -29378,10 +29338,10 @@ BI.GridTable = BI.inherit(BI.Widget, {
this.bottomRightGrid.setWidth(brw);
this.bottomRightGrid.setHeight(brh);
digest(tlw, tlh, totalLeftColumnSize, o.header.length * o.headerRowSize, this.topLeftGrid);
digest(trw, trh, totalRightColumnSize, o.header.length * o.headerRowSize, this.topRightGrid);
digest(blw, blh, totalLeftColumnSize, o.items.length * o.rowSize, this.bottomLeftGrid);
digest(brw, brh, totalRightColumnSize, o.items.length * o.rowSize, this.bottomRightGrid);
digest(this.topLeftGrid);
digest(this.topRightGrid);
digest(this.bottomLeftGrid);
digest(this.bottomRightGrid);
this.topLeftGrid.setEstimatedColumnSize(freezeColLength > 0 ? totalLeftColumnSize / freezeColLength : 0);
this.topLeftGrid.setEstimatedRowSize(o.headerRowSize);

38
bi/core.css

@ -2956,18 +2956,13 @@
.bi-list-item.disabled,
.bi-list-item.disabled:hover,
.bi-list-item.disabled:active {
background-color: #ffffff;
background-color: transparent !important;
}
.bi-theme-dark .bi-list-item:hover,
.bi-theme-dark .bi-list-item.hover {
background-color: #04070d;
color: #ffffff;
}
.bi-theme-dark .bi-list-item.disabled,
.bi-theme-dark .bi-list-item.disabled:hover,
.bi-theme-dark .bi-list-item.disabled:active {
background-color: transparent;
}
.bi-list-item-effect.active,
.bi-list-item-effect:active {
color: #009de3;
@ -2975,7 +2970,7 @@
.bi-list-item-effect.disabled,
.bi-list-item-effect.disabled:hover,
.bi-list-item-effect.disabled:active {
color: #c4c6c6;
color: #c4c6c6 !important;
}
.bi-theme-dark .bi-list-item-effect.active,
.bi-theme-dark .bi-list-item-effect:active {
@ -2984,7 +2979,7 @@
.bi-theme-dark .bi-list-item-effect.disabled,
.bi-theme-dark .bi-list-item-effect.disabled:hover,
.bi-theme-dark .bi-list-item-effect.disabled:active {
color: #c4c6c6;
color: #c4c6c6 !important;
}
.bi-list-item-hover:hover,
.bi-list-item-hover.hover {
@ -2994,8 +2989,8 @@
.bi-list-item-hover.disabled,
.bi-list-item-hover.disabled:hover,
.bi-list-item-hover.disabled:active {
color: #c4c6c6;
background-color: #ffffff;
color: #c4c6c6 !important;
background-color: transparent !important;
}
.bi-theme-dark .bi-list-item-hover:hover,
.bi-theme-dark .bi-list-item-hover.hover {
@ -3005,8 +3000,7 @@
.bi-theme-dark .bi-list-item-hover.disabled,
.bi-theme-dark .bi-list-item-hover.disabled:hover,
.bi-theme-dark .bi-list-item-hover.disabled:active {
color: #c4c6c6;
background-color: transparent;
color: #c4c6c6 !important;
}
.bi-list-item-active:hover,
.bi-list-item-active.hover {
@ -3020,7 +3014,7 @@
.bi-list-item-active.disabled,
.bi-list-item-active.disabled:hover,
.bi-list-item-active.disabled:active {
background-color: #ffffff;
background-color: transparent !important;
}
.bi-theme-dark .bi-list-item-active:hover,
.bi-theme-dark .bi-list-item-active.hover {
@ -3032,11 +3026,6 @@
color: #009de3;
background-color: #04070d;
}
.bi-theme-dark .bi-list-item-active.disabled,
.bi-theme-dark .bi-list-item-active.disabled:hover,
.bi-theme-dark .bi-list-item-active.disabled:active {
background-color: transparent;
}
.bi-list-item-select:hover,
.bi-list-item-select.hover {
color: #009de3;
@ -3055,7 +3044,7 @@
.bi-list-item-select.disabled:hover,
.bi-list-item-select.disabled:active {
color: #c4c6c6 !important;
background-color: #ffffff !important;
background-color: transparent !important;
}
.bi-list-item-select.disabled .bi-high-light,
.bi-list-item-select.disabled:hover .bi-high-light,
@ -3076,17 +3065,6 @@
.bi-theme-dark .bi-list-item-select.active .bi-high-light {
color: #ffffff;
}
.bi-theme-dark .bi-list-item-select.disabled,
.bi-theme-dark .bi-list-item-select.disabled:hover,
.bi-theme-dark .bi-list-item-select.disabled:active {
color: #c4c6c6 !important;
background-color: transparent !important;
}
.bi-theme-dark .bi-list-item-select.disabled .bi-high-light,
.bi-theme-dark .bi-list-item-select.disabled:hover .bi-high-light,
.bi-theme-dark .bi-list-item-select.disabled:active .bi-high-light {
color: #c4c6c6 !important;
}
/*****************cursor*****************/
.cursor-pointer {
cursor: pointer;

5
bi/core.js

@ -4333,6 +4333,9 @@ BI.Widget = BI.inherit(BI.OB, {
}
this.element = this.options.element.element;
} else if (o.element) {
// if (o.root !== true) {
// throw new Error("root is a required property");
// }
this.element = $(o.element);
this._isRoot = true;
} else {
@ -17031,7 +17034,7 @@ $(function () {
}
var rgb = this.rgb2json(this.hex2rgb(hex));
var grayLevel = Math.round(rgb.r * 0.299 + rgb.g * 0.587 + rgb.b * 0.114);
if (grayLevel < 140) {
if (grayLevel < 192) {
return true;
}
return false;

2
demo.html

@ -22,7 +22,7 @@
<script src="docs/demo.js"></script>
</head>
<body>
<div id="wrapper" class="bi-theme-dark"></div>
<div id="wrapper"></div>
</body>
</html>

12
demo/css/face.css

@ -0,0 +1,12 @@
/****添加计算宽度的--运算符直接需要space****/
/****** common color(常用颜色,可用于普遍场景) *****/
/**** custom color(自定义颜色,用于特定场景) ****/
.demo-face .face-config {
border-right: 1px solid #d4dadd;
}
.demo-face .face-config .config-label {
font-size: 14px;
}
.demo-face .face-config .config-item {
border-bottom: 1px solid #d4dadd;
}

9
demo/css/main.css

@ -1,3 +1,6 @@
/****添加计算宽度的--运算符直接需要space****/
/****** common color(常用颜色,可用于普遍场景) *****/
/**** custom color(自定义颜色,用于特定场景) ****/
.layout-bg-white {
background-color: #ffffff;
}
@ -39,3 +42,9 @@
.demo-main .bg1 {
background-color: #178cdf;
}
body {
background-color: #f3f3f3;
}
body.bi-theme-dark {
background-color: #191A2C;
}

12
demo/css/preview.css

@ -0,0 +1,12 @@
/****添加计算宽度的--运算符直接需要space****/
/****** common color(常用颜色,可用于普遍场景) *****/
/**** custom color(自定义颜色,用于特定场景) ****/
.demo-preview .preview-title {
border-bottom: 1px solid #d4dadd;
}
.demo-preview .preview-card {
background-color: #ffffff;
}
.bi-theme-dark .demo-preview .preview-card {
background-color: #202237;
}

4
demo/css/west.css

@ -2,5 +2,9 @@
/****** common color(常用颜色,可用于普遍场景) *****/
/**** custom color(自定义颜色,用于特定场景) ****/
.demo-west {
background-color: #ffffff;
border-right: 1px solid #eaeaea;
}
.bi-theme-dark .demo-west {
background-color: #202237;
}

413
demo/js/face.js

@ -2,27 +2,412 @@ Demo.Face = BI.inherit(BI.Widget, {
props: {
baseCls: "demo-face"
},
render: function () {
_createLabel: function (text) {
return {
width: 200,
el: {
type: "bi.label",
text: text,
textAlign: "left",
hgap: 5,
height: 40,
cls: "config-label"
}
}
},
_createColorPicker: function (ref, action) {
return {
el: {
type: "bi.vertical_adapt",
items: [{
type: "bi.color_chooser",
listeners: [{
eventName: BI.ColorChooser.EVENT_CHANGE,
action: action
}],
ref: ref,
width: 30,
height: 30
}]
}
}
},
_createBackgroundConfig: function () {
var self = this;
return {
type: "bi.htape",
cls: "config-item",
height: 40,
items: [this._createLabel("背景色:"), this._createColorPicker(function () {
self.backgroundColor = this;
}, function () {
self._runGlobalStyle();
})]
}
},
_createFontConfig: function () {
var self = this;
return {
type: "bi.htape",
cls: "config-item",
height: 40,
items: [this._createLabel("字体颜色:"), this._createColorPicker(function () {
self.fontColor = this;
}, function () {
self._runGlobalStyle();
})]
}
},
_createDisableFontConfig: function () {
var self = this;
return {
type: "bi.htape",
cls: "config-item",
height: 40,
items: [this._createLabel("灰化字体颜色:"), this._createColorPicker(function () {
self.disabledFontColor = this;
}, function () {
self._runGlobalStyle();
}), {
width: 100,
el: {
type: "bi.text_button",
text: "这个按钮是灰化的",
forceCenter: true,
disabled: true
}
}]
}
},
_createCardBackgroundConfig: function () {
var self = this;
return {
type: "bi.htape",
cls: "config-item",
height: 40,
items: [this._createLabel("Card背景颜色:"), this._createColorPicker(function () {
self.cardBackgroundColor = this;
}, function () {
self._runGlobalStyle();
})]
}
},
_createHoverBackgroundColor: function () {
var self = this;
return {
type: "bi.htape",
cls: "config-item",
height: 40,
items: [this._createLabel("悬浮状态背景颜色:"), this._createColorPicker(function () {
self.hoverBackgroundColor = this;
}, function () {
self._runGlobalStyle();
})]
}
},
_createActiveBackgroundColor: function () {
var self = this;
return {
type: "bi.htape",
cls: "config-item",
height: 40,
items: [this._createLabel("激活状态背景颜色:"), this._createColorPicker(function () {
self.activeBackgroundColor = this;
}, function () {
self._runGlobalStyle();
})]
}
},
_createBaseConfig: function () {
return {
type: "bi.vertical",
items: [this._createLabel("--基本配色--"),
this._createBackgroundConfig(),
this._createFontConfig(),
this._createDisableFontConfig(),
this._createCardBackgroundConfig(),
this._createHoverBackgroundColor(),
this._createActiveBackgroundColor()
]
}
},
_createScrollBackgroundConfig: function () {
var self = this;
return {
type: "bi.htape",
cls: "config-item",
height: 40,
items: [this._createLabel("滚动条底色:"), this._createColorPicker(function () {
self.scrollBackgroundColor = this;
}, function () {
self._runGlobalStyle();
})]
}
},
_createScrollThumbConfig: function () {
var self = this;
return {
type: "bi.htape",
cls: "config-item",
height: 40,
items: [this._createLabel("滚动条thumb颜色:"), this._createColorPicker(function () {
self.scrollThumbColor = this;
}, function () {
self._runGlobalStyle();
})]
}
},
_createPopupBackgroundConfig: function () {
var self = this;
return {
type: "bi.absolute",
items: [{
type: "bi.htape",
cls: "config-item",
height: 40,
items: [this._createLabel("下拉框背景颜色:"), this._createColorPicker(function () {
self.popupBackgroundColor = this;
}, function () {
self._runGlobalStyle();
}), {
width: 100,
el: {
type: "bi.svg",
ref: function () {
self.svg = this;
}
},
left: 0,
right: 0,
top: 0,
bottom: 0
type: "bi.vertical_adapt",
items: [{
type: "bi.down_list_combo",
items: [[{
el: {
text: "column 1111",
iconCls1: "check-mark-e-font",
value: 11
},
children: [
{
text: "column 1.1",
value: 21,
cls: "dot-e-font",
selected: true
}, {
text: "column 1.222222222222222222222222222222222222",
cls: "dot-e-font",
value: 22,
}, {
text: "column 1.3",
cls: "dot-e-font",
value: 23,
}, {
text: "column 1.4",
cls: "dot-e-font",
value: 24,
}, {
text: "column 1.5",
cls: "dot-e-font",
value: 25
}
]
}], [
{
el: {
type: "bi.icon_text_icon_item",
text: "column 2",
iconCls1: "chart-type-e-font",
cls: "dot-e-font",
value: 12
},
disabled: true,
children: [{
type: "bi.icon_text_item",
cls: "dot-e-font",
height: 25,
text: "column 2.1",
value: 11
}, {text: "column 2.2", value: 12, cls: "dot-e-font"}],
}
], [
{
text: "column 33333333333333333333333333333333",
cls: "style-set-e-font",
value: 13
}
], [
{
text: "column 4",
cls: "filter-e-font",
value: 14
}
], [
{
text: "column 5",
cls: "copy-e-font",
value: 15
}
], [
{
text: "column 6",
cls: "delete-e-font",
value: 16
}
], [
{
text: "column 7",
cls: "dimension-from-e-font",
value: 17,
disabled: true
}
]]
}]
}
}]
}
},
_createMaskBackgroundConfig: function () {
var self = this;
return {
type: "bi.htape",
cls: "config-item",
height: 40,
items: [this._createLabel("弹出层蒙版颜色:"), this._createColorPicker(function () {
self.maskBackgroundColor = this;
}, function () {
self._runGlobalStyle();
}), {
width: 100,
el: {
type: "bi.vertical_adapt",
items: [{
type: "bi.button",
text: "mask测试",
handler: function () {
BI.Msg.alert("弹出层", "弹出层面板")
}
}]
}
}]
}
},
_createCommonConfig: function () {
return {
type: "bi.vertical",
items: [this._createLabel("--一般配色--"),
this._createScrollBackgroundConfig(),
this._createScrollThumbConfig(),
this._createPopupBackgroundConfig(),
this._createMaskBackgroundConfig()
]
}
},
render: function () {
var self = this;
return {
type: "bi.grid",
items: [[{
column: 0,
row: 0,
el: {
type: "bi.vertical",
cls: "face-config",
items: [this._createBaseConfig(),
this._createCommonConfig()]
}
}, {
column: 1,
row: 0,
el: {
type: "demo.preview"
}
}]]
}
},
_setStyle: function (objects) {
var result = "";
BI.each(objects, function (cls, object) {
result += cls + "{";
BI.each(object, function (name, value) {
result += name + ":" + value + ";"
});
result += "} ";
});
BI.StyleLoaders.removeStyle("style").loadStyle("style", result);
},
_runGlobalStyle: function () {
var backgroundColor = this.backgroundColor.getValue();
var fontColor = this.fontColor.getValue();
var disabledFontColor = this.disabledFontColor.getValue();
var cardBackgroundColor = this.cardBackgroundColor.getValue();
var hoverBackgroundColor = this.hoverBackgroundColor.getValue();
var activeBackgroundColor = this.activeBackgroundColor.getValue();
var scrollBackgroundColor = this.scrollBackgroundColor.getValue();
var scrollThumbColor = this.scrollThumbColor.getValue();
var popupBackgroundColor = this.popupBackgroundColor.getValue();
var maskBackgroundColor = this.maskBackgroundColor.getValue();
$("#wrapper").css({
backgroundColor: backgroundColor,
color: fontColor
});
$(".demo-west,.preview-card").css({
backgroundColor: cardBackgroundColor
});
this._setStyle({
"div::-webkit-scrollbar,.scrollbar-layout-main": {
"background-color": scrollBackgroundColor + "!important"
},
"div::-webkit-scrollbar-thumb,.public-scrollbar-face:after": {
"background-color": scrollThumbColor + "!important"
},
".base-disabled": {
color: disabledFontColor + "!important"
},
".base-disabled .b-font:before": {
color: disabledFontColor + "!important"
},
".list-view-outer": {
"background-color": popupBackgroundColor + "!important"
},
".bi-z-index-mask": {
"background-color": maskBackgroundColor + "!important"
},
".bi-list-item:hover,.bi-list-item-hover:hover,.bi-list-item-active:hover,.bi-list-item-select:hover,.bi-list-item-effect:hover": {
"background-color": hoverBackgroundColor
},
".bi-list-item-active:active,.bi-list-item-select:active,.bi-list-item-effect:active": {
"background-color": activeBackgroundColor
}
})
},
mounted: function () {
var circle = this.svg.circle(this.element.width() / 2, this.element.height() / 2, 20);
circle.animate({fill: "#223fa3", stroke: "#000", "stroke-width": 80, "stroke-opacity": 0.5}, 2000);
this.backgroundColor.setValue("");
this.fontColor.setValue("");
this.disabledFontColor.setValue("");
this.cardBackgroundColor.setValue("");
this.hoverBackgroundColor.setValue("");
this.activeBackgroundColor.setValue("");
this.scrollBackgroundColor.setValue("");
this.scrollThumbColor.setValue("");
this.popupBackgroundColor.setValue("");
this.maskBackgroundColor.setValue("");
this._runGlobalStyle();
}
});
BI.shortcut("demo.face", Demo.Face);

4
demo/js/north.js

@ -28,13 +28,13 @@ Demo.North = BI.inherit(BI.Widget, {
type: "bi.text_button",
text: "星空蓝",
handler: function () {
$("#wrapper").removeClass("bi-theme-default").addClass("bi-theme-dark");
$("body").removeClass("bi-theme-default").addClass("bi-theme-dark");
}
}, {
type: "bi.text_button",
text: "典雅白",
handler: function () {
$("#wrapper").removeClass("bi-theme-dark").addClass("bi-theme-default");
$("body").removeClass("bi-theme-dark").addClass("bi-theme-default");
}
}]
}

77
demo/js/preview.js

@ -0,0 +1,77 @@
Demo.Preview = BI.inherit(BI.Widget, {
props: {
baseCls: "demo-preview"
},
render: function () {
var self = this;
var items = [], header = [], columnSize = [];
var rowCount = 100, columnCount = 100;
for (var i = 0; i < 1; i++) {
header[i] = [];
for (var j = 0; j < columnCount; j++) {
header[i][j] = {
type: "bi.label",
text: "表头" + i + "-" + j
}
columnSize[j] = 100;
}
}
for (var i = 0; i < rowCount; i++) {
items[i] = [];
for (var j = 0; j < columnCount; j++) {
items[i][j] = {
type: "bi.label",
text: (i < 3 ? 0 : i) + "-" + j
}
}
}
return {
type: "bi.center",
cls: "preview-background",
hgap: 100,
vgap: 100,
items: [{
type: "bi.vtape",
cls: "preview-card",
items: [{
el: {
type: "bi.label",
cls: "preview-title",
height: 40,
text: "统计组件",
hgap: 10,
textAlign: "left"
},
height: 40
}, {
type: "bi.center_adapt",
scrollable: true,
items: [{
type: "bi.resizable_table",
el: {
type: "bi.collection_table"
},
width: 500,
height: 400,
isResizeAdapt: true,
isNeedResize: true,
isNeedMerge: true,
mergeCols: [0, 1],
mergeRule: function (col1, col2) {
return BI.isEqual(col1, col2);
},
isNeedFreeze: true,
freezeCols: [0, 1],
columnSize: columnSize,
items: items,
header: header
}]
}]
}]
}
},
mounted: function () {
}
});
BI.shortcut("demo.preview", Demo.Preview);

13
demo/less/face.less

@ -0,0 +1,13 @@
@import "index";
.demo-face {
.face-config {
border-right: 1px solid @color-bi-border-normal;
.config-label {
font-size: 14px;
}
.config-item {
border-bottom: 1px solid @color-bi-border-normal;
}
}
}

9
demo/less/main.less

@ -1,3 +1,4 @@
@import "index";
.layout-bg-white {
background-color: #ffffff;
@ -51,4 +52,12 @@
& .bg1 {
background-color: #178cdf;
}
}
body {
background-color: @color-bi-background-normal;
}
body.bi-theme-dark {
background-color: @color-bi-background-normal-theme-dark;
}

18
demo/less/preview.less

@ -0,0 +1,18 @@
@import "index";
.demo-preview {
.preview-title {
border-bottom: 1px solid @color-bi-border-normal;
}
.preview-card {
background-color: @color-bi-background-default;
}
}
.bi-theme-dark {
.demo-preview {
.preview-card {
background-color: @color-bi-background-default-theme-dark;
}
}
}

7
demo/less/west.less

@ -1,5 +1,12 @@
@import "index";
.demo-west {
background-color: @color-bi-background-default;
border-right: 1px solid @color-bi-border-line;
}
.bi-theme-dark {
.demo-west {
background-color: @color-bi-background-default-theme-dark;
}
}

5
docs/base.css

@ -659,11 +659,6 @@ li.CodeMirror-hint-active {
/****添加计算宽度的--运算符直接需要space****/
/****** common color(常用颜色,可用于普遍场景) *****/
/**** custom color(自定义颜色,用于特定场景) ****/
.bi-message-mask {
background-color: #1a1a1a;
opacity: 0.5;
filter: alpha(opacity=50);
}
.bi-message-title {
background-color: #f4f4f4;
color: #808080;

118
docs/base.js

@ -14421,7 +14421,7 @@ $.extend(BI, {
})
},
_show: function (hasCancel, title, message, callback) {
$mask = $('<div class="bi-message-mask">').css({
$mask = $('<div class="bi-z-index-mask">').css({
position: 'absolute',
'zIndex': BI.zIndex_tip - 2,
top: 0,
@ -28516,15 +28516,6 @@ BI.CollectionTable = BI.inherit(BI.Widget, {
}
});
var tlw = regionSize;
var tlh = regionSize >= summaryColumnSizeArray[freezeColLength - 1] ? (o.header.length * o.headerRowSize) : (o.header.length * o.headerRowSize + this._scrollBarSize);
var trw = this._width - regionSize;
var trh = (this._width - regionSize >= totalColumnSize - (summaryColumnSizeArray[freezeColLength - 1] || 0)) ? (o.header.length * o.headerRowSize) : (o.header.length * o.headerRowSize + this._scrollBarSize);
var blw = (this._height - o.header.length * o.headerRowSize >= totalRowSize) ? regionSize : (regionSize + this._scrollBarSize);
var blh = (regionSize >= (summaryColumnSizeArray[freezeColLength - 1] || 0)) ? (this._height - o.header.length * o.headerRowSize) : (this._height - o.header.length * o.headerRowSize + this._scrollBarSize);
var brw = (this._height - o.header.length * o.headerRowSize >= totalRowSize) ? (this._width - regionSize) : (this._width - regionSize + this._scrollBarSize);
var brh = (this._width - regionSize >= totalColumnSize - (summaryColumnSizeArray[freezeColLength - 1] || 0)) ? (this._height - o.header.length * o.headerRowSize) : (this._height - o.header.length * o.headerRowSize + this._scrollBarSize);
var otlw = regionSize;
var otlh = o.header.length * o.headerRowSize;
var otrw = this._width - regionSize;
@ -28534,32 +28525,21 @@ BI.CollectionTable = BI.inherit(BI.Widget, {
var obrw = this._width - regionSize;
var obrh = this._height - o.header.length * o.headerRowSize;
var digest = function (w, h, tw, th, el) {
if (w >= tw && h >= th) {
el.element.css({
overflow: "hidden",
overflowX: "hidden",
overflowY: "hidden"
})
} else if (w >= tw) {
el.element.css({
overflow: "hidden",
overflowX: "hidden",
overflowY: "auto"
})
} else if (h >= th) {
el.element.css({
overflow: "hidden",
overflowX: "auto",
overflowY: "hidden"
})
} else {
el.element.css({
overflow: "auto",
overflowX: "auto",
overflowY: "auto"
})
}
var tlw = otlw + this._scrollBarSize;
var tlh = otlh + this._scrollBarSize;
var trw = otrw + this._scrollBarSize;
var trh = otrh + this._scrollBarSize;
var blw = oblw + this._scrollBarSize;
var blh = oblh + this._scrollBarSize;
var brw = obrw+ this._scrollBarSize;
var brh = obrh + this._scrollBarSize;
var digest = function (el) {
el.element.css({
overflow: "scroll",
overflowX: "scroll",
overflowY: "scroll"
})
};
this.topLeft.setWidth(otlw);
@ -28580,10 +28560,10 @@ BI.CollectionTable = BI.inherit(BI.Widget, {
this.bottomRightCollection.setWidth(brw);
this.bottomRightCollection.setHeight(brh);
digest(tlw, tlh, totalLeftColumnSize, o.header.length * o.headerRowSize, this.topLeftCollection);
digest(trw, trh, totalRightColumnSize, o.header.length * o.headerRowSize, this.topRightCollection);
digest(blw, blh, totalLeftColumnSize, o.items.length * o.rowSize, this.bottomLeftCollection);
digest(brw, brh, totalRightColumnSize, o.items.length * o.rowSize, this.bottomRightCollection);
digest(this.topLeftCollection);
digest(this.topRightCollection);
digest(this.bottomLeftCollection);
digest(this.bottomRightCollection);
var items = this.contextLayout.attr("items");
items[1].left = regionSize;
@ -29314,15 +29294,6 @@ BI.GridTable = BI.inherit(BI.Widget, {
}
});
var tlw = regionSize;
var tlh = regionSize >= summaryColumnSizeArray[freezeColLength - 1] ? (o.header.length * o.headerRowSize) : (o.header.length * o.headerRowSize + this._scrollBarSize);
var trw = this._width - regionSize;
var trh = (this._width - regionSize >= totalColumnSize - (summaryColumnSizeArray[freezeColLength - 1] || 0)) ? (o.header.length * o.headerRowSize) : (o.header.length * o.headerRowSize + this._scrollBarSize);
var blw = (this._height - o.header.length * o.headerRowSize >= totalRowSize) ? regionSize : (regionSize + this._scrollBarSize);
var blh = (regionSize >= (summaryColumnSizeArray[freezeColLength - 1] || 0)) ? (this._height - o.header.length * o.headerRowSize) : (this._height - o.header.length * o.headerRowSize + this._scrollBarSize);
var brw = (this._height - o.header.length * o.headerRowSize >= totalRowSize) ? (this._width - regionSize) : (this._width - regionSize + this._scrollBarSize);
var brh = (this._width - regionSize >= totalColumnSize - (summaryColumnSizeArray[freezeColLength - 1] || 0)) ? (this._height - o.header.length * o.headerRowSize) : (this._height - o.header.length * o.headerRowSize + this._scrollBarSize);
var otlw = regionSize;
var otlh = o.header.length * o.headerRowSize;
var otrw = this._width - regionSize;
@ -29332,32 +29303,21 @@ BI.GridTable = BI.inherit(BI.Widget, {
var obrw = this._width - regionSize;
var obrh = this._height - o.header.length * o.headerRowSize;
var digest = function (w, h, tw, th, el) {
if (w >= tw && h >= th) {
el.element.css({
overflow: "hidden",
overflowX: "hidden",
overflowY: "hidden"
})
} else if (w >= tw) {
el.element.css({
overflow: "hidden",
overflowX: "hidden",
overflowY: "auto"
})
} else if (h >= th) {
el.element.css({
overflow: "hidden",
overflowX: "auto",
overflowY: "hidden"
})
} else {
el.element.css({
overflow: "auto",
overflowX: "auto",
overflowY: "auto"
})
}
var tlw = otlw + this._scrollBarSize;
var tlh = otlh + this._scrollBarSize;
var trw = otrw + this._scrollBarSize;
var trh = otrh + this._scrollBarSize;
var blw = oblw + this._scrollBarSize;
var blh = oblh + this._scrollBarSize;
var brw = obrw+ this._scrollBarSize;
var brh = obrh + this._scrollBarSize;
var digest = function (el) {
el.element.css({
overflow: "scroll",
overflowX: "scroll",
overflowY: "scroll"
})
};
this.topLeft.setWidth(otlw);
@ -29378,10 +29338,10 @@ BI.GridTable = BI.inherit(BI.Widget, {
this.bottomRightGrid.setWidth(brw);
this.bottomRightGrid.setHeight(brh);
digest(tlw, tlh, totalLeftColumnSize, o.header.length * o.headerRowSize, this.topLeftGrid);
digest(trw, trh, totalRightColumnSize, o.header.length * o.headerRowSize, this.topRightGrid);
digest(blw, blh, totalLeftColumnSize, o.items.length * o.rowSize, this.bottomLeftGrid);
digest(brw, brh, totalRightColumnSize, o.items.length * o.rowSize, this.bottomRightGrid);
digest(this.topLeftGrid);
digest(this.topRightGrid);
digest(this.bottomLeftGrid);
digest(this.bottomRightGrid);
this.topLeftGrid.setEstimatedColumnSize(freezeColLength > 0 ? totalLeftColumnSize / freezeColLength : 0);
this.topLeftGrid.setEstimatedRowSize(o.headerRowSize);

38
docs/core.css

@ -2956,18 +2956,13 @@
.bi-list-item.disabled,
.bi-list-item.disabled:hover,
.bi-list-item.disabled:active {
background-color: #ffffff;
background-color: transparent !important;
}
.bi-theme-dark .bi-list-item:hover,
.bi-theme-dark .bi-list-item.hover {
background-color: #04070d;
color: #ffffff;
}
.bi-theme-dark .bi-list-item.disabled,
.bi-theme-dark .bi-list-item.disabled:hover,
.bi-theme-dark .bi-list-item.disabled:active {
background-color: transparent;
}
.bi-list-item-effect.active,
.bi-list-item-effect:active {
color: #009de3;
@ -2975,7 +2970,7 @@
.bi-list-item-effect.disabled,
.bi-list-item-effect.disabled:hover,
.bi-list-item-effect.disabled:active {
color: #c4c6c6;
color: #c4c6c6 !important;
}
.bi-theme-dark .bi-list-item-effect.active,
.bi-theme-dark .bi-list-item-effect:active {
@ -2984,7 +2979,7 @@
.bi-theme-dark .bi-list-item-effect.disabled,
.bi-theme-dark .bi-list-item-effect.disabled:hover,
.bi-theme-dark .bi-list-item-effect.disabled:active {
color: #c4c6c6;
color: #c4c6c6 !important;
}
.bi-list-item-hover:hover,
.bi-list-item-hover.hover {
@ -2994,8 +2989,8 @@
.bi-list-item-hover.disabled,
.bi-list-item-hover.disabled:hover,
.bi-list-item-hover.disabled:active {
color: #c4c6c6;
background-color: #ffffff;
color: #c4c6c6 !important;
background-color: transparent !important;
}
.bi-theme-dark .bi-list-item-hover:hover,
.bi-theme-dark .bi-list-item-hover.hover {
@ -3005,8 +3000,7 @@
.bi-theme-dark .bi-list-item-hover.disabled,
.bi-theme-dark .bi-list-item-hover.disabled:hover,
.bi-theme-dark .bi-list-item-hover.disabled:active {
color: #c4c6c6;
background-color: transparent;
color: #c4c6c6 !important;
}
.bi-list-item-active:hover,
.bi-list-item-active.hover {
@ -3020,7 +3014,7 @@
.bi-list-item-active.disabled,
.bi-list-item-active.disabled:hover,
.bi-list-item-active.disabled:active {
background-color: #ffffff;
background-color: transparent !important;
}
.bi-theme-dark .bi-list-item-active:hover,
.bi-theme-dark .bi-list-item-active.hover {
@ -3032,11 +3026,6 @@
color: #009de3;
background-color: #04070d;
}
.bi-theme-dark .bi-list-item-active.disabled,
.bi-theme-dark .bi-list-item-active.disabled:hover,
.bi-theme-dark .bi-list-item-active.disabled:active {
background-color: transparent;
}
.bi-list-item-select:hover,
.bi-list-item-select.hover {
color: #009de3;
@ -3055,7 +3044,7 @@
.bi-list-item-select.disabled:hover,
.bi-list-item-select.disabled:active {
color: #c4c6c6 !important;
background-color: #ffffff !important;
background-color: transparent !important;
}
.bi-list-item-select.disabled .bi-high-light,
.bi-list-item-select.disabled:hover .bi-high-light,
@ -3076,17 +3065,6 @@
.bi-theme-dark .bi-list-item-select.active .bi-high-light {
color: #ffffff;
}
.bi-theme-dark .bi-list-item-select.disabled,
.bi-theme-dark .bi-list-item-select.disabled:hover,
.bi-theme-dark .bi-list-item-select.disabled:active {
color: #c4c6c6 !important;
background-color: transparent !important;
}
.bi-theme-dark .bi-list-item-select.disabled .bi-high-light,
.bi-theme-dark .bi-list-item-select.disabled:hover .bi-high-light,
.bi-theme-dark .bi-list-item-select.disabled:active .bi-high-light {
color: #c4c6c6 !important;
}
/*****************cursor*****************/
.cursor-pointer {
cursor: pointer;

5
docs/core.js

@ -14328,6 +14328,9 @@ BI.Widget = BI.inherit(BI.OB, {
}
this.element = this.options.element.element;
} else if (o.element) {
// if (o.root !== true) {
// throw new Error("root is a required property");
// }
this.element = $(o.element);
this._isRoot = true;
} else {
@ -22655,7 +22658,7 @@ $(function () {
}
var rgb = this.rgb2json(this.hex2rgb(hex));
var grayLevel = Math.round(rgb.r * 0.299 + rgb.g * 0.587 + rgb.b * 0.114);
if (grayLevel < 140) {
if (grayLevel < 192) {
return true;
}
return false;

37
docs/demo.css

@ -1,6 +1,21 @@
/****添加计算宽度的--运算符直接需要space****/
/****** common color(常用颜色,可用于普遍场景) *****/
/**** custom color(自定义颜色,用于特定场景) ****/
.demo-face .face-config {
border-right: 1px solid #d4dadd;
}
.demo-face .face-config .config-label {
font-size: 14px;
}
.demo-face .face-config .config-item {
border-bottom: 1px solid #d4dadd;
}
/****添加计算宽度的--运算符直接需要space****/
/****** common color(常用颜色,可用于普遍场景) *****/
/**** custom color(自定义颜色,用于特定场景) ****/
/****添加计算宽度的--运算符直接需要space****/
/****** common color(常用颜色,可用于普遍场景) *****/
/**** custom color(自定义颜色,用于特定场景) ****/
.layout-bg-white {
background-color: #ffffff;
}
@ -42,6 +57,12 @@
.demo-main .bg1 {
background-color: #178cdf;
}
body {
background-color: #f3f3f3;
}
body.bi-theme-dark {
background-color: #191A2C;
}
/****添加计算宽度的--运算符直接需要space****/
/****** common color(常用颜色,可用于普遍场景) *****/
/**** custom color(自定义颜色,用于特定场景) ****/
@ -58,6 +79,22 @@
/****添加计算宽度的--运算符直接需要space****/
/****** common color(常用颜色,可用于普遍场景) *****/
/**** custom color(自定义颜色,用于特定场景) ****/
.demo-preview .preview-title {
border-bottom: 1px solid #d4dadd;
}
.demo-preview .preview-card {
background-color: #ffffff;
}
.bi-theme-dark .demo-preview .preview-card {
background-color: #202237;
}
/****添加计算宽度的--运算符直接需要space****/
/****** common color(常用颜色,可用于普遍场景) *****/
/**** custom color(自定义颜色,用于特定场景) ****/
.demo-west {
background-color: #ffffff;
border-right: 1px solid #eaeaea;
}
.bi-theme-dark .demo-west {
background-color: #202237;
}

495
docs/demo.js

@ -4522,27 +4522,412 @@ BI.shortcut("demo.vtape", Demo.VtapeLayout);Demo.Face = BI.inherit(BI.Widget, {
props: {
baseCls: "demo-face"
},
render: function () {
_createLabel: function (text) {
return {
width: 200,
el: {
type: "bi.label",
text: text,
textAlign: "left",
hgap: 5,
height: 40,
cls: "config-label"
}
}
},
_createColorPicker: function (ref, action) {
return {
el: {
type: "bi.vertical_adapt",
items: [{
type: "bi.color_chooser",
listeners: [{
eventName: BI.ColorChooser.EVENT_CHANGE,
action: action
}],
ref: ref,
width: 30,
height: 30
}]
}
}
},
_createBackgroundConfig: function () {
var self = this;
return {
type: "bi.absolute",
items: [{
type: "bi.htape",
cls: "config-item",
height: 40,
items: [this._createLabel("背景色:"), this._createColorPicker(function () {
self.backgroundColor = this;
}, function () {
self._runGlobalStyle();
})]
}
},
_createFontConfig: function () {
var self = this;
return {
type: "bi.htape",
cls: "config-item",
height: 40,
items: [this._createLabel("字体颜色:"), this._createColorPicker(function () {
self.fontColor = this;
}, function () {
self._runGlobalStyle();
})]
}
},
_createDisableFontConfig: function () {
var self = this;
return {
type: "bi.htape",
cls: "config-item",
height: 40,
items: [this._createLabel("灰化字体颜色:"), this._createColorPicker(function () {
self.disabledFontColor = this;
}, function () {
self._runGlobalStyle();
}), {
width: 100,
el: {
type: "bi.svg",
ref: function () {
self.svg = this;
}
},
left: 0,
right: 0,
top: 0,
bottom: 0
type: "bi.text_button",
text: "这个按钮是灰化的",
forceCenter: true,
disabled: true
}
}]
}
},
_createCardBackgroundConfig: function () {
var self = this;
return {
type: "bi.htape",
cls: "config-item",
height: 40,
items: [this._createLabel("Card背景颜色:"), this._createColorPicker(function () {
self.cardBackgroundColor = this;
}, function () {
self._runGlobalStyle();
})]
}
},
_createHoverBackgroundColor: function () {
var self = this;
return {
type: "bi.htape",
cls: "config-item",
height: 40,
items: [this._createLabel("悬浮状态背景颜色:"), this._createColorPicker(function () {
self.hoverBackgroundColor = this;
}, function () {
self._runGlobalStyle();
})]
}
},
_createActiveBackgroundColor: function () {
var self = this;
return {
type: "bi.htape",
cls: "config-item",
height: 40,
items: [this._createLabel("激活状态背景颜色:"), this._createColorPicker(function () {
self.activeBackgroundColor = this;
}, function () {
self._runGlobalStyle();
})]
}
},
_createBaseConfig: function () {
return {
type: "bi.vertical",
items: [this._createLabel("--基本配色--"),
this._createBackgroundConfig(),
this._createFontConfig(),
this._createDisableFontConfig(),
this._createCardBackgroundConfig(),
this._createHoverBackgroundColor(),
this._createActiveBackgroundColor()
]
}
},
_createScrollBackgroundConfig: function () {
var self = this;
return {
type: "bi.htape",
cls: "config-item",
height: 40,
items: [this._createLabel("滚动条底色:"), this._createColorPicker(function () {
self.scrollBackgroundColor = this;
}, function () {
self._runGlobalStyle();
})]
}
},
_createScrollThumbConfig: function () {
var self = this;
return {
type: "bi.htape",
cls: "config-item",
height: 40,
items: [this._createLabel("滚动条thumb颜色:"), this._createColorPicker(function () {
self.scrollThumbColor = this;
}, function () {
self._runGlobalStyle();
})]
}
},
_createPopupBackgroundConfig: function () {
var self = this;
return {
type: "bi.htape",
cls: "config-item",
height: 40,
items: [this._createLabel("下拉框背景颜色:"), this._createColorPicker(function () {
self.popupBackgroundColor = this;
}, function () {
self._runGlobalStyle();
}), {
width: 100,
el: {
type: "bi.vertical_adapt",
items: [{
type: "bi.down_list_combo",
items: [[{
el: {
text: "column 1111",
iconCls1: "check-mark-e-font",
value: 11
},
children: [
{
text: "column 1.1",
value: 21,
cls: "dot-e-font",
selected: true
}, {
text: "column 1.222222222222222222222222222222222222",
cls: "dot-e-font",
value: 22,
}, {
text: "column 1.3",
cls: "dot-e-font",
value: 23,
}, {
text: "column 1.4",
cls: "dot-e-font",
value: 24,
}, {
text: "column 1.5",
cls: "dot-e-font",
value: 25
}
]
}], [
{
el: {
type: "bi.icon_text_icon_item",
text: "column 2",
iconCls1: "chart-type-e-font",
cls: "dot-e-font",
value: 12
},
disabled: true,
children: [{
type: "bi.icon_text_item",
cls: "dot-e-font",
height: 25,
text: "column 2.1",
value: 11
}, {text: "column 2.2", value: 12, cls: "dot-e-font"}],
}
], [
{
text: "column 33333333333333333333333333333333",
cls: "style-set-e-font",
value: 13
}
], [
{
text: "column 4",
cls: "filter-e-font",
value: 14
}
], [
{
text: "column 5",
cls: "copy-e-font",
value: 15
}
], [
{
text: "column 6",
cls: "delete-e-font",
value: 16
}
], [
{
text: "column 7",
cls: "dimension-from-e-font",
value: 17,
disabled: true
}
]]
}]
}
}]
}
},
_createMaskBackgroundConfig: function () {
var self = this;
return {
type: "bi.htape",
cls: "config-item",
height: 40,
items: [this._createLabel("弹出层蒙版颜色:"), this._createColorPicker(function () {
self.maskBackgroundColor = this;
}, function () {
self._runGlobalStyle();
}), {
width: 100,
el: {
type: "bi.vertical_adapt",
items: [{
type: "bi.button",
text: "mask测试",
handler: function () {
BI.Msg.alert("弹出层", "弹出层面板")
}
}]
}
}]
}
},
_createCommonConfig: function () {
return {
type: "bi.vertical",
items: [this._createLabel("--一般配色--"),
this._createScrollBackgroundConfig(),
this._createScrollThumbConfig(),
this._createPopupBackgroundConfig(),
this._createMaskBackgroundConfig()
]
}
},
render: function () {
var self = this;
return {
type: "bi.grid",
items: [[{
column: 0,
row: 0,
el: {
type: "bi.vertical",
cls: "face-config",
items: [this._createBaseConfig(),
this._createCommonConfig()]
}
}, {
column: 1,
row: 0,
el: {
type: "demo.preview"
}
}]]
}
},
_setStyle: function (objects) {
var result = "";
BI.each(objects, function (cls, object) {
result += cls + "{";
BI.each(object, function (name, value) {
result += name + ":" + value + ";"
});
result += "} ";
});
BI.StyleLoaders.removeStyle("style").loadStyle("style", result);
},
_runGlobalStyle: function () {
var backgroundColor = this.backgroundColor.getValue();
var fontColor = this.fontColor.getValue();
var disabledFontColor = this.disabledFontColor.getValue();
var cardBackgroundColor = this.cardBackgroundColor.getValue();
var hoverBackgroundColor = this.hoverBackgroundColor.getValue();
var activeBackgroundColor = this.activeBackgroundColor.getValue();
var scrollBackgroundColor = this.scrollBackgroundColor.getValue();
var scrollThumbColor = this.scrollThumbColor.getValue();
var popupBackgroundColor = this.popupBackgroundColor.getValue();
var maskBackgroundColor = this.maskBackgroundColor.getValue();
$("#wrapper").css({
backgroundColor: backgroundColor,
color: fontColor
});
$(".demo-west,.preview-card").css({
backgroundColor: cardBackgroundColor
});
this._setStyle({
"div::-webkit-scrollbar,.scrollbar-layout-main": {
"background-color": scrollBackgroundColor + "!important"
},
"div::-webkit-scrollbar-thumb,.public-scrollbar-face:after": {
"background-color": scrollThumbColor + "!important"
},
".base-disabled": {
color: disabledFontColor + "!important"
},
".base-disabled .b-font:before": {
color: disabledFontColor + "!important"
},
".list-view-outer": {
"background-color": popupBackgroundColor + "!important"
},
".bi-z-index-mask": {
"background-color": maskBackgroundColor + "!important"
},
".bi-list-item:hover,.bi-list-item-hover:hover,.bi-list-item-active:hover,.bi-list-item-select:hover,.bi-list-item-effect:hover": {
"background-color": hoverBackgroundColor
},
".bi-list-item-active:active,.bi-list-item-select:active,.bi-list-item-effect:active": {
"background-color": activeBackgroundColor
}
})
},
mounted: function () {
var circle = this.svg.circle(this.element.width() / 2, this.element.height() / 2, 20);
circle.animate({fill: "#223fa3", stroke: "#000", "stroke-width": 80, "stroke-opacity": 0.5}, 2000);
this.backgroundColor.setValue("");
this.fontColor.setValue("");
this.disabledFontColor.setValue("");
this.cardBackgroundColor.setValue("");
this.hoverBackgroundColor.setValue("");
this.activeBackgroundColor.setValue("");
this.scrollBackgroundColor.setValue("");
this.scrollThumbColor.setValue("");
this.popupBackgroundColor.setValue("");
this.maskBackgroundColor.setValue("");
this._runGlobalStyle();
}
});
BI.shortcut("demo.face", Demo.Face);Demo.Main = BI.inherit(BI.Widget, {
@ -4620,13 +5005,13 @@ BI.shortcut("demo.main", Demo.Main);Demo.North = BI.inherit(BI.Widget, {
type: "bi.text_button",
text: "星空蓝",
handler: function () {
$("#wrapper").removeClass("bi-theme-default").addClass("bi-theme-dark");
$("body").removeClass("bi-theme-default").addClass("bi-theme-dark");
}
}, {
type: "bi.text_button",
text: "典雅白",
handler: function () {
$("#wrapper").removeClass("bi-theme-dark").addClass("bi-theme-default");
$("body").removeClass("bi-theme-dark").addClass("bi-theme-default");
}
}]
}
@ -4635,7 +5020,83 @@ BI.shortcut("demo.main", Demo.Main);Demo.North = BI.inherit(BI.Widget, {
}
});
Demo.North.EVENT_VALUE_CHANGE = "EVENT_VALUE_CHANGE";
BI.shortcut("demo.north", Demo.North);Demo.West = BI.inherit(BI.Widget, {
BI.shortcut("demo.north", Demo.North);Demo.Preview = BI.inherit(BI.Widget, {
props: {
baseCls: "demo-preview"
},
render: function () {
var self = this;
var items = [], header = [], columnSize = [];
var rowCount = 100, columnCount = 100;
for (var i = 0; i < 1; i++) {
header[i] = [];
for (var j = 0; j < columnCount; j++) {
header[i][j] = {
type: "bi.label",
text: "表头" + i + "-" + j
}
columnSize[j] = 100;
}
}
for (var i = 0; i < rowCount; i++) {
items[i] = [];
for (var j = 0; j < columnCount; j++) {
items[i][j] = {
type: "bi.label",
text: (i < 3 ? 0 : i) + "-" + j
}
}
}
return {
type: "bi.center",
cls: "preview-background",
hgap: 100,
vgap: 100,
items: [{
type: "bi.vtape",
cls: "preview-card",
items: [{
el: {
type: "bi.label",
cls: "preview-title",
height: 40,
text: "统计组件",
hgap: 10,
textAlign: "left"
},
height: 40
}, {
type: "bi.center_adapt",
scrollable: true,
items: [{
type: "bi.resizable_table",
el: {
type: "bi.collection_table"
},
width: 500,
height: 400,
isResizeAdapt: true,
isNeedResize: true,
isNeedMerge: true,
mergeCols: [0, 1],
mergeRule: function (col1, col2) {
return BI.isEqual(col1, col2);
},
isNeedFreeze: true,
freezeCols: [0, 1],
columnSize: columnSize,
items: items,
header: header
}]
}]
}]
}
},
mounted: function () {
}
});
BI.shortcut("demo.preview", Demo.Preview);Demo.West = BI.inherit(BI.Widget, {
props: {
baseCls: "demo-west"
},

2
docs/index.html

@ -22,6 +22,6 @@
<script src="demo.js"></script>
</head>
<body>
<div id="wrapper" class="bi-theme-dark"></div>
<div id="wrapper"></div>
</body>
</html>

2
src/base/foundation/bi.message.js

@ -48,7 +48,7 @@ $.extend(BI, {
})
},
_show: function (hasCancel, title, message, callback) {
$mask = $('<div class="bi-message-mask">').css({
$mask = $('<div class="bi-z-index-mask">').css({
position: 'absolute',
'zIndex': BI.zIndex_tip - 2,
top: 0,

58
src/base/table/table.collection.js

@ -232,15 +232,6 @@ BI.CollectionTable = BI.inherit(BI.Widget, {
}
});
var tlw = regionSize;
var tlh = regionSize >= summaryColumnSizeArray[freezeColLength - 1] ? (o.header.length * o.headerRowSize) : (o.header.length * o.headerRowSize + this._scrollBarSize);
var trw = this._width - regionSize;
var trh = (this._width - regionSize >= totalColumnSize - (summaryColumnSizeArray[freezeColLength - 1] || 0)) ? (o.header.length * o.headerRowSize) : (o.header.length * o.headerRowSize + this._scrollBarSize);
var blw = (this._height - o.header.length * o.headerRowSize >= totalRowSize) ? regionSize : (regionSize + this._scrollBarSize);
var blh = (regionSize >= (summaryColumnSizeArray[freezeColLength - 1] || 0)) ? (this._height - o.header.length * o.headerRowSize) : (this._height - o.header.length * o.headerRowSize + this._scrollBarSize);
var brw = (this._height - o.header.length * o.headerRowSize >= totalRowSize) ? (this._width - regionSize) : (this._width - regionSize + this._scrollBarSize);
var brh = (this._width - regionSize >= totalColumnSize - (summaryColumnSizeArray[freezeColLength - 1] || 0)) ? (this._height - o.header.length * o.headerRowSize) : (this._height - o.header.length * o.headerRowSize + this._scrollBarSize);
var otlw = regionSize;
var otlh = o.header.length * o.headerRowSize;
var otrw = this._width - regionSize;
@ -250,32 +241,21 @@ BI.CollectionTable = BI.inherit(BI.Widget, {
var obrw = this._width - regionSize;
var obrh = this._height - o.header.length * o.headerRowSize;
var digest = function (w, h, tw, th, el) {
if (w >= tw && h >= th) {
el.element.css({
overflow: "hidden",
overflowX: "hidden",
overflowY: "hidden"
})
} else if (w >= tw) {
el.element.css({
overflow: "hidden",
overflowX: "hidden",
overflowY: "auto"
})
} else if (h >= th) {
el.element.css({
overflow: "hidden",
overflowX: "auto",
overflowY: "hidden"
})
} else {
el.element.css({
overflow: "auto",
overflowX: "auto",
overflowY: "auto"
})
}
var tlw = otlw + this._scrollBarSize;
var tlh = otlh + this._scrollBarSize;
var trw = otrw + this._scrollBarSize;
var trh = otrh + this._scrollBarSize;
var blw = oblw + this._scrollBarSize;
var blh = oblh + this._scrollBarSize;
var brw = obrw+ this._scrollBarSize;
var brh = obrh + this._scrollBarSize;
var digest = function (el) {
el.element.css({
overflow: "scroll",
overflowX: "scroll",
overflowY: "scroll"
})
};
this.topLeft.setWidth(otlw);
@ -296,10 +276,10 @@ BI.CollectionTable = BI.inherit(BI.Widget, {
this.bottomRightCollection.setWidth(brw);
this.bottomRightCollection.setHeight(brh);
digest(tlw, tlh, totalLeftColumnSize, o.header.length * o.headerRowSize, this.topLeftCollection);
digest(trw, trh, totalRightColumnSize, o.header.length * o.headerRowSize, this.topRightCollection);
digest(blw, blh, totalLeftColumnSize, o.items.length * o.rowSize, this.bottomLeftCollection);
digest(brw, brh, totalRightColumnSize, o.items.length * o.rowSize, this.bottomRightCollection);
digest(this.topLeftCollection);
digest(this.topRightCollection);
digest(this.bottomLeftCollection);
digest(this.bottomRightCollection);
var items = this.contextLayout.attr("items");
items[1].left = regionSize;

58
src/base/table/table.grid.js

@ -279,15 +279,6 @@ BI.GridTable = BI.inherit(BI.Widget, {
}
});
var tlw = regionSize;
var tlh = regionSize >= summaryColumnSizeArray[freezeColLength - 1] ? (o.header.length * o.headerRowSize) : (o.header.length * o.headerRowSize + this._scrollBarSize);
var trw = this._width - regionSize;
var trh = (this._width - regionSize >= totalColumnSize - (summaryColumnSizeArray[freezeColLength - 1] || 0)) ? (o.header.length * o.headerRowSize) : (o.header.length * o.headerRowSize + this._scrollBarSize);
var blw = (this._height - o.header.length * o.headerRowSize >= totalRowSize) ? regionSize : (regionSize + this._scrollBarSize);
var blh = (regionSize >= (summaryColumnSizeArray[freezeColLength - 1] || 0)) ? (this._height - o.header.length * o.headerRowSize) : (this._height - o.header.length * o.headerRowSize + this._scrollBarSize);
var brw = (this._height - o.header.length * o.headerRowSize >= totalRowSize) ? (this._width - regionSize) : (this._width - regionSize + this._scrollBarSize);
var brh = (this._width - regionSize >= totalColumnSize - (summaryColumnSizeArray[freezeColLength - 1] || 0)) ? (this._height - o.header.length * o.headerRowSize) : (this._height - o.header.length * o.headerRowSize + this._scrollBarSize);
var otlw = regionSize;
var otlh = o.header.length * o.headerRowSize;
var otrw = this._width - regionSize;
@ -297,32 +288,21 @@ BI.GridTable = BI.inherit(BI.Widget, {
var obrw = this._width - regionSize;
var obrh = this._height - o.header.length * o.headerRowSize;
var digest = function (w, h, tw, th, el) {
if (w >= tw && h >= th) {
el.element.css({
overflow: "hidden",
overflowX: "hidden",
overflowY: "hidden"
})
} else if (w >= tw) {
el.element.css({
overflow: "hidden",
overflowX: "hidden",
overflowY: "auto"
})
} else if (h >= th) {
el.element.css({
overflow: "hidden",
overflowX: "auto",
overflowY: "hidden"
})
} else {
el.element.css({
overflow: "auto",
overflowX: "auto",
overflowY: "auto"
})
}
var tlw = otlw + this._scrollBarSize;
var tlh = otlh + this._scrollBarSize;
var trw = otrw + this._scrollBarSize;
var trh = otrh + this._scrollBarSize;
var blw = oblw + this._scrollBarSize;
var blh = oblh + this._scrollBarSize;
var brw = obrw+ this._scrollBarSize;
var brh = obrh + this._scrollBarSize;
var digest = function (el) {
el.element.css({
overflow: "scroll",
overflowX: "scroll",
overflowY: "scroll"
})
};
this.topLeft.setWidth(otlw);
@ -343,10 +323,10 @@ BI.GridTable = BI.inherit(BI.Widget, {
this.bottomRightGrid.setWidth(brw);
this.bottomRightGrid.setHeight(brh);
digest(tlw, tlh, totalLeftColumnSize, o.header.length * o.headerRowSize, this.topLeftGrid);
digest(trw, trh, totalRightColumnSize, o.header.length * o.headerRowSize, this.topRightGrid);
digest(blw, blh, totalLeftColumnSize, o.items.length * o.rowSize, this.bottomLeftGrid);
digest(brw, brh, totalRightColumnSize, o.items.length * o.rowSize, this.bottomRightGrid);
digest(this.topLeftGrid);
digest(this.topRightGrid);
digest(this.bottomLeftGrid);
digest(this.bottomRightGrid);
this.topLeftGrid.setEstimatedColumnSize(freezeColLength > 0 ? totalLeftColumnSize / freezeColLength : 0);
this.topLeftGrid.setEstimatedRowSize(o.headerRowSize);

2
src/core/func/function.js

@ -129,7 +129,7 @@ $(function () {
}
var rgb = this.rgb2json(this.hex2rgb(hex));
var grayLevel = Math.round(rgb.r * 0.299 + rgb.g * 0.587 + rgb.b * 0.114);
if (grayLevel < 140) {
if (grayLevel < 192) {
return true;
}
return false;

3
src/core/widget.js

@ -68,6 +68,9 @@ BI.Widget = BI.inherit(BI.OB, {
}
this.element = this.options.element.element;
} else if (o.element) {
// if (o.root !== true) {
// throw new Error("root is a required property");
// }
this.element = $(o.element);
this._isRoot = true;
} else {

5
src/css/base/foundation/bi.message.css

@ -1,11 +1,6 @@
/****添加计算宽度的--运算符直接需要space****/
/****** common color(常用颜色,可用于普遍场景) *****/
/**** custom color(自定义颜色,用于特定场景) ****/
.bi-message-mask {
background-color: #1a1a1a;
opacity: 0.5;
filter: alpha(opacity=50);
}
.bi-message-title {
background-color: #f4f4f4;
color: #808080;

38
src/css/core/utils/common.css

@ -54,18 +54,13 @@
.bi-list-item.disabled,
.bi-list-item.disabled:hover,
.bi-list-item.disabled:active {
background-color: #ffffff;
background-color: transparent !important;
}
.bi-theme-dark .bi-list-item:hover,
.bi-theme-dark .bi-list-item.hover {
background-color: #04070d;
color: #ffffff;
}
.bi-theme-dark .bi-list-item.disabled,
.bi-theme-dark .bi-list-item.disabled:hover,
.bi-theme-dark .bi-list-item.disabled:active {
background-color: transparent;
}
.bi-list-item-effect.active,
.bi-list-item-effect:active {
color: #009de3;
@ -73,7 +68,7 @@
.bi-list-item-effect.disabled,
.bi-list-item-effect.disabled:hover,
.bi-list-item-effect.disabled:active {
color: #c4c6c6;
color: #c4c6c6 !important;
}
.bi-theme-dark .bi-list-item-effect.active,
.bi-theme-dark .bi-list-item-effect:active {
@ -82,7 +77,7 @@
.bi-theme-dark .bi-list-item-effect.disabled,
.bi-theme-dark .bi-list-item-effect.disabled:hover,
.bi-theme-dark .bi-list-item-effect.disabled:active {
color: #c4c6c6;
color: #c4c6c6 !important;
}
.bi-list-item-hover:hover,
.bi-list-item-hover.hover {
@ -92,8 +87,8 @@
.bi-list-item-hover.disabled,
.bi-list-item-hover.disabled:hover,
.bi-list-item-hover.disabled:active {
color: #c4c6c6;
background-color: #ffffff;
color: #c4c6c6 !important;
background-color: transparent !important;
}
.bi-theme-dark .bi-list-item-hover:hover,
.bi-theme-dark .bi-list-item-hover.hover {
@ -103,8 +98,7 @@
.bi-theme-dark .bi-list-item-hover.disabled,
.bi-theme-dark .bi-list-item-hover.disabled:hover,
.bi-theme-dark .bi-list-item-hover.disabled:active {
color: #c4c6c6;
background-color: transparent;
color: #c4c6c6 !important;
}
.bi-list-item-active:hover,
.bi-list-item-active.hover {
@ -118,7 +112,7 @@
.bi-list-item-active.disabled,
.bi-list-item-active.disabled:hover,
.bi-list-item-active.disabled:active {
background-color: #ffffff;
background-color: transparent !important;
}
.bi-theme-dark .bi-list-item-active:hover,
.bi-theme-dark .bi-list-item-active.hover {
@ -130,11 +124,6 @@
color: #009de3;
background-color: #04070d;
}
.bi-theme-dark .bi-list-item-active.disabled,
.bi-theme-dark .bi-list-item-active.disabled:hover,
.bi-theme-dark .bi-list-item-active.disabled:active {
background-color: transparent;
}
.bi-list-item-select:hover,
.bi-list-item-select.hover {
color: #009de3;
@ -153,7 +142,7 @@
.bi-list-item-select.disabled:hover,
.bi-list-item-select.disabled:active {
color: #c4c6c6 !important;
background-color: #ffffff !important;
background-color: transparent !important;
}
.bi-list-item-select.disabled .bi-high-light,
.bi-list-item-select.disabled:hover .bi-high-light,
@ -174,14 +163,3 @@
.bi-theme-dark .bi-list-item-select.active .bi-high-light {
color: #ffffff;
}
.bi-theme-dark .bi-list-item-select.disabled,
.bi-theme-dark .bi-list-item-select.disabled:hover,
.bi-theme-dark .bi-list-item-select.disabled:active {
color: #c4c6c6 !important;
background-color: transparent !important;
}
.bi-theme-dark .bi-list-item-select.disabled .bi-high-light,
.bi-theme-dark .bi-list-item-select.disabled:hover .bi-high-light,
.bi-theme-dark .bi-list-item-select.disabled:active .bi-high-light {
color: #c4c6c6 !important;
}

120
src/css/resources/app.css

@ -1,120 +0,0 @@
/****添加计算宽度的--运算符直接需要space****/
/****** common color(常用颜色,可用于普遍场景) *****/
/**** custom color(自定义颜色,用于特定场景) ****/
@font-face {
font-family: 'bi';
src: url('font/iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('font/iconfont.woff') format('woff'), /* chrome、firefox */ url('font/iconfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/ url('font/iconfont.svg#svgFontName') format('svg');
/* iOS 4.1- */
}
.b-font {
font-family: "bi";
font-style: normal;
-webkit-font-smoothing: antialiased;
-webkit-text-stroke-width: 0.2px;
-moz-osx-font-smoothing: grayscale;
}
html,
button,
input,
select,
textarea,
* {
font-family: "Microsoft YaHei", "Hiragino Sans GB W3";
}
html,
body,
div,
ul,
li,
img,
a,
span,
p,
* {
margin: 0px;
}
html {
height: 100%;
overflow: hidden;
}
body {
position: absolute;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
top: 0;
left: 0;
background-repeat: repeat;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
color: #1a1a1a;
font: normal 12px "Microsoft YaHei", "Hiragino Sans GB W3";
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-decoration: none;
-kthml-user-focus: normal;
-moz-user-focus: normal;
-moz-outline: 0 none;
outline: 0 none;
}
#wrapper {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
overflow: hidden;
overflow-x: hidden;
overflow-y: hidden;
}
a {
outline: none;
text-decoration: none;
}
a:focus {
outline: 0;
}
input,
textarea {
margin: 0;
padding: 0;
outline: none;
border: 1px solid #cccccc;
}
ul,
ol {
margin: 0;
padding: 0;
}
ul {
list-style: disc;
}
li {
list-style-type: none;
}
i {
font-style: normal;
-webkit-font-smoothing: antialiased;
-webkit-text-stroke-width: 0.2px;
-moz-osx-font-smoothing: grayscale;
}
div::-webkit-scrollbar,
textarea::-webkit-scrollbar {
-webkit-appearance: none;
background-color: #f4f4f4;
width: 6px;
height: 6px;
}
div::-webkit-scrollbar-thumb,
textarea::-webkit-scrollbar-thumb {
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
background-color: #e2e2e2;
}

25
src/css/resources/background.css

@ -1,25 +0,0 @@
.base-line-conn-background {
background: url('icon/tree-vertical-line-1.png') repeat-y 0 0;
_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='icon/tree-vertical-line-1.png');
_background: none;
}
.first-line-conn-background {
background: url('icon/tree-vertical-line-2.png') no-repeat center center;
_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='icon/tree-vertical-line-2.png');
_background: none;
}
.last-line-conn-background {
background: url('icon/tree-vertical-line-4.png') no-repeat center center;
_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='icon/tree-vertical-line-4.png');
_background: none;
}
.mid-line-conn-background {
background: url('icon/tree-vertical-line-3.png') no-repeat center center;
_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='icon/tree-vertical-line-3.png');
_background: none;
}
.loading-background {
background: url('icon/loading.gif') no-repeat center center;
_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='icon/loading.gif');
_background: none;
}

3476
src/css/resources/font.css

File diff suppressed because it is too large Load Diff

2230
src/css/resources/icon.css

File diff suppressed because it is too large Load Diff

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

@ -1,10 +1,5 @@
@import "../../bibase";
.bi-message-mask {
background-color: @color-bi-background-black;
.opacity(0.5);
}
.bi-message-title {
background-color: @color-bi-background-gray;
color: @color-bi-text-gray;

93
src/less/core/utils/common.less

@ -49,10 +49,19 @@
background-color: @color-bi-background-black;
.opacity(0.5);
}
@color-list-item-hover: #04070d;
//只有背景变化
.bi-list-item {
.list-item();
&:hover, &.hover {
background-color: @color-bi-background-gray;
}
&.disabled {
&, &:hover, &:active {
background-color: transparent !important;
}
}
}
.bi-theme-dark {
@ -61,16 +70,19 @@
background-color: @color-list-item-hover;
color: @color-bi-text;
}
&.disabled {
&, &:hover, &:active {
background-color: transparent;
}
}
}
}
//文字active时变化
.bi-list-item-effect {
.list-item-effect();
&.active, &:active {
color: @color-bi-text-highlight;
}
&.disabled {
&, &:hover, &:active {
color: @color-bi-text-disabled !important;
}
}
}
.bi-theme-dark {
@ -80,14 +92,24 @@
}
&.disabled {
&, &:hover, &:active {
color: @color-bi-text-disabled;
color: @color-bi-text-disabled !important;
}
}
}
}
//文字和背景hover时变化
.bi-list-item-hover {
.list-item-hover();
&:hover, &.hover {
color: @color-bi-text-highlight;
background-color: @color-bi-background-gray;
}
&.disabled {
&, &:hover, &:active {
color: @color-bi-text-disabled !important;
background-color: transparent !important;
}
}
}
.bi-theme-dark {
@ -98,15 +120,26 @@
}
&.disabled {
&, &:hover, &:active {
color: @color-bi-text-disabled;
background-color: transparent;
color: @color-bi-text-disabled !important;
}
}
}
}
//文字和背景hover和active时变化
.bi-list-item-active {
.list-item-active();
&:hover, &.hover {
background-color: @color-bi-background-gray;
}
&.active, &:active {
color: @color-bi-text-highlight;
background-color: @color-bi-background-gray;
}
&.disabled {
&, &:hover, &:active {
background-color: transparent !important;
}
}
}
.bi-theme-dark {
@ -119,16 +152,31 @@
color: @color-bi-text-highlight;
background-color: @color-list-item-hover;
}
&.disabled {
&, &:hover, &:active {
background-color: transparent;
}
}
}
}
//有选中效果
.bi-list-item-select {
.list-item-select();
&:hover, &.hover {
color: @color-bi-text-highlight;
background-color: @color-bi-background-gray;
}
&:active, &.active {
color: @color-bi-text;
background-color: @color-bi-background-highlight;
& .bi-high-light {
color: @color-bi-text;
}
}
&.disabled {
&, &:hover, &:active {
color: @color-bi-text-disabled !important;
background-color: transparent !important;
& .bi-high-light {
color: @color-bi-text-disabled !important;
}
}
}
}
.bi-theme-dark {
@ -144,14 +192,5 @@
color: @color-bi-text;
}
}
&.disabled {
&, &:hover, &:active {
color: @color-bi-text-disabled !important;
background-color: transparent !important;
& .bi-high-light {
color: @color-bi-text-disabled !important;
}
}
}
}
}

78
src/less/lib/style.less

@ -1,81 +1,3 @@
@import "colors";
//公共样式类库
//只有背景变化
.list-item() {
&:hover, &.hover {
background-color: @color-bi-background-gray;
}
&.disabled {
&, &:hover, &:active {
background-color: @color-bi-background-default;
}
}
}
//文字active时变化
.list-item-effect() {
&.active, &:active {
color: @color-bi-text-highlight;
}
&.disabled {
&, &:hover, &:active {
color: @color-bi-text-disabled;
}
}
}
//文字和背景hover时变化
.list-item-hover() {
&:hover, &.hover {
color: @color-bi-text-highlight;
background-color: @color-bi-background-gray;
}
&.disabled {
&, &:hover, &:active {
color: @color-bi-text-disabled;
background-color: @color-bi-background-default;
}
}
}
//文字和背景hover和active时变化
.list-item-active() {
&:hover, &.hover {
background-color: @color-bi-background-gray;
}
&.active, &:active {
color: @color-bi-text-highlight;
background-color: @color-bi-background-gray;
}
&.disabled {
&, &:hover, &:active {
background-color: @color-bi-background-default;
}
}
}
//有选中效果
.list-item-select() {
&:hover, &.hover {
color: @color-bi-text-highlight;
background-color: @color-bi-background-gray;
}
&:active, &.active {
color: @color-bi-text;
background-color: @color-bi-background-highlight;
& .bi-high-light {
color: @color-bi-text;
}
}
&.disabled {
&, &:hover, &:active {
color: @color-bi-text-disabled !important;
background-color: @color-bi-background-default !important;
& .bi-high-light {
color: @color-bi-text-disabled !important;
}
}
}
}
Loading…
Cancel
Save