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

Merge pull request #2882 from iview/pr/2867

Browse source 
Pr/2867
This commit is contained in:
Aresn 2018-01-22 18:09:19 +08:00 • committed by GitHub
commit 342390e691
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 125 additions and 54 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -3,10 +3,16 @@
@radio-inner-prefix-cls: ~"@{radio-prefix-cls}-inner";
@radio-group-button-prefix-cls: ~"@{radio-group-prefix-cls}-button";
.@{radio-prefix-cls}-focus {
box-shadow: 0 0 0 2px fade(@primary-color, 20%);
z-index: 1;
}
.@{radio-group-prefix-cls} {
display: inline-block;
font-size: @font-size-small;
vertical-align: middle;
//outline: none;
&-vertical{
.@{radio-prefix-cls}-wrapper {
display: block;
@ -28,19 +34,14 @@
&-disabled{
cursor: @cursor-disabled;
}
outline: 0;
&:focus {
& .@{radio-inner-prefix-cls} {
box-shadow: 0 0 0 2px fade(@primary-color, 20%);
}
}
//outline: none;
}
.@{radio-prefix-cls} {
display: inline-block;
margin-right: 4px;
white-space: nowrap;
outline: none;
//outline: none;
position: relative;
line-height: 1;
vertical-align: middle;
@ -177,7 +178,7 @@ 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;
@ -185,26 +186,37 @@ span.@{radio-prefix-cls} + * {
border: 1px solid @border-color-base;
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;
}
}
@ -225,10 +237,6 @@ span.@{radio-prefix-cls} + * {
}
}
&:focus {
box-shadow: 0 0 0 2px fade(@primary-color, 20%);
}
.@{radio-prefix-cls}-inner,
input {
opacity: 0;
@ -241,25 +249,41 @@ span.@{radio-prefix-cls} + * {
border-color: @primary-color;
color: @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 {
border-color: tint(@primary-color, 20%);
box-shadow: -1px 0 0 0 tint(@primary-color, 20%);
//box-shadow: -1px 0 0 0 tint(@primary-color, 20%);
color: tint(@primary-color, 20%);
}
&:focus {
box-shadow: 0 0 0 2px fade(@primary-color, 20%)!important;
}
&:active {
border-color: shade(@primary-color, 5%);
box-shadow: -1px 0 0 0 shade(@primary-color, 5%);
//box-shadow: -1px 0 0 0 shade(@primary-color, 5%);
color: shade(@primary-color, 5%);
}
}
@ -294,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{
@ -301,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;
}