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

feat(index.html): initial developments tests on show/hide code doc

Browse Source
This commit is contained in:
Igor Guastalla de Lima
2019-02-06 13:06:26 -02:00
parent d200527dd9
commit f1f73f917b
2 changed files with 109 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

92
index.html
View File

@@ -14,7 +14,7 @@
<title>NES.css - NES-style CSS Framework</title>
<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="./css/nes.min.css" rel="stylesheet" />
<link href="./style.css" rel="stylesheet" />
<meta property="og:type" content="website" />
@@ -51,8 +51,19 @@
<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 is-primary show-code" id="show-buttons-code">Show Code</button>
</div>
</section>
<section class="nes-container code" id="code-buttons">
<code>
<p><span><</span>button type="button" class="nes-btn">Normal<span><</span>/button></p>
<p><span><</span>button type="button" class="nes-btn is-primary">Primary<span><</span>/button></p>
<p><span><</span>button type="button" class="nes-btn is-success">Success<span><</span>/button></p>
<p><span><</span>button type="button" class="nes-btn is-warning">Warning<span><</span>/button></p>
<p><span><</span>button type="button" class="nes-btn is-error">Error<span><</span>/button></p>
<p><span><</span>button type="button" class="nes-btn is-disabled">Disabled<span><</span>/button></p>
</code>
</section>
<section class="nes-container with-title">
<h2 class="title">Containers</h2>
@@ -462,5 +473,84 @@
link.addEventListener("mouseout", function() {
octocat.classList.remove("animate");
});
window.onload = function() {
var buttons = document.querySelector("#show-buttons-code");
var codeButtons = document.querySelector("#code-buttons");
buttons.addEventListener("click", function() {
console.log('test')
});
// var containers = document.querySelector("#show-containers-code");
// container.addEventListener("click", function() {
// console.log('oi2')
// });
// var radios = document.querySelector("#show-radios-code");
// radios.addEventListener("click", function() {
// console.log('oi3')
// });
// var checkboxes = document.querySelector("#show-checkboxes-code");
// checkboxes.addEventListener("click", function() {
// console.log('oi4')
// });
// var avatars = document.querySelector("#show-avatars-code");
// avatars.addEventListener("click", function() {
// console.log('oi5')
// });
// var forms = document.querySelector("#show-forms-code");
// forms.addEventListener("click", function() {
// console.log('oi6')
// });
// var ballons = document.querySelector("#show-ballons-code");
// ballons.addEventListener("click", function() {
// console.log('oi7')
// });
// var lists = document.querySelector("#show-lists-code");
// lists.addEventListener("click", function() {
// console.log('oi7')
// });
// var table = document.querySelector("#show-table-code");
// table.addEventListener("click", function() {
// console.log('oi7')
// });
// var progress = document.querySelector("#show-progress-code");
// progress.addEventListener("click", function() {
// console.log('oi7')
// });
// var badges = document.querySelector("#show-badges-code");
// badges.addEventListener("click", function() {
// console.log('oi7')
// });
// var reactions = document.querySelector("#show-icons-reactions-code");
// reactions.addEventListener("click", function() {
// console.log('oi7')
// });
// var sns = document.querySelector("#show-icons-sns-code");
// sns.addEventListener("click", function() {
// console.log('oi7')
// });
// var others = document.querySelector("#show-icons-others-code");
// others.addEventListener("click", function() {
// console.log('oi7')
// });
// var controllers = document.querySelector("#show-icons-controllers-code");
// controllers.addEventListener("click", function() {
// console.log('oi7')
// });
}
</script>
</html>

18
style.css
View File

@@ -100,3 +100,21 @@ div.containers > .nes-container {
display: none;
}
}
.show-code {
font-size: .7em;
height: 34px;
width: 128px;
position: absolute;
right: 5px;
top: 5px;
}
.code {
display: none;
font-size: .8em;
color: white;
background-color: #ce372b;
padding: 15px 0 0px 10px;
margin-top: -20px;
}