Details | Last modification | View Log | RSS feed
| Rev | Author | Line No. | Line |
|---|---|---|---|
| 1 | espaco | 1 | /*** |
| 2 | Timeline 2 |
||
| 3 | ***/ |
||
| 4 | |||
| 5 | .mt-timeline-2 { |
||
| 6 | position: relative; |
||
| 7 | |||
| 8 | >.mt-timeline-line{ |
||
| 9 | position: absolute; |
||
| 10 | z-index: 1; |
||
| 11 | height:100%; |
||
| 12 | width:1px; |
||
| 13 | top:0; |
||
| 14 | left:50%; |
||
| 15 | border-left:4px solid; |
||
| 16 | transform:translateX(-2px); |
||
| 17 | } |
||
| 18 | |||
| 19 | >.mt-container{ |
||
| 20 | position: relative; |
||
| 21 | padding:0; |
||
| 22 | |||
| 23 | >.mt-item{ |
||
| 24 | list-style:none; |
||
| 25 | padding-bottom: 60px; |
||
| 26 | clear:both; |
||
| 27 | |||
| 28 | .timeline-body-img.pull-left{ |
||
| 29 | margin-right:15px; |
||
| 30 | } |
||
| 31 | |||
| 32 | >.mt-timeline-icon{ |
||
| 33 | width:70px; |
||
| 34 | height:70px; |
||
| 35 | background-color: #ccc; |
||
| 36 | border-radius: 50% !important; |
||
| 37 | position: absolute; |
||
| 38 | left: 50%; |
||
| 39 | transform:translateX(-50%); |
||
| 40 | z-index: 5; |
||
| 41 | border: 0; |
||
| 42 | overflow: hidden; |
||
| 43 | |||
| 44 | |||
| 45 | > i{ |
||
| 46 | top:50%; |
||
| 47 | left:50%; |
||
| 48 | transform:translateY(-50%) translateX(-50%); |
||
| 49 | font-size:24px; |
||
| 50 | } |
||
| 51 | |||
| 52 | >img{ |
||
| 53 | width: 100%; |
||
| 54 | height: auto; |
||
| 55 | } |
||
| 56 | } |
||
| 57 | |||
| 58 | >.mt-timeline-content{ |
||
| 59 | width:50%; |
||
| 60 | display:inline-block; |
||
| 61 | position: relative; |
||
| 62 | |||
| 63 | >.mt-content-container{ |
||
| 64 | text-align: left; |
||
| 65 | background-color: #f5f6fa; |
||
| 66 | padding:30px; |
||
| 67 | border:2px solid; |
||
| 68 | border-color:darken(#f5f6fa, 10%); |
||
| 69 | @include clearfix(); |
||
| 70 | |||
| 71 | .mt-author, |
||
| 72 | .mt-title{ |
||
| 73 | width:50%; |
||
| 74 | margin-bottom: 15px; |
||
| 75 | } |
||
| 76 | |||
| 77 | .mt-content-title { |
||
| 78 | @include opacity(0.8); |
||
| 79 | margin-top: 10px; |
||
| 80 | font-size: 18px; |
||
| 81 | font-weight: 600; |
||
| 82 | } |
||
| 83 | |||
| 84 | .mt-avatar{ |
||
| 85 | width:40px; |
||
| 86 | height: 40px; |
||
| 87 | border-radius: 50% !important; |
||
| 88 | overflow: hidden; |
||
| 89 | |||
| 90 | > img { |
||
| 91 | width:100%; |
||
| 92 | height:auto; |
||
| 93 | } |
||
| 94 | } |
||
| 95 | |||
| 96 | .mt-author-name, |
||
| 97 | .mt-author-name a{ |
||
| 98 | @include opacity(0.9); |
||
| 99 | font-size:15px; |
||
| 100 | font-weight:600; |
||
| 101 | text-decoration: none; |
||
| 102 | } |
||
| 103 | |||
| 104 | .mt-author-notes{ |
||
| 105 | font-size:12px; |
||
| 106 | } |
||
| 107 | |||
| 108 | .mt-content{ |
||
| 109 | padding-top:15px; |
||
| 110 | border-top:1px solid; |
||
| 111 | clear:both; |
||
| 112 | line-height: 1.7em; |
||
| 113 | |||
| 114 | > p { |
||
| 115 | @include opacity(0.7); |
||
| 116 | } |
||
| 117 | |||
| 118 | a, button { |
||
| 119 | font-size: 14px; |
||
| 120 | } |
||
| 121 | } |
||
| 122 | |||
| 123 | .btn{ |
||
| 124 | display:inline-block; |
||
| 125 | margin: 0 5px 10px 0; |
||
| 126 | } |
||
| 127 | |||
| 128 | .btn.pull-right{ |
||
| 129 | margin:0 0 10px 5px; |
||
| 130 | } |
||
| 131 | |||
| 132 | &:before{ |
||
| 133 | content: ''; |
||
| 134 | position: absolute; |
||
| 135 | top: 28px; |
||
| 136 | height: 0; |
||
| 137 | width: 0; |
||
| 138 | border: 10px solid transparent; |
||
| 139 | } |
||
| 140 | } |
||
| 141 | } |
||
| 142 | |||
| 143 | &:nth-child(odd){ // LEFT ALIGN |
||
| 144 | text-align: left; |
||
| 145 | >.mt-timeline-content{ |
||
| 146 | >.mt-content-container{ |
||
| 147 | margin-right:60px; |
||
| 148 | |||
| 149 | .mt-title{ |
||
| 150 | float:left; |
||
| 151 | } |
||
| 152 | |||
| 153 | .mt-author{ |
||
| 154 | float:right; |
||
| 155 | } |
||
| 156 | |||
| 157 | .mt-avatar{ |
||
| 158 | float: right; |
||
| 159 | margin-left:15px; |
||
| 160 | } |
||
| 161 | |||
| 162 | .mt-author-name, |
||
| 163 | .mt-author-notes{ |
||
| 164 | text-align: right; |
||
| 165 | } |
||
| 166 | |||
| 167 | &:before{ |
||
| 168 | right:40px; |
||
| 169 | border-left: 10px solid darken(#f5f6fa, 10%); |
||
| 170 | } |
||
| 171 | } |
||
| 172 | } |
||
| 173 | } |
||
| 174 | |||
| 175 | &:nth-child(even){ // RIGHT ALIGN |
||
| 176 | text-align: right; |
||
| 177 | |||
| 178 | >.mt-timeline-icon{ |
||
| 179 | > i{ |
||
| 180 | transform: translateY(-50%) translateX(50%); |
||
| 181 | left:-50%; |
||
| 182 | } |
||
| 183 | } |
||
| 184 | |||
| 185 | >.mt-timeline-content{ |
||
| 186 | >.mt-content-container{ |
||
| 187 | margin-left:60px; |
||
| 188 | |||
| 189 | .mt-avatar{ |
||
| 190 | float: left; |
||
| 191 | margin-right: 15px; |
||
| 192 | } |
||
| 193 | |||
| 194 | .mt-title{ |
||
| 195 | float:right; |
||
| 196 | text-align: right; |
||
| 197 | } |
||
| 198 | |||
| 199 | .mt-author{ |
||
| 200 | float:left; |
||
| 201 | } |
||
| 202 | |||
| 203 | .mt-author-name, |
||
| 204 | .mt-author-notes{ |
||
| 205 | text-align: left; |
||
| 206 | } |
||
| 207 | |||
| 208 | &:before{ |
||
| 209 | left:40px; |
||
| 210 | border-right: 10px solid #E9EDEF; |
||
| 211 | } |
||
| 212 | } |
||
| 213 | } |
||
| 214 | |||
| 215 | } |
||
| 216 | |||
| 217 | } |
||
| 218 | } |
||
| 219 | |||
| 220 | } |
||
| 221 | |||
| 222 | // Responsive |
||
| 223 | |||
| 224 | @media (max-width:$screen-sm-max){ /* 991px */ |
||
| 225 | |||
| 226 | .mt-timeline-2{ |
||
| 227 | >.mt-timeline-line{ |
||
| 228 | left:25px; |
||
| 229 | } |
||
| 230 | |||
| 231 | |||
| 232 | >.mt-container{ |
||
| 233 | |||
| 234 | >.mt-item{ |
||
| 235 | |||
| 236 | >.mt-timeline-icon{ |
||
| 237 | left:25px; |
||
| 238 | |||
| 239 | > i{ |
||
| 240 | left:0; |
||
| 241 | } |
||
| 242 | } |
||
| 243 | >.mt-timeline-content{ |
||
| 244 | width:100%; |
||
| 245 | |||
| 246 | >.mt-content-container{ |
||
| 247 | |||
| 248 | .mt-title{ |
||
| 249 | float:none; |
||
| 250 | text-align: left !important; |
||
| 251 | } |
||
| 252 | |||
| 253 | .mt-author, |
||
| 254 | .mt-title{ |
||
| 255 | width:100%; |
||
| 256 | } |
||
| 257 | } |
||
| 258 | |||
| 259 | } |
||
| 260 | |||
| 261 | &:nth-child(odd){ |
||
| 262 | text-align: right; |
||
| 263 | >.mt-timeline-content{ |
||
| 264 | >.mt-content-container{ |
||
| 265 | margin-left:80px; |
||
| 266 | margin-right: 0; |
||
| 267 | |||
| 268 | .mt-avatar{ |
||
| 269 | float: left; |
||
| 270 | margin-right: 15px; |
||
| 271 | } |
||
| 272 | |||
| 273 | .mt-title{ |
||
| 274 | float:right; |
||
| 275 | text-align: right; |
||
| 276 | } |
||
| 277 | |||
| 278 | .mt-author{ |
||
| 279 | float:left; |
||
| 280 | } |
||
| 281 | |||
| 282 | .mt-author-name, |
||
| 283 | .mt-author-notes{ |
||
| 284 | text-align: left; |
||
| 285 | } |
||
| 286 | |||
| 287 | &:before{ |
||
| 288 | left:70px; |
||
| 289 | border-right: 10px solid #E9EDEF; |
||
| 290 | border-left:none; |
||
| 291 | } |
||
| 292 | } |
||
| 293 | } |
||
| 294 | } |
||
| 295 | |||
| 296 | &:nth-child(even){ |
||
| 297 | >.mt-timeline-content{ |
||
| 298 | >.mt-content-container{ |
||
| 299 | margin-left:80px; |
||
| 300 | margin-right:0; |
||
| 301 | |||
| 302 | &:before{ |
||
| 303 | left:70px; |
||
| 304 | border-right: 10px solid #E9EDEF; |
||
| 305 | border-left:none; |
||
| 306 | } |
||
| 307 | } |
||
| 308 | } |
||
| 309 | } |
||
| 310 | |||
| 311 | |||
| 312 | } |
||
| 313 | } |
||
| 314 | |||
| 315 | |||
| 316 | |||
| 317 | } |
||
| 318 | |||
| 319 | } |
||
| 320 | |||
| 321 | @media (max-width: $screen-xs-min){ |
||
| 322 | .mt-timeline-2 { |
||
| 323 | .btn.pull-right, |
||
| 324 | .btn-group.pull-right{ |
||
| 325 | float:none !important; |
||
| 326 | margin: 0 5px 10px 0 !important; |
||
| 327 | } |
||
| 328 | } |
||
| 329 | } |
||
| 330 | |||
| 331 | @media (max-width: 400px){ |
||
| 332 | .mt-timeline-2 > .mt-container > .mt-item:nth-child(even) > .mt-timeline-content > .mt-content-container .mt-author-notes{ |
||
| 333 | clear:both; |
||
| 334 | padding-top:10px; |
||
| 335 | } |
||
| 336 | } |