From f6649e1c3861012d388ec4d7bf46a54e84fb9962 Mon Sep 17 00:00:00 2001 From: Alexandre Vryghem Date: Wed, 16 Aug 2023 15:15:51 +0200 Subject: [PATCH 1/4] Added support for changing the color of the navbar --- .../expandable-navbar-section.component.scss | 1 + src/app/navbar/navbar.component.scss | 1 + src/styles/_custom_variables.scss | 1 + src/themes/dspace/app/navbar/navbar.component.scss | 4 ++++ 4 files changed, 7 insertions(+) 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 index 65de77b6007..1bc80d32c57 100644 --- 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,6 +6,7 @@ } .dropdown-menu { + background-color: var(--ds-navbar-bg); overflow: hidden; min-width: 100%; border-top-left-radius: 0; diff --git a/src/app/navbar/navbar.component.scss b/src/app/navbar/navbar.component.scss index 441ee82c968..9dc530607cf 100644 --- 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 index ddf490c7a7a..4abe91c368c 100644 --- a/src/styles/_custom_variables.scss +++ b/src/styles/_custom_variables.scss @@ -24,6 +24,7 @@ --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}; diff --git a/src/themes/dspace/app/navbar/navbar.component.scss b/src/themes/dspace/app/navbar/navbar.component.scss index d3aea9f0780..06cda777d03 100644 --- 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 { From 14b1ce5e50f819e1f7b555f205cef8c9b7aee6d8 Mon Sep 17 00:00:00 2001 From: Alexandre Vryghem Date: Wed, 16 Aug 2023 15:16:17 +0200 Subject: [PATCH 2/4] Fixed header bg color not being set in default (no) theme --- src/app/header/header.component.scss | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/app/header/header.component.scss b/src/app/header/header.component.scss index cca3ed2abb0..fcaedc66e08 100644 --- 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%; From 6c48238fa2d42d3b278741b23e8bd123237e16a1 Mon Sep 17 00:00:00 2001 From: Alexandre Vryghem Date: Thu, 17 Aug 2023 14:03:28 +0200 Subject: [PATCH 3/4] Fixed breadcrumb padding using incorrect syntax --- src/app/breadcrumbs/breadcrumbs.component.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/app/breadcrumbs/breadcrumbs.component.scss b/src/app/breadcrumbs/breadcrumbs.component.scss index a4d83b82ea7..52634f2a5b6 100644 --- 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); } From 2ca2a3881f701b7668258c8607e1180ebfeb9828 Mon Sep 17 00:00:00 2001 From: Alexandre Vryghem Date: Fri, 29 Sep 2023 21:40:29 +0200 Subject: [PATCH 4/4] Added new variables for the expandable navbar section --- .../expandable-navbar-section.component.scss | 7 ++++++- src/styles/_custom_variables.scss | 3 +++ 2 files changed, 9 insertions(+), 1 deletion(-) 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 index 1bc80d32c57..28db981f115 100644 --- 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,15 +6,20 @@ } .dropdown-menu { - background-color: var(--ds-navbar-bg); + 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/styles/_custom_variables.scss b/src/styles/_custom_variables.scss index 4abe91c368c..778ef6e9e3a 100644 --- a/src/styles/_custom_variables.scss +++ b/src/styles/_custom_variables.scss @@ -29,6 +29,9 @@ --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%);