Focus search after reset

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-d6bceb5018.css">
+      <link rel="stylesheet" href="{{ base_url }}/assets/stylesheets/application-015c443a94.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-0f66d83d23.js"></script>
+      <script src="{{ base_url }}/assets/javascripts/application-01fc542e64.js"></script>
       <script>app.initialize({url:{base:"{{ base_url }}"}})</script>
       {% for path in extra_javascript %}
         <script src="{{ path }}"></script>

material/partials/search.html

@@ -5,7 +5,7 @@
     <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">
       <label class="md-icon md-search__icon" for="search"></label>
-      <button type="reset" class="md-icon md-search__icon">close</button>
+      <button type="reset" class="md-icon md-search__icon" data-md-component="reset">close</button>
     </form>
     <div class="md-search__output">
       <div class="md-search__scrollwrap" data-md-scrollfix>

src/assets/javascripts/application.js

@@ -172,6 +172,16 @@ function initialize(config) { // eslint-disable-line func-style
         }
       }))
 
+  /* Listener: focus input after form reset */
+  new Material.Event.Listener("[data-md-component=reset]", "click", () => {
+    setTimeout(() => {
+      const query = document.querySelector("[data-md-component=query]")
+      if (!(query instanceof HTMLInputElement))
+        throw new ReferenceError
+      query.focus()
+    }, 10)
+  }).listen()
+
   /* Listener: focus input after opening search */
   new Material.Event.Listener("[data-md-toggle=search]", "change", ev => {
     setTimeout(toggle => {

src/assets/javascripts/components/Material/Search/Result.jsx

@@ -148,7 +148,7 @@ export default class Result {
       }, 250)
 
     /* Execute search on new input event */
-    } else if (ev.type === "keyup") {
+    } else if (ev.type === "focus" || ev.type === "keyup") {
       const target = ev.target
       if (!(target instanceof HTMLInputElement))
         throw new ReferenceError

src/assets/stylesheets/_config.scss

@@ -58,22 +58,22 @@ $break-devices: (
 // ----------------------------------------------------------------------------
 
 // Primary and accent colors
-$md-color-primary:                    $clr-indigo-500;
+$md-color-primary:                    $clr-indigo-500 !default;
-$md-color-accent:                     $clr-indigo-a200;
+$md-color-accent:                     $clr-indigo-a200 !default;
 
 // Shades of black
-$md-color-black:                      hsla(0, 0%, 0%, 0.87);
+$md-color-black:                      hsla(0, 0%, 0%, 0.87) !default;
-$md-color-black--light:               hsla(0, 0%, 0%, 0.54);
+$md-color-black--light:               hsla(0, 0%, 0%, 0.54) !default;
-$md-color-black--lighter:             hsla(0, 0%, 0%, 0.26);
+$md-color-black--lighter:             hsla(0, 0%, 0%, 0.26) !default;
-$md-color-black--lightest:            hsla(0, 0%, 0%, 0.07);
+$md-color-black--lightest:            hsla(0, 0%, 0%, 0.07) !default;
-$md-color-black--transparent:         hsla(0, 0%, 0%, 0);
+$md-color-black--transparent:         hsla(0, 0%, 0%, 0) !default;
 
 // Shades of white
-$md-color-white:                      hsla(0, 0%, 100%, 1);
+$md-color-white:                      hsla(0, 0%, 100%, 1) !default;
-$md-color-white--light:               hsla(0, 0%, 100%, 0.7);
+$md-color-white--light:               hsla(0, 0%, 100%, 0.7) !default;
-$md-color-white--lighter:             hsla(0, 0%, 100%, 0.3);
+$md-color-white--lighter:             hsla(0, 0%, 100%, 0.3) !default;
-$md-color-white--lightest:            hsla(0, 0%, 100%, 0.12);
+$md-color-white--lightest:            hsla(0, 0%, 100%, 0.12) !default;
-$md-color-white--transparent:         hsla(0, 0%, 100%, 0);
+$md-color-white--transparent:         hsla(0, 0%, 100%, 0) !default;
 
 // ----------------------------------------------------------------------------
 // Variables: sizing and spacing

src/assets/stylesheets/application.palette.scss

@@ -49,7 +49,7 @@ button[data-md-color-accent] {
   padding: 2.4rem 0.8rem 0.4rem;
   transition:
     background-color 0.25s,
-    opacity 0.25s;
+    opacity          0.25s;
   border-radius: 0.2rem;
   color: $md-color-white;
   font-size: ms(-1);

src/assets/stylesheets/base/_typeset.scss

@@ -34,7 +34,7 @@ body {
 body,
 input {
   color: $md-color-black;
-  font-feature-settings: "kern", "onum", "liga";
+  font-feature-settings: "kern", "liga";
   font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
   font-weight: 400;
 }
@@ -44,7 +44,7 @@ pre,
 code,
 kbd {
   color: $md-color-black;
-  font-feature-settings: "kern", "onum", "liga";
+  font-feature-settings: "kern", "liga";
   font-family: "Courier New", Courier, monospace;
   font-weight: 400;
 }

src/assets/stylesheets/layout/_base.scss

@@ -20,6 +20,14 @@
 /// DEALINGS
 ////
 
+// ----------------------------------------------------------------------------
+// Variables
+// ----------------------------------------------------------------------------
+
+// Active (toggled) drawer
+$md-toggle__drawer--checked:
+  "[data-md-toggle=\"drawer\"]:checked ~";
+
 // ----------------------------------------------------------------------------
 // Rules: base grid and containers
 // ----------------------------------------------------------------------------
@@ -137,7 +145,7 @@ hr {
   @include break-to-device(tablet) {
 
     // Expanded drawer
-    [data-md-toggle="drawer"]:checked ~ & {
+    #{$md-toggle__drawer--checked} & {
       width: 100%;
       height: 100%;
       transition:

src/assets/stylesheets/layout/_search.scss

@@ -20,6 +20,14 @@
 /// DEALINGS
 ////
 
+// ----------------------------------------------------------------------------
+// Variables
+// ----------------------------------------------------------------------------
+
+// Active (toggled) search
+$md-toggle__search--checked:
+  "[data-md-toggle=\"search\"]:checked ~ .md-header";
+
 // ----------------------------------------------------------------------------
 // Rules
 // ----------------------------------------------------------------------------
@@ -62,7 +70,7 @@
       z-index: 1;
 
       // Expanded overlay
-      [data-md-toggle="search"]:checked ~ .md-header & {
+      #{$md-toggle__search--checked} & {
         transition:
           transform 0.4s,
           opacity   0.1s;
@@ -71,7 +79,7 @@
     }
 
     // Set scale factors
-    [data-md-toggle="search"]:checked ~ .md-header & {
+    #{$md-toggle__search--checked} & {
 
       // [mobile portrait -]: Scale up 45 times
       @include break-to-device(mobile portrait) {
@@ -109,7 +117,7 @@
       z-index: 2;
 
       // Active search modal
-      [data-md-toggle="search"]:checked ~ .md-header & {
+      #{$md-toggle__search--checked} & {
         left: 0;
         transform: translateX(0);
         transition:
@@ -122,9 +130,7 @@
 
     // [tablet landscape +]: Make relative for inner layout
     @include break-from-device(tablet landscape) {
-      display: table;
       position: relative;
-      clear: both;
     }
   }
 
@@ -142,7 +148,7 @@
     }
 
     // Set maximum width
-    [data-md-toggle="search"]:checked ~ .md-header & {
+    #{$md-toggle__search--checked} & {
 
       // [tablet landscape]: Do not overlay title
       @include break-at-device(tablet landscape) {
@@ -197,7 +203,6 @@
       // Placeholder color
       + .md-search__icon,
       &::placeholder {
-        transition: color 0.25s;
         color: $md-color-white;
       }
 
@@ -207,7 +212,7 @@
       }
 
       // Set light background on active search field
-      [data-md-toggle="search"]:checked ~ .md-header & {
+      #{$md-toggle__search--checked} & {
         border-radius: 0.2rem 0.2rem 0 0;
         background-color: $md-color-white;
         color: $md-color-black;
@@ -225,11 +230,16 @@
   // Icons
   &__icon {
     position: absolute;
-    transition: color 0.25s;
+    transition: opacity 0.25s;
     font-size: $md-icon-size;
     cursor: pointer;
     z-index: 1;
 
+    // Hovered icon
+    &:hover {
+      opacity: 0.7;
+    }
+
     // Search icon
     &[for="search"] {
       top: $md-icon-padding;
@@ -257,10 +267,10 @@
     &[type="reset"] {
       top: $md-icon-padding;
       right: $md-icon-padding + $md-icon-margin;
-      transform: scale(0.25);
+      transform: scale(0.125);
       transition:
-        transform 0.25s,
+        transform 0.15s cubic-bezier(0.1, 0.7, 0.1, 1),
-        opacity 0.25s;
+        opacity   0.15s;
       opacity: 0;
 
       // [tablet portrait -]: Full-screen search bar
@@ -269,13 +279,14 @@
         right: 1.6rem;
       }
 
-      // Non-empty input field ...
+      // Show reset button if search is active and input non-empty
-      .md-search__input:valid ~ & {
+      #{$md-toggle__search--checked} .md-search__input:valid ~ & {
+        transform: scale(1);
+        opacity: 1;
 
-        // ...and expanded overlay
+        // Hovered icon
-        [data-md-toggle="search"]:checked ~ .md-header & {
+        &:hover {
-          transform: scale(1);
+          opacity: 0.7;
-          opacity: 1;
         }
       }
     }
@@ -301,7 +312,7 @@
       opacity: 0;
 
       // Show search output in active state
-      [data-md-toggle="search"]:checked ~ .md-header & {
+      #{$md-toggle__search--checked} & {
         @include z-depth(6);
 
         opacity: 1;
@@ -352,7 +363,7 @@
       max-height: 0;
 
       // Expand in active state
-      [data-md-toggle="search"]:checked ~ .md-header & {
+      #{$md-toggle__search--checked} & {
         max-height: 75vh;
       }
 
@@ -416,6 +427,11 @@
     // Hovered link
     &:hover {
       background-color: transparentize($md-color-accent, 0.9);
+
+      // Slightly transparent icon
+      .md-search-result__article::before {
+        opacity: 0.7;
+      }
     }
 
     // Add a little spacing on the last link
@@ -444,7 +460,8 @@
 
         position: absolute;
         left: 0;
-        color: $md-color-black--lighter;
+        transition: opacity 0.25s;
+        color: $md-color-black--light;
         content: "find_in_page";
 
         // [tablet portrait -]: Hide page icon
@@ -501,7 +518,7 @@
 
   // stylelint-enable value-no-vendor-prefix, property-no-vendor-prefix
 
-  // Highlighting
+  // Search term highlighting
   em {
     font-style: normal;
     font-weight: 700;

src/assets/stylesheets/layout/_sidebar.scss

@@ -20,6 +20,14 @@
 /// DEALINGS
 ////
 
+// ----------------------------------------------------------------------------
+// Variables
+// ----------------------------------------------------------------------------
+
+// Active (toggled) drawer
+$md-toggle__drawer--checked:
+  "[data-md-toggle=\"drawer\"]:checked ~ .md-container";
+
 // ----------------------------------------------------------------------------
 // Rules
 // ----------------------------------------------------------------------------
@@ -65,7 +73,7 @@
       }
 
       // Expanded drawer
-      [data-md-toggle="drawer"]:checked ~ .md-container & {
+      #{$md-toggle__drawer--checked} & {
         @include z-depth(8);
 
         transform: translateX(24.2rem);

src/assets/stylesheets/layout/_source.scss

@@ -181,7 +181,7 @@
   html & {
     transition:
       background 0.4s,
-      color 0.4s,
+      color      0.4s,
       box-shadow 0.4s cubic-bezier(0.4, 0, 0.2, 1);
 
     // Icon

src/assets/stylesheets/layout/_tabs.scss

@@ -64,9 +64,9 @@
     display: block;
     margin-top: 1.6rem;
     transition:
-      color 0.25s,
+      color     0.25s,
       transform 0.4s cubic-bezier(0.1, 0.7, 0.1, 1),
-      opacity 0.1s;
+      opacity   0.1s;
     color: $md-color-white--light;
     font-size: 1.4rem;
 
@@ -94,9 +94,9 @@
     .md-tabs__link {
       transform: translateY(50%);
       transition:
-        color 0.25s,
+        color     0.25s,
         transform 0s 0.4s,
-        opacity 0.1s;
+        opacity   0.1s;
       opacity: 0;
     }
   }

src/partials/search.html

@@ -32,7 +32,8 @@
           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>
+      <button type="reset" class="md-icon md-search__icon"
+          data-md-component="reset">close</button>
     </form>
     <div class="md-search__output">
       <div class="md-search__scrollwrap" data-md-scrollfix>