Add a no-background variation to the SearchBox component

This commit is contained in:
Bubka 2024-01-19 17:07:59 +01:00
parent 5249b2ab97
commit d96c943927
2 changed files with 10 additions and 1 deletions

View File

@ -382,6 +382,10 @@ a:hover {
white-space: nowrap; white-space: nowrap;
} }
.has-no-background {
background: none !important;
}
.add-icon-button { .add-icon-button {
height: 64px; height: 64px;
width: 64px; width: 64px;

View File

@ -1,6 +1,10 @@
<script setup> <script setup>
const props = defineProps({ const props = defineProps({
keyword: String keyword: String,
hasNoBackground: {
type: Boolean,
default: false
},
}) })
const searchInput = ref(null) const searchInput = ref(null)
@ -34,6 +38,7 @@
:aria-label="$t('commons.search')" :aria-label="$t('commons.search')"
:title="$t('commons.search')" :title="$t('commons.search')"
class="input is-rounded is-search" class="input is-rounded is-search"
:class="{ 'has-no-background': hasNoBackground }"
:value="keyword" :value="keyword"
v-on:keyup="$emit('update:keyword', $event.target.value)"> v-on:keyup="$emit('update:keyword', $event.target.value)">
<span class="icon is-small is-right"> <span class="icon is-small is-right">