input-switch.less 1.0 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152
  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: background 0.15s ease, border-color 0.15s ease;
  22. &::before {
  23. content: '';
  24. display: block;
  25. width: 16px;
  26. height: 16px;
  27. position: relative;
  28. left: 1px;
  29. top: 1px;
  30. background-color: #fff;
  31. border-radius: 0.875em;
  32. transition: background-color 0.15s ease, color 0.15s ease, left 0.15s ease;
  33. }
  34. }
  35. &:checked + .input-switch-btn {
  36. background-color: @ol-green;
  37. border-color: #fff;
  38. &::before {
  39. left: 15px;
  40. top: 1px;
  41. }
  42. }
  43. &:disabled + .input-switch-btn {
  44. cursor: default;
  45. opacity: 0.35;
  46. }
  47. }