github.com/grafana/pyroscope@v1.18.0/public/app/ui/Dropdown.module.scss (about)

     1  @import '@szhsin/react-menu/dist/index.css';
     2  
     3  .dropdownMenu {
     4    padding: 0.25rem 0;
     5    box-shadow: 0px 2px 6px var(--ps-dropdown-shadow) !important;
     6    background-color: var(--ps-dropdown-background) !important;
     7    color: var(--ps-neutral-2) !important;
     8  
     9    & ul[class*='szh-menu'] {
    10      color: var(--ps-neutral-2) !important;
    11      background-color: var(--ps-dropdown-background) !important;
    12    }
    13  
    14    li[class='szh-menu__header'] {
    15      text-align: left;
    16    }
    17  
    18    & li[class*='hover'],
    19    div[class*='hover'] {
    20      background-color: var(--ps-ui-element-bg-highlight);
    21    }
    22  
    23    [class*='szh-menu--open']:empty {
    24      display: none;
    25    }
    26  
    27    [class*='szh-menu__item active'] {
    28      background-color: var(--ps-ui-element-bg-highlight);
    29      color: var(--ps-selected-app);
    30    }
    31  
    32    [class*='szh-menu__item--focusable'] {
    33      // important to ignore the hover effect
    34      background-color: inherit !important;
    35      padding-top: 1rem;
    36      padding-bottom: 1rem;
    37  
    38      input {
    39        width: 100%;
    40      }
    41    }
    42  }
    43  
    44  .dropdownMenuButton {
    45    outline: none;
    46    display: flex;
    47    flex-shrink: 0;
    48    position: relative;
    49    border-radius: 4px;
    50    background-color: var(--ps-ui-element-bg-primary);
    51    border: 1px solid var(--ps-ui-border);
    52    margin-right: 5px;
    53    padding-right: 20px;
    54    &::after {
    55      content: '▾';
    56      position: absolute;
    57      top: 3px;
    58      right: 5px;
    59    }
    60  
    61    &:hover {
    62      cursor: pointer;
    63      background-color: var(--ps-ui-element-bg-highlight);
    64    }
    65  }