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