bugfix

src/core/platform/web/config.js

@@ -18,31 +18,46 @@ BI.prepares.push(function () {
         if (isLessIE8) {
             return ob;
         }
-        if (ob.items && ob.items.length > 1) {
+        // 在横向自适应场景下我们需要使用table的自适应撑出滚动条的特性（flex处理不了这种情况）
+        // 主要出现在center_adapt或者horizontal_adapt的场景，或者主动设置horizontalAlign的场景
+        if (ob.horizontalAlign === BI.HorizontalAlign.Center || ob.horizontalAlign === BI.HorizontalAlign.Stretch) {
             return BI.extend(ob, {type: "bi.table_adapt"});
         }
         if (!IE && supportFlex) {
             return BI.extend(ob, {type: "bi.flex_horizontal"});
         }
+        // 解决使用inline_vertical_adapt的顺序问题
+        // 从右往左放置时，为了兼容，我们统一采用从右到左的放置方式
+        if (ob.horizontalAlign === BI.HorizontalAlign.Right) {
+            return BI.extend(ob, {type: "bi.inline_vertical_adapt", items: ob.items && ob.items.reverse()});
+        }
         return BI.extend(ob, {type: "bi.table_adapt"});
     });
     BI.Plugin.configWidget("bi.center_adapt", function (ob) {
         var isIE = BI.isIE(), supportFlex = isSupportFlex(), justOneItem = (ob.items && ob.items.length <= 1);
-        if (!isIE && supportFlex && justOneItem) {
+        var isAdapt = ob.horizontalAlign === BI.HorizontalAlign.Center || ob.horizontalAlign === BI.HorizontalAlign.Stretch;
+        if (!isIE && supportFlex) {
+            if (!isAdapt || justOneItem) {
                 return BI.extend(ob, {type: "bi.flex_center_adapt"});
             }
-        // 一个item的情况下inline布局睥睨天下
+        }
-        if (justOneItem) {
+        if (!isAdapt || justOneItem) {
             return BI.extend(ob, {type: "bi.inline_center_adapt"});
         }
         return ob;
     });
     BI.Plugin.configWidget("bi.vertical_adapt", function (ob) {
-        var isIE = BI.isIE(), supportFlex = isSupportFlex();
+        var isIE = BI.isIE(), supportFlex = isSupportFlex(), justOneItem = (ob.items && ob.items.length <= 1);
+        var isAdapt = ob.horizontalAlign === BI.HorizontalAlign.Center || ob.horizontalAlign === BI.HorizontalAlign.Stretch;
         if (!isIE && supportFlex) {
+            if (!isAdapt || justOneItem) {
                 return BI.extend(ob, {type: "bi.flex_vertical_center_adapt"});
             }
+        }
+        if (!isAdapt || justOneItem) {
             return BI.extend(ob, {type: "bi.inline_vertical_adapt"});
+        }
+        return ob;
     });
     BI.Plugin.configWidget("bi.horizontal_adapt", function (ob) {
         if (ob.verticalAlign === BI.VerticalAlign.TOP && ob.items && ob.items.length <= 1) {
@@ -50,11 +65,11 @@ BI.prepares.push(function () {
         }
         return ob;
     });
-    BI.Plugin.configWidget("bi.float_center_adapt", function (ob) {
+    BI.Plugin.configWidget("bi.horizontal_float", function (ob) {
         if (!BI.isIE() && isSupportFlex()) {
-            return BI.extend(ob, {type: "bi.flex_center_adapt"});
+            return BI.extend(ob, {type: "bi.flex_horizontal_adapt"});
         }
-        return BI.extend(ob, {type: "bi.inline_center_adapt"});
+        return BI.extend(ob, {type: "bi.inline_horizontal_adapt"});
     });
 
     BI.Plugin.configWidget("bi.flex_horizontal", function (ob) {

src/core/wrapper/layout/adapt/adapt.center.js

@@ -27,6 +27,8 @@ BI.CenterAdaptLayout = BI.inherit(BI.Layout, {
             horizontalAlign: o.horizontalAlign,
             columnSize: o.columnSize,
             scrollx: o.scrollx,
+            scrolly: o.scrolly,
+            scrollable: o.scrollable,
             items: o.items,
             ref: function (_ref) {
                 self.layout = _ref;

src/core/wrapper/layout/adapt/adapt.horizontal.js

@@ -28,6 +28,8 @@ BI.HorizontalAdaptLayout = BI.inherit(BI.Layout, {
             columnSize: o.columnSize,
             items: o.items,
             scrollx: o.scrollx,
+            scrolly: o.scrolly,
+            scrollable: o.scrollable,
             ref: function (_ref) {
                 self.layout = _ref;
             },

src/core/wrapper/layout/adapt/adapt.vertical.js

@@ -27,6 +27,8 @@ BI.VerticalAdaptLayout = BI.inherit(BI.Layout, {
             columnSize: o.columnSize,
             items: o.items,
             scrollx: o.scrollx,
+            scrolly: o.scrolly,
+            scrollable: o.scrollable,
             ref: function (_ref) {
                 self.layout = _ref;
             },

src/core/wrapper/layout/adapt/inline.center.js

@@ -10,9 +10,11 @@
 BI.InlineCenterAdaptLayout = BI.inherit(BI.Layout, {
 
     props: function () {
-        return BI.extend(BI.InlineLayout.superclass.props.apply(this, arguments), {
+        return BI.extend(BI.InlineCenterAdaptLayout.superclass.props.apply(this, arguments), {
             baseCls: "bi-inline-center-adapt-layout",
             horizontalAlign: BI.HorizontalAlign.Center,
+            verticalAlign: BI.VerticalAlign.Middle,
+            columnSize: [],
             hgap: 0,
             vgap: 0,
             lgap: 0,
@@ -23,8 +25,8 @@ BI.InlineCenterAdaptLayout = BI.inherit(BI.Layout, {
     },
 
     render: function () {
-        var o = this.options;
         BI.InlineCenterAdaptLayout.superclass.render.apply(this, arguments);
+        var o = this.options;
         this.element.css({
             whiteSpace: "nowrap",
             textAlign: o.horizontalAlign
@@ -34,10 +36,11 @@ BI.InlineCenterAdaptLayout = BI.inherit(BI.Layout, {
 
     _addElement: function (i, item, length) {
         var o = this.options;
-        var w = BI.InlineVerticalAdaptLayout.superclass._addElement.apply(this, arguments);
+        var w = BI.InlineCenterAdaptLayout.superclass._addElement.apply(this, arguments);
         w.element.css({
+            width: o.columnSize[i] <= 1 ? (o.columnSize[i] * 100 + "%") : o.columnSize[i],
             position: "relative",
-            "vertical-align": "middle"
+            "vertical-align": o.verticalAlign
         });
         w.element.addClass("inline-center-adapt-item");
         if (o.vgap + o.tgap + (item.tgap || 0) + (item.vgap || 0) !== 0) {

src/core/wrapper/layout/adapt/inline.horizontal.js

@@ -0,0 +1,91 @@
+/**
+ * 内联布局
+ * @class BI.InlineHorizontalAdaptLayout
+ * @extends BI.Layout
+ *
+ * @cfg {JSON} options 配置属性
+ * @cfg {Number} [hgap=0] 水平间隙
+ * @cfg {Number} [vgap=0] 垂直间隙
+ */
+BI.InlineHorizontalAdaptLayout = BI.inherit(BI.Layout, {
+
+    props: function () {
+        return BI.extend(BI.InlineHorizontalAdaptLayout.superclass.props.apply(this, arguments), {
+            baseCls: "bi-inline-horizontal-adapt-layout",
+            horizontalAlign: BI.HorizontalAlign.Center,
+            verticalAlign: BI.VerticalAlign.Top,
+            columnSize: [],
+            hgap: 0,
+            vgap: 0,
+            lgap: 0,
+            rgap: 0,
+            tgap: 0,
+            bgap: 0
+        });
+    },
+
+    render: function () {
+        BI.InlineHorizontalAdaptLayout.superclass.render.apply(this, arguments);
+        var o = this.options;
+        this.element.css({
+            whiteSpace: "nowrap",
+            textAlign: o.horizontalAlign
+        });
+        this.populate(o.items);
+    },
+
+    _addElement: function (i, item, length) {
+        var o = this.options;
+        var w = BI.InlineHorizontalAdaptLayout.superclass._addElement.apply(this, arguments);
+        w.element.css({
+            width: o.columnSize[i] <= 1 ? (o.columnSize[i] * 100 + "%") : o.columnSize[i],
+            position: "relative",
+            "vertical-align": o.verticalAlign
+        });
+        w.element.addClass("inline-horizontal-adapt-item");
+        if (o.vgap + o.tgap + (item.tgap || 0) + (item.vgap || 0) !== 0) {
+            w.element.css({
+                "margin-top": o.vgap + o.tgap + (item.tgap || 0) + (item.vgap || 0) + "px"
+            });
+        }
+        if (o.hgap + o.lgap + (item.lgap || 0) + (item.hgap || 0) !== 0) {
+            w.element.css({
+                "margin-left": (i === 0 ? o.hgap : 0) + o.lgap + (item.lgap || 0) + (item.hgap || 0) + "px"
+            });
+        }
+        if (o.hgap + o.rgap + (item.rgap || 0) + (item.hgap || 0) !== 0) {
+            w.element.css({
+                "margin-right": o.hgap + o.rgap + (item.rgap || 0) + (item.hgap || 0) + "px"
+            });
+        }
+        if (o.vgap + o.bgap + (item.bgap || 0) + (item.vgap || 0) !== 0) {
+            w.element.css({
+                "margin-bottom": o.vgap + o.bgap + (item.bgap || 0) + (item.vgap || 0) + "px"
+            });
+        }
+        return w;
+    },
+
+    resize: function () {
+        this.stroke(this.options.items);
+    },
+
+    addItem: function (item) {
+        throw new Error("不能添加元素");
+    },
+
+    stroke: function (items) {
+        var self = this;
+        BI.each(items, function (i, item) {
+            if (item) {
+                self._addElement(i, item, items.length);
+            }
+        });
+    },
+
+    populate: function (items) {
+        BI.InlineHorizontalAdaptLayout.superclass.populate.apply(this, arguments);
+        this._mount();
+    }
+});
+BI.shortcut("bi.inline_horizontal_adapt", BI.InlineHorizontalAdaptLayout);

src/core/wrapper/layout/adapt/inline.vertical.js

@@ -10,9 +10,11 @@
 BI.InlineVerticalAdaptLayout = BI.inherit(BI.Layout, {
 
     props: function () {
-        return BI.extend(BI.InlineLayout.superclass.props.apply(this, arguments), {
+        return BI.extend(BI.InlineVerticalAdaptLayout.superclass.props.apply(this, arguments), {
             baseCls: "bi-inline-vertical-adapt-layout",
             horizontalAlign: BI.HorizontalAlign.Left,
+            verticalAlign: BI.VerticalAlign.Middle,
+            columnSize: [],
             hgap: 0,
             vgap: 0,
             lgap: 0,
@@ -36,8 +38,9 @@ BI.InlineVerticalAdaptLayout = BI.inherit(BI.Layout, {
         var o = this.options;
         var w = BI.InlineVerticalAdaptLayout.superclass._addElement.apply(this, arguments);
         w.element.css({
+            width: o.columnSize[i] <= 1 ? (o.columnSize[i] * 100 + "%") : o.columnSize[i],
             position: "relative",
-            "vertical-align": "middle"
+            "vertical-align": o.verticalAlign
         });
         w.element.addClass("inline-vertical-adapt-item");
         if (o.vgap + o.tgap + (item.tgap || 0) + (item.vgap || 0) !== 0) {

src/core/wrapper/layout/flex/flex.center.js

@@ -9,36 +9,46 @@ BI.FlexCenterLayout = BI.inherit(BI.Layout, {
     props: function () {
         return BI.extend(BI.FlexCenterLayout.superclass.props.apply(this, arguments), {
             baseCls: "bi-flex-center-adapt-layout",
+            verticalAlign: BI.VerticalAlign.Middle,
+            horizontalAlign: BI.HorizontalAlign.Center,
             hgap: 0,
-            vgap: 0
+            vgap: 0,
+            lgap: 0,
+            rgap: 0,
+            tgap: 0,
+            bgap: 0
         });
     },
     render: function () {
-        BI.FlexCenterLayout.superclass.render.apply(this, arguments);
+        var self = this, o = this.options;
-        this.populate(this.options.items);
+        return {
+            type: "bi.flex_horizontal",
+            ref: function (_ref) {
+                self.wrapper = _ref;
             },
-
+            horizontalAlign: o.horizontalAlign,
-    _addElement: function (i, item) {
+            verticalAlign: o.verticalAlign,
-        var o = this.options;
+            scrollx: o.scrollx,
-        var w = BI.FlexCenterLayout.superclass._addElement.apply(this, arguments);
+            scrolly: o.scrolly,
-        w.element.css({
+            scrollable: o.scrollable,
-            position: "relative",
+            hgap: o.hgap,
-            "flex-shrink": "0",
+            vgap: o.vgap,
-            "margin-left": (i === 0 ? o.hgap : 0) + "px",
+            tgap: o.tgap,
-            "margin-right": o.hgap + "px",
+            bgap: o.bgap,
-            "margin-top": o.vgap + "px",
+            items: o.items
-            "margin-bottom": o.vgap + "px"
+        };
-        });
-        return w;
     },
 
     resize: function () {
         // console.log("flex_center_adapt布局不需要resize");
     },
 
+    update: function (opt) {
+        return this.wrapper.update(opt);
+    },
+
     populate: function (items) {
-        BI.FlexCenterLayout.superclass.populate.apply(this, arguments);
+        this.wrapper.populate(items);
-        this._mount();
     }
 });
 BI.shortcut("bi.flex_center_adapt", BI.FlexCenterLayout);

src/core/wrapper/layout/flex/wrapper/flex.wrapper.center.js

@@ -9,44 +9,45 @@ BI.FlexWrapperCenterLayout = BI.inherit(BI.Layout, {
     props: function () {
         return BI.extend(BI.FlexWrapperCenterLayout.superclass.props.apply(this, arguments), {
             baseCls: "bi-flex-scrollable-center-adapt-layout clearfix",
-            scrollable: true
+            horizontalAlign: BI.HorizontalAlign.Center,
+            verticalAlign: BI.VerticalAlign.Middle,
+            columnSize: [],
+            scrollx: false,
+            scrollable: true,
+            hgap: 0,
+            vgap: 0,
+            lgap: 0,
+            rgap: 0,
+            tgap: 0,
+            bgap: 0
         });
     },
     render: function () {
-        BI.FlexWrapperCenterLayout.superclass.render.apply(this, arguments);
+        var self = this, o = this.options;
-        this.$wrapper = BI.Widget._renderEngine.createElement("<div>").addClass("flex-scrollable-center-adapt-layout-wrapper");
+        return {
-        this.populate(this.options.items);
+            type: "bi.flex_scrollable_horizontal",
+            ref: function (_ref) {
+                self.wrapper = _ref;
             },
-
+            horizontalAlign: o.horizontalAlign,
-    _addElement: function (i, item) {
+            verticalAlign: o.verticalAlign,
-        var o = this.options;
+            scrollx: o.scrollx,
-        var w = BI.FlexWrapperCenterLayout.superclass._addElement.apply(this, arguments);
+            scrolly: o.scrolly,
-        w.element.css({
+            scrollable: o.scrollable,
-            position: "relative",
+            hgap: o.hgap,
-            "margin-left": (i === 0 ? o.hgap : 0) + "px",
+            vgap: o.vgap,
-            "margin-right": o.hgap + "px",
+            lgap: o.lgap,
-            "margin-top": o.vgap + "px",
+            rgap: o.rgap,
-            "margin-bottom": o.vgap + "px"
+            items: o.items
-        });
+        };
-        return w;
-    },
-
-    appendFragment: function (frag) {
-        this.$wrapper.append(frag);
-        this.element.append(this.$wrapper);
-    },
-
-    _getWrapper: function () {
-        return this.$wrapper;
     },
 
-    resize: function () {
+    update: function (opt) {
-        // console.log("flex_center_adapt布局不需要resize");
+        return this.wrapper.update(opt);
     },
 
     populate: function (items) {
-        BI.FlexWrapperCenterLayout.superclass.populate.apply(this, arguments);
+        this.wrapper.populate(items);
-        this._mount();
     }
 });
 BI.shortcut("bi.flex_scrollable_center_adapt", BI.FlexWrapperCenterLayout);

src/less/core/wrapper/flex.center.less

@@ -1,37 +0,0 @@
-.bi-flex-center-adapt-layout {
-  display: box; /* OLD - Android 4.4- */
-  display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
-  display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
-  display: -ms-flexbox; /* TWEENER - IE 10 */
-  display: -webkit-flex; /* NEW - Chrome */
-  display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
-
-  /* 09版 */
-  -webkit-box-orient: horizontal;
-  /* 12版 */
-  -webkit-flex-direction: row;
-  -moz-flex-direction: row;
-  -ms-flex-direction: row;
-  -o-flex-direction: row;
-  flex-direction: row;
-
-  /* 09版 */
-  -webkit-box-pack: center;
-  /* 12版 */
-  -webkit-justify-content: center;
-  -moz-justify-content: center;
-  -ms-justify-content: center;
-  -o-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-
-  /* 09版 */
-  -webkit-box-align: center;
-  /* 12版 */
-  -webkit-align-items: center;
-  -moz-align-items: center;
-  -ms-flex-align: center;
-  -ms-align-items: center;
-  -o-align-items: center;
-  align-items: center;
-}

src/less/core/wrapper/flex.horizontal.less

@@ -111,15 +111,33 @@
     -o-flex-direction: column;
     flex-direction: column;
 
+    &.v-middle {
       /* 09版 */
       -webkit-box-pack: center;
       /* 12版 */
       -webkit-justify-content: center;
       -moz-justify-content: center;
       -ms-justify-content: center;
-    -ms-flex-pack: center;
       -o-justify-content: center;
+      -ms-flex-pack: center;
       justify-content: center;
+    }
+
+    &.v-bottom {
+      /* 09版 */
+      -webkit-box-pack: flex-end;
+      /* 12版 */
+      -webkit-justify-content: flex-end;
+      -moz-justify-content: flex-end;
+      -ms-justify-content: flex-end;
+      -o-justify-content: flex-end;
+      -ms-flex-pack: flex-end;
+      justify-content: flex-end;
+    }
+
+    &.v-stretch {
+    }
+
     /* 09版 */
     -webkit-box-align: stretch;
     /* 12版 */

src/less/core/wrapper/flex.vertical.less

@@ -111,6 +111,7 @@
     -o-flex-direction: row;
     flex-direction: row;
 
+    &.h-center {
       /* 09版 */
       -webkit-box-pack: center;
       /* 12版 */
@@ -120,6 +121,23 @@
       -ms-flex-pack: center;
       -o-justify-content: center;
       justify-content: center;
+    }
+
+    &.h-right {
+      /* 09版 */
+      -webkit-box-pack: flex-end;
+      /* 12版 */
+      -webkit-justify-content: flex-end;
+      -moz-justify-content: flex-end;
+      -ms-justify-content: flex-end;
+      -ms-flex-pack: flex-end;
+      -o-justify-content: flex-end;
+      justify-content: flex-end;
+    }
+
+    &.h-stretch {
+    }
+
     /* 09版 */
     -webkit-box-align: stretch;
     /* 12版 */

src/less/core/wrapper/flex.wrapper.center.less

@@ -1,42 +0,0 @@
-.bi-flex-scrollable-center-adapt-layout {
-  & .flex-scrollable-center-adapt-layout-wrapper {
-    display: box; /* OLD - Android 4.4- */
-    display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
-    display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
-    display: -ms-flexbox; /* TWEENER - IE 10 */
-    display: -webkit-flex; /* NEW - Chrome */
-    display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
-    /* 09版 */
-    -webkit-box-orient: horizontal;
-    /* 12版 */
-    -webkit-flex-direction: row;
-    -moz-flex-direction: row;
-    -ms-flex-direction: row;
-    -o-flex-direction: row;
-    flex-direction: row;
-
-    /* 09版 */
-    -webkit-box-pack: center;
-    /* 12版 */
-    -webkit-justify-content: center;
-    -moz-justify-content: center;
-    -ms-justify-content: center;
-    -ms-flex-pack: center;
-    -o-justify-content: center;
-    justify-content: center;
-
-    /* 09版 */
-    -webkit-box-align: center;
-    /* 12版 */
-    -webkit-align-items: center;
-    -moz-align-items: center;
-    -ms-align-items: center;
-    -ms-flex-align: center;
-    -o-align-items: center;
-    align-items: center;
-
-    min-width: 100%;
-    min-height: 100%;
-    float: left;
-  }
-}

src/less/core/wrapper/flex.wrapper.horizontal.less

@@ -110,6 +110,7 @@
       -o-flex-direction: column;
       flex-direction: column;
 
+      &.v-middle {
         /* 09版 */
         -webkit-box-pack: center;
         /* 12版 */
@@ -119,6 +120,23 @@
         -ms-flex-pack: center;
         -o-justify-content: center;
         justify-content: center;
+      }
+
+      &.v-bottom {
+        /* 09版 */
+        -webkit-box-pack: flex-end;
+        /* 12版 */
+        -webkit-justify-content: flex-end;
+        -moz-justify-content: flex-end;
+        -ms-justify-content: flex-end;
+        -ms-flex-pack: flex-end;
+        -o-justify-content: flex-end;
+        justify-content: flex-end;
+      }
+
+      &.v-stretch {
+      }
+
       /* 09版 */
       -webkit-box-align: stretch;
       /* 12版 */

src/less/core/wrapper/flex.wrapper.vertical.less

@@ -57,6 +57,7 @@
       -o-align-items: center;
       align-items: center;
     }
+
     &.h-right {
       /* 09版 */
       -webkit-box-align: flex-end;
@@ -68,6 +69,7 @@
       -o-align-items: flex-end;
       align-items: flex-end;
     }
+
     &.h-stretch {
       /* 09版 */
       -webkit-box-align: stretch;
@@ -111,6 +113,7 @@
       -o-flex-direction: row;
       flex-direction: row;
 
+      &.h-center {
         /* 09版 */
         -webkit-box-pack: center;
         /* 12版 */
@@ -120,6 +123,23 @@
         -ms-flex-pack: center;
         -o-justify-content: center;
         justify-content: center;
+      }
+
+      &.h-right {
+        /* 09版 */
+        -webkit-box-pack: flex-end;
+        /* 12版 */
+        -webkit-justify-content: flex-end;
+        -moz-justify-content: flex-end;
+        -ms-justify-content: flex-end;
+        -ms-flex-pack: flex-end;
+        -o-justify-content: flex-end;
+        justify-content: flex-end;
+      }
+
+      &.h-stretch {
+      }
+
       /* 09版 */
       -webkit-box-align: stretch;
       /* 12版 */

src/less/core/wrapper/inline.center.less

@@ -1,13 +1,15 @@
-.bi-inline-center-adapt-layout{
+.bi-inline-center-adapt-layout {
-  &:after{
+  &:after {
-    display:inline-block;
+    display: inline-block;
-    width:0;
+    width: 0;
-    min-height:100%;
+    min-height: 100%;
-    vertical-align:middle;
+    vertical-align: middle;
-    content:' ';
+    content: ' ';
   }
+
   & > .inline-center-adapt-item {
     display: inline-block;
+
     &.x-icon {
       display: inline-block !important;
     }

src/less/core/wrapper/inline.horizontal.less

@@ -0,0 +1,23 @@
+.bi-inline-horizontal-adapt-layout {
+  &:after {
+    display: inline-block;
+    width: 0;
+    min-height: 100%;
+    vertical-align: middle;
+    content: ' ';
+  }
+
+  & > .inline-horizontal-adapt-item {
+    display: inline-block;
+
+    &.x-icon {
+      display: inline-block !important;
+    }
+  }
+
+  & > .bi-combo {
+    &.bi-combo-popup {
+      display: inline-block !important;
+    }
+  }
+}

src/less/core/wrapper/inline.vertical.less

@@ -1,14 +1,15 @@
-.bi-inline-vertical-adapt-layout{
+.bi-inline-vertical-adapt-layout {
-  &:after{
+  &:after {
-    display:inline-block;
+    display: inline-block;
-    width:0;
+    width: 0;
-    min-height:100%;
+    min-height: 100%;
-    vertical-align:middle;
+    vertical-align: middle;
-    content:' ';
+    content: ' ';
   }
 
   & > .inline-vertical-adapt-item {
     display: inline-block;
+
     &.x-icon {
       display: inline-block !important;
     }