@uni-sw/u-design 2.0.4

package/es/components/UModal/style/theme.less

@@ -0,0 +1,23 @@
+//light theme
+@light-u-modal-normal-color: @u-text-color-white;
+@light-u-modal-primary-bg: @u-primary-color;
+@light-u-modal-header-bg: @u-primary-color;
+@light-u-modal-minimize-icon-bg: @u-text-color-white;
+@light-u-modal-content-bg: @u-higher-level-bg;
+@light-u-modal-footer-border-top-color: @u-bg-color;
+@light-u-modal-confirm-title-color: @u-text-color;
+@light-u-modal-confirm-content-color: @u-text-color;
+@light-u-base-modal-content: @u-text-color;
+@light-u-modal-border-color: @u-msg-border-color;
+
+//dark theme
+@dark-u-modal-normal-color: @u-info-color;
+@dark-u-modal-primary-bg: #1682E6;
+@dark-u-modal-header-bg: rgba(22, 130, 230, 0.20);
+@dark-u-modal-minimize-icon-bg: #D4E0FB;
+@dark-u-modal-content-bg: #1E2940;
+@dark-u-modal-footer-border-top-color: @u-text-color;
+@dark-u-modal-confirm-title-color: @u-info-color;
+@dark-u-modal-confirm-content-color: @u-bg-color;
+@dark-u-base-modal-content: @u-second-white;
+@dark-u-modal-border-color: @u-msg-border-color;

package/es/components/UNotification/hooks/useNotification.d.ts

@@ -0,0 +1,7 @@
+import type { NoticeContent as RCNoticeContent, NotificationInstance as RCNotificationInstance } from 'rc-notification/lib/Notification';
+import * as React from 'react';
+import type { ArgsProps, NotificationInstance } from '../index';
+export default function createUseNotification(getNotificationInstance: (args: ArgsProps, callback: (info: {
+    prefixCls: string;
+    instance: RCNotificationInstance;
+}) => void) => void, getRCNoticeProps: (args: ArgsProps, prefixCls: string) => RCNoticeContent): () => readonly [NotificationInstance, React.ReactElement];

package/es/components/UNotification/hooks/useNotification.js

@@ -0,0 +1,55 @@
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
+import useRCNotification from 'rc-notification/lib/useNotification';
+import * as React from 'react';
+import { ConfigConsumer } from "../../UConfigProvider";
+export default function createUseNotification(getNotificationInstance, getRCNoticeProps) {
+  var useNotification = function useNotification() {
+    // We can only get content by render
+    var getPrefixCls;
+    // We create a proxy to handle delay created instance
+    var innerInstance = null;
+    var proxy = {
+      add: function add(noticeProps, holderCallback) {
+        innerInstance === null || innerInstance === void 0 ? void 0 : innerInstance.component.add(noticeProps, holderCallback);
+      }
+    };
+    var _useRCNotification = useRCNotification(proxy),
+      _useRCNotification2 = _slicedToArray(_useRCNotification, 2),
+      hookNotify = _useRCNotification2[0],
+      holder = _useRCNotification2[1];
+    function notify(args) {
+      var customizePrefixCls = args.prefixCls;
+      var mergedPrefixCls = getPrefixCls('notification', customizePrefixCls);
+      getNotificationInstance(Object.assign(Object.assign({}, args), {
+        prefixCls: mergedPrefixCls
+      }), function (_ref) {
+        var prefixCls = _ref.prefixCls,
+          instance = _ref.instance;
+        innerInstance = instance;
+        hookNotify(getRCNoticeProps(args, prefixCls));
+      });
+    }
+    // Fill functions
+    var hookApiRef = React.useRef({});
+    hookApiRef.current.open = notify;
+    ['success', 'info', 'warning', 'error'].forEach(function (type) {
+      hookApiRef.current[type] = function (args) {
+        return hookApiRef.current.open(Object.assign(Object.assign({}, args), {
+          type: type
+        }));
+      };
+    });
+    return [hookApiRef.current, /*#__PURE__*/React.createElement(ConfigConsumer, {
+      key: "holder"
+    }, function (context) {
+      getPrefixCls = context.getPrefixCls;
+      return holder;
+    })];
+  };
+  return useNotification;
+}

