Merge pull request #2441 from alexandrevryghem/header-and-navbar-css-…

…fixes_contribute-7.6 Minor css variables fixes for header & navbar
DSpace · Oct 26, 2023 · be59255 · be59255
2 parents 1d7147e + 2ca2a38
commit be59255
Show file tree

Hide file tree

Showing 6 changed files with 21 additions and 2 deletions.
diff --git a/src/app/breadcrumbs/breadcrumbs.component.scss b/src/app/breadcrumbs/breadcrumbs.component.scss
@@ -5,8 +5,8 @@
 .breadcrumb {
   border-radius: 0;
   margin-top: calc(-1 * var(--ds-content-spacing));
-  padding-bottom: var(--ds-content-spacing / 3);
-  padding-top: var(--ds-content-spacing / 3);
+  padding-bottom: calc(var(--ds-content-spacing) / 3);
+  padding-top: calc(var(--ds-content-spacing) / 3);
   background-color: var(--ds-breadcrumb-bg);
 }
 

diff --git a/src/app/header/header.component.scss b/src/app/header/header.component.scss
@@ -1,3 +1,7 @@
+header {
+  background-color: var(--ds-header-bg);
+}
+
 .navbar-brand img {
   max-height: var(--ds-header-logo-height);
   max-width: 100%;

diff --git a/src/app/navbar/expandable-navbar-section/expandable-navbar-section.component.scss b/src/app/navbar/expandable-navbar-section/expandable-navbar-section.component.scss
@@ -6,14 +6,20 @@
 }
 
 .dropdown-menu {
+    background-color: var(--ds-expandable-navbar-bg);
     overflow: hidden;
     min-width: 100%;
     border-top-left-radius: 0;
     border-top-right-radius: 0;
     ::ng-deep a.nav-link {
+        color: var(--ds-expandable-navbar-link-color) !important;
         padding-right: var(--bs-spacer);
         padding-left: var(--bs-spacer);
         white-space: nowrap;
+
+        &:hover, &:focus {
+          color: var(--ds-expandable-navbar-link-color-hover) !important;
+        }
     }
 }
 

diff --git a/src/app/navbar/navbar.component.scss b/src/app/navbar/navbar.component.scss
@@ -1,4 +1,5 @@
 nav.navbar {
+    background-color: var(--ds-navbar-bg);
     border-bottom: 1px var(--ds-header-navbar-border-bottom-color) solid;
     align-items: baseline;
 }

diff --git a/src/styles/_custom_variables.scss b/src/styles/_custom_variables.scss
@@ -24,10 +24,14 @@
   --ds-header-logo-height-xs: 50px;
   --ds-header-icon-color: #{$link-color};
   --ds-header-icon-color-hover: #{$link-hover-color};
+  --ds-navbar-bg: var(--ds-header-bg);
   --ds-header-navbar-border-top-color: #{$white};
   --ds-header-navbar-border-bottom-color: #{$gray-400};
   --ds-navbar-link-color: #{$cyan};
   --ds-navbar-link-color-hover: #{darken($cyan, 15%)};
+  --ds-expandable-navbar-bg: var(--ds-navbar-bg);
+  --ds-expandable-navbar-link-color: var(--ds-navbar-link-color);
+  --ds-expandable-navbar-link-color-hover: var(--ds-navbar-link-color-hover);
 
   $admin-sidebar-bg: darken(#2B4E72, 17%);
   $admin-sidebar-active-bg: darken($admin-sidebar-bg, 3%);

diff --git a/src/themes/dspace/app/navbar/navbar.component.scss b/src/themes/dspace/app/navbar/navbar.component.scss
@@ -4,6 +4,10 @@ nav.navbar {
   align-items: baseline;
 }
 
+.navbar-nav {
+  background-color: var(--ds-navbar-bg);
+}
+
 /** Mobile menu styling **/
 @media screen and (max-width: map-get($grid-breakpoints, md)-0.02) {
   .navbar {