Create a custom css class for the facet toggle button

It's odd to use navbar-toggler for a button that doesn't exist in a .navbar. This lead us to setting a bunch of properties we wouldn't need to set if we just use a .btn
projectblacklight · Dec 18, 2024 · bed9f79 · bed9f79
1 parent 65d8b9b
commit bed9f79
Show file tree

Hide file tree

Showing 2 changed files with 2 additions and 13 deletions.
diff --git a/app/assets/stylesheets/blacklight/_facets.scss b/app/assets/stylesheets/blacklight/_facets.scss
@@ -14,18 +14,7 @@
   --bl-facets-smallish-margin-bottom: #{$spacer};
   --bl-facets-smallish-border-radius: #{$border-radius};
 
-  .navbar-toggler {
-    --bs-navbar-toggler-padding-x: #{$navbar-toggler-padding-x};
-    --bs-navbar-toggler-padding-y: #{$navbar-toggler-padding-y};
-    --bs-navbar-toggler-border-color: #{$navbar-light-toggler-border-color};
-    --bs-navbar-toggler-border-radius: #{$navbar-toggler-border-radius};
-    color: $navbar-light-active-color;
-
-    &:hover,
-    &:focus {
-      color: $navbar-light-active-color;
-    }
-
+  .facet-toggle-button {
     [data-hide-label] {
       display: inline;
     }

diff --git a/app/components/blacklight/response/facet_group_component.html.erb b/app/components/blacklight/response/facet_group_component.html.erb
@@ -4,7 +4,7 @@
     <%= content_tag :h2, @title, class: 'facets-heading' if @title %>
 
     <%= content_tag :button,
-      class:'navbar-toggler navbar-toggler-right',
+      class: 'btn btn-outline-secondary facet-toggle-button d-block d-lg-none',
       type: 'button',
       data: {
         toggle: 'collapse',