github.com/iqoqo/nomad@v0.11.3-0.20200911112621-d7021c74d101/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        left: 25%;
    15        height: 100%;
    16  
    17        stroke: $ui-gray-200;
    18        stroke-width: 3px;
    19        stroke-dasharray: 1, 7;
    20        stroke-dashoffset: 1;
    21        stroke-linecap: square;
    22      }
    23    }
    24  
    25    .lifecycle-phase {
    26      position: absolute;
    27      bottom: 0;
    28      top: 0;
    29  
    30      border-top: 2px solid transparent;
    31  
    32      .name {
    33        padding: 0.5rem 0.9rem;
    34        font-size: $size-7;
    35        font-weight: $weight-semibold;
    36        color: $ui-gray-500;
    37      }
    38  
    39      &.is-active {
    40        background: $white-bis;
    41        border-top: 2px solid $vagrant-blue;
    42  
    43        .name {
    44          color: $vagrant-blue;
    45        }
    46      }
    47  
    48      &.prestart {
    49        left: 0;
    50        right: 75%;
    51      }
    52  
    53      &.main {
    54        left: 25%;
    55        right: 0;
    56      }
    57    }
    58  
    59    .lifecycle-chart-rows {
    60      margin-top: 2.5em;
    61    }
    62  
    63    .lifecycle-chart-row {
    64      position: relative;
    65  
    66      .task {
    67        margin: 0.55em 0.9em;
    68        padding: 0.3em 0.55em;
    69        border: 1px solid $grey-blue;
    70        border-radius: $radius;
    71        background: white;
    72  
    73        .name {
    74          font-weight: $weight-semibold;
    75  
    76          a {
    77            color: inherit;
    78            text-decoration: none;
    79          }
    80        }
    81  
    82        &:hover {
    83          .name a {
    84            text-decoration: underline;
    85          }
    86        }
    87  
    88        .lifecycle {
    89          font-size: $size-7;
    90          color: $ui-gray-400;
    91        }
    92      }
    93  
    94      &.is-active {
    95        .task {
    96          border-color: $nomad-green;
    97          background: lighten($nomad-green, 50%);
    98  
    99          .lifecycle {
   100            color: $ui-gray-500;
   101          }
   102        }
   103      }
   104  
   105      &.is-finished {
   106        .task {
   107          color: $ui-gray-400;
   108        }
   109      }
   110  
   111      &.main {
   112        margin-left: 25%;
   113      }
   114  
   115      &.prestart {
   116        margin-right: 75%;
   117      }
   118  
   119      &:last-child .task {
   120        margin-bottom: 0.9em;
   121      }
   122    }
   123  }