github.com/zoomfoo/nomad@v0.8.5-0.20180907175415-f28fd3a1a056/ui/app/styles/components/page-layout.scss (about)

     1  .page-layout {
     2    min-height: 100%;
     3    display: flex;
     4    flex-direction: column;
     5  
     6    .page-header {
     7      position: fixed;
     8      width: 100%;
     9      z-index: $z-header;
    10  
    11      // Defensive styles in case header height goes over 100px, causing
    12      // the left gutter menu to be on top of the header.
    13      height: $header-height;
    14      overflow: hidden;
    15    }
    16  
    17    .page-body {
    18      display: flex;
    19      flex: 1;
    20      flex-direction: row;
    21      justify-content: space-between;
    22      margin-top: $header-height;
    23  
    24      .page-column {
    25        flex: 1;
    26  
    27        &.is-left {
    28          min-width: $gutter-width;
    29          max-width: $gutter-width;
    30          position: fixed;
    31          bottom: 0;
    32          top: $header-height;
    33          z-index: $z-gutter;
    34          background: $white;
    35        }
    36  
    37        &.is-right {
    38          margin-left: $gutter-width;
    39          overflow-x: auto;
    40        }
    41  
    42        @media #{$mq-hidden-gutter} {
    43          &.is-left {
    44            top: 0;
    45            transform: translateX(-$gutter-width);
    46            transition: transform ease-in-out 0.2s;
    47  
    48            &.is-open {
    49              transform: translateX(0);
    50            }
    51          }
    52  
    53          &.is-right {
    54            margin-left: 0;
    55          }
    56        }
    57      }
    58    }
    59  }