index.scss 1.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384
  1. // On both mobile and .md+ screens
  2. .uppy-Dashboard-Item-action {
  3. @include blue-border-focus;
  4. cursor: pointer;
  5. color: $gray-500;
  6. &:hover {
  7. opacity: 1;
  8. color: $gray-900;
  9. }
  10. [data-uppy-theme="dark"] & {
  11. @include blue-border-focus--dark;
  12. color: $gray-300;
  13. }
  14. [data-uppy-theme="dark"] &:hover {
  15. color: $gray-200;
  16. }
  17. }
  18. .uppy-Dashboard-Item-action--remove {
  19. color: $gray-900;
  20. opacity: 0.95;
  21. &:hover {
  22. opacity: 1;
  23. color: $black;
  24. }
  25. [data-uppy-theme="dark"] & {
  26. color: $gray-700;
  27. }
  28. [data-uppy-theme="dark"] &:hover {
  29. color: $gray-800;
  30. }
  31. }
  32. // Only for mobile screens
  33. .uppy-Dashboard:not(.uppy-size--md) {
  34. // Vertically center Edit&Remove buttons on mobile
  35. .uppy-Dashboard-Item-actionWrapper {
  36. display: flex;
  37. align-items: center;
  38. }
  39. // Same inline design for Edit, Remove, and CopyLink buttons
  40. .uppy-Dashboard-Item-action {
  41. width: 22px;
  42. height: 22px;
  43. padding: 3px;
  44. margin-left: 3px;
  45. &:focus{
  46. border-radius: 3px;
  47. }
  48. }
  49. }
  50. // Only for screens bigger than .md
  51. .uppy-size--md {
  52. // Edit and CopyLink buttons are inline
  53. .uppy-Dashboard-Item-action--copyLink,
  54. .uppy-Dashboard-Item-action--edit {
  55. width: 16px;
  56. height: 16px;
  57. padding: 0;
  58. &:focus {
  59. border-radius: 3px;
  60. }
  61. }
  62. // Remove button is in the top right corner
  63. .uppy-Dashboard-Item-action--remove {
  64. z-index: $zIndex-3;
  65. position: absolute;
  66. top: -8px;
  67. inset-inline-end: -8px;
  68. width: 18px;
  69. height: 18px;
  70. padding: 0;
  71. &:focus {
  72. border-radius: 50%;
  73. }
  74. }
  75. }