github.com/Ilhicas/nomad@v1.0.4-0.20210304152020-e86851182bc3/ui/app/styles/components/gutter.scss (about)

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