package/es/components/UNotification/index.d.ts

@@ -0,0 +1,56 @@
+import * as React from 'react';
+import './style';
+interface DivProps extends React.HTMLProps<HTMLDivElement> {
+    'data-testid'?: string;
+}
+export type NotificationPlacement = 'top' | 'topLeft' | 'topRight' | 'bottom' | 'bottomLeft' | 'bottomRight';
+export type IconType = 'success' | 'info' | 'error' | 'warning';
+export interface ConfigProps {
+    top?: number;
+    bottom?: number;
+    duration?: number;
+    prefixCls?: string;
+    placement?: NotificationPlacement;
+    getContainer?: () => HTMLElement;
+    closeIcon?: React.ReactNode;
+    rtl?: boolean;
+    maxCount?: number;
+    props?: DivProps;
+}
+export interface ArgsProps {
+    message: React.ReactNode;
+    description?: React.ReactNode;
+    btn?: React.ReactNode;
+    key?: string;
+    onClose?: () => void;
+    duration?: number | null;
+    icon?: React.ReactNode;
+    placement?: NotificationPlacement;
+    maxCount?: number;
+    style?: React.CSSProperties;
+    prefixCls?: string;
+    className?: string;
+    readonly type?: IconType;
+    onClick?: () => void;
+    top?: number;
+    bottom?: number;
+    getContainer?: () => HTMLElement;
+    closeIcon?: React.ReactNode;
+    props?: DivProps;
+}
+export interface NotificationInstance {
+    success(args: ArgsProps): void;
+    error(args: ArgsProps): void;
+    info(args: ArgsProps): void;
+    warning(args: ArgsProps): void;
+    open(args: ArgsProps): void;
+}
+export interface NotificationApi extends NotificationInstance {
+    warn(args: ArgsProps): void;
+    close(key: string): void;
+    config(options: ConfigProps): void;
+    destroy(): void;
+    useNotification: () => [NotificationInstance, React.ReactElement];
+}
+declare const _default: NotificationApi;
+export default _default;

package/es/components/UNotification/index.js

