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 2.0KB

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