From dc67fd7dbbfb4d64b3ff0e7b5c3bc8a2126e6ef8 Mon Sep 17 00:00:00 2001
From: afc163 <afc163@gmail.com>
Date: Thu, 10 Feb 2022 17:51:40 +0800
Subject: [PATCH] fix: Pagination and Rate style bug in Safari (#34002)

* fix: Pagination and Rate style bug in safari

close #33965

* fix style
---
 components/pagination/style/index.less | 48 ++++++++++++++++++++++----
 components/rate/style/index.less       |  4 +--
 2 files changed, 44 insertions(+), 8 deletions(-)

diff --git a/components/pagination/style/index.less b/components/pagination/style/index.less
index 60ee9d69de..8572af66f3 100644
--- a/components/pagination/style/index.less
+++ b/components/pagination/style/index.less
@@ -59,7 +59,6 @@
       }
     }
 
-    &:focus-visible,
     &:hover {
       border-color: @primary-color;
       transition: all 0.3s;
@@ -69,6 +68,17 @@
       }
     }
 
+    // cannot merge with `&:hover`
+    // see https://github.com/ant-design/ant-design/pull/34002
+    &:focus-visible {
+      border-color: @primary-color;
+      transition: all 0.3s;
+
+      a {
+        color: @primary-color;
+      }
+    }
+
     &-active {
       font-weight: @pagination-font-weight-active;
       background: @pagination-item-bg-active;
@@ -78,15 +88,21 @@
         color: @primary-color;
       }
 
-      &:focus-visible,
       &:hover {
         border-color: @primary-5;
       }
 
-      &:focus-visible a,
+      &:focus-visible {
+        border-color: @primary-5;
+      }
+
       &:hover a {
         color: @primary-5;
       }
+
+      &:focus-visible a {
+        color: @primary-5;
+      }
     }
   }
 
@@ -130,7 +146,6 @@
       }
     }
 
-    &:focus-visible,
     &:hover {
       .@{pagination-prefix-cls}-item-link-icon {
         opacity: 1;
@@ -139,6 +154,15 @@
         opacity: 0;
       }
     }
+
+    &:focus-visible {
+      .@{pagination-prefix-cls}-item-link-icon {
+        opacity: 1;
+      }
+      .@{pagination-prefix-cls}-item-ellipsis {
+        opacity: 0;
+      }
+    }
   }
 
   &-prev,
@@ -194,7 +218,11 @@
       transition: all 0.3s;
     }
 
-    &:focus-visible .@{pagination-prefix-cls}-item-link,
+    &:focus-visible .@{pagination-prefix-cls}-item-link {
+      color: @primary-color;
+      border-color: @primary-color;
+    }
+
     &:hover .@{pagination-prefix-cls}-item-link {
       color: @primary-color;
       border-color: @primary-color;
@@ -203,7 +231,15 @@
 
   &-disabled {
     &,
-    &:hover,
+    &:hover {
+      cursor: not-allowed;
+      .@{pagination-prefix-cls}-item-link {
+        color: @disabled-color;
+        border-color: @border-color-base;
+        cursor: not-allowed;
+      }
+    }
+
     &:focus-visible {
       cursor: not-allowed;
       .@{pagination-prefix-cls}-item-link {
diff --git a/components/rate/style/index.less b/components/rate/style/index.less
index 10abfd7c6a..7b5dad79ee 100644
--- a/components/rate/style/index.less
+++ b/components/rate/style/index.less
@@ -36,8 +36,7 @@
     > div {
       transition: all 0.3s, outline 0s;
 
-      &:hover,
-      &:focus-visible {
+      &:hover {
         transform: @rate-star-hover-scale;
       }
 
@@ -47,6 +46,7 @@
 
       &:focus-visible {
         outline: 1px dashed @rate-star-color;
+        transform: @rate-star-hover-scale;
       }
     }