external-repos/squoosh
1
0
Fork 1
mirror of https://github.com/GoogleChromeLabs/squoosh.git synced 2025-11-16 10:39:53 +00:00
Code Issues Packages Projects Releases Wiki Activity

Loading icon enter/exit anim

Browse Source
This commit is contained in:
Jake Archibald
2018-10-20 12:22:18 +01:00
parent 720cb9da8b
commit 9bf5cdb9d7
2 changed files with 61 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

70
src/components/Options/style.scss
View File

@@ -79,26 +79,6 @@ $horizontalPadding: 15px;
padding: 0 $horizontalPadding;
}
.download {
background: #34B9EB;
--size: 38px;
width: var(--size);
height: var(--size);
display: flex;
align-items: center;
justify-content: center;
}
.download-icon {
color: #fff;
display: block;
--size: 24px;
width: var(--size);
height: var(--size);
padding: 7px;
filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.7));
}
.size-delta {
font-size: 1.1rem;
font-style: italic;
@@ -130,8 +110,58 @@ $horizontalPadding: 15px;
padding: 5px 10px;
}
@keyframes action-enter {
from {
transform: rotate(-90deg);
opacity: 0;
animation-timing-function: ease-out;
}
}
@keyframes action-leave {
from {
transform: rotate(0deg);
opacity: 1;
animation-timing-function: ease-out;
}
}
.download {
background: #34B9EB;
--size: 38px;
width: var(--size);
height: var(--size);
display: grid;
align-items: center;
justify-content: center;
}
.download-link {
animation: action-enter 0.2s;
grid-area: 1/1;
}
.download-link-disable {
pointer-events: none;
opacity: 0;
transform: rotate(90deg);
animation: action-leave 0.2s;
}
.download-icon {
color: #fff;
display: block;
--size: 24px;
width: var(--size);
height: var(--size);
padding: 7px;
filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.7));
}
.spinner {
--color: #fff;
--delay: 0;
--size: 22px;
grid-area: 1/1;
padding: 7px;
}