1 | @import "../node_modules/tinper-bee-core/scss/minxin-variables";
|
2 | @import "../node_modules/tinper-bee-core/scss/minxin-mixins";
|
3 | @import "../node_modules/bee-icon/src/Icon.scss";
|
4 |
|
5 | .u-message {
|
6 | font-size: $message-font-size;
|
7 | position: fixed;
|
8 | z-index: $zIndex-message;
|
9 | width: 100%;
|
10 |
|
11 |
|
12 | &-notice {
|
13 | position: absolute;
|
14 | padding: $message-padding;
|
15 | @include shadow-3dp();
|
16 | background: $message-background;
|
17 | line-height: 1.5;
|
18 | overflow: hidden;
|
19 | color: #fff;
|
20 | &-description {
|
21 | font-size: 12px;
|
22 | word-wrap: break-word;
|
23 | vertical-align: middle;
|
24 | &-content {
|
25 | padding: $message-content-padding;
|
26 | margin-left: 45px;
|
27 | }
|
28 | &-icon{
|
29 | position: absolute;
|
30 | top: 0;
|
31 | left: 0;
|
32 | height: 100%;
|
33 | width: 45px;
|
34 | text-align: center;
|
35 | background-color: #000;
|
36 | .uf {
|
37 | font-size: 30px;
|
38 | }
|
39 | }
|
40 | }
|
41 |
|
42 | &-closable {
|
43 | padding-right: 20px;
|
44 | }
|
45 |
|
46 | &-close {
|
47 | position: absolute;
|
48 | right: 24px;
|
49 | top: 8px;
|
50 | cursor: pointer;
|
51 | outline: none;
|
52 | font-size: 30px;
|
53 | font-weight: 700;
|
54 | line-height: 1;
|
55 | text-shadow: 0 1px 0 #fff;
|
56 | filter: alpha(opacity=80);
|
57 | opacity: .8;
|
58 | text-decoration: none;
|
59 |
|
60 | &-x:after {
|
61 | content: '×';
|
62 | }
|
63 |
|
64 | &:hover {
|
65 | opacity: 1;
|
66 | filter: alpha(opacity=100);
|
67 | text-decoration: none;
|
68 | }
|
69 |
|
70 | }
|
71 | }
|
72 |
|
73 | &-notice-light {
|
74 | background-color: #fff;
|
75 | color: $gray-darkest;
|
76 | .u-message-notice-description-icon{
|
77 | background-color: $gray-lighter;
|
78 | }
|
79 | }
|
80 | &-notice-success {
|
81 | background-color: $brand-success;
|
82 | color: #fff;
|
83 | .u-message-notice-description-icon{
|
84 | background-color: $brand-success-active;
|
85 | }
|
86 | }
|
87 | &-notice-danger {
|
88 | background-color: $brand-danger;
|
89 | color: #fff;
|
90 | .u-message-notice-description-icon{
|
91 | background-color: $brand-danger-active;
|
92 | }
|
93 | }
|
94 | &-notice-info {
|
95 | background-color: $brand-info;
|
96 | color: #fff;
|
97 | .u-message-notice-description-icon{
|
98 | background-color: $brand-info-active;
|
99 | }
|
100 | }
|
101 | &-notice-warning {
|
102 | background-color:$brand-warning;
|
103 | color: #fff;
|
104 | .u-message-notice-description-icon{
|
105 | background-color: $brand-warning-active;
|
106 | }
|
107 | }
|
108 | &-notice-successlight {
|
109 | background-color: $brand-light-success;
|
110 | color: #000;
|
111 | .u-message-notice-description-icon{
|
112 | background-color: $brand-success;
|
113 | color: #fff;
|
114 | }
|
115 | }
|
116 | &-notice-dangerlight {
|
117 | background-color: $brand-light-danger;
|
118 | color: #000;
|
119 | .u-message-notice-description-icon{
|
120 | background-color: $brand-danger;
|
121 | color: #fff;
|
122 | }
|
123 | }
|
124 | &-notice-infolight {
|
125 | background-color: $brand-light-info;
|
126 | color: #000;
|
127 | .u-message-notice-description-icon{
|
128 | background-color: $brand-info;
|
129 | color: #fff;
|
130 | }
|
131 | }
|
132 | &-notice-warninglight {
|
133 | background-color: $brand-light-warning;
|
134 | color: #000;
|
135 | .u-message-notice-description-icon{
|
136 | background-color: $brand-warning;
|
137 | color: #fff;
|
138 | }
|
139 | }
|
140 |
|
141 | }
|
142 | .message-fade-effect {
|
143 | animation-duration: 0.24s;
|
144 | animation-fill-mode: both;
|
145 | animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
|
146 | }
|
147 |
|
148 | .u-message-left-enter,
|
149 | .u-message-left-appear,.u-message-right-enter,
|
150 | .u-message-right-appear,.u-message-top-enter,
|
151 | .u-message-top-appear,.u-message-bottom-enter,
|
152 | .u-message-bottom-appear {
|
153 | opacity: 0;
|
154 | @extend .message-fade-effect;
|
155 | animation-play-state: paused;
|
156 | }
|
157 |
|
158 | .u-message-left-leave,
|
159 | .u-message-right-leave,
|
160 | .u-message-top-leave,
|
161 | .u-message-bottom-leave {
|
162 | @extend .message-fade-effect;
|
163 | animation-duration: 0.2s;
|
164 | animation-play-state: paused;
|
165 | }
|
166 |
|
167 |
|
168 | .u-message-left-enter.u-message-left-enter-active,
|
169 | .u-message-left-appear.u-message-left-appear-active {
|
170 | animation-name: uMessageLeftIn;
|
171 | animation-play-state: running;
|
172 | }
|
173 |
|
174 | .u-message-left-leave.u-message-left-leave-active {
|
175 | animation-name: uMessageFadeOut;
|
176 | animation-play-state: running;
|
177 | }
|
178 | .u-message-right-enter.u-message-right-enter-active,
|
179 | .u-message-right-appear.u-message-right-appear-active {
|
180 | animation-name: uMessageRightIn;
|
181 | animation-play-state: running;
|
182 | }
|
183 |
|
184 | .u-message-right-leave.u-message-right-leave-active {
|
185 | animation-name: uMessageFadeOut;
|
186 | animation-play-state: running;
|
187 | }
|
188 | .u-message-top-enter.u-message-top-enter-active,
|
189 | .u-message-top-appear.u-message-top-appear-active {
|
190 | animation-name: uMessageMoveUp;
|
191 | animation-play-state: running;
|
192 | }
|
193 |
|
194 | .u-message-top-leave.u-message-top-leave-active {
|
195 | animation-name: uMessageFadeOut;
|
196 | animation-play-state: running;
|
197 | }
|
198 | .u-message-bottom-enter.u-message-bottom-enter-active,
|
199 | .u-message-bottom-appear.u-message-bottom-appear-active {
|
200 | animation-name: uMessageMoveDown;
|
201 | animation-play-state: running;
|
202 | }
|
203 |
|
204 | .u-message-bottom-leave.u-message-bottom-leave-active {
|
205 | animation-name: uMessageFadeOut;
|
206 | animation-play-state: running;
|
207 | }
|
208 | @keyframes uMessageLeftIn {
|
209 | 0% {
|
210 | opacity: 0;
|
211 | right: 30px;
|
212 | }
|
213 | 100% {
|
214 | right: 0;
|
215 | opacity: 1;
|
216 | }
|
217 | }
|
218 | @keyframes uMessageRightIn {
|
219 | 0% {
|
220 | opacity: 0;
|
221 | left:30px;
|
222 | }
|
223 | 100% {
|
224 | left: 0;
|
225 | opacity: 1;
|
226 | }
|
227 | }
|
228 | @keyframes uMessageMoveUp {
|
229 | 0% {
|
230 | opacity: 0;
|
231 | top: -30px;
|
232 | }
|
233 | 100% {
|
234 | top: 0;
|
235 | opacity: 1;
|
236 | }
|
237 | }
|
238 | @keyframes uMessageMoveDown {
|
239 | 0% {
|
240 | opacity: 0;
|
241 | bottom: -78px;
|
242 | }
|
243 | 100% {
|
244 | bottom: -48px;
|
245 | opacity: 1;
|
246 | }
|
247 | }
|
248 |
|
249 |
|
250 | @keyframes uMessageFadeOut {
|
251 | 0% {
|
252 | opacity: 1;
|
253 | padding-top: $message-padding;
|
254 | padding-bottom: $message-padding;
|
255 | max-height: 150px;
|
256 | }
|
257 | 100% {
|
258 | opacity: 0;
|
259 | padding-top: 0;
|
260 | padding-bottom: 0;
|
261 | max-height: 0;
|
262 | }
|
263 | }
|