mirror of
https://github.com/logto-io/logto.git
synced 2025-03-10 22:22:45 -05:00
fix(console): use native color picker style (#819)
This commit is contained in:
parent
38ceae7853
commit
628e025a15
2 changed files with 27 additions and 15 deletions
|
@ -10,6 +10,8 @@
|
|||
padding: _.unit(2) _.unit(3);
|
||||
font: var(--font-body-medium);
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
&:focus-within {
|
||||
border-color: var(--color-primary);
|
||||
|
@ -17,24 +19,37 @@
|
|||
}
|
||||
|
||||
input {
|
||||
position: absolute;
|
||||
left: _.unit(3);
|
||||
top: _.unit(2);
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
border-radius: _.unit(1);
|
||||
padding: 0;
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
|
||||
&::-moz-color-swatch-wrapper {
|
||||
padding: 0;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
&::-webkit-color-swatch-wrapper {
|
||||
padding: 0;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
&::-moz-color-swatch {
|
||||
border-style: none;
|
||||
}
|
||||
|
||||
&::-webkit-color-swatch {
|
||||
border-style: none;
|
||||
}
|
||||
}
|
||||
|
||||
label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
|
||||
.preview {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
margin-right: _.unit(2);
|
||||
border-radius: _.unit(1);
|
||||
}
|
||||
margin-left: _.unit(2);
|
||||
}
|
||||
}
|
||||
|
|
|
@ -18,10 +18,7 @@ const ColorPicker = ({ onChange, value = '#000000' }: Props) => {
|
|||
return (
|
||||
<div className={styles.container}>
|
||||
<input type="color" id={id} value={value} onChange={handleChange} />
|
||||
<label htmlFor={id}>
|
||||
<div className={styles.preview} style={{ backgroundColor: value }} />
|
||||
{value.toUpperCase()}
|
||||
</label>
|
||||
<label htmlFor={id}>{value.toUpperCase()}</label>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
Loading…
Add table
Reference in a new issue