first commit
This commit is contained in:
rayd1o
68
frontend/node_modules/antd/lib/float-button/style/index.d.ts
generated
vendored
Normal file
68
frontend/node_modules/antd/lib/float-button/style/index.d.ts
generated
vendored
Normal file
@@ -0,0 +1,68 @@
|
||||
import type { FullToken, GetDefaultToken } from '../../theme/internal';
|
||||
/** Component only token. Which will handle additional calculation of alias token */
|
||||
export interface ComponentToken {
|
||||
}
|
||||
/**
|
||||
* @desc FloatButton 组件的 Token
|
||||
* @descEN Token for FloatButton component
|
||||
*/
|
||||
export type FloatButtonToken = FullToken<'FloatButton'> & {
|
||||
/**
|
||||
* @desc FloatButton 颜色
|
||||
* @descEN Color of FloatButton
|
||||
*/
|
||||
floatButtonColor: string;
|
||||
/**
|
||||
* @desc FloatButton 背景颜色
|
||||
* @descEN Background color of FloatButton
|
||||
*/
|
||||
floatButtonBackgroundColor: string;
|
||||
/**
|
||||
* @desc FloatButton 悬停背景颜色
|
||||
* @descEN Hover background color of FloatButton
|
||||
*/
|
||||
floatButtonHoverBackgroundColor: string;
|
||||
/**
|
||||
* @desc FloatButton 字体大小
|
||||
* @descEN Font size of FloatButton
|
||||
*/
|
||||
floatButtonFontSize: number;
|
||||
/**
|
||||
* @desc FloatButton 尺寸
|
||||
* @descEN Size of FloatButton
|
||||
*/
|
||||
floatButtonSize: number;
|
||||
/**
|
||||
* @desc FloatButton 图标尺寸
|
||||
* @descEN Icon size of FloatButton
|
||||
*/
|
||||
floatButtonIconSize: number | string;
|
||||
/**
|
||||
* @desc FloatButton 主体尺寸
|
||||
* @descEN Body size of FloatButton
|
||||
*/
|
||||
floatButtonBodySize: number | string;
|
||||
/**
|
||||
* @desc FloatButton 主体内间距
|
||||
* @descEN Body padding of FloatButton
|
||||
*/
|
||||
floatButtonBodyPadding: number;
|
||||
/**
|
||||
* @desc 徽标偏移量
|
||||
* @descEN Offset of badge
|
||||
*/
|
||||
badgeOffset: number | string;
|
||||
/**
|
||||
* @desc FloatButton 底部内边距
|
||||
* @descEN Bottom inset of FloatButton
|
||||
*/
|
||||
floatButtonInsetBlockEnd: number;
|
||||
/**
|
||||
* @desc FloatButton 右侧内边距
|
||||
* @descEN Right inset of FloatButton
|
||||
*/
|
||||
floatButtonInsetInlineEnd: number;
|
||||
};
|
||||
export declare const prepareComponentToken: GetDefaultToken<'FloatButton'>;
|
||||
declare const _default: (prefixCls: string, rootCls?: string) => readonly [(node: React.ReactElement) => React.ReactElement, string, string];
|
||||
export default _default;
|
||||
405
frontend/node_modules/antd/lib/float-button/style/index.js
generated
vendored
Normal file
405
frontend/node_modules/antd/lib/float-button/style/index.js
generated
vendored
Normal file
@@ -0,0 +1,405 @@
|
||||
"use strict";
|
||||
|
||||
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
|
||||
Object.defineProperty(exports, "__esModule", {
|
||||
value: true
|
||||
});
|
||||
exports.prepareComponentToken = exports.default = void 0;
|
||||
var _cssinjs = require("@ant-design/cssinjs");
|
||||
var _style = require("../../style");
|
||||
var _fade = require("../../style/motion/fade");
|
||||
var _internal = require("../../theme/internal");
|
||||
var _util = _interopRequireDefault(require("../util"));
|
||||
var _keyframes = _interopRequireDefault(require("./keyframes"));
|
||||
// ============================== Group ==============================
|
||||
const floatButtonGroupStyle = token => {
|
||||
const {
|
||||
antCls,
|
||||
componentCls,
|
||||
floatButtonSize,
|
||||
margin,
|
||||
borderRadiusLG,
|
||||
borderRadiusSM,
|
||||
badgeOffset,
|
||||
floatButtonBodyPadding,
|
||||
zIndexPopupBase,
|
||||
calc
|
||||
} = token;
|
||||
const groupPrefixCls = `${componentCls}-group`;
|
||||
return {
|
||||
[groupPrefixCls]: Object.assign(Object.assign({}, (0, _style.resetComponent)(token)), {
|
||||
zIndex: zIndexPopupBase,
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
border: 'none',
|
||||
position: 'fixed',
|
||||
height: 'auto',
|
||||
boxShadow: 'none',
|
||||
minWidth: floatButtonSize,
|
||||
minHeight: floatButtonSize,
|
||||
insetInlineEnd: token.floatButtonInsetInlineEnd,
|
||||
bottom: token.floatButtonInsetBlockEnd,
|
||||
borderRadius: borderRadiusLG,
|
||||
[`${groupPrefixCls}-wrap`]: {
|
||||
zIndex: -1,
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
position: 'absolute'
|
||||
},
|
||||
[`&${groupPrefixCls}-rtl`]: {
|
||||
direction: 'rtl'
|
||||
},
|
||||
[componentCls]: {
|
||||
position: 'static'
|
||||
}
|
||||
}),
|
||||
[`${groupPrefixCls}-top > ${groupPrefixCls}-wrap`]: {
|
||||
flexDirection: 'column',
|
||||
top: 'auto',
|
||||
bottom: calc(floatButtonSize).add(margin).equal(),
|
||||
'&::after': {
|
||||
content: '""',
|
||||
position: 'absolute',
|
||||
width: '100%',
|
||||
height: margin,
|
||||
bottom: calc(margin).mul(-1).equal()
|
||||
}
|
||||
},
|
||||
[`${groupPrefixCls}-bottom > ${groupPrefixCls}-wrap`]: {
|
||||
flexDirection: 'column',
|
||||
top: calc(floatButtonSize).add(margin).equal(),
|
||||
bottom: 'auto',
|
||||
'&::after': {
|
||||
content: '""',
|
||||
position: 'absolute',
|
||||
width: '100%',
|
||||
height: margin,
|
||||
top: calc(margin).mul(-1).equal()
|
||||
}
|
||||
},
|
||||
[`${groupPrefixCls}-right > ${groupPrefixCls}-wrap`]: {
|
||||
flexDirection: 'row',
|
||||
left: {
|
||||
_skip_check_: true,
|
||||
value: calc(floatButtonSize).add(margin).equal()
|
||||
},
|
||||
right: {
|
||||
_skip_check_: true,
|
||||
value: 'auto'
|
||||
},
|
||||
'&::after': {
|
||||
content: '""',
|
||||
position: 'absolute',
|
||||
width: margin,
|
||||
height: '100%',
|
||||
left: {
|
||||
_skip_check_: true,
|
||||
value: calc(margin).mul(-1).equal()
|
||||
}
|
||||
}
|
||||
},
|
||||
[`${groupPrefixCls}-left > ${groupPrefixCls}-wrap`]: {
|
||||
flexDirection: 'row',
|
||||
left: {
|
||||
_skip_check_: true,
|
||||
value: 'auto'
|
||||
},
|
||||
right: {
|
||||
_skip_check_: true,
|
||||
value: calc(floatButtonSize).add(margin).equal()
|
||||
},
|
||||
'&::after': {
|
||||
content: '""',
|
||||
position: 'absolute',
|
||||
width: margin,
|
||||
height: '100%',
|
||||
right: {
|
||||
_skip_check_: true,
|
||||
value: calc(margin).mul(-1).equal()
|
||||
}
|
||||
}
|
||||
},
|
||||
[`${groupPrefixCls}-circle`]: {
|
||||
gap: margin,
|
||||
[`${groupPrefixCls}-wrap`]: {
|
||||
gap: margin
|
||||
}
|
||||
},
|
||||
[`${groupPrefixCls}-square`]: {
|
||||
[`${componentCls}-square`]: {
|
||||
padding: 0,
|
||||
borderRadius: 0,
|
||||
[`&${groupPrefixCls}-trigger`]: {
|
||||
borderRadius: borderRadiusLG
|
||||
},
|
||||
'&:first-child': {
|
||||
borderStartStartRadius: borderRadiusLG,
|
||||
borderStartEndRadius: borderRadiusLG
|
||||
},
|
||||
'&:last-child': {
|
||||
borderEndStartRadius: borderRadiusLG,
|
||||
borderEndEndRadius: borderRadiusLG
|
||||
},
|
||||
'&:not(:last-child)': {
|
||||
borderBottom: `${(0, _cssinjs.unit)(token.lineWidth)} ${token.lineType} ${token.colorSplit}`
|
||||
},
|
||||
[`${antCls}-badge`]: {
|
||||
[`${antCls}-badge-count`]: {
|
||||
top: calc(calc(floatButtonBodyPadding).add(badgeOffset)).mul(-1).equal(),
|
||||
insetInlineEnd: calc(calc(floatButtonBodyPadding).add(badgeOffset)).mul(-1).equal()
|
||||
}
|
||||
}
|
||||
},
|
||||
[`${groupPrefixCls}-wrap`]: {
|
||||
borderRadius: borderRadiusLG,
|
||||
boxShadow: token.boxShadowSecondary,
|
||||
[`${componentCls}-square`]: {
|
||||
boxShadow: 'none',
|
||||
borderRadius: 0,
|
||||
padding: floatButtonBodyPadding,
|
||||
[`${componentCls}-body`]: {
|
||||
width: token.floatButtonBodySize,
|
||||
height: token.floatButtonBodySize,
|
||||
borderRadius: borderRadiusSM
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
[`${groupPrefixCls}-top > ${groupPrefixCls}-wrap, ${groupPrefixCls}-bottom > ${groupPrefixCls}-wrap`]: {
|
||||
[`> ${componentCls}-square`]: {
|
||||
'&:first-child': {
|
||||
borderStartStartRadius: borderRadiusLG,
|
||||
borderStartEndRadius: borderRadiusLG
|
||||
},
|
||||
'&:last-child': {
|
||||
borderEndStartRadius: borderRadiusLG,
|
||||
borderEndEndRadius: borderRadiusLG
|
||||
},
|
||||
'&:not(:last-child)': {
|
||||
borderBottom: `${(0, _cssinjs.unit)(token.lineWidth)} ${token.lineType} ${token.colorSplit}`
|
||||
}
|
||||
}
|
||||
},
|
||||
[`${groupPrefixCls}-left > ${groupPrefixCls}-wrap, ${groupPrefixCls}-right > ${groupPrefixCls}-wrap`]: {
|
||||
[`> ${componentCls}-square`]: {
|
||||
'&:first-child': {
|
||||
borderStartStartRadius: borderRadiusLG,
|
||||
borderEndStartRadius: borderRadiusLG
|
||||
},
|
||||
'&:last-child': {
|
||||
borderStartEndRadius: borderRadiusLG,
|
||||
borderEndEndRadius: borderRadiusLG
|
||||
},
|
||||
'&:not(:last-child)': {
|
||||
borderBottom: 'none',
|
||||
borderInlineEnd: `${(0, _cssinjs.unit)(token.lineWidth)} ${token.lineType} ${token.colorSplit}`
|
||||
}
|
||||
}
|
||||
},
|
||||
[`${groupPrefixCls}-circle-shadow`]: {
|
||||
boxShadow: 'none'
|
||||
},
|
||||
[`${groupPrefixCls}-square-shadow`]: {
|
||||
boxShadow: token.boxShadowSecondary,
|
||||
[`${componentCls}-square`]: {
|
||||
boxShadow: 'none',
|
||||
padding: floatButtonBodyPadding,
|
||||
[`${componentCls}-body`]: {
|
||||
width: token.floatButtonBodySize,
|
||||
height: token.floatButtonBodySize,
|
||||
borderRadius: borderRadiusSM
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
};
|
||||
// ============================== Shared ==============================
|
||||
const sharedFloatButtonStyle = token => {
|
||||
const {
|
||||
antCls,
|
||||
componentCls,
|
||||
floatButtonBodyPadding,
|
||||
floatButtonIconSize,
|
||||
floatButtonSize,
|
||||
borderRadiusLG,
|
||||
badgeOffset,
|
||||
dotOffsetInSquare,
|
||||
dotOffsetInCircle,
|
||||
zIndexPopupBase,
|
||||
calc
|
||||
} = token;
|
||||
return {
|
||||
[componentCls]: Object.assign(Object.assign({}, (0, _style.resetComponent)(token)), {
|
||||
border: 'none',
|
||||
position: 'fixed',
|
||||
cursor: 'pointer',
|
||||
zIndex: zIndexPopupBase,
|
||||
// Do not remove the 'display: block' here.
|
||||
// Deleting it will cause marginBottom to become ineffective.
|
||||
// Ref: https://github.com/ant-design/ant-design/issues/44700
|
||||
display: 'block',
|
||||
width: floatButtonSize,
|
||||
height: floatButtonSize,
|
||||
insetInlineEnd: token.floatButtonInsetInlineEnd,
|
||||
bottom: token.floatButtonInsetBlockEnd,
|
||||
boxShadow: token.boxShadowSecondary,
|
||||
// Pure Panel
|
||||
'&-pure': {
|
||||
position: 'relative',
|
||||
inset: 'auto'
|
||||
},
|
||||
'&:empty': {
|
||||
display: 'none'
|
||||
},
|
||||
[`${antCls}-badge`]: {
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
[`${antCls}-badge-count`]: {
|
||||
transform: 'translate(0, 0)',
|
||||
transformOrigin: 'center',
|
||||
top: calc(badgeOffset).mul(-1).equal(),
|
||||
insetInlineEnd: calc(badgeOffset).mul(-1).equal()
|
||||
}
|
||||
},
|
||||
[`${componentCls}-body`]: {
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
transition: `all ${token.motionDurationMid}`,
|
||||
[`${componentCls}-content`]: {
|
||||
overflow: 'hidden',
|
||||
textAlign: 'center',
|
||||
minHeight: floatButtonSize,
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
padding: `${(0, _cssinjs.unit)(calc(floatButtonBodyPadding).div(2).equal())} ${(0, _cssinjs.unit)(floatButtonBodyPadding)}`,
|
||||
[`${componentCls}-icon`]: {
|
||||
textAlign: 'center',
|
||||
margin: 'auto',
|
||||
width: floatButtonIconSize,
|
||||
fontSize: floatButtonIconSize,
|
||||
lineHeight: 1
|
||||
}
|
||||
}
|
||||
}
|
||||
}),
|
||||
[`${componentCls}-rtl`]: {
|
||||
direction: 'rtl'
|
||||
},
|
||||
[`${componentCls}-circle`]: {
|
||||
height: floatButtonSize,
|
||||
borderRadius: '50%',
|
||||
[`${antCls}-badge`]: {
|
||||
[`${antCls}-badge-dot`]: {
|
||||
top: dotOffsetInCircle,
|
||||
insetInlineEnd: dotOffsetInCircle
|
||||
}
|
||||
},
|
||||
[`${componentCls}-body`]: {
|
||||
borderRadius: '50%'
|
||||
}
|
||||
},
|
||||
[`${componentCls}-square`]: {
|
||||
height: 'auto',
|
||||
minHeight: floatButtonSize,
|
||||
borderRadius: borderRadiusLG,
|
||||
[`${antCls}-badge`]: {
|
||||
[`${antCls}-badge-dot`]: {
|
||||
top: dotOffsetInSquare,
|
||||
insetInlineEnd: dotOffsetInSquare
|
||||
}
|
||||
},
|
||||
[`${componentCls}-body`]: {
|
||||
height: 'auto',
|
||||
borderRadius: borderRadiusLG
|
||||
}
|
||||
},
|
||||
[`${componentCls}-default`]: {
|
||||
backgroundColor: token.floatButtonBackgroundColor,
|
||||
transition: `background-color ${token.motionDurationMid}`,
|
||||
[`${componentCls}-body`]: {
|
||||
backgroundColor: token.floatButtonBackgroundColor,
|
||||
transition: `background-color ${token.motionDurationMid}`,
|
||||
'&:hover': {
|
||||
backgroundColor: token.colorFillContent
|
||||
},
|
||||
[`${componentCls}-content`]: {
|
||||
[`${componentCls}-icon`]: {
|
||||
color: token.colorText
|
||||
},
|
||||
[`${componentCls}-description`]: {
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
lineHeight: (0, _cssinjs.unit)(token.fontSizeLG),
|
||||
color: token.colorText,
|
||||
fontSize: token.fontSizeSM
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
[`${componentCls}-primary`]: {
|
||||
backgroundColor: token.colorPrimary,
|
||||
[`${componentCls}-body`]: {
|
||||
backgroundColor: token.colorPrimary,
|
||||
transition: `background-color ${token.motionDurationMid}`,
|
||||
'&:hover': {
|
||||
backgroundColor: token.colorPrimaryHover
|
||||
},
|
||||
[`${componentCls}-content`]: {
|
||||
[`${componentCls}-icon`]: {
|
||||
color: token.colorTextLightSolid
|
||||
},
|
||||
[`${componentCls}-description`]: {
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
lineHeight: (0, _cssinjs.unit)(token.fontSizeLG),
|
||||
color: token.colorTextLightSolid,
|
||||
fontSize: token.fontSizeSM
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
};
|
||||
// ============================== Export ==============================
|
||||
const prepareComponentToken = token => ({
|
||||
dotOffsetInCircle: (0, _util.default)(token.controlHeightLG / 2),
|
||||
dotOffsetInSquare: (0, _util.default)(token.borderRadiusLG)
|
||||
});
|
||||
exports.prepareComponentToken = prepareComponentToken;
|
||||
var _default = exports.default = (0, _internal.genStyleHooks)('FloatButton', token => {
|
||||
const {
|
||||
colorTextLightSolid,
|
||||
colorBgElevated,
|
||||
controlHeightLG,
|
||||
marginXXL,
|
||||
marginLG,
|
||||
fontSize,
|
||||
fontSizeIcon,
|
||||
controlItemBgHover,
|
||||
paddingXXS,
|
||||
calc
|
||||
} = token;
|
||||
const floatButtonToken = (0, _internal.mergeToken)(token, {
|
||||
floatButtonBackgroundColor: colorBgElevated,
|
||||
floatButtonColor: colorTextLightSolid,
|
||||
floatButtonHoverBackgroundColor: controlItemBgHover,
|
||||
floatButtonFontSize: fontSize,
|
||||
floatButtonIconSize: calc(fontSizeIcon).mul(1.5).equal(),
|
||||
floatButtonSize: controlHeightLG,
|
||||
floatButtonInsetBlockEnd: marginXXL,
|
||||
floatButtonInsetInlineEnd: marginLG,
|
||||
floatButtonBodySize: calc(controlHeightLG).sub(calc(paddingXXS).mul(2)).equal(),
|
||||
// 这里的 paddingXXS 是简写，完整逻辑是 (controlHeightLG - (controlHeightLG - paddingXXS * 2)) / 2,
|
||||
floatButtonBodyPadding: paddingXXS,
|
||||
badgeOffset: calc(paddingXXS).mul(1.5).equal()
|
||||
});
|
||||
return [floatButtonGroupStyle(floatButtonToken), sharedFloatButtonStyle(floatButtonToken), (0, _fade.initFadeMotion)(token), (0, _keyframes.default)(floatButtonToken)];
|
||||
}, prepareComponentToken);
|
||||
7
frontend/node_modules/antd/lib/float-button/style/keyframes.d.ts
generated
vendored
Normal file
7
frontend/node_modules/antd/lib/float-button/style/keyframes.d.ts
generated
vendored
Normal file
@@ -0,0 +1,7 @@
|
||||
import type { FloatButtonToken } from '.';
|
||||
declare const floatButtonGroupMotion: (token: FloatButtonToken) => {
|
||||
[x: string]: {
|
||||
[x: string]: import("@ant-design/cssinjs").CSSObject;
|
||||
};
|
||||
}[];
|
||||
export default floatButtonGroupMotion;
|
||||
134
frontend/node_modules/antd/lib/float-button/style/keyframes.js
generated
vendored
Normal file
134
frontend/node_modules/antd/lib/float-button/style/keyframes.js
generated
vendored
Normal file
@@ -0,0 +1,134 @@
|
||||
"use strict";
|
||||
|
||||
Object.defineProperty(exports, "__esModule", {
|
||||
value: true
|
||||
});
|
||||
exports.default = void 0;
|
||||
var _cssinjs = require("@ant-design/cssinjs");
|
||||
var _motion = require("../../style/motion/motion");
|
||||
const floatButtonGroupMotion = token => {
|
||||
const {
|
||||
componentCls,
|
||||
floatButtonSize,
|
||||
motionDurationSlow,
|
||||
motionEaseInOutCirc,
|
||||
calc
|
||||
} = token;
|
||||
const moveTopIn = new _cssinjs.Keyframes('antFloatButtonMoveTopIn', {
|
||||
'0%': {
|
||||
transform: `translate3d(0, ${(0, _cssinjs.unit)(floatButtonSize)}, 0)`,
|
||||
transformOrigin: '0 0',
|
||||
opacity: 0
|
||||
},
|
||||
'100%': {
|
||||
transform: 'translate3d(0, 0, 0)',
|
||||
transformOrigin: '0 0',
|
||||
opacity: 1
|
||||
}
|
||||
});
|
||||
const moveTopOut = new _cssinjs.Keyframes('antFloatButtonMoveTopOut', {
|
||||
'0%': {
|
||||
transform: 'translate3d(0, 0, 0)',
|
||||
transformOrigin: '0 0',
|
||||
opacity: 1
|
||||
},
|
||||
'100%': {
|
||||
transform: `translate3d(0, ${(0, _cssinjs.unit)(floatButtonSize)}, 0)`,
|
||||
transformOrigin: '0 0',
|
||||
opacity: 0
|
||||
}
|
||||
});
|
||||
const moveRightIn = new _cssinjs.Keyframes('antFloatButtonMoveRightIn', {
|
||||
'0%': {
|
||||
transform: `translate3d(${(0, _cssinjs.unit)(calc(floatButtonSize).mul(-1).equal())}, 0, 0)`,
|
||||
transformOrigin: '0 0',
|
||||
opacity: 0
|
||||
},
|
||||
'100%': {
|
||||
transform: 'translate3d(0, 0, 0)',
|
||||
transformOrigin: '0 0',
|
||||
opacity: 1
|
||||
}
|
||||
});
|
||||
const moveRightOut = new _cssinjs.Keyframes('antFloatButtonMoveRightOut', {
|
||||
'0%': {
|
||||
transform: 'translate3d(0, 0, 0)',
|
||||
transformOrigin: '0 0',
|
||||
opacity: 1
|
||||
},
|
||||
'100%': {
|
||||
transform: `translate3d(${(0, _cssinjs.unit)(calc(floatButtonSize).mul(-1).equal())}, 0, 0)`,
|
||||
transformOrigin: '0 0',
|
||||
opacity: 0
|
||||
}
|
||||
});
|
||||
const moveBottomIn = new _cssinjs.Keyframes('antFloatButtonMoveBottomIn', {
|
||||
'0%': {
|
||||
transform: `translate3d(0, ${(0, _cssinjs.unit)(calc(floatButtonSize).mul(-1).equal())}, 0)`,
|
||||
transformOrigin: '0 0',
|
||||
opacity: 0
|
||||
},
|
||||
'100%': {
|
||||
transform: 'translate3d(0, 0, 0)',
|
||||
transformOrigin: '0 0',
|
||||
opacity: 1
|
||||
}
|
||||
});
|
||||
const moveBottomOut = new _cssinjs.Keyframes('antFloatButtonMoveBottomOut', {
|
||||
'0%': {
|
||||
transform: 'translate3d(0, 0, 0)',
|
||||
transformOrigin: '0 0',
|
||||
opacity: 1
|
||||
},
|
||||
'100%': {
|
||||
transform: `translate3d(0, ${(0, _cssinjs.unit)(calc(floatButtonSize).mul(-1).equal())}, 0)`,
|
||||
transformOrigin: '0 0',
|
||||
opacity: 0
|
||||
}
|
||||
});
|
||||
const moveLeftIn = new _cssinjs.Keyframes('antFloatButtonMoveLeftIn', {
|
||||
'0%': {
|
||||
transform: `translate3d(${(0, _cssinjs.unit)(floatButtonSize)}, 0, 0)`,
|
||||
transformOrigin: '0 0',
|
||||
opacity: 0
|
||||
},
|
||||
'100%': {
|
||||
transform: 'translate3d(0, 0, 0)',
|
||||
transformOrigin: '0 0',
|
||||
opacity: 1
|
||||
}
|
||||
});
|
||||
const moveLeftOut = new _cssinjs.Keyframes('antFloatButtonMoveLeftOut', {
|
||||
'0%': {
|
||||
transform: 'translate3d(0, 0, 0)',
|
||||
transformOrigin: '0 0',
|
||||
opacity: 1
|
||||
},
|
||||
'100%': {
|
||||
transform: `translate3d(${(0, _cssinjs.unit)(floatButtonSize)}, 0, 0)`,
|
||||
transformOrigin: '0 0',
|
||||
opacity: 0
|
||||
}
|
||||
});
|
||||
const groupPrefixCls = `${componentCls}-group`;
|
||||
return [{
|
||||
[groupPrefixCls]: {
|
||||
[`&${groupPrefixCls}-top ${groupPrefixCls}-wrap`]: (0, _motion.initMotion)(`${groupPrefixCls}-wrap`, moveTopIn, moveTopOut, motionDurationSlow, true),
|
||||
[`&${groupPrefixCls}-bottom ${groupPrefixCls}-wrap`]: (0, _motion.initMotion)(`${groupPrefixCls}-wrap`, moveBottomIn, moveBottomOut, motionDurationSlow, true),
|
||||
[`&${groupPrefixCls}-left ${groupPrefixCls}-wrap`]: (0, _motion.initMotion)(`${groupPrefixCls}-wrap`, moveLeftIn, moveLeftOut, motionDurationSlow, true),
|
||||
[`&${groupPrefixCls}-right ${groupPrefixCls}-wrap`]: (0, _motion.initMotion)(`${groupPrefixCls}-wrap`, moveRightIn, moveRightOut, motionDurationSlow, true)
|
||||
}
|
||||
}, {
|
||||
[`${groupPrefixCls}-wrap`]: {
|
||||
[`&${groupPrefixCls}-wrap-enter, &${groupPrefixCls}-wrap-appear`]: {
|
||||
opacity: 0,
|
||||
animationTimingFunction: motionEaseInOutCirc
|
||||
},
|
||||
[`&${groupPrefixCls}-wrap-leave`]: {
|
||||
opacity: 1,
|
||||
animationTimingFunction: motionEaseInOutCirc
|
||||
}
|
||||
}
|
||||
}];
|
||||
};
|
||||
var _default = exports.default = floatButtonGroupMotion;
|
||||
Reference in New Issue
Block a user