Clean up nav menu spacing & link colors

This commit is contained in:
jeremystretch 2021-08-06 11:05:27 -04:00
parent d0fbbbfb37
commit 95b1029e50
6 changed files with 25 additions and 26 deletions

Binary file not shown.

Binary file not shown.

View File

@ -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;
} }

View File

@ -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;

View File

@ -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"

View File

@ -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 %}