feat: add nav-link-underline

Signed-off-by: Jakob Steiner <[email protected]>
glasskube · Feb 29, 2024 · 1253463 · 1253463
1 parent 13f58a7
commit 1253463
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 14 deletions.
diff --git a/examples/index.html b/examples/index.html
@@ -568,19 +568,20 @@ <h6>Heading 6</h4>
 
     <div class="b-example-divider"></div>
 
-    <nav class="py-2 bg-body-tertiary border-bottom">
+    <nav class="bg-body-tertiary border-bottom">
       <div class="container d-flex flex-wrap">
         <ul class="nav me-auto">
-          <li class="nav-item"><a href="#" class="nav-link link-body-emphasis px-2 active" aria-current="page">Home</a>
+          <li class="nav-item"><a href="#" class="nav-link nav-link-underline link-body-emphasis p-2 active"
+              aria-current="page">Home</a>
           </li>
-          <li class="nav-item"><a href="#" class="nav-link link-body-emphasis px-2">Features</a></li>
-          <li class="nav-item"><a href="#" class="nav-link link-body-emphasis px-2">Pricing</a></li>
-          <li class="nav-item"><a href="#" class="nav-link link-body-emphasis px-2">FAQs</a></li>
-          <li class="nav-item"><a href="#" class="nav-link link-body-emphasis px-2">About</a></li>
+          <li class="nav-item"><a href="#" class="nav-link nav-link-underline link-body-emphasis p-2">Features</a></li>
+          <li class="nav-item"><a href="#" class="nav-link nav-link-underline link-body-emphasis p-2">Pricing</a></li>
+          <li class="nav-item"><a href="#" class="nav-link nav-link-underline link-body-emphasis p-2">FAQs</a></li>
+          <li class="nav-item"><a href="#" class="nav-link nav-link-underline link-body-emphasis p-2">About</a></li>
         </ul>
         <ul class="nav">
-          <li class="nav-item"><a href="#" class="nav-link link-body-emphasis px-2">Login</a></li>
-          <li class="nav-item"><a href="#" class="nav-link link-body-emphasis px-2">Sign up</a></li>
+          <li class="nav-item"><a href="#" class="nav-link nav-link-underline link-body-emphasis p-2">Login</a></li>
+          <li class="nav-item"><a href="#" class="nav-link nav-link-underline link-body-emphasis p-2">Sign up</a></li>
         </ul>
       </div>
     </nav>
@@ -601,7 +602,7 @@ <h6>Heading 6</h4>
     <div class="b-example-divider"></div>
 
     <header>
-      <div class="px-3 py-2 text-bg-dark border-bottom">
+      <div class="px-3 text-bg-dark border-bottom">
         <div class="container">
           <div class="d-flex flex-wrap align-items-center justify-content-center justify-content-lg-start">
             <a href="/" class="d-flex align-items-center my-2 my-lg-0 me-lg-auto text-white text-decoration-none">
@@ -612,39 +613,39 @@ <h6>Heading 6</h4>
 
             <ul class="nav col-12 col-lg-auto my-2 justify-content-center my-md-0 text-small">
               <li>
-                <a href="#" class="nav-link text-secondary">
+                <a href="#" class="nav-link nav-link-underline link-body-emphasis active">
                   <svg class="bi d-block mx-auto mb-1" width="24" height="24">
                     <use xlink:href="#home" />
                   </svg>
                   Home
                 </a>
               </li>
               <li>
-                <a href="#" class="nav-link text-white">
+                <a href="#" class="nav-link nav-link-underline link-body-emphasis">
                   <svg class="bi d-block mx-auto mb-1" width="24" height="24">
                     <use xlink:href="#speedometer2" />
                   </svg>
                   Dashboard
                 </a>
               </li>
               <li>
-                <a href="#" class="nav-link text-white">
+                <a href="#" class="nav-link nav-link-underline link-body-emphasis">
                   <svg class="bi d-block mx-auto mb-1" width="24" height="24">
                     <use xlink:href="#table" />
                   </svg>
                   Orders
                 </a>
               </li>
               <li>
-                <a href="#" class="nav-link text-white">
+                <a href="#" class="nav-link nav-link-underline link-body-emphasis">
                   <svg class="bi d-block mx-auto mb-1" width="24" height="24">
                     <use xlink:href="#grid" />
                   </svg>
                   Products
                 </a>
               </li>
               <li>
-                <a href="#" class="nav-link text-white">
+                <a href="#" class="nav-link nav-link-underline link-body-emphasis">
                   <svg class="bi d-block mx-auto mb-1" width="24" height="24">
                     <use xlink:href="#people-circle" />
                   </svg>

diff --git a/index.scss b/index.scss
@@ -67,6 +67,7 @@ $theme-colors: map-merge($theme-colors, $custom-colors);
 @import "scss/components/cta";
 @import "scss/components/forms";
 @import "scss/components/list";
+@import "scss/components/nav";
 @import "scss/components/resources";
 @import "scss/components/scroll-container";
 @import "scss/components/utilities";

diff --git a/scss/components/_nav.scss b/scss/components/_nav.scss
@@ -0,0 +1,5 @@
+.nav-link-underline.active {
+  @extend .border-bottom;
+  @extend .border-primary;
+  @extend .border-4;
+}