Verified Commit 86a0d306 authored by Lauri Timmanee's avatar Lauri Timmanee
Browse files

Issue #3303550 by Gauravvvv, Aditya4478, rpayanm, bnjmnm, _utsavsharma,... 

Issue #3303550 by Gauravvvv, Aditya4478, rpayanm, bnjmnm, _utsavsharma, smustgrave, sasanikolic, nod_: Refactor Claro's form--managed-file stylesheet
parent cc1bc30d

core/themes/claro/css/components/form--managed-file.css

+59 −75
Original line number Diff line number Diff line
@@ -32,35 +32,21 @@ 
}



/**

 * 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.

   * Modify component defaults for file/image widgets.

   */



.form-managed-file__main {

  display: inline-flex;

  align-items: center;

  max-width: 100%;

}



/**

 * Inside (draggable) tables, this should be flex-displayed. This keeps even

 * long file names in the same visual line where the drag handle is.

   * File component style overrides for managed file widgets.

   */



.draggable .form-managed-file.has-value .form-managed-file__main {

  display: flex;

.form-managed-file .file {

  word-break: break-all;

  -webkit-hyphens: auto;

  hyphens: auto;

}



/* Add some bottom margin for single widgets if no meta is present. */



.form-managed-file.is-single.has-value .form-managed-file__main:last-child {

  margin-bottom: var(--space-m);

.form-managed-file .file__size {

  word-break: normal;

}



/**
@@ -82,15 +68,36 @@ 
  display: flex;

  flex-wrap: wrap;

  align-items: flex-start;

  margin-top: var(--space-m); /* Bottom margin will be added by the child elements: because of we use flex display here, our margins won't collapse. */

  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-managed-file__meta .form-element {

  width: 100%;

}



/**

 * In tables, this should be inline-flex. This is needed to make this element be

 * pushed to a new line, to the bottom of the drag handle.

   * Limiting the width of form items inside the meta element.

   */



.form-managed-file__meta .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.

    */

}



.form-managed-file__meta .form-item:last-child {

  margin-block-end: var(--space-xs);

}



.draggable .form-managed-file.has-value .form-managed-file__meta {

  /**

     * In tables, this should be inline-flex. This is needed to make this element be

     * pushed to a new line, to the bottom of the drag handle.

     */

  display: inline-flex;

}
@@ -103,18 +110,12 @@ 
.form-managed-file__image-preview {

  flex: 0 0 auto;

  max-width: 100%;

  margin-bottom: var(--space-m);

  margin-block-end: var(--space-m);

}



/* Add some 'end' margin if there are other meta inputs. */



.form-managed-file.has-meta .form-managed-file__image-preview {

  margin-right: var(--space-m); /* LTR */

}



[dir="rtl"] .form-managed-file.has-meta .form-managed-file__image-preview {

  margin-right: 0;

  margin-left: var(--space-m);

  /* Add some 'end' margin if there are other meta inputs. */

  margin-inline-end: var(--space-m);

}



/**
@@ -123,7 +124,7 @@ 
   */



td .form-managed-file.no-meta .form-managed-file__image-preview {

  margin-bottom: var(--space-xs);

  margin-block-end: var(--space-xs);

}



/**
@@ -143,36 +144,29 @@ td .form-managed-file.no-meta .form-managed-file__image-preview { 
}



/**

 * Modify component defaults for file/image widgets.

 */



/**

 * File component style overrides for managed file widgets.

 * 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 .file {

  word-break: break-all;

  -webkit-hyphens: auto;

  hyphens: auto;

}



.form-managed-file .file__size {

  word-break: normal;

.form-managed-file__main {

  display: inline-flex;

  align-items: center;

  max-width: 100%;

}



.form-managed-file__main .file {

  flex: 1 1 auto;

  margin: var(--space-xs) var(--space-m) var(--space-xs) 0; /* LTR */

  margin-block: var(--space-xs);

  margin-inline: 0 var(--space-m);

}



[dir="rtl"] .form-managed-file__main .file {

  margin-right: 0;

  margin-left: var(--space-m);

}



/**

 * The file upload input.

 */

/* The file upload input. */



