From be4dd72c7985cbe470ba3399954fe35a24d52683 Mon Sep 17 00:00:00 2001 From: Pedro Pinto Silva Date: Mon, 6 Dec 2021 17:57:45 +0100 Subject: Sidebar: Fix Split Button dropdown hover state - Fix hover state: before, hovering into the arrow component would affect its parent's width - Make it more visible that the dropdown has two action in it (it is a split button dropdown) by: - adding background color - adding divider, to emphasize that we are talking about two different btns - Use CSS var instead of random gray Signed-off-by: Pedro Pinto Silva Change-Id: I841749d143bcc240a1b4d820868b6a7af53db599 --- browser/css/jsdialogs.css | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/browser/css/jsdialogs.css b/browser/css/jsdialogs.css index 781fa404b6..7932b4da75 100644 --- a/browser/css/jsdialogs.css +++ b/browser/css/jsdialogs.css @@ -726,10 +726,16 @@ input[type='number']:hover::-webkit-outer-spin-button { width: 15px; height: 23px; display: inline-block; + border-left: 1px solid transparent; } .arrowbackground:hover { - border: 1px solid lightgrey; + border-left-color: var(--gray-color); + background-color: #eee; +} + +.arrowbackground:hover .unoarrow { + border-top-color: #333; } /* menu button */ -- cgit