Skip to content

Commit

Permalink
Fix Radio[disabled] style and add label-hovering style, close #3590
Browse files Browse the repository at this point in the history
  • Loading branch information
@afc163
afc163 committed Oct 31, 2016
1 parent 44f61ac commit 002f3f5
Show file tree
Hide file tree
Showing 2 changed files with 56 additions and 95 deletions.
126 changes: 47 additions & 79 deletions components/checkbox/style/mixin.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,14 +12,26 @@
position: relative;
vertical-align: middle;

.@{checkbox-prefix-cls}-wrapper:hover &,
&:hover,
&-focused {
.@{checkbox-inner-prefix-cls} {
border-color: #bcbcbc;
border-color: #bbb;
}
}

&-inner {
position: relative;
top: 0;
left: 0;
display: inline-block;
width: 14px;
height: 14px;
border: 1px solid @border-color-base;
border-radius: 3px;
background-color: #fff;
transition: all .3s;

&:after {
transform: rotate(45deg) scale(0);
position: absolute;
Expand All @@ -34,19 +46,6 @@
content: ' ';
transition: all .1s @ease-in-back;
}

position: relative;
top: 0;
left: 0;
display: inline-block;
width: 14px;
height: 14px;
border-width: 1px;
border-style: solid;
border-radius: 3px;
border-color: @border-color-base;
background-color: #fff;
transition: border-color 0.1s @ease-in-out-back, background-color 0.1s @ease-in-out-back;
}

&-input {
Expand All @@ -64,94 +63,63 @@
}

// 半选状态
.@{checkbox-prefix-cls}-indeterminate .@{checkbox-inner-prefix-cls}:after {
content: ' ';
transform: scale(1);
position: absolute;
left: 2px;
top: 5px;
width: 8px;
height: 1px;
}

// 选中状态
.@{checkbox-prefix-cls}-checked .@{checkbox-inner-prefix-cls}:after {
transform: rotate(45deg) scale(1);
position: absolute;
left: 4px;
top: 1px;
display: table;
width: 5px;
height: 8px;
border: 2px solid #fff;
border-top: 0;
border-left: 0;
content: ' ';
transition: all .2s @ease-out-back .1s;
}

.@{checkbox-prefix-cls}-checked,
.@{checkbox-prefix-cls}-indeterminate {
.@{checkbox-inner-prefix-cls} {
border-color: @primary-color;
background-color: @primary-color;
&:after {
content: ' ';
transform: scale(1);
position: absolute;
left: 2px;
top: 5px;
width: 8px;
height: 1px;
}
}
.@{checkbox-prefix-cls}-wrapper:hover &,
&:hover {
.@{checkbox-inner-prefix-cls} {
border-color: @primary-color;
}
}
}
// 选中状态
.@{checkbox-prefix-cls}-checked {

&:hover {
.@{checkbox-inner-prefix-cls} {
border-color: @primary-color;
}
}

.@{checkbox-inner-prefix-cls} {
border-color: @primary-color;
background-color: @primary-color;

&:after {
transform: rotate(45deg) scale(1);
position: absolute;
left: 4px;
top: 1px;
display: table;
width: 5px;
height: 8px;
border: 2px solid #fff;
border-top: 0;
border-left: 0;
content: ' ';
transition: all .2s @ease-out-back .1s;
}
}
}

.@{checkbox-prefix-cls}-disabled {
&.@{checkbox-prefix-cls}-checked {
&:hover {
.@{checkbox-inner-prefix-cls} {
border-color: @border-color-base;
}
}

.@{checkbox-inner-prefix-cls} {
background-color: #f3f3f3;
border-color: @border-color-base;

&:after {
animation-name: none;
border-color: #ccc;
}
}
}

&:hover {
.@{checkbox-inner-prefix-cls} {
border-color: @border-color-base;
.@{checkbox-inner-prefix-cls}:after {
animation-name: none;
border-color: #ccc;
}
}

.@{checkbox-inner-prefix-cls} {
border-color: @border-color-base;
border-color: @border-color-base!important;
background-color: #f3f3f3;
&:after {
animation-name: none;
border-color: #f3f3f3;
}
}

.@{checkbox-inner-prefix-cls}-input {
cursor: default;
}

& + span {
color: #ccc;
cursor: @cursor-disabled;
Expand All @@ -169,8 +137,8 @@

.@{checkbox-prefix-cls}-wrapper + span,
.@{checkbox-prefix-cls} + span {
margin-left: 8px;
margin-right: 8px;
padding-left: 8px;
padding-right: 8px;
}

.@{checkbox-prefix-cls}-group {
Expand Down
25 changes: 9 additions & 16 deletions components/radio/style/index.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
@radio-prefix-cls: ~"@{ant-prefix}-radio";
@radio-group-prefix-cls: ~"@{radio-prefix-cls}-group";
@radio-inner-prefix-cls: ~"@{radio-prefix-cls}-inner";
@radio-duration: .2s;
@radio-duration: .3s;

.@{radio-group-prefix-cls} {
display: inline-block;
Expand All @@ -19,6 +19,7 @@
position: relative;
white-space: nowrap;
margin-right: 8px;
cursor: pointer;
}

.@{radio-prefix-cls} {
Expand All @@ -29,10 +30,11 @@
line-height: 1;
vertical-align: middle;
cursor: pointer;
.@{radio-prefix-cls}-wrapper:hover &,
&:hover,
&-focused {
.@{radio-inner-prefix-cls} {
border-color: #bcbcbc;
border-color: #bbb;
}
}
&-inner {
Expand Down Expand Up @@ -64,7 +66,7 @@
border-radius: 14px;
border-color: @border-color-base;
background-color: #fff;
transition: all @radio-duration @ease-in-out-circ;
transition: all @radio-duration;
}

&-input {
Expand Down Expand Up @@ -92,32 +94,23 @@
}

.@{radio-prefix-cls}-disabled {
&:hover {
.@{radio-inner-prefix-cls} {
border-color: @border-color-base;
}
}
.@{radio-inner-prefix-cls} {
border-color: @border-color-base;
border-color: @border-color-base!important;
background-color: #f3f3f3;
&:after {
background-color: #cccccc;
}
}

.@{radio-inner-prefix-cls}-input {
cursor: default;
}

.@{radio-prefix-cls}-disabled + span {
& + span {
color: #ccc;
cursor: @cursor-disabled;
}
}

span.@{radio-prefix-cls} + * {
margin-left: 8px;
margin-right: 8px;
padding-left: 8px;
padding-right: 8px;
}

.@{radio-prefix-cls}-button-wrapper {
Expand Down

0 comments on commit 002f3f5

Please sign in to comment.