mirror of
https://git.sr.ht/~ashkeel/strimertul
synced 2024-09-18 01:50:50 +00:00
fix: make most big dialogs not vertically centered to avoid repositioning
fixes #26
This commit is contained in:
parent
b9181c2d99
commit
c869ac7d0e
1 changed files with 35 additions and 6 deletions
|
@ -11,11 +11,16 @@ const overlayShow = keyframes({
|
|||
'100%': { opacity: 1 },
|
||||
});
|
||||
|
||||
const contentShow = keyframes({
|
||||
const contentShowCentered = keyframes({
|
||||
'0%': { opacity: 0, transform: 'translate(-50%, -48%) scale(.96)' },
|
||||
'100%': { opacity: 1, transform: 'translate(-50%, -50%) scale(1)' },
|
||||
});
|
||||
|
||||
const contentShowTop = keyframes({
|
||||
'0%': { opacity: 0, transform: 'translate(-50%, -10%) scale(.96)' },
|
||||
'100%': { opacity: 1, transform: 'translate(-50%, 0%) scale(1)' },
|
||||
});
|
||||
|
||||
export const DialogOverlay = styled(DialogPrimitive.Overlay, {
|
||||
backgroundColor: '$blackA10',
|
||||
position: 'fixed',
|
||||
|
@ -25,24 +30,48 @@ export const DialogOverlay = styled(DialogPrimitive.Overlay, {
|
|||
},
|
||||
});
|
||||
|
||||
const dialogPadding = '50px';
|
||||
export const DialogContainer = styled(DialogPrimitive.Content, {
|
||||
backgroundColor: '$gray2',
|
||||
borderRadius: '0.25rem',
|
||||
boxShadow:
|
||||
'hsl(206 22% 7% / 35%) 0px 10px 38px -10px, hsl(206 22% 7% / 20%) 0px 10px 20px -15px',
|
||||
position: 'fixed',
|
||||
top: '50%',
|
||||
left: '50%',
|
||||
transform: 'translate(-50%, -50%)',
|
||||
top: dialogPadding,
|
||||
transform: 'translate(-50%, 0%)',
|
||||
width: '90vw',
|
||||
maxWidth: '600px',
|
||||
maxHeight: '85vh',
|
||||
padding: '1rem',
|
||||
overflow: 'auto',
|
||||
'@media (prefers-reduced-motion: no-preference)': {
|
||||
animation: `${contentShow()} 150ms cubic-bezier(0.16, 1, 0.3, 1)`,
|
||||
},
|
||||
'&:focus': { outline: 'none' },
|
||||
'@media (prefers-reduced-motion: no-preference)': {
|
||||
animation: `${contentShowTop()} 150ms cubic-bezier(0.16, 1, 0.3, 1)`,
|
||||
},
|
||||
variants: {
|
||||
verticalPosition: {
|
||||
centered: {
|
||||
top: '50%',
|
||||
transform: 'translate(-50%, -50%)',
|
||||
},
|
||||
'@media (prefers-reduced-motion: no-preference)': {
|
||||
animation: `${contentShowCentered()} 150ms cubic-bezier(0.16, 1, 0.3, 1)`,
|
||||
},
|
||||
},
|
||||
size: {
|
||||
stretch: {
|
||||
width: 'auto',
|
||||
maxWidth: 'none',
|
||||
maxHeight: 'none',
|
||||
top: dialogPadding,
|
||||
bottom: dialogPadding,
|
||||
left: dialogPadding,
|
||||
right: dialogPadding,
|
||||
transform: 'none',
|
||||
},
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
export const DialogTitle = styled(DialogPrimitive.Title, {
|
||||
|
|
Loading…
Reference in a new issue