update the master branch to the latest

src/styles/README.md

@@ -0,0 +1,11 @@
+# 样式库说明
+
+## 目录
+
+|-- animation  (动画)
+
+|-- common  (全局样式)
+
+|-- components  (组件样式)
+
+|-- mixins  (混入)

src/styles/animation/ease.less

@@ -0,0 +1,36 @@
+.ease-motion(@className, @keyframeName) {
+    .make-motion(@className, @keyframeName);
+    .@{className}-enter-active, .@{className}-appear {
+        opacity: 0;
+        animation-timing-function: linear;
+        animation-duration: @transition-time;
+    }
+    .@{className}-leave-active {
+        animation-timing-function: linear;
+        animation-duration: @transition-time;
+    }
+}
+
+.ease-motion(ease, ivuEase);
+
+@keyframes ivuEaseIn {
+    0% {
+        opacity: 0;
+        transform: scale(0.9);
+    }
+    100% {
+        opacity: 1;
+        transform: scale(1);
+    }
+}
+
+@keyframes ivuEaseOut {
+    0% {
+        opacity: 1;
+        transform: scale(1);
+    }
+    100% {
+        opacity: 0;
+        transform: scale(0.9);
+    }
+}

src/styles/animation/fade.less

@@ -0,0 +1,30 @@
+.fade-motion(@className, @keyframeName) {
+    .make-motion(@className, @keyframeName);
+    .@{className}-enter-active, .@{className}-appear {
+        opacity: 0;
+        animation-timing-function: linear;
+    }
+    .@{className}-leave-active {
+        animation-timing-function: linear;
+    }
+}
+
+.fade-motion(fade, ivuFade);
+
+@keyframes ivuFadeIn {
+    0% {
+        opacity: 0;
+    }
+    100% {
+        opacity: 1;
+    }
+}
+
+@keyframes ivuFadeOut {
+    0% {
+        opacity: 1;
+    }
+    100% {
+        opacity: 0;
+    }
+}

src/styles/animation/index.less

@@ -0,0 +1,32 @@
+.motion-common() {
+    animation-duration: @animation-time;
+    animation-fill-mode: both;
+}
+
+.make-motion(@className, @keyframeName) {
+    .@{className}-enter-active, .@{className}-appear {
+        .motion-common();
+        animation-play-state: paused;
+    }
+    .@{className}-leave-active {
+        .motion-common();
+        animation-play-state: paused;
+    }
+    .@{className}-enter-active, .@{className}-appear {
+        animation-name: ~"@{keyframeName}In";
+        animation-play-state: running;
+    }
+    .@{className}-leave-active {
+        animation-name: ~"@{keyframeName}Out";
+        animation-play-state: running;
+    }
+}
+
+@import "fade";
+@import "move";
+@import "ease";
+@import "slide";
+
+.collapse-transition {
+    transition: @transition-time height ease-in-out, @transition-time padding-top ease-in-out, @transition-time padding-bottom ease-in-out;
+}

src/styles/animation/move.less

@@ -0,0 +1,161 @@
+.move-motion(@className, @keyframeName) {
+    .make-motion(@className, @keyframeName);
+    .@{className}-enter-active, .@{className}-appear {
+        opacity: 0;
+        animation-timing-function: @ease-in-out;
+    }
+    .@{className}-leave-active {
+        animation-timing-function: @ease-in-out;
+    }
+}
+
+.move-motion(move-up, ivuMoveUp);
+.move-motion(move-down, ivuMoveDown);
+.move-motion(move-left, ivuMoveLeft);
+.move-motion(move-right, ivuMoveRight);
+
+@keyframes ivuMoveDownIn {
+    0% {
+        transform-origin: 0 0;
+        transform: translateY(100%);
+        opacity: 0;
+    }
+    100% {
+        transform-origin: 0 0;
+        transform: translateY(0%);
+        opacity: 1;
+    }
+}
+
+@keyframes ivuMoveDownOut {
+    0% {
+        transform-origin: 0 0;
+        transform: translateY(0%);
+        opacity: 1;
+    }
+    100% {
+        transform-origin: 0 0;
+        transform: translateY(100%);
+        opacity: 0;
+    }
+}
+
+@keyframes ivuMoveLeftIn {
+    0% {
+        transform-origin: 0 0;
+        transform: translateX(-100%);
+        opacity: 0;
+    }
+    100% {
+        transform-origin: 0 0;
+        transform: translateX(0%);
+        opacity: 1;
+    }
+}
+
+@keyframes ivuMoveLeftOut {
+    0% {
+        transform-origin: 0 0;
+        transform: translateX(0%);
+        opacity: 1;
+    }
+    100% {
+        transform-origin: 0 0;
+        transform: translateX(-100%);
+        opacity: 0;
+    }
+}
+
+@keyframes ivuMoveRightIn {
+    0% {
+        opacity: 0;
+        transform-origin: 0 0;
+        transform: translateX(100%);
+    }
+    100% {
+        opacity: 1;
+        transform-origin: 0 0;
+        transform: translateX(0%);
+    }
+}
+
+@keyframes ivuMoveRightOut {
+    0% {
+        transform-origin: 0 0;
+        transform: translateX(0%);
+        opacity: 1;
+    }
+    100% {
+        transform-origin: 0 0;
+        transform: translateX(100%);
+        opacity: 0;
+    }
+}
+
+@keyframes ivuMoveUpIn {
+    0% {
+        transform-origin: 0 0;
+        transform: translateY(-100%);
+        opacity: 0;
+    }
+    100% {
+        transform-origin: 0 0;
+        transform: translateY(0%);
+        opacity: 1;
+    }
+}
+
+@keyframes ivuMoveUpOut {
+    0% {
+        transform-origin: 0 0;
+        transform: translateY(0%);
+        opacity: 1;
+    }
+    100% {
+        transform-origin: 0 0;
+        transform: translateY(-100%);
+        opacity: 0;
+    }
+}
+
+// specific transition for Notice
+
+.move-motion(move-notice, ivuMoveNotice);
+@import '../components/notice.less';
+
+@keyframes ivuMoveNoticeIn {
+    0% {
+        opacity: 0;
+        transform-origin: 0 0;
+        transform: translateX(100%);
+    }
+    100% {
+        opacity: 1;
+        transform-origin: 0 0;
+        transform: translateX(0%);
+    }
+}
+
+@keyframes ivuMoveNoticeOut {
+    0% {
+        transform-origin: 0 0;
+        transform: translateX(0%);
+        opacity: 1;
+    }
+    70% {
+        transform-origin: 0 0;
+        transform: translateX(100%);
+        height: auto;
+        padding: @notice-padding;
+        margin-bottom: @notice-margin-bottom;
+        opacity: 0;
+    }
+    100% {
+        transform-origin: 0 0;
+        transform: translateX(100%);
+        height: 0;
+        padding: 0;
+        margin-bottom: 0;
+        opacity: 0;
+    }
+}

src/styles/animation/slide.less

@@ -0,0 +1,142 @@
+.slide-motion(@className, @keyframeName) {
+    .make-motion(@className, @keyframeName);
+    .@{className}-enter-active, .@{className}-appear {
+        opacity: 0;
+        animation-timing-function: @ease-in-out;
+    }
+    .@{className}-leave-active {
+        animation-timing-function: @ease-in-out;
+    }
+}
+
+.slide-motion(transition-drop, ivuTransitionDrop);
+.slide-motion(slide-up, ivuSlideUp);
+.slide-motion(slide-down, ivuSlideDown);
+.slide-motion(slide-left, ivuSlideLeft);
+.slide-motion(slide-right, ivuSlideRight);
+
+@keyframes ivuTransitionDropIn {
+    0% {
+        opacity: 0;
+        transform: scaleY(0.8);
+    }
+    100% {
+        opacity: 1;
+        transform: scaleY(1);
+    }
+}
+
+@keyframes ivuTransitionDropOut {
+    0% {
+        opacity: 1;
+        transform: scaleY(1);
+    }
+    100% {
+        opacity: 0;
+        transform: scaleY(0.8);
+    }
+}
+
+@keyframes ivuSlideUpIn {
+    0% {
+        opacity: 0;
+        transform-origin: 0% 0%;
+        transform: scaleY(.8);
+    }
+    100% {
+        opacity: 1;
+        transform-origin: 0% 0%;
+        transform: scaleY(1);
+    }
+}
+
+@keyframes ivuSlideUpOut {
+    0% {
+        opacity: 1;
+        transform-origin: 0% 0%;
+        transform: scaleY(1);
+    }
+    100% {
+        opacity: 0;
+        transform-origin: 0% 0%;
+        transform: scaleY(.8);
+    }
+}
+
+@keyframes ivuSlideDownIn {
+    0% {
+        opacity: 0;
+        transform-origin: 100% 100%;
+        transform: scaleY(.8);
+    }
+    100% {
+        opacity: 1;
+        transform-origin: 100% 100%;
+        transform: scaleY(1);
+    }
+}
+
+@keyframes ivuSlideDownOut {
+    0% {
+        opacity: 1;
+        transform-origin: 100% 100%;
+        transform: scaleY(1);
+    }
+    100% {
+        opacity: 0;
+        transform-origin: 100% 100%;
+        transform: scaleY(.8);
+    }
+}
+
+@keyframes ivuSlideLeftIn {
+    0% {
+        opacity: 0;
+        transform-origin: 0% 0%;
+        transform: scaleX(.8);
+    }
+    100% {
+        opacity: 1;
+        transform-origin: 0% 0%;
+        transform: scaleX(1);
+    }
+}
+
+@keyframes ivuSlideLeftOut {
+    0% {
+        opacity: 1;
+        transform-origin: 0% 0%;
+        transform: scaleX(1);
+    }
+    100% {
+        opacity: 0;
+        transform-origin: 0% 0%;
+        transform: scaleX(.8);
+    }
+}
+
+@keyframes ivuSlideRightIn {
+    0% {
+        opacity: 0;
+        transform-origin: 100% 0%;
+        transform: scaleX(.8);
+    }
+    100% {
+        opacity: 1;
+        transform-origin: 100% 0%;
+        transform: scaleX(1);
+    }
+}
+
+@keyframes ivuSlideRightOut {
+    0% {
+        opacity: 1;
+        transform-origin: 100% 0%;
+        transform: scaleX(1);
+    }
+    100% {
+        opacity: 0;
+        transform-origin: 100% 0%;
+        transform: scaleX(.8);
+    }
+}

src/styles/color/bezierEasing.less

@@ -0,0 +1,110 @@
+/* stylelint-disable declaration-bang-space-before,no-duplicate-selectors */
+.bezierEasingMixin() {
+@functions: ~`(function() {
+  var NEWTON_ITERATIONS = 4;
+  var NEWTON_MIN_SLOPE = 0.001;
+  var SUBDIVISION_PRECISION = 0.0000001;
+  var SUBDIVISION_MAX_ITERATIONS = 10;
+
+  var kSplineTableSize = 11;
+  var kSampleStepSize = 1.0 / (kSplineTableSize - 1.0);
+
+  var float32ArraySupported = typeof Float32Array === 'function';
+
+  function A (aA1, aA2) { return 1.0 - 3.0 * aA2 + 3.0 * aA1; }
+  function B (aA1, aA2) { return 3.0 * aA2 - 6.0 * aA1; }
+  function C (aA1)      { return 3.0 * aA1; }
+
+  // Returns x(t) given t, x1, and x2, or y(t) given t, y1, and y2.
+  function calcBezier (aT, aA1, aA2) { return ((A(aA1, aA2) * aT + B(aA1, aA2)) * aT + C(aA1)) * aT; }
+
+  // Returns dx/dt given t, x1, and x2, or dy/dt given t, y1, and y2.
+  function getSlope (aT, aA1, aA2) { return 3.0 * A(aA1, aA2) * aT * aT + 2.0 * B(aA1, aA2) * aT + C(aA1); }
+
+  function binarySubdivide (aX, aA, aB, mX1, mX2) {
+    var currentX, currentT, i = 0;
+    do {
+      currentT = aA + (aB - aA) / 2.0;
+      currentX = calcBezier(currentT, mX1, mX2) - aX;
+      if (currentX > 0.0) {
+        aB = currentT;
+      } else {
+        aA = currentT;
+      }
+    } while (Math.abs(currentX) > SUBDIVISION_PRECISION && ++i < SUBDIVISION_MAX_ITERATIONS);
+    return currentT;
+  }
+
+  function newtonRaphsonIterate (aX, aGuessT, mX1, mX2) {
+   for (var i = 0; i < NEWTON_ITERATIONS; ++i) {
+     var currentSlope = getSlope(aGuessT, mX1, mX2);
+     if (currentSlope === 0.0) {
+       return aGuessT;
+     }
+     var currentX = calcBezier(aGuessT, mX1, mX2) - aX;
+     aGuessT -= currentX / currentSlope;
+   }
+   return aGuessT;
+  }
+
+  var BezierEasing = function (mX1, mY1, mX2, mY2) {
+    if (!(0 <= mX1 && mX1 <= 1 && 0 <= mX2 && mX2 <= 1)) {
+      throw new Error('bezier x values must be in [0, 1] range');
+    }
+
+    // Precompute samples table
+    var sampleValues = float32ArraySupported ? new Float32Array(kSplineTableSize) : new Array(kSplineTableSize);
+    if (mX1 !== mY1 || mX2 !== mY2) {
+      for (var i = 0; i < kSplineTableSize; ++i) {
+        sampleValues[i] = calcBezier(i * kSampleStepSize, mX1, mX2);
+      }
+    }
+
+    function getTForX (aX) {
+      var intervalStart = 0.0;
+      var currentSample = 1;
+      var lastSample = kSplineTableSize - 1;
+
+      for (; currentSample !== lastSample && sampleValues[currentSample] <= aX; ++currentSample) {
+        intervalStart += kSampleStepSize;
+      }
+      --currentSample;
+
+      // Interpolate to provide an initial guess for t
+      var dist = (aX - sampleValues[currentSample]) / (sampleValues[currentSample + 1] - sampleValues[currentSample]);
+      var guessForT = intervalStart + dist * kSampleStepSize;
+
+      var initialSlope = getSlope(guessForT, mX1, mX2);
+      if (initialSlope >= NEWTON_MIN_SLOPE) {
+        return newtonRaphsonIterate(aX, guessForT, mX1, mX2);
+      } else if (initialSlope === 0.0) {
+        return guessForT;
+      } else {
+        return binarySubdivide(aX, intervalStart, intervalStart + kSampleStepSize, mX1, mX2);
+      }
+    }
+
+    return function BezierEasing (x) {
+      if (mX1 === mY1 && mX2 === mY2) {
+        return x; // linear
+      }
+      // Because JavaScript number are imprecise, we should guarantee the extremes are right.
+      if (x === 0) {
+        return 0;
+      }
+      if (x === 1) {
+        return 1;
+      }
+      return calcBezier(getTForX(x), mY1, mY2);
+    };
+  };
+
+  this.colorEasing = BezierEasing(0.26, 0.09, 0.37, 0.18);
+  // less 3 requires a return
+  return '';
+})()`;
+}
+// It is hacky way to make this function will be compiled preferentially by less
+// resolve error: `ReferenceError: colorPalette is not defined`
+// https://github.com/ant-design/ant-motion/issues/44
+.bezierEasingMixin();

src/styles/color/colorPalette.less

@@ -0,0 +1,75 @@
+/* stylelint-disable no-duplicate-selectors */
+@import "bezierEasing";
+@import "tinyColor";
+
+// We create a very complex algorithm which take the place of original tint/shade color system
+// to make sure no one can understand it 👻
+// and create an entire color palette magicly by inputing just a single primary color.
+// We are using bezier-curve easing function and some color manipulations like tint/shade/darken/spin
+.colorPaletteMixin() {
+@functions: ~`(function() {
+  var hueStep = 2;
+  var saturationStep = 16;
+  var saturationStep2 = 5;
+  var brightnessStep1 = 5;
+  var brightnessStep2 = 15;
+  var lightColorCount = 5;
+  var darkColorCount = 4;
+
+  var getHue = function(hsv, i, isLight) {
+    var hue;
+    if (hsv.h >= 60 && hsv.h <= 240) {
+      hue = isLight ? hsv.h - hueStep * i : hsv.h + hueStep * i;
+    } else {
+      hue = isLight ? hsv.h + hueStep * i : hsv.h - hueStep * i;
+    }
+    if (hue < 0) {
+      hue += 360;
+    } else if (hue >= 360) {
+      hue -= 360;
+    }
+    return Math.round(hue);
+  };
+  var getSaturation = function(hsv, i, isLight) {
+    var saturation;
+    if (isLight) {
+      saturation = Math.round(hsv.s * 100) - saturationStep * i;
+    } else if (i == darkColorCount) {
+      saturation = Math.round(hsv.s * 100) + saturationStep;
+    } else {
+      saturation = Math.round(hsv.s * 100) + saturationStep2 * i;
+    }
+    if (saturation > 100) {
+      saturation = 100;
+    }
+    if (isLight && i === lightColorCount && saturation > 10) {
+      saturation = 10;
+    }
+    if (saturation < 6) {
+      saturation = 6;
+    }
+    return Math.round(saturation);
+  };
+  var getValue = function(hsv, i, isLight) {
+    if (isLight) {
+      return Math.round(hsv.v * 100) + brightnessStep1 * i;
+    }
+    return Math.round(hsv.v * 100) - brightnessStep2 * i;
+  };
+
+  this.colorPalette = function(color, index) {
+    var isLight = index <= 6;
+    var hsv = tinycolor(color).toHsv();
+    var i = isLight ? lightColorCount + 1 - index : index - lightColorCount - 1;
+    return tinycolor({
+      h: getHue(hsv, i, isLight),
+      s: getSaturation(hsv, i, isLight),
+      v: getValue(hsv, i, isLight),
+    }).toHexString();
+  };
+})()`;
+}
+// It is hacky way to make this function will be compiled preferentially by less
+// resolve error: `ReferenceError: colorPalette is not defined`
+// https://github.com/ant-design/ant-motion/issues/44
+.colorPaletteMixin();

src/styles/color/colors.less

@@ -0,0 +1,146 @@
+@import 'colorPalette';
+
+// color palettes
+@blue-1: color(~`colorPalette("@{blue-6}", 1)`);
+@blue-2: color(~`colorPalette("@{blue-6}", 2)`);
+@blue-3: color(~`colorPalette("@{blue-6}", 3)`);
+@blue-4: color(~`colorPalette("@{blue-6}", 4)`);
+@blue-5: color(~`colorPalette("@{blue-6}", 5)`);
+@blue-6: #1890ff;
+@blue-7: color(~`colorPalette("@{blue-6}", 7)`);
+@blue-8: color(~`colorPalette("@{blue-6}", 8)`);
+@blue-9: color(~`colorPalette("@{blue-6}", 9)`);
+@blue-10: color(~`colorPalette("@{blue-6}", 10)`);
+
+@purple-1: color(~`colorPalette("@{purple-6}", 1)`);
+@purple-2: color(~`colorPalette("@{purple-6}", 2)`);
+@purple-3: color(~`colorPalette("@{purple-6}", 3)`);
+@purple-4: color(~`colorPalette("@{purple-6}", 4)`);
+@purple-5: color(~`colorPalette("@{purple-6}", 5)`);
+@purple-6: #722ed1;
+@purple-7: color(~`colorPalette("@{purple-6}", 7)`);
+@purple-8: color(~`colorPalette("@{purple-6}", 8)`);
+@purple-9: color(~`colorPalette("@{purple-6}", 9)`);
+@purple-10: color(~`colorPalette("@{purple-6}", 10)`);
+
+@cyan-1: color(~`colorPalette("@{cyan-6}", 1)`);
+@cyan-2: color(~`colorPalette("@{cyan-6}", 2)`);
+@cyan-3: color(~`colorPalette("@{cyan-6}", 3)`);
+@cyan-4: color(~`colorPalette("@{cyan-6}", 4)`);
+@cyan-5: color(~`colorPalette("@{cyan-6}", 5)`);
+@cyan-6: #13c2c2;
+@cyan-7: color(~`colorPalette("@{cyan-6}", 7)`);
+@cyan-8: color(~`colorPalette("@{cyan-6}", 8)`);
+@cyan-9: color(~`colorPalette("@{cyan-6}", 9)`);
+@cyan-10: color(~`colorPalette("@{cyan-6}", 10)`);
+
+@green-1: color(~`colorPalette("@{green-6}", 1)`);
+@green-2: color(~`colorPalette("@{green-6}", 2)`);
+@green-3: color(~`colorPalette("@{green-6}", 3)`);
+@green-4: color(~`colorPalette("@{green-6}", 4)`);
+@green-5: color(~`colorPalette("@{green-6}", 5)`);
+@green-6: #52c41a;
+@green-7: color(~`colorPalette("@{green-6}", 7)`);
+@green-8: color(~`colorPalette("@{green-6}", 8)`);
+@green-9: color(~`colorPalette("@{green-6}", 9)`);
+@green-10: color(~`colorPalette("@{green-6}", 10)`);
+
+@magenta-1: color(~`colorPalette("@{magenta-6}", 1)`);
+@magenta-2: color(~`colorPalette("@{magenta-6}", 2)`);
+@magenta-3: color(~`colorPalette("@{magenta-6}", 3)`);
+@magenta-4: color(~`colorPalette("@{magenta-6}", 4)`);
+@magenta-5: color(~`colorPalette("@{magenta-6}", 5)`);
+@magenta-6: #eb2f96;
+@magenta-7: color(~`colorPalette("@{magenta-6}", 7)`);
+@magenta-8: color(~`colorPalette("@{magenta-6}", 8)`);
+@magenta-9: color(~`colorPalette("@{magenta-6}", 9)`);
+@magenta-10: color(~`colorPalette("@{magenta-6}", 10)`);
+
+// alias of magenta
+@pink-1: color(~`colorPalette("@{pink-6}", 1)`);
+@pink-2: color(~`colorPalette("@{pink-6}", 2)`);
+@pink-3: color(~`colorPalette("@{pink-6}", 3)`);
+@pink-4: color(~`colorPalette("@{pink-6}", 4)`);
+@pink-5: color(~`colorPalette("@{pink-6}", 5)`);
+@pink-6: #eb2f96;
+@pink-7: color(~`colorPalette("@{pink-6}", 7)`);
+@pink-8: color(~`colorPalette("@{pink-6}", 8)`);
+@pink-9: color(~`colorPalette("@{pink-6}", 9)`);
+@pink-10: color(~`colorPalette("@{pink-6}", 10)`);
+
+@red-1: color(~`colorPalette("@{red-6}", 1)`);
+@red-2: color(~`colorPalette("@{red-6}", 2)`);
+@red-3: color(~`colorPalette("@{red-6}", 3)`);
+@red-4: color(~`colorPalette("@{red-6}", 4)`);
+@red-5: color(~`colorPalette("@{red-6}", 5)`);
+@red-6: #f5222d;
+@red-7: color(~`colorPalette("@{red-6}", 7)`);
+@red-8: color(~`colorPalette("@{red-6}", 8)`);
+@red-9: color(~`colorPalette("@{red-6}", 9)`);
+@red-10: color(~`colorPalette("@{red-6}", 10)`);
+
+@orange-1: color(~`colorPalette("@{orange-6}", 1)`);
+@orange-2: color(~`colorPalette("@{orange-6}", 2)`);
+@orange-3: color(~`colorPalette("@{orange-6}", 3)`);
+@orange-4: color(~`colorPalette("@{orange-6}", 4)`);
+@orange-5: color(~`colorPalette("@{orange-6}", 5)`);
+@orange-6: #fa8c16;
+@orange-7: color(~`colorPalette("@{orange-6}", 7)`);
+@orange-8: color(~`colorPalette("@{orange-6}", 8)`);
+@orange-9: color(~`colorPalette("@{orange-6}", 9)`);
+@orange-10: color(~`colorPalette("@{orange-6}", 10)`);
+
+@yellow-1: color(~`colorPalette("@{yellow-6}", 1)`);
+@yellow-2: color(~`colorPalette("@{yellow-6}", 2)`);
+@yellow-3: color(~`colorPalette("@{yellow-6}", 3)`);
+@yellow-4: color(~`colorPalette("@{yellow-6}", 4)`);
+@yellow-5: color(~`colorPalette("@{yellow-6}", 5)`);
+@yellow-6: #fadb14;
+@yellow-7: color(~`colorPalette("@{yellow-6}", 7)`);
+@yellow-8: color(~`colorPalette("@{yellow-6}", 8)`);
+@yellow-9: color(~`colorPalette("@{yellow-6}", 9)`);
+@yellow-10: color(~`colorPalette("@{yellow-6}", 10)`);
+
+@volcano-1: color(~`colorPalette("@{volcano-6}", 1)`);
+@volcano-2: color(~`colorPalette("@{volcano-6}", 2)`);
+@volcano-3: color(~`colorPalette("@{volcano-6}", 3)`);
+@volcano-4: color(~`colorPalette("@{volcano-6}", 4)`);
+@volcano-5: color(~`colorPalette("@{volcano-6}", 5)`);
+@volcano-6: #fa541c;
+@volcano-7: color(~`colorPalette("@{volcano-6}", 7)`);
+@volcano-8: color(~`colorPalette("@{volcano-6}", 8)`);
+@volcano-9: color(~`colorPalette("@{volcano-6}", 9)`);
+@volcano-10: color(~`colorPalette("@{volcano-6}", 10)`);
+
+@geekblue-1: color(~`colorPalette("@{geekblue-6}", 1)`);
+@geekblue-2: color(~`colorPalette("@{geekblue-6}", 2)`);
+@geekblue-3: color(~`colorPalette("@{geekblue-6}", 3)`);
+@geekblue-4: color(~`colorPalette("@{geekblue-6}", 4)`);
+@geekblue-5: color(~`colorPalette("@{geekblue-6}", 5)`);
+@geekblue-6: #2f54eb;
+@geekblue-7: color(~`colorPalette("@{geekblue-6}", 7)`);
+@geekblue-8: color(~`colorPalette("@{geekblue-6}", 8)`);
+@geekblue-9: color(~`colorPalette("@{geekblue-6}", 9)`);
+@geekblue-10: color(~`colorPalette("@{geekblue-6}", 10)`);
+
+@lime-1: color(~`colorPalette("@{lime-6}", 1)`);
+@lime-2: color(~`colorPalette("@{lime-6}", 2)`);
+@lime-3: color(~`colorPalette("@{lime-6}", 3)`);
+@lime-4: color(~`colorPalette("@{lime-6}", 4)`);
+@lime-5: color(~`colorPalette("@{lime-6}", 5)`);
+@lime-6: #a0d911;
+@lime-7: color(~`colorPalette("@{lime-6}", 7)`);
+@lime-8: color(~`colorPalette("@{lime-6}", 8)`);
+@lime-9: color(~`colorPalette("@{lime-6}", 9)`);
+@lime-10: color(~`colorPalette("@{lime-6}", 10)`);
+
+@gold-1: color(~`colorPalette("@{gold-6}", 1)`);
+@gold-2: color(~`colorPalette("@{gold-6}", 2)`);
+@gold-3: color(~`colorPalette("@{gold-6}", 3)`);
+@gold-4: color(~`colorPalette("@{gold-6}", 4)`);
+@gold-5: color(~`colorPalette("@{gold-6}", 5)`);
+@gold-6: #faad14;
+@gold-7: color(~`colorPalette("@{gold-6}", 7)`);
+@gold-8: color(~`colorPalette("@{gold-6}", 8)`);
+@gold-9: color(~`colorPalette("@{gold-6}", 9)`);
+@gold-10: color(~`colorPalette("@{gold-6}", 10)`);

src/styles/common/article.less

@@ -0,0 +1,59 @@
+.ivu-article {
+    h1{
+        font-size: 26px;
+        font-weight: normal;
+    }
+    h2{
+        font-size: 20px;
+        font-weight: normal;
+    }
+    h3{
+        font-size: 16px;
+        font-weight: normal;
+    }
+    h4{
+        font-size: 14px;
+        font-weight: normal;
+    }
+    h5{
+        font-size: 12px;
+        font-weight: normal;
+    }
+    h6{
+        font-size: 12px;
+        font-weight: normal;
+    }
+
+    blockquote{
+        padding: 5px 5px 3px 10px;
+        line-height: 1.5;
+        border-left: 4px solid #ddd;
+        margin-bottom: 20px;
+        color: #666;
+        font-size: 14px;
+    }
+
+    ul:not([class^="ivu-"]){
+        padding-left: 40px;
+        list-style-type: disc;
+    }
+    li:not([class^="ivu-"]){
+        margin-bottom: 5px;
+        font-size: 14px;
+    }
+    ul ul:not([class^="ivu-"]), ol ul:not([class^="ivu-"]){
+        list-style-type: circle;
+    }
+
+    p{
+        margin: 5px;
+        font-size: 14px;
+    }
+
+    a:not([class^="ivu-"])[target="_blank"]:after{
+        content: "\F3F2";
+        font-family: Ionicons;
+        color: #aaa;
+        margin-left: 3px;
+    }
+}

src/styles/common/base.less

@@ -0,0 +1,72 @@
+@import "normalize";
+
+* {
+    box-sizing: border-box;
+    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+}
+
+*:before,
+*:after {
+    box-sizing: border-box;
+}
+
+body {
+    font-family: @font-family;
+    font-size: @font-size-small;
+    line-height: @line-height-base;
+    color: @text-color;
+    background-color: @body-background;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+}
+
+body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, form, fieldset, legend, input, textarea, p, blockquote, th, td, hr, button, article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
+    margin: 0;
+    padding: 0;
+}
+
+button, input, select, textarea {
+    font-family: inherit;
+    font-size: inherit;
+    line-height: inherit;
+}
+
+input::-ms-clear, input::-ms-reveal {
+    display: none;
+}
+
+a {
+    color: @link-color;
+    background: transparent;
+    text-decoration: none;
+    outline: none;
+    cursor: pointer;
+    transition: color @transition-time ease;
+
+    &:hover {
+        color: @link-hover-color;
+    }
+
+    &:active {
+        color: @link-active-color;
+    }
+
+    &:active,
+    &:hover {
+        outline: 0;
+        text-decoration: none;
+    }
+
+    &[disabled] {
+        color: #ccc;
+        cursor: @cursor-disabled;
+        pointer-events: none;
+    }
+}
+
+code,
+kbd,
+pre,
+samp {
+    font-family: @code-family;
+}

src/styles/common/iconfont/_ionicons-font.less

@@ -0,0 +1,31 @@
+// Ionicons Font Path
+// --------------------------
+
+@font-face {
+    font-family: @ionicons-font-family;
+    src: url("@{ionicons-font-path}/ionicons.woff2?v=@{ionicons-version}") format("woff2"),
+         url("@{ionicons-font-path}/ionicons.woff?v=@{ionicons-version}") format("woff"),
+         url("@{ionicons-font-path}/ionicons.ttf?v=@{ionicons-version}") format("truetype"),
+         url("@{ionicons-font-path}/ionicons.svg?v=@{ionicons-version}#Ionicons") format("svg");
+    font-weight: normal;
+    font-style: normal;
+}
+
+.ivu-icon() {
+    display: inline-block;
+    font-family: @ionicons-font-family;
+    speak: none;
+    font-style: normal;
+    font-weight: normal;
+    font-variant: normal;
+    text-transform: none;
+    text-rendering: auto;
+    line-height: 1;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    vertical-align: middle;
+}
+
+.ivu-icon {
+    .ivu-icon();
+}

src/styles/common/iconfont/_ionicons-variables.less

@@ -0,0 +1,13 @@
+/*
+Ionicons, v2.0.0
+Created by Ben Sperry for the Ionic Framework, http://ionicons.com/
+https://twitter.com/benjsperry  https://twitter.com/ionicframework
+MIT License: https://github.com/driftyco/ionicons
+*/
+// Ionicons Variables
+// --------------------------
+
+@ionicons-font-path: "./fonts";
+@ionicons-font-family: "Ionicons";
+@ionicons-version: "3.0.0";
+@ionicons-prefix: ivu-icon-;

src/styles/common/iconfont/ionicons.less

@@ -0,0 +1,3 @@
+@import "_ionicons-variables";
+@import "_ionicons-font";
+@import "_ionicons-icons";

src/styles/common/index.less

@@ -0,0 +1,4 @@
+@import "base";
+@import "iconfont/ionicons";
+@import "layout";
+@import "article";

src/styles/common/layout.less

@@ -0,0 +1,106 @@
+.@{row-prefix-cls} {
+    .make-row();
+    display: block;
+
+    &-flex {
+        display: flex;
+        flex-direction: row;
+        flex-wrap: wrap;
+
+        &:before,
+        &:after {
+            display: flex;
+        }
+        // x轴原点
+        &-start {
+            justify-content: flex-start;
+        }
+        // x轴居中
+        &-center {
+            justify-content: center;
+        }
+        // x轴反方向
+        &-end {
+            justify-content: flex-end;
+        }
+        // x轴平分
+        &-space-between {
+            justify-content: space-between;
+        }
+        // x轴有间隔地平分
+        &-space-around {
+            justify-content: space-around;
+        }
+        // 顶部对齐
+        &-top {
+            align-items: flex-start;
+        }
+        // 居中对齐
+        &-middle {
+            align-items: center;
+        }
+        // 底部对齐
+        &-bottom {
+            align-items: flex-end;
+        }
+    };
+}
+
+.@{col-prefix-cls} {
+    position: relative;
+    display: block;
+}
+
+.make-grid();
+
+// Extra small grid
+//
+// Columns, offsets, pushes, and pulls for extra small devices like
+// smartphones.
+
+.make-grid(-xs);
+
+// Small grid
+//
+// Columns, offsets, pushes, and pulls for the small device range, from phones
+// to tablets.
+
+@media (min-width: @screen-sm-min) {
+    .make-grid(-sm);
+}
+
+
+// Medium grid
+//
+// Columns, offsets, pushes, and pulls for the desktop device range.
+
+@media (min-width: @screen-md-min) {
+    .make-grid(-md);
+}
+
+
+// Large grid
+//
+// Columns, offsets, pushes, and pulls for the wide desktop device range.
+
+@media (min-width: @screen-lg-min) {
+    .make-grid(-lg);
+}
+
+
+// Extra large grid
+//
+// Columns, offsets, pushes, and pulls for the full hd desktop device range.
+
+@media (min-width: @screen-xl-min) {
+    .make-grid(-xl);
+}
+
+
+// Extra extra large grid
+//
+// Columns, offsets, pushes, and pulls for the large desktop device range.
+
+@media (min-width: @screen-xxl-min) {
+    .make-grid(-xxl);
+}

