RomanNum3ral
/
netbox
mirror of https://github.com/netbox-community/netbox.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

#6372: Reduce padding of top-level menu items & improve home page stat badge coloring

This commit is contained in:
checktheroads 2021-05-07 14:27:32 -07:00
parent 308820b8a1
commit fabd751f20
9 changed files with 51 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

File diff suppressed because one or more lines are too long

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

File diff suppressed because one or more lines are too long

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

File diff suppressed because one or more lines are too long

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

@ -22,6 +22,7 @@
--nbx-cable-termination-border-color: #{$gray-300};
--nbx-search-filter-border-left-color: #{$gray-300};
--nbx-color-mode-toggle-color: #{$primary};
--nbx-stat-badge-bg: #{$gray-600};
body[data-netbox-color-mode='dark'] {
--nbx-logo-color-1: #{$white};
@ -43,6 +44,7 @@
--nbx-cable-termination-border-color: #{$gray-700};
--nbx-search-filter-border-left-color: #{$gray-600};
--nbx-color-mode-toggle-color: #{$yellow-300};
--nbx-stat-badge-bg: #{$gray-600};
}
}
@ -72,6 +74,11 @@ body {
fill: #1685fc;
stroke: #1685fc;
}
span.badge.stat-badge {
margin-left: map.get($spacers, 2);
background-color: var(--nbx-stat-badge-bg);
}
&[data-netbox-color-mode='light'] {
.btn.btn-primary {
color: $white;
@ -219,7 +226,8 @@ h3.accordion-item-title,
h4.accordion-item-title,
h5.accordion-item-title,
h6.accordion-item-title {
padding: 0 0.5rem;
// padding: 0 0.5rem;
padding: 0.25rem 0.5rem;
font-weight: $font-weight-bold;
text-transform: uppercase;
color: var(--nbx-sidebar-title-color);
@ -277,11 +285,14 @@ li.dropdown-item.dropdown-item-btns {
nav.nav.nav-pills {
.nav-item.nav-link {
padding: 0.25rem 0.5rem;
font-size: $font-size-base;
// 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: $body-color;
// background-color: var(--nbx-sidebar-link-hover-bg);
background-color: $accordion-button-active-bg;
color: $accordion-button-active-color;
}
}
}
@ -307,13 +318,17 @@ nav.nav.nav-pills {
top: 8.125rem;
}
.sidebar-nav-link {
color: var(--nbx-sidebar-link-color);
}
div.accordion-item > a.accordion-button.nav-link:focus {
border-color: unset;
box-shadow: unset;
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;
}
&:focus {
border-color: unset;
box-shadow: unset;
}
}
.accordion-body {
@ -321,12 +336,15 @@ nav.nav.nav-pills {
overflow-y: auto;
.nav-item {
.nav-link {
padding: 0.25rem 0.5rem;
font-size: $font-size-base;
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: $body-color;
// background-color: var(--nbx-sidebar-link-hover-bg);
color: $accordion-button-active-color;
background-color: $accordion-button-active-bg;
}
}
}

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

@ -217,3 +217,6 @@ $font-family-sans-serif: ui-sans-serif, system-ui, -apple-system, BlinkMacSystem
'Segoe UI Symbol', 'Noto Color Emoji';
$font-family-monospace: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono',
'Courier New', monospace;
$accordion-padding-y: 0.8125rem;
$accordion-padding-x: 0.8125rem;

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

@ -174,8 +174,8 @@ $accordion-bg: transparent;
$accordion-border-color: rgba($white, 0.125);
$accordion-button-color: $accordion-color;
$accordion-button-bg: $accordion-bg;
$accordion-button-active-bg: tint-color($component-active-bg, 5%);
$accordion-button-active-color: shade-color($primary, 10%);
$accordion-button-active-bg: rgba($blue-300, 0.15);
$accordion-button-active-color: $gray-300;
$accordion-button-focus-border-color: $input-focus-border-color;
$accordion-icon-color: $accordion-color;
$accordion-icon-active-color: $accordion-button-active-color;

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

@ -17,6 +17,8 @@ $card-cap-color: $gray-800;
$accordion-bg: transparent;
$accordion-button-bg: $accordion-bg;
$accordion-button-active-bg: $blue-100;
$accordion-button-active-color: $gray-800;
$breadcrumb-divider: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Cpath d='M2.5 0L1 1.5 3.5 4 1 6.5 2.5 8l4-4-4-4z' fill='currentColor'/%3E%3C/svg%3E");

2
netbox/templates/home.html
View File

@ -22,7 +22,7 @@
<small class="mb-1 text-muted">{{ item.description }}</small>
{% endif %}
</div>
<span class="badge bg-secondary rounded-pill">
<span class="badge stat-badge rounded-pill">
{% if item.count == None %}
<i class="mdi mdi-lock"></i>
{% else %}

16
netbox/utilities/templates/navigation/nav_items.html
View File

@ -7,14 +7,12 @@
aria-expanded="true"
data-bs-toggle="collapse"
data-bs-target="#{{ menu.label|lower }}"
class="d-flex justify-content-between align-items-center accordion-button nav-link collapsed"
><span class="fw-bold sidebar-nav-link">{{ menu.label }}</span></a
>
<div
id="{{ menu.label|lower }}"
class="accordion-collapse collapse"
data-bs-parent="#sidenav-accordion"
>
class="d-flex justify-content-between align-items-center accordion-button nav-link collapsed">
<span class="fw-bold sidebar-nav-link">
{{ menu.label }}
</span>
</a>
<div id="{{ menu.label|lower }}" class="accordion-collapse collapse" data-bs-parent="#sidenav-accordion">
<div class="multi-level accordion-body px-0">
{% for group in menu.groups %}
<div class="flex-column nav px-2">
@ -27,7 +25,7 @@
{% endfor %}
</div>
{% if forloop.counter != menu.groups|length %}
<hr class="dropdown-divider my-3" />
<hr class="dropdown-divider my-2" />
{% endif %} {% endfor %}
</div>
</div>