form--managed-file.pcss.css

/**
 * @file
 * Styles for the managed file widget.
 *
 * This includes the styles for the file widgets and the image widgets.
 */

:root {
  --file-widget-form-item-min-width: 16rem;
  --file-widget-form-item-max-width: 32rem;
}

/**
 * The root element of the file/image widget.
 */
.form-managed-file {
  &.no-upload {
    display: inline-flex;
    flex-direction: column;
    max-width: 100%;
  }

  &.has-value.is-multiple {
    display: block;
  }

  /**
   * Modify component defaults for file/image widgets.
   */

  /**
   * File component style overrides for managed file widgets.
   */
  & .file {
    word-break: break-all;
  }
  & .file__size {
    word-break: normal;
  }
}

/**
 * The 'meta' element of the file/image widget.
 *
 * This element is available only if the file widget has a value AND when there
 * are other input options than the ones rendered in the 'main' element.
 * These inputs are:
 *  - File description and/or the file display checkbox of file widgets
 *  - Image alt and/or title text as well as the preview image of the image
 *    widgets.
 *
 * The trick here is that we will display the alt/title inputs next to the image
 * preview if there is enough space left. Enough space means the value of the
 * '--file-widget-form-item-min-width' variable.
 */
.form-managed-file__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  margin-block-start: var(--space-m); /* Bottom margin will be added by the child elements: because of we use flex display here, our margins won't collapse. */

  & .form-element {
    width: 100%;
  }

  /**
   * Limiting the width of form items inside the meta element.
   */
  & .form-item {
    max-width: var(--file-widget-form-item-max-width);
    margin-block: 0 var(--space-m); /* Top margin is added by the parent element */

    /**
    * Reduce the bottom margin of the last 'meta' form-item for field multiple
    * tables.
    */
    &:last-child {
      margin-block-end: var(--space-xs);
    }
  }

  @nest .draggable .form-managed-file.has-value 
}

/**
 * The 'image preview' element.
 *
 * This is used and display only by the image widget.
 */
.form-managed-file__image-preview {
  flex: 0 0 auto;
  max-width: 100%;
  margin-block-end: var(--space-m);

  @nest .form-managed-file.has-meta 

  /**
   * If this is rendered inside a file multiple table and there are no alt or
   * title, we have to reduce the amount of the bottom margin.
   */
  @nest td .form-managed-file.no-meta 
}

/**
 * The children of the 'meta items' element are the inputs that were described
 * at the 'meta' element '.form-managed-file__meta', except of the image
 * preview.
 *
 * The flex-basis is set to the minimal width where we can display these inputs
 * next tho the preview image.
 *
 * We limit the max width directly on the '.form-item' elements.
 */
.form-managed-file__meta-items {
  flex: 1 1 var(--file-widget-form-item-min-width);
  max-width: 100%;
}

/**
 * The main element of the file/image widget.
 *
 * This contains the upload input and the upload of the empty file/image
 * widgets, or the file name (with icon and size) and the remove button of
 * filled widgets.
 *
 * The inline-flex display shrinks the width to the minimal needed amount. This
 * helps to keep the remove as close to the other elements as possible.
 */
.form-managed-file__main {
  display: inline-flex;
  align-items: center;
  max-width: 100%;

  & .file {
    flex: 1 1 auto;
    margin-block: var(--space-xs);
    margin-inline: 0 var(--space-m);
  }

  /* The file upload input. */
  & .form-element--api-file {
    flex: 1 1 auto;
  }

  /**
   * Remove the default button margins and prevent shrinking or growing buttons.
   * This applies both on the 'no-js' upload button and the remove button. The
   * weight of this ruleset has been increase for this to take effect on RTL.
   */
  & .button.button {
    flex: 0 0 auto;
    margin: 0;
  }

  /* Add some bottom margin for single widgets if no meta is present. */
  @nest .form-managed-file.is-single.has-value &:last-child {
    margin-block-end: var(--space-m);
  }

  @nest .draggable .form-managed-file.has-value 
}

/**
 * Add side margins if a table precedes the managed file form element.
 */
.file-widget-multiple.has-table .form-type--managed-file {
  margin-inline: var(--space-m);
}