beta-parity-react/ui/Menu/index.css

Beta Parity React Components

.menu{border-radius:.375rem;border-width:1px;box-shadow:0 10px 15px -3px var(--par-color-effect-shadow);cursor:default;display:flex;flex-direction:column;font-family:IBM Plex Sans,Helvetica Neue,Arial,sans-serif;font-size:1rem;font-weight:400;gap:.25rem;line-height:1.5rem;opacity:0;position:absolute;visibility:hidden;width:100%;z-index:1000}.menu-footer,.menu-header{border-color:var(--par-color-border-surface);flex-shrink:0;height:2.5rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.menu-header{border-bottom-width:1px}.menu-footer{border-top-width:1px}.menu input.menu-item-search{border-bottom-left-radius:0;border-bottom-right-radius:0;border-style:none}.menu input.menu-item-search:focus{outline:2px solid transparent;outline-offset:2px}.menu input.menu-item-search:focus-visible{outline:2px solid transparent;outline-offset:2px}@media (hover:hover) and (pointer:fine){.menu .search-menu-btn:hover{background-color:transparent}}.menu .menu-items{flex-direction:column;gap:.25rem;overflow-y:auto;padding:.25rem;scrollbar-width:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}.menu .menu-items,.menu-item{border-radius:.375rem;display:flex}.menu-item{align-items:center;background-color:var(--par-color-bg-surface-item-enabled);color:var(--par-color-text-surface-item-enabled);flex-shrink:0;gap:.75rem;padding-left:.75rem;padding-right:.75rem;position:relative;width:100%}@media (hover:hover) and (pointer:fine){.menu-item:hover{background-color:var(--par-color-bg-surface-item-hovered)}}.menu-item[aria-disabled=true]{color:var(--par-color-text-surface-item-disabled);cursor:not-allowed}@media (hover:hover) and (pointer:fine){.menu-item[aria-disabled=true]:hover{background-color:var(--par-color-bg-surface-item-disabled)}}.menu-item-icon{align-items:center;display:flex;justify-content:center;min-height:1rem;min-width:1rem}.menu-item-label{flex:1 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.menu-no-items{text-align:center}.menu-indicator,.menu-no-items{color:var(--par-color-icon-field-button-enabled)}.menu-indicator{align-items:center;display:none;height:2rem;justify-content:center;left:0;padding:0;position:absolute;width:100%;z-index:10}.menu-indicator.menu-indicator-top{background-image:linear-gradient(to top,var(--tw-gradient-stops));border-top-left-radius:.375rem;border-top-right-radius:.375rem;display:flex;top:0}.menu-indicator.menu-indicator-bottom{background-image:linear-gradient(to bottom,var(--tw-gradient-stops));border-bottom-left-radius:.375rem;border-bottom-right-radius:.375rem;bottom:0;display:flex}.menu:has(.menu-header) .menu-indicator.menu-indicator-top{top:2.5rem}.menu:has(.menu-footer) .menu-indicator.menu-indicator-bottom{bottom:2.5rem}.menu.small .menu-item{gap:.5rem;height:2.5rem}.menu.medium .menu-item{height:3rem}.menu.default{background-color:var(--par-color-bg-surface);border-color:var(--par-color-border-surface)}.menu.default .menu-indicator{--tw-gradient-from:var(--par-color-indicator-default-from) var(--tw-gradient-from-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to);--tw-gradient-to:hsla(0,0%,100%,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--par-color-indicator-default-via) var(--tw-gradient-via-position),var(--tw-gradient-to);--tw-gradient-to:var(--par-color-indicator-default-to) var(--tw-gradient-to-position)}.menu.alternative{background-color:var(--par-color-bg-surface-alternative);border-color:var(--par-color-border-surface)}.menu.alternative .menu-indicator{--tw-gradient-from:var(--par-color-indicator-alternative-from) var(--tw-gradient-from-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to);--tw-gradient-to:hsla(0,0%,100%,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--par-color-indicator-alternative-via) var(--tw-gradient-via-position),var(--tw-gradient-to);--tw-gradient-to:var(--par-color-indicator-alternative-to) var(--tw-gradient-to-position)}.menu .menu-item:has(input:checked){background-color:var(--par-color-bg-surface-item-neutral-subtle-selected);color:var(--par-color-text-surface-item-neutral-subtle-selected)}@media (hover:hover) and (pointer:fine){.menu .menu-item:has(input:checked):hover{background-color:var(--par-color-bg-surface-item-neutral-subtle-selected-hovered)}}.menu .menu-item[aria-checked=true].neutral.subtle{background-color:var(--par-color-bg-surface-item-neutral-subtle-selected);color:var(--par-color-text-surface-item-neutral-subtle-selected)}@media (hover:hover) and (pointer:fine){.menu .menu-item[aria-checked=true].neutral.subtle:hover{background-color:var(--par-color-bg-surface-item-neutral-subtle-selected-hovered)}}.menu .menu-item[aria-checked=true].neutral.pronounced{background-color:var(--par-color-bg-surface-item-neutral-pronounced-selected);color:var(--par-color-text-surface-item-neutral-pronounced-selected)}@media (hover:hover) and (pointer:fine){.menu .menu-item[aria-checked=true].neutral.pronounced:hover{background-color:var(--par-color-bg-surface-item-neutral-pronounced-selected-hovered)}}.menu .menu-item[aria-checked=true].accent.subtle{background-color:var(--par-color-bg-surface-item-accent-subtle-selected);color:var(--par-color-text-surface-item-accent-subtle-selected)}@media (hover:hover) and (pointer:fine){.menu .menu-item[aria-checked=true].accent.subtle:hover{background-color:var(--par-color-bg-surface-item-accent-subtle-selected-hovered)}}.menu .menu-item[aria-checked=true].accent.pronounced{background-color:var(--par-color-bg-surface-item-accent-pronounced-selected);color:var(--par-color-text-surface-item-accent-pronounced-selected)}@media (hover:hover) and (pointer:fine){.menu .menu-item[aria-checked=true].accent.pronounced:hover{background-color:var(--par-color-bg-surface-item-accent-pronounced-selected-hovered)}}.menu[data-open=true]{opacity:1;visibility:visible}.layer,.menu[data-open=true]:after{height:calc(100% + 1rem);left:50%;position:absolute;top:50%;width:calc(100% + .5rem);z-index:-50;--tw-translate-x:-50%;--tw-translate-y:-50%;background-color:transparent;opacity:.2;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.menu .menu-group-label{align-items:center;border-color:var(--par-color-border-surface);color:var(--par-color-text-secondary);display:flex;font-family:IBM Plex Sans,Helvetica Neue,Arial,sans-serif;font-size:1rem;font-weight:600;gap:.75rem;line-height:1.375rem;padding:.75rem;position:relative;width:100%}.group-selection .menu-item{padding-right:2.5rem}.group-selection .selected-icon{align-items:center;aspect-ratio:auto;display:flex;height:100%;justify-content:center;padding:.75rem;position:absolute;right:0;width:-moz-fit-content;width:fit-content}.menu-group:last-child .menu-item:last-child{border-bottom-left-radius:.375rem;border-bottom-right-radius:.375rem}