From 973d4c250af45d26b2c10318c496f2e45aadb1d9 Mon Sep 17 00:00:00 2001 From: guy Date: Thu, 22 Jul 2021 17:44:57 +0800 Subject: [PATCH] =?UTF-8?q?bubble=E4=BD=BF=E7=94=A8popper.js=E5=AE=9E?= =?UTF-8?q?=E7=8E=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- changelog.md | 1 + src/core/{worker.js => 10.worker.js} | 0 src/core/{popper.js => 9.popper.js} | 0 src/core/action/action.js | 12 +- src/core/action/action.show.js | 4 - src/core/behavior/0.behavior.js | 7 +- src/core/behavior/behavior.highlight.js | 11 +- src/core/behavior/behavior.redmark.js | 13 +- src/core/controller/0.controller.js | 5 - src/core/controller/controller.broadcast.js | 9 +- src/core/controller/controller.bubbles.js | 295 +++----------------- src/core/controller/controller.layer.js | 11 +- src/core/controller/controller.masker.js | 10 +- src/core/controller/controller.popover.js | 9 +- src/core/controller/controller.resizer.js | 9 +- src/core/controller/controller.tooltips.js | 11 +- src/core/listener/listener.show.js | 11 +- src/core/logic/logic.layout.js | 24 +- src/less/base/single/tip/tip.bubble.less | 17 +- 19 files changed, 88 insertions(+), 371 deletions(-) rename src/core/{worker.js => 10.worker.js} (100%) rename src/core/{popper.js => 9.popper.js} (100%) diff --git a/changelog.md b/changelog.md index 4506df680..f28681515 100644 --- a/changelog.md +++ b/changelog.md @@ -1,5 +1,6 @@ # 更新日志 2.0(2021-07) +- bubble使用popper.js实现 - 优化了日期类型控件标红时的报错提示 - 支持虚拟dom - 修复了树控件节点未初始化时调用树的getValue始终为空的问题 diff --git a/src/core/worker.js b/src/core/10.worker.js similarity index 100% rename from src/core/worker.js rename to src/core/10.worker.js diff --git a/src/core/popper.js b/src/core/9.popper.js similarity index 100% rename from src/core/popper.js rename to src/core/9.popper.js diff --git a/src/core/action/action.js b/src/core/action/action.js index 5ddf480d8..3639c00e5 100644 --- a/src/core/action/action.js +++ b/src/core/action/action.js @@ -6,15 +6,11 @@ * @abstract */ BI.Action = BI.inherit(BI.OB, { - _defaultConfig: function () { - return BI.extend(BI.Action.superclass._defaultConfig.apply(this, arguments), { + props: function () { + return { src: null, tar: null - }); - }, - - _init: function () { - BI.Action.superclass._init.apply(this, arguments); + }; }, actionPerformed: function (src, tar, callback) { @@ -36,4 +32,4 @@ BI.ActionFactory = { } return new action(options); } -}; \ No newline at end of file +}; diff --git a/src/core/action/action.show.js b/src/core/action/action.show.js index 4fd6c3fae..68296ae19 100644 --- a/src/core/action/action.show.js +++ b/src/core/action/action.show.js @@ -5,10 +5,6 @@ * @extends BI.Action */ BI.ShowAction = BI.inherit(BI.Action, { - _defaultConfig: function () { - return BI.extend(BI.ShowAction.superclass._defaultConfig.apply(this, arguments), {}); - }, - actionPerformed: function (src, tar, callback) { tar = tar || this.options.tar; tar.setVisible(true); diff --git a/src/core/behavior/0.behavior.js b/src/core/behavior/0.behavior.js index 849a6a075..3645f87b7 100644 --- a/src/core/behavior/0.behavior.js +++ b/src/core/behavior/0.behavior.js @@ -26,12 +26,7 @@ BI.Behavior = BI.inherit(BI.OB, { }); }, - _init: function () { - BI.Behavior.superclass._init.apply(this, arguments); - - }, - doBehavior: function () { } -}); \ No newline at end of file +}); diff --git a/src/core/behavior/behavior.highlight.js b/src/core/behavior/behavior.highlight.js index 9ea3da0b9..683bc061e 100644 --- a/src/core/behavior/behavior.highlight.js +++ b/src/core/behavior/behavior.highlight.js @@ -5,15 +5,6 @@ * @extends BI.Behavior */ BI.HighlightBehavior = BI.inherit(BI.Behavior, { - _defaultConfig: function () { - return BI.extend(BI.HighlightBehavior.superclass._defaultConfig.apply(this, arguments), {}); - }, - - _init: function () { - BI.HighlightBehavior.superclass._init.apply(this, arguments); - - }, - doBehavior: function (items) { var args = Array.prototype.slice.call(arguments, 1), o = this.options; @@ -39,4 +30,4 @@ BI.HighlightBehavior = BI.inherit(BI.Behavior, { } }); } -}); \ No newline at end of file +}); diff --git a/src/core/behavior/behavior.redmark.js b/src/core/behavior/behavior.redmark.js index 80850140a..b9c6572e9 100644 --- a/src/core/behavior/behavior.redmark.js +++ b/src/core/behavior/behavior.redmark.js @@ -5,17 +5,6 @@ * @extends BI.Behavior */ BI.RedMarkBehavior = BI.inherit(BI.Behavior, { - _defaultConfig: function () { - return BI.extend(BI.RedMarkBehavior.superclass._defaultConfig.apply(this, arguments), { - - }); - }, - - _init: function () { - BI.RedMarkBehavior.superclass._init.apply(this, arguments); - - }, - doBehavior: function (items) { var args = Array.prototype.slice.call(arguments, 1), o = this.options; @@ -31,4 +20,4 @@ BI.RedMarkBehavior = BI.inherit(BI.Behavior, { } }); } -}); \ No newline at end of file +}); diff --git a/src/core/controller/0.controller.js b/src/core/controller/0.controller.js index ac55e834b..4eba2c0ad 100644 --- a/src/core/controller/0.controller.js +++ b/src/core/controller/0.controller.js @@ -7,10 +7,5 @@ * @abstract */ BI.Controller = BI.inherit(BI.OB, { - _defaultConfig: function () { - return BI.extend(BI.Controller.superclass._defaultConfig.apply(this, arguments), { - - }); - } }); BI.Controller.EVENT_CHANGE = "__EVENT_CHANGE__"; diff --git a/src/core/controller/controller.broadcast.js b/src/core/controller/controller.broadcast.js index 200f98f0b..89b2f0c35 100644 --- a/src/core/controller/controller.broadcast.js +++ b/src/core/controller/controller.broadcast.js @@ -5,12 +5,7 @@ * @class */ BI.BroadcastController = BI.inherit(BI.Controller, { - _defaultConfig: function () { - return BI.extend(BI.BroadcastController.superclass._defaultConfig.apply(this, arguments), {}); - }, - - _init: function () { - BI.BroadcastController.superclass._init.apply(this, arguments); + init: function () { this._broadcasts = {}; }, @@ -47,4 +42,4 @@ BI.BroadcastController = BI.inherit(BI.Controller, { } return this; } -}); \ No newline at end of file +}); diff --git a/src/core/controller/controller.bubbles.js b/src/core/controller/controller.bubbles.js index 93b9eaa5a..048053b44 100644 --- a/src/core/controller/controller.bubbles.js +++ b/src/core/controller/controller.bubbles.js @@ -6,99 +6,8 @@ * @class */ BI.BubblesController = BI.inherit(BI.Controller, { - _defaultConfig: function () { - return BI.extend(BI.BubblesController.superclass._defaultConfig.apply(this, arguments), {}); - }, - - _const: { - bubbleHeight: 18 - }, - - _init: function () { - BI.BubblesController.superclass._init.apply(this, arguments); - var self = this; - this.fixedBubblesManager = {}; - this.fixedStoreBubbles = {}; - this.bubblesManager = {}; + init: function () { this.storeBubbles = {}; - BI.Resizers.add("bubbleController" + BI.uniqueId(), function () { - BI.each(self.fixedBubblesManager, function (name) { - self.remove(name); - }); - self.fixedBubblesManager = {}; - self.fixedStoreBubbles = {}; - }); - }, - - _createBubble: function (direct, text, level, height, fixed) { - return BI.createWidget({ - type: fixed === false ? "bi.bubble_view" : "bi.bubble", - text: text, - level: level, - height: height || 18, - direction: direct - }); - }, - - _getOffsetLeft: function (name, context, offsetStyle) { - var left = 0; - if ("center" === offsetStyle) { - left = context.element.offset().left + (context.element.bounds().width - this.get(name).element.bounds().width) / 2; - if (left < 0) { - left = 0; - } - return left; - } - if ("right" === offsetStyle) { - left = context.element.offset().left + context.element.bounds().width - this.get(name).element.bounds().width; - if (left < 0) { - left = 0; - } - return left; - } - return context.element.offset().left; - }, - - _getOffsetTop: function (name, context, offsetStyle) { - var top = 0; - if ("center" === offsetStyle) { - top = context.element.offset().top + (context.element.bounds().height - this.get(name).element.bounds().height) / 2; - if (top < 0) { - top = 0; - } - return top; - } else if ("right" === offsetStyle) { - top = context.element.offset().top + context.element.bounds().height - this.get(name).element.bounds().height; - if (top < 0) { - top = 0; - } - return top; - } - return context.element.offset().top; - }, - - _getLeftPosition: function (name, context, offsetStyle) { - var position = BI.DOM.getLeftPosition(context, this.get(name)); - position.top = this._getOffsetTop(name, context, offsetStyle); - return position; - }, - - _getBottomPosition: function (name, context, offsetStyle) { - var position = BI.DOM.getBottomPosition(context, this.get(name)); - position.left = this._getOffsetLeft(name, context, offsetStyle); - return position; - }, - - _getTopPosition: function (name, context, offsetStyle) { - var position = BI.DOM.getTopPosition(context, this.get(name)); - position.left = this._getOffsetLeft(name, context, offsetStyle); - return position; - }, - - _getRightPosition: function (name, context, offsetStyle) { - var position = BI.DOM.getRightPosition(context, this.get(name)); - position.top = this._getOffsetTop(name, context, offsetStyle); - return position; }, /** @@ -111,194 +20,66 @@ BI.BubblesController = BI.inherit(BI.Controller, { */ show: function (name, text, context, opt) { opt || (opt = {}); - var container = opt.container || context; + var container = opt.container || "body"; var offsetStyle = opt.offsetStyle || "left"; var level = opt.level || "error"; var adjustYOffset = opt.adjustYOffset || 0; var adjustXOffset = opt.adjustXOffset || 0; - var fixed = opt.fixed !== false; - // 如果是非固定位置（fixed）的bubble - if (fixed === false) { - if (!this.storeBubbles[name]) { - this.storeBubbles[name] = {}; - } - if (!this.storeBubbles[name]["top"]) { - this.storeBubbles[name]["top"] = this._createBubble("top", text, level, null, fixed); - } - BI.createWidget({ - type: "bi.absolute", - element: container, - items: [{ - el: this.storeBubbles[name]["top"] - }] + // var fixed = opt.fixed !== false; + + if (!this.storeBubbles[name]) { + this.storeBubbles[name] = BI.createWidget({ + type: "bi.label", + root: true, + cls: "bi-bubble" + " bubble-" + level, + text: text, + hgap: 5, + height: 18 }); - this.set(name, this.storeBubbles[name]["top"]); - var bubble = this.storeBubbles[name]["top"]; - var bounds = bubble.element.bounds(); - if (BI.DOM.isTopSpaceEnough(context, this.get(name), adjustYOffset)) { - var top = -(bounds.height + adjustYOffset); - switch (offsetStyle) { - case "center": - bubble.element.css({ - left: (context.element.bounds().width - bounds.width) / 2 + adjustXOffset, - top: top - }); - break; - case "right": - bubble.element.css({ - right: adjustXOffset, - top: top - }); - break; - default: - bubble.element.css({ - left: adjustXOffset, - top: top - }); - break; - } - } else { - var bottom = -(bounds.height + adjustYOffset); - switch (offsetStyle) { - case "center": - bubble.element.css({ - left: (context.element.bounds().width - bounds.width) / 2 + adjustXOffset, - bottom: bottom - }); - break; - case "right": - bubble.element.css({ - right: adjustXOffset, - bottom: bottom - }); - break; - default: - bubble.element.css({ - left: adjustXOffset, - bottom: bottom - }); - break; - } - } - } else { - if (!this.fixedStoreBubbles[name]) { - this.fixedStoreBubbles[name] = {}; - } - if (!this.fixedStoreBubbles[name]["top"]) { - this.fixedStoreBubbles[name]["top"] = this._createBubble("top", text, level, null, fixed); - } - BI.createWidget({ - type: "bi.absolute", - element: container, - items: [{ - el: this.fixedStoreBubbles[name]["top"] - }] - }); - this.set(name, this.fixedStoreBubbles[name]["top"]); - var position = this._getTopPosition(name, context, offsetStyle); - this.get(name).element.css({left: position.left + adjustXOffset, top: position.top - adjustYOffset}); - if (!BI.DOM.isTopSpaceEnough(context, this.get(name), adjustYOffset)) { - this.get(name).invisible(); - if (!this.fixedStoreBubbles[name]["bottom"]) { - this.fixedStoreBubbles[name]["bottom"] = this._createBubble("bottom", text, level); - } - BI.createWidget({ - type: "bi.absolute", - element: container, - items: [{ - el: this.fixedStoreBubbles[name]["bottom"] - }] - }); - this.set(name, this.fixedStoreBubbles[name]["bottom"]); - var position = this._getBottomPosition(name, context, offsetStyle); - this.get(name).element.css({left: position.left + adjustXOffset, top: position.top + adjustYOffset}); - if (!BI.DOM.isBottomSpaceEnough(context, this.get(name), adjustYOffset)) { - this.get(name).invisible(); - if (!this.fixedStoreBubbles[name]["right"]) { - this.fixedStoreBubbles[name]["right"] = this._createBubble("right", text, level); - } - BI.createWidget({ - type: "bi.absolute", - element: container, - items: [{ - el: this.fixedStoreBubbles[name]["right"] - }] - }); - this.set(name, this.fixedStoreBubbles[name]["right"]); - var position = this._getRightPosition(name, context, offsetStyle); - this.get(name).element.css({ - left: position.left + adjustXOffset, - top: position.top - adjustYOffset - }); - if (!BI.DOM.isRightSpaceEnough(context, this.get(name), adjustXOffset)) { - this.get(name).invisible(); - if (!this.fixedStoreBubbles[name]["left"]) { - this.fixedStoreBubbles[name]["left"] = this._createBubble("left", text, level, 30); - } - BI.createWidget({ - type: "bi.absolute", - element: container, - items: [{ - el: this.fixedStoreBubbles[name]["left"] - }] - }); - this.set(name, this.fixedStoreBubbles[name]["left"]); - var position = this._getLeftPosition(name, context, offsetStyle); - this.get(name).element.css({ - left: position.left - adjustXOffset, - top: position.top - adjustYOffset - }); + } + var bubble = this.storeBubbles[name]; + + BI.createWidget({ + type: "bi.default", + element: container, + items: [{ + el: bubble + }] + }); + BI.Popper.createPopper(context.element[0], bubble.element[0], { + placement: ({ + left: "top-start", + center: "top", + right: "top-end" + })[offsetStyle], + modifiers: [ + { + name: "offset", + options: { + offset: [adjustXOffset, adjustYOffset] } } - } - } - this.get(name).setText(text); - this.get(name).visible(); + ] + }); return this; }, hide: function (name) { - if (!this.has(name)) { - return this; - } - this.get(name).invisible(); - return this; - }, - - add: function (name, bubble) { - if (this.has(name)) { - return this; - } - this.set(name, bubble); - return this; - }, - - get: function (name) { - return this.fixedBubblesManager[name] || this.bubblesManager[name]; - }, - - set: function (name, bubble, fixed) { - fixed === false ? (this.bubblesManager[name] = bubble) : (this.fixedBubblesManager[name] = bubble); + this.remove(name); }, has: function (name) { - return this.fixedBubblesManager[name] != null || this.bubblesManager[name] != null; + return this.storeBubbles[name] != null; }, remove: function (name) { if (!this.has(name)) { return this; } - BI.each(this.fixedStoreBubbles[name], function (dir, bubble) { - bubble.destroy(); - }); - delete this.fixedStoreBubbles[name]; - delete this.fixedBubblesManager[name]; - BI.each(this.storeBubbles[name], function (dir, bubble) { + BI.each(this.storeBubbles, function (dir, bubble) { bubble.destroy(); }); delete this.storeBubbles[name]; - delete this.bubblesManager[name]; return this; } }); diff --git a/src/core/controller/controller.layer.js b/src/core/controller/controller.layer.js index 3fbc03c22..af245b133 100644 --- a/src/core/controller/controller.layer.js +++ b/src/core/controller/controller.layer.js @@ -5,14 +5,13 @@ * @class */ BI.LayerController = BI.inherit(BI.Controller, { - _defaultConfig: function () { - return BI.extend(BI.LayerController.superclass._defaultConfig.apply(this, arguments), { + props: function () { + return { render: "body" - }); + }; }, - _init: function () { - BI.LayerController.superclass._init.apply(this, arguments); + init: function () { this.layerManager = {}; this.layouts = {}; this.zindex = BI.zIndex_layer; @@ -167,4 +166,4 @@ BI.LayerController = BI.inherit(BI.Controller, { this.layouts = {}; return this; } -}); \ No newline at end of file +}); diff --git a/src/core/controller/controller.masker.js b/src/core/controller/controller.masker.js index 5c34fc8d5..0b55b0781 100644 --- a/src/core/controller/controller.masker.js +++ b/src/core/controller/controller.masker.js @@ -5,12 +5,8 @@ * @class */ BI.MaskersController = BI.inherit(BI.LayerController, { - _defaultConfig: function () { - return BI.extend(BI.MaskersController.superclass._defaultConfig.apply(this, arguments), {}); - }, - - _init: function () { - BI.MaskersController.superclass._init.apply(this, arguments); + init: function () { + BI.MaskersController.superclass.init.apply(this, arguments); this.zindex = BI.zIndex_masker; } -}); \ No newline at end of file +}); diff --git a/src/core/controller/controller.popover.js b/src/core/controller/controller.popover.js index c9de3a29a..8f53bd5ff 100644 --- a/src/core/controller/controller.popover.js +++ b/src/core/controller/controller.popover.js @@ -5,15 +5,14 @@ * @extends BI.Controller */ BI.PopoverController = BI.inherit(BI.Controller, { - _defaultConfig: function () { - return BI.extend(BI.PopoverController.superclass._defaultConfig.apply(this, arguments), { + props: function () { + return { modal: true, // 模态窗口 render: "body" - }); + }; }, - _init: function () { - BI.PopoverController.superclass._init.apply(this, arguments); + init: function () { this.modal = this.options.modal; this.floatManager = {}; this.floatLayer = {}; diff --git a/src/core/controller/controller.resizer.js b/src/core/controller/controller.resizer.js index ad1ac2c42..a471cebdf 100644 --- a/src/core/controller/controller.resizer.js +++ b/src/core/controller/controller.resizer.js @@ -5,12 +5,7 @@ * @class */ BI.ResizeController = BI.inherit(BI.Controller, { - _defaultConfig: function () { - return BI.extend(BI.ResizeController.superclass._defaultConfig.apply(this, arguments), {}); - }, - - _init: function () { - BI.ResizeController.superclass._init.apply(this, arguments); + init: function () { var self = this; this.resizerManger = {}; var fn = BI.debounce(function (ev) { @@ -70,4 +65,4 @@ BI.ResizeController = BI.inherit(BI.Controller, { delete this.resizerManger[name]; return this; } -}); \ No newline at end of file +}); diff --git a/src/core/controller/controller.tooltips.js b/src/core/controller/controller.tooltips.js index 8dd3e494a..a6722b560 100644 --- a/src/core/controller/controller.tooltips.js +++ b/src/core/controller/controller.tooltips.js @@ -7,16 +7,7 @@ * @extends BI.Controller */ BI.TooltipsController = BI.inherit(BI.Controller, { - _defaultConfig: function () { - return BI.extend(BI.TooltipsController.superclass._defaultConfig.apply(this, arguments), {}); - }, - - _const: { - height: 18 - }, - - _init: function () { - BI.TooltipsController.superclass._init.apply(this, arguments); + init: function () { this.tooltipsManager = {}; this.showingTips = {};// 存储正在显示的tooltip }, diff --git a/src/core/listener/listener.show.js b/src/core/listener/listener.show.js index c27eb4e13..85c7309c3 100644 --- a/src/core/listener/listener.show.js +++ b/src/core/listener/listener.show.js @@ -6,8 +6,8 @@ * @extends BI.OB */ BI.ShowListener = BI.inherit(BI.OB, { - _defaultConfig: function () { - return BI.extend(BI.ShowListener.superclass._defaultConfig.apply(this, arguments), { + props: function () { + return { eventObj: BI.createWidget(), cardLayout: null, cardNameCreator: function (v) { @@ -16,11 +16,10 @@ BI.ShowListener = BI.inherit(BI.OB, { cardCreator: BI.emptyFn, afterCardCreated: BI.emptyFn, afterCardShow: BI.emptyFn - }); + }; }, - _init: function () { - BI.ShowListener.superclass._init.apply(this, arguments); + init: function () { var self = this, o = this.options; if (o.eventObj) { o.eventObj.on(BI.Controller.EVENT_CHANGE, function (type, v, ob) { @@ -46,4 +45,4 @@ BI.ShowListener = BI.inherit(BI.OB, { } } }); -BI.ShowListener.EVENT_CHANGE = "EVENT_CHANGE"; \ No newline at end of file +BI.ShowListener.EVENT_CHANGE = "EVENT_CHANGE"; diff --git a/src/core/logic/logic.layout.js b/src/core/logic/logic.layout.js index a3a630b3a..93fb60a86 100644 --- a/src/core/logic/logic.layout.js +++ b/src/core/logic/logic.layout.js @@ -7,8 +7,8 @@ * @extends BI.Logic */ BI.VerticalLayoutLogic = BI.inherit(BI.Logic, { - _defaultConfig: function () { - return BI.extend(BI.VerticalLayoutLogic.superclass._defaultConfig.apply(this, arguments), { + props: function () { + return { dynamic: false, scrollable: null, scrolly: false, @@ -20,7 +20,7 @@ BI.VerticalLayoutLogic = BI.inherit(BI.Logic, { rgap: 0, tgap: 0, bgap: 0 - }); + }; }, createLogic: function () { @@ -56,8 +56,8 @@ BI.VerticalLayoutLogic = BI.inherit(BI.Logic, { * @extends BI.Logic */ BI.HorizontalLayoutLogic = BI.inherit(BI.Logic, { - _defaultConfig: function () { - return BI.extend(BI.HorizontalLayoutLogic.superclass._defaultConfig.apply(this, arguments), { + props: function () { + return { dynamic: false, scrollable: null, scrolly: false, @@ -69,7 +69,7 @@ BI.HorizontalLayoutLogic = BI.inherit(BI.Logic, { rgap: 0, tgap: 0, bgap: 0 - }); + }; }, createLogic: function () { @@ -104,8 +104,8 @@ BI.HorizontalLayoutLogic = BI.inherit(BI.Logic, { * @extends BI.OB */ BI.TableLayoutLogic = BI.inherit(BI.Logic, { - _defaultConfig: function () { - return BI.extend(BI.TableLayoutLogic.superclass._defaultConfig.apply(this, arguments), { + props: function () { + return { dynamic: false, scrollable: null, scrolly: false, @@ -117,7 +117,7 @@ BI.TableLayoutLogic = BI.inherit(BI.Logic, { hgap: 0, vgap: 0, items: [] - }); + }; }, createLogic: function () { @@ -151,8 +151,8 @@ BI.TableLayoutLogic = BI.inherit(BI.Logic, { * @extends BI.Logic */ BI.HorizontalFillLayoutLogic = BI.inherit(BI.Logic, { - _defaultConfig: function () { - return BI.extend(BI.HorizontalFillLayoutLogic.superclass._defaultConfig.apply(this, arguments), { + props: function () { + return { dynamic: false, scrollable: null, scrolly: false, @@ -164,7 +164,7 @@ BI.HorizontalFillLayoutLogic = BI.inherit(BI.Logic, { rgap: 0, tgap: 0, bgap: 0 - }); + }; }, createLogic: function () { diff --git a/src/less/base/single/tip/tip.bubble.less b/src/less/base/single/tip/tip.bubble.less index b47874ea0..ec3704fab 100644 --- a/src/less/base/single/tip/tip.bubble.less +++ b/src/less/base/single/tip/tip.bubble.less @@ -1,30 +1,29 @@ @import "../../../index"; -.bi-bubble{ - & .bubble-text{ - .border-radius(2px); - } +.bi-bubble { + z-index: @zIndex-tip; + .border-radius(2px); - & .bubble-error{ + &.bubble-error{ background: @color-bi-background-light-failure; color: @color-bi-text-failure; } - .bi-theme-dark & .bubble-error { + .bi-theme-dark &.bubble-error { background: @color-bi-background-dark-failure; } - & .bubble-common{ + &.bubble-common{ background: @color-bi-background-light-highlight; color: @color-bi-text-highlight; } - & .bubble-success{ + &.bubble-success{ background: @color-bi-background-light-success; color: @color-bi-text-success; } - & .bubble-warning{ + &.bubble-warning{ background: @color-bi-background-light-warning; color: @color-bi-text-redmark; }