mirror_css/nes.css
1
0
Fork 0
mirror of https://github.com/nostalgic-css/NES.css.git synced 2025-08-30 17:30:23 +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">
<h2 class="title">Buttons</h2>
<div>
<div id="buttons">
<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>
<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>
</section>
<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-error">Error<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>
</section>
@@ -465,92 +466,34 @@
</footer>
</body>
<script>
var link = document.querySelector("a.github-link");
var octocat = document.querySelector("a.github-link > i.nes-octocat");
link.addEventListener("mouseover", function() {
octocat.classList.add("animate");
});
link.addEventListener("mouseout", function() {
octocat.classList.remove("animate");
});
function copyToClipboard(element) {
var divToClipboard = document.querySelector('#' + element);
const el = document.createElement('textarea');
el.value = divToClipboard.innerHTML;
el.setAttribute('readonly', '');
el.style.position = 'absolute';
el.style.left = '-9999px';
document.body.appendChild(el);
el.select();
document.execCommand('copy');
document.body.removeChild(el);
}
window.onload = function() {
var buttons = document.querySelector("#show-buttons-code");
var codeButtons = document.querySelector("#code-buttons");
buttons.addEventListener("click", function() {
console.log('test')
var link = document.querySelector("a.github-link");
var octocat = document.querySelector("a.github-link > i.nes-octocat");
link.addEventListener("mouseover", function() {
octocat.classList.add("animate");
});
link.addEventListener("mouseout", function() {
octocat.classList.remove("animate");
});
// 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')
// });
var buttons = document.querySelector("#show-buttons-code");
var codeButtons = document.querySelector("#code-buttons");
buttons.addEventListener("click", function() {
codeButtons.style.display = codeButtons.style.display === 'block' ? 'none' : 'block';
});
}
</script>
</html>

15
style.css
View File

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