diff --git a/src/devtools/views/EditableValue.css b/src/devtools/views/EditableValue.css index 12dd20cc25..3087b85261 100644 --- a/src/devtools/views/EditableValue.css +++ b/src/devtools/views/EditableValue.css @@ -1,12 +1,16 @@ -.ValueInputLabel { +.CheckboxLabel { flex: 1 1 100%; display: flex; } -.ValueInputLabel:focus-within { +.CheckboxLabel:focus-within { background-color: var(--color-button-background-focus); } -.ValueInput { +.Checkbox:focus { + outline: none; +} + +.Input { flex: 1 1; background: none; border: 1px solid transparent; @@ -15,11 +19,11 @@ font-family: var(--font-family-monospace); font-size: var(--font-size-monospace-normal); } - -.ValueInput:focus { +.Input:focus { background-color: var(--color-button-background-focus); outline: none; } + .ResetButton { flex: 0 0 auto; padding: 0 0.5rem; diff --git a/src/devtools/views/EditableValue.js b/src/devtools/views/EditableValue.js index b590419f52..7659057d2b 100644 --- a/src/devtools/views/EditableValue.js +++ b/src/devtools/views/EditableValue.js @@ -88,17 +88,28 @@ export default function EditableValue({ return ( - + )} {hasPendingChanges && dataType !== 'boolean' && (