mirror/netbox-community-netbox
1
0
Fork 0
mirror of https://github.com/netbox-community/netbox.git synced 2024-05-10 07:54:54 +00:00
Code

Improve sidenav link styles

Browse Source
This commit is contained in:
Matt
2021-08-06 17:46:49 -07:00
parent fe54acef51
commit a312311be9
4 changed files with 18 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

File diff suppressed because one or more lines are too long

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

File diff suppressed because one or more lines are too long

13
netbox/project-static/styles/sidenav.scss
View File

@ -203,9 +203,9 @@
@include parent-link() {
width: unset;
height: 100%;
padding-left: $sidenav-link-spacing-x / 2;
font-weight: $font-weight-bold;
color: var(--nbx-sidenav-parent-color);
padding-left: $sidenav-link-spacing-x / 2;
&.active {
color: $accordion-button-active-color;
@ -260,20 +260,22 @@
// All Links
.nav-link {
position: relative;
display: flex;
align-items: center;
width: 100%;
padding: $sidenav-link-spacing-y $sidenav-link-spacing-x;
font-size: $font-size-sm;
color: var(--nbx-sidenav-link-color);
white-space: nowrap;
transition: $transition-100ms-ease-in-out;
&.active {
position: relative;
background-color: var(--nbx-sidebar-link-hover-bg);
background-color: var(--nbx-sidebar-link-active-bg);
}
&:hover {
&:hover:not(.active) {
color: var(--nbx-body-color);
background-color: var(--nbx-sidebar-link-hover-bg);
}
@ -290,7 +292,8 @@
display: block;
font-size: $font-size-xs;
font-weight: $font-weight-bold;
color: $secondary;
// color: $secondary;
color: var(--nbx-sidenav-group-color);
text-transform: uppercase;
white-space: nowrap;
}

12
netbox/project-static/styles/variables.scss
View File

@ -4,8 +4,8 @@
// Light Mode Variables.
--nbx-sidebar-bg: #{$gray-200};
--nbx-sidebar-scroll: #{$gray-500};
--nbx-sidebar-link-color: #{$gray-800};
--nbx-sidebar-link-hover-bg: #{$blue-100};
--nbx-sidebar-link-hover-bg: #{rgba($gray-600, 0.15)};
--nbx-sidebar-link-active-bg: #{$blue-100};
--nbx-sidebar-title-color: #{$text-muted};
--nbx-sidebar-shadow: inset 0px -25px 20px -25px rgba(0, 0, 0, 0.25);
--nbx-breadcrumb-bg: #{$light};
@ -21,15 +21,17 @@
--nbx-cable-termination-border-color: #{$gray-300};
--nbx-search-filter-border-left-color: #{$gray-300};
--nbx-color-mode-toggle-color: #{$primary};
--nbx-sidenav-link-color: #{$gray-800};
--nbx-sidenav-pin-color: #{$orange};
--nbx-sidenav-parent-color: #{$gray-900};
--nbx-sidenav-group-color: #{$secondary};
&[data-netbox-color-mode='dark'] {
// Dark Mode Variables.
--nbx-sidebar-bg: #{$gray-900};
--nbx-sidebar-scroll: #{$gray-700};
--nbx-sidebar-link-color: #{$gray-100};
--nbx-sidebar-link-hover-bg: #{rgba($blue-300, 0.15)};
--nbx-sidebar-link-active-bg: #{rgba($blue-300, 0.25)};
--nbx-sidebar-link-hover-bg: #{rgba($gray-500, 0.15)};
--nbx-sidebar-title-color: #{$gray-600};
--nbx-sidebar-shadow: inset 0px -25px 20px -25px rgba(255, 255, 255, 0.05);
--nbx-breadcrumb-bg: #{$gray-800};
@ -45,7 +47,9 @@
--nbx-cable-termination-border-color: #{$gray-700};
--nbx-search-filter-border-left-color: #{$gray-600};
--nbx-color-mode-toggle-color: #{$yellow-300};
--nbx-sidenav-link-color: #{$gray-200};
--nbx-sidenav-pin-color: #{$yellow};
--nbx-sidenav-parent-color: #{$gray-100};
--nbx-sidenav-group-color: #{$gray-600};
}
}