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 }