PluginCard.module.scss 1.3 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768
  1. // TODO: Rewrite according to guidelines
  2. .plugin_card :global {
  3. .switch__label {
  4. position: relative;
  5. display: inline-block;
  6. width: 50px;
  7. }
  8. .switch__content {
  9. position: relative;
  10. display: block;
  11. height: 31px;
  12. overflow: hidden;
  13. cursor: pointer;
  14. border-radius: 30px;
  15. }
  16. .switch__content:before {
  17. position: absolute;
  18. top: 0;
  19. left: 0;
  20. display: block;
  21. width: calc(100% - 3px);
  22. height: calc(100% - 3px);
  23. content: '';
  24. background-color: #fff;
  25. border: 1.5px solid #E5E5EA;
  26. border-radius: 30px;
  27. }
  28. .switch__content:after {
  29. position: absolute;
  30. top: 50%;
  31. left: 50%;
  32. display: block;
  33. width: 0;
  34. height: 0;
  35. content: '';
  36. background-color: transparent;
  37. border-radius: 30px;
  38. transition: all .5s;
  39. }
  40. .switch__input {
  41. display: none;
  42. }
  43. .switch__circle {
  44. position: absolute;
  45. top: 2px;
  46. left: 2px;
  47. display: block;
  48. width: 27px;
  49. height: 27px;
  50. background-color: #fff;
  51. border-radius: 20px;
  52. box-shadow: 0 2px 6px #999;
  53. transition: all .5s;
  54. }
  55. .switch__input:checked ~ .switch__circle {
  56. left: 21px;
  57. }
  58. .switch__input:checked ~ .switch__content:after {
  59. top: 0;
  60. left: 0;
  61. width: 100%;
  62. height: 100%;
  63. background-color: #0078D7;
  64. }
  65. }