.enable_items() when(@enable-items = true) { .dialogs { padding:9px; position:relative; } .itemdiv { padding-right:3px; min-height:66px; position:relative; > .user { display:inline-block; width:42px; position:absolute; left:0; > img { border-radius:100%; border:2px solid #5293C4; max-width:40px; position:relative; } } > .body { width:auto; margin-left:50px; margin-right:12px; position:relative; > .time { display: block; font-size: @font-size-item-time; font-weight: bold; color: #666; position: absolute; right: 9px; top: 0; .@{icon} { font-size: @font-size-item-time-icon; font-weight: normal; } }// .body > .time > .name { display: block; color: #999; > b { color: #777; } }// .body > .name > .text { display: block; position: relative; margin-top: 2px; padding-bottom: 19px; padding-left: 7px; font-size: @font-size-item-text; &:after { display: block; content: ""; height: 1px; font-size: 0; overflow: hidden; position: absolute; left: 16px; right: -12px; margin-top: 9px; border-top: 1px solid #E4ECF3; } //> [class*="icon-quote-"]:first-child { //quote icon > .@{icon}:first-child { color: #DCE3ED; margin-right: 4px; } }// .body > .text } &:last-child > .body > .text { border-bottom-width: 0; &:after { display: none; } } &.dialogdiv { padding-bottom: 14px; &:before { position: absolute; display: block; content: ""; top: 0; bottom: 0; left: 19px; width: 3px; max-width: 3px; background-color: #E1E6ED; border: 1px solid #D7DBDD; border-width: 0 1px; } &:last-child { padding-bottom: 0; } &:last-child:before { display: none; } > .user > img { border-color: #C9D6E5; } > .body { border: 1px solid #DDE4ED; padding: 5px 8px 8px; border-left-width: 2px; margin-right: 1px; &:before{ content: ""; display: block; position: absolute; left: -7px; top: 11px; width: 8px; height: 8px; border: 2px solid #DDE4ED; border-width: 2px 0 0 2px; background-color: #FFF; .box-sizing(content-box); .rotate(-45deg); } > .time { position: static; float: right; } > .text { padding-left: 0; padding-bottom: 0; &:after {display: none;} } } .tooltip-inner { word-break: break-all; } }//end of .itemdiv.dialogdiv &.memberdiv { width: 175px; @media (min-width: @grid-float-breakpoint) { & { max-width: 50%; } } @media (max-width: @grid-float-breakpoint-max) { & { min-width: 33.333%; } } padding: 2px; margin: 3px 0; float: left; border-bottom: 1px solid #E8E8E8; > .user > img { border-color: #DCE3ED; } > .body { > .time { position: static; } > .name { line-height: 18px; height: 18px; margin-bottom: 0; > a { display: inline-block; max-width: 100px; max-height: 18px; overflow: hidden; text-overflow: ellipsis; word-break: break-all; } } } }//.itemdiv.memberdiv .tools { //width:20px; position: absolute; right: 5px; bottom: 10px; display: none; .btn { border-radius: 36px; margin: 1px 0; } } .body .tools { bottom: 4px; } &.commentdiv .tools { right: 9px; } &:hover .tools{ display: inline-block; } } } .enable_items(); //task list .item-list { margin:0; padding:0; list-style:none; > li { padding:9px; background-color:#FFF; margin-top:-1px; position:relative; &.selected { color:#8090A0; background-color:#F4F9FC; label , .lbl { text-decoration:line-through; color:#8090A0; } } > .checkbox { display:inline-block; } > label.inline { display:inline-block; } label { font-size: @baseFontSize; } .percentage { font-size: @baseFontSize - 2; font-weight: bold; color: #777; } &.ui-sortable-helper { cursor: move; } } } li[class*="item-"] { border:1px solid #DDD; border-left-width:3px; } .item-list-color(@color) { @item-class:~`"item-@{color}"`; @item-color:~`"item-list-@{color}-border"`; @item-cl:@@item-color; li.@{item-class} { border-left-color:@item-cl; } } .item-list-color(~'orange'); .item-list-color(~'orange2'); .item-list-color(~'red'); .item-list-color(~'red2'); .item-list-color(~'green'); .item-list-color(~'green2'); .item-list-color(~'blue'); .item-list-color(~'blue2'); .item-list-color(~'blue3'); .item-list-color(~'pink'); .item-list-color(~'purple'); .item-list-color(~'black'); .item-list-color(~'grey'); .item-list-color(~'brown'); .item-list-color(~'default'); //when dragging .ui-sortable-placeholder , .ui-sortable-helper { & , & > a { cursor:move !important; } } @media only screen and (max-width: @screen-xs) { .itemdiv.memberdiv { float: none; width: auto; } }