Merge branch '0.8.0' of https://github.com/ant-design/ant-design into 0.8.0

components/affix/demo/basic.md

@@ -0,0 +1,17 @@
+# 基本
+
+- order: 0
+
+最简单的用法。
+
+---
+
+````jsx
+var Affix = antd.Affix;
+
+React.render(
+  <Affix>
+    <button className="ant-btn ant-btn-primary">offset=0</button>
+  </Affix>
+, document.getElementById('components-affix-demo-basic'));
+````

components/affix/demo/offset.md

@@ -0,0 +1,17 @@
+# 偏移
+
+- order: 1
+
+达到一定的偏移量才触发。
+
+---
+
+````jsx
+var Affix = antd.Affix;
+
+React.render(
+  <Affix offset="200">
+    <button className="ant-btn ant-btn-primary">offset=200</button>
+  </Affix>
+, document.getElementById('components-affix-demo-offset'));
+````

components/affix/index.jsx

@@ -0,0 +1,62 @@
+import React from 'react';
+import joinClasses from 'react/lib/joinClasses';
+import rcUtil from 'rc-util';
+
+var Affix = React.createClass({
+
+  getDefaultProps() {
+    return {
+      offset: 0
+    };
+  },
+
+  getInitialState() {
+    return {
+      affix: false
+    };
+  },
+
+  handleScroll() {
+    var affix = this.state.affix;
+    var offset = this.props.offset;
+    var scrollTop = (document.documentElement && document.documentElement.scrollTop) ||
+    document.body.scrollTop;
+
+    if (!affix && scrollTop >= offset) {
+      this.setState({
+        affix: true
+      });
+    }
+
+    if (affix && scrollTop < offset) {
+      this.setState({
+        affix: false
+      });
+    }
+  },
+
+  componentDidMount() {
+    this.scrollEvent = rcUtil.Dom.addEventListener(window, 'scroll', this.handleScroll);
+  },
+
+  componentWillUnmount() {
+    if (this.scrollEvent) {
+      this.scrollEvent.remove();
+    }
+  },
+
+  render() {
+    var affix = this.state.affix ? 'affix' : '';
+    var className = this.props.className;
+
+    return (
+      <div {...this.props} className={joinClasses(className, affix)}>
+        {this.props.children}
+      </div>
+    );
+  }
+
+});
+
+module.exports = Affix;
+

components/affix/index.md

@@ -5,3 +5,10 @@
 
 ---
 
+## API
+
+属性如下
+
+| 成员        | 说明           | 类型               | 默认值       |
+|-------------|----------------|--------------------|--------------|
+| offset     | 达到指定偏移量后触发   | Number | 0        |

components/carousel/demo/autoplay.md

@@ -0,0 +1,21 @@
+# 自动切换
+
+- order: 3
+
+定时切换下一张。
+
+---
+
+````jsx
+var Carousel = antd.Carousel;
+
+React.render(
+  <Carousel autoplay="true">
+    <div><h3>1</h3></div>
+    <div><h3>2</h3></div>
+    <div><h3>3</h3></div>
+    <div><h3>4</h3></div>
+  </Carousel>
+, document.getElementById('components-carousel-demo-autoplay'));
+````
+

components/carousel/demo/basic.md

@@ -0,0 +1,20 @@
+# 基本
+
+- order: 0
+
+最简单的用法。
+
+---
+
+````jsx
+var Carousel = antd.Carousel;
+
+React.render(
+  <Carousel>
+    <div><h3>1</h3></div>
+    <div><h3>2</h3></div>
+    <div><h3>3</h3></div>
+    <div><h3>4</h3></div>
+  </Carousel>
+, document.getElementById('components-carousel-demo-basic'));
+````

components/carousel/demo/fade.md

@@ -0,0 +1,21 @@
+# 渐显
+
+- order: 2
+
+切换效果为渐显。
+
+---
+
+````jsx
+var Carousel = antd.Carousel;
+
+React.render(
+  <Carousel effect="fade">
+    <div><h3>1</h3></div>
+    <div><h3>2</h3></div>
+    <div><h3>3</h3></div>
+    <div><h3>4</h3></div>
+  </Carousel>
+, document.getElementById('components-carousel-demo-fade'));
+````
+

