studio/docs
Archived
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

♻️(app-impress) add transition props Box component

Browse Source 
Add transition props to Box component.
This commit is contained in:
Anthony LC
2024-05-14 10:44:44 +02:00
committed by Anthony LC
parent f88d625622
commit c25814b060
1 changed files with 5 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
src/frontend/apps/impress/src/components/Box.tsx
View File

@@ -21,6 +21,7 @@ export interface BoxProps {
$effect?: 'show' | 'hide'; $effect?: 'show' | 'hide';
$flex?: boolean; $flex?: boolean;
$gap?: CSSProperties['gap']; $gap?: CSSProperties['gap'];
$hasTransition?: boolean;
$height?: CSSProperties['height']; $height?: CSSProperties['height'];
$justify?: CSSProperties['justifyContent']; $justify?: CSSProperties['justifyContent'];
$overflow?: CSSProperties['overflow']; $overflow?: CSSProperties['overflow'];
@@ -30,6 +31,7 @@ export interface BoxProps {
$padding?: MarginPadding; $padding?: MarginPadding;
$position?: CSSProperties['position']; $position?: CSSProperties['position'];
$radius?: CSSProperties['borderRadius']; $radius?: CSSProperties['borderRadius'];
$transition?: CSSProperties['transition'];
$width?: CSSProperties['width']; $width?: CSSProperties['width'];
} }
@@ -46,6 +48,8 @@ export const Box = styled('div')<BoxProps>`
${({ $flex }) => $flex === false && `display: block;`} ${({ $flex }) => $flex === false && `display: block;`}
${({ $gap }) => $gap && `gap: ${$gap};`} ${({ $gap }) => $gap && `gap: ${$gap};`}
${({ $height }) => $height && `height: ${$height};`} ${({ $height }) => $height && `height: ${$height};`}
${({ $hasTransition }) =>
$hasTransition && `transition: all 0.3s ease-in-out;`}
${({ $justify }) => $justify && `justify-content: ${$justify};`} ${({ $justify }) => $justify && `justify-content: ${$justify};`}
${({ $margin }) => $margin && stylesMargin($margin)} ${({ $margin }) => $margin && stylesMargin($margin)}
${({ $maxWidth }) => $maxWidth && `max-width: ${$maxWidth};`} ${({ $maxWidth }) => $maxWidth && `max-width: ${$maxWidth};`}
@@ -54,6 +58,7 @@ export const Box = styled('div')<BoxProps>`
${({ $padding }) => $padding && stylesPadding($padding)} ${({ $padding }) => $padding && stylesPadding($padding)}
${({ $position }) => $position && `position: ${$position};`} ${({ $position }) => $position && `position: ${$position};`}
${({ $radius }) => $radius && `border-radius: ${$radius};`} ${({ $radius }) => $radius && `border-radius: ${$radius};`}
${({ $transition }) => $transition && `transition: ${$transition};`}
${({ $width }) => $width && `width: ${$width};`} ${({ $width }) => $width && `width: ${$width};`}
${({ $css }) => $css && `${$css};`} ${({ $css }) => $css && `${$css};`}
${({ $effect }) => { ${({ $effect }) => {