github.com/Ilhicas/nomad@v1.0.4-0.20210304152020-e86851182bc3/ui/app/styles/components/lifecycle-chart.scss (about)

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