From a646fc36fe18e876109f0c6932623b8a617f6b84 Mon Sep 17 00:00:00 2001
From: 梁灏 <admin@aresn.com>
Date: Mon, 22 Jan 2018 17:47:06 +0800
Subject: [PATCH] optimize box-shadow

---
 src/styles/components/radio.less | 53 ++++++++++++++++++++++++++++++++++++++++++++++-------
 1 file changed, 46 insertions(+), 7 deletions(-)

diff --git a/src/styles/components/radio.less b/src/styles/components/radio.less
index 5149844..c14a085 100644
--- a/src/styles/components/radio.less
+++ b/src/styles/components/radio.less
@@ -178,34 +178,45 @@ span.@{radio-prefix-cls} + * {
         height: @btn-circle-size;
         line-height: @btn-circle-size - 2px;
         margin: 0;
-        padding: 0 16px;
+        padding: 0 16px - 1px;
         font-size: @font-size-small;
         color: @btn-default-color;
         transition: all @transition-time ease-in-out;
         cursor: pointer;
         border: 1px solid @border-color-base;
-        //border-left: 0;
+        border-left: 0;
         background: #fff;
+        position: relative;
 
         > span {
             margin-left: 0;
         }
 
-        &:before {
+        &:before, &:after {
             content: '';
+            display: block;
             position: absolute;
             width: 1px;
             height: 100%;
             left: -1px;
+            top: 0;
             background: @border-color-base;
-            visibility: hidden;
+            //visibility: hidden;
             transition: all @transition-time ease-in-out;
         }
 
+        &:after{
+            height: @btn-circle-size + 4px;
+            left: -1px;
+            top: -3px;
+            background: fade(@primary-color, 20%);
+            opacity: 0;
+        }
+
         &:first-child {
             border-radius: @btn-border-radius 0 0 @btn-border-radius;
             border-left: 1px solid @border-color-base;
-            &:before {
+            &:before, &:after {
                 display: none;
             }
         }
@@ -237,11 +248,31 @@ span.@{radio-prefix-cls} + * {
             background: #fff;
             border-color: @primary-color;
             color: @primary-color;
-            //box-shadow: -1px 0 0 0 @primary-color;
+            box-shadow: -1px 0 0 0 @primary-color;
+            z-index: 1;
+
+            &:before{
+                background: @primary-color;
+                opacity: 0.1;
+            }
+
+            &.@{radio-prefix-cls}-focus{
+                box-shadow: -1px 0 0 0 @primary-color, 0 0 0 2px fade(@primary-color, 20%);
+                transition: all @transition-time ease-in-out;
+                &:after{
+                    left: -3px;
+                    top: -3px;
+                    opacity: 1;
+                    background: fade(@primary-color, 20%);
+                }
+                &:first-child{
+                    box-shadow: 0 0 0 2px fade(@primary-color, 20%);
+                }
+            }
 
             &:first-child {
                 border-color: @primary-color;
-                //box-shadow: none!important;
+                box-shadow: none;
             }
 
             &:hover {
@@ -287,6 +318,9 @@ span.@{radio-prefix-cls} + * {
     height: @btn-circle-size-large;
     line-height: @btn-circle-size-large - 2px;
     font-size: @font-size-base;
+    &:after{
+        height: @btn-circle-size-large + 4px;
+    }
 }
 
 .@{radio-group-button-prefix-cls}.@{radio-group-prefix-cls}-small .@{radio-prefix-cls}-wrapper{
@@ -294,6 +328,11 @@ span.@{radio-prefix-cls} + * {
     line-height: @btn-circle-size-small - 2px;
     padding: 0 12px;
     font-size: @font-size-small;
+
+    &:after{
+        height: @btn-circle-size-small + 4px;
+    }
+
     &:first-child {
         border-radius: @btn-border-radius-small 0 0 @btn-border-radius-small;
     }
--
libgit2 0.21.4