fanruan
/
fineui
4
1
Fork 3
Code Issues 1 Pull Requests Releases Wiki Activity
Browse Source

Merge branch 'master' of https://code.fineres.com/scm/visual/fineui 

# Conflicts:
#	src/less/base/combo/combo.bubble.less
#	src/less/base/segment/button.segment.less
es6
windy 3 years ago
parent
3ab8fceb9b 7e0ab2b61d
commit
16affb47af
17 changed files with 719 additions and 188 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      package.json
  2. 2
      src/base/foundation/message.js
  3. 114
      src/base/layer/layer.popover.js
  4. 6
      src/case/combo/bubblecombo/combo.bubble.js
  5. 4
      src/case/combo/bubblecombo/popup.bubble.js
  6. 5
      src/case/linersegment/button.linear.segment.js
  7. 7
      src/case/linersegment/linear.segment.js
  8. 6
      src/less/base/segment/button.segment.less
  9. 2
      src/less/base/single/button/switch.less
  10. 62
      src/less/base/view/popupview.less
  11. 25
      src/less/core/utils/motion/fade.less
  12. 58
      src/less/core/utils/motion/move.less
  13. 130
      src/less/core/utils/motion/slide.less
  14. 161
      src/less/core/utils/motion/zoom.less
  15. 1
      src/less/index.less
  16. 244
      src/less/modern.less
  17. 78
      src/less/motion.less

2
package.json
Unescape View File

@ -1,6 +1,6 @@
{ {
"name": "fineui", "name": "fineui",
"version": "2.0.20211230115312", "version": "2.0.20220103173210",
"description": "fineui", "description": "fineui",
"main": "dist/fineui.min.js", "main": "dist/fineui.min.js",
"types": "dist/lib/index.d.ts", "types": "dist/lib/index.d.ts",

2
src/base/foundation/message.js
Unescape View File

@ -162,7 +162,7 @@ BI.Msg = function () {
} }
} }
}, },
width: 60 width: 56
} }
} }
}, },

114
src/base/layer/layer.popover.js
Unescape View File

