feat: remove gaps between sidebar items

adil192 · Jan 29, 2024 · a78783f · a78783f
1 parent 1b82ddd
commit a78783f
Show file tree

Hide file tree

Showing 2 changed files with 69 additions and 2 deletions.
diff --git a/main.css b/main.css
@@ -123,7 +123,6 @@
   .button-anchor,
   .select-wrapper button.button-anchor {
     color: #4f2f62;
-    text-decoration: underline;
     transition: color 0.1s ease-out;
   }
   a:hover, a:focus,
@@ -183,6 +182,39 @@
     background-color: #8142a6 !important;
     color: #fff !important;
   }
+  .base #side-menu .off-canvas-list .base-navigation-button:first-child,
+  .base .color-selection-preview-mode .off-canvas-list .base-navigation-button:first-child {
+    padding-top: 0 !important;
+  }
+  .base #side-menu .off-canvas-list .base-navigation-button .base-navigation-button-content,
+  .base #side-menu .off-canvas-list .base-navigation-button .integration-navigation-button-content-v2 {
+    text-decoration: none !important;
+    border-top-left-radius: 0.5rem;
+    border-bottom-left-radius: 0.5rem;
+    transition: background-color 0.1s ease-out;
+  }
+  .base #side-menu .off-canvas-list .base-navigation-button .base-navigation-button-content:hover, .base #side-menu .off-canvas-list .base-navigation-button .base-navigation-button-content:focus,
+  .base #side-menu .off-canvas-list .base-navigation-button .integration-navigation-button-content-v2:hover,
+  .base #side-menu .off-canvas-list .base-navigation-button .integration-navigation-button-content-v2:focus {
+    background-color: #4f2f62;
+    color: #fff;
+  }
+  .base #side-menu .off-canvas-list .base-navigation-button .base-navigation-button-content:focus,
+  .base #side-menu .off-canvas-list .base-navigation-button .integration-navigation-button-content-v2:focus {
+    box-shadow: inset 0 0 0 0.1rem #8142a6 !important;
+  }
+  .base #side-menu .off-canvas-list .base-navigation-button.active .theme-border-left-active,
+  .base .color-selection-preview-mode .off-canvas-list .base-navigation-button.active .theme-border-left-active {
+    border-left: none !important;
+    background-color: #63367d !important;
+    color: #fff !important;
+  }
+  .base #side-menu .off-canvas-list .base-navigation-button.active .theme-border-left-active:hover, .base #side-menu .off-canvas-list .base-navigation-button.active .theme-border-left-active:focus,
+  .base .color-selection-preview-mode .off-canvas-list .base-navigation-button.active .theme-border-left-active:hover,
+  .base .color-selection-preview-mode .off-canvas-list .base-navigation-button.active .theme-border-left-active:focus {
+    background-color: #8142a6 !important;
+    color: #fff !important;
+  }
   .course-columns-header .square-toggle,
   .course-columns-header .square-toggle > *,
   .course-columns-header input,

diff --git a/styles/_online.manchester.ac.uk_ultra.scss b/styles/_online.manchester.ac.uk_ultra.scss
@@ -30,7 +30,6 @@ button.anchor,
 .button-anchor,
 .select-wrapper button.button-anchor {
     color: color.mix($primary, $on-surface, 50%);
-    text-decoration: underline;
     transition: color 0.1s ease-out;
 
     &:hover, &:focus {
@@ -93,6 +92,42 @@ button.anchor,
     color: $on-primary !important;
 }
 
+.base #side-menu .off-canvas-list .base-navigation-button:first-child,
+.base .color-selection-preview-mode .off-canvas-list .base-navigation-button:first-child {
+    padding-top: 0 !important;
+}
+
+.base #side-menu .off-canvas-list .base-navigation-button .base-navigation-button-content,
+.base #side-menu .off-canvas-list .base-navigation-button .integration-navigation-button-content-v2 {
+    text-decoration: none !important;
+    border-top-left-radius: 0.5rem;
+    border-bottom-left-radius: 0.5rem;
+    transition: background-color 0.1s ease-out;
+
+    &:hover,
+    &:focus {
+        background-color: mix($primary, $on-surface, 50%);
+        color: $on-primary;
+    }
+
+    &:focus {
+        box-shadow: inset 0 0 0 0.1rem $primary !important;
+    }
+}
+
+.base #side-menu .off-canvas-list .base-navigation-button.active .theme-border-left-active,
+.base .color-selection-preview-mode .off-canvas-list .base-navigation-button.active .theme-border-left-active {
+    border-left: none !important;
+    background-color: mix($primary, $on-surface, 70%) !important;
+    color: $on-primary !important;
+
+    &:hover,
+    &:focus {
+        background-color: mix($primary, $on-surface, 100%) !important;
+        color: $on-primary !important;
+    }
+}
+
 .course-columns-header {
     .square-toggle,
     .square-toggle > *,