github.com/hernad/nomad@v1.6.112/ui/app/styles/components/page-layout.scss (about)

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