.form-managed-file__main .form-element--api-file {

  flex: 1 1 auto;
@@ -189,27 +183,18 @@ td .form-managed-file.no-meta .form-managed-file__image-preview { 
  margin: 0;

}



/**

 * Limiting the width of form items inside the meta element.

 */

/* Add some bottom margin for single widgets if no meta is present. */



.form-managed-file__meta .form-item {

  max-width: var(--file-widget-form-item-max-width);

  margin-top: 0; /* Top margin is added by the parent element */

  margin-bottom: var(--space-m);

.form-managed-file.is-single.has-value .form-managed-file__main:last-child {

  margin-block-end: var(--space-m);

}



.draggable .form-managed-file.has-value .form-managed-file__main {

  /**

 * Reduce the bottom margin of the last 'meta' form-item for field multiple

 * tables.

     * Inside (draggable) tables, this should be flex-displayed. This keeps even

     * long file names in the same visual line where the drag handle is.

     */



.form-managed-file__meta .form-item:last-child {

  margin-bottom: var(--space-xs);

}



.form-managed-file__meta .form-element {

  width: 100%;

  display: flex;

}



/**
@@ -217,6 +202,5 @@ td .form-managed-file.no-meta .form-managed-file__image-preview { 
 */



.file-widget-multiple.has-table .form-type--managed-file {

  margin-right: var(--space-m);

  margin-left: var(--space-m);

  margin-inline: var(--space-m);

}

core/themes/claro/css/components/form--managed-file.pcss.css

+65 −75
Original line number Diff line number Diff line
@@ -13,43 +13,31 @@ 
/**

 * The root element of the file/image widget.

 */

.form-managed-file.no-upload {

.form-managed-file {

  &.no-upload {

    display: inline-flex;

    flex-direction: column;

    max-width: 100%;

  }



.form-managed-file.has-value.is-multiple {

  &.has-value.is-multiple {

    display: block;

  }



  /**

 * 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.

   * Modify component defaults for file/image widgets.

   */

.form-managed-file__main {

  display: inline-flex;

  align-items: center;

  max-width: 100%;

}



  /**

 * Inside (draggable) tables, this should be flex-displayed. This keeps even

 * long file names in the same visual line where the drag handle is.

   * File component style overrides for managed file widgets.

   */

.draggable .form-managed-file.has-value .form-managed-file__main {

  display: flex;

  & .file {

    word-break: break-all;

    hyphens: auto;

  }

  & .file__size {

    word-break: normal;

  }



/* Add some bottom margin for single widgets if no meta is present. */

.form-managed-file.is-single.has-value .form-managed-file__main:last-child {

  margin-bottom: var(--space-m);

}



/**
@@ -70,16 +58,36 @@ 
  display: flex;

  flex-wrap: wrap;

  align-items: flex-start;

  margin-top: var(--space-m); /* Bottom margin will be added by the child elements: because of we use flex display here, our margins won't collapse. */

  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 & {

    /**

     * In tables, this should be inline-flex. This is needed to make this element be

     * pushed to a new line, to the bottom of the drag handle.

     */

.draggable .form-managed-file.has-value .form-managed-file__meta {

    display: inline-flex;

  }

}



/**

 * The 'image preview' element.
@@ -89,24 +97,20 @@ 
.form-managed-file__image-preview {

  flex: 0 0 auto;

  max-width: 100%;

  margin-bottom: var(--space-m);

}

  margin-block-end: var(--space-m);



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

    /* Add some 'end' margin if there are other meta inputs. */

.form-managed-file.has-meta .form-managed-file__image-preview {

  margin-right: var(--space-m); /* LTR */

}

[dir="rtl"] .form-managed-file.has-meta .form-managed-file__image-preview {

  margin-right: 0;

  margin-left: var(--space-m);

    margin-inline-end: var(--space-m);

  }



  /**

   * 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.

   */

td .form-managed-file.no-meta .form-managed-file__image-preview {

  margin-bottom: var(--space-xs);

  @nest td .form-managed-file.no-meta & {

    margin-block-end: var(--space-xs);

  }

}



/**
@@ -125,34 +129,28 @@ td .form-managed-file.no-meta .form-managed-file__image-preview { 
}



/**

 * Modify component defaults for file/image widgets.

 */



/**

 * File component style overrides for managed file widgets.

 * 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 .file {

  word-break: break-all;

  hyphens: auto;

}



.form-managed-file .file__size {

  word-break: normal;

}

.form-managed-file__main {

  display: inline-flex;

  align-items: center;

  max-width: 100%;



.form-managed-file__main .file {

  & .file {

    flex: 1 1 auto;

  margin: var(--space-xs) var(--space-m) var(--space-xs) 0; /* LTR */

}

[dir="rtl"] .form-managed-file__main .file {

  margin-right: 0;

  margin-left: var(--space-m);

    margin-block: var(--space-xs);

    margin-inline: 0 var(--space-m);

  }



/**

 * The file upload input.

 */

.form-managed-file__main .form-element--api-file {

  /* The file upload input. */

  & .form-element--api-file {

    flex: 1 1 auto;

  }
@@ -161,36 +159,28 @@ td .form-managed-file.no-meta .form-managed-file__image-preview { 
   * 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.

   */

.form-managed-file__main .button.button {

  & .button.button {

    flex: 0 0 auto;

    margin: 0;

  }



/**

 * Limiting the width of form items inside the meta element.

 */

.form-managed-file__meta .form-item {

  max-width: var(--file-widget-form-item-max-width);

  margin-top: 0; /* Top margin is added by the parent element */

  margin-bottom: var(--space-m);

  /* 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 & {

    /**

 * Reduce the bottom margin of the last 'meta' form-item for field multiple

 * tables.

     * Inside (draggable) tables, this should be flex-displayed. This keeps even

     * long file names in the same visual line where the drag handle is.

     */

.form-managed-file__meta .form-item:last-child {

  margin-bottom: var(--space-xs);

    display: flex;

  }



.form-managed-file__meta .form-element {

  width: 100%;

}



/**

 * Add side margins if a table precedes the managed file form element.

 */

.file-widget-multiple.has-table .form-type--managed-file {

  margin-right: var(--space-m);

  margin-left: var(--space-m);

  margin-inline: var(--space-m);

}