github.com/iqoqo/nomad@v0.11.3-0.20200911112621-d7021c74d101/ui/app/styles/components/gutter.scss (about)

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