Desplegable responsivo

Author: jplantes

docs/assets/output.css

@@ -638,7 +638,29 @@ video {
 .btn-resp-menu:hover {
   --bg-opacity: 1;
   background-color: #2d3748;
-  background-color: rgba(45, 55, 72, var(--bg-opacity))
+  background-color: rgba(45, 55, 72, var(--bg-opacity));
+}
+
+.btn-resp-desplegable {
+  display: block;
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+  padding-left: 1rem;
+  padding-right: 1rem;
+  --text-opacity: 1;
+  color: #4a5568;
+  color: rgba(74, 85, 104, var(--text-opacity));
+  margin-top: 0.25rem;
+  margin-bottom: 0.25rem;
+}
+
+.btn-resp-desplegable:hover {
+  --bg-opacity: 1;
+  background-color: #667eea;
+  background-color: rgba(102, 126, 234, var(--bg-opacity));
+  --text-opacity: 1;
+  color: #fff;
+  color: rgba(255, 255, 255, var(--text-opacity));
 }
 
 @media (min-width: 640px) {

docs/index.html

@@ -15,5 +15,5 @@
   <app-root></app-root>
 
 
-<script src="runtime-es2015.0811dcefd377500b5b1a.js" type="module"></script><script src="runtime-es5.0811dcefd377500b5b1a.js" nomodule defer></script><script src="polyfills-es5.1a3c78b07cd6f16c6e9a.js" nomodule defer></script><script src="polyfills-es2015.1f913f16a2d346cc8bdc.js" type="module"></script><script src="main-es2015.7bf4c47ba72342d8858c.js" type="module"></script><script src="main-es5.7bf4c47ba72342d8858c.js" nomodule defer></script></body>
+<script src="runtime-es2015.0811dcefd377500b5b1a.js" type="module"></script><script src="runtime-es5.0811dcefd377500b5b1a.js" nomodule defer></script><script src="polyfills-es5.1a3c78b07cd6f16c6e9a.js" nomodule defer></script><script src="polyfills-es2015.1f913f16a2d346cc8bdc.js" type="module"></script><script src="main-es2015.6ded8e80d228bf1f5a4f.js" type="module"></script><script src="main-es5.6ded8e80d228bf1f5a4f.js" nomodule defer></script></body>
 </html>

docs/main-es2015.7bf4c47ba72342d8858c.js renamed to docs/main-es2015.6ded8e80d228bf1f5a4f.js

@@ -9,9 +9,9 @@
     <button *ngIf="isOpen" (click)="isOpen = false" tabindex="-1" class="fixed inset-0 h-full w-full bg-gray-900 opacity-50 cursor-default"></button>
 
     <div *ngIf="isOpen" class="absolute right-0 mt-2 py-1 w-48 bg-white rounded-lg shadow-xl ">
-        <a href="#" class="block py-2 px-4 text-gray-700 hover:bg-indigo-500 hover:text-white my-1" >Sobre mi</a>
-        <a href="#" class="block py-2 px-4 text-gray-700 hover:bg-indigo-500 hover:text-white my-1" >Configuracón</a>
-        <a href="#" class="block py-2 px-4 text-gray-700 hover:bg-indigo-500 hover:text-white my-1" >Salir</a>
+        <a href="#" class="btn-resp-desplegable text-gray-700" >Sobre mi</a>
+        <a href="#" class="btn-resp-desplegable text-gray-700" >Configuracón</a>
+        <a href="#" class="btn-resp-desplegable text-gray-700" >Salir</a>
     </div>
 </div>
 
@@ -25,8 +25,8 @@
     </div>
 
     <div class=" mt-2 py-1">
-        <a href="#" class="block py-2 px-4 text-gray-700 hover:bg-indigo-500 hover:text-white my-1" >Sobre mi</a>
-        <a href="#" class="block py-2 px-4 text-gray-700 hover:bg-indigo-500 hover:text-white my-1" >Configuracón</a>
-        <a href="#" class="block py-2 px-4 text-gray-700 hover:bg-indigo-500 hover:text-white my-1" >Salir</a>
+        <a href="#" class="btn-resp-desplegable text-gray-400 rounded" >Sobre mi</a>
+        <a href="#" class="btn-resp-desplegable text-gray-400 rounded" >Configuracón</a>
+        <a href="#" class="btn-resp-desplegable text-gray-400 rounded" >Salir</a>
     </div>
 </div>

docs/main-es5.7bf4c47ba72342d8858c.js renamed to docs/main-es5.6ded8e80d228bf1f5a4f.js

@@ -638,7 +638,29 @@ video {
 .btn-resp-menu:hover {
   --bg-opacity: 1;
   background-color: #2d3748;
-  background-color: rgba(45, 55, 72, var(--bg-opacity))
+  background-color: rgba(45, 55, 72, var(--bg-opacity));
+}
+
+.btn-resp-desplegable {
+  display: block;
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+  padding-left: 1rem;
+  padding-right: 1rem;
+  --text-opacity: 1;
+  color: #4a5568;
+  color: rgba(74, 85, 104, var(--text-opacity));
+  margin-top: 0.25rem;
+  margin-bottom: 0.25rem;
+}
+
+.btn-resp-desplegable:hover {
+  --bg-opacity: 1;
+  background-color: #667eea;
+  background-color: rgba(102, 126, 234, var(--bg-opacity));
+  --text-opacity: 1;
+  color: #fff;
+  color: rgba(255, 255, 255, var(--text-opacity));
 }
 
 @media (min-width: 640px) {

src/app/components/navBar/desplegable/desplegable.component.html

@@ -8,9 +8,16 @@
 
 
 .btn-resp-menu:hover {
-    @apply bg-gray-800
+    @apply bg-gray-800;
 }
 
+.btn-resp-desplegable {
+    @apply block py-2 px-4 text-gray-700 my-1;
+}
+
+.btn-resp-desplegable:hover {
+    @apply bg-indigo-500 text-white;
+}
 
 @screen sm {
     .btn-resp-menu {