components/carousel/demo/vertical.md

@@ -0,0 +1,20 @@
+# 垂直
+
+- order: 1
+
+垂直显示。
+
+---
+
+````jsx
+var Carousel = antd.Carousel;
+
+React.render(
+  <Carousel vertical="true">
+    <div><h3>1</h3></div>
+    <div><h3>2</h3></div>
+    <div><h3>3</h3></div>
+    <div><h3>4</h3></div>
+  </Carousel>
+, document.getElementById('components-carousel-demo-vertical'));
+````

components/carousel/index.jsx

@@ -0,0 +1,34 @@
+import Carousel from 'react-slick';
+import React from 'react';
+import assign from 'object-assign';
+
+var AntCarousel = React.createClass({
+
+  getDefaultProps() {
+    return {
+      dots: true,
+      arrows: false
+    };
+  },
+
+  render() {
+    var props = assign({}, this.props);
+
+    if (props.effect === 'fade') {
+      props.fade = true;
+    }
+
+    var className = 'ant-carousel';
+    if (props.vertical) {
+      className = className + ' ant-carousel-vertical';
+    }
+
+    return (
+      <div className={className}>
+        <Carousel {...props} />
+      </div>
+    );
+  }
+});
+
+export default AntCarousel;

components/carousel/index.md

@@ -5,3 +5,33 @@
 
 ---
 
+旋转木马，轮播组件。
+
+## 何时使用
+
+
+## API
+
+| 参数             | 说明                                         | 类型     | 默认值                          |
+|------------------|----------------------------------------------|----------|---------------------------------|
+| effect           | 动画效果函数，可取 scrollx, fade | String | scrollx |
+| arrow | 是否显示前后翻页箭头 | Boolean   | false |
+| dots | 是否显示面板指示点 | Boolean   | true |
+| vertical | 垂直显示 | Boolean   | false |
+| autoplay | 是否自动切换 | Boolean   | false |
+| easing | 动画效果 | String   | linear |
+| onChange         | 切换面板的回调                               | Function | 无
+
+<style>
+.ant-carousel .slick-slide {
+  text-align: center;
+  height: 100px;
+  line-height: 100px;
+  background: #71B5DE;
+  color: #fff;
+  overflow: hidden;
+}
+#components-carousel-demo-vertical .ant-carousel {
+  margin-right: 35px;
+}
+</style>

components/datepicker/demo/size.md

@@ -0,0 +1,20 @@
+# 三种大小
+
+- order: 1
+
+三种大小的输入框，大的用在表单中，中的为默认。
+
+---
+
+````jsx
+// or require('antd/lib/datepicker');
+var Datepicker = antd.Datepicker;
+
+React.render(
+  <div>
+    <Datepicker size="lg" />
+    <Datepicker />
+    <Datepicker size="sm" />
+  </div>
+, document.getElementById('components-datepicker-demo-size'));
+````

components/datepicker/index.jsx

@@ -69,12 +69,14 @@ export default React.createClass({
         disabled={this.props.disabled}
         trigger={<span className="ant-calendar-picker-icon" />}
         calendar={calendar}
-        adjustOrientOnCalendarOverflow={false}
+        adjustOrientOnCalendarOverflow={true}
         formatter={new DateTimeFormat(this.props.format)}
         value={this.state.value}
         prefixCls="ant-calendar-picker"
         onChange={this.handleChange}>
-        <input placeholder={this.props.placeholder} className="ant-calendar-picker-input ant-input" />
+        <input
+          placeholder={this.props.placeholder}
+          className={'ant-calendar-picker-input ant-input ant-input-' + this.props.size}/>
       </Datepicker>
     );
   }

components/datepicker/index.md

@@ -26,9 +26,13 @@
 | onSelect     | 选择日期的回调 | function | 无           |
 | showTime     | 显示时间选择条 | boolean  | false        |
 | disabled     | 禁用           | bool     | false        |
+| size         | 输入框大小，`lg`代表高为32px，`sm`代表高为22px，默认28px      | string   | 无        |
 
 <style>
 .code-box-demo .ant-calendar-picker-input {
   width: 200px;
 }
