hyperdx/packages/app/styles/AppNav.module.scss

88 lines
1.4 KiB
SCSS

@import './variables';
.list {
// background-color: #00000030;
// border-bottom: 1px solid $slate-950;
border-top: 1px solid $slate-950;
overflow-x: hidden;
max-width: 100%;
padding: 4px 16px;
padding-bottom: 10px;
}
.listGroupDragEnter {
opacity: 0.7;
background: #ffffff1a;
border-radius: 10px;
}
.listGroupName {
color: $slate-400;
text-transform: uppercase;
font-size: 11px;
letter-spacing: 1px;
margin-bottom: 6px;
padding-left: 16px;
width: 100%;
display: flex;
align-items: center;
// justify-content: space-between;
gap: 6px;
&:hover {
color: $slate-300;
cursor: pointer;
}
}
.listLink {
display: flex;
justify-content: space-between;
text-decoration: none;
color: $slate-200;
font-size: 13px;
margin-bottom: 4px;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
padding-left: 16px;
user-select: none;
gap: 10px;
&:hover {
color: $slate-100;
}
&:focus-visible {
outline: none;
border-left: 2px solid $green;
}
&:last-of-type {
margin-bottom: 12px;
}
}
.listEmptyMsg {
color: $slate-400;
font-size: 12px;
margin: 8px 16px;
}
.listLinkActive {
color: $green;
font-weight: 500;
&:hover {
color: $green;
}
}
.kbd {
white-space: nowrap;
letter-spacing: -1px;
color: $slate-400;
background: $slate-950;
border-radius: 4px;
padding: 0 4px;
font-size: 10px;
margin-right: 16px;
}