github.com/pyroscope-io/pyroscope@v0.37.3-0.20230725203016-5f6947968bd0/packages/pyroscope-flamegraph/src/Toolbar.module.scss (about)

     1  $buttonHeight: 37px;
     2  
     3  .navbar {
     4    position: relative;
     5    display: flex;
     6    flex-direction: row;
     7    margin: 10px 0;
     8    justify-content: space-between;
     9    height: 47px;
    10    background-color: var(--ps-fl-toolbar-bg);
    11    border: 1px solid var(--ps-ui-border);
    12    padding: 4px;
    13    align-items: center;
    14  }
    15  
    16  .viewType {
    17    display: flex;
    18    flex-direction: row;
    19    flex-wrap: nowrap;
    20  }
    21  
    22  .navbar button {
    23    color: var(--ps-toolbar-icon-color);
    24  }
    25  
    26  .toggleViewButton {
    27    height: $buttonHeight;
    28    min-width: auto;
    29    width: 40px;
    30    margin: 0 2px;
    31    padding: 0;
    32    border-color: transparent;
    33    background-color: transparent;
    34    display: flex;
    35    justify-content: center;
    36    align-items: center;
    37  
    38    svg {
    39      width: 22px;
    40      height: 22px;
    41    }
    42  
    43    &.selected {
    44      background-color: var(--ps-fl-toolbar-btn-bg);
    45  
    46      &:hover {
    47        background-color: var(--ps-fl-toolbar-btn-bg);
    48      }
    49  
    50      svg {
    51        color: white;
    52      }
    53    }
    54  }
    55  
    56  .fitModeButton {
    57    @extend .toggleViewButton;
    58  }
    59  
    60  .collapseNodeButton {
    61    min-width: initial;
    62    width: 40px;
    63    height: $buttonHeight;
    64    margin: 0 2px;
    65    padding: 0;
    66    background-color: transparent;
    67    border-color: transparent;
    68  }
    69  
    70  .resetViewButton {
    71    @extend .collapseNodeButton;
    72    width: 40px;
    73    min-width: initial;
    74    margin: 0 2px;
    75    padding: 0;
    76  }
    77  
    78  .divider {
    79    width: 1px;
    80    margin: 0 2px;
    81    height: $buttonHeight;
    82    background-color: var(--ps-ui-border);
    83  }
    84  
    85  .itemsContainer,
    86  .item {
    87    display: flex;
    88  }
    89  
    90  .moreButton {
    91    border-radius: 4px;
    92    border: none;
    93    padding: 0 5px;
    94    height: $buttonHeight;
    95  
    96    &.active,
    97    &.active:hover {
    98      background-color: var(--ps-fl-toolbar-btn-bg);
    99    }
   100  
   101    &:hover {
   102      background-color: var(--ps-ui-element-bg-highlight);
   103      cursor: pointer;
   104    }
   105  }
   106  
   107  .navbarCollapsedItems {
   108    display: flex;
   109    position: absolute;
   110    right: 0;
   111    top: 50px;
   112    height: 47px;
   113    background-color: var(--ps-fl-toolbar-bg);
   114    border: 1px solid var(--ps-ui-border);
   115    padding: 4px;
   116    z-index: 1;
   117  }