UNPKG

2.03 kBtext/lessView Raw
1@import 'aui-sidebar-config.less';
2
3//
4// Imported by aui-sidebar.
5//
6// Provides interop styles for badges inside the sidebar and its various patterns.
7// Fundamentally, badges appear inside nav items, but their display differs depending
8// on whether they are nested within a simple navigation, or a collapsed sidebar's grouping.
9//
10
11.aui-sidebar,
12.aui-sidebar-submenu {
13
14 .aui-nav > li > .aui-nav-item {
15 > .aui-badge,
16 > aui-badge {
17 background-color: @aui-sidebar-badge-background-color;
18 border-color: @aui-sidebar-badge-border-color;
19 color: @aui-sidebar-badge-text-color;
20
21 float: right;
22 // aui-nav sets the line height to 16px, and the aui-badge is supposed to sit on the baseline and have an overall
23 // height of 16px. Sidebar nav items have their line-heights changed to 20px to match the icon sizes,
24 // so we nudge the aui-badge down by 2px so that it is vertically centered with the nav item label
25 margin-top: 2px;
26 }
27 }
28}
29
30//-----------------------
31// Sidebar narrow state - add collapsed styles.
32//-----------------------
33.aui-sidebar {
34 &[aria-expanded="false"] {
35 .aui-nav > li > a:hover > .aui-nav-item > .aui-badge {
36 visibility: visible;
37 }
38
39 // used when the nav items have icons - shows the icon in the collapsed state
40 .aui-sidebar-group-tier-one {
41 .aui-nav > li > .aui-nav-item {
42 // If an aui-badge is present, position it over the icon
43 > .aui-badge,
44 > aui-badge {
45 border-width: @aui-sidebar-collapsed-badge-border-width;
46 border-style: solid;
47 font-size: 9px;
48 margin-top: 0;
49 padding: 0.2em 0.4em;
50 position: absolute;
51 right: -0.5em;
52 top: -0.5em;
53 z-index: 1;
54 }
55 }
56 }
57 }
58}