src/styles/common/normalize.less

@@ -0,0 +1,462 @@
+/*! normalize.css v5.0.0 | MIT License | github.com/necolas/normalize.css */
+
+/**
+ * 1. Change the default font family in all browsers (opinionated).
+ * 2. Correct the line height in all browsers.
+ * 3. Prevent adjustments of font size after orientation changes in
+ *    IE on Windows Phone and in iOS.
+ */
+
+/* Document
+   ========================================================================== */
+
+html {
+  font-family: sans-serif; /* 1 */
+  line-height: 1.15; /* 2 */
+  -ms-text-size-adjust: 100%; /* 3 */
+  -webkit-text-size-adjust: 100%; /* 3 */
+}
+
+/* Sections
+   ========================================================================== */
+
+/**
+ * Remove the margin in all browsers (opinionated).
+ */
+
+body {
+  margin: 0;
+}
+
+/**
+ * Add the correct display in IE 9-.
+ */
+
+article,
+aside,
+footer,
+header,
+nav,
+section {
+  display: block;
+}
+
+/**
+ * Correct the font size and margin on `h1` elements within `section` and
+ * `article` contexts in Chrome, Firefox, and Safari.
+ */
+
+h1 {
+  font-size: 2em;
+  margin: 0.67em 0;
+}
+
+/* Grouping content
+   ========================================================================== */
+
+/**
+ * Add the correct display in IE 9-.
+ * 1. Add the correct display in IE.
+ */
+
+figcaption,
+figure,
+main { /* 1 */
+  display: block;
+}
+
+/**
+ * Add the correct margin in IE 8.
+ */
+
+figure {
+  margin: 1em 40px;
+}
+
+/**
+ * 1. Add the correct box sizing in Firefox.
+ * 2. Show the overflow in Edge and IE.
+ */
+
+hr {
+  box-sizing: content-box; /* 1 */
+  height: 0; /* 1 */
+  overflow: visible; /* 2 */
+}
+
+/**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+
+pre {
+  font-family: monospace, monospace; /* 1 */
+  font-size: 1em; /* 2 */
+}
+
+/* Text-level semantics
+   ========================================================================== */
+
+/**
+ * 1. Remove the gray background on active links in IE 10.
+ * 2. Remove gaps in links underline in iOS 8+ and Safari 8+.
+ */
+
+a {
+  background-color: transparent; /* 1 */
+  -webkit-text-decoration-skip: objects; /* 2 */
+}
+
+/**
+ * Remove the outline on focused links when they are also active or hovered
+ * in all browsers (opinionated).
+ */
+
+a:active,
+a:hover {
+  outline-width: 0;
+}
+
+/**
+ * 1. Remove the bottom border in Firefox 39-.
+ * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
+ */
+
+abbr[title] {
+  border-bottom: none; /* 1 */
+  text-decoration: underline; /* 2 */
+  text-decoration: underline dotted; /* 2 */
+}
+
+/**
+ * Prevent the duplicate application of `bolder` by the next rule in Safari 6.
+ */
+
+b,
+strong {
+  font-weight: inherit;
+}
+
+/**
+ * Add the correct font weight in Chrome, Edge, and Safari.
+ */
+
+b,
+strong {
+  font-weight: bolder;
+}
+
+/**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+
+code,
+kbd,
+samp {
+  font-family: monospace, monospace; /* 1 */
+  font-size: 1em; /* 2 */
+}
+
+/**
+ * Add the correct font style in Android 4.3-.
+ */
+
+dfn {
+  font-style: italic;
+}
+
+/**
+ * Add the correct background and color in IE 9-.
+ */
+
+mark {
+  background-color: #ff0;
+  color: #000;
+}
+
+/**
+ * Add the correct font size in all browsers.
+ */
+
+small {
+  font-size: 80%;
+}
+
+/**
+ * Prevent `sub` and `sup` elements from affecting the line height in
+ * all browsers.
+ */
+
+sub,
+sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+
+sub {
+  bottom: -0.25em;
+}
+
+sup {
+  top: -0.5em;
+}
+
+/* Embedded content
+   ========================================================================== */
+
+/**
+ * Add the correct display in IE 9-.
+ */
+
+audio,
+video {
+  display: inline-block;
+}
+
+/**
+ * Add the correct display in iOS 4-7.
+ */
+
+audio:not([controls]) {
+  display: none;
+  height: 0;
+}
+
+/**
+ * Remove the border on images inside links in IE 10-.
+ */
+
+img {
+  border-style: none;
+}
+
+/**
+ * Hide the overflow in IE.
+ */
+
+svg:not(:root) {
+  overflow: hidden;
+}
+
+/* Forms
+   ========================================================================== */
+
+/**
+ * 1. Change the font styles in all browsers (opinionated).
+ * 2. Remove the margin in Firefox and Safari.
+ */
+
+button,
+input,
+optgroup,
+select,
+textarea {
+  font-family: sans-serif; /* 1 */
+  font-size: 100%; /* 1 */
+  line-height: 1.15; /* 1 */
+  margin: 0; /* 2 */
+}
+
+/**
+ * Show the overflow in IE.
+ * 1. Show the overflow in Edge.
+ */
+
+button,
+input { /* 1 */
+  overflow: visible;
+}
+
+/**
+ * Remove the inheritance of text transform in Edge, Firefox, and IE.
+ * 1. Remove the inheritance of text transform in Firefox.
+ */
+
+button,
+select { /* 1 */
+  text-transform: none;
+}
+
+/**
+ * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
+ *    controls in Android 4.
+ * 2. Correct the inability to style clickable types in iOS and Safari.
+ */
+
+button,
+html [type="button"], /* 1 */
+[type="reset"],
+[type="submit"] {
+  -webkit-appearance: button; /* 2 */
+}
+
+/**
+ * Remove the inner border and padding in Firefox.
+ */
+
+button::-moz-focus-inner,
+[type="button"]::-moz-focus-inner,
+[type="reset"]::-moz-focus-inner,
+[type="submit"]::-moz-focus-inner {
+  border-style: none;
+  padding: 0;
+}
+
+/**
+ * Restore the focus styles unset by the previous rule.
+ */
+
+button:-moz-focusring,
+[type="button"]:-moz-focusring,
+[type="reset"]:-moz-focusring,
+[type="submit"]:-moz-focusring {
+  outline: 1px dotted ButtonText;
+}
+
+/**
+ * Change the border, margin, and padding in all browsers (opinionated).
+ */
+
+fieldset {
+  border: 1px solid #c0c0c0;
+  margin: 0 2px;
+  padding: 0.35em 0.625em 0.75em;
+}
+
+/**
+ * 1. Correct the text wrapping in Edge and IE.
+ * 2. Correct the color inheritance from `fieldset` elements in IE.
+ * 3. Remove the padding so developers are not caught out when they zero out
+ *    `fieldset` elements in all browsers.
+ */
+
+legend {
+  box-sizing: border-box; /* 1 */
+  color: inherit; /* 2 */
+  display: table; /* 1 */
+  max-width: 100%; /* 1 */
+  padding: 0; /* 3 */
+  white-space: normal; /* 1 */
+}
+
+/**
+ * 1. Add the correct display in IE 9-.
+ * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera.
+ */
+
+progress {
+  display: inline-block; /* 1 */
+  vertical-align: baseline; /* 2 */
+}
+
+/**
+ * Remove the default vertical scrollbar in IE.
+ */
+
+textarea {
+  overflow: auto;
+  resize: vertical;
+}
+
+/**
+ * 1. Add the correct box sizing in IE 10-.
+ * 2. Remove the padding in IE 10-.
+ */
+
+[type="checkbox"],
+[type="radio"] {
+  box-sizing: border-box; /* 1 */
+  padding: 0; /* 2 */
+}
+
+/**
+ * Correct the cursor style of increment and decrement buttons in Chrome.
+ */
+
+[type="number"]::-webkit-inner-spin-button,
+[type="number"]::-webkit-outer-spin-button {
+  height: auto;
+}
+
+/**
+ * 1. Correct the odd appearance in Chrome and Safari.
+ * 2. Correct the outline style in Safari.
+ */
+
+[type="search"] {
+  -webkit-appearance: textfield; /* 1 */
+  outline-offset: -2px; /* 2 */
+}
+
+/**
+ * Remove the inner padding and cancel buttons in Chrome and Safari on macOS.
+ */
+
+[type="search"]::-webkit-search-cancel-button,
+[type="search"]::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+/**
+ * 1. Correct the inability to style clickable types in iOS and Safari.
+ * 2. Change font properties to `inherit` in Safari.
+ */
+
+::-webkit-file-upload-button {
+  -webkit-appearance: button; /* 1 */
+  font: inherit; /* 2 */
+}
+
+/* Interactive
+   ========================================================================== */
+
+/*
+ * Add the correct display in IE 9-.
+ * 1. Add the correct display in Edge, IE, and Firefox.
+ */
+
+details, /* 1 */
+menu {
+  display: block;
+}
+
+/*
+ * Add the correct display in all browsers.
+ */
+
+summary {
+  display: list-item;
+}
+
+/* Scripting
+   ========================================================================== */
+
+/**
+ * Add the correct display in IE 9-.
+ */
+
+canvas {
+  display: inline-block;
+}
+
+/**
+ * Add the correct display in IE.
+ */
+
+template {
+  display: none;
+}
+
+/* Hidden
+   ========================================================================== */
+
+/**
+ * Add the correct display in IE 10-.
+ */
+
+[hidden] {
+  display: none;
+}

src/styles/components/affix.less

@@ -0,0 +1,4 @@
+.ivu-affix {
+    position: fixed;
+    z-index: @zindex-affix;
+}

src/styles/components/alert.less

@@ -0,0 +1,105 @@
+@alert-prefix-cls: ~"@{css-prefix}alert";
+@icon-prefix-cls: ~"@{css-prefix}icon";
+
+.@{alert-prefix-cls}{
+    position: relative;
+    padding: 8px 48px 8px 16px;
+    border-radius: @border-radius-small;
+    color: @text-color;
+    font-size: @font-size-small;
+    line-height: 16px;
+    margin-bottom: 10px;
+
+    &&-with-icon{
+        padding: 8px 48px 8px 38px;
+    }
+
+    &-icon {
+        font-size: @font-size-large;
+        top: 6px;
+        left: 12px;
+        position: absolute;
+    }
+
+    &-desc {
+        font-size: @font-size-small;
+        color: @text-color;
+        line-height: 21px;
+        display: none;
+        text-align: justify;
+    }
+
+    &-success {
+        border: @border-width-base @border-style-base ~`colorPalette("@{success-color}", 3)`;
+        //background-color: tint(@success-color, 90%);
+        background-color: ~`colorPalette("@{success-color}", 1)`;
+        .@{alert-prefix-cls}-icon {
+            color: @success-color;
+        }
+    }
+
+    &-info {
+        border: @border-width-base @border-style-base ~`colorPalette("@{primary-color}", 3)`;
+        //background-color: tint(@primary-color, 90%);
+        background-color: ~`colorPalette("@{primary-color}", 1)`;
+        .@{alert-prefix-cls}-icon {
+            color: @primary-color;
+        }
+    }
+
+    &-warning {
+        border: @border-width-base @border-style-base ~`colorPalette("@{warning-color}", 3)`;
+        //background-color: tint(@warning-color, 90%);
+        background-color: ~`colorPalette("@{warning-color}", 1)`;
+        .@{alert-prefix-cls}-icon {
+            color: @warning-color;
+        }
+    }
+
+    &-error {
+        border: @border-width-base @border-style-base ~`colorPalette("@{error-color}", 3)`;
+        //background-color: tint(@error-color, 90%);
+        background-color: ~`colorPalette("@{error-color}", 1)`;
+        .@{alert-prefix-cls}-icon {
+            color: @error-color;
+        }
+    }
+
+    &-close {
+        .content-close(-3px);
+    }
+
+    &-with-desc {
+        padding: 16px;
+        position: relative;
+        border-radius: @border-radius-small;
+        margin-bottom: 10px;
+        color: @text-color;
+        line-height: 1.5;
+    }
+
+    &-with-desc&-with-icon{
+        padding: 16px 16px 16px 69px;
+    }
+
+    &-with-desc &-desc{
+        display: block;
+    }
+
+    &-with-desc &-message {
+        font-size: 14px;
+        color: @title-color;
+        display: block;
+    }
+
+    &-with-desc &-icon {
+        top: 50%;
+        left: 24px;
+        margin-top: -24px;
+        font-size: 28px;
+    }
+
+    &-with-banner{
+        border-radius: 0;
+    }
+}

src/styles/components/anchor.less

@@ -0,0 +1,74 @@
+@anchor-prefix: ~"@{css-prefix}anchor";
+
+.@{anchor-prefix}{
+    &-wrapper{
+        overflow: auto;
+        padding-left: 4px;
+        margin-left: -4px;
+    }
+
+    &{
+        position: relative;
+        padding-left: @anchor-border-width;
+
+        &-ink {
+            position: absolute;
+            height: 100%;
+            left: 0;
+            top: 0;
+            &:before {
+                content: ' ';
+                position: relative;
+                width: @anchor-border-width;
+                height: 100%;
+                display: block;
+                background-color: @border-color-split;
+                margin: 0 auto;
+            }
+            &-ball {
+                display: inline-block;
+                position: absolute;
+                width: 8px;
+                height: 8px;
+                border-radius: 50%;
+                border: 2px solid @primary-color;
+                background-color: @body-background;
+                left: 50%;
+                transition: top @transition-time @ease-in-out;
+                transform: translate(-50%, 2px);
+            }
+        }
+
+        &.fixed &-ink &-ink-ball {
+            display: none;
+        }
+    }
+
+    &-link {
+        padding: 8px 0 8px 16px;
+        line-height: 1;
+
+        &-title {
+            display: block;
+            position: relative;
+            transition: all .3s;
+            color: @text-color;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            margin-bottom: 8px;
+            &:only-child {
+                margin-bottom: 0;
+            }
+        }
+
+        &-active > &-title {
+            color: @primary-color;
+        }
+    }
+
+    &-link &-link {
+        padding-top: 6px;
+        padding-bottom: 6px;
+    }
+}

src/styles/components/auto-complete.less

@@ -0,0 +1,18 @@
+@auto-complete-prefix-cls: ~"@{css-prefix}auto-complete";
+
+.@{auto-complete-prefix-cls} {
+    .@{select-prefix-cls} {
+        &-not-found{
+            display: none;
+        }
+    }
+    .@{icon-prefix-cls}-ios-close{
+        display: none;
+    }
+    &:hover .@{icon-prefix-cls}-ios-close{
+        display: inline-block;
+    }
+    &.@{select-dropdown-prefix-cls} {
+        max-height: none;
+    }
+}

src/styles/components/avatar.less

@@ -0,0 +1,59 @@
+@avatar-prefix-cls: ~"@{css-prefix}avatar";
+
+.@{avatar-prefix-cls} {
+    display: inline-block;
+    text-align: center;
+    background: @avatar-bg;
+    color: @avatar-color;
+    white-space: nowrap;
+    position: relative;
+    overflow: hidden;
+    vertical-align: middle;
+
+    &-image{
+        background: transparent;
+    }
+
+    .ivu-icon{
+        position: relative;
+        top: -1px;
+    }
+
+    .avatar-size(@avatar-size-base, @avatar-font-size-base);
+
+    &-large {
+        .avatar-size(@avatar-size-lg, @avatar-font-size-lg);
+        .ivu-icon{
+            position: relative;
+            top: -2px;
+        }
+    }
+
+    &-small {
+        .avatar-size(@avatar-size-sm, @avatar-font-size-sm);
+    }
+
+    &-square {
+        border-radius: @avatar-border-radius;
+    }
+
+    & > img {
+        width: 100%;
+        height: 100%;
+    }
+}
+
+.avatar-size(@size, @font-size) {
+    width: @size;
+    height: @size;
+    line-height: @size;
+    border-radius: @size / 2;
+
+    & > * {
+        line-height: @size;
+    }
+
+    &.@{avatar-prefix-cls}-icon {
+        font-size: @font-size;
+    }
+}

src/styles/components/back-top.less

@@ -0,0 +1,29 @@
+@backtop-prefix-cls: ~"@{css-prefix}back-top";
+
+.@{backtop-prefix-cls} {
+    z-index: @zindex-back-top;
+    position: fixed;
+    cursor: pointer;
+    display: none;
+
+    &.@{backtop-prefix-cls}-show {
+        display: block;
+    }
+
+    &-inner {
+        background-color: rgba(0,0,0,.6);
+        border-radius: 2px;
+        box-shadow: 0 1px 3px rgba(0,0,0,.2);
+        transition: all @transition-time @ease-in-out;
+
+        &:hover {
+            background-color: rgba(0,0,0,.7);
+        }
+    }
+
+    i{
+        color: #fff;
+        font-size: 24px;
+        padding: 8px 12px;
+    }
+}

src/styles/components/badge.less

@@ -0,0 +1,135 @@
+@badge-prefix-cls: ~"@{css-prefix}badge";
+
+.@{badge-prefix-cls} {
+    position: relative;
+    display: inline-block;
+
+    &-count {
+        font-family: "Monospaced Number";
+        line-height: 1;
+        vertical-align: middle;
+        position: absolute;
+        transform: translateX(50%);
+        top: -10px;
+        right: 0;
+        height: 20px;
+        border-radius: 10px;
+        min-width: 20px;
+        background: @error-color;
+        border: 1px solid transparent;
+        color: #fff;
+        line-height: 18px;
+        text-align: center;
+        padding: 0 6px;
+        font-size: 12px;
+        white-space: nowrap;
+        transform-origin: -10% center;
+        z-index: 10;
+        box-shadow: 0 0 0 1px #fff;
+
+        a,
+        a:hover {
+            color: #fff;
+        }
+
+        &-alone {
+            top: auto;
+            display: block;
+            position: relative;
+            transform: translateX(0);
+        }
+
+        &-primary{
+            background: @primary-color;
+        }
+        &-success{
+            background: @success-color;
+        }
+        &-error{
+            background: @error-color;
+        }
+        &-warning{
+            background: @warning-color;
+        }
+        &-info{
+            background: @info-color;
+        }
+        &-normal{
+            background: @normal-color;
+            color: @subsidiary-color;
+        }
+    }
+
+    &-dot {
+        position: absolute;
+        transform: translateX(-50%);
+        transform-origin: 0 center;
+        top: -4px;
+        right: -8px;
+        height: 8px;
+        width: 8px;
+        border-radius: 100%;
+        background: @error-color;
+        z-index: 10;
+        box-shadow: 0 0 0 1px #fff;
+    }
+
+    &-status {
+        line-height: inherit;
+        vertical-align: baseline;
+
+        &-dot {
+            width: 6px;
+            height: 6px;
+            display: inline-block;
+            border-radius: 50%;
+            vertical-align: middle;
+            position: relative;
+            top: -1px;
+        }
+        &-success {
+            background-color: @success-color;
+        }
+        &-processing {
+            background-color: @processing-color;
+            position: relative;
+            &:after {
+                position: absolute;
+                top: 0;
+                left: 0;
+                width: 100%;
+                height: 100%;
+                border-radius: 50%;
+                border: 1px solid @processing-color;
+                content: '';
+                animation: aniStatusProcessing 1.2s infinite ease-in-out;
+            }
+        }
+        &-default {
+            background-color: @normal-color;
+        }
+        &-error {
+            background-color: @error-color;
+        }
+        &-warning {
+            background-color: @warning-color;
+        }
+        &-text {
+            display: inline-block;
+            color: @text-color;
+            font-size: @font-size-small;
+            margin-left: 6px;
+        }
+    }
+}
+
+@keyframes aniStatusProcessing {
+    0% {
+        transform: scale(0.8);
+        opacity: 0.5;
+    }
+    100% {
+        transform: scale(2.4);
+        opacity: 0;
+    }
+}

src/styles/components/breadcrumb.less

@@ -0,0 +1,34 @@
+@breadcrumb-prefix-cls: ~"@{css-prefix}breadcrumb";
+
+.@{breadcrumb-prefix-cls} {
+    color: #999;
+    font-size: @font-size-base;
+
+    a {
+        color: @text-color;
+        transition: color @transition-time @ease-in-out;
+        &:hover {
+            color: tint(@primary-color, 20%);
+        }
+    }
+
+    & > span:last-child {
+        font-weight: bold;
+        color: @text-color;
+    }
+
+    & > span:last-child &-item-separator {
+        display: none;
+    }
+
+    &-item-separator {
+        margin: 0 8px;
+        color: @border-color-base;
+    }
+
+    &-item-link {
+        > .ivu-icon + span {
+            margin-left: 4px;
+        }
+    }
+}

src/styles/components/button.less

@@ -0,0 +1,190 @@
+@btn-prefix-cls: ~"@{css-prefix}btn";
+
+.@{btn-prefix-cls} {
+    .btn;
+    .btn-default;
+
+    &-long{
+        width: 100%;
+    }
+
+    & > .ivu-icon + span, & > span + .ivu-icon{
+        margin-left: 4px;
+    }
+
+    &-primary {
+        .btn-primary;
+
+        .@{btn-prefix-cls}-group:not(.@{btn-prefix-cls}-group-vertical) &:not(:first-child):not(:last-child) {
+            border-right-color: @btn-group-border;
+            border-left-color: @btn-group-border;
+        }
+
+        .@{btn-prefix-cls}-group:not(.@{btn-prefix-cls}-group-vertical) &:first-child {
+            &:not(:last-child) {
+                border-right-color: @btn-group-border;
+                &[disabled] {
+                    border-right-color: @btn-default-border;
+                }
+            }
+        }
+
+        .@{btn-prefix-cls}-group:not(.@{btn-prefix-cls}-group-vertical) &:last-child:not(:first-child),
+        .@{btn-prefix-cls}-group:not(.@{btn-prefix-cls}-group-vertical) & + .@{btn-prefix-cls} {
+            border-left-color: @btn-group-border;
+            &[disabled] {
+                border-left-color: @btn-default-border;
+            }
+        }
+
+        .@{btn-prefix-cls}-group-vertical &:not(:first-child):not(:last-child) {
+            border-top-color: @btn-group-border;
+            border-bottom-color: @btn-group-border;
+        }
+
+        .@{btn-prefix-cls}-group-vertical &:first-child {
+            &:not(:last-child) {
+                border-bottom-color: @btn-group-border;
+                &[disabled] {
+                    border-top-color: @btn-default-border;
+                }
+            }
+        }
+
+        .@{btn-prefix-cls}-group-vertical &:last-child:not(:first-child),
+        .@{btn-prefix-cls}-group-vertical & + .@{btn-prefix-cls} {
+            border-top-color: @btn-group-border;
+            &[disabled] {
+                border-bottom-color: @btn-default-border;
+            }
+        }
+    }
+
+    //&-ghost {
+    //    .btn-ghost;
+    //}
+
+    &-dashed{
+        .btn-dashed;
+    }
+
+    &-text{
+        .btn-text;
+    }
+
+    &-success {
+        .btn-color(@success-color);
+    }
+
+    &-warning {
+        .btn-color(@warning-color);
+    }
+
+    &-error {
+        .btn-color(@error-color);
+    }
+
+    &-info {
+        .btn-color(@info-color);
+    }
+
+    &-circle,
+    &-circle-outline {
+        .btn-circle(@btn-prefix-cls);
+    }
+
+    &:before {
+        position: absolute;
+        top: -1px;
+        left: -1px;
+        bottom: -1px;
+        right: -1px;
+        background: #fff;
+        opacity: 0.35;
+        content: '';
+        border-radius: inherit;
+        z-index: 1;
+        transition: opacity @transition-time;
+        pointer-events: none;
+        display: none;
+    }
+
+    &&-loading {
+        pointer-events: none;
+        position: relative;
+
+        &:before {
+            display: block;
+        }
+    }
+
+    &-group {
+        .btn-group(@btn-prefix-cls);
+    }
+
+    &-group-vertical {
+        .btn-group-vertical(@btn-prefix-cls);
+    }
+
+    // The new ghost in 3.0
+    &-ghost{
+        color: #fff;
+        background: transparent;
+        &:hover{
+            background: transparent;
+        }
+    }
+    &-ghost&-dashed, &-ghost&-default{
+        color: #fff;
+        border-color: #fff;
+        &:hover{
+            color: tint(@primary-color, 20%);
+            border-color: tint(@primary-color, 20%);
+        }
+    }
+    &-ghost&-primary{
+        color: @primary-color;
+        &:hover{
+            color: tint(@primary-color, 20%);
+            background: fade(tint(@primary-color, 95%), 50%);
+        }
+    }
+    &-ghost&-info{
+        color: @info-color;
+        &:hover{
+            color: tint(@info-color, 20%);
+            background: fade(tint(@info-color, 95%), 50%);
+        }
+    }
+    &-ghost&-success{
+        color: @success-color;
+        &:hover{
+            color: tint(@success-color, 20%);
+            background: fade(tint(@success-color, 95%), 50%);
+        }
+    }
+    &-ghost&-warning{
+        color: @warning-color;
+        &:hover{
+            color: tint(@warning-color, 20%);
+            background: fade(tint(@warning-color, 95%), 50%);
+        }
+    }
+    &-ghost&-error{
+        color: @error-color;
+        &:hover{
+            color: tint(@error-color, 20%);
+            background: fade(tint(@error-color, 95%), 50%);
+        }
+    }
+
+    &-ghost&-default[disabled], &-ghost&-dashed[disabled], &-ghost&-primary[disabled], &-ghost&-info[disabled], &-ghost&-success[disabled], &-ghost&-warning[disabled], &-ghost&-error[disabled]{
+        background: transparent;
+        color: fade(#000, 25%);
+        border-color: @btn-disable-border;
+    }
+    &-ghost&-text[disabled]{
+        background: transparent;
+        color: fade(#000, 25%);
+    }
+}

src/styles/components/card.less

@@ -0,0 +1,50 @@
+@card-prefix-cls: ~"@{css-prefix}card";
+
+.@{card-prefix-cls}{
+    background: #fff;
+    border-radius: @border-radius-small;
+    font-size: @font-size-base;
+    position: relative;
+    //overflow: hidden;
+    transition: all @transition-time @ease-in-out;
+
+    &-bordered {
+        border: 1px solid @border-color-base;
+        border-color: @border-color-split;
+    }
+
+    &-shadow{
+        box-shadow: @shadow-card;
+    }
+
+    &:hover {
+        box-shadow: @shadow-base;
+        border-color: #eee;
+    }
+    &&-dis-hover:hover{
+        box-shadow: none;
+        border-color: transparent;
+    }
+
+    &&-dis-hover&-bordered:hover{
+        border-color: @border-color-split;
+    }
+
+    &&-shadow:hover{
+        box-shadow: @shadow-card;
+    }
+
+    &-head {
+        .content-header;
+    }
+
+    &-extra {
+        position: absolute;
+        right: 16px;
+        top: 14px;
+    }
+
+    &-body {
+        padding: 16px;
+    }
+}

src/styles/components/carousel.less

@@ -0,0 +1,185 @@
+@carousel-prefix-cls: ~"@{css-prefix}carousel";
+@carousel-item-prefix-cls: ~"@{css-prefix}carousel-item";
+
+.@{carousel-prefix-cls} {
+    position: relative;
+    display: block;
+    box-sizing: border-box;
+    user-select: none;
+    touch-action: pan-y;
+    -webkit-tap-highlight-color: transparent;
+
+    &-track, &-list {
+        transform: translate3d(0, 0, 0);
+    }
+
+    &-list {
+        position: relative;
+        display: block;
+        overflow: hidden;
+
+        margin: 0;
+        padding: 0;
+    }
+
+    &-track {
+        position: relative;
+        top: 0;
+        left: 0;
+        display: block;
+
+        overflow: hidden;
+
+        z-index: 1;
+        &.higher {
+            z-index: 2;
+        }
+    }
+
+    &-item {
+        float: left;
+        height: 100%;
+        min-height: 1px;
+        display: block;
+    }
+
+    &-arrow {
+
+        border: none;
+        outline: none;
+
+        padding: 0;
+        margin: 0;
+
+        width: 36px;
+        height: 36px;
+        border-radius: 50%;
+
+        cursor: pointer;
+
+        display: none;
+
+        position: absolute;
+        top: 50%;
+        z-index: 10;
+        transform: translateY(-50%);
+
+        transition: @transition-time;
+        background-color: rgba(31, 45, 61, .11);
+        color: #fff;
+
+        &:hover {
+            background-color: rgba(31, 45, 61, 0.5);
+        }
+
+        text-align: center;
+        font-size: 1em;
+
+        font-family: inherit;
+        line-height: inherit;
+
+        & > * {
+            vertical-align: baseline;
+        }
+
+        &.left {
+            left: 16px;
+        }
+
+        &.right {
+            right: 16px;
+        }
+
+        &-always {
+            display: inherit;
+        }
+
+        &-hover {
+            display: inherit;
+
+            opacity: 0;
+        }
+    }
+
+    &:hover &-arrow-hover {
+        opacity: 1;
+    }
+
+    &-dots {
+        z-index: 10;
+
+        @padding: 7px;
+
+        display: none;
+
+        position: relative;
+        &-inside {
+            display: block;
+            position: absolute;
+            bottom: 10px - @padding;
+        }
+
+        &-outside {
+            display: block;
+            margin-top: 10px - @padding;
+        }
+
+        list-style: none;
+
+        text-align: center;
+
+        padding: 0;
+        width: 100%;
+        height: 3px + @padding * 2;
+
+        li {
+            position: relative;
+            display: inline-block;
+
+            vertical-align: top;
+            text-align: center;
+
+            margin: 0 2px;
+            padding: @padding 0;
+
+            cursor: pointer;
+
+            button {
+                border: 0;
+                cursor: pointer;
+
+                background: #8391a5;
+                opacity: 0.3;
+
+                display: block;
+                width: 16px;
+                height: 3px;
+
+                border-radius: 1px;
+                outline: none;
+
+                font-size: 0;
+                color: transparent;
+
+                transition: all .5s;
+                &.radius {
+                    width: 6px;
+                    height: 6px;
+                    border-radius: 50%;
+                }
+            }
+
+            &:hover > button {
+                opacity: 0.7;
+            }
+
+            &.@{carousel-prefix-cls}-active > button {
+                opacity: 1;
+                width: 24px;
+                &.radius{
+                    width: 6px;
+                }
+            }
+        }
+    }
+}

src/styles/components/cascader.less

@@ -0,0 +1,178 @@
+@cascader-prefix-cls: ~"@{css-prefix}cascader";
+@cascader-item-prefix-cls: ~"@{css-prefix}cascader-menu-item";
+
+.selectDropDown{
+    width: auto;
+    padding: 0;
+    white-space: nowrap;
+    overflow: visible;
+}
+
+.@{cascader-prefix-cls} {
+    //position: relative;
+    line-height: normal;
+
+    &-rel{
+        display: inline-block;
+        width: 100%;
+        position: relative;
+    }
+
+    .@{css-prefix}input{
+        padding-right: 24px;
+        display: block;
+        cursor: pointer;
+    }
+    &-disabled .@{css-prefix}input{
+        cursor: @cursor-disabled;
+    }
+
+    &-label{
+        width: 100%;
+        height: 100%;
+        line-height: 32px;
+        padding: 0 7px;
+        box-sizing: border-box;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        overflow: hidden;
+        cursor: pointer;
+        font-size: @font-size-small;
+        position: absolute;
+        left: 0;
+        top: 0;
+    }
+    &-size-large &-label{
+        line-height: 36px;
+        font-size: @font-size-base;
+    }
+    &-size-small &-label{
+        line-height: 26px;
+    }
+
+    .@{cascader-prefix-cls}-arrow:nth-of-type(1) {
+        display: none;
+        cursor: pointer;
+    }
+
+    &:hover {
+        .@{cascader-prefix-cls}-arrow:nth-of-type(1) {
+            display: inline-block;
+        }
+    }
+    &-show-clear:hover .@{cascader-prefix-cls}-arrow:nth-of-type(2){
+        display: none;
+    }
+
+    &-arrow {
+        .inner-arrow();
+    }
+    &-visible &-arrow:nth-of-type(2) {
+        transform: translateY(-50%) rotate(180deg);
+    }
+
+    .@{select-dropdown-prefix-cls} {
+        .selectDropDown();
+    }
+
+    .select-item(@cascader-prefix-cls, @cascader-item-prefix-cls);
+    .ivu-select-item span{
+        color: @error-color;
+    }
+
+    &-dropdown{
+        padding: 5px 0;
+        .@{select-dropdown-prefix-cls}-list{
+            max-height: 190px;
+            box-sizing: border-box;
+            overflow: auto;
+        }
+    }
+
+    &-not-found-tip{
+        padding: 5px 0;
+        text-align: center;
+        color: @btn-disable-color;
+        li:not([class^=ivu-]){
+            list-style: none;
+            margin-bottom: 0;
+        }
+    }
+    &-not-found .@{select-dropdown-prefix-cls} {
+        width: inherit;
+    }
+
+    &-menu{
+        display: inline-block;
+        min-width: 100px;
+        height: 180px;
+        margin: 0;
+        padding: 5px 0 !important;
+        vertical-align: top;
+        list-style: none;
+        border-right: 1px solid @border-color-split;
+        overflow: auto;
+
+        &:first-child {
+
+        }
+        &:last-child {
+            border-right-color: transparent;
+            margin-right: -1px;
+        }
+        &:only-child {
+
+        }
+
+        & &-item{
+            position: relative;
+            padding-right: 36px;
+            transition: all @transition-time @ease-in-out;
+
+            i{
+                font-size: @font-size-small;
+                position: absolute;
+                right: 15px;
+                top: 50%;
+                //margin-top: -6px;
+                transform: translateY(-50%);
+            }
+            &-loading{
+                margin-top: -6px;
+            }
+
+            &-active{
+                background-color: @background-color-select-hover;
+                color: @primary-color;
+            }
+        }
+    }
+}
+.@{cascader-prefix-cls}-transfer{
+    z-index: @zindex-transfer;
+    .selectDropDown();
+    .select-item(@cascader-prefix-cls, @cascader-item-prefix-cls);
+    .ivu-select-item span{
+        color: @error-color;
+    }
+    .@{cascader-prefix-cls} {
+        &-menu{
+            &-item{
+                padding-right: 24px;
+                transition: all @transition-time @ease-in-out;
+                &-active{
+                    background-color: @background-color-select-hover;
+                    color: @primary-color;
+                }
+            }
+        }
+    }
+}
+
+.@{form-item-prefix-cls}-error{
+    .@{cascader-prefix-cls} {
+        &-arrow{
+            color: @error-color;
+        }
+    }
+}

src/styles/components/cell.less

@@ -0,0 +1,74 @@
+@cell-prefix-cls: ~"@{css-prefix}cell";
+
+
+.@{cell-prefix-cls} {
+    position: relative;
+    overflow: hidden;
+
+    &-link, &-link:hover, &-link:active{
+        color: inherit;
+    }
+
+    &-icon{
+        display: inline-block;
+        margin-right: 4px;
+        font-size: @font-size-base;
+        vertical-align: middle;
+        &:empty{
+            display: none
+        }
+    }
+    &-main{
+        display: inline-block;
+        vertical-align: middle;
+    }
+    &-title{
+        line-height: 24px;
+        font-size: @font-size-base;
+    }
+    &-label{
+        line-height: 1.2;
+        font-size: @font-size-small;
+        color: @subsidiary-color;
+    }
+    &-selected &-label{
+        color: inherit;
+    }
+
+    &-selected, &&-selected:hover{
+        background:  ~`colorPalette("@{primary-color}", 1)`;
+    }
+
+    &-footer{
+        display: inline-block;
+        position: absolute;
+        transform: translateY(-50%);
+        top: 50%;
+        right: 16px;
+        color: @text-color;
+    }
+    &-with-link &-footer{
+        right: 32px;
+    }
+    &-selected &-footer{
+        color: inherit;
+    }
+
+    &-arrow{
+        display: inline-block;
+        position: absolute;
+        transform: translateY(-50%);
+        top: 50%;
+        right: 16px;
+        font-size: @font-size-base;
+    }
+
+    &:focus{
+        background: @background-color-select-hover;
+        outline: none;
+    }
+    &-selected:focus{
+        background: shade(@selected-color, 10%);
+    }
+}
+.select-item(@cell-prefix-cls, @cell-prefix-cls);

src/styles/components/checkbox.less

@@ -0,0 +1,2 @@
+@checkbox-prefix-cls: ~"@{css-prefix}checkbox";
+.checkboxFn();

src/styles/components/circle.less

@@ -0,0 +1,16 @@
+@circle-prefix-cls: ~"@{css-prefix}chart-circle";
+
+.@{circle-prefix-cls}{
+    display: inline-block;
+    position: relative;
+
+    &-inner {
+        width: 100%;
+        text-align: center;
+        position: absolute;
+        left: 0;
+        top: 50%;
+        transform: translateY(-50%);
+        line-height: 1;
+    }
+}

src/styles/components/collapse.less

@@ -0,0 +1,70 @@
+@collapse-prefix-cls: ~"@{css-prefix}collapse";
+
+.@{collapse-prefix-cls}{
+    background-color: @background-color-base;
+    border-radius: 3px;
+    border: 1px solid @border-color-base;
+
+    &-simple{
+        border-left: none;
+        border-right: none;
+        background-color: #fff;
+        border-radius: 0;
+    }
+
+    & > &-item{
+        border-top: 1px solid @border-color-base;
+        &:first-child {
+            border-top: 0;
+        }
+
+        > .@{collapse-prefix-cls}-header{
+            height: 38px;
+            line-height: 38px;
+            padding-left: 16px;
+            color: #666;
+            cursor: pointer;
+            position: relative;
+            border-bottom: 1px solid transparent;
+            transition: all @transition-time @ease-in-out;
+
+            > i{
+                transition: transform @transition-time @ease-in-out;
+                margin-right: 14px;
+            }
+        }
+    }
+    &  > &-item&-item-active > &-header{
+        border-bottom: 1px solid @border-color-base;
+    }
+    &-simple > &-item&-item-active > &-header{
+        border-bottom: 1px solid transparent;
+    }
+    &  > &-item&-item-active > &-header > i{
+        transform: rotate(90deg);
+    }
+
+    &-content{
+        //display: none;
+        //overflow: hidden;
+        color: @text-color;
+        padding: 0 16px;
+        background-color: #fff;
+
+        & > &-box {
+            padding-top: 16px;
+            padding-bottom: 16px;
+        }
+    }
+    &-simple > &-item > &-content > &-content-box{
+        padding-top: 0;
+    }
+    &-item-active > &-content{
+        //display: block;
+    }
+    &-item:last-child {
+        > .@{collapse-prefix-cls}-content {
+            border-radius: 0 0 3px 3px;
+        }
+    }
+}

src/styles/components/color-picker.less

@@ -0,0 +1,298 @@
+@color-picker-prefix-cls: ~'@{css-prefix}color-picker';
+
+.circle-dot(){
+    width: 4px;
+    height: 4px;
+    box-shadow: 0 0 0 1.5px #fff, inset 0 0 1px 1px rgba(0, 0, 0, 0.3), 0 0 1px 2px rgba(0, 0, 0, 0.4);
+    border-radius: 50%;
+    transform: translate(-2px, -2px);
+}
+
+.@{color-picker-prefix-cls} {
+    display: inline-block;
+    &-hide {
+        display: none;
+        &-drop {
+            visibility: hidden;
+        }
+    }
+    &-disabled {
+        .disabled();
+    }
+    & > div:first-child:hover {
+        .ivu-input {
+            .hover();
+        }
+    }
+    & > div:first-child.@{color-picker-prefix-cls}-disabled:hover {
+        .ivu-input {
+            border-color: tint(@input-border-color, 20%);
+        }
+    }
+    & .@{select-dropdown-prefix-cls} {
+        padding: 0;
+    }
+
+    &-input.ivu-input:focus{
+        box-shadow: none;
+    }
+    &-focused {
+        .active();
+    }
+    &-rel {
+        line-height: 0;
+    }
+    &-color {
+        width: 18px;
+        height: 18px;
+        background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==);
+        border-radius: 2px;
+        position: relative;
+        top: 2px;
+        div {
+            width: 100%;
+            height: 100%;
+            box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15);
+            border-radius: 2px;
+        }
+        &-empty {
+            background: #fff;
+            overflow: hidden;
+            text-align: center;
+            i {
+                font-size: 18px;
+                vertical-align: baseline;
+            }
+        }
+        &-focused {
+            .active();
+        }
+    }
+    &-large &-color {
+        width: 20px;
+        height: 20px;
+        top: 1px;
+        &-empty {
+            i {
+                font-size: 20px;
+            }
+        }
+    }
+    &-small &-color {
+        width: 14px;
+        height: 14px;
+        top: 3px;
+        &-empty {
+            i {
+                font-size: 14px;
+            }
+        }
+    }
+
+    &-picker {
+        &-wrapper {
+            padding: 8px 8px 0;
+        }
+        &-panel {
+            width: 240px;
+            margin: 0 auto;
+            box-sizing: initial;
+            position: relative;
+        }
+        &-hue-slider,
+        &-alpha-slider {
+            height: 10px;
+            margin-top: 8px;
+            position: relative;
+        }
+        &-colors {
+            margin-top: 8px;
+            overflow: hidden;
+            border-radius: 2px;
+            transition: border @transition-time @ease-in-out, box-shadow @transition-time @ease-in-out;
+            &:focus {
+                .active();
+            }
+            &-wrapper {
+                display: inline;
+                width: 20px;
+                height: 20px;
+                float: left;
+                position: relative;
+                &-color {
+                    outline: 0;
+                    display: block;
+                    position: absolute;
+                    width: 16px;
+                    height: 16px;
+                    margin: 2px;
+                    cursor: pointer;
+                    border-radius: 2px;
+                    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15);
+                }
+                &-circle {
+                    .circle-dot();
+                    position: absolute;
+                    top: 10px;
+                    left: 10px;
+                    cursor: pointer;
+                }
+            }
+        }
+        .@{picker-prefix-cls}-confirm {
+            margin-top: 8px;
+        }
+    }
+
+    &-saturation {
+        &-wrapper {
+            width: 100%;
+            padding-bottom: 75%;
+            position: relative;
+            //overflow: hidden;
+            transition: border @transition-time @ease-in-out, box-shadow @transition-time @ease-in-out;
+
+            &:focus {
+                .active();
+            }
+        }
+        &,
+        &--white,
+        &--black {
+            cursor: pointer;
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+        }
+        &--white {
+            background: linear-gradient(to right, #fff, rgba(255, 255, 255, 0));
+        }
+        &--black {
+            background: linear-gradient(to top, #000, rgba(0, 0, 0, 0));
+        }
+        &-pointer {
+            cursor: pointer;
+            position: absolute;
+        }
+        &-circle {
+            .circle-dot();
+        }
+    }
+
+    &-hue {
+        position: absolute;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+        border-radius: 2px;
+        background: linear-gradient(to right, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%);
+
+        transition: border @transition-time @ease-in-out, box-shadow @transition-time @ease-in-out;
+
+        &:focus {
+            .active();
+        }
+        &-container {
+            cursor: pointer;
+            margin: 0 2px;
+            position: relative;
+            height: 100%;
+        }
+        &-pointer {
+            z-index: 2;
+            position: absolute;
+        }
+        &-picker {
+            cursor: pointer;
+            margin-top: 1px;
+            width: 4px;
+            border-radius: 1px;
+            height: 8px;
+            box-shadow: 0 0 2px rgba(0, 0, 0, 0.6);
+            background: #fff;
+            transform: translateX(-2px);
+        }
+    }
+
+    &-alpha {
+        position: absolute;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+        border-radius: 2px;
+
+        transition: border @transition-time @ease-in-out, box-shadow @transition-time @ease-in-out;
+
+        &:focus {
+            .active();
+        }
+        &-checkboard-wrap {
+            position: absolute;
+            top: 0;
+            right: 0;
+            bottom: 0;
+            left: 0;
+            overflow: hidden;
+            border-radius: 2px;
+        }
+        &-checkerboard {
+            position: absolute;
+            top: 0;
+            right: 0;
+            bottom: 0;
+            left: 0;
+            background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==);
+        }
+        &-gradient {
+            position: absolute;
+            top: 0;
+            right: 0;
+            bottom: 0;
+            left: 0;
+            border-radius: 2px;
+        }
+        &-container {
+            cursor: pointer;
+            position: relative;
+            z-index: 2;
+            height: 100%;
+            margin: 0 3px;
+        }
+        &-pointer {
+            z-index: 2;
+            position: absolute;
+        }
+        &-picker {
+            cursor: pointer;
+            width: 4px;
+            border-radius: 1px;
+            height: 8px;
+            box-shadow: 0 0 2px rgba(0, 0, 0, 0.6);
+            background: #fff;
+            margin-top: 1px;
+            transform: translateX(-2px);
+        }
+    }
+
+    &-confirm {
+        margin-top: 8px;
+        position: relative;
+        border-top: 1px solid @border-color-split;
+        text-align: right;
+        padding: 8px;
+        clear: both;
+        &-color {
+            position: absolute;
+            top: 11px;
+            left: 8px;
+
+            &-editable{
+                top: 8px;
+            }
+        }
+    }
+}

