@atlassian/aui
Version:
Atlassian User Interface library
59 lines (52 loc) • 2.04 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: $background-color; // to appear borderless
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 {
border-width: @aui-sidebar-collapsed-badge-border-width;
border-style: solid;
font-size: 9px;
margin-top: 0;
padding: 0.2em 0.4em;
position: absolute;
right: -0.5em;
top: -0.5em;
z-index: 1;
}
}
}
}
}