input-switch.less 1.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657
  1. .input-switch {
  2. display: inline-block;
  3. vertical-align: middle;
  4. padding-left: 5px;
  5. }
  6. .input-switch-hidden-input {
  7. display: none;
  8. + .input-switch-btn {
  9. display: block;
  10. width: 34px;
  11. height: 20px;
  12. position: relative;
  13. outline: 0;
  14. margin: 0;
  15. font-weight: normal;
  16. cursor: pointer;
  17. user-select: none;
  18. padding: 1px;
  19. background-color: @rp-highlight-blue;
  20. border-radius: 0.875em;
  21. transition:
  22. background 0.15s ease,
  23. border-color 0.15s ease;
  24. &::before {
  25. content: '';
  26. display: block;
  27. width: 16px;
  28. height: 16px;
  29. position: relative;
  30. left: 1px;
  31. top: 1px;
  32. background-color: #fff;
  33. border-radius: 0.875em;
  34. transition:
  35. background-color 0.15s ease,
  36. color 0.15s ease,
  37. left 0.15s ease;
  38. }
  39. }
  40. &:checked + .input-switch-btn {
  41. background-color: @ol-green;
  42. border-color: #fff;
  43. &::before {
  44. left: 15px;
  45. top: 1px;
  46. }
  47. }
  48. &:disabled + .input-switch-btn {
  49. cursor: default;
  50. opacity: 0.35;
  51. }
  52. }