github.com/anth0d/nomad@v0.0.0-20221214183521-ae3a0a2cad06/ui/app/styles/components/sidebar.scss (about)

     1  $topNavOffset: 112px;
     2  $subNavOffset: 49px;
     3  
     4  .sidebar {
     5    position: fixed;
     6    background: #ffffff;
     7    width: 750px;
     8    padding: 24px;
     9    right: 0%;
    10    overflow-y: auto;
    11    bottom: 0;
    12    top: $topNavOffset;
    13    transform: translateX(100%);
    14    transition-duration: 150ms;
    15    transition-timing-function: ease;
    16    z-index: $z-modal;
    17    &.open {
    18      transform: translateX(0%);
    19      box-shadow: 6px 6px rgba(0, 0, 0, 0.06), 0px 12px 16px rgba(0, 0, 0, 0.2);
    20    }
    21    &.has-subnav {
    22      top: calc($topNavOffset + $subNavOffset);
    23    }
    24  }
    25  
    26  .sidebar-content {
    27    position: relative;
    28    display: inline-flex;
    29  }
    30  
    31  .error-header {
    32    display: flex;
    33    justify-content: flex-end;
    34  }
    35  
    36  .detail-header {
    37    display: flex;
    38    justify-content: space-between;
    39  }
    40  
    41  .related-evaluations {
    42    overflow-x: scroll;
    43    overflow-y: hidden;
    44  }
    45  
    46  .evaluation-actors {
    47    display: flex;
    48    flex-direction: column;
    49    justify-content: space-evenly;
    50    flex-basis: 100%;
    51  }
    52  
    53  .actor {
    54    margin: 24px;
    55    outline: 1px solid #d9dee6;
    56    padding: 10px;
    57    width: 100px;
    58  }
    59  
    60  .task-context-sidebar {
    61    header {
    62      display: grid;
    63      justify-content: left;
    64      grid-template-columns: 1fr auto auto;
    65      gap: 2rem;
    66      border-bottom: 1px solid $grey-blue;
    67      padding-bottom: 1rem;
    68      margin-bottom: 24px;
    69      height: 50px;
    70  
    71      .title {
    72        margin-bottom: unset;
    73      }
    74  
    75      .link {
    76        align-self: center;
    77      }
    78  
    79      .state {
    80        font-size: 1rem;
    81        font-weight: normal;
    82        margin-left: 1rem;
    83        text-transform: capitalize;
    84  
    85        &:before {
    86          content: '';
    87          display: inline-block;
    88          height: 1rem;
    89          width: 1rem;
    90          margin-right: 5px;
    91          border-radius: 4px;
    92          position: relative;
    93          top: 2px;
    94        }
    95  
    96        &.running:before {
    97          background-color: $green;
    98        }
    99        &.dead:before {
   100          background-color: $red;
   101        }
   102        &.pending:before {
   103          background-color: $grey-lighter;
   104        }
   105      }
   106    }
   107  
   108    // Instead of trying to calculate on the fly with JS, let's use vh and offset nav and headers above.
   109    // We can make this a LOT more streamlined when CSS Container Queries are available.
   110    $sidebarTopOffset: 161px;
   111    $sidebarInnerPadding: 48px;
   112    $sidebarHeaderOffset: 74px;
   113    $cliHeaderOffset: 54.5px;
   114    .cli-window {
   115      height: calc(
   116        100vh - $sidebarTopOffset - $sidebarInnerPadding - $sidebarHeaderOffset -
   117          $cliHeaderOffset
   118      );
   119    }
   120  }