merge

8 years ago · 7a9ec0dcab
22 changed files with 264 additions and 232 deletions
--- a/demo.html
+++ b/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'>
--- a/demo/js/widget/demo.multiselectcombo.js
+++ b/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);
+            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) {//过滤
            var filter = BI.makeObject(options.selected_values, true);
            items = BI.filter(items, function (i, ob) {
--- a/dist/base.css
+++ b/dist/base.css
@ -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;
 }
--- a/dist/core.css
+++ b/dist/core.css
@ -9745,6 +9745,7 @@ textarea::-webkit-scrollbar-thumb {
 .overflow-dot {
  text-overflow: ellipsis;
  overflow-x: hidden;
  overflow-y: hidden;
  white-space: nowrap;
 }
 /****添加计算宽度的--运算符直接需要space****/
--- a/dist/core.js
+++ b/dist/core.js
@ -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();
            }
--- a/dist/widget.css
+++ b/dist/widget.css
@ -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;
--- a/src/core/base.js
+++ b/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;
            }
--- a/src/core/cache.js
+++ b/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;
    }
 };
--- a/src/core/func/function.js
+++ b/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();
            }
--- a/src/core/widget.js
+++ b/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);
    }
--- a/src/css/base/combo/combo.bubble.css
+++ b/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;
 }
--- a/src/css/base/segment/segment.css
+++ b/src/css/base/segment/segment.css
@ -2,6 +2,7 @@
 /****** common color(常用颜色,可用于普遍场景) *****/
 /**** custom color(自定义颜色,用于特定场景) ****/
 .bi-segment > .center-element {
  overflow: hidden;
  overflow-x: hidden;
  overflow-y: hidden;
  background: #ffffff;
--- a/src/css/base/single/editor/editor.textarea.css
+++ b/src/css/base/single/editor/editor.textarea.css
@ -2,6 +2,7 @@
 /****** common color(常用颜色,可用于普遍场景) *****/
 /**** custom color(自定义颜色,用于特定场景) ****/
 .bi-textarea-editor {
  overflow: hidden;
  overflow-x: hidden;
  overflow-y: hidden;
 }
--- a/src/css/base/single/text.css
+++ b/src/css/base/single/text.css
@ -4,6 +4,7 @@
 .bi-text {
  text-overflow: ellipsis;
  overflow-x: hidden;
  overflow-y: hidden;
  white-space: nowrap;
  word-break: break-all;
 }
--- a/src/css/utils/overflow.css
+++ b/src/css/utils/overflow.css
@ -36,5 +36,6 @@
 .overflow-dot {
  text-overflow: ellipsis;
  overflow-x: hidden;
  overflow-y: hidden;
  white-space: nowrap;
 }
--- a/src/css/widget/base/toolbar/toolbar.progress.processor.css
+++ b/src/css/widget/base/toolbar/toolbar.progress.processor.css
@ -6,6 +6,7 @@
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  border-radius: 20px;
  overflow: hidden;
  overflow-x: hidden;
  overflow-y: hidden;
 }
--- a/src/css/widget/sequencetable/dynamicnumber.sequencetable.css
+++ b/src/css/widget/sequencetable/dynamicnumber.sequencetable.css
@ -2,6 +2,7 @@
 /****** common color(常用颜色,可用于普遍场景) *****/
 /**** custom color(自定义颜色,用于特定场景) ****/
 .bi-sequence-table-dynamic-number .sequence-table-title-cell {
  overflow: hidden;
  overflow-x: hidden;
  overflow-y: hidden;
  -webkit-box-sizing: border-box;
--- a/src/css/widget/sequencetable/listnumber.sequencetable.css
+++ b/src/css/widget/sequencetable/listnumber.sequencetable.css
@ -2,6 +2,7 @@
 /****** common color(常用颜色,可用于普遍场景) *****/
 /**** custom color(自定义颜色,用于特定场景) ****/
 .bi-sequence-table-list-number .sequence-table-title-cell {
  overflow: hidden;
  overflow-x: hidden;
  overflow-y: hidden;
  -webkit-box-sizing: border-box;
--- a/src/css/widget/sequencetable/treenumber.sequencetable.css
+++ b/src/css/widget/sequencetable/treenumber.sequencetable.css
@ -2,6 +2,7 @@
 /****** common color(常用颜色,可用于普遍场景) *****/
 /**** custom color(自定义颜色,用于特定场景) ****/
 .bi-sequence-table-tree-number .sequence-table-title-cell {
  overflow: hidden;
  overflow-x: hidden;
  overflow-y: hidden;
  -webkit-box-sizing: border-box;
--- a/src/less/typographic.less
+++ b/src/less/typographic.less
@ -9,17 +9,20 @@
 }
 .overflow-auto(){
  overflow: auto;
  overflow-x: auto;
  overflow-y: auto;
 }
 .overflow-hidden(){
  overflow: hidden;
  overflow-x: hidden;
  overflow-y: hidden;
 }
 .overflow-dot(){
  text-overflow:ellipsis;
  overflow-x: hidden;
  overflow-y: hidden;
  white-space:nowrap;
 }
 .user-select(@select){
--- a/src/less/visual.less
+++ b/src/less/visual.less
@ -3,21 +3,25 @@
  -moz-text-shadow: none;
  -webkit-text-shadow: 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;
  -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;
@ -29,6 +33,14 @@
  @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; //不支持的用这个
@ -40,11 +52,13 @@
  background: linear-gradient(@start, @end); /*future CSS3 browsers*/
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='@{start}', endColorstr='@{end}', GradientType='0');
 }
 .border-radius(@radius: 5px) {
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
  border-radius: @radius;
 }
 .border-corner-top-radius(@leftTop, @rightTop) {
  -moz-border-radius-topleft: @leftTop;
  -webkit-border-top-left-radius: @leftTop;
@ -54,6 +68,7 @@
  border-top-left-radius: @leftTop;
  border-top-right-radius: @rightTop;
 }
 .border-corner-bottom-radius(@leftBottom, @rightBottom) {
  -moz-border-radius-bottomleft: @rightBottom;
  -webkit-border-bottom-left-radius: @rightBottom;
@ -63,6 +78,7 @@
  border-bottom-right-radius: @rightBottom;
  border-bottom-left-radius: @leftBottom;
 }
 .border-corner-left-radius(@leftTop, @leftBottom) {
  -moz-border-radius-topleft: @leftTop;
  -webkit-border-top-left-radius: @leftTop;
@ -72,6 +88,7 @@
  border-top-left-radius: @leftTop;
  border-bottom-left-radius: @leftBottom;
 }
 .border-corner-right-radius(@rightTop, @rightBottom) {
  -moz-border-radius-topright: @rightTop;
  -webkit-border-top-right-radius: @rightTop;
@ -81,8 +98,124 @@
  border-top-right-radius: @rightTop;
  border-bottom-right-radius: @rightBottom;
 }
 .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: "";
  }
 }