From bed9f790248cdaa91cf6a0917b73a2ee6fa55cae Mon Sep 17 00:00:00 2001 From: Justin Coyne Date: Fri, 25 Oct 2024 10:05:48 -0500 Subject: [PATCH] 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 --- app/assets/stylesheets/blacklight/_facets.scss | 13 +------------ .../response/facet_group_component.html.erb | 2 +- 2 files changed, 2 insertions(+), 13 deletions(-) diff --git a/app/assets/stylesheets/blacklight/_facets.scss b/app/assets/stylesheets/blacklight/_facets.scss index d13d3212cd..b7b4dffd13 100644 --- 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 index 24fd2557fb..76f29bf7ae 100644 --- 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',