63 lines
1.6 KiB
SCSS
63 lines
1.6 KiB
SCSS
////
|
|
/// @group Toggler
|
|
////
|
|
|
|
/// Desplegar menúes sin javascript!
|
|
///
|
|
/// Comenzamos con un `<input type="checkbox"/>` con la clase
|
|
/// `.toggler`.
|
|
///
|
|
/// @todo ¿Deprecar? Según el validador de HTML los `<label>` no pueden
|
|
/// contener elementos de bloques, como `<div>`.
|
|
/// @link https://dev.to/cydstumpel/creating-a-fold-out-navigation-with-css-only-4g9k
|
|
///
|
|
/// @example html
|
|
/// <div>
|
|
/// <input type="checkbox" class="toggler" id="toggler" />
|
|
/// <label for="toggler">
|
|
/// Esta es la parte visible, puede contener un ícono. Los
|
|
/// atributos id y for son importantes para que el label se
|
|
/// asocie con el input invisible.
|
|
/// <div class="toggled">
|
|
/// Esta es la parte solo visible cuando el label es tocado.
|
|
/// </div>
|
|
/// </label>
|
|
/// </div>
|
|
input[type="checkbox"].toggler {
|
|
/// Por defecto está oculto pero todavía queremos que se le pueda dar
|
|
/// foco con el / teclado
|
|
///
|
|
/// @todo ¿Usar `@extend .sr-only`?
|
|
opacity: 0;
|
|
position: absolute;
|
|
|
|
/// El `<label>` inmediatamente posterior al `<input>` (`+`) contiene
|
|
/// descendientes con la clase `.toggled` que cambian la visibilidad según
|
|
/// el estado del `<input>`.
|
|
& + label {
|
|
.toggled {
|
|
z-index: 10;
|
|
visibility: hidden;
|
|
}
|
|
}
|
|
|
|
/// Al tocar el `<input>`, mostramos el elemento oculto.
|
|
&:checked + label {
|
|
.toggled {
|
|
visibility: visible;
|
|
}
|
|
}
|
|
|
|
& + label {
|
|
border: none;
|
|
outline: none;
|
|
z-index: 11;
|
|
}
|
|
|
|
/// Dar una guía visual de que estamos enfocando el `<input>`,
|
|
/// trasladando el mismo estilo a su `<label>`
|
|
&:focus + label {
|
|
outline: 1px dotted grey ;
|
|
}
|
|
}
|