mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2025-08-06 16:06:28 +08:00
Code Issues Actions 17 Packages Projects Releases Wiki Activity

💄 Improve Radio focused state style (#14191)

Browse Source 
close #14186
This commit is contained in:
偏右 2019-01-10 16:55:18 +08:00 committed by 诸岳
parent b2c6f5622b
commit 4102fe200b
1 changed files with 25 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
components/radio/style/index.less
View File

@ -5,6 +5,7 @@
@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-group-prefix-cls} {
.reset-component;
@ -31,13 +32,17 @@
line-height: 1;
vertical-align: sub;
cursor: pointer;
.@{radio-prefix-cls}-wrapper:hover &,
&:hover,
&-focused {
.@{radio-inner-prefix-cls} {
border-color: @radio-dot-color;
}
&:hover .@{radio-inner-prefix-cls},
&-input:focus + .@{radio-inner-prefix-cls} {
border-color: @radio-dot-color;
}
&-input:focus + .@{radio-inner-prefix-cls} {
box-shadow: 0 0 0 3px fade(@radio-dot-color, 8%);
}
&-checked:after {
position: absolute;
top: 0;
@ -51,10 +56,12 @@
animation-fill-mode: both;
visibility: hidden;
}
&:hover:after,
.@{radio-prefix-cls}-wrapper:hover &:after {
visibility: visible;
}
&-inner {
&:after {
@radio-dot-size: @radio-size - 8px;
@ -143,7 +150,7 @@ span.@{radio-prefix-cls} + * {
line-height: @btn-height-base - 2px;
color: @radio-button-color;
display: inline-block;
transition: all 0.3s ease;
transition: color 0.3s, background 0.3s, border-color 0.3s;
cursor: pointer;
border: @border-width-base @border-style-base @border-color-base;
border-left: 0;
@ -202,12 +209,15 @@ span.@{radio-prefix-cls} + * {
border-radius: @border-radius-base;
}
&:hover,
&-focused {
&:hover {
color: @radio-dot-color;
position: relative;
}
&:focus-within {
outline: @radio-focused-outline;
}
.@{radio-prefix-cls}-inner,
input[type='checkbox'],
input[type='radio'] {
@ -243,6 +253,10 @@ span.@{radio-prefix-cls} + * {
box-shadow: -1px 0 0 0 @radio-button-active-color;
color: @radio-button-active-color;
}
&:focus-within {
outline: @radio-focused-outline;
}
}
.@{radio-group-prefix-cls}-solid &-checked:not(&-disabled) {
@ -259,6 +273,9 @@ span.@{radio-prefix-cls} + * {
background: @radio-button-active-color;
color: @component-background;
}
&:focus-within {
outline: @radio-focused-outline;
}
}
&-disabled {