_switch.scss 894 B

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051
  1. // Switch free
  2. .bs-switch {
  3. position: relative;
  4. display: inline-block;
  5. width: 60px;
  6. height: 34px;
  7. input {
  8. display: none;
  9. &:checked {
  10. + .slider {
  11. background-color: #2196F3;
  12. &:before {
  13. transform: translateX(26px);
  14. }
  15. }
  16. }
  17. &:focus {
  18. + .slider {
  19. box-shadow: 0 0 1px #2196F3;
  20. }
  21. }
  22. }
  23. .slider {
  24. position: absolute;
  25. cursor: pointer;
  26. top: 0;
  27. left: 0;
  28. right: 0;
  29. bottom: 0;
  30. background-color: #ccc;
  31. -webkit-transition: .4s;
  32. transition: .4s;
  33. &:before {
  34. position: absolute;
  35. content: "";
  36. height: 26px;
  37. width: 26px;
  38. left: 4px;
  39. bottom: 4px;
  40. background-color: white;
  41. -webkit-transition: .4s;
  42. transition: .4s;
  43. }
  44. &.round {
  45. border-radius: 34px;
  46. &:before {
  47. border-radius: 50%;
  48. }
  49. }
  50. }
  51. }