onoff.less 1.6 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374
  1. .onoff-checkbox {
  2. width:15%;
  3. }
  4. .onoffswitch {
  5. position: relative;
  6. width: 110px;
  7. -webkit-user-select:none;
  8. -moz-user-select:none;
  9. -ms-user-select: none;
  10. }
  11. .onoffswitch-checkbox {
  12. opacity: 0;
  13. position: absolute;
  14. }
  15. .onoffswitch-checkbox:before {
  16. content: "";
  17. display: inline-block;
  18. width: 16px;
  19. height: 16px;
  20. margin-right: 10px;
  21. position: absolute;
  22. left: 0;
  23. bottom: 1px;
  24. background-color: #fff;
  25. border: 1px solid #ccc;
  26. border-radius: 0px;
  27. }
  28. .onoffswitch-label {
  29. display: block;
  30. overflow: hidden;
  31. cursor: pointer;
  32. border: 2px solid #FFFFFF !important;
  33. border-radius: 50px !important;
  34. }
  35. .onoffswitch-inner {
  36. display: block;
  37. transition: margin 0.3s ease-in 0s;
  38. }
  39. .onoffswitch-inner:before, .onoffswitch-inner:after {
  40. display: block;
  41. float: left;
  42. width: 50%;
  43. height: 30px;
  44. padding: 0;
  45. line-height: 40px;
  46. font-size: 20px;
  47. box-sizing: border-box;
  48. content: "";
  49. background-color: #EEEEEE;
  50. }
  51. .onoffswitch-switch {
  52. display: block;
  53. width: 37px;
  54. background-color: @light-green;
  55. position: absolute;
  56. top: 0;
  57. bottom: 0;
  58. right: 0px;
  59. border: 2px solid #FFFFFF;
  60. border-radius: 50px !important;
  61. transition: all 0.3s ease-in 0s;
  62. }
  63. .onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner {
  64. margin-right: 0;
  65. }
  66. .onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch {
  67. right: 71px;
  68. background-color: #A1A1A1;
  69. }
  70. .onoffswitch-checkbox:focus + .onoffswitch-label .onoffswitch-switch {
  71. border: 3px solid #444444;
  72. }