From c15a840bcf795435a891074d36d6c0f54f88cab0 Mon Sep 17 00:00:00 2001
From: zhujun24 <zhujun87654321@gmail.com>
Date: Thu, 20 Aug 2015 15:28:57 +0800
Subject: [PATCH 1/9] input-number arrow

---
 style/components/collapse.less    | 4 ++--
 style/components/inputNumber.less | 4 +++-
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/style/components/collapse.less b/style/components/collapse.less
index abaf4a6804..5240eb6535 100644
--- a/style/components/collapse.less
+++ b/style/components/collapse.less
@@ -52,8 +52,8 @@
     background-color: #fff;
 
     & > &-box {
-      margin-top: 16px;
-      margin-bottom: 16px;
+      padding-top: 16px;
+      padding-bottom: 16px;
     }
   }
 
diff --git a/style/components/inputNumber.less b/style/components/inputNumber.less
index e6143d94b7..86d6f58f5b 100644
--- a/style/components/inputNumber.less
+++ b/style/components/inputNumber.less
@@ -143,9 +143,10 @@
     cursor: pointer;
     &-inner {
       top: 1px;
+      .ie-rotate(2);
       &:before {
+        text-align: center;
         content: "\e600";
-        .ie-rotate(2);
         transform: rotate(180deg);
         -webkit-transform-origin: 47.5% 51%; /* fix chrome position */
       }
@@ -156,6 +157,7 @@
     cursor: pointer;
     &-inner {
       &:before {
+        text-align: center;
         content: "\e600";
       }
     }

From 6bdf0c4974461fc992d6daf17efed7f035c05248 Mon Sep 17 00:00:00 2001
From: zhujun24 <zhujun87654321@gmail.com>
Date: Thu, 20 Aug 2015 15:38:57 +0800
Subject: [PATCH 2/9] fixed inputNumber arrow, ref #138

---
 style/components/inputNumber.less | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/style/components/inputNumber.less b/style/components/inputNumber.less
index e6143d94b7..86d6f58f5b 100644
--- a/style/components/inputNumber.less
+++ b/style/components/inputNumber.less
@@ -143,9 +143,10 @@
     cursor: pointer;
     &-inner {
       top: 1px;
+      .ie-rotate(2);
       &:before {
+        text-align: center;
         content: "\e600";
-        .ie-rotate(2);
         transform: rotate(180deg);
         -webkit-transform-origin: 47.5% 51%; /* fix chrome position */
       }
@@ -156,6 +157,7 @@
     cursor: pointer;
     &-inner {
       &:before {
+        text-align: center;
         content: "\e600";
       }
     }

From a2c573cb5a32687ff61719e25968344a3a78cd88 Mon Sep 17 00:00:00 2001
From: zhujun24 <zhujun87654321@gmail.com>
Date: Thu, 20 Aug 2015 15:39:36 +0800
Subject: [PATCH 3/9] fixed collape margin, ref #138

---
 style/components/collapse.less | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/style/components/collapse.less b/style/components/collapse.less
index abaf4a6804..5240eb6535 100644
--- a/style/components/collapse.less
+++ b/style/components/collapse.less
@@ -52,8 +52,8 @@
     background-color: #fff;
 
     & > &-box {
-      margin-top: 16px;
-      margin-bottom: 16px;
+      padding-top: 16px;
+      padding-bottom: 16px;
     }
   }
 

From d2e7253c51ca9269cad37b95c259c024cf28e5ff Mon Sep 17 00:00:00 2001
From: yiminghe <yiminghe@gmail.com>
Date: Thu, 20 Aug 2015 16:47:41 +0800
Subject: [PATCH 4/9] fix tabs style

---
 style/components/tabs.less | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/style/components/tabs.less b/style/components/tabs.less
index b4f6b58e01..8d7e66e0cf 100644
--- a/style/components/tabs.less
+++ b/style/components/tabs.less
@@ -98,8 +98,10 @@
 
   &-tab-prev {
     left: 0;
-    transform: rotate(180deg);
-    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
+    &-icon {
+      transform: rotate(180deg);
+      filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
+    }
     &-icon:before {
       content: "\e611";
     }

From f0931ece66ab70cbc9bbb04fff608a2a5428c94a Mon Sep 17 00:00:00 2001
From: afc163 <afc163@gmail.com>
Date: Thu, 20 Aug 2015 16:55:42 +0800
Subject: [PATCH 5/9] Add lesslint and fix less code style

---
 .lesslintrc                                  |  6 ++
 package.json                                 |  2 +
 style/README.md                              |  2 +-
 style/components/alert.less                  |  6 +-
 style/components/breadcrumb.less             |  4 +-
 style/components/button.less                 | 16 ++--
 style/components/carousel/slick-theme.less   | 15 ++--
 style/components/carousel/slick.less         |  1 -
 style/components/checkbox.less               | 52 ++++++------
 style/components/collapse.less               | 15 ++--
 style/components/confirm.less                | 12 +--
 style/components/datepicker.less             |  4 +-
 style/components/datepicker/Calendar.less    | 66 +++++++--------
 style/components/datepicker/DecadePanel.less | 36 ++++----
 style/components/datepicker/MonthPanel.less  | 26 +++---
 style/components/datepicker/Picker.less      | 10 +--
 style/components/datepicker/Time.less        |  6 +-
 style/components/datepicker/TimePanel.less   | 24 +++---
 style/components/datepicker/YearPanel.less   | 36 ++++----
 style/components/dialog.less                 |  4 +-
 style/components/dialog/Dialog.less          |  4 +-
 style/components/dialog/Mask.less            | 26 +-----
 style/components/dropdown.less               |  6 +-
 style/components/form.less                   | 21 +++--
 style/components/inputNumber.less            | 16 ++--
 style/components/menu.less                   | 40 ++++-----
 style/components/message.less                |  4 +-
 style/components/notification.less           | 24 +++---
 style/components/pagination.less             |  6 +-
 style/components/popover.less                |  6 +-
 style/components/progress.less               | 30 +++----
 style/components/radio.less                  | 40 ++++-----
 style/components/select.less                 | 68 +++++++--------
 style/components/slider.less                 | 14 ++--
 style/components/steps.less                  | 88 ++++++++++----------
 style/components/switch.less                 |  8 +-
 style/components/table.less                  | 22 ++---
 style/components/tabs.less                   | 10 +--
 style/components/tag.less                    |  4 +-
 style/components/tooltip.less                | 12 +--
 style/components/tree.less                   | 30 +++----
 style/components/upload.less                 | 22 ++---
 style/mixins/form.less                       |  2 +-
 style/themes/default/custom.less             |  6 +-
 44 files changed, 420 insertions(+), 432 deletions(-)
 create mode 100644 .lesslintrc

diff --git a/.lesslintrc b/.lesslintrc
new file mode 100644
index 0000000000..db9004bc8b
--- /dev/null
+++ b/.lesslintrc
@@ -0,0 +1,6 @@
+{
+  "import": false,
+  "require-newline": false,
+  "leading-zero": false,
+  "single-comment": false
+}
diff --git a/package.json b/package.json
index 2e949b453b..198b4d6be9 100644
--- a/package.json
+++ b/package.json
@@ -80,6 +80,7 @@
     "json-loader": "^0.5.1",
     "less": "~2.5.1",
     "less-loader": "^2.2.0",
+    "lesslint": "^0.1.7",
     "lodash": "^3.10.0",
     "nico-jsx": "~0.5.8",
     "precommit-hook": "^1.0.7",
@@ -93,6 +94,7 @@
     "clean": "rm -rf _site dist",
     "deploy": "rm -rf node_modules && node scripts/install.js && npm run clean && webpack && webpack --config webpack.config.min.js && NODE_ENV=PRODUCTION nico build && node scripts/deploy.js",
     "lint": "eslint components index.js --ext '.js,.jsx'",
+    "lesslint": "lesslint style",
     "test": "webpack && npm run lint",
     "prepublish": "npm run babel && rm -rf dist && webpack --config webpack.config.production.js && node scripts/prenpm.js"
   },
diff --git a/style/README.md b/style/README.md
index 97edb71e93..00e02050d4 100644
--- a/style/README.md
+++ b/style/README.md
@@ -18,4 +18,4 @@ ant-design 样式库
 
 各个组件中如要自定义类名前缀，请误重名变量，可参照如下定义：
 
-`@btnPrefixClass: ~"@{css-prefix}btn";`
+`@btn-prefix-cls: ~"@{css-prefix}btn";`
diff --git a/style/components/alert.less b/style/components/alert.less
index 118cfefa74..795ba4fb3a 100644
--- a/style/components/alert.less
+++ b/style/components/alert.less
@@ -1,9 +1,9 @@
 @import "../mixins/index";
 
-@alertPrefixClass: ~"@{css-prefix}alert";
-@alertTitlePrefixClass: ~"@{css-prefix}alert-with-description";
+@alert-prefix-cls: ~"@{css-prefix}alert";
+@alert-title-prefix-cls: ~"@{css-prefix}alert-with-description";
 
-.@{alertPrefixClass} {
+.@{alert-prefix-cls} {
   position: relative;
   padding: 8px 8px 8px 16px;
   border-radius: @border-radius-base;
diff --git a/style/components/breadcrumb.less b/style/components/breadcrumb.less
index b7ec5f4783..1511f21975 100644
--- a/style/components/breadcrumb.less
+++ b/style/components/breadcrumb.less
@@ -1,6 +1,6 @@
-@breadcrumbPrefixCls: ant-breadcrumb;
+@breadcrumb-prefix-cls: ant-breadcrumb;
 
-.@{breadcrumbPrefixCls} {
+.@{breadcrumb-prefix-cls} {
   color: #999;
   font-size: 12px;
 
diff --git a/style/components/button.less b/style/components/button.less
index cd358e7550..6e2ad21dc1 100644
--- a/style/components/button.less
+++ b/style/components/button.less
@@ -1,31 +1,31 @@
 @import "../mixins/index";
-@btnPrefixClass: ~"@{css-prefix}btn";
+@btn-prefix-cls: ~"@{css-prefix}btn";
 
 // Button styles
 // -----------------------------
-.@{btnPrefixClass} {
+.@{btn-prefix-cls} {
   .btn;
   .btn-default;
 
   &-primary {
     .btn-primary;
 
-    .@{btnPrefixClass}-group &:not(:first-child):not(:last-child) {
+    .@{btn-prefix-cls}-group &:not(:first-child):not(:last-child) {
       border-right-color: @btn-group-border;
       border-left-color: @btn-group-border;
     }
 
-    .@{btnPrefixClass}-group &:first-child {
+    .@{btn-prefix-cls}-group &:first-child {
       &:not(:last-child) {
         border-right-color: @btn-group-border;
       }
     }
 
-    .@{btnPrefixClass}-group &:last-child:not(:first-child) {
+    .@{btn-prefix-cls}-group &:last-child:not(:first-child) {
       border-left-color: @btn-group-border;
     }
 
-    .@{btnPrefixClass}-group & + .@{btnPrefixClass} {
+    .@{btn-prefix-cls}-group & + .@{btn-prefix-cls} {
       border-left-color: @btn-group-border;
     }
   }
@@ -35,7 +35,7 @@
   }
 
   &-circle, &-circle-outline {
-    .btn-circle(@btnPrefixClass);
+    .btn-circle(@btn-prefix-cls);
   }
 
   &-circle-outline {
@@ -73,6 +73,6 @@
   }
 
   &-group {
-    .btn-group(@btnPrefixClass);
+    .btn-group(@btn-prefix-cls);
   }
 }
diff --git a/style/components/carousel/slick-theme.less b/style/components/carousel/slick-theme.less
index d5124f26f6..fcb5557412 100644
--- a/style/components/carousel/slick-theme.less
+++ b/style/components/carousel/slick-theme.less
@@ -1,7 +1,6 @@
-
 .ant-carousel {
 
-  /* Arrows */
+  // Arrows
 
   .slick-prev,
   .slick-next {
@@ -9,8 +8,8 @@
     display: block;
     height: 20px;
     width: 20px;
-    line-height: 0px;
-    font-size: 0px;
+    line-height: 0;
+    font-size: 0;
     cursor: pointer;
     background: transparent;
     color: transparent;
@@ -46,7 +45,7 @@
     }
   }
 
-  /* Dots */
+  // Dots
 
   .slick-slider {
     padding-bottom: 45px;
@@ -54,7 +53,7 @@
 
   .slick-dots {
     position: absolute;
-    bottom: 0px;
+    bottom: 0;
     list-style: none;
     display: block;
     text-align: center;
@@ -75,8 +74,8 @@
         height: 20px;
         width: 20px;
         outline: none;
-        line-height: 0px;
-        font-size: 0px;
+        line-height: 0;
+        font-size: 0;
         color: transparent;
         padding: 5px;
         cursor: pointer;
diff --git a/style/components/carousel/slick.less b/style/components/carousel/slick.less
index e5384c8034..516114e4fb 100644
--- a/style/components/carousel/slick.less
+++ b/style/components/carousel/slick.less
@@ -1,4 +1,3 @@
-
 .ant-carousel {
 
   .slick-slider {
diff --git a/style/components/checkbox.less b/style/components/checkbox.less
index 8670be4045..294d623359 100644
--- a/style/components/checkbox.less
+++ b/style/components/checkbox.less
@@ -1,10 +1,12 @@
 .antCheckboxFn();
-.antCheckboxFn(@checkboxPrefixCls: ant-checkbox) {
-@checkboxWrapPrefixCls: @checkboxPrefixCls;
-@checkboxInnerPrefixCls: ~"@{checkboxWrapPrefixCls}-inner";
 
-/* 一般状态 */
-.@{checkboxWrapPrefixCls} {
+.antCheckboxFn(@checkbox-prefix-cls: ant-checkbox) {
+
+@checkbox-wrap-prefix-cls: @checkbox-prefix-cls;
+@checkbox-inner-prefix-cls: ~"@{checkbox-wrap-prefix-cls}-inner";
+
+// 一般状态
+.@{checkbox-wrap-prefix-cls} {
   white-space: nowrap;
   cursor: pointer;
   outline: none;
@@ -14,7 +16,7 @@
   vertical-align: middle;
 
   &:hover {
-    .@{checkboxInnerPrefixCls} {
+    .@{checkbox-inner-prefix-cls} {
       border-color: #bcbcbc;
     }
   }
@@ -28,7 +30,7 @@
       display: table;
       width: 5px;
       height: 8px;
-      border: 2px solid #ffffff;
+      border: 2px solid #fff;
       border-top: 0;
       border-left: 0;
       content: ' ';
@@ -45,7 +47,7 @@
     border-style: solid;
     border-radius: 3px;
     border-color: #d9d9d9;
-    background-color: #ffffff;
+    background-color: #fff;
     transition: border-color 0.1s @ease-in-out-back, background-color 0.1s @ease-in-out-back;
   }
 
@@ -61,9 +63,9 @@
   }
 }
 
-/* 半选状态 */
-.@{checkboxWrapPrefixCls}-indeterminate {
-  .@{checkboxInnerPrefixCls} {
+// 半选状态
+.@{checkbox-wrap-prefix-cls}-indeterminate {
+  .@{checkbox-inner-prefix-cls} {
     border-color: @primary-color;
     background-color: @primary-color;
     &:after {
@@ -77,16 +79,16 @@
     }
   }
 }
-/* 选中状态 */
-.@{checkboxWrapPrefixCls}-checked {
+// 选中状态
+.@{checkbox-wrap-prefix-cls}-checked {
 
   &:hover {
-    .@{checkboxInnerPrefixCls} {
+    .@{checkbox-inner-prefix-cls} {
       border-color: @primary-color;
     }
   }
 
-  .@{checkboxInnerPrefixCls} {
+  .@{checkbox-inner-prefix-cls} {
     border-color: @primary-color;
     background-color: @primary-color;
 
@@ -98,7 +100,7 @@
       display: table;
       width: 5px;
       height: 8px;
-      border: 2px solid #ffffff;
+      border: 2px solid #fff;
       border-top: 0;
       border-left: 0;
       content: ' ';
@@ -107,34 +109,34 @@
   }
 }
 
-.@{checkboxWrapPrefixCls}-disabled {
+.@{checkbox-wrap-prefix-cls}-disabled {
 
-  &.@{checkboxWrapPrefixCls}-checked {
+  &.@{checkbox-wrap-prefix-cls}-checked {
 
     &:hover {
-      .@{checkboxInnerPrefixCls} {
+      .@{checkbox-inner-prefix-cls} {
         border-color: #d9d9d9;
       }
     }
 
-    .@{checkboxInnerPrefixCls} {
+    .@{checkbox-inner-prefix-cls} {
       background-color: #f3f3f3;
       border-color: #d9d9d9;
 
       &:after {
         animation-name: none;
-        border-color: #cccccc;
+        border-color: #ccc;
       }
     }
   }
 
   &:hover {
-    .@{checkboxInnerPrefixCls} {
+    .@{checkbox-inner-prefix-cls} {
       border-color: #d9d9d9;
     }
   }
 
-  .@{checkboxInnerPrefixCls} {
+  .@{checkbox-inner-prefix-cls} {
     border-color: #d9d9d9;
     background-color: #f3f3f3;
     &:after {
@@ -143,12 +145,12 @@
     }
   }
 
-  .@{checkboxInnerPrefixCls}-input {
+  .@{checkbox-inner-prefix-cls}-input {
     cursor: default;
   }
 }
 
-.@{checkboxWrapPrefixCls} + span {
+.@{checkbox-wrap-prefix-cls} + span {
   margin-left: 8px;
 }
 
diff --git a/style/components/collapse.less b/style/components/collapse.less
index abaf4a6804..720942e012 100644
--- a/style/components/collapse.less
+++ b/style/components/collapse.less
@@ -1,5 +1,4 @@
-@prefixCls: ant-collapse;
-@borderStyle: 1px solid #d9d9d9;
+@collapse-prefix-cls: ant-collapse;
 
 #arrow {
   .close() {
@@ -10,18 +9,18 @@
   }
 }
 
-.@{prefixCls} {
+.@{collapse-prefix-cls} {
   background-color: #f4f4f4;
   border-radius: 3px;
-  border: @borderStyle;
+  border: 1px solid #d9d9d9;
 
   & > &-item {
-    border-top: @borderStyle;
+    border-top: 1px solid #d9d9d9;
     &:first-child {
       border-top: none;
     }
 
-    > .@{prefixCls}-header {
+    > .@{collapse-prefix-cls}-header {
       height: 38px;
       line-height: 38px;
       padding-left: 16px;
@@ -58,7 +57,7 @@
   }
 
   &-item:last-child {
-    > .@{prefixCls}-content {
+    > .@{collapse-prefix-cls}-content {
       border-radius: 0 0 3px 3px;
     }
   }
@@ -67,7 +66,7 @@
   }
 
   & > &-item-active {
-    > .@{prefixCls}-header {
+    > .@{collapse-prefix-cls}-header {
 
       &:before {
         #arrow > .open();
diff --git a/style/components/confirm.less b/style/components/confirm.less
index a9fa33dbb8..f9094f2faf 100644
--- a/style/components/confirm.less
+++ b/style/components/confirm.less
@@ -1,6 +1,6 @@
-@confirmPrefixCls: ant-confirm;
+@confirm-prefix-cls: ant-confirm;
 
-.@{confirmPrefixCls} {
+.@{confirm-prefix-cls} {
 
   .ant-modal-header {
     display: none;
@@ -10,14 +10,14 @@
     padding: 30px 40px;
   }
 
-  .@{confirmPrefixCls}-body {
-    .@{confirmPrefixCls}-title {
+  .@{confirm-prefix-cls}-body {
+    .@{confirm-prefix-cls}-title {
       color: @text-color;
       font-weight: bold;
       font-size: 14px;
     }
 
-    .@{confirmPrefixCls}-content {
+    .@{confirm-prefix-cls}-content {
       margin-left: 37px;
       font-size: @font-size-base;
       color: @text-color;
@@ -39,7 +39,7 @@
     }
   }
 
-  .@{confirmPrefixCls}-btns {
+  .@{confirm-prefix-cls}-btns {
     margin-top: 30px;
     float: right;
 
diff --git a/style/components/datepicker.less b/style/components/datepicker.less
index 6ff05f9a26..1792393f08 100644
--- a/style/components/datepicker.less
+++ b/style/components/datepicker.less
@@ -1,6 +1,6 @@
-@prefixCalendarClass: ant-calendar;
+@calendar-prefix-cls: ant-calendar;
 
-.@{prefixCalendarClass} {
+.@{calendar-prefix-cls} {
   box-sizing: border-box;
   * {
     box-sizing: border-box;
diff --git a/style/components/datepicker/Calendar.less b/style/components/datepicker/Calendar.less
index 1be6170e4f..5008798940 100644
--- a/style/components/datepicker/Calendar.less
+++ b/style/components/datepicker/Calendar.less
@@ -1,4 +1,4 @@
-.calendarPanelHeader(@prefixCalendarClass) {
+.calendarPanelHeader(@calendar-prefix-cls) {
   padding: 0 10px;
   height: 34px;
   line-height: 34px;
@@ -10,32 +10,32 @@
     color: @link-hover-color;
   }
 
-  .@{prefixCalendarClass}-century-select,
-  .@{prefixCalendarClass}-decade-select,
-  .@{prefixCalendarClass}-year-select,
-  .@{prefixCalendarClass}-month-select {
-    padding: 0px 2px;
+  .@{calendar-prefix-cls}-century-select,
+  .@{calendar-prefix-cls}-decade-select,
+  .@{calendar-prefix-cls}-year-select,
+  .@{calendar-prefix-cls}-month-select {
+    padding: 0 2px;
     font-weight: bold;
     display: inline-block;
     color: #666;
     line-height: 34px;
   }
 
-  .@{prefixCalendarClass}-century-select-arrow,
-  .@{prefixCalendarClass}-decade-select-arrow,
-  .@{prefixCalendarClass}-year-select-arrow,
-  .@{prefixCalendarClass}-month-select-arrow {
+  .@{calendar-prefix-cls}-century-select-arrow,
+  .@{calendar-prefix-cls}-decade-select-arrow,
+  .@{calendar-prefix-cls}-year-select-arrow,
+  .@{calendar-prefix-cls}-month-select-arrow {
     display: none;
   }
 
-  .@{prefixCalendarClass}-prev-century-btn,
-  .@{prefixCalendarClass}-next-century-btn,
-  .@{prefixCalendarClass}-prev-decade-btn,
-  .@{prefixCalendarClass}-next-decade-btn,
-  .@{prefixCalendarClass}-prev-month-btn,
-  .@{prefixCalendarClass}-next-month-btn,
-  .@{prefixCalendarClass}-prev-year-btn,
-  .@{prefixCalendarClass}-next-year-btn {
+  .@{calendar-prefix-cls}-prev-century-btn,
+  .@{calendar-prefix-cls}-next-century-btn,
+  .@{calendar-prefix-cls}-prev-decade-btn,
+  .@{calendar-prefix-cls}-next-decade-btn,
+  .@{calendar-prefix-cls}-prev-month-btn,
+  .@{calendar-prefix-cls}-next-month-btn,
+  .@{calendar-prefix-cls}-prev-year-btn,
+  .@{calendar-prefix-cls}-next-year-btn {
     position: absolute;
     top: 0;
     color: #999;
@@ -46,28 +46,28 @@
     line-height: 34px;
   }
 
-  .@{prefixCalendarClass}-prev-century-btn,
-  .@{prefixCalendarClass}-prev-decade-btn,
-  .@{prefixCalendarClass}-prev-year-btn {
+  .@{calendar-prefix-cls}-prev-century-btn,
+  .@{calendar-prefix-cls}-prev-decade-btn,
+  .@{calendar-prefix-cls}-prev-year-btn {
     left: 7px;
   }
 
-  .@{prefixCalendarClass}-next-century-btn,
-  .@{prefixCalendarClass}-next-decade-btn,
-  .@{prefixCalendarClass}-next-year-btn {
+  .@{calendar-prefix-cls}-next-century-btn,
+  .@{calendar-prefix-cls}-next-decade-btn,
+  .@{calendar-prefix-cls}-next-year-btn {
     right: 7px;
   }
 
-  .@{prefixCalendarClass}-prev-month-btn {
+  .@{calendar-prefix-cls}-prev-month-btn {
     left: 29px;
   }
 
-  .@{prefixCalendarClass}-next-month-btn {
+  .@{calendar-prefix-cls}-next-month-btn {
     right: 29px;
   }
 }
 
-.@{prefixCalendarClass} {
+.@{calendar-prefix-cls} {
   position: relative;
   outline: none;
   width: 253px;
@@ -90,7 +90,7 @@
   }
 
   &-header {
-    .calendarPanelHeader(@prefixCalendarClass);
+    .calendarPanelHeader(@calendar-prefix-cls);
   }
 
   &-calendar-body {
@@ -118,14 +118,14 @@
     width: 33px;
     padding: 6px 0;
     text-align: center;
-    .@{prefixCalendarClass}-column-header-inner {
+    .@{calendar-prefix-cls}-column-header-inner {
       display: block;
       font-weight: normal;
     }
   }
 
   &-week-number-header {
-    .@{prefixCalendarClass}-column-header-inner {
+    .@{calendar-prefix-cls}-column-header-inner {
       display: none;
     }
   }
@@ -215,8 +215,8 @@
     display: inline-block;
   }
 
-  .@{prefixCalendarClass}-today-btn,
-  .@{prefixCalendarClass}-clear-btn {
+  .@{calendar-prefix-cls}-today-btn,
+  .@{calendar-prefix-cls}-clear-btn {
     display: inline-block;
     text-align: center;
     margin: 0 10px;
@@ -227,7 +227,7 @@
     }
   }
 
-  .@{prefixCalendarClass}-ok-btn {
+  .@{calendar-prefix-cls}-ok-btn {
     .btn;
     .btn-primary;
     .button-size(@btn-padding-sm; @font-size-base; @btn-border-radius-sm);
diff --git a/style/components/datepicker/DecadePanel.less b/style/components/datepicker/DecadePanel.less
index 3236100331..1cde83a41c 100644
--- a/style/components/datepicker/DecadePanel.less
+++ b/style/components/datepicker/DecadePanel.less
@@ -1,34 +1,34 @@
-.@{prefixCalendarClass}-decade-panel {
-  left: 0px;
-  top: 0px;
-  bottom: 0px;
-  right: 0px;
+.@{calendar-prefix-cls}-decade-panel {
+  left: 0;
+  top: 0;
+  bottom: 0;
+  right: 0;
   background: #fff;
   z-index: 10;
   position: absolute;
   outline: none;
 }
 
-.@{prefixCalendarClass}-decade-panel-hidden {
+.@{calendar-prefix-cls}-decade-panel-hidden {
   display: none;
 }
 
-.@{prefixCalendarClass}-decade-panel-header {
-  .calendarPanelHeader(~"@{prefixCalendarClass}-decade-panel");
+.@{calendar-prefix-cls}-decade-panel-header {
+  .calendarPanelHeader(~"@{calendar-prefix-cls}-decade-panel");
 }
 
-.@{prefixCalendarClass}-decade-panel-table {
+.@{calendar-prefix-cls}-decade-panel-table {
   table-layout: fixed;
   width: 100%;
   height: 248px;
   border-collapse: separate;
 }
 
-.@{prefixCalendarClass}-decade-panel-cell {
+.@{calendar-prefix-cls}-decade-panel-cell {
   text-align: center;
 }
 
-.@{prefixCalendarClass}-decade-panel-decade {
+.@{calendar-prefix-cls}-decade-panel-decade {
   display: inline-block;
   margin: 0 auto;
   color: #666;
@@ -36,7 +36,7 @@
   text-align: center;
   height: 24px;
   line-height: 24px;
-  padding: 0px 6px;
+  padding: 0 6px;
   border-radius: 4px;
 
   &:hover {
@@ -45,7 +45,7 @@
   }
 }
 
-.@{prefixCalendarClass}-decade-panel-selected-cell .@{prefixCalendarClass}-decade-panel-decade {
+.@{calendar-prefix-cls}-decade-panel-selected-cell .@{calendar-prefix-cls}-decade-panel-decade {
   background: @primary-color;
   color: #fff;
 
@@ -55,19 +55,19 @@
   }
 }
 
-.@{prefixCalendarClass}-decade-panel-last-century-cell, .@{prefixCalendarClass}-decade-panel-next-century-cell {
-  .@{prefixCalendarClass}-decade-panel-decade{
+.@{calendar-prefix-cls}-decade-panel-last-century-cell, .@{calendar-prefix-cls}-decade-panel-next-century-cell {
+  .@{calendar-prefix-cls}-decade-panel-decade{
     user-select: none;
     -webkit-user-select: none;
   }
-  .@{prefixCalendarClass}-decade-panel-decade:before {
+  .@{calendar-prefix-cls}-decade-panel-decade:before {
     content: "\e611";
     font-family: "anticon" !important;
   }
 }
 
-.@{prefixCalendarClass}-decade-panel-last-century-cell {
-  .@{prefixCalendarClass}-decade-panel-decade {
+.@{calendar-prefix-cls}-decade-panel-last-century-cell {
+  .@{calendar-prefix-cls}-decade-panel-decade {
     transform: rotate(180deg);
     filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
   }
diff --git a/style/components/datepicker/MonthPanel.less b/style/components/datepicker/MonthPanel.less
index 05cd4cebab..24c91a5dd1 100644
--- a/style/components/datepicker/MonthPanel.less
+++ b/style/components/datepicker/MonthPanel.less
@@ -1,34 +1,34 @@
-.@{prefixCalendarClass}-month-panel {
-  left: 0px;
-  top: 0px;
-  bottom: 0px;
-  right: 0px;
+.@{calendar-prefix-cls}-month-panel {
+  left: 0;
+  top: 0;
+  bottom: 0;
+  right: 0;
   background: #fff;
   z-index: 10;
   position: absolute;
   outline: none;
 }
 
-.@{prefixCalendarClass}-month-panel-hidden {
+.@{calendar-prefix-cls}-month-panel-hidden {
   display: none;
 }
 
-.@{prefixCalendarClass}-month-panel-header {
-  .calendarPanelHeader(~"@{prefixCalendarClass}-month-panel");
+.@{calendar-prefix-cls}-month-panel-header {
+  .calendarPanelHeader(~"@{calendar-prefix-cls}-month-panel");
 }
 
-.@{prefixCalendarClass}-month-panel-table {
+.@{calendar-prefix-cls}-month-panel-table {
   table-layout: fixed;
   width: 100%;
   height: 248px;
   border-collapse: separate;
 }
 
-.@{prefixCalendarClass}-month-panel-cell {
+.@{calendar-prefix-cls}-month-panel-cell {
   text-align: center;
 }
 
-.@{prefixCalendarClass}-month-panel-month {
+.@{calendar-prefix-cls}-month-panel-month {
   display: inline-block;
   margin: 0 auto;
   color: #666;
@@ -36,7 +36,7 @@
   text-align: center;
   height: 24px;
   line-height: 24px;
-  padding: 0px 6px;
+  padding: 0 6px;
   border-radius: 4px;
 
   &:hover {
@@ -45,7 +45,7 @@
   }
 }
 
-.@{prefixCalendarClass}-month-panel-selected-cell .@{prefixCalendarClass}-month-panel-month {
+.@{calendar-prefix-cls}-month-panel-selected-cell .@{calendar-prefix-cls}-month-panel-month {
   background: @primary-color;
   color: #fff;
 
diff --git a/style/components/datepicker/Picker.less b/style/components/datepicker/Picker.less
index 21f971a8da..259f4a69c6 100644
--- a/style/components/datepicker/Picker.less
+++ b/style/components/datepicker/Picker.less
@@ -1,5 +1,5 @@
-.@{prefixCalendarClass}-picker .@{prefixCalendarClass},
-.@{prefixCalendarClass}-picker-container .@{prefixCalendarClass} {
+.@{calendar-prefix-cls}-picker .@{calendar-prefix-cls},
+.@{calendar-prefix-cls}-picker-container .@{calendar-prefix-cls} {
   position: absolute;
   display: none;
   left: -9999px;
@@ -7,7 +7,7 @@
   z-index: 9;
 }
 
-.@{prefixCalendarClass}-picker {
+.@{calendar-prefix-cls}-picker {
   position: relative;
   display: inline-block;
 
@@ -37,8 +37,8 @@
       vertical-align: bottom;
     }
   }
-  &-open .@{prefixCalendarClass},
-  &-container-open .@{prefixCalendarClass} {
+  &-open .@{calendar-prefix-cls},
+  &-container-open .@{calendar-prefix-cls} {
     display: block;
   }
   &-open &-input {
diff --git a/style/components/datepicker/Time.less b/style/components/datepicker/Time.less
index ad6554a60b..1de2025fe1 100644
--- a/style/components/datepicker/Time.less
+++ b/style/components/datepicker/Time.less
@@ -1,16 +1,16 @@
 @import "../../mixins/input";
 
-.@{prefixCalendarClass}-time {
+.@{calendar-prefix-cls}-time {
   > span {
     margin: 0 2px;
   }
-  ~ .@{prefixCalendarClass}-footer-btn {
+  ~ .@{calendar-prefix-cls}-footer-btn {
     display: inline;
     text-align: left;
   }
 }
 
-.@{prefixCalendarClass}-time-input {
+.@{calendar-prefix-cls}-time-input {
   .input;
   margin: 0;
   width: 30px;
diff --git a/style/components/datepicker/TimePanel.less b/style/components/datepicker/TimePanel.less
index c02ec47599..35ce39fae1 100644
--- a/style/components/datepicker/TimePanel.less
+++ b/style/components/datepicker/TimePanel.less
@@ -1,15 +1,15 @@
-.@{prefixCalendarClass}-time-panel {
-  left: 0px;
-  top: 0px;
-  bottom: 0px;
-  right: 0px;
+.@{calendar-prefix-cls}-time-panel {
+  left: 0;
+  top: 0;
+  bottom: 0;
+  right: 0;
   background: #fff;
   z-index: 10;
   position: absolute;
   outline: none;
 }
 
-.@{prefixCalendarClass}-time-panel-header {
+.@{calendar-prefix-cls}-time-panel-header {
   padding: 0 10px;
   height: 34px;
   line-height: 34px;
@@ -20,11 +20,11 @@
   border-bottom: 1px solid #e9e9e9;
 }
 
-.@{prefixCalendarClass}-time-panel-body {
+.@{calendar-prefix-cls}-time-panel-body {
   padding: 2px 10px;
 }
 
-.@{prefixCalendarClass}-time-panel-title {
+.@{calendar-prefix-cls}-time-panel-title {
   width: 180px;
   font-weight: bold;
   display: inline-block;
@@ -35,19 +35,19 @@
   border-radius: 4px;
 }
 
-.@{prefixCalendarClass}-time-panel-table {
+.@{calendar-prefix-cls}-time-panel-table {
   table-layout: fixed;
   width: 100%;
   border-collapse: separate;
 }
 
-.@{prefixCalendarClass}-time-panel-cell {
+.@{calendar-prefix-cls}-time-panel-cell {
   text-align: center;
   height: 40px;
   vertical-align: middle;
 }
 
-.@{prefixCalendarClass}-time-panel-time {
+.@{calendar-prefix-cls}-time-panel-time {
   line-height: 24px;
   display: block;
   border-radius: 4px;
@@ -60,7 +60,7 @@
   }
 }
 
-.@{prefixCalendarClass}-time-panel-selected-cell .@{prefixCalendarClass}-time-panel-time {
+.@{calendar-prefix-cls}-time-panel-selected-cell .@{calendar-prefix-cls}-time-panel-time {
   background: @primary-color;
   color: #fff;
 
diff --git a/style/components/datepicker/YearPanel.less b/style/components/datepicker/YearPanel.less
index 7b4940ea53..862465f94f 100644
--- a/style/components/datepicker/YearPanel.less
+++ b/style/components/datepicker/YearPanel.less
@@ -1,34 +1,34 @@
-.@{prefixCalendarClass}-year-panel {
-  left: 0px;
-  top: 0px;
-  bottom: 0px;
-  right: 0px;
+.@{calendar-prefix-cls}-year-panel {
+  left: 0;
+  top: 0;
+  bottom: 0;
+  right: 0;
   background: #fff;
   z-index: 10;
   position: absolute;
   outline: none;
 }
 
-.@{prefixCalendarClass}-year-panel-hidden {
+.@{calendar-prefix-cls}-year-panel-hidden {
   display: none;
 }
 
-.@{prefixCalendarClass}-year-panel-header {
-  .calendarPanelHeader(~"@{prefixCalendarClass}-year-panel");
+.@{calendar-prefix-cls}-year-panel-header {
+  .calendarPanelHeader(~"@{calendar-prefix-cls}-year-panel");
 }
 
-.@{prefixCalendarClass}-year-panel-table {
+.@{calendar-prefix-cls}-year-panel-table {
   table-layout: fixed;
   width: 100%;
   height: 248px;
   border-collapse: separate;
 }
 
-.@{prefixCalendarClass}-year-panel-cell {
+.@{calendar-prefix-cls}-year-panel-cell {
   text-align: center;
 }
 
-.@{prefixCalendarClass}-year-panel-year {
+.@{calendar-prefix-cls}-year-panel-year {
   display: inline-block;
   margin: 0 auto;
   color: #666;
@@ -36,7 +36,7 @@
   text-align: center;
   height: 24px;
   line-height: 24px;
-  padding: 0px 6px;
+  padding: 0 6px;
   border-radius: 4px;
 
   &:hover {
@@ -45,7 +45,7 @@
   }
 }
 
-.@{prefixCalendarClass}-year-panel-selected-cell .@{prefixCalendarClass}-year-panel-year {
+.@{calendar-prefix-cls}-year-panel-selected-cell .@{calendar-prefix-cls}-year-panel-year {
   background: @primary-color;
   color: #fff;
 
@@ -55,19 +55,19 @@
   }
 }
 
-.@{prefixCalendarClass}-year-panel-last-decade-cell, .@{prefixCalendarClass}-year-panel-next-decade-cell {
-  .@{prefixCalendarClass}-year-panel-year{
+.@{calendar-prefix-cls}-year-panel-last-decade-cell, .@{calendar-prefix-cls}-year-panel-next-decade-cell {
+  .@{calendar-prefix-cls}-year-panel-year{
     user-select: none;
     -webkit-user-select: none;
   }
-  .@{prefixCalendarClass}-year-panel-year:before {
+  .@{calendar-prefix-cls}-year-panel-year:before {
     content: "\e611";
     font-family: "anticon" !important;
   }
 }
 
-.@{prefixCalendarClass}-year-panel-last-decade-cell {
-  .@{prefixCalendarClass}-year-panel-year {
+.@{calendar-prefix-cls}-year-panel-last-decade-cell {
+  .@{calendar-prefix-cls}-year-panel-year {
     transform: rotate(180deg);
     filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
   }
diff --git a/style/components/dialog.less b/style/components/dialog.less
index 6346c982bd..9a9c66f7a1 100644
--- a/style/components/dialog.less
+++ b/style/components/dialog.less
@@ -1,9 +1,9 @@
-@dialogPrefixCls: ant-modal;
+@dialog-prefix-cls: ant-modal;
 
 @import "./dialog/Dialog.less";
 @import "./dialog/Mask.less";
 
-.@{dialogPrefixCls} {
+.@{dialog-prefix-cls} {
   &-header {
     padding: 13px 18px 14px 16px;
   }
diff --git a/style/components/dialog/Dialog.less b/style/components/dialog/Dialog.less
index 006783aedf..3a6d47cccb 100644
--- a/style/components/dialog/Dialog.less
+++ b/style/components/dialog/Dialog.less
@@ -1,4 +1,4 @@
-.@{dialogPrefixCls} {
+.@{dialog-prefix-cls} {
   outline: none;
   position: absolute;
   left: -9999px;
@@ -23,7 +23,7 @@
 
   &-content {
     position: relative;
-    background-color: #ffffff;
+    background-color: #fff;
     border: none;
     border-radius: 6px 6px;
     background-clip: padding-box;
diff --git a/style/components/dialog/Mask.less b/style/components/dialog/Mask.less
index 7a8aa15ddd..42f9cc1fc2 100644
--- a/style/components/dialog/Mask.less
+++ b/style/components/dialog/Mask.less
@@ -1,4 +1,4 @@
-.@{dialogPrefixCls} {
+.@{dialog-prefix-cls} {
 
   &-wrap-hidden > &-mask {
     display: none;
@@ -10,7 +10,7 @@
     right: 0;
     left: 0;
     bottom: 0;
-    background-color: rgb(55, 55, 55);
+    background-color: #373737;
     background-color: rgba(55, 55, 55, 0.6);
     height: 100%;
     z-index: 1000;
@@ -40,30 +40,12 @@
   }
 
   &-fade-enter&-fade-enter-active {
-    animation-name: rcDialogFadeIn;
+    animation-name: fadeIn;
     animation-play-state: running;
   }
 
   &-fade-leave&-fade-leave-active {
-    animation-name: rcDialogFadeOut;
+    animation-name: fadeOut;
     animation-play-state: running;
   }
-
-  @keyframes rcDialogFadeIn {
-    0% {
-      opacity: 0;
-    }
-    100% {
-      opacity: 1;
-    }
-  }
-
-  @keyframes rcDialogFadeOut {
-    0% {
-      opacity: 1;
-    }
-    100% {
-      opacity: 0;
-    }
-  }
 }
diff --git a/style/components/dropdown.less b/style/components/dropdown.less
index 897bc3aa40..2072fb4654 100644
--- a/style/components/dropdown.less
+++ b/style/components/dropdown.less
@@ -1,6 +1,6 @@
-@dropdownPrefixCls: ant-dropdown;
+@dropdown-prefix-cls: ant-dropdown;
 
-.@{dropdownPrefixCls} {
+.@{dropdown-prefix-cls} {
   position: absolute;
   left: -9999px;
   top: -9999px;
@@ -96,7 +96,7 @@
   }
 }
 
-.@{dropdownPrefixCls}-link {
+.@{dropdown-prefix-cls}-link {
   .anticon-down {
     .iconfont-size-under-12px(7px);
     font-weight: bold;
diff --git a/style/components/form.less b/style/components/form.less
index cebaaedbd0..74fa8da5ae 100644
--- a/style/components/form.less
+++ b/style/components/form.less
@@ -1,5 +1,4 @@
 @import "../mixins/index";
-@btnClass: ~"@{css-prefix}btn";
 
 .reset-form();
 
@@ -130,7 +129,7 @@ form {
 
   // Input combined with select
   .@{css-prefix}input-group {
-    .@{selectPrefixCls}-selection {
+    .@{select-prefix-cls}-selection {
       border-bottom-left-radius: 0;
       border-top-left-radius: 0;
       &:hover {
@@ -138,18 +137,18 @@ form {
       }
     }
 
-    .@{selectPrefixCls}-selection--single {
+    .@{select-prefix-cls}-selection--single {
       margin-left: -1px;
       height: @input-height-lg;
       background-color: #eee;
-      .@{selectPrefixCls}-selection__rendered {
+      .@{select-prefix-cls}-selection__rendered {
         padding-left: 8px;
         padding-right: 25px;
         line-height: 30px;
       }
     }
 
-    .@{selectPrefixCls}-open .@{selectPrefixCls}-selection {
+    .@{select-prefix-cls}-open .@{select-prefix-cls}-selection {
       border-color: #d9d9d9;
       box-shadow: none;
     }
@@ -186,12 +185,12 @@ form {
     }
   }
 
-  .@{inputNumberPrefixCls} {
+  .@{input-number-prefix-cls} {
     margin-top: -1px;
     margin-right: 8px;
   }
 
-  .@{prefixCalendarClass}-picker {
+  .@{calendar-prefix-cls}-picker {
     width: 100%;
   }
 }
@@ -298,7 +297,7 @@ form {
   }
 
   // ant-select
-  .@{selectPrefixCls} {
+  .@{select-prefix-cls} {
     &-selection {
       border-color: @warning-color;
       box-shadow: 0 0 0 2px tint(@warning-color, 80%);
@@ -309,7 +308,7 @@ form {
   }
 
   // ant-datepicker
-  .@{prefixCalendarClass}-picker-icon:after {
+  .@{calendar-prefix-cls}-picker-icon:after {
     color: @warning-color;
   }
 }
@@ -323,7 +322,7 @@ form {
   }
 
   // ant-select
-  .@{selectPrefixCls} {
+  .@{select-prefix-cls} {
     &-selection {
       border-color: @error-color;
       box-shadow: 0 0 0 2px tint(@error-color, 80%);
@@ -335,7 +334,7 @@ form {
   }
 
   // ant-datepicker
-  .@{prefixCalendarClass}-picker-icon:after {
+  .@{calendar-prefix-cls}-picker-icon:after {
     color: @error-color;
   }
 }
diff --git a/style/components/inputNumber.less b/style/components/inputNumber.less
index e6143d94b7..1407e9c819 100644
--- a/style/components/inputNumber.less
+++ b/style/components/inputNumber.less
@@ -1,9 +1,9 @@
-@inputNumberPrefixCls: ant-input-number;
+@input-number-prefix-cls: ant-input-number;
 
 @import "../mixins/iconfont";
 @import "../mixins/input";
 
-.@{inputNumberPrefixCls} {
+.@{input-number-prefix-cls} {
   .input();
   margin: 0;
   padding: 0;
@@ -66,7 +66,7 @@
     line-height: 28px;
     height: 28px;
     transition: all 0.3s ease;
-    color: #666666;
+    color: #666;
     border: 0;
     border-radius: @border-radius-base;
     padding: 0 7px;
@@ -75,7 +75,7 @@
       .disabled();
     }
   }
-  
+
   &-lg {
     padding: 0;
     .ant-input-number-handler-wrap {
@@ -172,19 +172,19 @@
   }
 
   &-handler-down-disabled, &-handler-up-disabled, &-disabled {
-    .@{inputNumberPrefixCls}-handler-down-inner,
-    .@{inputNumberPrefixCls}-handler-up-inner {
+    .@{input-number-prefix-cls}-handler-down-inner,
+    .@{input-number-prefix-cls}-handler-up-inner {
       .handler-disabled();
     }
   }
 
   &-disabled {
-    .@{inputNumberPrefixCls}-input {
+    .@{input-number-prefix-cls}-input {
       opacity: 0.72;
       cursor: not-allowed;
       background-color: #f3f3f3;
     }
-    .@{inputNumberPrefixCls}-handler {
+    .@{input-number-prefix-cls}-handler {
       .handler-disabled();
     }
   }
diff --git a/style/components/menu.less b/style/components/menu.less
index cd2060e65d..a5ecaa767f 100644
--- a/style/components/menu.less
+++ b/style/components/menu.less
@@ -1,6 +1,6 @@
-@menuPrefixCls: ~"@{css-prefix}menu";
+@menu-prefix-cls: ~"@{css-prefix}menu";
 
-.@{menuPrefixCls} {
+.@{menu-prefix-cls} {
   outline: none;
   margin-bottom: 0;
   padding-left: 0; // Override default ul/ol
@@ -52,7 +52,7 @@
     transition: all 0.3s ease;
   }
 
-  &-submenu-horizontal > .@{menuPrefixCls} {
+  &-submenu-horizontal > .@{menu-prefix-cls} {
     top: 100%;
     left: 0;
     position: absolute;
@@ -60,7 +60,7 @@
     margin-top: 7px;
   }
 
-  &-submenu-vertical > .@{menuPrefixCls} {
+  &-submenu-vertical > .@{menu-prefix-cls} {
     top: 0;
     left: 100%;
     position: absolute;
@@ -75,7 +75,7 @@
     white-space: nowrap;
 
     // Disabled state sets text to gray and nukes hover/tab effects
-    &.@{menuPrefixCls}-item-disabled, &.@{menuPrefixCls}-submenu-disabled {
+    &.@{menu-prefix-cls}-item-disabled, &.@{menu-prefix-cls}-submenu-disabled {
       color: #999 !important;
     }
   }
@@ -91,12 +91,12 @@
   &-submenu {
     position: relative;
 
-    > .@{menuPrefixCls} {
+    > .@{menu-prefix-cls} {
       display: none;
       background-color: #fff;
     }
 
-    &-vertical > .@{menuPrefixCls}-submenu-title:after {
+    &-vertical > .@{menu-prefix-cls}-submenu-title:after {
       font-family: "anticon" !important;
       font-style: normal;
       vertical-align: baseline;
@@ -111,7 +111,7 @@
       transform: rotate(270deg) scale(0.75);
     }
 
-    &-inline > .@{menuPrefixCls}-submenu-title:after {
+    &-inline > .@{menu-prefix-cls}-submenu-title:after {
       font-family: "anticon" !important;
       font-style: normal;
       vertical-align: baseline;
@@ -127,17 +127,17 @@
     }
 
     &-open {
-      > .@{menuPrefixCls} {
+      > .@{menu-prefix-cls} {
         display: block;
       }
-      &.@{menuPrefixCls}-submenu-inline > .@{menuPrefixCls}-submenu-title:after {
+      &.@{menu-prefix-cls}-submenu-inline > .@{menu-prefix-cls}-submenu-title:after {
         .ie-rotate(1);
         transform: rotate(180deg) scale(0.75);
       }
     }
   }
 
-  .@{menuPrefixCls}-submenu-title, .@{menuPrefixCls}-item {
+  .@{menu-prefix-cls}-submenu-title, .@{menu-prefix-cls}-item {
     .anticon {
       width: 14px;
       margin-right: 8px;
@@ -155,8 +155,8 @@
     padding-left: 24px;
     z-index: 0;
 
-    & > .@{menuPrefixCls}-item,
-    & > .@{menuPrefixCls}-submenu > .@{menuPrefixCls}-submenu-title {
+    & > .@{menu-prefix-cls}-item,
+    & > .@{menu-prefix-cls}-submenu > .@{menu-prefix-cls}-submenu-title {
       padding: 0 20px;
       line-height: 50px;
       position: relative;
@@ -180,7 +180,7 @@
       }
     }
 
-    & > .@{menuPrefixCls}-submenu, & > .@{menuPrefixCls}-item {
+    & > .@{menu-prefix-cls}-submenu, & > .@{menu-prefix-cls}-item {
       float: left;
       border-bottom: 2px solid transparent;
       margin-right: 24px;
@@ -206,7 +206,7 @@
 
   &-vertical, &-inline {
     padding: 12px 0;
-    & > .@{menuPrefixCls}-item, & > .@{menuPrefixCls}-submenu > .@{menuPrefixCls}-submenu-title {
+    & > .@{menu-prefix-cls}-item, & > .@{menu-prefix-cls}-submenu > .@{menu-prefix-cls}-submenu-title {
       padding: 0 24px;
       font-size: 12px;
       line-height: 42px;
@@ -215,11 +215,11 @@
   }
 
   &-vertical, &-horizontal {
-    .@{menuPrefixCls}-submenu {
-      .@{menuPrefixCls}-item:first-child {
+    .@{menu-prefix-cls}-submenu {
+      .@{menu-prefix-cls}-item:first-child {
         border-radius: @border-radius-base @border-radius-base 0 0;
       }
-      .@{menuPrefixCls}-item:last-child {
+      .@{menu-prefix-cls}-item:last-child {
         border-radius: 0 0 @border-radius-base @border-radius-base;
       }
       &:first-child {
@@ -247,7 +247,7 @@
     border-radius: 0;
     box-shadow: none;
 
-    & > .@{menuPrefixCls}-item, & > .@{menuPrefixCls}-submenu > .@{menuPrefixCls}-submenu-title {
+    & > .@{menu-prefix-cls}-item, & > .@{menu-prefix-cls}-submenu > .@{menu-prefix-cls}-submenu-title {
       line-height: 34px;
       height: 34px;
       list-style-type: disc;
@@ -256,7 +256,7 @@
   }
 }
 
-.@{menuPrefixCls}-submenu-title, .@{menuPrefixCls}-item {
+.@{menu-prefix-cls}-submenu-title, .@{menu-prefix-cls}-item {
   .anticon {
     width: 14px;
     margin-right: 8px;
diff --git a/style/components/message.less b/style/components/message.less
index 44dc14a4a5..4113b0ae42 100644
--- a/style/components/message.less
+++ b/style/components/message.less
@@ -1,6 +1,6 @@
-@prefixMessageClass: ant-message;
+@message-prefix-cls: ant-message;
 
-.@{prefixMessageClass} {
+.@{message-prefix-cls} {
   font-size: 12px;
   position: fixed;
   z-index: 1000;
diff --git a/style/components/notification.less b/style/components/notification.less
index 8cd0e16783..6ab8448056 100644
--- a/style/components/notification.less
+++ b/style/components/notification.less
@@ -1,25 +1,25 @@
 @import "../mixins/index";
 
-@notificationPrefixCls: ~"@{css-prefix}notification";
+@notification-prefix-cls: ~"@{css-prefix}notification";
 
-@noticeWidth: 335px;
-@noticePadding: 16px;
-@noticeMarginBottom: 10px;
+@notice-width: 335px;
+@notice-padding: 16px;
+@notice-margin-bottom: 10px;
 
-.@{notificationPrefixCls} {
+.@{notification-prefix-cls} {
   position: fixed;
   z-index: 1000;
-  width: @noticeWidth;
+  width: @notice-width;
   margin-right: 24px;
 
   &-notice {
-    padding: @noticePadding;
+    padding: @notice-padding;
     border-radius: @border-radius-base;
     box-shadow: 0 0 4px @legend-border-color;
     background: @body-background;
     line-height: 1.5;
     position: relative;
-    margin-bottom: @noticeMarginBottom;
+    margin-bottom: @notice-margin-bottom;
     overflow: hidden;
 
     &-content {
@@ -120,7 +120,7 @@
   @keyframes NotificationFadeIn {
     0% {
       opacity: 0;
-      left: @noticeWidth;
+      left: @notice-width;
     }
     100% {
       left: 0;
@@ -131,9 +131,9 @@
   @keyframes NotificationFadeOut {
     0% {
       opacity: 1;
-      margin-bottom: @noticeMarginBottom;
-      padding-top: @noticePadding;
-      padding-bottom: @noticePadding;
+      margin-bottom: @notice-margin-bottom;
+      padding-top: @notice-padding;
+      padding-bottom: @notice-padding;
       max-height: 150px;
     }
     100% {
diff --git a/style/components/pagination.less b/style/components/pagination.less
index 091a5c08df..1c25816059 100644
--- a/style/components/pagination.less
+++ b/style/components/pagination.less
@@ -1,6 +1,6 @@
-@paginationPrefixClass: ant-pagination;
+@pagination-prefix-cls: ant-pagination;
 
-.@{paginationPrefixClass} {
+.@{pagination-prefix-cls} {
   user-select: none;
   font-size: @font-size-base;
 
@@ -226,7 +226,7 @@
   }
 }
 
-.@{paginationPrefixClass} {
+.@{pagination-prefix-cls} {
 
   &.mini &-item {
     border: none;
diff --git a/style/components/popover.less b/style/components/popover.less
index 908894fdd7..633d8624d2 100644
--- a/style/components/popover.less
+++ b/style/components/popover.less
@@ -1,5 +1,5 @@
 @import "../mixins/index";
-@popoverPrefixClass: ~"@{css-prefix}popover";
+@popover-prefix-cls: ~"@{css-prefix}popover";
 
 //
 // Popovers
@@ -20,7 +20,7 @@
 //** Popover arrow width
 @popover-arrow-width:                 4px;
 //** Popover distance with trigger
-@popover-distance:                    @popover-arrow-width+4;
+@popover-distance:                    @popover-arrow-width + 4;
 //** Popover arrow color
 @popover-arrow-color:                 @popover-bg;
 
@@ -29,7 +29,7 @@
 //** Popover outer arrow color
 @popover-arrow-outer-color:           fadein(@popover-border-color, 5%);
 
-.@{popoverPrefixClass} {
+.@{popover-prefix-cls} {
   position: absolute;
   top: 0;
   left: 0;
diff --git a/style/components/progress.less b/style/components/progress.less
index 6fe3de3f87..9c8caa26e5 100644
--- a/style/components/progress.less
+++ b/style/components/progress.less
@@ -1,6 +1,6 @@
-@prefixProgressClass: ant-progress;
+@progress-prefix-cls: ant-progress;
 
-.@{prefixProgressClass} {
+.@{progress-prefix-cls} {
   &-line-wrap,
   &-circle-wrap {
     display: inline-block;
@@ -14,7 +14,7 @@
     margin-right: 45px;
   }
   &-line-wrap-full {
-    .@{prefixProgressClass}-line-outer {
+    .@{progress-prefix-cls}-line-outer {
       margin-right: 0;
     }
   }
@@ -43,32 +43,32 @@
     }
   }
   &-line-wrap.status-active {
-    .@{prefixProgressClass}-line-bg:before {
+    .@{progress-prefix-cls}-line-bg:before {
       content: "";
       opacity: 0;
       position: absolute;
-      top: 0px;
-      left: 0px;
-      right: 0px;
-      bottom: 0px;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
       background: #fff;
       border-radius: 10px;
       animation: progress-active 2s ease infinite;
     }
   }
   &-line-wrap.status-exception {
-    .@{prefixProgressClass}-line-bg {
+    .@{progress-prefix-cls}-line-bg {
       background-color: @error-color;
     }
-    .@{prefixProgressClass}-line-text {
+    .@{progress-prefix-cls}-line-text {
       color: @error-color;
     }
   }
   &-line-wrap.status-success {
-    .@{prefixProgressClass}-line-bg {
+    .@{progress-prefix-cls}-line-bg {
       background-color: @success-color;
     }
-    .@{prefixProgressClass}-line-text {
+    .@{progress-prefix-cls}-line-text {
       color: @success-color;
     }
   }
@@ -88,16 +88,16 @@
     left: 0;
 
     .anticon {
-      font-size: 14/12em;
+      font-size: 14 / 12em;
     }
   }
   &-circle-wrap.status-exception {
-    .@{prefixProgressClass}-circle-text {
+    .@{progress-prefix-cls}-circle-text {
       color: @error-color;
     }
   }
   &-circle-wrap.status-success {
-    .@{prefixProgressClass}-circle-text {
+    .@{progress-prefix-cls}-circle-text {
       color: @success-color;
     }
   }
diff --git a/style/components/radio.less b/style/components/radio.less
index d51e7814a6..e303f8c0b8 100644
--- a/style/components/radio.less
+++ b/style/components/radio.less
@@ -1,16 +1,16 @@
-@radioGroupPrefixCls: ant-radio-group;
-@radioWrapPrefixCls: ant-radio;
-@radioInnerPrefixCls: ~"@{radioWrapPrefixCls}-inner";
-@radioDuration: .3s;
+@radio-group-prefix-cls: ant-radio-group;
+@radio-wrap-prefix-cls: ant-radio;
+@radio-inner-prefix-cls: ~"@{radio-wrap-prefix-cls}-inner";
+@radio-duration: .3s;
 
-.@{radioGroupPrefixCls} {
+.@{radio-group-prefix-cls} {
   label {
     margin-right: 16px;
   }
 }
 
-/* 一般状态 */
-.@{radioWrapPrefixCls} {
+// 一般状态
+.@{radio-wrap-prefix-cls} {
   white-space: nowrap;
   outline: none;
   display: inline-block;
@@ -18,7 +18,7 @@
   line-height: 1;
   vertical-align: middle;
   &:hover {
-    .@{radioInnerPrefixCls} {
+    .@{radio-inner-prefix-cls} {
       border-color: #bcbcbc;
     }
   }
@@ -37,7 +37,7 @@
       background-color: @primary-color;
       transform: scale(0);
       opacity: 0;
-      transition: transform @radioDuration @ease-in-out-circ, opacity @radioDuration @ease-in-out-circ, background-color @radioDuration @ease-in-out-circ;
+      transition: transform @radio-duration @ease-in-out-circ, opacity @radio-duration @ease-in-out-circ, background-color @radio-duration @ease-in-out-circ;
     }
 
     position: relative;
@@ -50,8 +50,8 @@
     border-style: solid;
     border-radius: 14px;
     border-color: #d9d9d9;
-    background-color: #ffffff;
-    transition: border-color @radioDuration @ease-in-out-circ, background-color @radioDuration @ease-in-out-circ;
+    background-color: #fff;
+    transition: border-color @radio-duration @ease-in-out-circ, background-color @radio-duration @ease-in-out-circ;
   }
 
   &-input {
@@ -66,26 +66,26 @@
   }
 }
 
-/* 选中状态 */
-.@{radioWrapPrefixCls}-checked {
+// 选中状态
+.@{radio-wrap-prefix-cls}-checked {
 
-  .@{radioInnerPrefixCls} {
+  .@{radio-inner-prefix-cls} {
     border-color: #d9d9d9;
     &:after {
       transform: scale(1);
       opacity: 1;
-      transition: transform @radioDuration @ease-out-back, opacity @radioDuration @ease-in-out-circ, background-color @radioDuration @ease-in-out-circ;
+      transition: transform @radio-duration @ease-out-back, opacity @radio-duration @ease-in-out-circ, background-color @radio-duration @ease-in-out-circ;
     }
   }
 }
 
-.@{radioWrapPrefixCls}-disabled {
+.@{radio-wrap-prefix-cls}-disabled {
   &:hover {
-    .@{radioInnerPrefixCls} {
+    .@{radio-inner-prefix-cls} {
       border-color: #d9d9d9;
     }
   }
-  .@{radioInnerPrefixCls} {
+  .@{radio-inner-prefix-cls} {
     border-color: #d9d9d9;
     background-color: #f3f3f3;
     &:after {
@@ -93,11 +93,11 @@
     }
   }
 
-  .@{radioInnerPrefixCls}-input {
+  .@{radio-inner-prefix-cls}-input {
     cursor: default;
   }
 }
 
-.@{radioWrapPrefixCls} + span {
+.@{radio-wrap-prefix-cls} + span {
   margin-left: 8px;
 }
diff --git a/style/components/select.less b/style/components/select.less
index e956ca9171..ea7e82f36c 100644
--- a/style/components/select.less
+++ b/style/components/select.less
@@ -1,4 +1,4 @@
-@selectPrefixCls: ant-select;
+@select-prefix-cls: ant-select;
 
 @import "../mixins/iconfont";
 //mixin
@@ -24,7 +24,7 @@
   }
 }
 
-.@{selectPrefixCls} {
+.@{select-prefix-cls} {
   box-sizing: border-box;
   display: inline-block;
   margin: 0;
@@ -103,7 +103,7 @@
     height: 28px;
     cursor: pointer;
 
-    .@{selectPrefixCls}-selection__rendered {
+    .@{select-prefix-cls}-selection__rendered {
       display: block;
       overflow: hidden;
       text-overflow: ellipsis;
@@ -112,11 +112,11 @@
       line-height: 26px;
     }
 
-    .@{selectPrefixCls}-selection__clear {
+    .@{select-prefix-cls}-selection__clear {
       .selection__clear();
     }
 
-    .@{selectPrefixCls}-selection__placeholder {
+    .@{select-prefix-cls}-selection__placeholder {
       color: #ccc;
     }
   }
@@ -178,12 +178,12 @@
     }
   }
 
-  .@{selectPrefixCls}-search__field__wrap {
+  .@{select-prefix-cls}-search__field__wrap {
     display: inline-block;
     position: relative;
   }
 
-  .@{selectPrefixCls}-search__field__placeholder {
+  .@{select-prefix-cls}-search__field__placeholder {
     position: absolute;
     top: 0;
     left: 3px;
@@ -193,7 +193,7 @@
   &-search--inline {
     float: left;
 
-    .@{selectPrefixCls}-search__field {
+    .@{select-prefix-cls}-search__field {
       border: none;
       font-size: 100%;
       background: transparent;
@@ -208,21 +208,21 @@
     min-height: 28px;
     cursor: text;
 
-    .@{selectPrefixCls}-search--inline {
+    .@{select-prefix-cls}-search--inline {
       width: auto;
-      .@{selectPrefixCls}-search__field {
+      .@{select-prefix-cls}-search__field {
         width: 0.75em;
       }
     }
 
-    .@{selectPrefixCls}-selection__rendered {
+    .@{select-prefix-cls}-selection__rendered {
       overflow: hidden;
       text-overflow: ellipsis;
       padding-left: 4px;
       padding-bottom: 4px;
     }
 
-    .@{selectPrefixCls}-selection__clear {
+    .@{select-prefix-cls}-selection__clear {
       .selection__clear();
       margin-top: 5px;
       margin-right: 10px;
@@ -234,7 +234,7 @@
       line-height: 20px;
     }
 
-    .@{selectPrefixCls}-selection__choice {
+    .@{select-prefix-cls}-selection__choice {
       background-color: #f3f3f3;
       border-radius: 4px;
       cursor: default;
@@ -243,7 +243,7 @@
       margin-right: 4px;
     }
 
-    .@{selectPrefixCls}-selection__choice__remove {
+    .@{select-prefix-cls}-selection__choice__remove {
       .iconfont-mixin();
       color: #919191;
       cursor: pointer;
@@ -264,8 +264,8 @@
     }
   }
 
-  .@{selectPrefixCls}-selection--single + .@{selectPrefixCls}-dropdown {
-    .@{selectPrefixCls}-dropdown-menu-item-selected {
+  .@{select-prefix-cls}-selection--single + .@{select-prefix-cls}-dropdown {
+    .@{select-prefix-cls}-dropdown-menu-item-selected {
       background-color: tint(@primary-color, 90%);
       position: relative;
       &:after {
@@ -281,11 +281,11 @@
       }
     }
   }
-  .@{selectPrefixCls}-selection--multiple + .@{selectPrefixCls}-dropdown {
-    .@{selectPrefixCls}-dropdown-menu-item {
+  .@{select-prefix-cls}-selection--multiple + .@{select-prefix-cls}-dropdown {
+    .@{select-prefix-cls}-dropdown-menu-item {
       padding: 7px 33px 7px 16px;
     }
-    .@{selectPrefixCls}-dropdown-menu-item-selected {
+    .@{select-prefix-cls}-dropdown-menu-item-selected {
       .selected_icon();
     }
   }
@@ -321,7 +321,7 @@
         margin: 0;
         padding: 0;
 
-        > li.@{selectPrefixCls}-dropdown-menu-item {
+        > li.@{select-prefix-cls}-dropdown-menu-item {
           padding-left: 24px;
         }
       }
@@ -337,7 +337,7 @@
         display: block;
         padding: 7px 16px;
         font-weight: normal;
-        color: #666666;
+        color: #666;
         white-space: nowrap;
         cursor: pointer;
 
@@ -369,7 +369,7 @@
   }
 
   &-dropdown-container-open, &-open {
-    .@{selectPrefixCls}-dropdown {
+    .@{select-prefix-cls}-dropdown {
       display: block;
     }
   }
@@ -377,13 +377,13 @@
   &-search--dropdown {
     display: block;
     padding: 4px;
-    .@{selectPrefixCls}-search__field__placeholder {
+    .@{select-prefix-cls}-search__field__placeholder {
       left: 4px;
     }
-    .@{selectPrefixCls}-search__field__wrap {
+    .@{select-prefix-cls}-search__field__wrap {
       width: 100%;
     }
-    .@{selectPrefixCls}-search__field {
+    .@{select-prefix-cls}-search__field {
       padding: 4px;
       width: 100%;
       box-sizing: border-box;
@@ -391,46 +391,46 @@
       border-radius: 4px;
       outline: none;
     }
-    &.@{selectPrefixCls}-search--hide {
+    &.@{select-prefix-cls}-search--hide {
       display: none;
     }
   }
 
   &-open {
-    .@{selectPrefixCls}-arrow {
+    .@{select-prefix-cls}-arrow {
       .ie-rotate(3);
       &:before {
         .rotate(270deg);
       }
     }
-    .@{selectPrefixCls}-selection {
+    .@{select-prefix-cls}-selection {
       .active();
     }
   }
   &-combobox {
-    .@{selectPrefixCls}-arrow {
+    .@{select-prefix-cls}-arrow {
       display: none;
     }
-    .@{selectPrefixCls}-search--inline {
+    .@{select-prefix-cls}-search--inline {
       height: 100%;
       float: none;
     }
-    .@{selectPrefixCls}-search__field__placeholder {
+    .@{select-prefix-cls}-search__field__placeholder {
       left: 10px;
       cursor: text;
     }
-    .@{selectPrefixCls}-search__field__wrap {
+    .@{select-prefix-cls}-search__field__wrap {
       width: 100%;
       height: 100%;
     }
-    .@{selectPrefixCls}-search__field {
+    .@{select-prefix-cls}-search__field {
       padding: 0 10px;
       width: 100%;
       height: 100%;
       position: relative;
       z-index: 1;
     }
-    .@{selectPrefixCls}-selection__rendered {
+    .@{select-prefix-cls}-selection__rendered {
       padding: 0;
       height: 100%;
     }
diff --git a/style/components/slider.less b/style/components/slider.less
index b22d88d6b2..b4eb1dcaa7 100644
--- a/style/components/slider.less
+++ b/style/components/slider.less
@@ -1,4 +1,4 @@
-@sliderClass: ~"@{css-prefix}slider";
+@slider-prefix-cls: ~"@{css-prefix}slider";
 
 // slider color
 @slider-disabled-color: #ccc;
@@ -6,10 +6,10 @@
 @slider-tooltip-color: #fff;
 @slider-tooltip-bg: tint(#666, 4%);
 @slider-tooltip-arrow-width: 4px;
-@slider-tooltip-distance: @slider-tooltip-arrow-width+4;
+@slider-tooltip-distance: @slider-tooltip-arrow-width + 4;
 @slider-tooltip-arrow-color: @slider-tooltip-bg;
 
-.@{sliderClass} {
+.@{slider-prefix-cls} {
   position: relative;
   margin: 12px 0;
   margin-left: 7px;
@@ -69,7 +69,7 @@
   &-mark {
     position: absolute;
     top: 10px;
-    left: 0px;
+    left: 0;
     width: 100%;
     font-size: 12px;
     z-index: 3;
@@ -121,17 +121,17 @@
   &-disabled {
     background-color: #e9e9e9 !important;
 
-    .@{sliderClass}-track {
+    .@{slider-prefix-cls}-track {
       background-color: @slider-disabled-color !important;
     }
 
-    .@{sliderClass}-handle {
+    .@{slider-prefix-cls}-handle {
       border-color: @slider-disabled-color;
       background-color: #fff;
       cursor: not-allowed;
     }
 
-    .@{sliderClass}-mark-text, .dot {
+    .@{slider-prefix-cls}-mark-text, .dot {
       cursor: not-allowed!important;
     }
   }
diff --git a/style/components/steps.less b/style/components/steps.less
index 4010372912..4849633435 100644
--- a/style/components/steps.less
+++ b/style/components/steps.less
@@ -1,5 +1,5 @@
 @import "../mixins/index";
-@stepsPrefixClass: ~"@{css-prefix}steps";
+@steps-prefix-cls: ~"@{css-prefix}steps";
 
 @process-icon-color: @primary-color;
 @process-title-color: #666;
@@ -20,102 +20,102 @@
   -moz-transition: @transition;
 }
 
-.@{stepsPrefixClass} {
+.@{steps-prefix-cls} {
   font-size: 0;
   width: 100%;
   line-height: 1.5;
 
-  .@{stepsPrefixClass}-item {
+  .@{steps-prefix-cls}-item {
     position: relative;
     display: inline-block;
     vertical-align: top;
 
-    &.@{stepsPrefixClass}-status-wait {
-      .@{stepsPrefixClass}-head-inner {
+    &.@{steps-prefix-cls}-status-wait {
+      .@{steps-prefix-cls}-head-inner {
         border-color: @wait-icon-color;
         background-color: #fff;
-        > .@{stepsPrefixClass}-icon {
+        > .@{steps-prefix-cls}-icon {
           color: @wait-icon-color;
         }
       }
-      .@{stepsPrefixClass}-title {
+      .@{steps-prefix-cls}-title {
         color: @wait-title-color;
       }
-      .@{stepsPrefixClass}-description {
+      .@{steps-prefix-cls}-description {
         color: @wait-description-color;
       }
-      .@{stepsPrefixClass}-tail > i {
+      .@{steps-prefix-cls}-tail > i {
         background-color: @wait-tail-color;
       }
     }
-    &.@{stepsPrefixClass}-status-process {
-      .@{stepsPrefixClass}-head-inner {
+    &.@{steps-prefix-cls}-status-process {
+      .@{steps-prefix-cls}-head-inner {
         border-color: @process-icon-color;
         background-color: @process-icon-color;
-        > .@{stepsPrefixClass}-icon {
+        > .@{steps-prefix-cls}-icon {
           color: #fff;
         }
       }
-      .@{stepsPrefixClass}-title {
+      .@{steps-prefix-cls}-title {
         color: @process-title-color;
       }
-      .@{stepsPrefixClass}-description {
+      .@{steps-prefix-cls}-description {
         color: @process-description-color;
       }
-      .@{stepsPrefixClass}-tail > i {
+      .@{steps-prefix-cls}-tail > i {
         background-color: @process-tail-color;
       }
     }
-    &.@{stepsPrefixClass}-status-finish {
-      .@{stepsPrefixClass}-head-inner {
+    &.@{steps-prefix-cls}-status-finish {
+      .@{steps-prefix-cls}-head-inner {
         border-color: @finish-icon-color;
         background-color: #fff;
-        > .@{stepsPrefixClass}-icon {
+        > .@{steps-prefix-cls}-icon {
           color: @finish-icon-color;
         }
       }
-      .@{stepsPrefixClass}-tail > i {
+      .@{steps-prefix-cls}-tail > i {
         background-color: @finish-tail-color;
       }
-      .@{stepsPrefixClass}-title {
+      .@{steps-prefix-cls}-title {
         color: @finish-title-color;
       }
-      .@{stepsPrefixClass}-description {
+      .@{steps-prefix-cls}-description {
         color: @finish-description-color;
       }
     }
 
-    &.@{stepsPrefixClass}-custom {
-      .@{stepsPrefixClass}-head-inner {
+    &.@{steps-prefix-cls}-custom {
+      .@{steps-prefix-cls}-head-inner {
         background: none;
         border: 0;
         width: auto;
         height: auto;
-        > .@{stepsPrefixClass}-icon {
+        > .@{steps-prefix-cls}-icon {
           font-size: 20px;
           top: 2px;
           width: 20px;
           height: 20px;
         }
       }
-      &.@{stepsPrefixClass}-status-process {
-        .@{stepsPrefixClass}-head-inner > .@{stepsPrefixClass}-icon {
+      &.@{steps-prefix-cls}-status-process {
+        .@{steps-prefix-cls}-head-inner > .@{steps-prefix-cls}-icon {
           color: @process-icon-color;
         }
       }
     }
   }
 
-  .@{stepsPrefixClass}-head, .@{stepsPrefixClass}-main {
+  .@{steps-prefix-cls}-head, .@{steps-prefix-cls}-main {
     position: relative;
     display: inline-block;
     vertical-align: top;
   }
-  .@{stepsPrefixClass}-head {
+  .@{steps-prefix-cls}-head {
     background: #fff;
   }
 
-  .@{stepsPrefixClass}-head-inner {
+  .@{steps-prefix-cls}-head-inner {
     display: block;
     border:1px solid @wait-icon-color;
     width: 26px;
@@ -128,7 +128,7 @@
     .transition(background-color 0.3s ease);
     .transition(border-color 0.3s ease);
 
-    > .@{stepsPrefixClass}-icon {
+    > .@{steps-prefix-cls}-icon {
       line-height: 1;
       top: -1px;
       color: @primary-color;
@@ -141,10 +141,10 @@
       }
     }
   }
-  .@{stepsPrefixClass}-main {
+  .@{steps-prefix-cls}-main {
     margin-top: 3px;
   }
-  .@{stepsPrefixClass}-title {
+  .@{steps-prefix-cls}-title {
     font-size: 14px;
     margin-bottom: 4px;
     color: #666;
@@ -153,16 +153,16 @@
     display: inline-block;
     padding-right: 10px;
   }
-  .@{stepsPrefixClass}-item-last {
-    .@{stepsPrefixClass}-title {
+  .@{steps-prefix-cls}-item-last {
+    .@{steps-prefix-cls}-title {
       padding-right: 0;
     }
   }
-  .@{stepsPrefixClass}-description {
+  .@{steps-prefix-cls}-description {
     font-size: 12px;
     color: #999;
   }
-  .@{stepsPrefixClass}-tail {
+  .@{steps-prefix-cls}-tail {
     position: absolute;
     left: 0;
     width: 100%;
@@ -179,8 +179,8 @@
     }
   }
 
-  &.@{stepsPrefixClass}-small {
-    .@{stepsPrefixClass}-head-inner {
+  &.@{steps-prefix-cls}-small {
+    .@{steps-prefix-cls}-head-inner {
       border:1px solid @wait-icon-color;
       width: 18px;
       height: 18px;
@@ -189,25 +189,25 @@
       border-radius: 18px;
       font-size: 12px;
       margin-right: 10px;
-      > .@{stepsPrefixClass}-icon.anticon {
+      > .@{steps-prefix-cls}-icon.anticon {
         .iconfont-size-under-12px(9px);
         top: -1px;
       }
     }
-    .@{stepsPrefixClass}-main {
+    .@{steps-prefix-cls}-main {
       margin-top: 0;
     }
-    .@{stepsPrefixClass}-title {
+    .@{steps-prefix-cls}-title {
       font-size: 12px;
       margin-bottom: 4px;
       color: #666;
       font-weight: bold;
     }
-    .@{stepsPrefixClass}-description {
+    .@{steps-prefix-cls}-description {
       font-size: 10px;
       color: #999;
     }
-    .@{stepsPrefixClass}-tail {
+    .@{steps-prefix-cls}-tail {
       top: 8px;
       padding:0 8px;
       > i {
@@ -218,7 +218,7 @@
     }
   }
 
-  &.@{stepsPrefixClass}-small .@{stepsPrefixClass}-item.@{stepsPrefixClass}-custom .@{stepsPrefixClass}-head-inner, .@{stepsPrefixClass}-item.@{stepsPrefixClass}-custom .@{stepsPrefixClass}-head-inner {
+  &.@{steps-prefix-cls}-small .@{steps-prefix-cls}-item.@{steps-prefix-cls}-custom .@{steps-prefix-cls}-head-inner, .@{steps-prefix-cls}-item.@{steps-prefix-cls}-custom .@{steps-prefix-cls}-head-inner {
     width: inherit;
     height: inherit;
     line-height: inherit;
diff --git a/style/components/switch.less b/style/components/switch.less
index 2a22a9ea54..4b2037c170 100644
--- a/style/components/switch.less
+++ b/style/components/switch.less
@@ -1,8 +1,8 @@
-@switchPrefixCls:ant-switch;
+@switch-prefix-cls:ant-switch;
 
 @switch-duration:.3s;
 
-.@{switchPrefixCls}{
+.@{switch-prefix-cls}{
   position: relative;
   display: inline-block;
   box-sizing: border-box;
@@ -30,7 +30,7 @@
     left: 2px;
     top:1px;
     border-radius: 100%;
-    background-color: #ffffff;
+    background-color: #fff;
     content: " ";
     cursor: pointer;
     transition: left @switch-duration @ease-in-out-circ;
@@ -43,7 +43,7 @@
     border: 1px solid @primary-color;
     background-color: @primary-color;
 
-    .@{switchPrefixCls}-inner {
+    .@{switch-prefix-cls}-inner {
       left:6px;
     }
 
diff --git a/style/components/table.less b/style/components/table.less
index d279de9dea..3f74f05dd4 100644
--- a/style/components/table.less
+++ b/style/components/table.less
@@ -1,9 +1,9 @@
 @import "../mixins/index";
-@tablePrefixClass: ~"@{css-prefix}table";
+@table-prefix-cls: ~"@{css-prefix}table";
 @table-border-color: #e9e9e9;
 @table-head-background-color: #f3f3f3;
 
-.@{tablePrefixClass} {
+.@{table-prefix-cls} {
   font-size: @font-size-base;
   color: @text-color;
   transition: opacity 0.3s ease;
@@ -35,7 +35,7 @@
       }
     }
 
-    .@{tablePrefixClass}-filter-dropdown {
+    .@{table-prefix-cls}-filter-dropdown {
       min-width: 88px;
       margin-left: -8px;
       margin-top: -6px;
@@ -56,7 +56,7 @@
       }
     }
 
-    a.@{tablePrefixClass}-filter-dropdown-link {
+    a.@{table-prefix-cls}-filter-dropdown-link {
       color: @link-color;
       &:hover {
         color: @link-hover-color;
@@ -72,7 +72,7 @@
       }
     }
 
-    .@{tablePrefixClass}-filter-selected.anticon-bars {
+    .@{table-prefix-cls}-filter-selected.anticon-bars {
       color: @primary-color;
     }
 
@@ -95,11 +95,11 @@
     }
   }
 
-  tr.@{tablePrefixClass}-row-selected {
+  tr.@{table-prefix-cls}-row-selected {
     background: #fafafa;
   }
 
-  th.@{tablePrefixClass}-column-sort {
+  th.@{table-prefix-cls}-column-sort {
     background: #EAEAEA;
   }
 
@@ -107,8 +107,8 @@
     padding: 16px 8px;
   }
 
-  th.@{tablePrefixClass}-selection-column,
-  td.@{tablePrefixClass}-selection-column {
+  th.@{table-prefix-cls}-selection-column,
+  td.@{table-prefix-cls}-selection-column {
     text-align: center;
   }
 
@@ -191,7 +191,7 @@
     }
   }
 
-  &.@{tablePrefixClass}-bordered {
+  &.@{table-prefix-cls}-bordered {
     table {
       border: 1px solid #E9E9E9;
     }
@@ -215,7 +215,7 @@
   }
 }
 
-.@{tablePrefixClass}-pagination {
+.@{table-prefix-cls}-pagination {
   margin: 16px 0;
   float: right;
 }
diff --git a/style/components/tabs.less b/style/components/tabs.less
index b4f6b58e01..c698b55526 100644
--- a/style/components/tabs.less
+++ b/style/components/tabs.less
@@ -1,8 +1,8 @@
-@tabPrefixClass: ant-tabs;
+@tab-prefix-cls: ant-tabs;
 
 @effect-duration: .3s;
 
-.@{tabPrefixClass} {
+.@{tab-prefix-cls} {
   outline: none;
   box-sizing: border-box;
   position: relative;
@@ -138,7 +138,7 @@
       clear: both;
     }
 
-    div.@{tabPrefixClass}-tab-active {
+    div.@{tab-prefix-cls}-tab-active {
       > a, > a:hover, > a:focus {
         color: tint(@primary-color, 20%);
         cursor: pointer;
@@ -146,7 +146,7 @@
       }
     }
 
-    div.@{tabPrefixClass}-tab-disabled {
+    div.@{tab-prefix-cls}-tab-disabled {
       pointer-events: none;
       cursor: default;
 
@@ -155,7 +155,7 @@
       }
     }
 
-    .@{tabPrefixClass}-tab {
+    .@{tab-prefix-cls}-tab {
       float: left;
       height: 100%;
       margin-right: 28px;
diff --git a/style/components/tag.less b/style/components/tag.less
index be319efbe5..4bf9df3f77 100644
--- a/style/components/tag.less
+++ b/style/components/tag.less
@@ -1,7 +1,7 @@
 @import "../mixins/index";
-@tagPrefixClass: ~"@{css-prefix}tag";
+@tag-prefix-cls: ~"@{css-prefix}tag";
 
-.@{tagPrefixClass} {
+.@{tag-prefix-cls} {
   display: inline-block;
   line-height: 22px;
   height: 22px;
diff --git a/style/components/tooltip.less b/style/components/tooltip.less
index 4961a07388..f9fc3b6471 100644
--- a/style/components/tooltip.less
+++ b/style/components/tooltip.less
@@ -1,5 +1,5 @@
 @import "../mixins/index";
-@tooltipPrefixClass: ~"@{css-prefix}tooltip";
+@tooltip-prefix-cls: ~"@{css-prefix}tooltip";
 
 //
 // Tooltips
@@ -16,12 +16,12 @@
 //** Tooltip arrow width
 @tooltip-arrow-width:         5px;
 //** Tooltip distance with trigger
-@tooltip-distance:            @tooltip-arrow-width+4;
+@tooltip-distance:            @tooltip-arrow-width + 4;
 //** Tooltip arrow color
 @tooltip-arrow-color:         @tooltip-bg;
 
 // Base class
-.@{tooltipPrefixClass} {
+.@{tooltip-prefix-cls} {
   position: absolute;
   z-index: 1070;
   display: block;
@@ -43,7 +43,7 @@
 }
 
 // Wrapper for the tooltip content
-.@{tooltipPrefixClass}-inner {
+.@{tooltip-prefix-cls}-inner {
   max-width: @tooltip-max-width;
   padding: 8px 10px;
   color: @tooltip-color;
@@ -55,7 +55,7 @@
 }
 
 // Arrows
-.@{tooltipPrefixClass}-arrow {
+.@{tooltip-prefix-cls}-arrow {
   position: absolute;
   width: 0;
   height: 0;
@@ -63,7 +63,7 @@
   border-style: solid;
 }
 
-.@{tooltipPrefixClass} {
+.@{tooltip-prefix-cls} {
   &-placement-top &-arrow {
     bottom: @tooltip-distance - @tooltip-arrow-width;
     left: 50%;
diff --git a/style/components/tree.less b/style/components/tree.less
index 541383267e..ed44951af4 100644
--- a/style/components/tree.less
+++ b/style/components/tree.less
@@ -1,5 +1,5 @@
-@treePrefixCls: ant-tree;
-.antCheckboxFn(@checkboxPrefixCls: ant-tree-checkbox);
+@tree-prefix-cls: ant-tree;
+.antCheckboxFn(@checkbox-prefix-cls: ant-tree-checkbox);
 @import "../mixins/iconfont";
 .antTreeSwitcherIcon() {
   position: relative;
@@ -16,7 +16,7 @@
     transition: transform .3s ease;
   }
 }
-.@{treePrefixCls} {
+.@{tree-prefix-cls} {
   margin: 0;
   padding: 5px;
   font-size: 12px;
@@ -41,11 +41,11 @@
       color: #666;
     }
     span {
-      &.@{treePrefixCls}-checkbox {
+      &.@{tree-prefix-cls}-checkbox {
         margin: 3px 7px 0 0;
       }
-      &.@{treePrefixCls}-switcher,
-      &.@{treePrefixCls}-iconEle {
+      &.@{tree-prefix-cls}-switcher,
+      &.@{tree-prefix-cls}-iconEle {
         line-height: 0;
         margin: 0;
         width: 16px;
@@ -59,7 +59,7 @@
         background-repeat: no-repeat;
         background-attachment: scroll;
       }
-      &.@{treePrefixCls}-switcher {
+      &.@{tree-prefix-cls}-switcher {
         &-disabled {
           background: #fff;
           position: relative;
@@ -71,16 +71,16 @@
             color: gray;
           }
         }
-        &.@{treePrefixCls}-roots_open,
-        &.@{treePrefixCls}-center_open,
-        &.@{treePrefixCls}-bottom_open,
-        &.@{treePrefixCls}-noline_open {
+        &.@{tree-prefix-cls}-roots_open,
+        &.@{tree-prefix-cls}-center_open,
+        &.@{tree-prefix-cls}-bottom_open,
+        &.@{tree-prefix-cls}-noline_open {
           .antTreeSwitcherIcon();
         }
-        &.@{treePrefixCls}-roots_close,
-        &.@{treePrefixCls}-center_close,
-        &.@{treePrefixCls}-bottom_close,
-        &.@{treePrefixCls}-noline_close {
+        &.@{tree-prefix-cls}-roots_close,
+        &.@{tree-prefix-cls}-center_close,
+        &.@{tree-prefix-cls}-bottom_close,
+        &.@{tree-prefix-cls}-noline_close {
           .antTreeSwitcherIcon();
           .ie-rotate(3);
           &:after {
diff --git a/style/components/upload.less b/style/components/upload.less
index 5f121258ba..9736ad2c83 100644
--- a/style/components/upload.less
+++ b/style/components/upload.less
@@ -1,7 +1,7 @@
-@prefixUploadClass: ant-upload;
+@upload-prefix-cls: ant-upload;
 
-.@{prefixUploadClass} {
-  &.@{prefixUploadClass}-drag {
+.@{upload-prefix-cls} {
+  &.@{upload-prefix-cls}-drag {
     border: 1px dashed #d9d9d9;
     transition: all 0.3s ease;
     cursor: pointer;
@@ -11,7 +11,7 @@
     height: 100%;
     position: relative;
 
-    .@{prefixUploadClass}-drag-container {
+    .@{upload-prefix-cls}-drag-container {
       position: absolute;
       top: 50%;
       left: 50%;
@@ -21,7 +21,7 @@
     &:hover {
       border: 1px dashed #999;
     }
-    p.@{prefixUploadClass}-drag-icon {
+    p.@{upload-prefix-cls}-drag-icon {
       .anticon {
         font-size: 80px;
         margin-top: -30px;
@@ -30,10 +30,10 @@
       height: 60px;
       margin-bottom: 24px;
     }
-    p.@{prefixUploadClass}-text {
+    p.@{upload-prefix-cls}-text {
       font-size: 14px;
     }
-    p.@{prefixUploadClass}-hint {
+    p.@{upload-prefix-cls}-hint {
       font-size: 12px;
       color: #999;
     }
@@ -51,10 +51,10 @@
   }
 }
 
-.@{prefixUploadClass}-list {
+.@{upload-prefix-cls}-list {
   margin-left: 4px;
   margin-top: 8px;
-  .@{prefixUploadClass}-list-item {
+  .@{upload-prefix-cls}-list-item {
     margin-bottom: 4px;
     height: 22px;
     overflow: hidden;
@@ -70,14 +70,14 @@
      }
     }
   }
-  .@{prefixUploadClass}-item-name {
+  .@{upload-prefix-cls}-item-name {
     font-size: 12px;
     color: #666;
     margin-left: 4px;
     margin-right: 8px;
     font-weight: normal;
   }
-  .@{prefixUploadClass}-success-icon {
+  .@{upload-prefix-cls}-success-icon {
     color: @success-color;
     font-weight: bold;
   }
diff --git a/style/mixins/form.less b/style/mixins/form.less
index b386a7ac81..af5395fd94 100644
--- a/style/mixins/form.less
+++ b/style/mixins/form.less
@@ -12,7 +12,7 @@
     }
   }
 
-  .@{prefixCalendarClass}-picker-open .@{prefixCalendarClass}-picker-input {
+  .@{calendar-prefix-cls}-picker-open .@{calendar-prefix-cls}-picker-input {
     box-shadow: 0 0 0 2px tint(@border-color, 80%);
   }
 
diff --git a/style/themes/default/custom.less b/style/themes/default/custom.less
index 19e7932002..6ae5a58aa6 100644
--- a/style/themes/default/custom.less
+++ b/style/themes/default/custom.less
@@ -4,7 +4,7 @@
 // Color
 @primary-color          : #2db7f5;
 @success-color          : #87d068;
-@error-color            : #ff6600;
+@error-color            : #f60;
 @warning-color          : #fac450;
 
 // ------ Base & Require ------
@@ -114,7 +114,7 @@
 @legend-color                : #999;
 @legend-border-color         : #d9d9d9;
 // Label
-@label-required-color        : #F60;
+@label-required-color        : #f60;
 @label-color                 : #666;
 // Input
 @input-height-base: 28px;
@@ -137,4 +137,4 @@
 
 @form-item-margin-bottom     : 24px;
 
-@overlay-shadow              : 0px 0px 4px rgba(0, 0, 0, 0.17);
+@overlay-shadow              : 0 0 4px rgba(0, 0, 0, 0.17);

From 2940cd2696651d5a702e828d20080feb87182922 Mon Sep 17 00:00:00 2001
From: afc163 <afc163@gmail.com>
Date: Thu, 20 Aug 2015 17:01:57 +0800
Subject: [PATCH 6/9] fix build

---
 style/components/form.less | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/style/components/form.less b/style/components/form.less
index e35117735d..efeac44cd3 100644
--- a/style/components/form.less
+++ b/style/components/form.less
@@ -230,7 +230,7 @@ form {
     vertical-align: middle;
   }
 
-  .@{prefixCalendarClass}-picker-input {
+  .@{calendar-prefix-cls}-picker-input {
     width: 100%!important;
   }
 

From fefd0392429a2b9485850d9e551dadad3ee33c2a Mon Sep 17 00:00:00 2001
From: zhujun24 <zhujun87654321@gmail.com>
Date: Thu, 20 Aug 2015 16:56:19 +0800
Subject: [PATCH 7/9] format alert & notification demo var xxx = antd.xxx

---
 components/alert/demo/basic.md            | 2 +-
 components/alert/demo/closable.md         | 2 +-
 components/alert/demo/close-type.md       | 2 +-
 components/alert/demo/description.md      | 2 +-
 components/alert/demo/style.md            | 2 +-
 components/notification/demo/basic.md     | 2 +-
 components/notification/demo/duration.md  | 2 +-
 components/notification/demo/onclose.md   | 2 +-
 components/notification/demo/with-btn.md  | 2 +-
 components/notification/demo/with-icon.md | 2 +-
 10 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/components/alert/demo/basic.md b/components/alert/demo/basic.md
index bf76f68760..cecb3263d6 100644
--- a/components/alert/demo/basic.md
+++ b/components/alert/demo/basic.md
@@ -7,7 +7,7 @@
 ---
 
 ````jsx
-var Alert = require('antd/lib/alert');
+var Alert = antd.Alert;
 
 React.render(<Alert message="成功提示的文案" type="success" />
 , document.getElementById('components-alert-demo-basic'));
diff --git a/components/alert/demo/closable.md b/components/alert/demo/closable.md
index dfa86160b7..2f7067e900 100644
--- a/components/alert/demo/closable.md
+++ b/components/alert/demo/closable.md
@@ -7,7 +7,7 @@
 ---
 
 ````jsx
-var Alert = require('antd/lib/alert');
+var Alert = antd.Alert;
 
 var onClose = function(e) {
   console.log(e, '我要被关闭啦！');
diff --git a/components/alert/demo/close-type.md b/components/alert/demo/close-type.md
index 5917333727..079156a2b1 100644
--- a/components/alert/demo/close-type.md
+++ b/components/alert/demo/close-type.md
@@ -7,7 +7,7 @@
 ---
 
 ````jsx
-var Alert = require('antd/lib/alert');
+var Alert = antd.Alert;
 var link = <a href="javascript:;">不再提醒</a>
 
 React.render(
diff --git a/components/alert/demo/description.md b/components/alert/demo/description.md
index b479d8e825..3a83e3d457 100644
--- a/components/alert/demo/description.md
+++ b/components/alert/demo/description.md
@@ -7,7 +7,7 @@
 ---
 
 ````jsx
-var Alert = require('antd/lib/alert');
+var Alert = antd.Alert;
 
 React.render(<div>
   <Alert message="成功提示的文案"
diff --git a/components/alert/demo/style.md b/components/alert/demo/style.md
index e54ae3fe91..61345c02d2 100644
--- a/components/alert/demo/style.md
+++ b/components/alert/demo/style.md
@@ -7,7 +7,7 @@
 ---
 
 ````jsx
-var Alert = require('antd/lib/alert');
+var Alert = antd.Alert;
 
 React.render(<div>
   <Alert message="成功提示的文案" type="success" />
diff --git a/components/notification/demo/basic.md b/components/notification/demo/basic.md
index 37fdbf1e98..83abb67bfc 100644
--- a/components/notification/demo/basic.md
+++ b/components/notification/demo/basic.md
@@ -7,7 +7,7 @@
 ---
 
 ````jsx
-var notification = require('antd/lib/notification');
+var notification = antd.Notification;
 
 var openNotification = function() {
   notification.open({
diff --git a/components/notification/demo/duration.md b/components/notification/demo/duration.md
index 11f35ba847..aea84cb004 100644
--- a/components/notification/demo/duration.md
+++ b/components/notification/demo/duration.md
@@ -7,7 +7,7 @@
 ---
 
 ````jsx
-var notification = require('antd/lib/notification');
+var notification = antd.Notification;
 
 var openNotification = function() {
   var args = {
diff --git a/components/notification/demo/onclose.md b/components/notification/demo/onclose.md
index c994656f00..f1a2c62d91 100644
--- a/components/notification/demo/onclose.md
+++ b/components/notification/demo/onclose.md
@@ -7,7 +7,7 @@
 ---
 
 ````jsx
-var notification = require('antd/lib/notification');
+var notification = antd.Notification;
 
 var close = function() {
   console.log("我被默认的关闭按钮关闭了！");
diff --git a/components/notification/demo/with-btn.md b/components/notification/demo/with-btn.md
index 94fb28b333..ae28cbbefb 100644
--- a/components/notification/demo/with-btn.md
+++ b/components/notification/demo/with-btn.md
@@ -7,7 +7,7 @@
 ---
 
 ````jsx
-var notification = require('antd/lib/notification');
+var notification = antd.Notification;
 
 var close = function(){
   console.log('我被默认的关闭按钮关闭了！');
diff --git a/components/notification/demo/with-icon.md b/components/notification/demo/with-icon.md
index 155a7fc894..6c8940ac36 100644
--- a/components/notification/demo/with-icon.md
+++ b/components/notification/demo/with-icon.md
@@ -7,7 +7,7 @@
 ---
 
 ````jsx
-var notification = require('antd/lib/notification');
+var notification = antd.Notification;
 
 var openNotificationWithIcon = function(type) {
   return function(){

From 0a1cfccd221163243a4d2d7b6b1b0d34955b03b3 Mon Sep 17 00:00:00 2001
From: yiminghe <yiminghe@gmail.com>
Date: Thu, 20 Aug 2015 17:27:40 +0800
Subject: [PATCH 8/9] upgrade select. Fixes #170

---
 components/select/demo/basic.md      |  2 +-
 components/select/demo/coordinate.md | 13 ++++++++++---
 components/select/demo/multiple.md   |  2 +-
 components/select/demo/optgroup.md   |  2 +-
 components/select/demo/search.md     |  2 +-
 components/select/demo/size.md       |  8 ++++----
 components/select/demo/tags.md       |  2 +-
 components/select/index.md           |  2 +-
 package.json                         |  7 ++++---
 style/components/select.less         |  4 +++-
 10 files changed, 27 insertions(+), 17 deletions(-)

diff --git a/components/select/demo/basic.md b/components/select/demo/basic.md
index 3a21d590f9..e91954d252 100644
--- a/components/select/demo/basic.md
+++ b/components/select/demo/basic.md
@@ -15,7 +15,7 @@ function handleChange(value) {
 }
 
 React.render(
-  <Select value="lucy" style={{width:200}} onChange={handleChange}>
+  <Select defaultValue="lucy" style={{width:200}} onChange={handleChange}>
     <Option value="jack">Jack</Option>
     <Option value="lucy">Lucy</Option>
     <Option value="disabled" disabled>Disabled</Option>
diff --git a/components/select/demo/coordinate.md b/components/select/demo/coordinate.md
index a83588fb12..be9f9a423c 100644
--- a/components/select/demo/coordinate.md
+++ b/components/select/demo/coordinate.md
@@ -20,12 +20,19 @@ var cityData = {
 var App = React.createClass({
   getInitialState() {
     return {
-      cities: cityData[provinceData[0]]
+      cities: cityData[provinceData[0]],
+      secondCity:cityData[provinceData[0]][0]
     };
   },
   handleProvinceChange(value) {
     this.setState({
-      cities: cityData[value]
+      cities: cityData[value],
+      secondCity:cityData[value][0]
+    });
+  },
+  onSecondCityChange(value) {
+    this.setState({
+      secondCity: value
     });
   },
   render() {
@@ -40,7 +47,7 @@ var App = React.createClass({
         {provinceOptions}
       </Select>
       &nbsp;
-      <Select value={this.state.cities[0]} style={{width:150}} onChange={this.handleCityChange}>
+      <Select value={this.state.secondCity} style={{width:150}} onChange={this.onSecondCityChange}>
         {cityOptions}
       </Select>
     </div>;
diff --git a/components/select/demo/multiple.md b/components/select/demo/multiple.md
index 4460b7e846..fb9b058327 100644
--- a/components/select/demo/multiple.md
+++ b/components/select/demo/multiple.md
@@ -23,7 +23,7 @@ function handleChange(value) {
 React.render(
   <Select multiple
   style={{width:400}}
-  value={['a10', 'c12']} onChange={handleChange}>
+  defaultValue={['a10', 'c12']} onChange={handleChange}>
     {children}
   </Select>
 , document.getElementById('components-select-demo-multiple'));
diff --git a/components/select/demo/optgroup.md b/components/select/demo/optgroup.md
index 10e049c484..aff602ecd2 100644
--- a/components/select/demo/optgroup.md
+++ b/components/select/demo/optgroup.md
@@ -16,7 +16,7 @@ function handleChange(value) {
 }
 
 React.render(
-  <Select value="lucy"
+  <Select defaultValue="lucy"
     style={{width:200}}
     showSearch={false}
     onChange={handleChange}>
diff --git a/components/select/demo/search.md b/components/select/demo/search.md
index 87a4161688..a5d0c55d83 100644
--- a/components/select/demo/search.md
+++ b/components/select/demo/search.md
@@ -15,7 +15,7 @@ function handleChange(value) {
 }
 
 React.render(
-  <Select value="lucy" showSearch={true} style={{width:200}} onChange={handleChange}>
+  <Select defaultValue="lucy" showSearch={true} style={{width:200}} onChange={handleChange}>
     <Option value="jack">jack</Option>
     <Option value="lucy">lucy</Option>
     <Option value="disabled" disabled>disabled</Option>
diff --git a/components/select/demo/size.md b/components/select/demo/size.md
index 85bc0bf9fd..68a7df2fa0 100644
--- a/components/select/demo/size.md
+++ b/components/select/demo/size.md
@@ -16,19 +16,19 @@ function handleChange(value) {
 
 React.render(
   <div>
-  <Select size="large" value="lucy" style={{width:200}} onChange={handleChange}>
+  <Select size="large" defaultValue="lucy" style={{width:200}} onChange={handleChange}>
       <Option value="jack">Jack</Option>
       <Option value="lucy">Lucy</Option>
       <Option value="disabled" disabled>Disabled</Option>
       <Option value="yiminghe">yiminghe</Option>
     </Select>
-    <Select value="lucy" style={{width:200}} onChange={handleChange}>
+    <Select defaultValue="lucy" style={{width:200}} onChange={handleChange}>
       <Option value="jack">Jack</Option>
       <Option value="lucy">Lucy</Option>
       <Option value="disabled" disabled>Disabled</Option>
       <Option value="yiminghe">yiminghe</Option>
     </Select>
-    <Select size="small" value="lucy" style={{width:200}} onChange={handleChange}>
+    <Select size="small" defaultValue="lucy" style={{width:200}} onChange={handleChange}>
       <Option value="jack">Jack</Option>
       <Option value="lucy">Lucy</Option>
       <Option value="disabled" disabled>Disabled</Option>
@@ -42,4 +42,4 @@ React.render(
 .ant-select{
   margin: 0 10px 10px 0;
 }
-````
\ No newline at end of file
+````
diff --git a/components/select/demo/tags.md b/components/select/demo/tags.md
index cae1403db3..d0b058ef00 100644
--- a/components/select/demo/tags.md
+++ b/components/select/demo/tags.md
@@ -23,7 +23,7 @@ function handleChange(value) {
 React.render(
   <Select
    style={{width:400}}
-  tags value={['name2', 'name3']} onChange={handleChange}>
+  tags defaultValue={['name2', 'name3']} onChange={handleChange}>
     {children}
   </Select>
 , document.getElementById('components-select-demo-tags'));
diff --git a/components/select/index.md b/components/select/index.md
index 108fe725ee..e09a41bc42 100644
--- a/components/select/index.md
+++ b/components/select/index.md
@@ -24,7 +24,7 @@
 
 | 参数     | 说明           | 类型     | 默认值       |
 |----------|----------------|----------|--------------|
-| value    | 指定选中的条目 | string/Array<String>   |  无  |
+| value    | 指定当前选中的条目 | string/Array<String>   |  无  |
 | defaultValue    | 指定默认选中的条目 | string/Array<String>   |  无  |
 | multiple   | 支持多选 |   | false |
 | filterOption | 是否根据输入项进行筛选 |  | true     |
diff --git a/package.json b/package.json
index 2e949b453b..663101e001 100644
--- a/package.json
+++ b/package.json
@@ -38,6 +38,7 @@
     "gregorian-calendar-format": "~3.0.1",
     "is-equal-shallow": "~0.1.3",
     "object-assign": "3.x",
+    "rc-animate": "~1.1.0",
     "rc-calendar": "~3.13.0",
     "rc-checkbox": "~1.1.1",
     "rc-collapse": "~1.2.3",
@@ -50,7 +51,7 @@
     "rc-pagination": "~1.1.0",
     "rc-progress": "~1.0.0",
     "rc-radio": "~2.0.0",
-    "rc-select": "~4.7.1",
+    "rc-select": "~4.8.0",
     "rc-slider": "~1.4.0",
     "rc-steps": "~1.1.4",
     "rc-switch": "~1.2.0",
@@ -61,8 +62,7 @@
     "rc-upload": "~1.3.1",
     "rc-util": "~2.0.3",
     "react-slick2": "~0.6.6",
-    "reqwest": "~2.0.1",
-    "rc-animate": "~1.1.0"
+    "reqwest": "~2.0.1"
   },
   "devDependencies": {
     "autoprefixer-loader": "~2.0.0",
@@ -83,6 +83,7 @@
     "lodash": "^3.10.0",
     "nico-jsx": "~0.5.8",
     "precommit-hook": "^1.0.7",
+    "rc-tabs": "~5.3.3",
     "webpack": "^1.10.1",
     "webpack-dev-middleware": "^1.2.0"
   },
diff --git a/style/components/select.less b/style/components/select.less
index e956ca9171..c1386d7fe2 100644
--- a/style/components/select.less
+++ b/style/components/select.less
@@ -291,7 +291,9 @@
   }
 
   &-dropdown {
-    display: none;
+    &-hidden {
+      display: none;
+    }
     background-color: white;
     border: 1px solid #d9d9d9;
     box-shadow: @overlay-shadow;

From 12c17f7dd317df496cca53ebd9f75e2615002398 Mon Sep 17 00:00:00 2001
From: sorrycc <sorrycc@gmail.com>
Date: Thu, 20 Aug 2015 18:19:51 +0800
Subject: [PATCH 9/9] update get-started.md, Close #169

---
 docs/getting-started.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/docs/getting-started.md b/docs/getting-started.md
index 13b81058b2..8eeeca8b28 100644
--- a/docs/getting-started.md
+++ b/docs/getting-started.md
@@ -69,6 +69,7 @@ $ npm install
 
 ```jsx
 import {Datepicker, message} from 'antd';
+import React from 'react';
 
 var App = React.createClass({
   getInitialState() {