| 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 |