diff --git a/packages/react/src/components/Forms/Input/index.scss b/packages/react/src/components/Forms/Input/index.scss index b2d4974..09458fa 100644 --- a/packages/react/src/components/Forms/Input/index.scss +++ b/packages/react/src/components/Forms/Input/index.scss @@ -5,7 +5,6 @@ border-style: var(--c--components--forms-input--border-style); background-color: var(--c--components--forms-input--background-color); display: flex; - align-items: center; transition: border var(--c--theme--transitions--duration) var(--c--theme--transitions--ease-out); padding: 0 1rem; gap: 1rem; @@ -29,6 +28,12 @@ background-color: transparent; @extend %text-style; + &__icon-left, + &__icon-right { + display: flex; + align-items: center; + } + &--medium { min-width: 150px; } diff --git a/packages/react/src/components/Forms/Input/index.tsx b/packages/react/src/components/Forms/Input/index.tsx index 99f654a..d6befff 100644 --- a/packages/react/src/components/Forms/Input/index.tsx +++ b/packages/react/src/components/Forms/Input/index.tsx @@ -106,7 +106,7 @@ export const Input = forwardRef( inputRef.current?.focus(); }} > - {!!icon && icon} + {!!icon &&
{icon}
} ( ref={inputRef} /> - {!!rightIcon && rightIcon} + {!!rightIcon && ( +
{rightIcon}
+ )} ); diff --git a/packages/react/src/components/Forms/LabelledBox/index.scss b/packages/react/src/components/Forms/LabelledBox/index.scss index 838fb17..e75f15f 100644 --- a/packages/react/src/components/Forms/LabelledBox/index.scss +++ b/packages/react/src/components/Forms/LabelledBox/index.scss @@ -1,5 +1,4 @@ .labelled-box { - height: 100%; width: 100%; position: relative; box-sizing: border-box;