css modularize (ant-design#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';

style/components/affix.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';

style/components/alert.less → 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;

components/badge/style/index.js

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

style/components/badge.less → 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;

components/breadcrumb/style/index.js

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

style/components/breadcrumb.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';

style/components/button.less → 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;
   }

components/calendar/style/index.js

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

style/components/calendar.less → 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';

style/components/card.less → components/card/style/index.less

@@ -1,13 +1,14 @@
-@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;
   border-radius: @border-radius-sm;
   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';

style/components/carousel/slick-theme.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;
 
-  // Arrows
+    &: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';