client/src/app/shared/shared-forms/input-switch.component.scss

   1 @use '_variables';
   2 @use '_mixins';
   3
   4 input {
   5   position: absolute;
   6   visibility: hidden;
   7
   8   + label {
   9     cursor: pointer;
  10     text-indent: -9999px;
  11     width: 35px;
  12     height: 20px;
  13     background: #cccccc;
  14     display: block;
  15     border-radius: 100px;
  16     position: relative;
  17     margin: 0;
  18
  19     &::after {
  20       content: '';
  21       position: absolute;
  22       top: 3px;
  23       left: 3px;
  24       width: 14px;
  25       height: 14px;
  26       background: pvar(--mainBackgroundColor);
  27       border-radius: 50%;
  28       transition: 0.3s ease-out;
  29     }
  30
  31     &:active::after {
  32       width: 40px;
  33     }
  34   }
  35
  36   &:checked + label {
  37     background: pvar(--mainColor);
  38
  39     &::after {
  40       left: calc(100% - 3px);
  41       transform: translateX(-100%);
  42     }
  43   }
  44 }