github.com/pyroscope-io/pyroscope@v0.37.3-0.20230725203016-5f6947968bd0/webapp/sass/components/labels.scss (about)

     1  @use '../variables' as *;
     2  @use '../mixins/outline' as *;
     3  
     4  .labels {
     5    min-width: 350px;
     6    visibility: none;
     7  
     8    &.visible {
     9      visibility: block;
    10    }
    11  
    12    select {
    13      margin-right: 10px;
    14      width: fit-content;
    15      white-space: nowrap;
    16      overflow: hidden;
    17      text-overflow: ellipsis;
    18    }
    19  
    20    .label {
    21      display: inline-block;
    22  
    23      // @include outline;
    24      // height: 30px;
    25      // line-height: 30px;
    26      border: 1px solid var(--ps-ui-border);
    27      border-radius: 4px;
    28      background: $btn-color;
    29      padding: 0 6px;
    30      margin-right: 10px;
    31      line-height: 1.6;
    32      &:hover {
    33        background: $btn-hover-color;
    34      }
    35      .label-name {
    36        font-weight: 400;
    37  
    38        &:after {
    39          content: ':\202f';
    40          display: inline;
    41        }
    42      }
    43      .label-value {
    44      }
    45      .label-delete-btn {
    46        border: none;
    47        padding: 0px;
    48        position: relative;
    49        cursor: pointer;
    50  
    51        &::after {
    52          content: '×';
    53          display: block;
    54          position: absolute;
    55          font-weight: 400;
    56  
    57          top: -30px;
    58          right: -16px;
    59          background: var(--ps-red-primary);
    60          padding: 5px;
    61          line-height: 0.65;
    62          border-radius: 50%;
    63          width: 22px;
    64          height: 22px;
    65          opacity: 0;
    66        }
    67      }
    68      &:hover .label-delete-btn::after {
    69        opacity: 1;
    70      }
    71    }
    72  }
    73  
    74  .labels-new-label {
    75    .labels-new-input {
    76      width: 100px;
    77      border-radius: 4px;
    78      margin-right: 10px;
    79    }
    80    .labels-new-btn {
    81    }
    82  }