aboutsummaryrefslogtreecommitdiff
path: root/src/components/search_bar/search_bar.vue
diff options
context:
space:
mode:
authorShpuld Shpludson <shp@cock.li>2020-12-22 16:00:12 +0000
committerShpuld Shpludson <shp@cock.li>2020-12-22 16:00:12 +0000
commita39866308cd7c8cb0d30a04a5215d1fae8bf8d47 (patch)
tree59230ab336bf3bd13f0d046c6f45842a7fbdd02c /src/components/search_bar/search_bar.vue
parenta7567ce6d01781b4b1ff47f805b4a9a5109e960b (diff)
parent00cb8d9dcee9a403fedb2800a0cdc4b0f77a0429 (diff)
Merge branch 'rc/2.2.2' into 'master'
prepare master for 2.2.2 See merge request pleroma/pleroma-fe!1315
Diffstat (limited to 'src/components/search_bar/search_bar.vue')
-rw-r--r--src/components/search_bar/search_bar.vue32
1 files changed, 19 insertions, 13 deletions
diff --git a/src/components/search_bar/search_bar.vue b/src/components/search_bar/search_bar.vue
index 89a601c8..6cf9179e 100644
--- a/src/components/search_bar/search_bar.vue
+++ b/src/components/search_bar/search_bar.vue
@@ -3,17 +3,18 @@
class="SearchBar"
:class="{ '-expanded': !hidden }"
>
- <a
+ <button
v-if="hidden"
- href="#"
- class="nav-icon"
+ class="button-unstyled nav-icon"
:title="$t('nav.search')"
- ><FAIcon
- fixed-width
- class="fa-scale-110 fa-old-padding"
- icon="search"
@click.prevent.stop="toggleHidden"
- /></a>
+ >
+ <FAIcon
+ fixed-width
+ class="fa-scale-110 fa-old-padding"
+ icon="search"
+ />
+ </button>
<template v-else>
<input
id="search-bar-input"
@@ -25,7 +26,7 @@
@keyup.enter="find(searchTerm)"
>
<button
- class="btn search-button"
+ class="button-default search-button"
@click="find(searchTerm)"
>
<FAIcon
@@ -33,14 +34,16 @@
icon="search"
/>
</button>
- <span>
+ <button
+ class="button-unstyled cancel-search"
+ @click.prevent.stop="toggleHidden"
+ >
<FAIcon
fixed-width
icon="times"
class="cancel-icon fa-scale-110 fa-old-padding"
- @click.prevent.stop="toggleHidden"
/>
- </span>
+ </button>
</template>
</div>
</template>
@@ -69,8 +72,11 @@
flex: 1 0 auto;
}
+ .cancel-search {
+ height: 50px;
+ }
+
.cancel-icon {
- cursor: pointer;
color: $fallback--text;
color: var(--btnTopBarText, $fallback--text);
}