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

     1  $border: 1px solid var(--ps-ui-border);
     2  $border-radius: 4px;
     3  
     4  .button {
     5    white-space: nowrap;
     6    overflow: hidden;
     7    text-overflow: ellipsis;
     8    cursor: pointer;
     9    border: $border;
    10    border-radius: $border-radius;
    11  
    12    &[type='button'],
    13    &[type='reset'],
    14    &[type='submit'] {
    15      -webkit-appearance: button;
    16    }
    17  }
    18  
    19  .noIcon {
    20    min-width: 48px;
    21  }
    22  
    23  .noBox {
    24    border: none;
    25    border-radius: none;
    26    background: inherit !important;
    27  }
    28  
    29  .customIcon svg {
    30    width: 1rem;
    31    margin-right: 5px;
    32    vertical-align: -0.125em;
    33  }
    34  
    35  .iconWithText {
    36    // icon is on the left
    37    // some space between the icon and text
    38    margin-right: 5px;
    39  }
    40  
    41  .default {
    42    background: var(--ps-ui-element-bg-primary);
    43  
    44    &:hover:not(:disabled) {
    45      background-color: var(--ps-ui-element-bg-highlight);
    46    }
    47  
    48    &:disabled {
    49      color: var(--ps-disabled-button-text);
    50      pointer-events: none;
    51    }
    52  }
    53  
    54  .primary {
    55    border-color: transparent;
    56    color: var(--ps-button-switch-text) !important;
    57    background-color: var(--ps-button-switch-bg);
    58  
    59    &:hover {
    60      background-color: var(--ps-button-switch-bg-highlight);
    61    }
    62    &:disabled {
    63      background-color: var(--ps-green-disabled);
    64      pointer-events: none;
    65    }
    66  }
    67  
    68  .secondary {
    69    border-color: transparent;
    70    color: var(--ps-immutable-off-white);
    71    background-color: var(--ps-blue-primary);
    72  
    73    &:hover {
    74      background-color: var(--ps-blue-highlight);
    75    }
    76    &:disabled {
    77      background-color: var(--ps-blue-disabled);
    78      pointer-events: none;
    79    }
    80  }
    81  
    82  .float {
    83    @extend .default;
    84    border-color: transparent;
    85    background-color: transparent;
    86  }
    87  
    88  .danger {
    89    border-color: transparent;
    90    color: var(--ps-neutral-2);
    91    background-color: var(--ps-red-primary);
    92    &:hover {
    93      background-color: var(--ps-red-highlight);
    94    }
    95    &:disabled {
    96      background-color: var(--ps-red-disabled);
    97      pointer-events: none;
    98    }
    99  }
   100  
   101  .outline {
   102    @extend .default;
   103    background-color: transparent;
   104  
   105    &:hover:not(:disabled) {
   106      background-color: rgba(144, 202, 249, 0.08);
   107    }
   108  }
   109  
   110  // only the first and last elements should have styling
   111  .grouped {
   112    margin: 0;
   113    border-right: 0;
   114    border-radius: 0;
   115  
   116    // give it a bit more room to breath
   117    padding-left: 12px;
   118    padding-right: 12px;
   119  }
   120  .grouped:first-child {
   121    border-left: $border;
   122  
   123    border-radius: $border-radius 0 0 $border-radius;
   124  }
   125  .grouped:last-child {
   126    border-right: $border;
   127  
   128    border-radius: 0 $border-radius $border-radius 0;
   129  }