mdbootstrap/mdb-ui-kit
1
1
Fork 0
mirror of https://github.com/mdbootstrap/mdb-ui-kit.git synced 2024-11-25 19:14:09 +03:00
Code Issues Packages Projects Releases Wiki Activity

fix: CollapseInline improvements

Browse Source
This commit is contained in:
Federico Zivolo 2017-09-05 14:26:39 +02:00
parent f83d22e23b
commit 0c90b44d40
1 changed files with 9 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
scss/_forms.scss
View File

@ -125,24 +125,29 @@ form {
// `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 bmd-collapse-inline // `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 bmd-collapse-inline
// FIXME: js needs to do the focus on shown.bs.collapse event http://v4-alpha.getbootstrap.com/components/collapse/#events // FIXME: js needs to do the focus on shown.bs.collapse event http://v4-alpha.getbootstrap.com/components/collapse/#events
&.bmd-collapse-inline { &.bmd-collapse-inline {
display: flex;
align-items: center;
padding: 0; // get rid of any padding as this is a width transition padding: 0; // get rid of any padding as this is a width transition
min-height: 2.1em;
// Expandable Holder. // Expandable Holder.
.collapse { .collapse {
&.in { flex: 1;
display: none;
&.show {
// This is an unfortunate hack. Animating between widths in percent (%) // This is an unfortunate hack. Animating between widths in percent (%)
// in many browsers (Chrome, Firefox) only animates the inner visual style // in many browsers (Chrome, Firefox) only animates the inner visual style
// of the input - the outer bounding box still 'jumps'. // of the input - the outer bounding box still 'jumps'.
// Thus assume a sensible maximum, and animate to/from that value. // Thus assume a sensible maximum, and animate to/from that value.
max-width: 600px; max-width: 1200px;
} }
} }
.collapsing, .collapsing,
.width:not(.collapse), .width:not(.collapse),
// collapsing is removed and momentarily only width is present // collapsing is removed and momentarily only width is present
.collapse.in { .collapse.show {
display: inline-block; display: block;
} }
.collapsing { .collapsing {