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

fix checkbox and radio style

Browse Source
This commit is contained in:
afc163 2015-07-16 22:48:53 +08:00
parent e98d95e7b2
commit 4e269602f9
2 changed files with 13 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
style/components/checkbox.less
View File

@ -19,7 +19,6 @@
&-inner { &-inner {
&:after { &:after {
-webkit-transform: rotate(45deg);
transform: rotate(45deg); transform: rotate(45deg);
position: absolute; position: absolute;
left: 4px; left: 4px;
@ -31,9 +30,9 @@
border-top: 0; border-top: 0;
border-left: 0; border-left: 0;
content: ' '; content: ' ';
animation-timing-function: cubic-bezier(0.68, -0.55, 0.27, 1.55); animation-timing-function: @ease-in-out-back;
animation-duration: 0.3s; animation-duration: 0.3s;
animation-name: amCheckboxOut; animation-name: fadeOut;
} }
position: relative; position: relative;
@ -47,7 +46,7 @@
border-radius: 3px; border-radius: 3px;
border-color: #d9d9d9; border-color: #d9d9d9;
background-color: #ffffff; background-color: #ffffff;
transition: border-color 0.3s cubic-bezier(0.68, -0.55, 0.27, 1.55), background-color 0.3s cubic-bezier(0.68, -0.55, 0.27, 1.55); transition: border-color 0.3s @ease-in-out-back, background-color 0.3s @ease-in-out-back;
} }
&-input { &-input {
@ -67,13 +66,13 @@
&:hover { &:hover {
.@{checkboxInnerPrefixCls} { .@{checkboxInnerPrefixCls} {
border-color: #3dbcf6; border-color: @primary-color;
} }
} }
.@{checkboxInnerPrefixCls} { .@{checkboxInnerPrefixCls} {
border-color: #3dbcf6; border-color: @primary-color;
background-color: #3dbcf6; background-color: @primary-color;
&:after { &:after {
transform: rotate(45deg); transform: rotate(45deg);
@ -87,9 +86,9 @@
border-top: 0; border-top: 0;
border-left: 0; border-left: 0;
content: ' '; content: ' ';
animation-timing-function: cubic-bezier(0.68, -0.55, 0.27, 1.55); animation-timing-function: @ease-in-out-back;
animation-duration: 0.3s; animation-duration: 0.3s;
animation-name: amCheckboxOut; animation-name: fadeOut;
} }
} }
} }
@ -134,25 +133,3 @@
cursor: default; cursor: default;
} }
} }
@keyframes amCheckboxIn {
0% {
opacity: 0;
transform-origin: 50% 50%;
transform: scale(0, 0) rotate(45deg);
}
100% {
opacity: 1;
transform-origin: 50% 50%;
transform: scale(1, 1) rotate(45deg);
}
}
@keyframes amCheckboxOut {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}

14
style/components/radio.less
View File

@ -1,6 +1,6 @@
@radioWarpPrefixCls: ant-radio; @radioWarpPrefixCls: ant-radio;
@radioInnerPrefixCls: ~"@{radioWarpPrefixCls}-inner"; @radioInnerPrefixCls: ~"@{radioWarpPrefixCls}-inner";
@duration:.3s; @radioDuration: .3s;
/* 一般状态 */ /* 一般状态 */
.@{radioWarpPrefixCls} { .@{radioWarpPrefixCls} {
@ -27,12 +27,10 @@
border-top: 0; border-top: 0;
border-left: 0; border-left: 0;
content: ' '; content: ' ';
background-color: #3dbcf6; background-color: @primary-color;
transform: scale(0); transform: scale(0);
-webkit-transform: scale(0);
opacity: 0; opacity: 0;
transition: transform @duration @ease-in-out-circ,opacity @duration @ease-in-out-circ,background-color @duration @ease-in-out-circ; transition: transform @radioDuration @ease-in-out-circ,opacity @radioDuration @ease-in-out-circ,background-color @radioDuration @ease-in-out-circ;
-webkit-transition: -webkit-transform @duration @ease-in-out-circ,opacity @duration @ease-in-out-circ,background-color @duration @ease-in-out-circ;
} }
position: relative; position: relative;
@ -46,7 +44,7 @@
border-radius: 14px; border-radius: 14px;
border-color: #d9d9d9; border-color: #d9d9d9;
background-color: #ffffff; background-color: #ffffff;
transition: border-color @duration @ease-in-out-circ, background-color @duration @ease-in-out-circ; transition: border-color @radioDuration @ease-in-out-circ, background-color @radioDuration @ease-in-out-circ;
} }
&-input { &-input {
@ -68,10 +66,8 @@
border-color: #d9d9d9; border-color: #d9d9d9;
&:after { &:after {
transform: scale(1); transform: scale(1);
-webkit-transform: scale(1);
opacity: 1; opacity: 1;
transition: transform @duration @ease-out-back,opacity @duration @ease-in-out-circ,background-color @duration @ease-in-out-circ; transition: transform @radioDuration @ease-out-back,opacity @radioDuration @ease-in-out-circ,background-color @radioDuration @ease-in-out-circ;
-webkit-transition: -webkit-transform @duration @ease-out-back,opacity @duration @ease-in-out-circ,background-color @duration @ease-in-out-circ;
} }
} }
} }