github.com/replicatedhq/ship@v0.55.0/web/init/src/scss/components/shared/StepNumbers.scss (about)

     1  .steps-numbers-wrapper {
     2    padding: 12px 0 10px;
     3    background-color: #F8F8F8;
     4    border-bottom: 1px solid #DFDFDF;
     5    
     6    .numbers-wrapper {
     7      max-width: 760px;
     8      width: 100%;
     9      margin: 0 auto;
    10      position: relative;
    11  
    12      .progress-base {
    13        width: 100%;
    14        position: absolute;
    15        z-index: 1;
    16        background-color: #ffffff;
    17        height: 2px;
    18        top: 50%;
    19        margin-top: -1px;
    20      }
    21  
    22      .completed-progress-bar {
    23        position: absolute;
    24        height: 2px;
    25        background-color: #193B5B;
    26        top: 50%;
    27        margin-top: -1px;
    28        z-index: 2;
    29        transition: width .4s ease-in-out;
    30      }
    31    }
    32  }
    33  
    34  .navbar-steps .steps-numbers-wrapper {
    35    border-bottom: none;
    36    background-color: transparent;
    37  
    38    .progress-base {
    39      background-color: #dfdfdf;
    40    }
    41  }
    42  
    43  .step-number {
    44    color: #C4C8CA;
    45    font-weight: 500;
    46    font-size: 16px;
    47    position: relative;
    48    z-index: 3;
    49  
    50    .number {
    51      width: 30px;
    52      height: 30px;
    53      line-height: 30px;
    54      text-align: center;
    55      border-radius: 100%;
    56      background-color: #ffffff;
    57      box-shadow: 0 0 3px rgba(0,0,0,.16);
    58      transition: background-color .3s ease-in-out .4s, color .3s linear .4s;
    59    }
    60  
    61    &.is-active {
    62      color: #ffffff;
    63      font-weight: 700;
    64  
    65      .number {
    66        color: #ffffff;
    67        background-color: #337AB7;
    68      }
    69    }
    70  
    71    &.is-complete .number {
    72      background-color: #193B5B;
    73      transition: none;
    74    }
    75  }