36 lines
828 B
SCSS
36 lines
828 B
SCSS
/// El menú hamburguesa se expande cuando obtiene el foco y se oculta
|
|
/// cuando lo pierde. Esto nos permite tener un menú dinámico sin
|
|
/// necesidad de JS.
|
|
///
|
|
/// @group Menú
|
|
/// @link _includes/menu.html
|
|
/// @todo En realidad el evento del foco está puesto en toda la navbar
|
|
/// en lugar de solo en el ícono de hamburguesa.
|
|
/// @example html
|
|
/// <nav class="navbar">
|
|
/// <button class="navbar-toggler">
|
|
/// <span class="navbar-toggler-icon"></span>
|
|
/// </button>
|
|
///
|
|
/// <div class="collapse navbar-collapse" id="menu"></div>
|
|
/// </nav>
|
|
.navbar {
|
|
&:focus-within {
|
|
.navbar-collapse {
|
|
@extend .d-block;
|
|
}
|
|
}
|
|
|
|
.dropdown {
|
|
.dropdown-menu {
|
|
@extend .d-none;
|
|
}
|
|
|
|
&:hover,
|
|
&:focus-within {
|
|
.dropdown-menu {
|
|
@extend .d-block;
|
|
}
|
|
}
|
|
}
|
|
}
|