windy 8 years ago
parent
commit
7a9ec0dcab
  1. 3
      demo.html
  2. 8
      demo/js/widget/demo.multiselectcombo.js
  3. 34
      dist/base.css
  4. 1
      dist/core.css
  5. 113
      dist/core.js
  6. 4
      dist/widget.css
  7. 4
      src/core/base.js
  8. 98
      src/core/cache.js
  9. 4
      src/core/func/function.js
  10. 6
      src/core/widget.js
  11. 31
      src/css/base/combo/combo.bubble.css
  12. 1
      src/css/base/segment/segment.css
  13. 1
      src/css/base/single/editor/editor.textarea.css
  14. 1
      src/css/base/single/text.css
  15. 1
      src/css/utils/overflow.css
  16. 1
      src/css/widget/base/toolbar/toolbar.progress.processor.css
  17. 1
      src/css/widget/sequencetable/dynamicnumber.sequencetable.css
  18. 1
      src/css/widget/sequencetable/listnumber.sequencetable.css
  19. 1
      src/css/widget/sequencetable/treenumber.sequencetable.css
  20. 3
      src/less/typographic.less
  21. 133
      src/less/visual.less

3
demo.html

@ -8,6 +8,8 @@
href="./dist/core.css"/> href="./dist/core.css"/>
<link rel="stylesheet" type="text/css" <link rel="stylesheet" type="text/css"
href="./dist/base.css"/> href="./dist/base.css"/>
<link rel="stylesheet" type="text/css"
href="./dist/widget.css"/>
<link rel="stylesheet" type="text/css" <link rel="stylesheet" type="text/css"
href="demo/dist/demo.css"/> href="demo/dist/demo.css"/>
@ -19,7 +21,6 @@
</head> </head>
<body> <body>
<div id="wrapper"></div> <div id="wrapper"></div>
<div id="container"></div>
<link href='https://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic,900italic,900&subset=latin,greek,greek-ext,vietnamese,cyrillic-ext,latin-ext,cyrillic' <link href='https://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic,900italic,900&subset=latin,greek,greek-ext,vietnamese,cyrillic-ext,latin-ext,cyrillic'
rel='stylesheet' type='text/css'> rel='stylesheet' type='text/css'>

8
demo/js/widget/demo.multiselectcombo.js

