@sheinx/shineout-style 3.7.0-beta.8 → 3.7.0

package/cjs/list/list.js

@@ -47,6 +47,9 @@ var listStyle = {
     alignItems: 'center',
     justifyContent: 'center'
   },
+  loadingBottom: {
+    padding: 16
+  },
   empty: {
     display: 'flex',
     justifyContent: 'center',

package/cjs/modal/modal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"modal.d.ts","sourceRoot":"","sources":["modal.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AAE5C,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAKxC,MAAM,MAAM,cAAc,GAAG,MAAM,YAAY,CAAC;AAqJhD,QAAA,MAAM,UAAU,EAAE,QAAQ,CAAC,cAAc,CA6SxC,CAAC;AAEF,eAAe,UAAU,CAAC"}
+{"version":3,"file":"modal.d.ts","sourceRoot":"","sources":["modal.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AAE5C,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAKxC,MAAM,MAAM,cAAc,GAAG,MAAM,YAAY,CAAC;AAqJhD,QAAA,MAAM,UAAU,EAAE,QAAQ,CAAC,cAAc,CA0SxC,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/cjs/modal/modal.js

@@ -191,9 +191,6 @@ var modalStyle = _objectSpread(_objectSpread({
       height: '100vh',
       width: '100vw',
       overflow: 'auto'
-    },
-    '& $body': {
-      minHeight: 'auto'
     }
   },
   wrapperZoom: {

package/cjs/radio/radio.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"radio.d.ts","sourceRoot":"","sources":["radio.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAExC,OAAO,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AAE5C,QAAA,MAAM,UAAU,EAAE,QAAQ,CAAC,MAAM,YAAY,CAiK5C,CAAC;AAEF,eAAe,UAAU,CAAC"}
+{"version":3,"file":"radio.d.ts","sourceRoot":"","sources":["radio.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAExC,OAAO,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AAE5C,QAAA,MAAM,UAAU,EAAE,QAAQ,CAAC,MAAM,YAAY,CAwK5C,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/cjs/radio/radio.js

@@ -30,7 +30,11 @@ var radioStyle = {
       marginRight: 0
     }
   },
-  wrapperSmall: {},
+  wrapperSmall: {
+    '[data-soui-role="form-control"] > $group > &': {
+      marginTop: 1
+    }
+  },
   wrapperLarge: {},
   wrapperChecked: {},
   wrapperDisabled: {
@@ -41,13 +45,16 @@ var radioStyle = {
     position: 'relative',
     boxSizing: 'border-box',
     width: _theme.default.radioIconWidth,
+    minWidth: _theme.default.radioIconWidth,
     height: _theme.default.radioIconWidth,
     '$wrapperSmall &': {
       width: _theme.default.radioSmallIconWidth,
+      minWidth: _theme.default.radioSmallIconWidth,
       height: _theme.default.radioSmallIconWidth
     },
     '$wrapperLarge &': {
       width: _theme.default.radioLargeIconWidth,
+      minWidth: _theme.default.radioLargeIconWidth,
       height: _theme.default.radioLargeIconWidth
     },
     marginRight: _theme.default.radioIconGap,

package/cjs/select/select.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"select.d.ts","sourceRoot":"","sources":["select.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAC7C,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAGxC,MAAM,MAAM,eAAe,GAAG,MAAM,aAAa,CAAC;AAuDlD,QAAA,MAAM,WAAW,EAAE,QAAQ,CAAC,eAAe,CAshB1C,CAAC;AAEF,eAAe,WAAW,CAAC"}
+{"version":3,"file":"select.d.ts","sourceRoot":"","sources":["select.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAC7C,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAGxC,MAAM,MAAM,eAAe,GAAG,MAAM,aAAa,CAAC;AAuDlD,QAAA,MAAM,WAAW,EAAE,QAAQ,CAAC,eAAe,CA2hB1C,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/cjs/select/select.js

@@ -163,6 +163,7 @@ var selectStyle = _objectSpread(_objectSpread({
   result: {
     display: 'flex',
     flex: '1',
+    height: '100%',
     minWidth: 0,
     alignItems: 'center',
     lineHeight: _theme.default.lineHeightDynamic
@@ -442,10 +443,14 @@ var selectStyle = _objectSpread(_objectSpread({
     visibility: 'hidden'
   },
   moreWrapper: {
+    width: 'max-content',
     maxWidth: 400,
     maxHeight: 160,
     overflow: 'auto',
     padding: "".concat(_theme.default.selectMorePaddingY, " ").concat(_theme.default.selectMorePaddingX),
+    '& $tag': {
+      maxWidth: 'none'
+    },
     '&:hover': {
       '& $clearIcon': {
         display: 'inline-block'

package/cjs/skeleton/index.d.ts

@@ -0,0 +1,5 @@
+import skeletonStyle from './skeleton';
+declare const useSkeletonStyle: () => import("jss").Classes<keyof import("@sheinx/base").SkeletonClasses>;
+export { skeletonStyle, useSkeletonStyle };
+export default useSkeletonStyle;
+//# sourceMappingURL=index.d.ts.map

package/cjs/skeleton/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":"AACA,OAAO,aAAa,MAAM,YAAY,CAAC;AAEvC,QAAA,MAAM,gBAAgB,2EAAoC,CAAC;AAC3D,OAAO,EAAE,aAAa,EAAE,gBAAgB,EAAE,CAAC;AAC3C,eAAe,gBAAgB,CAAC"}

package/cjs/skeleton/index.js

@@ -0,0 +1,19 @@
+"use strict";
+"use client";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+Object.defineProperty(exports, "skeletonStyle", {
+  enumerable: true,
+  get: function get() {
+    return _skeleton.default;
+  }
+});
+exports.useSkeletonStyle = void 0;
+var _jssStyle = require("../jss-style");
+var _skeleton = _interopRequireDefault(require("./skeleton"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var useSkeletonStyle = exports.useSkeletonStyle = (0, _jssStyle.styled)(_skeleton.default, 'skeleton');
+var _default = exports.default = useSkeletonStyle;

package/cjs/skeleton/skeleton.d.ts

@@ -0,0 +1,6 @@
+import { JsStyles } from '../jss-style';
+import { SkeletonClasses } from '@sheinx/base';
+export type SkeletonClassType = keyof SkeletonClasses;
+declare const skeletonStyle: JsStyles<SkeletonClassType>;
+export default skeletonStyle;
+//# sourceMappingURL=skeleton.d.ts.map

package/cjs/skeleton/skeleton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"skeleton.d.ts","sourceRoot":"","sources":["skeleton.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AACxC,OAAO,EAAE,eAAe,EAAE,MAAM,cAAc,CAAA;AAU9C,MAAM,MAAM,iBAAiB,GAAG,MAAM,eAAe,CAAC;AAEtD,QAAA,MAAM,aAAa,EAAE,QAAQ,CAAC,iBAAiB,CA0F9C,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/cjs/skeleton/skeleton.js

@@ -0,0 +1,110 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _theme = _interopRequireDefault(require("@sheinx/theme"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); } // import token from '@sheinx/theme';
+var animation = {
+  '@keyframes skeleton-animation': {
+    '0%': {
+      backgroundPosition: '100% 50%'
+    },
+    '100%': {
+      backgroundPosition: '0 50%'
+    }
+  }
+};
+var skeletonStyle = _objectSpread(_objectSpread({}, animation), {}, {
+  rootClass: {},
+  wrapper: {
+    display: 'flex'
+  },
+  animation: {
+    '& $textItem, & $image, & $buttonItem': {
+      background: "linear-gradient(90deg, ".concat(_theme.default.skeletonAnimationFromColor, " 25%, ").concat(_theme.default.skeletonAnimationToColor, " 37%, ").concat(_theme.default.skeletonAnimationFromColor, " 63%)"),
+      backgroundSize: '400% 100%',
+      animation: '$skeleton-animation 1.4s ease infinite'
+    }
+  },
+  content: {
+    flex: 1,
+    minWidth: 0
+  },
+  text: {
+    margin: 0,
+    padding: 0,
+    listStyle: 'none'
+  },
+  textItem: {
+    height: _theme.default.skeletonHeight,
+    marginBottom: _theme.default.skeletonMargin,
+    backgroundColor: _theme.default.skeletonBackgroundColor,
+    borderRadius: _theme.default.skeletonBackgroundRadius,
+    '&:last-child': {
+      marginBottom: 0
+    }
+  },
+  image: {
+    width: 48,
+    height: 48,
+    backgroundColor: _theme.default.skeletonBackgroundColor
+  },
+  imageLeft: {
+    marginRight: _theme.default.skeletonMargin
+  },
+  imageRight: {
+    marginLeft: _theme.default.skeletonMargin
+  },
+  imageCircle: {
+    borderRadius: '50%'
+  },
+  imageSquare: {
+    borderRadius: _theme.default.skeletonBackgroundRadius
+  },
+  imageSmall: {
+    width: 32,
+    height: 32
+  },
+  imageLarge: {
+    width: 64,
+    height: 64
+  },
+  button: {
+    display: 'flex',
+    '$text + &': {
+      marginTop: _theme.default.skeletonMargin
+    }
+  },
+  buttonItem: {
+    width: 80,
+    height: 32,
+    backgroundColor: _theme.default.skeletonBackgroundColor,
+    borderRadius: _theme.default.skeletonBackgroundRadius,
+    '& + &': {
+      marginLeft: _theme.default.skeletonMargin
+    }
+  },
+  buttonLeft: {
+    justifyContent: 'flex-start'
+  },
+  buttonRight: {
+    justifyContent: 'flex-end'
+  },
+  buttonSmall: {
+    width: 64,
+    height: 24
+  },
+  buttonLarge: {
+    width: 96,
+    height: 40
+  }
+});
+var _default = exports.default = skeletonStyle;

package/cjs/switch/switch.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"switch.d.ts","sourceRoot":"","sources":["switch.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAC7C,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAaxC,QAAA,MAAM,WAAW,EAAE,QAAQ,CAAC,MAAM,aAAa,CAwL9C,CAAC;AAEF,eAAe,WAAW,CAAC"}
+{"version":3,"file":"switch.d.ts","sourceRoot":"","sources":["switch.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAC7C,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAaxC,QAAA,MAAM,WAAW,EAAE,QAAQ,CAAC,MAAM,aAAa,CA2L9C,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/cjs/switch/switch.js

@@ -62,7 +62,10 @@ var switchStyle = _objectSpread(_objectSpread({
       padding: "".concat(_theme.default.switchSmallPaddingY, " ").concat(_theme.default.switchSmallPaddingX),
       minWidth: _theme.default.switchSmallWidth,
       borderRadius: "calc( ".concat(_theme.default.switchSmallCircleSize, " / 2 + ").concat(_theme.default.switchSmallPaddingY, " )"),
-      fontSize: _theme.default.switchSmallFontSize
+      fontSize: _theme.default.switchSmallFontSize,
+      '[data-soui-role="form-control"] > &': {
+        marginTop: 8
+      }
     },
     '$wrapperLarge&': {
       height: "calc( ".concat(_theme.default.switchLargeCircleSize, " + ").concat(_theme.default.switchLargePaddingY, " * 2 )"),

package/cjs/table/table.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"table.d.ts","sourceRoot":"","sources":["table.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AAC5C,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAUxC,MAAM,MAAM,cAAc,GAAG,MAAM,YAAY,CAAC;AAUhD,QAAA,MAAM,UAAU,EAAE,QAAQ,CAAC,cAAc,CA+jBxC,CAAC;AAEF,eAAe,UAAU,CAAC"}
+{"version":3,"file":"table.d.ts","sourceRoot":"","sources":["table.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AAC5C,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAWxC,MAAM,MAAM,cAAc,GAAG,MAAM,YAAY,CAAC;AAUhD,QAAA,MAAM,UAAU,EAAE,QAAQ,CAAC,cAAc,CAglBxC,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/cjs/table/table.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _theme = _interopRequireDefault(require("@sheinx/theme"));
+var _mixin = require("../mixin");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
@@ -213,7 +214,7 @@ var tableStyle = _objectSpread(_objectSpread({
     '$wrapper & table > tfoot': {
       position: 'sticky',
       bottom: 0,
-      zIndex: fixedIndex
+      zIndex: fixedFixedIndex + 1
     }
   },
   footWrapper: {
@@ -226,6 +227,23 @@ var tableStyle = _objectSpread(_objectSpread({
       zIndex: fixedIndex + 1
     }
   },
+  scrollY: {
+    '&$headWrapper, &$footWrapper': _objectSpread({
+      overflow: 'hidden scroll'
+    }, (0, _mixin.customScrollBar)({
+      background: 'transparent'
+    }))
+  },
+  scrollX: {
+    '&$headWrapper, &$footWrapper': {
+      overflowX: 'hidden'
+    }
+  },
+  emptyHeader: {
+    position: 'sticky',
+    top: 0,
+    zIndex: 1
+  },
   emptyWrapper: {
     minHeight: '170px',
     width: '100%',
@@ -234,6 +252,7 @@ var tableStyle = _objectSpread(_objectSpread({
     left: 0,
     top: 0,
     justifyContent: 'center',
+    textAlign: 'center',
     display: 'flex',
     alignItems: 'center',
     borderBottom: "1px solid ".concat(_theme.default.tableCellBorderColor)

package/cjs/tree/tree.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tree.d.ts","sourceRoot":"","sources":["tree.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AACxC,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAE3C,MAAM,MAAM,aAAa,GAAG,MAAM,WAAW,CAAC;AAE9C,QAAA,MAAM,SAAS,EAAE,QAAQ,CAAC,aAAa,CAoQtC,CAAC;AAEF,eAAe,SAAS,CAAC"}
+{"version":3,"file":"tree.d.ts","sourceRoot":"","sources":["tree.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AACxC,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAE3C,MAAM,MAAM,aAAa,GAAG,MAAM,WAAW,CAAC;AAI9C,QAAA,MAAM,SAAS,EAAE,QAAQ,CAAC,aAAa,CAwYtC,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/cjs/tree/tree.js

@@ -6,10 +6,26 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _theme = _interopRequireDefault(require("@sheinx/theme"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var childNodeMarginLeft = 12;
 var treeStyle = {
   rootClass: {},
   tree: {},
   virtual: {},
+  sizeSmall: {
+    '&$line $node': {
+      '&:last-child': {
+        '&::before': {
+          top: 0,
+          height: 14
+        }
+      },
+      '&::before': {
+        top: -2,
+        height: 'calc(100% + 2px)'
+      }
+    }
+  },
+  sizeLarge: {},
   notTree: {
     '&$root > $node$leaf': {
       paddingLeft: 0
@@ -19,6 +35,19 @@ var treeStyle = {
     }
   },
   line: {
+    '&$virtual $node': {
+      '&::before, &::after': {
+        display: 'none'
+      }
+    },
+    '&$virtual $leaf $contentWrapper': {
+      marginLeft: 12
+    },
+    '&$virtual $leaf $contentWrapper, &$virtual $childnode$contentWrapper': {
+      '&::after': {
+        display: 'none'
+      }
+    },
     '& $node': {
       '&[dir=ltr]::before': {
         left: 0
@@ -33,26 +62,6 @@ var treeStyle = {
         height: 'calc(100% + 6px)',
         width: 1,
         background: _theme.default.treeLineBackgroundColor
-      },
-      '&[dir=ltr]::after': {
-        left: 0
-      },
-      '&[dir=rtl]::after': {
-        right: 0
-      },
-      '&::after': {
-        content: '""',
-        position: 'absolute',
-        top: 18,
-        height: 1,
-        width: 16,
-        background: _theme.default.treeLineBackgroundColor
-      }
-    },
-    '& $node:first-child': {},
-    '& $node:first-child:last-child': {
-      '&::before,&::after': {
-        display: 'none'
       }
     },
     '& $node:last-child': {
@@ -63,19 +72,123 @@ var treeStyle = {
     },
     '& $contentWrapper': {},
     '& $iconWrapper': {
+      width: 24,
       '&[dir=ltr]': {
-        left: 16
+        left: -24
       },
       '&[dir=rtl]': {
-        right: 16
-      },
-      width: 24,
-      '& $icon': {
-        // width: 16,
+        right: -24
       }
     },
     '& $childnode': {
-      marginLeft: 12
+      marginLeft: childNodeMarginLeft,
+      '&$contentWrapper': {
+        position: 'relative',
+        '&::after': {
+          content: '""',
+          position: 'absolute',
+          top: 18,
+          left: 0,
+          marginLeft: -24,
+          transform: 'translate(-100%, 0)',
+          height: 1,
+          width: 16,
+          background: _theme.default.treeLineBackgroundColor
+        }
+      }
+    },
+    '& $leaf': {
+      '& $contentWrapper': {
+        position: 'relative',
+        '&::after': {
+          content: '""',
+          position: 'absolute',
+          top: 18,
+          left: 0,
+          marginLeft: -24,
+          transform: 'translate(-100%, 0)',
+          height: 1,
+          width: 16,
+          background: _theme.default.treeLineBackgroundColor
+        }
+      }
+    },
+    '& $childnode[dir=rtl]': {
+      '&$contentWrapper': {
+        '&::after': {
+          top: '50%',
+          right: 0,
+          transform: 'translate(100%, -50%)'
+        }
+      }
+    },
+    '&$sizeSmall': {
+      '& $contentWrapper::after': {
+        display: 'none'
+      }
+    },
+    '&$sizeLarge': {
+      '& $node:last-child::before': {
+        height: 21
+      },
+      '& $iconWrapper': {
+        '&[dir=ltr]': {
+          left: -32
+        },
+        '&[dir=rtl]': {
+          right: -32
+        }
+      },
+      '&:not($virtual) $childnode, &:not($virtual) $leaf': {
+        marginLeft: 20
+      },
+      '': {
+        marginLeft: 20
+      },
+      '& $node': {
+        paddingLeft: 32,
+        '&[dir=ltr]::before': {
+          left: 4
+        },
+        '&[dir=rtl]::before': {
+          right: 4
+        },
+        '&::before': {
+          top: -4,
+          height: 'calc(100% + 4px)'
+        }
+      },
+      '& $node$leaf': {
+        '&[dir=ltr]::before': {
+          left: -16
+        },
+        '&[dir=rtl]::before': {
+          right: -16
+        },
+        '&::after': {
+          left: -14
+        }
+      },
+      '& > $root > $node': {
+        paddingLeft: 12
+      },
+      '& $leaf $contentWrapper::after': {
+        left: -24,
+        top: 21,
+        transform: 'translate(0, -50%)'
+      },
+      '& $contentWrapper$childnode::after': {
+        top: 21,
+        marginLeft: -32
+      }
+    },
+    '& > $root > $node': {
+      paddingLeft: 12,
+      '& > $contentWrapper': {
+        '&::after': {
+          display: 'none'
+        }
+      }
     }
   },
   noline: {
@@ -109,30 +222,29 @@ var treeStyle = {
       '& > $node': {
         paddingLeft: 24
       }
+    },
+    '&$sizeLarge': {
+      '& > $root > $node, & $node$leaf': {
+        paddingLeft: 32
+      }
+    }
+  },
+  lineIndent: {
+    position: 'absolute',
+    top: 0,
+    width: 1,
+    height: '100%',
+    background: _theme.default.treeLineBackgroundColor,
+    '$sizeLarge &': {
+      transform: 'translateX(-4px)'
     }
   },
   root: {
-    // '& > :first-child$node': {
-    //   '&::before': {
-    //     top: 18,
-    //   },
-    // },
-    // '& > :last-child$node': {
-    //   '&::before': {},
-    // },
     '& > $node': {
       paddingLeft: 12,
       '&$leaf': {
         paddingLeft: 24
       },
-      '& > $contentWrapper > $iconWrapper': {
-        '&[dir=ltr]': {
-          left: 0
-        },
-        '&[dir=rtl]': {
-          right: 0
-        }
-      },
       '&::before': {
         display: 'none'
       },
@@ -146,7 +258,13 @@ var treeStyle = {
   contentWrapper: {
     display: 'flex',
     alignItems: 'flex-start',
-    padding: '5px 0'
+    padding: '5px 0',
+    '$sizeSmall &': {
+      padding: '1px 0'
+    },
+    '$sizeLarge & $text': {
+      lineHeight: '28px'
+    }
   },
   inlineContent: {
     display: 'inline-flex'
@@ -167,15 +285,6 @@ var treeStyle = {
     display: 'flex',
     alignItems: 'center',
     marginLeft: 4,
-    // 'label&': {
-    //   cursor: 'pointer',
-    //   userSelect: 'none',
-    // },
-
-    // '$iconWrapper + &': {
-    //   marginLeft: 4,
-    // },
-
     '$contentDisabled &': {
       '& $text': {
         color: _theme.default.treeContentDisabledFontColor
@@ -192,7 +301,11 @@ var treeStyle = {
   checkbox: {
     '&[class*="checkbox-wrapper"]': {
       height: 26,
+      alignSelf: 'flex-start',
       marginRight: _theme.default.treeCheckboxMarginX
+    },
+    '$sizeLarge &': {
+      marginTop: 4
     }
   },
   text: {
@@ -211,19 +324,30 @@ var treeStyle = {
       background: _theme.default.treeContentHoverBackgroundColor
     }
   },
-  // textDisabled: {
-  //   color: Token.treeItemDisabledFontColor,
-  // },
   list: {},
   node: {
     position: 'relative',
     paddingLeft: 28,
-    '&$leaf': {
-      paddingLeft: 40,
-      '&::after': {
-        width: 12
+    '$sizeSmall$line &': {
+      paddingLeft: 12,
+      '&$leaf': {
+        paddingLeft: 24
+      },
+      "&::after": {
+        position: 'absolute',
+        content: '""',
+        top: 28,
+        width: 1,
+        height: 'calc(100% - 28px)',
+        background: _theme.default.treeLineBackgroundColor
       }
     },
+    '$sizeLarge &': {
+      paddingLeft: 32
+    },
+    '&$leaf': {
+      paddingLeft: 40
+    },
     '&[draggable="true"]': {
       cursor: 'pointer'
     }
@@ -239,7 +363,8 @@ var treeStyle = {
     },
     position: 'absolute',
     width: 24,
-    height: 26,
+    height: 24,
+    margin: '1px 0',
     display: 'inline-flex',
     alignItems: 'center',
     justifyContent: 'center',
@@ -247,11 +372,16 @@ var treeStyle = {
       '& $icon': {
         transform: 'rotate(0deg)'
       }
+    },
+    '$sizeLarge &': {
+      width: 32,
+      height: 32,
+      top: 5
     }
   },
   icon: {
-    width: 24,
-    height: 24,
+    width: '100%',
+    height: '100%',
     display: 'inline-flex',
     alignItems: 'center',
     justifyContent: 'center',
@@ -267,7 +397,10 @@ var treeStyle = {
       background: _theme.default.treeItemActiveBackgroundColor
     },
     '& svg': {
-      width: 14
+      width: 14,
+      '$sizeLarge &': {
+        width: 16
+      }
     }
   },
   children: {},