diff --git a/src/Flex.tsx b/src/Flex.tsx index 4c01503..dd99207 100644 --- a/src/Flex.tsx +++ b/src/Flex.tsx @@ -16,9 +16,9 @@ const StyledFlex = styled.div>` width: 100%; @media (max-width: 960px) { - max-width: ${({ colTablet, gabTablet = 1 }) => + max-width: ${({ colTablet, gapTablet = 1 }) => colTablet && colTablet < 12 - ? `${(100 * colTablet) / 12 - gabTablet}%` + ? `${(100 * colTablet) / 12 - gapTablet}%` : '100%'}; } @@ -37,7 +37,7 @@ const Flex: React.FC = ({ colTablet, colMobile, gap, - gabTablet, + gapTablet, gapMobile, align, justifyContent, @@ -49,7 +49,7 @@ const Flex: React.FC = ({ colTablet={colTablet} colMobile={colMobile} gap={gap} - gabTablet={gabTablet} + gapTablet={gapTablet} gapMobile={gapMobile} align={align} justifyContent={justifyContent} @@ -57,7 +57,14 @@ const Flex: React.FC = ({ style={style} > {children} - + ); diff --git a/src/Item.ts b/src/Item.ts index 0c7c7e2..8b5b787 100644 --- a/src/Item.ts +++ b/src/Item.ts @@ -13,9 +13,9 @@ const Item = styled.div` `} @media (max-width: 960px) { - max-width: ${({ colTablet, gabTablet = 1 }) => + max-width: ${({ colTablet, gapTablet = 1 }) => colTablet && colTablet < 12 - ? `${(100 * colTablet) / 12 - gabTablet}%` + ? `${(100 * colTablet) / 12 - gapTablet}%` : '100%'}; margin-bottom: ${({ marginBottom = 10 }) => `${marginBottom}px`}; } diff --git a/src/interfaces.ts b/src/interfaces.ts index b23e29d..cbe36c0 100644 --- a/src/interfaces.ts +++ b/src/interfaces.ts @@ -2,7 +2,7 @@ import { HTMLAttributes, Component } from 'react'; export interface ItemProps extends HTMLAttributes { gap?: number; - gabTablet?: number; + gapTablet?: number; gapMobile?: number; col?: number; colTablet?: number; @@ -16,7 +16,7 @@ export interface ItemProps extends HTMLAttributes { export interface FlexProps { gap?: number; - gabTablet?: number; + gapTablet?: number; gapMobile?: number; align?: string; justifyContent?: string;