LibraryUnit.scss 1.4 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879
  1. .excalidraw {
  2. .library-unit {
  3. align-items: center;
  4. border: 1px solid var(--button-gray-2);
  5. display: flex;
  6. justify-content: center;
  7. position: relative;
  8. width: 63px;
  9. height: 63px; // match width
  10. }
  11. .library-unit__dragger {
  12. display: flex;
  13. height: 100%;
  14. width: 100%;
  15. }
  16. .library-unit__dragger > svg {
  17. filter: var(--theme-filter);
  18. flex-grow: 1;
  19. max-height: 100%;
  20. max-width: 100%;
  21. }
  22. .library-unit__removeFromLibrary,
  23. .library-unit__removeFromLibrary:hover,
  24. .library-unit__removeFromLibrary:active {
  25. align-items: center;
  26. background: none;
  27. border: none;
  28. color: var(--icon-fill-color);
  29. display: flex;
  30. justify-content: center;
  31. margin: 0;
  32. padding: 0;
  33. position: absolute;
  34. right: 5px;
  35. top: 5px;
  36. }
  37. .library-unit__removeFromLibrary > svg {
  38. height: 16px;
  39. width: 16px;
  40. }
  41. .library-unit__pulse {
  42. transform: scale(1);
  43. animation: library-unit__pulse-animation 1s ease-in infinite;
  44. }
  45. .library-unit__adder {
  46. position: absolute;
  47. left: 50%;
  48. top: 50%;
  49. width: 20px;
  50. height: 20px;
  51. margin-left: -10px;
  52. margin-top: -10px;
  53. pointer-events: none;
  54. }
  55. .library-unit__active {
  56. cursor: pointer;
  57. }
  58. @keyframes library-unit__pulse-animation {
  59. 0% {
  60. transform: scale(0.95);
  61. }
  62. 50% {
  63. transform: scale(1);
  64. }
  65. 100% {
  66. transform: scale(0.95);
  67. }
  68. }
  69. }