/** * Timeline classes * * @author splitfire - http://splitfire.fr * @version 1.0 * * @ref http://jsfiddle.net/necolas/vhZds/ * * Module qui liste l'ensemble des actions réalisées par les utilisateurs. * */ //var $size : 35px; $space: 50px; $sizeImg: 64px; //Container principale .time_content { text-align:center; padding :20px 0 0 20px; } //Container limiter en hauteur //Container qui dessine le border .time { display:inline-block; position:relative; text-align:left; &:before { content: ""; position: absolute; top: 0; left: 0; width: 1px; top: -20px; bottom: -20px; //background: rgba(0,0,0,0.1); @include background-color-rgba($color : #000, $opacity : .1); } } //container d'un event .time--line { position:relative; margin: 0 0 $space $space; //style de l'icon &:before { @extend %icon-style; position: absolute; width: $fontSize + $size; height: $fontSize + $size; line-height : $fontSize + $size; color: $toolbarActionColor; text-align:center; //@include px2em($px : $fontSize + ($size/2), $base-font-size: $base-font-size, $em : true, $rem: true, $percent: false, $property : font-size) ; @include rem(( font-size: $fontSize + ($size /2) )); top: 0; left: - $space - (($fontSize + $size)/2) ; border: 1px solid rgba(0,0,0,0.1); border-radius:50%; background-color: #fff; @include opacity(1); } //parsing des differentes configuration des icons @each $event in $event-config { $eventClass :nth($event,2); $eventIcon : nth($event,3); @include add-icon($eventClass, $eventIcon); } //style du caret &:after { position: absolute; content:""; width: 9px; height: 9px; top:15px; left:-5px; background-color: #fff; border-color: rgba(0,0,0,0.1); border-style: solid; border-width: 0 0 1px 1px; transform : rotate(45deg); } //container d'information d'un event & .time--line_content { min-height:$sizeImg; padding: 10px; border: 1px solid rgba(0,0,0,0.1); border-radius: 5px; background: #fff; @extend %clearfloat; } //container de l'avatar & .time--line_img { float:left; width: 15%; height:$sizeImg; line-height:$sizeImg; padding:0 10px 0 0; box-sizing : border-box; & > img { width: 100%; max-width: $sizeImg; max-height:$sizeImg; vertical-align:middle; } @include mq($to: phone) {width: 100%;} } //container des infos d'un event & .time--line_info { float:left; width: 85%; min-height:$sizeImg; line-height:$sizeImg; @include mq($to : phone){width: 100%; margin-top: 10px;} & > * { display:block; @extend %clearfloat; min-height: ($sizeImg/2); line-height:($sizeImg/2); } & > span { line-height: normal; word-wrap: break-word; } } }