github.com/grafana/pyroscope@v1.18.0/public/app/sass/components/daterangepicker.scss (about)

     1  @use '../variables' as *;
     2  @use '../mixins/outline' as *;
     3  
     4  // DatePicker Component styles
     5  @import '~react-datepicker/dist/react-datepicker.css';
     6  @import '~react-datepicker/dist/react-datepicker-cssmodules.css';
     7  
     8  .drp-button {
     9    white-space: nowrap;
    10    overflow: hidden;
    11    text-overflow: ellipsis;
    12  }
    13  
    14  .drp-label {
    15    margin-bottom: -10px;
    16  }
    17  
    18  .drp-container {
    19    position: relative;
    20    svg {
    21      margin-right: 5px;
    22    }
    23  
    24    .drp-dropdown {
    25      background-color: var(--ps-dropdown-background);
    26      display: none;
    27      position: absolute;
    28      top: 45px;
    29      right: 0px;
    30      width: 400px;
    31      padding: 20px 20px 20px 20px;
    32      border: 1px solid var(--ps-ui-border);
    33      box-shadow: 0px 10px 20px var(--ps-dropdown-shadow);
    34      border-radius: 4px;
    35  
    36      // so that's above any overlay
    37      z-index: 999;
    38    }
    39  
    40    h4:nth-child(1),
    41    h5:nth-child(1) {
    42      margin-top: 0;
    43    }
    44  
    45    h4,
    46    h5 {
    47      margin: 10px 0;
    48    }
    49  
    50    .drp-presets {
    51      display: flex;
    52      flex-direction: row;
    53  
    54      // cancel the padding from drp-container
    55      // so that it spams the whole row
    56      margin-left: -20px;
    57      margin-right: -20px;
    58  
    59      .drp-preset-column {
    60        flex: 1;
    61        display: flex;
    62        align-items: stretch;
    63        flex-direction: column;
    64      }
    65    }
    66  
    67    .drp-custom {
    68      margin-top: 20px;
    69    }
    70  
    71    .drp-preset {
    72      @include outline;
    73  
    74      border: none;
    75      text-align: left;
    76      padding: 2px 0;
    77      // compensates for the negative margin in .drp-presets
    78      padding-left: 20px;
    79      color: var(--ps-ui-foreground-text);
    80  
    81      // give some room between the text and the icon
    82      // https://web.dev/learn/css/logical-properties/#solving-the-icon-issue
    83      svg {
    84        margin-inline-start: 0.5em;
    85      }
    86  
    87      &:hover,
    88      &.active {
    89        color: var(--ps-neutral-2);
    90        background: var(--ps-ui-element-bg-highlight);
    91      }
    92  
    93      &:hover {
    94        cursor: pointer;
    95      }
    96    }
    97  
    98    &.opened {
    99      .drp-dropdown {
   100        display: block;
   101      }
   102    }
   103  
   104    .drp-calendar-input-group {
   105      margin-top: 15px;
   106      display: flex;
   107      flex-direction: row;
   108    }
   109  }
   110  
   111  // Custom Date Range block
   112  .drp-custom {
   113    // label should be on its own line
   114    label {
   115      display: block;
   116    }
   117  
   118    .until {
   119      margin-top: 10px;
   120    }
   121  
   122    // submit button
   123    button[type='submit'] {
   124      margin-top: 20px;
   125    }
   126  }
   127  
   128  // range picker custom styles
   129  .react-datepicker__day--in-range {
   130    background-color: var(--ps-blue-primary) !important;
   131    color: var(--ps-neutral-2) !important;
   132  }
   133  .react-datepicker__day--in-selecting-range {
   134    background: none;
   135    color: var(--ps-neutral-1);
   136  }
   137  .react-datepicker__day--in-range:hover {
   138    background-color: var(--ps-blue-primary);
   139    color: var(--ps-neutral-2);
   140  }
   141  
   142  .react-datepicker__day--disabled {
   143    background-color: transparent;
   144    color: var(--ps-ui-foreground-text);
   145  }
   146  
   147  .react-datepicker__day--in-selecting-range:hover {
   148    color: var(--ps-neutral-2);
   149  }