123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244 |
- /* stylelint-disable at-rule-empty-line-before,at-rule-name-space-after,at-rule-no-unknown */
- /* stylelint-disable no-duplicate-selectors */
- .ant-notification {
- box-sizing: border-box;
- margin: 0;
- padding: 0;
- color: rgba(0, 0, 0, 0.85);
- font-size: 14px;
- font-variant: tabular-nums;
- line-height: 1.5715;
- list-style: none;
- font-feature-settings: 'tnum';
- position: fixed;
- z-index: 1010;
- margin-right: 24px;
- }
- .ant-notification-close-icon {
- font-size: 14px;
- cursor: pointer;
- }
- .ant-notification-hook-holder {
- position: relative;
- }
- .ant-notification-notice {
- position: relative;
- width: 384px;
- max-width: calc(100vw - 24px * 2);
- margin-bottom: 16px;
- margin-left: auto;
- padding: 16px 24px;
- overflow: hidden;
- line-height: 1.5715;
- word-wrap: break-word;
- background: #fff;
- border-radius: 2px;
- box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
- }
- .ant-notification-top .ant-notification-notice,
- .ant-notification-bottom .ant-notification-notice {
- margin-right: auto;
- margin-left: auto;
- }
- .ant-notification-topLeft .ant-notification-notice,
- .ant-notification-bottomLeft .ant-notification-notice {
- margin-right: auto;
- margin-left: 0;
- }
- .ant-notification-notice-message {
- margin-bottom: 8px;
- color: rgba(0, 0, 0, 0.85);
- font-size: 16px;
- line-height: 24px;
- }
- .ant-notification-notice-message-single-line-auto-margin {
- display: block;
- width: calc(384px - 24px * 2 - 24px - 48px - 100%);
- max-width: 4px;
- background-color: transparent;
- pointer-events: none;
- }
- .ant-notification-notice-message-single-line-auto-margin::before {
- display: block;
- content: '';
- }
- .ant-notification-notice-description {
- font-size: 14px;
- }
- .ant-notification-notice-closable .ant-notification-notice-message {
- padding-right: 24px;
- }
- .ant-notification-notice-with-icon .ant-notification-notice-message {
- margin-bottom: 4px;
- margin-left: 48px;
- font-size: 16px;
- }
- .ant-notification-notice-with-icon .ant-notification-notice-description {
- margin-left: 48px;
- font-size: 14px;
- }
- .ant-notification-notice-icon {
- position: absolute;
- margin-left: 4px;
- font-size: 24px;
- line-height: 24px;
- }
- .anticon.ant-notification-notice-icon-success {
- color: #52c41a;
- }
- .anticon.ant-notification-notice-icon-info {
- color: #1890ff;
- }
- .anticon.ant-notification-notice-icon-warning {
- color: #faad14;
- }
- .anticon.ant-notification-notice-icon-error {
- color: #ff4d4f;
- }
- .ant-notification-notice-close {
- position: absolute;
- top: 16px;
- right: 22px;
- color: rgba(0, 0, 0, 0.45);
- outline: none;
- }
- .ant-notification-notice-close:hover {
- color: rgba(0, 0, 0, 0.67);
- }
- .ant-notification-notice-btn {
- float: right;
- margin-top: 16px;
- }
- .ant-notification .notification-fade-effect {
- animation-duration: 0.24s;
- animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
- animation-fill-mode: both;
- }
- .ant-notification-fade-enter,
- .ant-notification-fade-appear {
- animation-duration: 0.24s;
- animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
- animation-fill-mode: both;
- opacity: 0;
- animation-play-state: paused;
- }
- .ant-notification-fade-leave {
- animation-duration: 0.24s;
- animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
- animation-fill-mode: both;
- animation-duration: 0.2s;
- animation-play-state: paused;
- }
- .ant-notification-fade-enter.ant-notification-fade-enter-active,
- .ant-notification-fade-appear.ant-notification-fade-appear-active {
- animation-name: NotificationFadeIn;
- animation-play-state: running;
- }
- .ant-notification-fade-leave.ant-notification-fade-leave-active {
- animation-name: NotificationFadeOut;
- animation-play-state: running;
- }
- @keyframes NotificationFadeIn {
- 0% {
- left: 384px;
- opacity: 0;
- }
- 100% {
- left: 0;
- opacity: 1;
- }
- }
- @keyframes NotificationFadeOut {
- 0% {
- max-height: 150px;
- margin-bottom: 16px;
- opacity: 1;
- }
- 100% {
- max-height: 0;
- margin-bottom: 0;
- padding-top: 0;
- padding-bottom: 0;
- opacity: 0;
- }
- }
- .ant-notification-rtl {
- direction: rtl;
- }
- .ant-notification-rtl .ant-notification-notice-closable .ant-notification-notice-message {
- padding-right: 0;
- padding-left: 24px;
- }
- .ant-notification-rtl .ant-notification-notice-with-icon .ant-notification-notice-message {
- margin-right: 48px;
- margin-left: 0;
- }
- .ant-notification-rtl .ant-notification-notice-with-icon .ant-notification-notice-description {
- margin-right: 48px;
- margin-left: 0;
- }
- .ant-notification-rtl .ant-notification-notice-icon {
- margin-right: 4px;
- margin-left: 0;
- }
- .ant-notification-rtl .ant-notification-notice-close {
- right: auto;
- left: 22px;
- }
- .ant-notification-rtl .ant-notification-notice-btn {
- float: left;
- }
- .ant-notification-top,
- .ant-notification-bottom {
- margin-right: 0;
- margin-left: 0;
- }
- .ant-notification-top .ant-notification-fade-enter.ant-notification-fade-enter-active,
- .ant-notification-top .ant-notification-fade-appear.ant-notification-fade-appear-active {
- animation-name: NotificationTopFadeIn;
- }
- .ant-notification-bottom .ant-notification-fade-enter.ant-notification-fade-enter-active,
- .ant-notification-bottom .ant-notification-fade-appear.ant-notification-fade-appear-active {
- animation-name: NotificationBottomFadeIn;
- }
- .ant-notification-topLeft,
- .ant-notification-bottomLeft {
- margin-right: 0;
- margin-left: 24px;
- }
- .ant-notification-topLeft .ant-notification-fade-enter.ant-notification-fade-enter-active,
- .ant-notification-bottomLeft .ant-notification-fade-enter.ant-notification-fade-enter-active,
- .ant-notification-topLeft .ant-notification-fade-appear.ant-notification-fade-appear-active,
- .ant-notification-bottomLeft .ant-notification-fade-appear.ant-notification-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: 384px;
- opacity: 0;
- }
- 100% {
- right: 0;
- opacity: 1;
- }
- }
|