Browse Source

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

Merge in VISUAL/fineui from ~GUYI/fineui:master to master

* commit 'bfba8041ac4d72757919b272e8db7392ba68abc4':
  QFX-3089 refactor:默认距离调整
  QFX-3089 refactor:气泡弹窗小三角样式修改
es6
Guyi 4 years ago
parent
commit
ed685e6c10
  1. 2
      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

2
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), {

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