github.com/iqoqo/nomad@v0.11.3-0.20200911112621-d7021c74d101/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          width: calc(100% - #{$gutter-width});
    40          max-width: calc(100% - #{$gutter-width});
    41        }
    42  
    43        @media #{$mq-hidden-gutter} {
    44          &.is-left {
    45            top: 0;
    46            transform: translateX(-$gutter-width);
    47            transition: transform ease-in-out 0.2s;
    48  
    49            &.is-open {
    50              transform: translateX(0);
    51            }
    52          }
    53  
    54          &.is-right {
    55            margin-left: 0;
    56            width: 100%;
    57            max-width: 100%;
    58          }
    59        }
    60      }
    61    }
    62  }