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"
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>

36
src/scss/_search.scss
View File

@ -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);
}
}