Remove extra border around facets on mobile view

[dbranchini]

Each facet has a border, so we do not need to wrap all of them with another border. It's only happening on mobile view. Also, I think we need to center "Limit your search" and the "Show/Hide facets" button vertically. And lastly, if possible, the button should be a primary outline button instead of the default gray.

[hudajkhan]

The border line appears to come in from Blacklight: https://github.com/projectblacklight/blacklight/blob/main/app/assets/stylesheets/blacklight/_facets.scss#L52

[hudajkhan]

For the border color for the button, would you mind providing a similar example or the color you like? I assume you want btn-primary-outline (or similar) but just want to confirm.

Also, I am applying the spacing changes only to the mobile version. Is the correct? Or would you like to change the border color for all window sizes, not just mobile?

[hudajkhan]

The PR above addresses the section border and spacing, but not the button itself. It might be good to do a different PR overriding the button as a whole/using the component as opposed to just CSS changes.

[hudajkhan]

Also, the button doesn't exist in the desktop version, so that answers one of my questions above.

[dbranchini]

It should use the primary blue outline button seen here - https://sul-dlss.github.io/component-library/button/. Pick a size that's closest to the button that's there now.

[hudajkhan]

Thanks. For reference, the code for the "show/hide facets" button is here: https://github.com/projectblacklight/blacklight/blob/main/app/components/blacklight/response/facet_group_component.html.erb

[jcoyne]

This may have been an inadvertent change in Blacklight projectblacklight/blacklight@3237317. Can we fix it there?

[jcoyne]

Actually, it's just easer to set

.facets-header {
  --bl-facets-smallish-border: none;
  --bs-navbar-toggler-border-color: var(--stanford-digital-blue);
  --bs-navbar-color: var(--stanford-digital-blue);
}

[hudajkhan]

Closed by #1309