src/styles/components/date-picker.less

@@ -0,0 +1,319 @@
+@date-picker-prefix-cls: ~"@{css-prefix}date-picker";
+@picker-prefix-cls: ~"@{css-prefix}picker";
+
+@date-picker-cells-width: 196px;
+@date-picker-cells-width-with-weeknumbers: 226px;
+
+.@{date-picker-prefix-cls} {
+    //position: relative;
+    display: inline-block;
+    line-height: normal;
+    &-rel{
+        position: relative;
+    }
+    .@{select-dropdown-prefix-cls} {
+        width: auto;
+        padding: 0;
+        overflow: visible;
+        max-height: none;
+    }
+    &-cells{
+        width: @date-picker-cells-width;
+        margin: 10px;
+        white-space: normal;
+        span{
+            display: inline-block;
+            width: 24px;
+            height: 24px;
+
+            em{
+                display: inline-block;
+                width: 24px;
+                height: 24px;
+                line-height: 24px;
+                margin: 2px;
+                font-style: normal;
+                border-radius: @btn-border-radius-small;
+                text-align: center;
+                transition: all @transition-time @ease-in-out;
+            }
+        }
+        &-header span{
+            line-height: 24px;
+            text-align: center;
+            margin: 2px;
+            color: @btn-disable-color;
+        }
+        &-cell:hover{
+            em{
+                background: @date-picker-cell-hover-bg;
+            }
+        }
+        &-focused{
+            em{
+                box-shadow: 0 0 0 1px @primary-color inset;
+            }
+        }
+        
+        &-cell{
+            span&{
+                width: 28px;
+                height: 28px;
+                cursor: pointer;
+            }
+            &-prev-month,&-next-month{
+                em{
+                    color: @btn-disable-color;
+                }
+                &:hover{
+                    em{
+                        background: transparent;
+                    }
+                }
+            }
+            span&-week-label,span&-week-label:hover,span&-disabled,span&-disabled:hover{
+                cursor: @cursor-disabled;
+                color: @btn-disable-color;
+                em{
+                    color: inherit;
+                    background: inherit;
+                }
+            }
+            span&-disabled,span&-disabled:hover{
+                background: @btn-disable-bg;
+            }
+            &-today{
+                em {
+                    position: relative;
+                    &:after{
+                        content: '';
+                        display: block;
+                        width: 6px;
+                        height: 6px;
+                        border-radius: 50%;
+                        background: @primary-color;
+                        position: absolute;
+                        top: 1px;
+                        right: 1px;
+                    }
+                }
+            }
+            &-range{
+                position: relative;
+                em{
+                    position: relative;
+                    z-index: 1;
+                }
+                &:before{
+                    content: '';
+                    display: block;
+                    background: @date-picker-cell-hover-bg;
+                    border-radius: 0;
+                    border: 0;
+                    position: absolute;
+                    top: 2px;
+                    bottom: 2px;
+                    left: 0;
+                    right: 0;
+                }
+            }
+            &-selected,&-selected:hover
+            {
+                em{
+                    background: @primary-color;
+                    color: #fff;
+                }
+            }
+            span&-disabled&-selected{
+                em {
+                    background: @btn-disable-color;
+                    color: @btn-disable-bg;
+                }
+            }
+            &-today&-selected
+            {
+                em{
+                    &:after{
+                        background: #fff;
+                    }
+                }
+            }
+        }
+    }
+
+    &-cells-show-week-numbers {
+        width: @date-picker-cells-width-with-weeknumbers;
+    }
+
+    &-cells-year,&-cells-month{
+        margin-top: 14px;
+        span{
+            width: 40px;
+            height: 28px;
+            line-height: 28px;
+            margin: 10px 12px;
+            border-radius: @btn-border-radius-small;
+            em{
+                width: 40px;
+                height: 28px;
+                line-height: 28px;
+                margin: 0;
+            }
+        }
+
+        .@{date-picker-prefix-cls}-cells-cell-focused{
+            background-color: tint(@primary-color, 80%);
+        }
+
+    }
+
+    &-header{
+        height: 32px;
+        line-height: 32px;
+        text-align: center;
+        border-bottom: 1px solid @border-color-split;
+        &-label{
+            cursor: pointer;
+            transition: color @transition-time @ease-in-out;
+            &:hover{
+                color: @primary-color;
+            }
+        }
+    }
+    &-btn-pulse{
+        background-color: tint(@primary-color, 80%) !important;
+        border-radius: @border-radius-small;
+        transition: background-color @transition-time @ease-in-out;
+    }
+    &-prev-btn{
+        float: left;
+        &-arrow-double{
+            margin-left: 10px;
+            i:after{
+                content: "\F115";
+                margin-left: -8px;
+            }
+        }
+    }
+    &-next-btn{
+        float: right;
+        &-arrow-double{
+            margin-right: 10px;
+            i:after{
+                content: "\F11F";
+                margin-left: -8px;
+            }
+        }
+    }
+
+    &-with-range{
+        .@{picker-prefix-cls}-panel{
+            &-body{
+                min-width: (@date-picker-cells-width + 20) * 2;
+            }
+            &-content{
+                float: left;
+            }
+        }
+        .@{picker-prefix-cls}-cells-show-week-numbers {
+            min-width: (@date-picker-cells-width-with-weeknumbers + 20) * 2;
+        }
+
+    }
+
+    &-with-week-numbers{
+        .@{picker-prefix-cls}-panel{
+            &-body-date {
+                min-width: (@date-picker-cells-width-with-weeknumbers + 20) * 2;
+            }
+        }
+    }
+
+    &-transfer{
+        z-index: @zindex-transfer;
+        max-height: none;
+        width: auto;
+    }
+
+    &-focused input{
+        .active();
+    }
+}
+
+.@{picker-prefix-cls} {
+    &-panel{
+        &-icon-btn{
+            display: inline-block;
+            width: 20px;
+            height: 24px;
+            line-height: 26px;
+            margin-top: 4px;
+            text-align: center;
+            cursor: pointer;
+            color: @btn-disable-color;
+            transition: color @transition-time @ease-in-out;
+            &:hover{
+                color: @primary-color;
+            }
+            i{
+                font-size: 14px;
+            }
+        }
+
+        &-body-wrapper&-with-sidebar{
+            padding-left: 92px;
+        }
+        &-sidebar{
+            width: 92px;
+            float: left;
+            margin-left: -92px;
+            position: absolute;
+            top: 0;
+            bottom: 0;
+            background: @table-thead-bg;
+            border-right: 1px solid @border-color-split;
+            border-radius: @border-radius-small 0 0 @border-radius-small;
+            overflow: auto;
+        }
+        &-shortcut{
+            padding: @btn-padding-large;
+            transition: all @transition-time @ease-in-out;
+            cursor: pointer;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+
+            &:hover{
+                background: @border-color-split;
+            }
+        }
+        &-body{
+            float: left;
+        }
+    }
+
+    &-confirm{
+        border-top: 1px solid @border-color-split;
+        text-align: right;
+        padding: 8px;
+        clear: both;
+        & > span{
+            color: @link-color;
+            cursor: pointer;
+            user-select: none;
+            float: left;
+            padding: 2px 0;
+            transition: all @transition-time @ease-in-out;
+            &:hover{
+                color: @link-hover-color;
+            }
+            &:active{
+                color: @link-active-color;
+            }
+        }
+
+        &-time{
+            float: left;
+        }
+    }
+}

src/styles/components/divider.less

@@ -0,0 +1,103 @@
+@divider-prefix-cls: ~"@{css-prefix}divider";
+
+.@{divider-prefix-cls} {
+    .reset-component;
+    background: @border-color-split;
+
+    &, // for compatiable
+    &-vertical {
+        margin: 0 8px;
+        display: inline-block;
+        height: 0.9em;
+        width: 1px;
+        vertical-align: middle;
+        position: relative;
+        top: -0.06em;
+    }
+    &-horizontal {
+        display: block;
+        height: 1px;
+        width: 100%;
+        min-width: 100%;
+        margin: 24px 0;
+        clear: both;
+    }
+    &-horizontal&-with-text-center,
+    &-horizontal&-with-text-left,
+    &-horizontal&-with-text-right {
+        display: table;
+        white-space: nowrap;
+        text-align: center;
+        background: transparent;
+        font-weight: 500;
+        color: @title-color;
+        font-size: @font-size-large;
+        margin: 16px 0;
+        &:before,
+        &:after {
+            content: '';
+            display: table-cell;
+            position: relative;
+            top: 50%;
+            width: 50%;
+            border-top: 1px solid @border-color-split;
+            transform: translateY(50%);
+        }
+    }
+
+    &-horizontal&-small&-with-text-center,
+    &-horizontal&-small&-with-text-left,
+    &-horizontal&-small&-with-text-right{
+        font-size: @font-size-base;
+        margin: 8px 0;
+    }
+
+    &-horizontal&-with-text-left,
+    &-horizontal&-with-text-right {
+        .@{divider-prefix-cls}-inner-text {
+            display: inline-block;
+            padding: 0 10px;
+        }
+    }
+
+    &-horizontal&-with-text-left {
+        &:before {
+            top: 50%;
+            width: 5%;
+        }
+        &:after {
+            top: 50%;
+            width: 95%;
+        }
+    }
+
+    &-horizontal&-with-text-right {
+        &:before {
+            top: 50%;
+            width: 95%;
+        }
+        &:after {
+            top: 50%;
+            width: 5%;
+        }
+    }
+
+    &-inner-text {
+        display: inline-block;
+        padding: 0 24px;
+    }
+
+    &-dashed {
+        background: none;
+        border-top: 1px dashed @border-color-split;
+    }
+    &-horizontal&-with-text&-dashed,
+    &-horizontal&-with-text-left&-dashed,
+    &-horizontal&-with-text-right&-dashed {
+        border-top: 0;
+        &:before,
+        &:after {
+            border-style: dashed none none;
+        }
+    }
+}

src/styles/components/drawer.less

@@ -0,0 +1,136 @@
+@drawer-prefix-cls: ~"@{css-prefix}drawer";
+
+.@{drawer-prefix-cls} {
+    width: auto;
+    height: 100%;
+    position: fixed;
+    top: 0;
+
+    &-inner{
+        position: absolute;
+    }
+
+    &-left{
+        left: 0;
+    }
+    &-right{
+        right: 0;
+    }
+
+    &-hidden {
+        display: none !important;
+    }
+
+    &-wrap {
+        position: fixed;
+        overflow: auto;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+        z-index: @zindex-drawer;
+        -webkit-overflow-scrolling: touch;
+        outline: 0;
+
+        &-inner{
+            position: absolute;
+            overflow: hidden;
+        }
+
+        &-dragging{
+            user-select: none;
+        }
+    }
+
+    &-wrap * {
+        box-sizing: border-box;
+        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+    }
+
+    &-mask {
+        .mask;
+        &-inner{
+            position: absolute;
+        }
+    }
+
+    &-content {
+        width: 100%;
+        height: 100%;
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        background-color: #fff;
+        border: 0;
+        background-clip: padding-box;
+        box-shadow: 0 4px 12px rgba(0,0,0,.15);
+
+        &-no-mask{
+            pointer-events: auto;
+        }
+    }
+
+    &-header {
+        .content-header;
+    }
+
+    &-close {
+        z-index: 1;
+        .content-close(1px, 31px);
+    }
+
+    &-body {
+        width: 100%;
+        height: calc(~'100% - 51px');
+        padding: 16px;
+        font-size: 12px;
+        line-height: 1.5;
+        word-wrap: break-word;
+        position: absolute;
+        overflow: auto;
+    }
+
+    &-no-header &-body{
+        height: 100%;
+    }
+
+    &-no-mask{
+        pointer-events: none;
+
+        .@{drawer-prefix-cls}-drag{
+            pointer-events: auto;
+        }
+    }
+
+    &-drag{
+        top: 0;
+        height: 100%;
+        width: 0;
+        position: absolute;
+        &-left{
+            right: 0;
+        }
+        &-move-trigger{
+            width: 8px;
+            height: 100px;
+            line-height: 100px;
+            position: absolute;
+            top: 50%;
+            background: rgb(243, 243, 243);
+            transform: translate(-50%, -50%);
+            border-radius: ~"4px / 6px";
+            box-shadow: 0 0 1px 1px rgba(0, 0, 0, .2);
+            cursor: col-resize;
+            &-point{
+                display: inline-block;
+                width: 50%;
+                transform: translateX(50%);
+                i{
+                    display: block;
+                    border-bottom: 1px solid rgb(192, 192, 192);
+                    padding-bottom: 2px;
+                }
+            }
+        }
+    }
+}

src/styles/components/dropdown.less

@@ -0,0 +1,38 @@
+@dropdown-prefix-cls: ~"@{css-prefix}dropdown";
+@dropdown-item-prefix-cls: ~"@{dropdown-prefix-cls}-item";
+
+.@{dropdown-prefix-cls} {
+    display: inline-block;
+    //position: relative;
+
+    .@{select-dropdown-prefix-cls} {
+        overflow: visible;
+        max-height: none;
+    }
+    .@{dropdown-prefix-cls} {
+        width: 100%;
+    }
+
+    &-rel{
+        //display: inline-block;
+        position: relative;
+        &-user-select-none{
+            -webkit-user-select: none;
+            -moz-user-select: none;
+            user-select: none;
+        }
+    }
+
+    &-menu{
+        min-width: 100px;
+    }
+
+    &-transfer{
+        width: auto;
+    }
+    &-item-selected, &-item&-item-selected:hover{
+        background:  ~`colorPalette("@{primary-color}", 1)`;
+    }
+}
+
+.select-item(@dropdown-prefix-cls, @dropdown-item-prefix-cls);

src/styles/components/form.less

@@ -0,0 +1,71 @@
+@form-prefix-cls: ~"@{css-prefix}form";
+@form-item-prefix-cls: ~"@{form-prefix-cls}-item";
+
+.@{form-prefix-cls} {
+    .@{form-item-prefix-cls}-label {
+        text-align: right;
+        vertical-align: middle;
+        float: left;
+        font-size: @font-size-small;
+        color: @text-color;
+        line-height: 1;
+        padding: 10px 12px 10px 0;
+        box-sizing: border-box;
+    }
+    &-label-left .@{form-item-prefix-cls}-label {
+        text-align: left;
+    }
+    &-label-top .@{form-item-prefix-cls}-label {
+        float: none;
+        display: inline-block;
+        padding: 0 0 10px 0;
+    }
+    &-inline{
+        .@{form-item-prefix-cls} {
+            display: inline-block;
+            margin-right: 10px;
+            vertical-align: top;
+        }
+    }
+}
+
+.@{form-item-prefix-cls} {
+    margin-bottom: 24px;
+    vertical-align: top;
+    .clearfix();
+    &-content {
+        position: relative;
+        line-height: 32px;
+        font-size: @font-size-small;
+    }
+    & & {
+        margin-bottom: 0;
+    }
+    & & &-content {
+        margin-left: 0!important;
+    }
+
+    &-error-tip{
+        position: absolute;
+        top: 100%;
+        left: 0;
+        line-height: 1;
+        padding-top: 6px;
+        color: @error-color;
+    }
+
+    &-required {
+        .@{form-item-prefix-cls}-label:before {
+            content: '*';
+            display: inline-block;
+            margin-right: 4px;
+            line-height: 1;
+            font-family: SimSun;
+            font-size: @font-size-small;
+            color: @error-color;
+        }
+    }
+    &-error {
+        // todo
+    }
+}

src/styles/components/index.less

@@ -0,0 +1,54 @@
+@import "button";
+@import "affix";
+@import "back-top";
+@import "badge";
+@import "circle";
+@import "spin";
+@import "alert";
+@import "collapse";
+@import "card";
+@import "message";
+@import "notice";
+@import "radio";
+@import "checkbox";
+@import "switch";
+@import "input-number";
+@import "scroll";
+@import "tag";
+@import "layout";
+@import "loading-bar";
+@import "progress";
+@import "timeline";
+@import "page";
+@import "steps";
+@import "modal";
+@import "select";
+@import "select-dropdown";
+@import "split";
+@import "tooltip";
+@import "poptip";
+@import "input";
+@import "slider";
+@import "cascader";
+@import "transfer";
+@import "table";
+@import "dropdown";
+@import "tabs";
+@import "menu";
+@import "date-picker";
+@import "time-picker";
+@import "form";
+@import "carousel";
+@import "rate";
+@import "upload";
+@import "tree";
+@import "avatar";
+@import "color-picker";
+@import "auto-complete";
+@import "divider";
+@import "anchor";
+@import "time";
+@import "cell";
+@import "drawer";
+@import "breadcrumb";
+@import "list";

src/styles/components/input-number.less

@@ -0,0 +1,200 @@
+@input-number-prefix-cls: ~"@{css-prefix}input-number";
+
+.handler-disabled() {
+    opacity: 0.72;
+    color: #ccc !important;
+    cursor: @cursor-disabled;
+}
+
+.@{input-number-prefix-cls} {
+    @radius-wrap: 0 @btn-border-radius @btn-border-radius 0;
+
+    .input;
+    margin: 0;
+    padding: 0;
+    width: 80px;
+    height: @input-height-base;
+    line-height: @input-height-base;
+    vertical-align: middle;
+    border: 1px solid @border-color-base;
+    border-radius: @btn-border-radius;
+    overflow: hidden;
+    cursor: default;
+
+    &-handler-wrap {
+        width: 22px;
+        height: 100%;
+        border-left: 1px solid @border-color-base;
+        border-radius: @radius-wrap;
+        background: #fff;
+        position: absolute;
+        top: 0;
+        right: 0;
+        opacity: 0;
+        transition: opacity @transition-time @ease-in-out;
+    }
+
+    &:hover &-handler-wrap {
+        opacity: 1;
+    }
+
+    &-handler-up {
+        cursor: pointer;
+        &-inner {
+            top: 1px;
+        }
+    }
+
+    &-handler-down {
+        border-top: 1px solid @border-color-base;
+        top: -1px;
+        cursor: pointer;
+    }
+
+    &-handler {
+        display: block;
+        width: 100%;
+        height: @input-height-base / 2;
+        line-height: 0;
+        text-align: center;
+        overflow: hidden;
+        color: #999;
+        position: relative;
+
+        &:hover &-up-inner,
+        &:hover &-down-inner {
+            color: tint(@primary-color, 20%);
+        }
+    }
+
+    &-handler-up-inner,
+    &-handler-down-inner {
+        width: 12px;
+        height: 12px;
+        line-height: 12px;
+        font-size: 14px;
+        color: #999;
+        user-select: none;
+        position: absolute;
+        right: 5px;
+        transition: all @transition-time linear;
+    }
+
+    &:hover {
+        .hover();
+    }
+
+    &-focused {
+        .active();
+    }
+
+    &-disabled {
+        .disabled();
+    }
+
+    &-input-wrap {
+        overflow: hidden;
+        height: @input-height-base;
+    }
+
+    &-input {
+        width: 100%;
+        height: @input-height-base;
+        line-height: @input-height-base;
+        padding: 0 7px;
+        text-align: left;
+        outline: 0;
+        -moz-appearance: textfield;
+        color: #666;
+        border: 0;
+        border-radius: @btn-border-radius;
+        transition: all @transition-time linear;
+
+        &[disabled] {
+            .disabled();
+        }
+
+        &::placeholder {
+            color: @input-placeholder-color;
+        }
+    }
+
+    &-large {
+        padding: 0;
+        .@{input-number-prefix-cls}-input-wrap {
+            height: @input-height-large;
+        }
+        .@{input-number-prefix-cls}-handler {
+            height: @input-height-large / 2;
+        }
+
+        input {
+            height: @input-height-large;
+            line-height: @input-height-large;
+        }
+
+        .@{input-number-prefix-cls}-handler-up-inner {
+            top: 2px;
+        }
+        .@{input-number-prefix-cls}-handler-down-inner {
+            bottom: 2px;
+        }
+    }
+
+    &-small {
+        padding: 0;
+        .@{input-number-prefix-cls}-input-wrap {
+            height: @input-height-small;
+        }
+        .@{input-number-prefix-cls}-handler {
+            height: @input-height-small / 2;
+        }
+
+        input {
+            height: @input-height-small;
+            line-height: @input-height-small;
+            margin-top: -1px;
+            vertical-align: top;
+        }
+        .@{input-number-prefix-cls}-handler-up-inner {
+            top: -1px;
+        }
+        .@{input-number-prefix-cls}-handler-down-inner {
+            bottom: -1px;
+        }
+    }
+
+
+
+    &-handler-down-disabled,
+    &-handler-up-disabled,
+    &-disabled {
+        .@{input-number-prefix-cls}-handler-down-inner,
+        .@{input-number-prefix-cls}-handler-up-inner {
+            .handler-disabled();
+        }
+    }
+
+    &-disabled {
+        .@{input-number-prefix-cls}-input {
+            opacity: 0.72;
+            cursor: @cursor-disabled;
+            background-color: #f3f3f3;
+        }
+        .@{input-number-prefix-cls}-handler-wrap {
+            display: none;
+        }
+        .@{input-number-prefix-cls}-handler {
+            .handler-disabled();
+        }
+    }
+}
+
+.@{form-item-prefix-cls}-error {
+    .@{input-number-prefix-cls}{
+        .input-error;
+        &-focused {
+            .active-error;
+        }
+    }
+}

src/styles/components/input.less

