From 53e21ceed40c0189a8c8b61af6da9e03266ab392 Mon Sep 17 00:00:00 2001 From: Matt Date: Tue, 3 Aug 2021 09:19:24 -0700 Subject: [PATCH] #6797: Improve global search styles --- netbox/project-static/dist/netbox-dark.css | Bin 761626 -> 763611 bytes netbox/project-static/dist/netbox-light.css | Bin 473952 -> 475359 bytes netbox/project-static/styles/netbox.scss | 91 +++++++++++------- .../utilities/templates/search/searchbar.html | 2 +- 4 files changed, 55 insertions(+), 38 deletions(-) diff --git a/netbox/project-static/dist/netbox-dark.css b/netbox/project-static/dist/netbox-dark.css index 73e693cbf6d74e7c1b99d3c6de3f28740f07263c..20c91ff9171c0699a550fe20520c51d3fcb4ac92 100644 GIT binary patch delta 1089 zcmbQWPw)0wy@nRX7N!>F7M2#)7Pc1l7LFFq7OpMa9hTD{IIyx!zi-VgxZTT&JCk?% z2TN|L=?g8n{ik0D=4N3lPE9OI&Y1q*lG_<9AP*5x(96s#C@s-VFUl`1P|$-2>gFe9 zP3OJBAu(ORn^P04Tm+l)=?03763l67Y11DDFpKh8=Oz}VXXfeVq^6Zv8BAAPz@|94 zV2{Fdeh+T->E0gPwX&#|r4;2Cq~w?9>6YZDr{|tLXIRbVe(%waVD6 z)kD=dUD1G11&<>Ygc-%Bi!-sxLd-VKV2lH+Rw2Ud)aeudFqx9!6k#lePfz^CB0RnL zH40Bgh^b-+*&o4#C-8R9uSYBc^bDTB?y?WM)+ z%z7laaib2S841c4$TAvEx6fwOB0-O#0E-R@%GYNzrh=8@3n3GT~F?vywfEs N*_5`|MR3n?0{|MgfLs6o delta 220 zcmcb8R&Ulmy@nRX7N!>F7M2#)7Pc1l7LFFq7OpMa9hTGmmvOUAZ+7Pvp04E1?LXab z886yQ t+e7R;62L9RXgd9V0Jj-Lz$6eR#S+9VKYd{mw<*N2KyK7_`vmSeZUF6DOA7!1 diff --git a/netbox/project-static/dist/netbox-light.css b/netbox/project-static/dist/netbox-light.css index 50949743c34f3f32ae8d3ef6920fab0f4e63c628..0e3d911576e3e09428cea98f73cf1d69e323d0c5 100644 GIT binary patch delta 1102 zcmaFxP3C^1Y(ooU3sVbo3rh>@7B;Q#(+~e-6W_k#JKKGZ=>^}}q^9@(XJei2@tsYB zJ1?B%qg>S5R7_n_iS(TA%<`rJJ9WrCXeulbT$Tno>Re;0H!g z30ztxKinfb`AsD6^z$DW+4!t;6N}O_^K^4k(@LxirZZ}=C{F&HCO`edW)}A82R<;e zPyN8oGhL98JyRCd;*_HNf|UI7Jl&G~^z@w6=?kryR3EKd0 z`M@sm$>KnVDx3?{z@-S?wCRCHOv3fVs>W$Iy0KP?$t9U(sYI%`$Vt_MYS1gr$S=1e z);+*@(VNV5ULSYF9oQu{{rP!DVZ18hiF9X9D%4+AY5B>e#YF3xyl|HY(J=yyMuW+3 z&T~c)8wge@nZ=1oIjJecyGQbZGrj;(n!cQoT|gX%1E%w_GD}Q9z{ z4yR$$6S&z$_^NXgD|9nbGt)CltjrCjf8b&l!K*`FHnSu(7pHeXhN?~X<7OAaYl{8$ Q?TqZdIJVE{WOhXG}3sVbo3rh>@7B;Q#Qx)0WrYf*YvE}9GrPkI?U-*MfV!Pvaw)-41 zY57ID3Q46UCHZ-JDMk4ODf#7jx+VGP={c#@lVv*erpuPF3Qqs9nT37&fe(!AllwZP zCi9(QpML%WBiraw8ct`M@rv>0NB>0^GTYnR$9SiIw@KCDT8;GfQlD z=U~6iG5s1FyXmu3NRX~LN^eyb{k`NXP N2fM;{IYIV=`T&e7P!j+E 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 -