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
.nav .nav-item {
display: flex;
@ -178,25 +184,15 @@
@include child-link() {
width: 100%;
padding-top: $sidenav-link-spacing-y / 2.675;
padding-top: $sidenav-link-spacing-y / 2;
padding-right: map.get($spacers, 1);
padding-bottom: $sidenav-link-spacing-y / 2.675;
/* stylelint-disable */
padding-left: $sidenav-link-spacing-x + $sidenav-icon-width + $sidenav-link-spacing-x / 4;
/* stylelint-enable */
margin-top: $sidenav-link-spacing-y / 3.3;
margin-bottom: $sidenav-link-spacing-y / 3.3;
font-size: $font-size-xs;
padding-bottom: $sidenav-link-spacing-y / 2;
padding-left: $sidenav-link-spacing-x;
margin-top: 0;
margin-bottom: 0;
border-top-right-radius: $border-radius;
border-bottom-right-radius: $border-radius;
.sidenav-normal {
color: $text-muted;
&:hover {
opacity: 0.8;
}
}
.sidenav-mini-icon {
width: $sidenav-link-spacing-x;
text-align: center;
@ -209,6 +205,7 @@
height: 100%;
font-weight: $font-weight-bold;
color: var(--nbx-sidenav-parent-color);
padding-left: $sidenav-link-spacing-x / 2;
&.active {
color: $accordion-button-active-color;
@ -273,7 +270,10 @@
&.active {
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);
}
@ -290,7 +290,7 @@
display: block;
font-size: $font-size-xs;
font-weight: $font-weight-bold;
color: $primary;
color: $secondary;
text-transform: uppercase;
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-open: 16rem;
$sidenav-icon-width: 2rem;
$sidenav-link-px: 1rem;
$sidenav-spacing-x: 1.5rem;
$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 %}
<span class="dropdown ms-0 ms-md-3 profile-button">
<span class="dropdown profile-button">
<button
type="button"
aria-expanded="false"
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>
<span id="navbar_user">{{ request.user|truncatechars:"30" }}</span>
@ -37,7 +37,7 @@
</ul>
</span>
{% else %}
<div class="btn-group ms-0 ms-md-3">
<div class="btn-group">
<a
class="btn btn-primary ws-nowrap"
type="button"

View File

@ -13,8 +13,8 @@
{% for group in menu.groups %}
{# Within each main menu, there are groups of menu items #}
<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>
</div>
</li>
@ -24,7 +24,7 @@
{% if request.user|has_perms:item.permissions %}
<li class="nav-item{% if not item.buttons %} no-buttons{% endif %}">
<a href="{% url item.link %}" class="nav-link">
<span class="sidenav-normal">{{ item.link_text }}</span>
{{ item.link_text }}
</a>
{# Menu item buttons (if any) #}
@ -45,7 +45,7 @@
<li class="nav-item disabled">
<a href="#" class="nav-link disabled" aria-disabled="true" disabled>
<i class='mdi mdi-lock small'></i>
<span class="sidenav-normal">{{ item.link_text }}</span>
{{ item.link_text }}
</a>
</li>
{% endif %}