drip-public/iview
6
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

optimize box-shadow

Browse source 
use two box-shadow when focus, and a :after to make focus style looks better
This commit is contained in:
梁灏 2018-01-22 17:47:06 +08:00
parent 2e14b458da
commit a646fc36fe
1 changed files with 46 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

53
src/styles/components/radio.less
View file

@ -178,34 +178,45 @@ span.@{radio-prefix-cls} + * {
height: @btn-circle-size; height: @btn-circle-size;
line-height: @btn-circle-size - 2px; line-height: @btn-circle-size - 2px;
margin: 0; margin: 0;
padding: 0 16px; padding: 0 16px - 1px;
font-size: @font-size-small; font-size: @font-size-small;
color: @btn-default-color; color: @btn-default-color;
transition: all @transition-time ease-in-out; transition: all @transition-time ease-in-out;
cursor: pointer; cursor: pointer;
border: 1px solid @border-color-base; border: 1px solid @border-color-base;
//border-left: 0; border-left: 0;
background: #fff; background: #fff;
position: relative;
> span { > span {
margin-left: 0; margin-left: 0;
} }
&:before { &:before, &:after {
content: ''; content: '';
display: block;
position: absolute; position: absolute;
width: 1px; width: 1px;
height: 100%; height: 100%;
left: -1px; left: -1px;
top: 0;
background: @border-color-base; background: @border-color-base;
visibility: hidden; //visibility: hidden;
transition: all @transition-time ease-in-out; 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 { &:first-child {
border-radius: @btn-border-radius 0 0 @btn-border-radius; border-radius: @btn-border-radius 0 0 @btn-border-radius;
border-left: 1px solid @border-color-base; border-left: 1px solid @border-color-base;
&:before { &:before, &:after {
display: none; display: none;
} }
} }
@ -237,11 +248,31 @@ span.@{radio-prefix-cls} + * {
background: #fff; background: #fff;
border-color: @primary-color; border-color: @primary-color;
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 { &:first-child {
border-color: @primary-color; border-color: @primary-color;
//box-shadow: none!important; box-shadow: none;
} }
&:hover { &:hover {
@ -287,6 +318,9 @@ span.@{radio-prefix-cls} + * {
height: @btn-circle-size-large; height: @btn-circle-size-large;
line-height: @btn-circle-size-large - 2px; line-height: @btn-circle-size-large - 2px;
font-size: @font-size-base; 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{ .@{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; line-height: @btn-circle-size-small - 2px;
padding: 0 12px; padding: 0 12px;
font-size: @font-size-small; font-size: @font-size-small;
&:after{
height: @btn-circle-size-small + 4px;
}
&:first-child { &:first-child {
border-radius: @btn-border-radius-small 0 0 @btn-border-radius-small; border-radius: @btn-border-radius-small 0 0 @btn-border-radius-small;
} }