Infrastructure/logto
0
Fork 0
mirror of https://github.com/logto-io/logto.git synced 2025-03-10 22:22:45 -05:00
Code Issues Activity

fix(console): use native color picker style (#819)

Browse source
This commit is contained in:
Wang Sijie 2022-05-15 16:27:59 +08:00 • committed by GitHub
parent 38ceae7853
commit 628e025a15
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 27 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

37
packages/console/src/components/ColorPicker/index.module.scss
View file

@ -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);
}
}

5
packages/console/src/components/ColorPicker/index.tsx
View file

@ -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>
);
};