wip prototype for mdb-collapse-inline with an mdb-btn-icon and a field i.e. search field. Need to add a js class to ease use/markup and add focusing behavior.

_config.yml

@@ -57,9 +57,9 @@ cdn:
   font_icons:     https://fonts.googleapis.com/icon?family=Material+Icons
 
   # VERSION is substituted in variables.rb and these are made available as site.data.cdn.*
-  jquery:         https://ajax.googleapis.com/ajax/libs/jquery/VERSION/jquery.min.js
-  bootstrap:      https://cdn.rawgit.com/twbs/bootstrap/VERSION/dist/js/bootstrap.min.js
-  tether:         https://cdn.rawgit.com/HubSpot/tether/vVERSION/dist/js/tether.min.js
+  jquery:         https://ajax.googleapis.com/ajax/libs/jquery/VERSION/jquery
+  bootstrap:      https://cdn.rawgit.com/twbs/bootstrap/VERSION/dist/js/bootstrap
+  tether:         https://cdn.rawgit.com/HubSpot/tether/vVERSION/dist/js/tether
 
 
 

docs/_includes/footer.html

@@ -16,14 +16,17 @@
   </div>
 </footer>
 
-<script src="{{ site.data.cdn.jquery }}"></script>
-<script src="{{ site.data.cdn.tether }}"></script>
-<script src="{{ site.data.cdn.bootstrap }}"></script>
 
 <script src="{{ site.baseurl }}/dist/js/docs-vendor.min.js"></script>
 {% if site.data.minified %}
+  <script src="{{ site.data.cdn.jquery }}.min.js"></script>
+  <script src="{{ site.data.cdn.tether }}.min.js"></script>
+  <script src="{{ site.data.cdn.bootstrap }}.min.js"></script>
   <script src="{{ site.baseurl }}/dist/js/docs.iife.min.js"></script>
 {% else %}
+  <script src="{{ site.data.cdn.jquery }}.js"></script>
+  <script src="{{ site.data.cdn.tether }}.js"></script>
+  <script src="{{ site.data.cdn.bootstrap }}.js"></script>
   <script src="{{ site.baseurl }}/dist/js/docs.iife.js"></script>
 {% endif %}
 

docs/material-design/test.md

@@ -4,6 +4,29 @@ title: Test
 group: material-design
 ---
 
+## Collapse method for mdb-btn-icon and field
 {% example html %}
-<button type="button" class="btn btn-primary">Primary</button>
+<div class="mdb-form-group mdb-collapse-inline pull-xs-right">
+  <button class="btn mdb-btn-icon" for="search" data-toggle="collapse" data-target="#search-field" aria-expanded="false" aria-controls="search-field">
+    <i class="material-icons">search</i>
+  </button>  
+  <span id="search-field" class="collapse width">
+    <input class="form-control" type="text" id="search" placeholder="Enter your query...">
+  </span>
+</div>
+{% endexample %}
+
+
+## With label-placeholder
+Perhaps this isn't worth doing, considering the context.  we need to override the top calc to determine where this goes, or perhaps we should switch to a bottom calc for everything?
+{% example html %}
+<div class="mdb-form-group mdb-collapse-inline pull-xs-right">
+  <button class="btn mdb-btn-icon" for="search" data-toggle="collapse" data-target="#search-field2" aria-expanded="false" aria-controls="search-field2">
+    <i class="material-icons">search</i>
+  </button>  
+  <span id="search-field2" class="collapse width">
+    <label class="mdb-label-placeholder" for="search2">Enter your query...</label>
+    <input class="form-control" type="text" id="search2">
+  </span>
+</div>
 {% endexample %}

scss/_forms.scss

@@ -133,6 +133,35 @@ form {
     display: none;
   }
 
