[Summary view] [Print] [Text view]

   1  /**
   2   * @provides phui-object-item-list-view-css
   3   */
   4  
   5  .phui-object-item-list-view {
   6    padding: 8px 6px;
   7  }
   8  
   9  .device-desktop .phui-object-item-list-view {
  10    padding: 16px;
  11  }
  12  
  13  .phui-object-item-list-view + .phui-object-item-list-view {
  14    padding-top: 0;
  15  }
  16  
  17  .phui-object-item-list-view.phui-object-list-flush {
  18    padding: 0;
  19  }
  20  
  21  .phui-object-box .phui-object-item-list-view.phui-object-list-flush {
  22    padding: 8px 12px 4px 12px;
  23    background-color: #E5E8EE;
  24  }
  25  
  26  .device-phone .phui-object-box
  27    .phui-object-item-list-view.phui-object-list-flush {
  28    padding: 4px;
  29  }
  30  
  31  .phui-object-item-list-view .aphront-error-view {
  32    margin: 4px 0 8px 0;
  33    color: {$greytext};
  34  }
  35  
  36  .phui-object-item {
  37    border-style: solid;
  38    border-color: {$lightgreyborder};
  39    margin: 5px 0;
  40    overflow: hidden;
  41    border-radius: 3px;
  42    border-left-width: 6px;
  43    background: #fff;
  44    margin-bottom: 4px;
  45  }
  46  
  47  .phui-object-item .phui-icon-view {
  48    display: inline-block;
  49  }
  50  
  51  .phui-object-item-frame {
  52    border-style: solid;
  53    border-color: {$lightgreyborder};
  54    border-width: 1px 1px 1px 0;
  55    position: relative;
  56    min-height: 29px;
  57    overflow: hidden;
  58    border-bottom-right-radius: 3px;
  59    border-top-right-radius: 3px;
  60  }
  61  
  62  .device-desktop .phui-object-item {
  63    margin: 0 0 4px 0;
  64  }
  65  
  66  .phui-object-item-name {
  67    display: inline-block;
  68    font-weight: bold;
  69    padding: 6px 8px 0;
  70    white-space: nowrap;
  71  }
  72  
  73  .phui-object-item-link {
  74    display: inline-block;
  75  }
  76  
  77  .phui-object-item-objname {
  78    color: {$darkgreytext};
  79    cursor: text;
  80  }
  81  
  82  .phui-object-item-content {
  83    margin-top: 4px;
  84    overflow: hidden;
  85  }
  86  
  87  .phui-object-item-grippable {
  88    cursor: move;
  89  }
  90  
  91  .phui-object-item-grip {
  92    position: absolute;
  93    top: 0;
  94    bottom: 0;
  95    left: 0;
  96    width: 17px;
  97    background: url('/rsrc/image/texture/grip.png') center center no-repeat;
  98  }
  99  
 100  .phui-object-item-grippable .phui-object-item-frame {
 101    padding-left: 11px;
 102  }
 103  
 104  .phui-object-item-list-header {
 105    padding: 0 0 8px 0;
 106    color: {$darkgreytext};
 107  }
 108  
 109  /* - Item Actions --------------------------------------------------------------
 110  
 111    Action buttons, like "Edit" and "Delete".
 112  
 113  */
 114  
 115  .phui-object-item-actions {
 116    position: absolute;
 117    right: 0;
 118    top: 0;
 119    bottom: 0;
 120    vertical-align: middle;
 121    text-align: right;
 122    border-left: 1px solid {$lightgreyborder};
 123  }
 124  
 125  .phui-object-item-actions .phui-list-item-view {
 126    float: right;
 127    height: 100%;
 128    width: 24px;
 129    display: inline-block;
 130    position: relative;
 131  }
 132  
 133  .phui-object-item-actions .phui-list-item-view +
 134  .phui-list-item-view {
 135    border-right: 1px solid #d6d6e9;
 136  }
 137  
 138  .phui-object-item-actions .phui-list-item-href {
 139    display: inline-block;
 140    position: relative;
 141    width: 24px;
 142    height: 100%;
 143  }
 144  
 145  .phui-object-item-actions .phui-list-item-href:hover {
 146    background: {$hoverblue};
 147  }
 148  
 149  .phui-object-item-actions .phui-list-item-icon {
 150    width: 14px;
 151    height: 14px;
 152    position: absolute;
 153    display: block;
 154    top: 50%;
 155    margin-top: -7px;
 156    left: 3px;
 157  }
 158  
 159  .phui-object-item-actions .phui-list-item-name {
 160    display: none;
 161  }
 162  
 163  .phui-object-item-with-1-actions .phui-object-item-content-box {
 164    margin-right: 24px;
 165    overflow: hidden;
 166  }
 167  
 168  .phui-object-item-with-2-actions .phui-object-item-content-box {
 169    margin-right: 48px;
 170    overflow: hidden;
 171  }
 172  
 173  .phui-object-item-with-3-actions .phui-object-item-content-box {
 174    margin-right: 72px;
 175    overflow: hidden;
 176  }
 177  
 178  
 179  /* - Stackable List ------------------------------------------------------------
 180  
 181    Tighter, stacking list.
 182  
 183  */
 184  
 185  .phui-object-item-list-view.phui-object-list-stackable
 186    .phui-object-item {
 187    margin: -1px 0 0 0;
 188    border-radius: 0;
 189    border-left-width: 1px;
 190    background: #fff;
 191  }
 192  
 193  .phui-object-list-stackable .phui-object-item-frame {
 194    border-radius: 0;
 195  }
 196  
 197  .phui-object-list-stackable .phui-object-item {
 198  }
 199  
 200  .phui-object-box .phui-object-list-stackable {
 201    padding: 0;
 202  }
 203  
 204  .phui-object-box .phui-object-list-stackable .phui-object-item {
 205    border: none;
 206  }
 207  
 208  .phui-object-box .phui-object-list-stackable .phui-object-item-frame {
 209    border-right: none;
 210  }
 211  
 212  .phui-object-box .phui-object-list-stackable:last-child .phui-object-item-frame {
 213    border-bottom: none;
 214  }
 215  
 216  
 217  /* - Subhead -------------------------------------------------------------------
 218  
 219    Descriptive Text or Links under the main header, before attributes.
 220  
 221  */
 222  
 223  .phui-object-item-subhead {
 224    color: {$greytext};
 225    padding: 0 8px 6px;
 226  }
 227  
 228  
 229  /* - Attribute List ------------------------------------------------------------
 230  
 231    Object attributes, commonly used to render created date, etc.
 232  
 233  */
 234  
 235  .phui-object-item-attributes {
 236    padding: 0 8px 6px;
 237  }
 238  
 239  .phui-object-item-attribute {
 240    display: inline;
 241    color: {$greytext};
 242  }
 243  
 244  .phui-object-item-attribute-spacer {
 245    padding: 0 4px;
 246  }
 247  
 248  
 249  /* - Icons ---------------------------------------------------------------------
 250  
 251    Icons, which show object state. On mobile, they are rendered without labels
 252    to save space.
 253  
 254  */
 255  
 256  .phui-object-icon-pane {
 257    float: right;
 258    margin-top: 6px;
 259  }
 260  
 261  .device .phui-object-item-no-icon-images .phui-object-icon-pane {
 262    display: none;
 263  }
 264  
 265  .phui-object-item-with-handle-icons .phui-object-item-icons {
 266    padding-bottom: 30px;
 267  }
 268  
 269  .phui-object-item-icons {
 270    float: right;
 271    padding: 0 10px;
 272  }
 273  
 274  ul.phui-object-item-icons {
 275    margin: 0;
 276  }
 277  
 278  /* NOTE: The main content is an "overflow: hidden" div which we give a right
 279     margin so it doesn't overlap the icons. The margin is slightly larger than
 280     the width + padding of the icon div, so the icons have some space even if
 281     the content is wider than available space. */
 282  
 283  .device-desktop .phui-object-icon-pane {
 284    width: 120px;
 285  }
 286  
 287  .device-phone .phui-object-icon-pane {
 288    position: absolute;
 289    top: 0;
 290    right: 0;
 291    background: #fff;
 292  }
 293  
 294  .device-phone .phui-object-item-with-1-actions .phui-object-icon-pane {
 295    right: 25px;
 296  }
 297  
 298  .device-desktop .phui-object-item-with-icons
 299    .phui-object-item-content,
 300  .device-desktop .phui-object-item-with-handle-icons
 301    .phui-object-item-content {
 302    margin-right: 132px;
 303  }
 304  
 305  .device .phui-object-item-icons {
 306    width: 18px;
 307  }
 308  
 309  .device .phui-object-item-with-icons .phui-object-item-content,
 310  .device .phui-object-item-with-handle-icons
 311    .phui-object-item-content {
 312    margin-right: 30px;
 313  }
 314  
 315  .device .phui-object-item-icon-label,
 316  .device .phui-object-item-icon-none {
 317    display: none;
 318  }
 319  
 320  .phui-object-item-icon {
 321    vertical-align: middle;
 322    position: relative;
 323    font-size: 12px;
 324    color: {$greytext};
 325    text-align: right;
 326    white-space: nowrap;
 327    overflow: hidden;
 328  
 329    min-height: 18px;
 330    line-height: 18px;
 331  }
 332  
 333  /*
 334   * Items with icon 'none' still have on mobile, thus creating a weird vertical
 335   * margin for elements which follow
 336   */
 337  .device-phone .phui-object-item-icon-none {
 338    display: none;
 339  }
 340  
 341  .device-desktop .phui-object-item-icon {
 342    padding-right: 18px;
 343  }
 344  
 345  .device-desktop .phui-object-item-icon-none {
 346    padding-right: 0;
 347  }
 348  
 349  .phui-object-item-icon-image {
 350    position: absolute;
 351    right: 0;
 352    top: 2px;
 353    width: 14px;
 354    height: 14px;
 355    font-size: 13px;
 356  }
 357  
 358  
 359  /* - Bar Colors ----------------------------------------------------------------
 360  
 361    Colors for the left-hand border bars, used to indicate object status or other
 362    attributes.
 363  
 364  */
 365  
 366  .phui-object-item-bar-color-red {
 367    border-left-color: {$red};
 368  }
 369  
 370  .phui-object-item-bar-color-orange {
 371    border-left-color: {$orange};
 372  }
 373  
 374  .phui-object-item-bar-color-yellow {
 375    border-left-color: {$yellow};
 376  }
 377  
 378  .phui-object-item-bar-color-green {
 379    border-left-color: {$green};
 380  }
 381  
 382  .phui-object-item-bar-color-sky {
 383    border-left-color: {$sky};
 384  }
 385  
 386  .phui-object-item-bar-color-blue {
 387    border-left-color: {$blue};
 388  }
 389  
 390  .phui-object-item-bar-color-indigo {
 391    border-left-color: {$indigo};
 392  }
 393  
 394  .phui-object-item-bar-color-violet {
 395    border-left-color: {$violet};
 396  }
 397  
 398  .phui-object-item-bar-color-grey {
 399    border-left-color: #bdc3c7;
 400  }
 401  
 402  .phui-object-item-bar-color-black {
 403    border-left-color: #333333;
 404  }
 405  
 406  /* - Disabled ------------------------------------------------------------------
 407  
 408    Disabled/inactive objects.
 409  
 410  */
 411  
 412  .phui-object-item-disabled {
 413    border-left-color: #d7d7d7;
 414  }
 415  
 416  .phui-object-item-disabled .phui-object-item-link,
 417  .phui-object-item-disabled .phui-object-item-link a {
 418    color: {$lightgreytext};
 419  }
 420  
 421  .phui-object-item-disabled .phui-object-item-frame {
 422    border-color: #d7d7d7;
 423  }
 424  
 425  .phui-object-item-disabled .phui-object-item-objname {
 426    color: {$greytext};
 427    text-decoration: line-through;
 428  }
 429  
 430  
 431  /* - Effects -------------------------------------------------------------------
 432  
 433    Effects like highlighted items.
 434  
 435  */
 436  
 437  .phui-object-item.phui-object-item-highlighted {
 438    background: {$lightyellow};
 439    border-left-color: {$yellow};
 440  }
 441  
 442  .phui-object-item-highlighted .phui-object-item-frame {
 443    border-color: {$yellow};
 444  }
 445  
 446  .phui-object-item-selected {
 447    background: {$lightblue};
 448    border-left-color: {$blue};
 449  }
 450  
 451  .phui-object-item-selected .phui-object-item-frame {
 452    border-color: {$blue};
 453  }
 454  
 455  
 456  /* - Foot Icons ----------------------------------------------------------------
 457  
 458    Object counts shown in the footer.
 459  
 460  */
 461  
 462  .phui-object-item-foot-icons {
 463    margin-left: 10px;
 464    bottom: 0;
 465    position: absolute;
 466  }
 467  
 468  .phui-object-item-with-foot-icons .phui-object-item-content {
 469    padding-bottom: 22px;
 470  }
 471  
 472  .phui-object-item-foot-icon {
 473    display: inline-block;
 474    background: #909090;
 475    color: #ffffff;
 476    font-weight: bold;
 477    margin-right: 3px;
 478    padding: 3px 6px 0;
 479    height: 17px;
 480    vertical-align: middle;
 481    position: relative;
 482    font-size: 12px;
 483    -webkit-font-smoothing: antialiased;
 484  }
 485  
 486  .phui-object-item-foot-icon .phui-icon-view {
 487    margin-right: 4px;
 488  }
 489  
 490  
 491  /* - Handle Icons --------------------------------------------------------------
 492  
 493    Shows owners, reviewers, etc., using profile picture icons.
 494  
 495  */
 496  
 497  .phui-object-item-handle-icons {
 498    height: 28px;
 499    margin-right: 10px;
 500    bottom: 0;
 501    right: 0;
 502    text-align: right;
 503    position: absolute;
 504  }
 505  
 506  .phui-object-item-handle-icon {
 507    margin: 1px;
 508    width: 28px;
 509    height: 28px;
 510    display: inline-block;
 511    background-size: 28px 28px;
 512    background-repeat: no-repeat;
 513  }
 514  
 515  
 516  /* - Bylines -------------------------------------------------------------------
 517  
 518    Shows owners, authors, reviewers, etc., in text.
 519  
 520  */
 521  
 522  .phui-object-item-bylines {
 523    float: right;
 524    clear: right;
 525    padding: 0 10px;
 526    margin: 4px 0;
 527    font-size: 12px;
 528    color: {$greytext};
 529    white-space: nowrap;
 530    overflow: hidden;
 531    text-align: right;
 532  }
 533  
 534  .device-phone .phui-object-item-bylines {
 535    float: none;
 536    text-align: left;
 537    padding: 0 8px;
 538    font-size: 13px;
 539  }
 540  
 541  
 542  /* - Draggable List ------------------------------------------------------------
 543  
 544    These classes are applied by and/or provided for use with JX.DraggableList.
 545  
 546  */
 547  
 548  .drag-ghost {
 549    position: relative;
 550    border: 1px dashed #fff;
 551    background: rgba(255,255,255,.5);
 552    margin-bottom: 4px;
 553    border-radius: 3px;
 554  }
 555  
 556  .phui-object-list-stackable .drag-ghost {
 557    background: {$hoverblue};
 558    margin: 0;
 559    border-radius: none;
 560    border: none;
 561    border-top: 1px solid {$lightgreyborder}
 562  }
 563  
 564  .drag-dragging {
 565    position: relative;
 566    opacity: 0.85;
 567  }
 568  
 569  .phui-object-box .phui-object-list-stackable .drag-dragging
 570   .phui-object-item-frame {
 571    border-bottom: 1px solid {$lightgreyborder};
 572  }
 573  
 574  .drag-sending {
 575    opacity: 0.5;
 576  }
 577  
 578  /* - Plain ---------------------------------------------------------------------
 579  
 580    Remove all border styles, just a list of objects
 581  
 582  */
 583  
 584  .phui-object-list-plain .phui-object-item {
 585    background: transparent;
 586  }
 587  
 588  .phui-object-list-plain .phui-object-item,
 589  .phui-object-list-plain .phui-object-item-frame {
 590    border: none;
 591  }
 592  
 593  .phui-object-list-plain .phui-object-item-attributes,
 594  .phui-object-list-plain .phui-object-item-name {
 595    padding-left: 0;
 596    padding-top: 0;
 597  }
 598  
 599  .phui-object-item-image {
 600    width: 40px;
 601    height: 40px;
 602    background-size: 40px;
 603    margin: 4px;
 604    position: absolute;
 605    background-color: {$lightbluebackground};
 606  }
 607  
 608  .phui-object-item-with-image .phui-object-item-frame {
 609    min-height: 48px;
 610  }
 611  
 612  .phui-object-item-with-image .phui-object-item-content-box {
 613    margin-left: 44px;
 614  }
 615  
 616  /* - State ---------------------------------------------------------------------
 617  
 618    Provides a list of object status or states, success or fail, etc
 619  
 620  */
 621  
 622  .phui-object-item-ficon {
 623    width: 26px;
 624    height: 26px;
 625    margin: 11px 9px 7px 12px;
 626    position: absolute;
 627  }
 628  
 629  .device-desktop .phui-object-list-states .phui-object-item {
 630    margin: 0;
 631  }
 632  
 633  .phui-object-item-with-ficon .phui-object-item-content-box {
 634    margin-left: 38px;
 635  }
 636  
 637  .phui-object-box .phui-object-list-states {
 638    padding: 0;
 639  }
 640  
 641  .phui-object-list-states .aphront-error-view {
 642    margin: 0;
 643    border: none;
 644  }
 645  
 646  .phui-object-box .phui-object-list-states li:last-child .phui-object-item-frame {
 647    border: none;
 648    padding-bottom: 0;
 649  }
 650  
 651  .phui-object-list-states .phui-object-item-frame {
 652    border: none;
 653    border-bottom: 1px solid {$thinblueborder};
 654  }
 655  
 656  .phui-object-list-states .phui-object-item {
 657    border: none;
 658  }
 659  
 660  .phui-object-list-states .phui-object-item-frame {
 661    min-height: 44px;
 662  }
 663  
 664  /* - Dashboards ------------------------------------------------------------ */
 665  
 666  .dashboard-panel .phui-object-item-list-view {
 667    padding: 0;
 668    border-left: 1px solid {$lightblueborder};
 669    border-right: 1px solid {$lightblueborder};
 670    border-bottom: 1px solid {$blueborder};
 671    margin-bottom: -1px;
 672  }
 673  
 674  .dashboard-panel .phui-object-item-list-view .phui-object-item {
 675    border-radius: 0;
 676    margin: 0;
 677    background-image: none;
 678    background-color: #fff;
 679    border-left-width: 4px;
 680  }
 681  
 682  .dashboard-panel .phui-object-item-frame {
 683    border: none;
 684    border-bottom: 1px solid {$thinblueborder};
 685    border-radius: 0;
 686  }
 687  
 688  .dashboard-panel .phui-object-item-list-header,
 689  .dashboard-panel .maniphest-task-group-header {
 690    font-size: 13px;
 691    color: {$bluetext};
 692    background: {$lightgreybackground};
 693    border-bottom: 1px solid {$thinblueborder};
 694    padding: 8px 12px;
 695    -webkit-font-smoothing: antialiased;
 696  }
 697  
 698  .dashboard-panel .phui-object-item-empty .aphront-error-view {
 699    border: none;
 700    border-bottom: 1px solid {$thinblueborder};
 701  }
 702  
 703  
 704  /* - Launcher List ---------------------------------------------------------- */
 705  
 706  .launcher-header {
 707    margin: 8px 16px -4px;
 708    clear: both;
 709    color: {$darkbluetext};
 710  }
 711  
 712  .launcher-header:nth-of-type(1) {
 713    margin-top: 24px;
 714  }
 715  
 716  .phui-object-item-launcher-list {
 717    overflow: hidden;
 718  }
 719  
 720  .device-desktop .phui-object-item-launcher-list .phui-object-item {
 721    width: 32.333%;
 722    float: left;
 723    margin-right: 1%;
 724    box-sizing: border-box;
 725  }
 726  
 727  .phui-object-item-image-icon {
 728    background: none;
 729  }
 730  
 731  .phui-object-item-image-icon {
 732    width: 30px;
 733    height: 30px;
 734    margin: 4px 4px 4px 4px;
 735    position: absolute;
 736  }
 737  
 738  .phui-object-item-image-icon .phui-icon-view {
 739    position: absolute;
 740    width: 28px;
 741    height: 28px;
 742    left: 6px;
 743    top: 6px;
 744  }
 745  
 746  .phui-object-item-with-image-icon .phui-object-item-frame {
 747    min-height: 48px;
 748  }
 749  
 750  .phui-object-item-with-image-icon .phui-object-item-content-box {
 751    margin-left: 44px;
 752  }
 753  
 754  .device-desktop .phui-object-item-launcher-list .phui-object-item-content {
 755    margin-right: 0;
 756  }
 757  
 758  .device-desktop .phui-object-item-launcher-list .phui-object-icon-pane {
 759    width: auto;
 760  }