Clean up sidebar and navigation CSS

TrestleAdmin · Jul 22, 2024 · ff8646b · ff8646b
1 parent acf47b6
commit ff8646b
Show file tree

Hide file tree

Showing 3 changed files with 46 additions and 47 deletions.
diff --git a/app/assets/bundle/trestle/admin.css b/app/assets/bundle/trestle/admin.css
diff --git a/frontend/css/layout/_navigation.scss b/frontend/css/layout/_navigation.scss
@@ -1,24 +1,26 @@
 .app-nav {
   flex: 1;
-  padding: 10px 0;
+  padding: 0.75rem 0;
 
   &, a {
     color: $sidebar-link-color;
   }
 
   ul {
-    margin: 10px 0;
+    margin: 0.75rem 0;
     padding: 0;
     list-style: none;
   }
 
   a {
-    display: block;
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
 
     font-weight: normal;
     font-size: 0.9rem;
 
-    padding: 12px 18px;
+    padding: 0.875rem 1.25rem;
 
     &:hover, &:focus {
       color: $sidebar-link-color;
@@ -31,12 +33,20 @@
     }
   }
 
+  .active a {
+    border-left: $sidebar-active-border solid var(--primary);
+    padding-left: calc(1.25rem - #{$sidebar-active-border});
+
+    background: $sidebar-active-bg;
+    color: white;
+  }
+
   .nav-icon {
-    display: inline-block;
-    text-align: center;
-    width: 18px;
-    margin-right: 8px;
-    vertical-align: 0;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 1.375rem;
+    height: 1.375rem;
   }
 
   .nav-header a {
@@ -48,38 +58,30 @@
     line-height: 1;
 
     font-size: 11px;
-    padding: 8px 20px;
+    padding: 0.5rem 1.25rem;
+
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
 
     &::after {
       @include icon-fa($fa-var-caret-down);
-
-      float: right;
-      margin-top: 2px;
-
       opacity: 0.75;
     }
 
-    &:hover, &:focus {
+    &:hover,
+    &:focus {
       background: none;
 
-      &::before, &::after {
-        opacity: 1 !important;
+      &::before,
+      &::after {
+        opacity: 1;
       }
     }
   }
 
-  .active a {
-    border-left: $sidebar-active-border solid var(--primary);
-    padding-left: 18px - $sidebar-active-border;
-
-    background: $sidebar-active-bg;
-    color: white;
-  }
-
   .badge {
-    float: right;
-    position: relative;
-    top: 1px;
+    margin-left: auto;
   }
 
   .collapsed {
@@ -98,17 +100,15 @@
 }
 
 @mixin collapsed-nav-header {
-  height: 0;
-  padding: 13px 15px 14px;
   text-indent: -99999px;
 
   &::after {
     display: none;
 
     position: absolute;
-    top: 4px;
+    top: 50%;
     left: 50%;
-    margin-left: -3px;
+    translate: -50% -5px;
 
     text-indent: 0;
   }
@@ -117,10 +117,10 @@
     content: "";
 
     position: absolute;
-    left: 15px;
-    right: 15px;
     top: 50%;
-    margin-top: -4px;
+    left: 1rem;
+    right: 1rem;
+    margin-top: -2px;
 
     border-bottom: 1px solid $sidebar-active-bg;
     opacity: 0.75;
@@ -151,8 +151,6 @@
   .sidebar-expanded {
     .app-nav {
       .nav-header a {
-        height: auto;
-        padding: 8px 20px;
         text-indent: 0;
 
         &::before {
@@ -166,8 +164,8 @@
         }
       }
 
-      .nav-label  { display: inline; }
-      .badge  { display: block; }
+      .nav-label { display: inline; }
+      .badge { display: block; }
     }
 
     .nav-tooltip {

diff --git a/frontend/css/layout/_sidebar.scss b/frontend/css/layout/_sidebar.scss
@@ -63,7 +63,7 @@
   display: flex;
   align-items: center;
 
-  padding: 10px 15px;
+  padding: 0.625rem 1rem;
 
   font-size: 1.4rem;
   font-weight: 500;
@@ -79,7 +79,7 @@
     max-height: 100%;
 
     & + .title-large {
-      margin-left: 10px;
+      margin-left: 0.75rem;
     }
   }
 
@@ -120,7 +120,8 @@
   border: none;
 
   font-size: 1.4rem;
-  padding: 10px 20px;
+  width: var(--sidebar-width-collapsed);
+  padding: 0.625rem;
 
   cursor: pointer;
 
@@ -169,7 +170,7 @@
 
   .app-sidebar-title {
     justify-content: center;
-    padding: 10px 5px;
+    padding: 0.625rem 0.325rem;
 
     // Match right margin with navbar toggler width:
     // (margin + border + font-size * icon-width + padding)
@@ -190,7 +191,7 @@
     }
 
     .app-sidebar-title {
-      padding: 10px 5px;
+      padding: 0.625rem 0.325rem;
       justify-content: center;
 
       img {
@@ -218,7 +219,7 @@
       }
 
       .app-sidebar-title {
-        padding: 10px 15px;
+        padding: 0.625rem 1rem;
         justify-content: flex-start;
 
         img {
@@ -251,7 +252,7 @@
       }
 
       .app-sidebar-title {
-        padding: 10px 5px;
+        padding: 0.625rem 0.325rem;
         justify-content: center;
 
         img {