form--managed-file.css

Same filename in other branches
  1. 9 core/themes/claro/css/components/form--managed-file.css
  2. 8.9.x core/themes/claro/css/components/form--managed-file.css
  3. 11.x core/themes/claro/css/components/form--managed-file.css

Styles for the managed file widget.

This includes the styles for the file widgets and the image widgets.

File

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

View source
  1. /*
  2. * DO NOT EDIT THIS FILE.
  3. * See the following change record for more information,
  4. * https://www.drupal.org/node/3084859
  5. * @preserve
  6. */
  7. /**
  8. * @file
  9. * Styles for the managed file widget.
  10. *
  11. * This includes the styles for the file widgets and the image widgets.
  12. */
  13. :root {
  14. --file-widget-form-item-min-width: 16rem;
  15. --file-widget-form-item-max-width: 32rem;
  16. }
  17. /**
  18. * The root element of the file/image widget.
  19. */
  20. .form-managed-file.no-upload {
  21. display: inline-flex;
  22. flex-direction: column;
  23. max-width: 100%;
  24. }
  25. .form-managed-file.has-value.is-multiple {
  26. display: block;
  27. }
  28. /**
  29. * Modify component defaults for file/image widgets.
  30. */
  31. /**
  32. * File component style overrides for managed file widgets.
  33. */
  34. .form-managed-file .file {
  35. word-break: break-all;
  36. }
  37. .form-managed-file .file__size {
  38. word-break: normal;
  39. }
  40. /**
  41. * The 'meta' element of the file/image widget.
  42. *
  43. * This element is available only if the file widget has a value AND when there
  44. * are other input options than the ones rendered in the 'main' element.
  45. * These inputs are:
  46. * - File description and/or the file display checkbox of file widgets
  47. * - Image alt and/or title text as well as the preview image of the image
  48. * widgets.
  49. *
  50. * The trick here is that we will display the alt/title inputs next to the image
  51. * preview if there is enough space left. Enough space means the value of the
  52. * '--file-widget-form-item-min-width' variable.
  53. */
  54. .form-managed-file__meta {
  55. display: flex;
  56. flex-wrap: wrap;
  57. align-items: flex-start;
  58. 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. */
  59. }
  60. .form-managed-file__meta .form-element {
  61. width: 100%;
  62. }
  63. /**
  64. * Limiting the width of form items inside the meta element.
  65. */
  66. .form-managed-file__meta .form-item {
  67. max-width: var(--file-widget-form-item-max-width);
  68. margin-block: 0 var(--space-m); /* Top margin is added by the parent element */
  69. /**
  70. * Reduce the bottom margin of the last 'meta' form-item for field multiple
  71. * tables.
  72. */
  73. }
  74. .form-managed-file__meta .form-item:last-child {
  75. margin-block-end: var(--space-xs);
  76. }
  77. .draggable .form-managed-file.has-value .form-managed-file__meta {
  78. /**
  79. * In tables, this should be inline-flex. This is needed to make this element be
  80. * pushed to a new line, to the bottom of the drag handle.
  81. */
  82. display: inline-flex;
  83. }
  84. /**
  85. * The 'image preview' element.
  86. *
  87. * This is used and display only by the image widget.
  88. */
  89. .form-managed-file__image-preview {
  90. flex: 0 0 auto;
  91. max-width: 100%;
  92. margin-block-end: var(--space-m);
  93. }
  94. .form-managed-file.has-meta .form-managed-file__image-preview {
  95. /* Add some 'end' margin if there are other meta inputs. */
  96. margin-inline-end: var(--space-m);
  97. }
  98. /**
  99. * If this is rendered inside a file multiple table and there are no alt or
  100. * title, we have to reduce the amount of the bottom margin.
  101. */
  102. td .form-managed-file.no-meta .form-managed-file__image-preview {
  103. margin-block-end: var(--space-xs);
  104. }
  105. /**
  106. * The children of the 'meta items' element are the inputs that were described
  107. * at the 'meta' element '.form-managed-file__meta', except of the image
  108. * preview.
  109. *
  110. * The flex-basis is set to the minimal width where we can display these inputs
  111. * next tho the preview image.
  112. *
  113. * We limit the max width directly on the '.form-item' elements.
  114. */
  115. .form-managed-file__meta-items {
  116. flex: 1 1 var(--file-widget-form-item-min-width);
  117. max-width: 100%;
  118. }
  119. /**
  120. * The main element of the file/image widget.
  121. *
  122. * This contains the upload input and the upload of the empty file/image
  123. * widgets, or the file name (with icon and size) and the remove button of
  124. * filled widgets.
  125. *
  126. * The inline-flex display shrinks the width to the minimal needed amount. This
  127. * helps to keep the remove as close to the other elements as possible.
  128. */
  129. .form-managed-file__main {
  130. display: inline-flex;
  131. align-items: center;
  132. max-width: 100%;
  133. }
  134. .form-managed-file__main .file {
  135. flex: 1 1 auto;
  136. margin-block: var(--space-xs);
  137. margin-inline: 0 var(--space-m);
  138. }
  139. /* The file upload input. */
  140. .form-managed-file__main .form-element--api-file {
  141. flex: 1 1 auto;
  142. }
  143. /**
  144. * Remove the default button margins and prevent shrinking or growing buttons.
  145. * This applies both on the 'no-js' upload button and the remove button. The
  146. * weight of this ruleset has been increase for this to take effect on RTL.
  147. */
  148. .form-managed-file__main .button.button {
  149. flex: 0 0 auto;
  150. margin: 0;
  151. }
  152. /* Add some bottom margin for single widgets if no meta is present. */
  153. .form-managed-file.is-single.has-value .form-managed-file__main:last-child {
  154. margin-block-end: var(--space-m);
  155. }
  156. .draggable .form-managed-file.has-value .form-managed-file__main {
  157. /**
  158. * Inside (draggable) tables, this should be flex-displayed. This keeps even
  159. * long file names in the same visual line where the drag handle is.
  160. */
  161. display: flex;
  162. }
  163. /**
  164. * Add side margins if a table precedes the managed file form element.
  165. */
  166. .file-widget-multiple.has-table .form-type--managed-file {
  167. margin-inline: var(--space-m);
  168. }

Buggy or inaccurate documentation? Please file an issue. Need support? Need help programming? Connect with the Drupal community.