summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorPedro Pinto Silva <pedro.silva@collabora.com>2021-12-06 17:57:45 +0100
committerpedropintosilva <65948705+pedropintosilva@users.noreply.github.com>2021-12-06 19:08:45 +0100
commitbe4dd72c7985cbe470ba3399954fe35a24d52683 (patch)
treee5e4b9b3280f876bad24e3eea30410707caf03ae
parentDocument has been changed: Fix for mobile n add cancel btn (diff)
downloadonline-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.css8
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 */