Tweak CheckableTag style

components/tag/__tests__/__snapshots__/demo.test.js.snap

@@ -259,13 +259,15 @@ exports[`renders ./components/tag/demo/control.md correctly 1`] = `
 
 exports[`renders ./components/tag/demo/hot-tags.md correctly 1`] = `
 <div>
-  <strong>
-    Hots: 
+  <strong
+    style="margin-right:8px;"
+  >
+    Categories:
   </strong>
   <div
     class="ant-tag ant-tag-checkable"
   >
-    Movie
+    Movies
   </div>
   <div
     class="ant-tag ant-tag-checkable"
@@ -277,5 +279,10 @@ exports[`renders ./components/tag/demo/hot-tags.md correctly 1`] = `
   >
     Music
   </div>
+  <div
+    class="ant-tag ant-tag-checkable"
+  >
+    Sports
+  </div>
 </div>
 `;

components/tag/demo/hot-tags.md

@@ -17,7 +17,7 @@ Select your favourite topics.
 import { Tag } from 'antd';
 const CheckableTag = Tag.CheckableTag;
 
-const tagsFromServer = ['Movie', 'Books', 'Music'];
+const tagsFromServer = ['Movies', 'Books', 'Music', 'Sports'];
 
 class HotTags extends React.Component {
   state = {
@@ -37,7 +37,7 @@ class HotTags extends React.Component {
     const { selectedTags } = this.state;
     return (
       <div>
-        <strong>Hots: </strong>
+        <strong style={{ marginRight: 8 }}>Categories:</strong>
         {tagsFromServer.map(tag => (
           <CheckableTag
             key={tag}

components/tag/style/index.less

@@ -63,14 +63,13 @@
   &-checkable {
     background-color: transparent;
     border-color: transparent;
-    &:hover,
+    &:not(&-checked):hover {
+      color: @primary-color;
+    }
     &:active,
     &-checked {
       color: #fff;
     }
-    &:hover {
-      background-color: @primary-5;
-    }
     &-checked {
       background-color: @primary-6;
     }