+.code-box-demo .ant-calendar-picker {
+  margin: 0 12px 12px 0;
+}
 </style>

components/tabs/index.jsx

@@ -20,3 +20,4 @@ AntTabs.defaultProps = {
 AntTabs.TabPane = Tabs.TabPane;
 
 export default AntTabs;
+

components/tree/demo/basic.md

@@ -0,0 +1,32 @@
+# 基本
+
+- order: 0
+
+最简单的用法。
+
+---
+
+````jsx
+var Tree = antd.Tree;
+var TreeNode = Tree.TreeNode;
+React.render(
+  <Tree className="myCls" checkable={true}>
+        <TreeNode title="parent 1" expanded={false}>
+          <TreeNode>leaf </TreeNode>
+          <TreeNode title="parent 1-1">
+            <TreeNode title="parent 2-1">
+              <TreeNode>leaf </TreeNode>
+              <TreeNode>leaf </TreeNode>
+            </TreeNode>
+            <TreeNode>leaf </TreeNode>
+            <TreeNode>leaf </TreeNode>
+          </TreeNode>
+        </TreeNode>
+        <TreeNode>leaf </TreeNode>
+        <TreeNode>
+          <TreeNode>leaf </TreeNode>
+        </TreeNode>
+      </Tree>
+, document.getElementById('components-tree-demo-basic'));
+````
+

components/tree/index.jsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import Tree from 'rc-tree';
+var TreeNode = Tree.TreeNode;
+
+var antDTree = React.createClass({
+
+  render() {
+    return <Tree {...this.props} >
+      {this.props.children}
+    </Tree>;
+  }
+});
+antDTree.TreeNode = TreeNode;
+module.exports = antDTree;

docs/getting-started.md

@@ -155,7 +155,7 @@ Ant Design 支持所有的现代浏览器和 IE8+。
     <!-- 引入样式 -->
     <link rel="stylesheet" href="http://ant.design/dist/antd.css">
     <!-- Polyfills -->
-    <script src="https://a.alipayobjects.com/??es5-shim/4.0.5/es5-shim.js,es5-shim/4.0.5/es5-sham.js,html5shiv/3.7.2/src/html5shiv.js"></script>
+    <script src="https://a.alipayobjects.com/??es5-shim/4.1.10/es5-shim.min.js,es5-shim/4.1.10/es5-sham.min.js,html5shiv/3.7.2/src/html5shiv.js"></script>
     <!-- 引入 jquery 和 react -->
     <script src="https://a.alipayobjects.com/??jquery/jquery/1.11.1/jquery.js,react/0.13.3/react.min.js"></script>
   </head>

index.js

@@ -1,8 +1,10 @@
 require('./style/index.less');
 
 var antd = {
+  Affix: require('./components/affix'),
   Datepicker: require('./components/datepicker'),
   Tooltip: require('./components/tooltip'),
+  Carousel: require('./components/carousel'),
   Tabs: require('./components/tabs'),
   Modal: require('./components/modal'),
   Menu: require('rc-menu'),
@@ -27,7 +29,8 @@ var antd = {
   Radio: require('./components/radio'),
   RadioGroup: require('./components/radio/group'),
   Alert: require('./components/alert'),
-  Validation: require('./components/validation')
+  Validation: require('./components/validation'),
+  Tree: require('./components/Tree')
 };
 
 module.exports = antd;

package.json

@@ -55,7 +55,10 @@
     "rc-switch": "~1.2.0",
     "rc-table": "~3.1.0",
     "rc-tabs": "~5.2.0",
-    "rc-tooltip": "~2.4.0"
+    "rc-tooltip": "~2.4.0",
+    "rc-tree": "~0.10.0",
+    "rc-util": "~2.0.3",
+    "react-slick": "~0.6.4"
   },
   "devDependencies": {
     "autoprefixer-loader": "~2.0.0",

site/templates/home.html

@@ -21,6 +21,7 @@
         <i class="iconfont-home icon-lego"></i>
         开始使用
       </a>
+      <div class="entry-version">v{{config.package.stableVersion}}</div>
     </div>
   </div>
 </div>

site/templates/layout.html

@@ -33,7 +33,7 @@
         }
       })(this.console = this.console || {});
     </script>
