Index: sky/examples/flights-app/app-toast.sky |
diff --git a/sky/examples/flights-app/app-toast.sky b/sky/examples/flights-app/app-toast.sky |
new file mode 100644 |
index 0000000000000000000000000000000000000000..f04db163b483fe5c96bf861c074a05f9e69fef9c |
--- /dev/null |
+++ b/sky/examples/flights-app/app-toast.sky |
@@ -0,0 +1,36 @@ |
+<import src="../../framework/sky-element/sky-element.sky" as="SkyElement" /> |
+<template> |
+ <style> |
+ :host { |
+ position: absolute; |
+ bottom: 32px; |
+ right: 32px; |
+ max-width: 55%; |
+ box-shadow: 0px 0px 12px 2px rgba(22, 22, 22, 0.4); |
+ background-color: #b0281a; |
+ background-image: linear-gradient(#E5D658, #DFCF43); |
+ border: 1px solid #AEA477; |
+ padding: 6px; |
+ border-radius: 2px; |
+ display: flex; |
+ align-items: center; |
+ font-size: 0.8em; |
+ } |
+ |
+ .header { |
+ flex-shrink: 0; |
+ margin-right: 6px; |
+ } |
+ </style> |
+ <div class="header"> |
+ <content select=".toast-icon" /> |
+ </div> |
+ <div class="content"> |
+ <content select=".toast-content" /> |
+ </div> |
+</template> |
+<script> |
+SkyElement({ |
+ name: "app-toast" |
+}); |
+</script> |