switch.scss 983 B

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364
  1. .nut-switch {
  2. position: relative;
  3. display: inline-block;
  4. background: #eee;
  5. border-radius: 20px;
  6. vertical-align: bottom;
  7. box-sizing: content-box;
  8. border: 0;
  9. transition: all $transition-duration $animation-timing-fun;
  10. .nut-switch-btn {
  11. position: absolute;
  12. left: 0;
  13. background: #fff;
  14. border: 0;
  15. border-radius: 50%;
  16. box-sizing: border-box;
  17. transition: all $transition-duration $animation-timing-fun;
  18. box-shadow: 0px 1px 6px 0px rgba(0,0,0,.1);
  19. }
  20. &.nut-switch-active {
  21. background-color: $primary-color-jd-red;
  22. }
  23. &.nut-switch-disabled {
  24. opacity: 0.6;
  25. }
  26. }
  27. .nut-switch-base {
  28. height: 28px;
  29. width: 54px;
  30. .nut-switch-btn {
  31. height: 28px;
  32. width: 28px;
  33. }
  34. &.nut-switch-active {
  35. .nut-switch-btn {
  36. left: 28px;
  37. }
  38. }
  39. }
  40. .nut-switch-small {
  41. height: 20px;
  42. width: 38px;
  43. &.nut-switch {
  44. border-radius: 11px;
  45. }
  46. .nut-switch-btn {
  47. height: 20px;
  48. width: 20px;
  49. }
  50. &.nut-switch-active {
  51. .nut-switch-btn {
  52. left: 19px;
  53. }
  54. }
  55. }