@ -8,7 +8,7 @@ BI.Popover = BI.inherit(BI.Widget, {
SIZE: { SIZE: {
SMALL: "small", SMALL: "small",
NORMAL: "normal", NORMAL: "normal",
BIG: "big", BIG: "big"
}, },
MAX_HEIGHT: 600 MAX_HEIGHT: 600
}, },
@ -17,7 +17,7 @@ BI.Popover = BI.inherit(BI.Widget, {
baseCls: "bi-popover bi-card bi-border-radius", baseCls: "bi-popover bi-card bi-border-radius",
size: "normal", // small, normal, big size: "normal", // small, normal, big
logic: { logic: {
dynamic: false, dynamic: false
}, },
header: null, header: null,
headerHeight: 40, headerHeight: 40,
@ -30,7 +30,8 @@ BI.Popover = BI.inherit(BI.Widget, {
}, },
render: function () { render: function () {
var self = this; var o = this.options; var self = this;
var o = this.options;
var c = this._constant; var c = this._constant;
this.startX = 0; this.startX = 0;
this.startY = 0; this.startY = 0;
@ -42,11 +43,11 @@ BI.Popover = BI.inherit(BI.Widget, {
self.startY += deltaY; self.startY += deltaY;
self.element.css({ self.element.css({
left: BI.clamp(self.startX, 0, W - self.element.width()) + "px", 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-12134 没有什么特别好的方法
BI.Resizers._resize({ BI.Resizers._resize({
target: self.element[0], target: self.element[0]
}); });
}, function () { }, function () {
self.tracker.releaseMouseMoves(); self.tracker.releaseMouseMoves();
@ -55,43 +56,41 @@ BI.Popover = BI.inherit(BI.Widget, {
el: { el: {
type: "bi.htape", type: "bi.htape",
cls: "bi-message-title bi-header-background", cls: "bi-message-title bi-header-background",
ref: function (_ref) {
self.dragger = _ref;
},
items: [{ items: [{
type: "bi.absolute", el: {
items: [{ type: "bi.absolute",
el: BI.isPlainObject(o.header) ? BI.extend({}, o.header, { ref: function (_ref) {
extraCls: "bi-font-bold", self.dragger = _ref;
}) : {
type: "bi.label",
cls: "bi-font-bold",
height: o.headerHeight,
text: o.header,
title: o.header,
textAlign: "left",
}, },
left: 20, items: [{
top: 0, el: BI.isPlainObject(o.header) ? BI.extend({}, o.header, {
right: 0, extraCls: "bi-font-bold"
bottom: 0, }) : {
}], type: "bi.label",
}, { cls: "bi-font-bold",
el: o.closable ? { 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", type: "bi.icon_button",
cls: "bi-message-close close-font", cls: "bi-message-close close-font",
height: o.headerHeight, height: o.headerHeight,
handler: function () { handler: function () {
self.close(); self.close();
}, }
} : {
type: "bi.layout",
}, },
width: 56, width: 56
}], } : null],
height: o.headerHeight, height: o.headerHeight
}, },
height: o.headerHeight, height: o.headerHeight
}, o.logic.dynamic ? { }, o.logic.dynamic ? {
el: { el: {
type: "bi.vertical", type: "bi.vertical",
@ -102,14 +101,14 @@ BI.Popover = BI.inherit(BI.Widget, {
}, },
css: { css: {
"max-height": this._getSuitableBodyHeight(c.MAX_HEIGHT - o.headerHeight - (o.footer ? o.footerHeight : 0) - o.bodyTgap), "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: [{ items: [{
el: o.body, el: o.body
}], }]
}, },
hgap: o.bodyHgap, hgap: o.bodyHgap,
tgap: o.bodyTgap, tgap: o.bodyTgap
} : { } : {
el: { el: {
type: "bi.absolute", type: "bi.absolute",
@ -118,9 +117,9 @@ BI.Popover = BI.inherit(BI.Widget, {
left: o.bodyHgap, left: o.bodyHgap,
top: o.bodyTgap, top: o.bodyTgap,
right: o.bodyHgap, right: o.bodyHgap,
bottom: 0, bottom: 0
}], }]
}, }
}]; }];
if (o.footer) { if (o.footer) {
items.push({ items.push({
@ -131,30 +130,31 @@ BI.Popover = BI.inherit(BI.Widget, {
left: 20, left: 20,
top: 0, top: 0,
right: 20, right: 20,
bottom: 0, bottom: 0
}], }],
height: o.footerHeight, height: o.footerHeight
}, },
height: o.footerHeight, height: o.footerHeight
}); });
} }
return BI.extend({ return BI.extend({
type: o.logic.dynamic ? "bi.vertical" : "bi.vtape", type: o.logic.dynamic ? "bi.vertical" : "bi.vtape",
items: items, items: items,
width: this._getSuitableWidth(size.width), width: this._getSuitableWidth(size.width)
}, o.logic.dynamic ? { }, o.logic.dynamic ? {
type: "bi.vertical", type: "bi.vertical",
scrolly: false, scrolly: false
} : { } : {
type: "bi.vtape", type: "bi.vtape",
height: this._getSuitableHeight(size.height), height: this._getSuitableHeight(size.height)
}); });
}, },
// mounted之后绑定事件 // mounted之后绑定事件
mounted: function () { mounted: function () {
var self = this; var o = this.options; var self = this;
var o = this.options;
this.dragger.element.mousedown(function (e) { this.dragger.element.mousedown(function (e) {
var pos = self.element.offset(); var pos = self.element.offset();
self.startX = pos.left; self.startX = pos.left;
@ -202,7 +202,7 @@ BI.Popover = BI.inherit(BI.Widget, {
return { return {
width: o.width || size.width, width: o.width || size.width,
height: o.height || size.height, 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) { 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); BI.shortcut("bi.popover", BI.Popover);
@ -232,12 +233,13 @@ BI.shortcut("bi.popover", BI.Popover);
BI.BarPopover = BI.inherit(BI.Popover, { BI.BarPopover = BI.inherit(BI.Popover, {
_defaultConfig: function () { _defaultConfig: function () {
return BI.extend(BI.BarPopover.superclass._defaultConfig.apply(this, arguments), { 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 () { beforeCreate: function () {
var self = this; var o = this.options; var self = this;
var o = this.options;
o.footer || (o.footer = { o.footer || (o.footer = {
type: "bi.right_vertical_adapt", type: "bi.right_vertical_adapt",
lgap: 10, lgap: 10,
@ -249,7 +251,7 @@ BI.BarPopover = BI.inherit(BI.Popover, {
handler: function (v) { handler: function (v) {
self.fireEvent(BI.Popover.EVENT_CANCEL, v); self.fireEvent(BI.Popover.EVENT_CANCEL, v);
self.close(v); self.close(v);
}, }
}, { }, {
type: "bi.button", type: "bi.button",
text: this.options.btns[0], text: this.options.btns[0],
@ -258,10 +260,10 @@ BI.BarPopover = BI.inherit(BI.Popover, {
handler: function (v) { handler: function (v) {
self.fireEvent(BI.Popover.EVENT_CONFIRM, v); self.fireEvent(BI.Popover.EVENT_CONFIRM, v);
self.close(v); self.close(v);
}, }
}], }]
}); });
}, }
}); });
BI.shortcut("bi.bar_popover", BI.BarPopover); BI.shortcut("bi.bar_popover", BI.BarPopover);

6
src/case/combo/bubblecombo/combo.bubble.js
Unescape View File

@ -54,8 +54,10 @@ BI.BubbleCombo = BI.inherit(BI.Widget, {
offsetStyle: o.offsetStyle, offsetStyle: o.offsetStyle,
el: o.el, el: o.el,
popup: BI.extend({ popup: BI.extend({
type: "bi.bubble_popup_view" type: "bi.bubble_popup_view",
}, o.popup) }, o.popup, {
cls: (o.popup.cls || "") + " bi-zoom-big-enter bi-zoom-big-enter-active"
})
}); });
this.combo.on(BI.Combo.EVENT_TRIGGER_CHANGE, function () { this.combo.on(BI.Combo.EVENT_TRIGGER_CHANGE, function () {
self.fireEvent(BI.BubbleCombo.EVENT_TRIGGER_CHANGE, arguments); self.fireEvent(BI.BubbleCombo.EVENT_TRIGGER_CHANGE, arguments);

4
src/case/combo/bubblecombo/popup.bubble.js
Unescape View File

@ -13,7 +13,7 @@ BI.BubblePopupView = BI.inherit(BI.PopupView, {
maxWidth: 300, maxWidth: 300,
minHeight: 90 minHeight: 90
}); });
} },
}); });
BI.shortcut("bi.bubble_popup_view", BI.BubblePopupView); BI.shortcut("bi.bubble_popup_view", BI.BubblePopupView);
@ -155,7 +155,7 @@ BI.TextBubblePopupBarView = BI.inherit(BI.Widget, {
populate: function (v) { populate: function (v) {
this.text.setText(v || this.options.text); this.text.setText(v || this.options.text);
} },
}); });
BI.TextBubblePopupBarView.EVENT_CHANGE = "EVENT_CLICK_TOOLBAR_BUTTON"; BI.TextBubblePopupBarView.EVENT_CHANGE = "EVENT_CLICK_TOOLBAR_BUTTON";
BI.shortcut("bi.text_bubble_bar_popup_view", BI.TextBubblePopupBarView); BI.shortcut("bi.text_bubble_bar_popup_view", BI.TextBubblePopupBarView);

5
src/case/linersegment/button.linear.segment.js
Unescape View File

@ -5,7 +5,7 @@ BI.LinearSegmentButton = BI.inherit(BI.BasicButton, {
once: true, once: true,
readonly: true, readonly: true,
hgap: 10, hgap: 10,
height: 25 height: 24
}, },
render: function () { render: function () {
@ -15,6 +15,7 @@ BI.LinearSegmentButton = BI.inherit(BI.BasicButton, {
type: "bi.label", type: "bi.label",
text: o.text, text: o.text,
height: o.height, height: o.height,
textHeight: o.height - 2,
value: o.value, value: o.value,
hgap: o.hgap, hgap: o.hgap,
ref: function () { ref: function () {
@ -51,4 +52,4 @@ BI.LinearSegmentButton = BI.inherit(BI.BasicButton, {
this.text.setText(text); this.text.setText(text);
} }
}); });
BI.shortcut("bi.linear_segment_button", BI.LinearSegmentButton); BI.shortcut("bi.linear_segment_button", BI.LinearSegmentButton);

7
src/case/linersegment/linear.segment.js
Unescape View File

@ -6,7 +6,7 @@ BI.LinearSegment = BI.inherit(BI.Widget, {
layouts: [{ layouts: [{
type: "bi.center" type: "bi.center"
}], }],
height: 29 height: 30
}, },
render: function () { render: function () {
@ -15,9 +15,10 @@ BI.LinearSegment = BI.inherit(BI.Widget, {
type: "bi.button_group", type: "bi.button_group",
items: BI.createItems(o.items, { items: BI.createItems(o.items, {
type: "bi.linear_segment_button", type: "bi.linear_segment_button",
height: o.height - 1 height: o.height
}), }),
layouts: o.layouts, layouts: o.layouts,
value: o.value,
listeners: [{ listeners: [{
eventName: "__EVENT_CHANGE__", eventName: "__EVENT_CHANGE__",
action: function () { action: function () {
@ -48,4 +49,4 @@ BI.LinearSegment = BI.inherit(BI.Widget, {
return this.buttonGroup.getValue(); return this.buttonGroup.getValue();
} }
}); });
BI.shortcut("bi.linear_segment", BI.LinearSegment); BI.shortcut("bi.linear_segment", BI.LinearSegment);

6
src/less/base/segment/button.segment.less
Unescape View File

@ -3,3 +3,9 @@
.bi-segment-button { .bi-segment-button {
color: @color-bi-text-segment-button; color: @color-bi-text-segment-button;
} }
.bi-line-segment-button {
.line-segment-button-line {
.transition(background 0.3s);
}
}

2
src/less/base/single/button/switch.less
Unescape View File

@ -3,11 +3,13 @@
.bi-switch{ .bi-switch{
.border-radius(40px 40px 40px 40px); .border-radius(40px 40px 40px 40px);
background-color: @color-bi-background-switch; background-color: @color-bi-background-switch;
.transition(all .2s);
&.active { &.active {
background-color: @color-bi-background-active-switch; background-color: @color-bi-background-active-switch;
} }
& .circle-button{ & .circle-button{
.border-radius(9px 9px 9px 9px); .border-radius(9px 9px 9px 9px);
.transition(all .2s ease-in-out);
} }
&.disabled { &.disabled {
background-color: @color-bi-background-disabled-switch; background-color: @color-bi-background-disabled-switch;

62
src/less/base/view/popupview.less
Unescape View File

@ -1,6 +1,5 @@
@import "../../index"; @import "../../index";
/**********BI.BIListView*************/
.bi-popup-view { .bi-popup-view {
position: fixed !important; position: fixed !important;
overflow-y: visible !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 { .bi-theme-dark {
.bubble-arrow:before {
background: @color-bi-background-default-theme-dark;
}
.bi-popup-view { .bi-popup-view {
& .list-view-toolbar { & .list-view-toolbar {
& > .center-element { & > .center-element {

25
src/less/core/utils/motion/fade.less
Unescape View File

@ -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;}
//});

58
src/less/core/utils/motion/move.less
Unescape View File

@ -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;}
//});

130
src/less/core/utils/motion/slide.less
Unescape View File

@ -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;
// }
//});

161
src/less/core/utils/motion/zoom.less
Unescape View File

@ -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;
// }
//});

1
src/less/index.less
Unescape View File

@ -2,6 +2,7 @@
@import "box-model"; @import "box-model";
@import "typographic"; @import "typographic";
@import "visual"; @import "visual";
@import "motion";
@import "var"; @import "var";
@import "lib/colors"; @import "lib/colors";
@import "lib/theme"; @import "lib/theme";

244
src/less/modern.less
Unescape View File

@ -1,123 +1,127 @@
//core ////core
@import "core/normalize.less"; //@import "core/normalize.less";
@import "core/normalize2.less"; //@import "core/normalize2.less";
@import "core/utils/animation.less"; //@import "core/utils/animation.less";
@import "core/utils/common.less"; //@import "core/utils/common.less";
@import "core/utils/cursor.less"; //@import "core/utils/cursor.less";
@import "core/utils/list-item.less"; //@import "core/utils/list-item.less";
@import "core/utils/position.less"; //@import "core/utils/position.less";
@import "core/utils/size.less"; //@import "core/utils/size.less";
@import "core/utils/sizing.less"; //@import "core/utils/sizing.less";
@import "core/utils/typographic.less"; //@import "core/utils/typographic.less";
@import "core/wrapper/flex.horizontal.less"; //@import "core/utils/motion/fade.less";
@import "core/wrapper/flex.vertical.less"; //@import "core/utils/motion/move.less";
@import "core/wrapper/flex.wrapper.horizontal.less"; //@import "core/utils/motion/slide.less";
@import "core/wrapper/flex.wrapper.vertical.less"; //@import "core/utils/motion/zoom.less";
@import "core/wrapper/float.absolute.less"; //@import "core/wrapper/flex.horizontal.less";
@import "core/wrapper/inline.less"; //@import "core/wrapper/flex.vertical.less";
//@import "core/wrapper/flex.wrapper.horizontal.less";
//base case //@import "core/wrapper/flex.wrapper.vertical.less";
@import "base/pane.less"; //@import "core/wrapper/float.absolute.less";
@import "base/colorchooser/colorchooser.trigger.less"; //@import "core/wrapper/inline.less";
@import "base/colorchooser/colorchooser.popup.less"; //
@import "base/colorchooser/colorpicker/button.colorpicker.less"; ////base case
@import "base/colorchooser/colorpicker/button.colorshow.less"; //@import "base/pane.less";
@import "base/colorchooser/colorpicker/editor.colorpicker.less"; //@import "base/colorchooser/colorchooser.trigger.less";
@import "base/colorchooser/farbtastic/farbtastic.less"; //@import "base/colorchooser/colorchooser.popup.less";
@import "base/combo/combo.bubble.less"; //@import "base/colorchooser/colorpicker/button.colorpicker.less";
@import "base/combo/combo.less"; //@import "base/colorchooser/colorpicker/button.colorshow.less";
@import "base/combo/combo.searchtextvalue.less"; //@import "base/colorchooser/colorpicker/editor.colorpicker.less";
@import "base/combo/combo.textvalue.icon.less"; //@import "base/colorchooser/farbtastic/farbtastic.less";
@import "base/combo/combo.textvalue.less"; //@import "base/combo/combo.bubble.less";
@import "base/combo/combo.textvaluecheck.less"; //@import "base/combo/combo.less";
@import "base/combo/combo.textvaluedownlist.less"; //@import "base/combo/combo.searchtextvalue.less";
@import "base/combo/popup.bubble.bar.less"; //@import "base/combo/combo.textvalue.icon.less";
@import "base/combo/popup.bubble.less"; //@import "base/combo/combo.textvalue.less";
@import "base/editor/editor.search.less"; //@import "base/combo/combo.textvaluecheck.less";
@import "base/editor/editor.search.small.less"; //@import "base/combo/combo.textvaluedownlist.less";
@import "base/foundation/bi.message.less"; //@import "base/combo/popup.bubble.bar.less";
@import "base/layer/layer.multiselect.less"; //@import "base/combo/popup.bubble.less";
@import "base/layer/panel.less"; //@import "base/editor/editor.search.less";
@import "base/loader/sort.list.less"; //@import "base/editor/editor.search.small.less";
@import "base/pager/pager.all.count.less"; //@import "base/foundation/bi.message.less";
@import "base/pager/pager.direction.less"; //@import "base/layer/layer.multiselect.less";
@import "base/pager/pager.less"; //@import "base/layer/panel.less";
@import "base/segment/button.segment.less"; //@import "base/loader/sort.list.less";
@import "base/segment/segment.less"; //@import "base/pager/pager.all.count.less";
@import "base/single/html.less"; //@import "base/pager/pager.direction.less";
@import "base/single/label.less"; //@import "base/pager/pager.less";
@import "base/single/text.less"; //@import "base/segment/button.segment.less";
@import "base/single/button/button.half.less"; //@import "base/segment/segment.less";
@import "base/single/button/button.less"; //@import "base/single/html.less";
@import "base/single/button/item.singleselect.icontext.less"; //@import "base/single/label.less";
@import "base/single/button/switch.less"; //@import "base/single/text.less";
@import "base/single/editor/editor.multifile.less"; //@import "base/single/button/button.half.less";
@import "base/single/editor/editor.textarea.less"; //@import "base/single/button/button.less";
@import "base/single/input/checkbox.less"; //@import "base/single/button/item.singleselect.icontext.less";
@import "base/single/input/file.less"; //@import "base/single/button/switch.less";
@import "base/single/input/input.less"; //@import "base/single/editor/editor.multifile.less";
@import "base/single/input/radio.less"; //@import "base/single/editor/editor.textarea.less";
@import "base/single/tip/tip.bubble.less"; //@import "base/single/input/checkbox.less";
@import "base/single/tip/tip.less"; //@import "base/single/input/file.less";
@import "base/single/tip/tip.toast.less"; //@import "base/single/input/input.less";
@import "base/single/tip/tip.tooltip.less"; //@import "base/single/input/radio.less";
@import "base/tree/tree.branch.less"; //@import "base/single/tip/tip.bubble.less";
@import "base/tree/tree.display.less"; //@import "base/single/tip/tip.less";
@import "base/tree/tree.expander.less"; //@import "base/single/tip/tip.toast.less";
@import "base/tree/tree.list.display.less"; //@import "base/single/tip/tip.tooltip.less";
@import "base/tree/ztree.less"; //@import "base/tree/tree.branch.less";
@import "base/trigger/trigger.less"; //@import "base/tree/tree.display.less";
@import "base/trigger/trigger.selecttext.less"; //@import "base/tree/tree.expander.less";
@import "base/trigger/trigger.selecttextsmall.less"; //@import "base/tree/tree.list.display.less";
@import "base/view/popover.less"; //@import "base/tree/ztree.less";
@import "base/view/popupview.less"; //@import "base/trigger/trigger.less";
//@import "base/trigger/trigger.selecttext.less";
//widget //@import "base/trigger/trigger.selecttextsmall.less";
@import "widget/date/trigger.date.less"; //@import "base/view/popover.less";
@import "widget/downlist/popup.downlist.less"; //@import "base/view/popupview.less";
@import "widget/dynamicdatecombo/dynamicdatepopup.less"; //
@import "widget/dynamicdatecombo/dynamicdatetime.combo.less"; ////widget
@import "widget/dynamicdatecombo/dynamicdatetimepopup.less"; //@import "widget/date/trigger.date.less";
@import "widget/interactivearrangement/interactivearrangement.less"; //@import "widget/downlist/popup.downlist.less";
@import "widget/intervalslider/intervalslider.label.less"; //@import "widget/dynamicdatecombo/dynamicdatepopup.less";
@import "widget/intervalslider/intervalslider.less"; //@import "widget/dynamicdatecombo/dynamicdatetime.combo.less";
@import "widget/month/trigger.month.less"; //@import "widget/dynamicdatecombo/dynamicdatetimepopup.less";
@import "widget/multilayerselecttree/multilayerselecttree.combo.less"; //@import "widget/interactivearrangement/interactivearrangement.less";
@import "widget/multilayerselecttree/multilayerselecttree.leveltree.less"; //@import "widget/intervalslider/intervalslider.label.less";
@import "widget/multilayersingletree/multilayersingletree.combo.less"; //@import "widget/intervalslider/intervalslider.less";
@import "widget/multilayersingletree/multilayersingletree.leveltree.less"; //@import "widget/month/trigger.month.less";
@import "widget/multiselect/multiselect.combo.less"; //@import "widget/multilayerselecttree/multilayerselecttree.combo.less";
@import "widget/multiselect/multiselect.insert.combo.less"; //@import "widget/multilayerselecttree/multilayerselecttree.leveltree.less";
@import "widget/multiselect/check/multiselect.check.pane.less"; //@import "widget/multilayersingletree/multilayersingletree.combo.less";
@import "widget/multiselect/search/multiselect.search.pane.less"; //@import "widget/multilayersingletree/multilayersingletree.leveltree.less";
@import "widget/multiselect/trigger/button.checkselected.less"; //@import "widget/multiselect/multiselect.combo.less";
@import "widget/multistringlist/multistringlist.insert.less"; //@import "widget/multiselect/multiselect.insert.combo.less";
@import "widget/multistringlist/multistringlist.less"; //@import "widget/multiselect/check/multiselect.check.pane.less";
@import "widget/multitree/multi.tree.combo.less"; //@import "widget/multiselect/search/multiselect.search.pane.less";
@import "widget/multitree/popup.multi.tree.less"; //@import "widget/multiselect/trigger/button.checkselected.less";
@import "widget/multitree/check/multi.tree.check.pane.less"; //@import "widget/multistringlist/multistringlist.insert.less";
@import "widget/multitree/trigger/multi.tree.button.checkselected.less"; //@import "widget/multistringlist/multistringlist.less";
@import "widget/numbereditor/number.editor.less"; //@import "widget/multitree/multi.tree.combo.less";
@import "widget/numberinterval/numberinterval.less"; //@import "widget/multitree/popup.multi.tree.less";
@import "widget/quarter/trigger.quarter.less"; //@import "widget/multitree/check/multi.tree.check.pane.less";
@import "widget/searchmultiselect/searchmultiselect.less"; //@import "widget/multitree/trigger/multi.tree.button.checkselected.less";
@import "widget/singleselect/singleselect.combo.less"; //@import "widget/numbereditor/number.editor.less";
@import "widget/singleselect/search/singleselect.search.pane.less"; //@import "widget/numberinterval/numberinterval.less";
@import "widget/singleslider/singlelider.label.less"; //@import "widget/quarter/trigger.quarter.less";
@import "widget/singleslider/singlelider.normal.less"; //@import "widget/searchmultiselect/searchmultiselect.less";
@import "widget/singleslider/singleslider.less"; //@import "widget/singleselect/singleselect.combo.less";
@import "widget/singleslider/slider/widget.slider.less"; //@import "widget/singleselect/search/singleselect.search.pane.less";
@import "widget/singleslider/track/widget.track.less"; //@import "widget/singleslider/singlelider.label.less";
@import "widget/timecombo/timecombo.less"; //@import "widget/singleslider/singlelider.normal.less";
@import "widget/timeinterval/dateinterval.less"; //@import "widget/singleslider/singleslider.less";
@import "widget/timeinterval/timeinterval.less"; //@import "widget/singleslider/slider/widget.slider.less";
@import "widget/year/popup.year.less"; //@import "widget/singleslider/track/widget.track.less";
@import "widget/year/trigger.year.less"; //@import "widget/timecombo/timecombo.less";
@import "widget/yearinterval/yearinterval.less"; //@import "widget/timeinterval/dateinterval.less";
@import "widget/yearmonth/popup.yearmonth.less"; //@import "widget/timeinterval/timeinterval.less";
@import "widget/yearmonthinterval/yearmonthinterval.less"; //@import "widget/year/popup.year.less";
@import "widget/yearquarter/popup.yearquarter.less"; //@import "widget/year/trigger.year.less";
@import "widget/yearquarterinterval/yearquarterinterval.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/colors-modern";
@import "lib/theme-modern"; @import "lib/theme-modern";

78
src/less/motion.less
Unescape View File

@ -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;
}
Write Preview
Loading…
Cancel
Save