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

docs: add badge samples

Browse Source
This commit is contained in:
BcRikko
2019-02-23 17:47:18 +09:00
parent af5b24f16e
commit 288932a09c
2 changed files with 50 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
docs/index.html
View File

@@ -71,7 +71,7 @@
<!-- Installation -->
<section class="topic">
<h2 id="installation"><a href="#installation">#</a>Installation</h2>
<p>NES.css is available via either npm (preferred) or Yarn, or a CDN.</p>
<p>NES.css is available via either npm or Yarn, or a CDN.</p>
<p>Please read <a href="https://github.com/nostalgic-css/NES.css">README.md</a>.</p>
</section>

55
docs/script.js
View File

@@ -323,6 +323,49 @@ const sampleCollection = [
</div>
<i class="nes-bcrikko"></i>
</section>`,
},
{
title: 'badges',
showCode: false,
code: `<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>`,
},
{
title: 'reaction-icons',
@@ -394,14 +437,14 @@ const sampleCollection = [
description:
'If you wanto to change icon size, please use "is-small", "is-medium" and "is-large".',
code: `<section class="icon-list">
<!-- close -->
<i class="nes-icon close is-large"></i>
<!-- close -->
<i class="nes-icon close is-large"></i>
<!-- trophy -->
<i class="nes-icon trophy is-large"></i>
<!-- trophy -->
<i class="nes-icon trophy is-large"></i>
<!-- coin -->
<i class="nes-icon coin is-large"></i>
<!-- coin -->
<i class="nes-icon coin is-large"></i>
</section>`,
},
{