github.com/kyleu/dbaudit@v0.0.2-0.20240321155047-ff2f2c940496/client/src/style/menu.css (about)

     1  /* Content managed by Project Forge, see [projectforge.md] for details. */
     2  .menu-container {
     3    position: fixed;
     4    top: var(--nav-height);
     5    left: 0;
     6    width: var(--menu-width);
     7    min-width: var(--menu-width);
     8    height: calc(100% - var(--nav-height));
     9    overflow: auto;
    10    color: var(--color-menu-foreground);
    11    background-color: var(--color-menu-background);
    12    transition: transform 250ms ease-in-out;
    13  }
    14  
    15  @media (prefers-reduced-motion) {
    16    .menu-container {
    17      transition: none;
    18    }
    19  }
    20  
    21  @media (max-width: 800px) {
    22    .menu-container {
    23      transform: translateX(calc(-1 * var(--menu-width)));
    24      min-width: 0;
    25    }
    26  }
    27  
    28  .menu-container .menu {
    29    color: var(--color-menu-foreground);
    30    background-color: var(--color-menu-background);
    31    padding: var(--padding) 0 calc(var(--padding) * 2) 0;
    32  }
    33  
    34  .menu-container ul, .menu-container menu {
    35    margin: 0;
    36    list-style: none;
    37    padding: 0;
    38    overflow: hidden;
    39  }
    40  
    41  .menu-container li {
    42    white-space: nowrap;
    43  }
    44  
    45  .menu-container .item, .menu-container label {
    46    display: block;
    47    padding: 4px 0;
    48    user-select: none;
    49  }
    50  
    51  .menu-container .item {
    52    height: 28px;
    53    white-space: nowrap;
    54    overflow: hidden;
    55  }
    56  
    57  .menu-container .final {
    58    color: var(--color-menu-selected-foreground);
    59    background-color: var(--color-menu-selected-background);
    60  }
    61  
    62  .menu-container .separator {
    63    margin: var(--padding-small) 0;
    64    border-bottom: 1px solid var(--color-menu-selected-background);
    65  }
    66  
    67  .menu-container .label-link {
    68    float: right;
    69    margin-right: var(--padding);
    70    margin-top: 2px;
    71  }
    72  
    73  .menu-container .item svg {
    74    margin-left: 19px;
    75  }
    76  
    77  .menu-container a {
    78    color: var(--color-menu-foreground);
    79  }
    80  
    81  .menu-container label {
    82    cursor: pointer;
    83  }
    84  
    85  .menu-container .badge {
    86    float: right;
    87    margin-right: var(--padding-small);
    88    font-size: 75%;
    89    padding-top: 2px;
    90    color: var(--color-foreground-muted);
    91  }
    92  
    93  .level-0 .item, .level-0 label {
    94    padding-left: var(--menu-padding);
    95  }
    96  
    97  .level-1 .item, .level-1 label {
    98    padding-left: calc(var(--menu-padding) * 2);
    99  }
   100  
   101  .level-2 .item, .level-2 label {
   102    padding-left: calc(var(--menu-padding) * 3);
   103  }
   104  
   105  .level-3 .item, .level-3 label {
   106    padding-left: calc(var(--menu-padding) * 4);
   107  }
   108  
   109  .level-4 .label-item, .level-4 label {
   110    padding-left: calc(var(--menu-padding) * 5);
   111  }
   112  
   113  .level-5 .label-item, .level-5 label {
   114    padding-left: calc(var(--menu-padding) * 6);
   115  }
   116  
   117  .level-6 .label-item, .level-6 label {
   118    padding-left: calc(var(--menu-padding) * 7);
   119  }
   120  
   121  .level-7 .label-item, .level-7 label {
   122    padding-left: calc(var(--menu-padding) * 8);
   123  }
   124  
   125  .level-8 .label-item, .level-8 label {
   126    padding-left: calc(var(--menu-padding) * 8);
   127  }
   128  
   129  .menu-content {
   130    display: grid;
   131    grid-template-rows: 0fr;
   132    transition: grid-template-rows 200ms;
   133  }
   134  
   135  @media (prefers-reduced-motion) {
   136    .menu-content {
   137      transition: none;
   138    }
   139  }
   140  
   141  .menu-container input[type=checkbox]:checked + label + .menu-content {
   142    grid-template-rows: 1fr;
   143  }
   144  
   145  .menu-container input[type=checkbox]:checked + label .expand-collapse {
   146    transform: rotate(90deg);
   147  }