github.com/iqoqo/nomad@v0.11.3-0.20200911112621-d7021c74d101/ui/app/styles/components/toggle.scss (about)

     1  $size: 12px;
     2  
     3  .toggle {
     4    cursor: pointer;
     5    font-weight: $weight-semibold;
     6    position: relative;
     7  
     8    &.is-disabled {
     9      color: $grey-blue;
    10      cursor: not-allowed;
    11    }
    12  
    13    .input {
    14      opacity: 0;
    15      width: 0;
    16      height: 0;
    17      position: absolute;
    18      z-index: -1;
    19    }
    20  
    21    .toggler {
    22      display: inline-block;
    23      position: relative;
    24      vertical-align: middle;
    25      width: $size * 2;
    26      height: $size;
    27      border-radius: $size;
    28      background: $grey-blue;
    29      transition: background 0.3s ease-in-out;
    30  
    31      &::after {
    32        content: ' ';
    33        display: block;
    34        position: absolute;
    35        width: calc(#{$size} - 4px);
    36        height: calc(#{$size} - 4px);
    37        border-radius: 100%;
    38        background: $white;
    39        left: 2px;
    40        top: 2px;
    41        transform: translateX(0);
    42        transition: transform 0.3s ease-in-out;
    43      }
    44    }
    45  
    46    // Always style the toggler based off the input state to
    47    // ensure that the native input is driving behavior.
    48    .input:focus + .toggler {
    49      box-shadow: 0 0 0 1px $grey-light;
    50      outline: none;
    51    }
    52  
    53    .input:checked + .toggler {
    54      background: $blue;
    55  
    56      &::after {
    57        transform: translateX($size);
    58      }
    59    }
    60  
    61    .input:checked:focus + .toggler {
    62      box-shadow: 0 0 0 1px rgba($blue, 0.5);
    63    }
    64  
    65    .input:disabled + .toggler {
    66      background: rgba($grey-blue, 0.6);
    67  
    68      &::after {
    69        opacity: 0.5;
    70      }
    71    }
    72  
    73    .input:checked:disabled + .toggler {
    74      background: rgba($blue, 0.5);
    75    }
    76  }