items.less 4.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337
  1. .enable_items() when(@enable-items = true) {
  2. .dialogs {
  3. padding:9px;
  4. position:relative;
  5. }
  6. .itemdiv {
  7. padding-right:3px;
  8. min-height:66px;
  9. position:relative;
  10. > .user {
  11. display:inline-block;
  12. width:42px;
  13. position:absolute;
  14. left:0;
  15. > img, > .img {
  16. border-radius:100%;
  17. border: 2px solid #5293C4;
  18. max-width: 40px;
  19. position: relative;
  20. }
  21. > .img {
  22. padding: 2px;
  23. }
  24. }
  25. > .body {
  26. width:auto;
  27. margin-left:50px;
  28. margin-right:12px;
  29. position:relative;
  30. > .time {
  31. display: block;
  32. font-size: @font-size-item-time;
  33. font-weight: bold;
  34. color: #666;
  35. position: absolute;
  36. right: 9px;
  37. top: 0;
  38. .@{icon} {
  39. font-size: @font-size-item-time-icon;
  40. font-weight: normal;
  41. }
  42. }// .body > .time
  43. > .name {
  44. display: block;
  45. color: #999;
  46. > b { color: #777; }
  47. }// .body > .name
  48. > .text {
  49. display: block;
  50. position: relative;
  51. margin-top: 2px;
  52. padding-bottom: 19px;
  53. padding-left: 7px;
  54. font-size: @font-size-item-text;
  55. &:after {
  56. display: block;
  57. content: "";
  58. height: 1px;
  59. font-size: 0;
  60. overflow: hidden;
  61. position: absolute;
  62. left: 16px;
  63. right: -12px;
  64. margin-top: 9px;
  65. border-top: 1px solid #E4ECF3;
  66. }
  67. //> [class*="icon-quote-"]:first-child {
  68. //quote icon
  69. > .@{icon}:first-child {
  70. color: #DCE3ED;
  71. margin-right: 4px;
  72. }
  73. }// .body > .text
  74. }
  75. &:last-child > .body > .text {
  76. border-bottom-width: 0;
  77. &:after {
  78. display: none;
  79. }
  80. }
  81. &.dialogdiv {
  82. padding-bottom: 14px;
  83. &:before {
  84. position: absolute;
  85. display: block;
  86. content: "";
  87. top: 0;
  88. bottom: 0;
  89. left: 19px;
  90. width: 3px;
  91. max-width: 3px;
  92. background-color: #E1E6ED;
  93. border: 1px solid #D7DBDD;
  94. border-width: 0 1px;
  95. }
  96. &:last-child {
  97. padding-bottom: 0;
  98. }
  99. &:last-child:before {
  100. display: none;
  101. }
  102. > .user > img {
  103. border-color: #C9D6E5;
  104. }
  105. > .body {
  106. border: 1px solid #DDE4ED;
  107. padding: 5px 8px 8px;
  108. border-left-width: 2px;
  109. margin-right: 1px;
  110. &:before{
  111. content: "";
  112. display: block;
  113. position: absolute;
  114. left: -7px;
  115. top: 11px;
  116. width: 8px;
  117. height: 8px;
  118. border: 2px solid #DDE4ED;
  119. border-width: 2px 0 0 2px;
  120. background-color: #FFF;
  121. .box-sizing(content-box);
  122. .rotate(-45deg);
  123. }
  124. > .time {
  125. position: static;
  126. float: right;
  127. }
  128. > .text {
  129. padding-left: 0;
  130. padding-bottom: 0;
  131. &:after {display: none;}
  132. }
  133. }
  134. .tooltip-inner {
  135. word-break: break-all;
  136. }
  137. }//end of .itemdiv.dialogdiv
  138. &.memberdiv {
  139. width: 175px;
  140. @media (min-width: @grid-float-breakpoint) {
  141. & { max-width: 50%; }
  142. }
  143. @media (max-width: @grid-float-breakpoint-max) {
  144. & { min-width: 33.333%; }
  145. }
  146. padding: 2px;
  147. margin: 3px 0;
  148. float: left;
  149. border-bottom: 1px solid #E8E8E8;
  150. > .user > img {
  151. border-color: #DCE3ED;
  152. }
  153. > .body {
  154. > .time {
  155. position: static;
  156. }
  157. > .name {
  158. line-height: 18px;
  159. height: 18px;
  160. margin-bottom: 0;
  161. > a {
  162. display: inline-block;
  163. max-width: 100px;
  164. max-height: 18px;
  165. overflow: hidden;
  166. text-overflow: ellipsis;
  167. word-break: break-all;
  168. }
  169. }
  170. }
  171. }//.itemdiv.memberdiv
  172. .tools {
  173. //width:20px;
  174. position: absolute;
  175. right: 5px;
  176. bottom: 10px;
  177. display: none;
  178. .btn {
  179. border-radius: 36px;
  180. margin: 1px 0;
  181. }
  182. }
  183. .body .tools {
  184. bottom: 4px;
  185. }
  186. &.commentdiv .tools {
  187. right: 9px;
  188. }
  189. &:hover .tools{
  190. display: inline-block;
  191. }
  192. }
  193. }
  194. .enable_items();
  195. //task list
  196. .item-list {
  197. margin:0;
  198. padding:0;
  199. list-style:none;
  200. > li {
  201. padding:9px;
  202. background-color:#FFF;
  203. margin-top:-1px;
  204. position:relative;
  205. &.selected {
  206. color:#8090A0;
  207. background-color:#F4F9FC;
  208. label , .lbl {
  209. text-decoration:line-through;
  210. color:#8090A0;
  211. }
  212. }
  213. > .checkbox {
  214. display:inline-block;
  215. }
  216. > label.inline {
  217. display:inline-block;
  218. }
  219. label {
  220. font-size: @base-font-size;
  221. }
  222. .percentage {
  223. font-size: @base-font-size - 2;
  224. font-weight: bold;
  225. color: #777;
  226. }
  227. &.ui-sortable-helper {
  228. cursor: move;
  229. }
  230. }
  231. }
  232. li[class*="item-"] {
  233. border:1px solid #DDD;
  234. border-left-width:3px;
  235. }
  236. .item-list-color(@color) {
  237. @item-class:~`"item-@{color}"`;
  238. @item-color:~`"item-list-@{color}-border"`;
  239. @item-cl:@@item-color;
  240. li.@{item-class} {
  241. border-left-color:@item-cl;
  242. }
  243. }
  244. .item-list-color(~'orange');
  245. .item-list-color(~'orange2');
  246. .item-list-color(~'red');
  247. .item-list-color(~'red2');
  248. .item-list-color(~'green');
  249. .item-list-color(~'green2');
  250. .item-list-color(~'blue');
  251. .item-list-color(~'blue2');
  252. .item-list-color(~'blue3');
  253. .item-list-color(~'pink');
  254. .item-list-color(~'purple');
  255. .item-list-color(~'black');
  256. .item-list-color(~'grey');
  257. .item-list-color(~'brown');
  258. .item-list-color(~'default');
  259. //when dragging
  260. .ui-sortable-placeholder , .ui-sortable-helper {
  261. & , & > a {
  262. cursor:move !important;
  263. }
  264. }
  265. @media only screen and (max-width: @screen-xs) {
  266. .itemdiv.memberdiv {
  267. float: none;
  268. width: auto;
  269. }
  270. }