tweak mobile nav

oleg-nenashev · Dec 4, 2023 · 1ffac24 · 1ffac24
1 parent d72963e
commit 1ffac24
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 5 deletions.
diff --git a/_docs_theme/main.html b/_docs_theme/main.html
@@ -99,10 +99,6 @@
         <li> <a href="https://wiremock.io?utm_source=wiremock.org&utm_medium=masthead&utm_campaign=homepage_2022_baseline" title="WireMock Cloud" class="btn t-5"> Go to WM Cloud </a></li>
         {% if "material/search" in config.plugins %}
         <li>
-            <label class="md-header__button md-icon" for="__search">
-              {% set icon = config.theme.icon.search or "material/magnify" %}
-              {% include ".icons/" ~ icon ~ ".svg" %}
-            </label>
             {% include "partials/search.html" %}
         </li>
         {% endif %}

diff --git a/_sass/_masthead.scss b/_sass/_masthead.scss
@@ -6,7 +6,7 @@
   background-color: #fff;
   position: relative;
   animation: intro 0.3s both;
-  animation-delay: 0.15s;
+c animation-delay: 0.15s;
   z-index: 20;
   max-width: 1280px;
   margin: 0 auto;

diff --git a/extra_sass/_masthead.scss b/extra_sass/_masthead.scss
@@ -29,6 +29,28 @@ $masthead-link-color-hover: mix(#000, $gray, 25%);
     margin: 0 auto;
     max-width: 61rem;
   }
+
+  .md-search__input {
+    border: 1px solid #cacaca;
+    border-radius: 4px;
+    font-weight: 400;
+    font-size: .9rem;
+    padding: 7px 15px;
+    padding-left: 50px;
+    line-height: 22px;
+
+    &::placeholder {
+      color: grey;
+    }
+  }
+
+  .md-search__form {
+    background: none;
+
+    .md-search__icon svg {
+
+    }
+  }
 }
 
 .masthead__nav {
@@ -150,6 +172,18 @@ schedule-demo-nav-mobile {
     color: $text-color;
     text-decoration: none;
   }
+
+  .md-search {
+    padding: 0;
+  }
+
+  .md-search__inner {
+    position: static;
+    width: auto;
+    height: auto;
+    opacity: 1;
+    transform: unset;
+  }
 }
 
 .overlay-menu {