github.com/outbrain/consul@v1.4.5/website/source/assets/stylesheets/consul-connect/components/_timeline.scss (about)

     1  // TODO - handle situations where title or sub-heading are breaking to next line
     2  
     3  .g-timeline {
     4    align-content: space-between;
     5    display: flex;
     6    flex-direction: column;
     7    justify-content: center;
     8    margin: 0 (-$site-gutter-padding);
     9  
    10    @media (min-width: 768px) {
    11      flex-direction: row;
    12      text-align: center;
    13    }
    14  
    15    &.no-intro {
    16      margin-top: -30px;
    17  
    18      @media (min-width: 768px) {
    19        margin-top: -90px;
    20      }
    21  
    22      @media (min-width: 992px) {
    23        margin-top: -116px;
    24      }
    25    }
    26  
    27    & > div {
    28      margin-left: 18px;
    29      padding: 40px $site-gutter-padding 0 42px;
    30      position: relative;
    31  
    32      @media (min-width: 768px) {
    33        margin-left: 0;
    34        padding-left: $site-gutter-padding;
    35        width: 50%;
    36      }
    37  
    38      &:last-child {
    39        .dot {
    40          border-color: #ca2171;
    41        }
    42      }
    43  
    44      .line {
    45        background-image: linear-gradient(180deg, #d2d4dc 50%, #c82070 100%);
    46        height: calc(100% - 12px);
    47        left: 8px;
    48        position: absolute;
    49        top: 45px;
    50        width: 2px;
    51  
    52        @media (min-width: 768px) {
    53          background-image: linear-gradient(
    54            90deg,
    55            rgba(229, 230, 235, 0),
    56            #d2d4dc 0%,
    57            #c82070 100%
    58          );
    59          height: 2px;
    60          left: 50%;
    61          top: 8px;
    62          width: calc(100% - 34px);
    63        }
    64  
    65        &:first-child {
    66          background-image: linear-gradient(
    67            180deg,
    68            rgba(229, 230, 235, 0) 5%,
    69            #dadce3 70%,
    70            #d2d4dc 100%
    71          );
    72          bottom: calc(100% - 45px);
    73          height: 60px;
    74          top: auto;
    75  
    76          @media (min-width: 768px) {
    77            background-image: linear-gradient(
    78              90deg,
    79              rgba(229, 230, 235, 0) 5%,
    80              #dadce3 26%,
    81              #d2d4dc 100%
    82            );
    83            height: 2px;
    84            left: auto;
    85            right: 50%;
    86            top: 8px;
    87            width: calc(50% + 120px);
    88          }
    89        }
    90  
    91        svg {
    92          position: absolute;
    93          top: calc(100% - 8px);
    94          transform: rotate(90deg);
    95          left: -4px;
    96  
    97          @media (min-width: 768px) {
    98            left: auto;
    99            right: -10px;
   100            top: -6px;
   101            transform: none;
   102          }
   103        }
   104      }
   105  
   106      h3 {
   107        margin: 0 0 8px;
   108      }
   109  
   110      .sub-heading {
   111        display: block;
   112        font-size: 1.6rem;
   113        margin-bottom: 24px;
   114  
   115        @media (min-width: 992px) {
   116          font-size: 1.8rem;
   117          margin-bottom: 40px;
   118        }
   119      }
   120  
   121      .dot {
   122        background: #f7f8fa;
   123        border: 2px solid #d2d4dc;
   124        border-radius: 50%;
   125        display: inline-block;
   126        height: 18px;
   127        left: 0;
   128        position: absolute;
   129        top: 45px;
   130        width: 18px;
   131        z-index: 1;
   132  
   133        @media (min-width: 768px) {
   134          margin: 0 0 0 -9px;
   135          left: 50%;
   136          top: 0;
   137        }
   138      }
   139  
   140      img {
   141        display: block;
   142        margin: 0 auto;
   143        max-width: 100%;
   144      }
   145  
   146      p {
   147        font-size: 1.6rem;
   148        margin-top: 40px;
   149      }
   150    }
   151  }