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

     1  /**
     2   * Copyright (c) HashiCorp, Inc.
     3   * SPDX-License-Identifier: MPL-2.0
     4   */
     5  
     6  .lifecycle-chart {
     7    padding-top: 2rem;
     8    position: relative;
     9  
    10    .lifecycle-phases {
    11      position: absolute;
    12      top: 1.5em;
    13      bottom: 1.5em;
    14      right: 1.5em;
    15      left: 1.5em;
    16  
    17      .divider {
    18        position: absolute;
    19        height: 100%;
    20  
    21        stroke: $ui-gray-200;
    22        stroke-width: 3px;
    23        stroke-dasharray: 1, 7;
    24        stroke-dashoffset: 1;
    25        stroke-linecap: square;
    26  
    27        &.prestart {
    28          left: 25%;
    29        }
    30  
    31        &.poststop {
    32          left: 75%;
    33        }
    34      }
    35    }
    36  
    37    .lifecycle-phase {
    38      position: absolute;
    39      bottom: 0;
    40      top: 0;
    41  
    42      border-top: 2px solid transparent;
    43  
    44      .name {
    45        padding: 0.5rem 0.9rem;
    46        font-size: $size-7;
    47        font-weight: $weight-semibold;
    48        color: $ui-gray-500;
    49      }
    50  
    51      &.is-active {
    52        background: $white-bis;
    53        border-top: 2px solid $vagrant-blue;
    54  
    55        .name {
    56          color: $vagrant-blue;
    57        }
    58      }
    59  
    60      &.prestart {
    61        left: 0;
    62        right: 75%;
    63      }
    64  
    65      &.main {
    66        left: 25%;
    67        right: 25%;
    68      }
    69  
    70      &.poststart {
    71        left: 35%;
    72        right: 25%;
    73      }
    74  
    75      &.poststop {
    76        left: 75%;
    77        right: 0;
    78      }
    79    }
    80  
    81    .lifecycle-chart-rows {
    82      margin-top: 2.5em;
    83    }
    84  
    85    .lifecycle-chart-row {
    86      position: relative;
    87  
    88      .task {
    89        margin: 0.55em 0.9em;
    90        padding: 0.3em 0.55em;
    91        border: 1px solid $grey-blue;
    92        border-radius: $radius;
    93        background: white;
    94  
    95        .name {
    96          font-weight: $weight-semibold;
    97  
    98          a {
    99            color: inherit;
   100            text-decoration: none;
   101          }
   102        }
   103  
   104        &:hover {
   105          .name a {
   106            text-decoration: underline;
   107          }
   108        }
   109  
   110        .lifecycle {
   111          font-size: $size-7;
   112          color: $ui-gray-400;
   113        }
   114      }
   115  
   116      &.is-active {
   117        .task {
   118          border-color: $nomad-green;
   119          background: lighten($nomad-green, 50%);
   120  
   121          .lifecycle {
   122            color: $ui-gray-500;
   123          }
   124        }
   125      }
   126  
   127      &.is-finished {
   128        .task {
   129          color: $ui-gray-400;
   130        }
   131      }
   132  
   133      &.main {
   134        margin-left: 25%;
   135        margin-right: 25%;
   136      }
   137  
   138      &.prestart-ephemeral {
   139        margin-right: 75%;
   140      }
   141  
   142      &.prestart-sidecar {
   143        margin-right: 25%;
   144      }
   145  
   146      &.poststart-ephemeral,
   147      &.poststart-sidecar {
   148        margin-left: 35%;
   149      }
   150  
   151      &.poststart-sidecar {
   152        margin-right: 25%;
   153      }
   154  
   155      &.poststart-ephemeral {
   156        margin-right: 35%;
   157      }
   158  
   159      &.poststop {
   160        margin-left: 75%;
   161      }
   162  
   163      &:last-child .task {
   164        margin-bottom: 0.9em;
   165      }
   166    }
   167  }