twbs / bootstrap / 23029326908

94%

main: 96%

push

github

Update nav link & pill items height (#42146)

* Update nav link & pill items height

Currently, `link` and `nav-pills` items height sit at `36px` (because they don't have any borders), while `tab`, and `underline` sit at `38px`, which perfectly matches the height of  `input` and `button` components.

This PR adds an invisible border for the `link` and `nav-pills` items, so that all 4 `nav` variants share the exact same height, regardless of which is used, which makes it suitable to be used with other components, such as `input` or `buttons` for example, as described in this discussion: https://github.com/orgs/twbs/discussions/42145 without having discrepancy when it comes to elements height.

* Update scss/_nav.scss

Co-authored-by: Mark Otto <markdotto@gmail.com>

* Shortened the code for borders & pill active states

Shortened the code for borders by using `border` attribute.

Also applied the correct background for pill shaped items.

* Removed border from nav links in DocsSidebar

Removed the invisible border so that the sidebar remains as condensed as it was before.

---------

Co-authored-by: Mark Otto <markdotto@gmail.com>

903 of 1006 branches covered (89.76%)

Branch coverage included in aggregate %.

2655 of 2780 relevant lines covered (95.5%)

274.66 hits per line