From 2b5eb982963ecf569538727f5bf63bf5a772e8c4 Mon Sep 17 00:00:00 2001 From: Pedro Pinto Silva Date: Fri, 27 Oct 2023 12:52:16 +0200 Subject: [PATCH] Multi-level menus (dropdowns): Fix chevron elements Chevron (Arrow) - Use existing icon and re-use it instead of a text character - sing text depending on font size and the width we were giving - could be dangerous - Fix alignment: before this commit the chevron was almost glued to the edge - Make the hover state less dark so the chevron is visible at all times Signed-off-by: Pedro Pinto Silva Change-Id: I3b79c6b9df324727fd0c217f869d9bb8a4df2d72 --- browser/css/jsdialogs.css | 21 +++++++++++++++------ 1 file changed, 15 insertions(+), 6 deletions(-) diff --git a/browser/css/jsdialogs.css b/browser/css/jsdialogs.css index 48c8c202a..1d5d358e1 100644 --- a/browser/css/jsdialogs.css +++ b/browser/css/jsdialogs.css @@ -807,8 +807,7 @@ input[type='number']:hover::-webkit-outer-spin-button { } .ui-combobox-entry span:hover { - border: 1px solid var(--color-border-darker); - background-color: var(--color-background-darker); + background-color: var(--color-background-dark); } .ui-combobox-entry.selected span:not(:hover) { @@ -845,16 +844,27 @@ input[type='number']:hover::-webkit-outer-spin-button { filter: invert(1); } +/* Combobox entry with menu and thus arrow/chevron */ .ui-combobox-entry.ui-has-menu { display: grid; grid-template-columns: 1fr 25px; align-items: center; } - +/* Arrow/chevron */ .ui-combobox-entry.ui-has-menu::after { - content: '>'; + content: ''; display: inline-block; - width: 25px; + width: 9px; + background: url('images/lc_menu_chevron.svg') no-repeat; + height: 9px; + margin-inline-start: -9px; +} + +.ui-combobox-entry.ui-has-menu > span { + /* menu entries have 5px all around padding, + add extra 9px at the horizontal end = 14px + so we can re-position the arrow/chevron */ + padding-inline-end: 14px; } /* Apply style always show real colors */ @@ -1869,4 +1879,3 @@ kbd, #modal-dialog-online-help-content-box { min-width: 75%; } -