form.pcss.css

/**
 * @file
 * Main form and form item styles.
 */

::placeholder {
  opacity: 1;
  color: var(--input-fg-color--placeholder);
}

/**
 * General form item.
 */
.form-item {
  margin-block: var(--space-l);

  .field--type-text-with-summary &,
  .field--widget-text-textarea 

  /* Special case, form starts with a form item, remove margin-block-start. */
  #block-gin-content > form > &:first-of-type {
    margin-block-start: 0;
  }

  .image-style-new 

  /**
   * When a table row or a container-inline has a single form item, prevent it
   * from adding unnecessary extra spacing.
   * If it has multiple form items, allow spacing between them.
   */
  .container-inline 

  /* Maxlength styles. */
  .counter {
    margin-block-start: var(--gin-spacing-xs);
    color: var(--gin-color-text);
    font-size: var(--gin-font-size-xs);
    line-height: 1.3;
  }

  tr 
}

.form-item__warning {
  display: inline-block;
  margin-block-start: var(--gin-spacing-xs);
}

/**
 * Form element label.
 */
.form-item__label {
  display: block;
  margin-block: 0 var(--gin-spacing-xs);
  font-size: var(--font-size-s); /* ~14px */
  font-weight: var(--gin-font-weight-semibold);
  line-height: var(--line-height-form-label);

  &[for] {
    cursor: pointer;
  }

  &.option {
    display: inline;
    font-weight: normal;
  }

  &.has-error {
    color: var(--input--error-color);
  }

  &.option.has-error {
    color: inherit;
  }

  &.is-disabled {
    cursor: default; /* @todo ...or auto? */
    color: var(--input--disabled-fg-color);
  }

  .form-wrapper &,
  .form-composite 
}

/* Multiple selectors used to ensure styling even if modules override markup. */
.form-item__label--multiple-value-form,
.field-multiple-table .field-label h4.label {
  display: inline-block;
  margin-block: 0;
  align-self: center;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
}

.form-item__label.form-required::after,
.fieldset__label.form-required::after,
.form-required > .fieldset__label::after,
.horizontal-tab-button .form-required::after,
.vertical-tabs__menu-link .form-required::after {
  display: inline-block;
  content: "*";
  vertical-align: text-top;
  color: var(--gin-color-danger);
  background: none;
  font-size: 0.875rem;
  line-height: 1;
  margin-inline: 0.15em;
}

/**
 * Form item description.
 */
.form-item__description {
  max-width: var(--gin-max-line-length);
  color: var(--gin-color-text-light);
  font-size: var(--font-size-xs); /* ~13px */
  line-height: calc(17rem / 16); /* 17px */
  margin-block: calc(6rem / 16); /* 6px */

  &.is-disabled {
    color: var(--input--disabled-fg-color);
  }
}

/**
 * Error message (Inline form errors).
 */
.form-item__error-message {
  margin-block: calc(6rem / 16); /* 6px */
  color: var(--gin-color-danger);
  font-size: var(--font-size-xs); /* ~13px */
  font-weight: normal;
  line-height: calc(17rem / 16); /* 17px */
}

.form-item__prefix.is-disabled,
.form-item__suffix.is-disabled {
  color: var(--input--disabled-fg-color);
}

/* Add some spacing so that the focus ring and suffix don't overlap. */
@media screen and (min-width: 601px) {
  .form-item__suffix {
    margin-inline-start: var(--space-xs);
    white-space: nowrap;
  }
}

/**
 * Form actions.
 */
.form-actions,
.field-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  margin-block: var(--space-xs);

  & .form-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs) 0;
  }

  & .button,
  & .action-link {
    margin-block: var(--space-xs);
  }

  & .ajax-progress--throbber {
    align-self: center;
  }
}

.form-actions {
  margin-block-end: 0;

  > .form-wrapper {
    margin-inline: 0 var(--space-s);
  }

  .entity-form-display-form > 
}

/**
 * Password module.
 *
 * @legacy
 * @todo These should be in a standalone component file.
 */
.confirm-parent,
.password-parent {
  overflow: visible;
  width: auto;
}

.form-item-options-group-info-identifier,
.form-item-pass .description {
  clear: both;
}

/**
 * Custom label placement for editor filter format select.
 */
.form-item--editor-format {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  width: auto;
  max-width: 100%;

  .form-item__label {
    inset-block-start: 3px;
    padding-block-end: 0;

    &.has-error {
      color: var(--gin-color-danger);
    }
  }

  .form-item__label,
  .form-item__prefix,
  .form-item__suffix,
  .form-element--editor-format {
    min-width: 1px;
  }

  .form-item__label,
  .form-item__prefix,
  .form-item__suffix,
  .form-element--editor-format {
    min-width: 1px;
  }

  .form-item__label,
  .form-item__prefix,
  .form-item__suffix {
    margin-inline-end: var(--space-xs);
  }

  .form-item__description,
  .form-item__error-message {
    flex: 0 1 100%;
    min-width: 1px;
  }
}

/**
 * Improve form element usability on narrow devices.
 *
 * @legacy
 */
@media screen and (max-width: 600px) {
  .password-strength {
    width: 100%;
  }
  div.form-item div.password-suggestions {
    float: none;
  }
}

/**
 * Prevent regression due to explicit line-heights applied to these elements in
 * normalize.css 7.0.0.
 */
button {
  line-height: 1.125rem;
}
input,
optgroup {
  line-height: 1.5rem;
}

/**
 * Prevent regression due to -webkit-appearance being set to button in
 * normalize.css 4.1.0.
 */
::-webkit-file-upload-button {
  -webkit-appearance: push-button;
}

.required-mark {
  &::after {
    background: var(--gin-color-danger);
    mask-image: var(--admin-icon-asterisk);
    mask-position: center center;
    mask-size: 100% 100%;
  }
}

.length-indicator {
  margin-block-end: var(--gin-spacing-l);
}