diff options
| author | John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com> | 2022-04-01 09:30:02 +0200 |
|---|---|---|
| committer | John Molakvoæ <skjnldsv@protonmail.com> | 2022-04-21 09:31:05 +0200 |
| commit | 738fcba51a4947213b8b240ebbecc948308340cb (patch) | |
| tree | 65dc5f6b97d4bddbb87c68acd11892e509d6f9ae /core | |
| parent | b3cf312edcefec3fb26bad8637f3a0969504be87 (diff) | |
| download | nextcloud-server-738fcba51a4947213b8b240ebbecc948308340cb.tar.gz nextcloud-server-738fcba51a4947213b8b240ebbecc948308340cb.zip | |
Update search icon size
Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>
Diffstat (limited to 'core')
| -rw-r--r-- | core/css/header.scss | 55 | ||||
| -rw-r--r-- | core/src/views/UnifiedSearch.vue | 13 |
2 files changed, 5 insertions, 63 deletions
diff --git a/core/css/header.scss b/core/css/header.scss index 2c1dc647189..39e3156fb0b 100644 --- a/core/css/header.scss +++ b/core/css/header.scss @@ -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, diff --git a/core/src/views/UnifiedSearch.vue b/core/src/views/UnifiedSearch.vue index 89f5d2a0bab..1e11d6bfbde 100644 --- a/core/src/views/UnifiedSearch.vue +++ b/core/src/views/UnifiedSearch.vue @@ -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 |