From 7a8a2d98918783b023009cff0fd271fea5c3eda4 Mon Sep 17 00:00:00 2001 From: Buz Carter Date: Sat, 11 Nov 2023 18:08:42 -0800 Subject: [PATCH] Edge icon problems; --- src/static/images/icons/cancel.svg | 9 +++++++-- src/static/images/icons/search.svg | 9 ++++++--- src/static/scripts/searchBox.js | 1 + src/static/styles/recipesIndex.css | 24 +++++++----------------- src/templates/index.html | 18 ++++++++++++++++-- 5 files changed, 37 insertions(+), 24 deletions(-) diff --git a/src/static/images/icons/cancel.svg b/src/static/images/icons/cancel.svg index a5fa485..a70a8da 100644 --- a/src/static/images/icons/cancel.svg +++ b/src/static/images/icons/cancel.svg @@ -1,3 +1,8 @@ - - + + diff --git a/src/static/images/icons/search.svg b/src/static/images/icons/search.svg index 887e1c8..cd2b425 100644 --- a/src/static/images/icons/search.svg +++ b/src/static/images/icons/search.svg @@ -1,4 +1,7 @@ - - - + + diff --git a/src/static/scripts/searchBox.js b/src/static/scripts/searchBox.js index 4973f9e..2514942 100644 --- a/src/static/scripts/searchBox.js +++ b/src/static/scripts/searchBox.js @@ -41,6 +41,7 @@ const clearInput = () => { input.value = ''; input.focus(); filter(''); + updateKey(KeyNames.SEARCH, ''); }; export function init(initalValue) { diff --git a/src/static/styles/recipesIndex.css b/src/static/styles/recipesIndex.css index decfb18..50c688c 100644 --- a/src/static/styles/recipesIndex.css +++ b/src/static/styles/recipesIndex.css @@ -118,30 +118,20 @@ html body .nav-view__item { width: calc(14em + var(--small-btn-length) + var(--search-icon-length)); } -.filter__mask-icon { - background-color: var(--color-filter-inactive); - display: inline-block; - height: var(--search-icon-length); - -webkit-mask-position: center; - mask-position: center; - -webkit-mask-repeat: no-repeat; - mask-repeat: no-repeat; +.filter__icon { + fill: var(--color-filter-inactive); position: absolute; - transition: background-color var(--transition-color-duration) ease-in; - vertical-align: middle; + transition: fill var(--transition-color-duration) ease-in; width: var(--search-icon-length); + height: var(--search-icon-length); } .filter__cancel-icon { - -webkit-mask-image: url(../images/icons/cancel.svg); - mask-image: url(../images/icons/cancel.svg); left: calc(50% - var(--search-icon-length) / 2); top: calc(50% - var(--search-icon-length) / 2); } .filter__search-icon { - -webkit-mask-image: url(../images/icons/search.svg); - mask-image: url(../images/icons/search.svg); right: var(--search-icon-length); top: calc((var(--search-input-height) - var(--search-icon-length)) / 2); } @@ -160,11 +150,11 @@ html body .nav-view__item { } .filter__text-field:hover+.filter__icons .filter__search-icon { - background-color: var(--color-filter-hover); + fill: var(--color-filter-hover); } .filter__text-field:focus+.filter__icons .filter__search-icon { - background-color: var(--color-filter-focus); + fill: var(--color-filter-focus); } .filter__text-field:not(:placeholder-shown)+.filter__icons .filter__cancel-btn, @@ -174,7 +164,7 @@ html body .nav-view__item { .filter__text-field:not(:placeholder-shown)+.filter__icons .filter__cancel-icon, .filter__text-field:focus+.filter__icons .filter__cancel-icon { - background-color: var(--color-filter-focus); + fill: var(--color-filter-focus); } /* oops */ diff --git a/src/templates/index.html b/src/templates/index.html index af88068..8b11bd4 100644 --- a/src/templates/index.html +++ b/src/templates/index.html @@ -34,9 +34,23 @@

Jump To Recipes

Filter - + + + +