NeoAnd/netbox
1
0
Fork 0
mirror of https://github.com/netbox-community/netbox.git synced 2025-07-25 01:48:38 -06:00
Code Issues Actions 9 Packages Projects Releases Wiki Activity

#6372: Improve sidebar styles

Browse Source
This commit is contained in:
checktheroads 2021-05-25 17:57:37 -07:00
parent 5b4dacf0f5
commit e1eefd1165
7 changed files with 22 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
netbox/project-static/dist/netbox-dark.css vendored
View File

Binary file not shown.

2
netbox/project-static/dist/netbox-dark.css.map vendored
View File

File diff suppressed because one or more lines are too long

BIN
netbox/project-static/dist/netbox-light.css vendored
View File

Binary file not shown.

2
netbox/project-static/dist/netbox-light.css.map vendored
View File

File diff suppressed because one or more lines are too long

30
netbox/project-static/netbox.scss
View File

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

3
netbox/project-static/theme-dark.scss
View File

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

2
netbox/project-static/theme-light.scss
View File

@ -17,6 +17,8 @@ $card-cap-color: $gray-800;
$accordion-bg: transparent; $accordion-bg: transparent;
$accordion-button-bg: $accordion-bg; $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-bg: $blue-100;
$accordion-button-active-color: $gray-800; $accordion-button-active-color: $gray-800;