geoff
/
stylelite
mirror of https://github.com/n2geoff/stylelite.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

basic dialog styles

This commit is contained in:
Geoff Doty 2024-05-11 15:12:53 -04:00
parent e24aece5f7
commit 366839e298
3 changed files with 74 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

53
examples/overview.html
View File

@ -7,6 +7,10 @@
<title>Stylelite</title> <title>Stylelite</title>
<link rel="stylesheet" href="../src/stylelite.css"> <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"> <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> </head>
<body> <body>
<main> <main>
@ -20,7 +24,7 @@
<li><a href="#type">Typography</a></li> <li><a href="#type">Typography</a></li>
<li><a href="#forms">Forms</a></li> <li><a href="#forms">Forms</a></li>
<li><a href="#table">Tables</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="#components">Components</a></li>
<li><a href="#utilities">Utilities</a></li> <li><a href="#utilities">Utilities</a></li>
<li></li> <li></li>
@ -234,9 +238,47 @@
</table> </table>
</section> </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> <section>
<a name="grid"></a> <a name="grid"></a>
<h2>Grid System</h2> <h2>Layout Systems</h2>
<div> <div>
The flex-based grid system dynamically divides content on the number of 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>. child elements under <code>row</code>, be that a plain <code>div</code>(auto) or <code>col-*</code>.
@ -349,5 +391,12 @@
</table> </table>
</section> </section>
</main> </main>
<script>
const $ = document.querySelector.bind(document);
$("#dialog").addEventListener("click", () => (
$("dialog").showModal()
));
</script>
</body> </body>
</html> </html>

12
src/extra/dialog.css Normal file
View File

@ -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%;
}

11
src/stylelite.css
View File

@ -360,7 +360,18 @@ nav.navbar {
nav.navbar a {color: var(--white)} 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 */ /* Grid System */