mirror_css/nes.css
1
0
Fork 0
mirror of https://github.com/nostalgic-css/NES.css.git synced 2025-08-31 17:51:46 +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;
}
#table {
#tables {
margin: 35px auto;
}
@@ -147,6 +147,27 @@ div.containers > .nes-container {
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) {
.code p:first-child {
width: 99%;

82
index.html
View File

@@ -106,6 +106,50 @@
&lt;/div&gt;</code></pre>
<button type="button" class="nes-btn show-code copy" onClick="copyToClipboard('containers')">Copy</button>
</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">
<h2 class="title">Radios</h2>
<div id="radios">
@@ -383,8 +427,31 @@
</section>
<section class="nes-container with-title">
<h2 class="title">Table</h2>
<div class="nes-table-responsive" id="table">
<h2 class="title">Texts</h2>
<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">
<thead>
<tr>
@@ -436,10 +503,10 @@
</tbody>
</table>
</div>
<button type="button" class="nes-btn is-error show-code" id="show-table-code">&lt;&gt;</button>
<span class="nes-balloon from-right copied" id="copied-table">Copied!</span>
<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-tables">Copied!</span>
</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;
&lt;table class=&quot;nes-table is-bordered is-centered&quot;&gt;
&lt;thead&gt;
@@ -492,7 +559,7 @@
&lt;/tbody&gt;
&lt;/table&gt;
&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 class="nes-container with-title">
@@ -898,7 +965,8 @@
});
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++) {
let showEl = document.querySelector("#show-" + elements[i] + "-code");
let codeEl = document.querySelector("#code-" + elements[i]);