image.css 1.0 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152
  1. /**
  2. * @file
  3. * Functional styles for the Image module's in-place editor.
  4. */
  5. /**
  6. * A minimum width/height is required so that users can drag and drop files
  7. * onto small images.
  8. */
  9. .quickedit-image-element {
  10. min-width: 200px;
  11. min-height: 200px;
  12. }
  13. .quickedit-image-dropzone {
  14. display: flex;
  15. flex-direction: column;
  16. align-items: center;
  17. justify-content: center;
  18. position: absolute;
  19. top: 0;
  20. left: 0;
  21. width: 100%;
  22. height: 100%;
  23. }
  24. .quickedit-image-icon {
  25. display: block;
  26. width: 50px;
  27. height: 50px;
  28. background-repeat: no-repeat;
  29. background-size: cover;
  30. }
  31. .quickedit-image-field-info {
  32. display: flex;
  33. align-items: center;
  34. justify-content: flex-end;
  35. }
  36. .quickedit-image-text {
  37. display: block;
  38. }
  39. /**
  40. * If we do not prevent pointer-events for child elements, our drag+drop events
  41. * will not fire properly. This can lead to unintentional redirects if a file
  42. * is dropped on a child element when a user intended to upload it.
  43. */
  44. .quickedit-image-dropzone * {
  45. pointer-events: none;
  46. }