mirrors/Graphite
1
0
Fork 0
mirror of https://github.com/GraphiteEditor/Graphite.git synced 2025-08-03 21:08:18 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

Fix MenuList submenu reachability on hover and other styling

Browse source
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
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;
}
.entry-icon svg {
fill: var(--color-e-nearwhite);
}
.no-icon {
width: 16px;
height: 16px;
@ -317,25 +313,34 @@
height: 12px;
}
> .menu-list {
margin-right: -4px;
// 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
&.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,
&.open {
background: var(--color-6-lowergray);
color: var(--color-f-white);
.entry-icon svg {
fill: var(--color-f-white);
}
background: var(--color-5-dullgray);
}
&.active {
background: var(--color-e-nearwhite);
color: var(--color-2-mildblack);
.entry-icon svg {
svg {
fill: var(--color-2-mildblack);
}
}

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

@ -427,7 +427,7 @@
display: flex;
.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;
border-radius: 4px;
color: var(--color-e-nearwhite);
@ -521,28 +521,28 @@
&.top .tail {
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-bottom: 2px;
}
&.bottom .tail {
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-top: 2px;
}
&.left .tail {
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-right: 2px;
}
&.right .tail {
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-left: 2px;
}

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

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