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.

Sign up for GitHub

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

Jump to bottom

Add .nav-underline modifier class #33126

Merged
merged 5 commits into from
Dec 29, 2022
Merged

Add .nav-underline modifier class #33126

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
1fc6a15
Add .nav-underline modifier class
mdo Feb 16, 2021
c227b8a
Tweak sizing and spacing, add underline on hover
mdo Mar 11, 2021
31ad2af
Rebuild with Sass and CSS variables
mdo Dec 29, 2022
9820460
Document CSS vars
mdo Dec 29, 2022
1346517
Bump bundlewatch
mdo Dec 29, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion .bundlewatch.config.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@
},
{
"path": "./dist/css/bootstrap.css",
"maxSize": "31.25 kB"
"maxSize": "31.5 kB"
},
{
"path": "./dist/css/bootstrap.min.css",
Expand Down
43 changes: 40 additions & 3 deletions scss/_nav.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,8 @@
font-weight: var(--#{$prefix}nav-link-font-weight);
color: var(--#{$prefix}nav-link-color);
text-decoration: if($link-decoration == none, null, none);
background: none;
border: 0;
@include transition($nav-link-transition);

&:hover,
Expand Down Expand Up @@ -63,7 +65,6 @@

.nav-link {
margin-bottom: calc(-1 * var(--#{$prefix}nav-tabs-border-width)); // stylelint-disable-line function-disallowed-list
background: none;
border: var(--#{$prefix}nav-tabs-border-width) solid transparent;
@include border-top-radius(var(--#{$prefix}nav-tabs-border-radius));

Expand Down Expand Up @@ -110,8 +111,6 @@
// scss-docs-end nav-pills-css-vars

.nav-link {
background: none;
border: 0;
@include border-radius(var(--#{$prefix}nav-pills-border-radius));

&:disabled {
Expand All @@ -129,6 +128,44 @@
}


//
// Underline
//

.nav-underline {
// scss-docs-start nav-underline-css-vars
--#{$prefix}nav-underline-gap: #{$nav-underline-gap};
--#{$prefix}nav-underline-border-width: #{$nav-underline-border-width};
--#{$prefix}nav-underline-link-active-color: #{$nav-underline-link-active-color};
// scss-docs-end nav-underline-css-vars

gap: var(--#{$prefix}nav-underline-gap);

// .nav-item + .nav-item,
// .nav-link + .nav-link {
// margin-left: $nav-link-padding-x;
// }

.nav-link {
padding-right: 0;
padding-left: 0;
border-bottom: var(--#{$prefix}nav-underline-border-width) solid transparent;

&:hover,
&:focus {
border-bottom-color: currentcolor;
}
}

.nav-link.active,
.show > .nav-link {
font-weight: $font-weight-bold;
color: var(--#{$prefix}nav-underline-link-active-color);
border-bottom-color: currentcolor;
}
}


//
// Justified variants
//
Expand Down
4 changes: 4 additions & 0 deletions scss/_variables.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1136,6 +1136,10 @@ $nav-tabs-link-active-border-color: var(--#{$prefix}border-color) var(--#{$prefi
$nav-pills-border-radius: $border-radius !default;
$nav-pills-link-active-color: $component-active-color !default;
$nav-pills-link-active-bg: $component-active-bg !default;

$nav-underline-gap: 1rem !default;
$nav-underline-border-width: .125rem !default;
$nav-underline-link-active-color: var(--#{$prefix}emphasis-color) !default;
// scss-docs-end nav-variables


Expand Down
27 changes: 27 additions & 0 deletions site/content/docs/5.3/components/navs-tabs.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -167,6 +167,27 @@ Take that same HTML, but use `.nav-pills` instead:
</ul>
{{< /example >}}

### Underline

Take that same HTML, but use `.nav-underline` instead:

{{< example >}}
<ul class="nav nav-underline">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
{{< /example >}}

### Fill and justify

Force your `.nav`'s contents to extend the full available width one of two modifier classes. To proportionately fill all available space with your `.nav-item`s, use `.nav-fill`. Notice that all horizontal space is occupied, but not every nav item has the same width.
Expand Down Expand Up @@ -324,6 +345,12 @@ On the `.nav-pills` modifier class:

{{< scss-docs name="nav-pills-css-vars" file="scss/_nav.scss" >}}

{{< added-in "5.3.0" >}}

On the `.nav-underline` modifier class:

{{< scss-docs name="nav-underline-css-vars" file="scss/_nav.scss" >}}

### Sass variables

{{< scss-docs name="nav-variables" file="scss/_variables.scss" >}}
Expand Down