github.com/hernad/nomad@v1.6.112/ui/app/styles/components/gutter.scss (about)

     1  /**
     2   * Copyright (c) HashiCorp, Inc.
     3   * SPDX-License-Identifier: MPL-2.0
     4   */
     5  
     6  .gutter {
     7    display: flex;
     8    flex-direction: column;
     9    height: 100%;
    10    border-right: 1px solid $grey-blue;
    11    overflow: hidden;
    12  
    13    .collapsed-only {
    14      display: none;
    15    }
    16  
    17    @media #{$mq-hidden-gutter} {
    18      border-right: none;
    19  
    20      &.is-open {
    21        box-shadow: 0 0 30px darken($nomad-green-darker, 20%);
    22      }
    23  
    24      .collapsed-only {
    25        display: inherit;
    26      }
    27    }
    28  
    29    .collapsed-menu {
    30      display: none;
    31      position: relative;
    32      height: 3.5rem;
    33      width: $gutter-width;
    34      transform: translateX($gutter-width);
    35      z-index: $z-gutter;
    36      transition: transform ease-in-out 0.2s;
    37  
    38      &.is-open {
    39        transform: translateX(0);
    40      }
    41  
    42      .gutter-toggle {
    43        fill: $grey-light;
    44      }
    45  
    46      .nomad-logo {
    47        fill: $grey-light;
    48      }
    49  
    50      .logo-container {
    51        display: flex;
    52        align-items: center;
    53        height: 100%;
    54        padding: 0.5rem 1rem;
    55        margin-left: 20px;
    56      }
    57  
    58      @media #{$mq-hidden-gutter} {
    59        display: block;
    60      }
    61    }
    62  
    63    .menu {
    64      z-index: $z-gutter;
    65    }
    66  
    67    .gutter-footer {
    68      text-align: center;
    69      border-top: 1px solid lighten($grey-blue, 10%);
    70      padding: 0.5em 0;
    71      margin-top: auto;
    72    }
    73  }
    74  
    75  // Treated as an element of the gutter component despite not being nested within
    76  // for z-index reasons.
    77  .gutter-backdrop {
    78    display: block;
    79    position: fixed;
    80    background: darken($nomad-green-darker, 10%);
    81    opacity: 0;
    82    width: calc(100vw + #{$gutter-width});
    83    height: 100vh;
    84    top: 0;
    85    left: 0;
    86    transform: translateY(-100%);
    87    transition: opacity ease-in-out 0.2s;
    88    z-index: $z-gutter-backdrop;
    89  
    90    @media #{$mq-hidden-gutter} {
    91      &.is-open {
    92        transform: translateY(0);
    93        opacity: 0.7;
    94      }
    95    }
    96  }