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

Fontawesome after support for filter usage

Browse Source
This commit is contained in:
Emily 2021-01-02 23:50:42 +01:00
parent 54f39d0ad8
commit e94805c897
4 changed files with 34 additions and 37 deletions
Show Stats Download Patch File Download Diff File 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

55
css/main.css
View File

@ -55,11 +55,39 @@ main {
border: none;
background: none;
color: var(--btn-dark);
color: #000;
font: unset;
border-radius: 100vw;
}
.btn.cbtn > i {
display: grid;
padding: inherit;
}
.btn.cbtn > i.fa-cog::after {
display: grid;
place-content: center;
position: absolute;
overflow: hidden;
padding: 0rem;
background: #fff;
filter: invert(1);
width: 0;
height: 0;
border-radius: 100vw;
transition: padding .2s;
}
/* When deployed on a platform, choose one or the other, not both */
.btn.cbtn:focus > i::after, /* TV */
.btn.cbtn:hover > i::after /* PC */ {
padding: inherit;
}
@keyframes cbtn-click {
from {
@ -97,28 +125,3 @@ main {
.btn.sbtn::after {
}
.shadow {
display: inherit;
place-content: center;
place-items: center;
position: absolute;
filter: invert(1);
background: var(--btn-light);;
overflow: hidden;
padding: 0rem;
width: 0;
height: 0;
border-radius: 100vw;
transition: padding .2s;
}
/* When deployed on a platform, choose one or the other, not both */
.btn.cbtn:focus > .shadow, /* TV */
.btn.cbtn:hover > .shadow /* PC */ {
padding: inherit;
}

6
js/button.js
View File

@ -16,11 +16,5 @@ addEventListener("load", () => {
console.log("OUT");
});
btn.addEventListener("click", (e) => onClick(e, btn) );
// Add backdrop-filter replacement
const bdfr = document.createElement("div");
bdfr.className = "shadow";
bdfr.innerHTML = btn.innerHTML;
btn.appendChild(bdfr);
};
});

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>