init Rate component

2017-01-17 11:26:02 +08:00 · 2017-01-17 11:26:02 +08:00 · 49d380cf99
commit 49d380cf99
parent 1ff551864c
9 changed files with 193 additions and 1 deletions
--- a/src/styles/components/rate.less
+++ b/src/styles/components/rate.less
@ -0,0 +1,66 @@
+@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;
+    font-family: 'Ionicons';
+
+    &-disabled &-star {
+        &:before,
+        &-content:before {
+            cursor: default;
+        }
+        &:hover {
+            transform: scale(1);
+        }
+    }
+
+    &-star {
+        display: inline-block;
+        margin: 0;
+        padding: 0;
+        margin-right: 8px;
+        position: relative;
+        transition: all 0.3s ease;
+
+        &:hover {
+            transform: scale(1.1);
+        }
+
+        &:before,
+        &-content:before {
+            color: #e9e9e9;
+            cursor: pointer;
+            content: "\F4B3";
+            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%);
+        }
+    }
+}