Sunpy/webdroid
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Compare commits

base: Sunpy:9850279e61de8470bf95b15ba0447afecc86a60b
Branches Tags
Sunpy:master
...
compare: Sunpy:e94805c8978d58ac64be316e22bec094c1d6f1ff
Branches Tags
Sunpy:master

2 Commits
9850279e61 ... e94805c897

Author SHA1 Message Date
Sunpy
e94805c897 Fontawesome after support for filter usage 2021-01-02 23:50:42 +01:00
Sunpy
54f39d0ad8 Backdrop replacement v1 2021-01-02 23:20:45 +01:00
4 changed files with 28 additions and 15 deletions
Show Stats Expand all files Collapse all files

2
css/fontawesome/all.min.css vendored
View File

File diff suppressed because one or more lines are too long

27
css/main.css
View File

@ -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;
}

6
js/button.js
View File

@ -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) );
};
});

8
tests/buttons/cbutton.html
View File

@ -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>