fix(template): set search container width and font-size

docgeni · Dec 21, 2021 · a8364c9 · a8364c9
1 parent f338ca2
commit a8364c9
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 11 deletions.
diff --git a/packages/template/src/shared/navbar/navbar.component.html b/packages/template/src/shared/navbar/navbar.component.html
@@ -19,7 +19,7 @@
 </div>
 <div class="spacer"></div>
 <div class="action-items">
-  <dg-search class="action-item" *ngIf="global.config.mode | dgIsFull"></dg-search>
+  <dg-search class="action-item search-container" *ngIf="global.config.mode | dgIsFull"></dg-search>
 
   <dg-locales-selector class="action-item" *ngIf="global.config.locales && global.config.locales.length > 1"></dg-locales-selector>
   <a *ngIf="global.config.repoUrl" class="action-item repo-url" href="{{ global.config.repoUrl }}" target="_blank">

diff --git a/packages/template/src/styles/navbar.scss b/packages/template/src/styles/navbar.scss
@@ -58,6 +58,13 @@
     .action-items {
         display: flex;
         align-items: center;
+        flex: auto;
+        justify-content: end;
+
+        .search-container {
+            flex: auto;
+            max-width: 300px;
+        }
 
         .action-item {
             margin-left: 20px;
@@ -68,12 +75,6 @@
                 font-size: 32px;
             }
         }
-
-        .dg-search-container {
-            .search {
-                width: 200px;
-            }
-        }
     }
 
     @include dg-media-breakpoint-down('md') {

diff --git a/packages/template/src/styles/search.scss b/packages/template/src/styles/search.scss
@@ -1,5 +1,7 @@
 .dg-search-container {
     position: relative;
+    line-height: $dg-font-size-base;
+    font-size: $dg-font-size-base;
 
     .search-icon {
         position: absolute;
@@ -14,10 +16,12 @@
 
     .search {
         padding: 0.532rem 10px 0.532rem 30px;
+        width: 100%;
         outline: none;
         border: 1px solid $dg-gray-200;
         border-radius: 18px;
         -webkit-appearance: none;
+        box-sizing: border-box;
     }
 
     .search-results-container {
@@ -75,4 +79,8 @@
             }
         }
     }
+
+    .algolia-autocomplete {
+        width: 100%;
+    }
 }
diff --git a/packages/template/src/styles/sidebar.scss b/packages/template/src/styles/sidebar.scss
@@ -135,9 +135,5 @@
                 min-width: 280px;
             }
         }
-
-        .search {
-            width: 240px;
-        }
     }
 }