OLD | NEW |
| (Empty) |
1 <import src="../../framework/sky-element/sky-element.sky" as="SkyElement" /> | |
2 | |
3 <sky-element name="app-toast"> | |
4 <template> | |
5 <style> | |
6 :host { | |
7 position: absolute; | |
8 bottom: 32px; | |
9 right: 32px; | |
10 max-width: 55%; | |
11 box-shadow: 0px 0px 12px 2px rgba(22, 22, 22, 0.4); | |
12 background-image: linear-gradient(#E5D658, #DFCF43); | |
13 border: 1px solid #AEA477; | |
14 padding: 6px; | |
15 border-radius: 2px; | |
16 display: flex; | |
17 align-items: center; | |
18 font-size: 0.8em; | |
19 overflow: hidden; | |
20 } | |
21 | |
22 .header { | |
23 flex-shrink: 0; | |
24 margin-right: 6px; | |
25 } | |
26 | |
27 .close-box { | |
28 position: absolute; | |
29 top: 3px; | |
30 right: 3px; | |
31 width: 1em; | |
32 overflow: hidden; | |
33 text-align: center; | |
34 outline: 1px solid #AEA477; | |
35 } | |
36 </style> | |
37 <div class="header"> | |
38 <content select=".toast-icon" /> | |
39 </div> | |
40 <div class="content"> | |
41 <content select=".toast-content" /> | |
42 </div> | |
43 <div class="close-box"> | |
44 X | |
45 </div> | |
46 </template> | |
47 <script> | |
48 module.exports = class extends SkyElement { | |
49 }.register(); | |
50 </script> | |
51 </sky-element> | |
OLD | NEW |