@switch-prefix-cls:ant-switch; @switch-duration:.3s; .@{switch-prefix-cls}{ 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; user-select: none; &-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: #fff; content: " "; cursor: pointer; transition: left @switch-duration @ease-in-out-circ; } &:hover:after{ } &-checked{ border: 1px solid @primary-color; background-color: @primary-color; .@{switch-prefix-cls}-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; } } }