Merged master and implemented search overlay

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-3d8b235f56.css">
+      <link rel="stylesheet" href="{{ base_url }}/assets/stylesheets/application-e4737a159d.css">
       {% if config.extra.palette %}
         <link rel="stylesheet" href="{{ base_url }}/assets/stylesheets/application-f78e5cb881.palette.css">
       {% endif %}
@@ -150,7 +150,7 @@
       {% endblock %}
     </div>
     {% block scripts %}
-      <script src="{{ base_url }}/assets/javascripts/application-88de899dd7.js"></script>
+      <script src="{{ base_url }}/assets/javascripts/application-7018102a8b.js"></script>
       <script>app.initialize({url:{base:"{{ base_url }}"}})</script>
       {% for path in extra_javascript %}
         <script src="{{ path }}"></script>

material/partials/search.html

@@ -1,6 +1,6 @@
 {% import "partials/language.html" as lang %}
 <div class="md-search" data-md-component="search">
-  <div class="md-search__overlay"></div>
+  <label class="md-search__overlay" for="search"></label>
   <div class="md-search__inner">
     <form class="md-search__form" name="search">
       <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">

src/assets/javascripts/application.js

@@ -203,18 +203,6 @@ function initialize(config) { // eslint-disable-line func-style
       }
     }))
 
-  /* Listener: close search when clicking outside */
-  new Material.Event.MatchMedia("(min-width: 960px)",
-    new Material.Event.Listener(document.body, "click", () => {
-      const toggle = document.querySelector("[data-md-toggle=search]")
-      if (!(toggle instanceof HTMLInputElement))
-        throw new ReferenceError
-      if (toggle.checked) {
-        toggle.checked = false
-        toggle.dispatchEvent(new CustomEvent("change"))
-      }
-    }))
-
   /* Listener: keyboard handlers */
   new Material.Event.Listener(window, "keydown", ev => {
     const toggle = document.querySelector("[data-md-toggle=search]")

src/assets/stylesheets/layout/_search.scss

@@ -48,12 +48,11 @@ $md-toggle__search--checked:
 
   // Search modal overlay
   &__overlay {
-    display: none;
-    pointer-events: none;
+    opacity: 0;
+    z-index: 1;
 
     // [tablet portrait -]: Full-screen search bar
     @include break-to-device(tablet portrait) {
-      display: block;
       position: absolute;
       top: 0.4rem;
       left: 0.4rem;
@@ -65,9 +64,8 @@ $md-toggle__search--checked:
         opacity   0.2s 0.2s;
       border-radius: 2rem;
       background-color: $md-color-white;
-      opacity: 0;
       overflow: hidden;
-      z-index: 1;
+      pointer-events: none;
 
       // Expanded overlay
       #{$md-toggle__search--checked} & {
@@ -96,6 +94,32 @@ $md-toggle__search--checked:
         transform: scale(75);
       }
     }
+
+    // [tablet landscape +]: Overlay for better focus on search
+    @include break-from-device(tablet landscape) {
+      position: fixed;
+      top: 0;
+      left: 0;
+      width: 0;
+      height: 0;
+      transition:
+        width   0s 0.25s,
+        height  0s 0.25s,
+        opacity 0.25s;
+      background-color: $md-color-black--light;
+      cursor: pointer;
+
+      // Expanded overlay
+      #{$md-toggle__search--checked} & {
+        width: 100%;
+        height: 100%;
+        transition:
+          width   0s,
+          height  0s,
+          opacity 0.25s;
+        opacity: 1;
+      }
+    }
   }
 
   // Search modal wrapper
@@ -305,6 +329,7 @@ $md-toggle__search--checked:
     width: 100%;
     border-radius: 0 0 0.2rem 0.2rem;
     overflow: hidden;
+    z-index: 1;
 
     // [tablet portrait -]: Full-screen search bar
     @include break-to-device(tablet portrait) {

src/partials/search.html

@@ -24,7 +24,7 @@
 
 <!-- Search interface -->
 <div class="md-search" data-md-component="search">
-  <div class="md-search__overlay"></div>
+  <label class="md-search__overlay" for="search"></label>
   <div class="md-search__inner">
     <form class="md-search__form" name="search">
       <input type="text" class="md-search__input" name="query"