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

feat(index.html): add dialogs/texts to index. changed table to tables

Browse Source
This commit is contained in:
Igor Guastalla de Lima
2019-02-08 21:58:59 -02:00
parent c7d695fbd4
commit 615cc576e8
2 changed files with 97 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
demo/style.css
View File

@@ -56,7 +56,7 @@ div.containers > .nes-container {
margin-bottom: 1rem; margin-bottom: 1rem;
} }
#table { #tables {
margin: 35px auto; margin: 35px auto;
} }
@@ -147,6 +147,27 @@ div.containers > .nes-container {
bottom: -4px; bottom: -4px;
} }
#dialogs {
display: flex;
flex-flow: row wrap;
align-items: baseline;
}
.nes-dialog {
z-index: 1;
flex: 1;
position: relative;
margin: 0em 2em 1em 0;
}
#texts {
display: inline-block;
}
.nes-text {
margin-right: 2em;
}
@media screen and (max-width: 1280px) { @media screen and (max-width: 1280px) {
.code p:first-child { .code p:first-child {
width: 99%; width: 99%;

82
index.html
View File

@@ -106,6 +106,50 @@
&lt;/div&gt;</code></pre> &lt;/div&gt;</code></pre>
<button type="button" class="nes-btn show-code copy" onClick="copyToClipboard('containers')">Copy</button> <button type="button" class="nes-btn show-code copy" onClick="copyToClipboard('containers')">Copy</button>
</section> </section>
<section class="nes-container with-title">
<h2 class="title">Dialogs</h2>
<div id="dialogs">
<dialog class="nes-dialog" open>
<p class="title">Dialog</p>
<p>Alert: this is a dialog.</p>
</dialog>
<dialog class="nes-dialog is-dark" open>
<p class="title">Dialog</p>
<p>Alert: this is a dialog.</p>
</dialog>
<dialog class="nes-dialog is-rounded" open>
<p class="title">Dialog</p>
<p>Alert: this is a dialog.</p>
</dialog>
<dialog class="nes-dialog is-rounded is-dark" open>
<p class="title">Dialog</p>
<p>Alert: this is a dialog.</p>
</dialog>
</div>
<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>
</section>
<section class="nes-container code" id="code-dialogs">
<pre class="sample-code"><code class="html">&lt;dialog class=&quot;nes-dialog&quot; open&gt;
&lt;p class=&quot;title&quot;&gt;Dialog&lt;/p&gt;
&lt;p&gt;Alert: this is a dialog.&lt;/p&gt;
&lt;/dialog&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&gt;Alert: this is a dialog.&lt;/p&gt;
&lt;/dialog&gt;
&lt;dialog class=&quot;nes-dialog is-rounded&quot; open&gt;
&lt;p class=&quot;title&quot;&gt;Dialog&lt;/p&gt;
&lt;p&gt;Alert: this is a dialog.&lt;/p&gt;
&lt;/dialog&gt;
&lt;dialog class=&quot;nes-dialog is-rounded is-dark&quot; open&gt;
&lt;p class=&quot;title&quot;&gt;Dialog&lt;/p&gt;
&lt;p&gt;Alert: this is a dialog.&lt;/p&gt;
&lt;/dialog&gt;</code></pre>
<button type="button" class="nes-btn show-code copy" onClick="copyToClipboard('dialogs')">Copy</button>
</section>
<section class="nes-container with-title"> <section class="nes-container with-title">
<h2 class="title">Radios</h2> <h2 class="title">Radios</h2>
<div id="radios"> <div id="radios">
@@ -383,8 +427,31 @@
</section> </section>
<section class="nes-container with-title"> <section class="nes-container with-title">
<h2 class="title">Table</h2> <h2 class="title">Texts</h2>
<div class="nes-table-responsive" id="table"> <div id="texts">
<span class="nes-text">Normal</span>
<span class="nes-text is-primary">Primary</span>
<span class="nes-text is-success">Success</span>
<span class="nes-text is-warning">Warning</span>
<span class="nes-text is-error">Error</span>
<span class="nes-text is-disabled">Disabled</span>
</div>
<button type="button" class="nes-btn is-error show-code" id="show-texts-code">&lt;&gt;</button>
<span class="nes-balloon from-right copied" id="copied-texts">Copied!</span>
</section>
<section class="nes-container code" id="code-texts">
<pre class="sample-code"><code class="html">&lt;span class=&quot;nes-text&quot;&gt;Normal&lt;/span&gt;
&lt;span class=&quot;nes-text is-primary&quot;&gt;Primary&lt;/span&gt;
&lt;span class=&quot;nes-text is-success&quot;&gt;Success&lt;/span&gt;
&lt;span class=&quot;nes-text is-warning&quot;&gt;Warning&lt;/span&gt;
&lt;span class=&quot;nes-text is-error&quot;&gt;Error&lt;/span&gt;
&lt;span class=&quot;nes-text is-disabled&quot;&gt;Disabled&lt;/span&gt;</code></pre>
<button type="button" class="nes-btn show-code copy" onClick="copyToClipboard('texts')">Copy</button>
</section>
<section class="nes-container with-title">
<h2 class="title">Tables</h2>
<div class="nes-table-responsive" id="tables">
<table class="nes-table is-bordered is-centered"> <table class="nes-table is-bordered is-centered">
<thead> <thead>
<tr> <tr>
@@ -436,10 +503,10 @@
</tbody> </tbody>
</table> </table>
</div> </div>
<button type="button" class="nes-btn is-error show-code" id="show-table-code">&lt;&gt;</button> <button type="button" class="nes-btn is-error show-code" id="show-tables-code">&lt;&gt;</button>
<span class="nes-balloon from-right copied" id="copied-table">Copied!</span> <span class="nes-balloon from-right copied" id="copied-tables">Copied!</span>
</section> </section>
<section class="nes-container code" id="code-table"> <section class="nes-container code" id="code-tables">
<pre class="sample-code"><code class="html">&lt;div class=&quot;nes-table-responsive&quot;&gt; <pre class="sample-code"><code class="html">&lt;div class=&quot;nes-table-responsive&quot;&gt;
&lt;table class=&quot;nes-table is-bordered is-centered&quot;&gt; &lt;table class=&quot;nes-table is-bordered is-centered&quot;&gt;
&lt;thead&gt; &lt;thead&gt;
@@ -492,7 +559,7 @@
&lt;/tbody&gt; &lt;/tbody&gt;
&lt;/table&gt; &lt;/table&gt;
&lt;/div&gt;</code></pre> &lt;/div&gt;</code></pre>
<button type="button" class="nes-btn show-code copy" onClick="copyToClipboard('table')">Copy</button> <button type="button" class="nes-btn show-code copy" onClick="copyToClipboard('tables')">Copy</button>
</section> </section>
<section class="nes-container with-title"> <section class="nes-container with-title">
@@ -898,7 +965,8 @@
}); });
var elements = ['buttons', 'containers', 'radios', 'checkboxes', 'avatars', 'form', var elements = ['buttons', 'containers', 'radios', 'checkboxes', 'avatars', 'form',
'balloons', 'lists', 'table', 'progress', 'badges', 'reaction', 'sns', 'others', 'controllers']; 'balloons', 'lists', 'tables', 'progress', 'badges', 'reaction', 'sns', 'others',
'controllers', 'dialogs', 'texts'];
for (var i = 0; i < elements.length; i++) { for (var i = 0; i < elements.length; i++) {
let showEl = document.querySelector("#show-" + elements[i] + "-code"); let showEl = document.querySelector("#show-" + elements[i] + "-code");
let codeEl = document.querySelector("#code-" + elements[i]); let codeEl = document.querySelector("#code-" + elements[i]);