fix

components/avatar/style/index.less

@@ -1,8 +1,10 @@
 @import "../../style/themes/default";
+@import "../../style/mixins/index";
 
 @avatar-prefix-cls: ~"@{ant-prefix}-avatar";
 
 .@{avatar-prefix-cls} {
+  .reset-component;
   display: inline-block;
   text-align: center;
   background: @avatar-bg;

components/badge/Badge.vue

@@ -5,8 +5,7 @@
       <span :class="[prefixCls+'-status-text']">{{text}}</span>
     </template>
     <template v-else>
-      <slot></slot>
+      <slot></slot><transition appear :name="transitionName">
-      <transition appear :name="transitionName">
         <scroll-number
           v-if="!badgeStatus.isHidden"
           :prefixCls="scrollNumberPrefixCls"
@@ -85,7 +84,7 @@ export default {
       return !isHasDefaultSlot && status
     },
     badgeComputedCls () {
-      const { prefixCls, isHasDefaultSlot, status, dot } = this
+      const { prefixCls, isHasDefaultSlot, status, dot, count } = this
       const isDot = dot || status
       return {
         badgeCls: {
@@ -100,6 +99,8 @@ export default {
         scrollNumberCls: {
           [`${prefixCls}-dot`]: isDot,
           [`${prefixCls}-count`]: !isDot,
+          [`${prefixCls}-multiple-words`]: count && count.toString && count.toString().length > 1,
+          [`${prefixCls}-status-${status}`]: !isHasDefaultSlot,
         },
       }
     },

components/badge/demo/index.vue

@@ -131,7 +131,7 @@ export default {
   .head-example {
     width: 42px;
     height: 42px;
-    border-radius: 6px;
+    border-radius: 4px;
     background: #eee;
     display: inline-block;
   }

components/badge/style/index.less

@@ -1,9 +1,11 @@
 @import "../../style/themes/default";
+@import "../../style/mixins/index";
 
 @badge-prefix-cls: ~"@{ant-prefix}-badge";
 @number-prefix-cls: ~"@{ant-prefix}-scroll-number";
 
 .@{badge-prefix-cls} {
+  .reset-component;
   position: relative;
   display: inline-block;
   line-height: 1;
@@ -11,9 +13,8 @@
 
   &-count {
     position: absolute;
-    transform: translateX(50%);
+    transform: translateX(-50%);
     top: -@badge-height / 2;
-    right: 0;
     height: @badge-height;
     border-radius: @badge-height / 2;
     min-width: @badge-height;
@@ -25,19 +26,22 @@
     font-size: @badge-font-size;
     white-space: nowrap;
     transform-origin: -10% center;
-    font-family: tahoma;
+    box-shadow: 0 0 0 1px #fff;
     a,
     a:hover {
       color: #fff;
     }
   }
 
+  &-multiple-words {
+    padding: 0 8px;
+  }
+
   &-dot {
     position: absolute;
-    transform: translateX(50%);
+    transform: translateX(-50%);
     transform-origin: 0 center;
     top: -@badge-dot-size / 2;
-    right: 0;
     height: @badge-dot-size;
     width: @badge-dot-size;
     border-radius: 100%;
@@ -51,16 +55,19 @@
     vertical-align: baseline;
 
     &-dot {
-      width: 8px;
+      width: @badge-status-size;
-      height: 8px;
+      height: @badge-status-size;
       display: inline-block;
       border-radius: 50%;
+      vertical-align: middle;
+      position: relative;
+      top: -1px;
     }
     &-success {
       background-color: @success-color;
     }
     &-processing {
-      background-color: @primary-color;
+      background-color: @processing-color;
       position: relative;
       &:after {
         position: absolute;
@@ -69,7 +76,7 @@
         width: 100%;
         height: 100%;
         border-radius: 50%;
-        border: 1px solid @primary-color;
+        border: 1px solid @processing-color;
         content: '';
         animation: antStatusProcessing 1.2s infinite ease-in-out;
       }
@@ -91,17 +98,17 @@
   }
 
   &-zoom-appear,
-  &-zoom-enter-active {
+  &-zoom-enter {
     animation: antZoomBadgeIn .3s @ease-out-back;
     animation-fill-mode: both;
   }
 
-  &-zoom-leave-active {
+  &-zoom-leave {
     animation: antZoomBadgeOut .3s @ease-in-back;
     animation-fill-mode: both;
   }
 
-  &-not-a-wrapper &-count {
+  &-not-a-wrapper .@{ant-prefix}-scroll-number {
     top: auto;
     display: block;
     position: relative;
@@ -128,6 +135,7 @@
     height: @badge-height;
     > p {
       height: @badge-height;
+      margin: 0;
     }
   }
 }
@@ -135,23 +143,19 @@
 @keyframes antZoomBadgeIn {
   0% {
     opacity: 0;
-    transform-origin: 100% 50%;
+    transform: scale(0) translateX(-50%);
-    transform: scale(0) translateX(50%);
   }
   100% {
-    transform-origin: 100% 50%;
+    transform: scale(1) translateX(-50%);
-    transform: scale(1) translateX(50%);
   }
 }
 
 @keyframes antZoomBadgeOut {
   0% {
-    transform-origin: 100% 50%;
+    transform: scale(1) translateX(-50%);
-    transform: scale(1) translateX(50%);
   }
   100% {
     opacity: 0;
-    transform-origin: 100% 50%;
+    transform: scale(0) translateX(-50%);
-    transform: scale(0) translateX(50%);
   }
 }

components/breadcrumb/Breadcrumb.vue

@@ -6,7 +6,6 @@
     props: {
       prefixCls: PropTypes.string.def('ant-breadcrumb'),
       separator: PropTypes.string.def('/'),
-      styles: PropTypes.Object,
     },
     provide () {
       return {
@@ -14,9 +13,9 @@
       }
     },
     render () {
-      const { prefixCls, styles } = this
+      const { prefixCls } = this
       return (
-        <div class={prefixCls} style={styles}>
+        <div class={prefixCls}>
           {this.$slots.default}
         </div>
       )

components/breadcrumb/BreadcrumbItem.vue

@@ -1,5 +1,6 @@
 <script>
   import PropTypes from '../_util/vue-types'
+  import hasProp from '../_util/props-util'
 
   export default {
     name: 'BreadcrumbItem',
@@ -9,12 +10,12 @@
       href: PropTypes.string,
     },
     render () {
-      const { prefixCls, href, ...restProps } = this
+      const { prefixCls, ...restProps } = this.$props
       const { breadCrumbParent = {}} = this
       const { separator = '/' } = breadCrumbParent
       const solt = this.$slots.default
       let link
-      if (href !== undefined) {
+      if (hasProp(this, 'href')) {
         link = <a class={`${prefixCls}-link`} {...restProps}>{solt}</a>
       } else {
         link = <span class={`${prefixCls}-link`} {...restProps}>{solt}</span>

components/breadcrumb/demo/basic.vue

@@ -0,0 +1,25 @@
+<template>
+<div>
+<md>
+## 基本
+</md>
+<Breadcrumb>
+  <BreadcrumbItem>Home</BreadcrumbItem>
+  <BreadcrumbItem><a href="">Application Center</a></BreadcrumbItem>
+  <BreadcrumbItem><a href="">Application List</a></BreadcrumbItem>
+  <BreadcrumbItem>An Application</BreadcrumbItem>
+</Breadcrumb>
+</div>
+</template>
+
+<script>
+import '../style'
+import { Icon, Breadcrumb } from 'antd/index'
+export default {
+  components: {
+    Icon,
+    Breadcrumb,
+    BreadcrumbItem: Breadcrumb.Item,
+  },
+}
+</script>

components/breadcrumb/demo/index.vue

@@ -1,50 +1,21 @@
 <template>
   <div>
-    基本用法
+    <Basic />
-    <Breadcrumb>
-      <BreadcrumbItem>Home</BreadcrumbItem>
-      <BreadcrumbItem><a href="">Application Center</a></BreadcrumbItem>
-      <BreadcrumbItem><a href="">Application List</a></BreadcrumbItem>
-      <BreadcrumbItem>An Application</BreadcrumbItem>
-    </Breadcrumb>
     <br>
-    带有图标
+    <withIcon />
-    <Breadcrumb>
-      <BreadcrumbItem href="">
-        <Icon type="home" />
-      </BreadcrumbItem>
-      <BreadcrumbItem href="">
-        <Icon type="user" />
-        <span>Application List</span>
-      </BreadcrumbItem>
-      <BreadcrumbItem>
-        Application
-      </BreadcrumbItem>
-    </Breadcrumb>
     <br>
-    自定义分隔符
+    <separator />
-    <Breadcrumb separator=">">
-      <BreadcrumbItem>Home</BreadcrumbItem>
-      <BreadcrumbItem href="">Application Center</BreadcrumbItem>
-      <BreadcrumbItem href="">Application List</BreadcrumbItem>
-      <BreadcrumbItem>An Application</BreadcrumbItem>
-    </Breadcrumb>
   </div>
 </template>
 <script>
-import '../style'
+import Basic from './basic'
-import { Icon, Breadcrumb } from 'antd/index'
+import withIcon from './withIcon'
+import separator from './separator'
 export default {
-  data () {
-    return {
-    }
-  },
-  methods: {
-  },
   components: {
-    Icon,
+    Basic,
-    Breadcrumb,
+    withIcon,
-    BreadcrumbItem: Breadcrumb.Item,
+    separator,
   },
 }
 </script>

components/breadcrumb/demo/separator.vue

@@ -0,0 +1,25 @@
+<template>
+<div>
+<md>
+## 自定义分隔符
+</md>
+<Breadcrumb separator=">">
+  <BreadcrumbItem>Home</BreadcrumbItem>
+  <BreadcrumbItem href="">Application Center</BreadcrumbItem>
+  <BreadcrumbItem href="">Application List</BreadcrumbItem>
+  <BreadcrumbItem>An Application</BreadcrumbItem>
+</Breadcrumb>
+</div>
+</template>
+
+<script>
+import '../style'
+import { Icon, Breadcrumb } from 'antd/index'
+export default {
+  components: {
+    Icon,
+    Breadcrumb,
+    BreadcrumbItem: Breadcrumb.Item,
+  },
+}
+</script>

components/breadcrumb/demo/withIcon.vue

@@ -0,0 +1,31 @@
+<template>
+<div>
+<md>
+## 带有图标
+</md>
+<Breadcrumb>
+  <BreadcrumbItem href="">
+    <Icon type="home" />
+  </BreadcrumbItem>
+  <BreadcrumbItem href="">
+    <Icon type="user" />
+    <span>Application List</span>
+  </BreadcrumbItem>
+  <BreadcrumbItem>
+    Application
+  </BreadcrumbItem>
+</Breadcrumb>
+</div>
+</template>
+
+<script>
+import '../style'
+import { Icon, Breadcrumb } from 'antd/index'
+export default {
+  components: {
+    Icon,
+    Breadcrumb,
+    BreadcrumbItem: Breadcrumb.Item,
+  },
+}
+</script>

components/card/style/index.js

@@ -0,0 +1,5 @@
+import '../../style/index.less'
+import './index.less'
+
+// style dependencies
+import '../../tabs/style'

components/card/style/index.less

@@ -0,0 +1,250 @@
+@import "../../style/themes/default";
+@import "../../style/mixins/index";
+
+@card-prefix-cls: ~"@{ant-prefix}-card";
+@card-head-height: 48px;
+
+.@{card-prefix-cls} {
+  .reset-component;
+  background: @component-background;
+  border-radius: @border-radius-sm;
+  position: relative;
+  transition: all .3s;
+
+  &-hoverable {
+    cursor: pointer;
+    &:hover {
+      box-shadow: @card-shadow;
+      border-color: rgba(0, 0, 0, 0.09);
+    }
+  }
+
+  &-bordered {
+    border: @border-width-base @border-style-base @border-color-split;
+  }
+
+  &-head {
+    background: @card-head-background;
+    border-bottom: @border-width-base @border-style-base @border-color-split;
+    padding: 0 @card-padding-base;
+    border-radius: @border-radius-sm @border-radius-sm 0 0;
+    .clearfix;
+    margin-bottom: -1px; // Fix card grid overflow bug: https://gw.alipayobjects.com/zos/rmsportal/XonYxBikwpgbqIQBeuhk.png
+    min-height: @card-head-height;
+
+    &-wrapper {
+      display: flex;
+    }
+
+    &-title {
+      font-size: @font-size-lg;
+      padding: @card-head-padding 0;
+      text-overflow: ellipsis;
+      overflow: hidden;
+      white-space: nowrap;
+      color: @card-head-color;
+      font-weight: 500;
+      display: inline-block;
+      flex: 1;
+    }
+
+    .@{ant-prefix}-tabs {
+      margin-bottom: -17px;
+      clear: both;
+
+      &-bar {
+        border-bottom: @border-width-base @border-style-base @border-color-split;
+      }
+    }
+  }
+
+  &-extra {
+    float: right;
+    padding: @card-head-padding + 1.5px 0;
+    text-align: right;
+    // https://stackoverflow.com/a/22429853/3040605
+    margin-left: auto;
+  }
+
+  &-body {
+    padding: @card-padding-base;
+    .clearfix;
+  }
+
+  &-contain-grid &-body {
+    margin: -1px 0 0 -1px;
+    padding: 0;
+  }
+
+  &-grid {
+    border-radius: 0;
+    border: 0;
+    box-shadow: 1px 0 0 0 @border-color-split, 0 1px 0 0 @border-color-split, 1px 1px 0 0 @border-color-split, 1px 0 0 0 @border-color-split inset, 0 1px 0 0 @border-color-split inset;
+    width: 33.33%;
+    float: left;
+    padding: @card-padding-base;
+    transition: all .3s;
+    &:hover {
+      position: relative;
+      z-index: 1;
+      box-shadow: @box-shadow-base;
+    }
+  }
+
+  &-contain-tabs &-head-title {
+    padding-bottom: 0;
+    min-height: @card-head-height - @card-head-padding;
+  }
+
+  &-contain-tabs &-extra {
+    padding-bottom: 0;
+  }
+
+  &-cover > * {
+    width: 100%;
+    display: block;
+  }
+
+  &-actions {
+    border-top: @border-width-base @border-style-base @border-color-split;
+    background: @card-actions-background;
+    .clearfix;
+    list-style: none;
+    margin: 0;
+    padding: 0;
+
+    & > li {
+      float: left;
+      text-align: center;
+      margin: 12px 0;
+      color: @text-color-secondary;
+
+      & > span {
+        display: inline-block;
+        font-size: 14px;
+        cursor: pointer;
+        line-height: 22px;
+        min-width: 32px;
+        position: relative;
+
+        &:hover {
+          color: @primary-color;
+          transition: color .3s;
+        }
+
+        & > .anticon {
+          font-size: 16px;
+        }
+
+        a {
+          color: @text-color-secondary;
+
+          &:hover {
+            color: @primary-color;
+          }
+        }
+      }
+
+      &:not(:last-child) {
+        border-right: @border-width-base @border-style-base @border-color-split;
+      }
+    }
+  }
+
+  &-wider-padding &-head {
+    padding: 0 @card-padding-wider;
+  }
+
+  &-wider-padding &-body {
+    padding: @card-padding-base @card-padding-wider;
+  }
+
+  &-padding-transition &-head,
+  &-padding-transition &-body {
+    transition: padding .3s;
+  }
+
+  &-padding-transition &-extra {
+    transition: right .3s;
+  }
+
+  &-type-inner &-head {
+    padding: 0 @card-padding-base;
+    background: @background-color-light;
+
+    &-title {
+      padding: @card-inner-head-padding 0;
+      font-size: @font-size-base;
+    }
+  }
+
+  &-type-inner &-body {
+    padding: 16px @card-padding-base;
+  }
+
+  &-type-inner &-extra {
+    padding: @card-inner-head-padding + 1.5px 0;
+  }
+
+  &-meta {
+    margin: -4px 0;
+    .clearfix;
+
+    &-avatar {
+      padding-right: 16px;
+      float: left;
+    }
+
+    &-detail {
+      overflow: hidden;
+      > div:not(:last-child) {
+        margin-bottom: 8px;
+      }
+    }
+
+    &-title {
+      font-size: @font-size-lg;
+      text-overflow: ellipsis;
+      overflow: hidden;
+      white-space: nowrap;
+      color: @card-head-color;
+      font-weight: 500;
+    }
+
+    &-description {
+      color: @text-color-secondary;
+    }
+  }
+
+  &-loading &-body {
+    user-select: none;
+    padding: 0;
+  }
+
+  &-loading-content {
+    padding: @card-padding-base;
+    p {
+      margin: 0;
+    }
+  }
+
+  &-loading-block {
+    display: inline-block;
+    margin: 5px 2% 0 0;
+    height: 14px;
+    border-radius: @border-radius-sm;
+    background: linear-gradient(90deg, rgba(207, 216, 220, .2), rgba(207, 216, 220, .4), rgba(207, 216, 220, .2));
+    animation: card-loading 1.4s ease infinite;
+    background-size: 600% 600%;
+  }
+}
+
+@keyframes card-loading {
+  0%,
+  100% {
+		background-position: 0 50%;
+	}
+	50% {
+		background-position: 100% 50%;
+	}
+}

components/pagination/style/index.less

@@ -1,10 +1,18 @@
 @import "../../style/themes/default";
 @import "../../style/mixins/index";
+@import "../../input/style/mixin";
 
 @pagination-prefix-cls: ~"@{ant-prefix}-pagination";
 
 .@{pagination-prefix-cls} {
-  font-size: @font-size-base;
+  .reset-component;
+
+  ul,
+  ol {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
 
   &:after {
     content: " ";
@@ -18,8 +26,8 @@
   &-total-text {
     display: inline-block;
     vertical-align: middle;
-    height: 28px;
+    height: @pagination-item-size;
-    line-height: 28px;
+    line-height: @pagination-item-size - 2px;
     margin-right: 8px;
   }
 
@@ -27,9 +35,9 @@
     cursor: pointer;
     border-radius: @border-radius-base;
     user-select: none;
-    min-width: 28px;
+    min-width: @pagination-item-size;
-    height: 28px;
+    height: @pagination-item-size;
-    line-height: 28px;
+    line-height: @pagination-item-size - 2px;
     text-align: center;
     list-style: none;
     display: inline-block;
@@ -57,19 +65,21 @@
     }
 
     &-active {
-      background-color: @primary-color;
       border-color: @primary-color;
+      font-weight: 500;
+
+      a {
+        color: @primary-color;
+      }
 
       &:focus,
       &:hover {
-        background-color: @primary-5;
         border-color: @primary-5;
       }
 
-      a,
       &:focus a,
       &:hover a {
-        color: #fff;
+        color: @primary-5;
       }
     }
   }
@@ -129,9 +139,9 @@
     color: @text-color;
     border-radius: @border-radius-base;
     list-style: none;
-    min-width: 28px;
+    min-width: @pagination-item-size;
-    height: 28px;
+    height: @pagination-item-size;
-    line-height: 28px;
+    line-height: @pagination-item-size;
     text-align: center;
     transition: all .3s;
     display: inline-block;
@@ -148,7 +158,7 @@
     }
 
     &:hover a {
-      color: @primary-color;
+      border-color: @primary-5;
     }
 
     .@{pagination-prefix-cls}-item-link {
@@ -160,10 +170,9 @@
       transition: all .3s;
 
       &:after {
-        .iconfont-size-under-12px(8px);
+        font-size: 12px;
         display: block;
-        height: 26px;
+        height: @pagination-item-size - 2px;
-        line-height: 26px;
         font-family: "anticon";
         text-align: center;
         font-weight: 500;
@@ -214,15 +223,19 @@
     vertical-align: middle;
     margin-left: 16px;
 
-    &-size-changer {
+    &-size-changer.@{ant-prefix}-select {
       display: inline-block;
       margin-right: 8px;
     }
 
     &-quick-jumper {
       display: inline-block;
+      vertical-align: top;
+      height: @input-height-base;
+      line-height: @input-height-base;
 
       input {
+        .input;
         margin: 0 8px;
         width: 50px;
       }
@@ -231,14 +244,15 @@
 
   &-simple &-prev,
   &-simple &-next {
-    height: 24px;
+    height: @pagination-item-size-sm;
-    line-height: 24px;
+    line-height: @pagination-item-size-sm;
     vertical-align: top;
     .@{pagination-prefix-cls}-item-link {
       border: 0;
-      height: 24px;
+      height: @pagination-item-size-sm;
       &:after {
-        line-height: 24px;
+        height: @pagination-item-size-sm;
+        line-height: @pagination-item-size-sm;
       }
     }
   }
@@ -246,7 +260,7 @@
   &-simple &-simple-pager {
     display: inline-block;
     margin-right: 8px;
-    height: 24px;
+    height: @pagination-item-size-sm;
 
     input {
       margin-right: 8px;
@@ -265,60 +279,65 @@
       }
     }
   }
-}
 
-.@{pagination-prefix-cls} {
   &.mini &-total-text,
   &.mini &-simple-pager {
-    height: 20px;
+    height: @pagination-item-size-sm;
-    line-height: 20px;
+    line-height: @pagination-item-size-sm;
   }
 
   &.mini &-item {
-    border: 0;
     margin: 0;
-    min-width: 20px;
+    min-width: @pagination-item-size-sm;
-    height: 20px;
+    height: @pagination-item-size-sm;
-    line-height: 20px;
+    line-height: @pagination-item-size-sm - 2px;
+  }
+
+  &.mini &-item:not(&-item-active) {
+    background: transparent;
+    border-color: transparent;
   }
 
   &.mini &-prev,
   &.mini &-next {
     margin: 0;
-    min-width: 20px;
+    min-width: @pagination-item-size-sm;
-    height: 20px;
+    height: @pagination-item-size-sm;
-    line-height: 20px;
+    line-height: @pagination-item-size-sm;
   }
 
   &.mini &-prev &-item-link,
   &.mini &-next &-item-link {
-    border: 0;
+    border-color: transparent;
+    background: transparent;
     &:after {
-      height: 20px;
+      height: @pagination-item-size-sm;
-      line-height: 20px;
+      line-height: @pagination-item-size-sm;
     }
   }
 
   &.mini &-jump-prev,
   &.mini &-jump-next {
-    height: 20px;
+    height: @pagination-item-size-sm;
-    line-height: 20px;
+    line-height: @pagination-item-size-sm;
+    margin-right: 0;
   }
 
   &.mini &-options {
-    margin-left: 8px;
+    margin-left: 2px;
     &-quick-jumper {
-      height: 20px;
+      height: @pagination-item-size-sm;
-      line-height: 20px;
+      line-height: @pagination-item-size-sm;
 
       input {
+        .input-sm;
         width: 44px;
       }
     }
   }
 }
 
-@media only screen and (max-width: 1024px) {
+@media only screen and (max-width: @screen-lg) {
   .@{pagination-prefix-cls}-item {
     &-after-jump-prev,
     &-before-jump-next {
@@ -327,64 +346,8 @@
   }
 }
 
-.@{pagination-prefix-cls} {
+@media only screen and (max-width: @screen-sm) {
-  &-options {
+  .@{pagination-prefix-cls}-options {
-    margin-left: 15px;
+    display: none;
-    &-size-changer {
-      float: left;
-      width: 80px;
-    }
-
-    &-quick-jumper {
-      float: left;
-      margin-left: 16px;
-      height: 28px;
-      line-height: 28px;
-
-      input {
-        margin: 0 8px;
-        box-sizing: border-box;
-        background-color: #fff;
-        border-radius: 6px;
-        border: 1px solid #d9d9d9;
-        outline: none;
-        padding: 3px 12px;
-        width: 50px;
-        height: 28px;
-
-        &:hover {
-          border-color: #2db7f5;
-        }
-      }
-
-      button {
-        display: inline-block;
-        margin: 0 8px;
-        font-weight: 500;
-        text-align: center;
-        touch-action: manipulation;
-        cursor: pointer;
-        background-image: none;
-        border: 1px solid transparent;
-        white-space: nowrap;
-        padding: 0 15px;
-        font-size: 12px;
-        border-radius: 6px;
-        height: 28px;
-        user-select: none;
-        transition: all .3s cubic-bezier(.645,.045,.355,1);
-        position: relative;
-        color: rgba(0,0,0,.65);
-        background-color: #fff;
-        border-color: #d9d9d9;
-
-        &:hover, &:active, &:focus {
-          color: #2db7f5;
-          background-color: #fff;
-          border-color: #2db7f5;
-        }
-      }
-    }
   }
 }
-

components/rate/style/index.less

@@ -4,12 +4,15 @@
 @rate-prefix-cls: ~"@{ant-prefix}-rate";
 
 .@{rate-prefix-cls} {
+  .reset-component;
+  line-height: unset;
   margin: 0;
   padding: 0;
   list-style: none;
   font-size: 20px;
   display: inline-block;
-  vertical-align: middle;
+  color: @rate-star-color;
+  outline: none;
 
   &-disabled &-star {
     cursor: not-allowed;
@@ -25,16 +28,17 @@
     margin-right: 8px;
     position: relative;
     transition: all .3s;
-    color: @rate-star-bg;
+    color: inherit;
     cursor: pointer;
 
     &-first,
     &-second {
       user-select: none;
       transition: all .3s;
+      color: @rate-star-bg;
     }
 
-    &:hover {
+    &-focused, &:hover {
       transform: scale(1.1);
     }
 
@@ -55,18 +59,12 @@
 
     &-half &-first,
     &-full &-second {
-      color: @rate-star-color;
+      color: inherit;
-    }
-
-    &-half:hover &-first,
-    &-full:hover &-second {
-      color: tint(@rate-star-color, 20%);
     }
   }
 
   &-text {
     margin-left: 8px;
-    vertical-align: middle;
     display: inline-block;
     font-size: @font-size-base;
   }

examples/routes.js

@@ -3,7 +3,7 @@ const AsyncComp = () => {
   const com = pathnameArr[1] || 'button'
   const demo = pathnameArr[2] || 'index'
   return {
-    component: import(`../components/checkbox/demo/${demo}.vue`),
+    component: import(`../components/avatar/demo/${demo}.vue`),
   }
 }
 export default [