strepsirrhini/libreoffice-online
3
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Multi-level menus (dropdowns): Fix chevron elements

Browse source 
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 <pedro.silva@collabora.com>
Change-Id: I3b79c6b9df324727fd0c217f869d9bb8a4df2d72
This commit is contained in:
Pedro Pinto Silva 2023-10-27 12:52:16 +02:00 committed by pedropintosilva
parent 9e286c817d
commit 2b5eb98296
1 changed files with 15 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

21
browser/css/jsdialogs.css
View file

@ -807,8 +807,7 @@ input[type='number']:hover::-webkit-outer-spin-button {
} }
.ui-combobox-entry span:hover { .ui-combobox-entry span:hover {
border: 1px solid var(--color-border-darker); background-color: var(--color-background-dark);
background-color: var(--color-background-darker);
} }
.ui-combobox-entry.selected span:not(:hover) { .ui-combobox-entry.selected span:not(:hover) {
@ -845,16 +844,27 @@ input[type='number']:hover::-webkit-outer-spin-button {
filter: invert(1); filter: invert(1);
} }
/* Combobox entry with menu and thus arrow/chevron */
.ui-combobox-entry.ui-has-menu { .ui-combobox-entry.ui-has-menu {
display: grid; display: grid;
grid-template-columns: 1fr 25px; grid-template-columns: 1fr 25px;
align-items: center; align-items: center;
} }
/* Arrow/chevron */
.ui-combobox-entry.ui-has-menu::after { .ui-combobox-entry.ui-has-menu::after {
content: '>'; content: '';
display: inline-block; 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 */ /* Apply style always show real colors */
@ -1869,4 +1879,3 @@ kbd,
#modal-dialog-online-help-content-box { #modal-dialog-online-help-content-box {
min-width: 75%; min-width: 75%;
} }