Compare commits
2 Commits
9850279e61
...
e94805c897
Author | SHA1 | Date | |
---|---|---|---|
e94805c897 | |||
54f39d0ad8 |
2
css/fontawesome/all.min.css
vendored
2
css/fontawesome/all.min.css
vendored
File diff suppressed because one or more lines are too long
27
css/main.css
27
css/main.css
|
@ -1,3 +1,8 @@
|
|||
:root {
|
||||
--btn-dark: #1C1C1C;
|
||||
--btn-light: #E3E3E3;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Lato';
|
||||
src: url('fonts/Lato-Regular.ttf');
|
||||
|
@ -55,24 +60,32 @@ main {
|
|||
|
||||
border-radius: 100vw;
|
||||
}
|
||||
.btn.cbtn::after {
|
||||
content: "";
|
||||
.btn.cbtn > i {
|
||||
display: grid;
|
||||
|
||||
padding: inherit;
|
||||
}
|
||||
.btn.cbtn > i.fa-cog::after {
|
||||
display: grid;
|
||||
place-content: center;
|
||||
position: absolute;
|
||||
z-index: 1000;
|
||||
|
||||
overflow: hidden;
|
||||
|
||||
padding: 0rem;
|
||||
|
||||
background: #fff;
|
||||
filter: invert(1);
|
||||
|
||||
width: 0;
|
||||
height: 0;
|
||||
|
||||
border-radius: 100vw;
|
||||
|
||||
backdrop-filter: invert(1);
|
||||
transition: padding .2s;
|
||||
}
|
||||
/* When deployed on a platform, choose one or the other, not both */
|
||||
.btn.cbtn:focus::after, /* TV */
|
||||
.btn.cbtn:hover::after /* PC */ {
|
||||
.btn.cbtn:focus > i::after, /* TV */
|
||||
.btn.cbtn:hover > i::after /* PC */ {
|
||||
padding: inherit;
|
||||
}
|
||||
|
||||
|
|
|
@ -2,11 +2,11 @@ addEventListener("load", () => {
|
|||
const onAnimationFinished = (e) => {
|
||||
e.target.remove();
|
||||
};
|
||||
const onClick = (e) => {
|
||||
const onClick = (e, btn) => {
|
||||
const clickElement = document.createElement("div");
|
||||
clickElement.className = "click";
|
||||
clickElement.addEventListener("animationend", onAnimationFinished);
|
||||
e.target.appendChild(clickElement);
|
||||
btn.appendChild(clickElement);
|
||||
};
|
||||
for (const btn of document.getElementsByClassName("btn")) {
|
||||
btn.addEventListener("focusin", () => {
|
||||
|
@ -15,6 +15,6 @@ addEventListener("load", () => {
|
|||
btn.addEventListener("focusout", () => {
|
||||
console.log("OUT");
|
||||
});
|
||||
btn.addEventListener("click", onClick);
|
||||
btn.addEventListener("click", (e) => onClick(e, btn) );
|
||||
};
|
||||
});
|
|
@ -11,10 +11,10 @@
|
|||
</head>
|
||||
<body>
|
||||
<main class="grid center">
|
||||
<button class="btn cbtn"><i class="fas fa-cog"></i></button>
|
||||
<button class="btn cbtn"><i class="fas fa-cog"></i></button>
|
||||
<button class="btn cbtn"><i class="fas fa-cog"></i></button>
|
||||
<button class="btn cbtn"><i class="fas fa-cog"></i></button>
|
||||
<button class="btn cbtn"><i class="fas fa-cog after"></i></button>
|
||||
<button class="btn cbtn"><i class="fas fa-cog after"></i></button>
|
||||
<button class="btn cbtn"><i class="fas fa-cog after"></i></button>
|
||||
<button class="btn cbtn"><i class="fas fa-cog after"></i></button>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
Loading…
Reference in New Issue
Block a user