Menu.scss 1.6 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485
  1. @import "../css/variables.module";
  2. .excalidraw {
  3. .menu-container {
  4. background-color: #fff !important;
  5. max-height: calc(100vh - 150px);
  6. overflow-y: auto;
  7. }
  8. .menu-button {
  9. @include outlineButtonStyles;
  10. background-color: var(--island-bg-color);
  11. width: var(--lg-button-size);
  12. height: var(--lg-button-size);
  13. svg {
  14. width: var(--lg-icon-size);
  15. height: var(--lg-icon-size);
  16. }
  17. }
  18. .menu-item {
  19. display: flex;
  20. background-color: transparent;
  21. border: 0;
  22. align-items: center;
  23. padding: 0 0.625rem;
  24. height: 2rem;
  25. column-gap: 0.625rem;
  26. font-size: 0.875rem;
  27. color: var(--color-gray-100);
  28. cursor: pointer;
  29. border-radius: var(--border-radius-md);
  30. width: 100%;
  31. box-sizing: border-box;
  32. font-weight: normal;
  33. font-family: inherit;
  34. @media screen and (min-width: 1921px) {
  35. height: 2.25rem;
  36. }
  37. &__text {
  38. text-overflow: ellipsis;
  39. overflow: hidden;
  40. white-space: nowrap;
  41. }
  42. &__shortcut {
  43. margin-inline-start: auto;
  44. opacity: 0.5;
  45. }
  46. &:hover {
  47. background-color: var(--button-hover);
  48. text-decoration: none;
  49. }
  50. svg {
  51. width: 1rem;
  52. height: 1rem;
  53. display: block;
  54. }
  55. &.active-collab {
  56. background-color: #ecfdf5;
  57. color: #064e3c;
  58. }
  59. }
  60. &.theme--dark {
  61. .menu-item {
  62. color: var(--color-gray-40);
  63. &.active-collab {
  64. background-color: #064e3c;
  65. color: #ecfdf5;
  66. }
  67. }
  68. .menu-container {
  69. background-color: var(--color-gray-90) !important;
  70. }
  71. }
  72. }