mirror of
https://git.sr.ht/~ashkeel/strimertul
synced 2024-09-20 02:00:49 +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 },
|
'100%': { opacity: 1 },
|
||||||
});
|
});
|
||||||
|
|
||||||
const contentShow = keyframes({
|
const contentShowCentered = keyframes({
|
||||||
'0%': { opacity: 0, transform: 'translate(-50%, -48%) scale(.96)' },
|
'0%': { opacity: 0, transform: 'translate(-50%, -48%) scale(.96)' },
|
||||||
'100%': { opacity: 1, transform: 'translate(-50%, -50%) scale(1)' },
|
'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, {
|
export const DialogOverlay = styled(DialogPrimitive.Overlay, {
|
||||||
backgroundColor: '$blackA10',
|
backgroundColor: '$blackA10',
|
||||||
position: 'fixed',
|
position: 'fixed',
|
||||||
|
@ -25,24 +30,48 @@ export const DialogOverlay = styled(DialogPrimitive.Overlay, {
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
|
const dialogPadding = '50px';
|
||||||
export const DialogContainer = styled(DialogPrimitive.Content, {
|
export const DialogContainer = styled(DialogPrimitive.Content, {
|
||||||
backgroundColor: '$gray2',
|
backgroundColor: '$gray2',
|
||||||
borderRadius: '0.25rem',
|
borderRadius: '0.25rem',
|
||||||
boxShadow:
|
boxShadow:
|
||||||
'hsl(206 22% 7% / 35%) 0px 10px 38px -10px, hsl(206 22% 7% / 20%) 0px 10px 20px -15px',
|
'hsl(206 22% 7% / 35%) 0px 10px 38px -10px, hsl(206 22% 7% / 20%) 0px 10px 20px -15px',
|
||||||
position: 'fixed',
|
position: 'fixed',
|
||||||
top: '50%',
|
|
||||||
left: '50%',
|
left: '50%',
|
||||||
transform: 'translate(-50%, -50%)',
|
top: dialogPadding,
|
||||||
|
transform: 'translate(-50%, 0%)',
|
||||||
width: '90vw',
|
width: '90vw',
|
||||||
maxWidth: '600px',
|
maxWidth: '600px',
|
||||||
maxHeight: '85vh',
|
maxHeight: '85vh',
|
||||||
padding: '1rem',
|
padding: '1rem',
|
||||||
overflow: 'auto',
|
overflow: 'auto',
|
||||||
'@media (prefers-reduced-motion: no-preference)': {
|
|
||||||
animation: `${contentShow()} 150ms cubic-bezier(0.16, 1, 0.3, 1)`,
|
|
||||||
},
|
|
||||||
'&:focus': { outline: 'none' },
|
'&: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, {
|
export const DialogTitle = styled(DialogPrimitive.Title, {
|
||||||
|
|
Loading…
Reference in a new issue