@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; 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; } &:focus { box-shadow: 0 0 0 2px tint(@primary-color, 80%); outline: 0; } &:focus:hover { box-shadow: none; } &-small { height: 14px; line-height: 12px; width: 28px; &:after { width: 12px; height: 12px; top: 0; left: 0; } } &-small&-checked:after { left: 14px; } &-checked { border: 1px solid @primary-color; background-color: @primary-color; .@{switch-prefix-cls}-inner { left: 6px; } &:after { left: 22px; } } &-disabled { cursor: not-allowed; background: #f4f4f4; border-color: #f4f4f4; &:after { background: #ccc; cursor: not-allowed; } &-inner { color: #ccc; } } }