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

Minor css variables fixes for header & navbar
This commit is contained in:
Tim Donohue
2023-10-26 14:02:52 -05:00
committed by GitHub
6 changed files with 21 additions and 2 deletions

View File

@@ -5,8 +5,8 @@
.breadcrumb { .breadcrumb {
border-radius: 0; border-radius: 0;
margin-top: calc(-1 * var(--ds-content-spacing)); margin-top: calc(-1 * var(--ds-content-spacing));
padding-bottom: var(--ds-content-spacing / 3); padding-bottom: calc(var(--ds-content-spacing) / 3);
padding-top: var(--ds-content-spacing / 3); padding-top: calc(var(--ds-content-spacing) / 3);
background-color: var(--ds-breadcrumb-bg); background-color: var(--ds-breadcrumb-bg);
} }

View File

@@ -1,3 +1,7 @@
header {
background-color: var(--ds-header-bg);
}
.navbar-brand img { .navbar-brand img {
max-height: var(--ds-header-logo-height); max-height: var(--ds-header-logo-height);
max-width: 100%; max-width: 100%;

View File

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

View File

@@ -1,4 +1,5 @@
nav.navbar { nav.navbar {
background-color: var(--ds-navbar-bg);
border-bottom: 1px var(--ds-header-navbar-border-bottom-color) solid; border-bottom: 1px var(--ds-header-navbar-border-bottom-color) solid;
align-items: baseline; align-items: baseline;
} }

View File

@@ -24,10 +24,14 @@
--ds-header-logo-height-xs: 50px; --ds-header-logo-height-xs: 50px;
--ds-header-icon-color: #{$link-color}; --ds-header-icon-color: #{$link-color};
--ds-header-icon-color-hover: #{$link-hover-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-top-color: #{$white};
--ds-header-navbar-border-bottom-color: #{$gray-400}; --ds-header-navbar-border-bottom-color: #{$gray-400};
--ds-navbar-link-color: #{$cyan}; --ds-navbar-link-color: #{$cyan};
--ds-navbar-link-color-hover: #{darken($cyan, 15%)}; --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-bg: darken(#2B4E72, 17%);
$admin-sidebar-active-bg: darken($admin-sidebar-bg, 3%); $admin-sidebar-active-bg: darken($admin-sidebar-bg, 3%);

View File

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