Clean up legacy styles and remove bs3-compat.scss

[EreMaijala]

This is collection of sort-of independent commits with the aim to remove the Bootstrap 3 compatibility layer.

Notable changes:

• brand- prefix for main colors no longer exists, so e.g. $brand-primary is just $primary.
• "default" is now added as a color to Bootstrap maps so that btn btn-default continues to work.
• All select fields that used to have form-control and form-select classes now only have form-select.
• sr-only is now visually-hidden
• sr-only-focusable is now visually-hidden-focusable
• control-label is now form-label
• pull-right is now float-end (flip no longer needed)
• pull-left is now float-start (flip no longer needed)
• Many renamings of variables in Bootstrap 5 have been applied to scss files throughout. Typical type of change is $something-border renamed to $something-border-color.
• Odd dotted button outline is no longer odd or dotted

Things to check during testing:

• Cookie consent dialog and preferences
• Forms and their layout (e.g. advanced search, feedback)
• Record tags
• Button colors
• Colors in general
• Badge (e.g. counts in facets and "Your Lists")
• Search box and virtual keyboard button
• Lightbox close button
• RTL languages

TODO:

• Add change log entry when this is merged.
• Resolve VUFIND-1743 when this is merged.

[EreMaijala]

@sturkel89 I hope you could check this set of changes. This is the final big change to eliminate legacy styles (I hope!). Sorry for it being so large, but thought it would be better to keep all these together because many of changes touch same areas in the UI.

[sturkel89]

I tested this PR in both themes and in the mobile emulator, comparing test and dev. (I only tested on Chrome.) I found a number of little quirks that should be pretty easy to fix.

---

Item record top menu: there's no down arrow in Export Record (both themes)

The down arrow is missing, but the functionality is still there; if you click the button, the three export options appear.

---

More button in top Suggested Topics area looks weird (both themes)

On dev, the More button is rounded with a faint, clean outline.

On test, the More button is squared off, short, and dark outlining is present whether the button is clicked or not. Both the More and Less buttons in this feature have the same appearance.

---

Sidebar facet listings look weird (both themes)

On test, in bootstrap5, there's a gap between the header field and the list of filters, and the More button with the arrow looks weird (similar to the More button in Suggested Topics).

In sandal5, the gap is present, but the More button looks okay.

---

Text Area boxes are three lines high on test but one line high on dev (both themes)

We think that this is an improvement and a reversion to how things used to be! So, this is more of a note than a request to change things.

Example: Comment box on Bootstrap5

Example: Create a List on mobile, Sandal5

(NB: there are two other tiny issues with this screen: inconsistent punctuation in the labels for the two boxes, and something is weird with spacing of the breadcrumbs. I'll keep track of those in a different document.)

---

Record tags: alignment/spacing is different between test and dev

In both themes, there's more horizontal padding inside tag buttons. I don't have a strong opinion on whether this is an improvement or not.

In Sandal5, the padding is the main difference in terms of tag appearance and behavior; wrapping behavior is pretty similar between test and dev.

In Bootstrap5, wrapping behavior is pretty different between test and dev.

Bootstrap5: in test, three short tags need a very wide browser to display all in one row. This is the minimal width for having all three on one line; any narrower, and they wrap to two rows.

In dev, this is the width that's needed to display them all in one row:

Here's the mobile view of the same three tags in bootstrap5:

[demiankatz]

Looks like the merge of #4238 has introduced some conflicts. Sorry about that!

[EreMaijala]

@demiankatz No problem, that was to be expected!

[EreMaijala]

@sturkel89 Thanks for the comments! All should be fixed now. Remarks:

• The one-line text areas were actually a bug. E.g. on the feedback form the HTML defined eight visible rows, but an invalid css rule overrode that.
• I dropped the ball with the More/less button. Should be better now, but intentionally not quite the same as before. This is because I took the liberty to unify them with toolbar buttons (record toolbar, bulk actions toolbar, cart lightbox toolbar) which were also tweaked a bit with slightly darker text and a subtle border to improve contrast. I did all this because I think the more/less buttons stood out a bit too much while the toolbar buttons almost blended into the background.