@ -45,10 +45,14 @@ Demo.MultiSelectCombo = BI.inherit(BI.Widget, {
_itemsCreator: function (options, callback) { _itemsCreator: function (options, callback) {
var self = this; var self = this;
var items = ITEMS; var items = ITEMS;
var keywords = (options.keywords || []).slice();
if (options.keyword) { if (options.keyword) {
var search = BI.Func.getSearchResult(items, options.keyword); keywords.push(options.keyword);
items = search.matched.concat(search.finded);
} }
BI.each(keywords, function (i, kw) {
var search = BI.Func.getSearchResult(items, kw);
items = search.matched.concat(search.finded);
});
if (options.selected_values) {//过滤 if (options.selected_values) {//过滤
var filter = BI.makeObject(options.selected_values, true); var filter = BI.makeObject(options.selected_values, true);
items = BI.filter(items, function (i, ob) { items = BI.filter(items, function (i, ob) {

34
dist/base.css vendored

@ -73,6 +73,37 @@
/****添加计算宽度的--运算符直接需要space****/ /****添加计算宽度的--运算符直接需要space****/
/****** common color(常用颜色,可用于普遍场景) *****/ /****** common color(常用颜色,可用于普遍场景) *****/
/**** custom color(自定义颜色,用于特定场景) ****/ /**** custom color(自定义颜色,用于特定场景) ****/
.bi-bubble-combo .bubble-combo-triangle-left {
width: 0;
height: 0;
border-top: 6px solid transparent;
border-left: 6px solid #009de3;
border-bottom: 6px solid transparent;
}
.bi-bubble-combo .bubble-combo-triangle-right {
width: 0;
height: 0;
border-top: 6px solid transparent;
border-right: 6px solid #009de3;
border-bottom: 6px solid transparent;
}
.bi-bubble-combo .bubble-combo-triangle-top {
width: 0;
height: 0;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-top: 6px solid #009de3;
}
.bi-bubble-combo .bubble-combo-triangle-bottom {
width: 0;
height: 0;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 6px solid #009de3;
}
/****添加计算宽度的--运算符直接需要space****/
/****** common color(常用颜色,可用于普遍场景) *****/
/**** custom color(自定义颜色,用于特定场景) ****/
.bi-bubble-popup-view { .bi-bubble-popup-view {
-webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
@ -736,6 +767,7 @@ li.CodeMirror-hint-active {
/****** common color(常用颜色,可用于普遍场景) *****/ /****** common color(常用颜色,可用于普遍场景) *****/
/**** custom color(自定义颜色,用于特定场景) ****/ /**** custom color(自定义颜色,用于特定场景) ****/
.bi-segment > .center-element { .bi-segment > .center-element {
overflow: hidden;
overflow-x: hidden; overflow-x: hidden;
overflow-y: hidden; overflow-y: hidden;
background: #ffffff; background: #ffffff;
@ -931,6 +963,7 @@ li.CodeMirror-hint-active {
/****** common color(常用颜色,可用于普遍场景) *****/ /****** common color(常用颜色,可用于普遍场景) *****/
/**** custom color(自定义颜色,用于特定场景) ****/ /**** custom color(自定义颜色,用于特定场景) ****/
.bi-textarea-editor { .bi-textarea-editor {
overflow: hidden;
overflow-x: hidden; overflow-x: hidden;
overflow-y: hidden; overflow-y: hidden;
} }
@ -982,6 +1015,7 @@ li.CodeMirror-hint-active {
.bi-text { .bi-text {
text-overflow: ellipsis; text-overflow: ellipsis;
overflow-x: hidden; overflow-x: hidden;
overflow-y: hidden;
white-space: nowrap; white-space: nowrap;
word-break: break-all; word-break: break-all;
} }

1
dist/core.css vendored

@ -9745,6 +9745,7 @@ textarea::-webkit-scrollbar-thumb {
.overflow-dot { .overflow-dot {
text-overflow: ellipsis; text-overflow: ellipsis;
overflow-x: hidden; overflow-x: hidden;
overflow-y: hidden;
white-space: nowrap; white-space: nowrap;
} }
/****添加计算宽度的--运算符直接需要space****/ /****添加计算宽度的--运算符直接需要space****/

113
dist/core.js vendored

@ -12883,7 +12883,7 @@ if (!window.BI) {
; ;
!(function ($, undefined) { !(function ($, undefined) {
_.extend(BI, { _.extend(BI, {
version: "4.0" version: "2.0"
}); });
var traverse = function (func, context) { var traverse = function (func, context) {
return function (value, key, obj) { return function (value, key, obj) {
@ -12906,7 +12906,7 @@ if (!window.BI) {
//Utility //Utility
_.extend(BI, { _.extend(BI, {
i18nText: function (key) { i18nText: function (key) {
var localeText = ""; var localeText = (BI.i18n && BI.i18n[key]) || "";
if (!localeText) { if (!localeText) {
localeText = key; localeText = key;
} }
@ -14519,6 +14519,7 @@ BI.Widget = BI.inherit(BI.OB, {
this.options.invisible = true; this.options.invisible = true;
this.element.hide(); this.element.hide();
} }
this.fireEvent(BI.Events.VIEW, visible);
}, },
setValid: function (valid) { setValid: function (valid) {
@ -14664,7 +14665,10 @@ BI.Widget = BI.inherit(BI.OB, {
}, },
destroy: function () { destroy: function () {
this._unMount(); this.empty();
this._isMounted = false;
this._parent = null;
this.destroyed();
this.element.destroy(); this.element.destroy();
this.fireEvent(BI.Events.DESTROY); this.fireEvent(BI.Events.DESTROY);
} }
@ -20293,104 +20297,7 @@ BI.RedMarkBehavior = BI.inherit(BI.Behavior, {
} }
}) })
} }
});/* });/**
* 前端缓存
*/
window.localStorage || (window.localStorage = {
items: {},
setItem: function (k, v) {
BI.Cache.addCookie(k, v);
},
getItem: function (k) {
return BI.Cache.getCookie(k);
},
removeItem: function (k) {
BI.Cache.deleteCookie(k);
},
key: function () {
},
clear: function () {
this.items = {};
}
});
BI.Cache = {
_prefix: "bi",
setUsername: function (username) {
localStorage.setItem(BI.Cache._prefix + ".username", (username + "" || "").toUpperCase());
},
getUsername: function () {
return localStorage.getItem(BI.Cache._prefix + ".username") || "";
},
_getKeyPrefix: function () {
return BI.Cache.getUsername() + "." + BI.Cache._prefix + ".";
},
_generateKey: function (key) {
return BI.Cache._getKeyPrefix() + (key || "");
},
getItem: function (key) {
return localStorage.getItem(BI.Cache._generateKey(key));
},
setItem: function (key, value) {
localStorage.setItem(BI.Cache._generateKey(key), value);
},
removeItem: function (key) {
localStorage.removeItem(BI.Cache._generateKey(key));
},
clear: function () {
for (var i = localStorage.length; i >= 0; i--) {
var key = localStorage.key(i);
if (key) {
if (key.indexOf(BI.Cache._getKeyPrefix()) === 0) {
localStorage.removeItem(key);
}
}
}
},
keys: function () {
var result = [];
for (var i = localStorage.length; i >= 0; i--) {
var key = localStorage.key(i);
if (key) {
var prefix = BI.Cache._getKeyPrefix();
if (key.indexOf(prefix) === 0) {
result[result.length] = key.substring(prefix.length);
}
}
}
return result;
},
addCookie: function (name, value, path, expiresHours) {
var cookieString = name + "=" + escape(value);
// 判断是否设置过期时间
if (expiresHours && expiresHours > 0) {
var date = new Date();
date.setTime(date.getTime() + expiresHours * 3600 * 1000);
cookieString = cookieString + "; expires=" + date.toGMTString();
}
if (path) {
cookieString = cookieString + "; path=" + path;
}
document.cookie = cookieString;
},
getCookie: function (name) {
var arr, reg = new RegExp("(^| )" + name + "=([^;]*)(;|$)");
if (arr = document.cookie.match(reg))
return unescape(arr[2]);
else
return null;
},
deleteCookie: function (name, path) {
var date = new Date();
date.setTime(date.getTime() - 10000);
var cookieString = name + "=v; expires=" + date.toGMTString();
if (path) {
cookieString = cookieString + "; path=" + path;
}
document.cookie = cookieString;
}
};/**
* guy * guy
* 控制器 * 控制器
* Controller层超类 * Controller层超类
@ -22684,7 +22591,7 @@ $(function () {
}, },
getTextSizeWidth: function (text, fontSize) { getTextSizeWidth: function (text, fontSize) {
var span = $("<span></span>").addClass("text-width-span").appendTo($("#container")); var span = $("<span></span>").addClass("text-width-span").appendTo($("body"));
if (fontSize == null) { if (fontSize == null) {
fontSize = 12; fontSize = 12;
@ -22706,7 +22613,7 @@ $(function () {
position: "absolute", position: "absolute",
top: "-9999px", top: "-9999px",
overflow: "scroll" overflow: "scroll"
}).appendTo($("#container")); }).appendTo($("body"));
this._scrollWidth = ul[0].offsetWidth - ul[0].clientWidth; this._scrollWidth = ul[0].offsetWidth - ul[0].clientWidth;
ul.destroy(); ul.destroy();
} }

4
dist/widget.css vendored

@ -205,6 +205,7 @@
-webkit-border-radius: 20px; -webkit-border-radius: 20px;
-moz-border-radius: 20px; -moz-border-radius: 20px;
border-radius: 20px; border-radius: 20px;
overflow: hidden;
overflow-x: hidden; overflow-x: hidden;
overflow-y: hidden; overflow-y: hidden;
} }
@ -1324,6 +1325,7 @@
/****** common color(常用颜色,可用于普遍场景) *****/ /****** common color(常用颜色,可用于普遍场景) *****/
/**** custom color(自定义颜色,用于特定场景) ****/ /**** custom color(自定义颜色,用于特定场景) ****/
.bi-sequence-table-dynamic-number .sequence-table-title-cell { .bi-sequence-table-dynamic-number .sequence-table-title-cell {
overflow: hidden;
overflow-x: hidden; overflow-x: hidden;
overflow-y: hidden; overflow-y: hidden;
-webkit-box-sizing: border-box; -webkit-box-sizing: border-box;
@ -1353,6 +1355,7 @@
/****** common color(常用颜色,可用于普遍场景) *****/ /****** common color(常用颜色,可用于普遍场景) *****/
/**** custom color(自定义颜色,用于特定场景) ****/ /**** custom color(自定义颜色,用于特定场景) ****/
.bi-sequence-table-list-number .sequence-table-title-cell { .bi-sequence-table-list-number .sequence-table-title-cell {
overflow: hidden;
overflow-x: hidden; overflow-x: hidden;
overflow-y: hidden; overflow-y: hidden;
-webkit-box-sizing: border-box; -webkit-box-sizing: border-box;
@ -1385,6 +1388,7 @@
/****** common color(常用颜色,可用于普遍场景) *****/ /****** common color(常用颜色,可用于普遍场景) *****/
/**** custom color(自定义颜色,用于特定场景) ****/ /**** custom color(自定义颜色,用于特定场景) ****/
.bi-sequence-table-tree-number .sequence-table-title-cell { .bi-sequence-table-tree-number .sequence-table-title-cell {
overflow: hidden;
overflow-x: hidden; overflow-x: hidden;
overflow-y: hidden; overflow-y: hidden;
-webkit-box-sizing: border-box; -webkit-box-sizing: border-box;

4
src/core/base.js

@ -10,7 +10,7 @@ if (!window.BI) {
; ;
!(function ($, undefined) { !(function ($, undefined) {
_.extend(BI, { _.extend(BI, {
version: "4.0" version: "2.0"
}); });
var traverse = function (func, context) { var traverse = function (func, context) {
return function (value, key, obj) { return function (value, key, obj) {
@ -33,7 +33,7 @@ if (!window.BI) {
//Utility //Utility
_.extend(BI, { _.extend(BI, {
i18nText: function (key) { i18nText: function (key) {
var localeText = ""; var localeText = (BI.i18n && BI.i18n[key]) || "";
if (!localeText) { if (!localeText) {
localeText = key; localeText = key;
} }

98
src/core/cache.js

@ -1,98 +0,0 @@
/*
* 前端缓存
*/
window.localStorage || (window.localStorage = {
items: {},
setItem: function (k, v) {
BI.Cache.addCookie(k, v);
},
getItem: function (k) {
return BI.Cache.getCookie(k);
},
removeItem: function (k) {
BI.Cache.deleteCookie(k);
},
key: function () {
},
clear: function () {
this.items = {};
}
});
BI.Cache = {
_prefix: "bi",
setUsername: function (username) {
localStorage.setItem(BI.Cache._prefix + ".username", (username + "" || "").toUpperCase());
},
getUsername: function () {
return localStorage.getItem(BI.Cache._prefix + ".username") || "";
},
_getKeyPrefix: function () {
return BI.Cache.getUsername() + "." + BI.Cache._prefix + ".";
},
_generateKey: function (key) {
return BI.Cache._getKeyPrefix() + (key || "");
},
getItem: function (key) {
return localStorage.getItem(BI.Cache._generateKey(key));
},
setItem: function (key, value) {
localStorage.setItem(BI.Cache._generateKey(key), value);
},
removeItem: function (key) {
localStorage.removeItem(BI.Cache._generateKey(key));
},
clear: function () {
for (var i = localStorage.length; i >= 0; i--) {
var key = localStorage.key(i);
if (key) {
if (key.indexOf(BI.Cache._getKeyPrefix()) === 0) {
localStorage.removeItem(key);
}
}
}
},
keys: function () {
var result = [];
for (var i = localStorage.length; i >= 0; i--) {
var key = localStorage.key(i);
if (key) {
var prefix = BI.Cache._getKeyPrefix();
if (key.indexOf(prefix) === 0) {
result[result.length] = key.substring(prefix.length);
}
}
}
return result;
},
addCookie: function (name, value, path, expiresHours) {
var cookieString = name + "=" + escape(value);
// 判断是否设置过期时间
if (expiresHours && expiresHours > 0) {
var date = new Date();
date.setTime(date.getTime() + expiresHours * 3600 * 1000);
cookieString = cookieString + "; expires=" + date.toGMTString();
}
if (path) {
cookieString = cookieString + "; path=" + path;
}
document.cookie = cookieString;
},
getCookie: function (name) {
var arr, reg = new RegExp("(^| )" + name + "=([^;]*)(;|$)");
if (arr = document.cookie.match(reg))
return unescape(arr[2]);
else
return null;
},
deleteCookie: function (name, path) {
var date = new Date();
date.setTime(date.getTime() - 10000);
var cookieString = name + "=v; expires=" + date.toGMTString();
if (path) {
cookieString = cookieString + "; path=" + path;
}
document.cookie = cookieString;
}
};

4
src/core/func/function.js

@ -298,7 +298,7 @@ $(function () {
}, },
getTextSizeWidth: function (text, fontSize) { getTextSizeWidth: function (text, fontSize) {
var span = $("<span></span>").addClass("text-width-span").appendTo($("#container")); var span = $("<span></span>").addClass("text-width-span").appendTo($("body"));
if (fontSize == null) { if (fontSize == null) {
fontSize = 12; fontSize = 12;
@ -320,7 +320,7 @@ $(function () {
position: "absolute", position: "absolute",
top: "-9999px", top: "-9999px",
overflow: "scroll" overflow: "scroll"
}).appendTo($("#container")); }).appendTo($("body"));
this._scrollWidth = ul[0].offsetWidth - ul[0].clientWidth; this._scrollWidth = ul[0].offsetWidth - ul[0].clientWidth;
ul.destroy(); ul.destroy();
} }

6
src/core/widget.js

@ -220,6 +220,7 @@ BI.Widget = BI.inherit(BI.OB, {
this.options.invisible = true; this.options.invisible = true;
this.element.hide(); this.element.hide();
} }
this.fireEvent(BI.Events.VIEW, visible);
}, },
setValid: function (valid) { setValid: function (valid) {
@ -365,7 +366,10 @@ BI.Widget = BI.inherit(BI.OB, {
}, },
destroy: function () { destroy: function () {
this._unMount(); this.empty();
this._isMounted = false;
this._parent = null;
this.destroyed();
this.element.destroy(); this.element.destroy();
this.fireEvent(BI.Events.DESTROY); this.fireEvent(BI.Events.DESTROY);
} }

31
src/css/base/combo/combo.bubble.css

@ -0,0 +1,31 @@
/****添加计算宽度的--运算符直接需要space****/
/****** common color(常用颜色,可用于普遍场景) *****/
/**** custom color(自定义颜色,用于特定场景) ****/
.bi-bubble-combo .bubble-combo-triangle-left {
width: 0;
height: 0;
border-top: 6px solid transparent;
border-left: 6px solid #009de3;
border-bottom: 6px solid transparent;
}
.bi-bubble-combo .bubble-combo-triangle-right {
width: 0;
height: 0;
border-top: 6px solid transparent;
border-right: 6px solid #009de3;
border-bottom: 6px solid transparent;
}
.bi-bubble-combo .bubble-combo-triangle-top {
width: 0;
height: 0;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-top: 6px solid #009de3;
}
.bi-bubble-combo .bubble-combo-triangle-bottom {
width: 0;
height: 0;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 6px solid #009de3;
}

1
src/css/base/segment/segment.css

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

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

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

1
src/css/base/single/text.css

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

1
src/css/utils/overflow.css

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

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

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

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

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

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

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

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

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

3
src/less/typographic.less

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

133
src/less/visual.less

@ -3,21 +3,25 @@
-moz-text-shadow: none; -moz-text-shadow: none;
-webkit-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; text-shadow: @arguments;
-moz-text-shadow: @arguments; -moz-text-shadow: @arguments;
-webkit-text-shadow: @arguments; -webkit-text-shadow: @arguments;
} }
.box-shadow(none) { .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(@style, @c) when (iscolor(@c)) { .box-shadow(@style, @c) when (iscolor(@c)) {
-webkit-box-shadow: @style @c; -webkit-box-shadow: @style @c;
-moz-box-shadow: @style @c; -moz-box-shadow: @style @c;
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(@x, @y, @blur, @spreed: 0px, @color, @inset: outset) when (iscolor(@color)) and (isnumber(unit(@spreed))){
box-shadow: @arguments; box-shadow: @arguments;
-webkit-box-shadow: @arguments; -webkit-box-shadow: @arguments;
@ -29,6 +33,14 @@
@opa-ie: @opa*100; @opa-ie: @opa*100;
filter: ~'alpha(opacity=@{opa-ie})'; 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: @start; //不支持的用这个
@ -40,11 +52,13 @@
background: linear-gradient(@start, @end); /*future CSS3 browsers*/ background: linear-gradient(@start, @end); /*future CSS3 browsers*/
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='@{start}', endColorstr='@{end}', GradientType='0'); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='@{start}', endColorstr='@{end}', GradientType='0');
} }
.border-radius(@radius: 5px) { .border-radius(@radius: 5px) {
-webkit-border-radius: @radius; -webkit-border-radius: @radius;
-moz-border-radius: @radius; -moz-border-radius: @radius;
border-radius: @radius; border-radius: @radius;
} }
.border-corner-top-radius(@leftTop, @rightTop) { .border-corner-top-radius(@leftTop, @rightTop) {
-moz-border-radius-topleft: @leftTop; -moz-border-radius-topleft: @leftTop;
-webkit-border-top-left-radius: @leftTop; -webkit-border-top-left-radius: @leftTop;
@ -54,6 +68,7 @@
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; -moz-border-radius-bottomleft: @rightBottom;
-webkit-border-bottom-left-radius: @rightBottom; -webkit-border-bottom-left-radius: @rightBottom;
@ -63,6 +78,7 @@
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; -moz-border-radius-topleft: @leftTop;
-webkit-border-top-left-radius: @leftTop; -webkit-border-top-left-radius: @leftTop;
@ -72,6 +88,7 @@
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; -moz-border-radius-topright: @rightTop;
-webkit-border-top-right-radius: @rightTop; -webkit-border-top-right-radius: @rightTop;
@ -81,8 +98,124 @@
border-top-right-radius: @rightTop; border-top-right-radius: @rightTop;
border-bottom-right-radius: @rightBottom; border-bottom-right-radius: @rightBottom;
} }
.border-corner-radius(@leftTop, @rightTop, @rightBottom, @leftBottom) { .border-corner-radius(@leftTop, @rightTop, @rightBottom, @leftBottom) {
-webkit-border-radius: @arguments; -webkit-border-radius: @arguments;
-moz-border-radius: @arguments; -moz-border-radius: @arguments;
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