navbar fixes

trimble-oss · Oct 31, 2023 · 911816b · 911816b
1 parent 28515b5
commit 911816b
Show file tree

Hide file tree

Showing 5 changed files with 16 additions and 14 deletions.
diff --git a/app-components/preview/app-components.js b/app-components/preview/app-components.js
diff --git a/app-components/src/app/search/search.component.html b/app-components/src/app/search/search.component.html
@@ -1,13 +1,12 @@
 <div class="position-relative d-none d-md-block">
-  <div class="form-control-with-icon" role="search">
-    <input class="form-control form-control-lg form-control-search" placeholder="Search all Modus Icons" type="search" autocomplete="off"
+  <div class="form-control-with-icon mt-2" role="search">
+    <input class="form-control form-control-search" placeholder="Search all Modus Icons" type="search" autocomplete="off"
       [(ngModel)]="searchString" (input)="search()" />
     <div class="form-control-icon">
       <img [src]="assetpath + 'modus-solid/svg/search.svg'" class="opacity-75" alt height="22" width="22" />
     </div>
   </div>
-  <div style="top: 48px; max-height: 240px; overflow-y: auto; z-index: 1000"
-    class="list-group list-group-borderless bg-white position-absolute shadow justify-content-start w-100">
+  <div class="list-group list-group-search-results list-group-borderless bg-white position-absolute shadow justify-content-start w-100">
     <ng-container *ngIf="searchResults.length === 0 && searchString.length > 1">
       <div class="list-group-item justify-content-center">
         <h5 class="mb-0 text-gray-4">
@@ -18,14 +17,14 @@ <h5 class="mb-0 text-gray-4">
     <ng-container *ngIf="searchResults.length > 0">
       <a class="list-group-item text-decoration-none d-flex align-items-center"
         *ngFor="let item of searchResults" [href]="basehref + '/' + item.setName + '/' + item.name + '/'">
-        <svg class="modus-icons me-2" fill="currentColor" width="1.2em" height="1.2em">
+        <svg class="modus-icons me-2" fill="currentColor" width="24" height="24">
           <use [attr.xlink:href]="
               assetpath + item.setName + '/sprites/modus-icons.svg#' + item.name
             "></use>
         </svg>
-        <h5 class="me-2 mb-0">{{ item.displayName }}</h5>
+        <h5 class="me-2 mb-0 small">{{ item.displayName }}</h5>
         <label class="mb-0 me-4 fw-normal small opacity-50">{{ item.tags }}</label>
-        <label class="mb-0 ms-auto text-secondary opacity-75">{{
+        <label class="mb-0 ms-auto text-secondary opacity-75 small">{{
           item.setDisplayName
         }}</label>
       </a>

diff --git a/app-components/src/app/search/search.component.scss b/app-components/src/app/search/search.component.scss
@@ -0,0 +1,6 @@
+.list-group-search-results {
+  max-height: 240px;
+  overflow-y: auto;
+  top: 32px;
+  z-index: 1000;
+}
diff --git a/docs/assets/js/app-components.js b/docs/assets/js/app-components.js
diff --git a/docs/assets/scss/docs.scss b/docs/assets/scss/docs.scss
@@ -162,6 +162,8 @@ main {
 
 nav.navbar button.btn-icon-only {
   padding: 11px 8px !important;
+  padding-top: 9px !important;
+  padding-bottom: 11px !important;
 }
 
 nav.navbar button i {
@@ -207,11 +209,6 @@ input[type="search"]::-webkit-search-cancel-button {
   outline: none;
 }
 
-nav.navbar button.btn-icon-only {
-  padding-top: 9px !important;
-  padding-bottom: 11px !important;
-}
-
 a.btn img {
   margin-top: -2px;
 }