nested-list.css 6.4KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160
  1. /* Prepend expander icon to expandable nodes
  2. * ------------------------------------------------------------------------- */
  3. /* NonExpandable nodes have no icon */
  4. .treeTable tbody tr .icon-expander {
  5. visibility: hidden;
  6. -moz-user-select: none;
  7. -khtml-user-select: none;
  8. -webkit-user-select: none;
  9. -o-user-select: none;
  10. }
  11. /* Collapsed branch: icon-chevron-right */
  12. .treeTable tbody tr.parent.collapsed .icon-expander {
  13. background-position: -456px -72px;
  14. visibility: visible;
  15. }
  16. /* Expanded branch: icon-chevron-down */
  17. .treeTable tbody tr.parent.expanded .icon-expander {
  18. background-position: -313px -119px;
  19. visibility: visible;
  20. }
  21. /* Non-transparent helper row backgrounds
  22. * ------------------------------------------------------------------------- */
  23. .nested-helper tr {
  24. background-color: #FFFFFF;
  25. }
  26. /* Fade out dragged helper rows
  27. * ============================
  28. * Requires: CSS3 support
  29. * Else: no fade out applied, all rows will be visible
  30. * ------------------------------------------------------------------------- */
  31. /* Style 1'st displayed row */
  32. .nested-helper tr:nth-child(1)
  33. { opacity: 0.80 !important; }
  34. .nested-helper tr:nth-child(1) th,
  35. .nested-helper tr:nth-child(1) td
  36. { border-top: 1px solid rgba(221, 221, 221, 0.80) !important; }
  37. /* Style 2'nd displayed row */
  38. .nested-helper tr:not(.ui-helper-hidden)~tr
  39. { opacity: 0.65 !important; }
  40. .nested-helper tr:not(.ui-helper-hidden)~tr th,
  41. .nested-helper tr:not(.ui-helper-hidden)~tr td
  42. { border-top: 1px solid rgba(221, 221, 221, 0.65) !important; }
  43. /* Style 3'rd displayed row */
  44. .nested-helper tr:not(.ui-helper-hidden)~tr:not(.ui-helper-hidden)~tr
  45. { opacity: 0.50 !important; }
  46. .nested-helper tr:not(.ui-helper-hidden)~tr:not(.ui-helper-hidden)~tr th,
  47. .nested-helper tr:not(.ui-helper-hidden)~tr:not(.ui-helper-hidden)~tr td
  48. { border-top: 1px solid rgba(221, 221, 221, 0.50) !important; }
  49. /* Style 4'th displayed row */
  50. .nested-helper tr:not(.ui-helper-hidden)~tr:not(.ui-helper-hidden)~tr:not(.ui-helper-hidden)~tr
  51. { opacity: 0.35 !important; }
  52. .nested-helper tr:not(.ui-helper-hidden)~tr:not(.ui-helper-hidden)~tr:not(.ui-helper-hidden)~tr th,
  53. .nested-helper tr:not(.ui-helper-hidden)~tr:not(.ui-helper-hidden)~tr:not(.ui-helper-hidden)~tr td
  54. { border-top: 1px solid rgba(221, 221, 221, 0.35) !important; }
  55. /* Style 5'th displayed row */
  56. .nested-helper tr:not(.ui-helper-hidden)~tr:not(.ui-helper-hidden)~tr:not(.ui-helper-hidden)~tr:not(.ui-helper-hidden)~tr
  57. { opacity: 0.20 !important; }
  58. .nested-helper tr:not(.ui-helper-hidden)~tr:not(.ui-helper-hidden)~tr:not(.ui-helper-hidden)~tr:not(.ui-helper-hidden)~tr th,
  59. .nested-helper tr:not(.ui-helper-hidden)~tr:not(.ui-helper-hidden)~tr:not(.ui-helper-hidden)~tr:not(.ui-helper-hidden)~tr td
  60. { border-top: 1px solid rgba(221, 221, 221, 0.20) !important; }
  61. /* Style 6'th displayed row */
  62. .nested-helper tr:not(.ui-helper-hidden)~tr:not(.ui-helper-hidden)~tr:not(.ui-helper-hidden)~tr:not(.ui-helper-hidden)~tr:not(.ui-helper-hidden)~tr
  63. { opacity: 0.05 !important; }
  64. .nested-helper tr:not(.ui-helper-hidden)~tr:not(.ui-helper-hidden)~tr:not(.ui-helper-hidden)~tr:not(.ui-helper-hidden)~tr:not(.ui-helper-hidden)~tr th,
  65. .nested-helper tr:not(.ui-helper-hidden)~tr:not(.ui-helper-hidden)~tr:not(.ui-helper-hidden)~tr:not(.ui-helper-hidden)~tr:not(.ui-helper-hidden)~tr td
  66. { border-top: 1px solid rgba(221, 221, 221, 0.05) !important; }
  67. /* Style all displayed rows below 6'th */
  68. .nested-helper tr:not(.ui-helper-hidden)~tr:not(.ui-helper-hidden)~tr:not(.ui-helper-hidden)~tr:not(.ui-helper-hidden)~tr:not(.ui-helper-hidden)~tr:not(.ui-helper-hidden)~tr
  69. { opacity: 0 !important; }
  70. .nested-helper tr:not(.ui-helper-hidden)~tr:not(.ui-helper-hidden)~tr:not(.ui-helper-hidden)~tr:not(.ui-helper-hidden)~tr:not(.ui-helper-hidden)~tr:not(.ui-helper-hidden)~tr th,
  71. .nested-helper tr:not(.ui-helper-hidden)~tr:not(.ui-helper-hidden)~tr:not(.ui-helper-hidden)~tr:not(.ui-helper-hidden)~tr:not(.ui-helper-hidden)~tr:not(.ui-helper-hidden)~tr td
  72. { border-top: 1px solid rgba(221, 221, 221, 0) !important; }
  73. /* Droppable action highlight, Selected row highlight
  74. * ==================================================
  75. * Requires: CSS2 support
  76. * Else: expander and droppable action icons won't be visible
  77. * ------------------------------------------------------------------------- */
  78. .treeTable tbody tr.droppable-before,
  79. .treeTable tbody tr.droppable-after{
  80. box-shadow: 0 0 10px 5px rgba(73, 175, 205, 0.25);
  81. }
  82. .treeTable tbody tr.droppable-before > td:first-child:before,
  83. .treeTable tbody tr.droppable-after > td:first-child:before {
  84. position: relative;
  85. display: inline-block;
  86. width: 14px;
  87. height: 14px;
  88. content: '';
  89. margin-top: 1px;
  90. margin-right: -14px;
  91. left: 5px;
  92. line-height: 14px;
  93. vertical-align: text-top;
  94. background-image: url("../img/glyphicons-halflings.png");
  95. background-position: 14px 14px;
  96. background-repeat: no-repeat;
  97. cursor: pointer;
  98. }
  99. /* Insert before: icon-share-alt */
  100. .treeTable tbody tr.droppable-before > td:first-child:before {
  101. background-position: -336px -96px;
  102. top: -14px;
  103. }
  104. /* Insert after: flipped icon-share-alt */
  105. .treeTable tbody tr.droppable-after > td:first-child:before {
  106. background-position: -336px -96px;
  107. bottom: -14px;
  108. -webkit-transform:scaleY(-1);
  109. -moz-transform:scaleY(-1);
  110. -ms-transform:scaleY(-1);
  111. -o-transform:scaleY(-1);
  112. transform:scaleY(-1);
  113. }
  114. /* Highlight selected row */
  115. .treeTable tbody tr.selected,
  116. .treeTable tbody tr.droppable-in {
  117. background-color: #0088CC;
  118. color: #fff;
  119. }
  120. /* Use white icon set in selected rows */
  121. .treeTable tbody tr.selected [class^="icon-"],
  122. .treeTable tbody tr.droppable-in [class^="icon-"],
  123. .treeTable tbody tr.selected [class*=" icon-"],
  124. .treeTable tbody tr.droppable-in [class*=" icon-"],
  125. .treeTable tbody tr.parent.selected td:first-child:before,
  126. .treeTable tbody tr.parent.droppable-in td:first-child:before {
  127. background-image: url("../img/glyphicons-halflings-white.png") !important;
  128. }
  129. /* Remove cell backgrounds to make row background visible */
  130. .treeTable tbody tr.selected td, .treeTable tbody tr.droppable-in td,
  131. .treeTable tbody tr.selected th, .treeTable tbody tr.droppable-in th {
  132. background-color: transparent !important;
  133. }
  134. /* jQuery UI layout helpers
  135. * ========================
  136. * This way I don't have to require the full jQuery UI CSS to be loaded.
  137. * ------------------------------------------------------------------------- */
  138. .ui-helper-hidden { display: none; }