From 9966f80c27b5fb6913d4146beb4f860037d7c93f Mon Sep 17 00:00:00 2001
From: f <f@sutty.nl>
Date: Wed, 17 Jun 2020 16:09:12 -0300
Subject: [PATCH] Desplegar cajones sin JavaScript

---
 _sass/toggler.scss | 35 +++++++++++++++++++++++++++++++++++
 1 file changed, 35 insertions(+)
 create mode 100644 _sass/toggler.scss

diff --git a/_sass/toggler.scss b/_sass/toggler.scss
new file mode 100644
index 0000000..7957bfa
--- /dev/null
+++ b/_sass/toggler.scss
@@ -0,0 +1,35 @@
+/*
+ * 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
+  & ~ .collapse {
+    z-index: 10;
+    visibility: hidden;
+  }
+
+  // Al tildar el input, mostramos el elemento
+  &:checked ~ .collapse {
+    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 ;
+  }
+}