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

2024-12-24 15:46:10 +08:00 · 2015-11-30 19:18:01 +08:00 · 2015-11-30 19:18:01 +08:00 · 5827e45f52
commit 5827e45f52
parent 9468b24b62 454ba1b8d5
77 changed files with 496 additions and 335 deletions
--- a/.lesshintrc
+++ b/.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
+}
--- a/.lesslintrc
+++ b/.lesslintrc
@ -1,6 +0,0 @@
-{
-  "import": false,
-  "require-newline": false,
-  "leading-zero": false,
-  "single-comment": false
-}
--- a/CHANGELOG.md
+++ b/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 的内容。
--- a/README-zh_CN.md
+++ b/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)
--- a/README.md
+++ b/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)
- [Components](http://ant.design/components/)
+- [React UI library](http://ant.design/docs/introduce)
 - [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)
--- a/components/badge/ScrollNumber.jsx
+++ b/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,
--- a/components/datepicker/demo/month-picker.md
+++ b/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'));
+````
--- a/components/datepicker/demo/time.md
+++ b/components/datepicker/demo/time.md
@ -9,35 +9,44 @@
 ````jsx
 import { Datepicker, Timepicker } from 'antd';

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

-class Icon extends React.Component {
-
-  render() {
-    let {type, className = '', ...other} = this.props;
+function Icon(props) {
+  let {type, className = '', ...other} = props;
  className += ` anticon anticon-${type}`;
-    return <i className={className} {...other}></i>;
-  }
-
+  return <i className={className} {...other} />;
 }

 export default Icon;
--- a/components/pagination/demo/basic.md
+++ b/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'));
 ````
--- a/components/pagination/demo/changer.md
+++ b/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'));
 ````
--- a/components/pagination/demo/controlled.md
+++ b/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'));
+````
+
--- a/components/pagination/demo/jump.md
+++ b/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'));
 ````
--- a/components/pagination/demo/locale.md
+++ b/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'));
 ````
--- a/components/pagination/demo/mini.md
+++ b/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'));
 ````
--- a/components/pagination/demo/more.md
+++ b/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'));
 ````
--- a/components/pagination/demo/simple.md
+++ b/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'));
 ````
--- a/components/pagination/index.md
+++ b/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           |
--- a/components/radio/demo/radiobutton.md
+++ b/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>
--- a/components/radio/group.jsx
+++ b/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;
--- a/components/table/demo/ajax.md
+++ b/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: {
-          city: 'hz'
-        }
+        data: { city: 'hz' }
      }),
-      pagination: {
-        current: 1
-      }
+      pagination,
    });
  },
  render() {
--- a/components/table/index.md
+++ b/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} />;
+```
--- a/components/timepicker/demo/basic.md
+++ b/components/timepicker/demo/basic.md
@ -10,10 +10,12 @@
 import { Timepicker } from 'antd';

 function onChange(time) {
+  if (time) {
    console.log(time.toLocaleTimeString('zh-CN', {
      hour12: false
    }));
  }
+}

 ReactDOM.render(
  <Timepicker defaultValue="12:08:23" onChange={onChange} />
--- a/components/tree/demo/special.md
+++ b/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'));
-
 ````
--- a/docs/getting-started.md
+++ b/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>
--- a/package.json
+++ b/package.json
@ -1,7 +1,7 @@
 {
  "name": "antd",
-  "version": "0.10.2",
-  "stableVersion": "0.10.2",
+  "version": "0.10.4",
+  "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",
--- a/scripts/demo.js
+++ b/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');
--- a/site/static/style.css
+++ b/site/static/style.css
@ -509,6 +509,7 @@ footer ul li > a {

 .markdown img {
  vertical-align: middle;
+  max-width: 100%;
 }

 .markdown h1 {
--- a/site/templates/layout.html
+++ b/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>
--- a/style/components/alert.less
+++ b/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;
--- a/style/components/badge.less
+++ b/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;
    }
  }
--- a/style/components/button.less
+++ b/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;
  }
 }
--- a/style/components/calendar.less
+++ b/style/components/calendar.less
@ -47,8 +47,10 @@
    height: 246px;
  }

-  table, td, th, td {
-    border: none;
+  table,
+  th,
+  td {
+    border: 0;
  }

  td {
@ -150,7 +152,7 @@
  }

  &-fullscreen {
-    border-top: none;
+    border-top: 0;
  }

  &-fullscreen &-table {
--- a/style/components/carousel/slick-theme.less
+++ b/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;
--- a/style/components/collapse.less
+++ b/style/components/collapse.less
@ -1,13 +1,11 @@
@collapse-prefix-cls: ant-collapse;

-#arrow {
-  .close() {
+.collapse-close() {
  .iconfont-size-under-12px(7px, 270deg);
 }
-  .open() {
+.collapse-open() {
  .iconfont-size-under-12px(7px, 360deg);
 }
-}

 .@{collapse-prefix-cls} {
  background-color: #f4f4f4;
@ -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;
@ -80,7 +78,7 @@

  & > &-item > &-header[aria-expanded="true"] {
    .arrow {
-      #arrow > .open();
+      .collapse-open();
    }
  }
 }
--- a/style/components/datepicker/Calendar.less
+++ b/style/components/datepicker/Calendar.less
@ -115,8 +115,10 @@
    width: 100%;
  }

-  table, td, th, td {
-    border: none;
+  table,
+  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 {
--- a/style/components/datepicker/DecadePanel.less
+++ b/style/components/datepicker/DecadePanel.less
@ -57,7 +57,8 @@
  }
 }

-.@{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-next-century-cell {
  .@{calendar-prefix-cls}-decade-panel-decade {
    user-select: none;
    -webkit-user-select: none;
--- a/style/components/datepicker/YearPanel.less
+++ b/style/components/datepicker/YearPanel.less
@ -57,7 +57,8 @@
  }
 }

-.@{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-next-decade-cell {
  .@{calendar-prefix-cls}-year-panel-year {
    user-select: none;
    -webkit-user-select: none;
--- a/style/components/dialog.less
+++ b/style/components/dialog.less
@ -1,7 +1,7 @@
@dialog-prefix-cls: ant-modal;

-@import "./dialog/Dialog.less";
-@import "./dialog/Mask.less";
+@import "./dialog/Dialog";
+@import "./dialog/Mask";

 .@{dialog-prefix-cls} {
  &-header {
--- a/style/components/dialog/Dialog.less
+++ b/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;
--- a/style/components/form.less
+++ b/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;
--- a/style/components/index.less
+++ b/style/components/index.less
@ -17,7 +17,6 @@
@import "steps";
@import "breadcrumb";
@import "inputNumber";
-@import "typography";
@import "checkbox";
@import "collapse";
@import "message";
--- a/style/components/inputNumber.less
+++ b/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() {
-    opacity: 0.72;
-    color: #ccc !important;
-    cursor: default;
-    &:hover {
-      color: #ccc;
-      cursor: default;
-    }
-  }
-
-  &-handler-down-disabled, &-handler-up-disabled, &-disabled {
+  &-handler-down-disabled,
+  &-handler-up-disabled,
+  &-disabled {
    .@{input-number-prefix-cls}-handler-down-inner,
    .@{input-number-prefix-cls}-handler-up-inner {
      .handler-disabled();
--- a/style/components/menu.less
+++ b/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 {
-    & > .@{menu-prefix-cls}-item, & > .@{menu-prefix-cls}-submenu > .@{menu-prefix-cls}-submenu-title {
+  &-vertical,
+  &-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;
--- a/style/components/notification.less
+++ b/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,6 +118,7 @@
    animation-name: NotificationFadeOut;
    animation-play-state: running;
  }
+}

@keyframes NotificationFadeIn {
  0% {
@ -144,4 +147,3 @@
    max-height: 0;
  }
 }
-}
--- a/style/components/pagination.less
+++ b/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 {
-    border: none;
+  &-simple &-prev,
+  &-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;
  }
--- a/style/components/popover.less
+++ b/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;
  }
--- a/style/components/progress.less
+++ b/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 {
--- a/style/components/radio.less
+++ b/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;
    }
  }
--- a/style/components/select.less
+++ b/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;
    }
--- a/style/components/slider.less
+++ b/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;
    }
  }
--- a/style/components/spin.less
+++ b/style/components/spin.less
@ -83,8 +83,14 @@

 // pulse
@keyframes antSpinPulse {
-  0%, 80%, 100% { opacity: 0; }
-  40% { opacity: 1; }
+  0%,
+  80%,
+  100% {
+    opacity: 0;
+  }
+  40% {
+    opacity: 1;
+  }
 }

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
--- a/style/components/steps.less
+++ b/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;
--- a/style/components/switch.less
+++ b/style/components/switch.less
@ -37,9 +37,6 @@
    transition: left @switch-duration @ease-in-out-circ;
  }

-  &:hover:after{
-  }
-
  &-checked {
    border: 1px solid @primary-color;
    background-color: @primary-color;
@ -63,9 +60,6 @@
      cursor: no-drop;
    }

-    &:hover:after{
-    }
-
    &-inner {
      color: #ccc;
    }
--- a/style/components/table.less
+++ b/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 {
-      border-right: 1px solid #E9E9E9;
+    th,
+    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;
    }
  }
--- a/style/components/tabs.less
+++ b/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;
--- a/style/components/tooltip.less
+++ b/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;
  }
 }
--- a/style/components/typography.less
+++ b/style/components/typography.less
@ -1,3 +0,0 @@
-//== Typography
-
-//** Headings: h1 h2 h3 h4 h5 h6
--- a/style/components/upload.less
+++ b/style/components/upload.less
@ -7,7 +7,7 @@
    width: 100%;
  }

-  input[type=file] {
+  input[type="file"] {
    cursor: pointer;
  }

@ -141,6 +141,7 @@
  .@{upload-prefix-cls}-margin-top-leave {
    animation: uploadMarginTopOut .3s @ease-in-out-circ;
  }
+}

@keyframes uploadMarginTopIn {
  from {
@ -155,4 +156,3 @@
    opacity: 0;
  }
 }
-}
--- a/style/core/color.less
+++ b/style/core/color.less
--- a/style/core/index.less
+++ b/style/core/index.less
@ -1,5 +1,5 @@
@import "base";
-@import "color";
@import "iconfont";
@import "layouts";
@import "motion";
+
--- a/style/core/motion.less
+++ b/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;
  }
--- a/style/core/motion/fade.less
+++ b/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;
  }
--- a/style/core/motion/move.less
+++ b/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;
  }
--- a/style/core/motion/other.less
+++ b/style/core/motion/other.less
@ -8,3 +8,4 @@
    transform: rotate(360deg);
  }
 }
+
--- a/style/core/motion/slide.less
+++ b/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;
  }
--- a/style/core/motion/swing.less
+++ b/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% {
--- a/style/core/motion/zoom.less
+++ b/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;
  }
--- a/style/mixins/form.less
+++ b/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;
  }
  // 输入框的不同校验状态
--- a/style/mixins/vendor-prefixes.less
+++ b/style/mixins/vendor-prefixes.less
@ -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+
-  &::-webkit-input-placeholder  { color: @color; } // Safari and Chrome
+  // Internet Explorer 10+
+  &:-ms-input-placeholder {
+    color: @color;
+  }
+  // Safari and Chrome
+  &::-webkit-input-placeholder {
+    color: @color;
+  }
 }

 // Transformations