css modularize (#1448)

* css modularize * Add alert style * Move more component style * Move iconfont to common style * Move layout style * Move more component style * Move all components * Fix lots of mixin deps * remove css-prefix from less * fix a button icon style bug * restructure * fix index * add dist * fix jest * fix some components style * clean webpack config * check more components style * update tabs * update scripts * update scripts * fix form style * fix more style * Fix select width * Fix form and tabs style
2024-11-27 12:39:49 +08:00 · 2016-04-27 20:44:36 +08:00 · 2016-04-27 20:44:36 +08:00 · 0ca6a1c24a
commit 0ca6a1c24a
parent 07db7c069f
177 changed files with 1363 additions and 1687 deletions
--- a/.babelrc
+++ b/.babelrc
@ -0,0 +1,3 @@
+{
+  "presets": ["es2015", "react", "stage-0"]
+}
--- a/components/affix/style/index.js
+++ b/components/affix/style/index.js
@ -0,0 +1,2 @@
+import '../../style/index.less';
+import './index.less';
--- a/components/affix/style/index.less
+++ b/components/affix/style/index.less
@ -1,3 +1,5 @@
+@import "../../style/themes/default";
+
 .ant-affix {
  position: fixed;
  z-index: @zindex-affix;
--- a/components/alert/style/index.js
+++ b/components/alert/style/index.js
@ -0,0 +1,2 @@
+import '../../style/index.less';
+import './index.less';
--- a/components/alert/style/index.less
+++ b/components/alert/style/index.less
@ -1,7 +1,6 @@
-@import "../mixins/index";
+@import "../../style/themes/default";

-@alert-prefix-cls: ~"@{css-prefix}alert";
-@alert-title-prefix-cls: ~"@{css-prefix}alert-with-description";
+@alert-prefix-cls: ant-alert;

 .@{alert-prefix-cls} {
  position: relative;
--- a/components/badge/style/index.js
+++ b/components/badge/style/index.js
@ -0,0 +1,2 @@
+import '../../style/index.less';
+import './index.less';
--- a/components/badge/style/index.less
+++ b/components/badge/style/index.less
@ -1,5 +1,7 @@
-@badge-prefix-cls: ~"@{css-prefix}badge";
-@number-prefix-cls: ~"@{css-prefix}scroll-number";
+@import "../../style/themes/default";
+
+@badge-prefix-cls: ant-badge;
+@number-prefix-cls: ant-scroll-number;

 .@{badge-prefix-cls} {
  position: relative;
--- a/components/breadcrumb/style/index.js
+++ b/components/breadcrumb/style/index.js
@ -0,0 +1,2 @@
+import '../../style/index.less';
+import './index.less';
--- a/components/breadcrumb/style/index.less
+++ b/components/breadcrumb/style/index.less
@ -1,3 +1,5 @@
+@import "../../style/themes/default";
+
@breadcrumb-prefix-cls: ant-breadcrumb;

 .@{breadcrumb-prefix-cls} {
--- a/components/button/style/index.js
+++ b/components/button/style/index.js
@ -0,0 +1,2 @@
+import '../../style/index.less';
+import './index.less';
--- a/components/button/style/index.less
+++ b/components/button/style/index.less
@ -1,5 +1,8 @@
-@import "../mixins/index";
-@btn-prefix-cls: ~"@{css-prefix}btn";
+@import "../../style/themes/default";
+@import "../../style/mixins/index";
+@import "./mixin";
+
+@btn-prefix-cls: ant-btn;

 // Button styles
 // -----------------------------
@ -95,7 +98,7 @@
    .btn-group(@btn-prefix-cls);
  }

-  &:not(&-circle)&-icon-only {
+  &:not(&-circle):not(&-circle-outline)&-icon-only {
    padding-left: 8px;
    padding-right: 8px;
  }
--- a/components/button/style/mixin.less
+++ b/components/button/style/mixin.less
--- a/components/calendar/style/index.js
+++ b/components/calendar/style/index.js
@ -0,0 +1,6 @@
+import '../../style/index.less';
+import './index.less';
+
+// style dependencies
+import '../../select/style';
+import '../../radio/style';
--- a/components/calendar/style/index.less
+++ b/components/calendar/style/index.less
@ -1,3 +1,5 @@
+@import "../../style/themes/default";
+
@full-calendar-prefix-cls: ant-fullcalendar;

 .@{full-calendar-prefix-cls} {
--- a/components/card/demo/loading.md
+++ b/components/card/demo/loading.md
@ -9,7 +9,7 @@ title: 预加载的卡片
 import { Card } from 'antd';

 ReactDOM.render(
-  <Card loading title="卡片标题" style={{ width: '40%' }}>
+  <Card loading title="卡片标题" style={{ width: '34%' }}>
    Whatever content
  </Card>
 , mountNode);
--- a/components/card/style/index.js
+++ b/components/card/style/index.js
@ -0,0 +1,2 @@
+import '../../style/index.less';
+import './index.less';
--- a/components/card/style/index.less
+++ b/components/card/style/index.less
@ -1,5 +1,6 @@
-@card-prefix-cls: ~"@{css-prefix}card";
-@number-prefix-cls: ~"@{css-prefix}scroll-number";
+@import "../../style/themes/default";
+
+@card-prefix-cls: ant-card;

 .@{card-prefix-cls} {
  background: #fff;
@ -7,7 +8,7 @@
  font-size: @font-size-base;
  position: relative;
  overflow: hidden;
-  transition: all .2s;
+  transition: all .3s;

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

  // Arrows
-
  .slick-prev,
  .slick-next {
    position: absolute;
@ -114,11 +205,9 @@
 }

 .ant-carousel-vertical {
-
  .slick-slider {
    padding-bottom: 0;
  }
-
  .slick-dots {
    width: 20px;
    bottom: auto;
--- a/components/cascader/style/index.js
+++ b/components/cascader/style/index.js
@ -0,0 +1,5 @@
+import '../../style/index.less';
+import './index.less';
+
+// style dependencies
+import '../../input/style';
--- a/components/cascader/style/index.less
+++ b/components/cascader/style/index.less
@ -0,0 +1,158 @@
+@import "../../style/themes/default";
+@import "../../style/mixins/index";
+
+@cascader-prefix-cls: ant-cascader;
+
+.@{cascader-prefix-cls} {
+  font-size: @font-size-base;
+  &-input {
+    width: 172px;
+    display: block;
+    cursor: pointer;
+  }
+  &-picker {
+    position: relative;
+    display: inline-block;
+    cursor: pointer;
+    vertical-align: middle;
+
+    &-disabled {
+      cursor: not-allowed;
+    }
+
+    &-clear {
+      opacity: 0;
+      position: absolute;
+      right: 8px;
+      z-index: 1;
+      background: #fff;
+      top: 50%;
+      font-size: 12px;
+      color: #ccc;
+      width: 12px;
+      height: 12px;
+      margin-top: -6px;
+      line-height: 12px;
+      cursor: pointer;
+      transition: color 0.3s ease, opacity 0.15s ease;
+      &:hover {
+        color: #999;
+      }
+    }
+
+    &:hover &-clear {
+      opacity: 1;
+    }
+
+    // arrow
+    &-arrow {
+      position: absolute;
+      top: 50%;
+      right: 8px;
+      width: 12px;
+      height: 12px;
+      margin-top: -6px;
+      line-height: 12px;
+      color: #999;
+      .iconfont-size-under-12px(8px);
+      &:before {
+        transition: transform 0.2s ease;
+      }
+      &&-expand {
+        .ie-rotate(2);
+        &:before {
+          transform: rotate(180deg);
+        }
+      }
+    }
+  }
+  &-menus {
+    font-size: 12px;
+    background: #fff;
+    position: absolute;
+    z-index: @zindex-dropdown;
+    border: 1px solid @border-color-base;
+    border-radius: @border-radius-base;
+    box-shadow: @box-shadow-base;
+    white-space: nowrap;
+    &-empty,
+    &-hidden {
+      display: none;
+    }
+    &.slide-up-enter.slide-up-enter-active&-placement-bottomLeft,
+    &.slide-up-appear.slide-up-appear-active&-placement-bottomLeft {
+      animation-name: antSlideUpIn;
+    }
+
+    &.slide-up-enter.slide-up-enter-active&-placement-topLeft,
+    &.slide-up-appear.slide-up-appear-active&-placement-topLeft {
+      animation-name: antSlideDownIn;
+    }
+
+    &.slide-up-leave.slide-up-leave-active&-placement-bottomLeft {
+      animation-name: antSlideUpOut;
+    }
+
+    &.slide-up-leave.slide-up-leave-active&-placement-topLeft {
+      animation-name: antSlideDownOut;
+    }
+  }
+  &-menu {
+    display: inline-block;
+    vertical-align: top;
+    min-width: 111px;
+    height: 180px;
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    border-right: 1px solid @border-color-split;
+    overflow: auto;
+    &:first-child {
+      border-radius: @border-radius-base 0 0 @border-radius-base;
+    }
+    &:last-child {
+      border-right-color: transparent;
+      margin-right: -1px;
+      border-radius: 0 @border-radius-base @border-radius-base 0;
+    }
+    &:only-child {
+      border-radius: @border-radius-base;
+    }
+  }
+  &-menu-item {
+    padding: 7px 16px;
+    cursor: pointer;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    transition: all 0.3s ease;
+    &:hover {
+      background: tint(@primary-color, 90%);
+    }
+    &-disabled {
+      cursor: not-allowed;
+      color: #ccc;
+      &:hover {
+        background: transparent;
+      }
+    }
+    &-active:not(&-disabled) {
+      &,
+      &:hover {
+        background-color: #f7f7f7;
+        font-weight: bold;
+      }
+    }
+    &-expand {
+      position: relative;
+      &:after {
+        content: '\e600';
+        font-family: 'anticon';
+        .iconfont-size-under-12px(8px);
+        color: #999;
+        position: absolute;
+        right: 15px;
+      }
+    }
+  }
+}
--- a/components/checkbox/style/index.js
+++ b/components/checkbox/style/index.js
@ -0,0 +1,2 @@
+import '../../style/index.less';
+import './index.less';
--- a/components/checkbox/style/index.less
+++ b/components/checkbox/style/index.less
@ -0,0 +1,4 @@
+@import "../../style/themes/default";
+@import "./mixin";
+
+.antCheckboxFn();
--- a/components/checkbox/style/mixin.less
+++ b/components/checkbox/style/mixin.less
@ -0,0 +1,173 @@
+@import "../../style/mixins/index";
+
+.antCheckboxFn(@checkbox-prefix-cls: ant-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;
+
+    &:hover,
+    &-focused {  
+      .@{checkbox-inner-prefix-cls} {
+        border-color: #bcbcbc;
+      }
+    }
+
+    &-inner {
+      &: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;
+      }
+
+      position: relative;
+      top: 0;
+      left: 0;
+      display: inline-block;
+      width: 14px;
+      height: 14px;
+      border-width: 1px;
+      border-style: solid;
+      border-radius: 3px;
+      border-color: @border-color-base;
+      background-color: #fff;
+      transition: border-color 0.1s @ease-in-out-back, background-color 0.1s @ease-in-out-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} {
+      border-color: @primary-color;
+      background-color: @primary-color;
+      &:after {
+        content: ' ';
+        transform: scale(1);
+        position: absolute;
+        left: 2px;
+        top: 5px;
+        width: 8px;
+        height: 1px;
+      }
+    }
+    &:hover {
+      .@{checkbox-inner-prefix-cls} {
+        border-color: @primary-color;
+      }
+    }
+  }
+  // 选中状态
+  .@{checkbox-prefix-cls}-checked {
+
+    &:hover {
+      .@{checkbox-inner-prefix-cls} {
+        border-color: @primary-color;
+      }
+    }
+
+    .@{checkbox-inner-prefix-cls} {
+      border-color: @primary-color;
+      background-color: @primary-color;
+
+      &: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}-disabled {
+    &.@{checkbox-prefix-cls}-checked {
+      &:hover {
+        .@{checkbox-inner-prefix-cls} {
+          border-color: @border-color-base;
+        }
+      }
+
+      .@{checkbox-inner-prefix-cls} {
+        background-color: #f3f3f3;
+        border-color: @border-color-base;
+
+        &:after {
+          animation-name: none;
+          border-color: #ccc;
+        }
+      }
+    }
+
+    &:hover {
+      .@{checkbox-inner-prefix-cls} {
+        border-color: @border-color-base;
+      }
+    }
+
+    .@{checkbox-inner-prefix-cls} {
+      border-color: @border-color-base;
+      background-color: #f3f3f3;
+      &:after {
+        animation-name: none;
+        border-color: #f3f3f3;
+      }
+    }
+
+    .@{checkbox-inner-prefix-cls}-input {
+      cursor: default;
+    }
+  }
+
+  .@{checkbox-prefix-cls}-wrapper {
+    cursor: pointer;
+    font-size: @font-size-base;
+  }
+
+  .@{checkbox-prefix-cls}-wrapper + span,
+  .@{checkbox-prefix-cls} + span {
+    margin-left: 8px;
+    margin-right: 8px;
+  }
+
+  .@{checkbox-prefix-cls}-group {
+    font-size: @font-size-base;
+    &-item {
+      display: inline-block;
+    }
+  }
+}
--- a/components/checkbox/style/style/index.js
+++ b/components/checkbox/style/style/index.js
@ -0,0 +1,2 @@
+import '../../style/index.less';
+import './index.less';
--- a/components/checkbox/style/style/index.less
+++ b/components/checkbox/style/style/index.less
@ -1,3 +1,5 @@
+@import "../../style/themes/default";
+
@cascader-prefix-cls: ant-cascader;

 .@{cascader-prefix-cls} {
@ -58,7 +60,7 @@
      &&-expand {
        .ie-rotate(2);
        &:before {
-          .rotate(180deg);
+          transform: rotate(180deg);
        }
      }
    }
--- a/components/col/style/index.js
+++ b/components/col/style/index.js
@ -0,0 +1,2 @@
+import '../../style/index.less';
+import '../../layout/style/index.less';
--- a/components/collapse/style/index.js
+++ b/components/collapse/style/index.js
@ -0,0 +1,2 @@
+import '../../style/index.less';
+import './index.less';
--- a/components/collapse/style/index.less
+++ b/components/collapse/style/index.less
@ -1,3 +1,6 @@
+@import "../../style/themes/default";
+@import "../../style/mixins/index";
+
@collapse-prefix-cls: ant-collapse;

 .collapse-close() {
--- a/components/date-picker/style/Calendar.less
+++ b/components/date-picker/style/Calendar.less
--- a/components/date-picker/style/DecadePanel.less
+++ b/components/date-picker/style/DecadePanel.less
--- a/components/date-picker/style/MonthPanel.less
+++ b/components/date-picker/style/MonthPanel.less
--- a/components/date-picker/style/MonthPicker.less
+++ b/components/date-picker/style/MonthPicker.less
--- a/components/date-picker/style/Picker.less
+++ b/components/date-picker/style/Picker.less
--- a/components/date-picker/style/RangePicker.less
+++ b/components/date-picker/style/RangePicker.less
@ -69,13 +69,13 @@
    border-radius: @border-radius-sm;
  }
  .@{calendar-prefix-cls}-input,
-  .@{css-prefix}time-picker-input {
+  .@{timepicker-prefix-cls}-input {
    .input;
    border-radius: @border-radius-sm;
    height: @input-height-sm;
    width: 96px;
  }
-  .@{css-prefix}time-picker-icon {
+  .@{timepicker-prefix-cls}-icon {
    display: none;
  }

--- a/components/date-picker/style/TimePicker.less
+++ b/components/date-picker/style/TimePicker.less
@ -1,5 +1,3 @@
-@import "../../mixins/input";
-
 .@{calendar-prefix-cls}-time {
  // Change display order in DOM
  .@{calendar-prefix-cls}-input-wrap {
@ -25,6 +23,9 @@
  .@{calendar-prefix-cls}-input {
    padding-right: 21px;
  }
+  .@{timepicker-prefix-cls} {
+    min-width: 168px;
+  }
  .@{timepicker-prefix-cls}-icon {
    display: none;
  }
--- a/components/date-picker/style/YearPanel.less
+++ b/components/date-picker/style/YearPanel.less
--- a/components/date-picker/style/index.js
+++ b/components/date-picker/style/index.js
@ -0,0 +1,6 @@
+import '../../style/index.less';
+import './index.less';
+
+// style dependencies
+import '../../input/style';
+import '../../time-picker/style';
--- a/components/date-picker/style/index.less
+++ b/components/date-picker/style/index.less
@ -0,0 +1,16 @@
+@import "../../style/themes/default";
+@import "../../style/mixins/index";
+@import "../../input/style/mixin";
+@import "../../button/style/mixin";
+
+@calendar-prefix-cls: ant-calendar;
+@timepicker-prefix-cls: ant-time-picker;
+
+@import "Picker";
+@import "Calendar";
+@import "RangePicker";
+@import "TimePicker";
+@import "MonthPanel";
+@import "YearPanel";
+@import "DecadePanel";
+@import "MonthPicker";
--- a/components/dropdown/style/index.js
+++ b/components/dropdown/style/index.js
@ -0,0 +1,5 @@
+import '../../style/index.less';
+import './index.less';
+
+// style dependencies
+import '../../button/style';
--- a/components/dropdown/style/index.less
+++ b/components/dropdown/style/index.less
@ -1,5 +1,7 @@
-@import "../mixins/index";
-@dropdown-prefix-cls: ~"@{css-prefix}dropdown";
+@import "../../style/themes/default";
+@import "../../style/mixins/index";
+
+@dropdown-prefix-cls: ant-dropdown;

 .@{dropdown-prefix-cls} {
  position: absolute;
@ -14,7 +16,7 @@
  &-wrap {
    position: relative;

-    .@{btn-prefix-cls} > .@{iconfont-css-prefix}-down {
+    .ant-btn > .@{iconfont-css-prefix}-down {
      .iconfont-size-under-12px(10px);
    }

@ -25,7 +27,7 @@

  &-wrap-open {
    .anticon-down:before {
-      .rotate(180deg);
+      transform: rotate(180deg);
    }
  }

--- a/components/form/FormItem.jsx
+++ b/components/form/FormItem.jsx
@ -82,7 +82,9 @@ export default class FormItem extends React.Component {

  renderExtra() {
    const { prefixCls, extra } = this.props;
-    return <span className={prefixClsFn(prefixCls, 'extra')}>{extra}</span>;
+    return extra ? (
+      <span className={prefixClsFn(prefixCls, 'extra')}>{extra}</span>
+    ) : null;
  }

  getValidateStatus() {
--- a/components/form/style/index.js
+++ b/components/form/style/index.js
@ -0,0 +1,5 @@
+import '../../style/index.less';
+import './index.less';
+
+// style dependencies
+import '../../layout/style';
--- a/components/form/style/index.less
+++ b/components/form/style/index.less
@ -1,4 +1,11 @@
-@import "../mixins/index";
+@import "../../style/themes/default";
+@import "../../style/mixins/index";
+@import "../../input/style/mixin";
+@import "../../button/style/mixin";
+@import "../../layout/style/mixin";
+@import "./mixin";
+
+@form-prefix-cls: ant-form;

 .reset-form();

@ -11,7 +18,7 @@ label {
  }
 }

-.@{css-prefix}form-item-required:before {
+.@{form-prefix-cls}-item-required:before {
  display: inline-block;
  margin-right: 4px;
  content: "*";
@ -20,19 +27,14 @@ label {
  color: @label-required-color;
 }

-// Input styles
-.@{css-prefix}input {
-  .input;
-}
-
 //== Input type: with extra icon
 .has-feedback {
  .input-with-icon();
 }

 //== Style for input-group: input with label, with button or dropdown...
-.@{css-prefix}input-group {
-  .input-group(~"@{css-prefix}input");
+.ant-input-group {
+  .input-group(~"ant-input");
 }

 // Radio && Checkbox
@ -45,18 +47,18 @@ input[type="checkbox"] {
  }
 }
 // These classes are used directly on <label>s
-.@{css-prefix}radio-inline,
-.@{css-prefix}radio-vertical,
-.@{css-prefix}checkbox-inline,
-.@{css-prefix}checkbox-vertical {
+.ant-radio-inline,
+.ant-radio-vertical,
+.ant-checkbox-inline,
+.ant-checkbox-vertical {
  &.disabled,
  fieldset[disabled] & {
    cursor: @cursor-disabled;
  }
 }
 // These classes are used on elements with <label> descendants
-.@{css-prefix}radio,
-.@{css-prefix}checkbox {
+.ant-radio,
+.ant-checkbox {
  &.disabled,
  fieldset[disabled] & {
    label {
@ -66,8 +68,8 @@ input[type="checkbox"] {
 }

 // Form items
-// You should wrap labels and controls in .@{css-prefix}form-item for optimum spacing
-.@{css-prefix}form-item {
+// 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: #666;
@ -76,7 +78,7 @@ input[type="checkbox"] {
    line-height: 32px;
  }

-  &.@{css-prefix}form-item-with-help {
+  &.@{form-prefix-cls}-item-with-help {
    margin-bottom: @form-item-margin-bottom - @font-size-base * @line-height-base;
  }

@ -92,27 +94,27 @@ input[type="checkbox"] {
    }
  }

-  .@{css-prefix}switch {
+  .ant-switch {
    margin: 4px 0;
  }
 }

-.@{css-prefix}form-explain {
+.@{form-prefix-cls}-explain {
  line-height: 1.5;
  margin-top: 3px;
 }

-.@{css-prefix}form-explain,
-.@{css-prefix}form-extra {
+.@{form-prefix-cls}-explain,
+.@{form-prefix-cls}-extra {
  color: #999;
 }

-.@{css-prefix}form-text {
+.@{form-prefix-cls}-text {
  display: inline-block;
  padding-right: 8px;
 }

-.@{css-prefix}form-split {
+.@{form-prefix-cls}-split {
  display: block;
  text-align: center;
 }
@ -124,23 +126,23 @@ form {
      .square(@input-height-lg);
      line-height: @input-height-lg;
    }
-    .@{css-prefix}input {
+    .ant-input {
      padding-right: 24px;
    }
  }

-  .@{css-prefix}input,
-  .@{css-prefix}input-group .@{css-prefix}input,
-  .@{css-prefix}input-group .@{css-prefix}input-group-addon {
+  .ant-input,
+  .ant-input-group .ant-input,
+  .ant-input-group .ant-input-group-addon {
    .input-lg();
  }

-  textarea.@{css-prefix}input {
+  textarea.ant-input {
    height: auto;
  }

  // input[type=file]
-  .@{css-prefix}upload {
+  .ant-upload {
    background: transparent;
  }

@ -151,37 +153,37 @@ form {
  }

  // Radios and checkboxes on same line
-  .@{css-prefix}radio-inline,
-  .@{css-prefix}checkbox-inline {
+  .ant-radio-inline,
+  .ant-checkbox-inline {
    display: inline-block;
    vertical-align: middle;
    font-weight: normal;
    cursor: pointer;
-    margin-left: 16px;
+    margin-left: 8px;

    &:first-child {
      margin-left: 0;
    }
  }

-  .@{css-prefix}checkbox-vertical,
-  .@{css-prefix}radio-vertical {
+  .ant-checkbox-vertical,
+  .ant-radio-vertical {
    display: block;
  }

-  .@{input-number-prefix-cls} {
+  .ant-input-number {
    margin-top: -1px;
    margin-right: 8px;
  }

-  .@{select-prefix-cls} {
+  .ant-select {
    width: 100%;
  }
 }

 // Input combined with select
-.@{css-prefix}input-group-wrap {
-  .@{select-prefix-cls}-selection {
+.ant-input-group-wrap {
+  .ant-select-selection {
    border-bottom-left-radius: 0;
    border-top-left-radius: 0;
    &:hover {
@ -189,18 +191,18 @@ form {
    }
  }

-  .@{select-prefix-cls}-selection--single {
+  .ant-select-selection--single {
    margin-left: -1px;
    height: @input-height-lg;
    background-color: #eee;
-    .@{select-prefix-cls}-selection__rendered {
+    .ant-select-selection__rendered {
      padding-left: 8px;
      padding-right: 25px;
      line-height: 30px;
    }
  }

-  .@{select-prefix-cls}-open .@{select-prefix-cls}-selection {
+  .ant-select-open .ant-select-selection {
    border-color: @border-color-base;
    box-shadow: none;
  }
@ -236,21 +238,21 @@ form {

 // Form layout
 //== Horizontal Form
-.@{css-prefix}form-horizontal {
-  .@{css-prefix}form-item {
+.@{form-prefix-cls}-horizontal {
+  .@{form-prefix-cls}-item {
    .make-row;
  }

-  .@{css-prefix}radio-inline,
-  .@{css-prefix}checkbox-inline,
-  .@{css-prefix}input {
+  .ant-radio-inline,
+  .ant-checkbox-inline,
+  .ant-input {
    vertical-align: baseline;
  }
 }

 //== Inline Form
-.@{css-prefix}form-inline {
-  .@{css-prefix}form-item {
+.@{form-prefix-cls}-inline {
+  .@{form-prefix-cls}-item {
    display: inline-block;
    margin-right: 10px;
    margin-bottom: 0;
@ -264,13 +266,13 @@ form {
    }
  }

-  .@{css-prefix}input {
+  .ant-input {
    display: inline-block;
    width: auto;
    vertical-align: middle;
  }

-  .@{css-prefix}form-text {
+  .@{form-prefix-cls}-text {
    display: inline-block;
  }

@ -278,14 +280,14 @@ form {
    display: inline-block;
  }

-  // Fix https://github.com/ant-design/ant-design/issues/1040
-  .@{css-prefix}form-explain {
+  // Fix https://github.comdesigndesign/issues/1040
+  .@{form-prefix-cls}-explain {
    position: absolute;
  }
 }

-.@{css-prefix}form-horizontal,
-.@{css-prefix}form-inline {
+.@{form-prefix-cls}-horizontal,
+.@{form-prefix-cls}-inline {
  label {
    > input[type="radio"],
    > input[type="checkbox"] {
@ -332,7 +334,7 @@ form {

 .has-success {
  .form-control-validation(@success-color; @input-hover-border-color;);
-  .@{css-prefix}input {
+  .ant-input {
    border-color: @input-border-color;
    box-shadow: none;
  }
@ -351,8 +353,8 @@ form {
    color: @warning-color;
  }

-  // ant-select
-  .@{select-prefix-cls} {
+  //select
+  .ant-select {
    &-selection {
      border-color: @warning-color;
      box-shadow: 0 0 0 2px fade(@warning-color, 20%);
@ -362,18 +364,18 @@ form {
    }
  }

-  // ant-datepicker
-  .@{calendar-prefix-cls}-picker-icon:after {
+  //datepicker
+  .ant-calendar-picker-icon:after {
    color: @warning-color;
  }

-  // ant-timepicker
-  .@{timepicker-prefix-cls}-icon:after {
+  //timepicker
+  .ant-time-picker-icon:after {
    color: @warning-color;
  }

-  // ant-input-number
-  .@{input-number-prefix-cls} {
+  //input-number
+  .ant-input-number {
    border-color: @warning-color;
    box-shadow: 0 0 0 2px fade(@warning-color, 20%);
    &:not([disabled]):hover {
@ -390,8 +392,8 @@ form {
    color: @error-color;
  }

-  // ant-select
-  .@{select-prefix-cls} {
+  //select
+  .ant-select {
    &-selection {
      border-color: @error-color;
      box-shadow: 0 0 0 2px fade(@error-color, 20%);
@ -402,22 +404,22 @@ form {
    }
  }

-  .@{select-prefix-cls}-combobox .@{select-prefix-cls}-search__field:focus {
+  .ant-select-combobox .ant-select-search__field:focus {
    box-shadow: none;
  }

-  // ant-datepicker
-  .@{calendar-prefix-cls}-picker-icon:after {
+  //datepicker
+  .ant-calendar-picker-icon:after {
    color: @error-color;
  }

-  // ant-timepicker
-  .@{timepicker-prefix-cls}-picker-icon:after {
+  //timepicker
+  .ant-time-picker-picker-icon:after {
    color: @error-color;
  }

-  // ant-input-number
-  .@{input-number-prefix-cls} {
+  //input-number
+  .ant-input-number {
    border-color: @error-color;
    box-shadow: 0 0 0 2px fade(@error-color, 20%);
    &:not([disabled]):hover {
@ -435,13 +437,13 @@ form {
  }
 }

-.ant-advanced-search-form {
-  .@{css-prefix}form-item {
+.advanced-search-form {
+  .@{form-prefix-cls}-item {
    margin-bottom: 16px;
  }
-  .@{css-prefix}input,
-  .@{css-prefix}input-group .@{css-prefix}input,
-  .@{css-prefix}input-group .@{css-prefix}input-group-addon {
+  .ant-input,
+  .ant-input-group .ant-input,
+  .ant-input-group .ant-input-group-addon {
    height: 28px;
  }
 }
--- a/components/form/style/mixin.less
+++ b/components/form/style/mixin.less
@ -1,10 +1,10 @@
 .form-control-validation(@text-color: @input-color; @border-color: @input-border-color; @background-color: @input-bg) {
-  .@{css-prefix}form-explain,
-  .@{css-prefix}form-split {
+  .ant-form-explain,
+  .ant-form-split {
    color: @text-color;
  }
  // 输入框的不同校验状态
-  .@{css-prefix}input {
+  .ant-input {
    border-color: @border-color;
    box-shadow: 0 0 0 2px fade(@border-color, 20%);

@ -13,11 +13,11 @@
    }
  }

-  .@{calendar-prefix-cls}-picker-open .@{calendar-prefix-cls}-picker-input {
+  .ant-calendar-picker-open .ant-calendar-picker-input {
    box-shadow: 0 0 0 2px fade(@border-color, 20%);
  }

-  .@{css-prefix}input-group-addon {
+  .ant-input-group-addon {
    color: @text-color;
    border-color: @border-color;
    background-color: @background-color;
@ -56,7 +56,7 @@
  }

  input[type="search"] {
-    .box-sizing(border-box);
+    box-sizing: border-box;
  }

  // Position radios and checkboxes better
--- a/components/icon/style/index.js
+++ b/components/icon/style/index.js
@ -0,0 +1 @@
+import '../../style/index.less';
--- a/components/input-number/style/index.js
+++ b/components/input-number/style/index.js
@ -0,0 +1,2 @@
+import '../../style/index.less';
+import './index.less';
--- a/components/input-number/style/index.less
+++ b/components/input-number/style/index.less
@ -1,7 +1,8 @@
-@input-number-prefix-cls: ant-input-number;
+@import "../../style/themes/default";
+@import "../../style/mixins/index";
+@import "../../input/style/mixin";

-@import "../mixins/iconfont";
-@import "../mixins/input";
+@input-number-prefix-cls: ant-input-number;

 .handler-disabled() {
  opacity: 0.72;
--- a/components/input/style/index.js
+++ b/components/input/style/index.js
@ -0,0 +1,2 @@
+import '../../style/index.less';
+import './index.less';
--- a/components/input/style/index.less
+++ b/components/input/style/index.less
@ -0,0 +1,8 @@
+@import "../../style/themes/default";
+@import "../../style/mixins/index";
+@import "./mixin";
+
+// Input styles
+.ant-input {
+  .input;
+}
--- a/components/input/style/mixin.less
+++ b/components/input/style/mixin.less
@ -1,3 +1,6 @@
+@import "../../style/mixins/index";
+
+@import "../../style/mixins/index";
 // size mixins for input
 .input-lg() {
  padding: @input-padding-vertical-lg @input-padding-horizontal;
@ -33,7 +36,6 @@
  }
 }

-
 // Basic style for input
 .input() {
  position: relative;
--- a/components/layout/style/index.js
+++ b/components/layout/style/index.js
@ -0,0 +1,2 @@
+import '../../style/index.less';
+import './index.less';
--- a/components/layout/style/index.less
+++ b/components/layout/style/index.less
@ -0,0 +1,102 @@
+@import "../../style/themes/default";
+@import "../../style/mixins/index";
+@import "./mixin";
+
+// Grid system
+.row {
+  .make-row();
+  display: block;
+}
+
+.row-flex {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+
+  &:before,
+  &:after {
+    display: flex;
+  }
+}
+
+// x轴原点
+.row-flex-start {
+  justify-content: flex-start;
+}
+
+// x轴居中
+.row-flex-center {
+  justify-content: center;
+}
+
+// x轴反方向
+.row-flex-end {
+  justify-content: flex-end;
+}
+
+// x轴平分
+.row-flex-space-between {
+  justify-content: space-between;
+}
+
+// x轴有间隔地平分
+.row-flex-space-around {
+  justify-content: space-around;
+}
+
+// 顶部对齐
+.row-flex-top {
+  align-items: flex-start;
+}
+
+// 居中对齐
+.row-flex-middle {
+  align-items: center;
+}
+
+// 底部对齐
+.row-flex-bottom {
+  align-items: flex-end;
+}
+
+.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);
+}
--- a/components/layout/style/mixin.less
+++ b/components/layout/style/mixin.less
@ -1,3 +1,5 @@
+@import "../../style/mixins/index";
+
 // mixins for grid system
 // ------------------------
 .make-row(@gutter: @grid-gutter-width) {
@ -5,7 +7,7 @@
  margin-left: (@gutter / -2);
  margin-right: (@gutter / -2);
  height: auto;
-  &:extend(.clearfix all);
+  .clearfix;
 }

 .make-grid-columns() {
--- a/components/locale-provider/style/index.js
+++ b/components/locale-provider/style/index.js
--- a/components/menu/style/index.js
+++ b/components/menu/style/index.js
@ -0,0 +1,2 @@
+import '../../style/index.less';
+import './index.less';
--- a/components/menu/style/index.less
+++ b/components/menu/style/index.less
@ -1,4 +1,7 @@
-@menu-prefix-cls: ~"@{css-prefix}menu";
+@import "../../style/themes/default";
+@import "../../style/mixins/index";
+
+@menu-prefix-cls: ant-menu;

 // default theme
 .@{menu-prefix-cls} {
--- a/components/message/style/index.js
+++ b/components/message/style/index.js
@ -0,0 +1,2 @@
+import '../../style/index.less';
+import './index.less';
--- a/components/message/style/index.less
+++ b/components/message/style/index.less
@ -1,3 +1,5 @@
+@import "../../style/themes/default";
+
@message-prefix-cls: ant-message;

 .@{message-prefix-cls} {
--- a/components/modal/style/index.js
+++ b/components/modal/style/index.js
@ -0,0 +1,5 @@
+import '../../style/index.less';
+import './index.less';
+
+// style dependencies
+import '../../button/style';
--- a/style/components/dialog/Dialog.less
+++ b/style/components/dialog/Dialog.less
@ -1,3 +1,7 @@
+@import "../../style/themes/default";
+
+@dialog-prefix-cls: ant-modal;
+
 .@{dialog-prefix-cls} {
  position: relative;
  width: auto;
@ -70,7 +74,7 @@
  }

  &-header {
-    padding: 13px 20px 14px 20px;
+    padding: 14px 16px;
    border-radius: @border-radius-base @border-radius-base 0 0;
    background: #fff;
    color: #666;
@ -78,16 +82,20 @@
  }

  &-body {
-    padding: 8px 20px;
+    padding: 16px;
    font-size: 12px;
    line-height: 1.5;
  }

  &-footer {
    border-top: 1px solid @border-color-split;
-    padding: 8px 20px 16px 10px;
+    padding: 10px 18px 10px 10px;
    text-align: right;
    border-radius: 0 0 @border-radius-base @border-radius-base;
+    button + button {
+      margin-left: 8px;
+      margin-bottom: 0;
+    }
  }

  &.zoom-enter,
@ -96,6 +104,23 @@
    transform: none; // reset scale avoid mousePosition bug
    opacity: 0;
  }
+
+  &-mask {
+    position: fixed;
+    top: 0;
+    right: 0;
+    left: 0;
+    bottom: 0;
+    background-color: #373737;
+    background-color: rgba(55, 55, 55, 0.6);
+    height: 100%;
+    z-index: @zindex-modal-mask;
+    filter: ~"alpha(opacity=50)";
+
+    &-hidden {
+      display: none;
+    }
+  }
 }

@media (min-width: 768px) {
--- a/components/notification/style/index.js
+++ b/components/notification/style/index.js
@ -0,0 +1,2 @@
+import '../../style/index.less';
+import './index.less';
--- a/components/notification/style/index.less
+++ b/components/notification/style/index.less
@ -1,26 +1,26 @@
-@import "../mixins/index";
+@import "../../style/themes/default";
+@import "../../style/mixins/index";

-@notification-prefix-cls: ~"@{css-prefix}notification";
-
-@notice-width: 335px;
-@notice-padding: 16px;
-@notice-margin-bottom: 10px;
+@notification-prefix-cls: ant-notification;
+@notification-width: 335px;
+@notification-padding: 16px;
+@notification-margin-bottom: 10px;

 .@{notification-prefix-cls} {
  position: fixed;
  z-index: @zindex-notification;
-  width: @notice-width;
+  width: @notification-width;
  margin-right: 24px;

  &-notice {
-    padding: @notice-padding;
+    padding: @notification-padding;
    border-radius: @border-radius-base;
    box-shadow: @shadow-2;
    border: 1px solid @border-color-base;
    background: @body-background;
    line-height: 1.5;
    position: relative;
-    margin-bottom: @notice-margin-bottom;
+    margin-bottom: @notification-margin-bottom;
    overflow: hidden;

    &-message {
@ -123,7 +123,7 @@
@keyframes NotificationFadeIn {
  0% {
    opacity: 0;
-    left: @notice-width;
+    left: @notification-width;
  }
  100% {
    left: 0;
@ -134,9 +134,9 @@
@keyframes NotificationFadeOut {
  0% {
    opacity: 1;
-    margin-bottom: @notice-margin-bottom;
-    padding-top: @notice-padding;
-    padding-bottom: @notice-padding;
+    margin-bottom: @notification-margin-bottom;
+    padding-top: @notification-padding;
+    padding-bottom: @notification-padding;
    max-height: 150px;
  }
  100% {
--- a/components/pagination/style/index.js
+++ b/components/pagination/style/index.js
@ -0,0 +1,6 @@
+import '../../style/index.less';
+import './index.less';
+
+// style dependencies
+import '../../select/style';
+import '../../input/style';
--- a/components/pagination/style/index.less
+++ b/components/pagination/style/index.less
@ -1,3 +1,7 @@
+@import "../../style/themes/default";
+@import "../../style/mixins/index";
+@import "../../input/style/mixin";
+
@pagination-prefix-cls: ant-pagination;

 .@{pagination-prefix-cls} {
--- a/components/popconfirm/style/index.js
+++ b/components/popconfirm/style/index.js
@ -0,0 +1,2 @@
+import '../../style/index.less';
+import '../../popover/style';
--- a/components/popover/style/index.js
+++ b/components/popover/style/index.js
@ -0,0 +1,2 @@
+import '../../style/index.less';
+import './index.less';
--- a/components/popover/style/index.less
+++ b/components/popover/style/index.less
@ -1,13 +1,7 @@
-@import "../mixins/index";
-@popover-prefix-cls: ~"@{css-prefix}popover";
+@import "../../style/themes/default";
+@import "../../style/mixins/index";

-//
-// Popovers
-// --------------------------------------------------
-
-//== Popovers
-//
-//##
+@popover-prefix-cls: ant-popover;

 //** Popover body background color
@popover-bg:                          #fff;
--- a/components/progress/style/index.js
+++ b/components/progress/style/index.js
@ -0,0 +1,2 @@
+import '../../style/index.less';
+import './index.less';
--- a/components/progress/style/index.less
+++ b/components/progress/style/index.less
@ -1,3 +1,6 @@
+@import "../../style/themes/default";
+@import "../../style/mixins/index";
+
@progress-prefix-cls: ant-progress;

 .@{progress-prefix-cls} {
--- a/components/queue-anim/style/index.js
+++ b/components/queue-anim/style/index.js
--- a/components/radio/style/index.js
+++ b/components/radio/style/index.js
@ -0,0 +1,2 @@
+import '../../style/index.less';
+import './index.less';
--- a/components/radio/style/index.less
+++ b/components/radio/style/index.less
@ -1,3 +1,6 @@
+@import "../../style/themes/default";
+@import "../../style/mixins/index";
+
@radio-prefix-cls: ant-radio;
@radio-group-prefix-cls: ~"@{radio-prefix-cls}-group";
@radio-inner-prefix-cls: ~"@{radio-prefix-cls}-inner";
@ -5,6 +8,7 @@

 .@{radio-group-prefix-cls} {
  display: inline-block;
+  font-size: @font-size-base;
  label {
    margin-right: 16px;
  }
@ -12,6 +16,7 @@

 // 一般状态
 .@{radio-prefix-cls} {
+  font-size: @font-size-base;
  white-space: nowrap;
  outline: none;
  display: inline-block;
--- a/components/rate/style/index.js
+++ b/components/rate/style/index.js
@ -0,0 +1,2 @@
+import '../../style/index.less';
+import './index.less';
--- a/components/rate/style/index.less
+++ b/components/rate/style/index.less
@ -1,3 +1,6 @@
+@import "../../style/themes/default";
+@import "../../style/mixins/index";
+
@rate-prefix-cls: ant-rate;
@rate-star-color: #f5a623;

@ -11,9 +14,6 @@
  font-family: 'anticon';
  font-weight: normal;
  font-style: normal;
-  -webkit-font-smoothing: antialiased; /* 解决safair和chrome被加粗 */
-  -webkit-text-stroke-width: 0.2px; /* 解决chrome锯齿 */
-  -webkit-tap-highlight-color: transparent;

  &-disabled &-star {
    &:before,
--- a/components/row/style/index.js
+++ b/components/row/style/index.js
@ -0,0 +1,2 @@
+import '../../style/index.less';
+import '../../layout/style/index.less';
--- a/components/select/demo/multiple.md
+++ b/components/select/demo/multiple.md
@ -21,6 +21,7 @@ function handleChange(value) {
 ReactDOM.render(
  <Select multiple
    style={{ width: 400 }}
+    placeholder="Please select"
    defaultValue={['a10', 'c12']} onChange={handleChange}>
    {children}
  </Select>
--- a/components/select/index.jsx
+++ b/components/select/index.jsx
@ -16,13 +16,14 @@ export default class Select extends React.Component {

  render() {
    let {
-      size, className, combobox, notFoundContent, prefixCls,
+      size, className, combobox, notFoundContent, prefixCls, showSearch,
    } = this.props;

    const cls = classNames({
      [`${prefixCls}-lg`]: size === 'large',
      [`${prefixCls}-sm`]: size === 'small',
      [className]: !!className,
+      [`${prefixCls}-show-search`]: showSearch,
    });

    if (combobox) {
--- a/components/select/style/index.js
+++ b/components/select/style/index.js
@ -0,0 +1,2 @@
+import '../../style/index.less';
+import './index.less';
--- a/components/select/style/index.less
+++ b/components/select/style/index.less
@ -1,9 +1,9 @@
+@import "../../style/themes/default";
+@import "../../style/mixins/index";
+@import "../../input/style/mixin";
+
@select-prefix-cls: ant-select;

-@duration: .3s;
-
-@import "../mixins/iconfont";
-
 .selection__clear() {
  display: inline-block;
  font-style: normal;
@ -38,7 +38,6 @@
 .@{select-prefix-cls} {
  box-sizing: border-box;
  display: inline-block;
-  margin: 0;
  position: relative;
  vertical-align: middle;
  color: #666;
@ -143,23 +142,12 @@
      padding-right: 24px;
      line-height: 26px;
    }
+  }

-    .@{select-prefix-cls}-selection-selected-value {
-      position: absolute;
-      left: 8px;
-      top: 0;
-    }
-
-    .@{select-prefix-cls}-selection__placeholder {
-      position: absolute;
-      top: 50%;
-      left: 9px;
-      color: #ccc;
-      line-height: 20px;
-      height: 20px;
-      margin-top: -10px;
-      cursor: text;
-    }
+  &-open&-show-search &-selection--single &-selection-selected-value {
+    position: absolute;
+    left: 8px;
+    top: 0;
  }

  &-lg {
@ -215,7 +203,7 @@
    position: relative;
  }

-  &-search__field__placeholder {
+  &-selection__placeholder {
    position: absolute;
    top: 50%;
    left: 9px;
@ -262,11 +250,13 @@
      text-overflow: ellipsis;
      padding-left: 6px;
      padding-bottom: 4px;
-      > ul > li {
-        margin-top: 4px;
-        height: 20px;
-        line-height: 20px;
-      }
+    }
+
+    > ul > li,
+    .@{select-prefix-cls}-selection__rendered > ul > li {  // for tree-select
+      margin-top: 4px;
+      height: 20px;
+      line-height: 20px;
    }

    .@{select-prefix-cls}-selection__choice {
@ -279,7 +269,7 @@
      max-width: 99%;
      position: relative;
      overflow: hidden;
-      transition: padding @duration @ease-in-out;
+      transition: padding .3s @ease-in-out;
      padding: 0 20px 0 10px;
    }

@ -289,7 +279,7 @@
      overflow: hidden;
      text-overflow: ellipsis;
      max-width: 100%;
-      transition: margin @duration @ease-in-out;
+      transition: margin .3s @ease-in-out;
    }

    .@{select-prefix-cls}-selection__choice__remove {
@ -318,7 +308,7 @@
      .ie-rotate(2);
      -ms-transform: rotate(180deg);
      &:before {
-        .rotate(180deg);
+        transform: rotate(180deg);
      }
    }
    .@{select-prefix-cls}-selection {
--- a/components/slider/demo/input-number.md
+++ b/components/slider/demo/input-number.md
@ -6,7 +6,7 @@ title: 带输入框的滑块
 和 [数字输入框](/components/input-number/) 组件保持同步。

 ````jsx
-import { Slider, InputNumber } from 'antd';
+import { Slider, InputNumber, Row, Col } from 'antd';

 const IntegerStep = React.createClass({
  getInitialState() {
@ -21,15 +21,15 @@ const IntegerStep = React.createClass({
  },
  render() {
    return (
-      <div className="row">
-        <div className="col-12">
+      <Row>
+        <Col span={12}>
          <Slider min={1} max={20} onChange={this.onChange} value={this.state.inputValue} />
-        </div>
-        <div className="col-4">
+        </Col>
+        <Col span={4}>
          <InputNumber min={1} max={20} style={{ marginLeft: '16px' }}
            value={this.state.inputValue} onChange={this.onChange} />
-        </div>
-      </div>
+        </Col>
+      </Row>
    );
  }
 });
@ -47,15 +47,15 @@ const DecimalStep = React.createClass({
  },
  render() {
    return (
-      <div className="row">
-        <div className="col-12">
+      <Row>
+        <Col span={12}>
          <Slider min={0} max={1} onChange={this.onChange} value={this.state.inputValue} step={0.01} />
-        </div>
-        <div className="col-4">
+        </Col>
+        <Col span={4}>
          <InputNumber min={0} max={1} style={{ marginLeft: '16px' }} step={0.01}
            value={this.state.inputValue} onChange={this.onChange} />
-        </div>
-      </div>
+        </Col>
+      </Row>
    );
  }
 });
--- a/components/slider/style/index.js
+++ b/components/slider/style/index.js
@ -0,0 +1,5 @@
+import '../../style/index.less';
+import './index.less';
+
+// style dependencies
+import '../../tooltip/style';
--- a/components/slider/style/index.less
+++ b/components/slider/style/index.less
@ -1,5 +1,7 @@
-@slider-prefix-cls: ~"@{css-prefix}slider";
+@import "../../style/themes/default";
+@import "../../style/mixins/index";

+@slider-prefix-cls: ant-slider;
 // slider color
@slider-disabled-color: #ccc;
 // tooltip
--- a/components/spin/style/index.js
+++ b/components/spin/style/index.js
@ -0,0 +1,2 @@
+import '../../style/index.less';
+import './index.less';
--- a/components/spin/style/index.less
+++ b/components/spin/style/index.less
@ -1,11 +1,11 @@
-@spin-prefix-cls: ant-spin;
-@spin-dot-default            : #999;
-@spin-dot-size               : 8px;
-@spin-dot-size-sm            : @spin-dot-size / 2;
-@spin-dot-size-lg            : @spin-dot-size * 2;
+@import "../../style/themes/default";
+@import "../../style/mixins/index";

-// root of component
-// ------------------------------
+@spin-prefix-cls: ant-spin;
+@spin-dot-default: #999;
+@spin-dot-size: 8px;
+@spin-dot-size-sm: @spin-dot-size / 2;
+@spin-dot-size-lg: @spin-dot-size * 2;

 .@{spin-prefix-cls} {
  color: @primary-color;
@ -68,10 +68,10 @@
    background-color: @primary-color;
  }
  &-dot-second {
-    .animation-delay(200ms);
+    animation-delay: .2s;
  }
  &-dot-third {
-    .animation-delay(400ms);
+    animation-delay: .4s;
  }

  &-dot + &-dot {
@ -119,7 +119,7 @@
 }

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
-  /* IE10+*/
+  /* IE10+ */
  .ant-spin-nested-loading > .ant-spin-container {
    background: #fff;
    opacity: 0.5;
--- a/components/steps/style/index.js
+++ b/components/steps/style/index.js
@ -0,0 +1,2 @@
+import '../../style/index.less';
+import './index.less';
--- a/components/steps/style/index.less
+++ b/components/steps/style/index.less
@ -1,7 +1,7 @@
-@import "../mixins/index";
-
-@steps-prefix-cls: ~"@{css-prefix}steps";
+@import "../../style/themes/default";
+@import "../../style/mixins/index";

+@steps-prefix-cls: ant-steps;
@process-icon-color: @primary-color;
@process-title-color: #666;
@process-description-color: @process-title-color;
@ -171,7 +171,7 @@
    }
  }
  .@{steps-prefix-cls}-main {
-    margin-top: 3px;
+    margin-top: 2.5px;
  }
  .@{steps-prefix-cls}-title {
    font-size: 14px;
--- a/components/style/core/base.less
+++ b/components/style/core/base.less
@ -85,9 +85,6 @@ a {
 .clearfix {
  .clearfix();
 }
-.center-block {
-  .center-block();
-}
 .pull-left {
  float: left;
 }
--- a/components/style/core/iconfont.less
+++ b/components/style/core/iconfont.less
@ -1,5 +1,3 @@
-@import "../mixins/iconfont";
-
 // font-face
 // @icon-url： 字体源文件的地址
@font-face {
--- a/components/style/core/index.less
+++ b/components/style/core/index.less
@ -0,0 +1,5 @@
+@import "../themes/default";
+@import "../mixins/index";
+@import "base";
+@import "iconfont";
+@import "motion";
--- a/components/style/core/layouts.less
+++ b/components/style/core/layouts.less
--- a/components/style/core/motion.less
+++ b/components/style/core/motion.less
@ -0,0 +1,7 @@
+@import "../mixins/motion";
+@import "motion/fade";
+@import "motion/move";
+@import "motion/other";
+@import "motion/slide";
+@import "motion/swing";
+@import "motion/zoom";
--- a/components/style/core/motion/fade.less
+++ b/components/style/core/motion/fade.less
--- a/components/style/core/motion/move.less
+++ b/components/style/core/motion/move.less
--- a/components/style/core/motion/other.less
+++ b/components/style/core/motion/other.less
--- a/components/style/core/motion/slide.less
+++ b/components/style/core/motion/slide.less
--- a/components/style/core/motion/swing.less
+++ b/components/style/core/motion/swing.less
--- a/components/style/core/motion/zoom.less
+++ b/components/style/core/motion/zoom.less
--- a/components/style/core/normalize.less
+++ b/components/style/core/normalize.less
--- a/components/style/index.js
+++ b/components/style/index.js
@ -0,0 +1 @@
+import './index.less';
--- a/Show More
+++ b/Show More