sutty-base-jekyll-theme/_sass/toggler.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 ;
  }
}