windy 7 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. 4
      src/css/lib/animate.css
  16. 1
      src/css/utils/overflow.css
  17. 1
      src/css/widget/base/toolbar/toolbar.progress.processor.css
  18. 1
      src/css/widget/sequencetable/dynamicnumber.sequencetable.css
  19. 1
      src/css/widget/sequencetable/listnumber.sequencetable.css
  20. 1
      src/css/widget/sequencetable/treenumber.sequencetable.css
  21. 3
      src/less/typographic.less
  22. 175
      src/less/visual.less

3
demo.html

@ -8,6 +8,8 @@
href="./dist/core.css"/>
<link rel="stylesheet" type="text/css"
href="./dist/base.css"/>
<link rel="stylesheet" type="text/css"
href="./dist/widget.css"/>
<link rel="stylesheet" type="text/css"
href="demo/dist/demo.css"/>
@ -19,7 +21,6 @@
</head>
<body>
<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'
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) {
var self = this;
var items = ITEMS;
var keywords = (options.keywords || []).slice();
if (options.keyword) {
var search = BI.Func.getSearchResult(items, options.keyword);
items = search.matched.concat(search.finded);
keywords.push(options.keyword);
}
BI.each(keywords, function (i, kw) {
var search = BI.Func.getSearchResult(items, kw);
items = search.matched.concat(search.finded);
});
if (options.selected_values) {//过滤
var filter = BI.makeObject(options.selected_values, true);
items = BI.filter(items, function (i, ob) {

34
dist/base.css vendored

@ -73,6 +73,37 @@
/****添加计算宽度的--运算符直接需要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;
}
/****添加计算宽度的--运算符直接需要space****/
/****** common color(常用颜色,可用于普遍场景) *****/
/**** custom color(自定义颜色,用于特定场景) ****/
.bi-bubble-popup-view {
-webkit-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(常用颜色,可用于普遍场景) *****/
/**** custom color(自定义颜色,用于特定场景) ****/
.bi-segment > .center-element {
overflow: hidden;
overflow-x: hidden;
overflow-y: hidden;
background: #ffffff;
@ -931,6 +963,7 @@ li.CodeMirror-hint-active {
/****** common color(常用颜色,可用于普遍场景) *****/
/**** custom color(自定义颜色,用于特定场景) ****/
.bi-textarea-editor {
overflow: hidden;
overflow-x: hidden;
overflow-y: hidden;
}
@ -982,6 +1015,7 @@ li.CodeMirror-hint-active {
.bi-text {
text-overflow: ellipsis;
overflow-x: hidden;
overflow-y: hidden;
white-space: nowrap;
word-break: break-all;
}

1
dist/core.css vendored

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

113
dist/core.js vendored

@ -12883,7 +12883,7 @@ if (!window.BI) {
;
!(function ($, undefined) {
_.extend(BI, {
version: "4.0"
version: "2.0"
});
var traverse = function (func, context) {
return function (value, key, obj) {
@ -12906,7 +12906,7 @@ if (!window.BI) {
//Utility
_.extend(BI, {
i18nText: function (key) {
var localeText = "";
var localeText = (BI.i18n && BI.i18n[key]) || "";
if (!localeText) {
localeText = key;
}
@ -14519,6 +14519,7 @@ BI.Widget = BI.inherit(BI.OB, {
this.options.invisible = true;
this.element.hide();
}
this.fireEvent(BI.Events.VIEW, visible);
},
setValid: function (valid) {
@ -14664,7 +14665,10 @@ BI.Widget = BI.inherit(BI.OB, {
},
destroy: function () {
this._unMount();
this.empty();
this._isMounted = false;
this._parent = null;
this.destroyed();
this.element.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
* 控制器
* Controller层超类
@ -22684,7 +22591,7 @@ $(function () {
},
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) {
fontSize = 12;
@ -22706,7 +22613,7 @@ $(function () {
position: "absolute",
top: "-9999px",
overflow: "scroll"
}).appendTo($("#container"));
}).appendTo($("body"));
this._scrollWidth = ul[0].offsetWidth - ul[0].clientWidth;
ul.destroy();
}

4
dist/widget.css vendored

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

4
src/core/base.js

@ -10,7 +10,7 @@ if (!window.BI) {
;
!(function ($, undefined) {
_.extend(BI, {
version: "4.0"
version: "2.0"
});
var traverse = function (func, context) {
return function (value, key, obj) {
@ -33,7 +33,7 @@ if (!window.BI) {
//Utility
_.extend(BI, {
i18nText: function (key) {
var localeText = "";
var localeText = (BI.i18n && BI.i18n[key]) || "";
if (!localeText) {
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) {
var span = $("<span></span>").addClass("text-width-span").appendTo($("#container"));
var span = $("<span></span>").addClass("text-width-span").appendTo($("body"));
if (fontSize == null) {
fontSize = 12;
@ -320,7 +320,7 @@ $(function () {
position: "absolute",
top: "-9999px",
overflow: "scroll"
}).appendTo($("#container"));
}).appendTo($("body"));
this._scrollWidth = ul[0].offsetWidth - ul[0].clientWidth;
ul.destroy();
}

6
src/core/widget.js

@ -220,6 +220,7 @@ BI.Widget = BI.inherit(BI.OB, {
this.options.invisible = true;
this.element.hide();
}
this.fireEvent(BI.Events.VIEW, visible);
},
setValid: function (valid) {
@ -365,7 +366,10 @@ BI.Widget = BI.inherit(BI.OB, {
},
destroy: function () {
this._unMount();
this.empty();
this._isMounted = false;
this._parent = null;
this.destroyed();
this.element.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(常用颜色,可用于普遍场景) *****/
/**** custom color(自定义颜色,用于特定场景) ****/
.bi-segment > .center-element {
overflow: hidden;
overflow-x: hidden;
overflow-y: hidden;
background: #ffffff;

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

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

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

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

4
src/css/lib/animate.css vendored

@ -2201,14 +2201,14 @@
}
}
@-webkit-keyframes zoomInUp {
from {
from {
opacity: 0;
-webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
-webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
60% {
60% {
opacity: 1;
-webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);

1
src/css/utils/overflow.css

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

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

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

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

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

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

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

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

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

3
src/less/typographic.less

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

175
src/less/visual.less

@ -1,37 +1,49 @@
.text-shadow(none){
.text-shadow(none) {
text-shadow: none;
-moz-text-shadow: none;
-webkit-text-shadow: none;
}
.text-shadow(@x, @y, @blur, @color) when not (@x = none){
.text-shadow(@x, @y, @blur, @color) when not (@x = none) {
text-shadow: @arguments;
-moz-text-shadow: @arguments;
-webkit-text-shadow: @arguments;
}
.box-shadow(none){
.box-shadow(none) {
box-shadow: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
}
.box-shadow(@style, @c) when (iscolor(@c)) {
-webkit-box-shadow: @style @c;
-moz-box-shadow: @style @c;
box-shadow: @style @c;
}
.box-shadow(@x, @y, @blur, @spreed: 0px, @color, @inset: outset) when (iscolor(@color)) and (isnumber(unit(@spreed))){
box-shadow: @arguments;
-webkit-box-shadow: @arguments;
-moz-box-shadow: @arguments;
}
.opacity(@opa){
.opacity(@opa) {
opacity: @opa;
@opa-ie:@opa*100;
@opa-ie: @opa*100;
filter: ~'alpha(opacity=@{opa-ie})';
}
.transition(@transition) {
-webkit-transition: @transition;
-moz-transition: @transition;
-o-transition: @transition;
transition: @transition;
}
//渐变
.gradient(@start, @end){
background: @start; //不支持的用这个
.gradient(@start, @end) {
background: @start; //不支持的用这个
background: -webkit-gradient(linear, 0 0, 0 100%, from(@start) to(@end)); /*old webkit*/
background: -webkit-linear-gradient(@start, @end); /*new webkit*/
background: -moz-linear-gradient(@start, @end); /*gecko*/
@ -40,49 +52,170 @@
background: linear-gradient(@start, @end); /*future CSS3 browsers*/
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='@{start}', endColorstr='@{end}', GradientType='0');
}
.border-radius(@radius: 5px){
.border-radius(@radius: 5px) {
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
border-radius: @radius;
}
.border-corner-top-radius(@leftTop, @rightTop){
.border-corner-top-radius(@leftTop, @rightTop) {
-moz-border-radius-topleft: @leftTop;
-webkit-border-top-left-radius: @leftTop;
-moz-border-radius-topright: @rightTop;
-webkit-border-top-right-radius: @rightTop;
border-top-left-radius:@leftTop;
border-top-right-radius:@rightTop;
border-top-left-radius: @leftTop;
border-top-right-radius: @rightTop;
}
.border-corner-bottom-radius(@leftBottom, @rightBottom){
.border-corner-bottom-radius(@leftBottom, @rightBottom) {
-moz-border-radius-bottomleft: @rightBottom;
-webkit-border-bottom-left-radius: @rightBottom;
-moz-border-radius-bottomright: @leftBottom;
-webkit-border-bottom-right-radius: @rightBottom;
border-bottom-right-radius:@rightBottom;
border-bottom-left-radius:@leftBottom;
border-bottom-right-radius: @rightBottom;
border-bottom-left-radius: @leftBottom;
}
.border-corner-left-radius(@leftTop, @leftBottom){
.border-corner-left-radius(@leftTop, @leftBottom) {
-moz-border-radius-topleft: @leftTop;
-webkit-border-top-left-radius: @leftTop;
-moz-border-radius-bottomleft: @leftBottom;
-webkit-border-bottom-left-radius: @leftBottom;
border-top-left-radius:@leftTop;
border-bottom-left-radius:@leftBottom;
border-top-left-radius: @leftTop;
border-bottom-left-radius: @leftBottom;
}
.border-corner-right-radius(@rightTop, @rightBottom){
.border-corner-right-radius(@rightTop, @rightBottom) {
-moz-border-radius-topright: @rightTop;
-webkit-border-top-right-radius: @rightTop;
-moz-border-radius-bottomright: @rightBottom;
-webkit-border-bottom-right-radius: @rightBottom;
border-top-right-radius:@rightTop;
border-bottom-right-radius:@rightBottom;
border-top-right-radius: @rightTop;
border-bottom-right-radius: @rightBottom;
}
.border-corner-radius(@leftTop, @rightTop, @rightBottom, @leftBottom){
.border-corner-radius(@leftTop, @rightTop, @rightBottom, @leftBottom) {
-webkit-border-radius: @arguments;
-moz-border-radius: @arguments;
border-radius: @arguments;
}
@sideHeight: 6px;
@sideLength: 12px;
.solid-triangle-up(@color) {
width: 0;
height: 0;
border-left: (@sideLength/2) solid transparent;
border-right: (@sideLength/2) solid transparent;
border-bottom: @sideHeight solid @color;
}
.solid-triangle-down(@color) {
width: 0;
height: 0;
border-left: (@sideLength/2) solid transparent;
border-right: (@sideLength/2) solid transparent;
border-top: @sideHeight solid @color;
}
.solid-triangle-left(@color) {
width: 0;
height: 0;
border-top: (@sideLength/2) solid transparent;
border-right: @sideHeight solid @color;
border-bottom: (@sideLength/2) solid transparent;
}
.solid-triangle-right(@color) {
width: 0;
height: 0;
border-top: (@sideLength/2) solid transparent;
border-left: @sideHeight solid @color;
border-bottom: (@sideLength/2) solid transparent;
}
.solid-triangle-top-left(@color) {
width: 0;
height: 0;
border-top: @sideHeight solid @color;
border-right: @sideHeight solid transparent;
}
.solid-triangle-top-right(@color) {
width: 0;
height: 0;
border-top: @sideHeight solid @color;
border-left: @sideHeight solid transparent;
}
.solid-triangle-bottom-left(@color) {
width: 0;
height: 0;
border-bottom: @sideHeight solid @color;
border-right: @sideHeight solid transparent;
}
.solid-triangle-bottom-right(@color) {
width: 0;
height: 0;
border-bottom: @sideHeight solid @color;
border-left: @sideHeight solid transparent;
}
.triangle-top() {
position: absolute;
width: 16px;
height: 10px;
border-bottom: 1px solid #f5f5f5;
&:before {
position: absolute;
top: 0px;
right: 0px;
bottom: 0px;
border-bottom: 10px solid #ccc;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
content: "";
}
&:after {
position: absolute;
right: 1px;
top: 1px;
bottom: 0px;
border-bottom: 9px solid #f5f5f5;
border-left: 7px solid transparent;
border-right: 7px solid transparent;
content: "";
}
}
.triangle-bottom() {
position: absolute;
width: 16px;
height: 10px;
border-top: 1px solid #f5f5f5;
&:after {
position: absolute;
right: 1px;
top: -1px;
border-top: 9px solid #f5f5f5;
border-left: 7px solid transparent;
border-right: 7px solid transparent;
content: "";
}
&:before {
position: absolute;
border-top: 10px solid #cccccc;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
content: "";
}
}
Loading…
Cancel
Save