/* * This file defines the styling for side navigation in Horizon, which uses * nested panels to utilise Bootstraps native JS handling for accordion menus * in panels. However, Bootstrap does *not* natively support nested panels * in its markup; to work around this, we remove the panel styling and inherit * list group styling. */ #sidebar-accordion { width: $sidebar-width; } #sidebar-mask { background-color: rgba(0, 0, 0, 0.5); height: 100%; left: 0; position: fixed; top: 0; visibility: hidden; opacity: 0; width: 100%; z-index: 2; transition: all 0.3s ease 0s; @media (max-width: $screen-xs-max) { &.on-screen { visibility: visible; opacity: 1; } } } #sidebar { width: $sidebar-width; // Make sure the side nav is always shown at larger screen sizes, // regardless of previous state @media (min-width: $screen-sm-min) { display: block; } @media (max-width: $screen-xs-max) { transition: all 0.3s ease 0s; position: fixed; top: $navbar-height; bottom: 0; z-index: 3; left: -$sidebar-width; overflow-y: auto; overflow-x: hidden; &.on-screen { left: 0; } } // Sets the arrow toggles for each dashboard list .openstack-toggle.fa { line-height: $line-height-computed; text-align: center; @include transition(transform 0.3s ease 0s); @extend .fa-chevron-down; } // Rotate the arrow toggle for closed panels .collapsed > .openstack-toggle.fa { @include rotate(-90deg); } // Remove panel default styling for the side nav only .panel { margin: 0; border-radius: 0; border: 0; box-shadow: none; cursor: pointer; .list-group-item { border-radius: 0; border: 0; } // Use the list group styling for consistency. We use panels in the markup // for accordion, but style should be list-group. > a { color: $list-group-link-color; background: $list-group-bg; &:hover { background: $list-group-hover-bg; } } } // Remove Chromes glowing blue border for focus. This should not affect // accessibility, as the tabs already have a focus effect. a:focus { outline: 0; } // Center align panel groups .openstack-panel-group { text-align: center; } // Right align panels .openstack-panel { text-align: right; } }