switch.less 850 B

12345678910111213141516171819202122
  1. @import "../variate.less";
  2. .@{elNamespace}-switch{
  3. --@{elNamespace}-switch-on-color: var(~'--@{elNamespace}-color-success');
  4. --@{elNamespace}-switch-off-color: var(~'--@{elNamespace}-text-color-secondary');
  5. transition: border-color var(~'--@{elNamespace}-transition-duration'),background-color var(~'--@{elNamespace}-transition-duration'),opacity var(~'--@{elNamespace}-transition-duration');
  6. .@{elNamespace}-switch__core{
  7. height: 16px;
  8. border: 0;
  9. width: 32px;
  10. .@{elNamespace}-switch__action{
  11. width: 14px;
  12. height: 14px;
  13. }
  14. }
  15. &.is-checked .@{elNamespace}-switch__core .@{elNamespace}-switch__action {
  16. margin-left: calc(-1px - 14px);
  17. }
  18. &:hover {
  19. opacity: .4;
  20. transition: opacity var(~'--@{elNamespace}-transition-duration');
  21. }
  22. }