diff --git a/src/components/Input/BottomLinedInput.ts b/src/components/Input/BottomLinedInput.ts index dcd2c1eee..4edff899b 100644 --- a/src/components/Input/BottomLinedInput.ts +++ b/src/components/Input/BottomLinedInput.ts @@ -43,7 +43,7 @@ const getLabelColor = ({ hasValue, inverted }: InternalInputComponentProps) => { const BottomLinedInput: FC = styled(BaseInput)` ${sizeVariant} & ~ ${BottomLinedInputLabel} { - ${p => (p.hasValue || p.placeholder ? activeBottomLinedPosition(p.size as Pick) : '')}; + ${p => (p.hasValue || p.placeholder ? activeBottomLinedPosition(p.size) : '')}; color: ${getLabelColor}; background: ${p => (p.inverted ? Colors.AUTHENTIC_BLUE_900 : Colors.WHITE)}; } @@ -60,13 +60,13 @@ const BottomLinedInput: FC = styled(BaseInput) activeBottomLinedPosition(p.size as Pick)}; + ${p => activeBottomLinedPosition(p.size)}; } } &:focus:not(:disabled) { & ~ ${BottomLinedInputLabel} { - ${p => activeBottomLinedPosition(p.size as Pick)}; + ${p => activeBottomLinedPosition(p.size)}; color: ${p => (p.inverted ? Colors.WHITE : Colors.ACTION_BLUE_900)}; background: ${p => (p.inverted ? Colors.AUTHENTIC_BLUE_900 : Colors.WHITE)}; } diff --git a/src/components/Input/BottomLinedInputLabel.ts b/src/components/Input/BottomLinedInputLabel.ts index bbe8bbc3a..54c46fa41 100644 --- a/src/components/Input/BottomLinedInputLabel.ts +++ b/src/components/Input/BottomLinedInputLabel.ts @@ -5,7 +5,9 @@ import { get } from '../../utils/themeGet'; import { InternalInputComponentProps } from './BaseInput'; import { activePositionBaseStyles, BaseInputLabel } from './BaseInputLabel'; -const activeBottomLinedPosition = (size?: Pick): ReadonlyArray>> => css` +const activeBottomLinedPosition = ( + size?: Pick['size'] +): ReadonlyArray>> => css` ${activePositionBaseStyles}; top: ${size === 'small' ? '0' : '0.25rem'}; font-size: ${size === 'small' ? '0.625rem' : get('fontSizes.0')}; diff --git a/src/components/Input/BoxedInput.ts b/src/components/Input/BoxedInput.ts index 5a7b91fed..7848e623a 100644 --- a/src/components/Input/BoxedInput.ts +++ b/src/components/Input/BoxedInput.ts @@ -43,12 +43,12 @@ const getLabelColor = ({ hasValue, inverted }: InternalInputComponentProps) => { const BoxedInput: FC = styled(BaseInput)` ${sizeVariant} & + ${BoxedInputLabel} { - ${p => (p.hasValue || p.placeholder ? activeBoxedPosition(p.size as Pick) : undefined)}; + ${p => (p.hasValue || p.placeholder ? activeBoxedPosition(p.size) : undefined)}; color: ${getLabelColor}; background: ${p => (p.inverted ? Colors.AUTHENTIC_BLUE_900 : Colors.WHITE)}; background: ${p => `linear-gradient(0deg, ${p.inverted ? Colors.AUTHENTIC_BLUE_900 : Colors.WHITE} calc(50% + ${ - (p.size as Pick) === 'small' ? '0.0825rem' : '0.0625rem' + p.size === 'small' ? '0.0825rem' : '0.0625rem' }), transparent 50%)`}; } @@ -64,18 +64,18 @@ const BoxedInput: FC = styled(BaseInput) activeBoxedPosition(p.size as Pick)}; + ${p => activeBoxedPosition(p.size)}; } } &:focus:not(:disabled) { & + ${BoxedInputLabel} { - ${p => activeBoxedPosition(p.size as Pick)}; + ${p => activeBoxedPosition(p.size)}; color: ${p => (p.inverted ? Colors.WHITE : Colors.ACTION_BLUE_900)}; background: ${p => (p.inverted ? Colors.AUTHENTIC_BLUE_900 : Colors.WHITE)}; background: ${p => `linear-gradient(0deg, ${p.inverted ? Colors.AUTHENTIC_BLUE_900 : Colors.WHITE} calc(50% + ${ - (p.size as Pick) === 'small' ? '0.0825rem' : '0.0625rem' + p.size === 'small' ? '0.0825rem' : '0.0625rem' }), transparent 50%)`}; } } diff --git a/src/components/Input/BoxedInputLabel.ts b/src/components/Input/BoxedInputLabel.ts index c25a5c43c..93ea23b75 100644 --- a/src/components/Input/BoxedInputLabel.ts +++ b/src/components/Input/BoxedInputLabel.ts @@ -5,7 +5,9 @@ import { get } from '../../utils/themeGet'; import { InternalInputComponentProps } from './BaseInput'; import { activePositionBaseStyles, BaseInputLabel } from './BaseInputLabel'; -const activeBoxedPosition = (size: Pick): ReadonlyArray>> => css` +const activeBoxedPosition = ( + size: Pick['size'] +): ReadonlyArray>> => css` ${activePositionBaseStyles}; top: ${size === 'small' ? '-0.375rem' : '-0.5rem'};