live-web-view.content: Added Alert.

Author: dinusv

packages/live-web-view/content/Alert.lv

@@ -0,0 +1,21 @@
+import live-web.dom
+import live-web
+import live-elements-web-server.view
+import live-elements-web-server.style
+
+component Alert < Div{
+
+    string type: null
+
+    static any[] use = [ 
+        AlertContent,
+        ScopedStyle{ src: './style/alert.css' process: '../style/CSSProcessor.lv' }, 
+        ScopedStyle{ src: '../style/global.css' process: '../style/CSSProcessor.lv' } 
+    ]
+
+    string[] extraClasses: []
+    classes: this.extraClasses.concat([
+        ScopedStyle.className(Alert),
+        this.type ? `type-${this.type}` : '',
+    ])
+}

packages/live-web-view/content/AlertContent.lv

@@ -0,0 +1,9 @@
+import live-web.dom
+import live-web
+import live-elements-web-server.view
+import live-elements-web-server.style
+
+component AlertContent < Div{
+    string[] extraClasses: []
+    classes: this.extraClasses.concat(ScopedStyle.className(AlertContent))
+}

packages/live-web-view/content/style/alert.css

@@ -0,0 +1,27 @@
+&Alert{
+    @apply flex flex-row items-start bg-white dark:bg-[#111] text-black dark:text-[#e1e1e1] rounded shadow-md max-w-sm overflow-hidden;
+    @apply border border-[#313131] p-4 px-4;
+}
+&AlertContent{
+    @apply text-left;
+    flex-grow: 1;
+}
+&Alert&.type-error{
+    @apply border-[rgb(162,32,40,0.80)];
+}
+&Alert&.type-error heading{
+    @apply text-[rgb(162,32,40)];
+}
+figure{
+    @apply p-1 pr-4;
+    flex-shrink: 0;
+}
+&Alert&.type-error figure svg{
+    @apply text-[rgb(162,32,40)];
+}
+section{
+    @apply text-base text-left leading-snug;
+}
+section header{
+    @apply mb-1;
+}