Fix focusring on disabled inputs
This commit is contained in:
parent
d54a8713d1
commit
621d652854
1 changed files with 3 additions and 2 deletions
|
@ -39,7 +39,7 @@ const inputStyle = css<Props>`
|
|||
resize: none;
|
||||
${tw`appearance-none outline-none w-full min-w-0`};
|
||||
${tw`p-3 border-2 rounded text-sm transition-all duration-150`};
|
||||
${tw`bg-neutral-600 border-neutral-500 hover:border-neutral-400 text-neutral-200 shadow-none`};
|
||||
${tw`bg-neutral-600 border-neutral-500 hover:border-neutral-400 text-neutral-200 shadow-none focus:ring-0`};
|
||||
|
||||
& + .input-help {
|
||||
${tw`mt-1 text-xs`};
|
||||
|
@ -52,6 +52,7 @@ const inputStyle = css<Props>`
|
|||
|
||||
&:not(:disabled):not(:read-only):focus {
|
||||
${tw`shadow-md border-primary-300 ring-2 ring-primary-400 ring-opacity-50`};
|
||||
${props => props.hasError && tw`border-red-300 ring-red-200`};
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
|
@ -59,7 +60,7 @@ const inputStyle = css<Props>`
|
|||
}
|
||||
|
||||
${props => props.isLight && light};
|
||||
${props => props.hasError && tw`text-red-100 border-red-400 hover:border-red-300 focus:border-red-300! focus:ring-red-200!`};
|
||||
${props => props.hasError && tw`text-red-100 border-red-400 hover:border-red-300`};
|
||||
`;
|
||||
|
||||
const Input = styled.input<Props>`
|
||||
|
|
Loading…
Reference in a new issue