purchasing/fuse-angular
3
0
Fork 0
mirror of https://github.com/richard-loafle/fuse-angular.git synced 2024-10-30 01:08:47 +00:00
Code Issues Packages Projects Releases Wiki Activity

(QuickChat) Fixed: Overflowing issue

Browse Source
This commit is contained in:
sercan 2021-08-31 15:47:35 +03:00
parent 206ef711a4
commit 693e44dbaf
2 changed files with 34 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/app/layout/common/quick-chat/quick-chat.component.html
View File

@ -1,6 +1,6 @@
<div class="fixed lg:sticky top-0 bottom-0 lg:left-full w-full sm:w-96 lg:w-16 lg:h-screen">
<div class="fixed lg:sticky top-0 bottom-0 lg:left-full w-full sm:w-96 lg:w-16 lg:h-screen lg:shadow">
<div
class="flex flex-col w-full sm:w-96 h-full lg:shadow transform transition-transform duration-400 ease-drawer bg-card"
class="flex flex-col w-full sm:w-96 h-full transform transition-transform duration-400 ease-drawer bg-card"
[ngClass]="{'-translate-x-full sm:-translate-x-96 lg:-translate-x-80 shadow': opened, 'translate-x-0': !opened}">
<!-- Header -->

32
src/app/layout/common/quick-chat/quick-chat.component.scss
View File

@ -1,5 +1,25 @@
quick-chat {
z-index: 399;
> div {
overflow: hidden;
}
&.quick-chat-opened {
> div {
overflow: visible;
}
}
:not(&.quick-chat-opened) {
> div {
overflow: visible;
animation: addOverflowHidden 1ms linear 400ms;
animation-fill-mode: forwards;
}
}
}
/* Adjustments depending on the selected layout */
@ -24,3 +44,15 @@ quick-chat {
opacity: 1;
background-color: transparent;
}
@keyframes addOverflowHidden {
0% {
overflow: visible
}
99% {
overflow: visible;
}
100% {
overflow: hidden;
}
}