xt/color-q
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

改进输入框包装器的样式。

Browse Source
This commit is contained in:
徐涛 2025-01-24 17:18:32 +08:00
parent a3de0f961a
commit 1b41fb4d22
3 changed files with 6 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/component.css
View File

@ -193,6 +193,7 @@
resize: none; resize: none;
} }
.input_wrapper { .input_wrapper {
width: fit-content;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;

5
src/components/ColorComponentInput.module.css
View File

@ -3,7 +3,10 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: stretch; align-items: stretch;
gap: var(--spacing-m); gap: var(--spacing-xs);
.extended_input_wrapper {
width: 100%;
}
.rgb_input { .rgb_input {
text-align: right; text-align: right;
text-transform: uppercase; text-transform: uppercase;

2
src/components/ColorComponentInput.tsx
View File

@ -146,7 +146,7 @@ export function ColorComponentInput({ color, onChange }: ColorComponentInputProp
return ( return (
<div className={styles.rgb_input}> <div className={styles.rgb_input}>
<div className={cx('input_wrapper')}> <div className={cx('input_wrapper', styles.extended_input_wrapper)}>
<Icon icon="tabler:hash" /> <Icon icon="tabler:hash" />
<input type="text" value={hex} onChange={updateHex} className={styles.rgb_input} /> <input type="text" value={hex} onChange={updateHex} className={styles.rgb_input} />
</div> </div>