malhuda/fictioneer
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases 112 Wiki Activity

Change advanced search toggle to icon

Browse Source
This commit is contained in:
Tetrakern 2025-01-12 16:01:34 +01:00
parent aa9a6e5459
commit 2f88220fa7
4 changed files with 18 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
css/application.css
View File

File diff suppressed because one or more lines are too long

2
css/complete.css
View File

File diff suppressed because one or more lines are too long

2
searchform.php
View File

@ -136,7 +136,7 @@ if ( $show_advanced ) {
type="button" type="button"
class="search-form__advanced-toggle" class="search-form__advanced-toggle"
tabindex="0" tabindex="0"
><?php _ex( 'Advanced', 'Advanced search toggle.', 'fictioneer' ); ?></button> ><i class="fa-solid fa-sliders"></i></button>
<?php endif; ?> <?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> <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> </div>

36
src/scss/_search.scss
View File

@ -10,11 +10,7 @@
.search-form[data-advanced="true"] { .search-form[data-advanced="true"] {
.search-form__bar .search-form__advanced-toggle { .search-form__bar .search-form__advanced-toggle {
color: var(--fg-500); color: var(--button-primary-color-hover);
&:hover {
color: var(--fg-300);
}
} }
.search-form__current { .search-form__current {
@ -44,6 +40,17 @@
padding-right: 96px; padding-right: 96px;
width: 100%; 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 { &__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 { &__select-group {
display: grid; display: grid;
gap: 1rem; gap: 1rem;
@ -146,15 +143,12 @@
} }
&-toggle { &-toggle {
display: grid; color: var(--button-primary-color);
place-content: center; padding-left: 32px;
color: var(--fg-700);
font-size: 11px;
height: 32px;
transition: color var(--transition-duration); transition: color var(--transition-duration);
&:hover { &:hover {
color: var(--fg-400); color: var(--button-primary-color-hover);
} }
} }