#6372: Improve sidebar styles

This commit is contained in:
checktheroads
2021-05-25 17:57:37 -07:00
parent 5b4dacf0f5
commit e1eefd1165
7 changed files with 24 additions and 19 deletions

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

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;