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

.babelrc

@@ -0,0 +1,3 @@
+{
+  "presets": ["es2015", "react", "stage-0"]
+}

components/affix/style/index.js

@@ -0,0 +1,2 @@
+import '../../style/index.less';
+import './index.less';

components/affix/style/index.less

@@ -1,3 +1,5 @@
+@import "../../style/themes/default";
+
 .ant-affix {
   position: fixed;
   z-index: @zindex-affix;

components/alert/style/index.js

@@ -0,0 +1,2 @@
+import '../../style/index.less';
+import './index.less';

components/alert/style/index.less

@@ -1,7 +1,6 @@
-@import "../mixins/index";
+@import "../../style/themes/default";
 
-@alert-prefix-cls: ~"@{css-prefix}alert";
+@alert-prefix-cls: ant-alert;
-@alert-title-prefix-cls: ~"@{css-prefix}alert-with-description";
 
 .@{alert-prefix-cls} {
   position: relative;

components/badge/style/index.js

@@ -0,0 +1,2 @@
+import '../../style/index.less';
+import './index.less';

components/badge/style/index.less

@@ -1,5 +1,7 @@
-@badge-prefix-cls: ~"@{css-prefix}badge";
+@import "../../style/themes/default";
-@number-prefix-cls: ~"@{css-prefix}scroll-number";
+
+@badge-prefix-cls: ant-badge;
+@number-prefix-cls: ant-scroll-number;
 
 .@{badge-prefix-cls} {
   position: relative;

components/breadcrumb/style/index.js

@@ -0,0 +1,2 @@
+import '../../style/index.less';
+import './index.less';

components/breadcrumb/style/index.less

@@ -1,3 +1,5 @@
+@import "../../style/themes/default";
+
 @breadcrumb-prefix-cls: ant-breadcrumb;
 
 .@{breadcrumb-prefix-cls} {

components/button/style/index.js

@@ -0,0 +1,2 @@
+import '../../style/index.less';
+import './index.less';

components/button/style/index.less

@@ -1,5 +1,8 @@
-@import "../mixins/index";
+@import "../../style/themes/default";
-@btn-prefix-cls: ~"@{css-prefix}btn";
+@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;
   }

components/calendar/style/index.js

@@ -0,0 +1,6 @@
+import '../../style/index.less';
+import './index.less';
+
+// style dependencies
+import '../../select/style';
+import '../../radio/style';

components/calendar/style/index.less

@@ -1,3 +1,5 @@
+@import "../../style/themes/default";
+
 @full-calendar-prefix-cls: ant-fullcalendar;
 
 .@{full-calendar-prefix-cls} {

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);

components/card/style/index.js

@@ -0,0 +1,2 @@
+import '../../style/index.less';
+import './index.less';

components/card/style/index.less

@@ -1,5 +1,6 @@
-@card-prefix-cls: ~"@{css-prefix}card";
+@import "../../style/themes/default";
-@number-prefix-cls: ~"@{css-prefix}scroll-number";
+
+@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;

components/carousel/style/index.js

@@ -0,0 +1,2 @@
+import '../../style/index.less';
+import './index.less';

components/carousel/style/index.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;

components/cascader/style/index.js

@@ -0,0 +1,5 @@
+import '../../style/index.less';
+import './index.less';
+
+// style dependencies
+import '../../input/style';

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;
+      }
+    }
+  }
+}

components/checkbox/style/index.js

@@ -0,0 +1,2 @@
+import '../../style/index.less';
+import './index.less';

components/checkbox/style/index.less

@@ -0,0 +1,4 @@
+@import "../../style/themes/default";
+@import "./mixin";
+
+.antCheckboxFn();

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;
+    }
+  }
+}

components/checkbox/style/style/index.js

@@ -0,0 +1,2 @@
+import '../../style/index.less';
+import './index.less';

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);
         }
       }
     }

components/col/style/index.js

@@ -0,0 +1,2 @@
+import '../../style/index.less';
+import '../../layout/style/index.less';

components/collapse/style/index.js

@@ -0,0 +1,2 @@
+import '../../style/index.less';
+import './index.less';

components/collapse/style/index.less

