mirror_css/nes.css
1
0
Fork 0
mirror of https://github.com/nostalgic-css/NES.css.git synced 2025-01-29 11:36:58 +01:00
Code Issues Releases Wiki Activity

(breaking changes)Add prefix to class name (#82)

Browse Source 
* feat: add prefix

BREAKING CHANGE: add nes- to class prefix

* feat: fix storybook
This commit is contained in:
ダーシノ 2018-12-10 17:55:41 +09:00 committed by Abdullah Samman
parent cf43a3d3a3
commit 73b3616472
27 changed files with 185 additions and 185 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
docs/balloons.stories.js
View File

@ -12,5 +12,5 @@ stories.add('balloon', () => {
'from-left': 'from-left',
'from-right': 'from-right',
}, '');
return `<div class="balloon ${selectedClass}"> <p>Hello NES.css</p> </div>`;
return `<div class="nes-balloon ${selectedClass}"> <p>Hello NES.css</p> </div>`;
});

2
docs/buttons.stories.js
View File

@ -15,5 +15,5 @@ stories.add('button', () => {
'is-error': 'is-error',
'is-disabled': 'is-disabled',
}, '');
return `<button type="button" class="btn ${extraClass}">Normal</button>`;
return `<button type="button" class="nes-btn ${extraClass}">Normal</button>`;
});

2
docs/containers.stories.js
View File

@ -17,7 +17,7 @@ stories.add('container', () => {
}, '');
const selectedClasses = [withTitle, isDark, isRounded, alignment];
return `<div class="container ${selectedClasses.join(' ')}">
return `<div class="nes-container ${selectedClasses.join(' ')}">
<p class="title">Container</p>
<p>Good morning. Thou hast had a good night's sleep, I hope.</p>
</div>`;

36
docs/icons.stories.js
View File

@ -8,28 +8,28 @@ stories.addDecorator(withKnobs);
stories.add('icon', () => {
const selectedClass = select('class', {
'icon twitter': 'icon twitter',
'icon facebook': 'icon facebook',
'icon github': 'icon github',
'icon google': 'icon google',
'icon youtube': 'icon youtube',
'icon whatsapp': 'icon whatsapp',
'icon close': 'icon close',
pokeball: 'pokeball',
bulbasaur: 'bulbasaur',
charmander: 'charmander',
squirtle: 'squirtle',
smartphone: 'smartphone',
phone: 'phone',
'octocat animate': 'octocat animate',
ash: 'ash',
'icon trophy': 'icon trophy',
mario: 'mario',
'nes-icon twitter': 'nes-icon twitter',
'nes-icon facebook': 'nes-icon facebook',
'nes-icon github': 'nes-icon github',
'nes-icon google': 'nes-icon google',
'nes-icon youtube': 'nes-icon youtube',
'nes-icon whatsapp': 'nes-icon whatsapp',
'nes-icon close': 'nes-icon close',
'nes-pokeball': 'nes-pokeball',
'nes-bulbasaur': 'nes-bulbasaur',
'nes-charmander': 'nes-charmander',
'nes-squirtle': 'nes-squirtle',
'nes-smartphone': 'nes-smartphone',
'nes-phone': 'nes-phone',
'nes-octocat animate': 'nes-octocat animate',
'nes-ash': 'nes-ash',
'nes-icon trophy': 'nes-icon trophy',
'nes-mario': 'nes-mario',
'nes-logo': 'nes-logo',
'nes-jp-logo': 'nes-jp-logo',
'snes-logo': 'snes-logo',
'snes-jp-logo': 'snes-jp-logo',
}, 'icon twitter');
}, 'nes-icon twitter');
const selectedSize = radios('size', {
default: '',
'is-small': 'is-small',

8
docs/inputs.stories.js
View File

@ -8,15 +8,15 @@ stories.addDecorator(withKnobs);
stories.add('input.radio', () => `
<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>`)
.add('input.checkbox', () => `
<label>
<input type="checkbox" class="checkbox" checked />
<input type="checkbox" class="nes-checkbox" checked />
<span>Enable</span>
</label>`)
.add('input', () => {
@ -27,5 +27,5 @@ stories.add('input.radio', () => `
'is-error': 'is-error',
}, '');
return `<input type="text" id="name_field" class="input ${selectedClass}" placeholder="NES.css">`;
return `<input type="text" id="name_field" class="nes-input ${selectedClass}" placeholder="NES.css">`;
});

