mirror_css/nes.css
1
0
Fork 0
mirror of https://github.com/nostalgic-css/NES.css.git synced 2025-08-24 22:55:48 +02:00
Code Issues Releases Wiki Activity

docs: add dialog samples

Browse Source
This commit is contained in:
BcRikko
2019-02-21 18:53:01 +09:00
parent 2685582a90
commit ae15940e5e
3 changed files with 81 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
docs/index.html
View File

@@ -76,6 +76,7 @@
class="item" class="item"
v-html="sample.code"> v-html="sample.code">
</div> </div>
<p v-if="sample.note" class="note nes-text is-error">{{ sample.note }}</p>
<button type="button" class="nes-btn is-primary showcode" @click="sample.showCode = !sample.showCode">&lt;&gt;</button> <button type="button" class="nes-btn is-primary showcode" @click="sample.showCode = !sample.showCode">&lt;&gt;</button>
</section> </section>
<section class="samplecode" v-show="sample.showCode"> <section class="samplecode" v-show="sample.showCode">

79
docs/script.js
View File

@@ -39,7 +39,7 @@ const sampleCollection = [
</div>`, </div>`,
}, },
{ {
title: 'Inputs', title: 'inputs',
showCode: false, showCode: false,
code: `<div class="nes-field"> code: `<div class="nes-field">
<label for="name_field">Your name</label> <label for="name_field">Your name</label>
@@ -62,13 +62,13 @@ const sampleCollection = [
</div>`, </div>`,
}, },
{ {
title: 'Textarea', title: 'textarea',
showCode: false, showCode: false,
code: `<label for="textarea_field">Textarea</label> code: `<label for="textarea_field">Textarea</label>
<textarea id="textarea_field" class="nes-textarea"></textarea>`, <textarea id="textarea_field" class="nes-textarea"></textarea>`,
}, },
{ {
title: 'Selects', title: 'selects',
showCode: false, showCode: false,
code: `<div class="nes-select"> code: `<div class="nes-select">
<select required> <select required>
@@ -123,6 +123,79 @@ const sampleCollection = [
<p>Good morning. Thou hast had a good night's sleep, I hope.</p> <p>Good morning. Thou hast had a good night's sleep, I hope.</p>
</div>`, </div>`,
}, },
{
title: 'dialogs',
note:
'NES.css does not include any JavaScript. If you want to use dialog element other than Chrome, you need polyfill.',
showCode: false,
code: `<!-- Dialog -->
<section>
<button type="button" class="nes-btn is-primary" onclick="document.getElementById('dialog-default').showModal();">
Open dialog
</button>
<dialog class="nes-dialog" id="dialog-default">
<form method="dialog">
<p class="title">Dialog</p>
<p>Alert: this is a dialog.</p>
<menu class="dialog-menu">
<button class="nes-btn">Cancel</button>
<button class="nes-btn is-primary">Confirm</button>
</menu>
</form>
</dialog>
</section>
<!-- Dark dialog -->
<section>
<button type="button" class="nes-btn is-primary" onclick="document.getElementById('dialog-dark').showModal();">
Open dark dialog
</button>
<dialog class="nes-dialog is-dark" id="dialog-dark">
<form method="dialog">
<p class="title">Dark dialog</p>
<p>Alert: this is a dialog.</p>
<menu class="dialog-menu">
<button class="nes-btn">Cancel</button>
<button class="nes-btn is-primary">Confirm</button>
</menu>
</form>
</dialog>
</section>
<!-- Rounded dialog -->
<section>
<button type="button" class="nes-btn is-primary" onclick="document.getElementById('dialog-rounded').showModal();">
Open rounded dialog
</button>
<dialog class="nes-dialog is-rounded" id="dialog-rounded">
<form method="dialog">
<p class="title">Rounded dialog</p>
<p>Alert: this is a dialog.</p>
<menu class="dialog-menu">
<button class="nes-btn">Cancel</button>
<button class="nes-btn is-primary">Confirm</button>
</menu>
</form>
</dialog>
</section>
<!-- Dark and Rounded dialog -->
<section>
<button type="button" class="nes-btn is-primary" onclick="document.getElementById('dialog-dark-rounded').showModal();">
Open dark and rounded dialog
</button>
<dialog class="nes-dialog is-dark is-rounded" id="dialog-dark-rounded">
<form method="dialog">
<p class="title">Dark and Rounded dialog</p>
<p>Alert: this is a dialog.</p>
<menu class="dialog-menu">
<button class="nes-btn">Cancel</button>
<button class="nes-btn is-primary">Confirm</button>
</menu>
</form>
</dialog>
</section>`,
},
]; ];
const coreteam = [ const coreteam = [

4
docs/style.css
View File

@@ -77,6 +77,10 @@ section.showcase > section.samplecode {
right: 0px; right: 0px;
} }
section.showcase > section.nes-container > p.note {
margin-top: 2.5rem;
}
section.showcase > section.samplecode > pre code { section.showcase > section.samplecode > pre code {
font-size: 13px; font-size: 13px;
line-height: 1.5; line-height: 1.5;