mirror_css/nes.css
1
0
Fork 0
mirror of https://github.com/nostalgic-css/NES.css.git synced 2025-09-03 02:53:31 +02:00
Code Issues Releases Wiki Activity

feat(index.html): add button to open dialog

Browse Source
This commit is contained in:
BcRikko
2019-02-11 10:54:36 +09:00
parent 85984df87d
commit 11b770982e
2 changed files with 113 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
demo/style.css
View File

@@ -147,17 +147,8 @@ div.containers > .nes-container {
bottom: -4px; bottom: -4px;
} }
#dialogs { #dialogs > section + section {
display: flex; margin-top: 1.5rem;
flex-flow: row wrap;
align-items: baseline;
}
.nes-dialog {
z-index: 1;
flex: 1;
position: relative;
margin: 0em 2em 1em 0;
} }
#texts { #texts {

145
index.html
View File

@@ -109,44 +109,121 @@
<section class="nes-container with-title"> <section class="nes-container with-title">
<h2 class="title">Dialogs</h2> <h2 class="title">Dialogs</h2>
<div id="dialogs">
<dialog class="nes-dialog" open> <section id="dialogs">
<p class="title">Dialog</p> <section>
<p>Alert: this is a dialog.</p> <button type="button" class="nes-btn is-primary" onclick="document.getElementById('dialog-default').showModal();">Open dialog</button>
</dialog> <dialog class="nes-dialog" id="dialog-default">
<dialog class="nes-dialog is-dark" open> <form method="dialog">
<p class="title">Dialog</p> <p class="title">Dialog</p>
<p>Alert: this is a dialog.</p> <p>Alert: this is a dialog.</p>
</dialog> <menu class="dialog-menu">
<dialog class="nes-dialog is-rounded" open> <button class="nes-btn">Cancel</button>
<p class="title">Dialog</p> <button class="nes-btn is-primary">Confirm</button>
<p>Alert: this is a dialog.</p> </menu>
</dialog> </form>
<dialog class="nes-dialog is-rounded is-dark" open> </dialog>
<p class="title">Dialog</p> </section>
<p>Alert: this is a dialog.</p> <section>
</dialog> <button type="button" class="nes-btn is-primary" onclick="document.getElementById('dialog-dark').showModal();">Open dark dialog</button>
</div> <dialog class="nes-dialog is-dark" id="dialog-dark">
<form method="dialog">
<p class="title">Dark dialog</p>
<p>Alert: this is a dialog.</p>
<menu class="dialog-menu">
<button class="nes-btn">Cancel</button>
<button class="nes-btn is-primary">Confirm</button>
</menu>
</form>
</dialog>
</section>
<section>
<button type="button" class="nes-btn is-primary" onclick="document.getElementById('dialog-rounded').showModal();">Open rounded dialog</button>
<dialog class="nes-dialog is-rounded" id="dialog-rounded">
<form method="dialog">
<p class="title">Rounded dialog</p>
<p>Alert: this is a dialog.</p>
<menu class="dialog-menu">
<button class="nes-btn">Cancel</button>
<button class="nes-btn is-primary">Confirm</button>
</menu>
</form>
</dialog>
</section>
<section>
<button type="button" class="nes-btn is-primary" onclick="document.getElementById('dialog-dark-rounded').showModal();">Open dark and rounded dialog</button>
<dialog class="nes-dialog is-dark is-rounded" id="dialog-dark-rounded">
<form method="dialog">
<p class="title">Dark and Rounded dialog</p>
<p>Alert: this is a dialog.</p>
<menu class="dialog-menu">
<button class="nes-btn">Cancel</button>
<button class="nes-btn is-primary">Confirm</button>
</menu>
</form>
</dialog>
</section>
</section>
<button type="button" class="nes-btn is-error show-code" id="show-dialogs-code">&lt;&gt;</button> <button type="button" class="nes-btn is-error show-code" id="show-dialogs-code">&lt;&gt;</button>
<span class="nes-balloon from-right copied" id="copied-dialogs">Copied!</span> <span class="nes-balloon from-right copied" id="copied-dialogs">Copied!</span>
</section> </section>
<section class="nes-container code" id="code-dialogs"> <section class="nes-container code" id="code-dialogs">
<pre class="sample-code"><code class="html">&lt;dialog class=&quot;nes-dialog&quot; open&gt; <pre class="sample-code"><code class="html">&lt;section&gt;
&lt;p class=&quot;title&quot;&gt;Dialog&lt;/p&gt; &lt;button type=&quot;button&quot; class=&quot;nes-btn is-primary&quot; onclick=&quot;document.getElementById(&#039;dialog-default&#039;).showModal();&quot;&gt;Open dialog&lt;/button&gt;
&lt;p&gt;Alert: this is a dialog.&lt;/p&gt; &lt;dialog class=&quot;nes-dialog&quot; id=&quot;dialog-default&quot;&gt;
&lt;/dialog&gt; &lt;form method=&quot;dialog&quot;&gt;
&lt;dialog class=&quot;nes-dialog is-dark&quot; open&gt; &lt;p class=&quot;title&quot;&gt;Dialog&lt;/p&gt;
&lt;p class=&quot;title&quot;&gt;Dialog&lt;/p&gt; &lt;p&gt;Alert: this is a dialog.&lt;/p&gt;
&lt;p&gt;Alert: this is a dialog.&lt;/p&gt; &lt;menu class=&quot;dialog-menu&quot;&gt;
&lt;/dialog&gt; &lt;button class=&quot;nes-btn&quot;&gt;Cancel&lt;/button&gt;
&lt;dialog class=&quot;nes-dialog is-rounded&quot; open&gt; &lt;button class=&quot;nes-btn is-primary&quot;&gt;Confirm&lt;/button&gt;
&lt;p class=&quot;title&quot;&gt;Dialog&lt;/p&gt; &lt;/menu&gt;
&lt;p&gt;Alert: this is a dialog.&lt;/p&gt; &lt;/form&gt;
&lt;/dialog&gt; &lt;/dialog&gt;
&lt;dialog class=&quot;nes-dialog is-rounded is-dark&quot; open&gt; &lt;/section&gt;
&lt;p class=&quot;title&quot;&gt;Dialog&lt;/p&gt;
&lt;p&gt;Alert: this is a dialog.&lt;/p&gt; &lt;section&gt;
&lt;/dialog&gt;</code></pre> &lt;button type=&quot;button&quot; class=&quot;nes-btn is-primary&quot; onclick=&quot;document.getElementById(&#039;dialog-dark&#039;).showModal();&quot;&gt;Open dark dialog&lt;/button&gt;
&lt;dialog class=&quot;nes-dialog is-dark&quot; id=&quot;dialog-dark&quot;&gt;
&lt;form method=&quot;dialog&quot;&gt;
&lt;p class=&quot;title&quot;&gt;Dark dialog&lt;/p&gt;
&lt;p&gt;Alert: this is a dialog.&lt;/p&gt;
&lt;menu class=&quot;dialog-menu&quot;&gt;
&lt;button class=&quot;nes-btn&quot;&gt;Cancel&lt;/button&gt;
&lt;button class=&quot;nes-btn is-primary&quot;&gt;Confirm&lt;/button&gt;
&lt;/menu&gt;
&lt;/form&gt;
&lt;/dialog&gt;
&lt;/section&gt;
&lt;section&gt;
&lt;button type=&quot;button&quot; class=&quot;nes-btn is-primary&quot; onclick=&quot;document.getElementById(&#039;dialog-rounded&#039;).showModal();&quot;&gt;Open rounded dialog&lt;/button&gt;
&lt;dialog class=&quot;nes-dialog is-rounded&quot; id=&quot;dialog-rounded&quot;&gt;
&lt;form method=&quot;dialog&quot;&gt;
&lt;p class=&quot;title&quot;&gt;Rounded dialog&lt;/p&gt;
&lt;p&gt;Alert: this is a dialog.&lt;/p&gt;
&lt;menu class=&quot;dialog-menu&quot;&gt;
&lt;button class=&quot;nes-btn&quot;&gt;Cancel&lt;/button&gt;
&lt;button class=&quot;nes-btn is-primary&quot;&gt;Confirm&lt;/button&gt;
&lt;/menu&gt;
&lt;/form&gt;
&lt;/dialog&gt;
&lt;/section&gt;
&lt;section&gt;
&lt;button type=&quot;button&quot; class=&quot;nes-btn is-primary&quot; onclick=&quot;document.getElementById(&#039;dialog-dark-rounded&#039;).showModal();&quot;&gt;Open dark and rounded dialog&lt;/button&gt;
&lt;dialog class=&quot;nes-dialog is-dark is-rounded&quot; id=&quot;dialog-dark-rounded&quot;&gt;
&lt;form method=&quot;dialog&quot;&gt;
&lt;p class=&quot;title&quot;&gt;Dark and Rounded dialog&lt;/p&gt;
&lt;p&gt;Alert: this is a dialog.&lt;/p&gt;
&lt;menu class=&quot;dialog-menu&quot;&gt;
&lt;button class=&quot;nes-btn&quot;&gt;Cancel&lt;/button&gt;
&lt;button class=&quot;nes-btn is-primary&quot;&gt;Confirm&lt;/button&gt;
&lt;/menu&gt;
&lt;/form&gt;
&lt;/dialog&gt;
&lt;/section&gt;</code></pre>
<button type="button" class="nes-btn show-code copy" onClick="copyToClipboard('dialogs')">Copy</button> <button type="button" class="nes-btn show-code copy" onClick="copyToClipboard('dialogs')">Copy</button>
</section> </section>