7d9aa9d71602ff6856c02ee9b9d2bacf2ee3d2f4

Orange-OpenSource · Feb 13, 2023 · 73fbac4 · 73fbac4
1 parent f48e896
commit 73fbac4
Show file tree

Hide file tree

Showing 4 changed files with 82 additions and 17 deletions.
diff --git a/.bundlewatch.config.json b/.bundlewatch.config.json
@@ -26,7 +26,7 @@
     },
     {
       "path": "./dist/css/boosted.css",
-      "maxSize": "41.0 kB"
+      "maxSize": "41.25 kB"
     },
     {
       "path": "./dist/css/boosted.min.css",

diff --git a/scss/_nav.scss b/scss/_nav.scss
@@ -79,7 +79,6 @@
   .nav-link {
     padding: subtract(1rem, var(--#{$prefix}nav-tabs-border-width)) subtract(var(--#{$prefix}nav-tabs-link-padding-x), var(--#{$prefix}nav-tabs-border-width)); // Boosted mod
     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;
     border-width: var(--#{$prefix}nav-tabs-link-border-width); // Boosted mod
     @include border-top-radius(var(--#{$prefix}nav-tabs-border-radius));
@@ -116,19 +115,6 @@
   }
 }
 
-// Boosted mod
-.nav-tabs-light {
-  // scss-docs-start nav-tabs-light-css-vars
-  --#{$prefix}nav-tabs-border-width: #{calc($nav-tabs-border-width * .5)};
-  --#{$prefix}nav-tabs-border-color: #{$gray-500};
-  --#{$prefix}nav-tabs-link-hover-color: #{$accessible-orange};
-  --#{$prefix}nav-tabs-link-border-width: 0 0 calc(var(--#{$prefix}nav-tabs-border-width) * 4); // stylelint-disable-line function-disallowed-list
-  --#{$prefix}nav-tabs-link-hover-border-color: transparent;
-  --#{$prefix}nav-tabs-link-active-border-color: #{$accessible-orange};
-  // scss-docs-end nav-tabs-light-css-vars
-}
-// End mod
-
 //
 // Pills
 //
@@ -144,8 +130,6 @@
   .nav-link {
     padding-right: var(--#{$prefix}nav-pills-padding-x); // Boosted mod
     padding-left: var(--#{$prefix}nav-pills-padding-x); // Boosted mod
-    background: none;
-    border: 0;
     @include border-radius(var(--#{$prefix}nav-pills-border-radius));
 
     &:disabled {
@@ -168,6 +152,56 @@
   // End mod
 }
 
+//
+// Underline
+//
+
+// Boosted mod
+.nav-tabs-light {
+  // scss-docs-start nav-tabs-light-css-vars
+  --#{$prefix}nav-tabs-border-width: #{calc($nav-tabs-border-width * .5)};
+  --#{$prefix}nav-tabs-border-color: #{$gray-500};
+  --#{$prefix}nav-tabs-link-hover-color: #{$accessible-orange};
+  --#{$prefix}nav-tabs-link-border-width: 0 0 calc(var(--#{$prefix}nav-tabs-border-width) * 4); // stylelint-disable-line function-disallowed-list
+  --#{$prefix}nav-tabs-link-hover-border-color: transparent;
+  --#{$prefix}nav-tabs-link-active-border-color: #{$accessible-orange};
+  // scss-docs-end nav-tabs-light-css-vars
+}
+// End mod
+
+.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

diff --git a/scss/_variables.scss b/scss/_variables.scss
@@ -1346,6 +1346,10 @@ $nav-pills-padding-x:               $nav-tabs-link-padding-x !default; // Booste
 $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
 
 

diff --git a/site/content/docs/5.3/components/navs-tabs.md b/site/content/docs/5.3/components/navs-tabs.md
@@ -251,6 +251,27 @@ This variant should not be used because it is a button component in the Orange D
 </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.
@@ -420,6 +441,12 @@ On the `.tab-content` modifier class:
 
 {{< scss-docs name="tab-content-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" >}}