@@ -0,0 +1,201 @@
+@input-prefix-cls: ~"@{css-prefix}input";
+
+.@{input-prefix-cls} {
+    .input;
+    &-wrapper{
+        display: inline-block;
+        width: 100%;
+        position: relative;
+        vertical-align: middle;
+
+        // #2149 & #2219
+        line-height: normal;
+    }
+    &-icon {
+        width: 32px;
+        height: @input-height-base;
+        line-height: @input-height-base;
+        font-size: 16px;
+        text-align: center;
+        color: @subsidiary-color;
+        position: absolute;
+        right: 0;
+        z-index: 3;
+    }
+    &-hide-icon &-icon{
+        display: none;
+    }
+    &-icon-validate{
+        display: none;
+    }
+
+    &-icon-clear{
+        display: none;
+    }
+
+    &-wrapper:hover{
+        .@{input-prefix-cls}-icon-clear{
+            display: inline-block;
+        }
+    }
+
+    &-icon-normal + &{
+        padding-right: 32px;
+    }
+    // #554
+    &-hide-icon &-icon-normal + &{
+        padding-right: @input-padding-horizontal;
+    }
+
+    &-wrapper-large &-icon{
+        font-size: 18px;
+        height: @input-height-large;
+        line-height: @input-height-large;
+    }
+    &-wrapper-small &-icon{
+        width: 24px;
+        font-size: 14px;
+        height: @input-height-small;
+        line-height: @input-height-small;
+
+        //+ .@{input-prefix-cls} {
+        //    padding-right: 24px;
+        //}
+    }
+
+    // prefix & suffix
+    &-prefix, &-suffix{
+        width: 32px;
+        height: 100%;
+        text-align: center;
+        position: absolute;
+        left: 0;
+        top: 0;
+        z-index: 1;
+        i{
+            font-size: 16px;
+            line-height: @input-height-base;
+            color: @subsidiary-color;
+        }
+    }
+    &-suffix{
+        left: auto;
+        right: 0;
+    }
+    &-wrapper-small &-prefix, &-wrapper-small &-suffix{
+        i{
+            font-size: 14px;
+            line-height: @input-height-small;
+        }
+    }
+    &-wrapper-large &-prefix, &-wrapper-large &-suffix{
+        i{
+            font-size: 18px;
+            line-height: @input-height-large;
+        }
+    }
+
+    &-with-prefix{
+        padding-left: 32px;
+    }
+    &-with-suffix{
+        padding-right: 32px;
+    }
+
+    // search
+    &-search{
+        cursor: pointer;
+        padding: 0 16px !important;
+        background: @primary-color !important;
+        color: #fff !important;
+        border-color: @primary-color !important;
+        transition: all @transition-time @ease-in-out;
+        position: relative;
+        z-index: 2;
+
+        i{
+            font-size: 16px;
+        }
+
+        &:hover{
+            background: tint(@primary-color, 20%) !important;
+            border-color: tint(@primary-color, 20%) !important;
+        }
+        &:active{
+            background: shade(@primary-color, 5%) !important;
+            border-color: shade(@primary-color, 5%) !important;
+        }
+
+        &-icon{
+            cursor: pointer;
+            transition: color @transition-time @ease-in-out;
+            &:hover{
+                color: inherit;
+            }
+        }
+
+        &:before{
+            content: '';
+            display: block;
+            width: 1px;
+            position: absolute;
+            top: -1px;
+            bottom: -1px;
+            left: -1px;
+            background: inherit;
+        }
+    }
+    &-wrapper-small &-search{
+        padding: 0 12px !important;
+        i{
+            font-size: 14px;
+        }
+    }
+    &-wrapper-large &-search{
+        padding: 0 20px !important;
+        i{
+            font-size: 18px;
+        }
+    }
+    &-with-search{
+        &:hover{
+            .@{input-prefix-cls} {
+                border-color: tint(@primary-color, 20%);
+            }
+        }
+    }
+}
+
+.@{input-prefix-cls}-group{
+    .input-group(~"@{input-prefix-cls}");
+}
+
+.@{form-item-prefix-cls}-error{
+    .@{input-prefix-cls}{
+        .input-error;
+        &-icon{
+            color: @error-color;
+        }
+    }
+    .@{input-prefix-cls}-group{
+        .input-group-error;
+    }
+    .@{transfer-prefix-cls} {
+        .@{input-prefix-cls} {
+            .input;
+            &-icon{
+                color: @subsidiary-color;
+            }
+        }
+    }
+}
+.@{form-item-prefix-cls}-validating{
+    .@{input-prefix-cls}{
+        &-icon-validate{
+            display: inline-block;
+        }
+        &-icon + .@{input-prefix-cls}{
+            padding-right: 32px;
+        }
+    }
+}

src/styles/components/layout.less

@@ -0,0 +1,113 @@
+@layout-prefix-cls: ~"@{css-prefix}layout";
+
+.@{layout-prefix-cls} {
+    display: flex;
+    flex-direction: column;
+    flex: auto;
+    background: @layout-body-background;
+    
+    &&-has-sider {
+        flex-direction: row;
+        > .@{layout-prefix-cls},
+        > .@{layout-prefix-cls}-content {
+          overflow-x: hidden;
+        }
+    }
+
+    &-header,
+    &-footer {
+        flex: 0 0 auto;
+    }
+
+    &-header {
+        background: @layout-header-background;
+        padding: @layout-header-padding;
+        height: @layout-header-height;
+        line-height: @layout-header-height;
+    }
+
+    &-sider {
+        transition: all .2s @ease-in-out;
+        position: relative;
+        background: @layout-sider-background;
+
+        min-width: 0;
+
+        &-children {
+            height: 100%;
+            padding-top: 0.1px;
+            margin-top: -0.1px;
+        }
+
+        &-has-trigger {
+            padding-bottom: @layout-trigger-height;
+        }
+
+        &-trigger {
+            position: fixed;
+            bottom: 0;
+            text-align: center;
+            cursor: pointer;
+            height: @layout-trigger-height;
+            line-height: @layout-trigger-height;
+            color: @layout-trigger-color;
+            background: @layout-sider-background;
+            z-index: 1000;
+            transition: all .2s @ease-in-out;
+            .ivu-icon {
+                font-size: 16px;
+            }
+            >* {
+                transition: all .2s;
+            }
+            &-collapsed {
+                .@{layout-prefix-cls}-sider-trigger-icon {
+                    transform: rotateZ(180deg);
+                }
+            }
+        }
+
+        &-zero-width {
+            & > * {
+                overflow: hidden;
+            }
+
+            &-trigger {
+                position: absolute;
+                top: @layout-header-height;
+                right: -@layout-zero-trigger-width;
+                text-align: center;
+                width: @layout-zero-trigger-width;
+                height: @layout-zero-trigger-height;
+                line-height: @layout-zero-trigger-height;
+                background: @layout-sider-background;
+                color: #fff;
+                font-size: @layout-zero-trigger-width / 2;
+                border-radius: 0 @border-radius-base @border-radius-base 0;
+                cursor: pointer;
+                transition: background .3s ease;
+        
+                &:hover {
+                  background: tint(@layout-sider-background, 10%);
+                }
+
+                &&-left {
+                    right: 0;
+                    left: -@layout-zero-trigger-width;
+                    border-radius: @border-radius-base 0 0 @border-radius-base;
+                }
+            }
+        }
+    }
+
+    &-footer {
+        background: @layout-footer-background;
+        padding: @layout-footer-padding;
+        color: @text-color;
+        font-size: @font-size-base;
+    }
+
+    &-content {
+        flex: auto;
+    }
+}

src/styles/components/list.less

@@ -0,0 +1,267 @@
+@list-prefix-cls: ~"@{css-prefix}list";
+
+.@{list-prefix-cls} {
+    position: relative;
+
+    &-items {
+        margin: 0;
+        padding: 0;
+        list-style: none;
+    }
+
+    &-item{
+        display: flex;
+        align-items: center;
+        padding: @list-item-padding;
+
+        &-content {
+            color: @text-color;
+        }
+
+        &-meta{
+            display: flex;
+            flex: 1;
+            align-items: flex-start;
+            font-size: 0;
+
+            &-avatar {
+                margin-right: @list-item-meta-avatar-margin-right;
+            }
+            &-content {
+                flex: 1 0;
+            }
+            &-title {
+                font-weight: bold;
+                margin-bottom: 4px;
+                color: @text-color;
+                font-size: @font-size-base;
+                line-height: 22px;
+                > a {
+                    color: @text-color;
+                    transition: all @transition-time;
+                    &:hover {
+                        color: @primary-color;
+                    }
+                }
+            }
+            &-description {
+                color: @text-color-secondary;
+                font-size: @font-size-base;
+                line-height: 22px;
+            }
+        }
+
+        &-action {
+            flex: 0 0 auto;
+            margin-left: 48px;
+            padding: 0;
+            font-size: 0;
+            list-style: none;
+            & > li {
+                position: relative;
+                display: inline-block;
+                padding: 0 8px;
+                color: @text-color-secondary;
+                font-size: @font-size-base;
+                line-height: 22px;
+                text-align: center;
+                cursor: pointer;
+
+                &:after{
+                    content: '';
+                    position: absolute;
+                    top: 50%;
+                    right: 0;
+                    width: 1px;
+                    height: 14px;
+                    margin-top: -7px;
+                    background-color: @border-color-split;
+                }
+            }
+            & > li:first-child {
+                padding-left: 0;
+            }
+            & > li:last-child {
+                &:after{
+                    display: none;
+                }
+            }
+            &-split {
+
+            }
+        }
+    }
+
+    &-header {
+        background: @list-header-background;
+    }
+
+    &-footer {
+        background: @list-footer-background;
+    }
+
+    &-header,
+    &-footer {
+        padding-top: 12px;
+        padding-bottom: 12px;
+    }
+
+    &-split &-item {
+        border-bottom: 1px solid @border-color-split;
+        &:last-child {
+            border-bottom: none;
+        }
+    }
+
+    &-split &-header {
+        border-bottom: 1px solid @border-color-split;
+    }
+    &-split &-footer{
+        border-top: 1px solid @border-color-split;
+    }
+
+    &-large &-item {
+        padding-top: 16px;
+        padding-bottom: 16px;
+    }
+
+    &-small &-item {
+        padding-top: 8px;
+        padding-bottom: 8px;
+    }
+
+    &-vertical &-item {
+        align-items: initial;
+
+        &-main {
+            display: block;
+            flex: 1;
+        }
+
+        &-extra {
+            margin-left: 40px;
+        }
+
+        &-meta {
+            margin-bottom: @list-item-meta-margin-bottom;
+
+            &-title {
+                margin-bottom: @list-item-meta-title-margin-bottom;
+                color: @heading-color;
+                font-size: @font-size-large;
+                line-height: 24px;
+            }
+        }
+
+        &-action {
+            margin-top: @padding-md;
+            margin-left: auto;
+
+            > li {
+                padding: 0 16px;
+                &:first-child {
+                    padding-left: 0;
+                }
+            }
+        }
+    }
+
+    // without flex
+    &-item-no-flex {
+        display: block;
+    }
+
+    // Horizontal
+    &:not(.@{list-prefix-cls}-vertical) {
+        .@{list-prefix-cls}-item-no-flex {
+            .@{list-prefix-cls}-item-action {
+                float: right;
+            }
+        }
+    }
+}
+
+.@{list-prefix-cls}-bordered {
+    border: 1px solid @border-color-base;
+    border-radius: @border-radius-base;
+    .@{list-prefix-cls}-header {
+        padding-right: 24px;
+        padding-left: 24px;
+    }
+
+    .@{list-prefix-cls}-footer {
+        padding-right: 24px;
+        padding-left: 24px;
+    }
+
+    .@{list-prefix-cls}-item {
+        padding-right: 24px;
+        padding-left: 24px;
+        border-bottom: 1px solid @border-color-split;
+    }
+
+    .@{list-prefix-cls}-pagination {
+        margin: 16px 24px;
+    }
+
+    &.@{list-prefix-cls}-small {
+        .@{list-prefix-cls}-item {
+            padding-right: 16px;
+            padding-left: 16px;
+        }
+        .@{list-prefix-cls}-header,
+        .@{list-prefix-cls}-footer {
+            padding: 8px 16px;
+        }
+    }
+
+    &.@{list-prefix-cls}-large {
+        .@{list-prefix-cls}-header,
+        .@{list-prefix-cls}-footer {
+            padding: 16px 24px;
+        }
+    }
+}
+
+// responsive
+
+@media screen and (max-width: @screen-md) {
+    .@{list-prefix-cls} {
+        &-item {
+            &-action {
+                margin-left: 24px;
+            }
+        }
+    }
+
+    .@{list-prefix-cls}-vertical {
+        .@{list-prefix-cls}-item {
+            &-extra {
+                margin-left: 24px;
+            }
+        }
+    }
+}
+
+@media screen and (max-width: @screen-sm) {
+    .@{list-prefix-cls} {
+        &-item {
+            flex-wrap: wrap;
+            &-action {
+                margin-left: 12px;
+            }
+        }
+    }
+
+    .@{list-prefix-cls}-vertical {
+        .@{list-prefix-cls}-item {
+            flex-wrap: wrap-reverse;
+            &-main {
+                min-width: 220px;
+            }
+            &-extra {
+                margin: auto auto 16px;
+            }
+        }
+    }
+}

src/styles/components/loading-bar.less

@@ -0,0 +1,22 @@
+@loading-bar-prefix-cls: ~"@{css-prefix}loading-bar";
+
+.@{loading-bar-prefix-cls} {
+    width: 100%;
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    z-index: @zindex-loading-bar;
+
+    &-inner {
+        transition: width @transition-time linear;
+
+        &-color-primary {
+            background-color: @primary-color;
+        }
+
+        &-failed-color-error {
+            background-color: @error-color;
+        }
+    }
+}

src/styles/components/menu.less

@@ -0,0 +1,276 @@
+@menu-prefix-cls: ~"@{css-prefix}menu";
+@menu-dropdown-item-prefix-cls: ~"@{menu-prefix-cls}-horizontal .@{menu-prefix-cls}-submenu .@{select-dropdown-prefix-cls} .@{menu-prefix-cls}-item";
+
+.@{menu-prefix-cls} {
+    display: block;
+    margin: 0;
+    padding: 0;
+    outline: none;
+    list-style: none;
+    color: @text-color;
+    font-size: @font-size-base;
+    position: relative;
+    z-index: @zindex-select;
+
+    &-horizontal{
+        height: 60px;
+        line-height: 60px;
+
+        &.@{menu-prefix-cls}-light{
+            &:after{
+                content: '';
+                display: block;
+                width: 100%;
+                height: 1px;
+                background: @border-color-base;
+                position: absolute;
+                bottom: 0;
+                left: 0;
+            }
+        }
+    }
+    &-vertical{
+        &.@{menu-prefix-cls}-light{
+            &:after{
+                content: '';
+                display: block;
+                width: 1px;
+                height: 100%;
+                background: @border-color-base;
+                position: absolute;
+                top: 0;
+                bottom: 0;
+                right: 0;
+                z-index: 1;
+            }
+        }
+    }
+
+    &-light{
+        background: #fff;
+    }
+    &-dark{
+        background: @menu-dark-title;
+    }
+    &-primary{
+        background: @primary-color;
+    }
+
+    &-item{
+        display: block;
+        outline: none;
+        list-style: none;
+        font-size: @font-size-base;
+        position: relative;
+        z-index: 1;
+        cursor: pointer;
+        transition: all @transition-time @ease-in-out;
+    }
+    a&-item{
+        color: inherit;
+        &:hover, &:active{
+            color: inherit;
+        }
+    }
+    &-item > i{
+        margin-right: 6px;
+    }
+    &-submenu-title > i, &-submenu-title span > i{
+        margin-right: 8px;
+    }
+
+    &-horizontal &-item,
+    &-horizontal &-submenu
+    {
+        float: left;
+        padding: 0 20px;
+        position: relative;
+        cursor: pointer;
+        z-index: 3;
+        transition: all @transition-time @ease-in-out;
+    }
+
+    &-light&-horizontal &-item, &-light&-horizontal &-submenu{
+        height: inherit;
+        line-height: inherit;
+        border-bottom: 2px solid transparent;
+        color: @text-color;
+        &-active, &:hover{
+            color: @primary-color;
+            border-bottom: 2px solid @primary-color;
+        }
+    }
+
+    &-dark&-horizontal &-item, &-dark&-horizontal &-submenu{
+        color: @menu-dark-subsidiary-color;
+        &-active, &:hover{
+            color: #fff;
+        }
+    }
+
+    &-primary&-horizontal &-item, &-primary&-horizontal &-submenu{
+        color: #fff;
+        &-active, &:hover{
+            //background: @link-active-color;
+        }
+    }
+
+    &-horizontal &-submenu .@{select-dropdown-prefix-cls} {
+        min-width: 100%;
+        width: auto;
+        max-height: none;
+        .@{menu-prefix-cls}-item{
+            height: auto;
+            line-height: normal;
+            border-bottom: 0;
+            float: none;
+        }
+    }
+
+    &-item-group{
+        line-height: normal;
+        &-title {
+            height: 30px;
+            line-height: 30px;
+            padding-left: 8px;
+            font-size: @font-size-small;
+            color: @legend-color;
+        }
+
+        & > ul{
+            padding: 0 !important;
+            list-style: none !important;
+        }
+    }
+
+    // vertical
+    &-vertical &-item,
+    &-vertical &-submenu-title
+    {
+        padding: 14px 24px;
+        position: relative;
+        cursor: pointer;
+        z-index: 1;
+        transition: all @transition-time @ease-in-out;
+
+        &:hover{
+            //background: @background-color-select-hover;
+            color: @primary-color;
+        }
+    }
+
+    &-vertical &-submenu-title-icon{
+        // #5592 支持自定义图标 size 后，换一种位置
+        //float: right;
+        //position: relative;
+        //top: 4px;
+        position: absolute;
+        top: 50%;
+        right: 24px;
+        transform: translateY(-50%);
+    }
+    &-submenu-title-icon {
+        transition: transform @transition-time @ease-in-out;
+    }
+    &-horizontal &-opened > * > &-submenu-title-icon{
+        transform: rotate(180deg);
+    }
+    &-vertical &-opened > * > &-submenu-title-icon{
+        transform: translateY(-50%) rotate(180deg);
+    }
+
+    &-vertical &-submenu{
+        &-nested{
+            padding-left: 20px;
+        }
+        .@{menu-prefix-cls}-item{
+            padding-left: 43px;
+        }
+    } 
+    &-vertical &-item-group{
+        &-title{
+            height: 48px;
+            line-height: 48px;
+            font-size: @font-size-base;
+            padding-left: 28px;
+        }
+    }
+    &-dark&-vertical &-item-group{
+        &-title{
+            color: @menu-dark-group-title-color;
+        }
+    }
+
+    &-light&-vertical &-item{
+        //border-right: 2px solid transparent;
+        &-active:not(.@{menu-prefix-cls}-submenu){
+            color: @primary-color;
+            background: ~`colorPalette("@{primary-color}", 1)`;
+            //border-right: 2px solid @primary-color;
+            z-index: 2;
+            &:after{
+                content: '';
+                display: block;
+                width: 2px;
+                position: absolute;
+                top: 0;
+                bottom: 0;
+                right: 0;
+                background: @primary-color;
+            }
+        }
+    }
+
+    &-dark&-vertical &-item, &-dark&-vertical &-submenu-title{
+        color: @menu-dark-subsidiary-color;
+        &-active:not(.@{menu-prefix-cls}-submenu),
+        &-active:not(.@{menu-prefix-cls}-submenu):hover
+        {
+            background: @menu-dark-active-bg;
+        }
+        &:hover{
+            color: #fff;
+            background: @menu-dark-title;
+        }
+        &-active:not(.@{menu-prefix-cls}-submenu){
+            color: @primary-color;
+            //border-right: 2px solid @primary-color;
+        }
+    }
+    &-dark&-vertical &-submenu &-item{
+        &:hover{
+            color: #fff;
+            background: transparent !important;
+        }
+        &-active,&-active:hover{
+            border-right: none;
+            color: #fff;
+            background: @primary-color !important;
+        }
+    }
+    // &-dark&-vertical &-item-active &-submenu-title{
+    //     color: #fff;
+    // }
+    &-dark&-vertical &-child-item-active > &-submenu-title{
+        color: #fff;
+    }
+
+    &-dark&-vertical &-opened{
+        background: @menu-dark-active-bg;
+        .@{menu-prefix-cls}-submenu-title{
+            background: @menu-dark-title;
+        }
+
+        .@{menu-prefix-cls}-submenu-has-parent-submenu{
+            .@{menu-prefix-cls}-submenu-title{
+                background: transparent;
+            }
+        }
+    }
+}
+.select-item(@menu-prefix-cls, @menu-dropdown-item-prefix-cls);
+
+.@{menu-dropdown-item-prefix-cls} {
+    padding: 7px 16px 8px;
+    font-size: @font-size-base !important;
+}

src/styles/components/message.less

@@ -0,0 +1,82 @@
+@message-prefix-cls: ~"@{css-prefix}message";
+@icon-prefix-cls: ~"@{css-prefix}icon";
+
+.@{message-prefix-cls} {
+    font-size: @font-size-base;
+    position: fixed;
+    z-index: @zindex-message;
+    width: 100%;
+    top: 16px;
+    left: 0;
+    pointer-events: none;
+
+    &-notice {
+        padding: 8px;
+        text-align: center;
+        transition: height @animation-time @ease-in-out, padding @animation-time @ease-in-out;
+
+        &:first-child {
+          margin-top: -8px;
+        }
+
+        &-close {
+            position: absolute;
+            right: 4px;
+            top: 10px;
+            color: #999;
+            outline: none;
+
+            i.@{icon-prefix-cls}{
+                .close-base(-3px);
+            }
+        }
+    }
+
+    &-notice-content {
+        display: inline-block;
+        pointer-events: all;
+        padding: 8px 16px;
+        //border: 1px solid @border-color-split;
+        border-radius: @border-radius-small;
+        box-shadow: @shadow-base;
+        background: #fff;
+        position: relative;
+        &-text{
+            display: inline-block;
+        }
+    }
+
+    &-notice-closable{
+        .@{message-prefix-cls}-notice-content-text{
+            padding-right: 32px;
+        }
+    }
+
+    &-success .@{icon-prefix-cls} {
+        color: @success-color;
+    }
+
+    &-error .@{icon-prefix-cls} {
+        color: @error-color;
+    }
+
+    &-warning .@{icon-prefix-cls} {
+        color: @warning-color;
+    }
+
+    &-info .@{icon-prefix-cls},
+    &-loading .@{icon-prefix-cls} {
+        color: @primary-color;
+    }
+
+    .@{icon-prefix-cls} {
+        margin-right: 4px;
+        font-size: @font-size-large;
+        vertical-align: middle;
+    }
+    &-custom-content{
+        span{
+            vertical-align: middle;
+        }
+    }
+}

src/styles/components/modal.less

@@ -0,0 +1,201 @@
+@modal-prefix-cls: ~"@{css-prefix}modal";
+@confirm-prefix-cls: ~"@{css-prefix}modal-confirm";
+
+.@{modal-prefix-cls} {
+    width: auto;
+    margin: 0 auto;
+    position: relative;
+    outline: none;
+    top: 100px;
+
+    &-hidden {
+        display: none !important;
+    }
+
+    &-wrap {
+        position: fixed;
+        overflow: auto;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+        z-index: @zindex-modal;
+        -webkit-overflow-scrolling: touch;
+        outline: 0;
+    }
+
+    &-wrap * {
+        box-sizing: border-box;
+        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+    }
+
+    &-mask {
+        .mask;
+    }
+
+    &-content {
+        position: relative;
+        background-color: #fff;
+        border: 0;
+        border-radius: @border-radius-base;
+        background-clip: padding-box;
+        box-shadow: 0 4px 12px rgba(0,0,0,.15);
+
+        &-no-mask{
+            pointer-events: auto;
+        }
+        &-drag{
+            position: absolute;
+            .@{modal-prefix-cls}-header{
+                cursor: move;
+            }
+        }
+        &-dragging{
+            -webkit-user-select: none;
+            -moz-user-select: none;
+            user-select: none;
+        }
+    }
+
+    &-header {
+        .content-header;
+    }
+
+    &-close {
+        z-index: 1;
+        .content-close(1px, 31px);
+    }
+
+    &-body {
+        padding: 16px;
+        font-size: 12px;
+        line-height: 1.5;
+    }
+
+    &-footer {
+        border-top: 1px solid @border-color-split;
+        padding: 12px 18px 12px 18px;
+        text-align: right;
+        button + button {
+            margin-left: 8px;
+            margin-bottom: 0;
+        }
+    }
+
+    &-fullscreen{
+        width: 100% !important;
+        top: 0;
+        bottom: 0;
+        position: absolute;
+
+        @modal-header-height: 51px;
+        @modal-footer-height: 61px;
+
+        .@{modal-prefix-cls}-content{
+            width: 100%;
+            border-radius: 0;
+            position: absolute;
+            top: 0;
+            bottom: 0;
+        }
+
+        .@{modal-prefix-cls}-body{
+            width: 100%;
+            overflow: auto;
+            position: absolute;
+            top: @modal-header-height;
+            bottom: @modal-footer-height;
+        }
+        &-no-header .@{modal-prefix-cls}-body{
+            top: 0;
+        }
+        &-no-footer .@{modal-prefix-cls}-body{
+            bottom: 0;
+        }
+        .@{modal-prefix-cls}-footer{
+            position: absolute;
+            width: 100%;
+            bottom: 0;
+        }
+    }
+    &-no-mask{
+        pointer-events: none;
+    }
+}
+
+@media (max-width: @screen-sm) {
+    .@{modal-prefix-cls} {
+        width: auto !important;
+        margin: 10px;
+    }
+    .@{modal-prefix-cls}-fullscreen{
+        width: 100% !important;
+        margin: 0;
+    }
+    .vertical-center-modal {
+        .@{modal-prefix-cls} {
+            flex: 1;
+        }
+    }
+}
+
+.@{confirm-prefix-cls} {
+    padding: 0 4px;
+    &-head {
+        padding: 0 12px 0 0;
+        &-icon {
+            display: inline-block;
+            font-size: 28px;
+            vertical-align: middle;
+            position: relative;
+            top: -2px;
+
+            &-info {
+                color: @primary-color;
+            }
+            &-success {
+                color: @success-color;
+            }
+            &-warning {
+                color: @warning-color;
+            }
+            &-error {
+                color: @error-color;
+            }
+            &-confirm {
+                color: @warning-color;
+            }
+        }
+
+        &-title {
+            display: inline-block;
+            vertical-align: middle;
+            margin-left: 12px;
+            font-size: @font-size-large;
+            color: @title-color;
+            font-weight: 700;
+        }
+    }
+
+    &-body{
+        padding-left: 42px;
+        font-size: @font-size-base;
+        color: @text-color;
+        position: relative;
+
+        &-render{
+            margin: 0;
+            padding: 0;
+        }
+    }
+
+    &-footer{
+        margin-top: 20px;
+        text-align: right;
+
+        button + button {
+            margin-left: 8px;
+            margin-bottom: 0;
+        }
+    }
+}

src/styles/components/notice.less

