diff options
author | Pedro Pinto Silva <pedro.silva@collabora.com> | 2021-12-06 17:57:45 +0100 |
---|---|---|
committer | pedropintosilva <65948705+pedropintosilva@users.noreply.github.com> | 2021-12-06 19:08:45 +0100 |
commit | be4dd72c7985cbe470ba3399954fe35a24d52683 (patch) | |
tree | e5e4b9b3280f876bad24e3eea30410707caf03ae | |
parent | Document has been changed: Fix for mobile n add cancel btn (diff) | |
download | online-be4dd72c7985cbe470ba3399954fe35a24d52683.tar.gz online-be4dd72c7985cbe470ba3399954fe35a24d52683.zip |
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 <pedro.silva@collabora.com>
Change-Id: I841749d143bcc240a1b4d820868b6a7af53db599
-rw-r--r-- | browser/css/jsdialogs.css | 8 |
1 files changed, 7 insertions, 1 deletions
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 */ |