1 | @import './Theme.css';
|
2 |
|
3 | .toast {
|
4 | display: flex;
|
5 | justify-content: space-between;
|
6 | position: absolute;
|
7 | top: 0;
|
8 | left: 0;
|
9 | width: 100%;
|
10 | z-index: 99;
|
11 | box-shadow: 0 0 5px 0 rgba(0,0,0,0.3);
|
12 | padding: 16px;
|
13 | background-color: var(--lightSquidInk);
|
14 | font-size: 14px;
|
15 | color: #fff;
|
16 | box-sizing: border-box;
|
17 | }
|
18 |
|
19 | .toast > span {
|
20 | margin-right: 10px;
|
21 | }
|
22 |
|
23 | .toastClose {
|
24 | margin-left: auto;
|
25 | align-self: center;
|
26 | position: relative;
|
27 | width: 18px;
|
28 | height: 18px;
|
29 | overflow: hidden;
|
30 | cursor: pointer;
|
31 | }
|
32 |
|
33 | .toastClose::before,
|
34 | .toastClose::after {
|
35 | content: '';
|
36 | position: absolute;
|
37 | height: 2px;
|
38 | width: 100%;
|
39 | top: 50%;
|
40 | left: 0;
|
41 | margin-top: -1px;
|
42 | background: var(--lightGrey);
|
43 | }
|
44 |
|
45 | .toastClose:hover::before,
|
46 | .toastClose:hover::after {
|
47 | background: var(--red);
|
48 | }
|
49 |
|
50 | .toastClose::before {
|
51 | -webkit-transform: rotate(45deg);
|
52 | -moz-transform: rotate(45deg);
|
53 | -ms-transform: rotate(45deg);
|
54 | -o-transform: rotate(45deg);
|
55 | transform: rotate(45deg);
|
56 | }
|
57 | .toastClose::after {
|
58 | -webkit-transform: rotate(-45deg);
|
59 | -moz-transform: rotate(-45deg);
|
60 | -ms-transform: rotate(-45deg);
|
61 | -o-transform: rotate(-45deg);
|
62 | transform: rotate(-45deg);
|
63 | } |
\ | No newline at end of file |