pxt-core/react-common/styles/controls/MenuDropdown.less

Microsoft MakeCode provides Blocks / JavaScript / Python tools and editors

.common-menu-dropdown {
    height: 100%;
    position: relative;
}

.common-menu-dropdown > .menu-button.expanded {
    background: var(--pxt-neutral-alpha20);
}

.common-menu-dropdown-pane {
    position: absolute;
    right: 0;
    padding: 0;
    min-width: 8rem;
    list-style: none;
    margin: 0;
    background: var(--pxt-neutral-background1);
    border: 1px solid var(--pxt-neutral-stencil1);

    ul {
        list-style: none;
        margin: 0;
        padding: 0;
        background: var(--pxt-neutral-background1);
        color: var(--pxt-neutral-foreground1);
    }

    li.common-menu-dropdown-item, li.common-menu-dropdown-item.common-button, a.common-menu-dropdown-link-item {
        white-space: nowrap;
        background: var(--pxt-neutral-background1);
        color: var(--pxt-neutral-foreground1);
        width: 100%;
        padding: 13px 18px;
        border-radius: 0;
        display: flex;
        align-items: center;
        text-align: left;

        cursor: pointer;
        user-select: none;

        i.xicon, i.icon {
            display: inline-block;
            font-size: 1em;
            margin-right: 0.75em;
            width: 1.18em;
        }

        span.common-checkbox-icon {
            margin-left: .125rem;
            margin-right: .875rem;
        }

        &:hover {
            text-decoration: none;
            color: var(--pxt-neutral-foreground1);
        }

        &:hover:not(.disabled) {
            filter: grayscale(.15) brightness(.85) contrast(1.3);
        }

        &:focus-visible {
            outline: 3px solid var(--pxt-focus-border);
            outline-offset: -4px;
        }

        &:focus-visible::after {
            outline: none;
            border: none;
        }
    }

    li.common-menu-dropdown-separator {
        border-top: 1px solid var(--pxt-neutral-stencil1);
        margin: 0.25rem 0;
        background: var(--pxt-neutral-background1);
    }
}

.common-menu-dropdown-item.common-button:focus::after {
    outline: var(--pxt-focus-border) solid 3px !important;
}