+  // Optional class to make the text field inline collapsible/expandable (collapsed by default)
+  //    This uses the BS collapse js to make the width expand.
+  //    `width` class must also be on the element FIXME: do this with JS, it is a marker class and should be implicit because after all, we are an mdb-collapse-inline
+  //    FIXME: js needs to do the focus on shown.bs.collapse event http://v4-alpha.getbootstrap.com/components/collapse/#events
+  &.mdb-collapse-inline {
+    padding: 0; // get rid of any padding as this is a width transition
+
+    // Expandable Holder.
+    .collapse {
+      &.in {
+        // This is an unfortunate hack. Animating between widths in percent (%)
+        // in many browsers (Chrome, Firefox) only animates the inner visual style
+        // of the input - the outer bounding box still 'jumps'.
+        // Thus assume a sensible maximum, and animate to/from that value.
+        max-width: 600px;
+      }
+    }
+
+    .collapsing,
+    .width:not(.collapse), // collapsing is removed and momentarily only width is present
+    .collapse.in {
+      display: inline-block;
+    }
+
+    .collapsing {
+      @include material-animation-default();
+    }
+  }
+
   // default floating size/location with an mdb-form-group
   @include mdb-form-size-variant($font-size-base, $mdb-label-top-margin-base, $input-padding-y, $mdb-form-line-height, "mdb-form-group default");
 

scss/_mixins.scss

@@ -1,4 +1,5 @@
 @import "mixins/utilities";
+@import "mixins/animations";
 @import "mixins/shadows";
 @import "mixins/variations";
 @import "mixins/forms";

scss/_variables.scss

@@ -1,3 +1,4 @@
+// FIXME: re-examine organization of variables, files, ordering etc.  While the ordering works, we need to be sure this is more comprehensible.
 @import "variables/colors";
 
 // redefine ? TODO: do we need this mdb variant?  This is used as $body-color
@@ -31,12 +32,14 @@ $mdb-label-color-inner-focus: $gray !default; // e.g. radio label or text-muted
 @import "variables/bootstrap/type";
 @import "variables/bootstrap/modals";
 
-
 // import their vars after customization for use below
 $enable-flex: true;
 @import "../bower_components/bootstrap/scss/variables";
 
 
+//
+@import "variables/drawer";
+
 $mdb-label-color-focus: $brand-primary !default;
 //---
 // verified in use with refactoring to v4
@@ -65,6 +68,10 @@ $mdb-mdb-label-static-size-ratio: 75 / 100 !default;
 $mdb-help-size-ratio: 75 / 100 !default;
 
 
+// expandable
+$input-text-button-size: 32px !default;
+
+
 // sizing
 $mdb-form-line-height: 1 !default; // set as 1x font-size so that padding is easier calculated to match the spec.
 $mdb-label-top-margin-base: 1rem !default;
@@ -117,10 +124,15 @@ $mdb-radio-color-on: $brand-primary !default;
 $mdb-radio-color-disabled: $gray-light; // light theme spec: Disabled: #000000, Opacity  26%
 $mdb-radio-color-disabled-inverse:  rgba($white, 0.30); // dark theme spec: Disabled: #FFFFFF, Opacity  30%
 
-
-
 // Shadows
 $mdb-shadow-key-umbra-opacity: 0.2 !default;
 $mdb-shadow-key-penumbra-opacity: 0.14 !default;
 $mdb-shadow-ambient-shadow-opacity: 0.12 !default;
 
+// Animations
+$mdb-animation-curve-fast-out-slow-in: cubic-bezier(0.4, 0, 0.2, 1) !default;
+$mdb-animation-curve-linear-out-slow-in: cubic-bezier(0, 0, 0.2, 1) !default;
+$mdb-animation-curve-fast-out-linear-in: cubic-bezier(0.4, 0, 1, 1) !default;
+$mdb-animation-curve-default: $mdb-animation-curve-fast-out-slow-in !default;
+
+

scss/mixins/_animations.scss

@@ -0,0 +1,21 @@
+// Animations (from mdl http://www.getmdl.io/)
+
+@mixin material-animation-fast-out-slow-in($duration:0.2s) {
+  transition-duration: $duration;
+  transition-timing-function: $mdb-animation-curve-fast-out-slow-in;
+}
+
+@mixin material-animation-linear-out-slow-in($duration:0.2s) {
+  transition-duration: $duration;
+  transition-timing-function: $mdb-animation-curve-linear-out-slow-in;
+}
+
+@mixin material-animation-fast-out-linear-in($duration:0.2s) {
+  transition-duration: $duration;
+  transition-timing-function: $mdb-animation-curve-fast-out-linear-in;
+}
+
+@mixin material-animation-default($duration:0.2s) {
+  transition-duration: $duration;
+  transition-timing-function: $mdb-animation-curve-default;
+}