diff --git a/_config.yml b/_config.yml
index 6d9a4e29..01ca2646 100644
--- a/_config.yml
+++ b/_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
diff --git a/docs/_includes/footer.html b/docs/_includes/footer.html
index 8432672b..87649752 100644
--- a/docs/_includes/footer.html
+++ b/docs/_includes/footer.html
@@ -16,14 +16,17 @@
-
-
-
{% if site.data.minified %}
+
+
+
{% else %}
+
+
+
{% endif %}
diff --git a/docs/material-design/test.md b/docs/material-design/test.md
index b8036d8c..3d80f990 100644
--- a/docs/material-design/test.md
+++ b/docs/material-design/test.md
@@ -4,6 +4,29 @@ title: Test
group: material-design
---
+## Collapse method for mdb-btn-icon and field
{% example html %}
-
+
+
+
+
+
+
+{% 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 %}
+
+
+
+
+
+
+
{% endexample %}
diff --git a/scss/_forms.scss b/scss/_forms.scss
index f59ee13a..24dbb84f 100644
--- a/scss/_forms.scss
+++ b/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");
diff --git a/scss/_mixins.scss b/scss/_mixins.scss
index c1559ebc..d30cc3db 100644
--- a/scss/_mixins.scss
+++ b/scss/_mixins.scss
@@ -1,4 +1,5 @@
@import "mixins/utilities";
+@import "mixins/animations";
@import "mixins/shadows";
@import "mixins/variations";
@import "mixins/forms";
diff --git a/scss/_variables.scss b/scss/_variables.scss
index 966b5ba2..0503ca78 100644
--- a/scss/_variables.scss
+++ b/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;
+
+
diff --git a/scss/mixins/_animations.scss b/scss/mixins/_animations.scss
new file mode 100644
index 00000000..bd2eaaa7
--- /dev/null
+++ b/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;
+}