Skip to content
Snippets Groups Projects
Commit 4d528889 authored by Ivica Puljic's avatar Ivica Puljic
Browse files

Issue #3488568 by pivica: Sidebar offcanvas navigation links have wrong color in some edge cases

parent 5f3fa3e2
No related branches found
No related tags found
1 merge request!11Issue #3488568 by pivica: Sidebar offcanvas navigation links have wrong color in some edge cases
......@@ -95,21 +95,26 @@ $navbar-second-level-height: #{$navbar-2nd-link-padding-x + $navbar-2nd-link-pad
border-radius: 0;
border-width: 0;
// We are setting color CSS attribute for this nav-links because
// in some rare cases order of navigation.css and dropdown.css files
// can be in that case that dropdown.css will be loaded after
// navigation.css and then dropdown link CSS rules will be stronger
// and this nav-links will take color of dropdown - something that
// we do not want.
.nav-link {
padding-top: $navbar-2nd-link-padding-y;
padding-bottom: $navbar-2nd-link-padding-y;
color: $header-link-color;
color: var(--#{$prefix}nav-link-color);
font-size: $navbar-2nd-font-size;
@include hover-focus() {
background-color: $header-link-hover-bg;
color: $header-link-hover-color;
color: var(--#{$prefix}nav-link-hover-color);
}
&.active, &:active {
background-color: $header-link-active-bg;
// Override BS dropdown active color.
color: $header-link-active-color;
color: var(--bsb-nav-link-active-color);
}
}
......
......@@ -193,12 +193,9 @@ body.toolbar-fixed .toolbar-oriented .toolbar-bar {
}
}
// Not sure why we have this rules any more, they are added long time ago.
// One assumptions they are here when dropdown is in sidebar so we remove
// border and bg color to make this links looks more like the rest of
// sidebar links, but this again does not makes a lot of sense.
// @TODO - condsider to remove this.
.navmenu.in {
// For sidebar main navigation we want for all links the same design so we
// need to reset some rules that can come from dropdown menu.
.navmenu {
.dropdown-menu {
margin-top: 0;
padding: $navbar-small-dropdown-menu-padding;
......@@ -206,12 +203,22 @@ body.toolbar-fixed .toolbar-oriented .toolbar-bar {
border: none;
}
.dropdown-item {
// For explanation why we are using .is-active here for now and not
// just .active take a look at menu-navbar.html.twig.
// We are setting color CSS attribute for this nav-links because
// in some rare cases order of navigation.css and dropdown.css files
// can be in that case that dropdown.css will be loaded after
// navigation.css and then dropdown link CSS rules will be stronger
// and this nav-links will take color of dropdown - something that
// we do not want.
.nav-link {
color: var(--#{$prefix}nav-link-color);
@include hover-focus() {
color: var(--#{$prefix}nav-link-hover-color);
}
&.active, &:active, &.is-active {
background: $navbar-small-dropdown-menu-active-bg;
color: $header-link-active-color;
color: var(--bsb-nav-link-active-color);
}
}
}
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment