From 30b23e4fba5a53edf2791db6fbc1f21d96cb7197 Mon Sep 17 00:00:00 2001
From: lynzz <lynzz168@gmail.com>
Date: Sat, 24 Dec 2016 17:05:21 +0800
Subject: [PATCH] [style] bulma change to ant-design

---
 README.md                                     |   2 +-
 examples/app.vue                              |  24 +-
 examples/components/demo-block.vue            |  19 +-
 examples/docs/button.md                       |  46 +-
 examples/docs/form.md                         |  26 +
 examples/docs/getting-started.md              |  12 +
 examples/docs/icon.md                         |  13 +-
 examples/docs/input.md                        |  63 +-
 examples/docs/layout.md                       | 213 +------
 examples/docs/select.md                       |   1 +
 examples/index.html                           |   3 -
 examples/nav.config.json                      |  16 +
 package.json                                  |  17 +-
 src/assets/logo.png                           | Bin 6849 -> 0 bytes
 src/basic/col.vue                             |  28 -
 src/basic/row.vue                             |  28 -
 src/{basic => button}/button-group.vue        |   2 +-
 src/{basic => button}/button.vue              |  14 +-
 src/{form => }/checkbox/checkbox-group.vue    |   2 +-
 src/{form => }/checkbox/checkbox.vue          |  38 +-
 src/form/form-item.vue                        |  69 ++-
 src/form/form.vue                             |  16 +-
 src/grid/col.vue                              |  68 +++
 src/grid/row.vue                              |  38 ++
 src/{basic => icon}/icon.vue                  |   7 +-
 src/index.js                                  |  36 +-
 src/{form => input}/input.vue                 |  78 +--
 src/{view => notice}/notification.vue         |   2 +
 src/{form => }/radio/radio-group.vue          |   2 +-
 src/{form => }/radio/radio.vue                |  38 +-
 src/select/select.vue                         |  16 +
 src/style/components/button/index.less        | 127 ++++
 src/style/components/button/mixin.less        | 251 ++++++++
 src/style/components/checkbox/index.less      |   4 +
 src/style/components/checkbox/mixin.less      | 161 +++++
 src/style/components/form/index.less          | 470 +++++++++++++++
 src/style/components/form/mixin.less          | 102 ++++
 src/style/components/grid/index.less          | 102 ++++
 src/style/components/grid/mixin.less          | 100 ++++
 src/style/components/index.less               |   7 +
 src/style/components/input/index.less         |  14 +
 src/style/components/input/mixin.less         | 239 ++++++++
 src/style/components/input/search-input.less  |  75 +++
 src/style/components/radio/index.less         | 231 ++++++++
 src/style/components/table/index.less         | 549 ++++++++++++++++++
 src/style/core/base.less                      | 103 ++++
 src/style/core/iconfont.less                  | 250 ++++++++
 src/style/core/index.less                     |   4 +
 src/style/core/motion.less                    |  15 +
 src/style/core/motion/fade.less               |  31 +
 src/style/core/motion/move.less               | 120 ++++
 src/style/core/motion/other.less              |  11 +
 src/style/core/motion/slide.less              | 120 ++++
 src/style/core/motion/swing.less              |  33 ++
 src/style/core/motion/zoom.less               | 160 +++++
 src/style/core/normalize.less                 | 461 +++++++++++++++
 src/style/index.less                          |   3 +
 src/style/mixins/clearfix.less                |  16 +
 src/style/mixins/compatibility.less           |  45 ++
 src/style/mixins/iconfont.less                |  38 ++
 src/style/mixins/index.less                   |   8 +
 src/style/mixins/motion.less                  |  32 +
 src/style/mixins/opacity.less                 |   8 +
 src/style/mixins/size.less                    |  10 +
 src/style/themes/default.less                 | 197 +++++++
 src/table/plugins/pagination/pagination.vue   |  15 +
 src/table/plugins/sort/sort.vue               |   0
 src/table/table.vue                           |  22 +
 src/{data => }/tag/tag.vue                    |   0
 src/theme/bulma/bulma.sass                    |   7 -
 src/theme/bulma/sass/base/base.sass           |   5 -
 src/theme/bulma/sass/base/classes.sass        |  19 -
 src/theme/bulma/sass/base/generic.sass        | 100 ----
 src/theme/bulma/sass/base/helpers.sass        | 104 ----
 src/theme/bulma/sass/components/card.sass     |  58 --
 .../bulma/sass/components/components.sass     |  14 -
 src/theme/bulma/sass/components/grid.sass     | 282 ---------
 .../bulma/sass/components/highlight.sass      | 123 ----
 src/theme/bulma/sass/components/level.sass    |  57 --
 src/theme/bulma/sass/components/media.sass    |  58 --
 src/theme/bulma/sass/components/menu.sass     |  32 -
 src/theme/bulma/sass/components/message.sass  |  39 --
 src/theme/bulma/sass/components/modal.sass    |  75 ---
 src/theme/bulma/sass/components/nav.sass      | 133 -----
 .../bulma/sass/components/pagination.sass     |  35 --
 src/theme/bulma/sass/components/panel.sass    |  57 --
 src/theme/bulma/sass/components/tabs.sass     | 129 ----
 src/theme/bulma/sass/elements/box.sass        |  14 -
 src/theme/bulma/sass/elements/button.sass     | 110 ----
 src/theme/bulma/sass/elements/checkbox.sass   |  59 --
 src/theme/bulma/sass/elements/content.sass    |  73 ---
 src/theme/bulma/sass/elements/elements.sass   |  16 -
 src/theme/bulma/sass/elements/form-item.sass  |  34 --
 src/theme/bulma/sass/elements/form.sass       | 256 --------
 src/theme/bulma/sass/elements/image.sass      |  36 --
 .../bulma/sass/elements/notification.sass     |  21 -
 src/theme/bulma/sass/elements/other.sass      | 187 ------
 src/theme/bulma/sass/elements/progress.sass   |  32 -
 src/theme/bulma/sass/elements/radio.sass      |  68 ---
 src/theme/bulma/sass/elements/table.sass      |  91 ---
 src/theme/bulma/sass/elements/title.sass      |  72 ---
 src/theme/bulma/sass/layout/footer.sass       |  13 -
 src/theme/bulma/sass/layout/hero.sass         | 146 -----
 src/theme/bulma/sass/layout/layout.sass       |   5 -
 src/theme/bulma/sass/layout/section.sass      |  10 -
 .../bulma/sass/utilities/animations.sass      |   5 -
 src/theme/bulma/sass/utilities/controls.sass  |  52 --
 src/theme/bulma/sass/utilities/functions.sass |  34 --
 src/theme/bulma/sass/utilities/mixins.sass    |  94 ---
 src/theme/bulma/sass/utilities/reset.sass     | 174 ------
 src/theme/bulma/sass/utilities/utilities.sass |   8 -
 src/theme/bulma/sass/utilities/variables.sass | 153 -----
 112 files changed, 4605 insertions(+), 3556 deletions(-)
 create mode 100644 examples/docs/select.md
 delete mode 100644 src/assets/logo.png
 delete mode 100644 src/basic/col.vue
 delete mode 100644 src/basic/row.vue
 rename src/{basic => button}/button-group.vue (81%)
 rename src/{basic => button}/button.vue (83%)
 rename src/{form => }/checkbox/checkbox-group.vue (89%)
 rename src/{form => }/checkbox/checkbox.vue (68%)
 create mode 100644 src/grid/col.vue
 create mode 100644 src/grid/row.vue
 rename src/{basic => icon}/icon.vue (62%)
 rename src/{form => input}/input.vue (59%)
 rename src/{view => notice}/notification.vue (81%)
 rename src/{form => }/radio/radio-group.vue (92%)
 rename src/{form => }/radio/radio.vue (61%)
 create mode 100644 src/select/select.vue
 create mode 100644 src/style/components/button/index.less
 create mode 100644 src/style/components/button/mixin.less
 create mode 100644 src/style/components/checkbox/index.less
 create mode 100644 src/style/components/checkbox/mixin.less
 create mode 100644 src/style/components/form/index.less
 create mode 100644 src/style/components/form/mixin.less
 create mode 100644 src/style/components/grid/index.less
 create mode 100644 src/style/components/grid/mixin.less
 create mode 100644 src/style/components/index.less
 create mode 100644 src/style/components/input/index.less
 create mode 100644 src/style/components/input/mixin.less
 create mode 100644 src/style/components/input/search-input.less
 create mode 100644 src/style/components/radio/index.less
 create mode 100644 src/style/components/table/index.less
 create mode 100644 src/style/core/base.less
 create mode 100644 src/style/core/iconfont.less
 create mode 100644 src/style/core/index.less
 create mode 100644 src/style/core/motion.less
 create mode 100644 src/style/core/motion/fade.less
 create mode 100644 src/style/core/motion/move.less
 create mode 100644 src/style/core/motion/other.less
 create mode 100644 src/style/core/motion/slide.less
 create mode 100644 src/style/core/motion/swing.less
 create mode 100644 src/style/core/motion/zoom.less
 create mode 100644 src/style/core/normalize.less
 create mode 100644 src/style/index.less
 create mode 100644 src/style/mixins/clearfix.less
 create mode 100644 src/style/mixins/compatibility.less
 create mode 100644 src/style/mixins/iconfont.less
 create mode 100644 src/style/mixins/index.less
 create mode 100644 src/style/mixins/motion.less
 create mode 100644 src/style/mixins/opacity.less
 create mode 100644 src/style/mixins/size.less
 create mode 100644 src/style/themes/default.less
 create mode 100644 src/table/plugins/pagination/pagination.vue
 create mode 100644 src/table/plugins/sort/sort.vue
 create mode 100644 src/table/table.vue
 rename src/{data => }/tag/tag.vue (100%)
 delete mode 100644 src/theme/bulma/bulma.sass
 delete mode 100644 src/theme/bulma/sass/base/base.sass
 delete mode 100644 src/theme/bulma/sass/base/classes.sass
 delete mode 100644 src/theme/bulma/sass/base/generic.sass
 delete mode 100644 src/theme/bulma/sass/base/helpers.sass
 delete mode 100644 src/theme/bulma/sass/components/card.sass
 delete mode 100644 src/theme/bulma/sass/components/components.sass
 delete mode 100644 src/theme/bulma/sass/components/grid.sass
 delete mode 100644 src/theme/bulma/sass/components/highlight.sass
 delete mode 100644 src/theme/bulma/sass/components/level.sass
 delete mode 100644 src/theme/bulma/sass/components/media.sass
 delete mode 100644 src/theme/bulma/sass/components/menu.sass
 delete mode 100644 src/theme/bulma/sass/components/message.sass
 delete mode 100644 src/theme/bulma/sass/components/modal.sass
 delete mode 100644 src/theme/bulma/sass/components/nav.sass
 delete mode 100644 src/theme/bulma/sass/components/pagination.sass
 delete mode 100644 src/theme/bulma/sass/components/panel.sass
 delete mode 100644 src/theme/bulma/sass/components/tabs.sass
 delete mode 100644 src/theme/bulma/sass/elements/box.sass
 delete mode 100644 src/theme/bulma/sass/elements/button.sass
 delete mode 100644 src/theme/bulma/sass/elements/checkbox.sass
 delete mode 100644 src/theme/bulma/sass/elements/content.sass
 delete mode 100644 src/theme/bulma/sass/elements/elements.sass
 delete mode 100644 src/theme/bulma/sass/elements/form-item.sass
 delete mode 100644 src/theme/bulma/sass/elements/form.sass
 delete mode 100644 src/theme/bulma/sass/elements/image.sass
 delete mode 100644 src/theme/bulma/sass/elements/notification.sass
 delete mode 100644 src/theme/bulma/sass/elements/other.sass
 delete mode 100644 src/theme/bulma/sass/elements/progress.sass
 delete mode 100644 src/theme/bulma/sass/elements/radio.sass
 delete mode 100644 src/theme/bulma/sass/elements/table.sass
 delete mode 100644 src/theme/bulma/sass/elements/title.sass
 delete mode 100644 src/theme/bulma/sass/layout/footer.sass
 delete mode 100644 src/theme/bulma/sass/layout/hero.sass
 delete mode 100644 src/theme/bulma/sass/layout/layout.sass
 delete mode 100644 src/theme/bulma/sass/layout/section.sass
 delete mode 100644 src/theme/bulma/sass/utilities/animations.sass
 delete mode 100644 src/theme/bulma/sass/utilities/controls.sass
 delete mode 100644 src/theme/bulma/sass/utilities/functions.sass
 delete mode 100644 src/theme/bulma/sass/utilities/mixins.sass
 delete mode 100644 src/theme/bulma/sass/utilities/reset.sass
 delete mode 100644 src/theme/bulma/sass/utilities/utilities.sass
 delete mode 100644 src/theme/bulma/sass/utilities/variables.sass

diff --git a/README.md b/README.md
index 5cecddf..07aa736 100644
--- a/README.md
+++ b/README.md
@@ -1,6 +1,6 @@
 # vue-pandora
 
-> vue pandora ui, base on [bulma](http://bulma.io), **still in development**
+> vue pandora ui, base on [ant-design](http://ant.design), **still in development**
 
 ## Build Setup
 
diff --git a/examples/app.vue b/examples/app.vue
index ce38b20..2bd3e3f 100644
--- a/examples/app.vue
+++ b/examples/app.vue
@@ -14,7 +14,7 @@
     name: 'app'
   }
 </script>
-<style lang="sass">
+<style lang="less">
 
 @import '../node_modules/highlight.js/styles/color-brewer.css';
 
@@ -224,6 +224,28 @@ ul, li {
   animation: xRightMatrix .5s ease-out;
 }
 
+.table {
+  font-size: 13px;
+  border-collapse: collapse;
+  border-spacing: 0px;
+  empty-cells: show;
+  border: 1px solid #e9e9e9;
+  width: 100%;
+  margin: 16px 0;
+
+  th {
+    background: #F7F7F7;
+    white-space: nowrap;
+    color: #5C6B77;
+    font-weight: 600;
+  }
+  th, td {
+    border: 1px solid #e9e9e9;
+    padding: 8px 16px;
+    text-align: left;
+  }
+}
+
 @keyframes xRightMatrix {
   0% {
     opacity: 0;
diff --git a/examples/components/demo-block.vue b/examples/components/demo-block.vue
index 7b53bb1..cea7157 100644
--- a/examples/components/demo-block.vue
+++ b/examples/components/demo-block.vue
@@ -12,12 +12,29 @@
   </div>
 </template>
 
-<style lang="sass">
+<style lang="less">
   .demo-block {
     border: solid 1px #eaeefb;
     border-radius: 4px;
     transition: .2s;
 
+    .ant-row > div {
+      text-align: center;
+      min-height: 30px;
+      margin-top: 8px;
+      margin-bottom: 8px;
+      color: #fff;
+      padding: 16px 0;
+    }
+
+    .ant-row > div:not(.gutter-row):nth-child(2n+1),
+    .ant-row-flex >div:not(.gutter-row):nth-child(2n+1){
+      background: rgba(0, 160, 233, 0.7);
+    }
+    .ant-row > div:not(.gutter-row),
+    .ant-row-flex >div:not(.gutter-row){
+      background: #00A0E9
+    }
     &.hover {
       box-shadow: 0 6px 18px 0 rgba(232, 237, 250, .5);
     }
diff --git a/examples/docs/button.md b/examples/docs/button.md
index 5822a0a..85b4e00 100644
--- a/examples/docs/button.md
+++ b/examples/docs/button.md
@@ -23,50 +23,38 @@
 
 基础的按钮用法。
 
-:::demo Button 组件有5种常用主题，由`type`属性来定义，默认为`default`。
+:::demo 按钮有四种类型：主按钮、次按钮、幽灵按钮、虚线按钮。通过设置 `type` 为 `primary` `ghost` `dashed`可分别创建主按钮、幽灵按钮、虚线按钮，若不设置 `type` 值则为次按钮。不同的样式可以用来区别其重要程度。主按钮和次按钮可独立使用，幽灵按钮用于和主按钮组合。需要强引导用主按钮，切记主按钮在同一个操作区域最多出现一次。
 
 ```html
-<p class="control">
-  <p-button>default</p-button>
-  <p-button type="white">white</p-button>
-  <p-button type="light">light</p-button>
-  <p-button type="dark">dark</p-button>
-  <p-button type="black">black</p-button>
-  <p-button type="link">link</p-button>
-</p>
-<p class="control">
-  <p-button type="primary">primary</p-button>
-  <p-button type="danger">danger</p-button>
-  <p-button type="info">info</p-button>
-  <p-button type="success">success</p-button>
-  <p-button type="warning">warning</p-button>
-</p>
+<p-button>default</p-button>
+<p-button type="primary">primary</p-button>
+<p-button type="ghost">ghost</p-button>
+<p-button type="dashed">dashed</p-button>
+
 ```
 :::
 
 ### sharp 形状
 
-可设置 outlined 或 inverted"
+可设置 `circle`
 
 :::demo
 
 ```html
-<p-button type="primary" shape="outlined">outlined</p-button>
-<p-button type="primary" shape="inverted">inverted</p-button>
+<p-button type="primary" shape="circle" icon="search"></p-button>
 ```
 :::
 
 ### 不同大小
 
-按钮的大小，由属性 size 定义，值有 `small`, `medium`,`large`, 默认是 `normal`
+按钮的大小，由属性 size 定义，值有 `small`, `normal`,`large`, 默认是 `normal`
 
 :::demo
 
 ```html
-<p-button size="small">small</p-button>
+<p-button size="sm">small</p-button>
 <p-button>normal</p-button>
-<p-button size="medium">medium</p-button>
-<p-button size="large">large</p-button>
+<p-button size="lg">large</p-button>
 ```
 :::
 
@@ -86,15 +74,13 @@
 
 ### 带有图标的按钮
 
-图标用[Font Awesome](http://fortawesome.github.io/Font-Awesome/)
-
 :::demo
 
 ```html
 <p-button icon="user">用户</p-button>
 <p-button icon="lock" type="primary">锁定</p-button>
-<p-button icon="lock" type="primary" size="large">变大</p-button>
-<p-button icon="lock" type="primary" size="small">变小</p-button>
+<p-button icon="lock" type="primary" size="lg">变大</p-button>
+<p-button icon="lock" type="primary" size="sm">变小</p-button>
 ```
 :::
 
@@ -109,9 +95,9 @@
 ### 属性
 | 参数      | 说明    | 类型      | 可选值       | 默认值   |
 |---------- |-------- |---------- |-------------  |-------- |
-| size     | 尺寸   | string  |   large,medium,small            |    normal     |
-| type     | 类型   | string    |   primary,success,warning,danger,info,white,link,dark,black |     —    |
-| sharp     | 按钮形状   | string    | outlined,inverted | —   |
+| size     | 尺寸   | string  |   lg,sm            |    normal     |
+| type     | 类型   | string    |   primary,default,ghost,dashed |     —    |
+| sharp     | 按钮形状   | string    | circle | —   |
 | disabled  | 禁用    | boolean   | true, false   | false   |
 | icon  | 图标，已有的图标库中的图标名 | string   |  —  |  —  |
 | loading | 加载状态的按钮 | true,false | — | — |
diff --git a/examples/docs/form.md b/examples/docs/form.md
index 9784ba3..76add67 100644
--- a/examples/docs/form.md
+++ b/examples/docs/form.md
@@ -128,3 +128,29 @@
 </p-form>
 ```
 :::
+
+### Form Attributes
+
+| 参数      | 说明          | 类型      | 可选值                           | 默认值  |
+|---------- |-------------- |---------- |--------------------------------  |-------- |
+| model   | 表单数据对象 | object      |                  —                |  — |
+| rules    | 表单验证规则 | object | — | — |
+| inline    | 行内表单模式 | boolean | — | false |
+| label-width | 表单域标签的宽度，所有的 form-item 都会继承 form 组件的 labelWidth 的值 | string | — | — |
+
+### Form Methods
+
+| 方法名      | 说明          |
+|---------- |-------------- |
+| validate(cb) | 对整个表单进行校验的方法 |
+| validateField(prop, cb) | 对部分表单字段进行校验的方法 |
+| resetFields | 对整个表单进行重置，将所有字段值重置为空并移除校验结果 |
+
+### Form-Item Attributes
+
+| 参数      | 说明          | 类型      | 可选值                           | 默认值  |
+|---------- |-------------- |---------- |--------------------------------  |-------- |
+| prop    | 表单域 model 字段 | string    | 传入 Form 组件的 `model` 中的字段 | — |
+| label | 标签文本 | string | — | — |
+| label-width | 表单域标签的的宽度，例如 '50px' | string |       —       | — |
+| required | 是否必填，如不设置，则会根据校验规则自动生成 | bolean | — | false |
diff --git a/examples/docs/getting-started.md b/examples/docs/getting-started.md
index 7db1ef8..aee9ffe 100644
--- a/examples/docs/getting-started.md
+++ b/examples/docs/getting-started.md
@@ -1 +1,13 @@
 # 开始
+
+### 样式
+
+UI 基于 ant-design
+
+### 相关开源项目
+
+`pandora-ui` 部分组件参考了以下项目
+
+- [Element](http://element.eleme.io/#/component/alert)
+- [Ant Design](http://ant.design/)
+- [vue-antd](https://github.com/okoala/vue-antd)
diff --git a/examples/docs/icon.md b/examples/docs/icon.md
index 43f6e2e..93a1c9a 100644
--- a/examples/docs/icon.md
+++ b/examples/docs/icon.md
@@ -1,19 +1,20 @@
 ## Icon
 ---
-图标用[Font Awesome](http://fortawesome.github.io/Font-Awesome/)
+语义化的矢量图形。
 
 ### 用法
 
 属性 `type` 定义 icon 类型，**注** 为加载时 `type` 设为 `loading`
 
+### 方向性图标
 :::demo
 ```html
 <p-row :gapless="true">
-  <p-col><p-icon type="user"></p-icon></p-col>
-  <p-col><p-icon type="bell"></p-icon></p-col>
-  <p-col><p-icon type="bolt"></p-icon></p-col>
-  <p-col><p-icon type="bars"></p-icon></p-col>
-  <p-col><p-icon type="loading"></p-icon></p-col>
+  <p-col><p-icon type="step-backward"></p-icon></p-col>
+  <p-col><p-icon type="step-forward"></p-icon></p-col>
+  <p-col><p-icon type="fast-backward"></p-icon></p-col>
+  <p-col><p-icon type="fast-forward"></p-icon></p-col>
+  <p-col><p-icon type="shrink"></p-icon></p-col>
 </p-row>
 
 ```
diff --git a/examples/docs/input.md b/examples/docs/input.md
index 5d8e84e..4e24e0a 100644
--- a/examples/docs/input.md
+++ b/examples/docs/input.md
@@ -14,7 +14,10 @@
 
 :::demo
 ```html
-<p-input placeholder="写点什么吧"></p-input>
+<p-row>
+  <p-input placeholder="写点什么吧"></p-input>
+</p-row>
+
 <p-input type="textarea" placeholder="写点什么吧"></p-input>
 ```
 :::
@@ -32,49 +35,27 @@
 :::demo
 ```html
 <p-input placeholder="写点什么吧" v-model="input" :readonly="true"></p-input>
-```
-:::
 
-### 反馈状态
-
-:::demo
-```html
-<p-input placeholder="写点什么吧" theme="success" icon="check"></p-input>
-<p-input placeholder="写点什么吧" theme="danger" icon="warning"></p-input>
 ```
 :::
 
-### 复合型
+
+### 前置/后置组合
 
 :::demo
 ```html
-<p-input placeholder="关键字">
-  <template slot="append"><p-button icon="search" type="primary">搜索</p-button></template>
-</p-input>
-<p-input placeholder="url">
-  <div class="input-prepend" slot="prepend">http://</div>
+<p-input placeholder="请输入内容">
+  <template slot="before">
+    http://
+  </template>
 </p-input>
-<p-input placeholder="输入金额">
-  <div class="input-prepend" slot="prepend">￥</div>
-  <template slot="append"><p-button type="primary">确定</p-button></template>
+<br>
+<p-input placeholder="关键字">
+  <template slot="after">
+    <p-icon type="search"></p-icon>
+  </template>
 </p-input>
-```
-:::
-
-### 带有图标
 
-:::demo
-```html
-<p-input placeholder="时间" icon="calendar"></p-input>
-<p-input placeholder="用户名" :icon-right="false" icon="user"></p-input>
-```
-:::
-
-### 加载状态
-
-:::demo
-```html
-<p-input placeholder="验证中..." :loading="true"></p-input>
 ```
 :::
 
@@ -82,9 +63,15 @@
 
 :::demo
 ```html
-<p-input placeholder="small input" size="small"></p-input>
-<p-input placeholder="normal input"></p-input>
-<p-input placeholder="medium input" size="medium"></p-input>
-<p-input placeholder="large input" size="large"></p-input>
+<p-row>
+  <p-input placeholder="small input" size="sm"></p-input>
+</p-row>
+<p-row>
+  <p-input placeholder="normal input"></p-input>
+</p-row>
+<p-row>
+  <p-input placeholder="large input" size="lg"></p-input>
+</p-row>
+
 ```
 :::
diff --git a/examples/docs/layout.md b/examples/docs/layout.md
index 6f8d394..294a2a4 100644
--- a/examples/docs/layout.md
+++ b/examples/docs/layout.md
@@ -1,8 +1,8 @@
-## Layout
+## Grid 栅格
 
 ---
 
-一个简单的响应式布局
+24 栅格系统
 
 
 ### 默认布局
@@ -11,210 +11,19 @@
 
 ```html
 <p-row>
-  <p-col>
-    <p-notice type="info">第一列</p-notice>
-  </p-col>
-  <p-col>
-    <p-notice type="success">第二列</p-notice>
-  </p-col>
-  <p-col>
-    <p-notice type="warning">第三列</p-notice>
-  </p-col>
-  <p-col>
-    <p-notice type="danger">第四列</p-notice>
-  </p-col>
+  <p-col :span="12">col-12</p-col>
+  <p-col :span="12">col-12</p-col>
 </p-row>
-```
-:::
-
-### 按比例
-
-:::demo
-```html
-<p-row>
-  <p-col size="three-quarters">
-    <p-notice type="info">three-quarters</p-notice>
-  </p-col>
-  <p-col>
-    <p-notice type="success">auto</p-notice>
-  </p-col>
-  <p-col>
-    <p-notice type="warning">auto</p-notice>
-  </p-col>
-</p-row>
-
-<p-row>
-  <p-col size="two-thirds">
-    <p-notice type="info">two-thirds</p-notice>
-  </p-col>
-  <p-col>
-    <p-notice type="success">auto</p-notice>
-  </p-col>
-  <p-col>
-    <p-notice type="warning">auto</p-notice>
-  </p-col>
-</p-row>
-
-<p-row>
-  <p-col size="half">
-    <p-notice type="info">half</p-notice>
-  </p-col>
-  <p-col>
-    <p-notice type="success">auto</p-notice>
-  </p-col>
-  <p-col>
-    <p-notice type="warning">auto</p-notice>
-  </p-col>
-</p-row>
-
-<p-row>
-  <p-col size="one-third">
-    <p-notice type="info">one-third</p-notice>
-  </p-col>
-  <p-col>
-    <p-notice type="success">auto</p-notice>
-  </p-col>
-  <p-col>
-    <p-notice type="warning">auto</p-notice>
-  </p-col>
-</p-row>
-
-<p-row>
-  <p-col size="one-quarter">
-    <p-notice type="info">one-quarter</p-notice>
-  </p-col>
-  <p-col>
-    <p-notice type="success">auto</p-notice>
-  </p-col>
-  <p-col>
-    <p-notice type="warning">auto</p-notice>
-  </p-col>
-</p-row>
-```
-:::
-
-### 分为 12 列
-
-:::demo
-```html
 <p-row>
-  <p-col size="2">
-    <p-notice type="primary">2</p-notice>
-  </p-col>
-  <p-col>
-    <p-notice type="warning">1</p-notice>
-  </p-col>
-  <p-col>
-    <p-notice type="success">1</p-notice>
-  </p-col>
-  <p-col>
-    <p-notice type="warning">1</p-notice>
-  </p-col>
-  <p-col>
-    <p-notice type="success">1</p-notice>
-  </p-col>
-  <p-col>
-    <p-notice type="warning">1</p-notice>
-  </p-col>
-  <p-col>
-    <p-notice type="success">1</p-notice>
-  </p-col>
-  <p-col>
-    <p-notice type="warning">1</p-notice>
-  </p-col>
-  <p-col>
-    <p-notice type="success">1</p-notice>
-  </p-col>
-  <p-col>
-    <p-notice type="warning">1</p-notice>
-  </p-col>
-  <p-col>
-    <p-notice type="success">1</p-notice>
-  </p-col>
+  <p-col :span="8">col-8</p-col>
+  <p-col :span="8">col-8</p-col>
+  <p-col :span="8">col-8</p-col>
 </p-row>
 <p-row>
-  <p-col size="11"><p-notice type="primary">11</p-notice></p-col>
-  <p-col><p-notice type="warning">1</p-notice></p-col>
-</p-row>
-```
-:::
-
-### offset
-
-:::demo
-
-```html
-<p-row type="mobile">
-  <p-col size="half" offset="one-quarter">
-    <p-notice type="primary">size=half, offset=one-quarter</p-notice>
-  </p-col>
-</p-row>
-<p-row type="mobile">
-  <p-col size="4" offset="8">
-    <p-notice type="primary">size=4, offset=8</p-notice>
-  </p-col>
-</p-row>
-<p-row type="mobile">
-  <p-col size="11" offset="1">
-    <p-notice type="primary">size=11, offset=1</p-notice>
-  </p-col>
-</p-row>
-```
-:::
-
-### 多行
-
-:::demo
-```html
-<p-row :multiline="true">
-  <p-col size="one-quarter">
-    <p-notice type="primary">one-quarter</p-notice>
-  </p-col>
-  <p-col size="one-quarter">
-    <p-notice type="success">one-quarter</p-notice>
-  </p-col>
-  <p-col size="one-quarter">
-    <p-notice type="warning">one-quarter</p-notice>
-  </p-col>
-  <p-col size="one-quarter">
-    <p-notice type="danger">one-quarter</p-notice>
-  </p-col>
-  <p-col size="half">
-    <p-notice type="primary">half</p-notice>
-  </p-col>
-  <p-col size="one-quarter">
-    <p-notice type="success">one-quarter</p-notice>
-  </p-col>
-  <p-col size="one-quarter">
-    <p-notice type="warning">one-quarter</p-notice>
-  </p-col>
-  <p-col size="one-quarter">
-    <p-notice type="danger">one-quarter</p-notice>
-  </p-col>
-  <p-col>
-    <p-notice type="primary">auto</p-notice>
-  </p-col>
-</p-row>
-```
-:::
-
-### gapless
-
-:::demo
-```html
-<p-row :gapless="true">
-  <p-col>
-    <p-notice type="primary">第一列</p-notice>
-  </p-col>
-  <p-col>
-    <p-notice type="success">第二列</p-notice>
-  </p-col>
-  <p-col>
-    <p-notice type="info">第三列</p-notice>
-  </p-col>
-  <p-col>
-    <p-notice type="warning">第四列</p-notice>
-  </p-col>
+  <p-col :span="6">col-6</p-col>
+  <p-col :span="6">col-6</p-col>
+  <p-col :span="6">col-6</p-col>
+  <p-col :span="6">col-6</p-col>
 </p-row>
 ```
 :::
diff --git a/examples/docs/select.md b/examples/docs/select.md
new file mode 100644
index 0000000..7a76459
--- /dev/null
+++ b/examples/docs/select.md
@@ -0,0 +1 @@
+## Select
diff --git a/examples/index.html b/examples/index.html
index 848c329..87c4d5a 100644
--- a/examples/index.html
+++ b/examples/index.html
@@ -3,9 +3,6 @@
   <head>
     <meta charset="utf-8">
     <title>Pandora UI</title>
-    <link rel="stylesheet" type="text/css" href="static/css/font-awesome.min.css">
-    <link rel="icon" type="image/png" href="static/img/favicon-32x32.png?v=201609251738" sizes="32x32">
-    <link rel="icon" type="image/png" href="static/img/favicon-32x32.png?v=201609251738" sizes="32x32">
   </head>
   <body>
     <div id="app"></div>
diff --git a/examples/nav.config.json b/examples/nav.config.json
index 66dd405..6493db4 100644
--- a/examples/nav.config.json
+++ b/examples/nav.config.json
@@ -45,6 +45,12 @@
           "title": "输入框",
           "description": ""
         },
+        {
+          "path": "/select",
+          "name": "select",
+          "title": "选择框",
+          "description": "选择框"
+        },
         {
           "path": "/form",
           "name": "form",
@@ -52,6 +58,16 @@
           "description": "一个多功能的并带有字段验证的表单组件"
         }
       ]
+    }, {
+      "groupName": "Data",
+      "list": [
+        {
+          "path": "/tag",
+          "name": "tag",
+          "title": "标签",
+          "description": "标签。"
+        }
+      ]
     }]
   },
   {
diff --git a/package.json b/package.json
index 67f7cba..88dafc1 100644
--- a/package.json
+++ b/package.json
@@ -12,10 +12,15 @@
     "test": "npm run unit && npm run e2e",
     "lint": "eslint --ext .js,.vue src test/unit/specs test/e2e/specs"
   },
+  "keywords": [
+    "vue",
+    "ant-design",
+    "vue-pandora",
+    "vue-component"
+  ],
   "devDependencies": {
     "async-validator": "^1.6.3",
     "babel-core": "^6.0.0",
-    "babel-runtime": "^6.0.0",
     "babel-helper-vue-jsx-merge-props": "^2.0.0",
     "babel-loader": "^6.0.0",
     "babel-plugin-syntax-jsx": "^6.8.0",
@@ -23,6 +28,7 @@
     "babel-plugin-transform-vue-jsx": "^3.1.0",
     "babel-preset-es2015": "^6.0.0",
     "babel-preset-stage-2": "^6.0.0",
+    "babel-runtime": "^6.0.0",
     "chai": "^3.5.0",
     "chromedriver": "^2.21.2",
     "connect-history-api-fallback": "^1.1.0",
@@ -56,6 +62,8 @@
     "karma-sourcemap-loader": "^0.3.7",
     "karma-spec-reporter": "0.0.24",
     "karma-webpack": "^1.7.0",
+    "less": "^2.7.1",
+    "less-loader": "^2.2.3",
     "lolex": "^1.4.0",
     "markdown-it-container": "^2.0.0",
     "markdown-it-toc-and-anchor": "^4.1.1",
@@ -72,16 +80,19 @@
     "sinon-chai": "^2.8.0",
     "url-loader": "^0.5.7",
     "vue": "2.0.0-rc.3",
-    "vue-template-compiler": "2.0.0-rc.3",
-    "vue-router": "^2.0.0-beta.2",
     "vue-hot-reload-api": "^1.2.0",
     "vue-html-loader": "^1.0.0",
     "vue-loader": "^9.3.2",
     "vue-markdown-loader": "^0.4.0",
+    "vue-router": "^2.0.0-beta.2",
     "vue-style-loader": "^1.0.0",
+    "vue-template-compiler": "2.0.0-rc.3",
     "webpack": "^1.12.2",
     "webpack-dev-middleware": "^1.4.0",
     "webpack-hot-middleware": "^2.6.0",
     "webpack-merge": "^0.8.3"
+  },
+  "dependencies": {
+    "popper.js": "^0.6.4"
   }
 }
diff --git a/src/assets/logo.png b/src/assets/logo.png
deleted file mode 100644
index f3d2503fc2a44b5053b0837ebea6e87a2d339a43..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 6849
zcmaKRcUV(fvo}bjDT-7nLI_nlK}sT_69H+`qzVWDA|yaU?}j417wLi^B1KB1SLsC&
zL0ag7$U(XW5YR7p&Ux?s<Na=)C)s<=p5LrlQ`Vj}i8j!?Lr2R_OGZXUr=_WGNV*Q3
zf2k=+zm;ZH`J@Y*r-qrQk(;BZj~xa<rsClC5CPOe**PH$5q1uK9)k!4GBOHYq_LT&
znXV4h-VG&gcg`d3i*hHS$;cFxeBJHrT@aqYhX^Mm8V1^F=>P$d4lvMt8C^+TcQu4F
zQqv!UF!I+kw)c0jhd6+g6oCr9P?7)?!qX1ui*iL{p}sKCAGuJ{{W)0z1pLF|=>h}&
zt(2Lr0Z`2ig8<5i%Zk}cO5Fm=LByqGWaS`oqChZdEFmc`0hSb#gg|Aap^{+WKOYcj
zHjINK)KDG%&s?Mt4CL(T=?;~U@bU2x_mLKN!#GJuK_CzbNw5SMEJorG!}_5;?R>@1
zSl)jns3WlU7^J%=(hUtfmuUCU&C3%8B5C^f5>W2Cy8jW3#{Od{lF1}|?c61##3dzA
zsPlFG;l_FzBK}8>|H_Ru_H#!_7$UH4UKo3lKOA}g1(R&|e@}GINYVzX?q=_WLZCgh
z)L|eJMce`D0EIwgRaNETDsr+?vQknSGAi=7H00r`QnI%oQnFxm`G2umXso9l+8*&Q
z7WqF|$p49js$mdzo^BXpH#gURy=UO;=IMrYc5?@+sR4y_?d*~0^YP7d+y0{}0)zBM
zIKVM(DBvICK#~7N0a+PY6)7;u=dutmNqK3AlsrUU9U`d;msiucB_|8|2kY=(7XA;G
zwDA8AR)VCA#JOkxm#6<Fk;3Qv_CIk;8vG~n5ol7lV@Ppr$`vO}M#g$eOI^j-clMjL
zOPuv5uLtX1JFT#MwySH_RJ4r>oHNS^YVuOU;8p$N)2{`;oF|rQ?B~K$%rHDxXs+_G
zF5|-uqHZvSzq}L;5Kcy_P+x0${33}Ofb6+TX&=y;;PkEOpz%<lxjl%Ocl~M2y2lP|
zbFM`Z-*dEp9W{5_I?FqgKOqcjrGzul_KvvA0B9o^)C&!8LQLB95vnvr20|)KwER)3
zg@AiPX~4f9{zIy9K63eeK%_eUy<Xj$!il}`M9Aai_i>+_bCw_<t<K-?r^}*l>{<&~
zeLV|!bP%l1qxywfVr9Z9JI+++EO^x>ZuCK);=$VIG1`kxK8F2M8AdC$iOe3cj<EWM
zKtfCf^Zg1tRdj=Xm)|^7J1pa)+-CDvXj&R?416f(tgg8|WBR8cdxDx?*Yn+_9!KKY
zYfc;GQgX!L+9q}en#aZ8FKqby@Ji7SuT!4)GFKidFyC9wMywvB3c%^>1fo(ce4l-9
z7*zKy3={MixvUk=enQE;ED~7tv%qh&3lR<0m??@w{ILF|e#QOyPkFYK!&Up7xWNtL
zOW%1QMC<3o;G9_S1;NkPB6bqbCOjeztEc6TsBM<(q9((JKiH{01+Ud=uw9B@{;(JJ
z-DxI2*{pMq`q1RQc;V8@gYAY44Z!%#W~M9pRxI(R?SJ7<UU2Y^EpY^fzuq-h_rtLL
zw8{`NN~<)$oMx`|^gGr>sy7em=Z5DbuDlr@*q|25V)($-f}9c#?D%dU^RS<(wz?{P
zFFHtCab*!rl(~j@0(Nadvwg8q|4!}L^>d?0al6}Rrv9$0M#^&@zjbfJy_n!%mVHK4
z6pLRIQ^Uq~dnyy$`ay51Us6WaP%&O;@49m&{G3z7xV3dLtt1VTOMYl3UW~Rm{Eq4m
zF?Zl_v;?7EFx1_+#WFUXxcK78IV)FO>42@cm@}2I%pVbZqQ}3;p;sDIm&knay03a^
zn$5}Q$G!@fTwD$e(x-~aWP0h+4N<q|;xEwzsU+0W)#|>Rz$Kln<bW)%U3n>O_H2c<
z(XX#lPuW_%H#Q+c&(nRyX1-Ia<yTsbNAz3PBfuh9@JU{>dKR-%$4FYC0fsCmL9ky3
zKpxyjd^JFR+vg2!=HWf}2Z?@Td`0EG`kU?{8zKrvtsm)|7>pPk9nu@2^z96aU2<#`
z2QhvH5w&V;wER?mopu+nqu*n8p~(%Q<o-E#HMmv_6Lr(S<y?zXl02$twV54+g=p_C
zbPW!;qljHcIPw~aX95_u!itzF%xKBH?y!MCRe^`1V@8<G!;_`~Q-@-mUm7r`3Jc*<
zW|jM!A9`X|osT!srEU-27h+^5j<OqNPj-EFHPokG&HB5WAG01lt!13`S9niUI^dz+
zrPE=GX-SXL@wqVGe*HT?V{#O~&~?uH#PoV2h;Vj@x`#d8)T&F})!(j^f1!z+l?Jjx
zylKosI<}}<nHbsk7I?v<<vXs6tPoozmJ}avD&{J7$vR$!Ni~Q@;tH>kwSs&*0eJwa
zMXR05`OSFpfyRb!<VB&Y0bEEVE$hSNXH(0mbzS-;?|O<AG)<R8gmLSuf>Y_+H@O%Y
z0=K^y6B8Gcbl?SA)qMP3Z+=C(?8zL@=74R=EVnE?vY!1BQy2@q*RUgRx4yJ$k}MnL
zs!?74QciNb-LcG*&o<9=DSL>1n}ZNd)w1z3-0Pd^4ED1{qd=9|!!N?xnXjM!EuylY
z5=!H>&hSofh8V?Jofyd!h`xDI1fYAuV(sZwwN~{$a}MX^=+0TH*SFp$vyxmUv7C*W
zv^3Gl0+eTFgBi3FVD;$nhcp)ka*4gSskYIqQ&+M}xP9yLAkWzBI^I%zR^l1e?bW_6
zIn{mo{dD=)9@V?s^fa55jh78rP*Ze<3`tRCN4*mpO$@7a^*2B*7N_|A(Ve2VB|)_o
z$=#_=aBkhe(ifX}MLT()@5?<tMQW)|T904`EDIN{(*~?7PZ%vrUEuUf@Om1Lh8V<U
zqvVYpe+tw_sKHyj#O-VCO5S%E1lshLO74De`Gk2E(7WE#<PpDtbvmnFnSOqG1oI3d
zYC<jZo_G~2KIE6{8;7bJFfC?E4zS>OV+~7cXC3r!%{QJxriXo9I%*3q4KT4Xxzyd{
z9;_%=W%q!Vw$Z7F3lUnY+1HZ*lO;4;VR2+i4+D(m#01OYq|L_fbnT;KN<^dkkCwtd
zF7n+O7KvAw8c`JUh6LmeIrk4`F3o|AagKSMK3))_5Cv~y2Bb2!Ibg9BO7Vkz?pAYX
zoI=B}+$R22&IL`NCYUYjrdhwjnM<dIpta11b@>x_v=-Qcx-jmtN>!Zqf|n1^SWrHy
zK|MwJ?Z#^>)rfT5YSY{qjZ&`Fjd;^vv&gF-Yj6$9-Dy$<6zeP4s+78gS2|t%Z309b
z0^fp~ue_}i`U9j!<|qF92_3oB09NqgAoehQ`)<)dSfKoJl_A6Ec#*Mx9Cpd-p#$Ez
z={AM*r-bQs6*z$!*V<pNyBZpFi*F}aPuOZk!oD1sov}{rrxFZa@)!5H(|DKR-T0B*
zk=XmkSgqtSP+yWN@0aMgOdP>A4|QE7bf@-4vb?Q+pPKLkY2{yKsw{&udv_2v8{Dbd
zm~8VAv!G~s)`O3|Q6vFUV%8%+?ZSVUa(;fhPNg#vab@J*9XE4#D%)$UU-T5`fwjz!
z6&gA^`OGu6aUk{l*h9eB?opVdrHK>Q@U>&JQ_2pR%}TyOXGq_6s56_`U(WoOaAb+K
zXQr#6H}>a-GYs9^bG<C4b$CvneP46N2fi^kmcJjoTXRGgd^g1b&uQ5spV5+b#%y`#
zrU;H~D)utn!YWIi=j;?C-zcJ^D5xZF+#(?rMdp;)?KT1xBnMkmoV;zh&S;rXW6QQx
zWTQ2K14`6wG0eo+=1oSxjIHJc9Zkw+()XT69~5<`ZtDM}Z2bxUwYy3m%<I&~-0+^1
zYtu2vJf--MIxlG~PPDn;z8t5-=$6>P2Y&hSP5gEtW+GVC4=wy0wQk=~%CSXj=GH6q
z-T#s!BV`xZVxm{~jr_ezYRpqqIcXC=Oq`b{lu`Rt(IYr4B91hhVC?yg{ol4WUr3v9
zOAk2LG>CIECZ-WIs0$N}F#eoIUEtZudc7DPYIjzGqDLWk_A4#(<oDDN)6%Ctygl~O
zyPZcr9YCj-jDP7@YK23SJG!MDFZ1)E9`{R$R<J$u)%oUM9#k)$atlYczfhesFXL-4
zvsoG-9l@uTA8QI2Z$HsSvPZlMpB!@DV{4Bs(b)t!a<<4O@H~uuN{fO$vY>LgacooD
z2K4IWs@N`Bddm-{%oy}!k0^i6Yh)uJ1S*90>|bm3TOZxcV|ywHUb(+CeX-o1|LTZM
zwU>dY3R&U)T(}5#Neh?-CWT~@{6Ke@sI)uSuzoah8COy)w)B)aslJmp`WUcjdia-0
zl2Y}&L~XfA`uYQboAJ1;J{XLhYjH){cObH3FDva+^8ioOQy%Z=xyjGLmWMrzfFoH;
zEi3AG`_v+%)&lDJE;iJWJDI@-X9K5O)LD~j*PBe(wu+|%ar~C+LK1+-+lK<ll>=t#
z+Xc+J7qp~5q=B~rD!x78)?1+KUIbYr^5rcl&tB-cTtj+e%{gpZZ4G~6r15+d|J(ky
zjg@@UzMW0k9@S#W(1H{u;Nq(7llJbq;;4t$awM;l&(2s+$l!Ay9^Ge|34CVhr7|BG
z?dAR83smef^frq9V(OH+a+ki#q&-7TkWfFM=5bsGbU(8mC;>QTCWL5ydz9s6k@?+V
zcjiH`VI=59P-(-DWXZ~5DH>B^_H~;4$)KUhnmGo*G!Tq8^LjfUDO)lASN*=#AY_yS
zqW9UX(VOCO&p@kHdUUgsBO0KhXxn1sprK5h8}+>IhX(nSXZKwlNsjk^M|RAaqmCZB
zHBol<PMLlw!1W2AX{4`0(aI-^)x1d_zq-0U*e!X=g^kk>OHYBas@&{PT=R+?d8pZu
zUHfyucQ`(umXSW7o?HQ3H21M`ZJal+%*)SH1B1j6rxTlG3hx1IGJN^M7{$j(9V;MZ
zRKybgVuxKo#XVM+?*yTy{W+XHaU5Jbt-UG33x{u(N-2wmw;zzPH&4DE103HV@ER86
z|FZEmQb|&1s5#`$4!Cm}&`^{(4V}OP$bk`}v6q6rm;P!H)W|2i^e{7lTk2W@jo_9q
z*aw|U7#+g59Fv(5qI`#O-qPj#@_P>PC#I(GSp3DLv7x-dmYK=C7lPF8a)bxb=@)B1
zUZ`EqpXV2dR}B&r`uM}N(TS99ZT0UB%IN|0H%DcVO#T%L_chrgn#m6%x4KE*IMfjX
zJ%4veCEqbXZ`H`F_+fELMC@wuy_ch%t*+Z+1I}wN#C+dRrf2X{1C8=yZ_%Pt6wL_~
zZ2NN-hXOT4P4n$QFO7yYHS-4wF1Xfr-meG9Pn;uK51?hfel`d38k{W)F*|gJLT2#T
z<~>spMu4(mul-8Q3*pf=N4DcI)zzjqAgbE2eOT7~&f1W3VsdD44Ffe;3mJp-V@8UC
z)|qnPc12o~$X-+U@L_lWqv-RtvB~%hLF($%Ew5w>^NR82qC_0F<zVqs?Raxz=2A>B
z)=hP1-OEx?lLi#jnLzH}a;Nvr@JDO-zQWd}#k^an$Kwml;MrD&)sC5b`s0ZkVyPkb
zt}-jOq^%_9>YZe7Y}PhW{a)c39G`kg(P4@kxjcYfgB4XOOcmezdUI7j-!gs7oAo2o
zx(Ph{G+YZ`a%~kzK!HTAA5NXE-7vOFRr5oqY$rH>WI6SFvWmahFav!CfRMM3%8J&c
z*p+%|-fNS_@QrFr(at!JY9jCg9F-%5{nb5Bo~z@Y9m&SHYV`49GAJjA5h~h4(G!Se
zZmK{Bo7ivCfvl}@A-ptkFGcWXAzj3xfl{evi-OG(TaCn1FAHxRc{}B|x+Ua1D=I6M
z!C^ZIvK6aS_c&(=OQDZfm>O`Nxsw{ta&yiYPA~@e#c%N>>#rq)k6Aru-qD4(D^v)y
z*>Rs;YUbD1S8^D(ps6Jbj0K3wJw>L4m)0e(6Pee3Y?gy9i0^bZO?$*sv+xKV?WBlh
zAp*;v6w!a8;A7sLB*g-^<$Z4L7|5jXxxP1}hQZ<55f9<^KJ>^mKlWSGaLcO0=$jem
zWyZkRwe~u{{tU63DlCaS9$Y4CP4f?+wwa(&1ou)b>72yd<aYLC-(YWFHR=3p2C;o@
zP>rFvm`R<qZaNijJ?9e0Ao@J0FQbg1c%wi*X&vhQIV{0-tqBevRs?R)1sbxUT&}HJ
z*KdKSzTFX7&Aa4>j-0`kBJgK@nd(*Eh!(NC{F-@=FnF&Y!q`7){YsLLHf0_B6aHc#
z>WIuHTyJwIH{BJ4)2RtEauC7Yq7Cytc|S<m;S)8!_N`GikUqEGHdRcGU-QPEbp3se
zE7LrqZLNv81NNuz!tDCc*XEM9tD}O}AA<wr-O|Mp0pzPgSb{6jitn>)4^*t8Va3HR
zg=~sN^tp9re@w=GTx$;zOWMjcg-7X3Wk^N$n;&Kf1RgVG2}2L-(0o)54C509C&77i
zrjSi{X*WV=%C17((N^6R4Ya*4#6s_L99RtQ>m(%#nQ#wrRC8Y%yxkH;d!MdY+Tw@r
zjpSnK`;C-U{ATcgaxoEpP0Gf+tx);buOM<s@Z}LbUcXA@TIG=Q@myo%l9hl^&h34x
zu6;dv<5;?t)>lK=01D|J+ROu37qc*rD(w`#O=3*O*w9?biwNoq3WN1`&Wp8TvKj3C
z3HR9ssH7a&Vr<6waJrU<Uz3;wi7<=4xfd1VLN$2P7x}BBS2io@ltlrnmzyIDtt<yX
zAPcqxp4#$=Z%yky_m)4l_cnk`*u)Ahtuv8K{6vhAKMH6ow@c&kpm#&qGLE(Nu?A^>
zdLg!ieYz%U^bmpn%;(V%%ugMk92&?_XX1K@mwnVSE6!&%P%Wdi7_h`CpScvspMx?N
zQUR>oadnG17#hNc$pkTp+9<O}Jes}mOYA)lX@8ntoYG-_HA4-;x|^l1dmnFbnH;3A
zo7RmzjAt!StB&)wt}}Vz$Tx7{+QOd#U@!|=V-Oy>lW+MBKHRZ~7<Tp{OpB;sNJVcO
zP9gJmH&Z2nt++Wk^~d|9`p`s~@#e4h2h+!@-1=fBDgb_osGReiQgZ>4XWUryd)4yd
zj98$%XmIL4(9OnoeO5Fnyn&fpQ9b0h4e6EHHw*l68j;>(ya`g^S&y2{O8U>1*>4zR
zq*WSI_2o$CHQ?x0!wl9bpx|Cm2+kFMR)oMud1%n2=qn5nE&t@Fgr#=Zv2?}wtEz^T
z9rrj=?I<GKR}2`GsAAn<o<uOC`pid<%}8(c`p&zgnk&0rnZ{7Rb)^0-DfYcASTQ0s
zKO0S&yqP5xyM1crewennx~2nl$+FH?k$&4izqT?3*7J(SmJOw`dZb5FYs=|K5XN*~
z@!QVYGRE&)UH{eRL^>H*qI5{G@Rn&}^Z{+TW}mQe<Ew(X_9Cg%_)${IZP(Sf(i}}#
zbP^Uyd)|N;rJ4rvPkN0$CN?X?Bu3o`sBkNx9e)Hk<|kZoor>b9=8b<_a`&Cm#n%n~
zU47MvCBsdXFB1+adOO)03+nczfWa#vwk<X*p?NEOGFg@VXR_YfNi3ZWGup*ZMYLrd
zivdVFWx1f#$rH$D0S;+?%}dLVO}~LftMC3)E?;ORtVD#gO@_oLGdOsk#uT@)CP$RI
z#-#zp;&|vD_rYnvw~2N0Wp+nQ+xVJ$IH9kk(&N_Uad`)ORc-o<^o9v_z)$2HD4jGQ
zI}WMPN93Rji|(>#r{o{dF)QWya9v2nv43Zp3%Ps}($lA02*_g25t;|T{A5snSY?3A
zrRQ~(Ygh_ebltHo1VC<XI}!-0hb>bJb*eOAr;4cnlXLvI>*$-#AVsGg6B1r7@;g^L
zFlJ_th0vxO7;-opU@WA<a+$A0VKV&CD~?Y9W`bM2k~*P|j8E*2CoV8)Cu!IV5;k=`
zm0lA9424u4MQ;9hkajM?rCu<5Nio0ru*d*6!O7wLB^>Fe;<}?!2q?RBrFK5U{<mA*
z;WN^+Hz{=MA9j{=Q!Qyy7=i0XTx(4nT94X=`8CIvSzRT*3@ox%j?(gLc30~Knc##R
z`(0eGu62$+sd#-(+!IS_v$FsA^Q8gK0r%Y15^&Pc`)3fzUE9X{;k8eN8;R}9b;E)`
zT8R>*ai@NLKZ^};Ul}beukveh?TQn;$%9=R+DX07m82gP$=}Uo_%&ngV`}Hyv8g{u
z3SWzTGV|cwQuFIs7ZDOqO_fGf8Q`8MwL}eUp>q?4eqCmOTcwQuXtQckPy|4F1on8l
zP*h>d+cH#XQf|+6c|S{7SF(Lg>bR~l(0uY?O{OEVlaxa5@e%T&xju=o1`=OD#qc16
zSvyH*my(dcp6~VqR;o(#@m44Lug@~_qw+HA=mS#Z^<V!az}@c{ARa+_X}NO~a$=9p
za)_Ly?(LOnFWV{rQbS?1K7hP~fC?!$z}<pP%6*k1O(nj^MX2}V?0EMJUI;+4&As(@
zxYB>4reBy8iV?H~I;{LQWk3aKK8$bLRyt$g?-<xQqj`npk`D=fcL`B%EgjfC99(LE
z!z(C4-ap+uQYSIckaE<2uA^ag^t_eaYn_Jfq@U?vzOdv%t*)||aVad7PZ((`gpV!x
rZ$0M!)qwuD?ff?h#CY04MnNVFTnmG)-+p%fr;?V2o_dw4E$;sThR3J6

diff --git a/src/basic/col.vue b/src/basic/col.vue
deleted file mode 100644
index 24ec648..0000000
--- a/src/basic/col.vue
+++ /dev/null
@@ -1,28 +0,0 @@
-<template>
-  <div class="column" :class="[colCls]">
-    <slot></slot>
-  </div>
-</template>
-
-<script>
-  export default {
-    name: 'pCol',
-    componentName: 'col',
-    props: {
-      size: String,
-      offset: String
-    },
-    computed: {
-      colCls () {
-        let cls = []
-        if (this.size) {
-          cls.push(`is-${this.size}`)
-        }
-        if (this.offset) {
-          cls.push(`is-offset-${this.offset}`)
-        }
-        return cls.join(' ')
-      }
-    }
-  }
-</script>
diff --git a/src/basic/row.vue b/src/basic/row.vue
deleted file mode 100644
index ab17dd2..0000000
--- a/src/basic/row.vue
+++ /dev/null
@@ -1,28 +0,0 @@
-<template>
-  <div class="columns" :class="[rowCls, { 'is-multiline': multiline, 'is-gapless': gapless }]">
-    <slot></slot>
-  </div>
-</template>
-
-<script>
-  export default {
-    name: 'pRow',
-    componentName: 'row',
-    props: {
-      type: String,
-      multiline: {
-        type: Boolean,
-        default: false
-      },
-      gapless: {
-        type: Boolean,
-        default: false
-      }
-    },
-    computed: {
-      rowCls () {
-        return this.type ? `is-${this.type}` : ''
-      }
-    }
-  }
-</script>
diff --git a/src/basic/button-group.vue b/src/button/button-group.vue
similarity index 81%
rename from src/basic/button-group.vue
rename to src/button/button-group.vue
index ec9db21..95614f4 100644
--- a/src/basic/button-group.vue
+++ b/src/button/button-group.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="control has-addons">
+  <div class="ant-btn-group">
     <slot></slot>
   </div>
 </template>
diff --git a/src/basic/button.vue b/src/button/button.vue
similarity index 83%
rename from src/basic/button.vue
rename to src/button/button.vue
index e8de3ac..0cbe135 100644
--- a/src/basic/button.vue
+++ b/src/button/button.vue
@@ -1,7 +1,7 @@
 <template>
-  <button :type="htmlType" class="button" :class="[btnClasses]" @click="handleClick">
+  <button :disabled="disabled" :type="htmlType" class="ant-btn" :class="[btnClasses]" @click="handleClick">
     <p-icon v-if="hasIcon" :type="iconCls"></p-icon>
-    <slot></slot>
+    <span><slot></slot></span>
   </button>
 </template>
 <script>
@@ -46,19 +46,15 @@
         var classes = []
 
         if (this.type) {
-          classes.push(`is-${this.type}`)
+          classes.push(`ant-btn-${this.type}`)
         }
 
         if (this.size) {
-          classes.push(`is-${this.size}`)
+          classes.push(`ant-btn-${this.size}`)
         }
 
         if (this.shape) {
-          classes.push(`is-${this.shape}`)
-        }
-
-        if (this.disabled) {
-          classes.push('is-disabled')
+          classes.push(`ant-btn-${this.shape}`)
         }
 
         return classes.join(' ')
diff --git a/src/form/checkbox/checkbox-group.vue b/src/checkbox/checkbox-group.vue
similarity index 89%
rename from src/form/checkbox/checkbox-group.vue
rename to src/checkbox/checkbox-group.vue
index 1bd8968..a545425 100644
--- a/src/form/checkbox/checkbox-group.vue
+++ b/src/checkbox/checkbox-group.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="checkbox-group" type="checkbox">
+  <div class="ant-checkbox-group" type="checkbox">
     <slot></slot>
   </div>
 </template>
diff --git a/src/form/checkbox/checkbox.vue b/src/checkbox/checkbox.vue
similarity index 68%
rename from src/form/checkbox/checkbox.vue
rename to src/checkbox/checkbox.vue
index 40a2d69..1c03eaa 100644
--- a/src/form/checkbox/checkbox.vue
+++ b/src/checkbox/checkbox.vue
@@ -1,24 +1,24 @@
 <template>
-  <label class="checkbox" :class="{'is-disabled': disabled}">
-    <span class="checkbox-input">
-      <span
-        class="checkbox-inner"
-        :class="{
-          'is-disabled': disabled,
-          'is-checked': checked,
-          'is-focus': focus
-        }">
-        </span>
-      <input
-        class="checkbox-original"
-        type="checkbox"
-        :disabled="disabled"
-        v-model="currentValue"
-        @focus="focus = true"
-        @blur="focus = false"
-        :value="checkedValue">
+  <label class="ant-checkbox-wrapper" :class="{'ant-checkbox-wrapper-disabled': disabled}">
+    <span
+      class="ant-checkbox"
+      :class="{
+        'ant-checkbox-disabled': disabled,
+        'ant-checkbox-checked': checked,
+        'ant-checkbox-focus': focus
+      }">
+      <span class="ant-checkbox-inner">
+        <input
+          class="ant-checkbox-input"
+          type="checkbox"
+          :disabled="disabled"
+          v-model="currentValue"
+          @focus="focus = true"
+          @blur="focus = false"
+          :value="checkedValue">
+      </span>
     </span>
-    <span class="checkbox-label">
+    <span>
       <slot></slot>
       <template v-if="!$slots.default">{{label}}</template>
     </span>
diff --git a/src/form/form-item.vue b/src/form/form-item.vue
index ab5bffe..af9843b 100644
--- a/src/form/form-item.vue
+++ b/src/form/form-item.vue
@@ -1,16 +1,19 @@
 <template>
-  <div class="form-item">
-    <label
-      class="form-item-label"
-      :style="labelStyle"
-      :class="{'is-required': required || isRequired}"
-      v-if="label">
-      {{label}}
-    </label>
-    <div class="form-item-control" :style="controlStyle">
+  <div class="ant-form ant-form-item">
+    <div
+      class="ant-form-item-label"
+      v-if="label"
+      :class="[labelCls]"
+      :style="labelStyle">
+      <label
+        :class="{'ant-form-item-required': required || isRequired}">
+        {{label}}
+      </label>
+    </div>
+    <div class="ant-form-item-control" :style="controlStyle" :class="[controlCls]">
       <slot></slot>
       <transition>
-        <div class="help is-danger" v-if="error">{{error}}</div>
+        <div class="ant-form-explain" v-if="error">{{error}}</div>
       </transition>
     </div>
   </div>
@@ -25,9 +28,15 @@
     mixins: [emitter],
     props: {
       label: String,
+      labelCol: Object,
+      wrapperCol: Object,
       prop: String,
       required: Boolean,
       labelWidth: String,
+      feedback: {
+        type: Boolean,
+        default: false
+      },
       rules: [Object, Array]
     },
     data () {
@@ -66,6 +75,46 @@
         }
         return style
       },
+      labelCls () {
+        let cls = []
+        const labelCol = this.labelCol
+        if (labelCol) {
+          const {span, offset} = labelCol
+          if (span) {
+            cls.push(`ant-col-${span}`)
+          }
+          if (offset) {
+            cls.push(`ant-col-offset-${offset}`)
+          }
+        }
+
+        return cls.join(' ')
+      },
+      controlCls () {
+        let cls = []
+        const wrapperCol = this.wrapperCol
+        if (wrapperCol) {
+          const {span, offset} = wrapperCol
+          if (span) {
+            cls.push(`ant-col-${span}`)
+          }
+          if (offset) {
+            cls.push(`ant-col-offset-${offset}`)
+          }
+        }
+
+        if (this.error) {
+          cls.push('has-error')
+        } else {
+          cls.push('has-success')
+        }
+
+        if (this.feedback) {
+          cls.push('has-feedback')
+        }
+
+        return cls.join(' ')
+      },
       fieldValue: {
         cache: false,
         get () {
diff --git a/src/form/form.vue b/src/form/form.vue
index 9c8c399..a61d6f7 100644
--- a/src/form/form.vue
+++ b/src/form/form.vue
@@ -1,5 +1,11 @@
 <template>
-  <form :class="{'form-inline': inline}">
+  <form
+    class="ant-form"
+    :class="{
+      'ant-form-inline': inline,
+      'ant-form-horizontal': horizontal,
+      'ant-form-vertical': vertical
+    }">
     <slot></slot>
   </form>
 </template>
@@ -15,6 +21,14 @@
       inline: {
         type: Boolean,
         default: false
+      },
+      horizontal: {
+        type: Boolean,
+        default: false
+      },
+      vertical: {
+        type: Boolean,
+        default: false
       }
     },
     data () {
diff --git a/src/grid/col.vue b/src/grid/col.vue
new file mode 100644
index 0000000..55e23d7
--- /dev/null
+++ b/src/grid/col.vue
@@ -0,0 +1,68 @@
+<template>
+  <div :class="[colCls]">
+    <slot></slot>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: 'pCol',
+    componentName: 'col',
+    props: {
+      span: Number,
+      order: {
+        type: Number,
+        default: 0
+      },
+      offset: {
+        type: Number,
+        default: 0
+      },
+      push: {
+        type: Number,
+        default: 0
+      },
+      pull: {
+        type: Number,
+        default: 0
+      },
+      xs: [Number, Object],
+      sm: [Number, Object],
+      md: [Number, Object],
+      lg: [Number, Object]
+    },
+    computed: {
+      colCls () {
+        let cls = []
+        if (this.span) {
+          cls.push(`ant-col-${this.span}`)
+        }
+        if (this.offset) {
+          cls.push(`ant-col-offset-${this.offset}`)
+        }
+        if (this.order) {
+          cls.push(`ant-col-order-${this.order}`)
+        }
+        if (this.pull) {
+          cls.push(`ant-col-pull-${this.pull}`)
+        }
+        if (this.push) {
+          cls.push(`ant-col-push-${this.push}`)
+        }
+        if (this.xs) {
+          cls.push(`ant-col-xs-${this.xs}`)
+        }
+        if (this.sm) {
+          cls.push(`ant-col-sm-${this.sm}`)
+        }
+        if (this.md) {
+          cls.push(`ant-col-md-${this.md}`)
+        }
+        if (this.lg) {
+          cls.push(`ant-col-lg-${this.lg}`)
+        }
+        return cls.join(' ')
+      }
+    }
+  }
+</script>
diff --git a/src/grid/row.vue b/src/grid/row.vue
new file mode 100644
index 0000000..09774ff
--- /dev/null
+++ b/src/grid/row.vue
@@ -0,0 +1,38 @@
+<template>
+  <div :class="[rowCls]">
+    <slot></slot>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: 'pRow',
+    componentName: 'row',
+    props: {
+      type: String,
+      justify: {
+        type: String,
+        default: 'start'
+      },
+      align: {
+        type: String,
+        default: 'top'
+      }
+    },
+    computed: {
+      rowCls () {
+        let cls = []
+        if (this.type) {
+          cls.push('ant-row-flex')
+          if (this.justify) {
+            cls.push(`ant-row-flex-${this.justify}`)
+          }
+          if (this.align) {
+            cls.push(`ant-row-flex-${this.align}`)
+          }
+        }
+        return 'ant-row'
+      }
+    }
+  }
+</script>
diff --git a/src/basic/icon.vue b/src/icon/icon.vue
similarity index 62%
rename from src/basic/icon.vue
rename to src/icon/icon.vue
index 5655cfb..88d1807 100644
--- a/src/basic/icon.vue
+++ b/src/icon/icon.vue
@@ -1,9 +1,10 @@
 <template>
-  <i class="fa" :class="[iconCls]"></i>
+  <i class="anticon" :class="[iconCls]"></i>
 </template>
 
 <script>
   export default {
+    name: 'pIcon',
     props: {
       type: {
         type: String,
@@ -13,9 +14,9 @@
     computed: {
       iconCls () {
         if (this.type === 'loading') {
-          return 'fa fa-circle-o-notch fa-spin'
+          return 'anticon-spin anticon-loading'
         }
-        return `fa-${this.type}`
+        return `anticon-${this.type}`
       }
     }
   }
diff --git a/src/index.js b/src/index.js
index 63946cc..34455b3 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,25 +1,31 @@
 import Vue from 'vue'
 
-import 'src/theme/bulma/bulma.sass'
+import 'src/style/index.less'
 
-import Button from './basic/button'
-import ButtonGroup from './basic/button-group'
-import Icon from './basic/icon'
-import Row from './basic/row'
-import Col from './basic/col'
+import Button from './button/button'
+import ButtonGroup from './button/button-group'
+
+import Icon from './icon/icon'
+
+import Row from './grid/row'
+import Col from './grid/col'
+
+import Checkbox from './checkbox/checkbox'
+import CheckboxGroup from './checkbox/checkbox-group'
 
-import Checkbox from './form/checkbox/checkbox'
 import Form from './form/form'
 import FormItem from './form/form-item'
-import Input from './form/input'
-import CheckboxGroup from './form/checkbox/checkbox-group'
-import Radio from './form/radio/radio'
-import RadioGroup from './form/radio/radio-group'
-import Select from './form/select/select'
 
-import Tag from './data/tag/tag'
+import Input from './input/input'
+
+import Radio from './radio/radio'
+import RadioGroup from './radio/radio-group'
+
+import Select from './select/select'
+
+import Tag from './tag/tag'
 
-import Notice from './notice/notification'
+import Notification from './notice/notification'
 
 export var Components = {
   Button,
@@ -36,7 +42,7 @@ export var Components = {
   RadioGroup,
   Tag,
   Select,
-  Notice
+  Notification
 }
 
 Object.keys(Components).forEach(key => {
diff --git a/src/form/input.vue b/src/input/input.vue
similarity index 59%
rename from src/form/input.vue
rename to src/input/input.vue
index 8d7f258..00c8b91 100644
--- a/src/form/input.vue
+++ b/src/input/input.vue
@@ -1,25 +1,24 @@
 <template>
-  <div class="control" :class="[wrapCls, {'has-addons': $slots.prepend || $slots.append}]">
-    <template v-if="type === 'text'">
-      <slot name="prepend"></slot>
-      <input
-        class="input"
-        type="text"
-        :class="[inputCls]"
-        :readonly="readonly"
-        :disabled="disabled"
-        :minlength="minlength"
-        :maxlength="maxlength"
-        v-model="currentValue"
-        @blur="handleBlur"
-        :autocomplete="autoComplete"
-        :placeholder="placeholder">
-      <p-icon v-if="icon" :type="icon"></p-icon>
-      <slot name="append"></slot>
-    </template>
+  <span :class="[inputWrapperCls]">
+    <span class="ant-input-group-addon" v-if="$slots.before">
+      <slot name="before"></slot>
+    </span>
+    <input
+      v-if="type === 'text'"
+      class="ant-input"
+      type="text"
+      :class="[inputCls]"
+      :readonly="readonly"
+      :disabled="disabled"
+      :minlength="minlength"
+      :maxlength="maxlength"
+      v-model="currentValue"
+      @blur="handleBlur"
+      :autocomplete="autoComplete"
+      :placeholder="placeholder">
     <textarea
       v-else
-      class="textarea"
+      class="ant-input"
       v-model="currentValue"
       @blur="handleBlur"
       :disabled="disabled"
@@ -27,7 +26,11 @@
       :readonly="readonly"
       :placeholder="placeholder">
     </textarea>
-  </div>
+    <p-icon v-if="type === 'text' && icon" :type="icon"></p-icon>
+    <span class="ant-input-group-addon" v-if="$slots.after">
+      <slot name="after"></slot>
+    </span>
+  </span>
 </template>
 
 <script>
@@ -64,11 +67,6 @@
         default: true
       },
       size: String,
-      // input 是否占满整个空间
-      expanded: {
-        type: Boolean,
-        default: true
-      },
       autoComplete: {
         type: String,
         default: 'off'
@@ -83,36 +81,24 @@
       }
     },
     computed: {
-      wrapCls () {
+      inputWrapperCls () {
         let cls = []
-        if (this.loading) {
-          cls.push('is-loading')
-        }
+
         if (this.icon) {
-          cls.push('has-icon')
-          if (this.iconRight) {
-            cls.push('has-icon-right')
-          }
+          cls.push('ant-input-wrapper')
+        }
+
+        if (this.$slots.before || this.$slots.after) {
+          cls.push('ant-input-group')
         }
 
         return cls.join(' ')
       },
-      error () {
-        return this.$parent.error
-      },
       inputCls () {
         let cls = []
-        if (this.theme) {
-          cls.push(`is-${this.theme}`)
-        }
+
         if (this.size) {
-          cls.push(`is-${this.size}`)
-        }
-        if (this.expanded && this.icon) {
-          cls.push('is-expanded')
-        }
-        if (this.error) {
-          cls.push('is-danger')
+          cls.push(`ant-input-${this.size}`)
         }
 
         return cls.join(' ')
diff --git a/src/view/notification.vue b/src/notice/notification.vue
similarity index 81%
rename from src/view/notification.vue
rename to src/notice/notification.vue
index e998500..e455510 100644
--- a/src/view/notification.vue
+++ b/src/notice/notification.vue
@@ -6,6 +6,8 @@
 
 <script>
   export default {
+    name: 'pNotification',
+    componentName: 'notification',
     props: {
       type: String
     },
diff --git a/src/form/radio/radio-group.vue b/src/radio/radio-group.vue
similarity index 92%
rename from src/form/radio/radio-group.vue
rename to src/radio/radio-group.vue
index 76a3e22..a5d5cf7 100644
--- a/src/form/radio/radio-group.vue
+++ b/src/radio/radio-group.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="control radio-group">
+  <div class="ant-radio-group">
     <slot></slot>
   </div>
 </template>
diff --git a/src/form/radio/radio.vue b/src/radio/radio.vue
similarity index 61%
rename from src/form/radio/radio.vue
rename to src/radio/radio.vue
index 6bd85ba..d12578a 100644
--- a/src/form/radio/radio.vue
+++ b/src/radio/radio.vue
@@ -1,25 +1,25 @@
 <template>
-  <label class="radio" :class="{'is-disabled': disabled}">
-    <span class="radio-input">
-      <span
-        class="radio-inner"
-        :class="{
-          'is-checked': currentValue === checkedValue,
-          'is-focus': focus,
-          'is-disabled': disabled
-        }">
+  <label class="ant-radio-wrapper" :class="{'ant-radio-wrapper-disabled': disabled}">
+    <span
+      class="ant-radio"
+      :class="{
+        'ant-radio-checked': currentValue === checkedValue,
+        'ant-radio-focus': focus,
+        'ant-radio-disabled': disabled
+      }">
+      <span class="ant-radio-inner">
+        <input
+          type="radio"
+          class="ant-radio-input"
+          :value="checkedValue"
+          :disabled="disabled"
+          v-model="currentValue"
+          @focus="focus = true"
+          @blur="focus = false"
+        >
       </span>
-      <input
-        type="radio"
-        class="radio-original"
-        :value="checkedValue"
-        :disabled="disabled"
-        v-model="currentValue"
-        @focus="focus = true"
-        @blur="focus = false"
-      >
     </span>
-    <span class="radio-label">
+    <span>
       <slot></slot>
       <template v-if="!$slots.default">{{label}}</template>
     </span>
diff --git a/src/select/select.vue b/src/select/select.vue
new file mode 100644
index 0000000..bd14005
--- /dev/null
+++ b/src/select/select.vue
@@ -0,0 +1,16 @@
+<template>
+  <div class="p-select">
+
+  </div>
+</template>
+
+<script>
+  export default {
+    name: 'pSelect',
+    data () {
+      return {
+
+      }
+    }
+  }
+</script>
diff --git a/src/style/components/button/index.less b/src/style/components/button/index.less
new file mode 100644
index 0000000..072f985
--- /dev/null
+++ b/src/style/components/button/index.less
@@ -0,0 +1,127 @@
+@import "../../themes/default";
+@import "../../mixins/index";
+@import "./mixin";
+
+@btn-prefix-cls: ~"@{ant-prefix}-btn";
+
+// Button styles
+// -----------------------------
+.@{btn-prefix-cls} {
+  .btn;
+  .btn-default;
+
+  &-primary {
+    .btn-primary;
+
+    .@{btn-prefix-cls}-group &:not(:first-child):not(:last-child) {
+      border-right-color: @btn-group-border;
+      border-left-color: @btn-group-border;
+    }
+
+    .@{btn-prefix-cls}-group &:first-child {
+      &:not(:last-child) {
+        border-right-color: @btn-group-border;
+        &[disabled] {
+          border-right-color: @btn-default-border;
+        }
+      }
+    }
+
+    .@{btn-prefix-cls}-group &:last-child:not(:first-child),
+    .@{btn-prefix-cls}-group & + .@{btn-prefix-cls} {
+      border-left-color: @btn-group-border;
+      &[disabled] {
+        border-left-color: @btn-default-border;
+      }
+    }
+  }
+
+  &-ghost {
+    .btn-ghost;
+  }
+
+  &-dashed {
+    .btn-dashed;
+  }
+
+  &-circle,
+  &-circle-outline {
+    .btn-circle(@btn-prefix-cls);
+  }
+
+  &:before {
+    position: absolute;
+    top: -1px;
+    left: -1px;
+    bottom: -1px;
+    right: -1px;
+    background: #fff;
+    opacity: 0.35;
+    content: '';
+    border-radius: inherit;
+    z-index: 1;
+    transition: opacity .2s;
+    pointer-events: none;
+    display: none;
+  }
+
+  &&-loading {
+    padding-left: 29px;
+    pointer-events: none;
+    position: relative;
+    .@{iconfont-css-prefix} {
+      margin-left: -14px;
+      transition: all .3s @ease-in-out;
+    }
+    &:before {
+      display: block;
+    }
+  }
+
+  &-sm&-loading {
+    padding-left: 24px;
+    .@{iconfont-css-prefix} {
+      margin-left: -17px;
+    }
+  }
+
+  &-group {
+    .btn-group(@btn-prefix-cls);
+  }
+
+  &:not(&-circle):not(&-circle-outline)&-icon-only {
+    padding-left: 8px;
+    padding-right: 8px;
+  }
+
+  // To ensure that a space will be placed between character and `Icon`.
+  > .@{iconfont-css-prefix} + span,
+  > span + .@{iconfont-css-prefix} {
+    margin-left: 0.5em;
+  }
+
+  &-clicked:after {
+    content: '';
+    position: absolute;
+    top: -1px;
+    left: -1px;
+    bottom: -1px;
+    right: -1px;
+    border-radius: inherit;
+    border: 0 solid @primary-color;
+    opacity: 0.4;
+    animation: buttonEffect 0.36s ease-out forwards;
+    display: block;
+  }
+}
+
+@keyframes buttonEffect {
+  to {
+    opacity: 0;
+    top: -6px;
+    left: -6px;
+    bottom: -6px;
+    right: -6px;
+    border-width: 6px;
+  }
+}
diff --git a/src/style/components/button/mixin.less b/src/style/components/button/mixin.less
new file mode 100644
index 0000000..72fcfc5
--- /dev/null
+++ b/src/style/components/button/mixin.less
@@ -0,0 +1,251 @@
+// mixins for button
+// ------------------------
+.button-size(@padding; @font-size; @border-radius) {
+  padding: @padding;
+  font-size: @font-size;
+  border-radius: @border-radius;
+}
+
+.button-disabled() {
+  &.disabled,
+  &[disabled] {
+    &,
+    &:hover,
+    &:focus,
+    &:active,
+    &.active {
+      .button-color(@btn-disable-color; @btn-disable-bg; @btn-disable-border);
+    }
+  }
+}
+
+.button-variant-primary(@color; @background) {
+  .button-color(@color; @background; @background);
+
+  &:hover,
+  &:focus {
+    .button-color(@color; tint(@background, 20%); tint(@background, 20%));
+  }
+
+  &:active,
+  &.active {
+    .button-color(@color; shade(@background, 5%); shade(@background, 5%));
+  }
+
+  .button-disabled();
+}
+
+.button-variant-other(@color; @background; @border) {
+  .button-color(@color; @background; @border);
+
+  &:hover,
+  &:focus {
+    .button-color(tint(@primary-color, 20%); @background; tint(@primary-color, 20%));
+  }
+
+  &:active,
+  &.active {
+    .button-color(shade(@primary-color, 5%); @background; shade(@primary-color, 5%));
+  }
+
+  .button-disabled();
+}
+
+.button-color(@color; @background; @border) {
+  color: @color;
+  background-color: @background;
+  border-color: @border;
+  // a inside Button which only work in Chrome
+  // http://stackoverflow.com/a/17253457
+  > a:only-child {
+    color: currentColor;
+    &:after {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+      bottom: 0;
+      right: 0;
+      background: transparent;
+    }
+  }
+}
+
+.button-group-base(@btnClassName) {
+  position: relative;
+  display: inline-block;
+  > .@{btnClassName} {
+    position: relative;
+    &:hover,
+    &:focus,
+    &:active,
+    &.active {
+      z-index: 2;
+    }
+  }
+
+  // size
+  &-lg > .@{btnClassName} {
+    .button-size(@btn-padding-lg; @btn-font-size-lg; @btn-border-radius-base);
+  }
+
+  &-sm > .@{btnClassName} {
+    .button-size(@btn-padding-sm; @font-size-base; @btn-border-radius-sm);
+    > .@{iconfont-css-prefix} {
+      font-size: @font-size-base;
+    }
+  }
+}
+
+// Base styles of buttons
+// --------------------------------------------------
+.btn() {
+  display: inline-block;
+  margin-bottom: 0;
+  font-weight: @btn-font-weight;
+  text-align: center;
+  touch-action: manipulation;
+  cursor: pointer;
+  background-image: none;
+  border: 1px solid transparent;
+  white-space: nowrap;
+  line-height: @line-height-base;
+  .button-size(@btn-padding-base; @font-size-base; @btn-border-radius-base);
+  user-select: none;
+  transition: all .3s @ease-in-out;
+  position: relative;
+
+  > .@{iconfont-css-prefix} {
+    line-height: 1;
+  }
+
+  &,
+  &:active,
+  &:focus {
+    outline: 0;
+  }
+
+  &:not([disabled]):hover {
+    text-decoration: none;
+  }
+
+  &:not([disabled]):active {
+    outline: 0;
+    transition: none;
+  }
+
+  &.disabled,
+  &[disabled] {
+    cursor: not-allowed;
+    > * {
+      pointer-events: none;
+    }
+  }
+
+  &-lg {
+    .button-size(@btn-padding-lg; @btn-font-size-lg; @btn-border-radius-base);
+  }
+
+  &-sm {
+    .button-size(@btn-padding-sm; @font-size-base; @btn-border-radius-sm);
+  }
+}
+
+// primary button style
+.btn-primary() {
+  .button-variant-primary(@btn-primary-color; @btn-primary-bg);
+}
+
+// default button style
+.btn-default() {
+  .button-variant-other(@btn-default-color; @btn-default-bg; @btn-default-border);
+  &:hover,
+  &:focus,
+  &:active,
+  &.active {
+    background: #fff;
+  }
+}
+
+// ghost button style
+.btn-ghost() {
+  .button-variant-other(@btn-ghost-color, @btn-ghost-bg, @btn-ghost-border);
+}
+
+// ghost button style
+.btn-dashed() {
+  .button-variant-other(@btn-ghost-color, @btn-ghost-bg, @btn-ghost-border);
+  border-style: dashed;
+}
+
+// circle button: the content only contains icon
+.btn-circle(@btnClassName: btn) {
+  .square(@btn-circle-size);
+  .button-size(0; @font-size-base + 2; 50%);
+
+  &.@{btnClassName}-lg {
+    .square(@btn-circle-size-lg);
+    .button-size(0; @btn-font-size-lg + 2; 50%);
+  }
+
+  &.@{btnClassName}-sm {
+    .square(@btn-circle-size-sm);
+    .button-size(0; @font-size-base; 50%);
+  }
+}
+
+// Horizontal button groups styl
+// --------------------------------------------------
+.btn-group(@btnClassName: btn) {
+  .button-group-base(@btnClassName);
+
+  .@{btnClassName} + .@{btnClassName},
+  .@{btnClassName} + &,
+  & + .@{btnClassName},
+  & + & {
+    margin-left: -1px;
+  }
+
+  .@{btnClassName}:not(:first-child):not(:last-child) {
+    border-radius: 0;
+    padding-left: 8px;
+    padding-right: 8px;
+  }
+
+  > .@{btnClassName}:first-child {
+    margin-left: 0;
+    &:not(:last-child) {
+      border-bottom-right-radius: 0;
+      border-top-right-radius: 0;
+      padding-right: 8px;
+    }
+  }
+
+  > .@{btnClassName}:last-child:not(:first-child) {
+    border-bottom-left-radius: 0;
+    border-top-left-radius: 0;
+    padding-left: 8px;
+  }
+
+  & > & {
+    float: left;
+  }
+
+  & > &:not(:first-child):not(:last-child) > .@{btnClassName} {
+    border-radius: 0;
+  }
+
+  & > &:first-child:not(:last-child) {
+    > .@{btnClassName}:last-child {
+      border-bottom-right-radius: 0;
+      border-top-right-radius: 0;
+      padding-right: 8px;
+    }
+  }
+
+  & > &:last-child:not(:first-child) > .@{btnClassName}:first-child {
+    border-bottom-left-radius: 0;
+    border-top-left-radius: 0;
+    padding-left: 8px;
+  }
+}
diff --git a/src/style/components/checkbox/index.less b/src/style/components/checkbox/index.less
new file mode 100644
index 0000000..1d97586
--- /dev/null
+++ b/src/style/components/checkbox/index.less
@@ -0,0 +1,4 @@
+@import "../../themes/default";
+@import "./mixin";
+
+.antCheckboxFn();
diff --git a/src/style/components/checkbox/mixin.less b/src/style/components/checkbox/mixin.less
new file mode 100644
index 0000000..6750a6f
--- /dev/null
+++ b/src/style/components/checkbox/mixin.less
@@ -0,0 +1,161 @@
+@import "../../mixins/index";
+
+.antCheckboxFn(@checkbox-prefix-cls: ~"@{ant-prefix}-checkbox") {
+  @checkbox-inner-prefix-cls: ~"@{checkbox-prefix-cls}-inner";
+  // 一般状态
+  .@{checkbox-prefix-cls} {
+    white-space: nowrap;
+    cursor: pointer;
+    outline: none;
+    display: inline-block;
+    line-height: 1;
+    position: relative;
+    vertical-align: middle;
+
+    .@{checkbox-prefix-cls}-wrapper:hover &,
+    &:hover,
+    &-focused {
+      .@{checkbox-inner-prefix-cls} {
+        border-color: @primary-color;
+      }
+    }
+
+    &-inner {
+      position: relative;
+      top: 0;
+      left: 0;
+      display: inline-block;
+      width: 14px;
+      height: 14px;
+      border: 1px solid @border-color-base;
+      border-radius: 3px;
+      background-color: #fff;
+      transition: all .3s;
+
+      &:after {
+        transform: rotate(45deg) scale(0);
+        position: absolute;
+        left: 4px;
+        top: 1px;
+        display: table;
+        width: 5px;
+        height: 8px;
+        border: 2px solid #fff;
+        border-top: 0;
+        border-left: 0;
+        content: ' ';
+        transition: all .1s @ease-in-back;
+      }
+    }
+
+    &-input {
+      position: absolute;
+      left: 0;
+      z-index: 1;
+      cursor: pointer;
+      .opacity(0);
+      top: 0;
+      bottom: 0;
+      right: 0;
+      width: 100%;
+      height: 100%;
+    }
+  }
+
+  // 半选状态
+  .@{checkbox-prefix-cls}-indeterminate .@{checkbox-inner-prefix-cls}:after {
+    content: ' ';
+    transform: scale(1);
+    position: absolute;
+    left: 2px;
+    top: 5px;
+    width: 8px;
+    height: 1px;
+  }
+
+  // 选中状态
+  .@{checkbox-prefix-cls}-checked .@{checkbox-inner-prefix-cls}:after {
+    transform: rotate(45deg) scale(1);
+    position: absolute;
+    left: 4px;
+    top: 1px;
+    display: table;
+    width: 5px;
+    height: 8px;
+    border: 2px solid #fff;
+    border-top: 0;
+    border-left: 0;
+    content: ' ';
+    transition: all .2s @ease-out-back .1s;
+  }
+
+  .@{checkbox-prefix-cls}-checked,
+  .@{checkbox-prefix-cls}-indeterminate {
+    .@{checkbox-inner-prefix-cls} {
+      background-color: @primary-color;
+      border-color: @primary-color;
+    }
+  }
+
+  .@{checkbox-prefix-cls}-disabled {
+    &.@{checkbox-prefix-cls}-checked {
+      .@{checkbox-inner-prefix-cls}:after {
+        animation-name: none;
+        border-color: #ccc;
+      }
+    }
+
+    .@{checkbox-inner-prefix-cls} {
+      border-color: @border-color-base!important;
+      background-color: #f3f3f3;
+      &:after {
+        animation-name: none;
+        border-color: #f3f3f3;
+      }
+    }
+
+    & + span {
+      color: #ccc;
+      cursor: not-allowed;
+    }
+  }
+
+  .@{checkbox-prefix-cls}-wrapper {
+    cursor: pointer;
+    font-size: @font-size-base;
+    display: inline-block;
+    &:not(:last-child) {
+      margin-right: 8px;
+    }
+  }
+
+  .@{checkbox-prefix-cls}-wrapper + span,
+  .@{checkbox-prefix-cls} + span {
+    padding-left: 8px;
+    padding-right: 8px;
+  }
+
+  .@{checkbox-prefix-cls}-group {
+    font-size: @font-size-base;
+    &-item {
+      display: inline-block;
+    }
+  }
+
+  @ie8: \0screen;
+
+  // IE8 hack for https://github.com/ant-design/ant-design/issues/2148
+  @media @ie8 {
+    .@{checkbox-prefix-cls}-checked .@{checkbox-prefix-cls}-inner:before,
+    .@{checkbox-prefix-cls}-checked .@{checkbox-prefix-cls}-inner:after {
+      .iconfont-font("\e632");
+      font-weight: bold;
+      font-size: 8px;
+      border: 0;
+      color: #fff;
+      left: 2px;
+      top: 3px;
+      position: absolute;
+    }
+  }
+}
diff --git a/src/style/components/form/index.less b/src/style/components/form/index.less
new file mode 100644
index 0000000..e051e25
--- /dev/null
+++ b/src/style/components/form/index.less
@@ -0,0 +1,470 @@
+@import "../../themes/default";
+@import "../../mixins/index";
+@import "../input/mixin";
+@import "../button/mixin";
+@import "../grid/mixin";
+@import "./mixin";
+
+@form-prefix-cls: ~"@{ant-prefix}-form";
+
+.reset-form();
+
+label {
+  position: relative;
+
+  > .@{iconfont-css-prefix} {
+    vertical-align: top;
+    font-size: @font-size-base;
+  }
+}
+
+.@{form-prefix-cls}-item-required:before {
+  display: inline-block;
+  margin-right: 4px;
+  content: "*";
+  font-family: SimSun;
+  line-height: 1;
+  font-size: @font-size-base;
+  color: @label-required-color;
+}
+
+// Radio && Checkbox
+input[type="radio"],
+input[type="checkbox"] {
+  &[disabled],
+  &.disabled {
+    cursor: not-allowed;
+  }
+}
+
+// These classes are used directly on <label>s
+.@{ant-prefix}-radio-inline,
+.@{ant-prefix}-radio-vertical,
+.@{ant-prefix}-checkbox-inline,
+.@{ant-prefix}-checkbox-vertical {
+  &.disabled {
+    cursor: not-allowed;
+  }
+}
+
+// These classes are used on elements with <label> descendants
+.@{ant-prefix}-radio,
+.@{ant-prefix}-checkbox {
+  &.disabled {
+    label {
+      cursor: not-allowed;
+    }
+  }
+}
+
+// Form items
+// You should wrap labels and controls in .@{form-prefix-cls}-item for optimum spacing
+.@{form-prefix-cls}-item {
+  font-size: @font-size-base;
+  margin-bottom: @form-item-margin-bottom;
+  color: @text-color;
+  vertical-align: top;
+
+  // nested FormItem
+  & > &,
+  & :not(.@{form-prefix-cls}) > & {
+    margin-bottom: -@form-item-margin-bottom;
+  }
+
+  &-control {
+    line-height: 32px;
+    position: relative;
+    .clearfix;
+  }
+
+  &-with-help {
+    margin-bottom: @form-item-margin-bottom - @font-size-base * @line-height-base;
+  }
+
+  &-label {
+    text-align: right;
+    vertical-align: middle;
+    padding: 7px 0;
+    display: inline-block;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+
+    label {
+      color: @label-color;
+
+      &:after {
+        content: ":";
+        margin: 0 8px 0 2px;
+        position: relative;
+        top: -0.5px;
+      }
+    }
+  }
+
+  .@{ant-prefix}-switch {
+    margin: 4px 0;
+  }
+
+  &-no-colon &-label label:after {
+    content: " ";
+  }
+}
+
+.@{form-prefix-cls}-explain {
+  line-height: 1.5;
+}
+
+.@{form-prefix-cls}-explain,
+.@{form-prefix-cls}-extra {
+  color: @text-color-secondary;
+}
+
+.@{form-prefix-cls}-text {
+  display: inline-block;
+  padding-right: 8px;
+}
+
+.@{form-prefix-cls}-split {
+  display: block;
+  text-align: center;
+}
+
+// 表单下的输入框尺寸唯一: 大尺寸
+form {
+  .has-feedback {
+    .@{ant-prefix}-input {
+      padding-right: 24px;
+    }
+  }
+
+  textarea.@{ant-prefix}-input {
+    height: auto;
+  }
+
+  // input[type=file]
+  .@{ant-prefix}-upload {
+    background: transparent;
+  }
+
+  input[type="radio"],
+  input[type="checkbox"] {
+    width: 14px;
+    height: 14px;
+  }
+
+  // Radios and checkboxes on same line
+  .@{ant-prefix}-radio-inline,
+  .@{ant-prefix}-checkbox-inline {
+    display: inline-block;
+    vertical-align: middle;
+    font-weight: normal;
+    cursor: pointer;
+    margin-left: 8px;
+
+    &:first-child {
+      margin-left: 0;
+    }
+  }
+
+  .@{ant-prefix}-checkbox-vertical,
+  .@{ant-prefix}-radio-vertical {
+    display: block;
+  }
+
+  .@{ant-prefix}-checkbox-vertical + .@{ant-prefix}-checkbox-vertical,
+  .@{ant-prefix}-radio-vertical + .@{ant-prefix}-radio-vertical {
+    margin-left: 0;
+  }
+
+  .@{ant-prefix}-input-number {
+    margin-top: -1px;
+    margin-right: 8px;
+  }
+
+  .@{ant-prefix}-select,
+  .@{ant-prefix}-cascader-picker {
+    width: 100%;
+  }
+}
+
+// Input combined with select
+.@{ant-prefix}-input-group-wrap {
+  .@{ant-prefix}-select-selection {
+    border-bottom-left-radius: 0;
+    border-top-left-radius: 0;
+    &:hover {
+      border-color: @border-color-base;
+    }
+  }
+
+  .@{ant-prefix}-select-selection--single {
+    margin-left: -1px;
+    height: @input-height-lg;
+    background-color: #eee;
+    .@{ant-prefix}-select-selection__rendered {
+      padding-left: 8px;
+      padding-right: 25px;
+      line-height: 30px;
+    }
+  }
+
+  .@{ant-prefix}-select-open .@{ant-prefix}-select-selection {
+    border-color: @border-color-base;
+    box-shadow: none;
+  }
+}
+
+// Form layout
+//== Horizontal Form
+.@{form-prefix-cls}-horizontal {
+  .@{form-prefix-cls}-item {
+    .make-row;
+  }
+
+  .@{ant-prefix}-radio-inline,
+  .@{ant-prefix}-checkbox-inline {
+    vertical-align: baseline;
+  }
+}
+
+// Form layout
+//== Vertical Form
+.@{form-prefix-cls}-vertical {
+  .@{form-prefix-cls}-item-label {
+    padding: 0 0 8px;
+
+    label:after {
+      content: '';
+    }
+  }
+}
+
+//== Inline Form
+.@{form-prefix-cls}-inline {
+  .@{form-prefix-cls}-item {
+    display: inline-block;
+    margin-right: 10px;
+    margin-bottom: 0;
+
+    &-with-help {
+      margin-bottom: 24px;
+    }
+
+    > div {
+      display: inline-block;
+      vertical-align: middle;
+    }
+  }
+
+  .@{form-prefix-cls}-text {
+    display: inline-block;
+  }
+
+  .has-feedback {
+    display: inline-block;
+  }
+
+  // Fix https://github.comdesigndesign/issues/1040
+  .@{form-prefix-cls}-explain {
+    position: absolute;
+  }
+}
+
+.@{form-prefix-cls}-horizontal,
+.@{form-prefix-cls}-inline {
+  label {
+    > input[type="radio"],
+    > input[type="checkbox"] {
+      margin-right: 4px;
+    }
+  }
+}
+
+// Validation state
+.has-success,
+.has-warning,
+.has-error,
+.is-validating {
+  &.has-feedback:after {
+    position: absolute;
+    top: 0;
+    right: 0;
+    visibility: visible;
+    pointer-events: none;
+    .square(@input-height-lg);
+    line-height: @input-height-lg;
+    text-align: center;
+    font-size: @font-size-lg;
+    animation: zoomIn .3s @ease-out-back;
+    .iconfont-font("");
+  }
+}
+
+.has-success {
+  &.has-feedback:after {
+    animation-name: diffZoomIn1 !important;
+  }
+}
+
+.has-error {
+  &.has-feedback:after {
+    animation-name: diffZoomIn2 !important;
+  }
+}
+
+.has-warning {
+  &.has-feedback:after {
+    animation-name: diffZoomIn3 !important;
+  }
+}
+
+.has-success {
+  &.has-feedback:after {
+    content: '\e630';
+    color: @success-color;
+  }
+}
+
+.has-warning {
+  .form-control-validation(@warning-color; @warning-color;);
+
+  &.has-feedback:after {
+    content: '\e62c';
+    color: @warning-color;
+  }
+
+  //select
+  .@{ant-prefix}-select {
+    &-selection {
+      border-color: @warning-color;
+    }
+    &-open .@{ant-prefix}-select-selection,
+    &-focused .@{ant-prefix}-select-selection {
+      .active(@warning-color);
+    }
+  }
+
+  // arrow and icon
+  .@{ant-prefix}-calendar-picker-icon:after,
+  .@{ant-prefix}-picker-icon:after,
+  .@{ant-prefix}-select-arrow,
+  .@{ant-prefix}-cascader-picker-arrow {
+    color: @warning-color;
+  }
+
+  //input-number, timepicker
+  .@{ant-prefix}-input-number,
+  .@{ant-prefix}-time-picker-input {
+    border-color: @warning-color;
+    &-focused,
+    &:focus {
+      .active(@warning-color);
+    }
+    &:not([disabled]):hover {
+      border-color: @warning-color;
+    }
+  }
+}
+
+.has-error {
+  .form-control-validation(@error-color; @error-color;);
+
+  &.has-feedback:after {
+    content: '\e62e';
+    color: @error-color;
+  }
+
+  //select
+  .@{ant-prefix}-select {
+    &-selection {
+      border-color: @error-color;
+    }
+    &-open .@{ant-prefix}-select-selection,
+    &-focused .@{ant-prefix}-select-selection {
+      .active(@error-color);
+    }
+  }
+
+  // arrow and icon
+  .@{ant-prefix}-calendar-picker-icon:after,
+  .@{ant-prefix}-picker-icon:after,
+  .@{ant-prefix}-select-arrow,
+  .@{ant-prefix}-cascader-picker-arrow {
+    color: @error-color;
+  }
+
+  //input-number, timepicker
+  .@{ant-prefix}-input-number,
+  .@{ant-prefix}-time-picker-input {
+    border-color: @error-color;
+    &-focused,
+    &:focus {
+      .active(@error-color);
+    }
+    &:not([disabled]):hover {
+      border-color: @error-color;
+    }
+  }
+  .@{ant-prefix}-mention-wrapper {
+    .@{ant-prefix}-mention-editor {
+      &,
+      &:not([disabled]):hover {
+        border-color: @error-color;
+      }
+    }
+    &.active .@{ant-prefix}-mention-editor,
+    .@{ant-prefix}-mention-editor:not([disabled]):focus {
+      .active(@error-color);
+    }
+  }
+}
+
+.is-validating {
+  &.has-feedback:after {
+    display: inline-block;
+    animation: loadingCircle 1s infinite linear;
+    content: "\e6ae";
+    color: @text-color-secondary;
+  }
+}
+
+.@{ant-prefix}-advanced-search-form {
+  .@{form-prefix-cls}-item {
+    margin-bottom: 16px;
+  }
+  .@{ant-prefix}-input,
+  .@{ant-prefix}-input-group .@{ant-prefix}-input,
+  .@{ant-prefix}-input-group .@{ant-prefix}-input-group-addon {
+    height: @input-height-base;
+  }
+}
+
+// need there different zoom animation
+// otherwise won't trigger anim
+@keyframes diffZoomIn1 {
+  0% {
+    transform: scale(0);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
+
+@keyframes diffZoomIn2 {
+  0% {
+    transform: scale(0);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
+
+@keyframes diffZoomIn3 {
+  0% {
+    transform: scale(0);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
diff --git a/src/style/components/form/mixin.less b/src/style/components/form/mixin.less
new file mode 100644
index 0000000..b815137
--- /dev/null
+++ b/src/style/components/form/mixin.less
@@ -0,0 +1,102 @@
+@import "../input/mixin";
+
+.form-control-validation(@text-color: @input-color; @border-color: @input-border-color; @background-color: @input-bg) {
+  .@{ant-prefix}-form-explain,
+  .@{ant-prefix}-form-split {
+    color: @text-color;
+  }
+  // 输入框的不同校验状态
+  .@{ant-prefix}-input {
+    &,
+    &:hover {
+      border-color: @border-color;
+    }
+
+    &:focus {
+      .active(@border-color);
+    }
+
+    &:not([disabled]):hover {
+      border-color: @border-color;
+    }
+  }
+
+  .@{ant-prefix}-calendar-picker-open .@{ant-prefix}-calendar-picker-input {
+    .active(@border-color);
+  }
+
+  .@{ant-prefix}-input-group-addon {
+    color: @text-color;
+    border-color: @border-color;
+    background-color: @background-color;
+  }
+
+  .has-feedback {
+    color: @text-color;
+  }
+}
+
+// Reset form styles
+// -----------------------------
+// Based on Bootstrap framework
+.reset-form() {
+  legend {
+    display: block;
+    width: 100%;
+    padding: 0;
+    margin-bottom: 20px;
+    font-size: @font-size-lg;
+    line-height: inherit;
+    color: @text-color-secondary;
+    border: 0;
+    border-bottom: 1px solid @border-color-base;
+  }
+
+  label {
+    font-size: @font-size-base;
+  }
+
+  input[type="search"] {
+    box-sizing: border-box;
+  }
+
+  // Position radios and checkboxes better
+  input[type="radio"],
+  input[type="checkbox"] {
+    line-height: normal;
+  }
+
+  input[type="file"] {
+    display: block;
+  }
+
+  // Make range inputs behave like textual form controls
+  input[type="range"] {
+    display: block;
+    width: 100%;
+  }
+
+  // Make multiple select elements height not fixed
+  select[multiple],
+  select[size] {
+    height: auto;
+  }
+
+  // Focus for file, radio, and checkbox
+  input[type="file"]:focus,
+  input[type="radio"]:focus,
+  input[type="checkbox"]:focus {
+    outline: thin dotted;
+    outline: 5px auto -webkit-focus-ring-color; // lesshint spaceAroundOperator: false
+    outline-offset: -2px;
+  }
+
+  // Adjust output element
+  output {
+    display: block;
+    padding-top: 15px;
+    font-size: @font-size-base;
+    line-height: @line-height-base;
+    color: @input-color;
+  }
+}
diff --git a/src/style/components/grid/index.less b/src/style/components/grid/index.less
new file mode 100644
index 0000000..ffd3db7
--- /dev/null
+++ b/src/style/components/grid/index.less
@@ -0,0 +1,102 @@
+@import "../../themes/default";
+@import "../../mixins/index";
+@import "./mixin";
+
+// Grid system
+.@{ant-prefix}-row {
+  .make-row();
+  display: block;
+}
+
+.@{ant-prefix}-row-flex {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+
+  &:before,
+  &:after {
+    display: flex;
+  }
+}
+
+// x轴原点
+.@{ant-prefix}-row-flex-start {
+  justify-content: flex-start;
+}
+
+// x轴居中
+.@{ant-prefix}-row-flex-center {
+  justify-content: center;
+}
+
+// x轴反方向
+.@{ant-prefix}-row-flex-end {
+  justify-content: flex-end;
+}
+
+// x轴平分
+.@{ant-prefix}-row-flex-space-between {
+  justify-content: space-between;
+}
+
+// x轴有间隔地平分
+.@{ant-prefix}-row-flex-space-around {
+  justify-content: space-around;
+}
+
+// 顶部对齐
+.@{ant-prefix}-row-flex-top {
+  align-items: flex-start;
+}
+
+// 居中对齐
+.@{ant-prefix}-row-flex-middle {
+  align-items: center;
+}
+
+// 底部对齐
+.@{ant-prefix}-row-flex-bottom {
+  align-items: flex-end;
+}
+
+.@{ant-prefix}-col {
+  position: relative;
+  display: block;
+}
+
+.make-grid-columns();
+.make-grid();
+
+// Extra small grid
+//
+// Columns, offsets, pushes, and pulls for extra small devices like
+// smartphones.
+
+.make-grid(-xs);
+
+// Small grid
+//
+// Columns, offsets, pushes, and pulls for the small device range, from phones
+// to tablets.
+
+@media (min-width: @screen-sm-min) {
+  .make-grid(-sm);
+}
+
+
+// Medium grid
+//
+// Columns, offsets, pushes, and pulls for the desktop device range.
+
+@media (min-width: @screen-md-min) {
+  .make-grid(-md);
+}
+
+
+// Large grid
+//
+// Columns, offsets, pushes, and pulls for the large desktop device range.
+
+@media (min-width: @screen-lg-min) {
+  .make-grid(-lg);
+}
diff --git a/src/style/components/grid/mixin.less b/src/style/components/grid/mixin.less
new file mode 100644
index 0000000..79954b8
--- /dev/null
+++ b/src/style/components/grid/mixin.less
@@ -0,0 +1,100 @@
+@import "../../mixins/index";
+
+// mixins for grid system
+// ------------------------
+.make-row(@gutter: @grid-gutter-width) {
+  position: relative;
+  margin-left: (@gutter / -2);
+  margin-right: (@gutter / -2);
+  height: auto;
+  .clearfix;
+}
+
+.make-grid-columns() {
+  .col(@index) {
+    @item: ~".@{ant-prefix}-col-@{index}, .@{ant-prefix}-col-xs-@{index}, .@{ant-prefix}-col-sm-@{index}, .@{ant-prefix}-col-md-@{index}, .@{ant-prefix}-col-lg-@{index}";
+    .col((@index + 1), @item);
+  }
+  .col(@index, @list) when (@index =< @grid-columns) {
+    @item: ~".@{ant-prefix}-col-@{index}, .@{ant-prefix}-col-xs-@{index}, .@{ant-prefix}-col-sm-@{index}, .@{ant-prefix}-col-md-@{index}, .@{ant-prefix}-col-lg-@{index}";
+    .col((@index + 1), ~"@{list}, @{item}");
+  }
+  .col(@index, @list) when (@index > @grid-columns) {
+    @{list} {
+      position: relative;
+      // Prevent columns from collapsing when empty
+      min-height: 1px;
+      padding-left:  (@grid-gutter-width / 2);
+      padding-right: (@grid-gutter-width / 2);
+    }
+  }
+  .col(1);
+}
+
+.float-grid-columns(@class) {
+  .col(@index) { // initial
+    @item: ~".@{ant-prefix}-col@{class}-@{index}";
+    .col((@index + 1), @item);
+  }
+  .col(@index, @list) when (@index =< @grid-columns) { // general
+    @item: ~".@{ant-prefix}-col@{class}-@{index}";
+    .col((@index + 1), ~"@{list}, @{item}");
+  }
+  .col(@index, @list) when (@index > @grid-columns) { // terminal
+    @{list} {
+      float: left;
+      flex: 0 0 auto;
+    }
+  }
+  .col(1); // kickstart it
+}
+
+// lesshint false
+.loop-grid-columns(@index, @class) when (@index > 0) {
+  .@{ant-prefix}-col@{class}-@{index} {
+    display: block;
+    width: percentage((@index / @grid-columns));
+  }
+  .@{ant-prefix}-col@{class}-push-@{index} {
+    left: percentage((@index / @grid-columns));
+  }
+  .@{ant-prefix}-col@{class}-pull-@{index} {
+    right: percentage((@index / @grid-columns));
+  }
+  .@{ant-prefix}-col@{class}-offset-@{index} {
+    margin-left: percentage((@index / @grid-columns));
+  }
+  .@{ant-prefix}-col@{class}-order-@{index} {
+    order: @index;
+  }
+  .loop-grid-columns((@index - 1), @class);
+}
+
+.loop-grid-columns(@index, @class) when (@index = 0) {
+  .@{ant-prefix}-col@{class}-@{index} {
+    display: none;
+  }
+  .@{ant-prefix}-col-push-@{index} {
+    left: auto;
+  }
+  .@{ant-prefix}-col-pull-@{index} {
+    right: auto;
+  }
+  .@{ant-prefix}-col@{class}-push-@{index} {
+    left: auto;
+  }
+  .@{ant-prefix}-col@{class}-pull-@{index} {
+    right: auto;
+  }
+  .@{ant-prefix}-col@{class}-offset-@{index} {
+    margin-left: 0;
+  }
+  .@{ant-prefix}-col@{class}-order-@{index} {
+    order: 0;
+  }
+}
+
+.make-grid(@class: ~'') {
+  .float-grid-columns(@class);
+  .loop-grid-columns(@grid-columns, @class);
+}
diff --git a/src/style/components/index.less b/src/style/components/index.less
new file mode 100644
index 0000000..98bcbce
--- /dev/null
+++ b/src/style/components/index.less
@@ -0,0 +1,7 @@
+@import "button/index";
+@import "table/index";
+@import "grid/index";
+@import "radio/index";
+@import "checkbox/index";
+@import "input/index";
+@import "form/index";
diff --git a/src/style/components/input/index.less b/src/style/components/input/index.less
new file mode 100644
index 0000000..402203b
--- /dev/null
+++ b/src/style/components/input/index.less
@@ -0,0 +1,14 @@
+@import "../../themes/default";
+@import "../../mixins/index";
+@import "./mixin";
+@import "./search-input";
+
+// Input styles
+.@{ant-prefix}-input {
+  .input;
+}
+
+//== Style for input-group: input with label, with button or dropdown...
+.@{ant-prefix}-input-group {
+  .input-group(~"@{ant-prefix}-input");
+}
diff --git a/src/style/components/input/mixin.less b/src/style/components/input/mixin.less
new file mode 100644
index 0000000..b8b0b70
--- /dev/null
+++ b/src/style/components/input/mixin.less
@@ -0,0 +1,239 @@
+@import "../../themes/default";
+@import "../../mixins/index";
+
+// size mixins for input
+.input-lg() {
+  padding: @input-padding-vertical-lg @input-padding-horizontal;
+  height: @input-height-lg;
+}
+
+.input-sm() {
+  padding: @input-padding-vertical-sm @input-padding-horizontal;
+  height: @input-height-sm;
+  border-radius: @border-radius-sm;
+}
+
+// input status
+// == when focus or actived
+.active(@color: @outline-color) {
+  border-color: tint(@color, 20%);
+  outline: 0;
+  box-shadow: 0 0 @outline-blur-size @outline-width fade(@color, 20%);
+}
+
+// == when hoverd
+.hover(@color: @input-hover-border-color) {
+  border-color: tint(@color, 20%);
+}
+
+.disabled() {
+  background-color: @input-disabled-bg;
+  opacity: 1;
+  cursor: not-allowed;
+  color: #ccc;
+  &:hover {
+    .hover(@input-border-color);
+  }
+}
+
+// Basic style for input
+.input() {
+  position: relative;
+  display: inline-block;
+  padding: @input-padding-vertical-base @input-padding-horizontal;
+  width: 100%;
+  height: @input-height-base;
+  cursor: text;
+  font-size: @font-size-base;
+  line-height: @line-height-base;
+  color: @input-color;
+  background-color: @input-bg;
+  background-image: none;
+  border: 1px solid @input-border-color;
+  border-radius: @border-radius-base;
+  .placeholder(); // Reset placeholder
+  transition: all .3s;
+
+  &:hover {
+    .hover();
+  }
+
+  &:focus {
+    .active();
+  }
+
+  &[disabled] {
+    .disabled();
+  }
+
+  // Reset height for `textarea`s
+  textarea& {
+    max-width: 100%; // prevent textearea resize from coming out of its container
+    height: auto;
+    vertical-align: bottom;
+  }
+
+  // Size
+  &-lg {
+    .input-lg();
+  }
+
+  &-sm {
+    .input-sm();
+  }
+}
+
+// Input with icons, you can define @height if you wish to change the input size
+.input-with-icon(@height: @input-height-base) {
+  position: relative;
+
+  .@{iconfont-css-prefix} {
+    position: absolute;
+    bottom: 0;
+    right: 0;
+    z-index: 2;
+    .square(@height);
+    font-size: @font-size-lg;
+    line-height: @height;
+    text-align: center;
+    pointer-events: none;
+  }
+}
+
+// label input
+.input-group(@inputClass) {
+  position: relative;
+  display: table;
+  border-collapse: separate;
+  border-spacing: 0;
+  width: 100%;
+
+  // Undo padding and float of grid classes
+  &[class*="col-"] {
+    float: none;
+    padding-left: 0;
+    padding-right: 0;
+  }
+
+  > [class*="col-"] {
+    padding-right: 8px;
+  }
+
+  &-addon,
+  &-wrap,
+  > .@{inputClass} {
+    display: table-cell;
+
+    &:not(:first-child):not(:last-child) {
+      border-radius: 0;
+    }
+  }
+
+  &-addon,
+  &-wrap {
+    width: 1px; // To make addon/wrap as small as possible
+    white-space: nowrap;
+    vertical-align: middle;
+  }
+
+  &-wrap > * {
+    display: block !important;
+  }
+
+  .@{inputClass} {
+    position: relative;
+    z-index: 2;
+    float: left;
+    width: 100%;
+    margin-bottom: 0;
+  }
+
+  &-addon {
+    padding: @input-padding-vertical-base @input-padding-horizontal;
+    font-size: @font-size-base;
+    font-weight: normal;
+    line-height: 1;
+    color: @input-color;
+    text-align: center;
+    background-color: #eee;
+    border: 1px solid @input-border-color;
+    border-radius: @border-radius-base;
+    position: relative;
+    transition: all .3s;
+
+    // Reset Select's style in addon
+    .@{ant-prefix}-select {
+      margin: -(@input-padding-vertical-base + 1) (-@input-padding-horizontal);  // lesshint spaceAroundOperator: false
+
+      .@{ant-prefix}-select-selection {
+        background-color: inherit;
+        border: 0;
+        margin: -1px;
+        border: 1px solid transparent;
+        box-shadow: none;
+      }
+
+      &-open,
+      &-focused {
+        .@{ant-prefix}-select-selection {
+          color: @primary-color;
+        }
+      }
+    }
+
+    // Expand addon icon click area
+    // https://github.com/ant-design/ant-design/issues/3714
+    > i:only-child:after {
+      position: absolute;
+      content: '';
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+    }
+  }
+
+  // Reset rounded corners
+  > span > .@{inputClass}:first-child,
+  > .@{inputClass}:first-child,
+  &-addon:first-child {
+    border-bottom-right-radius: 0;
+    border-top-right-radius: 0;
+
+    // Reset Select's style in addon
+    .@{ant-prefix}-select .@{ant-prefix}-select-selection {
+      border-bottom-right-radius: 0;
+      border-top-right-radius: 0;
+    }
+  }
+
+  &-addon:first-child {
+    border-right: 0;
+  }
+  &-addon:last-child {
+    border-left: 0;
+  }
+
+  > .@{inputClass}:last-child,
+  &-addon:last-child {
+    border-bottom-left-radius: 0;
+    border-top-left-radius: 0;
+
+    // Reset Select's style in addon
+    .@{ant-prefix}-select .@{ant-prefix}-select-selection {
+      border-bottom-left-radius: 0;
+      border-top-left-radius: 0;
+    }
+  }
+
+  // Sizing options
+  &-lg .@{inputClass},
+  &-lg > &-addon {
+    .input-lg();
+  }
+
+  &-sm .@{inputClass},
+  &-sm > &-addon {
+    .input-sm();
+  }
+}
diff --git a/src/style/components/input/search-input.less b/src/style/components/input/search-input.less
new file mode 100644
index 0000000..ad78393
--- /dev/null
+++ b/src/style/components/input/search-input.less
@@ -0,0 +1,75 @@
+@import "../../themes/default";
+@import "../../mixins/index";
+@import "../button/mixin";
+@import "./mixin";
+
+.@{ant-prefix}-input-search-wrapper {
+  position: relative;
+
+  .@{ant-prefix}-input-search {
+    transition: all .3s ease;
+    &-icon {
+      position: absolute;
+      right: 8px;
+      cursor: pointer;
+      transition: all .3s ease;
+      font-size: 14px;
+      height: 20px;
+      line-height: 20px;
+      top: 50%;
+      margin-top: -10px;
+      &:hover {
+        color: @input-hover-border-color;
+      }
+    }
+  }
+
+  &:hover .@{ant-prefix}-input-search:not([disabled]) {
+    border: 1px solid @input-hover-border-color;
+  }
+}
+
+// code blow is keeped for compatibility
+// for this demo: http://1x.ant.design/components/select/#components-select-demo-search-box
+// do not delete until 3.x
+.@{ant-prefix}-search-input-wrapper {
+  display: inline-block;
+  vertical-align: middle;
+}
+
+.@{ant-prefix}-search-input {
+  &.@{ant-prefix}-input-group .@{ant-prefix}-input:first-child,
+  &.@{ant-prefix}-input-group .@{ant-prefix}-select:first-child {
+    border-radius: @border-radius-base;
+    position: absolute;
+    top: -1px;
+    width: 100%;
+  }
+
+  &.@{ant-prefix}-input-group .@{ant-prefix}-input:first-child {
+    padding-right: 36px;
+  }
+
+  .@{ant-prefix}-search-btn {
+    .btn-default;
+    border-radius: 0 @border-radius-base - 1 @border-radius-base - 1 0;
+    left: -1px;
+    position: relative;
+    border-width: 0 0 0 1px;
+    z-index: 2;
+    padding-left: 8px;
+    padding-right: 8px;
+    &:hover {
+      border-color: @border-color-base;
+    }
+  }
+  &&-focus .@{ant-prefix}-search-btn-noempty,
+  &:hover .@{ant-prefix}-search-btn-noempty {
+    .btn-primary;
+  }
+  .@{ant-prefix}-select-combobox {
+    .@{ant-prefix}-select-selection__rendered {
+      margin-right: 29px;
+    }
+  }
+}
diff --git a/src/style/components/radio/index.less b/src/style/components/radio/index.less
new file mode 100644
index 0000000..a9bc577
--- /dev/null
+++ b/src/style/components/radio/index.less
@@ -0,0 +1,231 @@
+@import "../../themes/default";
+@import "../../mixins/index";
+
+@radio-prefix-cls: ~"@{ant-prefix}-radio";
+@radio-group-prefix-cls: ~"@{radio-prefix-cls}-group";
+@radio-inner-prefix-cls: ~"@{radio-prefix-cls}-inner";
+@radio-duration: .3s;
+
+.@{radio-group-prefix-cls} {
+  display: inline-block;
+  font-size: @font-size-base;
+}
+
+// 一般状态
+.@{radio-prefix-cls}-wrapper {
+  font-size: @font-size-base;
+  vertical-align: middle;
+  display: inline-block;
+  position: relative;
+  white-space: nowrap;
+  margin-right: 8px;
+  cursor: pointer;
+}
+
+.@{radio-prefix-cls} {
+  white-space: nowrap;
+  outline: none;
+  display: inline-block;
+  position: relative;
+  line-height: 1;
+  vertical-align: middle;
+  cursor: pointer;
+  .@{radio-prefix-cls}-wrapper:hover &,
+  &:hover,
+  &-focused {
+    .@{radio-inner-prefix-cls} {
+      border-color: @primary-color;
+    }
+  }
+  &-inner {
+    &:after {
+      position: absolute;
+      width: 6px;
+      height: 6px;
+      left: 3px;
+      top: 3px;
+      border-radius: @border-radius-base;
+      display: table;
+      border-top: 0;
+      border-left: 0;
+      content: ' ';
+      background-color: @primary-color;
+      opacity: 0;
+      transform: scale(0);
+      transition: all @radio-duration @ease-in-out-circ;
+    }
+
+    position: relative;
+    top: 0;
+    left: 0;
+    display: inline-block;
+    width: 14px;
+    height: 14px;
+    border-width: 1px;
+    border-style: solid;
+    border-radius: 14px;
+    border-color: @border-color-base;
+    background-color: @component-background;
+    transition: all @radio-duration;
+  }
+
+  &-input {
+    position: absolute;
+    left: 0;
+    z-index: 1;
+    cursor: pointer;
+    opacity: 0;
+    top: 0;
+    bottom: 0;
+    right: 0;
+  }
+}
+
+// 选中状态
+.@{radio-prefix-cls}-checked {
+  .@{radio-inner-prefix-cls} {
+    border-color: @primary-color;
+    &:after {
+      transform: scale(1);
+      opacity: 1;
+      transition: all @radio-duration @ease-in-out-circ;
+    }
+  }
+}
+
+.@{radio-prefix-cls}-disabled {
+  .@{radio-inner-prefix-cls} {
+    border-color: @border-color-base!important;
+    background-color: #f3f3f3;
+    &:after {
+      background-color: #cccccc;
+    }
+  }
+
+  & + span {
+    color: #ccc;
+    cursor: not-allowed;
+  }
+}
+
+span.@{radio-prefix-cls} + * {
+  padding-left: 8px;
+  padding-right: 8px;
+}
+
+.@{radio-prefix-cls}-button-wrapper {
+  margin: 0;
+  height: @input-height-base;
+  line-height: 26px;
+  color: @btn-default-color;
+  display: inline-block;
+  transition: all 0.3s ease;
+  cursor: pointer;
+  border: 1px solid @border-color-base;
+  border-left: 0;
+  background: @component-background;
+  padding: 0 16px;
+
+  a {
+    color: @btn-default-color;
+  }
+
+  > .@{radio-prefix-cls}-button {
+    margin-left: 0;
+    display: block;
+    width: 0;
+    height: 0;
+  }
+
+  .@{radio-group-prefix-cls}-large & {
+    height: @input-height-lg;
+    line-height: 30px;
+  }
+
+  .@{radio-group-prefix-cls}-small & {
+    height: @input-height-sm;
+    line-height: 20px;
+    padding: 0 12px;
+    &:first-child {
+      border-radius: @border-radius-sm 0 0 @border-radius-sm;
+    }
+    &:last-child {
+      border-radius: 0 @border-radius-sm @border-radius-sm 0;
+    }
+  }
+
+  &:first-child {
+    border-radius: @border-radius-base 0 0 @border-radius-base;
+    border-left: 1px solid @border-color-base;
+  }
+
+  &:last-child {
+    border-radius: 0 @border-radius-base @border-radius-base 0;
+  }
+
+  &:first-child:last-child {
+    border-radius: @border-radius-base;
+  }
+
+  &:hover,
+  &-focused {
+    color: @primary-color;
+    position: relative;
+  }
+
+  .@{radio-prefix-cls}-inner,
+  input[type="checkbox"],
+  input[type="radio"] {
+    .opacity(0);
+    width: 0;
+    height: 0;
+  }
+
+  &-checked {
+    background: @component-background;
+    border-color: @primary-color;
+    color: @primary-color;
+    box-shadow: -1px 0 0 0 @primary-color;
+
+    &:first-child {
+      border-color: @primary-color;
+      box-shadow: none!important;
+    }
+
+    &:hover {
+      border-color: tint(@primary-color, 20%);
+      box-shadow: -1px 0 0 0 tint(@primary-color, 20%);
+      color: tint(@primary-color, 20%);
+    }
+
+    &:active {
+      border-color: shade(@primary-color, 5%);
+      box-shadow: -1px 0 0 0 shade(@primary-color, 5%);
+      color: shade(@primary-color, 5%);
+    }
+  }
+
+  &-disabled {
+    border-color: @border-color-base;
+    background-color: @background-color-base;
+    cursor: not-allowed;
+    color: #ccc;
+
+    &:first-child,
+    &:hover {
+      border-color: @border-color-base;
+      background-color: @background-color-base;
+      color: #ccc;
+    }
+    &:first-child {
+      border-left-color: @border-color-base;
+    }
+  }
+
+  &-disabled&-checked {
+    color: #fff;
+    background-color: #e6e6e6;
+    border-color: @border-color-base;
+    box-shadow: none;
+  }
+}
diff --git a/src/style/components/table/index.less b/src/style/components/table/index.less
new file mode 100644
index 0000000..70dc6b0
--- /dev/null
+++ b/src/style/components/table/index.less
@@ -0,0 +1,549 @@
+@import "../../themes/default";
+@import "../../mixins/index";
+
+@table-prefix-cls: ~"@{ant-prefix}-table";
+@table-head-background-color: @background-color-base;
+
+.@{table-prefix-cls} {
+  font-size: @font-size-base;
+  color: @text-color;
+  overflow: hidden;
+  position: relative;
+  border-radius: @border-radius-base @border-radius-base 0 0;
+  overflow: hidden;
+
+  &-body {
+    transition: opacity 0.3s ease;
+  }
+
+  table {
+    width: 100%;
+    border-collapse: separate;
+    border-spacing: 0;
+    text-align: left;
+    border-radius: @border-radius-base @border-radius-base 0 0;
+    overflow: hidden;
+  }
+
+  &-thead > tr > th {
+    background: @table-head-background-color;
+    font-weight: bold;
+    transition: background .3s ease;
+    text-align: left;
+
+    &[colspan] {
+      text-align: center;
+    }
+
+    .@{iconfont-css-prefix}-filter {
+      margin-left: 4px;
+      font-size: @font-size-base;
+      cursor: pointer;
+      color: #aaa;
+      transition: all 0.3s ease;
+      &:hover {
+        color: @text-color;
+      }
+    }
+
+    .@{table-prefix-cls}-filter-selected.@{iconfont-css-prefix}-filter {
+      color: @primary-color;
+    }
+  }
+
+  &-tbody > tr > td {
+    border-bottom: 1px solid @border-color-split;
+    position: relative;
+  }
+
+  &-thead > tr,
+  &-tbody > tr {
+    transition: all .3s ease;
+    &.@{table-prefix-cls}-row-hover,
+    &:hover {
+      background: tint(@primary-color, 90%);
+    }
+  }
+
+  &-thead > tr:hover {
+    background: none;
+  }
+
+  &-footer {
+    padding: 16px 8px;
+    background: @table-head-background-color;
+    border-radius: 0 0 @border-radius-base @border-radius-base;
+    position: relative;
+    &:before {
+      content: '';
+      height: 1px;
+      background: @table-head-background-color;
+      position: absolute;
+      top: -1px;
+      width: 100%;
+      left: 0;
+    }
+  }
+
+  &.@{table-prefix-cls}-bordered &-footer {
+    border: 1px solid @border-color-split;
+  }
+
+  &-title {
+    padding: 16px 8px;
+    position: relative;
+    top: 1px;
+    border-radius: @border-radius-base @border-radius-base 0 0;
+  }
+
+  &.@{table-prefix-cls}-bordered &-title {
+    border: 1px solid @border-color-split;
+  }
+
+  &-title + &-content {
+    position: relative;
+    border-radius: 6px 6px 0 0;
+    overflow: hidden;
+    .@{table-prefix-cls}-bordered & {
+      &,
+      table {
+        border-radius: 0;
+      }
+    }
+  }
+
+  &-tbody > tr.@{table-prefix-cls}-row-selected {
+    background: #fafafa;
+  }
+
+  &-thead > tr > th.@{table-prefix-cls}-column-sort {
+    background: #eaeaea;
+  }
+
+  &-thead > tr > th,
+  &-tbody > tr > td {
+    padding: 16px 8px;
+    word-break: break-all;
+  }
+
+  &-thead > tr > th.@{table-prefix-cls}-selection-column,
+  &-tbody > tr > td.@{table-prefix-cls}-selection-column {
+    text-align: center;
+    width: 40px;
+  }
+
+  &-header {
+    background: @table-head-background-color;
+    overflow: hidden;
+  }
+
+  &-header table {
+    border-radius: @border-radius-base @border-radius-base 0 0;
+  }
+
+  &-loading {
+    position: relative;
+    .@{table-prefix-cls}-body {
+      background: @component-background;
+      opacity: 0.5;
+    }
+    .@{table-prefix-cls}-spin-holder {
+      height: 20px;
+      line-height: 20px;
+      left: 50%;
+      top: 50%;
+      margin-left: -30px;
+      position: absolute;
+    }
+    .@{table-prefix-cls}-with-pagination {
+      margin-top: -20px;
+    }
+    .@{table-prefix-cls}-without-pagination {
+      margin-top: 10px;
+    }
+  }
+
+  &-middle {
+    .@{table-prefix-cls}-thead > tr > th,
+    .@{table-prefix-cls}-tbody > tr > td {
+      padding: 10px 8px;
+    }
+
+    .@{table-prefix-cls}-title,
+    .@{table-prefix-cls}-footer {
+      padding: 10px 8px;
+    }
+  }
+
+  &-small {
+    border: 1px solid @border-color-split;
+    border-radius: @border-radius-base;
+
+    .@{table-prefix-cls}-header > table,
+    .@{table-prefix-cls}-body > table {
+      border: 0;
+      padding: 0 8px;
+    }
+
+    .@{table-prefix-cls}-thead > tr > th {
+      background: @component-background;
+      border-bottom: 1px solid @border-color-split;
+    }
+
+    .@{table-prefix-cls}-tbody > tr > td {
+      padding: 6px 8px;
+    }
+
+    .@{table-prefix-cls}-title,
+    .@{table-prefix-cls}-footer,
+    .@{table-prefix-cls}-thead > tr > th {
+      padding: 10px 8px;
+    }
+
+    .@{table-prefix-cls}-title {
+      border-bottom: 1px solid @border-color-split;
+      top: 0;
+    }
+
+    .@{table-prefix-cls}-header {
+      background: @component-background;
+      table {
+        border-bottom: 1px solid @border-color-split;
+      }
+      .@{table-prefix-cls}-thead > tr > th {
+        border-bottom: 0;
+      }
+    }
+
+    .@{table-prefix-cls}-row:last-child td {
+      border-bottom: 0;
+    }
+  }
+
+  &-column-sorter {
+    margin-left: 4px;
+    display: inline-block;
+    width: 12px;
+    height: 14px;
+    vertical-align: middle;
+    text-align: center;
+    &-up,
+    &-down {
+      line-height: 4px;
+      height: 5px;
+      display: block;
+      width: 12px;
+      cursor: pointer;
+      &:hover .@{iconfont-css-prefix} {
+        color: @text-color;
+      }
+      &.on {
+        .@{iconfont-css-prefix}-caret-up,
+        .@{iconfont-css-prefix}-caret-down {
+          color: @primary-color;
+        }
+      }
+    }
+    .@{iconfont-css-prefix}-caret-up,
+    .@{iconfont-css-prefix}-caret-down {
+      .iconfont-size-under-12px(7px);
+      line-height: 6px;
+      height: 6px;
+      color: #aaa;
+      &:before {
+        -moz-transform-origin: 53% 50%; /* fix firefox position */
+      }
+    }
+  }
+
+  &-bordered {
+    .@{table-prefix-cls}-header > table,
+    .@{table-prefix-cls}-body > table,
+    .@{table-prefix-cls}-fixed-left table,
+    .@{table-prefix-cls}-fixed-right table {
+      border: 1px solid @border-color-split;
+      border-right: 0;
+      border-bottom: 0;
+    }
+
+    &.@{table-prefix-cls}-fixed-header {
+      .@{table-prefix-cls}-header > table {
+        border-bottom: 0;
+      }
+
+      .@{table-prefix-cls}-body > table {
+        border-top: 0;
+        border-top-left-radius: 0;
+        border-top-right-radius: 0;
+      }
+
+      .@{table-prefix-cls}-body-inner > table {
+        border-top: 0;
+      }
+
+      .@{table-prefix-cls}-placeholder {
+        border-bottom: 0;
+      }
+    }
+
+    .@{table-prefix-cls}-thead > tr > th {
+      border-bottom: 1px solid @border-color-split;
+    }
+
+    &.@{table-prefix-cls}-empty .@{table-prefix-cls}-thead > tr > th {
+      border-bottom: 0;
+    }
+
+    .@{table-prefix-cls}-thead > tr > th,
+    .@{table-prefix-cls}-tbody > tr > td {
+      border-right: 1px solid @border-color-split;
+    }
+
+    &.@{table-prefix-cls}-small {
+      border-right: 0;
+
+      .@{table-prefix-cls}-header > table,
+      .@{table-prefix-cls}-body > table,
+      .@{table-prefix-cls}-fixed-left table,
+      .@{table-prefix-cls}-fixed-right table {
+        border: 0;
+        padding: 0;
+      }
+
+      .@{table-prefix-cls}-title {
+        border: 0;
+        border-bottom: 1px solid @border-color-split;
+      }
+
+      .@{table-prefix-cls}-footer {
+        border: 0;
+        border-top: 1px solid @border-color-split;
+      }
+    }
+  }
+
+  &-placeholder {
+    padding: 16px 8px;
+    background: @component-background;
+    border-bottom: 1px solid @border-color-split;;
+    text-align: center;
+    font-size: @font-size-base;
+    color: @text-color-secondary;
+    .@{iconfont-css-prefix} {
+      margin-right: 4px;
+    }
+  }
+
+  &-pagination {
+    margin: 16px 0;
+    float: right;
+  }
+
+  &-filter-dropdown {
+    min-width: 96px;
+    margin-left: -8px;
+    background: @component-background;
+    border-radius: @border-radius-base;
+    box-shadow: @box-shadow-base;
+
+    .@{ant-prefix}-dropdown-menu {
+      border: 0;
+      box-shadow: none;
+      border-radius: @border-radius-base @border-radius-base 0 0;
+
+      &-item > label + span {
+        margin-left: 8px;
+      }
+
+      &-sub {
+        border-radius: @border-radius-base;
+        box-shadow: @box-shadow-base;
+      }
+
+      .@{ant-prefix}-dropdown-submenu-contain-selected {
+        .@{ant-prefix}-dropdown-menu-submenu-title:after {
+          color: @primary-color;
+          font-weight: bold;
+          text-shadow: 0 0 2px tint(@primary-color, 80%);
+        }
+      }
+    }
+
+    .@{ant-prefix}-dropdown-menu-item {
+      overflow: hidden;
+    }
+
+    > .@{ant-prefix}-dropdown-menu > .@{ant-prefix}-dropdown-menu-item:last-child,
+    > .@{ant-prefix}-dropdown-menu > .@{ant-prefix}-dropdown-menu-submenu:last-child .@{ant-prefix}-dropdown-menu-submenu-title {
+      border-radius: 0;
+    }
+
+    &-btns {
+      overflow: hidden;
+      padding: 7px 16px;
+      border-top: 1px solid @border-color-split;
+    }
+
+    &-link {
+      color: @link-color;
+      &:hover {
+        color: @link-hover-color;
+      }
+      &:active {
+        color: @link-active-color;
+      }
+      &.confirm {
+        float: left;
+      }
+      &.clear {
+        float: right;
+      }
+    }
+  }
+
+  &-expand-icon-th {
+    width: 40px;
+  }
+
+  &-row {
+    &-expand-icon {
+      cursor: pointer;
+      display: inline-block;
+      width: 17px;
+      height: 17px;
+      text-align: center;
+      line-height: 14px;
+      border: 1px solid @border-color-split;
+      user-select: none;
+      background: @component-background;
+      &-cell {
+        width: 18px;
+      }
+    }
+
+    &-expanded:after {
+      content: '-';
+    }
+
+    &-collapsed:after {
+      content: '+';
+    }
+
+    &-spaced {
+      visibility: hidden;
+      &:after {
+        content: '.';
+      }
+    }
+
+    &[class*="@{table-prefix-cls}-row-level-0"] .@{table-prefix-cls}-selection-column > span {
+      display: inline-block;
+    }
+  }
+
+  tr&-expanded-row {
+    &,
+    &:hover {
+      background: #fbfbfb;
+    }
+  }
+
+  .@{table-prefix-cls}-row-indent + .@{table-prefix-cls}-row-expand-icon {
+    margin-right: 8px;
+  }
+
+  &-scroll {
+    overflow: auto;
+    table {
+      width: auto;
+      min-width: 100%;
+    }
+  }
+
+  &-body-inner {
+    height: 100%;
+  }
+
+  &-fixed-header &-body {
+    position: relative;
+    background: @component-background;
+  }
+
+  &-fixed-header &-body-inner {
+    overflow: scroll;
+  }
+
+  &-fixed-header &-scroll &-header {
+    overflow: scroll;
+    padding-bottom: 20px;
+    margin-bottom: -20px;
+  }
+
+  /* fix firefox scrollbar bug */
+  &-fixed-header&-empty &-scroll &-body {
+    padding-bottom: 20px;
+    margin-bottom: -20px;
+  }
+
+  &-fixed-left,
+  &-fixed-right {
+    position: absolute;
+    top: 0;
+    overflow: hidden;
+    z-index: 1;
+    transition: box-shadow .3s ease;
+    border-radius: 0;
+    table {
+      width: auto;
+      background: @component-background;
+    }
+  }
+
+  &-fixed-header &-fixed-left &-body-outer &-fixed,
+  &-fixed-header &-fixed-right &-body-outer &-fixed {
+    border-radius: 0;
+  }
+
+  &-fixed-left {
+    left: 0;
+    box-shadow: @shadow-1-right;
+    .@{table-prefix-cls}-header {
+      overflow-y: hidden;
+    }
+    // hide scrollbar in left fixed columns
+    .@{table-prefix-cls}-body-inner {
+      margin-right: -20px;
+      padding-right: 20px;
+    }
+    .@{table-prefix-cls}-fixed-header & .@{table-prefix-cls}-body-inner {
+      padding-right: 0;
+    }
+    &,
+    table {
+      border-radius: @border-radius-base 0 0 0;
+    }
+  }
+
+  &-fixed-right {
+    right: 0;
+    box-shadow: @shadow-1-left;
+    &,
+    table {
+      border-radius: 0 @border-radius-base 0 0;
+    }
+    // hide expand row content in right-fixed Table
+    // https://github.com/ant-design/ant-design/issues/1898
+    .@{table-prefix-cls}-expanded-row {
+      color: transparent;
+      pointer-events: none;
+    }
+  }
+
+  &&-scroll-position-left &-fixed-left {
+    box-shadow: none;
+  }
+
+  &&-scroll-position-right &-fixed-right {
+    box-shadow: none;
+  }
+}
diff --git a/src/style/core/base.less b/src/style/core/base.less
new file mode 100644
index 0000000..9e3a426
--- /dev/null
+++ b/src/style/core/base.less
@@ -0,0 +1,103 @@
+@import "./normalize.less";
+
+* {
+  box-sizing: border-box;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0); //  remove tap highlight color for mobile safari
+}
+
+*:before,
+*:after {
+  box-sizing: border-box;
+}
+
+// HTML & Body reset
+html, body {
+  .square(100%);
+}
+
+body {
+  font-family: @font-family;
+  font-size: @font-size-base;
+  line-height: @line-height-base;
+  color: @text-color;
+  background-color: @body-background;
+}
+
+// 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;
+  padding: 0;
+}
+
+// Reset fonts for relevant elements
+button,input,select,textarea {
+  font-family: inherit;
+  font-size: inherit;
+  line-height: inherit;
+  color: inherit;
+}
+
+ul,
+ol {
+  list-style: none;
+}
+
+// Remove the clear button of a text input control in IE10+
+input::-ms-clear, input::-ms-reveal {
+  display: none;
+}
+
+::selection {
+  background: @primary-color;
+  color: #fff;
+}
+
+// Links
+a {
+  color: @link-color;
+  background: transparent;
+  text-decoration: none;
+  outline: none;
+  cursor: pointer;
+  transition: color .3s ease;
+
+  &:hover {
+    color: @link-hover-color;
+  }
+
+  &:active {
+    color: @link-active-color;
+  }
+
+  &:active,
+  &:hover {
+    outline: 0;
+    text-decoration: none;
+  }
+
+  &[disabled] {
+    color: #ccc;
+    cursor: not-allowed;
+    pointer-events: none;
+  }
+}
+
+.@{ant-prefix}-divider {
+  margin: 0 6px;
+  display: inline-block;
+  height: 8px;
+  width: 1px;
+  background: #ccc;
+}
+
+code,
+kbd,
+pre,
+samp {
+  font-family: @code-family;
+}
+
+// Utility classes
+.clearfix {
+  .clearfix();
+}
diff --git a/src/style/core/iconfont.less b/src/style/core/iconfont.less
new file mode 100644
index 0000000..0050853
--- /dev/null
+++ b/src/style/core/iconfont.less
@@ -0,0 +1,250 @@
+// font-face
+// @icon-url： 字体源文件的地址
+@font-face {
+  font-family: 'anticon';
+  src: url('@{icon-url}.eot'); /* IE9*/
+  src: url('@{icon-url}.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
+  url('@{icon-url}.woff') format('woff'), /* chrome、firefox */
+  url('@{icon-url}.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
+  url('@{icon-url}.svg#iconfont') format('svg'); /* iOS 4.1- */
+}
+
+.@{iconfont-css-prefix} {
+ .iconfont-mixin();
+}
+
+.@{iconfont-css-prefix}-step-forward:before { content: "\e600"; }
+.@{iconfont-css-prefix}-step-backward:before { content: "\e601"; }
+.@{iconfont-css-prefix}-forward:before { content: "\e602"; }
+.@{iconfont-css-prefix}-backward:before { content: "\e603"; }
+.@{iconfont-css-prefix}-caret-right:before { content: "\e604"; }
+.@{iconfont-css-prefix}-caret-left:before { content: "\e605"; }
+.@{iconfont-css-prefix}-caret-down:before { content: "\e606"; }
+.@{iconfont-css-prefix}-caret-up:before { content: "\e607"; }
+.@{iconfont-css-prefix}-right-circle:before { content: "\e608"; }
+.@{iconfont-css-prefix}-circle-right:before { content: "\e608"; } // antd@1.x compatibility alias: right-circle
+.@{iconfont-css-prefix}-caret-circle-right:before { content: "\e608"; } // antd@1.x compatibility alias: right-circle
+.@{iconfont-css-prefix}-left-circle:before { content: "\e609"; }
+.@{iconfont-css-prefix}-circle-left:before { content: "\e609"; } // antd@1.x compatibility alias: left-circle
+.@{iconfont-css-prefix}-caret-circle-left:before { content: "\e609"; } // antd@1.x compatibility alias: left-circle
+.@{iconfont-css-prefix}-up-circle:before { content: "\e60a"; }
+.@{iconfont-css-prefix}-circle-up:before { content: "\e60a"; } // antd@1.x compatibility alias: up-circle
+.@{iconfont-css-prefix}-caret-circle-up:before { content: "\e60a"; } // antd@1.x compatibility alias: up-circle
+.@{iconfont-css-prefix}-down-circle:before { content: "\e60b"; }
+.@{iconfont-css-prefix}-circle-down:before { content: "\e60b"; } // antd@1.x compatibility alias: down-circle
+.@{iconfont-css-prefix}-caret-circle-down:before { content: "\e60b"; } // antd@1.x compatibility alias: down-circle
+.@{iconfont-css-prefix}-right-circle-o:before { content: "\e60c"; }
+.@{iconfont-css-prefix}-circle-o-right:before { content: "\e60c"; } // antd@1.x compatibility alias: right-circle-o
+.@{iconfont-css-prefix}-caret-circle-o-right:before { content: "\e60c"; } // antd@1.x compatibility alias: right-circle-o
+.@{iconfont-css-prefix}-left-circle-o:before { content: "\e60d"; }
+.@{iconfont-css-prefix}-circle-o-left:before { content: "\e60d"; } // antd@1.x compatibility alias: left-circle-o
+.@{iconfont-css-prefix}-caret-circle-o-left:before { content: "\e60d"; } // antd@1.x compatibility alias: left-circle-o
+.@{iconfont-css-prefix}-up-circle-o:before { content: "\e60e"; }
+.@{iconfont-css-prefix}-circle-o-up:before { content: "\e60e"; } // antd@1.x compatibility alias: up-circle-o
+.@{iconfont-css-prefix}-caret-circle-o-up:before { content: "\e60e"; } // antd@1.x compatibility alias: up-circle-o
+.@{iconfont-css-prefix}-down-circle-o:before { content: "\e60f"; }
+.@{iconfont-css-prefix}-circle-o-down:before { content: "\e60f"; } // antd@1.x compatibility alias: down-circle-o
+.@{iconfont-css-prefix}-caret-circle-o-down:before { content: "\e60f"; } // antd@1.x compatibility alias: down-circle-o
+.@{iconfont-css-prefix}-verticle-left:before { content: "\e610"; }
+.@{iconfont-css-prefix}-verticle-right:before { content: "\e611"; }
+.@{iconfont-css-prefix}-rollback:before { content: "\e612"; }
+.@{iconfont-css-prefix}-retweet:before { content: "\e613"; }
+.@{iconfont-css-prefix}-shrink:before { content: "\e614"; }
+.@{iconfont-css-prefix}-arrows-alt:before { content: "\e615"; }
+.@{iconfont-css-prefix}-arrow-salt:before { content: "\e615"; } // antd@1.x compatibility alias: arrows-alt
+.@{iconfont-css-prefix}-reload:before { content: "\e616"; }
+.@{iconfont-css-prefix}-double-right:before { content: "\e617"; }
+.@{iconfont-css-prefix}-double-left:before { content: "\e618"; }
+.@{iconfont-css-prefix}-arrow-down:before { content: "\e619"; }
+.@{iconfont-css-prefix}-arrow-up:before { content: "\e61a"; }
+.@{iconfont-css-prefix}-arrow-right:before { content: "\e61b"; }
+.@{iconfont-css-prefix}-arrow-left:before { content: "\e61c"; }
+.@{iconfont-css-prefix}-down:before { content: "\e61d"; }
+.@{iconfont-css-prefix}-up:before { content: "\e61e"; }
+.@{iconfont-css-prefix}-right:before { content: "\e61f"; }
+.@{iconfont-css-prefix}-left:before { content: "\e620"; }
+.@{iconfont-css-prefix}-minus-square-o:before { content: "\e621"; }
+.@{iconfont-css-prefix}-minus-circle:before { content: "\e622"; }
+.@{iconfont-css-prefix}-minus-circle-o:before { content: "\e623"; }
+.@{iconfont-css-prefix}-minus:before { content: "\e624"; }
+.@{iconfont-css-prefix}-plus-circle-o:before { content: "\e625"; }
+.@{iconfont-css-prefix}-plus-circle:before { content: "\e626"; }
+.@{iconfont-css-prefix}-plus:before { content: "\e627"; }
+.@{iconfont-css-prefix}-info-circle:before { content: "\e628"; }
+.@{iconfont-css-prefix}-info-circle-o:before { content: "\e629"; }
+.@{iconfont-css-prefix}-info:before { content: "\e62a"; }
+.@{iconfont-css-prefix}-exclamation:before { content: "\e62b"; }
+.@{iconfont-css-prefix}-exclamation-circle:before { content: "\e62c"; }
+.@{iconfont-css-prefix}-exclamation-circle-o:before { content: "\e62d"; }
+.@{iconfont-css-prefix}-close-circle:before { content: "\e62e"; }
+.@{iconfont-css-prefix}-cross-circle:before { content: "\e62e"; } // antd@1.x compatibility alias: close-circle
+.@{iconfont-css-prefix}-close-circle-o:before { content: "\e62f"; }
+.@{iconfont-css-prefix}-cross-circle-o:before { content: "\e62f"; } // antd@1.x compatibility alias: close-circle-o
+.@{iconfont-css-prefix}-check-circle:before { content: "\e630"; }
+.@{iconfont-css-prefix}-check-circle-o:before { content: "\e631"; }
+.@{iconfont-css-prefix}-check:before { content: "\e632"; }
+.@{iconfont-css-prefix}-close:before { content: "\e633"; }
+.@{iconfont-css-prefix}-cross:before { content: "\e633"; } // antd@1.x compatibility alias: close
+.@{iconfont-css-prefix}-customer-service:before { content: "\e634"; }
+.@{iconfont-css-prefix}-customerservice:before { content: "\e634"; } // antd@1.x compatibility alias: customer-service
+.@{iconfont-css-prefix}-credit-card:before { content: "\e635"; }
+.@{iconfont-css-prefix}-code-o:before { content: "\e636"; }
+.@{iconfont-css-prefix}-book:before { content: "\e637"; }
+.@{iconfont-css-prefix}-bar-chart:before { content: "\e638"; }
+.@{iconfont-css-prefix}-bars:before { content: "\e639"; }
+.@{iconfont-css-prefix}-question:before { content: "\e63a"; }
+.@{iconfont-css-prefix}-question-circle:before { content: "\e63b"; }
+.@{iconfont-css-prefix}-question-circle-o:before { content: "\e63c"; }
+.@{iconfont-css-prefix}-pause:before { content: "\e63d"; }
+.@{iconfont-css-prefix}-pause-circle:before { content: "\e63e"; }
+.@{iconfont-css-prefix}-pause-circle-o:before { content: "\e63f"; }
+.@{iconfont-css-prefix}-clock-circle:before { content: "\e640"; }
+.@{iconfont-css-prefix}-clock-circle-o:before { content: "\e641"; }
+.@{iconfont-css-prefix}-swap:before { content: "\e642"; }
+.@{iconfont-css-prefix}-swap-left:before { content: "\e643"; }
+.@{iconfont-css-prefix}-swap-right:before { content: "\e644"; }
+.@{iconfont-css-prefix}-plus-square-o:before { content: "\e645"; }
+.@{iconfont-css-prefix}-frown:before { content: "\e646"; }
+.@{iconfont-css-prefix}-frown-circle:before { content: "\e646"; } // antd@1.x compatibility alias: frown
+.@{iconfont-css-prefix}-ellipsis:before { content: "\e647"; }
+.@{iconfont-css-prefix}-copy:before { content: "\e648"; }
+.@{iconfont-css-prefix}-menu-fold:before { content: "\e658"; }
+.@{iconfont-css-prefix}-mail:before { content: "\e659"; }
+.@{iconfont-css-prefix}-logout:before { content: "\e65a"; }
+.@{iconfont-css-prefix}-link:before { content: "\e65b"; }
+.@{iconfont-css-prefix}-area-chart:before { content: "\e65c"; }
+.@{iconfont-css-prefix}-line-chart:before { content: "\e65d"; }
+.@{iconfont-css-prefix}-home:before { content: "\e65e"; }
+.@{iconfont-css-prefix}-laptop:before { content: "\e65f"; }
+.@{iconfont-css-prefix}-star:before { content: "\e660"; }
+.@{iconfont-css-prefix}-star-o:before { content: "\e661"; }
+.@{iconfont-css-prefix}-folder:before { content: "\e662"; }
+.@{iconfont-css-prefix}-filter:before { content: "\e663"; }
+.@{iconfont-css-prefix}-file:before { content: "\e664"; }
+.@{iconfont-css-prefix}-exception:before { content: "\e665"; }
+.@{iconfont-css-prefix}-meh:before { content: "\e666"; }
+.@{iconfont-css-prefix}-meh-circle:before { content: "\e666"; } // antd@1.x compatibility alias: meh
+.@{iconfont-css-prefix}-meh-o:before { content: "\e667"; }
+.@{iconfont-css-prefix}-shopping-cart:before { content: "\e668"; }
+.@{iconfont-css-prefix}-save:before { content: "\e669"; }
+.@{iconfont-css-prefix}-user:before { content: "\e66a"; }
+.@{iconfont-css-prefix}-video-camera:before { content: "\e66b"; }
+.@{iconfont-css-prefix}-to-top:before { content: "\e66c"; }
+.@{iconfont-css-prefix}-team:before { content: "\e66d"; }
+.@{iconfont-css-prefix}-tablet:before { content: "\e66e"; }
+.@{iconfont-css-prefix}-solution:before { content: "\e66f"; }
+.@{iconfont-css-prefix}-search:before { content: "\e670"; }
+.@{iconfont-css-prefix}-share-alt:before { content: "\e671"; }
+.@{iconfont-css-prefix}-setting:before { content: "\e672"; }
+.@{iconfont-css-prefix}-poweroff:before { content: "\e6d5"; }
+.@{iconfont-css-prefix}-picture:before { content: "\e674"; }
+.@{iconfont-css-prefix}-phone:before { content: "\e675"; }
+.@{iconfont-css-prefix}-paper-clip:before { content: "\e676"; }
+.@{iconfont-css-prefix}-notification:before { content: "\e677"; }
+.@{iconfont-css-prefix}-mobile:before { content: "\e678"; }
+.@{iconfont-css-prefix}-menu-unfold:before { content: "\e679"; }
+.@{iconfont-css-prefix}-inbox:before { content: "\e67a"; }
+.@{iconfont-css-prefix}-lock:before { content: "\e67b"; }
+.@{iconfont-css-prefix}-qrcode:before { content: "\e67c"; }
+.@{iconfont-css-prefix}-play-circle:before { content: "\e6d0"; }
+.@{iconfont-css-prefix}-play-circle-o:before { content: "\e6d1"; }
+.@{iconfont-css-prefix}-tag:before { content: "\e6d2"; }
+.@{iconfont-css-prefix}-tag-o:before { content: "\e6d3"; }
+.@{iconfont-css-prefix}-tags:before { content: "\e67d"; }
+.@{iconfont-css-prefix}-tags-o:before { content: "\e67e"; }
+.@{iconfont-css-prefix}-cloud-o:before { content: "\e67f"; }
+.@{iconfont-css-prefix}-cloud:before { content: "\e680"; }
+.@{iconfont-css-prefix}-cloud-upload:before { content: "\e681"; }
+.@{iconfont-css-prefix}-cloud-download:before { content: "\e682"; }
+.@{iconfont-css-prefix}-cloud-download-o:before { content: "\e683"; }
+.@{iconfont-css-prefix}-cloud-upload-o:before { content: "\e684"; }
+.@{iconfont-css-prefix}-environment:before { content: "\e685"; }
+.@{iconfont-css-prefix}-environment-o:before { content: "\e686"; }
+.@{iconfont-css-prefix}-eye:before { content: "\e687"; }
+.@{iconfont-css-prefix}-eye-o:before { content: "\e688"; }
+.@{iconfont-css-prefix}-camera:before { content: "\e689"; }
+.@{iconfont-css-prefix}-camera-o:before { content: "\e68a"; }
+.@{iconfont-css-prefix}-windows:before { content: "\e68b"; }
+.@{iconfont-css-prefix}-apple:before { content: "\e68c"; }
+.@{iconfont-css-prefix}-apple-o:before { content: "\e6d4"; }
+.@{iconfont-css-prefix}-android:before { content: "\e68d"; }
+.@{iconfont-css-prefix}-aliwangwang:before { content: "\e68e"; }
+.@{iconfont-css-prefix}-aliwangwang-o:before { content: "\e68f"; }
+.@{iconfont-css-prefix}-export:before { content: "\e691"; }
+.@{iconfont-css-prefix}-edit:before { content: "\e692"; }
+.@{iconfont-css-prefix}-circle-down-o:before { content: "\e693"; }
+.@{iconfont-css-prefix}-circle-down-:before { content: "\e694"; }
+.@{iconfont-css-prefix}-appstore-o:before { content: "\e695"; }
+.@{iconfont-css-prefix}-appstore:before { content: "\e696"; }
+.@{iconfont-css-prefix}-scan:before { content: "\e697"; }
+.@{iconfont-css-prefix}-file-text:before { content: "\e698"; }
+.@{iconfont-css-prefix}-folder-open:before { content: "\e699"; }
+.@{iconfont-css-prefix}-hdd:before { content: "\e69a"; }
+.@{iconfont-css-prefix}-ie:before { content: "\e69b"; }
+.@{iconfont-css-prefix}-file-jpg:before { content: "\e69c"; }
+.@{iconfont-css-prefix}-like:before { content: "\e64c"; }
+.@{iconfont-css-prefix}-like-o:before { content: "\e69d"; }
+.@{iconfont-css-prefix}-dislike:before { content: "\e64b"; }
+.@{iconfont-css-prefix}-dislike-o:before { content: "\e69e"; }
+.@{iconfont-css-prefix}-delete:before { content: "\e69f"; }
+.@{iconfont-css-prefix}-enter:before { content: "\e6a0"; }
+.@{iconfont-css-prefix}-pushpin-o:before { content: "\e6a1"; }
+.@{iconfont-css-prefix}-pushpin:before { content: "\e6a2"; }
+.@{iconfont-css-prefix}-heart:before { content: "\e6a3"; }
+.@{iconfont-css-prefix}-heart-o:before { content: "\e6a4"; }
+.@{iconfont-css-prefix}-pay-circle:before { content: "\e6a5"; }
+.@{iconfont-css-prefix}-pay-circle-o:before { content: "\e6a6"; }
+.@{iconfont-css-prefix}-smile:before { content: "\e6a7"; }
+.@{iconfont-css-prefix}-smile-circle:before { content: "\e6a7"; }  // antd@1.x compatibility alias: smile
+.@{iconfont-css-prefix}-smile-o:before { content: "\e6a8"; }
+.@{iconfont-css-prefix}-frown-o:before { content: "\e6a9"; }
+.@{iconfont-css-prefix}-calculator:before { content: "\e6aa"; }
+.@{iconfont-css-prefix}-message:before { content: "\e6ab"; }
+.@{iconfont-css-prefix}-chrome:before { content: "\e6ac"; }
+.@{iconfont-css-prefix}-github:before { content: "\e6ad"; }
+.@{iconfont-css-prefix}-file-unknown:before { content: "\e6af"; }
+.@{iconfont-css-prefix}-file-excel:before { content: "\e6b0"; }
+.@{iconfont-css-prefix}-file-ppt:before { content: "\e6b1"; }
+.@{iconfont-css-prefix}-file-word:before { content: "\e6b2"; }
+.@{iconfont-css-prefix}-file-pdf:before { content: "\e6b3"; }
+.@{iconfont-css-prefix}-desktop:before { content: "\e6b4"; }
+.@{iconfont-css-prefix}-upload:before { content: "\e6b6"; }
+.@{iconfont-css-prefix}-download:before { content: "\e6b7"; }
+.@{iconfont-css-prefix}-pie-chart:before { content: "\e6b8"; }
+.@{iconfont-css-prefix}-unlock:before { content: "\e6ba"; }
+.@{iconfont-css-prefix}-calendar:before { content: "\e6bb"; }
+.@{iconfont-css-prefix}-windows-o:before { content: "\e6bc"; }
+.@{iconfont-css-prefix}-dot-chart:before { content: "\e6bd"; }
+.@{iconfont-css-prefix}-bar-chart:before { content: "\e6be"; }
+.@{iconfont-css-prefix}-code:before { content: "\e6bf"; }
+.@{iconfont-css-prefix}-plus-square:before { content: "\e6c0"; }
+.@{iconfont-css-prefix}-minus-square:before { content: "\e6c1"; }
+.@{iconfont-css-prefix}-close-square:before { content: "\e6c2"; }
+.@{iconfont-css-prefix}-close-square-o:before { content: "\e6c3"; }
+.@{iconfont-css-prefix}-check-square:before { content: "\e6c4"; }
+.@{iconfont-css-prefix}-check-square-o:before { content: "\e6c5"; }
+.@{iconfont-css-prefix}-fast-backward:before { content: "\e6c6"; }
+.@{iconfont-css-prefix}-fast-forward:before { content: "\e6c7"; }
+.@{iconfont-css-prefix}-up-square:before { content: "\e6c8"; }
+.@{iconfont-css-prefix}-down-square:before { content: "\e6c9"; }
+.@{iconfont-css-prefix}-left-square:before { content: "\e6ca"; }
+.@{iconfont-css-prefix}-right-square:before { content: "\e6cb"; }
+.@{iconfont-css-prefix}-right-square-o:before { content: "\e6cc"; }
+.@{iconfont-css-prefix}-left-square-o:before { content: "\e6cd"; }
+.@{iconfont-css-prefix}-down-square-o:before { content: "\e6ce"; }
+.@{iconfont-css-prefix}-up-square-o:before { content: "\e6cf"; }
+.@{iconfont-css-prefix}-loading:before { content: "\e64d"; }
+.@{iconfont-css-prefix}-loading-3-quarters:before { content: "\e6ae"; }
+.@{iconfont-css-prefix}-bulb:before { content: "\e649"; }
+.@{iconfont-css-prefix}-select:before { content: "\e64a"; }
+.@{iconfont-css-prefix}-addfile:before { content: "\e910"; }
+.@{iconfont-css-prefix}-addfolder:before { content: "\e914"; }
+.@{iconfont-css-prefix}-switcher:before { content: "\e913"; }
+.@{iconfont-css-prefix}-rocket:before { content: "\e90f"; }
+.@{iconfont-css-prefix}-dingding:before { content: "\e923"; }
+.@{iconfont-css-prefix}-dingding-o:before { content: "\e925"; }
+
+.@{iconfont-css-prefix}-spin:before {
+  display: inline-block;
+  animation: loadingCircle 1s infinite linear;
+}
diff --git a/src/style/core/index.less b/src/style/core/index.less
new file mode 100644
index 0000000..4901d06
--- /dev/null
+++ b/src/style/core/index.less
@@ -0,0 +1,4 @@
+@import "../mixins/index";
+@import "base";
+@import "iconfont";
+@import "motion";
diff --git a/src/style/core/motion.less b/src/style/core/motion.less
new file mode 100644
index 0000000..121692e
--- /dev/null
+++ b/src/style/core/motion.less
@@ -0,0 +1,15 @@
+@import "../mixins/motion";
+@import "motion/fade";
+@import "motion/move";
+@import "motion/other";
+@import "motion/slide";
+@import "motion/swing";
+@import "motion/zoom";
+
+// For common/openAnimation
+.ant-motion-collapse {
+  overflow: hidden;
+  &-active {
+    transition: height .2s @ease-out;
+  }
+}
diff --git a/src/style/core/motion/fade.less b/src/style/core/motion/fade.less
new file mode 100644
index 0000000..fd9d621
--- /dev/null
+++ b/src/style/core/motion/fade.less
@@ -0,0 +1,31 @@
+.fade-motion(@className, @keyframeName) {
+  .make-motion(@className, @keyframeName);
+  .@{className}-enter,
+  .@{className}-appear {
+    opacity: 0;
+    animation-timing-function: linear;
+  }
+  .@{className}-leave {
+    animation-timing-function: linear;
+  }
+}
+
+.fade-motion(fade, antFade);
+
+@keyframes antFadeIn {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+@keyframes antFadeOut {
+  0% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+}
diff --git a/src/style/core/motion/move.less b/src/style/core/motion/move.less
new file mode 100644
index 0000000..2eed39b
--- /dev/null
+++ b/src/style/core/motion/move.less
@@ -0,0 +1,120 @@
+.move-motion(@className, @keyframeName) {
+  .make-motion(@className, @keyframeName);
+  .@{className}-enter,
+  .@{className}-appear {
+    opacity: 0;
+    animation-timing-function: @ease-out-circ;
+  }
+  .@{className}-leave {
+    animation-timing-function: @ease-in-circ;
+  }
+}
+
+.move-motion(move-up, antMoveUp);
+.move-motion(move-down, antMoveDown);
+.move-motion(move-left, antMoveLeft);
+.move-motion(move-right, antMoveRight);
+
+@keyframes antMoveDownIn {
+  0% {
+    transform-origin: 0 0;
+    transform: translateY(100%);
+    opacity: 0;
+  }
+  100% {
+    transform-origin: 0 0;
+    transform: translateY(0%);
+    opacity: 1;
+  }
+}
+
+@keyframes antMoveDownOut {
+  0% {
+    transform-origin: 0 0;
+    transform: translateY(0%);
+    opacity: 1;
+  }
+  100% {
+    transform-origin: 0 0;
+    transform: translateY(100%);
+    opacity: 0;
+  }
+}
+
+@keyframes antMoveLeftIn {
+  0% {
+    transform-origin: 0 0;
+    transform: translateX(-100%);
+    opacity: 0;
+  }
+  100% {
+    transform-origin: 0 0;
+    transform: translateX(0%);
+    opacity: 1;
+  }
+}
+
+@keyframes antMoveLeftOut {
+  0% {
+    transform-origin: 0 0;
+    transform: translateX(0%);
+    opacity: 1;
+  }
+  100% {
+    transform-origin: 0 0;
+    transform: translateX(-100%);
+    opacity: 0;
+  }
+}
+
+@keyframes antMoveRightIn {
+  0% {
+    opacity: 0;
+    transform-origin: 0 0;
+    transform: translateX(100%);
+  }
+  100% {
+    opacity: 1;
+    transform-origin: 0 0;
+    transform: translateX(0%);
+  }
+}
+
+@keyframes antMoveRightOut {
+  0% {
+    transform-origin: 0 0;
+    transform: translateX(0%);
+    opacity: 1;
+  }
+  100% {
+    transform-origin: 0 0;
+    transform: translateX(100%);
+    opacity: 0;
+  }
+}
+
+@keyframes antMoveUpIn {
+  0% {
+    transform-origin: 0 0;
+    transform: translateY(-100%);
+    opacity: 0;
+  }
+  100% {
+    transform-origin: 0 0;
+    transform: translateY(0%);
+    opacity: 1;
+  }
+}
+
+@keyframes antMoveUpOut {
+  0% {
+    transform-origin: 0 0;
+    transform: translateY(0%);
+    opacity: 1;
+  }
+  100% {
+    transform-origin: 0 0;
+    transform: translateY(-100%);
+    opacity: 0;
+  }
+}
diff --git a/src/style/core/motion/other.less b/src/style/core/motion/other.less
new file mode 100644
index 0000000..837b7a1
--- /dev/null
+++ b/src/style/core/motion/other.less
@@ -0,0 +1,11 @@
+@keyframes loadingCircle {
+  0% {
+    transform-origin: 50% 50%;
+    transform: rotate(0deg);
+  }
+  100% {
+    transform-origin: 50% 50%;
+    transform: rotate(360deg);
+  }
+}
+
diff --git a/src/style/core/motion/slide.less b/src/style/core/motion/slide.less
new file mode 100644
index 0000000..216cff0
--- /dev/null
+++ b/src/style/core/motion/slide.less
@@ -0,0 +1,120 @@
+.slide-motion(@className, @keyframeName) {
+  .make-motion(@className, @keyframeName);
+  .@{className}-enter,
+  .@{className}-appear {
+    opacity: 0;
+    animation-timing-function: @ease-out-quint;
+  }
+  .@{className}-leave {
+    animation-timing-function: @ease-in-quint;
+  }
+}
+
+.slide-motion(slide-up, antSlideUp);
+.slide-motion(slide-down, antSlideDown);
+.slide-motion(slide-left, antSlideLeft);
+.slide-motion(slide-right, antSlideRight);
+
+@keyframes antSlideUpIn {
+  0% {
+    opacity: 0;
+    transform-origin: 0% 0%;
+    transform: scaleY(.8);
+  }
+  100% {
+    opacity: 1;
+    transform-origin: 0% 0%;
+    transform: scaleY(1);
+  }
+}
+
+@keyframes antSlideUpOut {
+  0% {
+    opacity: 1;
+    transform-origin: 0% 0%;
+    transform: scaleY(1);
+  }
+  100% {
+    opacity: 0;
+    transform-origin: 0% 0%;
+    transform: scaleY(.8);
+  }
+}
+
+@keyframes antSlideDownIn {
+  0% {
+    opacity: 0;
+    transform-origin: 100% 100%;
+    transform: scaleY(.8);
+  }
+  100% {
+    opacity: 1;
+    transform-origin: 100% 100%;
+    transform: scaleY(1);
+  }
+}
+
+@keyframes antSlideDownOut {
+  0% {
+    opacity: 1;
+    transform-origin: 100% 100%;
+    transform: scaleY(1);
+  }
+  100% {
+    opacity: 0;
+    transform-origin: 100% 100%;
+    transform: scaleY(.8);
+  }
+}
+
+@keyframes antSlideLeftIn {
+  0% {
+    opacity: 0;
+    transform-origin: 0% 0%;
+    transform: scaleX(.8);
+  }
+  100% {
+    opacity: 1;
+    transform-origin: 0% 0%;
+    transform: scaleX(1);
+  }
+}
+
+@keyframes antSlideLeftOut {
+  0% {
+    opacity: 1;
+    transform-origin: 0% 0%;
+    transform: scaleX(1);
+  }
+  100% {
+    opacity: 0;
+    transform-origin: 0% 0%;
+    transform: scaleX(.8);
+  }
+}
+
+@keyframes antSlideRightIn {
+  0% {
+    opacity: 0;
+    transform-origin: 100% 0%;
+    transform: scaleX(.8);
+  }
+  100% {
+    opacity: 1;
+    transform-origin: 100% 0%;
+    transform: scaleX(1);
+  }
+}
+
+@keyframes antSlideRightOut {
+  0% {
+    opacity: 1;
+    transform-origin: 100% 0%;
+    transform: scaleX(1);
+  }
+  100% {
+    opacity: 0;
+    transform-origin: 100% 0%;
+    transform: scaleX(.8);
+  }
+}
diff --git a/src/style/core/motion/swing.less b/src/style/core/motion/swing.less
new file mode 100644
index 0000000..d91514d
--- /dev/null
+++ b/src/style/core/motion/swing.less
@@ -0,0 +1,33 @@
+.swing-motion(@className, @keyframeName) {
+  .@{className}-enter,
+  .@{className}-appear {
+    .motion-common();
+    animation-play-state: paused;
+  }
+  .@{className}-enter.@{className}-enter-active,
+  .@{className}-appear.@{className}-appear-active {
+    animation-name: ~"@{keyframeName}In";
+    animation-play-state: running;
+  }
+}
+
+.swing-motion(swing, antSwing);
+
+@keyframes antSwingIn {
+  0%,
+  100% {
+    transform: translateX(0px);
+  }
+  20% {
+    transform: translateX(-10px);
+  }
+  40% {
+    transform: translateX(10px);
+  }
+  60% {
+    transform: translateX(-5px);
+  }
+  80% {
+    transform: translateX(5px);
+  }
+}
diff --git a/src/style/core/motion/zoom.less b/src/style/core/motion/zoom.less
new file mode 100644
index 0000000..420b42f
--- /dev/null
+++ b/src/style/core/motion/zoom.less
@@ -0,0 +1,160 @@
+.zoom-motion(@className, @keyframeName, @duration: @animation-duration-base) {
+  .make-motion(@className, @keyframeName, @duration);
+  .@{className}-enter,
+  .@{className}-appear {
+    transform: scale(0); // need this by yiminghe
+    animation-timing-function: @ease-out-circ;
+  }
+  .@{className}-leave {
+    animation-timing-function: @ease-in-out-circ;
+  }
+}
+
+// For Modal, Select choosen item
+.zoom-motion(zoom, antZoom);
+// For Popover, Popconfirm, Dropdown
+.zoom-motion(zoom-big, antZoomBig);
+// For Tooltip
+.zoom-motion(zoom-big-fast, antZoomBig, @animation-duration-fast);
+
+.zoom-motion(zoom-up, antZoomUp);
+.zoom-motion(zoom-down, antZoomDown);
+.zoom-motion(zoom-left, antZoomLeft);
+.zoom-motion(zoom-right, antZoomRight);
+
+@keyframes antZoomIn {
+  0% {
+    opacity: 0;
+    transform: scale(0.2);
+  }
+  100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+@keyframes antZoomOut {
+  0% {
+    transform: scale(1);
+  }
+  100% {
+    opacity: 0;
+    transform: scale(0.2);
+  }
+}
+
+@keyframes antZoomBigIn {
+  0% {
+    opacity: 0;
+    transform: scale(.8);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
+
+@keyframes antZoomBigOut {
+  0% {
+    transform: scale(1);
+  }
+  100% {
+    opacity: 0;
+    transform: scale(.8);
+  }
+}
+
+@keyframes antZoomUpIn {
+  0% {
+    opacity: 0;
+    transform-origin: 50% 0%;
+    transform: scale(.8);
+  }
+  100% {
+    transform-origin: 50% 0%;
+    transform: scale(1);
+  }
+}
+
+@keyframes antZoomUpOut {
+  0% {
+    transform-origin: 50% 0%;
+    transform: scale(1);
+  }
+  100% {
+    opacity: 0;
+    transform-origin: 50% 0%;
+    transform: scale(.8);
+  }
+}
+
+@keyframes antZoomLeftIn {
+  0% {
+    opacity: 0;
+    transform-origin: 0% 50%;
+    transform: scale(.8);
+  }
+  100% {
+    transform-origin: 0% 50%;
+    transform: scale(1);
+  }
+}
+
+@keyframes antZoomLeftOut {
+  0% {
+    transform-origin: 0% 50%;
+    transform: scale(1);
+  }
+  100% {
+    opacity: 0;
+    transform-origin: 0% 50%;
+    transform: scale(.8);
+  }
+}
+
+@keyframes antZoomRightIn {
+  0% {
+    opacity: 0;
+    transform-origin: 100% 50%;
+    transform: scale(.8);
+  }
+  100% {
+    transform-origin: 100% 50%;
+    transform: scale(1);
+  }
+}
+
+@keyframes antZoomRightOut {
+  0% {
+    transform-origin: 100% 50%;
+    transform: scale(1);
+  }
+  100% {
+    opacity: 0;
+    transform-origin: 100% 50%;
+    transform: scale(.8);
+  }
+}
+
+@keyframes antZoomDownIn {
+  0% {
+    opacity: 0;
+    transform-origin: 50% 100%;
+    transform: scale(.8);
+  }
+  100% {
+    transform-origin: 50% 100%;
+    transform: scale(1);
+  }
+}
+
+@keyframes antZoomDownOut {
+  0% {
+    transform-origin: 50% 100%;
+    transform: scale(1);
+  }
+  100% {
+    opacity: 0;
+    transform-origin: 50% 100%;
+    transform: scale(.8);
+  }
+}
diff --git a/src/style/core/normalize.less b/src/style/core/normalize.less
new file mode 100644
index 0000000..9b77e0e
--- /dev/null
+++ b/src/style/core/normalize.less
@@ -0,0 +1,461 @@
+/*! normalize.css v5.0.0 | MIT License | github.com/necolas/normalize.css */
+
+/**
+ * 1. Change the default font family in all browsers (opinionated).
+ * 2. Correct the line height in all browsers.
+ * 3. Prevent adjustments of font size after orientation changes in
+ *    IE on Windows Phone and in iOS.
+ */
+
+/* Document
+   ========================================================================== */
+
+html {
+  font-family: sans-serif; /* 1 */
+  line-height: 1.15; /* 2 */
+  -ms-text-size-adjust: 100%; /* 3 */
+  -webkit-text-size-adjust: 100%; /* 3 */
+}
+
+/* Sections
+   ========================================================================== */
+
+/**
+ * Remove the margin in all browsers (opinionated).
+ */
+
+body {
+  margin: 0;
+}
+
+/**
+ * Add the correct display in IE 9-.
+ */
+
+article,
+aside,
+footer,
+header,
+nav,
+section {
+  display: block;
+}
+
+/**
+ * Correct the font size and margin on `h1` elements within `section` and
+ * `article` contexts in Chrome, Firefox, and Safari.
+ */
+
+h1 {
+  font-size: 2em;
+  margin: 0.67em 0;
+}
+
+/* Grouping content
+   ========================================================================== */
+
+/**
+ * Add the correct display in IE 9-.
+ * 1. Add the correct display in IE.
+ */
+
+figcaption,
+figure,
+main { /* 1 */
+  display: block;
+}
+
+/**
+ * Add the correct margin in IE 8.
+ */
+
+figure {
+  margin: 1em 40px;
+}
+
+/**
+ * 1. Add the correct box sizing in Firefox.
+ * 2. Show the overflow in Edge and IE.
+ */
+
+hr {
+  box-sizing: content-box; /* 1 */
+  height: 0; /* 1 */
+  overflow: visible; /* 2 */
+}
+
+/**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+
+pre {
+  font-family: monospace, monospace; /* 1 */
+  font-size: 1em; /* 2 */
+}
+
+/* Text-level semantics
+   ========================================================================== */
+
+/**
+ * 1. Remove the gray background on active links in IE 10.
+ * 2. Remove gaps in links underline in iOS 8+ and Safari 8+.
+ */
+
+a {
+  background-color: transparent; /* 1 */
+  -webkit-text-decoration-skip: objects; /* 2 */
+}
+
+/**
+ * Remove the outline on focused links when they are also active or hovered
+ * in all browsers (opinionated).
+ */
+
+a:active,
+a:hover {
+  outline-width: 0;
+}
+
+/**
+ * 1. Remove the bottom border in Firefox 39-.
+ * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
+ */
+
+abbr[title] {
+  border-bottom: none; /* 1 */
+  text-decoration: underline; /* 2 */
+  text-decoration: underline dotted; /* 2 */
+}
+
+/**
+ * Prevent the duplicate application of `bolder` by the next rule in Safari 6.
+ */
+
+b,
+strong {
+  font-weight: inherit;
+}
+
+/**
+ * Add the correct font weight in Chrome, Edge, and Safari.
+ */
+
+b,
+strong {
+  font-weight: bolder;
+}
+
+/**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+
+code,
+kbd,
+samp {
+  font-family: monospace, monospace; /* 1 */
+  font-size: 1em; /* 2 */
+}
+
+/**
+ * Add the correct font style in Android 4.3-.
+ */
+
+dfn {
+  font-style: italic;
+}
+
+/**
+ * Add the correct background and color in IE 9-.
+ */
+
+mark {
+  background-color: #ff0;
+  color: #000;
+}
+
+/**
+ * Add the correct font size in all browsers.
+ */
+
+small {
+  font-size: 80%;
+}
+
+/**
+ * Prevent `sub` and `sup` elements from affecting the line height in
+ * all browsers.
+ */
+
+sub,
+sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+
+sub {
+  bottom: -0.25em;
+}
+
+sup {
+  top: -0.5em;
+}
+
+/* Embedded content
+   ========================================================================== */
+
+/**
+ * Add the correct display in IE 9-.
+ */
+
+audio,
+video {
+  display: inline-block;
+}
+
+/**
+ * Add the correct display in iOS 4-7.
+ */
+
+audio:not([controls]) {
+  display: none;
+  height: 0;
+}
+
+/**
+ * Remove the border on images inside links in IE 10-.
+ */
+
+img {
+  border-style: none;
+}
+
+/**
+ * Hide the overflow in IE.
+ */
+
+svg:not(:root) {
+  overflow: hidden;
+}
+
+/* Forms
+   ========================================================================== */
+
+/**
+ * 1. Change the font styles in all browsers (opinionated).
+ * 2. Remove the margin in Firefox and Safari.
+ */
+
+button,
+input,
+optgroup,
+select,
+textarea {
+  font-family: sans-serif; /* 1 */
+  font-size: 100%; /* 1 */
+  line-height: 1.15; /* 1 */
+  margin: 0; /* 2 */
+}
+
+/**
+ * Show the overflow in IE.
+ * 1. Show the overflow in Edge.
+ */
+
+button,
+input { /* 1 */
+  overflow: visible;
+}
+
+/**
+ * Remove the inheritance of text transform in Edge, Firefox, and IE.
+ * 1. Remove the inheritance of text transform in Firefox.
+ */
+
+button,
+select { /* 1 */
+  text-transform: none;
+}
+
+/**
+ * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
+ *    controls in Android 4.
+ * 2. Correct the inability to style clickable types in iOS and Safari.
+ */
+
+button,
+html [type="button"], /* 1 */
+[type="reset"],
+[type="submit"] {
+  -webkit-appearance: button; /* 2 */
+}
+
+/**
+ * Remove the inner border and padding in Firefox.
+ */
+
+button::-moz-focus-inner,
+[type="button"]::-moz-focus-inner,
+[type="reset"]::-moz-focus-inner,
+[type="submit"]::-moz-focus-inner {
+  border-style: none;
+  padding: 0;
+}
+
+/**
+ * Restore the focus styles unset by the previous rule.
+ */
+
+button:-moz-focusring,
+[type="button"]:-moz-focusring,
+[type="reset"]:-moz-focusring,
+[type="submit"]:-moz-focusring {
+  outline: 1px dotted ButtonText;
+}
+
+/**
+ * Change the border, margin, and padding in all browsers (opinionated).
+ */
+
+fieldset {
+  border: 1px solid #c0c0c0;
+  margin: 0 2px;
+  padding: 0.35em 0.625em 0.75em;
+}
+
+/**
+ * 1. Correct the text wrapping in Edge and IE.
+ * 2. Correct the color inheritance from `fieldset` elements in IE.
+ * 3. Remove the padding so developers are not caught out when they zero out
+ *    `fieldset` elements in all browsers.
+ */
+
+legend {
+  box-sizing: border-box; /* 1 */
+  color: inherit; /* 2 */
+  display: table; /* 1 */
+  max-width: 100%; /* 1 */
+  padding: 0; /* 3 */
+  white-space: normal; /* 1 */
+}
+
+/**
+ * 1. Add the correct display in IE 9-.
+ * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera.
+ */
+
+progress {
+  display: inline-block; /* 1 */
+  vertical-align: baseline; /* 2 */
+}
+
+/**
+ * Remove the default vertical scrollbar in IE.
+ */
+
+textarea {
+  overflow: auto;
+}
+
+/**
+ * 1. Add the correct box sizing in IE 10-.
+ * 2. Remove the padding in IE 10-.
+ */
+
+[type="checkbox"],
+[type="radio"] {
+  box-sizing: border-box; /* 1 */
+  padding: 0; /* 2 */
+}
+
+/**
+ * Correct the cursor style of increment and decrement buttons in Chrome.
+ */
+
+[type="number"]::-webkit-inner-spin-button,
+[type="number"]::-webkit-outer-spin-button {
+  height: auto;
+}
+
+/**
+ * 1. Correct the odd appearance in Chrome and Safari.
+ * 2. Correct the outline style in Safari.
+ */
+
+[type="search"] {
+  -webkit-appearance: textfield; /* 1 */
+  outline-offset: -2px; /* 2 */
+}
+
+/**
+ * Remove the inner padding and cancel buttons in Chrome and Safari on macOS.
+ */
+
+[type="search"]::-webkit-search-cancel-button,
+[type="search"]::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+/**
+ * 1. Correct the inability to style clickable types in iOS and Safari.
+ * 2. Change font properties to `inherit` in Safari.
+ */
+
+::-webkit-file-upload-button {
+  -webkit-appearance: button; /* 1 */
+  font: inherit; /* 2 */
+}
+
+/* Interactive
+   ========================================================================== */
+
+/*
+ * Add the correct display in IE 9-.
+ * 1. Add the correct display in Edge, IE, and Firefox.
+ */
+
+details, /* 1 */
+menu {
+  display: block;
+}
+
+/*
+ * Add the correct display in all browsers.
+ */
+
+summary {
+  display: list-item;
+}
+
+/* Scripting
+   ========================================================================== */
+
+/**
+ * Add the correct display in IE 9-.
+ */
+
+canvas {
+  display: inline-block;
+}
+
+/**
+ * Add the correct display in IE.
+ */
+
+template {
+  display: none;
+}
+
+/* Hidden
+   ========================================================================== */
+
+/**
+ * Add the correct display in IE 10-.
+ */
+
+[hidden] {
+  display: none;
+}
diff --git a/src/style/index.less b/src/style/index.less
new file mode 100644
index 0000000..655c39a
--- /dev/null
+++ b/src/style/index.less
@@ -0,0 +1,3 @@
+@import "./themes/default";
+@import "./core/index";
+@import "components/index";
diff --git a/src/style/mixins/clearfix.less b/src/style/mixins/clearfix.less
new file mode 100644
index 0000000..bf39fbd
--- /dev/null
+++ b/src/style/mixins/clearfix.less
@@ -0,0 +1,16 @@
+// mixins for clearfix
+// ------------------------
+.clearfix() {
+  zoom: 1;
+  &:before,
+  &:after {
+    content: " ";
+    display: table;
+  }
+  &:after {
+    clear: both;
+    visibility: hidden;
+    font-size: 0;
+    height: 0;
+  }
+}
\ No newline at end of file
diff --git a/src/style/mixins/compatibility.less b/src/style/mixins/compatibility.less
new file mode 100644
index 0000000..7e1202a
--- /dev/null
+++ b/src/style/mixins/compatibility.less
@@ -0,0 +1,45 @@
+// Compatibility for browsers.
+
+// rotate for ie8 and blow
+.ie-rotate(@rotation) {
+  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=@{rotation})";
+}
+
+// rotate for ie8 and blow
+// degrees unit
+.ie-rotate-via-degrees(@degrees) {
+  /* IE6-IE8 */
+  @radians: ~`parseInt("@{degrees}") * Math.PI * 2 / 360`;
+  @costheta: ~`Math.cos("@{radians}")`;
+  @sintheta: ~`Math.sin("@{radians}")`;
+  @negsintheta: ~`"@{sintheta}" * -1`;
+  -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=@{costheta}, M12=@{negsintheta}, M21=@{sintheta}, M22=@{costheta})";
+  zoom: 1;
+
+  :root & {
+    filter: none;
+  }
+}
+
+// support rotate for all browsers
+.cross-rotate(@degrees) {
+  .rotate(@degrees);
+  .ie-rotate-via-degrees(@degrees);
+}
+
+// Placeholder text
+.placeholder(@color: @input-placeholder-color) {
+  // Firefox
+  &::-moz-placeholder {
+    color: @color;
+    opacity: 1; // Override Firefox's unusual default opacity; see https://github.com/twbs/bootstrap/pull/11526
+  }
+  // Internet Explorer 10+
+  &:-ms-input-placeholder {
+    color: @color;
+  }
+  // Safari and Chrome
+  &::-webkit-input-placeholder {
+    color: @color;
+  }
+}
diff --git a/src/style/mixins/iconfont.less b/src/style/mixins/iconfont.less
new file mode 100644
index 0000000..d07ca4a
--- /dev/null
+++ b/src/style/mixins/iconfont.less
@@ -0,0 +1,38 @@
+.iconfont-mixin() {
+  display: inline-block;
+  font-style: normal;
+  vertical-align: baseline;
+  text-align: center;
+  text-transform: none;
+  text-rendering: auto;
+  line-height: 1;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  &:before {
+    display: block;
+    font-family: "anticon" !important;
+  }
+}
+
+.iconfont-font(@content) {
+  font-family: 'anticon';
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  content: @content;
+}
+
+// for iconfont font size
+// fix chrome 12px bug, support ie
+.iconfont-size-under-12px(@size, @rotate: 0deg) {
+  display: inline-block;
+  @font-scale: unit(@size / 12px);
+  font-size: @font-size-base;
+  font-size: ~"@{size} \9"; // ie8-9
+  transform: scale(@font-scale) rotate(@rotate);
+  .ie-rotate-via-degrees(@rotate);
+  :root & {
+    font-size: @font-size-base; // reset ie9 and above
+  }
+}
diff --git a/src/style/mixins/index.less b/src/style/mixins/index.less
new file mode 100644
index 0000000..17b465c
--- /dev/null
+++ b/src/style/mixins/index.less
@@ -0,0 +1,8 @@
+// Mixins
+// --------------------------------------------------
+@import "opacity.less";
+@import "size.less";
+@import "compatibility";
+@import "clearfix";
+@import "iconfont";
+@import "motion";
diff --git a/src/style/mixins/motion.less b/src/style/mixins/motion.less
new file mode 100644
index 0000000..2c49007
--- /dev/null
+++ b/src/style/mixins/motion.less
@@ -0,0 +1,32 @@
+@import '../themes/default';
+
+.motion-common(@duration: @animation-duration-base) {
+  animation-duration: @duration;
+  animation-fill-mode: both;
+}
+
+.motion-common-leave(@duration: @animation-duration-base) {
+  animation-duration: @duration;
+  animation-fill-mode: both;
+}
+
+.make-motion(@className, @keyframeName, @duration: @animation-duration-base) {
+  .@{className}-enter,
+  .@{className}-appear {
+    .motion-common(@duration);
+    animation-play-state: paused;
+  }
+  .@{className}-leave {
+    .motion-common-leave(@duration);
+    animation-play-state: paused;
+  }
+  .@{className}-enter.@{className}-enter-active,
+  .@{className}-appear.@{className}-appear-active {
+    animation-name: ~"@{keyframeName}In";
+    animation-play-state: running;
+  }
+  .@{className}-leave.@{className}-leave-active {
+    animation-name: ~"@{keyframeName}Out";
+    animation-play-state: running;
+  }
+}
diff --git a/src/style/mixins/opacity.less b/src/style/mixins/opacity.less
new file mode 100644
index 0000000..33ed25c
--- /dev/null
+++ b/src/style/mixins/opacity.less
@@ -0,0 +1,8 @@
+// Opacity
+
+.opacity(@opacity) {
+  opacity: @opacity;
+  // IE8 filter
+  @opacity-ie: (@opacity * 100);
+  filter: ~"alpha(opacity=@{opacity-ie})";
+}
diff --git a/src/style/mixins/size.less b/src/style/mixins/size.less
new file mode 100644
index 0000000..a8be650
--- /dev/null
+++ b/src/style/mixins/size.less
@@ -0,0 +1,10 @@
+// Sizing shortcuts
+
+.size(@width; @height) {
+  width: @width;
+  height: @height;
+}
+
+.square(@size) {
+  .size(@size; @size);
+}
diff --git a/src/style/themes/default.less b/src/style/themes/default.less
new file mode 100644
index 0000000..1e05fec
--- /dev/null
+++ b/src/style/themes/default.less
@@ -0,0 +1,197 @@
+// Prefix
+@ant-prefix             : ant;
+
+// Color
+@primary-color          : #108ee9;
+@success-color          : #87d068;
+@error-color            : #f50;
+@highlight-color        : #f50;
+@warning-color          : #fa0;
+@normal-color           : #d9d9d9;
+
+// ------ Base & Require ------
+@body-background        : #fff;
+@component-background   : #fff;
+@font-family            : -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
+@code-family            : Consolas, Menlo, Courier, monospace;
+@text-color             : #666;
+@heading-color          : #404040;
+@text-color-secondary   : #999;
+@font-size-base         : 12px;
+@font-size-lg           : @font-size-base + 2px;
+@line-height-base       : 1.5;
+@border-radius-base     : 4px;
+@border-radius-sm       : 2px;
+
+// ICONFONT
+@iconfont-css-prefix    : anticon;
+@icon-url               : "https://at.alicdn.com/t/font_r5u29ls31bgldi";
+
+// LINK
+@link-color             : #108ee9;
+@link-hover-color       : tint(@link-color, 20%);
+@link-active-color      : shade(@link-color, 5%);
+@link-hover-decoration  : none;
+
+// Animation
+@ease-out            : cubic-bezier(0.215, 0.61, 0.355, 1);
+@ease-in             : cubic-bezier(0.55, 0.055, 0.675, 0.19);
+@ease-in-out         : cubic-bezier(0.645, 0.045, 0.355, 1);
+@ease-out-back       : cubic-bezier(0.12, 0.4, 0.29, 1.46);
+@ease-in-back        : cubic-bezier(0.71, -0.46, 0.88, 0.6);
+@ease-in-out-back    : cubic-bezier(0.71, -0.46, 0.29, 1.46);
+@ease-out-circ       : cubic-bezier(0.08, 0.82, 0.17, 1);
+@ease-in-circ        : cubic-bezier(0.6, 0.04, 0.98, 0.34);
+@ease-in-out-circ    : cubic-bezier(0.78, 0.14, 0.15, 0.86);
+@ease-out-quint      : cubic-bezier(0.23, 1, 0.32, 1);
+@ease-in-quint       : cubic-bezier(0.755, 0.05, 0.855, 0.06);
+@ease-in-out-quint   : cubic-bezier(0.86, 0, 0.07, 1);
+
+// Border color
+@border-color-base      : #d9d9d9;        // base border outline a component
+@border-color-split     : #e9e9e9;        // split border inside a component
+
+// Outline
+@outline-blur-size      : 0;
+@outline-width          : 2px;
+@outline-color          : @primary-color;
+
+// Background color
+@background-color-base  : #f7f7f7;        // basic gray background
+
+// Shadow
+@shadow-color           : rgba(0, 0, 0, .2);
+@box-shadow-base        : @shadow-1-down;
+@shadow-1-up            : 0 -1px 6px @shadow-color;
+@shadow-1-down          : 0 1px 6px @shadow-color;
+@shadow-1-left          : -1px 0 6px @shadow-color;
+@shadow-1-right         : 1px 0 6px @shadow-color;
+@shadow-2               : 0 2px 8px @shadow-color;
+
+// Buttons
+@btn-font-weight        : 500;
+@btn-border-radius-base : @border-radius-base;
+@btn-border-radius-sm   : @border-radius-sm;
+
+@btn-primary-color      : #fff;
+@btn-primary-bg         : @primary-color;
+@btn-group-border       : shade(@primary-color, 5%);
+
+@btn-default-color      : @text-color;
+@btn-default-bg         : @background-color-base;
+@btn-default-border     : @border-color-base;
+
+@btn-ghost-color        : @text-color;
+@btn-ghost-bg           : transparent;
+@btn-ghost-border       : @border-color-base;
+
+@btn-disable-color      : #ccc;
+@btn-disable-bg         : @background-color-base;
+@btn-disable-border     : @border-color-base;
+
+@btn-padding-base       : 4px 15px;
+@btn-font-size-lg       : @font-size-lg;
+@btn-padding-lg         : 4px 15px 5px 15px;
+@btn-padding-sm         : 1px 7px;
+
+@btn-circle-size        : 28px;
+@btn-circle-size-lg     : 32px;
+@btn-circle-size-sm     : 22px;
+
+// Media queries breakpoints
+// Extra small screen / phone
+@screen-xs              : 480px;
+@screen-xs-min          : @screen-xs;
+@screen-xs-max          : (@screen-xs-min - 1);
+
+// Small screen / tablet
+@screen-sm              : 768px;
+@screen-sm-min          : @screen-sm;
+@screen-sm-max          : (@screen-sm-min - 1);
+
+// Medium screen / desktop
+@screen-md              : 992px;
+@screen-md-min          : @screen-md;
+@screen-md-max          : (@screen-md-min - 1);
+
+// Large screen / wide desktop
+@screen-lg              : 1200px;
+@screen-lg-min          : @screen-lg;
+@screen-lg-max          : (@screen-lg-min - 1);
+
+// Layout and Grid system
+@grid-columns           : 24;
+@grid-gutter-width      : 0;
+
+// z-index list
+@zindex-affix           : 10;
+@zindex-back-top        : 10;
+@zindex-modal-mask      : 1000;
+@zindex-modal           : 1000;
+@zindex-notification    : 1010;
+@zindex-message         : 1010;
+@zindex-popover         : 1030;
+@zindex-picker          : 1050;
+@zindex-dropdown        : 1050;
+@zindex-tooltip         : 1060;
+
+// Animation
+@animation-duration-slow: .3s; // Modal
+@animation-duration-base: .2s;
+@animation-duration-fast: .1s; // Tooltip
+
+// Form
+// ---
+@label-required-color        : @highlight-color;
+@label-color                 : @text-color;
+@form-item-margin-bottom     : 24px;
+
+// Input
+// ---
+@input-height-base           : 28px;
+@input-height-lg             : 32px;
+@input-height-sm             : 22px;
+@input-padding-horizontal    : 7px;
+@input-padding-vertical-base : 4px;
+@input-padding-vertical-sm   : 1px;
+@input-padding-vertical-lg   : 6px;
+@input-placeholder-color     : #ccc;
+@input-color                 : @text-color;
+@input-border-color          : @border-color-base;
+@input-bg                    : #fff;
+@input-hover-border-color    : @primary-color;
+@input-disabled-bg           : @background-color-base;
+
+// Tooltip
+// ---
+//* Tooltip max width
+@tooltip-max-width: 250px;
+//** Tooltip text color
+@tooltip-color: #fff;
+//** Tooltip background color
+@tooltip-bg: rgba(64, 64, 64, .85);
+//** Tooltip arrow width
+@tooltip-arrow-width: 5px;
+//** Tooltip distance with trigger
+@tooltip-distance: @tooltip-arrow-width - 1 + 4;
+//** Tooltip arrow color
+@tooltip-arrow-color: @tooltip-bg;
+
+// Popover
+// ---
+//** Popover body background color
+@popover-bg: #fff;
+//** Popover maximum width
+@popover-min-width: 177px;
+//** Popover arrow width
+@popover-arrow-width: 4px;
+//** Popover arrow color
+@popover-arrow-color: @popover-bg;
+//** Popover outer arrow width
+@popover-arrow-outer-width: (@popover-arrow-width + 1);
+//** Popover outer arrow color
+@popover-arrow-outer-color: fadeout(@border-color-base, 30%);
+
+// Progress
+// --
+@process-default-color: @primary-color;
diff --git a/src/table/plugins/pagination/pagination.vue b/src/table/plugins/pagination/pagination.vue
new file mode 100644
index 0000000..5e300d6
--- /dev/null
+++ b/src/table/plugins/pagination/pagination.vue
@@ -0,0 +1,15 @@
+<template>
+  <nav class="pagination">
+    
+  </nav>
+</template>
+
+<script>
+  export default {
+    data () {
+      return {
+
+      }
+    }
+  }
+</script>
diff --git a/src/table/plugins/sort/sort.vue b/src/table/plugins/sort/sort.vue
new file mode 100644
index 0000000..e69de29
diff --git a/src/table/table.vue b/src/table/table.vue
new file mode 100644
index 0000000..9e5dff1
--- /dev/null
+++ b/src/table/table.vue
@@ -0,0 +1,22 @@
+<template>
+  <div class="p-table">
+    <table class="table is-striped">
+
+    </table>
+  </div>
+</template>
+
+<script>
+  export default {
+    props: {
+      columns: Array,
+      dataSource: Array,
+      pagination: Object
+    },
+    data () {
+      return {
+
+      }
+    }
+  }
+</script>
diff --git a/src/data/tag/tag.vue b/src/tag/tag.vue
similarity index 100%
rename from src/data/tag/tag.vue
rename to src/tag/tag.vue
diff --git a/src/theme/bulma/bulma.sass b/src/theme/bulma/bulma.sass
deleted file mode 100644
index 2b18542..0000000
--- a/src/theme/bulma/bulma.sass
+++ /dev/null
@@ -1,7 +0,0 @@
-@charset "utf-8"
-
-@import "sass/utilities/utilities"
-@import "sass/base/base"
-@import "sass/elements/elements"
-@import "sass/components/components"
-@import "sass/layout/layout"
diff --git a/src/theme/bulma/sass/base/base.sass b/src/theme/bulma/sass/base/base.sass
deleted file mode 100644
index 8e0f5a5..0000000
--- a/src/theme/bulma/sass/base/base.sass
+++ /dev/null
@@ -1,5 +0,0 @@
-@charset "utf-8"
-
-@import "generic"
-@import "classes"
-@import "helpers"
diff --git a/src/theme/bulma/sass/base/classes.sass b/src/theme/bulma/sass/base/classes.sass
deleted file mode 100644
index 398c00d..0000000
--- a/src/theme/bulma/sass/base/classes.sass
+++ /dev/null
@@ -1,19 +0,0 @@
-.block
-  &:not(:last-child)
-    margin-bottom: 20px
-
-.container
-  position: relative
-  +desktop
-    margin: 0 auto
-    max-width: 960px
-    // Modifiers
-    &.is-fluid
-      margin: 0 20px
-      max-width: none
-  +widescreen
-    max-width: 1200px
-
-.fa
-  text-align: center
-  vertical-align: top
diff --git a/src/theme/bulma/sass/base/generic.sass b/src/theme/bulma/sass/base/generic.sass
deleted file mode 100644
index 07b53c1..0000000
--- a/src/theme/bulma/sass/base/generic.sass
+++ /dev/null
@@ -1,100 +0,0 @@
-html
-  background-color: $body-background
-  font-size: $size-normal
-  -moz-osx-font-smoothing: grayscale
-  -webkit-font-smoothing: antialiased
-  min-width: 300px
-  overflow-x: hidden
-  overflow-y: scroll
-  text-rendering: optimizeLegibility
-
-article,
-aside,
-figure,
-footer,
-header,
-hgroup,
-section
-  display: block
-
-body,
-button,
-input,
-select,
-textarea
-  font-family: $family-primary
-
-code,
-pre
-  -moz-osx-font-smoothing: auto
-  -webkit-font-smoothing: auto
-  font-family: $family-code
-  line-height: 1.25
-
-body
-  color: $text
-  font-size: 1rem
-  font-weight: $weight-normal
-  line-height: 1.428571428571429
-
-// Inline
-
-a
-  color: $link
-  cursor: pointer
-  text-decoration: none
-  transition: none $speed $easing
-  &:hover
-    color: $link-hover
-
-code
-  background-color: $code-background
-  color: $code
-  font-size: 12px
-  font-weight: normal
-  padding: 1px 2px 2px
-
-hr
-  border-top-color: $border
-  margin: 40px 0
-
-img
-  max-width: 100%
-
-input[type="checkbox"],
-input[type="radio"]
-  vertical-align: baseline
-
-small
-  font-size: $size-small
-
-span
-  font-style: inherit
-  font-weight: inherit
-
-strong
-  color: $text-strong
-  font-weight: $weight-bold
-
-// Block
-
-pre
-  background-color: $pre-background
-  color: $pre
-  white-space: pre
-  word-wrap: normal
-  code
-    background-color: $pre-background
-    color: $pre
-    display: block
-    overflow-x: auto
-    padding: 16px 20px
-
-table
-  width: 100%
-  td,
-  th
-    text-align: left
-    vertical-align: top
-  th
-    color: $text-strong
diff --git a/src/theme/bulma/sass/base/helpers.sass b/src/theme/bulma/sass/base/helpers.sass
deleted file mode 100644
index 68c964c..0000000
--- a/src/theme/bulma/sass/base/helpers.sass
+++ /dev/null
@@ -1,104 +0,0 @@
-// Display
-
-$displays: 'block' 'flex' 'inline' 'inline-block' 'inline-flex'
-
-@each $display in $displays
-  .is-#{$display}
-    display: #{$display}
-  .is-#{$display}-mobile
-    +mobile
-      display: #{$display} !important
-  .is-#{$display}-tablet
-    +tablet
-      display: #{$display} !important
-  .is-#{$display}-tablet-only
-    +tablet-only
-      display: #{$display} !important
-  .is-#{$display}-touch
-    +touch
-      display: #{$display} !important
-  .is-#{$display}-desktop
-    +desktop
-      display: #{$display} !important
-  .is-#{$display}-desktop-only
-    +desktop-only
-      display: #{$display} !important
-  .is-#{$display}-widescreen
-    +widescreen
-      display: #{$display} !important
-
-// Float
-
-.is-clearfix
-  +clearfix
-
-.is-pulled-left
-  float: left
-
-.is-pulled-right
-  float: right
-
-// Overflow
-
-.is-clipped
-  overflow: hidden !important
-
-// Overlay
-
-.is-overlay
-  +overlay
-
-// Text
-
-.has-text-centered
-  text-align: center
-
-.has-text-left
-  text-align: left
-
-.has-text-right
-  text-align: right
-
-// Visibility
-
-.is-hidden
-  display: none !important
-
-.is-hidden-mobile
-  +mobile
-    display: none !important
-
-.is-hidden-tablet
-  +tablet
-    display: none !important
-
-.is-hidden-tablet-only
-  +tablet-only
-    display: none !important
-
-.is-hidden-touch
-  +touch
-    display: none !important
-
-.is-hidden-desktop
-  +desktop
-    display: none !important
-
-.is-hidden-desktop-only
-  +desktop-only
-    display: none !important
-
-.is-hidden-widescreen
-  +widescreen
-    display: none !important
-
-// Other
-
-.is-disabled
-  pointer-events: none
-
-.is-marginless
-  margin: 0 !important
-
-.is-unselectable
-  @extend .unselectable
diff --git a/src/theme/bulma/sass/components/card.sass b/src/theme/bulma/sass/components/card.sass
deleted file mode 100644
index d5a980a..0000000
--- a/src/theme/bulma/sass/components/card.sass
+++ /dev/null
@@ -1,58 +0,0 @@
-.card-header
-  align-items: stretch
-  box-shadow: 0 1px 2px rgba($black, 0.1)
-  display: flex
-  min-height: 40px
-
-.card-header-title
-  align-items: flex-start
-  color: $text-strong
-  display: flex
-  flex-grow: 1
-  font-weight: bold
-  padding: 10px
-
-.card-header-icon
-  align-items: center
-  cursor: pointer
-  display: flex
-  justify-content: center
-  width: 40px
-
-.card-image
-  display: block
-  position: relative
-
-.card-content
-  padding: 20px
-  .title + .subtitle
-    margin-top: -20px
-
-.card-footer
-  border-top: 1px solid $border
-  align-items: stretch
-  display: flex
-
-.card-footer-item
-  align-items: center
-  display: flex
-  flex-grow: 1
-  justify-content: center
-  padding: 10px
-  &:not(:last-child)
-    border-right: 1px solid $border
-
-.card
-  background-color: $white
-  box-shadow: 0 2px 3px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1)
-  color: $text
-  max-width: 100%
-  position: relative
-  width: 300px
-  .media:not(:last-child)
-    margin-bottom: 10px
-  // Modifiers
-  &.is-fullwidth
-    width: 100%
-  &.is-rounded
-    border-radius: $radius-large
diff --git a/src/theme/bulma/sass/components/components.sass b/src/theme/bulma/sass/components/components.sass
deleted file mode 100644
index 9d03779..0000000
--- a/src/theme/bulma/sass/components/components.sass
+++ /dev/null
@@ -1,14 +0,0 @@
-@charset "utf-8"
-
-@import "card"
-@import "grid"
-@import "highlight"
-@import "level"
-@import "media"
-@import "menu"
-@import "message"
-@import "modal"
-@import "nav"
-@import "pagination"
-@import "panel"
-@import "tabs"
diff --git a/src/theme/bulma/sass/components/grid.sass b/src/theme/bulma/sass/components/grid.sass
deleted file mode 100644
index 53cfc48..0000000
--- a/src/theme/bulma/sass/components/grid.sass
+++ /dev/null
@@ -1,282 +0,0 @@
-.column
-  flex-basis: 0
-  flex-grow: 1
-  flex-shrink: 1
-  padding: 10px
-  .columns.is-mobile > &.is-narrow
-    flex: none
-  .columns.is-mobile > &.is-full
-    flex: none
-    width: 100%
-  .columns.is-mobile > &.is-three-quarters
-    flex: none
-    width: 75%
-  .columns.is-mobile > &.is-two-thirds
-    flex: none
-    width: 66.6666%
-  .columns.is-mobile > &.is-half
-    flex: none
-    width: 50%
-  .columns.is-mobile > &.is-one-third
-    flex: none
-    width: 33.3333%
-  .columns.is-mobile > &.is-one-quarter
-    flex: none
-    width: 25%
-  .columns.is-mobile > &.is-offset-three-quarters
-    margin-left: 75%
-  .columns.is-mobile > &.is-offset-two-thirds
-    margin-left: 66.6666%
-  .columns.is-mobile > &.is-offset-half
-    margin-left: 50%
-  .columns.is-mobile > &.is-offset-one-third
-    margin-left: 33.3333%
-  .columns.is-mobile > &.is-offset-one-quarter
-    margin-left: 25%
-  @for $i from 1 through 12
-    .columns.is-mobile > &.is-#{$i}
-      flex: none
-      width: ($i / 12) * 100%
-    .columns.is-mobile > &.is-offset-#{$i}
-      margin-left: ($i / 12) * 100%
-  +mobile
-    &.is-narrow-mobile
-      flex: none
-    &.is-full-mobile
-      flex: none
-      width: 100%
-    &.is-three-quarters-mobile
-      flex: none
-      width: 75%
-    &.is-two-thirds-mobile
-      flex: none
-      width: 66.6666%
-    &.is-half-mobile
-      flex: none
-      width: 50%
-    &.is-one-third-mobile
-      flex: none
-      width: 33.3333%
-    &.is-one-quarter-mobile
-      flex: none
-      width: 25%
-    &.is-offset-three-quarters-mobile
-      margin-left: 75%
-    &.is-offset-two-thirds-mobile
-      margin-left: 66.6666%
-    &.is-offset-half-mobile
-      margin-left: 50%
-    &.is-offset-one-third-mobile
-      margin-left: 33.3333%
-    &.is-offset-one-quarter-mobile
-      margin-left: 25%
-    @for $i from 1 through 12
-      &.is-#{$i}-mobile
-        flex: none
-        width: ($i / 12) * 100%
-      &.is-offset-#{$i}-mobile
-        margin-left: ($i / 12) * 100%
-  +tablet
-    &.is-narrow,
-    &.is-narrow-tablet
-      flex: none
-    &.is-full,
-    &.is-full-tablet
-      flex: none
-      width: 100%
-    &.is-three-quarters,
-    &.is-three-quarters-tablet
-      flex: none
-      width: 75%
-    &.is-two-thirds,
-    &.is-two-thirds-tablet
-      flex: none
-      width: 66.6666%
-    &.is-half,
-    &.is-half-tablet
-      flex: none
-      width: 50%
-    &.is-one-third,
-    &.is-one-third-tablet
-      flex: none
-      width: 33.3333%
-    &.is-one-quarter,
-    &.is-one-quarter-tablet
-      flex: none
-      width: 25%
-    &.is-offset-three-quarters,
-    &.is-offset-three-quarters-tablet
-      margin-left: 75%
-    &.is-offset-two-thirds,
-    &.is-offset-two-thirds-tablet
-      margin-left: 66.6666%
-    &.is-offset-half,
-    &.is-offset-half-tablet
-      margin-left: 50%
-    &.is-offset-one-third,
-    &.is-offset-one-third-tablet
-      margin-left: 33.3333%
-    &.is-offset-one-quarter,
-    &.is-offset-one-quarter-tablet
-      margin-left: 25%
-    @for $i from 1 through 12
-      &.is-#{$i},
-      &.is-#{$i}-tablet
-        flex: none
-        width: ($i / 12) * 100%
-      &.is-offset-#{$i},
-      &.is-offset-#{$i}-tablet
-        margin-left: ($i / 12) * 100%
-  +desktop
-    &.is-narrow-desktop
-      flex: none
-    &.is-full-desktop
-      flex: none
-      width: 100%
-    &.is-three-quarters-desktop
-      flex: none
-      width: 75%
-    &.is-two-thirds-desktop
-      flex: none
-      width: 66.6666%
-    &.is-half-desktop
-      flex: none
-      width: 50%
-    &.is-one-third-desktop
-      flex: none
-      width: 33.3333%
-    &.is-one-quarter-desktop
-      flex: none
-      width: 25%
-    &.is-offset-three-quarters-desktop
-      margin-left: 75%
-    &.is-offset-two-thirds-desktop
-      margin-left: 66.6666%
-    &.is-offset-half-desktop
-      margin-left: 50%
-    &.is-offset-one-third-desktop
-      margin-left: 33.3333%
-    &.is-offset-one-quarter-desktop
-      margin-left: 25%
-    @for $i from 1 through 12
-      &.is-#{$i}-desktop
-        flex: none
-        width: ($i / 12) * 100%
-      &.is-offset-#{$i}-desktop
-        margin-left: ($i / 12) * 100%
-  +widescreen
-    &.is-narrow-widescreen
-      flex: none
-    &.is-full-widescreen
-      flex: none
-      width: 100%
-    &.is-three-quarters-widescreen
-      flex: none
-      width: 75%
-    &.is-two-thirds-widescreen
-      flex: none
-      width: 66.6666%
-    &.is-half-widescreen
-      flex: none
-      width: 50%
-    &.is-one-third-widescreen
-      flex: none
-      width: 33.3333%
-    &.is-one-quarter-widescreen
-      flex: none
-      width: 25%
-    &.is-offset-three-quarters-widescreen
-      margin-left: 75%
-    &.is-offset-two-thirds-widescreen
-      margin-left: 66.6666%
-    &.is-offset-half-widescreen
-      margin-left: 50%
-    &.is-offset-one-third-widescreen
-      margin-left: 33.3333%
-    &.is-offset-one-quarter-widescreen
-      margin-left: 25%
-    @for $i from 1 through 12
-      &.is-#{$i}-widescreen
-        flex: none
-        width: ($i / 12) * 100%
-      &.is-offset-#{$i}-widescreen
-        margin-left: ($i / 12) * 100%
-
-.columns
-  margin-left: -10px
-  margin-right: -10px
-  margin-top: -10px
-  &:last-child
-    margin-bottom: -10px
-  &:not(:last-child)
-    margin-bottom: 10px
-  // Modifiers
-  &.is-centered
-    justify-content: center
-  &.is-gapless
-    margin-left: 0
-    margin-right: 0
-    margin-top: 0
-    &:last-child
-      margin-bottom: 0
-    &:not(:last-child)
-      margin-bottom: 20px
-    & > .column
-      margin: 0
-      padding: 0
-  &.is-grid
-    // Responsiveness
-    +tablet
-      flex-wrap: wrap
-      & > .column
-        max-width: 33.3333%
-        padding: 10px
-        width: 33.3333%
-        & + .column
-          margin-left: 0
-  &.is-mobile
-    display: flex
-  &.is-multiline
-    flex-wrap: wrap
-  &.is-vcentered
-    align-items: center
-  // Responsiveness
-  +tablet
-    &:not(.is-desktop)
-      display: flex
-  +desktop
-    // Modifiers
-    &.is-desktop
-      display: flex
-
-.tile
-  align-items: stretch
-  flex-basis: auto
-  flex-grow: 1
-  flex-shrink: 1
-  min-height: min-content
-  // Modifiers
-  &.is-ancestor
-    margin-left: -10px
-    margin-right: -10px
-    margin-top: -10px
-    &:last-child
-      margin-bottom: -10px
-    &:not(:last-child)
-      margin-bottom: 10px
-  &.is-child
-    margin: 0 !important
-  &.is-parent
-    padding: 10px
-  &.is-vertical
-    flex-direction: column
-    & > .tile.is-child:not(:last-child)
-      margin-bottom: 20px !important
-  // Responsiveness
-  +tablet
-    &:not(.is-child)
-      display: flex
-    @for $i from 1 through 12
-      &.is-#{$i}
-        flex: none
-        width: ($i / 12) * 100%
diff --git a/src/theme/bulma/sass/components/highlight.sass b/src/theme/bulma/sass/components/highlight.sass
deleted file mode 100644
index 710c6ba..0000000
--- a/src/theme/bulma/sass/components/highlight.sass
+++ /dev/null
@@ -1,123 +0,0 @@
-.highlight
-  background-color: #fdf6e3
-  color: #586e75
-  .c
-    color: #93a1a1
-  .err,
-  .g
-    color: #586e75
-  .k
-    color: #859900
-  .l,
-  .n
-    color: #586e75
-  .o
-    color: #859900
-  .x
-    color: #cb4b16
-  .p
-    color: #586e75
-  .cm
-    color: #93a1a1
-  .cp
-    color: #859900
-  .c1
-    color: #93a1a1
-  .cs
-    color: #859900
-  .gd
-    color: #2aa198
-  .ge
-    color: #586e75
-    font-style: italic
-  .gr
-    color: #dc322f
-  .gh
-    color: #cb4b16
-  .gi
-    color: #859900
-  .go,
-  .gp
-    color: #586e75
-  .gs
-    color: #586e75
-    font-weight: bold
-  .gu
-    color: #cb4b16
-  .gt
-    color: #586e75
-  .kc
-    color: #cb4b16
-  .kd
-    color: #268bd2
-  .kn,
-  .kp
-    color: #859900
-  .kr
-    color: #268bd2
-  .kt
-    color: #dc322f
-  .ld
-    color: #586e75
-  .m,
-  .s
-    color: #2aa198
-  .na
-    color: #B58900
-  .nb
-    color: #586e75
-  .nc
-    color: #268bd2
-  .no
-    color: #cb4b16
-  .nd
-    color: #268bd2
-  .ni,
-  .ne
-    color: #cb4b16
-  .nf
-    color: #268bd2
-  .nl,
-  .nn,
-  .nx,
-  .py
-    color: #586e75
-  .nt,
-  .nv
-    color: #268bd2
-  .ow
-    color: #859900
-  .w
-    color: #586e75
-  .mf,
-  .mh,
-  .mi,
-  .mo
-    color: #2aa198
-  .sb
-    color: #93a1a1
-  .sc
-    color: #2aa198
-  .sd
-    color: #586e75
-  .s2
-    color: #2aa198
-  .se
-    color: #cb4b16
-  .sh
-    color: #586e75
-  .si,
-  .sx
-    color: #2aa198
-  .sr
-    color: #dc322f
-  .s1,
-  .ss
-    color: #2aa198
-  .bp,
-  .vc,
-  .vg,
-  .vi
-    color: #268bd2
-  .il
-    color: #2aa198
diff --git a/src/theme/bulma/sass/components/level.sass b/src/theme/bulma/sass/components/level.sass
deleted file mode 100644
index 2bd0175..0000000
--- a/src/theme/bulma/sass/components/level.sass
+++ /dev/null
@@ -1,57 +0,0 @@
-.level-item
-  .title,
-  .subtitle
-    margin-bottom: 0
-  // Responsiveness
-  +mobile
-    &:not(:last-child)
-      margin-bottom: 10px
-
-.level-left,
-.level-right
-  .level-item
-    &:not(:last-child)
-      margin-right: 10px
-    // Modifiers
-    &.is-flexible
-      flex-grow: 1
-
-.level-left
-  // Responsiveness
-  +mobile
-    & + .level-right
-      margin-top: 20px
-  +tablet
-    align-items: center
-    display: flex
-
-.level-right
-  // Responsiveness
-  +tablet
-    align-items: center
-    display: flex
-    justify-content: flex-end
-
-.level
-  @extend .block
-  align-items: center
-  justify-content: space-between
-  code
-    border-radius: $radius
-  img
-    display: inline-block
-    vertical-align: top
-  // Modifiers
-  &.is-mobile
-    display: flex
-    & > .level-item
-      &:not(:last-child)
-        margin-bottom: 0
-      &:not(.is-narrow)
-        flex-grow: 1
-  // Responsiveness
-  +tablet
-    display: flex
-    & > .level-item
-      &:not(.is-narrow)
-        flex-grow: 1
diff --git a/src/theme/bulma/sass/components/media.sass b/src/theme/bulma/sass/components/media.sass
deleted file mode 100644
index cf36578..0000000
--- a/src/theme/bulma/sass/components/media.sass
+++ /dev/null
@@ -1,58 +0,0 @@
-.media-number
-  background-color: $background
-  border-radius: 290486px
-  display: inline-block
-  font-size: $size-medium
-  height: 32px
-  line-height: 24px
-  min-width: 32px
-  padding: 4px 8px
-  text-align: center
-  vertical-align: top
-  // Responsiveness
-  +mobile
-    margin-bottom: 10px
-  +tablet
-    margin-right: 10px
-
-.media-left
-  margin-right: 10px
-
-.media-right
-  margin-left: 10px
-
-.media-content
-  flex-grow: 1
-  text-align: left
-
-.media
-  align-items: flex-start
-  display: flex
-  text-align: left
-  .content:not(:last-child)
-    margin-bottom: 10px
-  .media
-    border-top: 1px solid rgba($border, 0.5)
-    display: flex
-    padding-top: 10px
-    .content:not(:last-child),
-    .control:not(:last-child)
-      margin-bottom: 5px
-    .media
-      padding-top: 5px
-      & + .media
-        margin-top: 5px
-  & + .media
-    border-top: 1px solid rgba($border, 0.5)
-    margin-top: 10px
-    padding-top: 10px
-  // Sizes
-  &.is-large
-    & + .media
-      margin-top: 20px
-      padding-top: 20px
-  // Responsiveness
-  +tablet
-    &.is-large
-      .media-number
-        margin-right: 20px
diff --git a/src/theme/bulma/sass/components/menu.sass b/src/theme/bulma/sass/components/menu.sass
deleted file mode 100644
index c2c6daa..0000000
--- a/src/theme/bulma/sass/components/menu.sass
+++ /dev/null
@@ -1,32 +0,0 @@
-.menu-nav
-  a
-    display: block
-    padding: 5px 10px
-
-.menu-list
-  a
-    border-radius: $radius-small
-    color: $text
-    display: block
-    padding: 5px 10px
-    &:hover
-      background-color: $background
-      color: $link
-    // Modifiers
-    &.is-active
-      background-color: $link
-      color: $link-invert
-  li
-    ul
-      border-left: 1px solid $border
-      margin: 10px
-      padding-left: 10px
-
-.menu-label
-  color: $text-light
-  font-size: $size-small
-  letter-spacing: 1px
-  margin-bottom: 5px
-  text-transform: uppercase
-  &:not(:first-child)
-    margin-top: 20px
diff --git a/src/theme/bulma/sass/components/message.sass b/src/theme/bulma/sass/components/message.sass
deleted file mode 100644
index c133fd9..0000000
--- a/src/theme/bulma/sass/components/message.sass
+++ /dev/null
@@ -1,39 +0,0 @@
-.message-body
-  border: 1px solid $border
-  border-radius: $radius
-  padding: 12px 15px
-  strong
-    color: inherit
-
-.message-header
-  background-color: $text
-  border-radius: $radius $radius 0 0
-  color: $text-invert
-  padding: 7px 10px
-  strong
-    color: inherit
-  & + .message-body
-    border-radius: 0 0 $radius $radius
-    border-top: none
-
-.message
-  @extend .block
-  background-color: $background
-  border-radius: $radius
-  // Colors
-  @each $name, $pair in $colors
-    $color: nth($pair, 1)
-    $color-invert: nth($pair, 2)
-    $lightning: max((100% - lightness($color)) - 4%, 0%)
-    $darkness: max(lightness($color) - 10%, lightness($color))
-    &.is-#{$name}
-      background-color: lighten($color, $lightning)
-      .message-header
-        background-color: $color
-        color: $color-invert
-      .message-body
-        border-color: $color
-        @if (colorLuminance($color) > 0.8)
-          color: desaturate(lighten(darken($color, 100%), 40%), 40%)
-        @else
-          color: desaturate(lighten(darken($color, 100%), 50%), 30%)
diff --git a/src/theme/bulma/sass/components/modal.sass b/src/theme/bulma/sass/components/modal.sass
deleted file mode 100644
index a54a752..0000000
--- a/src/theme/bulma/sass/components/modal.sass
+++ /dev/null
@@ -1,75 +0,0 @@
-.modal-background
-  +overlay
-  background-color: rgba($black, 0.86)
-
-.modal-content
-  margin: 0 20px
-  max-height: calc(100vh - 160px)
-  overflow: auto
-  position: relative
-  width: 100%
-  // Responsiveness
-  +tablet
-    margin: 0 auto
-    max-height: calc(100vh - 40px)
-    width: 640px
-
-.modal-close
-  @extend .delete
-  background: none
-  height: 40px
-  position: fixed
-  right: 20px
-  top: 20px
-  width: 40px
-
-.modal-card
-  @extend .modal-content
-  background-color: $white
-  border-radius: $radius-large
-  display: flex
-  flex-direction: column
-  max-height: calc(100vh - 40px)
-  overflow: hidden
-
-.modal-card-head,
-.modal-card-foot
-  align-items: center
-  background-color: $background
-  display: flex
-  flex-shrink: 0
-  justify-content: flex-start
-  padding: 20px
-  position: relative
-
-.modal-card-head
-  border-bottom: 1px solid $border
-
-.modal-card-title
-  color: $text-strong
-  flex-grow: 1
-  font-size: $size-4
-  line-height: 1
-
-.modal-card-foot
-  border-top: 1px solid $border
-  .button
-    &:not(:last-child)
-      margin-right: 10px
-
-.modal-card-body
-  flex-grow: 1
-  overflow: auto
-  padding: 20px
-
-.modal
-  +overlay
-  align-items: center
-  display: none
-  justify-content: center
-  overflow: hidden
-  position: fixed
-  z-index: 1986
-  // Modifiers
-  &.is-active
-    display: flex
diff --git a/src/theme/bulma/sass/components/nav.sass b/src/theme/bulma/sass/components/nav.sass
deleted file mode 100644
index 1523d81..0000000
--- a/src/theme/bulma/sass/components/nav.sass
+++ /dev/null
@@ -1,133 +0,0 @@
-// Components
-
-.nav-toggle
-  @extend .hamburger
-  // Responsiveness
-  +tablet
-    display: none
-
-.nav-item
-  align-items: center
-  display: flex
-  justify-content: center
-  padding: 10px
-  a
-    flex-grow: 1
-  img
-    max-height: 24px
-  .button + .button
-    margin-left: 10px
-  .tag
-    &:first-child
-      margin-right: 5px
-    &:last-child
-      margin-left: 5px
-  // Responsiveness
-  +mobile
-    justify-content: flex-start
-
-.nav-item a,
-a.nav-item
-  color: $text
-  &:hover
-    color: $link-hover
-  // Modifiers
-  &.is-active
-    color: $link-active
-  &.is-tab
-    border-bottom: 1px solid transparent
-    border-top: 1px solid transparent
-    padding-left: 12px
-    padding-right: 12px
-    &:hover
-      border-bottom: 1px solid $link
-      border-top: 1px solid transparent
-    &.is-active
-      border-bottom: 3px solid $link
-      border-top: 3px solid transparent
-      color: $link
-
-// Containers
-
-.nav-menu
-  // Responsiveness
-  +mobile
-    background-color: $white
-    box-shadow: 0 4px 7px rgba($black, 0.1)
-    left: 0
-    display: none
-    right: 0
-    top: 100%
-    position: absolute
-    .nav-item
-      border-top: 1px solid rgba($border, 0.5)
-      padding: 10px
-    &.is-active
-      display: block
-  +tablet-only
-    padding-right: 20px
-
-.nav-left
-  align-items: stretch
-  display: flex
-  flex-basis: 0
-  flex-grow: 1
-  justify-content: flex-start
-  overflow: hidden
-  overflow-x: auto
-  white-space: nowrap
-
-.nav-center
-  align-items: stretch
-  display: flex
-  justify-content: center
-  margin-left: auto
-  margin-right: auto
-
-.nav-right
-  // Responsiveness
-  +tablet
-    align-items: stretch
-    display: flex
-    flex-basis: 0
-    flex-grow: 1
-    justify-content: flex-end
-
-// Main container
-
-.nav
-  align-items: stretch
-  background-color: $white
-  display: flex
-  min-height: $nav-height
-  position: relative
-  text-align: center
-  z-index: 2
-  & > .container
-    align-items: stretch
-    display: flex
-    min-height: $nav-height
-    width: 100%
-    & > .nav-left
-      & > .nav-item:first-child:not(.is-tab)
-        padding-left: 0
-    & > .nav-right
-      & > .nav-item:last-child:not(.is-tab)
-        padding-right: 0
-  .container > &
-    & > .nav-left
-      & > .nav-item:first-child:not(.is-tab)
-        padding-left: 0
-    & > .nav-right
-      & > .nav-item:last-child:not(.is-tab)
-        padding-right: 0
-  // Modifiers
-  &.has-shadow
-    box-shadow: 0 2px 3px rgba($black, 0.1)
-  // Responsiveness
-  +touch
-    & > .container,
-    .container > &
-      & > .nav-left
-        & > .nav-item.is-brand:first-child
-          padding-left: 20px
diff --git a/src/theme/bulma/sass/components/pagination.sass b/src/theme/bulma/sass/components/pagination.sass
deleted file mode 100644
index a595c48..0000000
--- a/src/theme/bulma/sass/components/pagination.sass
+++ /dev/null
@@ -1,35 +0,0 @@
-.pagination
-  align-items: center
-  display: flex
-  justify-content: center
-  text-align: center
-  a
-    display: block
-    min-width: 32px
-    padding: 3px 8px
-  span
-    color: $text-light
-    display: block
-    margin: 0 4px
-  li
-    margin: 0 2px
-  ul
-    align-items: center
-    display: flex
-    flex-grow: 1
-    justify-content: center
-  // Responsiveness
-  +mobile
-    flex-wrap: wrap
-    & > a
-      width: calc(50% - 5px)
-      &:not(:first-child)
-        margin-left: 10px
-    li
-      flex-grow: 1
-    ul
-      margin-top: 10px
-  +tablet
-    & > a
-      &:not(:first-child)
-        order: 1
diff --git a/src/theme/bulma/sass/components/panel.sass b/src/theme/bulma/sass/components/panel.sass
deleted file mode 100644
index a60949e..0000000
--- a/src/theme/bulma/sass/components/panel.sass
+++ /dev/null
@@ -1,57 +0,0 @@
-.panel-icon
-  +fa(14px, 16px)
-  color: $text-light
-  float: left
-  margin: 0 4px 0 -2px
-  .fa
-    font-size: inherit
-    line-height: inherit
-
-.panel-heading
-  background-color: $background
-  border-bottom: 1px solid $border
-  border-radius: 4px 4px 0 0
-  color: $text-strong
-  font-size: $size-medium
-  font-weight: 300
-  padding: 10px
-
-.panel-list
-  a
-    color: $text
-    &:hover
-      color: $link
-
-.panel-tabs
-  display: flex
-  font-size: $size-small
-  padding: 5px 10px 0
-  justify-content: center
-  a
-    border-bottom: 1px solid $border
-    margin-bottom: -1px
-    padding: 5px
-    // Modifiers
-    &.is-active
-      border-bottom-color: $link-active-border
-      color: $link-active
-  &:not(:last-child)
-    border-bottom: 1px solid $border
-
-.panel-block
-  color: $text-strong
-  display: block
-  line-height: 16px
-  padding: 10px
-  &:not(:last-child)
-    border-bottom: 1px solid $border
-
-a.panel-block
-  &:hover
-    background-color: $background
-
-.panel
-  border: 1px solid $border
-  border-radius: $radius-large
-  &:not(:last-child)
-    margin-bottom: 20px
diff --git a/src/theme/bulma/sass/components/tabs.sass b/src/theme/bulma/sass/components/tabs.sass
deleted file mode 100644
index 5d17df3..0000000
--- a/src/theme/bulma/sass/components/tabs.sass
+++ /dev/null
@@ -1,129 +0,0 @@
-.tabs
-  @extend .block
-  @extend .unselectable
-  align-items: stretch
-  display: flex
-  justify-content: space-between
-  line-height: 24px
-  overflow: hidden
-  overflow-x: auto
-  white-space: nowrap
-  a
-    align-items: center
-    border-bottom: 1px solid $border
-    color: $text
-    display: flex
-    justify-content: center
-    margin-bottom: -1px
-    padding: 6px 12px
-    vertical-align: top
-    &:hover
-      border-bottom-color: $text-strong
-      color: $text-strong
-  li
-    display: block
-    &.is-active
-      a
-        border-bottom-color: $link
-        color: $link
-  ul
-    align-items: center
-    border-bottom: 1px solid $border
-    display: flex
-    flex-grow: 1
-    justify-content: flex-start
-    &.is-left
-      padding-right: 10px
-    &.is-center
-      flex: none
-      justify-content: center
-      padding-left: 10px
-      padding-right: 10px
-    &.is-right
-      justify-content: flex-end
-      padding-left: 10px
-  .icon
-    &:first-child
-      margin-right: 8px
-    &:last-child
-      margin-left: 8px
-  // Alignment
-  &.is-centered
-    ul
-      justify-content: center
-  &.is-right
-    ul
-      justify-content: flex-end
-  // Styles
-  &.is-boxed
-    a
-      border: 1px solid transparent
-      border-radius: $radius $radius 0 0
-      padding-bottom: 5px
-      padding-top: 5px
-      &:hover
-        background-color: $background
-        border-bottom-color: $border
-    li
-      &.is-active
-        a
-          background-color: $white
-          border-color: $border
-          border-bottom-color: transparent !important
-  &.is-fullwidth
-    li
-      flex-grow: 1
-  &.is-toggle
-    a
-      border: 1px solid $border
-      margin-bottom: 0
-      padding-bottom: 5px
-      padding-top: 5px
-      position: relative
-      &:hover
-        background-color: $background
-        border-color: $border-hover
-        z-index: 2
-    li
-      & + li
-        margin-left: -1px
-      &:first-child a
-        border-radius: $radius 0 0 $radius
-      &:last-child a
-        border-radius: 0 $radius $radius 0
-      &.is-active
-        a
-          background-color: $primary
-          border-color: $primary
-          color: $primary-invert
-          z-index: 1
-    ul
-      border-bottom: none
-  // Sizes
-  &.is-small
-    font-size: $size-small
-    a
-      padding: 2px 8px
-    &.is-boxed,
-    &.is-toggle
-      a
-        padding-bottom: 1px
-        padding-top: 1px
-  &.is-medium
-    font-size: $size-medium
-    a
-      padding: 10px 16px
-    &.is-boxed,
-    &.is-toggle
-      a
-        padding-bottom: 9px
-        padding-top: 9px
-  &.is-large
-    font-size: $size-large
-    a
-      padding: 14px 20px
-    &.is-boxed,
-    &.is-toggle
-      a
-        padding-bottom: 13px
-        padding-top: 13px
diff --git a/src/theme/bulma/sass/elements/box.sass b/src/theme/bulma/sass/elements/box.sass
deleted file mode 100644
index b4f9984..0000000
--- a/src/theme/bulma/sass/elements/box.sass
+++ /dev/null
@@ -1,14 +0,0 @@
-.box
-  @extend .block
-  background-color: $white
-  border-radius: $radius-large
-  box-shadow: 0 2px 3px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1)
-  display: block
-  padding: 20px
-
-a.box
-  &:hover,
-  &:focus
-    box-shadow: 0 2px 3px rgba($black, 0.1), 0 0 0 1px $link
-  &:active
-    box-shadow: inset 0 1px 2px rgba($black, 0.2), 0 0 0 1px $link
diff --git a/src/theme/bulma/sass/elements/button.sass b/src/theme/bulma/sass/elements/button.sass
deleted file mode 100644
index 4b5cb6c..0000000
--- a/src/theme/bulma/sass/elements/button.sass
+++ /dev/null
@@ -1,110 +0,0 @@
-=button-small
-  border-radius: $radius-small
-  font-size: 11px
-  height: 24px
-  line-height: 16px
-  padding-left: 6px
-  padding-right: 6px
-=button-medium
-  font-size: 18px
-  height: 40px
-  padding-left: 14px
-  padding-right: 14px
-=button-large
-  font-size: 22px
-  height: 48px
-  padding-left: 20px
-  padding-right: 20px
-
-.button
-  +control
-  @extend .unselectable
-  justify-content: center
-  padding-left: 10px
-  padding-right: 10px
-  text-align: center
-  white-space: nowrap
-  strong
-    color: inherit
-  small
-    display: block
-    font-size: $size-small
-    line-height: 1
-    margin-top: 5px
-  .icon,
-  .tag
-    &:first-child
-      margin-left: -2px
-      margin-right: 4px
-    &:last-child
-      margin-left: 4px
-      margin-right: -2px
-  &:hover,
-  &:focus,
-  &.is-active
-    color: $control-hover
-  &:active
-    box-shadow: inset 0 1px 2px rgba($black, 0.2)
-  // Colors
-  @each $name, $pair in $colors
-    $color: nth($pair, 1)
-    $color-invert: nth($pair, 2)
-    &.is-#{$name}
-      background-color: $color
-      border-color: transparent
-      color: $color-invert
-      &:hover,
-      &:focus,
-      &.is-active
-        background-color: darken($color, 10%)
-        border-color: transparent
-        color: $color-invert
-      &:active
-        border-color: transparent
-      &.is-inverted
-        background-color: $color-invert
-        color: $color
-        &:hover
-          background-color: darken($color-invert, 5%)
-      &.is-loading
-        &:after
-          border-color: transparent transparent $color-invert $color-invert !important
-      &.is-outlined
-        background-color: transparent
-        border-color: $color
-        color: $color
-        &:hover,
-        &:focus
-          background-color: $color
-          border-color: $color
-          color: $color-invert
-  &.is-link
-    background-color: transparent
-    border-color: transparent
-    color: $text
-    text-decoration: underline
-    &:hover,
-    &:focus
-      background-color: $border
-      color: $text-strong
-  // Sizes
-  &.is-small
-    +button-small
-  &.is-medium
-    +button-medium
-  &.is-large
-    +button-large
-  // Modifiers
-  &[disabled],
-  &.is-disabled
-    opacity: 0.5
-  &.is-fullwidth
-    display: flex
-    width: 100%
-  &.is-loading
-    color: transparent !important
-    pointer-events: none
-    &:after
-      @extend .loader
-      +center(16px)
-      position: absolute !important
diff --git a/src/theme/bulma/sass/elements/checkbox.sass b/src/theme/bulma/sass/elements/checkbox.sass
deleted file mode 100644
index d5eb8b5..0000000
--- a/src/theme/bulma/sass/elements/checkbox.sass
+++ /dev/null
@@ -1,59 +0,0 @@
-.checkbox
-  &-input
-    white-space: nowrap
-    cursor: pointer
-    outline: none
-    display: inline-block
-    line-height: 1
-    position: relative
-    vertical-align: middle
-  &-inner
-    display: inline-block
-    position: relative
-    border: 1px solid $grey
-    border-radius: 3px
-    box-sizing: border-box
-    width: 14px
-    height: 14px
-    background-color: #fff
-    z-index: 1
-    transition: all .1s cubic-bezier(.71,-.46,.88,.6)
-    &::after
-      content: ""
-      border: 2px solid #fff
-      border-left: 0
-      border-top: 0
-      height: 8px
-      left: 4px
-      position: absolute
-      top: 1px
-      transform: rotate(45deg) scaleY(0)
-      width: 5px
-      transition: all .2s cubic-bezier(.12,.4,.29,1.46) .1s
-      transform-origin: center
-    &.is-focus,
-    &:not(.is-disabled):hover
-      border-color: $primary
-
-    &.is-checked
-      background-color: $primary
-      border-color: $primary
-      &::after
-        transform: rotate(45deg) scaleY(1)
-    &.is-disabled
-      background-color: $background
-      border-color: $control-border
-      cursor: not-allowed
-      &.is-checked
-        background-color: #D3DCE6
-        border-color: $control-border
-  &-original
-    opacity: 0
-    outline: none
-    position: absolute
-    margin: 0
-    left: -999px
-  &-label
-    padding-left: 2px
-  &+.checkbox
-    margin-left: 8px
diff --git a/src/theme/bulma/sass/elements/content.sass b/src/theme/bulma/sass/elements/content.sass
deleted file mode 100644
index a54203f..0000000
--- a/src/theme/bulma/sass/elements/content.sass
+++ /dev/null
@@ -1,73 +0,0 @@
-.content
-  @extend .block
-  // Inline
-  a:not(.button)
-    border-bottom: 1px solid $border
-    &:visited
-      color: $link-visited
-    &:hover
-      border-bottom-color: $link
-  li + li
-    margin-top: 0.25em
-  // Block
-  blockquote,
-  p,
-  ol,
-  ul
-    &:not(:last-child)
-      margin-bottom: 1em
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6
-    color: $text-strong
-    font-weight: 300
-    line-height: 1.125
-    margin-bottom: 20px
-  h1,
-  h2,
-  h3
-    &:not(:first-child)
-      margin-top: 40px
-  blockquote
-    background-color: $background
-    border-left: 5px solid $border
-    padding: 1.5em
-  h1
-    font-size: 2em
-  h2
-    font-size: 1.75em
-  h3
-    font-size: 1.5em
-  h4
-    font-size: 1.25em
-  h5
-    font-size: 1.125em
-  h6
-    font-size: 1em
-  ol
-    list-style: decimal outside
-    margin-left: 2em
-    margin-right: 2em
-    margin-top: 1em
-  ul
-    list-style: disc outside
-    margin-left: 2em
-    margin-right: 2em
-    margin-top: 1em
-    ul
-      list-style-type: circle
-      margin-top: 0.5em
-      ul
-        list-style-type: square
-  // Sizes
-  &.is-medium
-    font-size: $size-5
-    code
-      font-size: $size-6
-  &.is-large
-    font-size: $size-4
-    code
-      font-size: $size-5
diff --git a/src/theme/bulma/sass/elements/elements.sass b/src/theme/bulma/sass/elements/elements.sass
deleted file mode 100644
index 679ba69..0000000
--- a/src/theme/bulma/sass/elements/elements.sass
+++ /dev/null
@@ -1,16 +0,0 @@
-@charset "utf-8"
-
-@import "box"
-@import "button"
-@import "content"
-@import "form"
-@import "image"
-@import "notification"
-@import "progress"
-@import "table"
-@import "title"
-
-@import "other"
-@import "form-item"
-@import "radio"
-@import "checkbox"
diff --git a/src/theme/bulma/sass/elements/form-item.sass b/src/theme/bulma/sass/elements/form-item.sass
deleted file mode 100644
index d3448b6..0000000
--- a/src/theme/bulma/sass/elements/form-item.sass
+++ /dev/null
@@ -1,34 +0,0 @@
-.form
-  &-item
-    margin-bottom: 24px
-    &-label
-      width: 80px
-      float: left
-      text-align: right
-      vertical-align: middle
-      padding: 9px 12px 9px 0
-      box-sizing: border-box
-      line-height: 1
-
-      &::after
-        content: ":"
-        margin: 0 8px 0 2px
-        position: relative
-        top: -0.5px
-      &.is-required:before
-        display: inline-block
-        margin-right: 4px
-        content: "*"
-        font-family: SimSun
-        font-size: 12px
-        color: $red
-    &-control
-      margin-left: 80px
-      .radio-group,
-      .checkbox-group
-        padding-top: 9px
-  &-inline
-    .form-item
-      display: inline-block
-    .form-item-control
-      margin-left: 0
diff --git a/src/theme/bulma/sass/elements/form.sass b/src/theme/bulma/sass/elements/form.sass
deleted file mode 100644
index 114b1a4..0000000
--- a/src/theme/bulma/sass/elements/form.sass
+++ /dev/null
@@ -1,256 +0,0 @@
-=form-control
-  +control
-  @each $name, $pair in $colors
-    $color: nth($pair, 1)
-    &.is-#{$name}
-      border-color: $color
-
-.input
-  +form-control
-  box-shadow: inset 0 1px 2px rgba($black, 0.1)
-  max-width: 100%
-  width: 100%
-  &[type="search"]
-    border-radius: 290486px
-  // Sizes
-  &.is-small
-    +control-small
-  &.is-medium
-    +control-medium
-  &.is-large
-    +control-large
-  // Modifiers
-  &.is-fullwidth
-    display: block
-    width: 100%
-  &.is-inline
-    display: inline
-    width: auto
-  &-prepend
-    @extend .input
-    color: rgba($control, 0.6)
-
-.textarea
-  @extend .input
-  display: block
-  line-height: 1.2
-  max-height: 600px
-  max-width: 100%
-  min-height: 120px
-  min-width: 100%
-  padding: 10px
-  resize: vertical
-
-%control-with-element
-  cursor: pointer
-  display: inline-block
-  line-height: 16px
-  position: relative
-  vertical-align: top
-  input
-    cursor: pointer
-  &:hover
-    color: $control-hover
-  &.is-disabled
-    color: $text-light
-    pointer-events: none
-    input
-      pointer-events: none
-
-.checkbox
-  @extend %control-with-element
-
-.radio
-  @extend %control-with-element
-  & + .radio
-    margin-left: 10px
-
-.select
-  display: inline-block
-  height: 32px
-  position: relative
-  vertical-align: top
-  select
-    +form-control
-    cursor: pointer
-    display: block
-    outline: none
-    padding-right: 36px
-    &:hover
-      border-color: $control-hover-border
-    &::ms-expand
-      display: none
-  &.is-fullwidth
-    width: 100%
-    select
-      width: 100%
-  &:after
-    +arrow($link)
-    margin-top: -6px
-    right: 16px
-    top: 50%
-  &:hover
-    &:after
-      border-color: $link-hover
-  &.is-small
-    height: 24px
-    select
-      +control-small
-      padding-right: 28px
-  &.is-medium
-    height: 40px
-    select
-      +control-medium
-      padding-right: 44px
-  &.is-large
-    height: 48px
-    select
-      +control-large
-      padding-right: 52px
-
-.label
-  color: $text-strong
-  display: block
-  font-weight: bold
-  &:not(:last-child)
-    margin-bottom: 5px
-
-.help
-  display: block
-  font-size: $size-small
-  margin-top: 5px
-  @each $name, $pair in $colors
-    $color: nth($pair, 1)
-    &.is-#{$name}
-      color: $color
-
-// Containers
-
-.control-label
-  +mobile
-    margin-bottom: 5px
-  +tablet
-    flex-grow: 1
-    margin-right: 20px
-    padding-top: 7px
-    text-align: right
-
-.control
-  position: relative
-  text-align: left
-  &:not(:last-child)
-    margin-bottom: 10px
-  // Modifiers
-  &.has-addons
-    display: flex
-    justify-content: flex-start
-    .button,
-    .input,
-    .input-prepend,
-    .select
-      border-radius: 0
-      margin-right: -1px
-      width: auto
-      &:hover
-        z-index: 2
-      &:active,
-      &:focus
-        z-index: 3
-      &:first-child
-        border-radius: $radius 0 0 $radius
-        select
-          border-radius: $radius 0 0 $radius
-      &:last-child
-        border-radius: 0 $radius $radius 0
-        select
-          border-radius: 0 $radius $radius 0
-      &.is-expanded
-        flex-grow: 1
-    &.has-addons-centered
-      justify-content: center
-    &.has-addons-right
-      justify-content: flex-end
-    &.has-addons-fullwidth
-      .button,
-      .input,
-      .select
-        flex-grow: 1
-  &.has-icon
-    & > .fa
-      +fa(14px, 24px)
-      color: $text-light
-      pointer-events: none
-      position: absolute
-      top: 4px
-      z-index: 4
-    .input
-      &:focus + .fa
-        color: $text-strong
-      &.is-small + .fa
-        font-size: 10.5px
-        top: 0
-      &.is-medium + .fa
-        font-size: 21px
-        top: 8px
-      &.is-large + .fa
-        font-size: 21px
-        top: 12px
-    &:not(.has-icon-right)
-      & > .fa
-        left: 4px
-      .input
-        padding-left: 32px
-        &.is-small
-          padding-left: 24px
-          & + .fa
-            left: 0
-        &.is-medium
-          padding-left: 40px
-          & + .fa
-            left: 8px
-        &.is-large
-          padding-left: 48px
-          & + .fa
-            left: 12px
-    &.has-icon-right
-      & > .fa
-        right: 4px
-      .input
-        padding-right: 32px
-        &.is-small
-          padding-right: 24px
-          & + .fa
-            right: 0
-        &.is-medium
-          padding-right: 40px
-          & + .fa
-            right: 8px
-        &.is-large
-          padding-right: 48px
-          & + .fa
-            right: 12px
-  &.is-grouped
-    display: flex
-    justify-content: flex-start
-    & > .control
-      &:not(:last-child)
-        margin-bottom: 0
-        margin-right: 10px
-      &.is-expanded
-        flex-grow: 1
-    &.is-grouped-centered
-      justify-content: center
-    &.is-grouped-right
-      justify-content: flex-end
-  &.is-horizontal
-    +tablet
-      display: flex
-      & > .control
-        display: flex
-        flex-grow: 5
-  &.is-loading
-    &:after
-      @extend .loader
-      position: absolute !important
-      right: 8px
-      top: 8px
diff --git a/src/theme/bulma/sass/elements/image.sass b/src/theme/bulma/sass/elements/image.sass
deleted file mode 100644
index cc27b44..0000000
--- a/src/theme/bulma/sass/elements/image.sass
+++ /dev/null
@@ -1,36 +0,0 @@
-$dimensions: 16 24 32 48 64 96 128
-
-.image
-  display: block
-  position: relative
-  img
-    display: block
-    height: auto
-    width: 100%
-  // Ratio
-  &.is-square,
-  &.is-1by1,
-  &.is-4by3,
-  &.is-3by2,
-  &.is-16by9,
-  &.is-2by1
-    img
-      +overlay
-      height: 100%
-      width: 100%
-  &.is-square,
-  &.is-1by1
-    padding-top: 100%
-  &.is-4by3
-    padding-top: 75%
-  &.is-3by2
-    padding-top: 66.6666%
-  &.is-16by9
-    padding-top: 56.25%
-  &.is-2by1
-    padding-top: 50%
-  // Sizes
-  @each $dimension in $dimensions
-    &.is-#{$dimension}x#{$dimension}
-      height: $dimension * 1px
-      width: $dimension * 1px
diff --git a/src/theme/bulma/sass/elements/notification.sass b/src/theme/bulma/sass/elements/notification.sass
deleted file mode 100644
index 63d1739..0000000
--- a/src/theme/bulma/sass/elements/notification.sass
+++ /dev/null
@@ -1,21 +0,0 @@
-.notification
-  @extend .block
-  +clearfix
-  background-color: $background
-  border-radius: $radius
-  padding: 16px 20px
-  position: relative
-  .delete
-    border-radius: 0 $radius
-    float: right
-    margin: -16px -20px 0 20px
-  .subtitle,
-  .title
-    color: inherit
-  // Colors
-  @each $name, $pair in $colors
-    $color: nth($pair, 1)
-    $color-invert: nth($pair, 2)
-    &.is-#{$name}
-      background-color: $color
-      color: $color-invert
diff --git a/src/theme/bulma/sass/elements/other.sass b/src/theme/bulma/sass/elements/other.sass
deleted file mode 100644
index 5101872..0000000
--- a/src/theme/bulma/sass/elements/other.sass
+++ /dev/null
@@ -1,187 +0,0 @@
-.delete
-  @extend .unselectable
-  -moz-appearance: none
-  -webkit-appearance: none
-  background-color: rgba($black, 0.2)
-  border: none
-  border-radius: 290486px
-  cursor: pointer
-  display: inline-block
-  height: 24px
-  position: relative
-  vertical-align: top
-  width: 24px
-  &:before,
-  &:after
-    background-color: $white
-    content: ""
-    display: block
-    height: 2px
-    left: 50%
-    margin-left: -25%
-    margin-top: -1px
-    position: absolute
-    top: 50%
-    width: 50%
-  &:before
-    transform: rotate(45deg)
-  &:after
-    transform: rotate(-45deg)
-  &:hover
-    background-color: rgba($black, 0.5)
-  // Sizes
-  &.is-small
-    height: 16px
-    width: 16px
-  &.is-medium
-    height: 32px
-    width: 32px
-  &.is-large
-    height: 40px
-    width: 40px
-
-.icon
-  +fa(21px, 24px)
-  .fa
-    font-size: inherit
-    line-height: inherit
-  // Sizes
-  &.is-small
-    +fa(14px, 16px)
-  &.is-medium
-    +fa(28px, 32px)
-  &.is-large
-    +fa(42px, 48px)
-
-.hamburger
-  cursor: pointer
-  display: block
-  height: $nav-height
-  position: relative
-  width: $nav-height
-  span
-    background-color: $text
-    display: block
-    height: 1px
-    left: 50%
-    margin-left: -7px
-    position: absolute
-    top: 50%
-    transition: none $speed $easing
-    transition-property: background, left, opacity, transform
-    width: 15px
-    &:nth-child(1)
-      margin-top: -6px
-    &:nth-child(2)
-      margin-top: -1px
-    &:nth-child(3)
-      margin-top: 4px
-  &:hover
-    background-color: $background
-  // Modifers
-  &.is-active
-    span
-      background-color: $link
-      &:nth-child(1)
-        margin-left: -5px
-        transform: rotate(45deg)
-        transform-origin: left top
-      &:nth-child(2)
-        opacity: 0
-      &:nth-child(3)
-        margin-left: -5px
-        transform: rotate(-45deg)
-        transform-origin: left bottom
-
-.heading
-  display: block
-  font-size: 11px
-  letter-spacing: 1px
-  margin-bottom: 5px
-  text-transform: uppercase
-
-.highlight
-  @extend .block
-  font-size: 12px
-  font-weight: normal
-  max-width: 100%
-  overflow: hidden
-  padding: 0
-  pre
-    overflow: auto
-    max-width: 100%
-
-.loader
-  animation: spin-around 500ms infinite linear
-  border: 2px solid $border
-  border-radius: 290486px
-  border-right-color: transparent
-  border-top-color: transparent
-  content: ""
-  display: block
-  height: 16px
-  position: relative
-  width: 16px
-
-.number
-  background-color: $background
-  border-radius: 290486px
-  display: inline-block
-  font-size: $size-medium
-  vertical-align: top
-
-.tag
-  align-items: center
-  background-color: $background
-  border-radius: 290486px
-  color: $text
-  display: inline-flex
-  font-size: 12px
-  height: 24px
-  justify-content: center
-  line-height: 16px
-  padding-left: 10px
-  padding-right: 10px
-  vertical-align: top
-  white-space: nowrap
-  .delete
-    margin-left: 4px
-    margin-right: -6px
-  &:not(.is-large)
-    .delete
-      @extend .delete.is-small
-  // Colors
-  @each $name, $pair in $colors
-    $color: nth($pair, 1)
-    $color-invert: nth($pair, 2)
-    &.is-#{$name}
-      background-color: $color
-      color: $color-invert
-  // Sizes
-  &.is-small
-    font-size: $size-small
-    height: 20px
-    padding-left: 8px
-    padding-right: 8px
-  &.is-medium
-    font-size: $size-normal
-    height: 32px
-    padding-left: 14px
-    padding-right: 14px
-  &.is-large
-    font-size: $size-5
-    height: 40px
-    line-height: 24px
-    padding-left: 18px
-    padding-right: 18px
-    .delete
-      margin-left: 4px
-      margin-right: -8px
-
-.unselectable
-  -webkit-touch-callout: none
-  -webkit-user-select: none
-  -moz-user-select: none
-  -ms-user-select: none
-  user-select: none
-
diff --git a/src/theme/bulma/sass/elements/progress.sass b/src/theme/bulma/sass/elements/progress.sass
deleted file mode 100644
index bfaeaa6..0000000
--- a/src/theme/bulma/sass/elements/progress.sass
+++ /dev/null
@@ -1,32 +0,0 @@
-.progress
-  @extend .block
-  -moz-appearance: none
-  -webkit-appearance: none
-  border: none
-  border-radius: 290486px
-  display: block
-  height: 12px
-  overflow: hidden
-  padding: 0
-  width: 100%
-  &::-webkit-progress-bar
-    background-color: $border
-  &::-webkit-progress-value
-    background-color: $text
-  &::-moz-progress-bar
-    background-color: $text
-  // Colors
-  @each $name, $pair in $colors
-    $color: nth($pair, 1)
-    &.is-#{$name}
-      &::-webkit-progress-value
-        background-color: $color
-      &::-moz-progress-bar
-        background-color: $color
-  // Sizes
-  &.is-small
-    height: 8px
-  &.is-medium
-    height: 16px
-  &.is-large
-    height: 20px
diff --git a/src/theme/bulma/sass/elements/radio.sass b/src/theme/bulma/sass/elements/radio.sass
deleted file mode 100644
index e547aaa..0000000
--- a/src/theme/bulma/sass/elements/radio.sass
+++ /dev/null
@@ -1,68 +0,0 @@
-.radio
-  &-input
-    white-space: nowrap
-    cursor: pointer
-    outline: none
-    display: inline-block
-    line-height: 1
-    position: relative
-    vertical-align: middle
-  &-inner
-    border: 1px solid $grey
-    background-color: #fff
-    width: 14px
-    height: 14px
-    border-radius: 14px
-    position: relative
-    cursor: pointer
-    display: inline-block
-    box-sizing: border-box
-    &::after
-      width: 6px
-      height: 6px
-      border-radius: 6px
-      background-color: $primary
-      content: ""
-      position: absolute
-      left: 3px
-      top: 3px
-      border-top: 0
-      border-left: 0
-      opacity: 0
-      display: table
-      transform: scale(0)
-      transition: all .2s cubic-bezier(.78,.14,.15,.86)
-    &.is-focus,
-    &:not(.is-disabled):hover
-      border-color: $primary
-
-    &.is-disabled
-      background-color: #f3f3f3
-      border-color: #d9d9d9
-      cursor: not-allowed
-      &::after
-        background-color: #ccc
-      &.is-checked
-        &::after
-          background-color: #ccc
-
-    &.is-checked
-      &::after
-        background-color: $primary
-        opacity: 1
-        transform: scale(1)
-        transition: all .2s cubic-bezier(.78,.14,.15,.86)
-
-  &-label
-    padding-left: 5px
-
-  &-original
-    opacity: 0
-    outline: none
-    position: absolute
-    z-index: -1
-    top: 0
-    left: 0
-    right: 0
-    bottom: 0
-    margin: 0
diff --git a/src/theme/bulma/sass/elements/table.sass b/src/theme/bulma/sass/elements/table.sass
deleted file mode 100644
index 9984df0..0000000
--- a/src/theme/bulma/sass/elements/table.sass
+++ /dev/null
@@ -1,91 +0,0 @@
-.table
-  background-color: $white
-  color: $text-strong
-  margin-bottom: 20px
-  width: 100%
-  td,
-  th
-    border: 1px solid $border
-    border-width: 0 0 1px
-    padding: 8px 10px
-    vertical-align: top
-    // Modifiers
-    &.is-icon
-      padding: 5px
-      text-align: center
-      white-space: nowrap
-      width: 1%
-      .fa
-        +fa(21px, 24px)
-      &.is-link
-        padding: 0
-        & > a
-          padding: 5px
-    &.is-link
-      padding: 0
-      & > a
-        display: block
-        padding: 8px 10px
-        &:hover
-          background-color: $link
-          color: $link-invert
-    &.is-narrow
-      white-space: nowrap
-      width: 1%
-  th
-    color: $text-strong
-    text-align: left
-  tr
-    &:hover
-      background-color: $background
-      color: $text-strong
-  thead
-    td,
-    th
-      border-width: 0 0 2px
-      color: $text-light
-  tbody
-    tr
-      &:last-child
-        td,
-        th
-          border-bottom-width: 0
-  tfoot
-    td,
-    th
-      border-width: 2px 0 0
-      color: $text-light
-  // Modifiers
-  &.is-bordered
-    td,
-    th
-      border-width: 1px
-    tr
-      &:last-child
-        td,
-        th
-          border-bottom-width: 1px
-  &.is-narrow
-    td,
-    th
-      padding: 5px 10px
-      // Modifiers
-      &.is-icon
-        padding: 2px
-        &.is-link
-          padding: 0
-          & > a
-            padding: 2px
-      &.is-link
-        padding: 0
-        & > a
-          padding: 5px 10px
-  &.is-striped
-    tbody
-      tr
-        &:hover
-          background-color: darken($background, 2%)
-        &:nth-child(2n)
-          background-color: $background
-          &:hover
-            background-color: darken($background, 2%)
diff --git a/src/theme/bulma/sass/elements/title.sass b/src/theme/bulma/sass/elements/title.sass
deleted file mode 100644
index 3f2f26d..0000000
--- a/src/theme/bulma/sass/elements/title.sass
+++ /dev/null
@@ -1,72 +0,0 @@
-.title,
-.subtitle
-  @extend .block
-  font-weight: $weight-title-normal
-  word-break: break-word
-  em,
-  span
-    font-weight: $weight-title-normal
-  a
-    &:hover
-      border-bottom: 1px solid
-  strong
-    font-weight: $weight-title-bold
-  .tag
-    vertical-align: bottom
-
-.title
-  color: $text-strong
-  font-size: $size-large
-  line-height: 1
-  code
-    display: inline-block
-    font-size: $size-large
-  strong
-    color: inherit
-  & + .highlight
-    margin-top: -10px
-  & + .subtitle
-    margin-top: -10px
-  // Colors
-  @each $size in $sizes
-    $i: index($sizes, $size)
-    &.is-#{$i}
-      font-size: $size
-      code
-        font-size: nth($sizes, min($i + 1, 6))
-  // Modifiers
-  &.is-normal
-    font-weight: 400
-    strong
-      font-weight: 700
-  // Responsiveness
-  +tablet
-    & + .subtitle
-      margin-top: -15px
-
-.subtitle
-  color: $text
-  font-size: $size-medium
-  line-height: 1.125
-  code
-    border-radius: $radius
-    display: inline-block
-    font-size: $size-normal
-    padding: 2px 3px
-    vertical-align: top
-  strong
-    color: $text-strong
-  & + .title
-    margin-top: -20px
-  // Colors
-  @each $size in $sizes
-    $i: index($sizes, $size)
-    &.is-#{$i}
-      font-size: $size
-      code
-        font-size: nth($sizes, min($i + 1, 6))
-  // Modifiers
-  &.is-normal
-    font-weight: 400
-    strong
-      font-weight: 700
diff --git a/src/theme/bulma/sass/layout/footer.sass b/src/theme/bulma/sass/layout/footer.sass
deleted file mode 100644
index 3291936..0000000
--- a/src/theme/bulma/sass/layout/footer.sass
+++ /dev/null
@@ -1,13 +0,0 @@
-.footer
-  background-color: $background
-  padding: 40px 20px 80px
-  a
-    &,
-    &:visited
-      color: $text
-      &:hover
-        color: $text-strong
-      &:not(.icon)
-        border-bottom: 1px solid $border
-        &:hover
-          border-bottom-color: $link
diff --git a/src/theme/bulma/sass/layout/hero.sass b/src/theme/bulma/sass/layout/hero.sass
deleted file mode 100644
index 1ab13ed..0000000
--- a/src/theme/bulma/sass/layout/hero.sass
+++ /dev/null
@@ -1,146 +0,0 @@
-// Components
-
-.hero-video
-  +overlay
-  overflow: hidden
-  video
-    left: 50%
-    min-height: 100%
-    min-width: 100%
-    position: absolute
-    top: 50%
-    transform: translate3d(-50%, -50%, 0)
-  // Modifiers
-  &.is-transparent
-    opacity: 0.3
-  // Responsiveness
-  +mobile
-    display: none
-
-.hero-buttons
-  margin-top: 20px
-  // Responsiveness
-  +mobile
-    .button
-      display: flex
-      &:not(:last-child)
-        margin-bottom: 10px
-  +tablet
-    display: flex
-    justify-content: center
-    .button:not(:last-child)
-      margin-right: 20px
-
-// Containers
-
-.hero-head,
-.hero-foot
-  flex-shrink: 0
-
-.hero-body
-  flex-grow: 1
-  padding: 40px 20px
-  // Responsiveness
-  +desktop
-    padding-left: 0
-    padding-right: 0
-
-// Main container
-
-.hero
-  align-items: stretch
-  background-color: $white
-  display: flex
-  flex-direction: column
-  justify-content: space-between
-  .nav
-    background: none
-    box-shadow: 0 1px 0 rgba($border, 0.3)
-  .tabs
-    ul
-      border-bottom: none
-  // Colors
-  @each $name, $pair in $colors
-    $color: nth($pair, 1)
-    $color-invert: nth($pair, 2)
-    &.is-#{$name}
-      background-color: $color
-      color: $color-invert
-      .title
-        color: $color-invert
-        a,
-        strong
-          color: inherit
-      .subtitle
-        color: rgba($color-invert, 0.7)
-        a,
-        strong
-          color: $color-invert
-      .nav
-        box-shadow: 0 1px 0 rgba($color-invert, 0.2)
-      .nav-menu
-        +mobile
-          background-color: $color
-      a.nav-item,
-      .nav-item a:not(.button)
-        color: rgba($color-invert, 0.5)
-        &:hover,
-        &.is-active
-          color: $color-invert
-      .tabs
-        a
-          color: $color-invert
-          opacity: 0.5
-          &:hover
-            opacity: 1
-        li
-          &.is-active a
-            opacity: 1
-        &.is-boxed,
-        &.is-toggle
-          a
-            color: $color-invert
-            &:hover
-              background-color: rgba($black, 0.1)
-          li.is-active a
-            &,
-            &:hover
-              background-color: $color-invert
-              border-color: $color-invert
-              color: $color
-      // Modifiers
-      &.is-bold
-        $gradient-top-left: darken(saturate(adjust-hue($color, -10deg), 10%), 10%)
-        $gradient-bottom-right: lighten(saturate(adjust-hue($color, 10deg), 5%), 5%)
-        background-image: linear-gradient(141deg, $gradient-top-left 0%, $color 71%, $gradient-bottom-right 100%)
-      // Responsiveness
-      +mobile
-        .nav-toggle
-          span
-            background-color: $color-invert
-          &:hover
-            background-color: rgba($black, 0.1)
-          &.is-active
-            span
-              background-color: $color-invert
-        .nav-menu
-          .nav-item
-            border-top-color: rgba($color-invert, 0.2)
-  // Sizes
-  &.is-medium
-    +tablet
-      .hero-body
-        padding-bottom: 120px
-        padding-top: 120px
-  &.is-large
-    +tablet
-      .hero-body
-        padding-bottom: 240px
-        padding-top: 240px
-  &.is-fullheight
-    min-height: 100vh
-    .hero-body
-      align-items: center
-      display: flex
-      & > .container
-        flex-grow: 1
diff --git a/src/theme/bulma/sass/layout/layout.sass b/src/theme/bulma/sass/layout/layout.sass
deleted file mode 100644
index 8792926..0000000
--- a/src/theme/bulma/sass/layout/layout.sass
+++ /dev/null
@@ -1,5 +0,0 @@
-@charset "utf-8"
-
-@import "hero"
-@import "section"
-@import "footer"
diff --git a/src/theme/bulma/sass/layout/section.sass b/src/theme/bulma/sass/layout/section.sass
deleted file mode 100644
index 95b74d0..0000000
--- a/src/theme/bulma/sass/layout/section.sass
+++ /dev/null
@@ -1,10 +0,0 @@
-.section
-  background-color: $white
-  padding: 40px 20px
-  // Responsiveness
-  +desktop
-    // Sizes
-    &.is-medium
-      padding: 120px 20px
-    &.is-large
-      padding: 240px 20px
diff --git a/src/theme/bulma/sass/utilities/animations.sass b/src/theme/bulma/sass/utilities/animations.sass
deleted file mode 100644
index fd0ea4d..0000000
--- a/src/theme/bulma/sass/utilities/animations.sass
+++ /dev/null
@@ -1,5 +0,0 @@
-@keyframes spin-around
-  from
-    transform: rotate(0deg)
-  to
-    transform: rotate(359deg)
diff --git a/src/theme/bulma/sass/utilities/controls.sass b/src/theme/bulma/sass/utilities/controls.sass
deleted file mode 100644
index 28b77c1..0000000
--- a/src/theme/bulma/sass/utilities/controls.sass
+++ /dev/null
@@ -1,52 +0,0 @@
-=control
-  -moz-appearance: none
-  -webkit-appearance: none
-  align-items: center
-  background-color: $control-background
-  border: 1px solid $control-border
-  border-radius: $radius
-  color: $control
-  display: inline-flex
-  font-size: $size-normal
-  height: 32px
-  justify-content: flex-start
-  line-height: 24px
-  padding-left: 8px
-  padding-right: 8px
-  position: relative
-  vertical-align: top
-  &:hover
-    border-color: $control-hover-border
-  &:active,
-  &:focus,
-  &.is-active
-    border-color: $control-active-border
-    outline: none
-  &[disabled],
-  &.is-disabled
-    background-color: $background
-    border-color: $control-border
-    cursor: not-allowed
-    pointer-events: none
-    +placeholder
-      color: rgba($control, 0.3)
-
-=control-small
-  border-radius: $radius-small
-  font-size: 11px
-  height: 24px
-  line-height: 16px
-  padding-left: 6px
-  padding-right: 6px
-=control-medium
-  font-size: 18px
-  height: 40px
-  line-height: 32px
-  padding-left: 10px
-  padding-right: 10px
-=control-large
-  font-size: 24px
-  height: 48px
-  line-height: 40px
-  padding-left: 12px
-  padding-right: 12px
diff --git a/src/theme/bulma/sass/utilities/functions.sass b/src/theme/bulma/sass/utilities/functions.sass
deleted file mode 100644
index 661a72c..0000000
--- a/src/theme/bulma/sass/utilities/functions.sass
+++ /dev/null
@@ -1,34 +0,0 @@
-@function powerNumber($number, $exp)
-  $value: 1
-  @if $exp > 0
-    @for $i from 1 through $exp
-      $value: $value * $number
-  @else if $exp < 0
-    @for $i from 1 through -$exp
-      $value: $value / $number
-  @return $value
-
-@function colorLuminance($color)
-  $color-rgb: ('red': red($color),'green': green($color),'blue': blue($color))
-  @each $name, $value in $color-rgb
-    $adjusted: 0
-    $value: $value / 255
-    @if $value < 0.03928
-      $value: $value / 12.92
-    @else
-      $value: ($value + .055) / 1.055
-      $value: powerNumber($value, 2)
-    $color-rgb: map-merge($color-rgb, ($name: $value))
-  @return (map-get($color-rgb, 'red') * .2126) + (map-get($color-rgb, 'green') * .7152) + (map-get($color-rgb, 'blue') * .0722)
-
-@function closestEvenNumber($number)
-  @if ($number % 2 == 0px)
-    @return $number
-  @else
-    @return ($number + 1px)
-
-@function findColorInvert($color)
-  @if (colorLuminance($color) > 0.8)
-    @return rgba($black, 0.5)
-  @else
-    @return white
diff --git a/src/theme/bulma/sass/utilities/mixins.sass b/src/theme/bulma/sass/utilities/mixins.sass
deleted file mode 100644
index e15c806..0000000
--- a/src/theme/bulma/sass/utilities/mixins.sass
+++ /dev/null
@@ -1,94 +0,0 @@
-=arrow($color)
-  border: 1px solid $color
-  border-right: 0
-  border-top: 0
-  content: " "
-  display: block
-  height: 7px
-  pointer-events: none
-  position: absolute
-  transform: rotate(-45deg)
-  width: 7px
-
-=clearfix
-  &:after
-    clear: both
-    content: " "
-    display: table
-
-=center($size)
-  left: 50%
-  margin-left: -($size / 2)
-  margin-top: -($size / 2)
-  position: absolute
-  top: 50%
-
-=fa($size, $dimensions)
-  display: inline-block
-  font-size: $size
-  height: $dimensions
-  line-height: $dimensions
-  text-align: center
-  vertical-align: top
-  width: $dimensions
-
-=overlay($offset: 0)
-  bottom: $offset
-  left: $offset
-  position: absolute
-  right: $offset
-  top: $offset
-
-=placeholder
-  $placeholders: ':-moz' ':-webkit-input' '-moz' '-ms-input'
-  @each $placeholder in $placeholders
-    &:#{$placeholder}-placeholder
-      @content
-
-=replace($background, $width, $height)
-  background-color: $background
-  background-position: center center
-  background-repeat: no-repeat
-  background-size: $width $height
-  display: block
-  height: $height
-  outline: none
-  overflow: hidden
-  text-indent: -290486px
-  width: $width
-
-=from($device)
-  @media screen and (min-width: $device)
-    @content
-
-=until($device)
-  @media screen and (max-width: $device - 1px)
-    @content
-
-=mobile
-  @media screen and (max-width: $tablet - 1px)
-    @content
-
-=tablet
-  @media screen and (min-width: $tablet)
-    @content
-
-=tablet-only
-  @media screen and (min-width: $tablet) and (max-width: $desktop - 1px)
-    @content
-
-=touch
-  @media screen and (max-width: $desktop - 1px)
-    @content
-
-=desktop
-  @media screen and (min-width: $desktop)
-    @content
-
-=desktop-only
-  @media screen and (min-width: $desktop) and (max-width: $widescreen - 1px)
-    @content
-
-=widescreen
-  @media screen and (min-width: $widescreen)
-    @content
diff --git a/src/theme/bulma/sass/utilities/reset.sass b/src/theme/bulma/sass/utilities/reset.sass
deleted file mode 100644
index 26bf286..0000000
--- a/src/theme/bulma/sass/utilities/reset.sass
+++ /dev/null
@@ -1,174 +0,0 @@
-//
-//  HTML5 Reset :: style.css
-//  ----------------------------------------------------------
-//  We have learned much from/been inspired by/taken code where offered from:
-//
-//  Eric Meyer          :: http://meyerweb.com
-//  HTML5 Doctor        :: http://html5doctor.com
-//  and the HTML5 Boilerplate :: http://html5boilerplate.com
-//
-//-------------------------------------------------------------------------------
-
-// Let's default this puppy out
-
-html, body, body div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figure, footer, header, menu, nav, section, time, mark, audio, video, details, summary
-  margin: 0
-  padding: 0
-  border: 0
-  font-size: 100%
-  font-weight: normal
-  vertical-align: baseline
-  background: transparent
-
-article, aside, figure, footer, header, nav, section, details, summary
-  display: block
-
-// Handle box-sizing while better addressing child elements:
-// http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/
-html
-  box-sizing: border-box
-
-*,
-*:before,
-*:after
-  box-sizing: inherit
-
-// consider resetting the default cursor: https://gist.github.com/murtaugh/5247154
-
-// Responsive images and other embedded objects
-img,
-object,
-embed
-  max-width: 100%
-
-//
-//   Note: keeping IMG here will cause problems if you're using foreground images as sprites.
-//   In fact, it *will* cause problems with Google Maps' controls at small size.
-//  If this is the case for you, try uncommenting the following:
-//
-//#map img {
-//    max-width: none;
-//}
-
-// force a vertical scrollbar to prevent a jumpy page
-html
-  overflow-y: scroll
-
-// we use a lot of ULs that aren't bulleted.
-//  don't forget to restore the bullets within content.
-ul
-  list-style: none
-
-blockquote, q
-  quotes: none
-
-blockquote:before,
-blockquote:after,
-q:before,
-q:after
-  content: ''
-  content: none
-
-a
-  margin: 0
-  padding: 0
-  font-size: 100%
-  vertical-align: baseline
-  background: transparent
-
-del
-  text-decoration: line-through
-
-abbr[title], dfn[title]
-  border-bottom: 1px dotted #000
-  cursor: help
-
-// tables still need cellspacing="0" in the markup
-table
-  border-collapse: collapse
-  border-spacing: 0
-
-th
-  font-weight: bold
-  vertical-align: bottom
-
-td
-  font-weight: normal
-  vertical-align: top
-
-hr
-  display: block
-  height: 1px
-  border: 0
-  border-top: 1px solid #ccc
-  margin: 1em 0
-  padding: 0
-
-input, select
-  vertical-align: middle
-
-pre
-  white-space: pre
-  // CSS2
-  white-space: pre-wrap
-  // CSS 2.1
-  white-space: pre-line
-  // CSS 3 (and 2.1 as well, actually)
-  word-wrap: break-word
-  // IE
-
-input[type="radio"]
-  vertical-align: text-bottom
-
-input[type="checkbox"]
-  vertical-align: bottom
-
-select, input, textarea
-  font: 99% sans-serif
-
-table
-  font-size: inherit
-  font: 100%
-
-small
-  font-size: 85%
-
-strong
-  font-weight: bold
-
-td, td img
-  vertical-align: top
-
-// Make sure sup and sub don't mess with your line-heights http://gist.github.com/413930
-sub, sup
-  font-size: 75%
-  line-height: 0
-  position: relative
-
-sup
-  top: -0.5em
-
-sub
-  bottom: -0.25em
-
-// standardize any monospaced elements
-pre, code, kbd, samp
-  font-family: monospace, sans-serif
-
-// hand cursor on clickable elements
-label,
-input[type=button],
-input[type=submit],
-input[type=file],
-button
-  cursor: pointer
-
-// Webkit browsers add a 2px margin outside the chrome of form elements
-button, input, select, textarea
-  margin: 0
-
-// make buttons play nice in IE
-button,
-input[type=button]
-  width: auto
-  overflow: visible
diff --git a/src/theme/bulma/sass/utilities/utilities.sass b/src/theme/bulma/sass/utilities/utilities.sass
deleted file mode 100644
index 75cda48..0000000
--- a/src/theme/bulma/sass/utilities/utilities.sass
+++ /dev/null
@@ -1,8 +0,0 @@
-@charset "utf-8"
-
-@import "reset"
-@import "functions"
-@import "mixins"
-@import "animations"
-@import "controls"
-@import "variables"
diff --git a/src/theme/bulma/sass/utilities/variables.sass b/src/theme/bulma/sass/utilities/variables.sass
deleted file mode 100644
index 3a46643..0000000
--- a/src/theme/bulma/sass/utilities/variables.sass
+++ /dev/null
@@ -1,153 +0,0 @@
-// 1. Initial variables
-
-// Colors
-
-$black: #111 !default
-$grey-darker: #222324 !default
-$grey-dark: #69707a !default
-$grey: #aeb1b5 !default
-$grey-light: #d3d6db !default
-$grey-lighter: #f5f7fa !default
-$white: #fff !default
-
-$blue: #42afe3 !default
-$green: #97cd76 !default
-$orange: #f68b39 !default
-$purple: #847bb9 !default
-$red: #ed6c63 !default
-$turquoise: #1fc8db !default
-$yellow: #fce473 !default
-
-// Typography
-
-$family-sans-serif: "Helvetica Neue", "Helvetica", "Arial", sans-serif !default
-$family-monospace: "Source Code Pro", "Monaco", "Inconsolata", monospace !default
-
-$size-1: 48px !default
-$size-2: 40px !default
-$size-3: 28px !default
-$size-4: 24px !default
-$size-5: 18px !default
-$size-6: 14px !default
-
-$size-7: 11px !default
-
-$weight-normal: 400 !default
-$weight-bold: 700 !default
-$weight-title-normal: 300 !default
-$weight-title-bold: 500 !default
-
-// Breakpoints
-
-$tablet: 769px !default
-$desktop: 980px !default
-$widescreen: 1180px !default
-
-// Dimensions
-
-$column-gap: 20px !default
-
-$nav-height: 50px !default
-
-// Miscellaneous
-
-$easing: ease-out !default
-$radius-small: 2px !default
-$radius: 3px !default
-$radius-large: 5px !default
-$speed: 86ms !default
-
-// 2. Primary colors
-
-$primary: $blue !default
-
-$info: $turquoise !default
-$success: $green !default
-$warning: $yellow !default
-$danger: $red !default
-
-$light: $grey-lighter !default
-$dark: $grey-dark !default
-
-$text: $grey-dark !default
-
-// 3. Generated variables
-
-// Invert colors
-
-$primary-invert: findColorInvert($primary) !default
-
-$info-invert: findColorInvert($info) !default
-$success-invert: findColorInvert($success) !default
-$warning-invert: findColorInvert($warning) !default
-$danger-invert: findColorInvert($danger) !default
-
-$light-invert: $dark !default
-$dark-invert: $light !default
-
-// General colors
-
-$body-background: $grey-lighter !default
-
-$background: $grey-lighter !default
-
-$border: $grey-light !default
-$border-hover: $grey !default
-
-// Text colors
-
-$text-invert: findColorInvert($text) !default
-$text-light: $grey !default
-$text-strong: $grey-darker !default
-
-// Code colors
-
-$code: $red !default
-$code-background: $background !default
-
-$pre: $text !default
-$pre-background: $background !default
-
-// Link colors
-
-$link: $primary !default
-$link-invert: $primary-invert !default
-$link-visited: $purple !default
-
-$link-hover: $grey-darker !default
-$link-hover-background: $grey-lighter !default
-$link-hover-border: $grey-darker !default
-
-$link-active: $grey-darker !default
-$link-active-border: $grey-darker !default
-
-// Control colors
-
-$control: $text-strong !default
-$control-background: $text-invert !default
-$control-border: $border !default
-
-$control-hover: $link-hover !default
-$control-hover-border: $border-hover !default
-
-$control-active: $link !default
-$control-active-background: $link !default
-$control-active-background-invert: $link-invert !default
-$control-active-border: $link !default
-
-// Typography
-
-$family-primary: $family-sans-serif !default
-$family-code: $family-monospace !default
-
-$size-small: $size-7 !default
-$size-normal: $size-6 !default
-$size-medium: $size-5 !default
-$size-large: $size-3 !default
-$size-huge: $size-1 !default
-
-// 4. Lists and maps
-
-$colors: (white: ($white, $black), black: ($black, $white), light: ($light, $light-invert), dark: ($dark, $dark-invert), primary: ($primary, $primary-invert), info: ($info, $info-invert), success: ($success, $success-invert), warning: ($warning, $warning-invert), danger: ($danger, $danger-invert)) !default
-
-$sizes: $size-1 $size-2 $size-3 $size-4 $size-5 $size-6 !default