diff --git a/package.json b/package.json index 603817f2d..fcb54ab7e 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "fineui", - "version": "2.0.20211230115312", + "version": "2.0.20220103173210", "description": "fineui", "main": "dist/fineui.min.js", "types": "dist/lib/index.d.ts", diff --git a/src/base/foundation/message.js b/src/base/foundation/message.js index 8fade4b01..9653995c3 100644 --- a/src/base/foundation/message.js +++ b/src/base/foundation/message.js @@ -162,7 +162,7 @@ BI.Msg = function () { } } }, - width: 60 + width: 56 } } }, diff --git a/src/base/layer/layer.popover.js b/src/base/layer/layer.popover.js index 87bd2d405..2ac5012d5 100644 --- a/src/base/layer/layer.popover.js +++ b/src/base/layer/layer.popover.js @@ -8,7 +8,7 @@ BI.Popover = BI.inherit(BI.Widget, { SIZE: { SMALL: "small", NORMAL: "normal", - BIG: "big", + BIG: "big" }, MAX_HEIGHT: 600 }, @@ -17,7 +17,7 @@ BI.Popover = BI.inherit(BI.Widget, { baseCls: "bi-popover bi-card bi-border-radius", size: "normal", // small, normal, big logic: { - dynamic: false, + dynamic: false }, header: null, headerHeight: 40, @@ -30,7 +30,8 @@ BI.Popover = BI.inherit(BI.Widget, { }, render: function () { - var self = this; var o = this.options; + var self = this; + var o = this.options; var c = this._constant; this.startX = 0; this.startY = 0; @@ -42,11 +43,11 @@ BI.Popover = BI.inherit(BI.Widget, { self.startY += deltaY; self.element.css({ left: BI.clamp(self.startX, 0, W - self.element.width()) + "px", - top: BI.clamp(self.startY, 0, H - self.element.height()) + "px", + top: BI.clamp(self.startY, 0, H - self.element.height()) + "px" }); // BI-12134 没有什么特别好的方法 BI.Resizers._resize({ - target: self.element[0], + target: self.element[0] }); }, function () { self.tracker.releaseMouseMoves(); @@ -55,43 +56,41 @@ BI.Popover = BI.inherit(BI.Widget, { el: { type: "bi.htape", cls: "bi-message-title bi-header-background", - ref: function (_ref) { - self.dragger = _ref; - }, items: [{ - type: "bi.absolute", - items: [{ - el: BI.isPlainObject(o.header) ? BI.extend({}, o.header, { - extraCls: "bi-font-bold", - }) : { - type: "bi.label", - cls: "bi-font-bold", - height: o.headerHeight, - text: o.header, - title: o.header, - textAlign: "left", + el: { + type: "bi.absolute", + ref: function (_ref) { + self.dragger = _ref; }, - left: 20, - top: 0, - right: 0, - bottom: 0, - }], - }, { - el: o.closable ? { + items: [{ + el: BI.isPlainObject(o.header) ? BI.extend({}, o.header, { + extraCls: "bi-font-bold" + }) : { + type: "bi.label", + cls: "bi-font-bold", + height: o.headerHeight, + text: o.header, + title: o.header, + textAlign: "left" + }, + left: 20, + right: o.closable ? 0 : 20 + }] + } + }, o.closable ? { + el: { type: "bi.icon_button", cls: "bi-message-close close-font", height: o.headerHeight, handler: function () { self.close(); - }, - } : { - type: "bi.layout", + } }, - width: 56, - }], - height: o.headerHeight, + width: 56 + } : null], + height: o.headerHeight }, - height: o.headerHeight, + height: o.headerHeight }, o.logic.dynamic ? { el: { type: "bi.vertical", @@ -102,14 +101,14 @@ BI.Popover = BI.inherit(BI.Widget, { }, css: { "max-height": this._getSuitableBodyHeight(c.MAX_HEIGHT - o.headerHeight - (o.footer ? o.footerHeight : 0) - o.bodyTgap), - "min-height": this._getSuitableBodyHeight(size.height - o.headerHeight - (o.footer ? o.footerHeight : 0) - o.bodyTgap), + "min-height": this._getSuitableBodyHeight(size.height - o.headerHeight - (o.footer ? o.footerHeight : 0) - o.bodyTgap) }, items: [{ - el: o.body, - }], + el: o.body + }] }, hgap: o.bodyHgap, - tgap: o.bodyTgap, + tgap: o.bodyTgap } : { el: { type: "bi.absolute", @@ -118,9 +117,9 @@ BI.Popover = BI.inherit(BI.Widget, { left: o.bodyHgap, top: o.bodyTgap, right: o.bodyHgap, - bottom: 0, - }], - }, + bottom: 0 + }] + } }]; if (o.footer) { items.push({ @@ -131,30 +130,31 @@ BI.Popover = BI.inherit(BI.Widget, { left: 20, top: 0, right: 20, - bottom: 0, + bottom: 0 }], - height: o.footerHeight, + height: o.footerHeight }, - height: o.footerHeight, + height: o.footerHeight }); } return BI.extend({ type: o.logic.dynamic ? "bi.vertical" : "bi.vtape", items: items, - width: this._getSuitableWidth(size.width), + width: this._getSuitableWidth(size.width) }, o.logic.dynamic ? { type: "bi.vertical", - scrolly: false, + scrolly: false } : { type: "bi.vtape", - height: this._getSuitableHeight(size.height), + height: this._getSuitableHeight(size.height) }); }, // mounted之后绑定事件 mounted: function () { - var self = this; var o = this.options; + var self = this; + var o = this.options; this.dragger.element.mousedown(function (e) { var pos = self.element.offset(); self.startX = pos.left; @@ -202,7 +202,7 @@ BI.Popover = BI.inherit(BI.Widget, { return { width: o.width || size.width, height: o.height || size.height, - type: size.type || "default", + type: size.type || "default" }; }, @@ -221,10 +221,11 @@ BI.Popover = BI.inherit(BI.Widget, { }, setZindex: function (zindex) { - this.element.css({ "z-index": zindex }); + this.element.css({"z-index": zindex}); }, - destroyed: function () {}, + destroyed: function () { + } }); BI.shortcut("bi.popover", BI.Popover); @@ -232,12 +233,13 @@ BI.shortcut("bi.popover", BI.Popover); BI.BarPopover = BI.inherit(BI.Popover, { _defaultConfig: function () { return BI.extend(BI.BarPopover.superclass._defaultConfig.apply(this, arguments), { - btns: [BI.i18nText("BI-Basic_Sure"), BI.i18nText("BI-Basic_Cancel")], + btns: [BI.i18nText("BI-Basic_Sure"), BI.i18nText("BI-Basic_Cancel")] }); }, beforeCreate: function () { - var self = this; var o = this.options; + var self = this; + var o = this.options; o.footer || (o.footer = { type: "bi.right_vertical_adapt", lgap: 10, @@ -249,7 +251,7 @@ BI.BarPopover = BI.inherit(BI.Popover, { handler: function (v) { self.fireEvent(BI.Popover.EVENT_CANCEL, v); self.close(v); - }, + } }, { type: "bi.button", text: this.options.btns[0], @@ -258,10 +260,10 @@ BI.BarPopover = BI.inherit(BI.Popover, { handler: function (v) { self.fireEvent(BI.Popover.EVENT_CONFIRM, v); self.close(v); - }, - }], + } + }] }); - }, + } }); BI.shortcut("bi.bar_popover", BI.BarPopover); diff --git a/src/case/combo/bubblecombo/combo.bubble.js b/src/case/combo/bubblecombo/combo.bubble.js index dd77173f3..5cedb9b5d 100644 --- a/src/case/combo/bubblecombo/combo.bubble.js +++ b/src/case/combo/bubblecombo/combo.bubble.js @@ -54,8 +54,10 @@ BI.BubbleCombo = BI.inherit(BI.Widget, { offsetStyle: o.offsetStyle, el: o.el, popup: BI.extend({ - type: "bi.bubble_popup_view" - }, o.popup) + type: "bi.bubble_popup_view", + }, o.popup, { + cls: (o.popup.cls || "") + " bi-zoom-big-enter bi-zoom-big-enter-active" + }) }); this.combo.on(BI.Combo.EVENT_TRIGGER_CHANGE, function () { self.fireEvent(BI.BubbleCombo.EVENT_TRIGGER_CHANGE, arguments); diff --git a/src/case/combo/bubblecombo/popup.bubble.js b/src/case/combo/bubblecombo/popup.bubble.js index 2fa9999ea..68804bc5b 100644 --- a/src/case/combo/bubblecombo/popup.bubble.js +++ b/src/case/combo/bubblecombo/popup.bubble.js @@ -13,7 +13,7 @@ BI.BubblePopupView = BI.inherit(BI.PopupView, { maxWidth: 300, minHeight: 90 }); - } + }, }); BI.shortcut("bi.bubble_popup_view", BI.BubblePopupView); @@ -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/case/linersegment/button.linear.segment.js b/src/case/linersegment/button.linear.segment.js index be8403844..38479accb 100644 --- a/src/case/linersegment/button.linear.segment.js +++ b/src/case/linersegment/button.linear.segment.js @@ -5,7 +5,7 @@ BI.LinearSegmentButton = BI.inherit(BI.BasicButton, { once: true, readonly: true, hgap: 10, - height: 25 + height: 24 }, render: function () { @@ -15,6 +15,7 @@ BI.LinearSegmentButton = BI.inherit(BI.BasicButton, { type: "bi.label", text: o.text, height: o.height, + textHeight: o.height - 2, value: o.value, hgap: o.hgap, ref: function () { @@ -51,4 +52,4 @@ BI.LinearSegmentButton = BI.inherit(BI.BasicButton, { this.text.setText(text); } }); -BI.shortcut("bi.linear_segment_button", BI.LinearSegmentButton); \ No newline at end of file +BI.shortcut("bi.linear_segment_button", BI.LinearSegmentButton); diff --git a/src/case/linersegment/linear.segment.js b/src/case/linersegment/linear.segment.js index f0060dce3..3c1b677c3 100644 --- a/src/case/linersegment/linear.segment.js +++ b/src/case/linersegment/linear.segment.js @@ -6,7 +6,7 @@ BI.LinearSegment = BI.inherit(BI.Widget, { layouts: [{ type: "bi.center" }], - height: 29 + height: 30 }, render: function () { @@ -15,9 +15,10 @@ BI.LinearSegment = BI.inherit(BI.Widget, { type: "bi.button_group", items: BI.createItems(o.items, { type: "bi.linear_segment_button", - height: o.height - 1 + height: o.height }), layouts: o.layouts, + value: o.value, listeners: [{ eventName: "__EVENT_CHANGE__", action: function () { @@ -48,4 +49,4 @@ BI.LinearSegment = BI.inherit(BI.Widget, { return this.buttonGroup.getValue(); } }); -BI.shortcut("bi.linear_segment", BI.LinearSegment); \ No newline at end of file +BI.shortcut("bi.linear_segment", BI.LinearSegment); diff --git a/src/less/base/segment/button.segment.less b/src/less/base/segment/button.segment.less index a0d35f122..3f39bba1d 100644 --- a/src/less/base/segment/button.segment.less +++ b/src/less/base/segment/button.segment.less @@ -3,3 +3,9 @@ .bi-segment-button { color: @color-bi-text-segment-button; } + +.bi-line-segment-button { + .line-segment-button-line { + .transition(background 0.3s); + } +} 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; diff --git a/src/less/base/view/popupview.less b/src/less/base/view/popupview.less index 983e7ea8b..efa864778 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 { diff --git a/src/less/core/utils/motion/fade.less b/src/less/core/utils/motion/fade.less new file mode 100644 index 000000000..9ad3bbaea --- /dev/null +++ b/src/less/core/utils/motion/fade.less @@ -0,0 +1,25 @@ +@import "../../../index"; + +.fade-motion(@className, @keyframeName) { + .make-motion(@className, @keyframeName); + .@{className}-enter, + .@{className}-appear { + opacity: 0; + animation-timing-function: linear; + } + .@{className}-leave { + animation-timing-function: linear; + } +} + +.fade-motion(bi-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..decc9f33d --- /dev/null +++ b/src/less/core/utils/motion/move.less @@ -0,0 +1,58 @@ +@import "../../../index"; + +.move-motion(@className, @keyframeName) { + .make-motion(@className, @keyframeName); + .@{className}-enter, + .@{className}-appear { + opacity: 0; + animation-timing-function: @ease-out-circ; + } + .@{className}-leave { + animation-timing-function: @ease-in-circ; + } +} + +.move-motion(bi-move-up, biMoveUp); +.move-motion(bi-move-down, biMoveDown); +.move-motion(bi-move-left, biMoveLeft); +.move-motion(bi-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..77909bbbc --- /dev/null +++ b/src/less/core/utils/motion/slide.less @@ -0,0 +1,130 @@ +@import "../../../index"; + +.slide-motion(@className, @keyframeName) { + .make-motion(@className, @keyframeName); + .@{className}-enter, + .@{className}-appear { + opacity: 0; + animation-timing-function: @ease-out-quint; + } + .@{className}-leave { + animation-timing-function: @ease-in-quint; + } +} + +.slide-motion(bi-slide-up, biSlideUp); +.slide-motion(bi-slide-down, biSlideDown); +.slide-motion(bi-slide-left, biSlideLeft); +.slide-motion(bi-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..c16ce98a9 --- /dev/null +++ b/src/less/core/utils/motion/zoom.less @@ -0,0 +1,161 @@ +@import "../../../index"; + +.zoom-motion(@className, @keyframeName, @duration: @animation-duration-base) { + .make-motion(@className, @keyframeName, @duration); + .@{className}-enter, + .@{className}-appear { + transform: scale(0); // need this by yiminghe + opacity: 0; + animation-timing-function: @ease-out-circ; + + &-prepare { + transform: none; + } + } + .@{className}-leave { + animation-timing-function: @ease-in-out-circ; + } +} + +// For Modal, Select choosen item +.zoom-motion(bi-zoom, biZoom); +// For Popover, Popconfirm, Dropdown +.zoom-motion(bi-zoom-big, biZoomBig); +// For Tooltip +.zoom-motion(bi-zoom-big-fast, biZoomBig, @animation-duration-fast); + +.zoom-motion(bi-zoom-up, biZoomUp); +.zoom-motion(bi-zoom-down, biZoomDown); +.zoom-motion(bi-zoom-left, biZoomLeft); +.zoom-motion(bi-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..a6b80bd1d 100644 --- a/src/less/modern.less +++ b/src/less/modern.less @@ -1,123 +1,127 @@ -//core -@import "core/normalize.less"; -@import "core/normalize2.less"; -@import "core/utils/animation.less"; -@import "core/utils/common.less"; -@import "core/utils/cursor.less"; -@import "core/utils/list-item.less"; -@import "core/utils/position.less"; -@import "core/utils/size.less"; -@import "core/utils/sizing.less"; -@import "core/utils/typographic.less"; -@import "core/wrapper/flex.horizontal.less"; -@import "core/wrapper/flex.vertical.less"; -@import "core/wrapper/flex.wrapper.horizontal.less"; -@import "core/wrapper/flex.wrapper.vertical.less"; -@import "core/wrapper/float.absolute.less"; -@import "core/wrapper/inline.less"; - -//base case -@import "base/pane.less"; -@import "base/colorchooser/colorchooser.trigger.less"; -@import "base/colorchooser/colorchooser.popup.less"; -@import "base/colorchooser/colorpicker/button.colorpicker.less"; -@import "base/colorchooser/colorpicker/button.colorshow.less"; -@import "base/colorchooser/colorpicker/editor.colorpicker.less"; -@import "base/colorchooser/farbtastic/farbtastic.less"; -@import "base/combo/combo.bubble.less"; -@import "base/combo/combo.less"; -@import "base/combo/combo.searchtextvalue.less"; -@import "base/combo/combo.textvalue.icon.less"; -@import "base/combo/combo.textvalue.less"; -@import "base/combo/combo.textvaluecheck.less"; -@import "base/combo/combo.textvaluedownlist.less"; -@import "base/combo/popup.bubble.bar.less"; -@import "base/combo/popup.bubble.less"; -@import "base/editor/editor.search.less"; -@import "base/editor/editor.search.small.less"; -@import "base/foundation/bi.message.less"; -@import "base/layer/layer.multiselect.less"; -@import "base/layer/panel.less"; -@import "base/loader/sort.list.less"; -@import "base/pager/pager.all.count.less"; -@import "base/pager/pager.direction.less"; -@import "base/pager/pager.less"; -@import "base/segment/button.segment.less"; -@import "base/segment/segment.less"; -@import "base/single/html.less"; -@import "base/single/label.less"; -@import "base/single/text.less"; -@import "base/single/button/button.half.less"; -@import "base/single/button/button.less"; -@import "base/single/button/item.singleselect.icontext.less"; -@import "base/single/button/switch.less"; -@import "base/single/editor/editor.multifile.less"; -@import "base/single/editor/editor.textarea.less"; -@import "base/single/input/checkbox.less"; -@import "base/single/input/file.less"; -@import "base/single/input/input.less"; -@import "base/single/input/radio.less"; -@import "base/single/tip/tip.bubble.less"; -@import "base/single/tip/tip.less"; -@import "base/single/tip/tip.toast.less"; -@import "base/single/tip/tip.tooltip.less"; -@import "base/tree/tree.branch.less"; -@import "base/tree/tree.display.less"; -@import "base/tree/tree.expander.less"; -@import "base/tree/tree.list.display.less"; -@import "base/tree/ztree.less"; -@import "base/trigger/trigger.less"; -@import "base/trigger/trigger.selecttext.less"; -@import "base/trigger/trigger.selecttextsmall.less"; -@import "base/view/popover.less"; -@import "base/view/popupview.less"; - -//widget -@import "widget/date/trigger.date.less"; -@import "widget/downlist/popup.downlist.less"; -@import "widget/dynamicdatecombo/dynamicdatepopup.less"; -@import "widget/dynamicdatecombo/dynamicdatetime.combo.less"; -@import "widget/dynamicdatecombo/dynamicdatetimepopup.less"; -@import "widget/interactivearrangement/interactivearrangement.less"; -@import "widget/intervalslider/intervalslider.label.less"; -@import "widget/intervalslider/intervalslider.less"; -@import "widget/month/trigger.month.less"; -@import "widget/multilayerselecttree/multilayerselecttree.combo.less"; -@import "widget/multilayerselecttree/multilayerselecttree.leveltree.less"; -@import "widget/multilayersingletree/multilayersingletree.combo.less"; -@import "widget/multilayersingletree/multilayersingletree.leveltree.less"; -@import "widget/multiselect/multiselect.combo.less"; -@import "widget/multiselect/multiselect.insert.combo.less"; -@import "widget/multiselect/check/multiselect.check.pane.less"; -@import "widget/multiselect/search/multiselect.search.pane.less"; -@import "widget/multiselect/trigger/button.checkselected.less"; -@import "widget/multistringlist/multistringlist.insert.less"; -@import "widget/multistringlist/multistringlist.less"; -@import "widget/multitree/multi.tree.combo.less"; -@import "widget/multitree/popup.multi.tree.less"; -@import "widget/multitree/check/multi.tree.check.pane.less"; -@import "widget/multitree/trigger/multi.tree.button.checkselected.less"; -@import "widget/numbereditor/number.editor.less"; -@import "widget/numberinterval/numberinterval.less"; -@import "widget/quarter/trigger.quarter.less"; -@import "widget/searchmultiselect/searchmultiselect.less"; -@import "widget/singleselect/singleselect.combo.less"; -@import "widget/singleselect/search/singleselect.search.pane.less"; -@import "widget/singleslider/singlelider.label.less"; -@import "widget/singleslider/singlelider.normal.less"; -@import "widget/singleslider/singleslider.less"; -@import "widget/singleslider/slider/widget.slider.less"; -@import "widget/singleslider/track/widget.track.less"; -@import "widget/timecombo/timecombo.less"; -@import "widget/timeinterval/dateinterval.less"; -@import "widget/timeinterval/timeinterval.less"; -@import "widget/year/popup.year.less"; -@import "widget/year/trigger.year.less"; -@import "widget/yearinterval/yearinterval.less"; -@import "widget/yearmonth/popup.yearmonth.less"; -@import "widget/yearmonthinterval/yearmonthinterval.less"; -@import "widget/yearquarter/popup.yearquarter.less"; -@import "widget/yearquarterinterval/yearquarterinterval.less"; +////core +//@import "core/normalize.less"; +//@import "core/normalize2.less"; +//@import "core/utils/animation.less"; +//@import "core/utils/common.less"; +//@import "core/utils/cursor.less"; +//@import "core/utils/list-item.less"; +//@import "core/utils/position.less"; +//@import "core/utils/size.less"; +//@import "core/utils/sizing.less"; +//@import "core/utils/typographic.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"; +//@import "core/wrapper/flex.wrapper.vertical.less"; +//@import "core/wrapper/float.absolute.less"; +//@import "core/wrapper/inline.less"; +// +////base case +//@import "base/pane.less"; +//@import "base/colorchooser/colorchooser.trigger.less"; +//@import "base/colorchooser/colorchooser.popup.less"; +//@import "base/colorchooser/colorpicker/button.colorpicker.less"; +//@import "base/colorchooser/colorpicker/button.colorshow.less"; +//@import "base/colorchooser/colorpicker/editor.colorpicker.less"; +//@import "base/colorchooser/farbtastic/farbtastic.less"; +//@import "base/combo/combo.bubble.less"; +//@import "base/combo/combo.less"; +//@import "base/combo/combo.searchtextvalue.less"; +//@import "base/combo/combo.textvalue.icon.less"; +//@import "base/combo/combo.textvalue.less"; +//@import "base/combo/combo.textvaluecheck.less"; +//@import "base/combo/combo.textvaluedownlist.less"; +//@import "base/combo/popup.bubble.bar.less"; +//@import "base/combo/popup.bubble.less"; +//@import "base/editor/editor.search.less"; +//@import "base/editor/editor.search.small.less"; +//@import "base/foundation/bi.message.less"; +//@import "base/layer/layer.multiselect.less"; +//@import "base/layer/panel.less"; +//@import "base/loader/sort.list.less"; +//@import "base/pager/pager.all.count.less"; +//@import "base/pager/pager.direction.less"; +//@import "base/pager/pager.less"; +//@import "base/segment/button.segment.less"; +//@import "base/segment/segment.less"; +//@import "base/single/html.less"; +//@import "base/single/label.less"; +//@import "base/single/text.less"; +//@import "base/single/button/button.half.less"; +//@import "base/single/button/button.less"; +//@import "base/single/button/item.singleselect.icontext.less"; +//@import "base/single/button/switch.less"; +//@import "base/single/editor/editor.multifile.less"; +//@import "base/single/editor/editor.textarea.less"; +//@import "base/single/input/checkbox.less"; +//@import "base/single/input/file.less"; +//@import "base/single/input/input.less"; +//@import "base/single/input/radio.less"; +//@import "base/single/tip/tip.bubble.less"; +//@import "base/single/tip/tip.less"; +//@import "base/single/tip/tip.toast.less"; +//@import "base/single/tip/tip.tooltip.less"; +//@import "base/tree/tree.branch.less"; +//@import "base/tree/tree.display.less"; +//@import "base/tree/tree.expander.less"; +//@import "base/tree/tree.list.display.less"; +//@import "base/tree/ztree.less"; +//@import "base/trigger/trigger.less"; +//@import "base/trigger/trigger.selecttext.less"; +//@import "base/trigger/trigger.selecttextsmall.less"; +//@import "base/view/popover.less"; +//@import "base/view/popupview.less"; +// +////widget +//@import "widget/date/trigger.date.less"; +//@import "widget/downlist/popup.downlist.less"; +//@import "widget/dynamicdatecombo/dynamicdatepopup.less"; +//@import "widget/dynamicdatecombo/dynamicdatetime.combo.less"; +//@import "widget/dynamicdatecombo/dynamicdatetimepopup.less"; +//@import "widget/interactivearrangement/interactivearrangement.less"; +//@import "widget/intervalslider/intervalslider.label.less"; +//@import "widget/intervalslider/intervalslider.less"; +//@import "widget/month/trigger.month.less"; +//@import "widget/multilayerselecttree/multilayerselecttree.combo.less"; +//@import "widget/multilayerselecttree/multilayerselecttree.leveltree.less"; +//@import "widget/multilayersingletree/multilayersingletree.combo.less"; +//@import "widget/multilayersingletree/multilayersingletree.leveltree.less"; +//@import "widget/multiselect/multiselect.combo.less"; +//@import "widget/multiselect/multiselect.insert.combo.less"; +//@import "widget/multiselect/check/multiselect.check.pane.less"; +//@import "widget/multiselect/search/multiselect.search.pane.less"; +//@import "widget/multiselect/trigger/button.checkselected.less"; +//@import "widget/multistringlist/multistringlist.insert.less"; +//@import "widget/multistringlist/multistringlist.less"; +//@import "widget/multitree/multi.tree.combo.less"; +//@import "widget/multitree/popup.multi.tree.less"; +//@import "widget/multitree/check/multi.tree.check.pane.less"; +//@import "widget/multitree/trigger/multi.tree.button.checkselected.less"; +//@import "widget/numbereditor/number.editor.less"; +//@import "widget/numberinterval/numberinterval.less"; +//@import "widget/quarter/trigger.quarter.less"; +//@import "widget/searchmultiselect/searchmultiselect.less"; +//@import "widget/singleselect/singleselect.combo.less"; +//@import "widget/singleselect/search/singleselect.search.pane.less"; +//@import "widget/singleslider/singlelider.label.less"; +//@import "widget/singleslider/singlelider.normal.less"; +//@import "widget/singleslider/singleslider.less"; +//@import "widget/singleslider/slider/widget.slider.less"; +//@import "widget/singleslider/track/widget.track.less"; +//@import "widget/timecombo/timecombo.less"; +//@import "widget/timeinterval/dateinterval.less"; +//@import "widget/timeinterval/timeinterval.less"; +//@import "widget/year/popup.year.less"; +//@import "widget/year/trigger.year.less"; +//@import "widget/yearinterval/yearinterval.less"; +//@import "widget/yearmonth/popup.yearmonth.less"; +//@import "widget/yearmonthinterval/yearmonthinterval.less"; +//@import "widget/yearquarter/popup.yearquarter.less"; +//@import "widget/yearquarterinterval/yearquarterinterval.less"; @import "lib/colors-modern"; @import "lib/theme-modern"; diff --git a/src/less/motion.less b/src/less/motion.less new file mode 100644 index 000000000..3bd4a4368 --- /dev/null +++ b/src/less/motion.less @@ -0,0 +1,78 @@ +// 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; + } +} + +.zoom-big-motion-enter() { + transform: scale(0); + 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; +}