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

     1  @use '../variables' as *;
     2  @use '../mixins/outline' as *;
     3  
     4  .btn {
     5    @include outline;
     6  
     7    white-space: nowrap;
     8    overflow: hidden;
     9    text-overflow: ellipsis;
    10  
    11    cursor: pointer;
    12  
    13    border: 1px solid var(--ps-ui-border);
    14    border-radius: 4px;
    15    background: $btn-color;
    16  
    17    &:hover:not(:disabled) {
    18      background: $btn-hover-color;
    19    }
    20  
    21    &:disabled {
    22      color: var(--ps-ui-foreground-text);
    23      color: 1px solid var(--ps-neutral-9);
    24      pointer-events: none;
    25    }
    26  }
    27  
    28  // inspired by .viz-switch .btn
    29  .btn.primary {
    30    background-color: var(--ps-green-disabled);
    31    border-left-color: var(--ps-green-disabled);
    32    border-right-color: var(--ps-green-disabled);
    33    border-top-color: var(--ps-green-disabled);
    34    border-bottom-color: var(--ps-green-disabled);
    35    transition: 0.3s cubic-bezier(0.17, 0.67, 0.83, 0.67);
    36    font-weight: 600;
    37  
    38    &:hover {
    39      background-color: var(--ps-green-primary);
    40    }
    41  }