@@ -1,3 +1,6 @@
+@import "../../style/themes/default";
+@import "../../style/mixins/index";
+
 @collapse-prefix-cls: ant-collapse;
 
 .collapse-close() {

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;
   }
 

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;
   }

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';

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";

components/dropdown/style/index.js

@@ -0,0 +1,5 @@
+import '../../style/index.less';
+import './index.less';
+
+// style dependencies
+import '../../button/style';

components/dropdown/style/index.less

@@ -1,5 +1,7 @@
-@import "../mixins/index";
+@import "../../style/themes/default";
-@dropdown-prefix-cls: ~"@{css-prefix}dropdown";
+@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);
     }
   }
 

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() {

components/form/style/index.js

@@ -0,0 +1,5 @@
+import '../../style/index.less';
+import './index.less';
+
+// style dependencies
+import '../../layout/style';

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 {
+.ant-input-group {
-  .input-group(~"@{css-prefix}input");
+  .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,
+.ant-radio-inline,
-.@{css-prefix}radio-vertical,
+.ant-radio-vertical,
-.@{css-prefix}checkbox-inline,
+.ant-checkbox-inline,
-.@{css-prefix}checkbox-vertical {
+.ant-checkbox-vertical {
   &.disabled,
   fieldset[disabled] & {
     cursor: @cursor-disabled;
   }
 }
 // These classes are used on elements with <label> descendants
-.@{css-prefix}radio,
+.ant-radio,
-.@{css-prefix}checkbox {
+.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
+// You should wrap labels and controls in .@{form-prefix-cls}-item for optimum spacing
-.@{css-prefix}form-item {
+.@{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,
+.@{form-prefix-cls}-explain,
-.@{css-prefix}form-extra {
+.@{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,
+  .ant-input,
-  .@{css-prefix}input-group .@{css-prefix}input,
+  .ant-input-group .ant-input,
-  .@{css-prefix}input-group .@{css-prefix}input-group-addon {
+  .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,
+  .ant-radio-inline,
-  .@{css-prefix}checkbox-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,
+  .ant-checkbox-vertical,
-  .@{css-prefix}radio-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 {
+.ant-input-group-wrap {
-  .@{select-prefix-cls}-selection {
+  .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 {
+.@{form-prefix-cls}-horizontal {
-  .@{css-prefix}form-item {
+  .@{form-prefix-cls}-item {
     .make-row;
   }
 
-  .@{css-prefix}radio-inline,
+  .ant-radio-inline,
-  .@{css-prefix}checkbox-inline,
+  .ant-checkbox-inline,
-  .@{css-prefix}input {
+  .ant-input {
     vertical-align: baseline;
   }
 }
 
 //== Inline Form
-.@{css-prefix}form-inline {
+.@{form-prefix-cls}-inline {
-  .@{css-prefix}form-item {
+  .@{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
+  // Fix https://github.comdesigndesign/issues/1040
-  .@{css-prefix}form-explain {
+  .@{form-prefix-cls}-explain {
     position: absolute;
   }
 }
 
-.@{css-prefix}form-horizontal,
+.@{form-prefix-cls}-horizontal,
-.@{css-prefix}form-inline {
+.@{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
-  .@{select-prefix-cls} {
+  .ant-select {
     &-selection {
       border-color: @warning-color;
       box-shadow: 0 0 0 2px fade(@warning-color, 20%);
@@ -362,18 +364,18 @@ form {
     }
   }
 
-  // ant-datepicker
+  //datepicker
-  .@{calendar-prefix-cls}-picker-icon:after {
+  .ant-calendar-picker-icon:after {
     color: @warning-color;
   }
 
-  // ant-timepicker
+  //timepicker
-  .@{timepicker-prefix-cls}-icon:after {
+  .ant-time-picker-icon:after {
     color: @warning-color;
   }
 
-  // ant-input-number
+  //input-number
-  .@{input-number-prefix-cls} {
+  .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
-  .@{select-prefix-cls} {
+  .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
+  //datepicker
-  .@{calendar-prefix-cls}-picker-icon:after {
+  .ant-calendar-picker-icon:after {
     color: @error-color;
   }
 
-  // ant-timepicker
+  //timepicker
-  .@{timepicker-prefix-cls}-picker-icon:after {
+  .ant-time-picker-picker-icon:after {
     color: @error-color;
   }
 
-  // ant-input-number
+  //input-number
-  .@{input-number-prefix-cls} {
+  .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 {
+.advanced-search-form {
-  .@{css-prefix}form-item {
+  .@{form-prefix-cls}-item {
     margin-bottom: 16px;
   }
-  .@{css-prefix}input,
+  .ant-input,
-  .@{css-prefix}input-group .@{css-prefix}input,
+  .ant-input-group .ant-input,
-  .@{css-prefix}input-group .@{css-prefix}input-group-addon {
+  .ant-input-group .ant-input-group-addon {
     height: 28px;
   }
 }

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,
+  .ant-form-explain,
-  .@{css-prefix}form-split {
+  .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

components/icon/style/index.js

@@ -0,0 +1 @@
+import '../../style/index.less';

components/input-number/style/index.js

@@ -0,0 +1,2 @@
+import '../../style/index.less';
+import './index.less';

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";
+@input-number-prefix-cls: ant-input-number;
-@import "../mixins/input";
 
 .handler-disabled() {
   opacity: 0.72;

components/input/style/index.js

@@ -0,0 +1,2 @@
+import '../../style/index.less';
+import './index.less';

components/input/style/index.less

@@ -0,0 +1,8 @@
+@import "../../style/themes/default";
+@import "../../style/mixins/index";
+@import "./mixin";
+
+// Input styles
+.ant-input {
+  .input;
+}

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;

components/layout/style/index.js

@@ -0,0 +1,2 @@
+import '../../style/index.less';
+import './index.less';

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);
+}

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() {

components/menu/style/index.js

@@ -0,0 +1,2 @@
+import '../../style/index.less';
+import './index.less';

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} {

components/message/style/index.js

@@ -0,0 +1,2 @@
+import '../../style/index.less';
+import './index.less';

components/message/style/index.less

@@ -1,3 +1,5 @@
+@import "../../style/themes/default";
+
 @message-prefix-cls: ant-message;
 
 .@{message-prefix-cls} {

components/modal/style/index.js

@@ -0,0 +1,5 @@
+import '../../style/index.less';
+import './index.less';
+
+// style dependencies
+import '../../button/style';

components/modal/style/index.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) {

components/notification/style/index.js

@@ -0,0 +1,2 @@
+import '../../style/index.less';
+import './index.less';

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";
+@notification-prefix-cls: ant-notification;
-
+@notification-width: 335px;
-@notice-width: 335px;
+@notification-padding: 16px;
-@notice-padding: 16px;
+@notification-margin-bottom: 10px;
-@notice-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;
+    margin-bottom: @notification-margin-bottom;
-    padding-top: @notice-padding;
+    padding-top: @notification-padding;
-    padding-bottom: @notice-padding;
+    padding-bottom: @notification-padding;
     max-height: 150px;
   }
   100% {

components/pagination/style/index.js

@@ -0,0 +1,6 @@
+import '../../style/index.less';
+import './index.less';
+
+// style dependencies
+import '../../select/style';
+import '../../input/style';

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} {

components/popconfirm/style/index.js

@@ -0,0 +1,2 @@
+import '../../style/index.less';
+import '../../popover/style';

components/popover/style/index.js

@@ -0,0 +1,2 @@
+import '../../style/index.less';
+import './index.less';

components/popover/style/index.less

@@ -1,13 +1,7 @@
-@import "../mixins/index";
+@import "../../style/themes/default";
-@popover-prefix-cls: ~"@{css-prefix}popover";
+@import "../../style/mixins/index";
 
-//
+@popover-prefix-cls: ant-popover;
-// Popovers
-// --------------------------------------------------
-
-//== Popovers
-//
-//##
 
 //** Popover body background color
 @popover-bg:                          #fff;

components/progress/style/index.js

@@ -0,0 +1,2 @@
+import '../../style/index.less';
+import './index.less';

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} {

components/radio/style/index.js

@@ -0,0 +1,2 @@
+import '../../style/index.less';
+import './index.less';

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;

components/rate/style/index.js

@@ -0,0 +1,2 @@
+import '../../style/index.less';
+import './index.less';

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,

components/row/style/index.js

@@ -0,0 +1,2 @@
+import '../../style/index.less';
+import '../../layout/style/index.less';

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>

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) {

components/select/style/index.js

@@ -0,0 +1,2 @@
+import '../../style/index.less';
+import './index.less';

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,25 +142,14 @@
       padding-right: 24px;
       line-height: 26px;
     }
+  }
 
-    .@{select-prefix-cls}-selection-selected-value {
+  &-open&-show-search &-selection--single &-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;
-    }
-  }
-
   &-lg {
     .ant-select-selection--single {
       height: 32px;
@@ -215,7 +203,7 @@
     position: relative;
   }
 
-  &-search__field__placeholder {
+  &-selection__placeholder {
     position: absolute;
     top: 50%;
     left: 9px;
@@ -262,12 +250,14 @@
       text-overflow: ellipsis;
       padding-left: 6px;
       padding-bottom: 4px;
-      > ul > li {
+    }
+
+    > 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 {
       background-color: #f3f3f3;
@@ -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 {

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">
+      <Row>
-        <div className="col-12">
+        <Col span={12}>
           <Slider min={1} max={20} onChange={this.onChange} value={this.state.inputValue} />
-        </div>
+        </Col>
-        <div className="col-4">
+        <Col span={4}>
           <InputNumber min={1} max={20} style={{ marginLeft: '16px' }}
             value={this.state.inputValue} onChange={this.onChange} />
-        </div>
+        </Col>
-      </div>
+      </Row>
     );
   }
 });
@@ -47,15 +47,15 @@ const DecimalStep = React.createClass({
   },
   render() {
     return (
-      <div className="row">
+      <Row>
-        <div className="col-12">
+        <Col span={12}>
           <Slider min={0} max={1} onChange={this.onChange} value={this.state.inputValue} step={0.01} />
-        </div>
+        </Col>
-        <div className="col-4">
+        <Col span={4}>
           <InputNumber min={0} max={1} style={{ marginLeft: '16px' }} step={0.01}
             value={this.state.inputValue} onChange={this.onChange} />
-        </div>
+        </Col>
-      </div>
+      </Row>
     );
   }
 });

components/slider/style/index.js

@@ -0,0 +1,5 @@
+import '../../style/index.less';
+import './index.less';
+
+// style dependencies
+import '../../tooltip/style';

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

components/spin/style/index.js

@@ -0,0 +1,2 @@
+import '../../style/index.less';
+import './index.less';

components/spin/style/index.less

@@ -1,11 +1,11 @@
-@spin-prefix-cls: ant-spin;
+@import "../../style/themes/default";
-@spin-dot-default            : #999;
+@import "../../style/mixins/index";
-@spin-dot-size               : 8px;
-@spin-dot-size-sm            : @spin-dot-size / 2;
-@spin-dot-size-lg            : @spin-dot-size * 2;
 
-// 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;

components/steps/style/index.js

@@ -0,0 +1,2 @@
+import '../../style/index.less';
+import './index.less';

components/steps/style/index.less

@@ -1,7 +1,7 @@
-@import "../mixins/index";
+@import "../../style/themes/default";
-
+@import "../../style/mixins/index";
-@steps-prefix-cls: ~"@{css-prefix}steps";
 
+@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;

components/style/core/base.less

@@ -85,9 +85,6 @@ a {
 .clearfix {
   .clearfix();
 }
-.center-block {
-  .center-block();
-}
 .pull-left {
   float: left;
 }

components/style/core/iconfont.less

@@ -1,5 +1,3 @@
-@import "../mixins/iconfont";
-
 // font-face
 // @icon-url： 字体源文件的地址
 @font-face {

components/style/core/index.less

@@ -0,0 +1,5 @@
+@import "../themes/default";
+@import "../mixins/index";
+@import "base";
+@import "iconfont";
+@import "motion";

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";

components/style/index.js

@@ -0,0 +1 @@
+import './index.less';