@@ -0,0 +1,116 @@
+@notice-prefix-cls: ~"@{css-prefix}notice";
+@icon-prefix-cls: ~"@{css-prefix}icon";
+
+@notice-width: 335px;
+@notice-padding: 16px;
+@notice-margin-bottom: 10px;
+
+.@{notice-prefix-cls} {
+    width: @notice-width;
+    margin-right: 24px;
+    position: fixed;
+    z-index: @zindex-notification;
+
+    &-content-with-icon{
+        margin-left: 51px;
+    }
+    &-with-desc&-with-icon &-title{
+        margin-left: 51px;
+    }
+
+    &-notice {
+        margin-bottom: @notice-margin-bottom;
+        padding: @notice-padding;
+        // border: 1px solid @border-color-split;
+        border-radius: @border-radius-small;
+        box-shadow: @shadow-base;
+        background: #fff;
+        line-height: 1;
+        position: relative;
+        overflow: hidden;
+
+        &-close {
+            position: absolute;
+            right: 8px;
+            top: 15px;
+            color: #999;
+            outline: none;
+
+            i{
+                .close-base(-3px);
+            }
+        }
+
+        &-content-with-render{
+            .ivu-notice-desc{
+                display: none;
+            }
+        }
+
+        &-with-desc{
+            .@{notice-prefix-cls}-notice-close{
+                top: 11px;
+            }
+        }
+    }
+
+    &-content-with-render-notitle{
+        margin-left: 26px;
+    }
+
+    &-title {
+        font-size: @font-size-base;
+        line-height: @font-size-base + 3;  //fixed the bug that the bottom of some letters were hidden just like 'g'
+        color: @title-color;
+        padding-right: 10px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+    &-with-desc &-title{
+        font-weight: bold;
+        margin-bottom: 8px;
+    }
+
+    &-desc {
+        font-size: 12px;
+        //color: @legend-color;
+        color: @text-color;
+        text-align: justify;
+        line-height: 1.5;
+    }
+    &-with-desc&-with-icon &-desc{
+        margin-left: 51px;
+    }
+
+    &-with-icon &-title{
+        margin-left: 26px;
+    }
+
+    &-icon {
+        position: absolute;
+        top: -2px;
+        font-size: @font-size-large;
+
+        &-success {
+            color: @success-color;
+        }
+        &-info {
+            color: @primary-color;
+        }
+        &-warning {
+            color: @warning-color;
+        }
+        &-error {
+            color: @error-color;
+        }
+    }
+    &-with-desc &-icon{
+        font-size: 36px;
+        top: -6px;
+    }
+
+    &-custom-content{
+        position: relative;
+    }
+}

src/styles/components/page.less

@@ -0,0 +1,289 @@
+@page-prefix-cls: ~"@{css-prefix}page";
+
+.@{page-prefix-cls} {
+    &:after {
+        content: '';
+        display: block;
+        height: 0;
+        clear: both;
+        overflow: hidden;
+        visibility: hidden;
+    }
+
+    &-item {
+        display: inline-block;
+        //float: left;
+        vertical-align: middle;
+        min-width: @btn-circle-size;
+        height: @btn-circle-size;
+        line-height: @btn-circle-size - 2px;
+        margin-right: 4px;
+        text-align: center;
+        list-style: none;
+        background-color: #fff;
+        user-select: none;
+        cursor: pointer;
+        font-family: Arial;
+        font-weight: 500;
+        border: 1px solid @border-color-base;
+        border-radius: @btn-border-radius;
+        //transition: all @transition-time @ease-in-out;
+        transition: border @transition-time @ease-in-out, color @transition-time @ease-in-out;
+
+        a {
+            font-family: "Monospaced Number";
+            margin: 0 6px;
+            text-decoration: none;
+            color: @text-color;
+            //transition: none;
+        }
+
+        &:hover {
+            border-color: @primary-color;
+            a {
+                color: @primary-color;
+            }
+        }
+
+        &-active {
+            border-color: @primary-color;
+
+            a, &:hover a {
+                color: @primary-color;
+            }
+        }
+    }
+
+    &-item-jump-prev, &-item-jump-next {
+        &:after {
+            content: "•••";
+            display: block;
+            letter-spacing: 1px;
+            color: #ccc;
+            text-align: center;
+        }
+
+        i{
+            display: none;
+        }
+
+        &:hover {
+            &:after{
+                display: none;
+            }
+            i{
+                display: inline;
+            }
+        }
+    }
+
+    &-item-jump-prev:hover {
+        i:after {
+            content: "\F115";
+            margin-left: -8px;
+        }
+    }
+
+    &-item-jump-next:hover {
+        i:after {
+            content: "\F11F";
+            margin-left: -8px;
+        }
+    }
+
+    &-prev{
+        margin-right: 4px;
+    }
+
+    &-item-jump-prev,
+    &-item-jump-next{
+        margin-right: 4px;
+    }
+
+    &-prev,
+    &-next,
+    &-item-jump-prev,
+    &-item-jump-next {
+        display: inline-block;
+        vertical-align: middle;
+        user-select: none;
+        //float: left;
+        min-width: @btn-circle-size;
+        height: @btn-circle-size;
+        line-height: @btn-circle-size - 2px;
+        list-style: none;
+        text-align: center;
+        cursor: pointer;
+        color: #666;
+        font-family: Arial;
+        border: 1px solid @border-color-base;
+        border-radius: @btn-border-radius;
+        transition: all @transition-time @ease-in-out;
+    }
+    &-item-jump-prev,
+    &-item-jump-next{
+        border-color: transparent;
+    }
+
+    &-prev,
+    &-next {
+        background-color: #fff;
+
+        a {
+            color: #666;
+            font-size: 14px;
+        }
+
+        &:hover {
+            border-color: @primary-color;
+
+            a {
+                color: @primary-color;
+            }
+        }
+    }
+
+    &-disabled {
+        cursor: @cursor-disabled;
+        a {
+            color: #ccc;
+        }
+        &:hover {
+            border-color: @border-color-base;
+            a {
+                color: #ccc;
+                cursor: @cursor-disabled;
+            }
+        }
+    }
+
+    &-options {
+        display: inline-block;
+        vertical-align: middle;
+        //float: left;
+        margin-left: 15px;
+        &-sizer {
+            display: inline-block;
+            //float: left;
+            margin-right: 10px;
+        }
+
+        &-elevator {
+            display: inline-block;
+            vertical-align: middle;
+            //float: left;
+            height: @btn-circle-size;
+            line-height: @btn-circle-size;
+
+            input {
+                .input;
+                border-radius: @btn-border-radius;
+                margin: 0 8px;
+                width: 50px;
+            }
+        }
+    }
+
+    &-total {
+        display: inline-block;
+        //float: left;
+        height: @btn-circle-size;
+        line-height: @btn-circle-size;
+        margin-right: 10px;
+    }
+
+    &-simple &-prev,
+    &-simple &-next {
+        margin: 0;
+        border: 0;
+        height: 24px;
+        line-height: normal;
+        font-size: 18px;
+    }
+
+    &-simple &-simple-pager {
+        display: inline-block;
+        //float: left;
+        margin-right: 8px;
+        vertical-align: middle;
+
+        input {
+            width: 30px;
+            height: 24px;
+            margin: 0 8px;
+            padding: 5px 8px;
+            text-align: center;
+            box-sizing: border-box;
+            background-color: #fff;
+            outline: none;
+            border: 1px solid @border-color-base;
+            border-radius: @btn-border-radius;
+            transition: border-color @transition-time @ease-in-out;
+
+            &:hover {
+                border-color: @primary-color;
+            }
+        }
+
+        span{
+            padding: 0 8px 0 2px;
+        }
+    }
+
+    &-custom-text, &-custom-text:hover{
+        border-color: transparent;
+    }
+}
+
+.@{page-prefix-cls} {
+    &.mini &-total {
+        height: @btn-circle-size-small;
+        line-height: @btn-circle-size-small;
+    }
+
+    &.mini &-item {
+        border: 0;
+        margin: 0;
+        min-width: @btn-circle-size-small;
+        height: @btn-circle-size-small;
+        line-height: @btn-circle-size-small;
+        border-radius: @btn-border-radius-small;
+    }
+
+    &.mini &-prev,
+    &.mini &-next {
+        margin: 0;
+        min-width: @btn-circle-size-small;
+        height: @btn-circle-size-small;
+        line-height: @btn-circle-size-small - 2px;
+        border: 0;
+
+        a {
+            i:after {
+                height: @btn-circle-size-small;
+                line-height: @btn-circle-size-small;
+            }
+        }
+    }
+
+    &.mini &-item-jump-prev,
+    &.mini &-item-jump-next {
+        height: @btn-circle-size-small;
+        line-height: @btn-circle-size-small;
+        border: none;
+        margin-right: 0;
+    }
+
+    &.mini &-options {
+        margin-left: 8px;
+        &-elevator {
+            height: @btn-circle-size-small;
+            line-height: @btn-circle-size-small;
+
+            input {
+                .input-small;
+                width: 44px;
+            }
+        }
+    }
+}

src/styles/components/poptip.less

@@ -0,0 +1,155 @@
+@poptip-prefix-cls: ~"@{css-prefix}poptip";
+@poptip-arrow: ~"@{poptip-prefix-cls}-arrow";
+@poptip-max-width: 250px;
+@poptip-arrow-width: 7px;
+@poptip-arrow-outer-width: (@poptip-arrow-width + 1);
+@poptip-distance: @poptip-arrow-width - 1 + 4;
+//@poptip-arrow-color: fadein(@border-color-base, 5%);
+@poptip-arrow-color: hsla(0,0%,85%,.5);
+
+.@{poptip-prefix-cls} {
+    display: inline-block;
+
+    &-rel{
+        display: inline-block;
+        position: relative;
+    }
+
+    &-title {
+        margin: 0;
+        padding: 8px 16px;
+        position: relative;
+
+        &:after{
+            content: '';
+            display: block;
+            height: 1px;
+            position: absolute;
+            left: 8px;
+            right: 8px;
+            bottom: 0;
+            background-color: @border-color-split;
+        }
+
+        &-inner{
+            color: @title-color;
+            font-size: @font-size-base;
+        }
+    }
+
+    &-body{
+        padding: 8px 16px;
+
+        &-content{
+            overflow: auto;
+
+            &-word-wrap{
+                white-space: pre-wrap;
+                text-align: justify;
+            }
+
+            &-inner{
+                color: @text-color;
+            }
+        }
+    }
+
+    &-inner{
+        width: 100%;
+        background-color: #fff;
+        background-clip: padding-box;
+        //border: 1px solid @border-color-split;
+        border-radius: @border-radius-small;
+        box-shadow: @shadow-base;
+        white-space: nowrap;
+    }
+
+    &-popper{
+        min-width: 150px;
+        font-size: @font-size-small;
+        .popper(@poptip-arrow, @poptip-arrow-width, @poptip-distance, @poptip-arrow-color);
+
+        &[x-placement^="top"] .@{poptip-arrow}:after {
+            content: " ";
+            bottom: 1px;
+            margin-left: -@poptip-arrow-width;
+            border-bottom-width: 0;
+            border-top-width: @poptip-arrow-width;
+            border-top-color: #fff;
+        }
+
+        &[x-placement^="right"] .@{poptip-arrow}:after {
+            content: " ";
+            left: 1px;
+            bottom: -@poptip-arrow-width;
+            border-left-width: 0;
+            border-right-width: @poptip-arrow-width;
+            border-right-color: #fff;
+        }
+
+        &[x-placement^="bottom"] .@{poptip-arrow}:after {
+            content: " ";
+            top: 1px;
+            margin-left: -@poptip-arrow-width;
+            border-top-width: 0;
+            border-bottom-width: @poptip-arrow-width;
+            border-bottom-color: #fff;
+        }
+
+        &[x-placement^="left"] .@{poptip-arrow}:after {
+            content: " ";
+            right: 1px;
+            border-right-width: 0;
+            border-left-width: @poptip-arrow-width;
+            border-left-color: #fff;
+            bottom: -@poptip-arrow-width;
+        }
+    }
+
+    &-arrow{
+        &, &:after{
+            display: block;
+            width: 0;
+            height: 0;
+            position: absolute;
+            border-color: transparent;
+            border-style: solid;
+        }
+    }
+    &-arrow {
+        border-width: @poptip-arrow-outer-width;
+    }
+    &-arrow:after{
+        content: "";
+        border-width: @poptip-arrow-width;
+    }
+
+    &-confirm &-popper{
+        max-width: 300px;
+    }
+    &-confirm &-inner{
+        white-space: normal;
+    }
+
+    &-confirm &-body{
+        padding: 16px 16px 8px;
+        .ivu-icon{
+            font-size: 16px;
+            color: @warning-color;
+            line-height: 18px;
+            position: absolute;
+        }
+
+        &-message{
+            padding-left: 20px;
+        }
+    }
+
+    &-confirm &-footer{
+        text-align: right;
+        padding: 8px 16px 16px;
+        button {
+            margin-left: 4px;
+        }
+    }
+}

src/styles/components/progress.less

@@ -0,0 +1,138 @@
+@progress-prefix-cls: ~"@{css-prefix}progress";
+
+.@{progress-prefix-cls} {
+    display: inline-block;
+
+    width: 100%;
+    &-vertical {
+        height: 100%;
+        width: auto;
+    }
+
+    font-size: @font-size-small;
+    position: relative;
+
+    &-outer {
+        display: inline-block;
+        width: 100%;
+        margin-right: 0;
+        padding-right: 0;
+
+        .@{progress-prefix-cls}-show-info & {
+            padding-right: 55px;
+            margin-right: -55px;
+        }
+    }
+    &-vertical &-outer {
+        height: 100%;
+        width: auto;
+    }
+
+    &-inner {
+        display: inline-block;
+        width: 100%;
+        background-color: #f3f3f3;
+        border-radius: 100px;
+        vertical-align: middle;
+        position: relative;
+    }
+    &-vertical &-inner {
+        height: 100%;
+        width: auto;
+
+        & > *, &:after {
+            display: inline-block;
+            vertical-align: bottom;
+        }
+
+        &:after {
+            content: '';
+            height: 100%;
+        }
+    }
+
+    &-bg {
+        border-radius: 100px;
+        background-color: @primary-color;
+        transition: all @transition-time linear;
+        position: relative;
+    }
+    &-success-bg{
+        border-radius: 100px;
+        background-color: @success-color;
+        transition: all @transition-time linear;
+        position: absolute;
+        top: 0;
+        left: 0;
+    }
+
+    &-text {
+        display: inline-block;
+        margin-left: 5px;
+        text-align: left;
+        font-size: 1em;
+        vertical-align: middle;
+    }
+
+    &-active {
+        .@{progress-prefix-cls}-bg:before {
+            content: '';
+            opacity: 0;
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: #fff;
+            border-radius: 10px;
+            animation: ivu-progress-active 2s @ease-in-out infinite;
+        }
+    }
+
+    &-vertical&-active{
+        .@{progress-prefix-cls}-bg:before {
+            top: auto;
+            animation: ivu-progress-active-vertical 2s @ease-in-out infinite;
+        }
+    }
+
+    &-wrong {
+        .@{progress-prefix-cls}-bg {
+            background-color: @error-color;
+        }
+        .@{progress-prefix-cls}-text {
+            color: @error-color;
+        }
+    }
+
+    &-success {
+        .@{progress-prefix-cls}-bg {
+            background-color: @success-color;
+        }
+        .@{progress-prefix-cls}-text {
+            color: @success-color;
+        }
+    }
+}
+
+@keyframes ivu-progress-active {
+    0% {
+        opacity: .3;
+        width: 0;
+    }
+    100% {
+        opacity: 0;
+        width: 100%;
+    }
+}
+
+@keyframes ivu-progress-active-vertical {
+    0% {
+        opacity: .3;
+        height: 0;
+    }
+    100% {
+        opacity: 0;
+        height: 100%;
+    }
+}

src/styles/components/radio.less

@@ -0,0 +1,343 @@
+@radio-prefix-cls: ~"@{css-prefix}radio";
+@radio-group-prefix-cls: ~"@{radio-prefix-cls}-group";
+@radio-inner-prefix-cls: ~"@{radio-prefix-cls}-inner";
+@radio-group-button-prefix-cls: ~"@{radio-group-prefix-cls}-button";
+
+.@{radio-prefix-cls}-focus {
+    box-shadow: 0 0 0 2px fade(@primary-color, 20%);
+    z-index: 1;
+}
+
+.@{radio-group-prefix-cls} {
+    display: inline-block;
+    font-size: @font-size-small;
+    vertical-align: middle;
+    //outline: none;
+    &-vertical{
+        .@{radio-prefix-cls}-wrapper {
+            display: block;
+            height: 30px;
+            line-height: 30px;
+        }
+    }
+}
+
+// 普通状态 - Normal state
+.@{radio-prefix-cls}-wrapper {
+    font-size: @font-size-small;
+    vertical-align: middle;
+    display: inline-block;
+    position: relative;
+    white-space: nowrap;
+    margin-right: 8px;
+    cursor: pointer;
+    &-disabled{
+        cursor: @cursor-disabled;
+    }
+    //outline: none;
+}
+
+.@{radio-prefix-cls} {
+    display: inline-block;
+    margin-right: 4px;
+    white-space: nowrap;
+    //outline: none;
+    position: relative;
+    line-height: 1;
+    vertical-align: middle;
+    cursor: pointer;
+    &:hover {
+        .@{radio-inner-prefix-cls} {
+            border-color: #bcbcbc;
+        }
+    }
+    &-inner {
+        display: inline-block;
+        width: 14px;
+        height: 14px;
+        position: relative;
+        top: 0;
+        left: 0;
+        background-color: #fff;
+        border: 1px solid @border-color-base;
+        border-radius: 50%;
+        transition: all @transition-time @ease-in-out;
+
+        &:after {
+            position: absolute;
+            width: 8px;
+            height: 8px;
+            left: 2px;
+            top: 2px;
+            border-radius: @border-radius-base;
+            display: table;
+            border-top: 0;
+            border-left: 0;
+            content: ' ';
+            background-color: @primary-color;
+            opacity: 0;
+            transition: all @transition-time @ease-in-out;
+            transform: scale(0);
+        }
+    }
+    &-large{
+        font-size: @font-size-base;
+        & .@{radio-inner-prefix-cls}{
+            width: 16px;
+            height: 16px;
+            &:after{
+                width: 10px;
+                height: 10px;
+            }
+        }
+        &.@{radio-prefix-cls}-wrapper, & .@{radio-prefix-cls}-wrapper{
+            font-size: @font-size-base;
+        }
+    }
+    &-small{
+        & .@{radio-inner-prefix-cls}{
+            width: 12px;
+            height: 12px;
+            &:after{
+                width: 6px;
+                height: 6px;
+            }
+        }
+    }
+
+    &-input {
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        z-index: 1;
+        opacity: 0;
+        cursor: pointer;
+    }
+}
+
+// 选中状态 - Selected state
+.@{radio-prefix-cls}-checked {
+    .@{radio-inner-prefix-cls} {
+        border-color: @primary-color;
+        &:after {
+            opacity: 1;
+            transform: scale(1);
+            transition: all @transition-time @ease-in-out;
+        }
+    }
+    &:hover {
+        .@{radio-inner-prefix-cls} {
+            border-color: @primary-color;
+        }
+    }
+}
+
+.@{radio-prefix-cls}-disabled {
+    cursor: @cursor-disabled;
+    .@{radio-prefix-cls}-input {
+        cursor: @cursor-disabled;
+    }
+
+    &:hover {
+        .@{radio-inner-prefix-cls} {
+            border-color: @border-color-base;
+        }
+    }
+    .@{radio-inner-prefix-cls} {
+        border-color: @border-color-base;
+        background-color: #f3f3f3;
+        &:after {
+            background-color: #cccccc;
+        }
+    }
+
+    .@{radio-prefix-cls}-disabled + span {
+        color: #ccc;
+    }
+}
+
+span.@{radio-prefix-cls} + * {
+    margin-left: 2px;
+    margin-right: 2px;
+}
+
+// 按钮样式 - Button style
+.@{radio-group-button-prefix-cls} {
+    font-size: 0;
+    -webkit-text-size-adjust:none;
+
+    .@{radio-prefix-cls}{
+        width: 0;
+        margin-right: 0;
+    }
+
+    .@{radio-prefix-cls}-wrapper {
+        display: inline-block;
+        height: @btn-circle-size;
+        line-height: @btn-circle-size - 2px;
+        margin: 0;
+        padding: 0 16px - 1px;
+        font-size: @font-size-small;
+        color: @btn-default-color;
+        transition: all @transition-time ease-in-out;
+        cursor: pointer;
+        border: 1px solid @border-color-base;
+        border-left: 0;
+        background: #fff;
+        position: relative;
+
+        > span {
+            margin-left: 0;
+        }
+
+        &:before, &:after {
+            content: '';
+            display: block;
+            position: absolute;
+            width: 1px;
+            height: 100%;
+            left: -1px;
+            top: 0;
+            background: @border-color-base;
+            //visibility: hidden;
+            transition: all @transition-time ease-in-out;
+        }
+
+        &:after{
+            height: @btn-circle-size + 4px;
+            left: -1px;
+            top: -3px;
+            background: fade(@primary-color, 20%);
+            opacity: 0;
+        }
+
+        &:first-child {
+            border-radius: @btn-border-radius 0 0 @btn-border-radius;
+            border-left: 1px solid @border-color-base;
+            &:before, &:after {
+                display: none;
+            }
+        }
+
+        &:last-child {
+            border-radius: 0 @btn-border-radius @btn-border-radius 0;
+        }
+
+        &:first-child:last-child {
+            border-radius: @btn-border-radius;
+        }
+
+        &:hover {
+            position: relative;
+            color: @primary-color;
+            & .@{radio-prefix-cls} {
+                background-color: black;
+            }
+        }
+
+        .@{radio-prefix-cls}-inner,
+        input {
+            opacity: 0;
+            width: 0;
+            height: 0;
+        }
+
+        &-checked {
+            background: #fff;
+            border-color: @primary-color;
+            color: @primary-color;
+            box-shadow: -1px 0 0 0 @primary-color;
+            z-index: 1;
+
+            &:before{
+                background: @primary-color;
+                opacity: 0.1;
+            }
+
+            &.@{radio-prefix-cls}-focus{
+                box-shadow: -1px 0 0 0 @primary-color, 0 0 0 2px fade(@primary-color, 20%);
+                transition: all @transition-time ease-in-out;
+                &:after{
+                    left: -3px;
+                    top: -3px;
+                    opacity: 1;
+                    background: fade(@primary-color, 20%);
+                }
+                &:first-child{
+                    box-shadow: 0 0 0 2px fade(@primary-color, 20%);
+                }
+            }
+
+            &:first-child {
+                border-color: @primary-color;
+                box-shadow: none;
+            }
+
+            &:hover {
+                border-color: tint(@primary-color, 20%);
+                //box-shadow: -1px 0 0 0 tint(@primary-color, 20%);
+                color: tint(@primary-color, 20%);
+            }
+
+            &:active {
+                border-color: shade(@primary-color, 5%);
+                //box-shadow: -1px 0 0 0 shade(@primary-color, 5%);
+                color: shade(@primary-color, 5%);
+            }
+        }
+
+        &-disabled {
+            border-color: @border-color-base;
+            background-color: @background-color-base;
+            cursor: @cursor-disabled;
+            color: #ccc;
+
+            &:first-child,
+            &:hover {
+                border-color: @border-color-base;
+                background-color: @background-color-base;
+                color: #ccc;
+            }
+            &:first-child {
+                border-left-color: @border-color-base;
+            }
+        }
+
+        &-disabled.@{radio-prefix-cls}-wrapper-checked {
+            color: #fff;
+            background-color: #e6e6e6;
+            border-color: @border-color-base;
+            box-shadow: none!important;
+        }
+    }
+}
+
+.@{radio-group-button-prefix-cls}.@{radio-group-prefix-cls}-large .@{radio-prefix-cls}-wrapper{
+    height: @btn-circle-size-large;
+    line-height: @btn-circle-size-large - 2px;
+    font-size: @font-size-base;
+    &:after{
+        height: @btn-circle-size-large + 4px;
+    }
+}
+
+.@{radio-group-button-prefix-cls}.@{radio-group-prefix-cls}-small .@{radio-prefix-cls}-wrapper{
+    height: @btn-circle-size-small;
+    line-height: @btn-circle-size-small - 2px;
+    padding: 0 12px;
+    font-size: @font-size-small;
+
+    &:after{
+        height: @btn-circle-size-small + 4px;
+    }
+
+    &:first-child {
+        border-radius: @btn-border-radius-small 0 0 @btn-border-radius-small;
+    }
+    &:last-child {
+        border-radius: 0 @btn-border-radius-small @btn-border-radius-small 0;
+    }
+}
+

src/styles/components/rate.less

@@ -0,0 +1,117 @@
+@rate-prefix-cls: ~"@{css-prefix}rate";
+
+.@{rate-prefix-cls} {
+    display: inline-block;
+    margin: 0;
+    padding: 0;
+    font-size: 20px;
+    vertical-align: middle;
+    font-weight: normal;
+    font-style: normal;
+
+    &-disabled &-star {
+        &:before,
+        &-content:before {
+            cursor: default;
+        }
+        &:hover {
+            transform: scale(1);
+        }
+    }
+
+    &-star-full, &-star-zero {
+        position: relative;
+    }
+    &-star-first {
+        position: absolute;
+        left: 0;
+        top: 0;
+        width: 50%;
+        height: 100%;
+        overflow: hidden;
+        opacity: 0;
+    }
+
+    &-star-first, &-star-second {
+        user-select: none;
+        transition: all .3s ease;
+        color: #e9e9e9;
+        cursor: pointer;
+    }
+
+    &-star-chart {
+        display: inline-block;
+        margin: 0;
+        padding: 0;
+        margin-right: 8px;
+        position: relative;
+        font-family: 'Ionicons';
+        transition: all 0.3s ease;
+
+        &:hover {
+            transform: scale(1.1);
+
+            //&-star-first, &-star-second {
+            //    color: @rate-star-color;
+            //}
+        }
+    }
+    &-star-chart&-star-full &-star-first, &-star-chart&-star-full &-star-second{
+        color: @rate-star-color;
+    }
+    &-star-chart&-star-half &-star-first{
+        opacity: 1;
+        color: @rate-star-color;
+    }
+    
+    &-star {
+        display: inline-block;
+        margin: 0;
+        padding: 0;
+        margin-right: 8px;
+        position: relative;
+        font-family: 'Ionicons';
+        transition: all 0.3s ease;
+
+        &:hover {
+            transform: scale(1.1);
+        }
+
+        &:before,
+        &-content:before {
+            color: #e9e9e9;
+            cursor: pointer;
+            content: "\F2BF";
+            transition: all @transition-time @ease-in-out;
+            display: block;
+        }
+
+        &-content {
+            position: absolute;
+            left: 0;
+            top: 0;
+            width: 50%;
+            height: 100%;
+            overflow: hidden;
+            &:before {
+                color: transparent;
+            }
+        }
+
+        &-half &-content:before,
+        &-full:before {
+            color: @rate-star-color;
+        }
+
+        &-half:hover &-content:before,
+        &-full:hover:before {
+            color: tint(@rate-star-color, 20%);
+        }
+    }
+    &-text {
+        margin-left: 8px;
+        vertical-align: middle;
+        display: inline-block;
+        font-size: @font-size-small;
+    }
+}

src/styles/components/scroll.less

@@ -0,0 +1,67 @@
+@scroll-prefix-cls: ~"@{css-prefix}scroll";
+
+.@{scroll-prefix-cls} {
+	&-wrapper {
+		width: auto;
+		margin: 0 auto;
+		position: relative;
+		outline: none;
+	}
+
+	&-container {
+		overflow-y: scroll;
+	}
+
+	&-content {
+		opacity: 1;
+		transition: opacity 0.5s;
+	}
+
+	&-content-loading {
+		opacity: 0.5;
+	}
+
+	&-loader {
+		text-align: center;
+		padding: 0;
+		transition: padding 0.5s;
+	}
+}
+
+.@{scroll-prefix-cls}-loader-wrapper {
+	padding: 5px 0;
+	height: 0;
+	background-color: inherit;
+	transform: scale(0);
+	transition: opacity .3s, transform .5s, height .5s;
+
+	&-active {
+		height: 40px;
+		transform: scale(1);
+	}
+
+	@keyframes ani-demo-spin {
+		from {
+			transform: rotate(0deg);
+		}
+		50% {
+			transform: rotate(180deg);
+		}
+		to {
+			transform: rotate(360deg);
+		}
+	}
+
+	.@{scroll-prefix-cls}-spinner {
+		position: relative;
+	}
+
+	.@{scroll-prefix-cls}-spinner-icon {
+		animation: ani-demo-spin 1s linear infinite;
+	}
+}
+
+@media (max-width: @screen-sm) {
+	.@{scroll-prefix-cls} {
+	}
+}

src/styles/components/select-dropdown.less

@@ -0,0 +1,30 @@
+@select-dropdown-prefix-cls: ~"@{css-prefix}select-dropdown";
+@transfer-no-max-height: ~"@{css-prefix}transfer-no-max-height";
+
+.@{select-dropdown-prefix-cls} {
+    width: inherit;
+    max-height: 200px;
+    overflow: auto;
+    margin: 5px 0;
+    padding: 5px 0;
+    background-color: #fff;
+    box-sizing: border-box;
+    //border: 1px solid @border-color-split;
+    border-radius: @btn-border-radius;
+    //box-shadow: 0 1px 3px rgba(0,0,0,.2);
+    box-shadow: @shadow-base;
+    position: absolute;
+    z-index: @zindex-select;
+    &-transfer{
+        z-index: @zindex-transfer;
+        width: auto;
+    }
+    &.@{transfer-no-max-height} {
+        max-height: none;
+    }
+}
+.@{modal-prefix-cls} {
+    .@{select-dropdown-prefix-cls} {
+        position: absolute !important;
+    }
+}

src/styles/components/select.less

@@ -0,0 +1,343 @@
+@select-prefix-cls: ~"@{css-prefix}select";
+@select-item-prefix-cls: ~"@{css-prefix}select-item";
+@select-group-prefix-cls: ~"@{css-prefix}select-group";
+
+.@{select-prefix-cls} {
+    display: inline-block;
+    width: 100%;
+    box-sizing: border-box;
+    vertical-align: middle;
+    color: @text-color;
+    font-size: @font-size-base;
+    //position: relative;
+    line-height: normal;
+
+    &-selection {
+        display: block;
+        box-sizing: border-box;
+        outline: none;
+        user-select: none;
+        cursor: pointer;
+        position: relative;
+
+        background-color: #fff;
+        border-radius: @btn-border-radius;
+        border: 1px solid @border-color-base;
+        transition: all @transition-time @ease-in-out;
+
+        &:hover, &-focused {
+            .hover();
+            .@{select-prefix-cls}-arrow {
+                display: inline-block;
+            }
+        }
+    }
+
+    &-arrow {
+        .inner-arrow();
+    }
+
+    &-visible{
+        .@{select-prefix-cls}-selection{
+            .active();
+        }
+
+        .@{select-prefix-cls}-arrow {
+            transform: translateY(-50%) rotate(180deg);
+            display: inline-block;
+        }
+    }
+
+    &-disabled {
+        .@{select-prefix-cls}-selection {
+            .disabled();
+
+            .@{select-prefix-cls}-arrow {
+                color: @slider-disabled-color;
+            }
+
+            &:hover {
+                border-color: @border-color-base;
+                box-shadow: none;
+
+                .@{select-prefix-cls}-arrow {
+                    display: inline-block;
+                }
+            }
+        }
+    }
+
+    &-single &-selection{
+        height: @input-height-base;
+        position: relative;
+
+        .@{select-prefix-cls}-placeholder{
+            color: @input-placeholder-color;
+        }
+
+        .@{select-prefix-cls}-placeholder, .@{select-prefix-cls}-selected-value{
+            display: block;
+            height: @input-height-base - 2px;
+            line-height: @input-height-base - 2px;
+            font-size: @font-size-small;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            padding-left: 8px;
+            padding-right: 24px;
+        }
+    }
+
+    &-multiple &-selection{
+        padding: 0 24px 0 4px;
+        //min-height: @input-height-base;
+
+        .@{select-prefix-cls}-placeholder{
+            display: block;
+            height: @input-height-base - 2px;
+            line-height: @input-height-base - 2px;
+            color: @input-placeholder-color;
+            font-size: @font-size-small;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            padding-left: 4px;
+            padding-right: 22px;
+        }
+    }
+
+    &-large&-single &-selection{
+        height: @input-height-large;
+
+        .@{select-prefix-cls}-placeholder, .@{select-prefix-cls}-selected-value{
+            height: @input-height-large - 2px;
+            line-height: @input-height-large - 2px;
+            font-size: @font-size-base;
+        }
+    }
+
+    &-large&-multiple &-selection{
+        min-height: @input-height-large;
+
+        .@{select-prefix-cls}-placeholder, .@{select-prefix-cls}-selected-value{
+            min-height: @input-height-large - 2px;
+            line-height: @input-height-large - 2px;
+            font-size: @font-size-base;
+        }
+    }
+
+    &-small&-single &-selection{
+        height: @input-height-small;
+        border-radius: @btn-border-radius-small;
+
+        .@{select-prefix-cls}-placeholder, .@{select-prefix-cls}-selected-value{
+            height: @input-height-small - 2px;
+            line-height: @input-height-small - 2px;
+        }
+    }
+
+    &-small&-multiple &-selection{
+        min-height: @input-height-small;
+        border-radius: @btn-border-radius-small;
+
+        .@{select-prefix-cls}-placeholder, .@{select-prefix-cls}-selected-value{
+            height: auto;
+            min-height: @input-height-small - 2px;
+            line-height: @input-height-small - 2px;
+        }
+    }
+
+    // input
+    &-input{
+        display: inline-block;
+        height: @input-height-base;
+        line-height: @input-height-base;
+        padding: 0 24px 0 8px;
+        font-size: @font-size-small;
+        outline: none;
+        border: none;
+        box-sizing: border-box;
+        color: @input-color;
+        background-color: transparent;
+        position: relative;
+        cursor: pointer;
+        .placeholder();
+
+        &[disabled]{
+            cursor: @cursor-disabled;
+            color: #ccc;
+            -webkit-text-fill-color: #ccc;  // #5249
+        }
+    }
+
+    &-single &-input{
+        width: 100%;
+    }
+
+    &-large &-input{
+        font-size: @font-size-base;
+        height: @input-height-large;
+    }
+
+    &-small &-input{
+        height: @input-height-small - 2px;
+        line-height: @input-height-small - 2px;
+    }
+
+    &-multiple &-input{
+        height: @input-height-base - 2px;
+        line-height: @input-height-base;
+        padding: 0 0 0 4px;
+    }
+
+    &-not-found{
+        text-align: center;
+        color: @btn-disable-color;
+        li:not([class^=ivu-]){
+            margin-bottom: 0;
+        }
+    }
+    &-loading{
+        text-align: center;
+        color: @btn-disable-color;
+    }
+
+    &-multiple .@{css-prefix}tag{
+        height: 24px;
+        line-height: 22px;
+        margin: 3px 4px 3px 0;
+        max-width: 99%;
+        position: relative;
+        span:not(.ivu-select-max-tag){
+            display: block;
+            margin-right: 14px;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+        }
+        i{
+            display: block;
+            position: absolute;
+            right: 4px;
+            top: 4px;
+        }
+    }
+
+    &-large&-multiple .@{css-prefix}tag{
+        height: 28px;
+        line-height: 26px;
+        font-size: @font-size-base;
+        i{
+            top: 6px;
+        }
+    }
+
+    &-small&-multiple .@{css-prefix}tag{
+        height: 17px;
+        line-height: 15px;
+        font-size: @font-size-small;
+        padding: 0 6px;
+        margin: 3px 4px 2px 0;
+        span{
+            margin-right: 14px;
+        }
+        i{
+            top: 1px;
+            right: 2px;
+        }
+    }
+
+    &-dropdown-list {
+        //display: inline-block;
+        min-width: 100%;
+        list-style: none;
+    }
+
+    & &-dropdown{
+        width: auto;
+    }
+
+    &-prefix{
+        display: inline-block;
+        vertical-align: middle;
+        i{
+            vertical-align: top;
+        }
+    }
+    &-head-with-prefix{
+        display: inline-block !important;
+        vertical-align: middle;
+    }
+    &-single &-prefix{
+        padding-left: 4px;
+    }
+    &-single &-head-with-prefix, &-multiple &-head-with-prefix{
+        padding-left: 0 !important;
+    }
+
+    &-head-flex{
+        display: flex;
+        align-items: center;
+    }
+
+    &-multiple &-head-flex &-prefix{
+        margin-right: 4px;
+    }
+}
+
+.select-item(@select-prefix-cls, @select-item-prefix-cls);
+
+.@{select-prefix-cls}-multiple .@{select-item-prefix-cls} {
+    position: relative;
+    &-selected{
+        color: @selected-color;
+        background: #fff;
+    }
+    &-focus,&-selected:hover{
+        background: @background-color-select-hover;
+    }
+
+    &-selected&-focus {
+        color: shade(@selected-color, 10%);
+        background: #fff;
+    }
+
+    &-selected:after{
+        .ivu-icon();
+        //float: right;
+        font-size: 24px;
+        content: '\F171';
+        color: @selected-color;
+        position: absolute;
+        top: 2px;
+        right: 8px;
+    }
+}
+
+.@{select-group-prefix-cls} {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+
+    &-title {
+        padding-left: 8px;
+        font-size: 12px;
+        color: @legend-color;
+        height: 30px;
+        line-height: 30px;
+    }
+}
+
+.@{form-item-prefix-cls}-error{
+    .@{select-prefix-cls}{
+        &-selection{
+            border: 1px solid @error-color;
+        }
+        &-arrow{
+            color: @error-color;
+        }
+        &-visible .@{select-prefix-cls}-selection{
+            .active-error;
+        }
+    }
+}

src/styles/components/slider.less

@@ -0,0 +1,113 @@
+@slider-prefix-cls: ~"@{css-prefix}slider";
+
+.@{slider-prefix-cls} {
+    line-height: normal;
+    &-wrap{
+        width: 100%;
+        height: @slider-height;
+        margin: @slider-margin;
+        background-color: @border-color-split;
+        border-radius: @btn-border-radius-small;
+        vertical-align: middle;
+        position: relative;
+        cursor: pointer;
+    }
+
+    &-button-wrap{
+        .square(@slider-button-wrap-size);
+        text-align: center;
+        background-color: transparent;
+        position: absolute;
+        top: @slider-button-wrap-offset;
+        transform: translateX(-50%);
+
+        .@{tooltip-prefix-cls} {
+            display: block;
+            user-select: none;
+        }
+    }
+
+    &-button{
+        width: 12px;
+        height: 12px;
+        border: 2px solid @slider-color;
+        border-radius: 50%;
+        background-color: #fff;
+        transition: all @transition-time linear;
+        outline: 0;
+
+        &:focus,
+        &:hover,
+        &-dragging
+        {
+            border-color: @primary-color;
+            transform: scale(1.5);
+        }
+
+        &:hover{
+            cursor: grab;
+        }
+        &-dragging,
+        &-dragging:hover
+        {
+            cursor: grabbing;
+        }
+    }
+
+    &-bar{
+        height: @slider-height;
+        background: @slider-color;
+        border-radius: @btn-border-radius-small;
+        position: absolute;
+    }
+
+    &-stop{
+        position: absolute;
+        .square(@slider-height);
+        border-radius: 50%;
+        background-color: @slider-disabled-color;
+        transform: translateX(-50%);
+    }
+}
+
+.@{slider-prefix-cls}-disabled{
+    cursor: @cursor-disabled;
+
+    .@{slider-prefix-cls}-wrap{
+        background-color: @slider-disabled-color;
+        cursor: @cursor-disabled;
+    }
+    .@{slider-prefix-cls}-bar{
+        background-color: @slider-disabled-color;
+    }
+
+    .@{slider-prefix-cls}-button{
+        border-color: @slider-disabled-color;
+
+        &:hover,
+        &-dragging
+        {
+            border-color: @slider-disabled-color;
+        }
+        &:hover{
+            cursor: @cursor-disabled;
+        }
+        &-dragging,
+        &-dragging:hover
+        {
+            cursor: @cursor-disabled;
+        }
+    }
+}
+
+.@{slider-prefix-cls}-input{
+    .@{slider-prefix-cls}-wrap{
+        width: auto;
+        margin-right: 100px;
+    }
+
+    .@{input-number-prefix-cls}{
+        float: right;
+        margin-top: -14px;
+    }
+}

src/styles/components/spin.less

@@ -0,0 +1,87 @@
+@spin-prefix-cls: ~"@{css-prefix}spin";
+@spin-dot-size-small: 12px;
+@spin-dot-size: 20px;
+@spin-dot-size-large: 32px;
+
+.@{spin-prefix-cls} {
+    color: @primary-color;
+    vertical-align: middle;
+    text-align: center;
+
+    &-dot {
+        position: relative;
+        display: block;
+        border-radius: 50%;
+        background-color: @primary-color;
+        .square(@spin-dot-size);
+        animation: ani-spin-bounce 1s 0s ease-in-out infinite;
+    }
+
+    &-large &-dot {
+        .square(@spin-dot-size-large);
+    }
+
+    &-small &-dot {
+        .square(@spin-dot-size-small);
+    }
+
+    &-fix {
+        position: absolute;
+        top: 0;
+        left: 0;
+        z-index: @zindex-spin;
+        .square(100%);
+        background-color: rgba(255,255,255,.9);
+    }
+    &-fullscreen{
+        z-index: @zindex-spin-fullscreen;
+        &-wrapper{
+            position: fixed;
+            top: 0;
+            right: 0;
+            bottom: 0;
+            left: 0;
+        }
+    }
+
+    &-fix &-main {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        -ms-transform: translate(-50%, -50%);
+        transform: translate(-50%, -50%);
+    }
+
+    &-fix &-dot {
+        display: inline-block;
+    }
+
+    &-text,
+    &-show-text &-dot {
+        display: none;
+    }
+
+    &-show-text &-text {
+        display: block;
+    }
+}
+
+// use in Table loading, Table right border is not included in .ivu-table-wrapper, so fix it
+.@{table-prefix-cls}-wrapper{
+    > .@{spin-prefix-cls}-fix{
+        border: 1px solid @border-color-base;
+        border-top: 0;
+        border-left: 0;
+    }
+}
+
+@keyframes ani-spin-bounce {
+    0% {
+        transform: scale(0);
+    }
+
+    100% {
+        transform: scale(1);
+        opacity: 0;
+    }
+}

src/styles/components/split.less

@@ -0,0 +1,123 @@
+@split-prefix-cls: ~"@{css-prefix}split";
+@box-shadow: 0 0 4px 0 rgba(28, 36, 56, 0.4);
+@trigger-bar-background: rgba(23, 35, 61, 0.25);
+@trigger-background: #f8f8f9;
+@trigger-width: 6px;
+@trigger-bar-width: 4px;
+@trigger-bar-offset: (@trigger-width - @trigger-bar-width) / 2;
+@trigger-bar-interval: 3px;
+@trigger-bar-weight: 1px;
+@trigger-bar-con-height: (@trigger-bar-weight + @trigger-bar-interval) * 8;
+
+.@{split-prefix-cls} {
+    &-wrapper {
+        position: relative;
+        width: 100%;
+        height: 100%;
+    }
+    &-pane {
+        position: absolute;
+        &.left-pane, &.right-pane {
+            top: 0;
+            bottom: 0;
+        }
+        &.left-pane {
+            left: 0;
+        }
+        &.right-pane {
+            right: 0;
+        }
+        &.top-pane, &.bottom-pane {
+            left: 0;
+            right: 0;
+        }
+        &.top-pane {
+            top: 0;
+        }
+        &.bottom-pane {
+            bottom: 0;
+        }
+
+        &-moving{
+            -webkit-user-select: none;
+            -moz-user-select: none;
+            -ms-user-select: none;
+            user-select: none;
+        }
+    }
+    &-trigger {
+        border: 1px solid @border-color-base;
+        &-con {
+            position: absolute;
+            transform: translate(-50%, -50%);
+            z-index: 10;
+        }
+        &-bar-con {
+            position: absolute;
+            overflow: hidden;
+            &.vertical {
+                left: @trigger-bar-offset;
+                top: 50%;
+                height: @trigger-bar-con-height;
+                transform: translate(0, -50%);
+            }
+            &.horizontal {
+                left: 50%;
+                top: @trigger-bar-offset;
+                width: @trigger-bar-con-height;
+                transform: translate(-50%, 0);
+            }
+        }
+        &-vertical {
+            width: @trigger-width;
+            height: 100%;
+            background: @trigger-background;
+            border-top: none;
+            border-bottom: none;
+            cursor: col-resize;
+            .@{split-prefix-cls}-trigger-bar {
+                width: @trigger-bar-width;
+                height: 1px;
+                background: @trigger-bar-background;
+                float: left;
+                margin-top: @trigger-bar-interval;
+            }
+        }
+        &-horizontal {
+            height: @trigger-width;
+            width: 100%;
+            background: @trigger-background;
+            border-left: none;
+            border-right: none;
+            cursor: row-resize;
+            .@{split-prefix-cls}-trigger-bar {
+                height: @trigger-bar-width;
+                width: 1px;
+                background: @trigger-bar-background;
+                float: left;
+                margin-right: @trigger-bar-interval;
+            }
+        }
+    }
+    &-horizontal {
+        .@{split-prefix-cls}-trigger-con {
+            top: 50%;
+            height: 100%;
+            width: 0;
+        }
+    }
+    &-vertical {
+        .@{split-prefix-cls}-trigger-con {
+            left: 50%;
+            height: 0;
+            width: 100%;
+        }
+    }
+    .no-select {
+        -webkit-touch-callout: none;
+        -webkit-user-select: none;
+        -moz-user-select: none;
+        -ms-user-select: none;
+        user-select: none;
+    }
+}

src/styles/components/steps.less

@@ -0,0 +1,353 @@
+@steps-prefix-cls: ~"@{css-prefix}steps";
+@steps-wait-icon-color: #ccc;
+@steps-wait-title-color: #999;
+@steps-wait-description-color: @steps-wait-title-color;
+@steps-wait-tail-color: @border-color-split;
+@steps-title-color: #666;
+
+.@{steps-prefix-cls} {
+    font-size: 0;
+    width: 100%;
+    line-height: 1.5;
+
+    &-item{
+        display: inline-block;
+        position: relative;
+        vertical-align: top;
+
+        &.@{steps-prefix-cls}-status-wait{
+            .@{steps-prefix-cls}-head-inner {
+                background-color: #fff;
+                > .@{steps-prefix-cls}-icon, span {
+                    color: @steps-wait-icon-color;
+                }
+            }
+            .@{steps-prefix-cls}-title {
+                color: @steps-wait-title-color;
+            }
+            .@{steps-prefix-cls}-content {
+                color: @steps-wait-description-color;
+            }
+            .@{steps-prefix-cls}-tail > i {
+                background-color: @steps-wait-tail-color;
+            }
+        }
+        &.@{steps-prefix-cls}-status-process {
+            .@{steps-prefix-cls}-head-inner {
+                border-color: @primary-color;
+                background-color: @primary-color;
+                > .@{steps-prefix-cls}-icon, span {
+                    color: #fff;
+                }
+            }
+            .@{steps-prefix-cls}-title {
+                color: @steps-title-color;
+            }
+            .@{steps-prefix-cls}-content {
+                color: @steps-title-color;
+            }
+            .@{steps-prefix-cls}-tail > i {
+                background-color: @border-color-split;
+            }
+        }
+        &.@{steps-prefix-cls}-status-finish {
+            .@{steps-prefix-cls}-head-inner {
+                background-color: #fff;
+                border-color: @primary-color;
+                > .@{steps-prefix-cls}-icon, span {
+                    color: @primary-color;
+                }
+            }
+            .@{steps-prefix-cls}-tail > i:after {
+                width: 100%;
+                background: @primary-color;
+                transition: all @transition-time @ease-in-out;
+                opacity: 1;
+            }
+            .@{steps-prefix-cls}-title {
+                color: @steps-wait-title-color;
+            }
+            .@{steps-prefix-cls}-content {
+                color: @steps-wait-description-color;
+            }
+        }
+
+        &.@{steps-prefix-cls}-status-error {
+            .@{steps-prefix-cls}-head-inner {
+                background-color: #fff;
+                border-color: @error-color;
+                > .@{steps-prefix-cls}-icon {
+                    color: @error-color;
+                }
+            }
+            .@{steps-prefix-cls}-title {
+                color: @error-color;
+            }
+            .@{steps-prefix-cls}-content {
+                color: @error-color;
+            }
+            .@{steps-prefix-cls}-tail > i {
+                background-color: @border-color-split;
+            }
+        }
+
+        &.@{steps-prefix-cls}-next-error {
+            .@{steps-prefix-cls}-tail > i,
+            .@{steps-prefix-cls}-tail > i:after {
+                background-color: @error-color;
+            }
+        }
+
+        &.@{steps-prefix-cls}-custom {
+            .@{steps-prefix-cls}-head-inner {
+                background: none;
+                border: 0;
+                width: auto;
+                height: auto;
+                > .@{steps-prefix-cls}-icon {
+                    font-size: 20px;
+                    top: 2px;
+                    width: 20px;
+                    height: 20px;
+                }
+            }
+            &.@{steps-prefix-cls}-status-process {
+                .@{steps-prefix-cls}-head-inner > .@{steps-prefix-cls}-icon {
+                    color: @primary-color;
+                }
+            }
+        }
+    }
+    &-item:last-child &-tail{
+        display: none;
+    }
+
+    .@{steps-prefix-cls}-head,
+    .@{steps-prefix-cls}-main {
+        position: relative;
+        display: inline-block;
+        vertical-align: top;
+    }
+    .@{steps-prefix-cls}-head {
+        background: #fff;
+    }
+
+    .@{steps-prefix-cls}-head-inner {
+        display: block;
+        width: 26px;
+        height: 26px;
+        line-height: 24px;
+        margin-right: 8px;
+        text-align: center;
+        border: 1px solid @steps-wait-icon-color;
+        border-radius: 50%;
+        font-size: 14px;
+        transition: background-color @transition-time @ease-in-out;
+
+        > .@{steps-prefix-cls}-icon {
+            line-height: 1;
+            position: relative;
+
+            &.ivu-icon {
+                font-size: 24px;
+                &-ios-checkmark-empty,
+                &-ios-close-empty {
+                    font-weight: bold;
+                }
+            }
+        }
+    }
+    .@{steps-prefix-cls}-main {
+        margin-top: 2.5px;
+        display: inline;
+    }
+    .@{steps-prefix-cls}-custom .@{steps-prefix-cls}-title{
+        margin-top: 2.5px;
+    }
+
+    .@{steps-prefix-cls}-title {
+        display: inline-block;
+        margin-bottom: 4px;
+        padding-right: 10px;
+        font-size: 14px;
+        font-weight: bold;
+        color: #666;
+        background: #fff;
+
+        > a:first-child:last-child {
+            color: #666;
+        }
+    }
+    .@{steps-prefix-cls}-item-last {
+        .@{steps-prefix-cls}-title {
+            padding-right: 0;
+            width: 100%;
+        }
+    }
+    .@{steps-prefix-cls}-content {
+        font-size: 12px;
+        color: #999;
+    }
+    .@{steps-prefix-cls}-tail {
+        width: 100%;
+        padding: 0 10px;
+        position: absolute;
+        left: 0;
+        top: 13px;
+        > i {
+            display: inline-block;
+            width: 100%;
+            height: 1px;
+            vertical-align: top;
+            background: @border-color-split;
+            border-radius: 1px;
+            position: relative;
+            &:after {
+                content: '';
+                width: 0;
+                height: 100%;
+                background: @border-color-split;
+                opacity: 0;
+                position: absolute;
+                top: 0;
+            }
+        }
+    }
+
+    &.@{steps-prefix-cls}-small {
+        .@{steps-prefix-cls}-head-inner {
+            width: 18px;
+            height: 18px;
+            line-height: 16px;
+            margin-right: 10px;
+            text-align: center;
+            border-radius: 50%;
+            font-size: 12px;
+
+            > .@{steps-prefix-cls}-icon.ivu-icon {
+                font-size: 16px;
+                top: 0;
+            }
+        }
+        .@{steps-prefix-cls}-main {
+            margin-top: 0;
+        }
+        .@{steps-prefix-cls}-title {
+            margin-bottom: 4px;
+            margin-top: 0;
+            color: #666;
+            font-size: 12px;
+            font-weight: bold;
+        }
+        .@{steps-prefix-cls}-content {
+            font-size: 12px;
+            color: #999;
+            padding-left: 30px;
+        }
+        .@{steps-prefix-cls}-tail {
+            top: 8px;
+            padding: 0 8px;
+            > i {
+                height: 1px;
+                width: 100%;
+                border-radius: 1px;
+            }
+        }
+    }
+
+    &.@{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;
+        border-radius: 0;
+        border: 0;
+        background: none;
+    }
+}
+
+.@{steps-prefix-cls}-vertical {
+    .@{steps-prefix-cls}-item {
+        display: block;
+    }
+
+    .@{steps-prefix-cls}-tail {
+        position: absolute;
+        left: 13px;
+        top: 0;
+        height: 100%;
+        width: 1px;
+        padding: 30px 0 4px 0;
+        > i {
+            height: 100%;
+            width: 1px;
+            &:after {
+                height: 0;
+                width: 100%;
+            }
+        }
+    }
+
+    .@{steps-prefix-cls}-status-finish {
+        .@{steps-prefix-cls}-tail > i:after {
+            height: 100%;
+        }
+    }
+
+    .@{steps-prefix-cls}-head {
+        float: left;
+        &-inner {
+            margin-right: 16px;
+        }
+    }
+
+    .@{steps-prefix-cls}-main {
+        min-height: 47px;
+        overflow: hidden;
+        display: block;
+        .@{steps-prefix-cls}-title {
+            line-height: 26px;
+        }
+        .@{steps-prefix-cls}-content {
+            padding-bottom: 12px;
+            padding-left: 0;
+        }
+    }
+
+    .@{steps-prefix-cls}-custom .@{steps-prefix-cls}-icon {
+        left: 4px;
+    }
+    &.@{steps-prefix-cls}-small .@{steps-prefix-cls}-custom .@{steps-prefix-cls}-icon {
+        left: 0;
+    }
+}
+
+.@{steps-prefix-cls}-vertical.@{steps-prefix-cls}-small {
+    .@{steps-prefix-cls}-tail {
+        position: absolute;
+        left: 9px;
+        top: 0;
+        padding: 22px 0 4px 0;
+        > i {
+            height: 100%;
+        }
+    }
+
+    .@{steps-prefix-cls}-title {
+        line-height: 18px;
+    }
+}
+
+.@{steps-prefix-cls}-horizontal {
+    &.@{steps-prefix-cls}-hidden {
+        visibility: hidden;
+    }
+    .@{steps-prefix-cls}-content {
+        //max-width: 100px;
+        padding-left: 35px;
+    }
+    .@{steps-prefix-cls}-item:not(:first-child) .@{steps-prefix-cls}-head {
+        padding-left: 10px;
+        margin-left: -10px;
+    }
+}

src/styles/components/switch.less

@@ -0,0 +1,191 @@
+@switch-prefix-cls: ~"@{css-prefix}switch";
+
+.@{switch-prefix-cls} {
+    display: inline-block;
+    width: 44px;
+    height: 22px;
+    line-height: 20px;
+    border-radius: 22px;
+    vertical-align: middle;
+    border: 1px solid #ccc;
+    background-color: #ccc;
+    position: relative;
+    cursor: pointer;
+    user-select: none;
+    transition: all @transition-time @ease-in-out;
+
+    &-loading{
+        opacity: .4;
+    }
+
+    &-inner {
+        color: #fff;
+        font-size: @font-size-small;
+        position: absolute;
+        left: 23px;
+
+        i {
+            width: 12px;
+            height: 12px;
+            text-align: center;
+            position: relative;
+            top: -1px;
+        }
+    }
+
+    &:after {
+        content: '';
+        width: 18px;
+        height: 18px;
+        border-radius: 18px;
+        background-color: #fff;
+        position: absolute;
+        left: 1px;
+        top: 1px;
+        cursor: pointer;
+        transition: left @transition-time @ease-in-out, width @transition-time @ease-in-out;
+    }
+
+    &:active:after {
+        width: 26px;
+    }
+
+    &:before{
+        content: '';
+        display: none;
+        width: 14px;
+        height: 14px;
+        border-radius: 50%;
+        background-color: transparent;
+        position: absolute;
+        left: 3px;
+        top: 3px;
+        z-index: 1;
+        border: 1px solid @primary-color;
+        border-color: transparent transparent transparent @primary-color;
+        animation: switch-loading 1s linear;
+        animation-iteration-count: infinite;
+    }
+    &-loading:before{
+        display: block;
+    }
+
+    &:focus {
+        box-shadow: 0 0 0 2px fade(@primary-color, 20%);
+        outline: 0;
+    }
+
+    &:focus:hover {
+        box-shadow: none;
+    }
+
+    &-small {
+        width: 28px;
+        height: 16px;
+        line-height: 14px;
+        &:after {
+            width: 12px;
+            height: 12px;
+        }
+        &:active:after {
+            width: 14px;
+        }
+        &:before{
+            width: 10px;
+            height: 10px;
+            left: 2px;
+            top: 2px;
+        }
+    }
+
+    &-small&-checked:after {
+        left: 13px;
+    }
+    &-small&-checked:before {
+        left: 14px;
+    }
+
+    &-small:active&-checked:after {
+        left: 11px;
+    }
+
+    &-large{
+        width: 56px;
+        &:active:after {
+            width: 26px;
+        }
+    }
+
+    &-large:active:after {
+        width: 30px;
+    }
+
+    &-large&-checked:after {
+        left: 35px;
+    }
+    &-large&-checked:before {
+        left: 37px;
+    }
+
+    &-large:active&-checked:after {
+        left: 23px;
+    }
+
+    &-checked {
+        border-color: @primary-color;
+        background-color: @primary-color;
+
+        .@{switch-prefix-cls}-inner {
+            left: 7px;
+        }
+
+        &:after {
+            left: 23px;
+        }
+        &:before{
+            left: 25px;
+        }
+
+        &:active:after {
+            left: 15px;
+        }
+    }
+
+    &-disabled {
+        cursor: @cursor-disabled;
+        opacity: .4;
+
+        &:after {
+            background: #fff;
+            cursor: not-allowed;
+        }
+
+        .@{switch-prefix-cls}-inner {
+            color: #fff;
+        }
+    }
+
+    &-disabled&-checked{
+        border-color: @primary-color;
+        background-color: @primary-color;
+        opacity: .4;
+        
+        &:after {
+            background: #fff;
+        }
+
+        .@{switch-prefix-cls}-inner {
+            color: #fff;
+        }
+    }
+
+}
+
+@keyframes switch-loading {
+    0% {
+        transform: rotate(0);
+    }
+    100% {
+        transform: rotate(360deg);
+    }
+}

src/styles/components/table.less

@@ -0,0 +1,424 @@
+@table-prefix-cls: ~"@{css-prefix}table";
+@table-select-item-prefix-cls: ~"@{table-prefix-cls}-filter-select-item";
+
+.@{table-prefix-cls} {
+    &-wrapper{
+        position: relative;
+        border: 1px solid @border-color-base;
+        border-bottom: 0;
+        border-right: 0;
+        overflow: hidden; // 开启 max-height 时，没有 overflow: hidden，则底部多出 1px，早期没有 overflow 是因为有些控件没有加 transfer
+    }
+    width: inherit;
+    height: 100%;
+    max-width: 100%;
+    overflow: hidden;
+    color: @text-color;
+    font-size: @font-size-small;
+    background-color: #fff;
+
+    box-sizing: border-box;
+    //position: relative;
+
+    &-hide{
+        opacity: 0;
+    }
+
+    &:before{
+        content: '';
+        width: 100%;
+        height: 1px;
+        position: absolute;
+        left: 0;
+        bottom: 0;
+        background-color: @border-color-base;
+        z-index: 1;
+    }
+
+    &:after{
+        content: '';
+        width: 1px;
+        height: 100%;
+        position: absolute;
+        top: 0;
+        right: 0;
+        background-color: @border-color-base;
+        z-index: 3;
+    }
+
+    &-with-header{
+        //border-radius: @border-radius-base @border-radius-base 0 0;
+    }
+
+    &-with-footer{
+        //border: 1px solid @border-color-base;
+        //border-radius: 0 0 @border-radius-base @border-radius-base;
+    }
+
+    &-with-header&-with-footer{
+        //border-radius: @border-radius-base;
+    }
+
+    &-title, &-footer{
+        height: 48px;
+        line-height: 48px;
+        border-bottom: 1px solid @border-color-split;
+    }
+    &-footer{
+        border-bottom: none;
+    }
+
+    &-header{
+        overflow: hidden;
+    }
+    &-body{
+        //overflow: auto;
+        //position: relative;
+
+    }
+    &-overflowX{
+        overflow-x: scroll;
+    }
+    &-overflowY{
+        overflow-y: scroll;
+    }
+    &-tip{
+        overflow-x: auto;
+        overflow-y: hidden;
+        //position: relative;
+    }
+
+    &-with-fixed-top&-with-footer{
+        .@{table-prefix-cls}-footer{
+            border-top: 1px solid @border-color-base;
+        }
+        tbody tr:last-child td{
+            border-bottom: none;
+        }
+    }
+
+    th, td
+    {
+        min-width: 0;
+        height: 48px;
+        box-sizing: border-box;
+        text-align: left;
+        text-overflow: ellipsis;
+        vertical-align: middle;
+        //position: relative;
+        border-bottom: 1px solid @border-color-split;
+    }
+
+    th {
+        height: 40px;
+        white-space: nowrap;
+        overflow: hidden;
+        background-color: @table-thead-bg;
+    }
+    td{
+        background-color: #fff;
+        transition: background-color @transition-time @ease-in-out;
+    }
+
+    th&-column,
+    td&-column
+    {
+        &-left{
+            text-align: left;
+        }
+        &-center{
+            text-align: center;
+        }
+        &-right{
+            text-align: right;
+        }
+    }
+
+    & table{
+        //width: 100%;
+        table-layout: fixed;
+    }
+    &-border{
+        th,td{
+            border-right: 1px solid @border-color-split;
+        }
+    }
+    &-cell{
+        padding-left: 18px;
+        padding-right: 18px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: normal;
+        word-break: break-all;
+        box-sizing: border-box;
+
+        &-ellipsis {
+            word-break: keep-all;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+        }
+
+        &-tooltip{
+            width: 100%;
+            display: flex;
+            align-items: center;
+            &-content{
+                display: block;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                white-space: nowrap;
+            }
+        }
+
+        &-with-expand{
+            height: 47px;
+            line-height: 47px;
+            padding: 0;
+            text-align: center;
+        }
+
+        &-expand{
+            cursor: pointer;
+            transition: transform @transition-time @ease-in-out;
+            i{
+                font-size: @font-size-base;
+            }
+            &-expanded{
+                transform: rotate(90deg);
+            }
+        }
+        &-sort{
+            cursor: pointer;
+            user-select: none;
+        }
+
+        // #3159
+        &-with-selection{
+            .@{checkbox-prefix-cls}-wrapper{
+                margin-right: 0;
+            }
+        }
+    }
+    &-hidden{
+        visibility: hidden;
+    }
+    th &-cell{
+        display: inline-block;
+        //position: relative;
+        word-wrap: normal;
+        vertical-align: middle;
+    }
+
+    td&-expanded-cell{
+        padding: 20px 50px;
+        background: @table-thead-bg;
+    }
+
+    &-stripe &-body,
+    &-stripe &-fixed-body
+    {
+        tr:nth-child(2n) {
+            td{
+                background-color: @table-td-stripe-bg;
+            }
+        }
+        // #1380
+        tr.@{table-prefix-cls}-row-hover{
+            td{
+                background-color: @table-td-hover-bg;
+            }
+        }
+    }
+
+    tr&-row-hover{
+        td{
+            background-color: @table-td-hover-bg;
+        }
+    }
+
+    &-large {
+        font-size: @font-size-base;
+        th{
+            height: 48px;
+        }
+        td{
+            height: 60px;
+        }
+        &-title, &-footer{
+            height: 60px;
+            line-height: 60px;
+        }
+        .@{table-prefix-cls}-cell-with-expand{
+            height: 59px;
+            line-height: 59px;
+            i{
+                font-size: @font-size-base+2;
+            }
+        }
+    }
+
+    &-small{
+        th{
+            height: 32px;
+        }
+        td{
+            height: 40px;
+        }
+        &-title, &-footer{
+            height: 40px;
+            line-height: 40px;
+        }
+        .@{table-prefix-cls}-cell-with-expand{
+            height: 39px;
+            line-height: 39px;
+        }
+    }
+
+    &-row-highlight,
+    tr&-row-highlight&-row-hover,
+    &-stripe &-body tr&-row-highlight:nth-child(2n),
+    &-stripe &-fixed-body tr&-row-highlight:nth-child(2n)
+    {
+        td{
+            background-color: @table-td-highlight-bg;
+        }
+    }
+
+    &-fixed, &-fixed-right{
+        position: absolute;
+        top: 0;
+        left: 0;
+        box-shadow: 2px 0 6px -2px rgba(0, 0, 0, 0.2);
+
+        &::before {
+            content: '';
+            width: 100%;
+            height: 1px;
+            background-color: @border-color-base;
+            position: absolute;
+            left: 0;
+            bottom: 0;
+            z-index: 4;
+        }
+    }
+    &-fixed-right{
+        top: 0;
+        left: auto;
+        right: 0;
+        box-shadow: -2px 0 6px -2px rgba(0, 0, 0, 0.2);
+    }
+    &-fixed-right-header{
+        position: absolute;
+        top: -1px;
+        right: 0;
+        background-color: @table-thead-bg;
+        border-top: 1px solid @border-color-base;
+        border-bottom: 1px solid @border-color-split;
+    }
+    &-fixed-header{
+        overflow: hidden;
+        // 在 #1387 里，添加了下面的代码，但是在 #5174 会出现新的问题。
+        // 但是，在新版本里，注释掉后，#1387 的问题并没有再复现，所以注释掉
+        //&-with-empty{
+        //    .@{table-prefix-cls}-hidden{
+        //        .@{table-prefix-cls}-sort{
+        //            display: none;
+        //        }
+        //        .@{table-prefix-cls}-cell span{
+        //            display: none;
+        //        }
+        //    }
+        //}
+    }
+    &-fixed-body{
+        overflow: hidden;
+        position: relative;
+        z-index: 3;
+    }
+
+    &-fixed-shadow {
+        width: 1px;
+        height: 100%;
+        position: absolute;
+        top: 0;
+        right: 0;
+        box-shadow: @shadow-right;
+        overflow: hidden;
+        z-index: 1;
+    }
+
+    &-sort{
+        .sortable();
+    }
+    &-filter{
+        display: inline-block;
+        cursor: pointer;
+        position: relative;
+        //top: 1px;
+
+        i{
+            color: @btn-disable-color;
+            transition: color @transition-time @ease-in-out;
+            &:hover{
+                color: inherit;
+            }
+            &.on{
+                color: @primary-color;
+            }
+        }
+        &-list{
+            padding: 8px 0 0;
+            &-item{
+                padding: 0 12px 8px;
+
+                .ivu-checkbox-wrapper + .ivu-checkbox-wrapper{
+                    margin: 0;
+                }
+                label {
+                    display: block;
+
+                    & > span{
+                        margin-right: 4px;
+                    }
+                }
+            }
+            ul{
+                padding-bottom: 8px;
+            }
+            .select-item(@table-prefix-cls, @table-select-item-prefix-cls);
+        }
+        &-footer{
+            padding: 4px;
+            border-top: 1px solid @border-color-split;
+            overflow: hidden;
+            button:first-child{
+                float: left;
+            }
+            button:last-child{
+                float: right;
+            }
+        }
+    }
+
+    &-tip {
+        table {
+            width: 100%;
+
+            td {
+              text-align: center;
+            }
+        }
+    }
+
+    &-expanded-hidden{
+        visibility: hidden;
+    }
+}
+.ivu-table-popper{
+    min-width: 0;
+    text-align: left;
+    .ivu-poptip-body{
+        padding: 0;
+    }
+}

src/styles/components/tabs.less

@@ -0,0 +1,240 @@
+@tabs-prefix-cls: ~"@{css-prefix}tabs";
+
+.@{tabs-prefix-cls} {
+    box-sizing: border-box;
+    position: relative;
+    overflow: hidden;
+    color: @text-color;
+    .clearfix;
+
+    &-bar {
+        outline: none;
+    }
+
+    &-ink-bar {
+        height: 2px;
+        box-sizing: border-box;
+        background-color: @primary-color;
+        position: absolute;
+        left: 0;
+        bottom: 1px;
+        z-index: 1;
+        transition: transform .3s @ease-in-out;
+        transform-origin: 0 0;
+    }
+
+    &-bar {
+        border-bottom: 1px solid @border-color-base;
+        margin-bottom: 16px;
+    }
+
+    &-nav-container {
+        margin-bottom: -1px;
+        line-height: @line-height-base;
+        font-size: @font-size-base;
+        box-sizing: border-box;
+        white-space: nowrap;
+        overflow: hidden;
+        position: relative;
+        .clearfix;
+    }
+
+    &-nav-container:focus {
+        outline: none;
+        .@{tabs-prefix-cls}-tab-focused {
+            border-color: @link-hover-color !important;
+        }
+    }
+
+    &-nav-container-scrolling {
+        padding-left: 32px;
+        padding-right: 32px;
+    }
+
+    &-nav-wrap {
+        overflow: hidden;
+        margin-bottom: -1px;
+    }
+
+    &-nav-scroll {
+        overflow: hidden;
+        white-space: nowrap;
+    }
+
+    &-nav-right{
+        float: right;
+        margin-left: 5px;
+    }
+
+    &-nav-prev{
+        position:absolute;
+        line-height: 32px;
+        cursor: pointer;
+        left:0;
+    }
+
+    &-nav-next{
+        position:absolute;
+        line-height: 32px;
+        cursor: pointer;
+        right:0;
+    }
+
+    &-nav-scrollable{
+        padding: 0 12px;
+    }
+
+    &-nav-scroll-disabled{
+        display: none;
+    }
+
+    &-nav {
+        padding-left: 0;
+        margin: 0;
+        float: left;
+        list-style: none;
+        box-sizing: border-box;
+        position: relative;
+        transition: transform 0.5s @ease-in-out;
+
+        &:before,
+        &:after {
+            display: table;
+            content: " ";
+        }
+
+        &:after {
+            clear: both;
+        }
+
+        .@{tabs-prefix-cls}-tab-disabled {
+            pointer-events: none;
+            cursor: default;
+            color: #ccc;
+        }
+
+        .@{tabs-prefix-cls}-tab {
+            display: inline-block;
+            height: 100%;
+            padding: 8px 16px;
+            margin-right: 16px;
+            box-sizing: border-box;
+            cursor: pointer;
+            text-decoration: none;
+            position: relative;
+            transition: color .3s @ease-in-out;
+
+            &:hover {
+                color: @link-hover-color;
+            }
+
+            &:active {
+                color: @link-active-color;
+            }
+            .@{css-prefix-iconfont} {
+                width: 14px;
+                height: 14px;
+                margin-right: 8px;
+            }
+        }
+
+        .@{tabs-prefix-cls}-tab-active {
+            color: @primary-color;
+        }
+    }
+    &-mini &-nav-container {
+        font-size: @font-size-base;
+    }
+
+    &-mini &-tab {
+        margin-right: 0;
+        padding: 8px 16px;
+        font-size: @font-size-small;
+    }
+
+    & {
+        .@{tabs-prefix-cls}-content-animated {
+            display: flex;
+            flex-direction: row;
+            will-change: transform;
+            transition: transform .3s @ease-in-out;
+        }
+
+        .@{tabs-prefix-cls}-tabpane {
+            flex-shrink: 0;
+            width: 100%;
+            transition: opacity .3s;
+            opacity: 1;
+            outline: none;
+        }
+
+        .@{tabs-prefix-cls}-tabpane-inactive {
+            opacity: 0;
+            height: 0;
+        }
+    }
+
+    // card style
+    &&-card > &-bar &-nav-container {
+        height: 32px;
+    }
+    &&-card > &-bar &-ink-bar {
+        visibility: hidden;
+    }
+    &&-card > &-bar &-tab {
+        margin: 0;
+        margin-right: 4px;
+        height: 31px;
+        padding: 5px 16px 4px;
+        border: 1px solid @border-color-base;
+        border-bottom: 0;
+        border-radius: @btn-border-radius @btn-border-radius 0 0;
+        transition: all 0.3s @ease-in-out;
+        background: @table-thead-bg;
+    }
+    &&-card > &-bar &-tab-active {
+        height: 32px;
+        padding-bottom: 5px;
+        background: #fff;
+        transform: translateZ(0);
+        border-color: @border-color-base;
+        color: @primary-color;
+    }
+    &&-card > &-bar &-nav-wrap {
+        margin-bottom: 0;
+    }
+    &&-card > &-bar &-tab &-close {
+        width: 0;
+        height: 22px;
+        font-size: 22px;
+        margin-right: 0;
+        color: @legend-color;
+        text-align: right;
+        vertical-align: middle;
+        overflow: hidden;
+        position: relative;
+        top: -1px;
+        transform-origin: 100% 50%;
+        transition: all 0.3s @ease-in-out;
+        &:hover {
+            color: #444;
+        }
+    }
+
+    &&-card > &-bar &-tab-active &-close,
+    &&-card > &-bar &-tab:hover &-close {
+        width: 22px;
+        transform: translateZ(0);
+        margin-right: -6px;
+    }
+}
+
+.@{tabs-prefix-cls}-no-animation{
+    > .@{tabs-prefix-cls}-content {
+        transform: none!important;
+
+        > .@{tabs-prefix-cls}-tabpane-inactive {
+            display: none;
+        }
+    }
+}

src/styles/components/tag.less

@@ -0,0 +1,254 @@
+@tag-prefix-cls: ~"@{css-prefix}tag";
+@tag-close-prefix-cls: ivu-icon-ios-close;
+
+.@{tag-prefix-cls} {
+    display: inline-block;
+    height: 22px;
+    line-height: 22px;
+    margin: 2px 4px 2px 0;
+    padding: 0 8px;
+    border: 1px solid @border-color-split;
+    border-radius: @btn-border-radius-small;
+    background: @background-color-base;
+    font-size: @tag-font-size;
+    vertical-align: middle;
+    opacity: 1;
+    overflow: hidden;
+    cursor: pointer;
+    //transition: all @transition-time @ease-in-out;
+
+    // for color and unchecked
+    &:not(&-border):not(&-dot):not(&-checked){
+        background: transparent;
+        border: 0;
+        color: @text-color;
+        .@{tag-close-prefix-cls} {
+            color: @text-color !important;
+        }
+    }
+
+    &-color{
+        &-error{
+            color: @error-color !important;
+            border-color: @error-color;
+        }
+        &-success{
+            color: @success-color !important;
+            border-color: @success-color;
+        }
+        &-primary{
+            color: @link-color !important;
+            border-color: @link-color;
+        }
+        &-warning{
+            color: @warning-color !important;
+            border-color: @warning-color;
+        }
+        &-white{
+            color: rgb(255, 255, 255) !important;
+        }
+    }
+
+    &-dot{
+        height: 32px;
+        line-height: 32px;
+        border: 1px solid @border-color-split !important;
+        color: @text-color !important;
+        background: #fff !important;
+        padding: 0 12px;
+
+        &-inner{
+            display: inline-block;
+            width: 12px;
+            height: 12px;
+            margin-right: 8px;
+            border-radius: 50%;
+            background: @border-color-split;
+            position: relative;
+            top: 1px;
+        }
+        .@{tag-close-prefix-cls} {
+            color: #666 !important;
+            margin-left: 12px !important;
+        }
+    }
+
+    &-border{
+        height: 24px;
+        line-height: 24px;
+        border: 1px solid @border-color-split;
+        color: @border-color-split;
+        background: #fff !important;
+        position: relative;
+
+        .@{tag-close-prefix-cls} {
+            color: #666;
+            margin-left: 12px !important;
+        }
+
+        &:after{
+            content: "";
+            display: none;
+            width: 1px;
+            background: currentColor;
+            position: absolute;
+            top: 0;
+            bottom: 0;
+            right: 22px;
+        }
+
+        &.@{tag-prefix-cls}-closable {
+            &:after{
+                display: block;
+            }
+            .@{tag-close-prefix-cls} {
+                margin-left: 18px !important;
+                left: 4px;
+                top: -1px;
+            }
+        }
+
+        &.@{tag-prefix-cls}-primary {
+            color: @link-color !important;
+            border: 1px solid @link-color !important;
+
+            &:after{
+                background: @link-color;
+            }
+            .@{tag-close-prefix-cls}{
+                color: @link-color !important;
+            }
+        }
+        &.@{tag-prefix-cls}-success {
+            color: @success-color !important;
+            border: 1px solid @success-color !important;
+
+            &:after{
+                background: @success-color;
+            }
+            .@{tag-close-prefix-cls}{
+                color: @success-color !important;
+            }
+        }
+        &.@{tag-prefix-cls}-warning {
+            color: @warning-color !important;
+            border: 1px solid @warning-color !important;
+
+            &:after{
+                background: @warning-color;
+            }
+            .@{tag-close-prefix-cls}{
+                color: @warning-color !important;
+            }
+        }
+        &.@{tag-prefix-cls}-error {
+            color: @error-color !important;
+            border: 1px solid @error-color !important;
+
+            &:after{
+                background: @error-color;
+            }
+            .@{tag-close-prefix-cls}{
+                color: @error-color !important;
+            }
+        }
+    }
+
+    &:hover {
+        opacity: 0.85;
+    }
+
+    &,
+    a,
+    a:hover {
+        // color: @text-color;
+    }
+
+    &-text {
+        a:first-child:last-child {
+            display: inline-block;
+            margin: 0 -8px;
+            padding: 0 8px;
+        }
+        color: @text-color;
+    }
+
+    .@{tag-close-prefix-cls} {
+        .iconfont-size-under-12px(20px);
+        cursor: pointer;
+        margin-left: 2px;
+        color: #666;
+        opacity: 0.66;
+        position: relative;
+        top: -1px;
+        //transition: all @transition-time @ease-in-out;
+
+        &:hover {
+            opacity: 1;
+        }
+    }
+
+    &-primary,
+    &-success,
+    &-warning,
+    &-error {
+        border: 0;
+        &,
+        a,
+        a:hover,
+        .@{tag-close-prefix-cls},
+        .@{tag-close-prefix-cls}:hover {
+            color: #fff;
+        }
+        //.@{tag-close-prefix-cls}{
+        //    top: 2px;
+        //}
+    }
+
+    &-primary,
+    &-primary&-dot &-dot-inner
+    {
+        background: @link-color;
+    }
+
+    &-success,
+    &-success&-dot &-dot-inner
+    {
+        background: @success-color;
+    }
+
+    &-warning,
+    &-warning&-dot &-dot-inner
+    {
+        background: @warning-color;
+    }
+
+    &-error,
+    &-error&-dot &-dot-inner
+    {
+        background: @error-color;
+    }
+
+    @colors: pink, magenta, red, volcano, orange, yellow, gold, cyan, lime, green, blue, geekblue, purple;
+
+    .make-color-classes(@i: length(@colors)) when (@i > 0) {
+        .make-color-classes(@i - 1);
+        @color: extract(@colors, @i);
+        @lightColor: "@{color}-1";
+        @lightBorderColor: "@{color}-3";
+        @darkColor: "@{color}-6";
+        &-@{color} {
+            line-height: 20px;
+            background: @@lightColor;
+            border-color: @@lightBorderColor;
+            .@{tag-prefix-cls}-text{
+                color: @@darkColor !important;
+            }
+            &.@{tag-prefix-cls}-dot{
+                line-height: 32px;
+            }
+        }
+    }
+
+    .make-color-classes();
+}

src/styles/components/time-picker.less

@@ -0,0 +1,171 @@
+@time-picker-prefix-cls: ~"@{css-prefix}time-picker";
+@time-picker-cells-width-base: 56px;
+@time-picker-cells-width-with-date-base: 72px;
+@time-picker-cells-width: @time-picker-cells-width-base * 2;
+@time-picker-cells-width-with-seconds: @time-picker-cells-width-base *3;
+@time-picker-cells-width-with-date: @time-picker-cells-width-with-date-base * 2;
+@time-picker-cells-width-with-date-with-seconds: @time-picker-cells-width-with-date-base * 3;
+
+.@{time-picker-prefix-cls} {
+    &-cells{
+        min-width: @time-picker-cells-width;
+        &-with-seconds{
+            min-width: @time-picker-cells-width-with-seconds;
+        }
+
+        &-list{
+            width: @time-picker-cells-width-base;
+            max-height: 144px;
+            float: left;
+            overflow: hidden;
+            border-left: 1px solid @border-color-split;
+            position: relative;
+            &:hover{
+                overflow-y: auto;
+            }
+
+            &:first-child{
+                border-left: none;
+                border-radius: @btn-border-radius 0 0 @btn-border-radius;
+            }
+            &:last-child{
+                border-radius: 0 @btn-border-radius @btn-border-radius 0;
+            }
+            ul{
+                width: 100%;
+                margin: 0;
+                padding: 0 0 120px 0;
+                list-style: none;
+                li{
+                    width: 100%;
+                    height: 24px;
+                    line-height: 24px;
+                    margin: 0;
+                    padding: 0 0 0 16px;
+                    box-sizing: content-box;
+                    text-align: left;
+                    user-select: none;
+                    cursor: pointer;
+                    list-style: none;
+                    transition: background @transition-time @ease-in-out;
+
+                }
+            }
+        }
+        &-cell{
+            &:hover{
+                background: @background-color-select-hover;
+            }
+            &-disabled {
+                color: @btn-disable-color;
+                cursor: @cursor-disabled;
+
+                &:hover {
+                    color: @btn-disable-color;
+                    background-color: #fff;
+                    cursor: @cursor-disabled;
+                }
+            }
+            &-selected ,&-selected:hover{
+                color: @primary-color;
+                background: @background-color-select-hover;
+            }
+            &-focused{
+                background-color: tint(@primary-color, 80%);
+            }
+        }
+    }
+
+    &-header{
+        height: 32px;
+        line-height: 32px;
+        text-align: center;
+        border-bottom: 1px solid @border-color-split;
+    }
+
+    &-with-range{
+        .@{picker-prefix-cls}-panel{
+            &-body{
+                min-width: @time-picker-cells-width * 2 + 4px;
+            }
+            &-content{
+                float: left;
+                position: relative;
+
+                &:after{
+                    content: '';
+                    display: block;
+                    width: 2px;
+                    position: absolute;
+                    top: 31px;
+                    bottom: 0;
+                    right: -2px;
+                    background: @border-color-split;
+                    z-index: 1;
+                }
+
+                &-right{
+                    float: right;
+                    &:after{
+                        right: auto;
+                        left: -2px;
+                    }
+                }
+            }
+        }
+        .@{time-picker-prefix-cls}-cells{
+            &-list{
+                &:first-child{
+                    border-radius: 0;
+                }
+                &:last-child{
+                    border-radius: 0;
+                }
+            }
+        }
+    }
+    &-with-range&-with-seconds{
+        .@{picker-prefix-cls}-panel{
+            &-body{
+                min-width: @time-picker-cells-width-with-seconds * 2 + 4px;
+            }
+        }
+    }
+}
+
+.@{picker-prefix-cls}-panel-content{
+    .@{picker-prefix-cls}-panel-content{
+        .@{time-picker-prefix-cls}{
+            &-cells{
+                min-width: @time-picker-cells-width-with-date-with-seconds;
+                &-with-seconds{
+                    min-width: @time-picker-cells-width-with-date-with-seconds;
+                    .@{time-picker-prefix-cls}-cells-list{
+                        width: @time-picker-cells-width-with-date-with-seconds / 3;
+                        ul{
+                            li{
+                                padding: 0 0 0 28px;
+                            }
+                        }
+                    }
+                }
+                &-list {
+                    width: @time-picker-cells-width-with-date-with-seconds / 2;
+                    max-height: 216px;
+                    &:first-child{
+                        border-radius: 0;
+                    }
+                    &:last-child{
+                        border-radius: 0;
+                    }
+                    ul{
+                        padding: 0 0 192px 0;
+                        li{
+                            padding: 0 0 0 46px;
+                        }
+                    }
+                }
+            }
+        }
+    }
+}

src/styles/components/time.less

@@ -0,0 +1,10 @@
+@time-prefix-cls: ~"@{css-prefix}time";
+
+.@{time-prefix-cls} {
+    &-with-hash{
+        cursor: pointer;
+        &:hover{
+            text-decoration: underline;
+        }
+    }
+}

src/styles/components/timeline.less

@@ -0,0 +1,87 @@
+@timeline-prefix-cls: ~"@{css-prefix}timeline";
+@timeline-color: @border-color-split;
+
+.@{timeline-prefix-cls} {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+
+    &-item {
+        margin: 0 !important;
+        padding: 0 0 12px 0;
+        list-style: none;
+        position: relative;
+
+        &-tail {
+            height: 100%;
+            border-left: 1px solid @timeline-color;
+            position: absolute;
+            left: 6px;
+            top: 0;
+        }
+
+        &-pending &-tail {
+            display: none;
+        }
+
+        &-head {
+            width: 13px;
+            height: 13px;
+            background-color: #fff;
+            border-radius: 50%;
+            border: 1px solid transparent;
+            position: absolute;
+
+            &-blue {
+                border-color: @primary-color;
+                color: @primary-color;
+            }
+            &-red {
+                border-color: @error-color;
+                color: @error-color;
+            }
+            &-green {
+                border-color: @success-color;
+                color: @success-color;
+            }
+        }
+
+        &-head-custom {
+            width: 40px;
+            height: auto;
+            margin-top: 6px;
+            padding: 3px 0;
+            text-align: center;
+            line-height: 1;
+            border: 0;
+            border-radius: 0;
+            font-size: @font-size-base;
+            position: absolute;
+            left: -13px;
+            transform: translateY(-50%);
+        }
+
+        &-content {
+            padding: 1px 1px 10px 24px;
+            font-size: @font-size-small;
+            position: relative;
+            top: -3px;
+        }
+
+        &:last-child {
+            .@{timeline-prefix-cls}-item-tail {
+                display: none;
+            }
+        }
+    }
+
+    &&-pending &-item:nth-last-of-type(2) {
+
+        .@{timeline-prefix-cls}-item-tail {
+            border-left: 1px dotted @timeline-color;
+        }
+        .@{timeline-prefix-cls}-item-content {
+            min-height: 48px;
+        }
+    }
+}

src/styles/components/tooltip.less

@@ -0,0 +1,110 @@
+@tooltip-prefix-cls: ~"@{css-prefix}tooltip";
+@tooltip-arrow: ~"@{tooltip-prefix-cls}-arrow";
+@tooltip-max-width: 250px;
+@tooltip-arrow-width: 5px;
+@tooltip-distance: @tooltip-arrow-width - 1 + 4;
+
+@tooltip-arrow-width-light: 7px;
+@tooltip-distance-light: @tooltip-arrow-width-light - 1 + 4;
+@tooltip-arrow-outer-width-light: (@tooltip-arrow-width-light + 1);
+@tooltip-arrow-color: hsla(0,0%,85%,.5);
+
+.@{tooltip-prefix-cls} {
+    display: inline-block;
+
+    &-rel{
+        display: inline-block;
+        position: relative;
+        width: inherit;
+    }
+
+    &-popper{
+        .popper(@tooltip-arrow, @tooltip-arrow-width, @tooltip-distance, @tooltip-bg);
+    }
+    &-light&-popper{
+        .popper(@tooltip-arrow, @tooltip-arrow-width-light, @tooltip-distance-light, @tooltip-arrow-color);
+
+        &[x-placement^="top"] .@{tooltip-arrow}:after {
+            content: " ";
+            bottom: 1px;
+            margin-left: -@tooltip-arrow-width-light;
+            border-bottom-width: 0;
+            border-top-width: @tooltip-arrow-width-light;
+            border-top-color: #fff;
+        }
+
+        &[x-placement^="right"] .@{tooltip-arrow}:after {
+            content: " ";
+            left: 1px;
+            bottom: -@tooltip-arrow-width-light;
+            border-left-width: 0;
+            border-right-width: @tooltip-arrow-width-light;
+            border-right-color: #fff;
+        }
+
+        &[x-placement^="bottom"] .@{tooltip-arrow}:after {
+            content: " ";
+            top: 1px;
+            margin-left: -@tooltip-arrow-width-light;
+            border-top-width: 0;
+            border-bottom-width: @tooltip-arrow-width-light;
+            border-bottom-color: #fff;
+        }
+
+        &[x-placement^="left"] .@{tooltip-arrow}:after {
+            content: " ";
+            right: 1px;
+            border-right-width: 0;
+            border-left-width: @tooltip-arrow-width-light;
+            border-left-color: #fff;
+            bottom: -@tooltip-arrow-width-light;
+        }
+    }
+
+    &-inner{
+        max-width: @tooltip-max-width;
+        min-height: 34px;
+        padding: 8px 12px;
+        color: @tooltip-color;
+        text-align: left;
+        text-decoration: none;
+        background-color: @tooltip-bg;
+        border-radius: @border-radius-small;
+        box-shadow: @shadow-base;
+        white-space: nowrap;
+
+        &-with-width{
+            white-space: pre-wrap;
+            text-align: justify;
+        }
+    }
+
+    &-light &-inner{
+        background-color: #fff;
+        color: @text-color;
+    }
+
+    &-arrow{
+        position: absolute;
+        width: 0;
+        height: 0;
+        border-color: transparent;
+        border-style: solid;
+    }
+
+    &-light {
+        .@{tooltip-arrow}{
+            &:after{
+                display: block;
+                width: 0;
+                height: 0;
+                position: absolute;
+                border-color: transparent;
+                border-style: solid;
+                content: "";
+                border-width: @tooltip-arrow-width-light;
+            }
+            border-width: @tooltip-arrow-outer-width-light;
+        }
+    }
+}

src/styles/components/transfer.less

@@ -0,0 +1,139 @@
+@transfer-prefix-cls: ~"@{css-prefix}transfer";
+@transfer-item-prefix-cls: ~"@{css-prefix}transfer-list-content-item";
+
+.@{transfer-prefix-cls} {
+    position: relative;
+    line-height: @line-height-base;
+
+    &-list{
+        display: inline-block;
+        width: 180px;
+        height: 210px;
+        font-size: @font-size-small;
+        vertical-align: middle;
+        position: relative;
+        padding-top: 35px;
+
+        &-with-footer{
+            padding-bottom: 35px;
+        }
+
+        &-header {
+            padding: 8px 16px;
+            background: @head-bg;
+            color: @text-color;
+            border: 1px solid @border-color-base;
+            border-bottom: 1px solid @border-color-split;
+            border-radius: @border-radius-base @border-radius-base 0 0;
+            overflow: hidden;
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+
+            &-title{
+                cursor: pointer;
+            }
+
+            & > span{
+                padding-left: 4px;
+            }
+
+            &-count {
+                margin: 0 !important;
+                float: right;
+            }
+        }
+
+        &-body{
+            height: 100%;
+            border: 1px solid @border-color-base;
+            border-top: none;
+            border-radius: 0 0 @border-radius-base @border-radius-base;
+            position: relative;
+            overflow: hidden;
+
+            &-with-search{
+                padding-top: 34px;
+            }
+            &-with-footer{
+                border-radius: 0;
+            }
+        }
+
+        &-content{
+            height: 100%;
+            padding: 4px 0;
+            overflow: auto;
+
+            &-item{
+                overflow: hidden;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+
+                & > span{
+                    padding-left: 4px;
+                }
+            }
+
+            &-not-found{
+                display: none;
+                text-align: center;
+                color: @btn-disable-color;
+            }
+            li&-not-found:only-child{
+                display: block;
+            }
+        }
+        &-body-with-search &-content{
+            padding: 6px 0 0;
+        }
+
+        &-body-search-wrapper{
+            padding: 8px 8px 0;
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+        }
+
+        &-search{
+            position: relative;
+        }
+
+        &-footer{
+            border: 1px solid @border-color-base;
+            border-top: none;
+            border-radius: 0 0 @border-radius-base @border-radius-base;
+            position: absolute;
+            bottom: 0;
+            left: 0;
+            right: 0;
+
+            .clearfix();
+        }
+    }
+    &-operation {
+        display: inline-block;
+        //overflow: hidden;
+        margin: 0 16px;
+        vertical-align: middle;
+
+        .@{btn-prefix-cls} {
+            display: block;
+            min-width: @btn-circle-size-small;
+
+            &:first-child {
+                margin-bottom: 12px;
+            }
+        }
+        .@{btn-prefix-cls}{
+            span {
+                i, span{
+                    vertical-align: middle;
+                }
+            }
+        }
+    }
+}
+.select-item(@transfer-prefix-cls, @transfer-item-prefix-cls);

src/styles/components/tree.less

@@ -0,0 +1,78 @@
+@tree-prefix-cls: ~"@{css-prefix}tree";
+
+.@{tree-prefix-cls} {
+    ul{
+        list-style: none;
+        margin: 0;
+        padding: 0;
+        font-size: @font-size-small;
+        &.@{dropdown-prefix-cls}-menu{
+            padding: 0;
+        }
+        li{
+            list-style: none;
+            margin: 8px 0;
+            padding: 0;
+            white-space: nowrap;
+            outline: none;
+
+            &.@{dropdown-item-prefix-cls}{
+                margin: 0;
+                padding: 7px 16px;
+                white-space: nowrap;
+            }
+        }
+    }
+    li{
+        ul{
+            margin: 0;
+            padding: 0 0 0 18px;
+        }
+    }
+    &-title {
+        display: inline-block;
+        margin: 0;
+        padding: 0 4px;
+        border-radius: @btn-border-radius-small;
+        cursor: pointer;
+        vertical-align: top;
+        color: @text-color;
+        transition: all @transition-time @ease-in-out;
+        &:hover {
+            background-color: tint(@primary-color, 90%);
+        }
+        &-selected, &-selected:hover{
+            background-color: tint(@primary-color, 80%);
+        }
+    }
+    &-arrow{
+        cursor: pointer;
+        width: 12px;
+        text-align: center;
+        display: inline-block;
+        i {
+            transition: all @transition-time @ease-in-out;
+            font-size: @font-size-base;
+            vertical-align: middle;
+        }
+        &-open{
+            i {
+                transform: rotate(90deg);
+            }
+        }
+        //&-hidden{
+        //    cursor: auto;
+        //    i{
+        //        display: none;
+        //    }
+        //}
+        &-disabled{
+            cursor: @cursor-disabled;
+        }
+    }
+
+    .@{checkbox-prefix-cls}-wrapper{
+        margin-right: 4px;
+        margin-left: 4px;
+    }
+}

src/styles/components/upload.less

@@ -0,0 +1,79 @@
+@upload-prefix-cls: ~"@{css-prefix}upload";
+
+.@{upload-prefix-cls} {
+    input[type="file"]{
+        display: none;
+    }
+
+    &-list{
+        margin-top: 8px;
+
+        &-file{
+            padding: 4px;
+            color: @text-color;
+            border-radius: @border-radius-small;
+            transition: background-color @transition-time @ease-in-out;
+            overflow: hidden;
+            position: relative;
+
+            & > span{
+                cursor: pointer;
+                transition: color @transition-time @ease-in-out;
+                i{
+                    display: inline-block;
+                    width: @font-size-small;
+                    height: @font-size-small;
+                    color: @text-color;
+                    text-align: center;
+                }
+            }
+
+            &:hover{
+                background: @input-disabled-bg;
+                & > span{
+                    color: @primary-color;
+                    i{
+                        color: @text-color;
+                    }
+                }
+                .@{upload-prefix-cls}-list-remove{
+                    opacity: 1;
+                }
+            }
+        }
+        &-remove{
+            opacity: 0;
+            font-size: 18px;
+            cursor: pointer;
+            float: right;
+            margin-right: 4px;
+            color: @legend-color;
+            transition: all @transition-time ease;
+            &:hover{
+                color: #444;
+            }
+        }
+    }
+
+     &-select {
+        display: inline-block;
+    }
+    
+    &-drag{
+        background: #fff;
+        border: 1px dashed @border-color-base;
+        border-radius: @border-radius-small;
+        text-align: center;
+        cursor: pointer;
+        position: relative;
+        overflow: hidden;
+        transition: border-color @transition-time ease;
+
+        &:hover{
+            border: 1px dashed @primary-color;
+        }
+    }
+    &-dragOver{
+        border: 2px dashed @primary-color;
+    }
+}

src/styles/copyright.less

@@ -0,0 +1,6 @@
+/*!
+* iView
+* Web: https://www.iviewui.com
+* Github: https://github.com/iview/iview
+* Author: Aresn
+*/

src/styles/custom.less

@@ -0,0 +1,234 @@
+@import "color/colors";
+
+// Prefix
+@css-prefix             : ivu-;
+@css-prefix-iconfont    : ivu-icon;
+
+// Color
+@primary-color          : #2d8cf0;
+@info-color             : #2db7f5;
+@success-color          : #19be6b;
+@processing-color       : @primary-color;
+@warning-color          : #ff9900;
+@error-color            : #ed4014;
+@normal-color           : #e6ebf1;
+@link-color             : #2D8cF0;
+@link-hover-color       : tint(@link-color, 20%);
+@link-active-color      : shade(@link-color, 5%);
+@selected-color         : fade(@primary-color, 90%);
+@tooltip-color          : #fff;
+@subsidiary-color       : #808695;
+@rate-star-color        : #f5a623;
+@white: #fff;
+@black: #000;
+
+// Base
+@body-background        : #fff;
+@component-background   : #fff;
+@font-family            : "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;
+@code-family            : Consolas,Menlo,Courier,monospace;
+@title-color            : #17233d;
+@text-color             : #515a6e;
+@text-color-secondary: fade(@black, 45%);
+@heading-color: fade(#000, 85%);
+@heading-color-dark: fade(@white, 100%);
+@font-size-base         : 14px;
+@font-size-small        : 12px;
+@font-size-large        : 16px;
+@line-height-base       : 1.5;
+@line-height-computed   : floor((@font-size-base * @line-height-base));
+@border-radius-base     : 6px;
+@border-radius-small    : 4px;
+@cursor-disabled        : not-allowed;
+
+// vertical paddings
+@padding-lg: 24px; // containers
+@padding-md: 16px; // small containers and buttons
+@padding-sm: 12px; // Form controls and items
+@padding-xs: 8px; // small items
+
+// Border color
+@border-color-base      : #dcdee2;  // outside
+@border-color-split     : #e8eaec;  // inside
+@border-width-base      : 1px;            // width of the border for a component
+@border-style-base      : solid;          // style of a components border
+
+// Background color
+@background-color-base        : #f7f7f7;  // base
+@background-color-select-hover: @input-disabled-bg;
+@tooltip-bg                   : rgba(70, 76, 91, .9);
+@head-bg                      : #f9fafc;
+@table-thead-bg               : #f8f8f9;
+@table-td-stripe-bg           : #f8f8f9;
+@table-td-hover-bg            : #ebf7ff;
+@table-td-highlight-bg        : #ebf7ff;
+@menu-dark-title              : #515a6e;
+@menu-dark-active-bg          : #363e4f;
+@menu-dark-subsidiary-color   : rgba(255,255,255,.7);
+@menu-dark-group-title-color  : rgba(255,255,255,.36);
+@date-picker-cell-hover-bg    : #e1f0fe;
+
+// Shadow
+@shadow-color           : rgba(0, 0, 0, .2);
+@shadow-base            : @shadow-down;
+@shadow-card            : 0 1px 1px 0 rgba(0,0,0,.1);
+@shadow-up              : 0 -1px 6px @shadow-color;
+@shadow-down            : 0 1px 6px @shadow-color;
+@shadow-left            : -1px 0 6px @shadow-color;
+@shadow-right           : 1px 0 6px @shadow-color;
+
+// Button
+@btn-font-weight        : normal;
+@btn-padding-base       : 5px 15px 6px;
+@btn-padding-large      : 6px 15px 6px 15px;
+@btn-padding-small      : 1px 7px 2px;
+@btn-padding-base-icon  : 5px 15px 6px;
+@btn-padding-large-icon : 6px 15px 6px 15px;
+@btn-padding-small-icon : 1px 7px 2px;
+@btn-font-size          : 12px;
+@btn-font-size-large    : 14px;
+@btn-border-radius      : 4px;
+@btn-border-radius-small: 3px;
+@btn-group-border       : shade(@primary-color, 5%);
+
+@btn-disable-color      : #c5c8ce;
+@btn-disable-bg         : @background-color-base;
+@btn-disable-border     : @border-color-base;
+
+@btn-default-color      : @text-color;
+@btn-default-bg         : #fff;
+@btn-default-border     : @border-color-base;
+
+@btn-primary-color      : #fff;
+@btn-primary-bg         : @primary-color;
+
+@btn-ghost-color        : @text-color;
+@btn-ghost-bg           : #fff;
+@btn-ghost-border       : @border-color-base;
+
+@btn-circle-size        : 32px;
+@btn-circle-size-large  : 36px;
+@btn-circle-size-small  : 24px;
+
+// Layout and Grid
+@grid-columns                : 24;
+@grid-gutter-width           : 0;
+@layout-body-background      : #f5f7f9;
+@layout-header-background    : #515a6e;
+@layout-header-height        : 64px;
+@layout-header-padding       : 0 50px;
+@layout-footer-padding       : 24px 50px;
+@layout-footer-background    : @layout-body-background;
+@layout-sider-background     : @layout-header-background;
+@layout-trigger-height       : 48px;
+@layout-trigger-color        : #fff;
+@layout-zero-trigger-width   : 36px;
+@layout-zero-trigger-height  : 42px;
+
+// Legend
+@legend-color           : #999;
+
+// Input
+@input-height-base           : 32px;
+@input-height-large          : 36px;
+@input-height-small          : 24px;
+
+@input-padding-horizontal    : 7px;
+@input-padding-vertical-base : 4px;
+@input-padding-vertical-small: 1px;
+@input-padding-vertical-large: 6px;
+
+@input-placeholder-color     : @btn-disable-color;
+@input-color                 : @text-color;
+@input-border-color          : @border-color-base;
+@input-bg                    : #fff;
+@input-group-bg              : #f8f8f9;
+
+@input-hover-border-color    : @primary-color;
+@input-focus-border-color    : @primary-color;
+@input-disabled-bg           : #f3f3f3;
+
+// Tag
+@tag-font-size          : 12px;
+
+// Media queries breakpoints
+// Extra small screen / phone
+@screen-xs              : 480px;
+@screen-xs-min          : @screen-xs;
+@screen-xs-max          : (@screen-xs-min - 1);
+
+// Small screen / tablet
+@screen-sm              : 576px;
+@screen-sm-min          : @screen-sm;
+@screen-sm-max          : (@screen-sm-min - 1);
+
+// Medium screen / desktop
+@screen-md              : 768px;
+@screen-md-min          : @screen-md;
+@screen-md-max          : (@screen-md-min - 1);
+
+// Large screen / wide desktop
+@screen-lg              : 992px;
+@screen-lg-min          : @screen-lg;
+@screen-lg-max          : (@screen-lg-min - 1);
+
+// Extra large screen / full hd
+@screen-xl              : 1200px;
+@screen-xl-min          : @screen-xl;
+@screen-xl-max          : (@screen-xl-min - 1);
+
+// Extra extra large screen / large descktop
+@screen-xxl             : 1600px;
+@screen-xxl-min         : @screen-xxl;
+@screen-xxl-max         : (@screen-xxl-min - 1);
+
+// Z-index
+@zindex-spin            : 8;
+@zindex-affix           : 10;
+@zindex-back-top        : 10;
+@zindex-select          : 900;
+@zindex-modal           : 1000;
+@zindex-drawer          : 1000;
+@zindex-message         : 1010;
+@zindex-notification    : 1010;
+@zindex-tooltip         : 1060;
+@zindex-transfer        : 1060;
+@zindex-loading-bar     : 2000;
+@zindex-spin-fullscreen : 2010;
+
+// Animation
+@animation-time         : .3s;
+@transition-time        : .2s;
+@ease-in-out            : ease-in-out;
+
+// Slider
+@slider-color              : tint(@primary-color, 20%);
+@slider-height             : 4px;
+@slider-margin             : 16px 0;
+@slider-button-wrap-size   : 18px;
+@slider-button-wrap-offset : -4px;
+@slider-disabled-color     : #ccc;
+
+// Avatar
+@avatar-size-base: 32px;
+@avatar-size-lg: 40px;
+@avatar-size-sm: 24px;
+@avatar-font-size-base: 18px;
+@avatar-font-size-lg: 24px;
+@avatar-font-size-sm: 14px;
+@avatar-bg: #ccc;
+@avatar-color: #fff;
+@avatar-border-radius: @border-radius-small;
+
+// Anchor
+@anchor-border-width: 2px;
+
+// List
+// ---
+@list-header-background: transparent;
+@list-footer-background: transparent;
+@list-empty-text-padding: @padding-md;
+@list-item-padding: @padding-sm 0;
+@list-item-meta-margin-bottom: @padding-md;
+@list-item-meta-avatar-margin-right: @padding-md;
+@list-item-meta-title-margin-bottom: @padding-sm;

src/styles/index.less

@@ -0,0 +1,5 @@
+@import "./custom";
+@import "./mixins/index";
+@import "./common/index";
+@import "./animation/index";
+@import "./components/index";

src/styles/mixins/button.less

@@ -0,0 +1,429 @@
+.button-size(@padding; @font-size; @border-radius) {
+    padding: @padding;
+    font-size: @font-size;
+    border-radius: @border-radius;
+}
+
+.button-color(@color; @background; @border) {
+    color: @color;
+    background-color: @background;
+    border-color: @border;
+    // a inside Button which only work in Chrome
+    // http://stackoverflow.com/a/17253457
+    > a:only-child {
+        color: currentColor;
+        &:after {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            bottom: 0;
+            right: 0;
+            background: transparent;
+        }
+    }
+}
+
+.button-variant(@color; @background; @border) {
+    .button-color(@color; @background; @border);
+
+    &:hover
+    //&:focus
+    {
+        .button-color(tint(@color, 20%); tint(@background, 20%); tint(@border, 20%));
+    }
+    &:active,
+    &.active {
+        .button-color(shade(@color, 5%); shade(@background, 5%); shade(@background, 5%));
+    }
+
+    &.disabled,
+    &[disabled],
+    fieldset[disabled] & {
+        &,
+        &:hover,
+        &:focus,
+        &:active,
+        &.active {
+            .button-color(@btn-disable-color; @btn-disable-bg; @btn-disable-border);
+        }
+    }
+}
+
+.button-group-base(@btnClassName) {
+    position: relative;
+    display: inline-block;
+    vertical-align: middle;
+    > .@{btnClassName} {
+        position: relative;
+        float: left;
+        &:hover,
+        //&:focus,
+        &:active,
+        &.active {
+            z-index: 2;
+        }
+    }
+
+    & .@{btnClassName}-icon-only .ivu-icon {
+        font-size: 13px;
+        position: relative;
+        //top: 1px;
+    }
+
+    &-large .@{btnClassName}-icon-only .ivu-icon{
+        font-size: 15px;
+        //top: 2px;
+    }
+
+    &-small .@{btnClassName}-icon-only .ivu-icon{
+        font-size: 12px;
+        //top: 0;
+    }
+
+    &-circle .@{btnClassName} {
+        border-radius: @btn-circle-size;
+    }
+
+    // size
+    &-large&-circle .@{btnClassName} {
+        border-radius: @btn-circle-size-large;
+    }
+    &-large {
+        & > .@{btnClassName} {
+            .button-size(@btn-padding-large; @btn-font-size-large; @btn-border-radius);
+        }
+    }
+
+    &-small&-circle .@{btnClassName} {
+        border-radius: @btn-circle-size-small;
+    }
+    &-small {
+        & > .@{btnClassName}{
+            .button-size(@btn-padding-small; @btn-font-size; @btn-border-radius-small);
+            > .@{css-prefix-iconfont} {
+                font-size: @btn-font-size;
+            }
+        }
+    }
+
+    //&-small .@{btnClassName}-icon-only{
+    //    .button-size(@btn-padding-small-icon; @btn-font-size; @btn-border-radius-small);
+    //}
+    //&-large .@{btnClassName}-icon-only{
+    //    .button-size(@btn-padding-large-icon; @btn-font-size-large; @btn-border-radius);
+    //}
+}
+
+.button-group-vertical-base(@btnClassName) {
+    display: inline-block;
+    vertical-align: middle;
+    > .@{btnClassName} {
+        display: block;
+        width: 100%;
+        max-width: 100%;
+        float: none;
+    }
+}
+
+.btn() {
+    display: inline-block;
+    margin-bottom: 0;
+    font-weight: @btn-font-weight;
+    text-align: center;
+    vertical-align: middle;
+    touch-action: manipulation;
+    cursor: pointer;
+    background-image: none;
+    border: 1px solid transparent;
+    white-space: nowrap;
+    line-height: @line-height-base;
+    user-select: none;
+    .button-size(@btn-padding-base; @btn-font-size; @btn-border-radius);
+    //transform: translate3d(0, 0, 0);
+    //transition: all @transition-time linear;
+    transition: color @transition-time linear, background-color @transition-time linear, border @transition-time linear, box-shadow @transition-time linear;
+
+    > .@{css-prefix-iconfont} {
+        line-height: @line-height-base;
+        vertical-align: middle;
+    }
+
+    &-icon-only&-circle > .@{css-prefix-iconfont}{
+        vertical-align: baseline;
+    }
+
+    > span{
+        vertical-align: middle;
+    }
+
+    &,
+    &:active,
+    &:focus {
+        outline: 0;
+    }
+
+    &:not([disabled]):hover {
+        text-decoration: none;
+    }
+
+    &:not([disabled]):active {
+        outline: 0;
+        // transition: none;  // 如果不注释此行，那么active会和focus同时触发，此时focus的开始动画transition会无效
+    }
+
+    &.disabled,
+    &[disabled] {
+        cursor: @cursor-disabled;
+        > * {
+            pointer-events: none;
+        }
+    }
+
+    &-large {
+        .button-size(@btn-padding-large; @btn-font-size-large; @btn-border-radius);
+    }
+
+    &-small {
+        .button-size(@btn-padding-small; @btn-font-size; @btn-border-radius-small);
+    }
+
+    &-icon-only{
+        .button-size(@btn-padding-base-icon; @btn-font-size; @btn-border-radius);
+    }
+    &-icon-only&-small{
+        .button-size(@btn-padding-small-icon; @btn-font-size; @btn-border-radius-small);
+    }
+    &-icon-only&-large{
+        .button-size(@btn-padding-large-icon; @btn-font-size-large; @btn-border-radius);
+    }
+}
+
+// Default
+.btn-default() {
+    .button-variant(@btn-default-color; @btn-default-bg; @btn-default-border);
+
+    &:hover
+    //&:focus
+    {
+        .button-color(tint(@primary-color, 20%); white; tint(@primary-color, 20%));
+    }
+    &:active,
+    &.active {
+        .button-color(shade(@primary-color, 5%); white; shade(@primary-color, 5%));
+    }
+    .active-btn-color(@primary-color);
+}
+
+// Primary
+.btn-primary() {
+    .button-variant(@btn-primary-color; @btn-primary-bg; @primary-color);
+
+    &:hover,
+    //&:focus,
+    &:active,
+    &.active {
+        color: @btn-primary-color;
+    }
+    .active-btn-color(@primary-color);
+}
+
+// Ghost
+.btn-ghost() {
+    .button-variant(@btn-ghost-color, @btn-ghost-bg, @btn-ghost-border);
+
+    &:hover
+    //&:focus
+    {
+        .button-color(tint(@primary-color, 20%); @btn-ghost-bg; tint(@primary-color, 20%));
+    }
+    &:active,
+    &.active {
+        .button-color(shade(@primary-color, 5%); @btn-ghost-bg; shade(@primary-color, 5%));
+    }
+    .active-btn-color(@primary-color);
+}
+
+// Dashed
+.btn-dashed() {
+    .button-variant(@btn-ghost-color, @btn-ghost-bg, @btn-ghost-border);
+    border-style: dashed;
+
+    &:hover
+    //&:focus
+    {
+        .button-color(tint(@primary-color, 20%); @btn-ghost-bg; tint(@primary-color, 20%));
+    }
+    &:active,
+    &.active {
+        .button-color(shade(@primary-color, 5%); @btn-ghost-bg; shade(@primary-color, 5%));
+    }
+    .active-btn-color(@primary-color);
+}
+
+// Text
+.btn-text() {
+    .button-variant(@btn-ghost-color, transparent, transparent);
+
+    // for disabled
+    &.disabled,
+    &[disabled],
+    fieldset[disabled] & {
+        &,
+        &:hover,
+        &:focus,
+        &:active,
+        &.active {
+            .button-color(@btn-disable-color; @btn-ghost-bg; transparent);
+        }
+    }
+
+    &:hover
+        //&:focus
+    {
+        .button-color(tint(@primary-color, 20%); @btn-ghost-bg; transparent);
+    }
+    &:active,
+    &.active {
+        .button-color(shade(@primary-color, 5%); @btn-ghost-bg; transparent);
+    }
+    .active-btn-color(@primary-color);
+}
+
+// Color
+// for tabindex
+.active-btn-color(@color) {
+    &:focus {
+        box-shadow: 0 0 0 2px fade(@color, 20%);
+    }
+}
+.btn-color(@color) {
+    .button-variant(@btn-primary-color; @color; @color);
+
+    &:hover,
+        //&:focus,
+    &:active,
+    &.active {
+        color: @btn-primary-color;
+    }
+
+    .active-btn-color(@color);
+}
+
+// Circle for Icon
+.btn-circle(@btnClassName: ivu-btn) {
+    border-radius: @btn-circle-size;
+
+    &.@{btnClassName}-large{
+        border-radius: @btn-circle-size-large;
+    }
+
+    &.@{btnClassName}-size{
+        border-radius: @btn-circle-size-small;
+    }
+
+    &.@{btnClassName}-icon-only{
+        .square(@btn-circle-size);
+        .button-size(0; @font-size-base + 2; 50%);
+
+        &.@{btnClassName}-large{
+            .square(@btn-circle-size-large);
+            .button-size(0; @btn-font-size-large + 2; 50%);
+        }
+
+        &.@{btnClassName}-small{
+            .square(@btn-circle-size-small);
+            .button-size(0; @font-size-base; 50%);
+        }
+    }
+}
+
+// Group
+.btn-group(@btnClassName: ivu-btn) {
+    .button-group-base(@btnClassName);
+
+    .@{btnClassName} + .@{btnClassName},
+    .@{btnClassName} + &,
+    & + .@{btnClassName},
+    & + & {
+        margin-left: -1px;
+    }
+
+    .@{btnClassName}:not(:first-child):not(:last-child) {
+        border-radius: 0;
+    }
+
+    &:not(&-vertical) > .@{btnClassName}:first-child {
+        margin-left: 0;
+        &:not(:last-child) {
+            border-bottom-right-radius: 0;
+            border-top-right-radius: 0;
+        }
+    }
+
+    &:not(&-vertical) > .@{btnClassName}:last-child:not(:first-child) {
+        border-bottom-left-radius: 0;
+        border-top-left-radius: 0;
+    }
+
+    & > & {
+        float: left;
+    }
+
+    & > &:not(:first-child):not(:last-child) > .@{btnClassName} {
+        border-radius: 0;
+    }
+
+    &:not(&-vertical) > &:first-child:not(:last-child) {
+        > .@{btnClassName}:last-child {
+            border-bottom-right-radius: 0;
+            border-top-right-radius: 0;
+            padding-right: 8px;
+        }
+    }
+
+    &:not(&-vertical) > &:last-child:not(:first-child) > .@{btnClassName}:first-child {
+        border-bottom-left-radius: 0;
+        border-top-left-radius: 0;
+        padding-left: 8px;
+    }
+}
+
+.btn-group-vertical(@btnClassName: ivu-btn) {
+    .button-group-vertical-base(@btnClassName);
+
+    .@{btnClassName} + .@{btnClassName},
+    .@{btnClassName} + &,
+    & + .@{btnClassName},
+    & + & {
+        margin-top: -1px;
+        margin-left: 0px;
+    }
+
+    > .@{btnClassName}:first-child {
+        margin-top: 0;
+        &:not(:last-child) {
+            border-bottom-left-radius: 0;
+            border-bottom-right-radius: 0;
+        }
+    }
+
+    > .@{btnClassName}:last-child:not(:first-child) {
+        border-top-left-radius: 0;
+        border-top-right-radius: 0;
+    }
+
+    & > &:first-child:not(:last-child) {
+        > .@{btnClassName}:last-child {
+            border-bottom-left-radius: 0;
+            border-bottom-right-radius: 0;
+            padding-bottom: 8px;
+        }
+    }
+
+    & > &:last-child:not(:first-child) > .@{btnClassName}:first-child {
+        border-bottom-right-radius: 0;
+        border-bottom-left-radius: 0;
+        padding-top: 8px;
+    }
+}

src/styles/mixins/caret.less

@@ -0,0 +1,37 @@
+// sortable
+.sortable() {
+    display: inline-block;
+    width: 14px;
+    height: 12px;
+    margin-top: -1px;
+    vertical-align: middle;
+    overflow: hidden;
+    cursor: pointer;
+    position: relative;
+
+    i {
+        display: block;
+        height: 6px;
+        line-height: 6px;
+        overflow: hidden;
+        position: absolute;
+        color: @btn-disable-color;
+        transition: color @transition-time @ease-in-out;
+        font-size: @font-size-large;
+
+        &:hover{
+            color: inherit;
+        }
+
+        &.on{
+            color: @primary-color;
+        }
+
+        &:first-child{
+            top: 0;
+        }
+        &:last-child{
+            bottom: 0;
+        }
+    }
+}

src/styles/mixins/checkbox.less

@@ -0,0 +1,267 @@
+.checkboxFn(@checkbox-prefix-cls: ~"@{css-prefix}checkbox") {
+    @checkbox-inner-prefix-cls: ~"@{checkbox-prefix-cls}-inner";
+
+    .@{checkbox-prefix-cls}-focus {
+        box-shadow: 0 0 0 2px fade(@primary-color, 20%);
+        z-index: 1;
+    }
+
+    // 普通状态
+    .@{checkbox-prefix-cls} {
+        display: inline-block;
+        vertical-align: middle;
+        white-space: nowrap;
+        cursor: pointer;
+        //outline: none;
+        line-height: 1;
+        position: relative;
+
+        &-disabled{
+            cursor: @cursor-disabled;
+        }
+
+        &:hover {
+            .@{checkbox-inner-prefix-cls} {
+                border-color: #bcbcbc;
+            }
+        }
+
+        &-inner {
+            display: inline-block;
+            width: 14px;
+            height: 14px;
+            position: relative;
+            top: 0;
+            left: 0;
+            border: 1px solid @border-color-base;
+            border-radius: 2px;
+            background-color: #fff;
+            transition: border-color @transition-time @ease-in-out, background-color @transition-time @ease-in-out, box-shadow @transition-time @ease-in-out;
+
+            &:after {
+                content: '';
+                display: table;
+                width: 4px;
+                height: 8px;
+                position: absolute;
+                top: 1px;
+                left: 4px;
+                border: 2px solid #fff;
+                border-top: 0;
+                border-left: 0;
+                transform: rotate(45deg) scale(0);
+                transition: all @transition-time @ease-in-out;
+            }
+        }
+        &-large{
+            & .@{checkbox-inner-prefix-cls} {
+                width: 16px;
+                height: 16px;
+                &:after{
+                    width: 5px;
+                    height: 9px;
+                }
+            }
+        }
+        &-small{
+            font-size: 12px;
+            & .@{checkbox-inner-prefix-cls} {
+                width: 12px;
+                height: 12px;
+                &:after{
+                    top: 0;
+                    left: 3px;
+                }
+            }
+        }
+
+        &-input {
+            width: 100%;
+            height: 100%;
+            position: absolute;
+            top: 0;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            z-index: 1;
+            cursor: pointer;
+            opacity: 0;
+
+            &[disabled]{
+                cursor: @cursor-disabled;
+            }
+        }
+    }
+
+    // 选中状态
+    .@{checkbox-prefix-cls}-checked {
+
+        &:hover {
+            .@{checkbox-inner-prefix-cls} {
+                border-color: @primary-color;
+            }
+        }
+
+        .@{checkbox-inner-prefix-cls} {
+            border-color: @primary-color;
+            background-color: @primary-color;
+
+            &:after {
+                content: '';
+                display: table;
+                width: 4px;
+                height: 8px;
+                position: absolute;
+                top: 1px;
+                left: 4px;
+                border: 2px solid #fff;
+                border-top: 0;
+                border-left: 0;
+                transform: rotate(45deg) scale(1);
+                transition: all @transition-time @ease-in-out;
+            }
+        }
+    }
+    .@{checkbox-prefix-cls}-large{
+        .@{checkbox-prefix-cls}-checked{
+            .@{checkbox-inner-prefix-cls} {
+                &:after{
+                    width: 5px;
+                    height: 9px;
+                }
+            }
+        }
+    }
+    .@{checkbox-prefix-cls}-small{
+        .@{checkbox-prefix-cls}-checked{
+            .@{checkbox-inner-prefix-cls} {
+                &:after{
+                    top: 0;
+                    left: 3px;
+                }
+            }
+        }
+    }
+
+    // 禁用
+    .@{checkbox-prefix-cls}-disabled {
+        &.@{checkbox-prefix-cls}-checked {
+            &:hover {
+                .@{checkbox-inner-prefix-cls} {
+                    border-color: @border-color-base;
+                }
+            }
+
+            .@{checkbox-inner-prefix-cls} {
+                background-color: #f3f3f3;
+                border-color: @border-color-base;
+
+                &:after {
+                    animation-name: none;
+                    border-color: #ccc;
+                }
+            }
+        }
+
+        &:hover {
+            .@{checkbox-inner-prefix-cls} {
+                border-color: @border-color-base;
+            }
+        }
+
+        .@{checkbox-inner-prefix-cls} {
+            border-color: @border-color-base;
+            background-color: #f3f3f3;
+            &:after {
+                animation-name: none;
+                border-color: #f3f3f3;
+            }
+        }
+
+        .@{checkbox-inner-prefix-cls}-input {
+            cursor: default;
+        }
+
+        & + span {
+            color: #ccc;
+            cursor: @cursor-disabled;
+        }
+    }
+
+    // 半选状态
+    .@{checkbox-prefix-cls}-indeterminate{
+        .@{checkbox-inner-prefix-cls}:after{
+            content: '';
+            width: 8px;
+            height: 1px;
+            transform: scale(1);
+            position: absolute;
+            left: 2px;
+            top: 5px;
+        }
+
+        &:hover {
+            .@{checkbox-inner-prefix-cls} {
+                border-color: @primary-color;
+            }
+        }
+        .@{checkbox-inner-prefix-cls}{
+            background-color: @primary-color;
+            border-color: @primary-color;
+        }
+        &.@{checkbox-prefix-cls}-disabled{
+            .@{checkbox-inner-prefix-cls}{
+                background-color: #f3f3f3;
+                border-color: @border-color-base;
+            }
+            .@{checkbox-inner-prefix-cls}:after{
+                border-color: @input-placeholder-color;
+            }
+        }
+    }
+    .@{checkbox-prefix-cls}-large {
+        .@{checkbox-prefix-cls}-indeterminate{
+            .@{checkbox-inner-prefix-cls}:after{
+                width: 10px;
+                top: 6px;
+            }
+        }
+    }
+    .@{checkbox-prefix-cls}-small {
+        .@{checkbox-prefix-cls}-indeterminate{
+            .@{checkbox-inner-prefix-cls}:after{
+                width: 6px;
+                top: 4px;
+            }
+        }
+    }
+
+    .@{checkbox-prefix-cls}-wrapper {
+        cursor: pointer;
+        font-size: @font-size-small;
+        display: inline-block;
+        margin-right: 8px;
+        //outline: none;
+
+        &-disabled{
+            cursor: @cursor-disabled;
+        }
+
+        &.@{checkbox-prefix-cls}-large{
+            font-size: @font-size-base;
+        }
+    }
+
+    .@{checkbox-prefix-cls}-wrapper + span,
+    .@{checkbox-prefix-cls} + span {
+        //margin-left: 4px;
+        margin-right: 4px;
+    }
+
+    .@{checkbox-prefix-cls}-group {
+        font-size: @font-size-base;
+        &-item {
+            display: inline-block;
+        }
+    }
+}

src/styles/mixins/clearfix.less

@@ -0,0 +1,14 @@
+.clearfix() {
+    zoom: 1;
+    &:before,
+    &:after {
+        content: "";
+        display: table;
+    }
+    &:after {
+        clear: both;
+        visibility: hidden;
+        font-size: 0;
+        height: 0;
+    }
+}

src/styles/mixins/close.less

@@ -0,0 +1,10 @@
+.close-base(@top: 0, @icon-font-size: 22px) {
+    font-size: @icon-font-size;
+    color: @legend-color;
+    transition: color @transition-time ease;
+    position: relative;
+    top: @top;
+    &:hover {
+        color: #444;
+    }
+}

src/styles/mixins/common.less

@@ -0,0 +1,38 @@
+.placeholder(@color: @input-placeholder-color) {
+    // Firefox
+    &::-moz-placeholder {
+        color: @color;
+        opacity: 1; // Override Firefox's unusual default opacity; see https://github.com/twbs/bootstrap/pull/11526
+    }
+    // Internet Explorer 10+
+    &:-ms-input-placeholder {
+        color: @color;
+    }
+    // Safari and Chrome
+    &::-webkit-input-placeholder {
+        color: @color;
+    }
+}
+
+// for select and input like component's arrow
+.inner-arrow() {
+    position: absolute;
+    top: 50%;
+    right: 8px;
+    line-height: 1;
+    transform: translateY(-50%);
+    font-size: @font-size-base;
+    color: @subsidiary-color;
+    transition: all @transition-time @ease-in-out;
+}
+
+.reset-component() {
+    font-family: @font-family;
+    font-size: @font-size-base;
+    line-height: @line-height-base;
+    color: @text-color;
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+}

src/styles/mixins/content.less

@@ -0,0 +1,38 @@
+@icon-prefix-cls: ~"@{css-prefix}icon";
+
+.content-header() {
+    border-bottom: 1px solid @border-color-split;
+    padding: 14px 16px;
+    line-height: 1;
+
+    p,
+    &-inner
+    {
+        display: inline-block;
+        width: 100%;
+        height: 20px;
+        line-height: 20px;
+        font-size: @font-size-base;
+        color: @title-color;
+        font-weight: bold;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+    p i, p span{
+        vertical-align: middle;
+    }
+}
+
+.content-close(@top: 0, @icon-font-size: 22px) {
+    font-size: @font-size-small;
+    position: absolute;
+    right: 8px;
+    top: 8px;
+    overflow: hidden;
+    cursor: pointer;
+
+    .@{icon-prefix-cls}-ios-close {
+        .close-base(@top, @icon-font-size);
+    }
+}

src/styles/mixins/index.less

@@ -0,0 +1,14 @@
+@import "common";
+@import "clearfix";
+@import "button";
+@import "layout";
+@import "size";
+@import "loading";
+@import "close";
+@import "checkbox";
+@import "input";
+@import "mask";
+@import "content";  // card、modal
+@import "tooltip";
+@import "select";
+@import "caret";

src/styles/mixins/input.less

@@ -0,0 +1,269 @@
+.hover(@color: @input-hover-border-color) {
+    border-color: tint(@color, 20%);
+}
+.hover-error() {
+    border-color: @error-color;
+}
+
+.active(@color: @input-hover-border-color) {
+    border-color: tint(@color, 20%);
+    outline: 0;
+    box-shadow: 0 0 0 2px fade(@color, 20%);
+}
+.active-error() {
+    border-color: @error-color;
+    outline: 0;
+    box-shadow: 0 0 0 2px fade(@error-color, 20%);
+}
+
+.disabled() {
+    background-color: @input-disabled-bg;
+    opacity: 1;
+    cursor: @cursor-disabled;
+    color: #ccc;
+    &:hover {
+        .hover(@input-border-color);
+    }
+}
+
+.input-large() {
+    font-size: @font-size-base;
+    padding: @input-padding-vertical-large @input-padding-horizontal;
+    height: @input-height-large;
+}
+
+.input-small() {
+    padding: @input-padding-vertical-small @input-padding-horizontal;
+    height: @input-height-small;
+    border-radius: @btn-border-radius-small;
+}
+
+.input() {
+    display: inline-block;
+    width: 100%;
+    height: @input-height-base;
+    line-height: @line-height-base;
+    padding: @input-padding-vertical-base @input-padding-horizontal;
+    font-size: @font-size-small;
+    border: 1px solid @input-border-color;
+    border-radius: @btn-border-radius;
+    color: @input-color;
+    background-color: @input-bg;
+    background-image: none;
+    position: relative;
+    cursor: text;
+    .placeholder();
+    transition: border @transition-time @ease-in-out, background @transition-time @ease-in-out, box-shadow @transition-time @ease-in-out;
+
+    &:hover {
+        .hover();
+    }
+
+    &:focus {
+        .active();
+    }
+
+    &[disabled],
+    fieldset[disabled] & {
+        .disabled();
+    }
+
+    // Reset height for textarea
+    textarea& {
+        max-width: 100%;
+        height: auto;
+        min-height: @input-height-base;
+        vertical-align: bottom;
+        font-size: @font-size-base;
+    }
+
+    // Size
+    &-large {
+        .input-large();
+    }
+
+    &-small {
+        .input-small();
+    }
+}
+
+.input-error() {
+    border: 1px solid @error-color;
+    &:hover {
+        .hover-error;
+    }
+    &:focus {
+        .active-error;
+    }
+}
+
+.input-group(@inputClass) {
+    display: table;
+    width: 100%;
+    border-collapse: separate;
+    position: relative;
+    font-size: @font-size-small;
+    top: 1px; // fixed when using in form inline,
+
+    &-large{
+        font-size: @font-size-base;
+    }
+
+    // Undo padding and float of grid classes
+    &[class*="col-"] {
+        float: none;
+        padding-left: 0;
+        padding-right: 0;
+    }
+
+    > [class*="col-"] {
+        padding-right: 8px;
+    }
+
+    &-prepend,
+    &-append,
+    > .@{inputClass} {
+        display: table-cell;
+
+        //&:not(:first-child):not(:last-child) {
+        //    border-radius: 0;
+        //}
+    }
+    &-with-prepend .@{inputClass},
+    &-with-prepend&-small .@{inputClass}
+    {
+        border-top-left-radius: 0;
+        border-bottom-left-radius: 0;
+    }
+    &-with-append .@{inputClass},
+    &-with-append&-small .@{inputClass}
+    {
+        border-top-right-radius: 0;
+        border-bottom-right-radius: 0;
+    }
+
+    &-prepend .@{css-prefix}btn,
+    &-append .@{css-prefix}btn
+    {
+        border-color: transparent;
+        background-color: transparent;
+        color: inherit;
+        margin: -(@input-padding-vertical-base + 2) (-@input-padding-horizontal);
+    }
+
+    &-prepend,
+    &-append
+    {
+        width: 1px; // To make addon/wrap as small as possible
+        white-space: nowrap;
+        vertical-align: middle;
+    }
+
+    .@{inputClass} {
+        width: 100%;
+        float: left;
+        margin-bottom: 0;
+        position: relative;
+        z-index: 2;
+    }
+
+    &-prepend,
+    &-append
+    {
+        padding: @input-padding-vertical-base @input-padding-horizontal;
+        font-size: inherit;
+        font-weight: normal;
+        line-height: 1;
+        color: @input-color;
+        text-align: center;
+        background-color: @input-group-bg;
+        border: 1px solid @input-border-color;
+        border-radius: @btn-border-radius;
+
+        // Reset Select's style in addon
+        .@{css-prefix}select {
+            margin: -(@input-padding-vertical-base + 1) (-@input-padding-horizontal);  // lesshint spaceAroundOperator: false
+
+            &-selection {
+                background-color: inherit;
+                margin: -1px;
+                border: 1px solid transparent;
+            }
+
+            &-visible .@{css-prefix}select-selection{
+                box-shadow: none;
+            }
+        }
+    }
+
+    // Reset rounded corners
+    > span > .@{inputClass}:first-child,
+    > .@{inputClass}:first-child,
+    &-prepend
+    {
+        border-bottom-right-radius: 0 !important;
+        border-top-right-radius: 0 !important;
+
+        // Reset Select's style in addon
+        .@{css-prefix}-select .@{css-prefix}-select-selection {
+            border-bottom-right-radius: 0;
+            border-top-right-radius: 0;
+        }
+    }
+
+    &-prepend {
+        border-right: 0;
+    }
+    &-append {
+        border-left: 0;
+    }
+
+    > .@{inputClass}:last-child,
+    &-append
+    {
+        border-bottom-left-radius: 0 !important;
+        border-top-left-radius: 0 !important;
+
+        // Reset Select's style in addon
+        .@{css-prefix}-select .@{css-prefix}-select-selection {
+            border-bottom-left-radius: 0;
+            border-top-left-radius: 0;
+        }
+    }
+
+    // Sizing options
+    &-large .@{inputClass},
+    &-large > &-prepend,
+    &-large > &-append
+    {
+        .input-large();
+    }
+
+    &-small .@{inputClass},
+    &-small > &-prepend,
+    &-small > &-append
+    {
+        .input-small();
+    }
+}
+
+.input-group-error{
+    &-prepend,
+    &-append
+    {
+        background-color: #fff;
+        border: 1px solid @error-color;
+        .@{css-prefix}select {
+            &-selection {
+                background-color: inherit;
+                border: 1px solid transparent;
+            }
+        }
+    }
+    &-prepend {
+        border-right: 0;
+    }
+    &-append {
+        border-left: 0;
+    }
+}

src/styles/mixins/layout.less

@@ -0,0 +1,71 @@
+@row-prefix-cls: ~"@{css-prefix}row";
+@col-prefix-cls: ~"@{css-prefix}col";
+
+.make-row(@gutter: @grid-gutter-width) {
+    position: relative;
+    margin-left: (@gutter / -2);
+    margin-right: (@gutter / -2);
+    height: auto;
+    .clearfix;
+}
+
+.float-grid-columns(@class) {
+    .col(@index) { // initial
+        @item: ~".@{col-prefix-cls}-span@{class}-@{index}";
+        .col((@index + 1), @item);
+    }
+    .col(@index, @list) when (@index =< @grid-columns) { // general
+        @item: ~".@{col-prefix-cls}-span@{class}-@{index}";
+        .col((@index + 1), ~"@{list}, @{item}");
+    }
+    .col(@index, @list) when (@index > @grid-columns) { // terminal
+        @{list} {
+            float: left;
+            flex: 0 0 auto;
+        }
+    }
+    .col(1); // kickstart it
+}
+
+.loop-grid-columns(@index, @class) when (@index > 0) {
+    .@{col-prefix-cls}-span@{class}-@{index} {
+        display: block;
+        width: percentage((@index / @grid-columns));
+    }
+    .@{col-prefix-cls}@{class}-push-@{index} {
+        left: percentage((@index / @grid-columns));
+    }
+    .@{col-prefix-cls}@{class}-pull-@{index} {
+        right: percentage((@index / @grid-columns));
+    }
+    .@{col-prefix-cls}@{class}-offset-@{index} {
+        margin-left: percentage((@index / @grid-columns));
+    }
+    .@{col-prefix-cls}@{class}-order-@{index} {
+        order: @index;
+    }
+    .loop-grid-columns((@index - 1), @class);
+}
+
+.loop-grid-columns(@index, @class) when (@index = 0) {
+    .@{col-prefix-cls}-span@{class}-@{index} {
+        display: none;
+    }
+    .@{col-prefix-cls}@{class}-push-@{index} {
+        left: auto;
+    }
+    .@{col-prefix-cls}@{class}-pull-@{index} {
+        right: auto;
+    }
+    .@{col-prefix-cls}@{class}-offset-@{index} {
+        margin-left: 0;
+    }
+    .@{col-prefix-cls}@{class}-order-@{index} {
+        order: 0;
+    }
+}
+
+.make-grid(@class: ~'') {
+    .float-grid-columns(@class);
+    .loop-grid-columns(@grid-columns, @class);
+}

src/styles/mixins/loading.less

@@ -0,0 +1,10 @@
+// Loading for loop
+.ivu-load-loop{
+    animation: ani-load-loop 1s linear infinite;
+}
+
+@keyframes ani-load-loop {
+    from { transform: rotate(0deg);}
+    50%  { transform: rotate(180deg);}
+    to   { transform: rotate(360deg);}
+}

src/styles/mixins/mask.less

@@ -0,0 +1,14 @@
+.mask() {
+    position: fixed;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    background-color: rgba(55, 55, 55, 0.6);
+    height: 100%;
+    z-index: @zindex-modal;
+
+    &-hidden {
+        display: none;
+    }
+}

src/styles/mixins/select.less

@@ -0,0 +1,69 @@
+.select-item(@size-class, @item-class) {
+    .@{item-class} {
+        margin: 0;
+        line-height: normal;
+        padding: 7px 16px;
+        clear: both;
+        color: @text-color;
+        font-size: @font-size-small !important;
+        white-space: nowrap;
+        list-style: none;
+        cursor: pointer;
+        transition: background @transition-time @ease-in-out;
+
+        &:hover{
+            background: @background-color-select-hover;
+        }
+
+        &-focus {
+            background: @background-color-select-hover;
+        }
+
+        &-disabled {
+            color: @btn-disable-color;
+            cursor: @cursor-disabled;
+
+            &:hover {
+                color: @btn-disable-color;
+                background-color: #fff;
+                cursor: @cursor-disabled;
+            }
+        }
+
+        &-selected ,&-selected:hover{
+            color: @primary-color;
+            //background: @selected-color;
+        }
+
+        &-selected&-focus {
+            //background: shade(@selected-color, 10%);
+        }
+
+        &-divided{
+            margin-top: 5px;
+            border-top: 1px solid @border-color-split;
+            &:before{
+                content: '';
+                height: 5px;
+                display: block;
+                margin: 0 -16px;
+                background-color: #fff;
+                position: relative;
+                top: -7px;
+            }
+        }
+    }
+
+    .@{size-class}-large .@{item-class} {
+        padding: 7px 16px 8px;
+        font-size: @font-size-base !important;
+    }
+    // http://browserhacks.com/
+    // https://bugzilla.mozilla.org/show_bug.cgi?id=488725
+    // fixed #1224 #1143 #1127
+    @-moz-document url-prefix() {
+        .@{item-class} {
+            white-space: normal;
+        }
+    }
+}

src/styles/mixins/size.less

@@ -0,0 +1,20 @@
+.size(@width; @height) {
+    width: @width;
+    height: @height;
+}
+
+.square(@size) {
+    .size(@size; @size);
+}
+
+// fix chrome 12px bug, support ie
+.iconfont-size-under-12px(@size, @rotate: 0deg) {
+    display: inline-block;
+    @font-scale: unit(@size / @font-size-base);
+    font-size: @font-size-base;
+    font-size: ~"@{size} \9"; // ie8-9
+    transform: scale(@font-scale) rotate(@rotate);
+    :root & {
+        font-size: @font-size-base; // reset ie9 and above
+    }
+}

src/styles/mixins/tooltip.less

@@ -0,0 +1,85 @@
+.popper(@arrow, @arrow-width, @arrow-distance, @bg){
+    display: block;
+    visibility: visible;
+    font-size: @font-size-small;
+    line-height: @line-height-base;
+    position: absolute;
+    z-index: @zindex-tooltip;
+
+    &[x-placement^="top"] {
+        padding: @arrow-width 0 @arrow-distance 0;
+    }
+    &[x-placement^="right"] {
+        padding: 0 @arrow-width 0 @arrow-distance;
+    }
+    &[x-placement^="bottom"] {
+        padding: @arrow-distance 0 @arrow-width 0;
+    }
+    &[x-placement^="left"] {
+        padding: 0 @arrow-distance 0 @arrow-width;
+    }
+
+    &[x-placement^="top"] .@{arrow} {
+        bottom: @arrow-distance - @arrow-width;
+        border-width: @arrow-width @arrow-width 0;
+        border-top-color: @bg;
+    }
+    &[x-placement="top"] .@{arrow} {
+        left: 50%;
+        margin-left: -@arrow-width;
+    }
+    &[x-placement="top-start"] .@{arrow} {
+        left: 16px;
+    }
+    &[x-placement="top-end"] .@{arrow} {
+        right: 16px;
+    }
+
+    &[x-placement^="right"] .@{arrow} {
+        left: @arrow-distance - @arrow-width;
+        border-width: @arrow-width @arrow-width @arrow-width 0;
+        border-right-color: @bg;
+    }
+    &[x-placement="right"] .@{arrow} {
+        top: 50%;
+        margin-top: -@arrow-width;
+    }
+    &[x-placement="right-start"] .@{arrow} {
+        top: 8px;
+    }
+    &[x-placement="right-end"] .@{arrow} {
+        bottom: 8px;
+    }
+
+    &[x-placement^="left"] .@{arrow} {
+        right: @arrow-distance - @arrow-width;
+        border-width: @arrow-width 0 @arrow-width @arrow-width;
+        border-left-color: @bg;
+    }
+    &[x-placement="left"] .@{arrow} {
+        top: 50%;
+        margin-top: -@arrow-width;
+    }
+    &[x-placement="left-start"] .@{arrow} {
+        top: 8px;
+    }
+    &[x-placement="left-end"] .@{arrow} {
+        bottom: 8px;
+    }
+
+    &[x-placement^="bottom"] .@{arrow} {
+        top: @arrow-distance - @arrow-width;
+        border-width: 0 @arrow-width @arrow-width;
+        border-bottom-color: @bg;
+    }
+    &[x-placement="bottom"] .@{arrow} {
+        left: 50%;
+        margin-left: -@arrow-width;
+    }
+    &[x-placement="bottom-start"] .@{arrow} {
+        left: 16px;
+    }
+    &[x-placement="bottom-end"] .@{arrow} {
+        right: 16px;
+    }
+}