mirror of
https://github.com/netbox-community/netbox.git
synced 2025-08-02 05:46:25 -06:00
Clean up nav menu spacing & link colors
This commit is contained in:
parent
d0fbbbfb37
commit
95b1029e50
BIN
netbox/project-static/dist/netbox-dark.css
vendored
BIN
netbox/project-static/dist/netbox-dark.css
vendored
Binary file not shown.
BIN
netbox/project-static/dist/netbox-light.css
vendored
BIN
netbox/project-static/dist/netbox-light.css
vendored
Binary file not shown.
@ -163,6 +163,12 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.nav-group-header {
|
||||||
|
padding: $sidenav-link-spacing-y / 2 $sidenav-link-spacing-x;
|
||||||
|
margin-top: 0.5rem;
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
// Child Link nav-item
|
// Child Link nav-item
|
||||||
.nav .nav-item {
|
.nav .nav-item {
|
||||||
display: flex;
|
display: flex;
|
||||||
@ -178,25 +184,15 @@
|
|||||||
|
|
||||||
@include child-link() {
|
@include child-link() {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
padding-top: $sidenav-link-spacing-y / 2.675;
|
padding-top: $sidenav-link-spacing-y / 2;
|
||||||
padding-right: map.get($spacers, 1);
|
padding-right: map.get($spacers, 1);
|
||||||
padding-bottom: $sidenav-link-spacing-y / 2.675;
|
padding-bottom: $sidenav-link-spacing-y / 2;
|
||||||
/* stylelint-disable */
|
padding-left: $sidenav-link-spacing-x;
|
||||||
padding-left: $sidenav-link-spacing-x + $sidenav-icon-width + $sidenav-link-spacing-x / 4;
|
margin-top: 0;
|
||||||
/* stylelint-enable */
|
margin-bottom: 0;
|
||||||
margin-top: $sidenav-link-spacing-y / 3.3;
|
|
||||||
margin-bottom: $sidenav-link-spacing-y / 3.3;
|
|
||||||
font-size: $font-size-xs;
|
|
||||||
border-top-right-radius: $border-radius;
|
border-top-right-radius: $border-radius;
|
||||||
border-bottom-right-radius: $border-radius;
|
border-bottom-right-radius: $border-radius;
|
||||||
|
|
||||||
.sidenav-normal {
|
|
||||||
color: $text-muted;
|
|
||||||
&:hover {
|
|
||||||
opacity: 0.8;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.sidenav-mini-icon {
|
.sidenav-mini-icon {
|
||||||
width: $sidenav-link-spacing-x;
|
width: $sidenav-link-spacing-x;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
@ -209,6 +205,7 @@
|
|||||||
height: 100%;
|
height: 100%;
|
||||||
font-weight: $font-weight-bold;
|
font-weight: $font-weight-bold;
|
||||||
color: var(--nbx-sidenav-parent-color);
|
color: var(--nbx-sidenav-parent-color);
|
||||||
|
padding-left: $sidenav-link-spacing-x / 2;
|
||||||
|
|
||||||
&.active {
|
&.active {
|
||||||
color: $accordion-button-active-color;
|
color: $accordion-button-active-color;
|
||||||
@ -273,7 +270,10 @@
|
|||||||
|
|
||||||
&.active {
|
&.active {
|
||||||
position: relative;
|
position: relative;
|
||||||
color: var(--nbx-sidebar-link-hover-bg);
|
background-color: var(--nbx-sidebar-link-hover-bg);
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover {
|
||||||
background-color: var(--nbx-sidebar-link-hover-bg);
|
background-color: var(--nbx-sidebar-link-hover-bg);
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -290,7 +290,7 @@
|
|||||||
display: block;
|
display: block;
|
||||||
font-size: $font-size-xs;
|
font-size: $font-size-xs;
|
||||||
font-weight: $font-weight-bold;
|
font-weight: $font-weight-bold;
|
||||||
color: $primary;
|
color: $secondary;
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
}
|
}
|
||||||
|
@ -146,7 +146,6 @@ $transition-100ms-ease-in-out: all 0.1s ease-in-out;
|
|||||||
$sidenav-width-closed: 4rem;
|
$sidenav-width-closed: 4rem;
|
||||||
$sidenav-width-open: 16rem;
|
$sidenav-width-open: 16rem;
|
||||||
$sidenav-icon-width: 2rem;
|
$sidenav-icon-width: 2rem;
|
||||||
$sidenav-link-px: 1rem;
|
|
||||||
$sidenav-spacing-x: 1.5rem;
|
$sidenav-spacing-x: 1.5rem;
|
||||||
$sidenav-link-spacing-x: 1rem;
|
$sidenav-link-spacing-x: 1rem;
|
||||||
$sidenav-link-spacing-y: 0.675rem;
|
$sidenav-link-spacing-y: 0.5rem;
|
||||||
|
@ -1,10 +1,10 @@
|
|||||||
{% if request.user.is_authenticated %}
|
{% if request.user.is_authenticated %}
|
||||||
<span class="dropdown ms-0 ms-md-3 profile-button">
|
<span class="dropdown profile-button">
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
aria-expanded="false"
|
aria-expanded="false"
|
||||||
data-bs-toggle="dropdown"
|
data-bs-toggle="dropdown"
|
||||||
class="btn btn-outline-secondary dropdown-toggle"
|
class="btn btn-outline-secondary dropdown-toggle w-100"
|
||||||
>
|
>
|
||||||
<i class="mdi mdi-account"></i>
|
<i class="mdi mdi-account"></i>
|
||||||
<span id="navbar_user">{{ request.user|truncatechars:"30" }}</span>
|
<span id="navbar_user">{{ request.user|truncatechars:"30" }}</span>
|
||||||
@ -37,7 +37,7 @@
|
|||||||
</ul>
|
</ul>
|
||||||
</span>
|
</span>
|
||||||
{% else %}
|
{% else %}
|
||||||
<div class="btn-group ms-0 ms-md-3">
|
<div class="btn-group">
|
||||||
<a
|
<a
|
||||||
class="btn btn-primary ws-nowrap"
|
class="btn btn-primary ws-nowrap"
|
||||||
type="button"
|
type="button"
|
||||||
|
@ -13,8 +13,8 @@
|
|||||||
{% for group in menu.groups %}
|
{% for group in menu.groups %}
|
||||||
{# Within each main menu, there are groups of menu items #}
|
{# Within each main menu, there are groups of menu items #}
|
||||||
<li class="nav-item">
|
<li class="nav-item">
|
||||||
<div class="nav-link">
|
{# Group Label #}
|
||||||
{# Group Label #}
|
<div class="nav-group-header">
|
||||||
<span class="nav-group-label">{{ group.label }}</span>
|
<span class="nav-group-label">{{ group.label }}</span>
|
||||||
</div>
|
</div>
|
||||||
</li>
|
</li>
|
||||||
@ -24,7 +24,7 @@
|
|||||||
{% if request.user|has_perms:item.permissions %}
|
{% if request.user|has_perms:item.permissions %}
|
||||||
<li class="nav-item{% if not item.buttons %} no-buttons{% endif %}">
|
<li class="nav-item{% if not item.buttons %} no-buttons{% endif %}">
|
||||||
<a href="{% url item.link %}" class="nav-link">
|
<a href="{% url item.link %}" class="nav-link">
|
||||||
<span class="sidenav-normal">{{ item.link_text }}</span>
|
{{ item.link_text }}
|
||||||
</a>
|
</a>
|
||||||
|
|
||||||
{# Menu item buttons (if any) #}
|
{# Menu item buttons (if any) #}
|
||||||
@ -45,7 +45,7 @@
|
|||||||
<li class="nav-item disabled">
|
<li class="nav-item disabled">
|
||||||
<a href="#" class="nav-link disabled" aria-disabled="true" disabled>
|
<a href="#" class="nav-link disabled" aria-disabled="true" disabled>
|
||||||
<i class='mdi mdi-lock small'></i>
|
<i class='mdi mdi-lock small'></i>
|
||||||
<span class="sidenav-normal">{{ item.link_text }}</span>
|
{{ item.link_text }}
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
|
Loading…
Reference in New Issue
Block a user