index.scss 1.3 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758
  1. .nut-switch {
  2. cursor: pointer;
  3. display: inline-flex;
  4. align-items: center;
  5. background-color: $primary-color;
  6. border-radius: $switch-border-radius;
  7. background-size: 100% 100%;
  8. background-repeat: no-repeat;
  9. background-position: center center;
  10. flex: 0 0 auto; // 防止被压缩
  11. .nut-icon-loading1 {
  12. width: 12px;
  13. height: 12px;
  14. font-size: 12px;
  15. }
  16. &.nut-switch-close {
  17. background-color: $switch-close-bg-color;
  18. }
  19. .nut-switch-button {
  20. display: flex;
  21. align-items: center;
  22. justify-content: center;
  23. border-radius: 50%;
  24. background: $white;
  25. transition: transform 0.3s;
  26. .nut-switch-label {
  27. color: $white;
  28. font-size: $font-size-1;
  29. &.open {
  30. transform: translateX(-16px);
  31. }
  32. &.close {
  33. transform: translateX(16px);
  34. }
  35. }
  36. }
  37. &.nut-switch-disable {
  38. opacity: 0.6;
  39. }
  40. &.nut-switch-base {
  41. min-width: $switch-width;
  42. height: $switch-height;
  43. line-height: $switch-line-height;
  44. overflow: hidden;
  45. .nut-switch-button {
  46. height: $switch-inside-height;
  47. width: $switch-inside-width;
  48. transform: $switch-inside-close-transform;
  49. }
  50. &.nut-switch-open {
  51. .nut-switch-button {
  52. transform: $switch-inside-open-transform;
  53. }
  54. }
  55. }
  56. }