nav-underline

src-ui/src/app/components/manage/document-attributes/document-attributes.component.html

@@ -62,17 +62,17 @@
   }
 </pngx-page-header>
 
-<ul ngbNav #nav="ngbNav" (navChange)="onNavChange($event)" [(activeId)]="activeNavID" class="nav-tabs">
+<ul ngbNav #nav="ngbNav" (navChange)="onNavChange($event)" [(activeId)]="activeNavID" class="nav-underline">
   @for (section of visibleSections; track section.id) {
     <li [ngbNavItem]="section.id">
-      <a ngbNavLink>
+      <a ngbNavLink >
         <i-bs class="me-2" [name]="section.icon"></i-bs>{{ section.label }}
       </a>
     </li>
   }
 </ul>
 
-<div class="border-start border-end border-bottom p-3 mb-3 shadow-sm">
+<div class="my-3 shadow-sm">
   <ng-container
     [ngComponentOutlet]="activeSection?.component"
     #activeOutlet="ngComponentOutlet"

src-ui/src/app/components/manage/document-attributes/document-attributes.component.scss

@@ -0,0 +1,34 @@
+// .attributes-tabs {
+//   border-bottom-color: rgba(var(--bs-body-color-rgb), 0.12);
+// }
+
+// .attributes-tabs .nav-link {
+//   position: relative;
+//   padding-bottom: 0.45rem;
+//   color: rgba(var(--bs-body-color-rgb));
+//   transition: color 140ms ease;
+// }
+
+// .attributes-tabs .nav-link::after {
+//   content: '';
+//   position: absolute;
+//   left: 0.2rem;
+//   right: 0.2rem;
+//   bottom: 0;
+//   height: var(--bs-nav-underline-border-width);
+//   border-radius: 1px;
+//   background: transparent;
+//   transition: background-color 140ms ease;
+// }
+
+// .attributes-tabs .nav-link:hover {
+//   color: rgba(var(--bs-body-color-rgb), 0.95);
+// }
+
+// .attributes-tabs .nav-link.active {
+//   color: var(--bs-primary);
+// }
+
+// .attributes-tabs .nav-link.active::after {
+//   background: var(--bs-primary);
+// }