github.com/mithrandie/csvq@v1.18.1/docs/_sass/components/forms/_switches.scss (about)

     1  /* Switch
     2     ========================================================================== */
     3  
     4  .switch,
     5  .switch * {
     6    -webkit-user-select: none;
     7    -moz-user-select: none;
     8    -khtml-user-select: none;
     9    -ms-user-select: none;
    10  }
    11  
    12  .switch label {
    13    cursor: pointer;
    14  }
    15  
    16  .switch label input[type=checkbox] {
    17    opacity: 0;
    18    width: 0;
    19    height: 0;
    20  
    21    &:checked + .lever {
    22      background-color: $switch-checked-lever-bg;
    23  
    24      &:after {
    25        background-color: $switch-bg-color;
    26        left: 24px;
    27      }
    28    }
    29  }
    30  
    31  .switch label .lever {
    32    content: "";
    33    display: inline-block;
    34    position: relative;
    35    width: 40px;
    36    height: 15px;
    37    background-color: $switch-unchecked-lever-bg;
    38    border-radius: $switch-radius;
    39    margin-right: 10px;
    40    transition: background 0.3s ease;
    41    vertical-align: middle;
    42    margin: 0 16px;
    43  
    44    &:after {
    45      content: "";
    46      position: absolute;
    47      display: inline-block;
    48      width: 21px;
    49      height: 21px;
    50      background-color: $switch-unchecked-bg;
    51      border-radius: 21px;
    52      box-shadow: 0 1px 3px 1px rgba(0,0,0,.4);
    53      left: -5px;
    54      top: -3px;
    55      transition: left 0.3s ease, background .3s ease, box-shadow 0.1s ease;
    56    }
    57  }
    58  
    59  // Switch active style
    60  input[type=checkbox]:checked:not(:disabled) ~ .lever:active::after,
    61  input[type=checkbox]:checked:not(:disabled).tabbed:focus ~ .lever::after {
    62    box-shadow: 0 1px 3px 1px rgba(0,0,0,.4), 0 0 0 15px transparentize($switch-bg-color, .9);
    63  }
    64  
    65  input[type=checkbox]:not(:disabled) ~ .lever:active:after,
    66  input[type=checkbox]:not(:disabled).tabbed:focus ~ .lever::after {
    67    box-shadow: 0 1px 3px 1px rgba(0,0,0,.4), 0 0 0 15px rgba(0, 0, 0, .08);
    68  }
    69  
    70  // Disabled Styles
    71  .switch input[type=checkbox][disabled] + .lever {
    72    cursor: default;
    73  }
    74  
    75  .switch label input[type=checkbox][disabled] + .lever:after,
    76  .switch label input[type=checkbox][disabled]:checked + .lever:after {
    77    background-color: $input-disabled-solid-color;
    78  }