image-preview.css

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

Image preview component.

File

core/themes/claro/css/components/image-preview.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. * Image preview component.
  10. */
  11. /**
  12. * Image preview.
  13. */
  14. .image-preview {
  15. line-height: 0;
  16. }
  17. .image-preview__img-wrapper {
  18. display: inline-block;
  19. max-width: 100%;
  20. background-color: #fff;
  21. box-shadow: inset 0 0 0.4375rem #d4d4d8;
  22. }
  23. .image-preview img {
  24. background-image:
  25. linear-gradient(-45deg, #d4d4d8 25%, transparent 26%),
  26. linear-gradient(-45deg, #d4d4d8 25%, transparent 26%),
  27. linear-gradient(135deg, #d4d4d8 25%, transparent 26%),
  28. linear-gradient(135deg, #d4d4d8 25%, transparent 26%);
  29. background-position:
  30. 0 0,
  31. 0.4375rem 0.4375rem,
  32. 0.4375rem 0.4375rem,
  33. 0 0;
  34. background-size: 0.875rem 0.875rem;
  35. }
  36. @media screen and (-ms-high-contrast: active) {
  37. .image-preview img {
  38. background: none;
  39. }
  40. }
  41. /**
  42. * Don't display file icon in image widgets.
  43. */
  44. .image-widget .file.file {
  45. padding: 0; /* LTR and RTL */
  46. background: none;
  47. }

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