Sha256: e44cb3e61884dac13286775773dda66c6efbb476a7a2e631c317c491a877adb4
Contents?: true
Size: 789 Bytes
Versions: 4
Compression:
Stored size: 789 Bytes
Contents
/*
* Desplegar menúes sin javascript!
*
* Inspirado en https://dev.to/cydstumpel/creating-a-fold-out-navigation-with-css-only-4g9k
*/
// Comenzamos con un input checkbox con la clase toggler
input[type="checkbox"].toggler {
// Lo ocultamos pero todavía queremos que se le pueda dar foco con el
// teclado
opacity: 0;
position: absolute;
// Ocultamos el elemento colapsable
& + label {
.toggled {
z-index: 10;
visibility: hidden;
}
}
// Al tildar el input, mostramos el elemento
&:checked + label {
.toggled {
visibility: visible;
}
}
& + label {
border: none;
outline: none;
z-index: 11;
}
// Dar una guía visual de que estamos enfocando el input
&:focus + label {
outline: 1px dotted grey ;
}
}
Version data entries
4 entries across 4 versions & 1 rubygems