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

Compare commits

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

5 Commits
9850279e61 ... master

Author SHA1 Message Date
Sunpy
b286e2e889 Overflow click animation 2021-01-03 01:06:46 +01:00
Sunpy
1dab0fcf97 Firefox support 2021-01-03 01:04:37 +01:00
Sunpy
3737631412 CSS class typo 2021-01-03 00:03:51 +01:00
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 55 additions and 20 deletions
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

59
css/main.css
View File

@@ -1,3 +1,8 @@
:root {
--btn-dark: #1C1C1C;
--btn-light: #E3E3E3;
}
@font-face { @font-face {
font-family: 'Lato'; font-family: 'Lato';
src: url('fonts/Lato-Regular.ttf'); src: url('fonts/Lato-Regular.ttf');
@@ -16,6 +21,8 @@ body {
grid-template-rows: 1fr; grid-template-rows: 1fr;
width: 100vw; width: 100vw;
height: 100vh; height: 100vh;
overflow: hidden;
} }
main { main {
@@ -29,9 +36,6 @@ main {
place-items: center; place-items: center;
} }
.btn {
}
.btn:focus { .btn:focus {
outline: none; outline: none;
} }
@@ -43,7 +47,6 @@ main {
position: relative; position: relative;
padding: 2.2rem; padding: 2.2rem;
margin: -.4rem;
width: 0; width: 0;
height: 0; height: 0;
@@ -55,25 +58,56 @@ main {
border-radius: 100vw; border-radius: 100vw;
} }
.btn.cbtn::after { .btn.cbtn {
content: ""; --padding: 5vmin;
padding: var(--padding);
font-size: 3vmin;
}
.btn.cbtn.medium {
--padding: 5vmin;
padding: var(--padding);
font-size: 3vmin;
}
.btn.cbtn.big {
--padding: 30vmin;
padding: var(--padding);
font-size: 20vmin;
}
.btn.cbtn.overlap {
margin: -1vmin;
}
.btn.cbtn > i {
display: grid;
place-items: center;
}
.btn.cbtn > i::after {
display: grid;
place-content: center;
position: absolute; position: absolute;
z-index: 1000; z-index: 1000;
overflow: hidden;
padding: 0rem; padding: 0rem;
background: var(--btn-light);
color: var(--btn-dark);
filter: invert(1);
width: 0; width: 0;
height: 0; height: 0;
border-radius: 100vw; border-radius: 100vw;
backdrop-filter: invert(1);
transition: padding .2s; transition: padding .2s;
} }
/* When deployed on a platform, choose one or the other, not both */ /* When deployed on a platform, choose one or the other, not both */
.btn.cbtn:focus::after, /* TV */ .btn.cbtn:focus > i::after, /* TV */
.btn.cbtn:hover::after /* PC */ { .btn.cbtn:hover > i::after /* PC */ {
padding: inherit; padding: var(--padding);
} }
@keyframes cbtn-click { @keyframes cbtn-click {
@@ -82,7 +116,7 @@ main {
opacity: 1; opacity: 1;
} }
to { to {
padding: inherit; padding: calc(var(--padding) * 1.3);
opacity: 0; opacity: 0;
} }
} }
@@ -109,6 +143,7 @@ main {
text-decoration: none; text-decoration: none;
font-family: Lato; font-family: Lato;
} }
.btn.sbtn::after { .btn.sbtn::after {
} }

6
js/button.js
View File

@@ -2,11 +2,11 @@ addEventListener("load", () => {
const onAnimationFinished = (e) => { const onAnimationFinished = (e) => {
e.target.remove(); e.target.remove();
}; };
const onClick = (e) => { const onClick = (e, btn) => {
const clickElement = document.createElement("div"); const clickElement = document.createElement("div");
clickElement.className = "click"; clickElement.className = "click";
clickElement.addEventListener("animationend", onAnimationFinished); clickElement.addEventListener("animationend", onAnimationFinished);
e.target.appendChild(clickElement); btn.appendChild(clickElement);
}; };
for (const btn of document.getElementsByClassName("btn")) { for (const btn of document.getElementsByClassName("btn")) {
btn.addEventListener("focusin", () => { btn.addEventListener("focusin", () => {
@@ -15,6 +15,6 @@ addEventListener("load", () => {
btn.addEventListener("focusout", () => { btn.addEventListener("focusout", () => {
console.log("OUT"); 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> </head>
<body> <body>
<main class="grid center"> <main class="grid center">
<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"></i></button> <button class="btn cbtn"><i class="fas fa-cog after"></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"></i></button> <button class="btn cbtn"><i class="fas fa-cog after"></i></button>
</main> </main>
</body> </body>
</html> </html>