From 6b60b25365ae7c60a70cd2494c7cfeadf2e4390c Mon Sep 17 00:00:00 2001 From: Benjamin Pasero Date: Thu, 20 Mar 2025 20:46:25 +0100 Subject: [PATCH] dialog - tweak dropdown focus indication to look like normal button --- src/vs/base/browser/ui/dialog/dialog.css | 13 +++++++++++++ 1 file changed, 13 insertions(+) diff --git a/src/vs/base/browser/ui/dialog/dialog.css b/src/vs/base/browser/ui/dialog/dialog.css index bdca8bcfd7424..69024d42a3e1e 100644 --- a/src/vs/base/browser/ui/dialog/dialog.css +++ b/src/vs/base/browser/ui/dialog/dialog.css @@ -163,6 +163,19 @@ margin: 4px 5px; } +.monaco-dialog-box > .dialog-buttons-row > .dialog-buttons > .monaco-button-dropdown:focus-within { + /** + * This is a trick to make the focus outline appear on the entire + * container of the dropdown button to ensure the dialog box looks + * consistent to dialogs without dropdown buttons. + */ + outline-offset: 2px !important; + outline-width: 1px; + outline-style: solid; + outline-color: var(--vscode-focusBorder); + border-radius: 2px; +} + .monaco-dialog-box > .dialog-buttons-row > .dialog-buttons > .monaco-button-dropdown > .monaco-text-button { padding-left: 10px; padding-right: 10px;