Added reset button for search

material/base.html

@@ -38,7 +38,7 @@
       <script src="{{ base_url }}/assets/javascripts/modernizr-56ade86843.js"></script>
     {% endblock %}
     {% block styles %}
-      <link rel="stylesheet" href="{{ base_url }}/assets/stylesheets/application-76741b64bc.css">
+      <link rel="stylesheet" href="{{ base_url }}/assets/stylesheets/application-d6bceb5018.css">
       {% if config.extra.palette %}
         <link rel="stylesheet" href="{{ base_url }}/assets/stylesheets/application-66fa0d9bba.palette.css">
       {% endif %}
@@ -151,7 +151,7 @@
       {% endblock %}
     </div>
     {% block scripts %}
-      <script src="{{ base_url }}/assets/javascripts/application-3964c0cb56.js"></script>
+      <script src="{{ base_url }}/assets/javascripts/application-0f66d83d23.js"></script>
       <script>app.initialize({url:{base:"{{ base_url }}"}})</script>
       {% for path in extra_javascript %}
         <script src="{{ path }}"></script>

material/partials/search.html

@@ -3,8 +3,9 @@
   <div class="md-search__overlay"></div>
   <div class="md-search__inner">
     <form class="md-search__form" name="search">
-      <input type="text" class="md-search__input" name="query" placeholder="{{ lang.t('search.placeholder') }}" accesskey="s" autocapitalize="off" autocorrect="off" autocomplete="off" spellcheck="false" data-md-component="query">
+      <input type="text" class="md-search__input" name="query" required placeholder="{{ lang.t('search.placeholder') }}" accesskey="s" autocapitalize="off" autocorrect="off" autocomplete="off" spellcheck="false" data-md-component="query">
       <label class="md-icon md-search__icon" for="search"></label>
+      <button type="reset" class="md-icon md-search__icon">close</button>
     </form>
     <div class="md-search__output">
       <div class="md-search__scrollwrap" data-md-scrollfix>

src/assets/javascripts/application.js

@@ -141,7 +141,7 @@ function initialize(config) { // eslint-disable-line func-style
 
   /* Component: search results */
   new Material.Event.Listener("[data-md-component=query]", [
-    "focus", "keyup"
+    "focus", "keyup", "change"
   ], new Material.Search.Result("[data-md-component=result]", () => {
     return fetch(`${config.url.base}/mkdocs/search_index.json`, {
       credentials: "same-origin"

src/assets/stylesheets/layout/_search.scss

@@ -159,12 +159,12 @@
   // Search input
   &__input {
     position: relative;
-    padding: 0 1.6rem 0 7.2rem;
+    padding: 0 4.8rem 0 7.2rem;
     text-overflow: ellipsis;
     z-index: 1;
 
     // Placeholder and icon color in active state
-    + .md-search__icon,
+    ~ .md-search__icon,
     &::placeholder {
       color: $md-color-black--light;
     }
@@ -225,27 +225,58 @@
   // Icons
   &__icon {
     position: absolute;
-    top: $md-icon-padding;
-    left: $md-icon-padding + $md-icon-margin;
     transition: color 0.25s;
     font-size: $md-icon-size;
     cursor: pointer;
     z-index: 1;
 
-    // Set search icon on pseudo class, so it can be overridden for mobile
+    // Search icon
-    // and tablet when the search is rendered in an overlay
+    &[for="search"] {
-    &::before {
+      top: $md-icon-padding;
-      content: "search";
+      left: $md-icon-padding + $md-icon-margin;
+
+      // Set search icon on pseudo class, so it can be overridden for mobile
+      // and tablet when the search is rendered in an overlay
+      &::before {
+        content: "search";
+      }
+
+      // [tablet portrait -]: Full-screen search bar
+      @include break-to-device(tablet portrait) {
+        top: 1.6rem;
+        left: 1.6rem;
+
+        // Show back arrow instead of search icon
+        &[for="search"]::before {
+          content: "arrow_back";
+        }
+      }
     }
 
-    // [tablet portrait -]: Full-screen search bar
+    // Reset button
-    @include break-to-device(tablet portrait) {
+    &[type="reset"] {
-      top: 1.6rem;
+      top: $md-icon-padding;
-      left: 1.6rem;
+      right: $md-icon-padding + $md-icon-margin;
+      transform: scale(0.25);
+      transition:
+        transform 0.25s,
+        opacity 0.25s;
+      opacity: 0;
 
-      // Show back arrow instead of search icon
+      // [tablet portrait -]: Full-screen search bar
-      &::before {
+      @include break-to-device(tablet portrait) {
-        content: "arrow_back";
+        top: 1.6rem;
+        right: 1.6rem;
+      }
+
+      // Non-empty input field ...
+      .md-search__input:valid ~ & {
+
+        // ...and expanded overlay
+        [data-md-toggle="search"]:checked ~ .md-header & {
+          transform: scale(1);
+          opacity: 1;
+        }
       }
     }
   }

src/partials/search.html

@@ -28,10 +28,11 @@
   <div class="md-search__inner">
     <form class="md-search__form" name="search">
       <input type="text" class="md-search__input" name="query"
-          placeholder="{{ lang.t('search.placeholder') }}"
+          required placeholder="{{ lang.t('search.placeholder') }}"
           accesskey="s" autocapitalize="off" autocorrect="off"
           autocomplete="off" spellcheck="false" data-md-component="query" />
       <label class="md-icon md-search__icon" for="search"></label>
+      <button type="reset" class="md-icon md-search__icon">close</button>
     </form>
     <div class="md-search__output">
       <div class="md-search__scrollwrap" data-md-scrollfix>