1 | @import '../../style/themes/index';
|
2 | @import '../../style/mixins/index';
|
3 | @import './customize.less';
|
4 |
|
5 | @notification-prefix-cls: ~'@{ant-prefix}-notification';
|
6 | @notification-width: 384px;
|
7 | @notification-padding: @notification-padding-vertical @notification-padding-horizontal;
|
8 | @notification-margin-bottom: 16px;
|
9 | @notification-margin-edge: 24px;
|
10 |
|
11 | .@{notification-prefix-cls} {
|
12 | .reset-component();
|
13 |
|
14 | position: fixed;
|
15 | z-index: @zindex-notification;
|
16 | margin-right: @notification-margin-edge;
|
17 |
|
18 | &-topLeft,
|
19 | &-bottomLeft {
|
20 | margin-right: 0;
|
21 | margin-left: @notification-margin-edge;
|
22 |
|
23 | .@{notification-prefix-cls}-fade-enter.@{notification-prefix-cls}-fade-enter-active,
|
24 | .@{notification-prefix-cls}-fade-appear.@{notification-prefix-cls}-fade-appear-active {
|
25 | animation-name: NotificationLeftFadeIn;
|
26 | }
|
27 | }
|
28 |
|
29 | &-close-icon {
|
30 | font-size: @font-size-base;
|
31 | cursor: pointer;
|
32 | }
|
33 |
|
34 | &-hook-holder {
|
35 | position: relative;
|
36 | }
|
37 |
|
38 | &-notice {
|
39 | position: relative;
|
40 | width: @notification-width;
|
41 | max-width: ~'calc(100vw - @{notification-margin-edge} * 2)';
|
42 | margin-bottom: @notification-margin-bottom;
|
43 | margin-left: auto;
|
44 | padding: @notification-padding;
|
45 | overflow: hidden;
|
46 | line-height: @line-height-base;
|
47 | word-wrap: break-word;
|
48 | background: @notification-bg;
|
49 | border-radius: @border-radius-base;
|
50 | box-shadow: @shadow-2;
|
51 |
|
52 | .@{notification-prefix-cls}-topLeft &,
|
53 | .@{notification-prefix-cls}-bottomLeft & {
|
54 | margin-right: auto;
|
55 | margin-left: 0;
|
56 | }
|
57 |
|
58 | &-message {
|
59 | margin-bottom: 8px;
|
60 | color: @heading-color;
|
61 | font-size: @font-size-lg;
|
62 | line-height: 24px;
|
63 |
|
64 |
|
65 | &-single-line-auto-margin {
|
66 | display: block;
|
67 | width: ~'calc(@{notification-width} - @{notification-padding-horizontal} * 2 - 24px - 48px - 100%)';
|
68 | max-width: 4px;
|
69 | background-color: transparent;
|
70 | pointer-events: none;
|
71 | &::before {
|
72 | display: block;
|
73 | content: '';
|
74 | }
|
75 | }
|
76 | }
|
77 |
|
78 | &-description {
|
79 | font-size: @font-size-base;
|
80 | }
|
81 |
|
82 | &-closable &-message {
|
83 | padding-right: 24px;
|
84 | }
|
85 |
|
86 | &-with-icon &-message {
|
87 | margin-bottom: 4px;
|
88 | margin-left: 48px;
|
89 | font-size: @font-size-lg;
|
90 | }
|
91 |
|
92 | &-with-icon &-description {
|
93 | margin-left: 48px;
|
94 | font-size: @font-size-base;
|
95 | }
|
96 |
|
97 |
|
98 |
|
99 |
|
100 | &-icon {
|
101 | position: absolute;
|
102 | margin-left: 4px;
|
103 | font-size: 24px;
|
104 | line-height: 24px;
|
105 | }
|
106 |
|
107 | .@{iconfont-css-prefix}&-icon {
|
108 | &-success {
|
109 | color: @success-color;
|
110 | }
|
111 | &-info {
|
112 | color: @info-color;
|
113 | }
|
114 | &-warning {
|
115 | color: @warning-color;
|
116 | }
|
117 | &-error {
|
118 | color: @error-color;
|
119 | }
|
120 | }
|
121 |
|
122 | &-close {
|
123 | position: absolute;
|
124 | top: 16px;
|
125 | right: 22px;
|
126 | color: @text-color-secondary;
|
127 | outline: none;
|
128 |
|
129 | &:hover {
|
130 | & when (@theme = dark) {
|
131 | color: fade(@white, 85%);
|
132 | }
|
133 | & when not (@theme = dark) {
|
134 | color: shade(@text-color-secondary, 40%);
|
135 | }
|
136 | }
|
137 | }
|
138 |
|
139 | &-btn {
|
140 | float: right;
|
141 | margin-top: 16px;
|
142 | }
|
143 | }
|
144 |
|
145 | .notification-fade-effect {
|
146 | animation-duration: 0.24s;
|
147 | animation-timing-function: @ease-in-out;
|
148 | animation-fill-mode: both;
|
149 | }
|
150 |
|
151 | &-fade-enter,
|
152 | &-fade-appear {
|
153 | .notification-fade-effect();
|
154 |
|
155 | opacity: 0;
|
156 | animation-play-state: paused;
|
157 | }
|
158 |
|
159 | &-fade-leave {
|
160 | .notification-fade-effect();
|
161 |
|
162 | animation-duration: 0.2s;
|
163 | animation-play-state: paused;
|
164 | }
|
165 |
|
166 | &-fade-enter&-fade-enter-active,
|
167 | &-fade-appear&-fade-appear-active {
|
168 | animation-name: NotificationFadeIn;
|
169 | animation-play-state: running;
|
170 | }
|
171 |
|
172 | &-fade-leave&-fade-leave-active {
|
173 | animation-name: NotificationFadeOut;
|
174 | animation-play-state: running;
|
175 | }
|
176 | }
|
177 |
|
178 | @keyframes NotificationFadeIn {
|
179 | 0% {
|
180 | left: @notification-width;
|
181 | opacity: 0;
|
182 | }
|
183 | 100% {
|
184 | left: 0;
|
185 | opacity: 1;
|
186 | }
|
187 | }
|
188 |
|
189 | @keyframes NotificationLeftFadeIn {
|
190 | 0% {
|
191 | right: @notification-width;
|
192 | opacity: 0;
|
193 | }
|
194 | 100% {
|
195 | right: 0;
|
196 | opacity: 1;
|
197 | }
|
198 | }
|
199 |
|
200 | @keyframes NotificationFadeOut {
|
201 | 0% {
|
202 | max-height: 150px;
|
203 | margin-bottom: @notification-margin-bottom;
|
204 | opacity: 1;
|
205 | }
|
206 | 100% {
|
207 | max-height: 0;
|
208 | margin-bottom: 0;
|
209 | padding-top: 0;
|
210 | padding-bottom: 0;
|
211 | opacity: 0;
|
212 | }
|
213 | }
|
214 |
|
215 | @import './rtl';
|