Fix status lights and context menus working together in nav items

This commit is contained in:
Andrew Kingston 2022-04-25 20:17:09 +01:00
parent 55804b0c32
commit d4f20f9e82
1 changed files with 12 additions and 6 deletions

View File

@ -114,7 +114,7 @@
background-color: var(--grey-3); background-color: var(--grey-3);
} }
.nav-item:hover .actions { .nav-item:hover .actions {
display: grid; visibility: visible;
} }
.nav-item-content { .nav-item-content {
flex: 1 1 auto; flex: 1 1 auto;
@ -125,6 +125,7 @@
gap: var(--spacing-xs); gap: var(--spacing-xs);
width: max-content; width: max-content;
overflow: hidden; overflow: hidden;
position: relative;
} }
.icon { .icon {
@ -145,6 +146,11 @@
.icon + .icon { .icon + .icon {
margin-left: -4px; margin-left: -4px;
} }
.iconText {
margin-top: 1px;
font-size: var(--spectrum-global-dimension-font-size-50);
flex: 0 0 34px;
}
.text { .text {
font-weight: 600; font-weight: 600;
@ -162,8 +168,9 @@
.actions { .actions {
cursor: pointer; cursor: pointer;
position: relative; position: relative;
display: none; display: grid;
place-items: center; place-items: center;
visibility: hidden;
} }
.actions, .actions,
.light :global(.spectrum-StatusLight) { .light :global(.spectrum-StatusLight) {
@ -171,10 +178,9 @@
height: 20px; height: 20px;
margin-left: var(--spacing-s); margin-left: var(--spacing-s);
} }
.iconText { .light {
margin-top: 1px; position: absolute;
font-size: var(--spectrum-global-dimension-font-size-50); right: 0;
flex: 0 0 34px;
} }
.nav-item.withActions:hover .light { .nav-item.withActions:hover .light {
display: none; display: none;