Merge branch '6.0/rights-editor-style'

bestpractical · Jan 14, 2025 · c5df490 · c5df490
2 parents 30beec1 + 47d2a62
commit c5df490
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 17 deletions.
diff --git a/share/html/Admin/Elements/EditRights b/share/html/Admin/Elements/EditRights
@@ -212,7 +212,7 @@ if ($anchor =~ /AddPrincipal/) {
   <div class="row mt-2">
     <div class="col-3">
       <div class="principal-tabs">
-        <ul class="nav nav-tabs flex-column nav-pills" role="tablist" aria-orientation="vertical">
+        <ul class="nav flex-column nav-pills" role="tablist" aria-orientation="vertical">
 <%perl>
 for my $category (@$Principals) {
     my ($name, $collection, $col, $loc) = @$category;
@@ -228,7 +228,7 @@ for my $category (@$Principals) {
         my $display = ref $col eq 'CODE' ? $col->($obj) : $obj->$col;
         my $id = "acl-" . $obj->PrincipalId;
 </%perl>
-          <li class="nav-item">
+          <li class="rt-rights-role nav-item mb-1">
             <a href="#<% $id %>" class="nav-link" id="<% "principal-tab-$id" %>" data-bs-toggle="tab" role="tab" aria-controls="<% $id %>" aria-selected="false">
               <% $loc ? loc($display) : $display %>
             </a>

diff --git a/share/static/css/elevator/nav.css b/share/static/css/elevator/nav.css
@@ -358,24 +358,12 @@
         border-bottom: 1px solid #515151;
     }
 
-    .nav-tabs .nav-link {
-        border: 1px solid transparent;
-        border-bottom-color: #515151;
-    }
-
+    .nav-tabs .nav-link:hover,
     .nav-tabs .nav-link.active {
-        border-color: #515151 #515151 transparent;
-    }
-
-    .nav-tabs .nav-link:hover:not(.active) {
         border-color: #515151;
     }
 
     .nav-pills .nav-link.active {
         background-color: #323D42 !important;
     }
-
-    .nav-pills .nav-link:hover:not(.active) {
-        text-decoration: underline;
-    }
 }
diff --git a/share/static/css/elevator/rights-editor.css b/share/static/css/elevator/rights-editor.css
@@ -41,9 +41,32 @@
 
 }
 
+.rights-editor .tab-aggregates-checked-rights:not(.active) {
+    background-color: var(--bs-secondary-bg);
+}
+
+/* Customize border color for principal tabs */
+.principal-tabs .rt-rights-role .nav-link {
+    border-color: transparent;
+    border-width: 1px;
+    border-style: solid;
+    transition: unset;
+}
 
 [data-bs-theme=light] {
-    .rights-editor .tab-aggregates-checked-rights {
-        background-color: #eee;
+    .principal-tabs .rt-rights-role .nav-link.active {
+        border-color: var(--bs-nav-pills-link-active-bg);
+    }
+    .principal-tabs .rt-rights-role .nav-link:hover:not(.active) {
+        border-color: #ddd;
+    }
+}
+
+[data-bs-theme=dark] {
+    .principal-tabs .rt-rights-role .nav-link.active {
+        border-color: #515151;
+    }
+    .principal-tabs .rt-rights-role .nav-link:hover:not(.active) {
+        border-color: #666;
     }
 }