@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; } &-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; } &-inner { color: #ccc; } } }