.timeline { list-style: none; padding: 20px 0 20px; position: relative; &:before { top: 0; bottom: 0; position: absolute; content: " "; width: 3px; background-color: #eeeeee; margin-left: 29px; } .timeline-entry { position: relative; margin-top: 5px; margin-left: 30px; margin-bottom: 10px; clear: both; &:target { .timeline-entry-inner .timeline-content { -webkit-animation:target-note 2s linear; background: $hover; } } .timeline-entry-inner { position: relative; margin-left: -20px; &:before, &:after { content: " "; display: table; } .timeline-icon { margin-top: 2px; background: #fff; color: #737881; float: left; @include border-radius(40px); @include box-shadow(0 0 0 3px #EEE); overflow: hidden; .avatar { margin: 0; padding: 0; } } .timeline-content { position: relative; background: #f5f5f6; padding: 10px 15px; margin-left: 60px; img { max-width: 100%; } &:after { content: ''; display: block; position: absolute; width: 0; height: 0; border-style: solid; border-width: 9px 9px 9px 0; border-color: transparent #f5f5f6 transparent transparent; left: 0; top: 10px; margin-left: -9px; } } } } .system-note .timeline-entry-inner { .timeline-icon { background: none; margin-left: 12px; margin-top: 0; @include box-shadow(none); span { margin: 0 2px; font-size: 16px; color: #eeeeee; } } .timeline-content { background: none; margin-left: 45px; padding: 0px 15px; &:after { border: 0; } .note-header { span { font-size: 12px; } .avatar { margin-right: 5px; } } .note-text { font-size: 12px; margin-left: 20px; } } } } @media (max-width: $screen-xs-max) { .timeline { &:before { background: none; } .timeline-entry .timeline-entry-inner { .timeline-icon { display: none; } .timeline-content { margin-left: 0; } } } }