Browse Source

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

master
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, { BI.BubbleCombo = BI.inherit(BI.Widget, {
_const: { _const: {
TRIANGLE_LENGTH: 6 TRIANGLE_LENGTH: 9
}, },
_defaultConfig: function () { _defaultConfig: function () {
return BI.extend(BI.BubbleCombo.superclass._defaultConfig.apply(this, arguments), { return BI.extend(BI.BubbleCombo.superclass._defaultConfig.apply(this, arguments), {
@ -19,7 +19,7 @@ BI.BubbleCombo = BI.inherit(BI.Widget, {
isNeedAdjustHeight: true, // 是否需要高度调整 isNeedAdjustHeight: true, // 是否需要高度调整
isNeedAdjustWidth: true, isNeedAdjustWidth: true,
stopPropagation: false, stopPropagation: false,
adjustLength: 0, // 调整的距离 adjustLength: 5, // 调整的距离
// adjustXOffset: 0, // adjustXOffset: 0,
// adjustYOffset: 10, // adjustYOffset: 10,
hideChecker: BI.emptyFn, 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 { & .bubble-combo-triangle-left, & .bubble-combo-triangle-right, & .bubble-combo-triangle-top, & .bubble-combo-triangle-bottom {
&:before { &:before {
background-color: @color-bi-background-default; 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 { .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)); .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子元素的阴影 // 只去掉bubble-popup子元素的阴影
&.bi-popup-view > .list-view-shadow { &.bi-popup-view > .list-view-shadow {

38
src/less/visual.less

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

Loading…
Cancel
Save