form--managed-file.pcss.css

Same filename in other branches
  1. 9 core/themes/claro/css/components/form--managed-file.pcss.css
  2. 8.9.x core/themes/claro/css/components/form--managed-file.pcss.css
  3. 10 core/themes/claro/css/components/form--managed-file.pcss.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.pcss.css

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

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