.checkboxFn(); .checkboxFn(@checkboxPrefixCls: ant-checkbox) { @checkboxWrapPrefixCls: @checkboxPrefixCls; @checkboxInnerPrefixCls: ~"@{checkboxWrapPrefixCls}-inner"; /* 一般状态 */ .@{checkboxWrapPrefixCls} { white-space: nowrap; cursor: pointer; outline: none; display: inline-block; line-height: 1; position: relative; vertical-align: middle; &:hover { .@{checkboxInnerPrefixCls} { border-color: #bcbcbc; } } &-inner { &:after { transform: rotate(45deg) scale(0); position: absolute; left: 4px; top: 1px; display: table; width: 5px; height: 8px; border: 2px solid #ffffff; border-top: 0; border-left: 0; 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: #d9d9d9; background-color: #ffffff; transition: border-color 0.1s @ease-in-out-back, background-color 0.1s @ease-in-out-back; } &-input { position: absolute; left: 0; z-index: 9999; cursor: pointer; .opacity(0); top: 0; bottom: 0; right: 0; } } /* 半选状态 */ .@{checkboxWrapPrefixCls}-indeterminate { .@{checkboxInnerPrefixCls} { border-color: @primary-color; background-color: @primary-color; &:after { content: ' '; transform: scale(1); position: absolute; left: 2px; top: 5px; width: 8px; height: 1px; } } } /* 选中状态 */ .@{checkboxWrapPrefixCls}-checked { &:hover { .@{checkboxInnerPrefixCls} { border-color: @primary-color; } } .@{checkboxInnerPrefixCls} { 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 #ffffff; border-top: 0; border-left: 0; content: ' '; transition: all .2s @ease-out-back .1s; } } } .@{checkboxWrapPrefixCls}-disabled { &.@{checkboxWrapPrefixCls}-checked { &:hover { .@{checkboxInnerPrefixCls} { border-color: #d9d9d9; } } .@{checkboxInnerPrefixCls} { background-color: #f3f3f3; border-color: #d9d9d9; &:after { animation-name: none; border-color: #cccccc; } } } &:hover { .@{checkboxInnerPrefixCls} { border-color: #d9d9d9; } } .@{checkboxInnerPrefixCls} { border-color: #d9d9d9; background-color: #f3f3f3; &:after { animation-name: none; border-color: #f3f3f3; } } .@{checkboxInnerPrefixCls}-input { cursor: default; } } .@{checkboxWrapPrefixCls} + span { margin-left: 8px; } }