mirror of
https://github.com/nostalgic-css/NES.css.git
synced 2025-08-28 16:30:09 +02:00
feat: fix index.html
remove p element from code and add highlight.js
This commit is contained in:
BcRikko
@@ -1,2 +1,3 @@
|
||||
**/*.html
|
||||
**/*.md
|
||||
demo/lib/*
|
||||
|
||||
115
demo/lib/highlight-theme.css
Normal file
115
demo/lib/highlight-theme.css
Normal file
@@ -0,0 +1,115 @@
|
||||
/*
|
||||
* Visual Studio 2015 dark style
|
||||
* Author: Nicolas LLOBERA <nllobera@gmail.com>
|
||||
*/
|
||||
|
||||
.hljs {
|
||||
display: block;
|
||||
overflow-x: auto;
|
||||
padding: 0.5em;
|
||||
background: #1E1E1E;
|
||||
color: #DCDCDC;
|
||||
}
|
||||
|
||||
.hljs-keyword,
|
||||
.hljs-literal,
|
||||
.hljs-symbol,
|
||||
.hljs-name {
|
||||
color: #569CD6;
|
||||
}
|
||||
.hljs-link {
|
||||
color: #569CD6;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.hljs-built_in,
|
||||
.hljs-type {
|
||||
color: #4EC9B0;
|
||||
}
|
||||
|
||||
.hljs-number,
|
||||
.hljs-class {
|
||||
color: #B8D7A3;
|
||||
}
|
||||
|
||||
.hljs-string,
|
||||
.hljs-meta-string {
|
||||
color: #D69D85;
|
||||
}
|
||||
|
||||
.hljs-regexp,
|
||||
.hljs-template-tag {
|
||||
color: #9A5334;
|
||||
}
|
||||
|
||||
.hljs-subst,
|
||||
.hljs-function,
|
||||
.hljs-title,
|
||||
.hljs-params,
|
||||
.hljs-formula {
|
||||
color: #DCDCDC;
|
||||
}
|
||||
|
||||
.hljs-comment,
|
||||
.hljs-quote {
|
||||
color: #57A64A;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.hljs-doctag {
|
||||
color: #608B4E;
|
||||
}
|
||||
|
||||
.hljs-meta,
|
||||
.hljs-meta-keyword,
|
||||
.hljs-tag {
|
||||
color: #9B9B9B;
|
||||
}
|
||||
|
||||
.hljs-variable,
|
||||
.hljs-template-variable {
|
||||
color: #BD63C5;
|
||||
}
|
||||
|
||||
.hljs-attr,
|
||||
.hljs-attribute,
|
||||
.hljs-builtin-name {
|
||||
color: #9CDCFE;
|
||||
}
|
||||
|
||||
.hljs-section {
|
||||
color: gold;
|
||||
}
|
||||
|
||||
.hljs-emphasis {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.hljs-strong {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/*.hljs-code {
|
||||
font-family:'Monospace';
|
||||
}*/
|
||||
|
||||
.hljs-bullet,
|
||||
.hljs-selector-tag,
|
||||
.hljs-selector-id,
|
||||
.hljs-selector-class,
|
||||
.hljs-selector-attr,
|
||||
.hljs-selector-pseudo {
|
||||
color: #D7BA7D;
|
||||
}
|
||||
|
||||
.hljs-addition {
|
||||
background-color: #144212;
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.hljs-deletion {
|
||||
background-color: #600;
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
}
|
||||
2
demo/lib/highlight.js
Normal file
2
demo/lib/highlight.js
Normal file
File diff suppressed because one or more lines are too long
@@ -96,64 +96,65 @@ div.containers > .nes-container {
|
||||
}
|
||||
|
||||
.show-code {
|
||||
font-size: .7em;
|
||||
height: 34px;
|
||||
position: absolute;
|
||||
top: -4px;
|
||||
right: -4px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
width: 40px;
|
||||
position: absolute;
|
||||
right: -4px;
|
||||
top: -4px;
|
||||
height: 34px;
|
||||
font-size: 0.7em;
|
||||
}
|
||||
|
||||
pre {
|
||||
white-space: normal;
|
||||
.sample-code {
|
||||
margin: 0;
|
||||
}
|
||||
.sample-code > code {
|
||||
padding: 1em 2em;
|
||||
line-height: 2em;
|
||||
}
|
||||
|
||||
.code {
|
||||
display: none;
|
||||
font-size: .85em;
|
||||
color: #e76e55;
|
||||
background-color: rgba(45, 45, 45, .9);
|
||||
padding: 15px 0px 0px 15px;
|
||||
margin-top: -20px;
|
||||
box-sizing: border-box;
|
||||
display: none;
|
||||
padding: 15px 0 0 15px;
|
||||
margin-top: -20px;
|
||||
overflow: auto;
|
||||
font-size: 0.85em;
|
||||
color: #e76e55;
|
||||
background-color: rgba(45, 45, 45, 0.9);
|
||||
}
|
||||
|
||||
.copy {
|
||||
height: 34px;
|
||||
width: 58px;
|
||||
height: 34px;
|
||||
}
|
||||
|
||||
#form .nes-field, #form .field {
|
||||
#form .nes-field,
|
||||
#form .field {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.copied {
|
||||
position: absolute;
|
||||
bottom: 25px;
|
||||
padding: 10px;
|
||||
font-size: .7em;
|
||||
z-index: 2;
|
||||
right: 35px;
|
||||
color: #000;
|
||||
bottom: 25px;
|
||||
z-index: 2;
|
||||
display: none;
|
||||
padding: 10px;
|
||||
font-size: 0.7em;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.balloon .copied {
|
||||
bottom: -4px;
|
||||
right: 10px;
|
||||
}
|
||||
|
||||
.code p {
|
||||
width: 96%;
|
||||
bottom: -4px;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1280px) {
|
||||
.code p:first-child {
|
||||
padding-top: 2.7em;
|
||||
width: 99%;
|
||||
padding-top: 2.7em;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -171,8 +172,8 @@ pre {
|
||||
}
|
||||
|
||||
.code p {
|
||||
font-size: .8em;
|
||||
width: 100%;
|
||||
font-size: 0.8em;
|
||||
}
|
||||
|
||||
#code-avatars p {
|
||||
668
index.html
668
index.html
@@ -15,7 +15,10 @@
|
||||
|
||||
<link href="https://fonts.googleapis.com/css?family=Press+Start+2P" rel="stylesheet">
|
||||
<link href="https://unpkg.com/nes.css/css/nes.min.css" rel="stylesheet" />
|
||||
<link href="./style.css" rel="stylesheet" />
|
||||
<link href="./demo/style.css" rel="stylesheet" />
|
||||
<script async src="./demo/lib/highlight.js"></script>
|
||||
<link async href="./demo/lib/highlight-theme.css" rel="stylesheet" />
|
||||
<script>hljs.initHighlightingOnLoad();</script>
|
||||
|
||||
<meta property="og:type" content="website" />
|
||||
<meta property="og:title" content="NES.css" />
|
||||
@@ -56,15 +59,14 @@
|
||||
<span class="nes-balloon from-right copied" id="copied-buttons">Copied!</span>
|
||||
</section>
|
||||
<section class="nes-container code" id="code-buttons">
|
||||
<pre><code>
|
||||
<p><button type="button" class="nes-btn">Normal</button></p>
|
||||
<p><button type="button" class="nes-btn is-primary">Primary</button></p>
|
||||
<p><button type="button" class="nes-btn is-success">Success</button></p>
|
||||
<p><button type="button" class="nes-btn is-warning">Warning</button></p>
|
||||
<p><button type="button" class="nes-btn is-error">Error</button></p>
|
||||
<p><button type="button" class="nes-btn is-disabled">Disabled</button></p>
|
||||
<button type="button" class="nes-btn show-code copy" onClick="copyToClipboard('buttons')">Copy</button>
|
||||
</code></pre>
|
||||
<pre class="sample-code"><code class="html"><button type="button" class="nes-btn">Normal</button>
|
||||
<button type="button" class="nes-btn is-primary">Primary</button>
|
||||
<button type="button" class="nes-btn is-success">Success</button>
|
||||
<button type="button" class="nes-btn is-warning">Warning</button>
|
||||
<button type="button" class="nes-btn is-error">Error</button>
|
||||
<button type="button" class="nes-btn is-disabled">Disabled</button>
|
||||
<button type="button" class="nes-btn show-code copy" onClick="copyToClipboard('buttons')">Copy</button>
|
||||
</code></pre>
|
||||
</section>
|
||||
|
||||
<section class="nes-container with-title">
|
||||
@@ -89,23 +91,21 @@
|
||||
<span class="nes-balloon from-right copied" id="copied-containers">Copied!</span>
|
||||
</section>
|
||||
<section class="nes-container code" id="code-containers">
|
||||
<pre><code>
|
||||
<p><div class="nes-container with-title is-centered">
|
||||
<p class="title">Container.is-centered</p>
|
||||
<p>Good morning. Thou hast had a good night's sleep, I hope.</p>
|
||||
</div></p>
|
||||
<p><div class="nes-container is-dark with-title">
|
||||
<p class="title">Container.is-dark</p>
|
||||
<p>Good morning. Thou hast had a good night's sleep, I hope.</p>
|
||||
</div></p>
|
||||
<p><div class="nes-container is-rounded">
|
||||
<p>Good morning. Thou hast had a good night's sleep, I hope.</p>
|
||||
</div>
|
||||
<p><div class="nes-container is-rounded is-dark">
|
||||
<p>Good morning. Thou hast had a good night's sleep, I hope.</p>
|
||||
</div>
|
||||
<button type="button" class="nes-btn show-code copy" onClick="copyToClipboard('containers')">Copy</button>
|
||||
</code></pre>
|
||||
<pre class="sample-code"><code class="html"><div class="nes-container with-title is-centered">
|
||||
<p class="title">Container.is-centered</p>
|
||||
<p>Good morning. Thou hast had a good night's sleep, I hope.</p>
|
||||
</div>
|
||||
<div class="nes-container is-dark with-title">
|
||||
<p class="title">Container.is-dark</p>
|
||||
<p>Good morning. Thou hast had a good night's sleep, I hope.</p>
|
||||
</div>
|
||||
<div class="nes-container is-rounded">
|
||||
<p>Good morning. Thou hast had a good night's sleep, I hope.</p>
|
||||
</div>
|
||||
<div class="nes-container is-rounded is-dark">
|
||||
<p>Good morning. Thou hast had a good night's sleep, I hope.</p>
|
||||
</div></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">Radios</h2>
|
||||
@@ -123,17 +123,15 @@
|
||||
<span class="nes-balloon from-right copied" id="copied-radios">Copied!</span>
|
||||
</section>
|
||||
<section class="nes-container code" id="code-radios">
|
||||
<pre><code>
|
||||
<p><label>
|
||||
<input type="radio" class="nes-radio" name="answer" checked />
|
||||
<span>Yes</span>
|
||||
</label></p>
|
||||
<p><label>
|
||||
<input type="radio" class="nes-radio" name="answer" />
|
||||
<span>No</span>
|
||||
</label></p>
|
||||
<button type="button" class="nes-btn show-code copy" onClick="copyToClipboard('radios')">Copy</button>
|
||||
</code></pre>
|
||||
<pre class="sample-code"><code class="html"><label>
|
||||
<input type="radio" class="nes-radio" name="answer" checked />
|
||||
<span>Yes</span>
|
||||
</label>
|
||||
<label>
|
||||
<input type="radio" class="nes-radio" name="answer" />
|
||||
<span>No</span>
|
||||
</label></code></pre>
|
||||
<button type="button" class="nes-btn show-code copy" onClick="copyToClipboard('radios')">Copy</button>
|
||||
</section>
|
||||
|
||||
<section class="nes-container with-title">
|
||||
@@ -152,17 +150,15 @@
|
||||
<span class="nes-balloon from-right copied" id="copied-checkboxes">Copied!</span>
|
||||
</section>
|
||||
<section class="nes-container code" id="code-checkboxes">
|
||||
<pre><code>
|
||||
<p><label>
|
||||
<input type="checkbox" class="nes-checkbox" checked />
|
||||
<span>Enable</span>
|
||||
</label></p>
|
||||
<p><label>
|
||||
<input type="checkbox" class="nes-checkbox is-dark" checked />
|
||||
<span>Dark</span>
|
||||
</label></p>
|
||||
<button type="button" class="nes-btn show-code copy" onClick="copyToClipboard('checkboxes')">Copy</button>
|
||||
</code></pre>
|
||||
<pre class="sample-code"><code class="html"><label>
|
||||
<input type="checkbox" class="nes-checkbox" checked />
|
||||
<span>Enable</span>
|
||||
</label>
|
||||
<label>
|
||||
<input type="checkbox" class="nes-checkbox is-dark" checked />
|
||||
<span>Dark</span>
|
||||
</label></code></pre>
|
||||
<button type="button" class="nes-btn show-code copy" onClick="copyToClipboard('checkboxes')">Copy</button>
|
||||
</section>
|
||||
|
||||
<section class="nes-container with-title">
|
||||
@@ -181,17 +177,15 @@
|
||||
<span class="nes-balloon from-right copied" id="copied-avatars">Copied!</span>
|
||||
</section>
|
||||
<section class="nes-container code" id="code-avatars">
|
||||
<pre><code>
|
||||
<p><img src="https://www.gravatar.com/avatar" class="nes-avatar is-small"></p>
|
||||
<p><img src="https://www.gravatar.com/avatar" class="nes-avatar"></p>
|
||||
<p><img src="https://www.gravatar.com/avatar" class="nes-avatar is-medium"></p>
|
||||
<p><img src="https://www.gravatar.com/avatar" class="nes-avatar is-large"></p>
|
||||
<p><img src="https://www.gravatar.com/avatar" class="nes-avatar is-rounded"></p>
|
||||
<p><img src="https://www.gravatar.com/avatar" class="nes-avatar is-small is-rounded"></p>
|
||||
<p><img src="https://www.gravatar.com/avatar" class="nes-avatar is-medium is-rounded"></p>
|
||||
<p><img src="https://www.gravatar.com/avatar" class="nes-avatar is-large is-rounded"></p>
|
||||
<button type="button" class="nes-btn show-code copy" onClick="copyToClipboard('avatars')">Copy</button>
|
||||
</code></pre>
|
||||
<pre class="sample-code"><code class="html"><img src="https://www.gravatar.com/avatar" class="nes-avatar is-small">
|
||||
<img src="https://www.gravatar.com/avatar" class="nes-avatar">
|
||||
<img src="https://www.gravatar.com/avatar" class="nes-avatar is-medium">
|
||||
<img src="https://www.gravatar.com/avatar" class="nes-avatar is-large">
|
||||
<img src="https://www.gravatar.com/avatar" class="nes-avatar is-rounded">
|
||||
<img src="https://www.gravatar.com/avatar" class="nes-avatar is-small is-rounded">
|
||||
<img src="https://www.gravatar.com/avatar" class="nes-avatar is-medium is-rounded">
|
||||
<img src="https://www.gravatar.com/avatar" class="nes-avatar is-large is-rounded"></code></pre>
|
||||
<button type="button" class="nes-btn show-code copy" onClick="copyToClipboard('avatars')">Copy</button>
|
||||
</section>
|
||||
|
||||
<section class="form nes-container with-title">
|
||||
@@ -255,59 +249,58 @@
|
||||
<span class="nes-balloon from-right copied" id="copied-form">Copied!</span>
|
||||
</section>
|
||||
<section class="nes-container code" id="code-form">
|
||||
<pre><code>
|
||||
<p><div class="nes-field">
|
||||
<label for="name_field">Your name</label>
|
||||
<input type="text" id="name_field" class="nes-input">
|
||||
</div></p>
|
||||
<p><div class="nes-field is-inline">
|
||||
<label for="inline_field">.input.is-success</label>
|
||||
<input type="text" id="inline_field" class="nes-input is-success" placeholder="NES.css">
|
||||
</div></p>
|
||||
<p><div class="nes-field is-inline">
|
||||
<label for="warning_field">.input.is-warning</label>
|
||||
<input type="text" id="warning_field" class="nes-input is-warning" placeholder="8bit.css">
|
||||
</div></p>
|
||||
<p><div class="nes-field is-inline">
|
||||
<label for="error_field">.input.is-error</label>
|
||||
<input type="text" id="error_field" class="nes-input is-error" placeholder="awesome.css">
|
||||
</div></p>
|
||||
<p><div class="field">
|
||||
<label for="textarea_field">Textarea</label>
|
||||
<textarea id="textarea_field" class="nes-textarea"></textarea>
|
||||
</div></p>
|
||||
<pre class="sample-code"><code class="html"><div class="nes-field">
|
||||
<label for="name_field">Your name</label>
|
||||
<input type="text" id="name_field" class="nes-input">
|
||||
</div>
|
||||
<div class="nes-field is-inline">
|
||||
<label for="inline_field">.input.is-success</label>
|
||||
<input type="text" id="inline_field" class="nes-input is-success" placeholder="NES.css">
|
||||
</div>
|
||||
<div class="nes-field is-inline">
|
||||
<label for="warning_field">.input.is-warning</label>
|
||||
<input type="text" id="warning_field" class="nes-input is-warning" placeholder="8bit.css">
|
||||
</div>
|
||||
<div class="nes-field is-inline">
|
||||
<label for="error_field">.input.is-error</label>
|
||||
<input type="text" id="error_field" class="nes-input is-error" placeholder="awesome.css">
|
||||
</div>
|
||||
<div class="field">
|
||||
<label for="textarea_field">Textarea</label>
|
||||
<textarea id="textarea_field" class="nes-textarea"></textarea>
|
||||
</div>
|
||||
|
||||
<p><div id="selects" class="selects">
|
||||
<div class="nes-select">
|
||||
<select required>
|
||||
<option value="" disabled selected hidden>Select...</option>
|
||||
<option value="0">To be</option>
|
||||
<option value="1">Not to be</option>
|
||||
</select>
|
||||
</div></p>
|
||||
<p><div class="nes-select is-success">
|
||||
<select required>
|
||||
<option value="" disabled selected hidden>Select...</option>
|
||||
<option value="0">To be</option>
|
||||
<option value="1">Not to be</option>
|
||||
</select>
|
||||
</div></p>
|
||||
<p><div class="nes-select is-warning">
|
||||
<select required>
|
||||
<option value="" disabled selected hidden>Select...</option>
|
||||
<option value="0">To be</option>
|
||||
<option value="1">Not to be</option>
|
||||
</select>
|
||||
</div></p>
|
||||
<p><div class="nes-select is-error">
|
||||
<select required>
|
||||
<option value="" disabled selected hidden>Select...</option>
|
||||
<option value="0">To be</option>
|
||||
<option value="1">Not to be</option>
|
||||
</select>
|
||||
</div></p>
|
||||
<button type="button" class="nes-btn show-code copy" onClick="copyToClipboard('form')">Copy</button>
|
||||
</code></pre>
|
||||
<div id="selects" class="selects">
|
||||
<div class="nes-select">
|
||||
<select required>
|
||||
<option value="" disabled selected hidden>Select...</option>
|
||||
<option value="0">To be</option>
|
||||
<option value="1">Not to be</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="nes-select is-success">
|
||||
<select required>
|
||||
<option value="" disabled selected hidden>Select...</option>
|
||||
<option value="0">To be</option>
|
||||
<option value="1">Not to be</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="nes-select is-warning">
|
||||
<select required>
|
||||
<option value="" disabled selected hidden>Select...</option>
|
||||
<option value="0">To be</option>
|
||||
<option value="1">Not to be</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="nes-select is-error">
|
||||
<select required>
|
||||
<option value="" disabled selected hidden>Select...</option>
|
||||
<option value="0">To be</option>
|
||||
<option value="1">Not to be</option>
|
||||
</select>
|
||||
</div>
|
||||
</div></code></pre>
|
||||
<button type="button" class="nes-btn show-code copy" onClick="copyToClipboard('form')">Copy</button>
|
||||
</section>
|
||||
|
||||
<section class="balloon nes-container with-title">
|
||||
@@ -330,21 +323,19 @@
|
||||
<span class="nes-balloon from-right copied" id="copied-balloons">Copied!</span>
|
||||
</section>
|
||||
<section class="nes-container code" id="code-balloons">
|
||||
<pre><code>
|
||||
<p><div class="message -left">
|
||||
<i class="nes-bcrikko"></i>
|
||||
<div class="nes-balloon from-left">
|
||||
<p>Hello NES.css</p>
|
||||
</div>
|
||||
</div></p>
|
||||
<p><div class="message -right">
|
||||
<div class="nes-balloon from-right">
|
||||
<p>Good morning. Thou hast had a good night's sleep, I hope.</p>
|
||||
</div>
|
||||
<i class="nes-bcrikko"></i>
|
||||
</div></p>
|
||||
<button type="button" class="nes-btn show-code copy" onClick="copyToClipboard('balloons')">Copy</button>
|
||||
</code></pre>
|
||||
<pre class="sample-code"><code class="html"><div class="message -left">
|
||||
<i class="nes-bcrikko"></i>
|
||||
<div class="nes-balloon from-left">
|
||||
<p>Hello NES.css</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="message -right">
|
||||
<div class="nes-balloon from-right">
|
||||
<p>Good morning. Thou hast had a good night's sleep, I hope.</p>
|
||||
</div>
|
||||
<i class="nes-bcrikko"></i>
|
||||
</div></code></pre>
|
||||
<button type="button" class="nes-btn show-code copy" onClick="copyToClipboard('balloons')">Copy</button>
|
||||
</section>
|
||||
|
||||
<section class="nes-container with-title">
|
||||
@@ -372,26 +363,24 @@
|
||||
<span class="nes-balloon from-right copied" id="copied-lists">Copied!</span>
|
||||
</section>
|
||||
<section class="nes-container code" id="code-lists">
|
||||
<pre><code>
|
||||
<p><div class="lists">
|
||||
<ul class="nes-list is-disc">
|
||||
<li>Good morning.</li>
|
||||
<li>Thou hast had a good night's sleep, I hope.</li>
|
||||
<li>Thou hast had a good afternoon</li>
|
||||
<li>Good night.</li>
|
||||
</ul>
|
||||
</div></p>
|
||||
<pre class="sample-code"><code class="html"><div class="lists">
|
||||
<ul class="nes-list is-disc">
|
||||
<li>Good morning.</li>
|
||||
<li>Thou hast had a good night's sleep, I hope.</li>
|
||||
<li>Thou hast had a good afternoon</li>
|
||||
<li>Good night.</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<p><div class="lists">
|
||||
<ul class="nes-list is-circle">
|
||||
<li>Good morning.</li>
|
||||
<li>Thou hast had a good night's sleep, I hope.</li>
|
||||
<li>Thou hast had a good afternoon</li>
|
||||
<li>Good night.</li>
|
||||
</ul>
|
||||
</div></p>
|
||||
<button type="button" class="nes-btn show-code copy" onClick="copyToClipboard('lists')">Copy</button>
|
||||
</code></pre>
|
||||
<div class="lists">
|
||||
<ul class="nes-list is-circle">
|
||||
<li>Good morning.</li>
|
||||
<li>Thou hast had a good night's sleep, I hope.</li>
|
||||
<li>Thou hast had a good afternoon</li>
|
||||
<li>Good night.</li>
|
||||
</ul>
|
||||
</div></code></pre>
|
||||
<button type="button" class="nes-btn show-code copy" onClick="copyToClipboard('lists')">Copy</button>
|
||||
</section>
|
||||
|
||||
<section class="nes-container with-title">
|
||||
@@ -452,60 +441,59 @@
|
||||
<span class="nes-balloon from-right copied" id="copied-table">Copied!</span>
|
||||
</section>
|
||||
<section class="nes-container code" id="code-table">
|
||||
<pre><code>
|
||||
<p><div class="nes-table-responsive">
|
||||
<table class="nes-table is-bordered is-centered">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Table.is-bordered</th>
|
||||
<th>Table.is-centered</th>
|
||||
<th>Table.is-centered</th>
|
||||
<th>Table.is-centered</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Thou hast had a good morning</td>
|
||||
<td>Thou hast had a good afternoon</td>
|
||||
<td>Thou hast had a good evening</td>
|
||||
<td>Thou hast had a good night</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Thou hast had a good morning</td>
|
||||
<td>Thou hast had a good afternoon</td>
|
||||
<td>Thou hast had a good evening</td>
|
||||
<td>Thou hast had a good night</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div></p>
|
||||
<p><div class="nes-table-responsive">
|
||||
<table class="nes-table is-bordered is-dark">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Table.is-dark</th>
|
||||
<th>Table.is-bordered</th>
|
||||
<th>Table.is-bordered</th>
|
||||
<th>Table.is-bordered</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Thou hast had a good morning</td>
|
||||
<td>Thou hast had a good afternon</td>
|
||||
<td>Thou hast had a good evening</td>
|
||||
<td>Thou hast had a good night</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Thou hast had a good morning</td>
|
||||
<td>Thou hast had a good afternoon</td>
|
||||
<td>Thou hast had a good afternoon</td>
|
||||
<td>Thou hast had a good afternoon</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table></p>
|
||||
<button type="button" class="nes-btn show-code copy" onClick="copyToClipboard('table')">Copy</button>
|
||||
</code></pre>
|
||||
<pre class="sample-code"><code class="html"><div class="nes-table-responsive">
|
||||
<table class="nes-table is-bordered is-centered">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Table.is-bordered</th>
|
||||
<th>Table.is-centered</th>
|
||||
<th>Table.is-centered</th>
|
||||
<th>Table.is-centered</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Thou hast had a good morning</td>
|
||||
<td>Thou hast had a good afternoon</td>
|
||||
<td>Thou hast had a good evening</td>
|
||||
<td>Thou hast had a good night</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Thou hast had a good morning</td>
|
||||
<td>Thou hast had a good afternoon</td>
|
||||
<td>Thou hast had a good evening</td>
|
||||
<td>Thou hast had a good night</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="nes-table-responsive">
|
||||
<table class="nes-table is-bordered is-dark">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Table.is-dark</th>
|
||||
<th>Table.is-bordered</th>
|
||||
<th>Table.is-bordered</th>
|
||||
<th>Table.is-bordered</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Thou hast had a good morning</td>
|
||||
<td>Thou hast had a good afternon</td>
|
||||
<td>Thou hast had a good evening</td>
|
||||
<td>Thou hast had a good night</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Thou hast had a good morning</td>
|
||||
<td>Thou hast had a good afternoon</td>
|
||||
<td>Thou hast had a good afternoon</td>
|
||||
<td>Thou hast had a good afternoon</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div></code></pre>
|
||||
<button type="button" class="nes-btn show-code copy" onClick="copyToClipboard('table')">Copy</button>
|
||||
</section>
|
||||
|
||||
<section class="nes-container with-title">
|
||||
@@ -522,15 +510,13 @@
|
||||
<span class="nes-balloon from-right copied" id="copied-progress">Copied!</span>
|
||||
</section>
|
||||
<section class="nes-container code" id="code-progress">
|
||||
<pre><code>
|
||||
<p><progress class="nes-progress" value="90" max="100"></progress></p>
|
||||
<p><progress class="nes-progress is-primary" value="80" max="100"></progress></p>
|
||||
<p><progress class="nes-progress is-success" value="50" max="100"></progress></p>
|
||||
<p><progress class="nes-progress is-warning" value="30" max="100"></progress></p>
|
||||
<p><progress class="nes-progress is-error" value="10" max="100"></progress></p>
|
||||
<p><progress class="nes-progress is-pattern" value="50" max="100"></progress></p>
|
||||
<button type="button" class="nes-btn show-code copy" onClick="copyToClipboard('progress')">Copy</button>
|
||||
</code></pre>
|
||||
<pre class="sample-code"><code class="html"><progress class="nes-progress" value="90" max="100"></progress>
|
||||
<progress class="nes-progress is-primary" value="80" max="100"></progress>
|
||||
<progress class="nes-progress is-success" value="50" max="100"></progress>
|
||||
<progress class="nes-progress is-warning" value="30" max="100"></progress>
|
||||
<progress class="nes-progress is-error" value="10" max="100"></progress>
|
||||
<progress class="nes-progress is-pattern" value="50" max="100"></progress></code></pre>
|
||||
<button type="button" class="nes-btn show-code copy" onClick="copyToClipboard('progress')">Copy</button>
|
||||
</section>
|
||||
|
||||
<section class="nes-container with-title" class="badges">
|
||||
@@ -574,42 +560,40 @@
|
||||
<span class="nes-balloon from-right copied" id="copied-badges">Copied!</span>
|
||||
</section>
|
||||
<section class="nes-container code" id="code-badges">
|
||||
<pre><code>
|
||||
<p><a href="#" class="nes-badge">
|
||||
<span class="is-dark">NES.css</span>
|
||||
</a></p>
|
||||
<p><a href="#" class="nes-badge">
|
||||
<span class="is-primary">is</span>
|
||||
</a></p>
|
||||
<p><a href="#" class="nes-badge">
|
||||
<span class="is-success">a</span>
|
||||
</a></p>
|
||||
<p><a href="#" class="nes-badge">
|
||||
<span class="is-warning">great</span>
|
||||
</a></p>
|
||||
<p><a href="#" class="nes-badge">
|
||||
<span class="is-error">framework!</span>
|
||||
</a></p>
|
||||
<p><a href="#" class="nes-badge is-splited">
|
||||
<span class="is-dark">npm</span>
|
||||
<span class="is-primary">1.1.0</span>
|
||||
</a></p>
|
||||
<p><a href="#" class="nes-badge is-splited">
|
||||
<span class="is-dark">test</span>
|
||||
<span class="is-success">100%</span>
|
||||
</a></p>
|
||||
<p><a href="#" class="nes-badge is-icon">
|
||||
<span class="is-warning">
|
||||
<i class="nes-icon star is-small"></i>
|
||||
</span>
|
||||
<span class="is-primary">Icons</span>
|
||||
</a></p>
|
||||
<p><a href="#" class="nes-badge is-icon">
|
||||
<span class="is-dark">hi</span>
|
||||
<span class="is-warning">Text</span>
|
||||
</a></p>
|
||||
<button type="button" class="nes-btn show-code copy" onClick="copyToClipboard('badges')">Copy</button>
|
||||
</code></pre>
|
||||
<pre class="sample-code"><code class="html"><a href="#" class="nes-badge">
|
||||
<span class="is-dark">NES.css</span>
|
||||
</a>
|
||||
<a href="#" class="nes-badge">
|
||||
<span class="is-primary">is</span>
|
||||
</a>
|
||||
<a href="#" class="nes-badge">
|
||||
<span class="is-success">a</span>
|
||||
</a>
|
||||
<a href="#" class="nes-badge">
|
||||
<span class="is-warning">great</span>
|
||||
</a>
|
||||
<a href="#" class="nes-badge">
|
||||
<span class="is-error">framework!</span>
|
||||
</a>
|
||||
<a href="#" class="nes-badge is-splited">
|
||||
<span class="is-dark">npm</span>
|
||||
<span class="is-primary">1.1.0</span>
|
||||
</a>
|
||||
<a href="#" class="nes-badge is-splited">
|
||||
<span class="is-dark">test</span>
|
||||
<span class="is-success">100%</span>
|
||||
</a>
|
||||
<a href="#" class="nes-badge is-icon">
|
||||
<span class="is-warning">
|
||||
<i class="nes-icon star is-small"></i>
|
||||
</span>
|
||||
<span class="is-primary">Icons</span>
|
||||
</a>
|
||||
<a href="#" class="nes-badge is-icon">
|
||||
<span class="is-dark">hi</span>
|
||||
<span class="is-warning">Text</span>
|
||||
</a></code></pre>
|
||||
<button type="button" class="nes-btn show-code copy" onClick="copyToClipboard('badges')">Copy</button>
|
||||
</section>
|
||||
|
||||
<section class="nes-container with-title">
|
||||
@@ -650,37 +634,35 @@
|
||||
<span class="nes-balloon from-right copied" id="copied-reaction">Copied!</span>
|
||||
</section>
|
||||
<section class="nes-container code" id="code-reaction">
|
||||
<pre><code>
|
||||
<p><i class="nes-icon heart is-small"></i></p>
|
||||
<p><i class="nes-icon heart"></i></p>
|
||||
<p><i class="nes-icon heart is-medium"></i></p>
|
||||
<p><i class="nes-icon heart is-large"></i></p>
|
||||
<p><i class="nes-icon heart is-empty"></i></p>
|
||||
<pre class="sample-code"><code class="html"><i class="nes-icon heart is-small"></i>
|
||||
<i class="nes-icon heart"></i>
|
||||
<i class="nes-icon heart is-medium"></i>
|
||||
<i class="nes-icon heart is-large"></i>
|
||||
<i class="nes-icon heart is-empty"></i>
|
||||
|
||||
<p><i class="nes-icon star is-small"></i></p>
|
||||
<p><i class="nes-icon star"></i></p>
|
||||
<p><i class="nes-icon star is-medium"></i></p>
|
||||
<p><i class="nes-icon star is-large"></i></p>
|
||||
<i class="nes-icon star is-small"></i>
|
||||
<i class="nes-icon star"></i>
|
||||
<i class="nes-icon star is-medium"></i>
|
||||
<i class="nes-icon star is-large"></i>
|
||||
|
||||
<p><i class="nes-icon star is-half is-small"></i></p>
|
||||
<p><i class="nes-icon star is-half"></i></p>
|
||||
<p><i class="nes-icon star is-half is-medium"></i></p>
|
||||
<p><i class="nes-icon star is-half is-large"></i></p>
|
||||
<i class="nes-icon star is-half is-small"></i>
|
||||
<i class="nes-icon star is-half"></i>
|
||||
<i class="nes-icon star is-half is-medium"></i>
|
||||
<i class="nes-icon star is-half is-large"></i>
|
||||
|
||||
<p><i class="nes-icon star is-transparent is-small"></i></p>
|
||||
<p><i class="nes-icon star is-transparent"></i></p>
|
||||
<p><i class="nes-icon star is-transparent is-medium"></i></p>
|
||||
<p><i class="nes-icon star is-transparent is-large"></i></p>
|
||||
<i class="nes-icon star is-transparent is-small"></i>
|
||||
<i class="nes-icon star is-transparent"></i>
|
||||
<i class="nes-icon star is-transparent is-medium"></i>
|
||||
<i class="nes-icon star is-transparent is-large"></i>
|
||||
|
||||
<p><i class="nes-icon star is-empty"></i></p>
|
||||
<i class="nes-icon star is-empty"></i>
|
||||
|
||||
<p><i class="nes-icon like is-small"></i></p>
|
||||
<p><i class="nes-icon like"></i></p>
|
||||
<p><i class="nes-icon like is-medium"></i></p>
|
||||
<p><i class="nes-icon like is-large"></i></p>
|
||||
<p><i class="nes-icon like is-empty"></i></p>
|
||||
<button type="button" class="nes-btn show-code copy" onClick="copyToClipboard('reaction')">Copy</button>
|
||||
</code></pre>
|
||||
<i class="nes-icon like is-small"></i>
|
||||
<i class="nes-icon like"></i>
|
||||
<i class="nes-icon like is-medium"></i>
|
||||
<i class="nes-icon like is-large"></i>
|
||||
<i class="nes-icon like is-empty"></i></code></pre>
|
||||
<button type="button" class="nes-btn show-code copy" onClick="copyToClipboard('reaction')">Copy</button>
|
||||
</section>
|
||||
|
||||
<section class="nes-container with-title">
|
||||
@@ -745,63 +727,61 @@
|
||||
<span class="nes-balloon from-right copied" id="copied-sns">Copied!</span>
|
||||
</section>
|
||||
<section class="nes-container code" id="code-sns">
|
||||
<pre><code>
|
||||
<p><i class="nes-icon twitter is-small"></i></p>
|
||||
<p><i class="nes-icon twitter"></i></p>
|
||||
<p><i class="nes-icon twitter is-medium"></i></p>
|
||||
<p><i class="nes-icon twitter is-large"></i></p>
|
||||
<pre class="sample-code"><code class="html"><i class="nes-icon twitter is-small"></i>
|
||||
<i class="nes-icon twitter"></i>
|
||||
<i class="nes-icon twitter is-medium"></i>
|
||||
<i class="nes-icon twitter is-large"></i>
|
||||
|
||||
<p><i class="nes-icon facebook is-small"></i></p>
|
||||
<p><i class="nes-icon facebook"></i></p>
|
||||
<p><i class="nes-icon facebook is-medium"></i></p>
|
||||
<p><i class="nes-icon facebook is-large"></i></p>
|
||||
<i class="nes-icon facebook is-small"></i>
|
||||
<i class="nes-icon facebook"></i>
|
||||
<i class="nes-icon facebook is-medium"></i>
|
||||
<i class="nes-icon facebook is-large"></i>
|
||||
|
||||
<p><i class="nes-icon github is-small"></i></p>
|
||||
<p><i class="nes-icon github"></i></p>
|
||||
<p><i class="nes-icon github is-medium"></i></p>
|
||||
<p><i class="nes-icon github is-large"></i></p>
|
||||
<i class="nes-icon github is-small"></i>
|
||||
<i class="nes-icon github"></i>
|
||||
<i class="nes-icon github is-medium"></i>
|
||||
<i class="nes-icon github is-large"></i>
|
||||
|
||||
<p><i class="nes-icon youtube is-small"></i></p>
|
||||
<p><i class="nes-icon youtube"></i></p>
|
||||
<p><i class="nes-icon youtube is-medium"></i></p>
|
||||
<p><i class="nes-icon youtube is-large"></i></p>
|
||||
<i class="nes-icon youtube is-small"></i>
|
||||
<i class="nes-icon youtube"></i>
|
||||
<i class="nes-icon youtube is-medium"></i>
|
||||
<i class="nes-icon youtube is-large"></i>
|
||||
|
||||
<p><i class="nes-icon google is-small"></i></p>
|
||||
<p><i class="nes-icon google"></i></p>
|
||||
<p><i class="nes-icon google is-medium"></i></p>
|
||||
<p><i class="nes-icon google is-large"></i></p>
|
||||
<i class="nes-icon google is-small"></i>
|
||||
<i class="nes-icon google"></i>
|
||||
<i class="nes-icon google is-medium"></i>
|
||||
<i class="nes-icon google is-large"></i>
|
||||
|
||||
<p><i class="nes-icon medium is-small"></i></p>
|
||||
<p><i class="nes-icon medium"></i></p>
|
||||
<p><i class="nes-icon medium is-medium"></i></p>
|
||||
<p><i class="nes-icon medium is-large"></i></p>
|
||||
<i class="nes-icon medium is-small"></i>
|
||||
<i class="nes-icon medium"></i>
|
||||
<i class="nes-icon medium is-medium"></i>
|
||||
<i class="nes-icon medium is-large"></i>
|
||||
|
||||
<p><i class="nes-icon twitch is-small"></i></p>
|
||||
<p><i class="nes-icon twitch"></i></p>
|
||||
<p><i class="nes-icon twitch is-medium"></i></p>
|
||||
<p><i class="nes-icon twitch is-large"></i></p>
|
||||
<i class="nes-icon twitch is-small"></i>
|
||||
<i class="nes-icon twitch"></i>
|
||||
<i class="nes-icon twitch is-medium"></i>
|
||||
<i class="nes-icon twitch is-large"></i>
|
||||
|
||||
<p><i class="nes-icon reddit is-small"></i></p>
|
||||
<p><i class="nes-icon reddit"></i></p>
|
||||
<p><i class="nes-icon reddit is-medium"></i></p>
|
||||
<p><i class="nes-icon reddit is-large"></i></p>
|
||||
<i class="nes-icon reddit is-small"></i>
|
||||
<i class="nes-icon reddit"></i>
|
||||
<i class="nes-icon reddit is-medium"></i>
|
||||
<i class="nes-icon reddit is-large"></i>
|
||||
|
||||
<p><i class="nes-icon whatsapp is-small"></i></p>
|
||||
<p><i class="nes-icon whatsapp"></i></p>
|
||||
<p><i class="nes-icon whatsapp is-medium"></i></p>
|
||||
<p><i class="nes-icon whatsapp is-large"></i></p>
|
||||
<i class="nes-icon whatsapp is-small"></i>
|
||||
<i class="nes-icon whatsapp"></i>
|
||||
<i class="nes-icon whatsapp is-medium"></i>
|
||||
<i class="nes-icon whatsapp is-large"></i>
|
||||
|
||||
<p><i class="nes-icon gmail is-small"></i></p>
|
||||
<p><i class="nes-icon gmail"></i></p>
|
||||
<p><i class="nes-icon gmail is-medium"></i></p>
|
||||
<p><i class="nes-icon gmail is-large"></i></p>
|
||||
<i class="nes-icon gmail is-small"></i>
|
||||
<i class="nes-icon gmail"></i>
|
||||
<i class="nes-icon gmail is-medium"></i>
|
||||
<i class="nes-icon gmail is-large"></i>
|
||||
|
||||
<p><i class="nes-icon linkedin is-small"></i></p>
|
||||
<p><i class="nes-icon linkedin"></i></p>
|
||||
<p><i class="nes-icon linkedin is-medium"></i></p>
|
||||
<p><i class="nes-icon linkedin is-large"></i></p>
|
||||
<button type="button" class="nes-btn show-code copy" onClick="copyToClipboard('sns')">Copy</button>
|
||||
</code></pre>
|
||||
<i class="nes-icon linkedin is-small"></i>
|
||||
<i class="nes-icon linkedin"></i>
|
||||
<i class="nes-icon linkedin is-medium"></i>
|
||||
<i class="nes-icon linkedin is-large"></i></code></pre>
|
||||
<button type="button" class="nes-btn show-code copy" onClick="copyToClipboard('sns')">Copy</button>
|
||||
</section>
|
||||
|
||||
<section class="nes-container with-title">
|
||||
@@ -835,32 +815,30 @@
|
||||
<span class="nes-balloon from-right copied" id="copied-others">Copied!</span>
|
||||
</section>
|
||||
<section class="nes-container code" id="code-others">
|
||||
<pre><code>
|
||||
<p><i class="nes-icon close is-small"></i></p>
|
||||
<p><i class="nes-icon close"></i></p>
|
||||
<p><i class="nes-icon close is-medium"></i></p>
|
||||
<p><i class="nes-icon close is-large"></i></p>
|
||||
<pre class="sample-code"><code class="html"><i class="nes-icon close is-small"></i>
|
||||
<i class="nes-icon close"></i>
|
||||
<i class="nes-icon close is-medium"></i>
|
||||
<i class="nes-icon close is-large"></i>
|
||||
|
||||
<p><i class="nes-octocat animate"></i></p>
|
||||
<i class="nes-octocat animate"></i>
|
||||
|
||||
<p><i class="nes-icon trophy is-small"></i></p>
|
||||
<p><i class="nes-icon trophy"></i></p>
|
||||
<p><i class="nes-icon trophy is-medium"></i></p>
|
||||
<p><i class="nes-icon trophy is-large"></i></p>
|
||||
<i class="nes-icon trophy is-small"></i>
|
||||
<i class="nes-icon trophy"></i>
|
||||
<i class="nes-icon trophy is-medium"></i>
|
||||
<i class="nes-icon trophy is-large"></i>
|
||||
|
||||
<p><i class="nes-mario"></i></p>
|
||||
<p><i class="nes-ash"></i></p>
|
||||
<p><i class="nes-pokeball"></i></p>
|
||||
<i class="nes-mario"></i>
|
||||
<i class="nes-ash"></i>
|
||||
<i class="nes-pokeball"></i>
|
||||
|
||||
<p><i class="nes-bulbasaur"></i></p>
|
||||
<p><i class="nes-charmander"></i></p>
|
||||
<p><i class="nes-squirtle"></i></p>
|
||||
<i class="nes-bulbasaur"></i>
|
||||
<i class="nes-charmander"></i>
|
||||
<i class="nes-squirtle"></i>
|
||||
|
||||
<p><i class="nes-smartphone"></i></p>
|
||||
<p><i class="nes-phone"></i></p>
|
||||
<p><i class="nes-kirby"></i></p>
|
||||
<button type="button" class="nes-btn show-code copy" onClick="copyToClipboard('others')">Copy</button>
|
||||
</code></pre>
|
||||
<i class="nes-smartphone"></i>
|
||||
<i class="nes-phone"></i>
|
||||
<i class="nes-kirby"></i></code></pre>
|
||||
<button type="button" class="nes-btn show-code copy" onClick="copyToClipboard('others')">Copy</button>
|
||||
</section>
|
||||
|
||||
<section class="nes-container with-title">
|
||||
@@ -875,13 +853,11 @@
|
||||
<span class="nes-balloon from-right copied" id="copied-controllers">Copied!</span>
|
||||
</section>
|
||||
<section class="nes-container code" id="code-controllers">
|
||||
<pre><code>
|
||||
<p><i class="nes-logo"></i></p>
|
||||
<p><i class="nes-jp-logo"></i></p>
|
||||
<p><i class="snes-logo"></i></p>
|
||||
<p><i class="snes-jp-logo"></i></p>
|
||||
<button type="button" class="nes-btn show-code copy" onClick="copyToClipboard('controllers')">Copy</button>
|
||||
</code></pre>
|
||||
<pre class="sample-code"><code class="html"><i class="nes-logo"></i>
|
||||
<i class="nes-jp-logo"></i>
|
||||
<i class="snes-logo"></i>
|
||||
<i class="snes-jp-logo"></i></code></pre>
|
||||
<button type="button" class="nes-btn show-code copy" onClick="copyToClipboard('controllers')">Copy</button>
|
||||
</section>
|
||||
</section>
|
||||
|
||||
|
||||
@@ -146,11 +146,17 @@
|
||||
"string-quotes": "double",
|
||||
"at-rule-no-unknown": null,
|
||||
"scss/at-rule-no-unknown": true
|
||||
}
|
||||
},
|
||||
"ignoreFiles": [
|
||||
"demo/lib/*"
|
||||
]
|
||||
},
|
||||
"eslintConfig": {
|
||||
"extends": "airbnb-base"
|
||||
},
|
||||
"eslintIgnore": [
|
||||
"demo/lib/*"
|
||||
],
|
||||
"config": {
|
||||
"commitizen": {
|
||||
"path": "./node_modules/cz-conventional-changelog"
|
||||
|
||||
Reference in New Issue
Block a user