Work in progress

RaphaelGauthier · Feb 8, 2024 · 1d7a985 · 1d7a985
1 parent 0818f07
commit 1d7a985
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 16 deletions.
diff --git a/...src/main/style/rudder/rudder-template.css → ...rc/main/style/rudder/rudder-template.scss b/...src/main/style/rudder/rudder-template.css → ...rc/main/style/rudder/rudder-template.scss
@@ -34,6 +34,10 @@
 *************************************************************************************
 */
 
+// --- MODULES
+
+@use 'rudder-variables' as *;
+
 /* === RESET === */
 ul {
   list-style-type: none;
@@ -573,19 +577,30 @@ ul {
 .rudder-template .main-navbar ul{
   padding: 0 15px;
   margin-bottom: 0;
+  position: relative;
+
+  &.nav-underline:before {
+    content: "";
+    width: 100%;
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    height: 2px;
+    background-color: $rudder-border-color-default;
+    z-index: 0;
+  }
 }
+
 .rudder-template .sidebar-navbar ul{
   margin: 10px -15px 0px -15px;
   padding: 0 15px;
 }
-.rudder-template .sidebar-navbar ul > li,
-.rudder-template .main-navbar ul > li{
+.rudder-template .sidebar-navbar ul > li{
   margin-right: 15px;
   padding: 0 0 6px 0;
 }
 
-.rudder-template .sidebar-navbar ul > li > a,
-.rudder-template .main-navbar ul > li > a{
+.rudder-template .sidebar-navbar ul > li > a{
   padding: 0;
   background-color: transparent !important;
   border: none !important;
@@ -602,8 +617,8 @@ ul {
 .rudder-template .main-navbar ul > li > .fa-times:hover {
   opacity: 1;
 }
-.rudder-template .sidebar-navbar ul > li > a .badge,
-.rudder-template .main-navbar ul > li > a .badge,
+.rudder-template .sidebar-navbar ul > li > .badge,
+.rudder-template .main-navbar ul > li > .badge,
 .rudder-template .template-main .main-details .badge,
 .rudder-template .badge{
   background-color: #b1bbcb;

diff --git a/...er/rudder-web/src/main/webapp/templates-hidden/components/ComponentDirectiveEditForm.html b/...er/rudder-web/src/main/webapp/templates-hidden/components/ComponentDirectiveEditForm.html
@@ -54,7 +54,7 @@
         downloadsUrl: apiPath,
         dir: "/",
         hasWriteRights : hasWriteRights,
-        initRun : true;
+        initRun : true
       }
     });
 
@@ -83,18 +83,18 @@ <h1>
       </div>
     </div>
     <div class="main-navbar">
-      <ul class="ui-tabs-nav" role="tablist">
-        <li role="presentation" class="ui-tabs-tab ui-tab active" id="infoNav">
-          <a class="nav-link active" data-bs-toggle="tab" data-bs-target="#directiveInfo" type="button" role="tab">Information</a>
+      <ul class="nav nav-underline">
+        <li role="presentation" class="nav-item" id="infoNav">
+          <button class="nav-link active" data-bs-toggle="tab" data-bs-target="#directiveInfo" type="button" role="tab" aria-controls="directiveInfo" aria-selected="true">Information</button>
         </li>
-        <li role="presentation" class="ui-tabs-tab ui-tab" id="paramNav">
-          <a data-bs-toggle="tab" data-bs-target="#parametersTab" type="button" role="tab">Parameters</a>
+        <li class="nav-item" id="paramNav">
+          <button class="nav-link" data-bs-toggle="tab" data-bs-target="#parametersTab" type="button" role="tab" aria-controls="parametersTab" aria-selected="false">Parameters</button>
         </li>
-        <li role="presentation" class="ui-tabs-tab ui-tab" id="rulesNav">
-          <a data-bs-toggle="tab" data-bs-target="#rulesTab" type="button" role="tab">Target rules</a>
+        <li role="presentation" class="nav-item" id="rulesNav">
+          <button class="nav-link" data-bs-toggle="tab" data-bs-target="#rulesTab" type="button" role="tab" aria-controls="rulesTab" aria-selected="false">Target rules</button>
         </li>
-        <li role="presentation" class="ui-tabs-tab ui-tab" id="complianceNav">
-          <a id="complianceLinkTab" data-bs-toggle="tab" data-bs-target="#complianceTab" type="button" role="tab">Compliance</a>
+        <li role="presentation" class="nav-item" id="complianceNav">
+          <button class="nav-link" data-bs-toggle="tab" data-bs-target="#complianceTab" type="button" role="tab" aria-controls="complianceTab" aria-selected="false">Compliance</button>
         </li>
       </ul>
     </div>