From 102fb55514948ca89256dc013a890622d09148e1 Mon Sep 17 00:00:00 2001
From: Jeremy McDermott <jeremy.mcdermott@gmail.com>
Date: Mon, 29 Jul 2024 16:11:29 -0300
Subject: [PATCH] LOYALIST-51 Search: View page theming

---
 .../images/square-xmark-solid.svg             |  1 +
 .../src/scss/style.scss                       | 21 +++++++++++++++++++
 2 files changed, 22 insertions(+)
 create mode 100644 custom/themes/the_loyalist_collection/images/square-xmark-solid.svg

diff --git a/custom/themes/the_loyalist_collection/images/square-xmark-solid.svg b/custom/themes/the_loyalist_collection/images/square-xmark-solid.svg
new file mode 100644
index 0000000..7a08b76
--- /dev/null
+++ b/custom/themes/the_loyalist_collection/images/square-xmark-solid.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M64 32C28.7 32 0 60.7 0 96L0 416c0 35.3 28.7 64 64 64l320 0c35.3 0 64-28.7 64-64l0-320c0-35.3-28.7-64-64-64L64 32zm79 143c9.4-9.4 24.6-9.4 33.9 0l47 47 47-47c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9l-47 47 47 47c9.4 9.4 9.4 24.6 0 33.9s-24.6 9.4-33.9 0l-47-47-47 47c-9.4 9.4-24.6 9.4-33.9 0s-9.4-24.6 0-33.9l47-47-47-47c-9.4-9.4-9.4-24.6 0-33.9z"/></svg>
\ No newline at end of file
diff --git a/custom/themes/the_loyalist_collection/src/scss/style.scss b/custom/themes/the_loyalist_collection/src/scss/style.scss
index 0da2513..612e80a 100644
--- a/custom/themes/the_loyalist_collection/src/scss/style.scss
+++ b/custom/themes/the_loyalist_collection/src/scss/style.scss
@@ -159,3 +159,24 @@ dl.loyalist-record {
     }
   }
 }
+
+input[type="search"]::-webkit-search-cancel-button {
+  appearance: none;
+  height: $spacer * 3;
+  width: $spacer * 3;
+  background: url(../../images/square-xmark-solid.svg) no-repeat 50% 50%;
+  background-size: contain;
+  margin-right: $spacer * -1;
+  opacity: 0;
+  pointer-events: none;
+}
+
+input[type="search"]:focus::-webkit-search-cancel-button,
+input[type="search"]:hover::-webkit-search-cancel-button {
+  opacity: 0.7;
+  pointer-events: auto;
+}
+input[type="search"]::-webkit-search-cancel-button:hover {
+  cursor: pointer;
+  fill: $unb-logo-red;
+}