index.scss 1.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051
  1. .uppy-DashboardItem-previewInnerWrap {
  2. width: 100%;
  3. height: 100%;
  4. overflow: hidden;
  5. // For :after positioning
  6. position: relative;
  7. display: flex;
  8. justify-content: center;
  9. align-items: center;
  10. flex-direction: column;
  11. box-shadow: 0 0 2px 0 rgba($black, 0.4);
  12. border-radius: 3px;
  13. .uppy-size--md & {
  14. box-shadow: 0 1px 2px rgba($black, 0.15);
  15. }
  16. }
  17. .uppy-DashboardItem-previewInnerWrap:after {
  18. content: '';
  19. position: absolute;
  20. left: 0; right: 0;
  21. top: 0; bottom: 0;
  22. background-color: rgba($black, 0.65);
  23. display: none;
  24. z-index: $zIndex-2;
  25. }
  26. .uppy-DashboardItem-previewLink {
  27. position: absolute;
  28. left: 0; right: 0;
  29. top: 0; bottom: 0;
  30. z-index: $zIndex-3;
  31. &:focus{
  32. box-shadow: inset 0 0 0 3px lighten($blue, 20%);
  33. }
  34. }
  35. .uppy-DashboardItem-preview img.uppy-DashboardItem-previewImg {
  36. width: 100%;
  37. height: 100%;
  38. object-fit: cover;
  39. // Fixes file previews being partially invisible in safari (for some pics only).
  40. // (https://stackoverflow.com/a/27971913/3192470)
  41. transform: translateZ(0);
  42. // We need a repeated border-radius because of the transform.
  43. border-radius: 3px;
  44. }
  45. // ...uppy-DashboardItem-previewInnerWrap|