github.com/grafana/pyroscope@v1.18.0/public/app/ui/Modals/ModalWithToggle.module.scss (about)

     1  .container {
     2    position: relative;
     3    display: inline-block;
     4  
     5    .toggle {
     6      cursor: pointer;
     7      background-color: var(--ps-ui-element-bg-primary);
     8      border: 1px solid var(--ps-ui-border);
     9      position: relative;
    10      border-radius: 4px;
    11      padding-right: 18px;
    12  
    13      &:after {
    14        content: '▾';
    15        position: absolute;
    16        right: 5px;
    17      }
    18    }
    19  }
    20  
    21  .modal {
    22    z-index: 3;
    23    width: 400px;
    24    position: absolute;
    25    right: 0;
    26    top: calc(100% + 5px);
    27    background-color: var(--ps-dropdown-background);
    28    border: 1px solid var(--ps-ui-border);
    29    border-radius: 4px;
    30    box-shadow: 0px 2px 6px var(--ps-dropdown-shadow);
    31  
    32    .modalHeader {
    33      padding: 12px 10px;
    34    }
    35  
    36    .modalBody {
    37      display: flex;
    38      border-top: 1px solid var(--ps-ui-border);
    39  
    40      .side {
    41        text-align: center;
    42        overflow-y: auto;
    43  
    44        &:first-child {
    45          border-right: 1px solid var(--ps-ui-border);
    46        }
    47      }
    48    }
    49  
    50    .modalFooter {
    51      display: flex;
    52      justify-content: flex-end;
    53      padding: 12px 10px;
    54      border-top: 1px solid var(--ps-ui-border);
    55      min-height: 40px;
    56    }
    57  }