appended
* to by bs-sidebar-mini.js using position:fixed. This
* escapes the simplebar/.scroll-sidebar overflow chain without
* needing overflow:visible hacks on the rail.
*
* Rules in this section:
* 1. Lock rail width to 87px on hover (kill Modernize's
* hover-inflate). Scoped to body[data-sidebartype] only
* (no [data-color-theme] requirement) so it works on any
* page regardless of theme attribute presence.
* 2. Suppress inline submenu display in mini.
* 3. Style the flyout container + its child list.
* ============================================================ */
/* (1) Lock rail width across ALL color themes. Modernize ships
.left-sidebar:hover { width:270px } that we must beat. */
body[data-sidebartype="mini-sidebar"] .left-sidebar:hover {
width: 87px !important;
}
body[data-sidebartype="mini-sidebar"] .left-sidebar:hover .hide-menu {
display: none !important;
}
body[data-sidebartype="mini-sidebar"] .left-sidebar:hover .sidebar-nav .has-arrow::after {
display: none !important;
}
body[data-sidebartype="mini-sidebar"] .left-sidebar:hover .sidebar-nav ul .sidebar-item .sidebar-link {
padding: 11px 9px !important;
}
body[data-sidebartype="mini-sidebar"] .left-sidebar:hover .logo-img {
width: 40px !important;
}
/* Mark glyph swap on rail hover — keep showing the mini logo,
not the wide horizontal one. */
body[data-sidebartype="mini-sidebar"] .left-sidebar:hover .logo-full {
display: none !important;
}
body[data-sidebartype="mini-sidebar"] .left-sidebar:hover .logo-mini {
display: inline-block !important;
}
/* (2) Hide ANY inline submenu unconditionally in mini. Covers
the case where Bootstrap left .collapse.show on the
. */
body[data-sidebartype="mini-sidebar"] .left-sidebar .sidebar-nav .first-level {
display: none !important;
height: auto !important;
}
/* (3) Flyout container — JS sets position/top/left inline.
Styles below cover everything else. Uses a fixed-position
panel so the simplebar overflow chain doesn't clip it. */
.bs-bpis-flyout {
background: #1F2328;
color: rgba(255, 255, 255, 0.85);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 8px;
padding: 6px;
min-width: 240px;
max-width: 280px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
opacity: 0;
transform: translateX(-4px);
transition: opacity 0.14s ease-out, transform 0.14s ease-out;
}
.bs-bpis-flyout.show {
opacity: 1;
transform: translateX(0);
}
.bs-bpis-flyout.label-only {
min-width: 0;
max-width: none;
padding: 0;
}
.bs-bpis-flyout.label-only .bs-bpis-flyout-header {
font-size: 13px;
font-weight: 500;
letter-spacing: 0;
text-transform: none;
color: rgba(255, 255, 255, 0.92);
padding: 6px 10px;
border-bottom: 0;
white-space: nowrap;
}
.bs-bpis-flyout-header {
display: block;
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.06em;
color: rgba(255, 255, 255, 0.55);
padding: 6px 10px 8px;
margin-bottom: 4px;
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.bs-bpis-flyout-list {
list-style: none;
margin: 0;
padding: 0;
}
.bs-bpis-flyout-list .sidebar-item {
list-style: none;
}
.bs-bpis-flyout-list .sidebar-link {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 10px;
color: rgba(255, 255, 255, 0.85);
text-decoration: none;
border-radius: 6px;
font-size: 13px;
white-space: normal;
line-height: 1.3;
}
.bs-bpis-flyout-list .sidebar-link .hide-menu {
display: inline-block;
color: inherit;
}
.bs-bpis-flyout-list .sidebar-link:hover {
background-color: rgba(234,88,12, 0.18);
}
.bs-bpis-flyout-list .sidebar-link:hover,
.bs-bpis-flyout-list .sidebar-link:hover .hide-menu {
color: #FED7AA;
}
.bs-bpis-flyout-list .round-16 {
flex-shrink: 0;
width: 14px;
height: 14px;
display: flex;
align-items: center;
justify-content: center;
}
.bs-bpis-flyout-list .ti-circle {
font-size: 8px;
line-height: 1;
color: rgba(255, 255, 255, 0.55);
}
/* Group label — replaces a.has-arrow inside the flyout clone.
* The flyout escapes #sidebarnav, so a 3rd-level group header has
* nothing to toggle (its children are already flattened/expanded by
* bs-sidebar-mini.js). Reads as a quiet section heading, not a button:
* no border, no hover state, no pointer cursor. */
.bs-bpis-flyout-group {
display: block;
padding: 10px 10px 4px;
margin-top: 6px;
font-size: 12px;
font-weight: 600;
/* Quieter than a real link: #FED7AA (--brand-200) is the exact hover
* color of a clickable leaf below (line ~308) — painting the
* non-interactive label in that same teal made the dead text glow
* brighter than the real links, backwards from the intent. */
color: rgba(255, 255, 255, 0.45);
border-top: 1px solid rgba(255, 255, 255, 0.06);
cursor: default;
user-select: none;
}
/* Only the first group header of the TOP-LEVEL flyout list loses its
* separator. ".bs-bpis-flyout-list" is the class buildFlyoutContent()
* adds to the outer clone only — nested s keep .second-level /
* .third-level instead, never .bs-bpis-flyout-list — so the direct-child
* combinator here scopes this to the outer list's own first - . A
* descendant selector (no ">") would also match the first
- of every
* nested list and strip the separator from THEIR first group too. */
.bs-bpis-flyout-list > li:first-child > .bs-bpis-flyout-group {
margin-top: 0;
border-top: 0;
}
/* Nested lists lose Bootstrap's .collapse but keep .second-level /
* .third-level (app.css) for indentation + the teal guide line —
* that rule isn't scoped to #sidebarnav, it already applies here. */
/* Los estados de la familia son oscuros (BRAND.md §4): letra negra encima no se lee
* (bg-warning text-dark = 2.5:1, 43 usos). Letra blanca, 5.0-6.5:1. */
.bg-primary.text-dark, .bg-success.text-dark, .bg-danger.text-dark,
.bg-warning.text-dark, .bg-info.text-dark { color: #fff !important; }