🎨 styles: fix shape input common

:%s
This commit is contained in:
lytrankieio123
2021-09-13 13:30:37 +07:00
parent fa84e88212
commit ab619e7f64
2 changed files with 29 additions and 23 deletions

View File

@@ -18,7 +18,7 @@
.inputCommon {
@apply block w-full transition-all duration-200 rounded bg-white;
padding: 1.2rem 1.6rem;
padding: 1.6rem;
border: 1px solid var(--border-line);
&:hover,
&:focus,
@@ -31,24 +31,6 @@
&::placeholder {
@apply text-label;
}
&.custom {
@apply custom-border-radius;
border: 1px solid transparent;
background: var(--gray);
&:hover,
&:focus,
&:active {
border: 1px solid var(--primary);
}
}
&.bgTransparent {
background: rgb(227, 242, 233, 0.3);
color: var(--white);
&::placeholder {
color: var(--white);
}
}
}
&.preserve {
@@ -91,4 +73,27 @@
color: var(--negative);
margin-top: 0.4rem;
}
&.custom {
@apply shape-common;
.inputCommon {
border: none;
background: var(--background-gray);
&:hover,
&:focus,
&:active {
@apply shadow-md;
border: none;
}
}
}
&.bgTransparent {
.inputCommon {
background: rgb(227, 242, 233, 0.3);
color: var(--white);
&::placeholder {
color: var(--white);
}
}
}
}

View File

@@ -6,7 +6,7 @@ import s from './InputCommon.module.scss';
type Ref = {
focus: () => void
getValue: () => string | number
getValue: () => string | number
} | null;
interface Props {
children?: React.ReactNode,
@@ -63,6 +63,9 @@ const InputCommon = forwardRef<Ref, Props>(({ value, placeholder, type, styleTyp
return (
<div className={classNames({
[s.inputWrap]: true,
[s[styleType]]: true,
[s.bgTransparent]: backgroundTransparent
})}>
<div className={classNames({
[s.inputInner]: true,
@@ -80,8 +83,6 @@ const InputCommon = forwardRef<Ref, Props>(({ value, placeholder, type, styleTyp
onKeyDown={handleKeyDown}
className={classNames({
[s.inputCommon]: true,
[s[styleType]]: true,
[s.bgTransparent]: backgroundTransparent
})}
/>
</div>