2
docs/table.stories.js
View File

@ -13,7 +13,7 @@ stories.add('table', () => {
const selectedClasses = [isBordered, isCentered, isDark];
return `<table class="table ${selectedClasses.join(' ')}" style="margin:15px 4px 5px 4px">
return `<table class="nes-table ${selectedClasses.join(' ')}" style="margin:15px 4px 5px 4px">
<thead>
<tr>
<th>Table.is-dark</th>

2
docs/textarea.stories.js
View File

@ -14,5 +14,5 @@ stories.add('textarea', () => {
'is-error': 'is-error',
}, '');
return `<textarea id="textarea_field" class="textarea ${selectedClass}" placeholder="NES.css"></textarea>`;
return `<textarea id="textarea_field" class="nes-textarea ${selectedClass}" placeholder="NES.css"></textarea>`;
});

232
index.html
View File

@ -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");
});

2
scss/elements/balloons.scss
View File

@ -1,4 +1,4 @@
.balloon {
.nes-balloon {
position: relative;
display: inline-block;
padding: 1rem 1.5rem;

2
scss/elements/buttons.scss
View File

@ -74,7 +74,7 @@
}
// Default style
.btn {
.nes-btn {
$border-size: 4px;
position: relative;

2
scss/elements/checkboxes.scss
View File

@ -1,4 +1,4 @@
.checkbox {
.nes-checkbox {
// prettier-ignore
$checkbox: (
(1,1,1,1,1,1,1,1,0,0),

2
scss/elements/containers.scss
View File

@ -1,4 +1,4 @@
.container {
.nes-container {
position: relative;
padding: 1.5rem 2rem;

2
scss/elements/radios.scss
View File

@ -1,4 +1,4 @@
.radio {
.nes-radio {
// prettier-ignore
$radio: (
(1,1,0,0,0,0),

2
scss/elements/tables.scss
View File

@ -1,4 +1,4 @@
.table {
.nes-table {
table-layout: fixed;
background-color: $background-color;
@mixin thsAndTdsBoxShadow($color) {

14
scss/form/inputs.scss
View File

@ -1,5 +1,5 @@
.input,
.textarea {
.nes-input,
.nes-textarea {
@mixin border-style($border, $outline) {
outline-color: $outline;
// prettier-ignore
@ -28,12 +28,12 @@
}
}
.field {
.nes-field {
> label {
display: block;
}
.input,
.textarea {
.nes-input,
.nes-textarea {
display: block;
}
@ -49,8 +49,8 @@
text-align: right;
}
.input,
.textarea {
.nes-input,
.nes-textarea {
flex-basis: 0;
flex-grow: 5;
}

10
scss/icons/icons.scss
View File

@ -18,7 +18,7 @@
@import "close.scss";
@import "trophy.scss";
.icon {
.nes-icon {
position: relative;
display: inline-block;
@ -85,14 +85,14 @@
@include pixelize($icon-github, $icon-github-colors, $px);
}
&.close::before {
@include pixelize($icon-close, $icon-close-colors, $px);
}
&.youtube::before {
@include pixelize($icon-youtube, $icon-youtube-colors, $px);
}
&.close::before {
@include pixelize($icon-close, $icon-close-colors, $px);
}
&.google::before {
@include pixelize($icon-google, $icon-google-colors, $px);
}

2
scss/pixel-arts/ash.scss
View File

@ -1,4 +1,4 @@
.ash {
.nes-ash {
$px: 6px;
// prettier-ignore
$ash-colors: (#f8f8ff, #ff614e, #007f7f,

2
scss/pixel-arts/bcrikko.scss
View File

@ -1,4 +1,4 @@
.bcrikko {
.nes-bcrikko {
$px: 4px;
$bcrikko-colors: (#333, #f9f2d7, #c5090c, #fff);

2
scss/pixel-arts/bulbasaur.scss
View File

@ -1,4 +1,4 @@
.bulbasaur {
.nes-bulbasaur {
$px: 6px;
// prettier-ignore
$bulbasaur-colors: (#000, #8beb46, #2d8d22, #5ceee1,

2
scss/pixel-arts/charmander.scss
View File

@ -1,4 +1,4 @@
.charmander {
.nes-charmander {
$px: 6px;
// prettier-ignore
$charmander-colors: (#000202, #f77702, #eb2010,

2
scss/pixel-arts/mario.scss
View File

@ -1,4 +1,4 @@
.mario {
.nes-mario {
$px: 6px;
// prettier-ignore
$mario-colors: (#f81c2f, #65352b, #ffbb8e, #000,

2
scss/pixel-arts/octocat.scss
View File

@ -1,4 +1,4 @@
.octocat {
.nes-octocat {
$px: 6px;
$octocat-colors: (#333, #ffdec4, #cb7066);
// prettier-ignore

2
scss/pixel-arts/phone.scss
View File

@ -1,4 +1,4 @@
.phone {
.nes-phone {
$px: 6px;
$phone-colors: (#596985, #3c4665, #000);
// prettier-ignore

2
scss/pixel-arts/pokeball.scss
View File

@ -1,4 +1,4 @@
.pokeball {
.nes-pokeball {
$px: 6px;
$pokeball-colors: (#060606, #ff001d, #fff, #9fa1a1);
// prettier-ignore

2
scss/pixel-arts/smartphone.scss
View File

@ -1,4 +1,4 @@
.smartphone {
.nes-smartphone {
$px: 6px;
$smartphone-colors: (#fff, #060606);
// prettier-ignore

2
scss/pixel-arts/squirtle.scss
View File

@ -1,4 +1,4 @@
.squirtle {
.nes-squirtle {
$px: 6px;
// prettier-ignore
$squirtle-colors: (#000, #9cf, #cb6633,

28
style.css
View File

@ -3,7 +3,7 @@ body {
margin: 2rem;
}
.container:not(:last-child) {
.nes-container:not(:last-child) {
margin-bottom: 1rem;
}
@ -11,7 +11,7 @@ i.brand {
margin-right: 1rem;
}
div.containers > .container {
div.containers > .nes-container {
display: inline-block;
max-width: 400px;
}
@ -21,45 +21,45 @@ div.tables {
flex-wrap: wrap;
}
div.tables > .table {
div.tables > .nes-table {
min-width: 350px;
max-width: calc(50% - 2rem);
}
div.tables > .table:first-child {
div.tables > .nes-table:first-child {
margin-right: 2rem;
margin-bottom: 2rem;
}
@media screen and (max-width: 768px) {
div.tables > .table {
div.tables > .nes-table {
max-width: 100%;
margin-right: 0;
}
}
.balloon.container .balloon {
.balloon.nes-container .nes-balloon {
max-width: 600px;
margin: 2rem 2rem;
}
.balloon.container .messages {
.balloon.nes-container .messages {
display: flex;
flex-direction: column;
}
.balloon.container .message {
.balloon.nes-container .message {
display: flex;
}
.balloon.container .message i {
.balloon.nes-container .message i {
align-self: flex-end;
}
.balloon.container .message.-left {
.balloon.nes-container .message.-left {
align-self: flex-start;
}
.balloon.container .message.-right {
.balloon.nes-container .message.-right {
align-self: flex-end;
}
.form.container > .field:not(:last-child) {
.form.nes-container > .nes-field:not(:last-child) {
margin-bottom: 1rem;
}
@ -84,12 +84,12 @@ div.tables > .table:first-child {
.github-link:hover {
text-decoration: none;
}
.github-link > p.balloon {
.github-link > p.nes-balloon {
align-self: flex-start;
padding: 0.2rem 0.5rem;
font-size: 0.8rem;
color: #333;
}
.github-link > i.octocat {
.github-link > i.nes-octocat {
align-self: flex-end;
}