Merge pull request #24 from crisbusquets/fix/search-cursor-on-hover

Add pointer cursor to search icon and close dialog icon
crisbusquets · Aug 16, 2024 · 7cf7ced · 7cf7ced
2 parents fd169cf + f873c04
commit 7cf7ced
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 5 deletions.
diff --git a/header.php b/header.php
@@ -91,8 +91,10 @@
       <dialog>
         <div id="dialog-header">
           <h3>Busca en uiFromMars</h3>
-          <img src="<?php echo get_bloginfo('template_url') ?>/assets/images/icon/x-mark.svg" width="24" height="24"
-            alt="icono aspa cerrar" class="close" />
+          <div id="dialog-icon">
+            <img src="<?php echo get_bloginfo('template_url') ?>/assets/images/icon/x-mark.svg" width="24" height="24"
+              alt="icono aspa cerrar" class="close" />
+          </div>
         </div>
         <?php get_search_form(); ?>
       </dialog>

diff --git a/styles/grid.css b/styles/grid.css
@@ -133,6 +133,7 @@ aside > .wrapper {
   display: flex;
   align-items: center;
   height: auto;
+  cursor: pointer;
 }
 
 .content-narrow {

diff --git a/styles/search.css b/styles/search.css
@@ -40,9 +40,7 @@ dialog {
 dialog::backdrop {
   background-color: rgb(0 0 0 / 0%);
   backdrop-filter: blur(2px);
-  transition:
-    background-color 1s ease-out,
-    backdrop-filter 1s ease-out;
+  transition: background-color 1s ease-out, backdrop-filter 1s ease-out;
 }
 
 dialog[open]::backdrop {
@@ -69,6 +67,10 @@ dialog[open]::backdrop {
   margin: 0;
 }
 
+#dialog-icon {
+  cursor: pointer;
+}
+
 form.search-form {
   display: flex;
   flex-direction: column;