blackicedbear/FHC-Core
1
0
Fork 0
mirror of https://github.com/FH-Complete/FHC-Core.git synced 2026-07-19 16:02:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

searchbar: better layout for clear button

Browse Source
This commit is contained in:
chfhtw
2025-07-31 09:24:33 +02:00
parent 2755a194eb
commit 9a5790edf0
2 changed files with 17 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/css/components/searchbar/searchbar.css
+12
View File
@@ -10,6 +10,18 @@
}
.searchbar_input_clear {
/* 1rem * 5 / 8 = width of icon */
margin-inline-start: calc(-1rem * 5 / 8 - var(--bs-btn-padding-x) * 2 - var(--bs-border-width)) !important;
border: 0;
margin-inline-end: 1px;
z-index: 1;
}
.searchbar_input_clear:hover,
.searchbar_input_clear:focus {
color: var(--bs-body-color);
background-color: transparent;
}
.searchbar_input:focus,
.searchbar_input:focus ~ .searchbar_input_clear {
z-index: 5; /* same as bootstrap .input-group > .form-control:focus */
public/js/components/searchbar/searchbar.js
+5 -9
View File
@@ -98,17 +98,13 @@ export default {
:placeholder="$p.t('search/input_search_label', { types: searchTypesPlaceholder })"
:aria-label="$p.t('search/input_search_label', { types: searchTypesPlaceholder })"
>
<span
<button
v-if="searchsettings.searchstr"
class="w-0 position-relative searchbar_input_clear"
class="searchbar_input_clear btn btn-outline-secondary"
@click="clearInput"
>
<button
class="position-absolute top-0 bottom-0 end-0 btn bg-transparent"
@click="clearInput"
>
<i class="fas fa-close"></i>
</button>
</span>
<i class="fas fa-close"></i>
</button>
<span
data-bs-toggle="collapse"
data-bs-target="#searchSettings"