Merge pull request #66 from sul-dlss/facets

Readd Facets

facets/index.html

@@ -18,6 +18,10 @@
 
     <style>
       /* provide by Blacklight */
+      .sidenav {
+        --bl-facet-remove-color: var(--bs-secondary-color);
+        --bl-facet-remove-hover-color: var(--bs-danger);
+      }
       @media (min-width: 992px) {
         .facets-toggleable-md {
           .facets-collapse {
@@ -41,11 +45,17 @@
         display: table-row;
       }
       .facet-values .remove {
-        color: var(--bs-secondary-color);
+        color: var(--bl-facet-remove-color);
         font-weight: bold;
         padding-left: 0.5rem;
         text-decoration: none;
       }
+
+      .facet-values .remove:hover {
+        color: var(--bl-facet-remove-hover-color);
+        text-decoration: none;
+      }
+
       .facet-values .facet-count {
         display: table-cell;
         vertical-align: top;
@@ -195,9 +205,22 @@ <h2 class="facets-heading">Limit your search</h2>
                     <li>
                       <span class="facet-label"
                         ><span class="selected">book</span
-                        ><a class="remove" rel="nofollow" href="/report"
-                          ><span class="remove-icon" aria-hidden="true">✖</span
-                          ><span class="sr-only visually-hidden"
+                        ><a class="remove" rel="nofollow" href="/report">
+                          <span class="blacklight-icons blacklight-icons-remove"
+                            ><svg
+                              xmlns="http://www.w3.org/2000/svg"
+                              width="16"
+                              height="16"
+                              fill="currentColor"
+                              class="bi bi-x fs-4"
+                              viewBox="0 0 16 16"
+                            >
+                              <path
+                                d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708"
+                              ></path>
+                            </svg>
+                          </span>
+                          <span class="sr-only visually-hidden"
                             >[remove]</span
                           ></a
                         ></span

styles/facets.css

@@ -0,0 +1,79 @@
+.facets {
+  padding-block-end: 0.5rem;
+
+  .facets-heading {
+    font-size: 1.75rem;
+    padding: 0.5rem;
+  }
+
+  .card {
+    --bs-border-radius: 0;
+    --bs-card-bg: transparent;
+    --bs-card-cap-bg: transparent;
+    --bs-card-spacer-y: 0.5rem;
+    --bs-card-spacer-x: 0.5rem;
+
+    border-inline: none;
+    border-block-end: none;
+    margin-bottom: 0; /* this is necessary to override Blacklight */
+
+    .facet-select {
+      color: var(--bs-body-color);
+      display: inline-block;
+      width: 100%;
+    }
+
+    .card-header {
+      --bs-card-border-width: 0;
+
+      .btn {
+        --bs-btn-font-size: 1.125rem;
+      }
+    }
+
+    .facet-values {
+      border-spacing: 0.25rem;
+    }
+
+    &.facet-limit-active {
+      --bs-card-cap-bg: var(--stanford-fog-light);
+
+      /* these rules are to override blacklights style of the element, which uses !important */
+
+      /* https://github.com/projectblacklight/blacklight/blob/f0b6afec6ec69f0ffe9c1a376164c50e001ce821/app/assets/stylesheets/blacklight/_facets.scss#L114-L115 */
+
+      /* .card top border  */
+      border-color: var(--bs-card-border-color) !important;
+
+      .card-header {
+        background-color: var(--bs-card-cap-bg) !important;
+
+        .btn {
+          --bs-btn-font-weight: 600;
+
+          color: var(--bs-body-color);
+        }
+      }
+
+      .remove {
+        text-decoration: none;
+
+        .bi {
+          width: 1em;
+          height: 1em;
+        }
+
+        &:hover {
+          color: var(--stanford-digital-red);
+        }
+      }
+
+      .selected {
+        /* override blacklight 8.3 */
+        --bs-success-rgb: var(--bs-body-color);
+
+        font-weight: bold;
+      }
+    }
+  }
+}

styles/sul.css

@@ -9,3 +9,4 @@
 @import "./button.css";
 @import "./selected-item.css";
 @import "./accessibility.css";
+@import "./facets.css";