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

     1  .wrapper {
     2    display: flex;
     3    flex-direction: row;
     4    align-items: center;
     5    flex-grow: 1;
     6  }
     7  
     8  .search {
     9    background: var(--ps-immutable-off-white);
    10    transition: background-color ease-out 0.1s;
    11    font: inherit;
    12    margin-right: 1.5px;
    13    border: 1px solid var(--ps-ui-border);
    14    display: flex;
    15    flex-grow: 1;
    16    height: 37px;
    17    width: 100%;
    18  
    19    &,
    20    &::placeholder {
    21      color: var(--ps-immutable-placeholder-text) !important;
    22    }
    23  }
    24  
    25  .searchWithSync {
    26    @extend .search;
    27  
    28    border-top-right-radius: 0;
    29    border-bottom-right-radius: 0;
    30    border-right: 1px solid var(--ps-ui-border);
    31    margin-right: 0;
    32  }
    33  
    34  .search-synced {
    35    @extend .search;
    36  
    37    border-color: var(--ps-immutable-linked-border);
    38  }
    39  
    40  .search:focus {
    41    background: var(--ps-immutable-white);
    42  }
    43  
    44  .icon {
    45    cursor: pointer;
    46  
    47    & path {
    48      fill: var(--ps-grey-primary);
    49    }
    50  }
    51  
    52  .checked {
    53    @extend .icon;
    54  
    55    path {
    56      fill: var(--ps-immutable-linked-border);
    57    }
    58  }
    59  
    60  .sync {
    61    border: none;
    62    background-color: var(--ps-immutable-off-white);
    63    cursor: pointer;
    64    width: 40px;
    65    border-top-right-radius: 4px;
    66    border-bottom-right-radius: 4px;
    67    border: 1px solid var(--ps-ui-border);
    68    position: relative;
    69    border-left: none;
    70    display: flex;
    71    align-self: stretch;
    72    align-items: center;
    73    justify-content: center;
    74  }
    75  
    76  .syncSelected {
    77    @extend .sync;
    78  
    79    border-top-color: var(--ps-immutable-linked-border);
    80    border-right-color: var(--ps-immutable-linked-border);
    81    border-bottom-color: var(--ps-immutable-linked-border);
    82  }