Browse Source

QFX-3089 refactor:气泡弹窗小三角样式修改

es6
Guyi 4 years ago
parent
commit
6ad4bb642f
  1. 4
      src/case/combo/bubblecombo/combo.bubble.js
  2. 2
      src/less/base/combo/combo.bubble.less
  3. 1
      src/less/base/combo/popup.bubble.less
  4. 38
      src/less/visual.less

4
src/case/combo/bubblecombo/combo.bubble.js

@ -6,7 +6,7 @@
*/
BI.BubbleCombo = BI.inherit(BI.Widget, {
_const: {
TRIANGLE_LENGTH: 6
TRIANGLE_LENGTH: 9
},
_defaultConfig: function () {
return BI.extend(BI.BubbleCombo.superclass._defaultConfig.apply(this, arguments), {
@ -19,7 +19,7 @@ BI.BubbleCombo = BI.inherit(BI.Widget, {
isNeedAdjustHeight: true, // 是否需要高度调整
isNeedAdjustWidth: true,
stopPropagation: false,
adjustLength: 0, // 调整的距离
adjustLength: 5, // 调整的距离
// adjustXOffset: 0,
// adjustYOffset: 10,
hideChecker: BI.emptyFn,

2
src/less/base/combo/combo.bubble.less

@ -28,8 +28,6 @@
& .bubble-combo-triangle-left, & .bubble-combo-triangle-right, & .bubble-combo-triangle-top, & .bubble-combo-triangle-bottom {
&:before {
background-color: @color-bi-background-default;
border-bottom: 1px solid @border-color-light-line;
border-right: 1px solid @border-color-light-line;
}
}
}

1
src/less/base/combo/popup.bubble.less

@ -2,6 +2,7 @@
.bi-bubble-popup-view {
.box-shadows(0px 9px 28px 8px rgba(0, 0, 0, 0.05), 0px 6px 16px 0px rgba(0, 0, 0, 0.08), 0px 3px 6px -4px rgba(0, 0, 0, 0.12));
.border-radius(4px);
// 只去掉bubble-popup子元素的阴影
&.bi-popup-view > .list-view-shadow {

38
src/less/visual.less

@ -200,73 +200,77 @@
.triangle-top() {
position: absolute;
width: 16px;
height: 6px;
height: 9px;
//虽然position:absolute使得:before的display属性为block,但是其仍然受到祖先text-align:center的影响,这边重置掉
text-align: left;
&:before {
position: absolute;
width: 6px;
height: 6px;
width: 9px;
height: 9px;
margin-left: 4px;
margin-top: 2px;
margin-top: 5px;
content: "";
transform: rotate(-135deg);
.box-shadow(3px 3px 10px 0, rgba(0, 0, 0, 0.06));
}
}
.triangle-bottom() {
position: absolute;
width: 16px;
height: 6px;
height: 9px;
//虽然position:absolute使得:before的display属性为block,但是其仍然受到祖先text-align:center的影响,这边重置掉
text-align: left;
&:before {
position: absolute;
width: 6px;
height: 6px;
width: 9px;
height: 9px;
margin-left: 4px;
margin-top: -3px;
margin-top: -5px;
content: "";
transform: rotate(45deg);
.box-shadow(3px 3px 10px 0, rgba(0, 0, 0, 0.07));
}
}
.triangle-left() {
position: absolute;
width: 6px;
width: 9px;
height: 16px;
//虽然position:absolute使得:before的display属性为block,但是其仍然受到祖先text-align:center的影响,这边重置掉
text-align: left;
&:before {
position: absolute;
width: 6px;
height: 6px;
margin-left: 2px;
margin-top: 3px;
width: 9px;
height: 9px;
margin-left: 5px;
margin-top: 4px;
content: "";
transform: rotate(135deg);
.box-shadow(3px 3px 10px 0, rgba(0, 0, 0, 0.06));
}
}
.triangle-right() {
position: absolute;
width: 6px;
width: 9px;
height: 16px;
//虽然position:absolute使得:before的display属性为block,但是其仍然受到祖先text-align:center的影响,这边重置掉
text-align: left;
&:before {
position: absolute;
width: 6px;
height: 6px;
margin-left: -3px;
width: 10px;
height: 10px;
margin-left: -5px;
margin-top: 4px;
content: "";
transform: rotate(-45deg);
.box-shadow(3px 3px 10px 0, rgba(0, 0, 0, 0.07));
}
}

Loading…
Cancel
Save