close icon style

style/components/alert.less

@@ -30,6 +30,13 @@
     }
     .anticon.ant-alert-close-icon {
       color: @legend-color;
+
+      &:active{
+        color: shade(@primary-color, 5%);
+      }
+      &:hover{
+        color: tint(@primary-color, 5%);
+      }
     }
   }
 
@@ -41,6 +48,13 @@
     }
     .anticon.ant-alert-close-icon {
       color: @legend-color;
+
+      &:active{
+        color: shade(@primary-color, 5%);
+      }
+      &:hover{
+        color: tint(@primary-color, 5%);
+      }
     }
   }
 
@@ -52,6 +66,13 @@
     }
     .anticon.ant-alert-close-icon {
       color: @legend-color;
+
+      &:active{
+        color: shade(@primary-color, 5%);
+      }
+      &:hover{
+        color: tint(@primary-color, 5%);
+      }
     }
   }
 
@@ -63,29 +84,37 @@
     }
     .anticon.ant-alert-close-icon {
       color: @legend-color;
+
+      &:active{
+        color: shade(@primary-color, 5%);
+      }
+      &:hover{
+        color: tint(@primary-color, 5%);
+      }
     }
   }
 
   &-close-icon {
     .iconfont-size-under-12px(10px);
-    color: @legend-color;
+    //color: @legend-color;
+    //color: red;
     cursor: pointer;
     float: right;
+
+    &:active{
+      color: shade(@primary-color, 5%);
+      color: red;
+    }
+    &:hover{
+      color: tint(@primary-color, 5%);
+      color: red;
+    }
   }
 
   &-close-text {
-    color: @legend-color;
     cursor: pointer;
     float: right;
   }
-
-  &-close-text:active {
-    color: shade(@primary-color, 5%);
-  }
-
-  &-close-text:hover {
-    color: tint(@primary-color, 5%);
-  }
 }
 
 .@{alertTitlePrefixClass} {
@@ -106,7 +135,6 @@
     position: absolute;
     top: 12px;
     right: 16px;
-    color: @legend-color;
     cursor: pointer;
     .iconfont-size-under-12px(10px);
   }
@@ -129,6 +157,13 @@
     }
     .anticon.ant-alert-with-title-close-icon {
       color: @legend-color;
+
+      &:active{
+        color: shade(@primary-color, 5%);
+      }
+      &:hover{
+        color: tint(@primary-color, 5%);
+      }
     }
   }
 
@@ -140,6 +175,13 @@
     }
     .anticon.ant-alert-with-title-close-icon {
       color: @legend-color;
+
+      &:active{
+        color: shade(@primary-color, 5%);
+      }
+      &:hover{
+        color: tint(@primary-color, 5%);
+      }
     }
   }
 
@@ -151,6 +193,13 @@
     }
     .anticon.ant-alert-with-title-close-icon {
       color: @legend-color;
+
+      &:active{
+        color: shade(@primary-color, 5%);
+      }
+      &:hover{
+        color: tint(@primary-color, 5%);
+      }
     }
   }
 
@@ -162,6 +211,13 @@
     }
     .anticon.ant-alert-with-title-close-icon {
       color: @legend-color;
+
+      &:active{
+        color: shade(@primary-color, 5%);
+      }
+      &:hover{
+        color: tint(@primary-color, 5%);
+      }
     }
   }
 }