@@ -0,0 +1,275 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function _regenerator() { /*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/babel/babel/blob/main/packages/babel-helpers/LICENSE */ var e, t, r = "function" == typeof Symbol ? Symbol : {}, n = r.iterator || "@@iterator", o = r.toStringTag || "@@toStringTag"; function i(r, n, o, i) { var c = n && n.prototype instanceof Generator ? n : Generator, u = Object.create(c.prototype); return _regeneratorDefine2(u, "_invoke", function (r, n, o) { var i, c, u, f = 0, p = o || [], y = !1, G = { p: 0, n: 0, v: e, a: d, f: d.bind(e, 4), d: function d(t, r) { return i = t, c = 0, u = e, G.n = r, a; } }; function d(r, n) { for (c = r, u = n, t = 0; !y && f && !o && t < p.length; t++) { var o, i = p[t], d = G.p, l = i[2]; r > 3 ? (o = l === n) && (u = i[(c = i[4]) ? 5 : (c = 3, 3)], i[4] = i[5] = e) : i[0] <= d && ((o = r < 2 && d < i[1]) ? (c = 0, G.v = n, G.n = i[1]) : d < l && (o = r < 3 || i[0] > n || n > l) && (i[4] = r, i[5] = n, G.n = l, c = 0)); } if (o || r > 1) return a; throw y = !0, n; } return function (o, p, l) { if (f > 1) throw TypeError("Generator is already running"); for (y && 1 === p && d(p, l), c = p, u = l; (t = c < 2 ? e : u) || !y;) { i || (c ? c < 3 ? (c > 1 && (G.n = -1), d(c, u)) : G.n = u : G.v = u); try { if (f = 2, i) { if (c || (o = "next"), t = i[o]) { if (!(t = t.call(i, u))) throw TypeError("iterator result is not an object"); if (!t.done) return t; u = t.value, c < 2 && (c = 0); } else 1 === c && (t = i.return) && t.call(i), c < 2 && (u = TypeError("The iterator does not provide a '" + o + "' method"), c = 1); i = e; } else if ((t = (y = G.n < 0) ? u : r.call(n, G)) !== a) break; } catch (t) { i = e, c = 1, u = t; } finally { f = 1; } } return { value: t, done: y }; }; }(r, o, i), !0), u; } var a = {}; function Generator() {} function GeneratorFunction() {} function GeneratorFunctionPrototype() {} t = Object.getPrototypeOf; var c = [][n] ? t(t([][n]())) : (_regeneratorDefine2(t = {}, n, function () { return this; }), t), u = GeneratorFunctionPrototype.prototype = Generator.prototype = Object.create(c); function f(e) { return Object.setPrototypeOf ? Object.setPrototypeOf(e, GeneratorFunctionPrototype) : (e.__proto__ = GeneratorFunctionPrototype, _regeneratorDefine2(e, o, "GeneratorFunction")), e.prototype = Object.create(u), e; } return GeneratorFunction.prototype = GeneratorFunctionPrototype, _regeneratorDefine2(u, "constructor", GeneratorFunctionPrototype), _regeneratorDefine2(GeneratorFunctionPrototype, "constructor", GeneratorFunction), GeneratorFunction.displayName = "GeneratorFunction", _regeneratorDefine2(GeneratorFunctionPrototype, o, "GeneratorFunction"), _regeneratorDefine2(u), _regeneratorDefine2(u, o, "Generator"), _regeneratorDefine2(u, n, function () { return this; }), _regeneratorDefine2(u, "toString", function () { return "[object Generator]"; }), (_regenerator = function _regenerator() { return { w: i, m: f }; })(); }
+function _regeneratorDefine2(e, r, n, t) { var i = Object.defineProperty; try { i({}, "", {}); } catch (e) { i = 0; } _regeneratorDefine2 = function _regeneratorDefine(e, r, n, t) { function o(r, n) { _regeneratorDefine2(e, r, function (e) { return this._invoke(r, n, e); }); } r ? i ? i(e, r, { value: n, enumerable: !t, configurable: !t, writable: !t }) : e[r] = n : (o("next", 0), o("throw", 1), o("return", 2)); }, _regeneratorDefine2(e, r, n, t); }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+import { __awaiter } from "tslib";
+import CheckCircleOutlined from '@ant-design/icons/CheckCircleOutlined';
+import CloseCircleOutlined from '@ant-design/icons/CloseCircleOutlined';
+import CloseOutlined from '@ant-design/icons/CloseOutlined';
+import ExclamationCircleOutlined from '@ant-design/icons/ExclamationCircleOutlined';
+import InfoCircleOutlined from '@ant-design/icons/InfoCircleOutlined';
+import classNames from 'classnames';
+import Notification from 'rc-notification';
+import * as React from 'react';
+import ConfigProvider, { globalConfig } from "../UConfigProvider";
+import createUseNotification from "./hooks/useNotification";
+import "./style";
+var notificationInstance = {};
+var defaultDuration = 4.5;
+var defaultTop = 24;
+var defaultBottom = 24;
+var defaultPrefixCls = '';
+var defaultPlacement = 'topRight';
+var defaultGetContainer;
+var defaultCloseIcon;
+var rtl = false;
+var maxCount;
+function setNotificationConfig(options) {
+  var duration = options.duration,
+    placement = options.placement,
+    bottom = options.bottom,
+    top = options.top,
+    getContainer = options.getContainer,
+    closeIcon = options.closeIcon,
+    prefixCls = options.prefixCls;
+  if (prefixCls !== undefined) {
+    defaultPrefixCls = prefixCls;
+  }
+  if (duration !== undefined) {
+    defaultDuration = duration;
+  }
+  if (placement !== undefined) {
+    defaultPlacement = placement;
+  } else if (options.rtl) {
+    defaultPlacement = 'topLeft';
+  }
+  if (bottom !== undefined) {
+    defaultBottom = bottom;
+  }
+  if (top !== undefined) {
+    defaultTop = top;
+  }
+  if (getContainer !== undefined) {
+    defaultGetContainer = getContainer;
+  }
+  if (closeIcon !== undefined) {
+    defaultCloseIcon = closeIcon;
+  }
+  if (options.rtl !== undefined) {
+    rtl = options.rtl;
+  }
+  if (options.maxCount !== undefined) {
+    maxCount = options.maxCount;
+  }
+}
+function getPlacementStyle(placement) {
+  var top = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : defaultTop;
+  var bottom = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : defaultBottom;
+  var style;
+  switch (placement) {
+    case 'top':
+      style = {
+        left: '50%',
+        transform: 'translateX(-50%)',
+        right: 'auto',
+        top: top,
+        bottom: 'auto'
+      };
+      break;
+    case 'topLeft':
+      style = {
+        left: 0,
+        top: top,
+        bottom: 'auto'
+      };
+      break;
+    case 'topRight':
+      style = {
+        right: 0,
+        top: top,
+        bottom: 'auto'
+      };
+      break;
+    case 'bottom':
+      style = {
+        left: '50%',
+        transform: 'translateX(-50%)',
+        right: 'auto',
+        top: 'auto',
+        bottom: bottom
+      };
+      break;
+    case 'bottomLeft':
+      style = {
+        left: 0,
+        top: 'auto',
+        bottom: bottom
+      };
+      break;
+    default:
+      style = {
+        right: 0,
+        top: 'auto',
+        bottom: bottom
+      };
+      break;
+  }
+  return style;
+}
+function getNotificationInstance(args, callback) {
+  var _args$placement = args.placement,
+    placement = _args$placement === void 0 ? defaultPlacement : _args$placement,
+    top = args.top,
+    bottom = args.bottom,
+    _args$getContainer = args.getContainer,
+    getContainer = _args$getContainer === void 0 ? defaultGetContainer : _args$getContainer,
+    customizePrefixCls = args.prefixCls;
+  var _globalConfig = globalConfig(),
+    getPrefixCls = _globalConfig.getPrefixCls,
+    getIconPrefixCls = _globalConfig.getIconPrefixCls;
+  var prefixCls = getPrefixCls('notification', customizePrefixCls || defaultPrefixCls);
+  var iconPrefixCls = getIconPrefixCls();
+  var cacheKey = "".concat(prefixCls, "-").concat(placement);
+  var cacheInstance = notificationInstance[cacheKey];
+  if (cacheInstance) {
+    Promise.resolve(cacheInstance).then(function (instance) {
+      callback({
+        prefixCls: "".concat(prefixCls, "-notice"),
+        iconPrefixCls: iconPrefixCls,
+        instance: instance
+      });
+    });
+    return;
+  }
+  var notificationClass = classNames("".concat(prefixCls, "-").concat(placement), _defineProperty({}, "".concat(prefixCls, "-rtl"), rtl === true));
+  notificationInstance[cacheKey] = new Promise(function (resolve) {
+    Notification.newInstance({
+      prefixCls: prefixCls,
+      className: notificationClass,
+      style: getPlacementStyle(placement, top, bottom),
+      getContainer: getContainer,
+      maxCount: maxCount
+    }, function (notification) {
+      resolve(notification);
+      callback({
+        prefixCls: "".concat(prefixCls, "-notice"),
+        iconPrefixCls: iconPrefixCls,
+        instance: notification
+      });
+    });
+  });
+}
+var typeToIcon = {
+  success: CheckCircleOutlined,
+  info: InfoCircleOutlined,
+  error: CloseCircleOutlined,
+  warning: ExclamationCircleOutlined
+};
+function getRCNoticeProps(args, prefixCls, iconPrefixCls) {
+  var durationArg = args.duration,
+    icon = args.icon,
+    type = args.type,
+    description = args.description,
+    message = args.message,
+    btn = args.btn,
+    onClose = args.onClose,
+    onClick = args.onClick,
+    key = args.key,
+    style = args.style,
+    className = args.className,
+    _args$closeIcon = args.closeIcon,
+    closeIcon = _args$closeIcon === void 0 ? defaultCloseIcon : _args$closeIcon,
+    props = args.props;
+  var duration = durationArg === undefined ? defaultDuration : durationArg;
+  var iconNode = null;
+  if (icon) {
+    iconNode = /*#__PURE__*/React.createElement("span", {
+      className: "".concat(prefixCls, "-icon")
+    }, args.icon);
+  } else if (type) {
+    iconNode = /*#__PURE__*/React.createElement(typeToIcon[type] || null, {
+      className: "".concat(prefixCls, "-icon ").concat(prefixCls, "-icon-").concat(type)
+    });
+  }
+  var closeIconToRender = /*#__PURE__*/React.createElement("span", {
+    className: "".concat(prefixCls, "-close-x")
+  }, closeIcon || /*#__PURE__*/React.createElement(CloseOutlined, {
+    className: "".concat(prefixCls, "-close-icon")
+  }));
+  var autoMarginTag = !description && iconNode ? (/*#__PURE__*/React.createElement("span", {
+    className: "".concat(prefixCls, "-message-single-line-auto-margin")
+  })) : null;
+  return {
+    content: (/*#__PURE__*/React.createElement(ConfigProvider, {
+      iconPrefixCls: iconPrefixCls
+    }, /*#__PURE__*/React.createElement("div", {
+      className: iconNode ? "".concat(prefixCls, "-with-icon") : '',
+      role: "alert"
+    }, iconNode, /*#__PURE__*/React.createElement("div", {
+      className: "".concat(prefixCls, "-message")
+    }, autoMarginTag, message), /*#__PURE__*/React.createElement("div", {
+      className: "".concat(prefixCls, "-description")
+    }, description), btn ? /*#__PURE__*/React.createElement("span", {
+      className: "".concat(prefixCls, "-btn")
+    }, btn) : null))),
+    duration: duration,
+    closable: true,
+    closeIcon: closeIconToRender,
+    onClose: onClose,
+    onClick: onClick,
+    key: key,
+    style: style || {},
+    className: classNames(className, _defineProperty({}, "".concat(prefixCls, "-").concat(type), !!type)),
+    props: props
+  };
+}
+function notice(args) {
+  getNotificationInstance(args, function (_ref) {
+    var prefixCls = _ref.prefixCls,
+      iconPrefixCls = _ref.iconPrefixCls,
+      instance = _ref.instance;
+    instance.notice(getRCNoticeProps(args, prefixCls, iconPrefixCls));
+  });
+}
+var api = {
+  open: notice,
+  close: function close(key) {
+    Object.keys(notificationInstance).forEach(function (cacheKey) {
+      return Promise.resolve(notificationInstance[cacheKey]).then(function (instance) {
+        instance.removeNotice(key);
+      });
+    });
+  },
+  config: setNotificationConfig,
+  destroy: function destroy() {
+    Object.keys(notificationInstance).forEach(function (cacheKey) {
+      Promise.resolve(notificationInstance[cacheKey]).then(function (instance) {
+        instance.destroy();
+      });
+      delete notificationInstance[cacheKey]; // lgtm[js/missing-await]
+    });
+  }
+};
+['success', 'info', 'warning', 'error'].forEach(function (type) {
+  api[type] = function (args) {
+    return api.open(Object.assign(Object.assign({}, args), {
+      type: type
+    }));
+  };
+});
+api.warn = api.warning;
+api.useNotification = createUseNotification(getNotificationInstance, getRCNoticeProps);
+/** @internal test Only function. Not work on production */
+export var getInstance = function getInstance(cacheKey) {
+  return __awaiter(void 0, void 0, void 0, /*#__PURE__*/_regenerator().m(function _callee() {
+    return _regenerator().w(function (_context) {
+      while (1) switch (_context.n) {
+        case 0:
+          return _context.a(2, process.env.NODE_ENV === 'test' ? notificationInstance[cacheKey] : null);
+      }
+    }, _callee);
+  }));
+};
+export default api;

package/es/components/UNotification/style/index.d.ts

@@ -0,0 +1,2 @@
+import '../../style/index.less';
+import './index.less';

package/es/components/UNotification/style/index.js

@@ -0,0 +1,2 @@
+import "../../style/index.less";
+import "./index.less";

package/es/components/UNotification/style/index.less

@@ -0,0 +1,205 @@
+@import '../../style/themes/index';
+@import '../../style/mixins/index';
+
+.popover-customize-bg(@notification-prefix-cls, @popover-background);
+
+@notification-prefix-cls: ~'@{ud-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;
+        border: 1px solid @u-msg-border-color;
+
+        .@{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;
+            font-weight: 500;
+
+            // 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;
+            color: @u-text-color-second;
+        }
+
+        &-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 {
+                color: @u-text-color-third;
+            }
+        }
+
+        &-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';