From 366839e29886af404a65d57aa311116305ee708a Mon Sep 17 00:00:00 2001
From: Geoff Doty <n2geoff@gmail.com>
Date: Sat, 11 May 2024 15:12:53 -0400
Subject: [PATCH] basic dialog styles

---
 examples/overview.html | 53 ++++++++++++++++++++++++++++++++++++++++--
 src/extra/dialog.css   | 12 ++++++++++
 src/stylelite.css      | 11 +++++++++
 3 files changed, 74 insertions(+), 2 deletions(-)
 create mode 100644 src/extra/dialog.css
diff --git a/examples/overview.html b/examples/overview.html
index 4170d3d..a0b9476 100644
--- a/examples/overview.html
+++ b/examples/overview.html
@@ -7,6 +7,10 @@
     <title>Stylelite</title>
     <link rel="stylesheet" href="../src/stylelite.css">
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/feather-icons-css@1.2.0/css/feather.min.css">
+    <style>
+        .fill {height: 100%; width: 100%}
+        .grid-center {align-self: center; justify-self: center;}
+    </style>
 </head>
 <body>
     <main>
@@ -20,7 +24,7 @@
                     <li><a href="#type">Typography</a></li>
                     <li><a href="#forms">Forms</a></li>
                     <li><a href="#table">Tables</a></li>
-                    <li><a href="#grid">Grid Layout</a></li>
+                    <li><a href="#grid">Layout</a></li>
                     <li><a href="#components">Components</a></li>
                     <li><a href="#utilities">Utilities</a></li>
                     <li></li>
@@ -234,9 +238,47 @@
             </table>
         </section>
 
+        <section>
+            <a name="components"></a>
+            <h2 class="underline">Components</h2>
+
+            <div class="grid">
+                <div>
+                    <section class="border">
+                        <header style="background: var(--theme); padding: 0 1rem; color: #FFF">
+                            <strong>Dialogs</strong>
+                        </header>
+                        <main style="background: #FFF">
+                            The native dialog
+                            element is supported
+                        </main>
+                        <footer class="grid">
+                            <button class="" id="dialog">Open Modal</button>
+                        </footer>
+                    </section>
+                </div>
+                <article class="grid">
+                    <div class="grid-center">
+                        More...
+                    </div>
+                </article>
+                <article class="grid">
+                    <div class="grid-center">
+                        More...
+                    </div>
+                </article>
+            </div>
+            <dialog>
+                <p>Default Dialog Modal</p>
+                <form method="dialog">
+                    <button>Close</button>
+                </form>
+            </dialog>
+        </section>
+
         <section>
             <a name="grid"></a>
-            <h2>Grid System</h2>
+            <h2>Layout Systems</h2>
             <div>
                 The flex-based grid system dynamically divides content on the number of
                 child elements under <code>row</code>, be that a plain <code>div</code>(auto) or <code>col-*</code>.
@@ -349,5 +391,12 @@
             </table>
         </section>
     </main>
+    <script>
+        const $ = document.querySelector.bind(document);
+
+        $("#dialog").addEventListener("click", () => (
+            $("dialog").showModal()
+        ));
+    </script>
 </body>
 </html>
\ No newline at end of file
diff --git a/src/extra/dialog.css b/src/extra/dialog.css
new file mode 100644
index 0000000..4db5fbd
--- /dev/null
+++ b/src/extra/dialog.css
@@ -0,0 +1,12 @@
+/* Dialog */
+
+dialog[open] {
+    margin: auto;
+}
+
+dialog {
+    border: 1px solid var(--theme);
+    box-shadow: 0 0 #0000, 0 0 #0000, 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+    padding: calc(var(--size) * 2);
+    max-width: 85%;
+}
\ No newline at end of file
diff --git a/src/stylelite.css b/src/stylelite.css
index bed8285..2c9cfdb 100644
--- a/src/stylelite.css
+++ b/src/stylelite.css
@@ -360,7 +360,18 @@ nav.navbar {
 
 nav.navbar a {color: var(--white)}
 
+/* Dialog */
 
+dialog[open] {
+    margin: auto;
+}
+
+dialog {
+    border: 1px solid var(--theme);
+    box-shadow: 0 0 #0000, 0 0 #0000, 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+    padding: calc(var(--size) * 2);
+    max-width: 85%;
+}
 
 /* Grid System */
 
