shineout 1.6.6 → 1.7.0-rc.12

package/css/Alert/styles/alert.css

@@ -3,7 +3,7 @@
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
-  padding: 8px 16px;
+  padding: var(--alert-padding-y, 15px) var(--alert-padding-x, 16px);
   margin-bottom: 20px;
   border: var(--alert-border-width, 1px) solid transparent;
   border-radius: var(--alert-border-radius, 4px);
@@ -23,14 +23,14 @@
   color: inherit;
 }
 .so-alert-with-close {
-  padding-right: 36px;
+  padding-right: calc(var(--alert-padding-x, 16px) + 20px);
 }
 .so-alert-link {
   font-weight: bold;
 }
 .so-alert-close {
   position: absolute;
-  top: 8px;
+  top: var(--alert-padding-y, 15px);
   right: 12px;
   display: block;
 }
@@ -52,7 +52,7 @@
 }
 .so-alert-icon {
   display: block;
-  margin-top: 2px;
+  margin-top: var(--alert-icon-margin-top, 2px);
 }
 .so-alert-content {
   -webkit-box-flex: 1;

package/css/Button/styles/button.css

@@ -69,12 +69,42 @@ fieldset[disabled] a.so-button {
   -webkit-transition: all 0.15s ease-in-out;
   transition: all 0.15s ease-in-out;
 }
+@-webkit-keyframes btn-focus-default {
+  0% {
+    -webkit-box-shadow: 0 0 0 0 var(--gray-300-fade-60, rgba(222, 226, 230, 0.6));
+            box-shadow: 0 0 0 0 var(--gray-300-fade-60, rgba(222, 226, 230, 0.6));
+  }
+  50% {
+    -webkit-box-shadow: 0 0 0 0.4em var(--gray-300-fade-60, rgba(222, 226, 230, 0.6));
+            box-shadow: 0 0 0 0.4em var(--gray-300-fade-60, rgba(222, 226, 230, 0.6));
+  }
+  100% {
+    -webkit-box-shadow: 0 0 0 0.8em var(--gray-300-fade-60, rgba(222, 226, 230, 0.6));
+            box-shadow: 0 0 0 0.8em var(--gray-300-fade-60, rgba(222, 226, 230, 0.6));
+  }
+}
+@keyframes btn-focus-default {
+  0% {
+    -webkit-box-shadow: 0 0 0 0 var(--gray-300-fade-60, rgba(222, 226, 230, 0.6));
+            box-shadow: 0 0 0 0 var(--gray-300-fade-60, rgba(222, 226, 230, 0.6));
+  }
+  50% {
+    -webkit-box-shadow: 0 0 0 0.4em var(--gray-300-fade-60, rgba(222, 226, 230, 0.6));
+            box-shadow: 0 0 0 0.4em var(--gray-300-fade-60, rgba(222, 226, 230, 0.6));
+  }
+  100% {
+    -webkit-box-shadow: 0 0 0 0.8em var(--gray-300-fade-60, rgba(222, 226, 230, 0.6));
+            box-shadow: 0 0 0 0.8em var(--gray-300-fade-60, rgba(222, 226, 230, 0.6));
+  }
+}
 .so-button-default:focus,
 .so-button-default:hover {
+  border-color: var(--primary-color, #3399ff);
   background-color: #fff;
   color: var(--button-default-text-color, #333);
 }
 .so-button-default:active {
+  border-color: var(--primary-color, #3399ff);
   -webkit-animation: btn-focus-default 0.4s ease-out;
           animation: btn-focus-default 0.4s ease-out;
   background-color: #fff;
@@ -148,12 +178,42 @@ fieldset[disabled] .so-button-default.so-button-outline:not(.so-button-disabled)
   -webkit-transition: all 0.15s ease-in-out;
   transition: all 0.15s ease-in-out;
 }
+@-webkit-keyframes btn-focus-primary {
+  0% {
+    -webkit-box-shadow: 0 0 0 0 var(--primary-color-dark-5_fade-60, rgba(25, 140, 255, 0.6));
+            box-shadow: 0 0 0 0 var(--primary-color-dark-5_fade-60, rgba(25, 140, 255, 0.6));
+  }
+  50% {
+    -webkit-box-shadow: 0 0 0 0.4em var(--primary-color-dark-5_fade-0, rgba(25, 140, 255, 0));
+            box-shadow: 0 0 0 0.4em var(--primary-color-dark-5_fade-0, rgba(25, 140, 255, 0));
+  }
+  100% {
+    -webkit-box-shadow: 0 0 0 0.8em var(--primary-color-dark-5_fade-0, rgba(25, 140, 255, 0));
+            box-shadow: 0 0 0 0.8em var(--primary-color-dark-5_fade-0, rgba(25, 140, 255, 0));
+  }
+}
+@keyframes btn-focus-primary {
+  0% {
+    -webkit-box-shadow: 0 0 0 0 var(--primary-color-dark-5_fade-60, rgba(25, 140, 255, 0.6));
+            box-shadow: 0 0 0 0 var(--primary-color-dark-5_fade-60, rgba(25, 140, 255, 0.6));
+  }
+  50% {
+    -webkit-box-shadow: 0 0 0 0.4em var(--primary-color-dark-5_fade-0, rgba(25, 140, 255, 0));
+            box-shadow: 0 0 0 0.4em var(--primary-color-dark-5_fade-0, rgba(25, 140, 255, 0));
+  }
+  100% {
+    -webkit-box-shadow: 0 0 0 0.8em var(--primary-color-dark-5_fade-0, rgba(25, 140, 255, 0));
+            box-shadow: 0 0 0 0.8em var(--primary-color-dark-5_fade-0, rgba(25, 140, 255, 0));
+  }
+}
 .so-button-primary:focus,
 .so-button-primary:hover {
+  border-color: var(--primary-color, #3399ff);
   background-color: var(--primary-color-dark-btn-hover, #007fff);
   color: #fff;
 }
 .so-button-primary:active {
+  border-color: var(--primary-color, #3399ff);
   -webkit-animation: btn-focus-primary 0.4s ease-out;
           animation: btn-focus-primary 0.4s ease-out;
   background-color: var(--primary-color-dark-btn-hover, #007fff);
@@ -242,10 +302,12 @@ fieldset[disabled] .so-button-primary.so-button-outline:not(.so-button-disabled)
 }
 .so-button-secondary:focus,
 .so-button-secondary:hover {
+  border-color: var(--secondary-color, #999999);
   background-color: var(--secondary-color-dark-btn-hover, #808080);
   color: #fff;
 }
 .so-button-secondary:active {
+  border-color: var(--secondary-color, #999999);
   -webkit-animation: btn-focus-secondary 0.4s ease-out;
           animation: btn-focus-secondary 0.4s ease-out;
   background-color: var(--secondary-color-dark-btn-hover, #808080);
@@ -304,12 +366,42 @@ fieldset[disabled] .so-button-secondary.so-button-outline:not(.so-button-disable
   -webkit-transition: all 0.15s ease-in-out;
   transition: all 0.15s ease-in-out;
 }
+@-webkit-keyframes btn-focus-success {
+  0% {
+    -webkit-box-shadow: 0 0 0 0 var(--success-color-dark-5_fade-60, rgba(0, 179, 89, 0.6));
+            box-shadow: 0 0 0 0 var(--success-color-dark-5_fade-60, rgba(0, 179, 89, 0.6));
+  }
+  50% {
+    -webkit-box-shadow: 0 0 0 0.4em var(--success-color-dark-5_fade-0, rgba(0, 179, 89, 0));
+            box-shadow: 0 0 0 0.4em var(--success-color-dark-5_fade-0, rgba(0, 179, 89, 0));
+  }
+  100% {
+    -webkit-box-shadow: 0 0 0 0.8em var(--success-color-dark-5_fade-0, rgba(0, 179, 89, 0));
+            box-shadow: 0 0 0 0.8em var(--success-color-dark-5_fade-0, rgba(0, 179, 89, 0));
+  }
+}
+@keyframes btn-focus-success {
+  0% {
+    -webkit-box-shadow: 0 0 0 0 var(--success-color-dark-5_fade-60, rgba(0, 179, 89, 0.6));
+            box-shadow: 0 0 0 0 var(--success-color-dark-5_fade-60, rgba(0, 179, 89, 0.6));
+  }
+  50% {
+    -webkit-box-shadow: 0 0 0 0.4em var(--success-color-dark-5_fade-0, rgba(0, 179, 89, 0));
+            box-shadow: 0 0 0 0.4em var(--success-color-dark-5_fade-0, rgba(0, 179, 89, 0));
+  }
+  100% {
+    -webkit-box-shadow: 0 0 0 0.8em var(--success-color-dark-5_fade-0, rgba(0, 179, 89, 0));
+            box-shadow: 0 0 0 0.8em var(--success-color-dark-5_fade-0, rgba(0, 179, 89, 0));
+  }
+}
 .so-button-success:focus,
 .so-button-success:hover {
+  border-color: var(--success-color, #00cc66);
   background-color: var(--success-color-dark-btn-hover, #00994d);
   color: #fff;
 }
 .so-button-success:active {
+  border-color: var(--success-color, #00cc66);
   -webkit-animation: btn-focus-success 0.4s ease-out;
           animation: btn-focus-success 0.4s ease-out;
   background-color: var(--success-color-dark-btn-hover, #00994d);
@@ -368,12 +460,42 @@ fieldset[disabled] .so-button-success.so-button-outline:not(.so-button-disabled)
   -webkit-transition: all 0.15s ease-in-out;
   transition: all 0.15s ease-in-out;
 }
+@-webkit-keyframes btn-focus-info {
+  0% {
+    -webkit-box-shadow: 0 0 0 0 var(--info-color-dark-5_fade-60, rgba(20, 142, 161, 0.6));
+            box-shadow: 0 0 0 0 var(--info-color-dark-5_fade-60, rgba(20, 142, 161, 0.6));
+  }
+  50% {
+    -webkit-box-shadow: 0 0 0 0.4em var(--info-color-dark-5_fade-0, rgba(20, 142, 161, 0));
+            box-shadow: 0 0 0 0.4em var(--info-color-dark-5_fade-0, rgba(20, 142, 161, 0));
+  }
+  100% {
+    -webkit-box-shadow: 0 0 0 0.8em var(--info-color-dark-5_fade-0, rgba(20, 142, 161, 0));
+            box-shadow: 0 0 0 0.8em var(--info-color-dark-5_fade-0, rgba(20, 142, 161, 0));
+  }
+}
+@keyframes btn-focus-info {
+  0% {
+    -webkit-box-shadow: 0 0 0 0 var(--info-color-dark-5_fade-60, rgba(20, 142, 161, 0.6));
+            box-shadow: 0 0 0 0 var(--info-color-dark-5_fade-60, rgba(20, 142, 161, 0.6));
+  }
+  50% {
+    -webkit-box-shadow: 0 0 0 0.4em var(--info-color-dark-5_fade-0, rgba(20, 142, 161, 0));
+            box-shadow: 0 0 0 0.4em var(--info-color-dark-5_fade-0, rgba(20, 142, 161, 0));
+  }
+  100% {
+    -webkit-box-shadow: 0 0 0 0.8em var(--info-color-dark-5_fade-0, rgba(20, 142, 161, 0));
+            box-shadow: 0 0 0 0.8em var(--info-color-dark-5_fade-0, rgba(20, 142, 161, 0));
+  }
+}
 .so-button-info:focus,
 .so-button-info:hover {
+  border-color: var(--info-color, #17a2b8);
   background-color: var(--info-color-dark-btn-hover, #117a8b);
   color: #fff;
 }
 .so-button-info:active {
+  border-color: var(--info-color, #17a2b8);
   -webkit-animation: btn-focus-info 0.4s ease-out;
           animation: btn-focus-info 0.4s ease-out;
   background-color: var(--info-color-dark-btn-hover, #117a8b);
@@ -432,12 +554,42 @@ fieldset[disabled] .so-button-info.so-button-outline:not(.so-button-disabled):ac
   -webkit-transition: all 0.15s ease-in-out;
   transition: all 0.15s ease-in-out;
 }
+@-webkit-keyframes btn-focus-warning {
+  0% {
+    -webkit-box-shadow: 0 0 0 0 var(--warning-color-dark-5_fade-60, rgba(230, 138, 0, 0.6));
+            box-shadow: 0 0 0 0 var(--warning-color-dark-5_fade-60, rgba(230, 138, 0, 0.6));
+  }
+  50% {
+    -webkit-box-shadow: 0 0 0 0.4em var(--warning-color-dark-5_fade-0, rgba(230, 138, 0, 0));
+            box-shadow: 0 0 0 0.4em var(--warning-color-dark-5_fade-0, rgba(230, 138, 0, 0));
+  }
+  100% {
+    -webkit-box-shadow: 0 0 0 0.8em var(--warning-color-dark-5_fade-0, rgba(230, 138, 0, 0));
+            box-shadow: 0 0 0 0.8em var(--warning-color-dark-5_fade-0, rgba(230, 138, 0, 0));
+  }
+}
+@keyframes btn-focus-warning {
+  0% {
+    -webkit-box-shadow: 0 0 0 0 var(--warning-color-dark-5_fade-60, rgba(230, 138, 0, 0.6));
+            box-shadow: 0 0 0 0 var(--warning-color-dark-5_fade-60, rgba(230, 138, 0, 0.6));
+  }
+  50% {
+    -webkit-box-shadow: 0 0 0 0.4em var(--warning-color-dark-5_fade-0, rgba(230, 138, 0, 0));
+            box-shadow: 0 0 0 0.4em var(--warning-color-dark-5_fade-0, rgba(230, 138, 0, 0));
+  }
+  100% {
+    -webkit-box-shadow: 0 0 0 0.8em var(--warning-color-dark-5_fade-0, rgba(230, 138, 0, 0));
+            box-shadow: 0 0 0 0.8em var(--warning-color-dark-5_fade-0, rgba(230, 138, 0, 0));
+  }
+}
 .so-button-warning:focus,
 .so-button-warning:hover {
+  border-color: var(--warning-color, #ff9900);
   background-color: var(--warning-color-dark-btn-hover, #cc7a00);
   color: #fff;
 }
 .so-button-warning:active {
+  border-color: var(--warning-color, #ff9900);
   -webkit-animation: btn-focus-warning 0.4s ease-out;
           animation: btn-focus-warning 0.4s ease-out;
   background-color: var(--warning-color-dark-btn-hover, #cc7a00);
@@ -497,15 +649,45 @@ fieldset[disabled] .so-button-warning.so-button-outline:not(.so-button-disabled)
   -webkit-transition: all 0.15s ease-in-out;
   transition: all 0.15s ease-in-out;
 }
+@-webkit-keyframes btn-focus-danger {
+  0% {
+    -webkit-box-shadow: 0 0 0 0 var(--danger-color-dark-5_fade-60, rgba(247, 61, 61, 0.6));
+            box-shadow: 0 0 0 0 var(--danger-color-dark-5_fade-60, rgba(247, 61, 61, 0.6));
+  }
+  50% {
+    -webkit-box-shadow: 0 0 0 0.4em var(--danger-color-dark-5_fade-0, rgba(247, 61, 61, 0));
+            box-shadow: 0 0 0 0.4em var(--danger-color-dark-5_fade-0, rgba(247, 61, 61, 0));
+  }
+  100% {
+    -webkit-box-shadow: 0 0 0 0.8em var(--danger-color-dark-5_fade-0, rgba(247, 61, 61, 0));
+            box-shadow: 0 0 0 0.8em var(--danger-color-dark-5_fade-0, rgba(247, 61, 61, 0));
+  }
+}
+@keyframes btn-focus-danger {
+  0% {
+    -webkit-box-shadow: 0 0 0 0 var(--danger-color-dark-5_fade-60, rgba(247, 61, 61, 0.6));
+            box-shadow: 0 0 0 0 var(--danger-color-dark-5_fade-60, rgba(247, 61, 61, 0.6));
+  }
+  50% {
+    -webkit-box-shadow: 0 0 0 0.4em var(--danger-color-dark-5_fade-0, rgba(247, 61, 61, 0));
+            box-shadow: 0 0 0 0.4em var(--danger-color-dark-5_fade-0, rgba(247, 61, 61, 0));
+  }
+  100% {
+    -webkit-box-shadow: 0 0 0 0.8em var(--danger-color-dark-5_fade-0, rgba(247, 61, 61, 0));
+            box-shadow: 0 0 0 0.8em var(--danger-color-dark-5_fade-0, rgba(247, 61, 61, 0));
+  }
+}
 .so-button-error:focus,
 .so-button-danger:focus,
 .so-button-error:hover,
 .so-button-danger:hover {
+  border-color: var(--danger-color, #f85555);
   background-color: var(--danger-color-dark-btn-hover, #f62424);
   color: #fff;
 }
 .so-button-error:active,
 .so-button-danger:active {
+  border-color: var(--danger-color, #f85555);
   -webkit-animation: btn-focus-danger 0.4s ease-out;
           animation: btn-focus-danger 0.4s ease-out;
   background-color: var(--danger-color-dark-btn-hover, #f62424);
@@ -774,6 +956,13 @@ fieldset[disabled] .so-button-link:focus {
 .so-button-group .so-button.so-button-outline:not(.so-button-disabled):focus:before {
   border-left-color: inherit;
 }
+.so-button-group .so-button.so-button-outline:not(.so-button-disabled):hover + .so-button:not(.so-button-disabled):before,
+.so-button-group .so-button.so-button-outline:not(.so-button-disabled):active + .so-button:not(.so-button-disabled):before,
+.so-button-group .so-button.so-button-outline:not(.so-button-disabled):focus + .so-button:not(.so-button-disabled):before {
+  height: 0;
+  -webkit-transition: none;
+  transition: none;
+}
 .so-button-from-input-group .so-button:before {
   border-left: none;
 }

package/css/Carousel/index.js

@@ -67,6 +67,15 @@ function (_PureComponent) {
     }
   };
 
+  _proto.componentWillUnmount = function componentWillUnmount() {
+    _PureComponent.prototype.componentWillUnmount.call(this);
+
+    if (this.$timeout) {
+      clearTimeout(this.$timeout);
+      this.$timeout = null;
+    }
+  };
+
   _proto.setNext = function setNext(next) {
     var _this2 = this;
 

package/css/Cascader/Result.js

@@ -31,7 +31,9 @@ var _Input = _interopRequireDefault(require("./Input"));
 
 var _icons = _interopRequireDefault(require("../icons"));
 
-var _More = _interopRequireDefault(require("../Select/More"));
+var _More = _interopRequireWildcard(require("../Select/More"));
+
+var _element = require("../utils/dom/element");
 
 var _is = require("../utils/is");
 
@@ -73,10 +75,15 @@ function (_PureComponent) {
     var _this;
 
     _this = _PureComponent.call(this, props) || this;
+    _this.state = {
+      more: -1
+    };
     _this.handleNodeClick = _this.handleNodeClick.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
     _this.renderItem = _this.renderItem.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
     _this.removeTargetNode = _this.removeTargetNode.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
     _this.handleUpdate = _this.handleUpdate.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
+    _this.bindResult = _this.bindResult.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
+    _this.resetMore = _this.resetMore.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
     return _this;
   }
 
@@ -85,17 +92,52 @@ function (_PureComponent) {
   _proto.componentDidMount = function componentDidMount() {
     var datum = this.props.datum;
     datum.subscribe(_types.CHANGE_TOPIC, this.handleUpdate);
+    var compressed = this.props.compressed;
+
+    if (compressed) {
+      this.cancelResizeObserver = (0, _element.addResizeObserver)(this.resultEl, this.resetMore);
+    }
+  };
+
+  _proto.componentDidUpdate = function componentDidUpdate(preProps) {
+    var _this$props = this.props,
+        compressed = _this$props.compressed,
+        _this$props$value = _this$props.value,
+        value = _this$props$value === void 0 ? [] : _this$props$value,
+        onFilter = _this$props.onFilter;
+
+    if (compressed) {
+      if ((preProps.value || []).join('') !== value.join('')) {
+        this.resetMore();
+      } else if (value.length && this.shouldResetMore) {
+        this.shouldResetMore = false;
+        this.state.more = (0, _More.getResetMore)(onFilter, this.resultEl, this.resultEl.querySelectorAll("." + (0, _styles3.cascaderClass)('item')));
+        this.forceUpdate();
+      }
+    }
   };
 
   _proto.componentWillUnmount = function componentWillUnmount() {
     var datum = this.props.datum;
     datum.unsubscribe(_types.CHANGE_TOPIC, this.handleUpdate);
+    if (this.cancelResizeObserver) this.cancelResizeObserver();
   };
 
   _proto.handleUpdate = function handleUpdate() {
     this.forceUpdate();
   };
 
+  _proto.bindResult = function bindResult(el) {
+    this.resultEl = el;
+  };
+
+  _proto.resetMore = function resetMore() {
+    if (!this.props.compressed) return;
+    this.shouldResetMore = true;
+    this.state.more = -1;
+    this.forceUpdate();
+  };
+
   _proto.handleNodeClick = function handleNodeClick(data, show) {
     if (show === void 0) {
       show = false;
@@ -150,11 +192,11 @@ function (_PureComponent) {
   };
 
   _proto.renderClear = function renderClear() {
-    var _this$props = this.props,
-        clearable = _this$props.clearable,
-        value = _this$props.value,
-        disabled = _this$props.disabled,
-        onClear = _this$props.onClear;
+    var _this$props2 = this.props,
+        clearable = _this$props2.clearable,
+        value = _this$props2.value,
+        disabled = _this$props2.disabled,
+        onClear = _this$props2.onClear;
     var className = (0, _classnames.default)((0, _styles2.selectClass)('indicator', 'close'), (0, _styles3.cascaderClass)('close'));
 
     if (clearable && value.length > 0 && !disabled) {
@@ -194,30 +236,31 @@ function (_PureComponent) {
   };
 
   _proto.renderMore = function renderMore(list) {
-    var _this$props2 = this.props,
-        selectId = _this$props2.selectId,
-        size = _this$props2.size,
-        compressed = _this$props2.compressed;
-    var firstItem = list[0];
-    return [firstItem, _react.default.createElement(_More.default, {
+    var _this$props3 = this.props,
+        selectId = _this$props3.selectId,
+        size = _this$props3.size,
+        compressed = _this$props3.compressed;
+    var more = this.state.more;
+    return [_react.default.createElement(_More.default, {
       key: "more",
       data: list,
       className: (0, _styles3.cascaderClass)('item', 'item-compressed'),
       popoverClassName: (0, _styles3.cascaderClass)('popover'),
       contentClassName: (0, _styles3.cascaderClass)('result', size),
       dataId: selectId,
+      showNum: more,
       compressed: compressed
     })];
   };
 
   _proto.renderInput = function renderInput() {
-    var _this$props3 = this.props,
-        onFilter = _this$props3.onFilter,
-        focus = _this$props3.focus,
-        trim = _this$props3.trim,
-        focusSelected = _this$props3.focusSelected,
-        bindInput = _this$props3.bindInput,
-        filterText = _this$props3.filterText;
+    var _this$props4 = this.props,
+        onFilter = _this$props4.onFilter,
+        focus = _this$props4.focus,
+        trim = _this$props4.trim,
+        focusSelected = _this$props4.focusSelected,
+        bindInput = _this$props4.bindInput,
+        filterText = _this$props4.filterText;
     return _react.default.createElement(_Input.default, {
       filterText: filterText,
       ref: bindInput,
@@ -230,9 +273,9 @@ function (_PureComponent) {
   };
 
   _proto.renderPlaceholder = function renderPlaceholder() {
-    var _this$props4 = this.props,
-        focus = _this$props4.focus,
-        onFilter = _this$props4.onFilter;
+    var _this$props5 = this.props,
+        focus = _this$props5.focus,
+        onFilter = _this$props5.onFilter;
 
     if (focus && onFilter) {
       return this.renderInput();
@@ -245,10 +288,10 @@ function (_PureComponent) {
   };
 
   _proto.renderIndicator = function renderIndicator() {
-    var _this$props5 = this.props,
-        multiple = _this$props5.multiple,
-        showArrow = _this$props5.showArrow,
-        compressed = _this$props5.compressed;
+    var _this$props6 = this.props,
+        multiple = _this$props6.multiple,
+        showArrow = _this$props6.showArrow,
+        compressed = _this$props6.compressed;
     if (!showArrow || multiple && !compressed) return null;
     var showCaret = !multiple; // eslint-disable-next-line
 
@@ -260,14 +303,14 @@ function (_PureComponent) {
   };
 
   _proto.renderResult = function renderResult() {
-    var _this$props6 = this.props,
-        datum = _this$props6.datum,
-        value = _this$props6.value,
-        renderItem = _this$props6.renderItem,
-        renderResult = _this$props6.renderResult,
-        compressed = _this$props6.compressed,
-        focus = _this$props6.focus,
-        onFilter = _this$props6.onFilter;
+    var _this$props7 = this.props,
+        datum = _this$props7.datum,
+        value = _this$props7.value,
+        renderItem = _this$props7.renderItem,
+        renderResult = _this$props7.renderResult,
+        compressed = _this$props7.compressed,
+        focus = _this$props7.focus,
+        onFilter = _this$props7.onFilter;
     var nodes = value.map(function (v) {
       return datum.getDataById(v);
     });
@@ -283,7 +326,7 @@ function (_PureComponent) {
 
     var items = this.handleNode(nodes, render);
 
-    if (compressed && items.length > 1) {
+    if (compressed) {
       items = this.renderMore(items);
     }
 
@@ -297,13 +340,14 @@ function (_PureComponent) {
   };
 
   _proto.render = function render() {
-    var _this$props7 = this.props,
-        style = _this$props7.style,
-        value = _this$props7.value,
-        compressed = _this$props7.compressed,
-        multiple = _this$props7.multiple;
+    var _this$props8 = this.props,
+        style = _this$props8.style,
+        value = _this$props8.value,
+        compressed = _this$props8.compressed,
+        multiple = _this$props8.multiple;
     var result = value.length === 0 ? this.renderPlaceholder() : this.renderResult();
     return _react.default.createElement("div", {
+      ref: this.bindResult,
       className: (0, _styles3.cascaderClass)('result', multiple && compressed && 'compressed'),
       style: style
     }, result, this.renderIndicator(), this.renderClear());

package/css/Cascader/styles/cascader.css

@@ -1,6 +1,9 @@
 .so-cascader {
   position: relative;
   width: 100%;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
 }
 .so-cascader:focus {
   outline: none;
@@ -15,6 +18,9 @@
       flex-flow: wrap;
   padding: 6px 24px 0 12px;
   overflow-y: auto;
+  -webkit-box-flex: 1;
+      -ms-flex-positive: 1;
+          flex-grow: 1;
 }
 .so-cascader-result .so-input-placeholder {
   color: var(--input-placeholder-color, #999);
@@ -40,7 +46,6 @@
 }
 .so-cascader-result span-compressed > span,
 .so-cascader-result .so-cascader-item-compressed > span {
-  vertical-align: middle;
   letter-spacing: 2px;
   padding: 0;
   margin: 0;
@@ -143,6 +148,10 @@ div.so-cascader-options {
   display: inline-flex;
 }
 .so-cascader-result.so-cascader-compressed {
+  -webkit-box-flex: 1;
+      -ms-flex-positive: 1;
+          flex-grow: 1;
+  width: 0;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
@@ -152,16 +161,20 @@ div.so-cascader-options {
           flex-direction: row;
   -ms-flex-wrap: nowrap;
       flex-wrap: nowrap;
+  -webkit-box-align: start;
+      -ms-flex-align: start;
+          align-items: flex-start;
   padding: 6px 34px 0 12px;
 }
-.so-cascader-result.so-cascader-compressed .so-cascader-item:first-child {
+.so-cascader-result.so-cascader-compressed .so-cascader-item {
   text-overflow: ellipsis;
   overflow: hidden;
   white-space: nowrap;
-  -webkit-box-flex: 1;
-      -ms-flex-positive: 1;
-          flex-grow: 1;
-  width: 0;
+  -ms-flex-negative: 0;
+      flex-shrink: 0;
+}
+.so-cascader-result.so-cascader-compressed .so-cascader-input {
+  white-space: nowrap;
 }
 .so-cascader-result.so-cascader-compressed .so-cascader-close {
   right: 9px;

package/css/Checkbox/styles/checkinput.css

@@ -215,12 +215,42 @@ fieldset[disabled] .so-checkinput-button .so-checkinput.so-checkinput-radio:acti
 .so-checkinput-button .so-checkinput.so-checkinput-checked:not(.so-checkinput-disabled) {
   z-index: 1;
 }
+@-webkit-keyframes btn-focus-primary {
+  0% {
+    -webkit-box-shadow: 0 0 0 0 var(--primary-color-dark-5_fade-60, rgba(25, 140, 255, 0.6));
+            box-shadow: 0 0 0 0 var(--primary-color-dark-5_fade-60, rgba(25, 140, 255, 0.6));
+  }
+  50% {
+    -webkit-box-shadow: 0 0 0 0.4em var(--primary-color-dark-5_fade-0, rgba(25, 140, 255, 0));
+            box-shadow: 0 0 0 0.4em var(--primary-color-dark-5_fade-0, rgba(25, 140, 255, 0));
+  }
+  100% {
+    -webkit-box-shadow: 0 0 0 0.8em var(--primary-color-dark-5_fade-0, rgba(25, 140, 255, 0));
+            box-shadow: 0 0 0 0.8em var(--primary-color-dark-5_fade-0, rgba(25, 140, 255, 0));
+  }
+}
+@keyframes btn-focus-primary {
+  0% {
+    -webkit-box-shadow: 0 0 0 0 var(--primary-color-dark-5_fade-60, rgba(25, 140, 255, 0.6));
+            box-shadow: 0 0 0 0 var(--primary-color-dark-5_fade-60, rgba(25, 140, 255, 0.6));
+  }
+  50% {
+    -webkit-box-shadow: 0 0 0 0.4em var(--primary-color-dark-5_fade-0, rgba(25, 140, 255, 0));
+            box-shadow: 0 0 0 0.4em var(--primary-color-dark-5_fade-0, rgba(25, 140, 255, 0));
+  }
+  100% {
+    -webkit-box-shadow: 0 0 0 0.8em var(--primary-color-dark-5_fade-0, rgba(25, 140, 255, 0));
+            box-shadow: 0 0 0 0.8em var(--primary-color-dark-5_fade-0, rgba(25, 140, 255, 0));
+  }
+}
 .so-checkinput-button .so-checkinput.so-checkinput-checked:focus,
 .so-checkinput-button .so-checkinput.so-checkinput-checked:hover {
+  border-color: var(--primary-color, #3399ff);
   background-color: var(--primary-color-dark-btn-hover, #007fff);
   color: #fff;
 }
 .so-checkinput-button .so-checkinput.so-checkinput-checked:active {
+  border-color: var(--primary-color, #3399ff);
   -webkit-animation: btn-focus-primary 0.4s ease-out;
           animation: btn-focus-primary 0.4s ease-out;
   background-color: var(--primary-color-dark-btn-hover, #007fff);