-    <script src="https://a.alipayobjects.com/??bluebird/2.9.30/bluebird.js,jquery/jquery/1.11.1/jquery.js,es5-shim/4.0.5/es5-shim-debug.js,es5-shim/4.0.5/es5-sham-debug.js,html5shiv/3.7.2/src/html5shiv.js,react/0.13.3/react.js,react-router/0.13.3/ReactRouter.js"></script>
+    <script src="https://a.alipayobjects.com/??bluebird/2.9.30/bluebird.js,jquery/jquery/1.11.1/jquery.js,es5-shim/4.1.10/es5-shim.js,es5-shim/4.1.10/es5-sham.js,html5shiv/3.7.2/src/html5shiv.js,react/0.13.3/react.js,react-router/0.13.3/ReactRouter.js"></script>
     <script>
       var ANT_COMPONENTS = [];
       {%- for item in resource.pages|find_category(["CSS","Components"]) %}

spec/motion.md

@@ -28,6 +28,11 @@ Ant Design 提供了一些预设的组件动画样式。
 
 `````jsx
 var cssAnimation = require('css-animation');
+var Select = antd.Select;
+var Option = Select.Option;
+var OptGroup = Select.OptGroup;
+
+
 var motions = [];
 motions = motions.concat([[{
   name: '淡入',
@@ -182,7 +187,7 @@ motions = motions.concat([[{
 var leave='-leave';
 var Test = React.createClass({
   handleChange(e) {
-    var value = e.target.value;
+    var value = e;
     if(value){
       this.demoNode.style.visibility='';
       cssAnimation(this.demoNode, value, () => {
@@ -198,19 +203,20 @@ var Test = React.createClass({
   },
 
   render() {
-    var options = [<option value="">请选择预设动画</option>].concat(motions.map(function (m) {
+    var options = [<Option value="">请选择预设动画</Option>].concat(motions.map(function (m) {
       var opts = m.map(function (m2) {
-        return <option value={m2.value + "-" + m2.direction}>{m2.name + " " + m2.value}</option>
+        return <Option value={m2.value + "-" + m2.direction}>{m2.name + " " + m2.value}</Option>
       });
-      return <optgroup label={m[0].type}>{opts}</optgroup>;
+      return <OptGroup label={m[0].type}>{opts}</OptGroup>;
     }));
     return <div>
       <div className="motion-container">
         <div ref="demo" className="motion-example"></div>
       </div>
-      <div className="motion-select">
-        <select onChange={this.handleChange}>{options}</select>
+      <div className="motion-select-wrapper">
+        <Select value="" className='motion-select' onChange={this.handleChange}>{options}</Select>
       </div>
+
     </div>;
   }
 });
@@ -237,8 +243,12 @@ React.render(<Test/>, document.getElementById('components-motion-demo-basic'));
   font-weight: bold;
   background: url(https://t.alipayobjects.com/images/rmsweb/T1B9hfXcdvXXXXXXXX.svg) center/230px;
 }
-.motion-select {
+.motion-select-wrapper{
   text-align: center;
 }
+.motion-select {
+  text-align:left;
+  width:180px;
+}
 </style>
 

spec/page-transition.md

@@ -1,10 +1,25 @@
-# 转换动画
+# 互动转换
 
 - category: 动画
 - order: 1
 
 ---
 
+## 响应互动
+
+响应交互一般是指我们在浏览页面时，点击元素时动画给我们视觉上的反馈，每个交互动效都能给我们带来不同视觉效果。
+
+比如：按钮上的 hover 或 click 效果，随着你的鼠标事件而改变自身或增加元素在按钮上，或者折叠面板和弹出框，点击后给你呈现新加入的信息元素。
+
+### 按钮反馈
+
+<div class="video-player">
+  <video preload loop><source src="https://t.alipayobjects.com/images/rmsweb/T1yHhhXfxkXXXXXXXX.webm" type="video/webm"><source src="https://t.alipayobjects.com/images/rmsweb/T15IXhXlXbXXXXXXXX.mp4" type="video/mp4"></video>
+</div>
+
+
+## 转换动画
+
 ### 视觉连贯性三元素
 
 - Adding:  新加入的信息元素应被告知如何使用，从页面转变的信息元素需被重新识别。
@@ -13,30 +28,6 @@
 
 - Normal: 指那些从转场开始到结束都没有发生变化的信息元素。
 
-
-## 转场动画
-
-从内容A到内容B的转变过程时能有效的吸引用户注意力，突出视觉中心，提高整体视觉效果。
-
- - 大页面转场可采用左出右入的形式。
-
- - 小的信息元素排布或块状较多的情况下，根据一定的路径层次依次进场，区分维度层级，来凸显量级，来指引用户的视觉轨迹。
-
-<script src="/static/TweenMax.min.js"></script>
-<script src="/static/motion.js"></script>
-
-<div class="video-player">
-  <video preload loop><source src="https://t.alipayobjects.com/images/rmsweb/T14q0hXbBdXXXXXXXX.webm" type="video/webm"><source src="https://t.alipayobjects.com/images/T1qWNhXkpeXXXXXXXX.mp4" type="video/mp4"></video>
-</div>
-
-> 参考我们的进场组件案例。查看[进场动画组件](/components/enter-animation/)
-
-## 响应互动
-
-响应交互一般是指我们在浏览页面时，点击元素时动画给我们视觉上的反馈，每个交互动效都能给我们带来不同视觉效果。
-
-比如：按钮上的 hover 或 click 效果，随着你的鼠标事件而改变自身或增加元素在按钮上，或者折叠面板和弹出框，点击后给你呈现新加入的信息元素。
-
 ### 可折叠面板
 
 对于信息元素内容区域的延伸，显示信息元素和进一步内容对象之间的直接连接。
@@ -57,3 +48,21 @@
 <div class="video-player">
   <video preload loop><source src="https://t.alipayobjects.com/images/rmsweb/T1br0gXghtXXXXXXXX.webm" type="video/webm"><source src="https://t.alipayobjects.com/images/rmsweb/T1lcRgXb4gXXXXXXXX.mp4" type="video/mp4"></video>
 </div>
+
+
+### 页面转场
+
+从内容A到内容B的转变过程时能有效的吸引用户注意力，突出视觉中心，提高整体视觉效果。
+
+ - 大页面转场可采用左出右入的形式。
+
+ - 小的信息元素排布或块状较多的情况下，根据一定的路径层次依次进场，区分维度层级，来凸显量级，来指引用户的视觉轨迹。
+
+<script src="/static/TweenMax.min.js"></script>
+<script src="/static/motion.js"></script>
+
+<div class="video-player">
+  <video preload loop><source src="https://t.alipayobjects.com/images/rmsweb/T14q0hXbBdXXXXXXXX.webm" type="video/webm"><source src="https://t.alipayobjects.com/images/T1qWNhXkpeXXXXXXXX.mp4" type="video/mp4"></video>
+</div>
+
+> 参考我们的进场组件案例。查看[进场动画组件](/components/enter-animation/)

static/style.css

@@ -585,6 +585,7 @@ footer ul li > a {
   empty-cells: show;
   border: 1px solid #e9e9e9;
   width: 100%;
+  margin-bottom: 24px;
 }
 
 .markdown > table th {
@@ -1852,8 +1853,16 @@ a.entry-link:hover .icon-lego {
   animation: rotateCircle 0.5s 1 ease-in-out;
 }
 
+.entry-version {
+  font-size: 12px;
+  margin-top: 15px;
+  position: absolute;
+  top: 36px;
+  right: -32px;
+}
+
 @media only screen and (min-width: 320px) and (max-width: 1024px) {
-  .code-boxes-col {
+  .code-boxes-col-2-1 {
     float: none;
     width: 100%;
   }

style/components/carousel/slick-theme.less

@@ -0,0 +1,126 @@
+
+.ant-carousel {
+
+  /* Arrows */
+
+  .slick-prev,
+  .slick-next {
+    position: absolute;
+    display: block;
+    height: 20px;
+    width: 20px;
+    line-height: 0px;
+    font-size: 0px;
+    cursor: pointer;
+    background: transparent;
+    color: transparent;
+    top: 50%;
+    margin-top: -10px;
+    padding: 0;
+    border: none;
+    outline: none;
+    &:hover, &:focus {
+      outline: none;
+      background: transparent;
+      color: transparent;
+      &:before {
+        opacity: 1;
+      }
+    }
+    &.slick-disabled:before {
+      opacity: 0.25;
+    }
+  }
+
+  .slick-prev {
+    left: -25px;
+    &:before {
+      content: "←";
+    }
+  }
+
+  .slick-next {
+    right: -25px;
+    &:before {
+      content: "→";
+    }
+  }
+
+  /* Dots */
+
+  .slick-slider {
+    padding-bottom: 45px;
+  }
+
+  .slick-dots {
+    position: absolute;
+    bottom: 0px;
+    list-style: none;
+    display: block;
+    text-align: center;
+    padding: 0;
+    width: 100%;
+    li {
+      position: relative;
+      display: inline-block;
+      height: 20px;
+      width: 20px;
+      margin: 0 5px;
+      padding: 0;
+      cursor: pointer;
+      button {
+        border: 0;
+        background: transparent;
+        display: block;
+        height: 20px;
+        width: 20px;
+        outline: none;
+        line-height: 0px;
+        font-size: 0px;
+        color: transparent;
+        padding: 5px;
+        cursor: pointer;
+        &:hover, &:focus {
+          outline: none;
+          &:before {
+            opacity: 1;
+          }
+        }
+        &:before {
+          position: absolute;
+          top: 0;
+          left: 0;
+          content: "•";
+          width: 20px;
+          height: 20px;
+          font-size: 18px;
+          font-family: arial, sans-serif;
+          line-height: 20px;
+          text-align: center;
+          color: gray;
+          opacity: 0.25;
+          -webkit-font-smoothing: antialiased;
+          -moz-osx-font-smoothing: grayscale;
+        }
+      }
+      &.slick-active button:before {
+        color: black;
+        opacity: 0.75;
+      }
+    }
+  }
+}
+
+.ant-carousel-vertical {
+
+  .slick-slider {
+    padding-bottom: 0;
+  }
+
+  .slick-dots {
+    width: 20px;
+    bottom: auto;
+    right: -35px;
+    top: 0;
+  }
+}

style/components/carousel/slick.less

@@ -0,0 +1,94 @@
+
+.ant-carousel {
+
+  .slick-slider {
+    position: relative;
+    display: block;
+    box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    -webkit-touch-callout: none;
+    user-select: none;
+    -ms-touch-action: pan-y;
+    touch-action: pan-y;
+    -webkit-tap-highlight-color: transparent;
+  }
+  .slick-list {
+    position: relative;
+    overflow: hidden;
+    display: block;
+    margin: 0;
+    padding: 0;
+
+    &:focus {
+      outline: none;
+    }
+
+    &.dragging {
+      cursor: pointer;
+      cursor: hand;
+    }
+  }
+  .slick-slider .slick-track,
+  .slick-slider .slick-list {
+    transform: translate3d(0, 0, 0);
+  }
+
+  .slick-track {
+    position: relative;
+    left: 0;
+    top: 0;
+    display: block;
+
+    &:before,
+    &:after {
+      content: "";
+      display: table;
+    }
+
+    &:after {
+      clear: both;
+    }
+
+    .slick-loading & {
+      visibility: hidden;
+    }
+  }
+  .slick-slide {
+    float: left;
+    height: 100%;
+    min-height: 1px;
+    [dir="rtl"] & {
+      float: right;
+    }
+    img {
+      display: block;
+    }
+    &.slick-loading img {
+      display: none;
+    }
+
+    display: none;
+
+    &.dragging img {
+      pointer-events: none;
+    }
+  }
+
+  .slick-initialized .slick-slide {
+    display: block;
+  }
+
+  .slick-loading .slick-slide {
+    visibility: hidden;
+  }
+
+  .slick-vertical .slick-slide {
+    display: block;
+    height: auto;
+    border: 1px solid transparent;
+  }
+  .slick-arrow.slick-hidden {
+    display: none;
+  }
+
+}

style/components/index.less

@@ -25,3 +25,6 @@
 @import "radio";
 @import "tag";
 @import "alert";
+@import "tree";
+@import "carousel/slick";
+@import "carousel/slick-theme";

style/components/select.less

@@ -243,16 +243,15 @@
         margin: 0;
         padding: 0;
 
-        > li.@{selectPrefixCls}-menu-item {
-          padding-left: 20px;
+        > li.@{selectPrefixCls}-dropdown-menu-item {
+          padding-left: 24px;
         }
       }
 
       &-item-group-title {
         color: #999;
         line-height: 1.5;
-        padding: 8px 10px;
-        border-bottom: 1px solid #dedede;
+        padding: 8px 16px;
       }
 
       li&-item {

style/components/tree.less

@@ -0,0 +1,88 @@
+@treePrefixCls: rc-tree;
+
+.@{treePrefixCls} {
+  margin:0; padding:5px;
+
+  li {
+    padding: 0;
+    margin: 0;
+    list-style: none;
+    line-height: 14px;
+    white-space: nowrap;
+    outline: 0;
+
+    ul{ margin:0; padding:0 0 0 18px}
+    ul.line{
+      //background:url(./img/line_conn.gif) 0 0 repeat-y;
+      background:url(https://t.alipayobjects.com/images/T13BtfXl0mXXXXXXXX.gif) 0 0 repeat-y;
+    }
+    a {
+      padding:1px 3px 0 0; margin:0;
+      cursor:pointer; height:17px;
+      background-color: transparent;
+      text-decoration:none;
+      vertical-align:top; display: inline-block
+    }
+    span {line-height:16px; margin-right:2px}
+    span.button {
+      line-height:0; margin:0; width:16px; height:16px;
+      display: inline-block; vertical-align:middle;
+      border:0 none; cursor: pointer;outline:none;
+      background-color:transparent; background-repeat:no-repeat; background-attachment: scroll;
+      //background-image:url("./img/zTreeStandard.png");
+      background-image:url("https://t.alipayobjects.com/images/T1.ANfXhXtXXXXXXXX.png");
+    }
+    span.button.roots_open {  background-position: -92px 0;  }
+    span.button.roots_close{background-position:-74px 0}
+    span.button.center_open{background-position:-92px -18px}
+    span.button.center_close{background-position:-74px -18px}
+    span.button.bottom_open{background-position:-92px -36px}
+    span.button.bottom_close{background-position:-74px -36px}
+
+    span.button.center_docu{background-position:-56px -18px}
+    span.button.bottom_docu{background-position:-56px -36px}
+
+    span.button.chk {
+      width: 13px;  height: 13px;
+      margin: 0 3px 0 0;
+      cursor: auto;
+    }
+    span.button.chk.checkbox_false_full {background-position:0 0}
+    span.button.chk.checkbox_false_full_focus {background-position:0 -14px}
+    span.button.chk.checkbox_false_part {background-position:0 -28px}
+    span.button.chk.checkbox_false_part_focus {background-position:0 -42px}
+    span.button.chk.checkbox_false_disable {background-position:0 -56px}
+    span.button.chk.checkbox_true_full {background-position:-14px 0}
+    span.button.chk.checkbox_true_full_focus {background-position:-14px -14px}
+    span.button.chk.checkbox_true_part {background-position:-14px -28px}
+    span.button.chk.checkbox_true_part_focus {background-position:-14px -42px}
+    span.button.chk.checkbox_true_disable {background-position:-14px -56px}
+  }
+
+  &-selected{
+    background-color:#FFE6B0;
+    border:1px #FFB951 solid; opacity:0.8;
+  }
+
+  &-treenode-switcher {
+    display: inline-block;
+    width: 18px;
+    height: 18px;
+  }
+  &-icon__open {
+    margin-right: 2px;
+    background-position: -110px -16px;
+    vertical-align: top;
+  }
+  &-icon__close {
+    margin-right: 2px;
+    background-position: -110px 0;
+    vertical-align: top;
+  }
+  &-switcher__open {
+    //background-position: -92px 0;
+  }
+  &-switcher__close {
+    //background-position: -74px 0;
+  }
+}