Edge icon problems;

buzcarter · Nov 12, 2023 · 7a8a2d9 · 7a8a2d9
1 parent 3a6eb90
commit 7a8a2d9
Show file tree

Hide file tree

Showing 5 changed files with 37 additions and 24 deletions.
diff --git a/src/static/images/icons/cancel.svg b/src/static/images/icons/cancel.svg
diff --git a/src/static/images/icons/search.svg b/src/static/images/icons/search.svg
diff --git 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
@@ -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
@@ -34,9 +34,23 @@ <h3 class="sr-only">Jump To Recipes </h3>
             <span class="sr-only">Filter</span>
             <input id="filter-field" class="filter__text-field" placeholder="" autocomplete="off">
             <span class="filter__icons">
-              <span class="filter__mask-icon filter__search-icon"></span>
+              <svg class="filter__icon filter__search-icon" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+                width="16px" height="16px" viewBox="0 0 16 16" enable-background="new 0 0 16 16" xml:space="preserve">
+             <path d="M15.426,14.367l-3.774-3.792c0.832-1.074,1.333-2.42,1.333-3.883c0-3.494-2.833-6.338-6.314-6.338S0.355,3.198,0.355,6.692
+               c0,3.496,2.833,6.341,6.315,6.341c1.486,0,2.852-0.521,3.932-1.388l3.763,3.779c0.146,0.146,0.339,0.221,0.531,0.221
+               c0.19,0,0.383-0.072,0.528-0.219C15.717,15.136,15.718,14.661,15.426,14.367z M6.668,11.533c-2.655,0-4.815-2.171-4.815-4.841
+               c0-2.668,2.16-4.838,4.815-4.838s4.814,2.17,4.814,4.838C11.483,9.362,9.323,11.533,6.668,11.533z"/>
+             </svg>
+
               <button type="button" id="clear-filter-btn" class="filter__cancel-btn">
-                <span class="filter__mask-icon filter__cancel-icon"></span>
+                <svg class="filter__icon filter__cancel-icon" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+                  width="16px" height="16px" viewBox="-119.5 124.5 16 16" enable-background="new -119.5 124.5 16 16" xml:space="preserve">
+               <path d="M-118.495,140.277c-0.202,0-0.403-0.076-0.556-0.23c-0.307-0.307-0.305-0.804,0.003-1.109l6.478-6.438l-6.477-6.438
+                 c-0.309-0.307-0.31-0.804-0.003-1.109c0.306-0.307,0.802-0.309,1.108-0.004l6.484,6.445l6.398-6.36
+                 c0.308-0.306,0.804-0.304,1.109,0.004c0.307,0.308,0.305,0.804-0.003,1.108l-6.394,6.354l6.393,6.354
+                 c0.309,0.307,0.309,0.804,0.003,1.109c-0.305,0.309-0.802,0.309-1.108,0.004l-6.399-6.361l-6.484,6.445
+                 C-118.096,140.202-118.295,140.277-118.495,140.277z"/>
+               </svg>
                 <span class="sr-only">Clear filter input</span>
               </button>
             </span>