OSSForks/react
1
0
Fork 0
mirror of https://github.com/zebrajr/react.git synced 2026-01-15 12:15:22 +00:00
Code Issues Actions 6 Packages Projects Releases Wiki Activity

Make style editor inputs more obvious resemble inputs

Browse Source
This commit is contained in:
Brian Vaughn
2019-07-24 14:43:29 -07:00
parent 4c610950a4
commit 2e8b9fad36
2 changed files with 11 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/devtools/views/Components/NativeStyleEditor/AutoSizeInput.js
View File

@@ -68,8 +68,12 @@ export default function AutoSizeInput({
return;
}
// Adding an extra pixel avoids a slight horizontal scroll when changing text selection/cursor.
// Not sure why this is, but the old DevTools did a similar thing.
const targetWidth = Math.ceil(scrollWidth) + 1;
if (inputRef.current !== null) {
inputRef.current.style.width = `${scrollWidth}px`;
inputRef.current.style.width = `${targetWidth}px`;
}
}, [value]);

6
src/devtools/views/Components/NativeStyleEditor/StyleEditor.css
View File

@@ -42,6 +42,12 @@
.Input {
flex: 0 1 auto;
padding: 1px;
box-shadow: 0px 1px 3px transparent;
}
.Input:focus {
color: var(--color-text);
box-shadow: 0px 1px 3px var(--color-shadow);
}
.Empty {