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.1KB

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