LLM/DocsGPT
1
0
Fork 0
mirror of https://github.com/arc53/DocsGPT.git synced 2025-11-30 17:13:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: large size animation

Browse Source
This commit is contained in:
Alex
2024-11-10 22:11:20 +00:00
parent dfc3cdd5d4
commit e475a4cc7c
1 changed files with 31 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
extensions/react-widget/src/components/DocsGPTWidget.tsx
View File

@@ -112,16 +112,20 @@ const StyledContainer = styled.div<{ isOpen: boolean }>`
justify-content: space-between;
bottom: 0;
left: 0;
background-color: ${props => props.theme.primary.bg};
background-color: ${(props) => props.theme.primary.bg};
font-family: sans-serif;
display: flex;
border-radius: 12px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), 0 2px 4px rgba(0, 0, 0, 0.1);
padding: 26px 26px 0px 26px;
animation: ${({ isOpen }) =>
isOpen
? 'openContainer 150ms ease-in forwards'
: 'closeContainer 250ms ease-in forwards'};
animation: ${({ isOpen, theme }) =>
theme.dimensions.size === 'large'
? isOpen
? 'fadeIn 150ms ease-in forwards'
: 'fadeOut 150ms ease-in forwards'
: isOpen
? 'openContainer 150ms ease-in forwards'
: 'closeContainer 250ms ease-in forwards'};
@keyframes openContainer {
0% {
width: 200px;
@@ -144,6 +148,28 @@ const StyledContainer = styled.div<{ isOpen: boolean }>`
height: 100px;
}
}
@keyframes fadeIn {
from {
opacity: 0;
width: ${(props) => props.theme.dimensions.width};
height: ${(props) => props.theme.dimensions.height};
transform: scale(0.9);
}
to {
opacity: 1;
transform: scale(1);
width: ${(props) => props.theme.dimensions.width};
height: ${(props) => props.theme.dimensions.height};
}
}
@keyframes fadeOut {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
@media only screen and (max-width: 768px) {
max-height: 100vh;
max-width: 80vw;