image-preview.pcss.css

Same filename in other branches
  1. 9 core/themes/claro/css/components/image-preview.pcss.css
  2. 8.9.x 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. :root {
  6. --color-pattern: var(--color-gray-200);
  7. --size-pattern-square: calc(7rem / 16);
  8. }
  9. /**
  10. * Image preview.
  11. */
  12. .image-preview {
  13. line-height: 0;
  14. & img {
  15. background-image: linear-gradient(-45deg, var(--color-pattern) 25%, transparent 26%), linear-gradient(-45deg, var(--color-pattern) 25%, transparent 26%), linear-gradient(135deg, var(--color-pattern) 25%, transparent 26%), linear-gradient(135deg, var(--color-pattern) 25%, transparent 26%);
  16. background-position:
  17. 0 0,
  18. var(--size-pattern-square) var(--size-pattern-square),
  19. var(--size-pattern-square) var(--size-pattern-square),
  20. 0 0;
  21. background-size: calc(var(--size-pattern-square) * 2) calc(var(--size-pattern-square) * 2);
  22. }
  23. }
  24. .image-preview__img-wrapper {
  25. display: inline-block;
  26. max-width: 100%;
  27. background-color: var(--color-white);
  28. box-shadow: inset 0 0 var(--size-pattern-square) var(--color-pattern);
  29. }
  30. /**
  31. * Don't display file icon in image widgets.
  32. */
  33. .image-widget .file.file {
  34. padding: 0;
  35. background: none;
  36. }

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