12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485 |
- .drawer-portal {
- position: absolute;
- left: 0;
- right: 0;
- bottom: 0;
- z-index: $drawerZ;
- background-color: #141414;
- border-radius: 16px 16px 0 0;
- }
-
- .drawer-menu {
- max-height: calc(80vh - 64px);
- background: #242528;
- border-radius: 16px 16px 0 0;
- overflow-y: hidden;
- margin-bottom: env(safe-area-inset-bottom, 0);
-
- .drawer-toggle {
- display: flex;
- justify-content: center;
- align-items: center;
- height: 44px;
- cursor: pointer;
-
- svg {
- fill: none;
- }
- }
-
- .popupmenu {
- margin: auto;
- width: 100%;
- }
-
- .popupmenu__item {
- height: 48px;
- }
-
- &#{&} .overflow-menu {
- margin: auto;
- font-size: 1.2em;
- list-style-type: none;
- padding: 0;
- height: calc(80vh - 144px - 64px);
- overflow-y: auto;
-
- .overflow-menu-item {
- box-sizing: border-box;
- height: 48px;
- padding: 12px 16px;
-
- align-items: center;
- color: $overflowMenuItemColor;
- cursor: pointer;
- display: flex;
- font-size: 16px;
-
- div {
- display: flex;
- flex-direction: row;
- align-items: center;
- }
-
- &.unclickable {
- cursor: default;
- }
- @media (hover: hover) and (pointer: fine) {
- &.unclickable:hover {
- background: inherit;
- }
- }
- &.disabled {
- cursor: initial;
- color: #3b475c;
- }
- }
-
- .profile-text {
- max-width: 100%;
- text-overflow: ellipsis;
- overflow: hidden;
- white-space: nowrap;
- }
- }
- }
|