@radioGroupPrefixCls: ant-radio-group; @radioWrapPrefixCls: ant-radio; @radioInnerPrefixCls: ~"@{radioWrapPrefixCls}-inner"; @radioDuration: .3s; .@{radioGroupPrefixCls} { label { margin-right: 16px; } } /* 一般状态 */ .@{radioWrapPrefixCls} { white-space: nowrap; outline: none; display: inline-block; position: relative; line-height: 1; vertical-align: middle; &:hover { .@{radioInnerPrefixCls} { border-color: #bcbcbc; } } &-inner { &:after { position: absolute; width: 6px; height: 6px; left: 3px; top: 3px; border-radius: 6px; display: table; border-top: 0; border-left: 0; content: ' '; background-color: @primary-color; transform: scale(0); opacity: 0; transition: transform @radioDuration @ease-in-out-circ, opacity @radioDuration @ease-in-out-circ, background-color @radioDuration @ease-in-out-circ; } position: relative; top: 0; left: 0; display: inline-block; width: 14px; height: 14px; border-width: 1px; border-style: solid; border-radius: 14px; border-color: #d9d9d9; background-color: #ffffff; transition: border-color @radioDuration @ease-in-out-circ, background-color @radioDuration @ease-in-out-circ; } &-input { position: absolute; left: 0; z-index: 9999; cursor: pointer; opacity: 0; top: 0; bottom: 0; right: 0; } } /* 选中状态 */ .@{radioWrapPrefixCls}-checked { .@{radioInnerPrefixCls} { border-color: #d9d9d9; &:after { transform: scale(1); opacity: 1; transition: transform @radioDuration @ease-out-back, opacity @radioDuration @ease-in-out-circ, background-color @radioDuration @ease-in-out-circ; } } } .@{radioWrapPrefixCls}-disabled { &:hover { .@{radioInnerPrefixCls} { border-color: #d9d9d9; } } .@{radioInnerPrefixCls} { border-color: #d9d9d9; background-color: #f3f3f3; &:after { background-color: #cccccc; } } .@{radioInnerPrefixCls}-input { cursor: default; } } .@{radioWrapPrefixCls} + span { margin-left: 8px; }