0
Fork 0
mirror of https://github.com/logto-io/logto.git synced 2024-12-16 20:26:19 -05:00

refactor: add disabled to input

This commit is contained in:
Gao Sun 2021-07-18 18:22:44 +08:00
parent 3ddc180d65
commit 6fc29557ca
No known key found for this signature in database
GPG key ID: 0F0EFA2E36639F31
6 changed files with 33 additions and 15 deletions

View file

@ -20,6 +20,10 @@
/* Shadow */
--shadow-button: 2px 2px 8px rgb(60 76 227 / 25%);
/* Transition */
--transition-default-function: 0.2s ease-in-out;
--transition-default-control: background var(--transition-default-function), color var(--transition-default-function);
}
.dark {

View file

@ -11,15 +11,15 @@
color: var(--color-button-text);
font: var(--font-heading-3);
box-shadow: var(--shadow-button);
transition: background 0.2s ease-in-out, color 0.2s ease-in-out;
transition: var(--transition-default-control);
cursor: pointer;
&:not(.disabled):hover {
background: var(--color-button-background-hover);
}
&.disabled {
&:disabled {
background: var(--color-button-background-disabled);
color: var(--color-button-text-disabled);
}
&:not(:disabled):hover {
background: var(--color-button-background-hover);
}
}

View file

@ -9,17 +9,14 @@ export type Props = {
onClick?: React.MouseEventHandler;
};
const Button = ({ isDisabled = false, className, value, onClick }: Props) => {
const Button = ({ isDisabled, className, value, onClick }: Props) => {
return (
<input
className={classNames(styles.button, isDisabled && styles.disabled, className)}
disabled={isDisabled}
className={classNames(styles.button, className)}
type="button"
value={value}
onClick={(event) => {
if (!isDisabled) {
onClick?.(event);
}
}}
onClick={onClick}
/>
);
};

View file

@ -10,8 +10,14 @@
background: var(--color-control-background);
color: var(--color-heading);
font: var(--font-heading-3);
transition: var(--transition-default-control);
&::placeholder {
color: var(--color-placeholder);
}
&:disabled {
background: var(--color-control-background-disabled);
color: var(--color-secondary);
}
}

View file

@ -4,6 +4,7 @@ import styles from './index.module.scss';
export type Props = {
autoComplete?: AutoCompleteType;
isDisabled?: boolean;
className?: string;
placeholder?: string;
type?: InputType;
@ -11,9 +12,18 @@ export type Props = {
onChange: (value: string) => void;
};
const Input = ({ autoComplete, className, placeholder, type = 'text', value, onChange }: Props) => {
const Input = ({
autoComplete,
isDisabled,
className,
placeholder,
type = 'text',
value,
onChange,
}: Props) => {
return (
<input
disabled={isDisabled}
className={classNames(styles.input, className)}
placeholder={placeholder}
type={type}

View file

@ -13,15 +13,16 @@ const Home = () => {
return (
<form className={styles.wrapper}>
<div className={styles.title}> Logto</div>
<Input
autoComplete="username"
isDisabled={isLoading}
placeholder={t('sign-in.username')}
value={username}
onChange={setUsername}
/>
<Input
autoComplete="current-password"
isDisabled={isLoading}
placeholder={t('sign-in.password')}
type="password"
value={password}