#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

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

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

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;

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;

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");