diff --git a/netbox/project-static/dist/netbox-dark.css b/netbox/project-static/dist/netbox-dark.css
index 73e693cbf..20c91ff91 100644
Binary files a/netbox/project-static/dist/netbox-dark.css and b/netbox/project-static/dist/netbox-dark.css differ
diff --git a/netbox/project-static/dist/netbox-light.css b/netbox/project-static/dist/netbox-light.css
index 50949743c..0e3d91157 100644
Binary files a/netbox/project-static/dist/netbox-light.css and b/netbox/project-static/dist/netbox-light.css differ
diff --git a/netbox/project-static/styles/netbox.scss b/netbox/project-static/styles/netbox.scss
index 9db1ce35a..6aaac6e94 100644
--- a/netbox/project-static/styles/netbox.scss
+++ b/netbox/project-static/styles/netbox.scss
@@ -118,15 +118,6 @@ table td > .progress {
}
}
-.search-container {
- display: flex;
- width: 100%;
-
- @include media-breakpoint-down(lg) {
- display: none;
- }
-}
-
.card > .table.table-flush {
margin-bottom: 0;
overflow: hidden;
@@ -270,24 +261,67 @@ div.title-container {
}
}
+// Global Search
nav.search {
// Don't overtake dropdowns
z-index: 999;
justify-content: center;
background-color: var(--nbx-body-bg);
- form button.dropdown-toggle {
- font-weight: $input-group-addon-font-weight;
- line-height: $input-line-height;
- color: $input-group-addon-color;
- background-color: $input-group-addon-bg;
- border: $input-border-width solid $input-group-addon-border-color;
- border-color: $input-border-color;
- @include border-radius($input-border-radius);
- border-left: 1px solid var(--nbx-search-filter-border-left-color);
+ .search-container {
+ display: flex;
+ width: 100%;
- &:focus {
- box-shadow: unset !important;
+ @include media-breakpoint-down(lg) {
+ display: none;
+ }
+ }
+
+ // Search Input & Selected Object Value & Object Selector
+ .input-group {
+ // Selected Object
+ .search-obj-selected {
+ border-color: $input-border-color;
+ }
+
+ // Object Selector Dropdown Button
+ .dropdown-toggle {
+ // Generate the same styles as a regular Bootstrap button.
+ @include button-variant($input-group-addon-bg, $input-border-color);
+ margin-left: 0;
+ font-weight: $input-group-addon-font-weight;
+ line-height: $input-line-height;
+ color: $input-group-addon-color;
+ background-color: $input-group-addon-bg;
+ border: $input-border-width solid $input-border-color;
+ @include border-radius($input-border-radius);
+ border-left: 1px solid var(--nbx-search-filter-border-left-color);
+
+ &:focus {
+ box-shadow: unset !important;
+ }
+ // Don't show the dropdown icon — the filter icon is basically the same thing.
+ &:after {
+ display: none;
+ }
+ }
+
+ // Object Selector Dropdown Menu
+ .search-obj-selector {
+ @include media-breakpoint-down(lg) {
+ // Limit the height and enable scrolling on mobile devices.
+ max-height: 70vh;
+ overflow-y: auto;
+ }
+
+ .dropdown-item,
+ .dropdown-header {
+ font-size: $font-size-sm;
+ }
+
+ .dropdown-header {
+ text-transform: uppercase;
+ }
}
}
}
@@ -436,23 +470,6 @@ div.content-container {
pointer-events: none;
}
-.search-obj-selector {
- @include media-breakpoint-down(lg) {
- // Limit the height and enable scrolling on mobile devices.
- max-height: 75vh;
- overflow-y: auto;
- }
-
- .dropdown-item,
- .dropdown-header {
- font-size: $font-size-sm;
- }
-
- .dropdown-header {
- text-transform: uppercase;
- }
-}
-
span.color-label {
display: block;
width: 5rem;
diff --git a/netbox/utilities/templates/search/searchbar.html b/netbox/utilities/templates/search/searchbar.html
index daf9b334b..d71fd8e69 100644
--- a/netbox/utilities/templates/search/searchbar.html
+++ b/netbox/utilities/templates/search/searchbar.html
@@ -12,7 +12,7 @@
All Objects
-