@utrecht/components/dist/form-field/css/index.css

Components for the Municipality of Utrecht based on the NL Design System architecture

/**
 * @license EUPL-1.2
 * Copyright (c) 2021 Robbert Broersma
 */
/**
 * @license EUPL-1.2
 * Copyright (c) 2021 Robbert Broersma
 */
/* stylelint-disable-next-line block-no-empty */
/** @deprecated */
.utrecht-form-field {
  break-inside: avoid;
  font-family: var(--utrecht-document-font-family, inherit);
  margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-form-field-margin-block-end, 0));
  margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-form-field-margin-block-start, 0));
  page-break-inside: avoid;
}

.utrecht-form-field--distanced {
  --utrecht-space-around: 1;
}

.utrecht-form-field--invalid {
  border-inline-start-color: var(--utrecht-form-field-invalid-border-inline-start-color);
  border-inline-start-style: solid;
  border-inline-start-width: var(--utrecht-form-field-invalid-border-inline-start-width, 0);
  padding-inline-start: var(--utrecht-form-field-invalid-padding-inline-start);
}

.utrecht-form-field--checkbox {
  display: grid;
  gap: 0 var(--utrecht-checkbox-margin-inline-end, 12px);
  grid-template-areas: "input label" "input description" "input error-message";
  grid-template-columns: var(--utrecht-checkbox-size) 100fr;
  /*
  .utrecht-form-field__label .utrecht-form-field__input {
    margin-inline-start: calc(
      -1 * (var(--utrecht-checkbox-size) + var(--utrecht-checkbox-margin-inline-end, 12px))
    );
    margin-inline-end: var(--utrecht-checkbox-margin-inline-end, 12px);
  }
  */
}
.utrecht-form-field--checkbox .utrecht-form-field__label:has(.utrecht-form-field__input) {
  margin-inline-start: calc(-1 * (var(--utrecht-checkbox-size) + var(--utrecht-checkbox-margin-inline-end, 12px)));
}
.utrecht-form-field--checkbox .utrecht-form-field__label .utrecht-form-field__input {
  margin-inline-end: var(--utrecht-checkbox-margin-inline-end, 12px);
}

.utrecht-form-field--radio {
  display: grid;
  gap: 0 var(--utrecht-radio-button-margin-inline-end, 12px);
  grid-template-areas: "input label" "input description" "input error-message";
  grid-template-columns: var(--utrecht-radio-button-size) 100fr;
  /*
  .utrecht-form-field__label .utrecht-form-field__input {
    margin-inline-start: calc(
      -1 * (var(--utrecht-checkbox-size) + var(--utrecht-checkbox-margin-inline-end, 12px))
    );
    margin-inline-end: var(--utrecht-checkbox-margin-inline-end, 12px);
  }
  */
}
.utrecht-form-field--radio .utrecht-form-field__label:has(.utrecht-form-field__input) {
  margin-inline-start: calc(-1 * (var(--utrecht-radio-button-size) + var(--utrecht-radio-button-margin-inline-end, 12px)));
}
.utrecht-form-field--radio .utrecht-form-field__label .utrecht-form-field__input {
  margin-inline-end: var(--utrecht-radio-button-margin-inline-end, 12px);
}

.utrecht-form-field__input {
  margin-block-end: 0;
  margin-block-start: 0;
  grid-area: input;
  order: 5;
}

.utrecht-form-field__label {
  /* Assign the margin-block-end to padding instead, so the clickable area of the label increases
  and we avoid a small gap between the label and input that cannot be clicked to focus the input. */
  grid-area: label;
  margin-block-end: var(--utrecht-form-field-label-margin-block-end);
  margin-block-start: 0;
  order: 1;
}

.utrecht-form-field .utrecht-form-field-description {
  grid-area: description;
  margin-block-end: var(--utrecht-form-field-description-margin-block-end);
  margin-block-start: var(--utrecht-form-field-description-margin-block-start);
  order: 2;
}

.utrecht-form-field .utrecht-form-field-description--invalid {
  grid-area: error-message;
  order: 3;
}

.utrecht-form-field__description {
  grid-area: description;
  margin-block-end: var(--utrecht-form-field-description-margin-block-end);
  margin-block-start: var(--utrecht-form-field-description-margin-block-start);
  order: 2;
}

.utrecht-form-field__description--before {
  grid-area: description-before;
  order: 4;
}

.utrecht-form-field__error-message {
  grid-area: error-message;
  order: 3;
}