55@import ' ../style/theme/font' ;
66
77.devui-alert {
8+ color : $devui-text ;
9+ font-size : $devui-font-size ;
10+ border : 1px solid transparent ;
11+ padding : 10px ;
12+ line-height : 20px ;
13+ border-radius : $devui-border-radius ;
14+ padding-left : 16px ;
15+ word-break : normal ;
16+ word-wrap : break-word ;
17+
18+ button .devui-close {
819 color : $devui-text ;
9- font-size : $devui-font-size ;
10- border : 1px solid transparent ;
11- padding : 10px ;
12- line-height : 20px ;
13- border-radius : $devui-border-radius ;
14- padding-left : 16px ;
15- word-break : normal ;
16- word-wrap : break-word ;
17-
18- button .devui-close {
20+ opacity : 1 ;
21+
22+ & > svg path {
23+ fill : $devui-light-text ;
24+ }
25+
26+ span {
1927 color : $devui-text ;
20- opacity : 1 ;
21-
28+ font-size : $devui-font-size ;
29+ font-weight : bold ;
30+ }
31+ }
32+
33+ & .devui-alert-success {
34+ background-color : $devui-success-bg ;
35+ border-color : $devui-success-line ;
36+ color : $devui-text ;
37+
38+ button .devui-close {
2239 & > svg path {
23- fill : $devui-light-text ;
24- }
25-
26- span {
27- color : $devui-text ;
28- font-size : $devui-font-size ;
29- font-weight : bold ;
40+ fill : $devui-success-line ;
3041 }
3142 }
32-
33- & .devui-alert-success {
34- background-color : $ devui-success-bg ;
35- border -color : $devui-success-line ;
36- color : $devui-text ;
37-
38- button .devui-close {
39- & > svg path {
40- fill : $devui-success-line ;
41- }
43+ }
44+
45+ & . devui-alert-info {
46+ background -color : $devui-info-bg ;
47+ border- color : $devui-info-line ;
48+ color : $devui-text ;
49+
50+ button .devui-close {
51+ & > svg path {
52+ fill : $devui-info-line ;
4253 }
4354 }
44-
45- & .devui-alert-info {
46- background-color : $ devui-info-bg ;
47- border -color : $devui-info-line ;
48- color : $devui-text ;
49-
50- button .devui-close {
51- & > svg path {
52- fill : $devui-info-line ;
53- }
55+ }
56+
57+ & . devui-alert-warning {
58+ background -color : $devui-warning-bg ;
59+ border- color : $devui-warning-line ;
60+ color : $devui-text ;
61+
62+ button .devui-close {
63+ & > svg path {
64+ fill : $devui-warning-line ;
5465 }
5566 }
56-
57- & .devui-alert-warning {
58- background-color : $ devui-warning-bg ;
59- border -color : $devui-warning-line ;
60- color : $devui-text ;
61-
62- button .devui-close {
63- & > svg path {
64- fill : $devui-warning-line ;
65- }
67+ }
68+
69+ & . devui-alert-danger {
70+ background -color : $devui-danger-bg ;
71+ border- color : $devui-danger-line ;
72+ color : $devui-text ;
73+
74+ button .devui-close {
75+ & > svg path {
76+ fill : $devui-danger-line ;
6677 }
6778 }
68-
69- & .devui-alert-danger {
70- background-color : $devui-danger-bg ;
71- border-color : $devui-danger-line ;
72- color : $devui-text ;
73-
74- button .devui-close {
75- & > svg path {
76- fill : $devui-danger-line ;
77- }
79+ }
80+
81+ svg .devui-icon {
82+ width : 16px ;
83+ height : 16px ;
84+ vertical-align : middle ;
85+ transform : translateY (-1px ); // 字体14px图标16px对齐问题,微调
86+ }
87+
88+ .devui-icon.devui-icon-success {
89+ & > g {
90+ path {
91+ fill : $devui-success-line ;
7892 }
79- }
80-
81- svg .devui-icon {
82- width : 16px ;
83- height : 16px ;
84- vertical-align : middle ;
85- transform : translateY (-1px ); // 字体14px图标16px对齐问题,微调
86- }
87-
88- .devui-icon.devui-icon-success {
89- & > g {
90- path {
91- fill : $devui-success-line ;
92- }
93-
94- polygon {
95- fill : $devui-light-text ;
96- stroke : $devui-light-text ;
97- }
93+
94+ polygon {
95+ fill : $devui-light-text ;
96+ stroke : $devui-light-text ;
9897 }
9998 }
100-
101- .devui-icon.devui-icon-warning {
102- & > g {
103- path .devui-icon-warning-outer {
104- fill : $devui-warning-line ;
105- }
106-
107- path .devui-icon-warning-inner {
108- fill : $devui-light-text ;
109- stroke : $devui-light-text ;
110- }
99+ }
100+
101+ .devui-icon.devui-icon-warning {
102+ & > g {
103+ path .devui-icon-warning-outer {
104+ fill : $devui-warning-line ;
111105 }
112- }
113-
114- .devui-icon.devui-icon-info {
115- & > g {
116- path .devui-icon-info-outer {
117- fill : $devui-info-line ;
118- }
119-
120- path .devui-icon-info-inner {
121- fill : $devui-light-text ;
122- stroke : $devui-light-text ;
123- }
106+
107+ path .devui-icon-warning-inner {
108+ fill : $devui-light-text ;
109+ stroke : $devui-light-text ;
124110 }
125111 }
126-
127- .devui-icon.devui-icon-error {
128- & > g {
129- path .devui-icon-error-outer {
130- fill : $ devui-danger-line ;
131- }
132-
133- path .devui-icon-error-inner {
134- fill : $ devui-light-text ;
135- stroke : $devui-light-text ;
136- }
112+ }
113+
114+ .devui-icon.devui-icon-info {
115+ & > g {
116+ path . devui-icon-info-outer {
117+ fill : $devui-info-line ;
118+ }
119+
120+ path . devui-icon-info-inner {
121+ fill : $devui-light-text ;
122+ stroke : $devui-light-text ;
137123 }
138124 }
139- }
140-
141- .devui-alert-icon {
142- margin-right : 4px ;
143125 }
144-
145- .devui-alter-close {
146- height : 0 !important ;
147- margin : 0 ;
148- padding-top : 0 ;
149- padding-bottom : 0 ;
150- transform-origin : 50% 0 ;
151- transition : all .3s ease-in-out ;
126+
127+ .devui-icon.devui-icon-error {
128+ & > g {
129+ path .devui-icon-error-outer {
130+ fill : $devui-danger-line ;
131+ }
132+
133+ path .devui-icon-error-inner {
134+ fill : $devui-light-text ;
135+ stroke : $devui-light-text ;
136+ }
137+ }
152138 }
139+ }
140+
141+ .devui-alert-icon {
142+ margin-right : 4px ;
143+ }
153144
154- .devui-alert-leave-active {
155- animation : alertUpOut .3s ease-in-out ;
156- animation-fill-mode : both ;
145+ .devui-alter-close {
146+ height : 0 !important ;
147+ margin : 0 ;
148+ padding-top : 0 ;
149+ padding-bottom : 0 ;
150+ transform-origin : 50% 0 ;
151+ transition : all 0.3s ease-in-out ;
152+ }
153+
154+ .devui-alert-leave-active {
155+ animation : alertUpOut 0.3s ease-in-out ;
156+ animation-fill-mode : both ;
157+ }
158+
159+ @keyframes alertUpOut {
160+ 0% {
161+ transform : scaleY (1 );
162+ transform-origin : 0% 0% ;
163+ opacity : 1 ;
157164 }
158165
159- @keyframes alertUpOut {
160- 0% {
161- transform : scaleY (1 );
162- transform-origin : 0% 0% ;
163- opacity : 1 ;
164- }
165- 100% {
166- transform : scaleY (0 );
167- transform-origin : 0% 0% ;
168- opacity : 0 ;
169- }
170- }
166+ 100% {
167+ transform : scaleY (0 );
168+ transform-origin : 0% 0% ;
169+ opacity : 0 ;
170+ }
171+ }
0 commit comments