Change advanced search toggle to icon

Tetrakern · Jan 12, 2025 · 2f88220 · 2f88220
1 parent aa9a6e5
commit 2f88220
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 24 deletions.
diff --git a/css/application.css b/css/application.css
diff --git a/css/complete.css b/css/complete.css
diff --git a/searchform.php b/searchform.php
@@ -136,7  136,7 @@ class="search-form__string"
           type="button"
           class="search-form__advanced-toggle"
           tabindex="0"
-        ><?php _ex( 'Advanced', 'Advanced search toggle.', 'fictioneer' ); ?></button>
         ><i class="fa-solid fa-sliders"></i></button>
       <?php endif; ?>
       <button type="submit" class="search-form__submit" aria-label="<?php echo esc_attr__( 'Submit search request', 'fictioneer' ); ?>"><i class="fa-solid fa-magnifying-glass"></i></button>
     </div>

diff --git a/src/scss/_search.scss b/src/scss/_search.scss
@@ -10,11  10,7 @@
 
 .search-form[data-advanced="true"] {
   .search-form__bar .search-form__advanced-toggle {
-    color: var(--fg-500);
-
-    &:hover {
-      color: var(--fg-300);
-    }
     color: var(--button-primary-color-hover);
   }
 
   .search-form__current {
@@ -44,6  40,17 @@
       padding-right: 96px;
       width: 100%;
     }
 
     button {
       --button-primary-background: transparent;
       --button-primary-background-hover: transparent;
       --button-primary-color: var(--fg-900);
       --button-primary-color-hover: var(--fg-400);
       display: grid;
       place-content: center;
       font-size: 12px;
       min-width: 32px;
     }
   }
 
   &__current {
@@ -73,16  80,6 @@
     }
   }
 
-  &__submit:is(button) {
-    --button-primary-background: transparent;
-    --button-primary-background-hover: transparent;
-    --button-primary-color: var(--fg-900);
-    --button-primary-color-hover: var(--fg-400);
-    display: grid;
-    place-content: center;
-    width: 32px;
-  }
-
   &__select-group {
     display: grid;
     gap: 1rem;
@@ -146,15  143,12 @@
     }
 
     &-toggle {
-      display: grid;
-      place-content: center;
-      color: var(--fg-700);
-      font-size: 11px;
-      height: 32px;
       color: var(--button-primary-color);
       padding-left: 32px;
       transition: color var(--transition-duration);
 
       &:hover {
-        color: var(--fg-400);
         color: var(--button-primary-color-hover);
       }
     }