@atlassian/aui
Version:
Atlassian User Interface library
57 lines (51 loc) • 2.02 kB
text/less
@import 'aui-sidebar-config.less';
//
// Imported by aui-sidebar.
//
// Provides interop styles for badges inside the sidebar and its various patterns.
// Fundamentally, badges appear inside nav items, but their display differs depending
// on whether they are nested within a simple navigation, or a collapsed sidebar's grouping.
//
.aui-sidebar,
.aui-sidebar-submenu {
.aui-nav > li > .aui-nav-item {
> .aui-badge,
> aui-badge {
background-color: @aui-sidebar-badge-background-color;
border-color: @aui-sidebar-badge-border-color;
color: @aui-sidebar-badge-text-color;
float: right;
// aui-nav sets the line height to 16px, and the aui-badge is supposed to sit on the baseline and have an overall
// height of 16px. Sidebar nav items have their line-heights changed to 20px to match the icon sizes,
// so we nudge the aui-badge down by 2px so that it is vertically centered with the nav item label
margin-top: 2px;
}
}
}
//-----------------------
// Sidebar narrow state - add collapsed styles.
//-----------------------
.aui-sidebar {
&[aria-expanded='false'] {
.aui-nav > li > a:hover > .aui-nav-item > .aui-badge {
visibility: visible;
}
// used when the nav items have icons - shows the icon in the collapsed state
.aui-sidebar-group-tier-one {
.aui-nav > li > .aui-nav-item {
// If an aui-badge is present, position it over the icon
> .aui-badge,
> aui-badge {
font-size: 9px;
line-height: 12px;
margin-top: 0;
min-width: var(--ds-space-250);
position: absolute;
top: var(--ds-space-negative-050, -4px);
right: var(--ds-space-negative-100, -8px);
z-index: 1;
}
}
}
}
}