mirror of
https://github.com/nextcloud/server.git
synced 2026-06-11 09:42:09 -04:00
Update search icon size
Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>
This commit is contained in:
parent
b3cf312edc
commit
738fcba51a
2 changed files with 5 additions and 63 deletions
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
Loading…
Reference in a new issue