github.com/anth0d/nomad@v0.0.0-20221214183521-ae3a0a2cad06/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: baseline;
    35      position: relative;
    36      top: 1px;
    37      width: $size * 2;
    38      height: $size;
    39      border-radius: $size;
    40      background: $grey-blue;
    41      transition: background 0.3s ease-in-out;
    42  
    43      &::after {
    44        content: ' ';
    45        display: block;
    46        position: absolute;
    47        width: calc(#{$size} - 4px);
    48        height: calc(#{$size} - 4px);
    49        border-radius: 100%;
    50        background: $white;
    51        left: 2px;
    52        top: 2px;
    53        transform: translateX(0);
    54        transition: transform 0.3s ease-in-out;
    55      }
    56    }
    57  
    58    // Always style the toggler based off the input state to
    59    // ensure that the native input is driving behavior.
    60    .input:focus + .toggler {
    61      box-shadow: 0 0 0 1px $grey-light;
    62      outline: none;
    63    }
    64  
    65    .input:checked + .toggler {
    66      background: $blue;
    67  
    68      &::after {
    69        transform: translateX($size);
    70      }
    71    }
    72  
    73    .input:checked:focus + .toggler {
    74      box-shadow: 0 0 0 1px rgba($blue, 0.5);
    75    }
    76  
    77    .input:disabled + .toggler {
    78      background: rgba($grey-blue, 0.6);
    79  
    80      &::after {
    81        opacity: 0.5;
    82      }
    83    }
    84  
    85    .input:checked:disabled + .toggler {
    86      background: rgba($blue, 0.5);
    87    }
    88  }