diff options
| author | Mark Otto <markdotto@gmail.com> | 2021-02-17 02:17:46 +0300 |
|---|---|---|
| committer | Mark Otto <markdotto@gmail.com> | 2021-03-11 07:26:13 +0300 |
| commit | 18742df2775e87e848ecf04e976cc7659534a0f7 (patch) | |
| tree | c628b3e0168cc1b36a46446319b3569e4bb5f908 | |
| parent | 88cbe443b86e60a16b9c8430c9b4d385d3018a63 (diff) | |
Add .nav-underline modifier class
| -rw-r--r-- | scss/_nav.scss | 23 | ||||
| -rw-r--r-- | site/content/docs/5.0/components/navs-tabs.md | 21 |
2 files changed, 41 insertions, 3 deletions
diff --git a/scss/_nav.scss b/scss/_nav.scss index ffb27d869c..9508c1af32 100644 --- a/scss/_nav.scss +++ b/scss/_nav.scss @@ -18,6 +18,8 @@ font-weight: $nav-link-font-weight; color: $nav-link-color; text-decoration: if($link-decoration == none, null, none); + background: none; + border: 0; @include transition($nav-link-transition); &:hover, @@ -43,7 +45,6 @@ .nav-link { margin-bottom: -$nav-tabs-border-width; - background: none; border: $nav-tabs-border-width solid transparent; @include border-top-radius($nav-tabs-border-radius); @@ -83,8 +84,6 @@ .nav-pills { .nav-link { - background: none; - border: 0; @include border-radius($nav-pills-border-radius); } @@ -97,6 +96,24 @@ // +// Underline +// + +.nav-underline { + .nav-link { + border-bottom: .125rem solid transparent; + } + + .nav-link.active, + .show > .nav-link { + font-weight: $font-weight-bold; + color: $dark; + border-bottom-color: $dark; + } +} + + +// // Justified variants // diff --git a/site/content/docs/5.0/components/navs-tabs.md b/site/content/docs/5.0/components/navs-tabs.md index 522dfd1cef..9dec035b31 100644 --- a/site/content/docs/5.0/components/navs-tabs.md +++ b/site/content/docs/5.0/components/navs-tabs.md @@ -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. |