Add special styling to collapsed facet section on mobile viewports

[ggeisler]

See #1375 for background discussion but it probably isn't required reading to work on this ticket.

QNL raised the concern that on mobile viewports, the facet sidebar heading visually appears like a page heading. A related concern is that on mobile we have two hamburger menus (collapsed sections in the brandbar and facet section) visible in close proximity:

Our goal is to apply special styling to the facet section -- at the md breakpoint and below -- to make the collapsed facet section appear more clearly as an expandable, actionable element, rather than some sort of page heading. Here's the goal, showing the facet section in each of the three main possible states at md and below (I'm showing the homepage version of the facet sidebar here; there's also the search results page version, but I don't think there's anything special we need to worry about related to that):

Styling adjustments

Keep in mind that all of this has to be done as a media query, since at the lg breakpoint and above no changes are necessary.

• Hide the horizontal rule under the facet heading

• Replace the icon on the expand/collapse button with a text label ("Show filters" when closed, "Hide filters" when open.)

• Button styling: We want the button to look more like the btn-outline-secondary styling and be less tall than the existing button. I'm not sure if we can just use that class to handle it or if we need to do some things manually. But overall the button should have a white background, maybe a border-color: $color-blackish; and a border-radius: 0.2rem;

• Button label: Style the button label the same as the "View all" links lower on the page (color #17377b and font size 20px, same hover and active styling)

• Add a 1px border around the facet section. We can experiment with color after it's implemented, but as a starting point: border: 1px solid lighten($color-primary, 50%);

• Add a radius to that border: border-radius: 0.2rem;

• Add some padding so the border isn't too close to the heading, etc. padding: 0.25rem 0.5rem;

This is sort of a rough guess at everything since there are a lot of bits to override. But we should be able to easily fine-tune the styling after the media query and basic overrides are in place.

[mwerla]

Looks good to me, thanks!

[jcoyne]

@ggeisler should this change happen in Spotlight? Would Spotlight benefit from this?

[ggeisler]

A lot of this styling was a result of very specific feedback from QNL. Some of it is specific to DLME and the styling already in place just for DLME.

I do think some of it could be useful to improve the display of the collapsed facet section for Spotlight more generally, but if we were going to go that route, I think Blacklight is really the place to do it. I don't think we're doing anything in this particular part of the application in core Spotlight that isn't coming straight from Blackllight.

[thatbudakguy]

Will be resolved by switching to BL8 in DLME

[thatbudakguy]

doesn't appear to be resolved. screenshot taken in firefox: