github.com/Ilhicas/nomad@v1.0.4-0.20210304152020-e86851182bc3/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    &.is-flex {
    14      display: flex;
    15      align-items: center;
    16  
    17      .label {
    18        padding-left: 0.5rem;
    19        padding-bottom: 1px;
    20      }
    21    }
    22  
    23    .input {
    24      opacity: 0;
    25      width: 0;
    26      height: 0;
    27      position: absolute;
    28      z-index: -1;
    29    }
    30  
    31    .toggler {
    32      display: inline-block;
    33      position: relative;
    34      vertical-align: middle;
    35      width: $size * 2;
    36      height: $size;
    37      border-radius: $size;
    38      background: $grey-blue;
    39      transition: background 0.3s ease-in-out;
    40  
    41      &::after {
    42        content: ' ';
    43        display: block;
    44        position: absolute;
    45        width: calc(#{$size} - 4px);
    46        height: calc(#{$size} - 4px);
    47        border-radius: 100%;
    48        background: $white;
    49        left: 2px;
    50        top: 2px;
    51        transform: translateX(0);
    52        transition: transform 0.3s ease-in-out;
    53      }
    54    }
    55  
    56    // Always style the toggler based off the input state to
    57    // ensure that the native input is driving behavior.
    58    .input:focus + .toggler {
    59      box-shadow: 0 0 0 1px $grey-light;
    60      outline: none;
    61    }
    62  
    63    .input:checked + .toggler {
    64      background: $blue;
    65  
    66      &::after {
    67        transform: translateX($size);
    68      }
    69    }
    70  
    71    .input:checked:focus + .toggler {
    72      box-shadow: 0 0 0 1px rgba($blue, 0.5);
    73    }
    74  
    75    .input:disabled + .toggler {
    76      background: rgba($grey-blue, 0.6);
    77  
    78      &::after {
    79        opacity: 0.5;
    80      }
    81    }
    82  
    83    .input:checked:disabled + .toggler {
    84      background: rgba($blue, 0.5);
    85    }
    86  }