mirror of
https://github.com/nostalgic-css/NES.css.git
synced 2025-09-09 13:50:58 +02:00
(breaking changes)Add prefix to class name (#82)
* feat: add prefix BREAKING CHANGE: add nes- to class prefix * feat: fix storybook
This commit is contained in:
ダーシノ
Abdullah Samman
232
index.html
232
index.html
@@ -36,110 +36,110 @@
|
||||
</header>
|
||||
|
||||
<a class="github-link" href="https://github.com/BcRikko/NES.css" target="_blank">
|
||||
<p class="balloon from-right">Fork me<br />on GitHub</p>
|
||||
<i class="octocat"></i>
|
||||
<p class="nes-balloon from-right">Fork me<br />on GitHub</p>
|
||||
<i class="nes-octocat"></i>
|
||||
</a>
|
||||
|
||||
<section class="container with-title">
|
||||
<section class="nes-container with-title">
|
||||
<h2 class="title">Buttons</h2>
|
||||
<div>
|
||||
<button type="button" class="btn">Normal</button>
|
||||
<button type="button" class="btn is-primary">Primary</button>
|
||||
<button type="button" class="btn is-success">Success</button>
|
||||
<button type="button" class="btn is-warning">Warning</button>
|
||||
<button type="button" class="btn is-error">Error</button>
|
||||
<button type="button" class="btn is-disabled">Disabled</button>
|
||||
<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>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="container with-title">
|
||||
<section class="nes-container with-title">
|
||||
<h2 class="title">Containers</h2>
|
||||
<div class="containers">
|
||||
<div class="container with-title is-center">
|
||||
<div class="nes-container with-title is-center">
|
||||
<p class="title">Container.is-center</p>
|
||||
<p>Good morning. Thou hast had a good night's sleep, I hope.</p>
|
||||
</div>
|
||||
<div class="container is-dark with-title">
|
||||
<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="container is-rounded">
|
||||
<div class="nes-container is-rounded">
|
||||
<p>Good morning. Thou hast had a good night's sleep, I hope.</p>
|
||||
</div>
|
||||
<div class="container is-rounded is-dark">
|
||||
<div class="nes-container is-rounded is-dark">
|
||||
<p>Good morning. Thou hast had a good night's sleep, I hope.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="container with-title">
|
||||
<section class="nes-container with-title">
|
||||
<h2 class="title">Radios</h2>
|
||||
<div>
|
||||
<label>
|
||||
<input type="radio" class="radio" name="answer" checked />
|
||||
<input type="radio" class="nes-radio" name="answer" checked />
|
||||
<span>Yes</span>
|
||||
</label>
|
||||
<label>
|
||||
<input type="radio" class="radio" name="answer" />
|
||||
<input type="radio" class="nes-radio" name="answer" />
|
||||
<span>No</span>
|
||||
</label>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="container with-title">
|
||||
<section class="nes-container with-title">
|
||||
<h2 class="title">Checkboxes</h2>
|
||||
<label>
|
||||
<input type="checkbox" class="checkbox" checked />
|
||||
<input type="checkbox" class="nes-checkbox" checked />
|
||||
<span>Enable</span>
|
||||
</label>
|
||||
</section>
|
||||
|
||||
<section class="form container with-title">
|
||||
<section class="form nes-container with-title">
|
||||
<h2 class="title">Form</h2>
|
||||
<div class="field">
|
||||
<div class="nes-field">
|
||||
<label for="name_field">Your name</label>
|
||||
<input type="text" id="name_field" class="input">
|
||||
<input type="text" id="name_field" class="nes-input">
|
||||
</div>
|
||||
<div class="field is-inline">
|
||||
<div class="nes-field is-inline">
|
||||
<label for="inline_field">.input.is-success</label>
|
||||
<input type="text" id="inline_field" class="input is-success" placeholder="NES.css">
|
||||
<input type="text" id="inline_field" class="nes-input is-success" placeholder="NES.css">
|
||||
</div>
|
||||
<div class="field is-inline">
|
||||
<div class="nes-field is-inline">
|
||||
<label for="warning_field">.input.is-warning</label>
|
||||
<input type="text" id="warning_field" class="input is-warning" placeholder="8bit.css">
|
||||
<input type="text" id="warning_field" class="nes-input is-warning" placeholder="8bit.css">
|
||||
</div>
|
||||
<div class="field is-inline">
|
||||
<div class="nes-field is-inline">
|
||||
<label for="error_field">.input.is-error</label>
|
||||
<input type="text" id="error_field" class="input is-error" placeholder="awesome.css">
|
||||
<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="textarea"></textarea>
|
||||
<textarea id="textarea_field" class="nes-textarea"></textarea>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="balloon container with-title">
|
||||
<section class="balloon nes-container with-title">
|
||||
<h2 class="title">Balloons</h2>
|
||||
<div class="messages">
|
||||
<div class="message -left">
|
||||
<i class="bcrikko"></i>
|
||||
<div class="balloon from-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="balloon from-right">
|
||||
<div class="nes-balloon from-right">
|
||||
<p>Good morning. Thou hast had a good night's sleep, I hope.</p>
|
||||
</div>
|
||||
<i class="bcrikko"></i>
|
||||
<i class="nes-bcrikko"></i>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="container with-title">
|
||||
<section class="nes-container with-title">
|
||||
<h2 class="title">Table</h2>
|
||||
<div class="tables">
|
||||
<table class="table is-bordered is-centered">
|
||||
<table class="nes-table is-bordered is-centered">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Table.is-bordered</th>
|
||||
@@ -157,7 +157,7 @@
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<table class="table is-bordered is-dark">
|
||||
<table class="nes-table is-bordered is-dark">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Table.is-dark</th>
|
||||
@@ -178,7 +178,7 @@
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="container with-title">
|
||||
<section class="nes-container with-title">
|
||||
<h2 class="title">Progress</h2>
|
||||
<progress class="nes-progress" value="90" max="100"></progress>
|
||||
<progress class="nes-progress is-primary" value="80" max="100"></progress>
|
||||
@@ -188,116 +188,116 @@
|
||||
<progress class="nes-progress is-pattern" value="50" max="100"></progress>
|
||||
</section>
|
||||
|
||||
<section class="container with-title">
|
||||
<section class="nes-container with-title">
|
||||
<h2 class="title">Icons</h2>
|
||||
<section class="container with-title">
|
||||
<section class="nes-container with-title">
|
||||
<h3 class="title">Reaction</h3>
|
||||
<div>
|
||||
<i class="icon heart is-small"></i>
|
||||
<i class="icon heart"></i>
|
||||
<i class="icon heart is-medium"></i>
|
||||
<i class="icon heart is-large"></i>
|
||||
<i class="icon heart is-empty"></i>
|
||||
<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>
|
||||
|
||||
<i class="icon star is-small"></i>
|
||||
<i class="icon star"></i>
|
||||
<i class="icon star is-medium"></i>
|
||||
<i class="icon star is-large"></i>
|
||||
<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>
|
||||
|
||||
<i class="icon star is-half"></i>
|
||||
<i class="icon star is-half is-medium"></i>
|
||||
<i class="icon star is-half is-large"></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>
|
||||
|
||||
<i class="icon star is-transparent"></i>
|
||||
<i class="icon star is-transparent is-medium"></i>
|
||||
<i class="icon star is-transparent is-large"></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>
|
||||
|
||||
<i class="icon star is-empty"></i>
|
||||
<i class="nes-icon star is-empty"></i>
|
||||
|
||||
<i class="icon like is-small"></i>
|
||||
<i class="icon like"></i>
|
||||
<i class="icon like is-medium"></i>
|
||||
<i class="icon like is-large"></i>
|
||||
<i class="icon like is-empty"></i>
|
||||
<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>
|
||||
</div>
|
||||
</section>
|
||||
<section class="container with-title">
|
||||
<section class="nes-container with-title">
|
||||
<h3 class="title">SNS</h3>
|
||||
<div>
|
||||
<i class="icon twitter is-small"></i>
|
||||
<i class="icon twitter"></i>
|
||||
<i class="icon twitter is-medium"></i>
|
||||
<i class="icon twitter is-large"></i>
|
||||
<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>
|
||||
|
||||
<i class="icon facebook is-small"></i>
|
||||
<i class="icon facebook"></i>
|
||||
<i class="icon facebook is-medium"></i>
|
||||
<i class="icon facebook is-large"></i>
|
||||
<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>
|
||||
|
||||
<i class="icon github is-small"></i>
|
||||
<i class="icon github"></i>
|
||||
<i class="icon github is-medium"></i>
|
||||
<i class="icon github is-large"></i>
|
||||
<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>
|
||||
|
||||
<i class="icon youtube is-small"></i>
|
||||
<i class="icon youtube"></i>
|
||||
<i class="icon youtube is-medium"></i>
|
||||
<i class="icon youtube is-large"></i>
|
||||
<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>
|
||||
|
||||
<i class="icon google is-small"></i>
|
||||
<i class="icon google"></i>
|
||||
<i class="icon google is-medium"></i>
|
||||
<i class="icon google is-large"></i>
|
||||
<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>
|
||||
|
||||
<i class="icon medium is-small"></i>
|
||||
<i class="icon medium"></i>
|
||||
<i class="icon medium is-medium"></i>
|
||||
<i class="icon medium is-large"></i>
|
||||
<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>
|
||||
|
||||
<i class="icon twitch is-small"></i>
|
||||
<i class="icon twitch"></i>
|
||||
<i class="icon twitch is-medium"></i>
|
||||
<i class="icon twitch is-large"></i>
|
||||
<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>
|
||||
|
||||
<i class="icon reddit"></i>
|
||||
<i class="icon reddit is-medium"></i>
|
||||
<i class="icon reddit is-large"></i>
|
||||
<i class="nes-icon reddit"></i>
|
||||
<i class="nes-icon reddit is-medium"></i>
|
||||
<i class="nes-icon reddit is-large"></i>
|
||||
|
||||
<i class="icon whatsapp"></i>
|
||||
<i class="icon whatsapp is-medium"></i>
|
||||
<i class="icon whatsapp is-large"></i>
|
||||
<i class="nes-icon whatsapp"></i>
|
||||
<i class="nes-icon whatsapp is-medium"></i>
|
||||
<i class="nes-icon whatsapp is-large"></i>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="container with-title">
|
||||
<section class="nes-container with-title">
|
||||
<h3 class="title">Others</h3>
|
||||
<div>
|
||||
<i class="icon close is-small"></i>
|
||||
<i class="icon close"></i>
|
||||
<i class="icon close is-medium"></i>
|
||||
<i class="icon close is-large"></i>
|
||||
<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>
|
||||
|
||||
<i class="octocat animate"></i>
|
||||
<i class="nes-octocat animate"></i>
|
||||
|
||||
<i class="icon trophy is-small"></i>
|
||||
<i class="icon trophy"></i>
|
||||
<i class="icon trophy is-medium"></i>
|
||||
<i class="icon trophy is-large"></i>
|
||||
<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>
|
||||
|
||||
<i class="mario"></i>
|
||||
<i class="ash"></i>
|
||||
<i class="pokeball"></i>
|
||||
<i class="nes-mario"></i>
|
||||
<i class="nes-ash"></i>
|
||||
<i class="nes-pokeball"></i>
|
||||
|
||||
<i class="bulbasaur"></i>
|
||||
<i class="charmander"></i>
|
||||
<i class="squirtle"></i>
|
||||
<i class="nes-bulbasaur"></i>
|
||||
<i class="nes-charmander"></i>
|
||||
<i class="nes-squirtle"></i>
|
||||
|
||||
<i class="smartphone"></i>
|
||||
<i class="phone"></i>
|
||||
<i class="nes-smartphone"></i>
|
||||
<i class="nes-phone"></i>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="container with-title">
|
||||
<section class="nes-container with-title">
|
||||
<h3 class="title">Controllers</h3>
|
||||
<div>
|
||||
<i class="nes-logo"></i>
|
||||
@@ -319,7 +319,7 @@
|
||||
</body>
|
||||
<script>
|
||||
var link = document.querySelector("a.github-link");
|
||||
var octocat = document.querySelector("a.github-link > i.octocat");
|
||||
var octocat = document.querySelector("a.github-link > i.nes-octocat");
|
||||
link.addEventListener("mouseover", function() {
|
||||
octocat.classList.add("animate");
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user