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

     1  /**
     2   * Copyright (c) HashiCorp, Inc.
     3   * SPDX-License-Identifier: MPL-2.0
     4   */
     5  
     6  $topNavOffset: 112px;
     7  $subNavOffset: 49px;
     8  
     9  .sidebar {
    10    position: fixed;
    11    background: #ffffff;
    12    width: 750px;
    13    padding: 24px;
    14    right: 0%;
    15    overflow: visible;
    16    bottom: 0;
    17    top: $topNavOffset;
    18    transform: translateX(100%);
    19    transition-duration: 150ms;
    20    transition-timing-function: ease;
    21    z-index: $z-modal;
    22    &.open {
    23      transform: translateX(0%);
    24      box-shadow: 6px 6px rgba(0, 0, 0, 0.06), 0px 12px 16px rgba(0, 0, 0, 0.2);
    25    }
    26    &.has-subnav {
    27      top: calc($topNavOffset + $subNavOffset);
    28    }
    29  
    30    &.wide {
    31      width: calc(100vw - $gutter-width - 1rem);
    32    }
    33  
    34    .button.widener {
    35      position: absolute;
    36      left: 0;
    37      top: calc(50% - 16px);
    38      width: 32px;
    39      height: 32px;
    40      left: -16px;
    41      box-shadow: -5px 0 10px -5px rgb(0 0 0 / 20%);
    42      border-radius: 16px;
    43    }
    44  
    45    &.evaluations-sidebar {
    46      display: flex;
    47      gap: 1.5rem;
    48      flex-direction: column;
    49  
    50      & > .evaluation-response {
    51        display: grid;
    52        min-height: 200px;
    53        grid-template-rows: auto 1fr;
    54        overflow: hidden;
    55        & > .boxed-section-body {
    56          overflow: auto;
    57        }
    58      }
    59      & > div,
    60      h1.title {
    61        margin: 0;
    62      }
    63    }
    64  }
    65  
    66  .sidebar-content {
    67    position: relative;
    68    display: inline-flex;
    69  }
    70  
    71  .error-header {
    72    display: flex;
    73    justify-content: flex-end;
    74  }
    75  
    76  .detail-header {
    77    display: flex;
    78    justify-content: space-between;
    79  }
    80  
    81  .related-evaluations {
    82    overflow-x: scroll;
    83    overflow-y: hidden;
    84  }
    85  
    86  .evaluation-actors {
    87    display: flex;
    88    flex-direction: column;
    89    justify-content: space-evenly;
    90    flex-basis: 100%;
    91  }
    92  
    93  .actor {
    94    margin: 24px;
    95    outline: 1px solid #d9dee6;
    96    padding: 10px;
    97    width: 100px;
    98  }
    99  
   100  .task-context-sidebar {
   101    display: grid;
   102    gap: 1rem;
   103    grid-template-rows: auto 1fr;
   104  
   105    &.has-events {
   106      grid-template-rows: auto minmax(auto, 25%) 1fr;
   107    }
   108    header {
   109      display: grid;
   110      justify-content: left;
   111      grid-template-columns: 1fr auto auto;
   112      gap: 2rem;
   113      border-bottom: 1px solid $grey-blue;
   114      padding-bottom: 1rem;
   115      margin-bottom: 24px;
   116      height: 50px;
   117  
   118      .title {
   119        margin-bottom: unset;
   120      }
   121  
   122      .link {
   123        align-self: center;
   124      }
   125  
   126      .state {
   127        font-size: 1rem;
   128        font-weight: normal;
   129        margin-left: 1rem;
   130        text-transform: capitalize;
   131  
   132        &:before {
   133          content: '';
   134          display: inline-block;
   135          height: 1rem;
   136          width: 1rem;
   137          margin-right: 5px;
   138          border-radius: 4px;
   139          position: relative;
   140          top: 2px;
   141        }
   142  
   143        &.running:before {
   144          background-color: $green;
   145        }
   146        &.dead:before {
   147          background-color: $red;
   148        }
   149        &.pending:before {
   150          background-color: $grey-lighter;
   151        }
   152      }
   153    }
   154  
   155    & > .task-events,
   156    & > .task-log {
   157      overflow: hidden;
   158    }
   159  
   160    .task-events,
   161    .task-log {
   162      display: grid;
   163      grid-template-rows: auto 1fr;
   164      .boxed-section-body {
   165        overflow: auto;
   166      }
   167      .notification {
   168        grid-row: -1;
   169      }
   170    }
   171  
   172    .cli-window {
   173      height: 100%;
   174    }
   175  }