form--managed-file.css

Same filename in other branches
  1. 9 core/themes/claro/css/components/form--managed-file.css
  2. 10 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/2815083
  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. /**
  14. * The root element of the file/image widget.
  15. */
  16. .form-managed-file.no-upload {
  17. display: inline-flex;
  18. flex-direction: column;
  19. max-width: 100%;
  20. }
  21. .form-managed-file.has-value.is-multiple {
  22. display: block;
  23. }
  24. /**
  25. * The main element of the file/image widget.
  26. *
  27. * This contains the upload input and the upload of the empty file/image
  28. * widgets, or the file name (with icon and size) and the remove button of
  29. * filled widgets.
  30. *
  31. * The inline-flex display shrinks the width to the minimal needed amount. This
  32. * helps to keep the remove as close to the other elements as possible.
  33. */
  34. .form-managed-file__main {
  35. display: inline-flex;
  36. align-items: center;
  37. max-width: 100%;
  38. }
  39. /**
  40. * Inside (draggable) tables, this should be flex-displayed. This keeps even
  41. * long file names in the same visual line where the drag handle is.
  42. */
  43. .draggable .form-managed-file.has-value .form-managed-file__main {
  44. display: flex;
  45. }
  46. /* Add some bottom margin for single widgets if no meta is present. */
  47. .form-managed-file.is-single.has-value .form-managed-file__main:last-child {
  48. margin-bottom: 1rem;
  49. }
  50. /**
  51. * The 'meta' element of the file/image widget.
  52. *
  53. * This element is available only if the file widget has a value AND when there
  54. * are other input options than the ones rendered in the 'main' element.
  55. * These inputs are:
  56. * - File description and/or the file display checkbox of file widgets
  57. * - Image alt and/or title text as well as the preview image of the image
  58. * widgets.
  59. *
  60. * The trick here is that we will display the alt/title inputs next to the image
  61. * preview if there is enough space left. Enough space means the value of the
  62. * '--file-widget-form-item-min-width' variable.
  63. */
  64. .form-managed-file__meta {
  65. display: flex;
  66. flex-wrap: wrap;
  67. align-items: flex-start;
  68. margin-top: 1rem; /* Bottom margin will be added by the child elements: because of we use flex display here, our margins won't collapse. */
  69. }
  70. /**
  71. * In tables, this should be inline-flex. This is needed to make this element be
  72. * pushed to a new line, to the bottom of the drag handle.
  73. */
  74. .draggable .form-managed-file.has-value .form-managed-file__meta {
  75. display: inline-flex;
  76. }
  77. /**
  78. * Internet Explorer 11 does not shrinks our meta elements if one of its parent
  79. * element is a table. Without this fix, the file widgets table cell would have
  80. * the same width that is needed for displaying the file name in a single line.
  81. *
  82. * @see https://github.com/philipwalton/flexbugs/issues/179
  83. */
  84. @media all and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  85. *::-ms-backdrop,
  86. td .form-managed-file__meta {
  87. flex-basis: 100%;
  88. }
  89. }
  90. /**
  91. * The 'image preview' element.
  92. *
  93. * This is used and display only by the image widget.
  94. */
  95. .form-managed-file__image-preview {
  96. flex: 0 0 auto;
  97. max-width: 100%;
  98. margin-bottom: 1rem;
  99. }
  100. /* Add some 'end' margin if there are other meta inputs. */
  101. .form-managed-file.has-meta .form-managed-file__image-preview {
  102. margin-right: 1rem; /* LTR */
  103. }
  104. [dir="rtl"] .form-managed-file.has-meta .form-managed-file__image-preview {
  105. margin-right: 0;
  106. margin-left: 1rem;
  107. }
  108. /**
  109. * If this is rendered inside a file multiple table and there are no alt or
  110. * title, we have to reduce the amount of the bottom margin.
  111. */
  112. td .form-managed-file.no-meta .form-managed-file__image-preview {
  113. margin-bottom: 0.5rem;
  114. }
  115. /**
  116. * The children of the 'meta items' element are the inputs that were described
  117. * at the 'meta' element '.form-managed-file__meta', except of the image
  118. * preview.
  119. *
  120. * The flex-basis is set to the minimal width where we can display these inputs
  121. * next tho the preview image.
  122. *
  123. * We limit the max width directly on the '.form-item' elements.
  124. */
  125. .form-managed-file__meta-items {
  126. flex: 1 1 16rem;
  127. max-width: 100%;
  128. }
  129. /**
  130. * Internet Explorer 11 does not increase the width of those flex items that are
  131. * allowed to be wrapped. We just simply change the basis to the max-width.
  132. */
  133. @media all and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  134. *::-ms-backdrop,
  135. .form-managed-file__meta-items {
  136. flex-basis: 32rem;
  137. }
  138. }
  139. /**
  140. * Meta items wrapper.
  141. * This markup element is needed only for working around the same IE 11 bug that
  142. * is described above, at the 'meta' element.
  143. *
  144. * @see https://github.com/philipwalton/flexbugs/issues/179
  145. */
  146. @media all and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  147. *::-ms-backdrop,
  148. td .form-managed-file__meta-wrapper {
  149. display: flex;
  150. }
  151. }
  152. /**
  153. * Modify component defaults for file/image widgets.
  154. */
  155. /**
  156. * File component style overrides for managed file widgets.
  157. */
  158. .form-managed-file .file {
  159. word-break: break-all;
  160. -webkit-hyphens: auto;
  161. -ms-hyphens: auto;
  162. hyphens: auto;
  163. }
  164. .form-managed-file .file__size {
  165. word-break: normal;
  166. }
  167. .form-managed-file__main .file {
  168. flex: 1 1 auto;
  169. margin: 0.5rem 1rem 0.5rem 0; /* LTR */
  170. }
  171. [dir="rtl"] .form-managed-file__main .file {
  172. margin-right: 0;
  173. margin-left: 1rem;
  174. }
  175. /**
  176. * Fix and override the table-related bug of Internet Explorer 11 (described at
  177. * the 'meta' element).
  178. *
  179. * @see https://github.com/philipwalton/flexbugs/issues/179
  180. */
  181. @media all and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  182. *::-ms-backdrop,
  183. td .form-managed-file__main .file {
  184. flex: 0 1 100%;
  185. }
  186. }
  187. /**
  188. * The file upload input.
  189. */
  190. .form-managed-file__main .form-element--api-file {
  191. flex: 1 1 auto;
  192. min-width: 1px; /* This makes the element to be shrinked on IE11 */
  193. }
  194. /**
  195. * Remove the default button margins and prevent shrinking or growing buttons.
  196. * This applies both on the 'no-js' upload button and the remove button. The
  197. * weight of this ruleset has been increase for this to take effect on RTL.
  198. */
  199. .form-managed-file__main .button.button {
  200. flex: 0 0 auto;
  201. margin: 0;
  202. }
  203. /**
  204. * Limiting the width of form items inside the meta element.
  205. */
  206. .form-managed-file__meta .form-item {
  207. max-width: 32rem;
  208. margin-top: 0; /* Top margin is added by the parent element */
  209. margin-bottom: 1rem;
  210. }
  211. /**
  212. * Reduce the bottom margin of the last 'meta' form-item for field multiple
  213. * tables.
  214. */
  215. .form-managed-file__meta .form-item:last-child {
  216. margin-bottom: 0.5rem;
  217. }
  218. .form-managed-file__meta .form-element {
  219. width: 100%;
  220. }
  221. /**
  222. * Add side margins if a table precedes the managed file form element.
  223. */
  224. .file-widget-multiple.has-table .form-type--managed-file {
  225. margin-right: 1rem;
  226. margin-left: 1rem;
  227. }

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