Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Visually hide search button text on xs devices #2861

Merged
merged 1 commit into from
Nov 4, 2022
Merged

Visually hide search button text on xs devices #2861

merged 1 commit into from
Nov 4, 2022

Conversation

thatbudakguy
Copy link
Member

@thatbudakguy thatbudakguy commented Oct 31, 2022

  • Create visually-hidden-* helpers using bootstrap 5 API
  • Add bootstrap 4 support using @sr-only
  • Apply visually-hidden-xs to search button text
  • Adjust padding in button slightly

This helps with the lack of space on very small screens. It seems like there were already styles to do this, but they aren't working at the moment (maybe markup has changed since they were written?)

* Create visually-hidden-* helpers using bootstrap 5 API
* Add bootstrap 4 support using @sr-only
* Apply visually-hidden-xs to search button text
* Adjust padding in button slightly
@thatbudakguy
Copy link
Member Author

ping @jrochkind since I got the sense you'd been down this path before, and I actually ran into your issue twbs/bootstrap-sass#498 from more than 8 years ago about this very problem!

@jcoyne jcoyne merged commit 93424b9 into projectblacklight:main Nov 4, 2022
@thatbudakguy thatbudakguy deleted the hide-searchbutton-text-xs branch November 4, 2022 17:18
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

2 participants