code.gitea.io/gitea@v1.22.3/web_src/css/modules/checkbox.css (about)

     1  /* based on Fomantic UI checkbox module, with just the parts extracted that we use. If you find any
     2     unused rules here after refactoring, please remove them. */
     3  
     4  input[type="checkbox"],
     5  input[type="radio"] {
     6    width: var(--checkbox-size);
     7    height: var(--checkbox-size);
     8  }
     9  
    10  .ui.checkbox {
    11    position: relative;
    12    display: inline-block;
    13    vertical-align: baseline;
    14    min-height: var(--checkbox-size);
    15    line-height: var(--checkbox-size);
    16    min-width: var(--checkbox-size);
    17    padding: 1px;
    18  }
    19  
    20  .ui.checkbox input[type="checkbox"],
    21  .ui.checkbox input[type="radio"] {
    22    position: absolute;
    23    top: 1px;
    24    left: 0;
    25    width: var(--checkbox-size);
    26    height: var(--checkbox-size);
    27  }
    28  
    29  .ui.checkbox input[type="checkbox"]:enabled,
    30  .ui.checkbox input[type="radio"]:enabled,
    31  .ui.checkbox label:enabled {
    32    cursor: pointer;
    33  }
    34  
    35  .ui.checkbox label {
    36    cursor: auto;
    37    position: relative;
    38    display: block;
    39    user-select: none;
    40  }
    41  
    42  .ui.checkbox label,
    43  .ui.radio.checkbox label {
    44    margin-left: 20px;
    45  }
    46  
    47  .ui.checkbox + label {
    48    vertical-align: middle;
    49  }
    50  
    51  .ui.disabled.checkbox label,
    52  .ui.checkbox input[disabled] ~ label {
    53    cursor: default !important;
    54    opacity: 0.5;
    55    pointer-events: none;
    56  }
    57  
    58  .ui.radio.checkbox {
    59    min-height: var(--checkbox-size);
    60  }
    61  
    62  /* "switch" styled checkbox */
    63  
    64  .ui.toggle.checkbox {
    65    min-height: 1.5rem;
    66  }
    67  .ui.toggle.checkbox input {
    68    width: 3.5rem;
    69    height: 21px;
    70    opacity: 0;
    71    z-index: 3;
    72  }
    73  .ui.toggle.checkbox label {
    74    min-height: 1.5rem;
    75    padding-left: 4.5rem;
    76    padding-top: 0.15em;
    77  }
    78  .ui.toggle.checkbox label::before {
    79    display: block;
    80    position: absolute;
    81    content: "";
    82    z-index: 1;
    83    top: 0;
    84    width: 49px;
    85    height: 21px;
    86    border-radius: 500rem;
    87    left: 0;
    88  }
    89  .ui.toggle.checkbox label::after {
    90    background: var(--color-white);
    91    box-shadow: 1px 1px 4px 1px var(--color-shadow);
    92    position: absolute;
    93    content: "";
    94    opacity: 1;
    95    z-index: 2;
    96    width: 18px;
    97    height: 18px;
    98    top: 1.5px;
    99    left: 1.5px;
   100    border-radius: 500rem;
   101    transition: background 0.3s ease, left 0.3s ease;
   102  }
   103  .ui.toggle.checkbox input ~ label::after {
   104    left: 1.5px;
   105  }
   106  .ui.toggle.checkbox input:checked ~ label::after {
   107    left: 29px;
   108  }
   109  .ui.toggle.checkbox input:focus ~ label::before,
   110  .ui.toggle.checkbox label::before {
   111    background: var(--color-input-toggle-background);
   112  }
   113  .ui.toggle.checkbox label,
   114  .ui.toggle.checkbox input:checked ~ label,
   115  .ui.toggle.checkbox input:focus:checked ~ label {
   116    color: var(--color-text) !important;
   117  }
   118  .ui.toggle.checkbox input:checked ~ label::before,
   119  .ui.toggle.checkbox input:focus:checked ~ label::before {
   120    background: var(--color-primary) !important;
   121  }