init

init

styles/components/affix.less

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

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

styles/components/badge.less

@@ -0,0 +1,55 @@
+@badge-prefix-cls: ~"@{css-prefix}badge";
+
+.@{badge-prefix-cls} {
+    position: relative;
+    display: inline-block;
+    line-height: 1;
+    vertical-align: middle;
+
+    &-count {
+        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));
+        }
+    }
+
+    &-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);
+    }
+}

styles/components/button.less

@@ -0,0 +1,7 @@
+@btn-prefix-cls: ~"@{css-prefix}btn";
+
+.@{btn-prefix-cls} {
+  &-primary {
+    color: @primary-color;
+  }
+}

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

styles/components/index.less

@@ -0,0 +1,6 @@
+@import "button";
+@import "affix";
+@import "back-top";
+@import "badge";
+@import "circle";
+@import "spin";

styles/components/spin.less

@@ -0,0 +1,69 @@
+@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;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        z-index: @zindex-spin;
+        display: table;
+        .square(100%);
+        background-color: #fff;
+    }
+
+    &-fix &-main {
+        display: table-cell;
+        vertical-align: middle;
+        .square(inherit);
+    }
+
+    &-fix &-dot {
+        display: inline-block;
+    }
+
+    &-text,
+    &-show-text &-dot {
+        display: none;
+    }
+
+    &-show-text &-text {
+        display: block;
+    }
+}
+
+@keyframes ani-spin-bounce {
+    0% {
+        .transform(scale(0));
+    }
+
+    100% {
+        .transform(scale(1));
+        opacity: 0;
+    }
+}