You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

_drawer.scss 1.9KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091
  1. .drawer-portal {
  2. position: absolute;
  3. left: 0;
  4. right: 0;
  5. bottom: 0;
  6. z-index: $drawerZ;
  7. border-radius: 16px 16px 0 0;
  8. &.notification-portal {
  9. z-index: $dropdownZ;
  10. }
  11. }
  12. .drawer-portal::after {
  13. content: '';
  14. background-color: $participantsPaneBgColor;
  15. margin-bottom: env(safe-area-inset-bottom, 0);
  16. }
  17. .drawer-menu-container {
  18. height: 100vh;
  19. display: flex;
  20. align-items: flex-end;
  21. }
  22. .drawer-menu {
  23. background: #242528;
  24. border-radius: 16px 16px 0 0;
  25. overflow-y: auto;
  26. margin-bottom: env(safe-area-inset-bottom, 0);
  27. width: 100%;
  28. .drawer-toggle {
  29. display: flex;
  30. justify-content: center;
  31. align-items: center;
  32. height: 44px;
  33. cursor: pointer;
  34. svg {
  35. fill: none;
  36. }
  37. }
  38. &#{&} .overflow-menu {
  39. margin: auto;
  40. font-size: 1.2em;
  41. list-style-type: none;
  42. padding: 0;
  43. height: calc(80vh - 144px - 64px);
  44. overflow-y: auto;
  45. .overflow-menu-item {
  46. box-sizing: border-box;
  47. height: 48px;
  48. padding: 12px 16px;
  49. align-items: center;
  50. color: $overflowMenuItemColor;
  51. cursor: pointer;
  52. display: flex;
  53. font-size: 16px;
  54. div {
  55. display: flex;
  56. flex-direction: row;
  57. align-items: center;
  58. }
  59. &.unclickable {
  60. cursor: default;
  61. }
  62. @media (hover: hover) and (pointer: fine) {
  63. &.unclickable:hover {
  64. background: inherit;
  65. }
  66. }
  67. &.disabled {
  68. cursor: initial;
  69. color: #3b475c;
  70. }
  71. }
  72. .profile-text {
  73. max-width: 100%;
  74. text-overflow: ellipsis;
  75. overflow: hidden;
  76. white-space: nowrap;
  77. }
  78. }
  79. }