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

feat(index.html): added first draft of show/hide code and copy.

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

111
index.html
View File

@@ -44,14 +44,14 @@
<section class="nes-container with-title"> <section class="nes-container with-title">
<h2 class="title">Buttons</h2> <h2 class="title">Buttons</h2>
<div> <div id="buttons">
<button type="button" class="nes-btn">Normal</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-primary">Primary</button>
<button type="button" class="nes-btn is-success">Success</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-warning">Warning</button>
<button type="button" class="nes-btn is-error">Error</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-disabled">Disabled</button>
<button type="button" class="nes-btn is-primary show-code" id="show-buttons-code">Show Code</button> <button type="button" class="nes-btn is-error show-code" id="show-buttons-code"><></button>
</div> </div>
</section> </section>
<section class="nes-container code" id="code-buttons"> <section class="nes-container code" id="code-buttons">
@@ -62,6 +62,7 @@
<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-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-error">Error<span><</span>/button></p>
<p><span><</span>button type="button" class="nes-btn is-disabled">Disabled<span><</span>/button></p> <p><span><</span>button type="button" class="nes-btn is-disabled">Disabled<span><</span>/button></p>
<button type="button" class="nes-btn show-code copy" id="copy-buttons" onClick="copyToClipboard('buttons')">Copy</button>
</code> </code>
</section> </section>
@@ -465,92 +466,34 @@
</footer> </footer>
</body> </body>
<script> <script>
var link = document.querySelector("a.github-link"); function copyToClipboard(element) {
var octocat = document.querySelector("a.github-link > i.nes-octocat"); var divToClipboard = document.querySelector('#' + element);
link.addEventListener("mouseover", function() { const el = document.createElement('textarea');
octocat.classList.add("animate"); el.value = divToClipboard.innerHTML;
}); el.setAttribute('readonly', '');
link.addEventListener("mouseout", function() { el.style.position = 'absolute';
octocat.classList.remove("animate"); el.style.left = '-9999px';
}); document.body.appendChild(el);
el.select();
document.execCommand('copy');
document.body.removeChild(el);
}
window.onload = function() { window.onload = function() {
var buttons = document.querySelector("#show-buttons-code"); var link = document.querySelector("a.github-link");
var codeButtons = document.querySelector("#code-buttons"); var octocat = document.querySelector("a.github-link > i.nes-octocat");
link.addEventListener("mouseover", function() {
buttons.addEventListener("click", function() { octocat.classList.add("animate");
console.log('test') });
link.addEventListener("mouseout", function() {
octocat.classList.remove("animate");
}); });
// var containers = document.querySelector("#show-containers-code"); var buttons = document.querySelector("#show-buttons-code");
// container.addEventListener("click", function() { var codeButtons = document.querySelector("#code-buttons");
// console.log('oi2') buttons.addEventListener("click", function() {
// }); codeButtons.style.display = codeButtons.style.display === 'block' ? 'none' : 'block';
});
// 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> </script>
</html> </html>

15
style.css
View File

@@ -104,17 +104,22 @@ div.containers > .nes-container {
.show-code { .show-code {
font-size: .7em; font-size: .7em;
height: 34px; height: 34px;
width: 128px; width: 43px;
position: absolute; position: absolute;
right: 5px; right: -5px;
top: 5px; top: -5px;
}
.copy {
height: 34px;
width: 58px;
} }
.code { .code {
display: none; display: none;
font-size: .8em; font-size: .8em;
color: white; color: #e76e55;
background-color: #ce372b; background-color: rgba(45, 45, 45, .9);
padding: 15px 0 0px 10px; padding: 15px 0 0px 10px;
margin-top: -20px; margin-top: -20px;
} }