#6372: Improve sidebar styles

This commit is contained in:
checktheroads 2021-05-25 17:57:37 -07:00
parent a43cdcbb2e
commit 595770b293
7 changed files with 22 additions and 17 deletions

Binary file not shown.

File diff suppressed because one or more lines are too long

Binary file not shown.

File diff suppressed because one or more lines are too long

View File

@ -355,23 +355,29 @@ div.content-container {
bottom: 0;
left: 0;
z-index: 100; /* Behind the navbar */
box-shadow: inset -1px 0 0 rgba(0, 0, 0, 0.1);
border-right: 1px solid $border-color;
background-color: var(--nbx-sidebar-bg);
@media (max-width: map.get($grid-breakpoints, 'md')) {
top: 8.125rem;
}
div.accordion-item > a.accordion-button.nav-link {
&:hover {
// color: $body-color;
// background-color: var(--nbx-sidebar-link-hover-bg);
color: $accordion-button-active-color;
background-color: $accordion-button-active-bg;
div.accordion-item {
div.accordion-collapse {
&.collapse.show,
&.collapsing {
background-color: $accordion-body-active-bg;
}
}
&:focus {
border-color: unset;
box-shadow: unset;
& > a.accordion-button.nav-link {
&:hover {
color: $accordion-button-active-color;
background-color: $accordion-button-active-bg;
}
&:focus {
border-color: unset;
box-shadow: unset;
}
}
}
@ -381,12 +387,9 @@ div.content-container {
.nav-item {
.nav-link {
padding: 0.25rem 0.6rem;
// font-size: $font-size-base;
font-size: $font-size-sm;
border-radius: $border-radius;
&:hover {
// color: $body-color;
// background-color: var(--nbx-sidebar-link-hover-bg);
color: $accordion-button-active-color;
background-color: $accordion-button-active-bg;
}
@ -409,7 +412,6 @@ div.content-container {
position: sticky;
height: 8rem;
background-color: var(--nbx-sidebar-bg);
box-shadow: inset -1px 0 0 rgba(0, 0, 0, 0.1);
.nav-link {
padding: 0.5rem 0.25rem;
}

View File

@ -173,9 +173,10 @@ $card-bg: $gray-800;
// Accordion
$accordion-color: $body-color;
$accordion-bg: transparent;
$accordion-border-color: rgba($white, 0.125);
$accordion-border-color: $border-color;
$accordion-button-color: $accordion-color;
$accordion-button-bg: $accordion-bg;
$accordion-body-active-bg: rgba($blue-300, 0.1);
$accordion-button-active-bg: rgba($blue-300, 0.15);
$accordion-button-active-color: $gray-300;
$accordion-button-focus-border-color: $input-focus-border-color;

View File

@ -17,6 +17,8 @@ $card-cap-color: $gray-800;
$accordion-bg: transparent;
$accordion-button-bg: $accordion-bg;
$accordion-body-active-bg: $gray-50;
$accordion-border-color: $border-color;
$accordion-button-active-bg: $blue-100;
$accordion-button-active-color: $gray-800;