tangjinzhou
2 years ago
parent
d211688059
commit
73ce708868
@ -1,74 +0,0 @@
|
||||
@import '../../style/themes/index';
|
||||
@import '../../style/mixins/index';
|
||||
|
||||
@message-prefix-cls: ~'@{ant-prefix}-message';
|
||||
|
||||
.@{message-prefix-cls} {
|
||||
.reset-component();
|
||||
|
||||
position: fixed;
|
||||
top: 8px;
|
||||
left: 0;
|
||||
z-index: @zindex-message;
|
||||
width: 100%;
|
||||
pointer-events: none;
|
||||
|
||||
&-notice {
|
||||
padding: 8px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&-notice-content {
|
||||
display: inline-block;
|
||||
padding: @message-notice-content-padding;
|
||||
background: @message-notice-content-bg;
|
||||
border-radius: @border-radius-base;
|
||||
box-shadow: @shadow-2;
|
||||
pointer-events: all;
|
||||
}
|
||||
|
||||
&-success .@{iconfont-css-prefix} {
|
||||
color: @success-color;
|
||||
}
|
||||
|
||||
&-error .@{iconfont-css-prefix} {
|
||||
color: @error-color;
|
||||
}
|
||||
|
||||
&-warning .@{iconfont-css-prefix} {
|
||||
color: @warning-color;
|
||||
}
|
||||
|
||||
&-info .@{iconfont-css-prefix},
|
||||
&-loading .@{iconfont-css-prefix} {
|
||||
color: @info-color;
|
||||
}
|
||||
|
||||
.@{iconfont-css-prefix} {
|
||||
position: relative;
|
||||
top: 1px;
|
||||
margin-right: 8px;
|
||||
font-size: @font-size-lg;
|
||||
}
|
||||
|
||||
&-notice.@{ant-prefix}-move-up-leave.@{ant-prefix}-move-up-leave-active {
|
||||
animation-name: MessageMoveOut;
|
||||
animation-duration: 0.3s;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes MessageMoveOut {
|
||||
0% {
|
||||
max-height: 150px;
|
||||
padding: 8px;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
100% {
|
||||
max-height: 0;
|
||||
padding: 0;
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@import './rtl';
|
||||
@ -0,0 +1,178 @@
|
||||
// deps-lint-skip-all
|
||||
import { Keyframes } from '../../_util/cssinjs';
|
||||
import type { FullToken, GenerateStyle } from '../../theme/internal';
|
||||
import { genComponentStyleHook, mergeToken } from '../../theme/internal';
|
||||
import { resetComponent } from '../../_style';
|
||||
|
||||
/** Component only token. Which will handle additional calculation of alias token */
|
||||
export interface ComponentToken {
|
||||
// Component token here
|
||||
height: number;
|
||||
zIndexPopup: number;
|
||||
}
|
||||
|
||||
interface MessageToken extends FullToken<'Message'> {
|
||||
// Custom token here
|
||||
messageNoticeContentPadding: string;
|
||||
}
|
||||
|
||||
const genMessageStyle: GenerateStyle<MessageToken> = token => {
|
||||
const {
|
||||
componentCls,
|
||||
iconCls,
|
||||
boxShadowSecondary,
|
||||
colorBgElevated,
|
||||
colorSuccess,
|
||||
colorError,
|
||||
colorWarning,
|
||||
colorInfo,
|
||||
fontSizeLG,
|
||||
motionEaseInOutCirc,
|
||||
motionDurationSlow,
|
||||
marginXS,
|
||||
paddingXS,
|
||||
borderRadiusLG,
|
||||
zIndexPopup,
|
||||
// Custom token
|
||||
messageNoticeContentPadding,
|
||||
} = token;
|
||||
|
||||
const messageMoveIn = new Keyframes('MessageMoveIn', {
|
||||
'0%': {
|
||||
padding: 0,
|
||||
transform: 'translateY(-100%)',
|
||||
opacity: 0,
|
||||
},
|
||||
|
||||
'100%': {
|
||||
padding: paddingXS,
|
||||
transform: 'translateY(0)',
|
||||
opacity: 1,
|
||||
},
|
||||
});
|
||||
|
||||
const messageMoveOut = new Keyframes('MessageMoveOut', {
|
||||
'0%': {
|
||||
maxHeight: token.height,
|
||||
padding: paddingXS,
|
||||
opacity: 1,
|
||||
},
|
||||
'100%': {
|
||||
maxHeight: 0,
|
||||
padding: 0,
|
||||
opacity: 0,
|
||||
},
|
||||
});
|
||||
|
||||
return [
|
||||
// ============================ Holder ============================
|
||||
{
|
||||
[componentCls]: {
|
||||
...resetComponent(token),
|
||||
position: 'fixed',
|
||||
top: marginXS,
|
||||
width: '100%',
|
||||
pointerEvents: 'none',
|
||||
zIndex: zIndexPopup,
|
||||
|
||||
[`${componentCls}-move-up`]: {
|
||||
animationFillMode: 'forwards',
|
||||
},
|
||||
[`
|
||||
${componentCls}-move-up-appear,
|
||||
${componentCls}-move-up-enter
|
||||
`]: {
|
||||
animationName: messageMoveIn,
|
||||
animationDuration: motionDurationSlow,
|
||||
animationPlayState: 'paused',
|
||||
animationTimingFunction: motionEaseInOutCirc,
|
||||
},
|
||||
[`
|
||||
${componentCls}-move-up-appear${componentCls}-move-up-appear-active,
|
||||
${componentCls}-move-up-enter${componentCls}-move-up-enter-active
|
||||
`]: {
|
||||
animationPlayState: 'running',
|
||||
},
|
||||
[`${componentCls}-move-up-leave`]: {
|
||||
animationName: messageMoveOut,
|
||||
animationDuration: motionDurationSlow,
|
||||
animationPlayState: 'paused',
|
||||
animationTimingFunction: motionEaseInOutCirc,
|
||||
},
|
||||
[`${componentCls}-move-up-leave${componentCls}-move-up-leave-active`]: {
|
||||
animationPlayState: 'running',
|
||||
},
|
||||
'&-rtl': {
|
||||
direction: 'rtl',
|
||||
span: {
|
||||
direction: 'rtl',
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
// ============================ Notice ============================
|
||||
{
|
||||
[`${componentCls}-notice`]: {
|
||||
padding: paddingXS,
|
||||
textAlign: 'center',
|
||||
|
||||
[iconCls]: {
|
||||
verticalAlign: 'text-bottom',
|
||||
marginInlineEnd: marginXS, // affected by ltr or rtl
|
||||
fontSize: fontSizeLG,
|
||||
},
|
||||
|
||||
[`${componentCls}-notice-content`]: {
|
||||
display: 'inline-block',
|
||||
padding: messageNoticeContentPadding,
|
||||
background: colorBgElevated,
|
||||
borderRadius: borderRadiusLG,
|
||||
boxShadow: boxShadowSecondary,
|
||||
pointerEvents: 'all',
|
||||
},
|
||||
|
||||
[`${componentCls}-success ${iconCls}`]: {
|
||||
color: colorSuccess,
|
||||
},
|
||||
[`${componentCls}-error ${iconCls}`]: {
|
||||
color: colorError,
|
||||
},
|
||||
[`${componentCls}-warning ${iconCls}`]: {
|
||||
color: colorWarning,
|
||||
},
|
||||
[`
|
||||
${componentCls}-info ${iconCls},
|
||||
${componentCls}-loading ${iconCls}`]: {
|
||||
color: colorInfo,
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
// ============================= Pure =============================
|
||||
{
|
||||
[`${componentCls}-notice-pure-panel`]: {
|
||||
padding: 0,
|
||||
textAlign: 'start',
|
||||
},
|
||||
},
|
||||
];
|
||||
};
|
||||
|
||||
// ============================== Export ==============================
|
||||
export default genComponentStyleHook(
|
||||
'Message',
|
||||
token => {
|
||||
// Gen-style functions here
|
||||
const combinedToken = mergeToken<MessageToken>(token, {
|
||||
messageNoticeContentPadding: `${
|
||||
(token.controlHeightLG - token.fontSize * token.lineHeight) / 2
|
||||
}px ${token.paddingSM}px`,
|
||||
});
|
||||
return [genMessageStyle(combinedToken)];
|
||||
},
|
||||
token => ({
|
||||
height: 150,
|
||||
zIndexPopup: token.zIndexPopupBase + 10,
|
||||
}),
|
||||
);
|
||||
@ -1,2 +0,0 @@
|
||||
import '../../style/index.less';
|
||||
import './index.less';
|
||||
@ -1,17 +0,0 @@
|
||||
@import '../../style/themes/index';
|
||||
@import '../../style/mixins/index';
|
||||
|
||||
@message-prefix-cls: ~'@{ant-prefix}-message';
|
||||
|
||||
.@{message-prefix-cls}-rtl {
|
||||
direction: rtl;
|
||||
|
||||
span {
|
||||
direction: rtl;
|
||||
}
|
||||
|
||||
.@{iconfont-css-prefix} {
|
||||
margin-right: 0;
|
||||
margin-left: 8px;
|
||||
}
|
||||
}
|
||||
@ -1,207 +0,0 @@
|
||||
@import '../../style/themes/index';
|
||||
@import '../../style/mixins/index';
|
||||
|
||||
.popover-customize-bg(@notification-prefix-cls, @popover-background);
|
||||
|
||||
@notification-prefix-cls: ~'@{ant-prefix}-notification';
|
||||
@notification-width: 384px;
|
||||
@notification-padding: @notification-padding-vertical @notification-padding-horizontal;
|
||||
@notification-margin-bottom: 16px;
|
||||
@notification-margin-edge: 24px;
|
||||
|
||||
.@{notification-prefix-cls} {
|
||||
.reset-component();
|
||||
|
||||
position: fixed;
|
||||
z-index: @zindex-notification;
|
||||
margin-right: @notification-margin-edge;
|
||||
|
||||
&-close-icon {
|
||||
font-size: @font-size-base;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&-hook-holder {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
&-notice {
|
||||
position: relative;
|
||||
width: @notification-width;
|
||||
max-width: ~'calc(100vw - @{notification-margin-edge} * 2)';
|
||||
margin-bottom: @notification-margin-bottom;
|
||||
margin-left: auto;
|
||||
padding: @notification-padding;
|
||||
overflow: hidden;
|
||||
line-height: @line-height-base;
|
||||
word-wrap: break-word;
|
||||
background: @notification-bg;
|
||||
border-radius: @border-radius-base;
|
||||
box-shadow: @shadow-2;
|
||||
|
||||
.@{notification-prefix-cls}-top &,
|
||||
.@{notification-prefix-cls}-bottom & {
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.@{notification-prefix-cls}-topLeft &,
|
||||
.@{notification-prefix-cls}-bottomLeft & {
|
||||
margin-right: auto;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
&-message {
|
||||
margin-bottom: 8px;
|
||||
color: @heading-color;
|
||||
font-size: @font-size-lg;
|
||||
line-height: 24px;
|
||||
|
||||
// https://github.com/ant-design/ant-design/issues/5846#issuecomment-296244140
|
||||
&-single-line-auto-margin {
|
||||
display: block;
|
||||
width: ~'calc(@{notification-width} - @{notification-padding-horizontal} * 2 - 24px - 48px - 100%)';
|
||||
max-width: 4px;
|
||||
background-color: transparent;
|
||||
pointer-events: none;
|
||||
|
||||
&::before {
|
||||
display: block;
|
||||
content: '';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-description {
|
||||
font-size: @font-size-base;
|
||||
}
|
||||
|
||||
&-closable &-message {
|
||||
padding-right: 24px;
|
||||
}
|
||||
|
||||
&-with-icon &-message {
|
||||
margin-bottom: 4px;
|
||||
margin-left: 48px;
|
||||
font-size: @font-size-lg;
|
||||
}
|
||||
|
||||
&-with-icon &-description {
|
||||
margin-left: 48px;
|
||||
font-size: @font-size-base;
|
||||
}
|
||||
|
||||
// Icon & color style in different selector level
|
||||
// https://github.com/ant-design/ant-design/issues/16503
|
||||
// https://github.com/ant-design/ant-design/issues/15512
|
||||
&-icon {
|
||||
position: absolute;
|
||||
margin-left: 4px;
|
||||
font-size: 24px;
|
||||
line-height: 24px;
|
||||
}
|
||||
|
||||
.@{iconfont-css-prefix}&-icon {
|
||||
&-success {
|
||||
color: @success-color;
|
||||
}
|
||||
|
||||
&-info {
|
||||
color: @info-color;
|
||||
}
|
||||
|
||||
&-warning {
|
||||
color: @warning-color;
|
||||
}
|
||||
|
||||
&-error {
|
||||
color: @error-color;
|
||||
}
|
||||
}
|
||||
|
||||
&-close {
|
||||
position: absolute;
|
||||
top: 16px;
|
||||
right: 22px;
|
||||
color: @text-color-secondary;
|
||||
outline: none;
|
||||
|
||||
&:hover {
|
||||
& when (@theme = dark) {
|
||||
color: fade(@white, 85%);
|
||||
}
|
||||
& when not (@theme = dark) {
|
||||
color: shade(@text-color-secondary, 40%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-btn {
|
||||
float: right;
|
||||
margin-top: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.notification-fade-effect {
|
||||
animation-duration: 0.24s;
|
||||
animation-timing-function: @ease-in-out;
|
||||
animation-fill-mode: both;
|
||||
}
|
||||
|
||||
&-fade-enter,
|
||||
&-fade-appear {
|
||||
.notification-fade-effect();
|
||||
|
||||
opacity: 0;
|
||||
animation-play-state: paused;
|
||||
}
|
||||
|
||||
&-fade-leave {
|
||||
.notification-fade-effect();
|
||||
|
||||
animation-duration: 0.2s;
|
||||
animation-play-state: paused;
|
||||
}
|
||||
|
||||
&-fade-enter&-fade-enter-active,
|
||||
&-fade-appear&-fade-appear-active {
|
||||
animation-name: NotificationFadeIn;
|
||||
animation-play-state: running;
|
||||
}
|
||||
|
||||
&-fade-leave&-fade-leave-active {
|
||||
animation-name: NotificationFadeOut;
|
||||
animation-play-state: running;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes NotificationFadeIn {
|
||||
0% {
|
||||
left: @notification-width;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
100% {
|
||||
left: 0;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes NotificationFadeOut {
|
||||
0% {
|
||||
max-height: 150px;
|
||||
margin-bottom: @notification-margin-bottom;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
100% {
|
||||
max-height: 0;
|
||||
margin-bottom: 0;
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@import './rtl';
|
||||
@import './placement';
|
||||
@ -0,0 +1,287 @@
|
||||
import { Keyframes } from '../../_util/cssinjs';
|
||||
import type { FullToken, GenerateStyle } from '../../theme/internal';
|
||||
import { genComponentStyleHook, mergeToken } from '../../theme/internal';
|
||||
import genNotificationPlacementStyle from './placement';
|
||||
import { resetComponent } from '../../_style';
|
||||
|
||||
/** Component only token. Which will handle additional calculation of alias token */
|
||||
export interface ComponentToken {
|
||||
zIndexPopup: number;
|
||||
width: number;
|
||||
}
|
||||
|
||||
export interface NotificationToken extends FullToken<'Notification'> {
|
||||
notificationBg: string;
|
||||
notificationPaddingVertical: number;
|
||||
notificationPaddingHorizontal: number;
|
||||
notificationPadding: string;
|
||||
notificationMarginBottom: number;
|
||||
notificationMarginEdge: number;
|
||||
animationMaxHeight: number;
|
||||
notificationIconSize: number;
|
||||
notificationCloseButtonSize: number;
|
||||
}
|
||||
|
||||
const genNotificationStyle: GenerateStyle<NotificationToken> = token => {
|
||||
const {
|
||||
iconCls,
|
||||
componentCls, // .ant-notification
|
||||
boxShadowSecondary,
|
||||
fontSizeLG,
|
||||
notificationMarginBottom,
|
||||
borderRadiusLG,
|
||||
colorSuccess,
|
||||
colorInfo,
|
||||
colorWarning,
|
||||
colorError,
|
||||
colorTextHeading,
|
||||
notificationBg,
|
||||
notificationPadding,
|
||||
notificationMarginEdge,
|
||||
motionDurationMid,
|
||||
motionEaseInOut,
|
||||
fontSize,
|
||||
lineHeight,
|
||||
width,
|
||||
notificationIconSize,
|
||||
} = token;
|
||||
|
||||
const noticeCls = `${componentCls}-notice`;
|
||||
|
||||
const notificationFadeIn = new Keyframes('antNotificationFadeIn', {
|
||||
'0%': {
|
||||
left: {
|
||||
_skip_check_: true,
|
||||
value: width,
|
||||
},
|
||||
opacity: 0,
|
||||
},
|
||||
|
||||
'100%': {
|
||||
left: {
|
||||
_skip_check_: true,
|
||||
value: 0,
|
||||
},
|
||||
opacity: 1,
|
||||
},
|
||||
});
|
||||
|
||||
const notificationFadeOut = new Keyframes('antNotificationFadeOut', {
|
||||
'0%': {
|
||||
maxHeight: token.animationMaxHeight,
|
||||
marginBottom: notificationMarginBottom,
|
||||
opacity: 1,
|
||||
},
|
||||
|
||||
'100%': {
|
||||
maxHeight: 0,
|
||||
marginBottom: 0,
|
||||
paddingTop: 0,
|
||||
paddingBottom: 0,
|
||||
opacity: 0,
|
||||
},
|
||||
});
|
||||
|
||||
return [
|
||||
// ============================ Holder ============================
|
||||
{
|
||||
[componentCls]: {
|
||||
...resetComponent(token),
|
||||
|
||||
position: 'fixed',
|
||||
zIndex: token.zIndexPopup,
|
||||
marginInlineEnd: notificationMarginEdge,
|
||||
|
||||
[`${componentCls}-hook-holder`]: {
|
||||
position: 'relative',
|
||||
},
|
||||
|
||||
[`&${componentCls}-top, &${componentCls}-bottom`]: {
|
||||
[`${componentCls}-notice`]: {
|
||||
marginInline: 'auto auto',
|
||||
},
|
||||
},
|
||||
|
||||
[`&${componentCls}-topLeft, &${componentCls}-bottomLeft`]: {
|
||||
[`${componentCls}-notice`]: {
|
||||
marginInlineEnd: 'auto',
|
||||
marginInlineStart: 0,
|
||||
},
|
||||
},
|
||||
|
||||
// animation
|
||||
[`${componentCls}-fade-enter, ${componentCls}-fade-appear`]: {
|
||||
animationDuration: token.motionDurationMid,
|
||||
animationTimingFunction: motionEaseInOut,
|
||||
animationFillMode: 'both',
|
||||
opacity: 0,
|
||||
animationPlayState: 'paused',
|
||||
},
|
||||
|
||||
[`${componentCls}-fade-leave`]: {
|
||||
animationTimingFunction: motionEaseInOut,
|
||||
animationFillMode: 'both',
|
||||
|
||||
animationDuration: motionDurationMid,
|
||||
animationPlayState: 'paused',
|
||||
},
|
||||
|
||||
[`${componentCls}-fade-enter${componentCls}-fade-enter-active, ${componentCls}-fade-appear${componentCls}-fade-appear-active`]:
|
||||
{
|
||||
animationName: notificationFadeIn,
|
||||
animationPlayState: 'running',
|
||||
},
|
||||
|
||||
[`${componentCls}-fade-leave${componentCls}-fade-leave-active`]: {
|
||||
animationName: notificationFadeOut,
|
||||
animationPlayState: 'running',
|
||||
},
|
||||
|
||||
// placement
|
||||
...genNotificationPlacementStyle(token),
|
||||
|
||||
// RTL
|
||||
'&-rtl': {
|
||||
direction: 'rtl',
|
||||
|
||||
[`${componentCls}-notice-btn`]: {
|
||||
float: 'left',
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
// ============================ Notice ============================
|
||||
{
|
||||
[noticeCls]: {
|
||||
position: 'relative',
|
||||
width,
|
||||
maxWidth: `calc(100vw - ${notificationMarginEdge * 2}px)`,
|
||||
marginBottom: notificationMarginBottom,
|
||||
marginInlineStart: 'auto',
|
||||
padding: notificationPadding,
|
||||
overflow: 'hidden',
|
||||
lineHeight,
|
||||
wordWrap: 'break-word',
|
||||
background: notificationBg,
|
||||
borderRadius: borderRadiusLG,
|
||||
boxShadow: boxShadowSecondary,
|
||||
|
||||
[`${componentCls}-close-icon`]: {
|
||||
fontSize,
|
||||
cursor: 'pointer',
|
||||
},
|
||||
|
||||
[`${noticeCls}-message`]: {
|
||||
marginBottom: token.marginXS,
|
||||
color: colorTextHeading,
|
||||
fontSize: fontSizeLG,
|
||||
lineHeight: token.lineHeightLG,
|
||||
},
|
||||
|
||||
[`${noticeCls}-description`]: {
|
||||
fontSize,
|
||||
},
|
||||
|
||||
[`&${noticeCls}-closable ${noticeCls}-message`]: {
|
||||
paddingInlineEnd: token.paddingLG,
|
||||
},
|
||||
|
||||
[`${noticeCls}-with-icon ${noticeCls}-message`]: {
|
||||
marginBottom: token.marginXS,
|
||||
marginInlineStart: token.marginSM + notificationIconSize,
|
||||
fontSize: fontSizeLG,
|
||||
},
|
||||
|
||||
[`${noticeCls}-with-icon ${noticeCls}-description`]: {
|
||||
marginInlineStart: token.marginSM + notificationIconSize,
|
||||
fontSize,
|
||||
},
|
||||
|
||||
// Icon & color style in different selector level
|
||||
// https://github.com/ant-design/ant-design/issues/16503
|
||||
// https://github.com/ant-design/ant-design/issues/15512
|
||||
[`${noticeCls}-icon`]: {
|
||||
position: 'absolute',
|
||||
fontSize: notificationIconSize,
|
||||
lineHeight: 0,
|
||||
|
||||
// icon-font
|
||||
[`&-success${iconCls}`]: {
|
||||
color: colorSuccess,
|
||||
},
|
||||
[`&-info${iconCls}`]: {
|
||||
color: colorInfo,
|
||||
},
|
||||
[`&-warning${iconCls}`]: {
|
||||
color: colorWarning,
|
||||
},
|
||||
[`&-error${iconCls}`]: {
|
||||
color: colorError,
|
||||
},
|
||||
},
|
||||
|
||||
[`${noticeCls}-close`]: {
|
||||
position: 'absolute',
|
||||
top: token.notificationPaddingVertical,
|
||||
insetInlineEnd: token.notificationPaddingHorizontal,
|
||||
color: token.colorIcon,
|
||||
outline: 'none',
|
||||
width: token.notificationCloseButtonSize,
|
||||
height: token.notificationCloseButtonSize,
|
||||
borderRadius: token.borderRadiusSM,
|
||||
transition: `background-color ${token.motionDurationMid}, color ${token.motionDurationMid}`,
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
|
||||
'&:hover': {
|
||||
color: token.colorIconHover,
|
||||
backgroundColor: token.wireframe ? 'transparent' : token.colorFillContent,
|
||||
},
|
||||
},
|
||||
|
||||
[`${noticeCls}-btn`]: {
|
||||
float: 'right',
|
||||
marginTop: token.marginSM,
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
// ============================= Pure =============================
|
||||
{
|
||||
[`${noticeCls}-pure-panel`]: {
|
||||
margin: 0,
|
||||
},
|
||||
},
|
||||
];
|
||||
};
|
||||
|
||||
// ============================== Export ==============================
|
||||
export default genComponentStyleHook(
|
||||
'Notification',
|
||||
token => {
|
||||
const notificationPaddingVertical = token.paddingMD;
|
||||
const notificationPaddingHorizontal = token.paddingLG;
|
||||
|
||||
const notificationToken = mergeToken<NotificationToken>(token, {
|
||||
// default.less variables
|
||||
notificationBg: token.colorBgElevated,
|
||||
notificationPaddingVertical,
|
||||
notificationPaddingHorizontal,
|
||||
// index.less variables
|
||||
notificationPadding: `${token.paddingMD}px ${token.paddingContentHorizontalLG}px`,
|
||||
notificationMarginBottom: token.margin,
|
||||
notificationMarginEdge: token.marginLG,
|
||||
animationMaxHeight: 150,
|
||||
notificationIconSize: token.fontSizeLG * token.lineHeightLG,
|
||||
notificationCloseButtonSize: token.controlHeightLG * 0.55,
|
||||
});
|
||||
|
||||
return [genNotificationStyle(notificationToken)];
|
||||
},
|
||||
token => ({
|
||||
zIndexPopup: token.zIndexPopupBase + 50,
|
||||
width: 384,
|
||||
}),
|
||||
);
|
||||
@ -1,2 +0,0 @@
|
||||
import '../../style/index.less';
|
||||
import './index.less';
|
||||
@ -1,68 +0,0 @@
|
||||
.@{notification-prefix-cls} {
|
||||
&-top,
|
||||
&-bottom {
|
||||
margin-right: 0;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
&-top {
|
||||
.@{notification-prefix-cls}-fade-enter.@{notification-prefix-cls}-fade-enter-active,
|
||||
.@{notification-prefix-cls}-fade-appear.@{notification-prefix-cls}-fade-appear-active {
|
||||
animation-name: NotificationTopFadeIn;
|
||||
}
|
||||
}
|
||||
|
||||
&-bottom {
|
||||
.@{notification-prefix-cls}-fade-enter.@{notification-prefix-cls}-fade-enter-active,
|
||||
.@{notification-prefix-cls}-fade-appear.@{notification-prefix-cls}-fade-appear-active {
|
||||
animation-name: NotificationBottomFadeIn;
|
||||
}
|
||||
}
|
||||
|
||||
&-topLeft,
|
||||
&-bottomLeft {
|
||||
margin-right: 0;
|
||||
margin-left: @notification-margin-edge;
|
||||
|
||||
.@{notification-prefix-cls}-fade-enter.@{notification-prefix-cls}-fade-enter-active,
|
||||
.@{notification-prefix-cls}-fade-appear.@{notification-prefix-cls}-fade-appear-active {
|
||||
animation-name: NotificationLeftFadeIn;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes NotificationTopFadeIn {
|
||||
0% {
|
||||
margin-top: -100%;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
100% {
|
||||
margin-top: 0;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes NotificationBottomFadeIn {
|
||||
0% {
|
||||
margin-bottom: -100%;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
100% {
|
||||
margin-bottom: 0;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes NotificationLeftFadeIn {
|
||||
0% {
|
||||
right: @notification-width;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
100% {
|
||||
right: 0;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,81 @@
|
||||
import type { CSSObject } from '../../_util/cssinjs';
|
||||
import { Keyframes } from '../../_util/cssinjs';
|
||||
import type { NotificationToken } from '.';
|
||||
import type { GenerateStyle } from '../../theme/internal';
|
||||
|
||||
const genNotificationPlacementStyle: GenerateStyle<NotificationToken, CSSObject> = token => {
|
||||
const { componentCls, width, notificationMarginEdge } = token;
|
||||
|
||||
const notificationTopFadeIn = new Keyframes('antNotificationTopFadeIn', {
|
||||
'0%': {
|
||||
marginTop: '-100%',
|
||||
opacity: 0,
|
||||
},
|
||||
|
||||
'100%': {
|
||||
marginTop: 0,
|
||||
opacity: 1,
|
||||
},
|
||||
});
|
||||
|
||||
const notificationBottomFadeIn = new Keyframes('antNotificationBottomFadeIn', {
|
||||
'0%': {
|
||||
marginBottom: '-100%',
|
||||
opacity: 0,
|
||||
},
|
||||
|
||||
'100%': {
|
||||
marginBottom: 0,
|
||||
opacity: 1,
|
||||
},
|
||||
});
|
||||
|
||||
const notificationLeftFadeIn = new Keyframes('antNotificationLeftFadeIn', {
|
||||
'0%': {
|
||||
right: {
|
||||
_skip_check_: true,
|
||||
value: width,
|
||||
},
|
||||
opacity: 0,
|
||||
},
|
||||
|
||||
'100%': {
|
||||
right: {
|
||||
_skip_check_: true,
|
||||
value: 0,
|
||||
},
|
||||
opacity: 1,
|
||||
},
|
||||
});
|
||||
|
||||
return {
|
||||
[`&${componentCls}-top, &${componentCls}-bottom`]: {
|
||||
marginInline: 0,
|
||||
},
|
||||
|
||||
[`&${componentCls}-top`]: {
|
||||
[`${componentCls}-fade-enter${componentCls}-fade-enter-active, ${componentCls}-fade-appear${componentCls}-fade-appear-active`]:
|
||||
{
|
||||
animationName: notificationTopFadeIn,
|
||||
},
|
||||
},
|
||||
|
||||
[`&${componentCls}-bottom`]: {
|
||||
[`${componentCls}-fade-enter${componentCls}-fade-enter-active, ${componentCls}-fade-appear${componentCls}-fade-appear-active`]:
|
||||
{
|
||||
animationName: notificationBottomFadeIn,
|
||||
},
|
||||
},
|
||||
|
||||
[`&${componentCls}-topLeft, &${componentCls}-bottomLeft`]: {
|
||||
marginInlineEnd: 0,
|
||||
marginInlineStart: notificationMarginEdge,
|
||||
|
||||
[`${componentCls}-fade-enter${componentCls}-fade-enter-active, ${componentCls}-fade-appear${componentCls}-fade-appear-active`]:
|
||||
{
|
||||
animationName: notificationLeftFadeIn,
|
||||
},
|
||||
},
|
||||
};
|
||||
};
|
||||
export default genNotificationPlacementStyle;
|
||||
@ -1,53 +0,0 @@
|
||||
@import '../../style/themes/index';
|
||||
@import '../../style/mixins/index';
|
||||
|
||||
@notification-prefix-cls: ~'@{ant-prefix}-notification';
|
||||
|
||||
.@{notification-prefix-cls} {
|
||||
&-rtl {
|
||||
direction: rtl;
|
||||
}
|
||||
|
||||
&-notice {
|
||||
&-closable &-message {
|
||||
.@{notification-prefix-cls}-rtl & {
|
||||
padding-right: 0;
|
||||
padding-left: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
&-with-icon &-message {
|
||||
.@{notification-prefix-cls}-rtl & {
|
||||
margin-right: 48px;
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&-with-icon &-description {
|
||||
.@{notification-prefix-cls}-rtl & {
|
||||
margin-right: 48px;
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&-icon {
|
||||
.@{notification-prefix-cls}-rtl & {
|
||||
margin-right: 4px;
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&-close {
|
||||
.@{notification-prefix-cls}-rtl & {
|
||||
right: auto;
|
||||
left: 22px;
|
||||
}
|
||||
}
|
||||
|
||||
&-btn {
|
||||
.@{notification-prefix-cls}-rtl & {
|
||||
float: left;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
Reference in new issue