Mostrar listas ordenadas y cantidades

enflujo · Aug 2, 2024 · 02ddcac · 02ddcac
1 parent ed64e70
commit 02ddcac
Show file tree

Hide file tree

Showing 3 changed files with 54 additions and 0 deletions.
diff --git a/aplicaciones/www/src/componentes/ListaNodos.astro b/aplicaciones/www/src/componentes/ListaNodos.astro
@@ -26,3 +26,6 @@ const { lista, id } = Astro.props;
     }
   </ul>
 </section>
+
+<style lang="'scss">
+</style>
diff --git a/aplicaciones/www/src/scss/_constantes.scss b/aplicaciones/www/src/scss/_constantes.scss
diff --git a/aplicaciones/www/src/scss/estilos.scss b/aplicaciones/www/src/scss/estilos.scss
@@ -3,3 +3,54 @@
 :root {
   --colorFuente: #252424;
 }
+
+// Nodos listas
+.contenedorElementos {
+  height: 100vh;
+  // opacity: 0;
+  // overflow: hidden;
+  transition: opacity 0.35s ease-in-out;
+
+  &.abierto {
+    height: 100%;
+    opacity: 1;
+  }
+
+  li {
+    cursor: pointer;
+
+    &:hover {
+      background-color: white;
+    }
+  }
+
+  .titulo {
+    cursor: pointer;
+  }
+
+  .nombre {
+    margin: 0;
+    font-size: 0.85em;
+  }
+
+  .barra {
+    display: flex;
+    align-items: center;
+
+    .linea {
+      height: 0.25rem;
+      background-color: salmon;
+    }
+
+    .conteo {
+      margin-left: 3px;
+    }
+  }
+}
+
+#contenedorListas {
+  .lista {
+    max-height: 50vh;
+    overflow: auto;
+  }
+}