github.com/pyroscope-io/pyroscope@v0.37.3-0.20230725203016-5f6947968bd0/webapp/javascript/components/EnhancedAppSelector/EnhancedAppSelector.module.scss (about)

     1  @use '../../../sass/mixins/outline.scss' as *;
     2  
     3  .container {
     4    display: flex;
     5    align-items: center;
     6    position: relative;
     7  }
     8  
     9  .appSelectorModal {
    10    height: auto;
    11    width: auto;
    12    right: unset;
    13    left: -100px;
    14    z-index: 999;
    15  }
    16  
    17  .header {
    18    display: flex;
    19  }
    20  
    21  .headerTitle {
    22    position: relative;
    23    margin-left: 10px;
    24    color: var(--ps-select-modal-title);
    25    font-weight: 700;
    26    font-size: 0.8em;
    27  }
    28  
    29  .searchInput {
    30    height: 40px;
    31    background: var(--ps-immutable-off-white);
    32    color: var(--ps-immutable-placeholder-text);
    33    border: 1px solid var(--ps-ui-border);
    34    margin: 10px 0 10px 10px;
    35  }
    36  
    37  .filter {
    38    margin: 10px;
    39    min-height: 40px;
    40    display: flex;
    41  }
    42  
    43  .filterName {
    44    margin: 0;
    45    padding: 0;
    46    min-width: 100px;
    47    line-height: 40px;
    48    color: var(--ps-select-modal-title);
    49  }
    50  
    51  .iconsContainer,
    52  .profileTypesContainer {
    53    display: flex;
    54    flex-wrap: wrap;
    55    min-width: 400px;
    56  }
    57  
    58  .profileTypesContainer {
    59    flex-wrap: wrap;
    60  }
    61  
    62  .icon {
    63    display: flex;
    64    justify-content: center;
    65    align-items: center;
    66    cursor: pointer;
    67    border-color: var(--ps-app-selector-filter);
    68    width: 40px;
    69    height: 40px;
    70    margin: 0 5px 5px 0;
    71    line-height: 40px;
    72  
    73    &.active {
    74      background-color: var(--ps-blue-primary);
    75    }
    76  
    77    svg {
    78      width: 100%;
    79      height: 100%;
    80    }
    81  }
    82  
    83  .profileType {
    84    border: none;
    85    line-height: 25px;
    86    cursor: pointer;
    87    border-radius: 10px;
    88    background-color: var(--ps-app-selector-filter);
    89    margin: 0 5px 5px 0;
    90    padding: 0 10px;
    91    color: var(--ps-tooltip-text);
    92  
    93    &.active {
    94      background-color: var(--ps-blue-primary);
    95      color: var(--ps-immutable-white);
    96    }
    97  }
    98  
    99  .noData {
   100    width: 100%;
   101    height: 300px;
   102    display: flex;
   103    justify-content: center;
   104    align-items: center;
   105  }
   106  
   107  .resetFilters {
   108    position: absolute;
   109    left: 100px;
   110    top: -5px;
   111    border: none;
   112    color: var(--ps-immutable-white);
   113    cursor: pointer;
   114  
   115    &:disabled {
   116      cursor: not-allowed;
   117      color: var(--ps-disabled-button-text);
   118    }
   119  }