Update search icon size

Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>
This commit is contained in:
John Molakvoæ (skjnldsv) 2022-04-01 09:30:02 +02:00 committed by John Molakvoæ
parent b3cf312edc
commit 738fcba51a
No known key found for this signature in database
GPG key ID: 60C25B8C072916CF
2 changed files with 5 additions and 63 deletions

View file

@ -658,61 +658,6 @@ nav[role='navigation'] {
}
}
/* SEARCHBOX --------------------------------------------------------------- */
.searchbox {
position: relative;
display: flex;
align-items: center;
input[type='search'] {
position: relative;
font-size: 1.2em;
padding: 3px;
padding-left: 25px;
padding-right: 20px;
background-color: transparent;
color: var(--color-primary-text);
border: 0;
border-radius: var(--border-radius-pill);
height: 34px;
width: 0;
cursor: pointer;
transition: width 100ms, opacity 100ms;
opacity: .6;
&:focus, &:active, &:valid {
background-position-x: 6px;
color: var(--color-primary-text);
width: 155px;
cursor: text;
background-color: transparent !important;
border: 1px solid var(--color-primary-text) !important;
}
&:hover, &:focus, &:active {
opacity: 1;
}
& ~ .icon-close-white {
display: inline;
position: absolute;
width: 30px;
height: 100%;
right: 0;
top: 0;
margin: 0;
&, &:focus, &:active, &:hover {
border: none;
background-color: transparent;
}
}
&:not(:valid) ~ .icon-close-white {
display: none;
}
&::-webkit-search-cancel-button {
-webkit-appearance: none;
}
}
.icon-search-force-white {
@include icon-color('search', 'actions', '#fffffe', 1, true);
}
}
/* Empty content messages in the header e.g. notifications, contacts menu, … */
header #emptycontent,

View file

@ -30,7 +30,7 @@
<!-- Header icon -->
<template #trigger>
<Magnify class="unified-search__trigger"
:size="20"
:size="22/* fit better next to other 20px icons */"
fill-color="var(--color-primary-text)" />
</template>
@ -81,15 +81,17 @@
<!-- Loading placeholders -->
<SearchResultPlaceholders v-if="isLoading" />
<EmptyContent v-else-if="isValidQuery" icon="icon-search">
<EmptyContent v-else-if="isValidQuery">
<Highlight v-if="triggered" :text="t('core', 'No results for {query}', { query })" :search="query" />
<div v-else>
{{ t('core', 'Press enter to start searching') }}
</div>
<template #icon><Magnify /></template>
</EmptyContent>
<EmptyContent v-else-if="!isLoading || isShortQuery" icon="icon-search">
<EmptyContent v-else-if="!isLoading || isShortQuery">
{{ t('core', 'Start typing to search') }}
<template #icon><Magnify /></template>
<template v-if="isShortQuery" #desc>
{{ n('core',
'Please enter {minSearchLength} character or more to search',
@ -677,11 +679,6 @@ $input-height: 34px;
$input-padding: 6px;
.unified-search {
&__trigger {
width: 20px;
height: 20px;
}
&__input-wrapper {
position: sticky;
// above search results