diff --git a/components/checkbox/demo/basic.md b/components/checkbox/demo/basic.md index 758d47527598ed91db9070c7d5e9b9332a74f978..7f7e60b3bcc5ae615080bd9de1373811b3afb344 100644 --- a/components/checkbox/demo/basic.md +++ b/components/checkbox/demo/basic.md @@ -13,5 +13,5 @@ function onChange(checked){ console.log('checked = ' + checked); } -React.render(, container); +React.render(, container); ```` diff --git a/components/checkbox/demo/controller.md b/components/checkbox/demo/controller.md index b4820f916f0a2399d5945e4a98d4ffc9f8c5a39d..9301346468ca95b988905aee0290ce29667c807d 100644 --- a/components/checkbox/demo/controller.md +++ b/components/checkbox/demo/controller.md @@ -22,18 +22,20 @@ var App = React.createClass({ var label = (this.state.checked ? "选中":"取消") + "-" + (this.state.disabled ? "不可用":"可用"); return ; }, toggleChecked(e){ @@ -46,7 +48,7 @@ var App = React.createClass({ console.log('checked = ',checked); this.setState({checked:checked}); } - + }); React.render(, container); diff --git a/components/checkbox/demo/disable.md b/components/checkbox/demo/disable.md index 26ca98cf1d94b64cecd15ac7785df548a741b9ff..fe07a0773d963cc295df8fea26fab7d5b97e7b03 100644 --- a/components/checkbox/demo/disable.md +++ b/components/checkbox/demo/disable.md @@ -13,10 +13,10 @@ var container = document.getElementById('components-checkbox-demo-disable'); React.render( , container); diff --git a/style/components/checkbox.less b/style/components/checkbox.less index c224523119e906c3313d934746fedd1080a44112..5433c96686da8bab1d5dd4d5cdb7e651c880b006 100644 --- a/style/components/checkbox.less +++ b/style/components/checkbox.less @@ -1,16 +1,21 @@ @checkboxWarpPrefixCls: ant-checkbox; -@checkboxPrefixCls: ~"@{checkboxWarpPrefixCls}-checkbox"; -@labelPrefixCls: ~"@{checkboxWarpPrefixCls}-label"; +@checkboxInnerPrefixCls: ~"@{checkboxWarpPrefixCls}-inner"; + /* 一般状态 */ .@{checkboxWarpPrefixCls} { - line-height: 1.5; white-space: nowrap; cursor: pointer; outline: none; display: inline-block; - vertical-align: middle; + position: relative; + + &:hover { + .@{checkboxInnerPrefixCls} { + border-color: #bcbcbc; + } + } - .@{checkboxPrefixCls} { + &-inner { &:after { -webkit-transform: rotate(45deg); transform: rotate(45deg); @@ -24,18 +29,13 @@ border-top: 0; border-left: 0; content: ' '; - -webkit-animation-timing-function: cubic-bezier(0.68, -0.55, 0.27, 1.55); animation-timing-function: cubic-bezier(0.68, -0.55, 0.27, 1.55); - -webkit-animation-duration: 0.3s; animation-duration: 0.3s; - -webkit-animation-name: amCheckboxOut; animation-name: amCheckboxOut; } - &:hover { - border-color: #bcbcbc; - } + position: relative; - top: 3px; + top: 0; left: 0; display: inline-block; width: 14px; @@ -48,34 +48,32 @@ 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); } - .@{labelPrefixCls} { - position: relative; - padding-left: 5px; - display: inline-block; - font-size: 12px; - line-height: 1.5; - vertical-align: baseline; - border: 1px dotted transparent; - white-space: normal; - pointer-events: none; - -webkit-user-select: text; - -moz-user-select: text; - -ms-user-select: text; - user-select: text; + &-input { + position: absolute; + left: 0; + z-index: 9999; + cursor: pointer; + opacity: 0; + top: 0; + bottom: 0; + right: 0; } - } /* 选中状态 */ .@{checkboxWarpPrefixCls}-checked { - .@{checkboxPrefixCls} { - border-color: #3dbcf6; - background-color: #3dbcf6; - &:hover { + + &:hover { + .@{checkboxInnerPrefixCls} { border-color: #3dbcf6; } + } + + .@{checkboxInnerPrefixCls} { + border-color: #3dbcf6; + background-color: #3dbcf6; + &:after { - -webkit-transform: rotate(45deg); transform: rotate(45deg); position: absolute; left: 4px; @@ -87,11 +85,8 @@ border-top: 0; border-left: 0; content: ' '; - -webkit-animation-timing-function: cubic-bezier(0.68, -0.55, 0.27, 1.55); animation-timing-function: cubic-bezier(0.68, -0.55, 0.27, 1.55); - -webkit-animation-duration: 0.3s; animation-duration: 0.3s; - -webkit-animation-name: amCheckboxOut; animation-name: amCheckboxOut; } } @@ -100,76 +95,57 @@ .@{checkboxWarpPrefixCls}-disabled { &.@{checkboxWarpPrefixCls}-checked { - .@{checkboxPrefixCls} { - background-color: #f3f3f3; - border-color: #d9d9d9; - &:hover { + + &:hover { + .@{checkboxInnerPrefixCls} { border-color: #d9d9d9; } + } + + .@{checkboxInnerPrefixCls} { + background-color: #f3f3f3; + border-color: #d9d9d9; + &:after { - -webkit-animation-name: none; animation-name: none; border-color: #cccccc; } } } - .@{checkboxPrefixCls} { - border-color: #d9d9d9; - background-color: #f3f3f3; - &:hover { + + &:hover { + .@{checkboxInnerPrefixCls} { border-color: #d9d9d9; } + } + + .@{checkboxInnerPrefixCls} { + border-color: #d9d9d9; + background-color: #f3f3f3; &:after { - -webkit-animation-name: none; animation-name: none; border-color: #f3f3f3; } } -} -@-webkit-keyframes amCheckboxIn { - 0% { - opacity: 0; - -webkit-transform-origin: 50% 50%; - transform-origin: 50% 50%; - -webkit-transform: scale(0, 0) rotate(45deg); - transform: scale(0, 0) rotate(45deg); - } - 100% { - opacity: 1; - -webkit-transform-origin: 50% 50%; - transform-origin: 50% 50%; - -webkit-transform: scale(1, 1) rotate(45deg); - transform: scale(1, 1) rotate(45deg); + .@{checkboxInnerPrefixCls}-input { + cursor: default; } } @keyframes amCheckboxIn { 0% { opacity: 0; - -webkit-transform-origin: 50% 50%; transform-origin: 50% 50%; - -webkit-transform: scale(0, 0) rotate(45deg); transform: scale(0, 0) rotate(45deg); } 100% { opacity: 1; - -webkit-transform-origin: 50% 50%; transform-origin: 50% 50%; - -webkit-transform: scale(1, 1) rotate(45deg); transform: scale(1, 1) rotate(45deg); } } -@-webkit-keyframes amCheckboxOut { - 0% { - opacity: 1; - } - 100% { - opacity: 0; - } -} - @keyframes amCheckboxOut { 0% { opacity: 1;