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

     1  /* Radio Buttons
     2     ========================================================================== */
     3  
     4  // Remove default Radio Buttons
     5  [type="radio"]:not(:checked),
     6  [type="radio"]:checked {
     7    position: absolute;
     8    left: -9999px;
     9    opacity: 0;
    10  }
    11  
    12  [type="radio"]:not(:checked) + label,
    13  [type="radio"]:checked + label {
    14    position: relative;
    15    padding-left: 35px;
    16    cursor: pointer;
    17    display: inline-block;
    18    height: 25px;
    19    line-height: 25px;
    20    font-size: 1rem;
    21    transition: .28s ease;
    22  
    23    -khtml-user-select: none; /* webkit (konqueror) browsers */
    24    user-select: none;
    25  }
    26  
    27  [type="radio"] + label:before,
    28  [type="radio"] + label:after {
    29    content: '';
    30    position: absolute;
    31    left: 0;
    32    top: 0;
    33    margin: 4px;
    34    width: 16px;
    35    height: 16px;
    36    z-index: 0;
    37    transition: .28s ease;
    38  }
    39  
    40  /* Unchecked styles */
    41  [type="radio"]:not(:checked) + label:before,
    42  [type="radio"]:not(:checked) + label:after,
    43  [type="radio"]:checked + label:before,
    44  [type="radio"]:checked + label:after,
    45  [type="radio"].with-gap:checked + label:before,
    46  [type="radio"].with-gap:checked + label:after {
    47    border-radius: 50%;
    48  }
    49  
    50  [type="radio"]:not(:checked) + label:before,
    51  [type="radio"]:not(:checked) + label:after {
    52    border: 2px solid $radio-empty-color;
    53  }
    54  
    55  [type="radio"]:not(:checked) + label:after {
    56    transform: scale(0);
    57  }
    58  
    59  /* Checked styles */
    60  [type="radio"]:checked + label:before {
    61    border: 2px solid transparent;
    62  }
    63  
    64  [type="radio"]:checked + label:after,
    65  [type="radio"].with-gap:checked + label:before,
    66  [type="radio"].with-gap:checked + label:after {
    67    border: $radio-border;
    68  }
    69  
    70  [type="radio"]:checked + label:after,
    71  [type="radio"].with-gap:checked + label:after {
    72    background-color: $radio-fill-color;
    73  }
    74  
    75  [type="radio"]:checked + label:after {
    76    transform: scale(1.02);
    77  }
    78  
    79  /* Radio With gap */
    80  [type="radio"].with-gap:checked + label:after {
    81    transform: scale(.5);
    82  }
    83  
    84  /* Focused styles */
    85  [type="radio"].tabbed:focus + label:before {
    86    box-shadow: 0 0 0 10px rgba(0,0,0,.1);
    87  }
    88  
    89  /* Disabled Radio With gap */
    90  [type="radio"].with-gap:disabled:checked + label:before {
    91    border: 2px solid $input-disabled-color;
    92  }
    93  
    94  [type="radio"].with-gap:disabled:checked + label:after {
    95    border: none;
    96    background-color: $input-disabled-color;
    97  }
    98  
    99  /* Disabled style */
   100  [type="radio"]:disabled:not(:checked) + label:before,
   101  [type="radio"]:disabled:checked + label:before {
   102    background-color: transparent;
   103    border-color: $input-disabled-color;
   104  }
   105  
   106  [type="radio"]:disabled + label {
   107    color: $input-disabled-color;
   108  }
   109  
   110  [type="radio"]:disabled:not(:checked) + label:before {
   111    border-color: $input-disabled-color;
   112  }
   113  
   114  [type="radio"]:disabled:checked + label:after {
   115    background-color: $input-disabled-color;
   116    border-color: $input-disabled-solid-color;
   117  }