@switchPrefixCls:ant-switch; @switch-duration:.3s; .@{switchPrefixCls}{ position: relative; display: inline-block; box-sizing: border-box; width: 44px; height: 22px; line-height: 20px; vertical-align: middle; border-radius: 20px 20px; border: 1px solid #ccc; background-color: #ccc; cursor: pointer; transition: all @switch-duration @ease-in-out-circ; &-inner { color:#fff; font-size: 12px; position: absolute; left:24px; } &:after{ position: absolute; width: 18px; height: 18px; left: 2px; top:1px; border-radius: 100%; background-color: #ffffff; content: " "; cursor: pointer; transition: left @switch-duration @ease-in-out-circ; } &:hover:after{ } &-checked{ border: 1px solid @primary-color; background-color: @primary-color; .@{switchPrefixCls}-inner { left:6px; } &:after{ left: 22px; } } &-disabled{ cursor: no-drop; background: #f4f4f4; border-color:#f4f4f4; &:after{ background: #ccc; cursor: no-drop; } &:hover:after{ } &-inner { color:#ccc; } } }