github.com/ferranbt/nomad@v0.9.3-0.20190607002617-85c449b7667c/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        }
    40  
    41        @media #{$mq-hidden-gutter} {
    42          &.is-left {
    43            top: 0;
    44            transform: translateX(-$gutter-width);
    45            transition: transform ease-in-out 0.2s;
    46  
    47            &.is-open {
    48              transform: translateX(0);
    49            }
    50          }
    51  
    52          &.is-right {
    53            margin-left: 0;
    54          }
    55        }
    56      }
    57    }
    58  }