web/SupportedServices: better popover animation
This commit is contained in:
parent
0e09bf9895
commit
3203f5bb2f
1 changed files with 9 additions and 4 deletions
|
@ -73,24 +73,29 @@
|
||||||
#services-popover {
|
#services-popover {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
transition: transform 0.2s cubic-bezier(0.53, 0.05, 0.23, 0.99);
|
|
||||||
border-radius: 18px;
|
border-radius: 18px;
|
||||||
background: var(--button);
|
background: var(--button);
|
||||||
box-shadow:
|
box-shadow:
|
||||||
var(--button-box-shadow),
|
var(--button-box-shadow),
|
||||||
0 0 10px 10px var(--button-stroke);
|
0 0 10px 10px var(--button-stroke);
|
||||||
|
|
||||||
transform: scale(0);
|
|
||||||
transform-origin: top center;
|
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
||||||
padding: 12px;
|
padding: 12px;
|
||||||
gap: 6px;
|
gap: 6px;
|
||||||
top: 6px;
|
top: 6px;
|
||||||
|
|
||||||
|
opacity: 0;
|
||||||
|
transform: scale(0);
|
||||||
|
transform-origin: top center;
|
||||||
|
|
||||||
|
transition:
|
||||||
|
transform 0.2s cubic-bezier(0.53, 0.05, 0.23, 0.99),
|
||||||
|
opacity 0.2s cubic-bezier(0.53, 0.05, 0.23, 0.99);
|
||||||
}
|
}
|
||||||
|
|
||||||
#services-popover.expanded {
|
#services-popover.expanded {
|
||||||
transform: scale(1);
|
transform: scale(1);
|
||||||
|
opacity: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
#services-button {
|
#services-button {
|
||||||
|
|
Loading…
Reference in a new issue