sutty-base-jekyll-theme/_sass/toggler.scss

63 lines
1.6 KiB
SCSS
Raw Permalink Normal View History

////
/// @group Toggler
////
2020-06-17 19:09:12 +00:00
/// 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>
2020-06-17 19:09:12 +00:00
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`?
2020-06-17 19:09:12 +00:00
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 {
2020-06-17 19:52:43 +00:00
.toggled {
z-index: 10;
visibility: hidden;
}
2020-06-17 19:09:12 +00:00
}
/// Al tocar el `<input>`, mostramos el elemento oculto.
&:checked + label {
2020-06-17 19:52:43 +00:00
.toggled {
visibility: visible;
}
2020-06-17 19:09:12 +00:00
}
& + 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>`
2020-06-17 19:09:12 +00:00
&:focus + label {
outline: 1px dotted grey ;
}
}