jess
/
Graphite
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fix MenuList submenu reachability on hover and other styling

This commit is contained in:
Keavon Chambers 2023-04-27 13:08:33 -07:00
parent 0bac707241
commit 44c26f1570
3 changed files with 24 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
frontend/src/components/floating-menus/MenuList.svelte
View File

@ -285,10 +285,6 @@
flex: 0 0 auto; flex: 0 0 auto;
} }
.entry-icon svg {
fill: var(--color-e-nearwhite);
}
.no-icon { .no-icon {
width: 16px; width: 16px;
height: 16px; height: 16px;
@ -317,25 +313,34 @@
height: 12px; height: 12px;
} }
> .menu-list { // Extend the submenu to the right by the width of the margin outside the row, since we want the submenu to line up with the edge of the menu
margin-right: -4px; &.open {
// Offset by the margin distance
> .menu-list {
margin-right: -4px;
}
// Extend the click target by the margin distance so the user can hover to the right of the row, within the margin area, and still have the submenu open
&::after {
content: "";
position: absolute;
top: 0;
right: -4px;
width: 4px;
height: 100%;
}
} }
&:hover, &:hover,
&.open { &.open {
background: var(--color-6-lowergray); background: var(--color-5-dullgray);
color: var(--color-f-white);
.entry-icon svg {
fill: var(--color-f-white);
}
} }
&.active { &.active {
background: var(--color-e-nearwhite); background: var(--color-e-nearwhite);
color: var(--color-2-mildblack); color: var(--color-2-mildblack);
.entry-icon svg { svg {
fill: var(--color-2-mildblack); fill: var(--color-2-mildblack);
} }
} }

10
frontend/src/components/layout/FloatingMenu.svelte
View File

@ -427,7 +427,7 @@
display: flex; display: flex;
.floating-menu-content { .floating-menu-content {
background: rgba(var(--color-2-mildblack-rgb), 0.95); background: var(--color-2-mildblack);
box-shadow: rgba(var(--color-0-black-rgb), 50%) 0 2px 4px; box-shadow: rgba(var(--color-0-black-rgb), 50%) 0 2px 4px;
border-radius: 4px; border-radius: 4px;
color: var(--color-e-nearwhite); color: var(--color-e-nearwhite);
@ -521,28 +521,28 @@
&.top .tail { &.top .tail {
border-width: 8px 6px 0 6px; border-width: 8px 6px 0 6px;
border-color: rgba(var(--color-2-mildblack-rgb), 0.95) transparent transparent transparent; border-color: var(--color-2-mildblack) transparent transparent transparent;
margin-left: -6px; margin-left: -6px;
margin-bottom: 2px; margin-bottom: 2px;
} }
&.bottom .tail { &.bottom .tail {
border-width: 0 6px 8px 6px; border-width: 0 6px 8px 6px;
border-color: transparent transparent rgba(var(--color-2-mildblack-rgb), 0.95) transparent; border-color: transparent transparent var(--color-2-mildblack) transparent;
margin-left: -6px; margin-left: -6px;
margin-top: 2px; margin-top: 2px;
} }
&.left .tail { &.left .tail {
border-width: 6px 0 6px 8px; border-width: 6px 0 6px 8px;
border-color: transparent transparent transparent rgba(var(--color-2-mildblack-rgb), 0.95); border-color: transparent transparent transparent var(--color-2-mildblack);
margin-top: -6px; margin-top: -6px;
margin-right: 2px; margin-right: 2px;
} }
&.right .tail { &.right .tail {
border-width: 6px 8px 6px 0; border-width: 6px 8px 6px 0;
border-color: transparent rgba(var(--color-2-mildblack-rgb), 0.95) transparent transparent; border-color: transparent var(--color-2-mildblack) transparent transparent;
margin-top: -6px; margin-top: -6px;
margin-left: 2px; margin-left: 2px;
} }

2
frontend/src/components/widgets/inputs/NumberInput.svelte
View File

@ -318,7 +318,7 @@
padding: 9px 0; padding: 9px 0;
border: none; border: none;
border-radius: 2px; border-radius: 2px;
background: rgba(var(--color-1-nearblack-rgb), 0.75); background: none;
&:hover { &:hover {
background: var(--color-5-dullgray); background: var(--color-5-dullgray);