image-widget.css 902 B

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960
  1. /**
  2. * @file
  3. * Image upload widget.
  4. *
  5. */
  6. .image-widget {
  7. display: flex;
  8. flex-direction: column;
  9. }
  10. .image-preview {
  11. padding: 8px 20px 20px 0;
  12. }
  13. [dir="rtl"] .image-preview {
  14. padding: 8px 0 20px 20px;
  15. }
  16. .image-widget-data {
  17. width: 100%;
  18. display: flex;
  19. justify-content: flex-start;
  20. align-items: center;
  21. flex-wrap: wrap;
  22. }
  23. @media screen and (min-width: 1024px) {
  24. .image-widget-data {
  25. flex-wrap: nowrap;
  26. justify-content: space-between;
  27. }
  28. }
  29. .image-widget-data .form-item {
  30. margin: 0;
  31. }
  32. .image-widget-data .text-field {
  33. width: auto;
  34. }
  35. .image-widget-data .file,
  36. .image-widget-data .file-size {
  37. display: inline-flex;
  38. margin-right: 5px;
  39. margin-left: 5px;
  40. }
  41. .image-widget-data .file a,
  42. .image-widget-data .file-size {
  43. padding: 0;
  44. line-height: 18px;
  45. font-size: 12px;
  46. }
  47. @media screen and (min-width: 640px) {
  48. .image-widget {
  49. flex-direction: row;
  50. }
  51. }