mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2024-11-27 20:49:53 +08:00
Code Issues Actions 39 Packages Projects Releases Wiki Activity

Fix Radio[disabled] style and add label-hovering style, close #3590

Browse Source
This commit is contained in:
afc163 2016-11-01 00:54:47 +08:00
parent 44f61ac987
commit 002f3f5127
2 changed files with 56 additions and 95 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

126
components/checkbox/style/mixin.less
View File

@ -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;
@ -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 {
@ -64,83 +63,56 @@
}
// 半选状态
.@{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;
@ -148,10 +120,6 @@
}
}
.@{checkbox-inner-prefix-cls}-input {
cursor: default;
}
& + span {
color: #ccc;
cursor: @cursor-disabled;
@ -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 {

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

@ -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;
@ -19,6 +19,7 @@
position: relative;
white-space: nowrap;
margin-right: 8px;
cursor: pointer;
}
.@{radio-prefix-cls} {
@ -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 {
@ -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 {
@ -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 {