From c907e792519153d9d6a9baf410dec0647e847c58 Mon Sep 17 00:00:00 2001
From: Silvio Giebl <silvio.giebl@hivemq.com>
Date: Wed, 1 Jan 2020 00:21:19 +0100
Subject: [PATCH] Improved padding of active search input

---
 _sass/search.scss          | 12 ++++++++++--
 assets/js/just-the-docs.js | 12 ++++++------
 2 files changed, 16 insertions(+), 8 deletions(-)

diff --git a/_sass/search.scss b/_sass/search.scss
index 54f3211..34c1cd5 100644
--- a/_sass/search.scss
+++ b/_sass/search.scss
@@ -37,7 +37,7 @@
   padding-top: $sp-2;
   padding-right: $gutter-spacing-sm;
   padding-bottom: $sp-2;
-  padding-left: #{$gutter-spacing-sm + $sp-4 * 1.2 + $sp-2};
+  padding-left: #{$gutter-spacing-sm + $sp-5};
   background-color: $search-background-color;
   border-top: 0;
   border-right: 0;
@@ -55,7 +55,7 @@
     background-color: $body-background-color;
     border-radius: 0;
     box-shadow: none;
-    transition: width ease $transition-duration;
+    transition: padding-left linear #{$transition-duration / 2}, width ease $transition-duration;
     @include fs-3;
   }
 
@@ -76,6 +76,7 @@
 
   @include mq(md) {
     padding-left: $gutter-spacing;
+    transition: padding-left linear #{$transition-duration / 2};
   }
 
   .search-icon {
@@ -261,10 +262,17 @@
     box-shadow: none;
 
     @include mq(md) {
+      padding-left: #{$sp-4 * 1.25 + $sp-5};
       width: $search-results-width;
     }
   }
 
+  .search-label {
+    @include mq(md) {
+      padding-left: #{$sp-4 * 1.25};
+    }
+  }
+
   .search-results {
     display: block;
   }
diff --git a/assets/js/just-the-docs.js b/assets/js/just-the-docs.js
index 343e261..c4aed2d 100644
--- a/assets/js/just-the-docs.js
+++ b/assets/js/just-the-docs.js
@@ -51,7 +51,7 @@ function initNav() {
     }
   });
 
-  {% if site.search_enabled != false and site.search.button -%}
+  {%- if site.search_enabled != false and site.search.button %}
   const searchInput = document.getElementById('search-input');
   const searchButton = document.getElementById('search-button');
 
@@ -64,9 +64,9 @@ function initNav() {
   {%- endif %}
 }
 
+{%- if site.search_enabled != false %}
 // Site search
 
-{% if site.search_enabled != false -%}
 function initSearch() {
   var request = new XMLHttpRequest();
   request.open('GET', '{{ "assets/js/search-data.json" | absolute_url }}', true);
@@ -81,7 +81,7 @@ function initSearch() {
         this.ref('id');
         this.field('title', { boost: 200 });
         this.field('content', { boost: 2 });
-        {% if site.search.rel_url != false -%}
+        {%- if site.search.rel_url != false %}
         this.field('relUrl');
         {%- endif %}
         this.metadataWhitelist = ['position']
@@ -91,7 +91,7 @@ function initSearch() {
             id: i,
             title: docs[i].title,
             content: docs[i].content,
-            {% if site.search.rel_url != false -%}
+            {%- if site.search.rel_url != false %}
             relUrl: docs[i].relUrl
             {%- endif %}
           });
@@ -266,7 +266,7 @@ function initSearch() {
             }
           }
 
-          {% if site.search.rel_url != false -%}
+          {%- if site.search.rel_url != false %}
           var resultRelUrl = document.createElement('span');
           resultRelUrl.classList.add('search-result-rel-url');
           resultRelUrl.innerText = doc.relUrl;
@@ -351,7 +351,7 @@ function initSearch() {
 
 jtd.onReady(function(){
   initNav();
-  {% if site.search_enabled != false -%}
+  {%- if site.search_enabled != false %}
   initSearch();
   {%- endif %}
 });