github.com/hernad/nomad@v1.6.112/ui/app/styles/components/toggle.scss (about)

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