LibraryMenuItems.scss 2.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102
  1. @import "open-color/open-color";
  2. .excalidraw {
  3. .library-menu-items-container {
  4. .library-actions {
  5. display: flex;
  6. button .library-actions-counter {
  7. position: absolute;
  8. right: 2px;
  9. bottom: 2px;
  10. border-radius: 50%;
  11. width: 1em;
  12. height: 1em;
  13. padding: 1px;
  14. font-size: 0.7rem;
  15. background: #fff;
  16. }
  17. &--remove {
  18. background-color: $oc-red-7;
  19. &:hover {
  20. background-color: $oc-red-8;
  21. }
  22. &:active {
  23. background-color: $oc-red-9;
  24. }
  25. svg {
  26. color: $oc-white;
  27. }
  28. .library-actions-counter {
  29. color: $oc-red-7;
  30. }
  31. }
  32. &--export {
  33. background-color: $oc-lime-5;
  34. &:hover {
  35. background-color: $oc-lime-7;
  36. }
  37. &:active {
  38. background-color: $oc-lime-8;
  39. }
  40. svg {
  41. color: $oc-white;
  42. }
  43. .library-actions-counter {
  44. color: $oc-lime-5;
  45. }
  46. }
  47. &--publish {
  48. background-color: $oc-cyan-6;
  49. &:hover {
  50. background-color: $oc-cyan-7;
  51. }
  52. &:active {
  53. background-color: $oc-cyan-9;
  54. }
  55. svg {
  56. color: $oc-white;
  57. }
  58. label {
  59. margin-left: -0.2em;
  60. margin-right: 1.1em;
  61. color: $oc-white;
  62. font-size: 0.86em;
  63. }
  64. .library-actions-counter {
  65. color: $oc-cyan-6;
  66. }
  67. }
  68. &--load {
  69. background-color: $oc-blue-6;
  70. &:hover {
  71. background-color: $oc-blue-7;
  72. }
  73. &:active {
  74. background-color: $oc-blue-9;
  75. }
  76. svg {
  77. color: $oc-white;
  78. }
  79. }
  80. }
  81. &__items {
  82. max-height: 50vh;
  83. overflow: auto;
  84. margin-top: 0.5rem;
  85. }
  86. .separator {
  87. font-weight: 500;
  88. font-size: 0.9rem;
  89. margin: 0.6em 0.2em;
  90. color: var(--text-primary-color);
  91. }
  92. }
  93. }