fix(radio): replace 'outline' with 'box-shadow' (#3955)

vueComponent · Apr 17, 2021 · 28e2660 · 28e2660
1 parent 7863ac8
commit 28e2660
Showing 1 changed file with 18 additions and 13 deletions.
diff --git a/components/radio/style/index.less b/components/radio/style/index.less
@@ -5,7 +5,8 @@
 @radio-group-prefix-cls: ~'@{radio-prefix-cls}-group';
 @radio-inner-prefix-cls: ~'@{radio-prefix-cls}-inner';
 @radio-duration: 0.3s;
-@radio-focused-outline: 3px solid fade(@radio-dot-color, 6%);
+@radio-focus-shadow: 0 0 0 3px fade(@radio-dot-color, 8%);
+@radio-button-focus-shadow: @radio-focus-shadow;
 
 .@{radio-group-prefix-cls} {
   .reset-component();
@@ -42,7 +43,7 @@
   }
 
   &-input:focus + .@{radio-inner-prefix-cls} {
-    box-shadow: 0 0 0 3px fade(@radio-dot-color, 8%);
+    box-shadow: @radio-focus-shadow;
   }
 
   &-checked::after {
@@ -162,7 +163,7 @@ span.@{radio-prefix-cls} + * {
   border-top-width: @border-width-base + 0.02px;
   border-left: 0;
   cursor: pointer;
-  transition: color 0.3s, background 0.3s, border-color 0.3s;
+  transition: color 0.3s, background 0.3s, border-color 0.3s, box-shadow 0.3s;
 
   a {
     color: @radio-button-color;
@@ -190,12 +191,15 @@ span.@{radio-prefix-cls} + * {
   &:not(:first-child) {
     &::before {
       position: absolute;
-      top: 0;
+      top: @border-width-base * -1;
       left: -1px;
       display: block;
+      box-sizing: content-box;
       width: 1px;
       height: 100%;
+      padding: @border-width-base 0;
       background-color: @border-color-base;
+      transition: background-color 0.3s;
       content: '';
     }
   }
@@ -218,7 +222,7 @@ span.@{radio-prefix-cls} + * {
   }
 
   &:focus-within {
-    outline: @radio-focused-outline;
+    box-shadow: @radio-button-focus-shadow;
   }
 
   .@{radio-prefix-cls}-inner,
@@ -235,32 +239,33 @@ span.@{radio-prefix-cls} + * {
     color: @radio-dot-color;
     background: @radio-button-checked-bg;
     border-color: @radio-dot-color;
-    box-shadow: -1px 0 0 0 @radio-dot-color;
 
     &::before {
-      background-color: @radio-dot-color !important;
-      opacity: 0.1;
+      background-color: @radio-dot-color;
     }
 
     &:first-child {
       border-color: @radio-dot-color;
-      box-shadow: none !important;
     }
 
     &:hover {
       color: @radio-button-hover-color;
       border-color: @radio-button-hover-color;
-      box-shadow: -1px 0 0 0 @radio-button-hover-color;
+      &::before {
+        background-color: @radio-button-hover-color;
+      }
     }
 
     &:active {
       color: @radio-button-active-color;
       border-color: @radio-button-active-color;
-      box-shadow: -1px 0 0 0 @radio-button-active-color;
+      &::before {
+        background-color: @radio-button-active-color;
+      }
     }
 
     &:focus-within {
-      outline: @radio-focused-outline;
+      box-shadow: @radio-button-focus-shadow;
     }
   }
 
@@ -279,7 +284,7 @@ span.@{radio-prefix-cls} + * {
       border-color: @radio-button-active-color;
     }
     &:focus-within {
-      outline: @radio-focused-outline;
+      box-shadow: @radio-button-focus-shadow;
     }
   }