From 66c760a362c823dd60006c1409daf5101d662d66 Mon Sep 17 00:00:00 2001 From: guy Date: Sat, 1 Jan 2022 19:48:17 +0800 Subject: [PATCH 1/5] chore: update --- src/less/base/segment/button.segment.less | 1 + 1 file changed, 1 insertion(+) diff --git a/src/less/base/segment/button.segment.less b/src/less/base/segment/button.segment.less index 46757b435..1ccab2476 100644 --- a/src/less/base/segment/button.segment.less +++ b/src/less/base/segment/button.segment.less @@ -1,5 +1,6 @@ @import "../../index"; .bi-segment-button { + .transition(color .3s,background .3s,border-color .3s,box-shadow .3s); color: @color-bi-text-highlight; } From 000912b5319b6fc478ce112365beeed290cd6828 Mon Sep 17 00:00:00 2001 From: guy Date: Sat, 1 Jan 2022 19:58:39 +0800 Subject: [PATCH 2/5] update --- src/less/base/single/button/switch.less | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/less/base/single/button/switch.less b/src/less/base/single/button/switch.less index d08c780de..26f4b496b 100644 --- a/src/less/base/single/button/switch.less +++ b/src/less/base/single/button/switch.less @@ -3,11 +3,13 @@ .bi-switch{ .border-radius(40px 40px 40px 40px); background-color: @color-bi-background-switch; + .transition(all .2s); &.active { background-color: @color-bi-background-active-switch; } & .circle-button{ .border-radius(9px 9px 9px 9px); + .transition(all .2s ease-in-out); } &.disabled { background-color: @color-bi-background-disabled-switch; From 885c8e7a57902a6f9fe91b64ab4c7a5c99752f7b Mon Sep 17 00:00:00 2001 From: guy Date: Sat, 1 Jan 2022 21:31:01 +0800 Subject: [PATCH 3/5] =?UTF-8?q?=E5=8A=A8=E7=94=BB?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/case/combo/bubblecombo/popup.bubble.js | 4 +- src/less/base/combo/combo.bubble.less | 9 + src/less/base/segment/button.segment.less | 3 +- src/less/core/utils/motion/fade.less | 36 ++++ src/less/core/utils/motion/move.less | 131 +++++++++++++++ src/less/core/utils/motion/slide.less | 131 +++++++++++++++ src/less/core/utils/motion/zoom.less | 181 +++++++++++++++++++++ src/less/index.less | 1 + src/less/modern.less | 1 + src/less/motion.less | 96 +++++++++++ 10 files changed, 590 insertions(+), 3 deletions(-) create mode 100644 src/less/core/utils/motion/fade.less create mode 100644 src/less/core/utils/motion/move.less create mode 100644 src/less/core/utils/motion/slide.less create mode 100644 src/less/core/utils/motion/zoom.less create mode 100644 src/less/motion.less diff --git a/src/case/combo/bubblecombo/popup.bubble.js b/src/case/combo/bubblecombo/popup.bubble.js index 2fa9999ea..dade95184 100644 --- a/src/case/combo/bubblecombo/popup.bubble.js +++ b/src/case/combo/bubblecombo/popup.bubble.js @@ -8,7 +8,7 @@ BI.BubblePopupView = BI.inherit(BI.PopupView, { _defaultConfig: function () { var config = BI.BubblePopupView.superclass._defaultConfig.apply(this, arguments); return BI.extend(config, { - baseCls: config.baseCls + " bi-bubble-popup-view", + baseCls: config.baseCls + " bi-bubble-popup-view bi-zoom-big-leave bi-zoom-big-leave-active", minWidth: 220, maxWidth: 300, minHeight: 90 @@ -102,7 +102,7 @@ BI.TextBubblePopupBarView = BI.inherit(BI.Widget, { props: function () { return { - baseCls: "bi-text-bubble-bar-popup-view", + baseCls: "bi-text-bubble-bar-popup-view bi-bubble-popup-view", text: "", buttons: [{ level: "ignore", diff --git a/src/less/base/combo/combo.bubble.less b/src/less/base/combo/combo.bubble.less index fe2867772..c5be6bc9b 100644 --- a/src/less/base/combo/combo.bubble.less +++ b/src/less/base/combo/combo.bubble.less @@ -32,6 +32,15 @@ } } +.bi-combo-popup.bi-bubble-popup-view { + &.bi-zoom-big-leave{ + .zoom-big-motion-enter(); + } + &.bi-zoom-big-leave-active{ + .zoom-big-motion-enter-active(); + } +} + .bi-popup-view[data-popper-placement^='top'] { > .bi-bubble-arrow { bottom: -10px; diff --git a/src/less/base/segment/button.segment.less b/src/less/base/segment/button.segment.less index 1ccab2476..4247740f4 100644 --- a/src/less/base/segment/button.segment.less +++ b/src/less/base/segment/button.segment.less @@ -1,6 +1,7 @@ @import "../../index"; .bi-segment-button { - .transition(color .3s,background .3s,border-color .3s,box-shadow .3s); + @transition: color .3s,background .3s,border-color .3s,box-shadow .3s; + .transition(@transition); color: @color-bi-text-highlight; } diff --git a/src/less/core/utils/motion/fade.less b/src/less/core/utils/motion/fade.less new file mode 100644 index 000000000..ad14b0bc1 --- /dev/null +++ b/src/less/core/utils/motion/fade.less @@ -0,0 +1,36 @@ +@import "../../../index"; + +.fade-motion(@className, @keyframeName) { + @name: ~'bi-@{className}'; + .make-motion(@name, @keyframeName); + .@{name}-enter, + .@{name}-appear { + opacity: 0; + animation-timing-function: linear; + } + .@{name}-leave { + animation-timing-function: linear; + } +} + +.fade-motion(fade, biFade); + +@keyframes biFadeIn { + 0% { + opacity: 0; + } + + 100% { + opacity: 1; + } +} + +@keyframes biFadeOut { + 0% { + opacity: 1; + } + + 100% { + opacity: 0; + } +} diff --git a/src/less/core/utils/motion/move.less b/src/less/core/utils/motion/move.less new file mode 100644 index 000000000..ab707807c --- /dev/null +++ b/src/less/core/utils/motion/move.less @@ -0,0 +1,131 @@ +@import "../../../index"; + +.move-motion(@className, @keyframeName) { + @name: ~'bi-@{className}'; + .make-motion(@name, @keyframeName); + .@{name}-enter, + .@{name}-appear { + opacity: 0; + animation-timing-function: @ease-out-circ; + } + .@{name}-leave { + animation-timing-function: @ease-in-circ; + } +} + +.move-motion(move-up, biMoveUp); +.move-motion(move-down, biMoveDown); +.move-motion(move-left, biMoveLeft); +.move-motion(move-right, biMoveRight); + +@keyframes biMoveDownIn { + 0% { + transform: translateY(100%); + transform-origin: 0 0; + opacity: 0; + } + + 100% { + transform: translateY(0%); + transform-origin: 0 0; + opacity: 1; + } +} + +@keyframes biMoveDownOut { + 0% { + transform: translateY(0%); + transform-origin: 0 0; + opacity: 1; + } + + 100% { + transform: translateY(100%); + transform-origin: 0 0; + opacity: 0; + } +} + +@keyframes biMoveLeftIn { + 0% { + transform: translateX(-100%); + transform-origin: 0 0; + opacity: 0; + } + + 100% { + transform: translateX(0%); + transform-origin: 0 0; + opacity: 1; + } +} + +@keyframes biMoveLeftOut { + 0% { + transform: translateX(0%); + transform-origin: 0 0; + opacity: 1; + } + + 100% { + transform: translateX(-100%); + transform-origin: 0 0; + opacity: 0; + } +} + +@keyframes biMoveRightIn { + 0% { + transform: translateX(100%); + transform-origin: 0 0; + opacity: 0; + } + + 100% { + transform: translateX(0%); + transform-origin: 0 0; + opacity: 1; + } +} + +@keyframes biMoveRightOut { + 0% { + transform: translateX(0%); + transform-origin: 0 0; + opacity: 1; + } + + 100% { + transform: translateX(100%); + transform-origin: 0 0; + opacity: 0; + } +} + +@keyframes biMoveUpIn { + 0% { + transform: translateY(-100%); + transform-origin: 0 0; + opacity: 0; + } + + 100% { + transform: translateY(0%); + transform-origin: 0 0; + opacity: 1; + } +} + +@keyframes biMoveUpOut { + 0% { + transform: translateY(0%); + transform-origin: 0 0; + opacity: 1; + } + + 100% { + transform: translateY(-100%); + transform-origin: 0 0; + opacity: 0; + } +} diff --git a/src/less/core/utils/motion/slide.less b/src/less/core/utils/motion/slide.less new file mode 100644 index 000000000..b956f8814 --- /dev/null +++ b/src/less/core/utils/motion/slide.less @@ -0,0 +1,131 @@ +@import "../../../index"; + +.slide-motion(@className, @keyframeName) { + @name: ~'bi-@{className}'; + .make-motion(@name, @keyframeName); + .@{name}-enter, + .@{name}-appear { + opacity: 0; + animation-timing-function: @ease-out-quint; + } + .@{name}-leave { + animation-timing-function: @ease-in-quint; + } +} + +.slide-motion(slide-up, biSlideUp); +.slide-motion(slide-down, biSlideDown); +.slide-motion(slide-left, biSlideLeft); +.slide-motion(slide-right, biSlideRight); + +@keyframes biSlideUpIn { + 0% { + transform: scaleY(0.8); + transform-origin: 0% 0%; + opacity: 0; + } + + 100% { + transform: scaleY(1); + transform-origin: 0% 0%; + opacity: 1; + } +} + +@keyframes biSlideUpOut { + 0% { + transform: scaleY(1); + transform-origin: 0% 0%; + opacity: 1; + } + + 100% { + transform: scaleY(0.8); + transform-origin: 0% 0%; + opacity: 0; + } +} + +@keyframes biSlideDownIn { + 0% { + transform: scaleY(0.8); + transform-origin: 100% 100%; + opacity: 0; + } + + 100% { + transform: scaleY(1); + transform-origin: 100% 100%; + opacity: 1; + } +} + +@keyframes biSlideDownOut { + 0% { + transform: scaleY(1); + transform-origin: 100% 100%; + opacity: 1; + } + + 100% { + transform: scaleY(0.8); + transform-origin: 100% 100%; + opacity: 0; + } +} + +@keyframes biSlideLeftIn { + 0% { + transform: scaleX(0.8); + transform-origin: 0% 0%; + opacity: 0; + } + + 100% { + transform: scaleX(1); + transform-origin: 0% 0%; + opacity: 1; + } +} + +@keyframes biSlideLeftOut { + 0% { + transform: scaleX(1); + transform-origin: 0% 0%; + opacity: 1; + } + + 100% { + transform: scaleX(0.8); + transform-origin: 0% 0%; + opacity: 0; + } +} + +@keyframes biSlideRightIn { + 0% { + transform: scaleX(0.8); + transform-origin: 100% 0%; + opacity: 0; + } + + 100% { + transform: scaleX(1); + transform-origin: 100% 0%; + opacity: 1; + } +} + +@keyframes biSlideRightOut { + 0% { + transform: scaleX(1); + transform-origin: 100% 0%; + opacity: 1; + } + + 100% { + transform: scaleX(0.8); + transform-origin: 100% 0%; + opacity: 0; + } +} diff --git a/src/less/core/utils/motion/zoom.less b/src/less/core/utils/motion/zoom.less new file mode 100644 index 000000000..d3351eeef --- /dev/null +++ b/src/less/core/utils/motion/zoom.less @@ -0,0 +1,181 @@ +@import "../../../index"; + +.zoom-motion(@className, @keyframeName, @duration: @animation-duration-base) { + @name: ~'bi-@{className}'; + .make-motion(@name, @keyframeName, @duration); + .@{name}-enter, + .@{name}-appear { + transform: scale(0); // need this by yiminghe + opacity: 0; + animation-timing-function: @ease-out-circ; + + &-prepare { + transform: none; + } + } + .@{name}-leave { + animation-timing-function: @ease-in-out-circ; + } +} + +// For Modal, Select choosen item +.zoom-motion(zoom, biZoom); +// For Popover, Popconfirm, Dropdown +.zoom-motion(zoom-big, biZoomBig); +// For Tooltip +.zoom-motion(zoom-big-fast, biZoomBig, @animation-duration-fast); + +.zoom-motion(zoom-up, biZoomUp); +.zoom-motion(zoom-down, biZoomDown); +.zoom-motion(zoom-left, biZoomLeft); +.zoom-motion(zoom-right, biZoomRight); + +@keyframes biZoomIn { + 0% { + transform: scale(0.2); + opacity: 0; + } + + 100% { + transform: scale(1); + opacity: 1; + } +} + +@keyframes biZoomOut { + 0% { + transform: scale(1); + } + + 100% { + transform: scale(0.2); + opacity: 0; + } +} + +@keyframes biZoomBigIn { + 0% { + transform: scale(0.8); + opacity: 0; + } + + 100% { + transform: scale(1); + opacity: 1; + } +} + +@keyframes biZoomBigOut { + 0% { + transform: scale(1); + } + + 100% { + transform: scale(0.8); + opacity: 0; + } +} + +@keyframes biZoomUpIn { + 0% { + transform: scale(0.8); + transform-origin: 50% 0%; + opacity: 0; + } + + 100% { + transform: scale(1); + transform-origin: 50% 0%; + } +} + +@keyframes biZoomUpOut { + 0% { + transform: scale(1); + transform-origin: 50% 0%; + } + + 100% { + transform: scale(0.8); + transform-origin: 50% 0%; + opacity: 0; + } +} + +@keyframes biZoomLeftIn { + 0% { + transform: scale(0.8); + transform-origin: 0% 50%; + opacity: 0; + } + + 100% { + transform: scale(1); + transform-origin: 0% 50%; + } +} + +@keyframes biZoomLeftOut { + 0% { + transform: scale(1); + transform-origin: 0% 50%; + } + + 100% { + transform: scale(0.8); + transform-origin: 0% 50%; + opacity: 0; + } +} + +@keyframes biZoomRightIn { + 0% { + transform: scale(0.8); + transform-origin: 100% 50%; + opacity: 0; + } + + 100% { + transform: scale(1); + transform-origin: 100% 50%; + } +} + +@keyframes biZoomRightOut { + 0% { + transform: scale(1); + transform-origin: 100% 50%; + } + + 100% { + transform: scale(0.8); + transform-origin: 100% 50%; + opacity: 0; + } +} + +@keyframes biZoomDownIn { + 0% { + transform: scale(0.8); + transform-origin: 50% 100%; + opacity: 0; + } + + 100% { + transform: scale(1); + transform-origin: 50% 100%; + } +} + +@keyframes biZoomDownOut { + 0% { + transform: scale(1); + transform-origin: 50% 100%; + } + + 100% { + transform: scale(0.8); + transform-origin: 50% 100%; + opacity: 0; + } +} diff --git a/src/less/index.less b/src/less/index.less index 5bf77d7b2..3644b8e34 100644 --- a/src/less/index.less +++ b/src/less/index.less @@ -2,6 +2,7 @@ @import "box-model"; @import "typographic"; @import "visual"; +@import "motion"; @import "var"; @import "lib/colors"; @import "lib/theme"; diff --git a/src/less/modern.less b/src/less/modern.less index 9703cc17b..f3563a8d9 100644 --- a/src/less/modern.less +++ b/src/less/modern.less @@ -9,6 +9,7 @@ @import "core/utils/size.less"; @import "core/utils/sizing.less"; @import "core/utils/typographic.less"; +@import "core/utils/motion.less"; @import "core/wrapper/flex.horizontal.less"; @import "core/wrapper/flex.vertical.less"; @import "core/wrapper/flex.wrapper.horizontal.less"; diff --git a/src/less/motion.less b/src/less/motion.less new file mode 100644 index 000000000..1f3e571b9 --- /dev/null +++ b/src/less/motion.less @@ -0,0 +1,96 @@ +// Animation +@ease-base-out: cubic-bezier(0.7, 0.3, 0.1, 1); +@ease-base-in: cubic-bezier(0.9, 0, 0.3, 0.7); +@ease-out: cubic-bezier(0.215, 0.61, 0.355, 1); +@ease-in: cubic-bezier(0.55, 0.055, 0.675, 0.19); +@ease-in-out: cubic-bezier(0.645, 0.045, 0.355, 1); +@ease-out-back: cubic-bezier(0.12, 0.4, 0.29, 1.46); +@ease-in-back: cubic-bezier(0.71, -0.46, 0.88, 0.6); +@ease-in-out-back: cubic-bezier(0.71, -0.46, 0.29, 1.46); +@ease-out-circ: cubic-bezier(0.08, 0.82, 0.17, 1); +@ease-in-circ: cubic-bezier(0.6, 0.04, 0.98, 0.34); +@ease-in-out-circ: cubic-bezier(0.78, 0.14, 0.15, 0.86); +@ease-out-quint: cubic-bezier(0.23, 1, 0.32, 1); +@ease-in-quint: cubic-bezier(0.755, 0.05, 0.855, 0.06); +@ease-in-out-quint: cubic-bezier(0.86, 0, 0.07, 1); + +// Animation +@animation-duration-slow: 0.3s; // Modal +@animation-duration-base: 0.2s; +@animation-duration-fast: 0.1s; // Tooltip + +.motion-common(@duration: @animation-duration-base) { + animation-duration: @duration; + animation-fill-mode: both; +} + +.motion-common-leave(@duration: @animation-duration-base) { + animation-duration: @duration; + animation-fill-mode: both; +} + +.make-motion(@className, @keyframeName, @duration: @animation-duration-base) { + .@{className}-enter, + .@{className}-appear { + .motion-common(@duration); + + animation-play-state: paused; + } + .@{className}-leave { + .motion-common-leave(@duration); + + animation-play-state: paused; + } + .@{className}-enter.@{className}-enter-active, + .@{className}-appear.@{className}-appear-active { + animation-name: ~'@{keyframeName}In'; + animation-play-state: running; + } + .@{className}-leave.@{className}-leave-active { + animation-name: ~'@{keyframeName}Out'; + animation-play-state: running; + pointer-events: none; + } +} + +.fade-motion-enter() { + opacity: 0; + animation-timing-function: linear; + .motion-common(@animation-duration-base); + + animation-name: biFadeIn; + animation-play-state: running; +} + +.fade-motion-leave() { + animation-timing-function: linear; + .motion-common-leave(@animation-duration-base); + + animation-name: biFadeOut; + animation-play-state: running; + pointer-events: none; +} + +.zoom-big-motion-enter() { + transform: scale(0); // need this by yiminghe + opacity: 0; + animation-timing-function: @ease-out-circ; + + .motion-common(@animation-duration-base); + animation-play-state: paused; +} +.zoom-big-motion-enter-active() { + animation-name: biZoomBigIn; + animation-play-state: running; +} + +.zoom-big-motion-leave() { + animation-timing-function: @ease-in-out-circ; + + .motion-common-leave(@animation-duration-base); +} +.zoom-big-motion-leave-active() { + animation-name: biZoomBigOut; + animation-play-state: running; + pointer-events: none; +} From 0a5275753a67671d9fb62382e0b57e9555f480d1 Mon Sep 17 00:00:00 2001 From: guy Date: Sat, 1 Jan 2022 22:04:09 +0800 Subject: [PATCH 4/5] =?UTF-8?q?=E5=8A=A8=E7=94=BB?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/case/combo/bubblecombo/popup.bubble.js | 8 +-- src/less/base/combo/combo.bubble.less | 77 +++------------------- src/less/base/view/popupview.less | 62 ++++++++++++++++- 3 files changed, 73 insertions(+), 74 deletions(-) diff --git a/src/case/combo/bubblecombo/popup.bubble.js b/src/case/combo/bubblecombo/popup.bubble.js index dade95184..7eb70b26d 100644 --- a/src/case/combo/bubblecombo/popup.bubble.js +++ b/src/case/combo/bubblecombo/popup.bubble.js @@ -8,12 +8,12 @@ BI.BubblePopupView = BI.inherit(BI.PopupView, { _defaultConfig: function () { var config = BI.BubblePopupView.superclass._defaultConfig.apply(this, arguments); return BI.extend(config, { - baseCls: config.baseCls + " bi-bubble-popup-view bi-zoom-big-leave bi-zoom-big-leave-active", + baseCls: config.baseCls + " bi-bubble-popup-view bi-zoom-big-enter bi-zoom-big-enter-active", minWidth: 220, maxWidth: 300, minHeight: 90 }); - } + }, }); BI.shortcut("bi.bubble_popup_view", BI.BubblePopupView); @@ -102,7 +102,7 @@ BI.TextBubblePopupBarView = BI.inherit(BI.Widget, { props: function () { return { - baseCls: "bi-text-bubble-bar-popup-view bi-bubble-popup-view", + baseCls: "bi-text-bubble-bar-popup-view", text: "", buttons: [{ level: "ignore", @@ -155,7 +155,7 @@ BI.TextBubblePopupBarView = BI.inherit(BI.Widget, { populate: function (v) { this.text.setText(v || this.options.text); - } + }, }); BI.TextBubblePopupBarView.EVENT_CHANGE = "EVENT_CLICK_TOOLBAR_BUTTON"; BI.shortcut("bi.text_bubble_bar_popup_view", BI.TextBubblePopupBarView); diff --git a/src/less/base/combo/combo.bubble.less b/src/less/base/combo/combo.bubble.less index c5be6bc9b..4a77badf7 100644 --- a/src/less/base/combo/combo.bubble.less +++ b/src/less/base/combo/combo.bubble.less @@ -32,77 +32,16 @@ } } -.bi-combo-popup.bi-bubble-popup-view { - &.bi-zoom-big-leave{ - .zoom-big-motion-enter(); - } - &.bi-zoom-big-leave-active{ - .zoom-big-motion-enter-active(); - } -} - -.bi-popup-view[data-popper-placement^='top'] { - > .bi-bubble-arrow { - bottom: -10px; - > .bubble-arrow { - bottom: 6px; - } - } -} -.bi-popup-view[data-popper-placement^='bottom'] { - > .bi-bubble-arrow { - top: -10px; - > .bubble-arrow { - top: 6px; - } - } -} -.bi-popup-view[data-popper-placement^='left'] { - > .bi-bubble-arrow { - right: -10px; - > .bubble-arrow { - right: 6px; - } - } -} -.bi-popup-view[data-popper-placement^='right'] { - > .bi-bubble-arrow { - left: -10px; - > .bubble-arrow { - left: 6px; - } - } -} - -.bi-bubble-arrow { - width: 10px; - height: 10px; - overflow: hidden; - .bubble-arrow { - width: 10px; - height: 10px; - position: absolute; - &:before { - width: 10px; - height: 10px; - position: absolute; - content: ""; - background: @color-bi-background-default; - top: 0; - left: 0; - transition: transform 0.2s ease-out 0s, visibility 0.2s ease-out 0s; - visibility: visible; - transform: translateX(0px) rotate(-135deg); - transform-origin: center center; - .box-shadow(3px 3px 10px 0,rgba(0,0,0,6%)); - } - } -} +// .bi-combo-popup .bi-bubble-popup-view { +// &.bi-zoom-big-leave{ +// .zoom-big-motion-enter(); +// } +// &.bi-zoom-big-leave-active{ +// .zoom-big-motion-enter-active(); +// } +// } .bi-theme-dark { - .bubble-arrow:before { - background: @color-bi-background-default-theme-dark; - } .bi-bubble-combo { & .bubble-combo-triangle-left, & .bubble-combo-triangle-right, & .bubble-combo-triangle-top, & .bubble-combo-triangle-bottom { &:before { diff --git a/src/less/base/view/popupview.less b/src/less/base/view/popupview.less index 43f2c0c84..d88bf8ffc 100644 --- a/src/less/base/view/popupview.less +++ b/src/less/base/view/popupview.less @@ -1,6 +1,5 @@ @import "../../index"; -/**********BI.BIListView*************/ .bi-popup-view { position: fixed !important; overflow-y: visible !important; @@ -28,7 +27,68 @@ } } +.bi-popup-view[data-popper-placement^='top'] { + > .bi-bubble-arrow { + bottom: -10px; + > .bubble-arrow { + bottom: 6px; + } + } +} +.bi-popup-view[data-popper-placement^='bottom'] { + > .bi-bubble-arrow { + top: -10px; + > .bubble-arrow { + top: 6px; + } + } +} +.bi-popup-view[data-popper-placement^='left'] { + > .bi-bubble-arrow { + right: -10px; + > .bubble-arrow { + right: 6px; + } + } +} +.bi-popup-view[data-popper-placement^='right'] { + > .bi-bubble-arrow { + left: -10px; + > .bubble-arrow { + left: 6px; + } + } +} + +.bi-bubble-arrow { + width: 10px; + height: 10px; + overflow: hidden; + .bubble-arrow { + width: 10px; + height: 10px; + position: absolute; + &:before { + width: 10px; + height: 10px; + position: absolute; + content: ""; + background: @color-bi-background-default; + top: 0; + left: 0; + transition: transform 0.2s ease-out 0s, visibility 0.2s ease-out 0s; + visibility: visible; + transform: translateX(0px) rotate(-135deg); + transform-origin: center center; + .box-shadow(3px 3px 10px 0,rgba(0,0,0,6%)); + } + } +} + .bi-theme-dark { + .bubble-arrow:before { + background: @color-bi-background-default-theme-dark; + } .bi-popup-view { & .list-view-toolbar { & > .center-element { From 89b595ac4038333684f91a961fabe9eebff139d5 Mon Sep 17 00:00:00 2001 From: guy Date: Sat, 1 Jan 2022 22:07:38 +0800 Subject: [PATCH 5/5] ad d --- src/less/modern.less | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/less/modern.less b/src/less/modern.less index f3563a8d9..691f901c9 100644 --- a/src/less/modern.less +++ b/src/less/modern.less @@ -9,7 +9,10 @@ @import "core/utils/size.less"; @import "core/utils/sizing.less"; @import "core/utils/typographic.less"; -@import "core/utils/motion.less"; +@import "core/utils/motion/fade.less"; +@import "core/utils/motion/move.less"; +@import "core/utils/motion/slide.less"; +@import "core/utils/motion/zoom.less"; @import "core/wrapper/flex.horizontal.less"; @import "core/wrapper/flex.vertical.less"; @import "core/wrapper/flex.wrapper.horizontal.less";