sendou.ink/app/components/elements/Menu.module.css
Kalle 2f05616efc
Menu -> React Aria Components (#2230)
* Initial

* wip

* wip

* wip

* wip

* wip

* wip

* Delete old

* fix e2e test
2025-04-27 19:44:01 +03:00

82 lines
1.4 KiB
CSS

.itemsContainer {
position: absolute;
top: 32px;
border-radius: var(--rounded);
background-color: var(--bg-darker);
border: var(--border-style);
z-index: 10;
display: flex;
flex-direction: column;
overflow: hidden;
align-items: flex-start;
width: max-content;
}
.itemsContainerOpensLeft {
right: 0;
}
.container {
position: relative;
}
.scrolling {
max-height: 300px !important;
overflow-y: auto;
scrollbar-color: rgb(83 65 91) transparent;
scrollbar-width: thin;
scrollbar-gutter: stable;
}
.item {
display: flex;
align-items: center;
font-weight: var(--bold);
font-size: var(--fonts-xs);
color: var(--text);
white-space: nowrap;
gap: var(--s-2);
border-radius: var(--rounded-xs);
padding: var(--s-1-5) var(--s-2-5);
background-color: var(--bg-darker);
width: 100%;
border: 0;
outline: none;
justify-content: flex-start;
}
.item:first-child {
border-radius: 14.5px 14.5px var(--rounded-xs) var(--rounded-xs);
}
.item:last-child {
border-radius: var(--rounded-xs) var(--rounded-xs) 14.5px 14.5px;
}
.item[data-focused] {
background-color: var(--theme-very-transparent);
}
.itemDisabled {
color: var(--text-lighter);
cursor: not-allowed;
}
.itemSelected {
background-color: var(--theme-transparent);
font-weight: var(--extra-bold);
}
.itemActive {
color: var(--theme);
}
.itemIcon {
width: 18px;
}
.itemImg {
min-width: 24px;
min-height: 24px;
}