optimize box-shadow

use two box-shadow when focus, and a :after to make focus style looks better

optimize box-shadow
use two box-shadow when focus, and a :after to make focus style looks better
梁灏
1 parent 2e14b458
Showing 1 changed file with 46 additions and 7 deletions Show diff stats
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;
     }