<div>
    <div class="form-group">
        <div class="custom-form-control checkbox">
            <input id="custom-checkbox-1" type="checkbox" class="form-control__input" /><label for="custom-checkbox-1" class="form-label">Die Rechnungsadresse ist mit der Adresse des Teilnehmenden
                identisch.</label>
        </div>
    </div>
    <div class="form-group">
        <div class="custom-form-control checkbox">
            <input id="custom-checkbox-2" type="checkbox" disabled="disabled" class="form-control__input" /><label for="custom-checkbox-2" class="form-label">Ich möchte auf Rechnung zahlen.</label>
        </div>
    </div>
    <div class="form-group form-group--invalid">
        <div class="custom-form-control checkbox">
            <input id="custom-checkbox-3" type="checkbox" class="form-control__input" /><label for="custom-checkbox-3" class="form-label">Ja, ich stimme euren allgemeinen Geschäftsbedingungen zu.</label>
        </div>
        <small class="form-text">Aufgepasst! Du musst hier eine Auswahl treffen.</small>
    </div>
</div>
<div>
    <div class="form-group">
        <div class="custom-form-control checkbox">
            <input id="custom-checkbox-1" type="checkbox" class="form-control__input" />
            <label for="custom-checkbox-1" class="form-label">Die Rechnungsadresse ist mit der Adresse des Teilnehmenden identisch.</label>
        </div>
    </div>

    <div class="form-group">
        <div class="custom-form-control checkbox">
            <input id="custom-checkbox-2" type="checkbox" disabled="disabled" class="form-control__input" />
            <label for="custom-checkbox-2" class="form-label">Ich möchte auf Rechnung zahlen.</label>
        </div>
    </div>

    <div class="form-group form-group--invalid">
        <div class="custom-form-control checkbox">
            <input id="custom-checkbox-3" type="checkbox" class="form-control__input" />
            <label for="custom-checkbox-3" class="form-label">Ja, ich stimme euren allgemeinen Geschäftsbedingungen zu.</label>
        </div>
        <small class="form-text">Aufgepasst! Du musst hier eine Auswahl treffen.</small>
    </div>
</div>
/* No context defined. */
  • Content:
    $checkbox-size: $spacer-md; // ~24px
    $checkbox-offset: 0.475rem; // ~16px
    $checkbox-indent: $checkbox-offset + $checkbox-size;
    
    .checkbox {
      &.custom-form-control {
        padding-left: $checkbox-indent;
      }
    
      // Set styles for all form states
      > .form-control__input {
        &:checked ~ .form-label::before {
          background-color: $checkbox-bg-active;
        }
    
        &:focus ~ .form-label::before {
          border-color: $checkbox-border-hoverfocus;
        }
    
        &:checked ~ .form-label::after {
          background-image: checkbox-icon($checkbox-color-active);
        }
    
        &:checked:disabled ~ .form-label::after {
          background-image: checkbox-icon($checkbox-color-disabled);
        }
    
        &:disabled ~ .form-label::before {
          border-color: $checkbox-border-disabled;
          background-color: $checkbox-bg-disabled;
        }
      }
    
      .form-label {
        @include control-icon($checkbox-size, $checkbox-offset);
    
        margin-bottom: 0;
        text-align: left;
    
        // Background (color)
        &::before {
          border: 2px solid $checkbox-border;
          margin-right: $checkbox-offset;
          background-color: $checkbox-bg;
          border-radius: 2px;
          pointer-events: none;
          user-select: none;
        }
    
        // Foreground (icon)
        &::after {
          background-position: center center;
          background-repeat: no-repeat;
          background-size: 50% 50%;
        }
      }
    }
    
  • URL: /components/raw/checkbox/_checkbox.scss
  • Filesystem Path: components/05-atoms/form-elements/checkbox/_checkbox.scss
  • Size: 1.4 KB

No notes defined.