Merge branch 'master' of github.com:ant-design/ant-design

.lesshintrc

@@ -0,0 +1,12 @@
+{
+  "propertyOrdering": false,
+  "hexLength": "short",
+  "stringQuotes": false,
+  "decimalZero": false,
+  "importantRule": false,
+  "zeroUnit": "no_unit",
+  "qualifyingElement": false,
+  "duplicateProperty": false,
+  "importPath": false,
+  "finalNewline": false
+}

.lesslintrc

@@ -1,6 +0,0 @@
-{
-  "import": false,
-  "require-newline": false,
-  "leading-zero": false,
-  "single-comment": false
-}

CHANGELOG.md

@@ -4,6 +4,22 @@
 
 ---
 
+## 0.10.4 `2015-11-30`
+
+- 将 media-match 加入默认的 polyfill 文件中。[5626974](https://github.com/ant-design/ant-design/commit/562697423b1139eb324c1dceb051c143f4870ed7)
+- 修复了 [MonthPicker](http://ant.design/components/datepicker/#demo-month-picker) 报错问题，并增加了相关演示。
+- 修复 RadioGroup 中的 Radio/RadioButton 无法单独设置 disabled 的问题。[#603](https://github.com/ant-design/ant-design/issues/603)
+- 修复今天是不可选日期时的一个展示问题。[#606](https://github.com/ant-design/ant-design/issues/606)
+
+
+## 0.10.3 `2015-11-26`
+
+- 和 0.9.x 保持一致默认引入 `antd/lib/index.css`（而非 less 文件），方便第三方引用。引用 less 文件进行变量配置的可自行 `import 'antd/style/index.less'`。[#593](https://github.com/ant-design/ant-design/issues/593)
+- 升级 Pagination，增加 `defaultCurrent` 属性，修正原来的 `current` 为[完全受控属性](https://facebook.github.io/react/docs/forms.html#controlled-components)。
+- Pagination 的改动也修复了 Table 切换数据源后回到[第一页的例子](http://ant.design/components/table/#demo-ajax)。
+- 对演示和样式代码增加了 lint 检查。
+
+
 ## 0.10.2 `2015-11-25`
 
 - Slider 新增 `tipFormatter` 用于格式化 Tooltip 的内容。

README-zh_CN.md

@@ -47,11 +47,11 @@ npm install antd
 ## 链接
 
 - [首页](http://ant.design/)
-- [文档和组件](http://ant.design/docs/introduce)
+- [React UI 库](http://ant.design/docs/introduce)
 - [构建调试工具](https://github.com/ant-design/antd-bin)
 - [开发计划](https://github.com/ant-design/ant-design/issues/9)
 - [修改记录](CHANGELOG.md)
-- [React 模块](http://react-component.github.io/)
+- [React 组件](http://react-component.github.io/)
 - [React 代码规范](https://github.com/react-component/react-component.github.io/blob/master/docs/zh-cn/component-code-style.md)
 - [组件设计原则](https://github.com/react-component/react-component.github.io/blob/master/docs/zh-cn/component-design.md)
 - [网站和组件开发说明](https://github.com/ant-design/ant-design/wiki/%E7%BD%91%E7%AB%99%E5%92%8C%E7%BB%84%E4%BB%B6%E5%BC%80%E5%8F%91%E8%AF%B4%E6%98%8E)

README.md

@@ -43,12 +43,11 @@ Normal browsers and Internet Explorer 8+.
 ## Links
 
 - [Home page](http://ant.design/)
-- [Documentation and Components](http://ant.design/docs/introduce)
+- [React UI library](http://ant.design/docs/introduce)
-- [Components](http://ant.design/components/)
 - [Build/Debug tools](https://github.com/ant-design/antd-bin)
 - [Roadmap](https://github.com/ant-design/ant-design/issues/9)
 - [ChangeLog](CHANGELOG.md)
-- [React modules](http://react-component.github.io/)
+- [React components](http://react-component.github.io/)
 - [React style guide](https://github.com/react-component/react-component.github.io/blob/master/docs/en-US/component-code-style.md)
 - [React component design guide](https://github.com/react-component/react-component.github.io/blob/master/docs/en-US/component-design.md)
 - [Developer Instruction](https://github.com/ant-design/ant-design/wiki/%E7%BD%91%E7%AB%99%E5%92%8C%E7%BB%84%E4%BB%B6%E5%BC%80%E5%8F%91%E8%AF%B4%E6%98%8E)

components/badge/ScrollNumber.jsx

@@ -1,5 +1,6 @@
 import React, { createElement } from 'react';
 import assign from 'object-assign';
+import { isCssAnimationSupported } from 'css-animation';
 
 function getNumberArray(num) {
   return num ?
@@ -98,7 +99,8 @@ class AntScrollNumber extends React.Component {
     const props = assign({}, this.props, {
       className: `${this.props.prefixCls} ${this.props.className}`
     });
-    if (typeof document !== 'undefined' && typeof window !== 'undefined') {
+    const isBrowser = (typeof document !== 'undefined' && typeof window !== 'undefined');
+    if (isBrowser && isCssAnimationSupported) {
       return createElement(
         this.props.component,
         props,

components/datepicker/demo/month-picker.md

@@ -0,0 +1,15 @@
+# 月选择器
+
+- order: 9
+
+使用 MonthPicker 实现月选择器.
+
+---
+
+````jsx
+import { Datepicker } from 'antd';
+const MonthPicker = Datepicker.MonthPicker;
+ReactDOM.render(
+  <MonthPicker defaultValue="2015-12" />
+, document.getElementById('components-datepicker-demo-month-picker'));
+````

components/datepicker/demo/time.md

@@ -9,35 +9,44 @@
 ````jsx
 import { Datepicker, Timepicker } from 'antd';
 
-let result = new Date();
+const DateTimePicker = React.createClass({
-let selectdDate, selectdTime;
+  handleChange(from, value) {
-function handleChange(from, value) {
+    this.result = this.result || new Date();
-  if (!value) {
+    if (!value) {
-    if (from === 'date') {
+      if (from === 'date') {
-      selectdDate = false;
+        this.selectedDate = false;
-    } else {
+      } else {
-      selectdTime = false;
+        this.selectedTime = false;
+      }
+      return;
     }
-    return;
+    if (from === 'date') {
-  }
+      this.result.setFullYear(value.getFullYear());
-  if (from === 'date') {
+      this.result.setMonth(value.getMonth());
-    result.setFullYear(value.getFullYear());
+      this.result.setDate(value.getDate());
-    result.setMonth(value.getMonth());
+      this.selectedDate = true;
-    result.setDate(value.getDate());
+    } else {
-    selectdDate = true;
+      this.result.setHours(value.getHours());
-  } else {
+      this.result.setMinutes(value.getMinutes());
-    result.setHours(value.getHours());
+      this.result.setSeconds(value.getSeconds());
-    result.setMinutes(value.getMinutes());
+      this.selectedTime = true;
-    result.setSeconds(value.getSeconds());
+    }
-    selectdTime = true;
+    if (this.selectedDate && this.selectedTime) {
-  }
+      this.props.onSelect(this.result);
-  if (selectdDate && selectdTime) {
+    }
-    console.log('选择结果是：' + result);
+  },
+  render() {
+    return <div>
+      <Datepicker onChange={this.handleChange.bind(null, 'date')} />
+      <Timepicker onChange={this.handleChange.bind(null, 'time')} />
+    </div>;
   }
+});
+
+function onSelect(value) {
+  console.log('选择了时间：', value);
 }
 
-ReactDOM.render(<div>
+ReactDOM.render(<DateTimePicker onSelect={onSelect} />
-  <Datepicker onChange={handleChange.bind(null, 'date')} />
+, document.getElementById('components-datepicker-demo-time'));
-  <Timepicker onChange={handleChange.bind(null, 'time')} />
-</div>, document.getElementById('components-datepicker-demo-time'));
 ````

components/datepicker/index.jsx

@@ -8,11 +8,11 @@ import CalendarLocale from 'rc-calendar/lib/locale/zh_CN';
 import DateTimeFormat from 'gregorian-calendar-format';
 import objectAssign from 'object-assign';
 
-function createPicker(TheCalendar) {
+function createPicker(TheCalendar, defaultFormat) {
   return React.createClass({
     getDefaultProps() {
       return {
-        format: 'yyyy-MM-dd',
+        format: defaultFormat || 'yyyy-MM-dd',
         transitionName: 'slide-up',
         popupStyle: {},
         onSelect: null, // 向前兼容
@@ -154,7 +154,7 @@ function createPicker(TheCalendar) {
 }
 
 const AntDatePicker = createPicker(Calendar);
-const AntMonthPicker = createPicker(MonthCalendar);
+const AntMonthPicker = createPicker(MonthCalendar, 'yyyy-MM');
 
 const AntCalendar = React.createClass({
   getDefaultProps() {

components/icon/index.jsx

@@ -1,13 +1,9 @@
 import React from 'react';
 
-class Icon extends React.Component {
+function Icon(props) {
-
+  let {type, className = '', ...other} = props;
-  render() {
+  className += ` anticon anticon-${type}`;
-    let {type, className = '', ...other} = this.props;
+  return <i className={className} {...other} />;
-    className += ` anticon anticon-${type}`;
-    return <i className={className} {...other}></i>;
-  }
-
 }
 
 export default Icon;

components/pagination/demo/basic.md

@@ -9,11 +9,7 @@
 ````jsx
 import { Pagination } from 'antd';
 
-function onChange(page) {
-  console.log(page);
-}
-
 ReactDOM.render(
-  <Pagination onChange={onChange} total={50} />,
+  <Pagination defaultCurrent={1} total={50} />,
  document.getElementById('components-pagination-demo-basic'));
 ````

components/pagination/demo/changer.md

@@ -9,15 +9,11 @@
 ````jsx
 import { Pagination } from 'antd';
 
-function onChange(page) {
-  console.log(page);
-}
-
 function onShowSizeChange(current, pageSize) {
   console.log(current, pageSize);
 }
 
 ReactDOM.render(
-  <Pagination showSizeChanger onShowSizeChange={onShowSizeChange} onChange={onChange} total={500} />,
+  <Pagination showSizeChanger onShowSizeChange={onShowSizeChange} defaultCurrent={3} total={500} />,
  document.getElementById('components-pagination-demo-changer'));
 ````

components/pagination/demo/controlled.md

@@ -0,0 +1,33 @@
+# 受控
+
+- order: 8
+
+受控制的页码。
+
+---
+
+````jsx
+import { Pagination } from 'antd';
+
+let Container = React.createClass({
+  getInitialState() {
+    return {
+      current: 3
+    };
+  },
+  onChange(page) {
+    console.log(page);
+    this.setState({
+      current: page
+    });
+  },
+  render() {
+    return <Pagination current={this.state.current} onChange={this.onChange} total={50} />;
+  }
+});
+
+ReactDOM.render(
+<Container />,
+document.getElementById('components-pagination-demo-controlled'));
+````
+

components/pagination/demo/jump.md

@@ -9,11 +9,7 @@
 ````jsx
 import { Pagination } from 'antd';
 
-function onChange(page) {
-  console.log(page);
-}
-
 ReactDOM.render(
-  <Pagination showQuickJumper onChange={onChange} total={500} />,
+  <Pagination showQuickJumper defaultCurrent={2} total={500} />,
  document.getElementById('components-pagination-demo-jump'));
 ````

components/pagination/demo/locale.md

@@ -1,6 +1,6 @@
 # 国际化
 
-- order: 6
+- order: 7
 
 通过 `locale` 配置时区、语言等, 默认支持 en_US, zh_CN
 
@@ -10,11 +10,7 @@
 import { Pagination } from 'antd';
 import enUS from 'antd/lib/pagination/locale/en_US';
 
-function onChange(page) {
-  console.log(page);
-}
-
 ReactDOM.render(
-  <Pagination onChange={onChange} total={50} locale={enUS} />,
+  <Pagination defaultCurrent={1} total={50} locale={enUS} />,
  document.getElementById('components-pagination-demo-locale'));
 ````

components/pagination/demo/mini.md

@@ -9,11 +9,7 @@
 ````jsx
 import { Pagination } from 'antd';
 
-function onChange(page) {
-  console.log(page);
-}
-
 ReactDOM.render(
-  <Pagination size="small" onChange={onChange} total={50} />,
+  <Pagination size="small" defaultCurrent={2} total={50} />,
  document.getElementById('components-pagination-demo-mini'));
 ````

components/pagination/demo/more.md

@@ -9,11 +9,7 @@
 ````jsx
 import { Pagination } from 'antd';
 
-function onChange(page) {
-  console.log(page);
-}
-
 ReactDOM.render(
-  <Pagination onChange={onChange} total={500} />,
+  <Pagination defaultCurrent={1} total={500} />,
  document.getElementById('components-pagination-demo-more'));
 ````

components/pagination/demo/simple.md

@@ -9,11 +9,7 @@
 ````jsx
 import { Pagination } from 'antd';
 
-function onChange(page) {
-  console.log(page);
-}
-
 ReactDOM.render(
-  <Pagination simple onChange={onChange} total={50} />,
+  <Pagination simple defaultCurrent={2} total={50} />,
 document.getElementById('components-pagination-demo-simple'));
 ````

components/pagination/index.md

@@ -21,7 +21,8 @@
 
 | 参数             | 说明                               | 类型     | 默认值         |
 |------------------|------------------------------------|----------|----------------|
-| current          | 当前页数                           | Number   | 1              |
+| current          | 当前页数                           | Number   | 无             |
+| defaultCurrent   | 默认的当前页数                     | Number   | 1              |
 | total            | 数据总数                           | Number   | 0              |
 | pageSize         | 每页条数                           | Number   | 10             |
 | onChange         | 页码改变的回调，参数是改变后的页码 | Function | noop           |

components/radio/demo/radiobutton.md

@@ -19,7 +19,7 @@ ReactDOM.render(<div>
   <div>
     <RadioGroup onChange={onChange} defaultValue="a">
       <RadioButton value="a">杭州</RadioButton>
-      <RadioButton value="b">上海</RadioButton>
+      <RadioButton value="b" disabled>上海</RadioButton>
       <RadioButton value="c">北京</RadioButton>
       <RadioButton value="d">成都</RadioButton>
     </RadioGroup>

components/radio/group.jsx

@@ -42,7 +42,7 @@ export default React.createClass({
           {...radio.props}
           onChange={this.onRadioChange}
           checked={this.state.value === radio.props.value}
-          disabled={this.props.disabled}
+          disabled={radio.props.disabled || this.props.disabled}
         />;
       }
       return radio;

components/table/demo/ajax.md

@@ -64,25 +64,36 @@ const dataSource = new Table.DataSource({
 const Test = React.createClass({
   getInitialState() {
     return {
-      dataSource: null
+      dataSource: null,
+      pagination: {
+        onChange: this.hanlePageChange
+      }
     };
   },
+  hanlePageChange(page) {
+    // 使用受控属性 current，方便外部设置页数
+    const pagination = this.state.pagination;
+    pagination.current = page;
+    this.setState({ pagination });
+  },
   refresh() {
+    // 回到第一页
+    const pagination = this.state.pagination;
+    pagination.current = 1;
     this.setState({
       dataSource: dataSource.clone()
     });
   },
   changeAndRefresh() {
+    // 回到第一页
+    const pagination = this.state.pagination;
+    pagination.current = 1;
     // 可以修改原来的 dataSource 再发请求
     this.setState({
       dataSource: dataSource.clone({
-        data: {
+        data: { city: 'hz' }
-          city: 'hz'
-        }
       }),
-      pagination: {
+      pagination,
-        current: 1
-      }
     });
   },
   render() {

components/table/index.md

@@ -101,3 +101,19 @@ var dataSource = new Table.DataSource({
 | resolve       | 获得数据的解析函数，接收参数为远程数据返回的 result  | Function  |    |    |
 | getPagination | 和后台接口返回的分页数据进行适配的函数，返回值会传给表格中的分页器 | Function |  |  |
 | getParams     | 和后台接口接收的参数进行适配，返回值会作为请求的参数发送 | Function |  | 无 |
+
+## 注意
+
+按照 React 的[规范](http://facebook.github.io/react/docs/multiple-components.html#dynamic-children)，所有的组件数组必须绑定 key。在 Table 中，默认将每列数据的 `key` 属性作为唯一的标识。
+
+如果你的数据没有这个属性，务必使用 `rowKey` 来指定数据列的主键。若没有指定，控制台会出现以下的提示，表格组件也会出现各类奇怪的错误。
+
+![](https://os.alipayobjects.com/rmsportal/luLdLvhPOiRpyss.png)
+
+```jsx
+const rowKey = function(record) {
+  return record.uid;  // 比如你的数据主键是 uid
+};
+
+return <Table rowKey={rowKey} />;
+```

components/timepicker/demo/basic.md

@@ -10,9 +10,11 @@
 import { Timepicker } from 'antd';
 
 function onChange(time) {
-  console.log(time.toLocaleTimeString('zh-CN', {
+  if (time) {
-    hour12: false
+    console.log(time.toLocaleTimeString('zh-CN', {
-  }));
+      hour12: false
+    }));
+  }
 }
 
 ReactDOM.render(

components/tree/demo/special.md

@@ -2,7 +2,7 @@
 
 - order: 2
 
-受控组件，外部传入参数，控制树对象节点
+受控组件，外部传入参数，控制树对象节点。
 
 ---
 
@@ -50,7 +50,7 @@ class TreeDemo extends React.Component {
           <TreeNode key="p10" title="leaf"/>
           <TreeNode title="parent 1-1" key="p11">
             <TreeNode title="parent 2-1" key="p21">
-              <TreeNode>test</TreeNode>
+              <TreeNode title="test" />
               <TreeNode title={<span>sss</span>}/>
             </TreeNode>
             <TreeNode key="p22" title="leaf"/>
@@ -64,5 +64,4 @@ class TreeDemo extends React.Component {
 }
 
 ReactDOM.render(<TreeDemo />, document.getElementById('components-tree-demo-special'));
-
 ````

docs/getting-started.md

@@ -21,6 +21,8 @@ Ant Design React 致力于提供给程序员**愉悦**的开发体验。
 
 ### 1. 安装命令行工具
 
+> 使用 `antd-init` 前，务必确认 [Node.js](https://nodejs.org/en/) 已经升级到 v4.x 或以上。
+
 ```bash
 $ npm install antd-init -g
 ```
@@ -116,7 +118,7 @@ Ant Design React 支持所有的现代浏览器和 IE8+。
     <!-- 引入样式 -->
     <link rel="stylesheet" href="/index.css">
     <!-- Polyfills -->
-    <script src="https://as.alipayobjects.com/component/??console-polyfill/0.2.2/index.js,es5-shim/4.1.14/es5-shim.min.js,es5-shim/4.1.14/es5-sham.min.js,html5shiv/3.7.2/html5shiv.min.js"></script>
+    <script src="https://as.alipayobjects.com/??component/console-polyfill/0.2.2/index.js,component/es5-shim/4.1.14/es5-shim.min.js,component/es5-shim/4.1.14/es5-sham.min.js,component/html5shiv/3.7.2/html5shiv.min.js,g/component/media-match/2.0.2/media.match.min.js"></script>
   </head>
   <body>
   </body>

package.json

@@ -1,7 +1,7 @@
 {
   "name": "antd",
-  "version": "0.10.2",
+  "version": "0.10.4",
-  "stableVersion": "0.10.2",
+  "stableVersion": "0.10.4",
   "title": "Ant Design",
   "description": "一个 UI 设计语言",
   "homepage": "http://ant.design/",
@@ -48,7 +48,7 @@
     "rc-input-number": "~2.4.1",
     "rc-menu": "~4.8.1",
     "rc-notification": "~1.3.0",
-    "rc-pagination": "~1.2.1",
+    "rc-pagination": "~1.3.5",
     "rc-progress": "~1.0.4",
     "rc-queue-anim": "~0.11.2",
     "rc-radio": "~2.0.0",
@@ -56,7 +56,7 @@
     "rc-slider": "~3.1.2",
     "rc-steps": "~1.4.1",
     "rc-switch": "~1.3.1",
-    "rc-table": "~3.6.1",
+    "rc-table": "~3.6.2",
     "rc-tabs": "~5.5.0",
     "rc-time-picker": "~0.7.1",
     "rc-tooltip": "~3.2.0",
@@ -84,6 +84,7 @@
     "eslint": "^1.1.0",
     "eslint-config-airbnb": "^1.0.0",
     "eslint-plugin-babel": "^2.1.1",
+    "eslint-plugin-markdown": "git+https://github.com/ant-design/eslint-plugin-markdown.git",
     "eslint-plugin-react": "^3.3.1",
     "expect.js": "~0.3.1",
     "extract-text-webpack-plugin": "^0.9.1",
@@ -93,6 +94,7 @@
     "json-loader": "^0.5.1",
     "less": "~2.5.3",
     "less-loader": "^2.2.0",
+    "lesshint": "git+https://github.com/ant-design/lesshint.git",
     "lodash": "^3.10.0",
     "nico-jsx": "~0.6.0",
     "pre-commit": "1.x",
@@ -100,7 +102,6 @@
     "react-addons-test-utils": "~0.14.2",
     "react-dom": "~0.14.2",
     "react-router": "~1.0.0",
-    "eslint-plugin-markdown": "git+https://github.com/ant-design/eslint-plugin-markdown.git",
     "webpack": "^1.10.1",
     "webpack-babel-jest": "^1.0.0",
     "webpack-dev-middleware": "^1.2.0"
@@ -111,8 +112,9 @@
     "clean": "rm -rf _site dist",
     "deploy": "rm -rf node_modules && node scripts/install.js && npm run just-deploy",
     "just-deploy": "npm run clean && webpack --config webpack.deploy.config.js && webpack --config webpack.antd.config.js && NODE_ENV=PRODUCTION nico build && node scripts/deploy.js",
-    "lint": "eslint components test index.js --ext '.js,.jsx' && npm run mdlint",
+    "lint": "eslint components test index.js --ext '.js,.jsx' && npm run mdlint && npm run lesshint",
     "mdlint": "eslint components/*/demo/*.md --ext '.md' --global 'React,ReactDOM' --rule 'no-console: 0'",
+    "lesshint": "lesshint style/ -e 'style/+(core|mixins)/+(base|iconfont|normalize|layouts|compatibility|grid).less'",
     "test": "npm run lint && webpack && npm run jest",
     "jest": "jest",
     "pub": "sh ./scripts/publish.sh",

scripts/demo.js

@@ -1,6 +1,27 @@
+function capitalizeFirstLetter(string) {
+  return string.charAt(0).toUpperCase() + string.slice(1);
+}
+
+window.require = function (path) {
+  var result = window;
+  var namespaces = path.split('/');
+  namespaces.forEach(function (key, i) {
+    if (i === 2) {
+      key = capitalizeFirstLetter(key);
+    }
+    if (key !== 'lib') {
+      if (result[key]) {
+        result = result[key];
+      } else {
+        throw 'There should not have modules here: ' + path;
+      }
+    }
+  });
+  return result;
+};
+
 window['css-animation'] = require('css-animation');
 window['react-router'] = require('react-router');
-window.Clipboard = require('clipboard');
 window.Clip = require('./clip');
 var antd = require('../index');
 var React = require('react');
@@ -95,7 +116,7 @@ InstantClickChangeFns.push(function () {
   ReactDOM.render(
     <Select defaultValue={antdVersion.latest} size="small" style={{width:130}}
             onChange={onChange}>{options}</Select>
-  , document.getElementById('versions-select'));
+    , document.getElementById('versions-select'));
 });
 
 window.BrowserDemo = React.createClass({
@@ -108,7 +129,7 @@ window.BrowserDemo = React.createClass({
             <div className="control minify"></div>
             <div className="control expand"></div>
           </div>
-          <input className="address-bar" defaultValue="http://www.example.com" />
+          <input className="address-bar" defaultValue="http://www.example.com"/>
         </header>
         <section className="window-content">
           {this.props.children}

site/static/style.css

@@ -509,6 +509,7 @@ footer ul li > a {
 
 .markdown img {
   vertical-align: middle;
+  max-width: 100%;
 }
 
 .markdown h1 {

site/templates/layout.html

@@ -18,7 +18,7 @@
     <!--[if IE 8]>
     <script src="https://t.alipayobjects.com/images/rmsweb/T1q8JiXftaXXXXXXXX.js"></script>
     <![endif]-->
-    <script src="https://as.alipayobjects.com/component/??console-polyfill/0.2.2/index.js,es5-shim/4.1.14/es5-shim.min.js,es5-shim/4.1.14/es5-sham.min.js,html5shiv/3.7.2/html5shiv.min.js"></script>
+    <script src="https://as.alipayobjects.com/??component/console-polyfill/0.2.2/index.js,component/es5-shim/4.1.14/es5-shim.min.js,component/es5-shim/4.1.14/es5-sham.min.js,component/html5shiv/3.7.2/html5shiv.min.js,g/component/media-match/2.0.2/media.match.min.js"></script>
     <script src="https://a.alipayobjects.com/??bluebird/2.9.30/bluebird.js,jquery/jquery/1.11.1/jquery.js"></script>
     <script>
     (function() {
@@ -46,29 +46,6 @@
       };
     </script>
     <script src="{{static_url('../dist/demo.js')}}"></script>
-    <script>
-      window.require = function (path) {
-        var result = window;
-        var namespaces = path.split('/');
-        namespaces.forEach(function (key, i) {
-          if (i === 2) {
-            key = capitalizeFirstLetter(key);
-          }
-          if (key !== 'lib') {
-            if (result[key]) {
-              result = result[key];
-            } else {
-              throw 'There should not have modules here 2.';
-            }
-          }
-        });
-        function capitalizeFirstLetter(string) {
-          return string.charAt(0).toUpperCase() + string.slice(1);
-        }
-
-        return result;
-      };
-    </script>
     <script src="https://t.alipayobjects.com/images/T1DrxhXe0mXXXXXXXX.js"></script>
     {% block scripts %}{% endblock %}
   </head>

style/components/alert.less

@@ -55,7 +55,8 @@
     }
   }
 
-  &-close-icon, &-with-description-close-icon {
+  &-close-icon,
+  &-with-description-close-icon {
     font-size: 12px;
     position: absolute;
     right: 8px;

style/components/badge.less

@@ -24,7 +24,8 @@
     z-index: 10;
     font-family: tahoma;
     box-shadow: 0 0 0 1px #fff;
-    a, a:hover {
+    a,
+    a:hover {
       color: #fff;
     }
   }
@@ -63,9 +64,9 @@ a .@{badge-prefix-cls} {
   }
 }
 
-.@{number-prefix-cls}{
+.@{number-prefix-cls} {
   overflow: hidden;
-  &-only{
+  &-only {
     display: inline-block;
     transition: transform .3s @ease-in-out;
   }

style/components/button.less

@@ -34,7 +34,8 @@
     .btn-ghost;
   }
 
-  &-circle, &-circle-outline {
+  &-circle,
+  &-circle-outline {
     .btn-circle(@btn-prefix-cls);
   }
 
@@ -79,7 +80,8 @@
   }
 
   // To ensure that a space will be placed between character and `Icon`.
-  > .@{iconfont-css-prefix} + span, > span + .@{iconfont-css-prefix} {
+  > .@{iconfont-css-prefix} + span,
+  > span + .@{iconfont-css-prefix} {
     margin-left: 0.5em;
   }
 }

style/components/calendar.less

@@ -47,8 +47,10 @@
     height: 246px;
   }
 
-  table, td, th, td {
+  table,
-    border: none;
+  th,
+  td {
+    border: 0;
   }
 
   td {
@@ -150,7 +152,7 @@
   }
 
   &-fullscreen {
-    border-top: none;
+    border-top: 0;
   }
 
   &-fullscreen &-table {

style/components/carousel/slick-theme.less

@@ -16,9 +16,10 @@
     top: 50%;
     margin-top: -10px;
     padding: 0;
-    border: none;
+    border: 0;
     outline: none;
-    &:hover, &:focus {
+    &:hover,
+    &:focus {
       outline: none;
       background: transparent;
       color: transparent;
@@ -79,7 +80,8 @@
         color: transparent;
         padding: 5px;
         cursor: pointer;
-        &:hover, &:focus {
+        &:hover,
+        &:focus {
           outline: none;
           &:before {
             opacity: 1;

style/components/collapse.less

@@ -1,12 +1,10 @@
 @collapse-prefix-cls: ant-collapse;
 
-#arrow {
+.collapse-close() {
-  .close() {
+  .iconfont-size-under-12px(7px, 270deg);
-    .iconfont-size-under-12px(7px, 270deg);
+}
-  }
+.collapse-open() {
-  .open() {
+  .iconfont-size-under-12px(7px, 360deg);
-    .iconfont-size-under-12px(7px, 360deg);
-  }
 }
 
 .@{collapse-prefix-cls} {
@@ -17,7 +15,7 @@
   & > &-item {
     border-top: 1px solid #d9d9d9;
     &:first-child {
-      border-top: none;
+      border-top: 0;
     }
 
     > .@{collapse-prefix-cls}-header {
@@ -29,7 +27,7 @@
       position: relative;
 
       .arrow {
-        #arrow > .close();
+        .collapse-close();
         .iconfont-mixin();
         position: absolute;
         color: #666;
@@ -44,7 +42,7 @@
         top: ~"16px \9";
         left: ~"0 \9";
         &:before {
-          content:"\e611";
+          content: "\e611";
         }
       }
     }
@@ -80,7 +78,7 @@
 
   & > &-item > &-header[aria-expanded="true"] {
     .arrow {
-      #arrow > .open();
+      .collapse-open();
     }
   }
 }

style/components/datepicker/Calendar.less

@@ -115,8 +115,10 @@
     width: 100%;
   }
 
-  table, td, th, td {
+  table,
-    border: none;
+  th,
+  td {
+    border: 0;
   }
 
   &-calendar-table {
@@ -206,7 +208,8 @@
     border-bottom-right-radius: 4px;
   }
 
-  &-last-month-cell &-date, &-next-month-btn-day &-date {
+  &-last-month-cell &-date,
+  &-next-month-btn-day &-date {
     color: #bbb;
   }
 
@@ -232,6 +235,10 @@
     display: inline-block;
     text-align: center;
     margin: 0 0 0 8px;
+    &-disabled {
+      color: #ccc;
+      cursor: not-allowed;
+    }
   }
 
   .@{calendar-prefix-cls}-clear-btn {

style/components/datepicker/DecadePanel.less

@@ -57,8 +57,9 @@
   }
 }
 
-.@{calendar-prefix-cls}-decade-panel-last-century-cell, .@{calendar-prefix-cls}-decade-panel-next-century-cell {
+.@{calendar-prefix-cls}-decade-panel-last-century-cell,
-  .@{calendar-prefix-cls}-decade-panel-decade{
+.@{calendar-prefix-cls}-decade-panel-next-century-cell {
+  .@{calendar-prefix-cls}-decade-panel-decade {
     user-select: none;
     -webkit-user-select: none;
   }

style/components/datepicker/YearPanel.less

@@ -57,8 +57,9 @@
   }
 }
 
-.@{calendar-prefix-cls}-year-panel-last-decade-cell, .@{calendar-prefix-cls}-year-panel-next-decade-cell {
+.@{calendar-prefix-cls}-year-panel-last-decade-cell,
-  .@{calendar-prefix-cls}-year-panel-year{
+.@{calendar-prefix-cls}-year-panel-next-decade-cell {
+  .@{calendar-prefix-cls}-year-panel-year {
     user-select: none;
     -webkit-user-select: none;
   }

style/components/dialog.less

@@ -1,7 +1,7 @@
 @dialog-prefix-cls: ant-modal;
 
-@import "./dialog/Dialog.less";
+@import "./dialog/Dialog";
-@import "./dialog/Mask.less";
+@import "./dialog/Mask";
 
 .@{dialog-prefix-cls} {
   &-header {

style/components/dialog/Dialog.less

@@ -25,7 +25,7 @@
   &-content {
     position: relative;
     background-color: #fff;
-    border: none;
+    border: 0;
     border-radius: @border-radius-base;
     background-clip: padding-box;
     outline: 0;

style/components/form.less

@@ -86,7 +86,8 @@ input[type="checkbox"] {
   }
 }
 
-.@{css-prefix}form-text, .@{css-prefix}form-split {
+.@{css-prefix}form-text,
+.@{css-prefix}form-split {
   margin: 0!important;
   padding-top: 7px;
   padding-bottom: 7px;
@@ -243,7 +244,8 @@ form {
   }
 }
 
-.@{css-prefix}form-horizontal, .@{css-prefix}form-inline {
+.@{css-prefix}form-horizontal,
+.@{css-prefix}form-inline {
   label {
     padding-top: 7px;
     padding-bottom: 7px;
@@ -255,7 +257,10 @@ form {
 }
 
 // Validation state
-.has-success, .has-warning, .has-error, .is-validating {
+.has-success,
+.has-warning,
+.has-error,
+.is-validating {
   &.has-feedback:after {
     position: absolute;
     bottom: 0;
@@ -382,36 +387,36 @@ form {
 .is-validating {
   &.has-feedback:after {
     display: inline-block;
-    .animation(loadingCircle 1s infinite linear );
+    .animation(loadingCircle 1s infinite linear);
-    content:"\e6a1";
+    content: "\e6a1";
   }
 }
 
 // need there different zoom animation
 // otherwise won't trigger anim
 @keyframes diffZoomIn1 {
-  0%{
+  0% {
     transform: scale(0);
   }
-  100%{
+  100% {
     transform: scale(1);
   }
 }
 
 @keyframes diffZoomIn2 {
-  0%{
+  0% {
     transform: scale(0);
   }
-  100%{
+  100% {
     transform: scale(1);
   }
 }
 
 @keyframes diffZoomIn3 {
-  0%{
+  0% {
     transform: scale(0);
   }
-  100%{
+  100% {
     transform: scale(1);
   }
 }

style/components/index.less

@@ -17,7 +17,6 @@
 @import "steps";
 @import "breadcrumb";
 @import "inputNumber";
-@import "typography";
 @import "checkbox";
 @import "collapse";
 @import "message";

style/components/inputNumber.less

@@ -3,6 +3,16 @@
 @import "../mixins/iconfont";
 @import "../mixins/input";
 
+.handler-disabled() {
+  opacity: 0.72;
+  color: #ccc !important;
+  cursor: default;
+  &:hover {
+    color: #ccc;
+    cursor: default;
+  }
+}
+
 .@{input-number-prefix-cls} {
   .input();
   margin: 0;
@@ -12,7 +22,7 @@
   height: 28px;
   display: inline-block;
   vertical-align: middle;
-  border: 1px solid #D9D9D9;
+  border: 1px solid #d9d9d9;
   border-radius: @border-radius-base;
   overflow: hidden;
   width: 90px;
@@ -36,7 +46,8 @@
     }
   }
 
-  &-handler-up-inner, &-handler-down-inner {
+  &-handler-up-inner,
+  &-handler-down-inner {
     .iconfont-mixin();
     line-height: 12px;
     user-select: none;
@@ -149,7 +160,7 @@
 
   &-handler-wrap {
     float: right;
-    border-left: 1px solid #D9D9D9;
+    border-left: 1px solid #d9d9d9;
     width: 22px;
     height: 28px;
     position: relative;
@@ -179,7 +190,7 @@
   }
 
   &-handler-down {
-    border-top: 1px solid #D9D9D9;
+    border-top: 1px solid #d9d9d9;
     top: -1px;
     cursor: pointer;
     &-inner {
@@ -194,17 +205,9 @@
     }
   }
 
-  .handler-disabled() {
+  &-handler-down-disabled,
-    opacity: 0.72;
+  &-handler-up-disabled,
-    color: #ccc !important;
+  &-disabled {
-    cursor: default;
-    &:hover {
-      color: #ccc;
-      cursor: default;
-    }
-  }
-
-  &-handler-down-disabled, &-handler-up-disabled, &-disabled {
     .@{input-number-prefix-cls}-handler-down-inner,
     .@{input-number-prefix-cls}-handler-up-inner {
       .handler-disabled();

style/components/menu.less

@@ -35,7 +35,6 @@
     transition: all 0.3s ease;
   }
 
-
   &-item-active,
   &-submenu-title:hover {
     background-color: tint(@primary-color, 90%);
@@ -98,7 +97,8 @@
     white-space: nowrap;
 
     // Disabled state sets text to gray and nukes hover/tab effects
-    &.@{menu-prefix-cls}-item-disabled, &.@{menu-prefix-cls}-submenu-disabled {
+    &.@{menu-prefix-cls}-item-disabled,
+    &.@{menu-prefix-cls}-submenu-disabled {
       color: #999 !important;
     }
   }
@@ -166,7 +166,7 @@
   }
 
   &-horizontal {
-    border: none;
+    border: 0;
     border-bottom: 1px solid #e9e9e9;
     box-shadow: none;
     z-index: 0;
@@ -191,7 +191,8 @@
         &:hover {
           color: @primary-color;
         }
-        &:before, &:after {
+        &:before,
+        &:after {
           position: absolute;
           background-color: transparent;
           width: 20px;
@@ -212,8 +213,10 @@
     }
   }
 
-  &-vertical, &-inline {
+  &-vertical,
-    & > .@{menu-prefix-cls}-item, & > .@{menu-prefix-cls}-submenu > .@{menu-prefix-cls}-submenu-title {
+  &-inline {
+    & > .@{menu-prefix-cls}-item,
+    & > .@{menu-prefix-cls}-submenu > .@{menu-prefix-cls}-submenu-title {
       padding: 0px 16px 0 28px;
       font-size: 12px;
       line-height: 42px;
@@ -224,7 +227,8 @@
   &-vertical&-sub {
     padding: 0;
     transform-origin: 0 0;
-    & > .@{menu-prefix-cls}-item, & > .@{menu-prefix-cls}-submenu {
+    & > .@{menu-prefix-cls}-item,
+    & > .@{menu-prefix-cls}-submenu {
       transform-origin: 0 0;
     }
   }
@@ -236,10 +240,11 @@
 
   &-sub&-inline {
     padding: 0;
-    border: none;
+    border: 0;
     box-shadow: none;
     border-radius: 0;
-    & > .@{menu-prefix-cls}-item, & > .@{menu-prefix-cls}-submenu > .@{menu-prefix-cls}-submenu-title {
+    & > .@{menu-prefix-cls}-item,
+    & > .@{menu-prefix-cls}-submenu > .@{menu-prefix-cls}-submenu-title {
       line-height: 42px;
       height: 42px;
       list-style-type: disc;

style/components/message.less

@@ -34,7 +34,7 @@
   }
 
   &-info.anticon,
-  &-loading.anticon  {
+  &-loading.anticon {
     color: @primary-color;
   }
 

style/components/notification.less

@@ -90,13 +90,14 @@
     }
   }
 
-  .notification-fade-effect() {
+  .notification-fade-effect {
     animation-duration: 0.3s;
     animation-fill-mode: both;
     animation-timing-function: @ease-in-out;
   }
 
-  &-fade-enter,&-fade-appear {
+  &-fade-enter,
+  &-fade-appear {
     opacity: 0;
     .notification-fade-effect();
     animation-play-state: paused;
@@ -107,7 +108,8 @@
     animation-play-state: paused;
   }
 
-  &-fade-enter&-fade-enter-active, &-fade-appear&-fade-appear-active {
+  &-fade-enter&-fade-enter-active,
+  &-fade-appear&-fade-appear-active {
     animation-name: NotificationFadeIn;
     animation-play-state: running;
   }
@@ -116,32 +118,32 @@
     animation-name: NotificationFadeOut;
     animation-play-state: running;
   }
+}
 
-  @keyframes NotificationFadeIn {
+@keyframes NotificationFadeIn {
-    0% {
+  0% {
-      opacity: 0;
+    opacity: 0;
-      left: @notice-width;
+    left: @notice-width;
-    }
-    100% {
-      left: 0;
-      opacity: 1;
-    }
   }
-
+  100% {
-  @keyframes NotificationFadeOut {
+    left: 0;
-    0% {
+    opacity: 1;
-      opacity: 1;
+  }
-      margin-bottom: @notice-margin-bottom;
+}
-      padding-top: @notice-padding;
+
-      padding-bottom: @notice-padding;
+@keyframes NotificationFadeOut {
-      max-height: 150px;
+  0% {
-    }
+    opacity: 1;
-    100% {
+    margin-bottom: @notice-margin-bottom;
-      opacity: 0;
+    padding-top: @notice-padding;
-      margin-bottom: 0;
+    padding-bottom: @notice-padding;
-      padding-top: 0;
+    max-height: 150px;
-      padding-bottom: 0;
+  }
-      max-height: 0;
+  100% {
-    }
+    opacity: 0;
+    margin-bottom: 0;
+    padding-top: 0;
+    padding-bottom: 0;
+    max-height: 0;
   }
 }

style/components/pagination.less

@@ -52,8 +52,8 @@
     }
   }
 
-  &-jump-prev, &-jump-next {
+  &-jump-prev,
-
+  &-jump-next {
     &:after {
       content: "•••";
       display: block;
@@ -89,10 +89,15 @@
     }
   }
 
-  &-prev, &-jump-prev, &-jump-next {
+  &-prev,
+  &-jump-prev,
+  &-jump-next {
     margin-right: 8px;
   }
-  &-prev, &-next, &-jump-prev, &-jump-next {
+  &-prev,
+  &-next,
+  &-jump-prev,
+  &-jump-next {
     font-family: Arial;
     cursor: pointer;
     color: #666;
@@ -107,7 +112,8 @@
     display: inline-block;
   }
 
-  &-prev, &-next {
+  &-prev,
+  &-next {
     border: 1px solid #d9d9d9;
 
     a {
@@ -192,8 +198,9 @@
     }
   }
 
-  &-simple &-prev, &-simple &-next {
+  &-simple &-prev,
-    border: none;
+  &-simple &-next {
+    border: 0;
     height: 24px;
     line-height: 24px;
     margin: 0;
@@ -227,7 +234,7 @@
 .@{pagination-prefix-cls} {
 
   &.mini &-item {
-    border: none;
+    border: 0;
     margin: 0;
     min-width: 20px;
     height: 20px;
@@ -240,7 +247,7 @@
     min-width: 20px;
     height: 20px;
     line-height: 20px;
-    border: none;
+    border: 0;
 
     a {
       &:after {
@@ -250,7 +257,8 @@
     }
   }
 
-  &.mini &-jump-prev, &.mini &-jump-next {
+  &.mini &-jump-prev,
+  &.mini &-jump-next {
     height: 20px;
     line-height: 20px;
   }

style/components/popover.less

@@ -52,22 +52,30 @@
   }
 
   // Offset the popover to account for the popover arrow
-  &-placement-top, &-placement-topLeft, &-placement-topRight {
+  &-placement-top,
+  &-placement-topLeft,
+  &-placement-topRight {
     margin-top: -@popover-arrow-width;
     padding-bottom: @popover-distance;
   }
 
-  &-placement-right, &-placement-rightTop, &-placement-rightBottom {
+  &-placement-right,
+  &-placement-rightTop,
+  &-placement-rightBottom {
     margin-left: @popover-arrow-width;
     padding-left: @popover-distance;
   }
 
-  &-placement-bottom, &-placement-bottomLeft, &-placement-bottomRight {
+  &-placement-bottom,
+  &-placement-bottomLeft,
+  &-placement-bottomRight {
     margin-top: @popover-arrow-width;
     padding-top: @popover-distance;
   }
 
-  &-placement-left, &-placement-leftTop, &-placement-leftBottom {
+  &-placement-left,
+  &-placement-leftTop,
+  &-placement-leftBottom {
     margin-left: -@popover-arrow-width;
     padding-right: @popover-distance;
   }

style/components/progress.less

@@ -21,7 +21,7 @@
   &-line-inner {
     display: inline-block;
     width: 100%;
-    background-color: #E9E9E9;
+    background-color: #e9e9e9;
     border-radius: 100px;
   }
   &-line-bg {

style/components/radio.less

@@ -215,7 +215,7 @@
     &-disabled.@{radio-prefix-cls}-button-checked {
       color: #fff;
       background-color: #ccc;
-      box-shadow: -1px 0px 0px 0px #CCC;
+      box-shadow: -1px 0px 0px 0px #ccc;
       border-color: #ccc;
     }
   }

style/components/select.less

@@ -21,7 +21,7 @@
     right: -1px;
     padding-right: 14px;
     color: @primary-color;
-    transform: scale(0.75)
+    transform: scale(0.75);
   }
 }
 
@@ -86,7 +86,8 @@
   }
 
   &-disabled &-selection {
-    &:hover, &:active {
+    &:hover,
+    &:active {
       border-color: #d9d9d9;
     }
   }
@@ -190,7 +191,7 @@
     }
 
     .@{select-prefix-cls}-search__field {
-      border: none;
+      border: 0;
       font-size: 100%;
       background: transparent;
       outline: 0;
@@ -407,7 +408,8 @@
         border-bottom-left-radius: 4px;
         border-bottom-right-radius: 4px;
       }
-      &:hover, &-active {
+      &:hover,
+      &-active {
         background-color: tint(@primary-color, 90%) !important;
       }
 
@@ -433,7 +435,8 @@
     }
   }
 
-  &-container-open, &-open {
+  &-container-open,
+  &-open {
     .@{select-prefix-cls}-dropdown {
       display: block;
     }

style/components/slider.less

@@ -126,13 +126,15 @@
       background-color: @slider-disabled-color !important;
     }
 
-    .@{slider-prefix-cls}-handle, .@{slider-prefix-cls}-dot {
+    .@{slider-prefix-cls}-handle,
+    .@{slider-prefix-cls}-dot {
       border-color: @slider-disabled-color!important;
       background-color: #fff;
       cursor: not-allowed;
     }
 
-    .@{slider-prefix-cls}-mark-text, .@{slider-prefix-cls}-dot {
+    .@{slider-prefix-cls}-mark-text,
+    .@{slider-prefix-cls}-dot {
       cursor: not-allowed!important;
     }
   }

style/components/spin.less

@@ -83,8 +83,14 @@
 
 // pulse
 @keyframes antSpinPulse {
-  0%, 80%, 100% { opacity: 0; }
+  0%,
-  40% { opacity: 1; }
+  80%,
+  100% {
+    opacity: 0;
+  }
+  40% {
+    opacity: 1;
+  }
 }
 
 @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {

style/components/steps.less

@@ -104,7 +104,8 @@
     }
   }
 
-  .@{steps-prefix-cls}-head, .@{steps-prefix-cls}-main {
+  .@{steps-prefix-cls}-head,
+  .@{steps-prefix-cls}-main {
     position: relative;
     display: inline-block;
     vertical-align: top;
@@ -222,7 +223,8 @@
     }
   }
 
-  &.@{steps-prefix-cls}-small .@{steps-prefix-cls}-item.@{steps-prefix-cls}-custom .@{steps-prefix-cls}-head-inner, .@{steps-prefix-cls}-item.@{steps-prefix-cls}-custom .@{steps-prefix-cls}-head-inner {
+  &.@{steps-prefix-cls}-small .@{steps-prefix-cls}-item.@{steps-prefix-cls}-custom .@{steps-prefix-cls}-head-inner,
+  .@{steps-prefix-cls}-item.@{steps-prefix-cls}-custom .@{steps-prefix-cls}-head-inner {
     width: inherit;
     height: inherit;
     line-height: inherit;

style/components/switch.less

@@ -2,7 +2,7 @@
 
 @switch-duration:.3s;
 
-.@{switch-prefix-cls}{
+.@{switch-prefix-cls} {
   position: relative;
   display: inline-block;
   box-sizing: border-box;
@@ -18,18 +18,18 @@
   user-select: none;
 
   &-inner {
-    color:#fff;
+    color: #fff;
     font-size: 12px;
     position: absolute;
     left: 24px;
   }
 
-  &:after{
+  &:after {
     position: absolute;
     width: 18px;
     height: 18px;
     left: 2px;
-    top:1px;
+    top: 1px;
     border-radius: 100%;
     background-color: #fff;
     content: " ";
@@ -37,37 +37,31 @@
     transition: left @switch-duration @ease-in-out-circ;
   }
 
-  &:hover:after{
+  &-checked {
-  }
-
-  &-checked{
     border: 1px solid @primary-color;
     background-color: @primary-color;
 
     .@{switch-prefix-cls}-inner {
-      left:6px;
+      left: 6px;
     }
 
-    &:after{
+    &:after {
       left: 22px;
     }
   }
 
-  &-disabled{
+  &-disabled {
     cursor: no-drop;
     background: #f4f4f4;
-    border-color:#f4f4f4;
+    border-color: #f4f4f4;
 
-    &:after{
+    &:after {
       background: #ccc;
       cursor: no-drop;
     }
 
-    &:hover:after{
-    }
-
     &-inner {
-      color:#ccc;
+      color: #ccc;
     }
   }
 }

style/components/table.less

@@ -64,10 +64,11 @@
   }
 
   th.@{table-prefix-cls}-column-sort {
-    background: #EAEAEA;
+    background: #eaeaea;
   }
 
-  th, td {
+  th,
+  td {
     padding: 16px 8px;
   }
 
@@ -156,11 +157,11 @@
 
   &.@{table-prefix-cls}-bordered {
     table {
-      border: 1px solid #E9E9E9;
+      border: 1px solid #e9e9e9;
     }
 
     th {
-      border-bottom: 1px solid #E9E9E9;
+      border-bottom: 1px solid #e9e9e9;
     }
 
     tr:last-child {
@@ -169,8 +170,9 @@
       }
     }
 
-    th, td {
+    th,
-      border-right: 1px solid #E9E9E9;
+    td {
+      border-right: 1px solid #e9e9e9;
       &:last-child {
         border-right: 0;
       }
@@ -192,7 +194,7 @@
     text-align: center;
     font-size: 12px;
     color: #999;
-    border-bottom: 1px solid #E9E9E9;
+    border-bottom: 1px solid #e9e9e9;
     position: absolute;
     top: 50px;
     left: 0;
@@ -236,6 +238,7 @@
     }
     &.clear {
       float: right;
+      margin-right: -32px;
     }
   }
 }
@@ -249,7 +252,7 @@
       height: 18px;
       text-align: center;
       line-height: 15px;
-      border: 1px solid #E9E9E9;
+      border: 1px solid #e9e9e9;
       user-select: none;
       background: #fff;
       &-cell {
@@ -258,15 +261,16 @@
     }
 
     &-expanded:after {
-      content: '-'
+      content: '-';
     }
 
     &-collapsed:after {
-      content: '+'
+      content: '+';
     }
   }
   tr&-expanded-row {
-    &, &:hover {
+    &,
+    &:hover {
       background: #fbfbfb;
     }
   }

style/components/tabs.less

@@ -49,7 +49,8 @@
     padding-right: 32px;
   }
 
-  &-tab-prev, &-tab-next {
+  &-tab-prev,
+  &-tab-next {
     user-select: none;
     z-index: 2;
     margin-right: -2px;
@@ -58,7 +59,7 @@
     height: 100%;
     line-height: 32px;
     cursor: pointer;
-    border: none;
+    border: 0;
     background-color: transparent;
     position: absolute;
     text-align: center;
@@ -134,7 +135,8 @@
     list-style: none;
     float: left;
 
-    &:before, &:after {
+    &:before,
+    &:after {
       display: table;
       content: " ";
     }
@@ -144,7 +146,8 @@
     }
 
     div.@{tab-prefix-cls}-tab-active {
-      > .@{tab-prefix-cls}-tab-inner, > .@{tab-prefix-cls}-tab-inner:hover {
+      > .@{tab-prefix-cls}-tab-inner,
+      > .@{tab-prefix-cls}-tab-inner:hover {
         color: tint(@primary-color, 20%);
         cursor: pointer;
         text-decoration: none;

style/components/timepicker/Select.less

@@ -1,6 +1,6 @@
 .@{timepicker-prefix-cls}-select {
   float: left;
-  overflow-y:auto;
+  overflow-y: auto;
   font-size: 12px;
   border: 1px solid #e9e9e9;
   border-width: 0 1px;

style/components/tooltip.less

@@ -38,16 +38,24 @@
     display: none;
   }
 
-  &-placement-top, &-placement-topLeft, &-placement-topRight {
+  &-placement-top,
+  &-placement-topLeft,
+  &-placement-topRight {
     padding: @tooltip-arrow-width 0 @tooltip-distance 0;
   }
-  &-placement-right, &-placement-rightTop, &-placement-rightBottom {
+  &-placement-right,
+  &-placement-rightTop,
+  &-placement-rightBottom {
     padding: 0 @tooltip-arrow-width 0 @tooltip-distance;
   }
-  &-placement-bottom, &-placement-bottomLeft, &-placement-bottomRight {
+  &-placement-bottom,
+  &-placement-bottomLeft,
+  &-placement-bottomRight {
     padding: @tooltip-distance 0 @tooltip-arrow-width 0;
   }
-  &-placement-left, &-placement-leftTop, &-placement-leftBottom {
+  &-placement-left,
+  &-placement-leftTop,
+  &-placement-leftBottom {
     padding: 0 @tooltip-distance 0 @tooltip-arrow-width;
   }
 }

style/components/tree.less

@@ -64,7 +64,7 @@
           font-family: 'anticon';
           font-weight: bold;
           .animation(loadingCircle 1s infinite linear);
-          margin-top:8px;
+          margin-top: 8px;
         }
       }
       &.@{tree-prefix-cls}-switcher {

style/components/typography.less

@@ -1,3 +0,0 @@
-//== Typography
-
-//** Headings: h1 h2 h3 h4 h5 h6

style/components/upload.less

@@ -7,7 +7,7 @@
     width: 100%;
   }
 
-  input[type=file] {
+  input[type="file"] {
     cursor: pointer;
   }
 
@@ -141,18 +141,18 @@
   .@{upload-prefix-cls}-margin-top-leave {
     animation: uploadMarginTopOut .3s @ease-in-out-circ;
   }
+}
 
-  @keyframes uploadMarginTopIn {
+@keyframes uploadMarginTopIn {
-    from {
+  from {
-      margin-top: -25px;
+    margin-top: -25px;
-      opacity: 0;
+    opacity: 0;
-    }
+  }
-  }
+}
-
+
-  @keyframes uploadMarginTopOut {
+@keyframes uploadMarginTopOut {
-    to {
+  to {
-      margin-top: -25px;
+    margin-top: -25px;
-      opacity: 0;
+    opacity: 0;
-    }
   }
 }

style/core/base.less

@@ -25,8 +25,8 @@ body {
 
 // unify the setting of elements's margin and padding for browsers
 body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td,hr,button,article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {
-  margin:0;
+  margin: 0;
-  padding:0;
+  padding: 0;
 }
 
 // Reset fonts for relevant elements

style/core/index.less

@@ -1,5 +1,5 @@
 @import "base";
-@import "color";
 @import "iconfont";
 @import "layouts";
 @import "motion";
+

style/core/motion.less

@@ -4,7 +4,8 @@
 }
 
 .make-motion(@className, @keyframeName) {
-  .@{className}-enter, .@{className}-appear {
+  .@{className}-enter,
+  .@{className}-appear {
     .motion-common();
     animation-play-state: paused;
   }
@@ -12,7 +13,8 @@
     .motion-common();
     animation-play-state: paused;
   }
-  .@{className}-enter.@{className}-enter-active, .@{className}-appear.@{className}-appear-active {
+  .@{className}-enter.@{className}-enter-active,
+  .@{className}-appear.@{className}-appear-active {
     animation-name: ~"@{keyframeName}In";
     animation-play-state: running;
   }

style/core/motion/fade.less

@@ -1,6 +1,7 @@
 .fade-motion(@className, @keyframeName) {
   .make-motion(@className, @keyframeName);
-  .@{className}-enter, .@{className}-appear {
+  .@{className}-enter,
+  .@{className}-appear {
     opacity: 0;
     animation-timing-function: linear;
   }

style/core/motion/move.less

@@ -1,6 +1,7 @@
 .move-motion(@className, @keyframeName) {
   .make-motion(@className, @keyframeName);
-  .@{className}-enter, .@{className}-appear {
+  .@{className}-enter,
+  .@{className}-appear {
     opacity: 0;
     animation-timing-function: @ease-out-circ;
   }

style/core/motion/other.less

@@ -8,3 +8,4 @@
     transform: rotate(360deg);
   }
 }
+

style/core/motion/slide.less

@@ -1,6 +1,7 @@
 .slide-motion(@className, @keyframeName) {
   .make-motion(@className, @keyframeName);
-  .@{className}-enter, .@{className}-appear {
+  .@{className}-enter,
+  .@{className}-appear {
     opacity: 0;
     animation-timing-function: @ease-out-quint;
   }

style/core/motion/swing.less

@@ -1,9 +1,11 @@
 .swing-motion(@className, @keyframeName) {
-  .@{className}-enter, .@{className}-appear {
+  .@{className}-enter,
+  .@{className}-appear {
     .motion-common();
     animation-play-state: paused;
   }
-  .@{className}-enter.@{className}-enter-active, .@{className}-appear.@{className}-appear-active {
+  .@{className}-enter.@{className}-enter-active,
+  .@{className}-appear.@{className}-appear-active {
     animation-name: ~"@{keyframeName}In";
     animation-play-state: running;
   }
@@ -12,7 +14,8 @@
 .swing-motion(swing, antSwing);
 
 @keyframes antSwingIn {
-  0%, 100% {
+  0%,
+  100% {
     transform: translateX(0px);
   }
   20% {

style/core/motion/zoom.less

@@ -1,6 +1,7 @@
 .zoom-motion(@className, @keyframeName) {
   .make-motion(@className, @keyframeName);
-  .@{className}-enter, .@{className}-appear {
+  .@{className}-enter,
+  .@{className}-appear {
     transform: scale(0); // need this by yiminghe
     animation-timing-function: @ease-out-circ;
   }

style/mixins/button.less

@@ -110,7 +110,7 @@
   }
 
   &.disabled,
-  &[disabled]{
+  &[disabled] {
     cursor: @cursor-disabled;
   }
 

style/mixins/form.less

@@ -1,5 +1,6 @@
 .form-control-validation(@text-color: @input-color; @border-color: @input-border-color; @background-color: @input-bg) {
-  .@{css-prefix}form-explain, .@{css-prefix}form-split {
+  .@{css-prefix}form-explain,
+  .@{css-prefix}form-split {
     color: @text-color;
   }
   // 输入框的不同校验状态

style/mixins/input.less

@@ -18,7 +18,7 @@
 }
 
 // == when hoverd
-.hover(@color: @input-hover-border-color ) {
+.hover(@color: @input-hover-border-color) {
   border-color: tint(@color, 20%);
 }
 

style/mixins/vendor-prefixes.less

@@ -54,7 +54,7 @@
 // Prevent browsers from flickering when using CSS 3D transforms.
 // Default value is `visible`, but can be changed to `hidden`
 
-.backface-visibility(@visibility){
+.backface-visibility(@visibility) {
   -webkit-backface-visibility: @visibility;
      -moz-backface-visibility: @visibility;
           backface-visibility: @visibility;
@@ -104,8 +104,14 @@
     color: @color;
     opacity: 1; // Override Firefox's unusual default opacity; see https://github.com/twbs/bootstrap/pull/11526
   }
-  &:-ms-input-placeholder { color: @color; } // Internet Explorer 10+
+  // Internet Explorer 10+
-  &::-webkit-input-placeholder  { color: @color; } // Safari and Chrome
+  &:-ms-input-placeholder {
+    color: @color;
+  }
+  // Safari and Chrome
+  &::-webkit-input-placeholder {
+    color: @color;
+  }
 }
 
 // Transformations