image-preview.pcss.css

Same filename in other branches
  1. 8.9.x core/themes/claro/css/components/image-preview.pcss.css
  2. 10 core/themes/claro/css/components/image-preview.pcss.css
  3. 11.x core/themes/claro/css/components/image-preview.pcss.css

Image preview component.

File

core/themes/claro/css/components/image-preview.pcss.css

View source
  1. /**
  2. * @file
  3. * Image preview component.
  4. */
  5. @import "../base/variables.pcss.css";
  6. :root {
  7. --color-pattern: var(--color-gray-200);
  8. --size-pattern-square: calc(7rem / 16);
  9. }
  10. /**
  11. * Image preview.
  12. */
  13. .image-preview {
  14. line-height: 0;
  15. }
  16. .image-preview__img-wrapper {
  17. display: inline-block;
  18. max-width: 100%;
  19. background-color: var(--color-white);
  20. box-shadow: inset 0 0 var(--size-pattern-square) var(--color-pattern);
  21. }
  22. .image-preview img {
  23. background-image:
  24. linear-gradient(-45deg, var(--color-pattern) 25%, transparent 26%),
  25. linear-gradient(-45deg, var(--color-pattern) 25%, transparent 26%),
  26. linear-gradient(135deg, var(--color-pattern) 25%, transparent 26%),
  27. linear-gradient(135deg, var(--color-pattern) 25%, transparent 26%);
  28. background-position:
  29. 0 0,
  30. var(--size-pattern-square) var(--size-pattern-square),
  31. var(--size-pattern-square) var(--size-pattern-square),
  32. 0 0;
  33. background-size: calc(var(--size-pattern-square) * 2) calc(var(--size-pattern-square) * 2);
  34. }
  35. @media screen and (-ms-high-contrast: active) {
  36. .image-preview img {
  37. background: none;
  38. }
  39. }
  40. /**
  41. * Don't display file icon in image widgets.
  42. */
  43. .image-widget .file.file {
  44. padding: 0; /* LTR and RTL */
  45. background: none;
  46. }

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