80 lines
1.4 KiB
SCSS
80 lines
1.4 KiB
SCSS
.NewChatButton {
|
|
position: absolute;
|
|
right: 1rem;
|
|
bottom: 1rem;
|
|
transform: translateY(5rem);
|
|
|
|
transition: transform .25s cubic-bezier(0.34, 1.56, 0.64, 1);
|
|
|
|
body.animation-level-0 & {
|
|
transform: none !important;
|
|
opacity: 0;
|
|
|
|
transition: opacity .15s;
|
|
|
|
&.revealed {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
&.revealed {
|
|
transform: translateY(0);
|
|
|
|
@media (max-width: 600px) {
|
|
// Force rendering in the composite layer to fix the z-index rendering issue
|
|
transform: translate3d(0,0,10px);
|
|
transform-style: preserve-3d;
|
|
}
|
|
}
|
|
|
|
&.menu-is-open {
|
|
&::before {
|
|
content: '';
|
|
display: block;
|
|
position: absolute;
|
|
top: -13rem;
|
|
left: -11rem;
|
|
right: -1rem;
|
|
bottom: -1rem;
|
|
z-index: -1;
|
|
}
|
|
}
|
|
|
|
.is-touch-env & {
|
|
.Menu > .backdrop {
|
|
position: absolute;
|
|
left: -100vw;
|
|
right: -100vw;
|
|
top: -100vh;
|
|
bottom: -100vh;
|
|
}
|
|
}
|
|
|
|
> .Button {
|
|
.icon-new-chat-filled,
|
|
.icon-close {
|
|
position: absolute;
|
|
}
|
|
|
|
&:not(.active) {
|
|
.icon-new-chat-filled {
|
|
animation: grow-icon .4s ease-out;
|
|
}
|
|
|
|
.icon-close {
|
|
animation: hide-icon .4s forwards ease-out;
|
|
}
|
|
}
|
|
|
|
&.active {
|
|
.icon-close {
|
|
animation: grow-icon .4s ease-out;
|
|
}
|
|
|
|
.icon-new-chat-filled {
|
|
animation: hide-icon .4s forwards ease-out;
|
|
}
|
|
}
|
|
}
|
|
}
|