123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160 |
- /* Prepend expander icon to expandable nodes
- * ------------------------------------------------------------------------- */
-
- /* NonExpandable nodes have no icon */
- .treeTable tbody tr .icon-expander {
- visibility: hidden;
- -moz-user-select: none;
- -khtml-user-select: none;
- -webkit-user-select: none;
- -o-user-select: none;
- }
-
- /* Collapsed branch: icon-chevron-right */
- .treeTable tbody tr.parent.collapsed .icon-expander {
- background-position: -456px -72px;
- visibility: visible;
- }
-
- /* Expanded branch: icon-chevron-down */
- .treeTable tbody tr.parent.expanded .icon-expander {
- background-position: -313px -119px;
- visibility: visible;
- }
-
- /* Non-transparent helper row backgrounds
- * ------------------------------------------------------------------------- */
- .nested-helper tr {
- background-color: #FFFFFF;
- }
-
- /* Fade out dragged helper rows
- * ============================
- * Requires: CSS3 support
- * Else: no fade out applied, all rows will be visible
- * ------------------------------------------------------------------------- */
-
- /* Style 1'st displayed row */
- .nested-helper tr:nth-child(1)
- { opacity: 0.80 !important; }
- .nested-helper tr:nth-child(1) th,
- .nested-helper tr:nth-child(1) td
- { border-top: 1px solid rgba(221, 221, 221, 0.80) !important; }
-
- /* Style 2'nd displayed row */
- .nested-helper tr:not(.ui-helper-hidden)~tr
- { opacity: 0.65 !important; }
- .nested-helper tr:not(.ui-helper-hidden)~tr th,
- .nested-helper tr:not(.ui-helper-hidden)~tr td
- { border-top: 1px solid rgba(221, 221, 221, 0.65) !important; }
-
- /* Style 3'rd displayed row */
- .nested-helper tr:not(.ui-helper-hidden)~tr:not(.ui-helper-hidden)~tr
- { opacity: 0.50 !important; }
- .nested-helper tr:not(.ui-helper-hidden)~tr:not(.ui-helper-hidden)~tr th,
- .nested-helper tr:not(.ui-helper-hidden)~tr:not(.ui-helper-hidden)~tr td
- { border-top: 1px solid rgba(221, 221, 221, 0.50) !important; }
-
- /* Style 4'th displayed row */
- .nested-helper tr:not(.ui-helper-hidden)~tr:not(.ui-helper-hidden)~tr:not(.ui-helper-hidden)~tr
- { opacity: 0.35 !important; }
- .nested-helper tr:not(.ui-helper-hidden)~tr:not(.ui-helper-hidden)~tr:not(.ui-helper-hidden)~tr th,
- .nested-helper tr:not(.ui-helper-hidden)~tr:not(.ui-helper-hidden)~tr:not(.ui-helper-hidden)~tr td
- { border-top: 1px solid rgba(221, 221, 221, 0.35) !important; }
-
- /* Style 5'th displayed row */
- .nested-helper tr:not(.ui-helper-hidden)~tr:not(.ui-helper-hidden)~tr:not(.ui-helper-hidden)~tr:not(.ui-helper-hidden)~tr
- { opacity: 0.20 !important; }
- .nested-helper tr:not(.ui-helper-hidden)~tr:not(.ui-helper-hidden)~tr:not(.ui-helper-hidden)~tr:not(.ui-helper-hidden)~tr th,
- .nested-helper tr:not(.ui-helper-hidden)~tr:not(.ui-helper-hidden)~tr:not(.ui-helper-hidden)~tr:not(.ui-helper-hidden)~tr td
- { border-top: 1px solid rgba(221, 221, 221, 0.20) !important; }
-
- /* Style 6'th displayed row */
- .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
- { opacity: 0.05 !important; }
- .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,
- .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
- { border-top: 1px solid rgba(221, 221, 221, 0.05) !important; }
-
- /* Style all displayed rows below 6'th */
- .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
- { opacity: 0 !important; }
- .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,
- .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
- { border-top: 1px solid rgba(221, 221, 221, 0) !important; }
-
- /* Droppable action highlight, Selected row highlight
- * ==================================================
- * Requires: CSS2 support
- * Else: expander and droppable action icons won't be visible
- * ------------------------------------------------------------------------- */
-
- .treeTable tbody tr.droppable-before,
- .treeTable tbody tr.droppable-after{
- box-shadow: 0 0 10px 5px rgba(73, 175, 205, 0.25);
- }
-
- .treeTable tbody tr.droppable-before > td:first-child:before,
- .treeTable tbody tr.droppable-after > td:first-child:before {
- position: relative;
- display: inline-block;
- width: 14px;
- height: 14px;
- content: '';
- margin-top: 1px;
- margin-right: -14px;
- left: 5px;
- line-height: 14px;
- vertical-align: text-top;
- background-image: url("../img/glyphicons-halflings.png");
- background-position: 14px 14px;
- background-repeat: no-repeat;
- cursor: pointer;
- }
-
- /* Insert before: icon-share-alt */
- .treeTable tbody tr.droppable-before > td:first-child:before {
- background-position: -336px -96px;
- top: -14px;
- }
-
- /* Insert after: flipped icon-share-alt */
- .treeTable tbody tr.droppable-after > td:first-child:before {
- background-position: -336px -96px;
- bottom: -14px;
-
- -webkit-transform:scaleY(-1);
- -moz-transform:scaleY(-1);
- -ms-transform:scaleY(-1);
- -o-transform:scaleY(-1);
- transform:scaleY(-1);
- }
-
- /* Highlight selected row */
- .treeTable tbody tr.selected,
- .treeTable tbody tr.droppable-in {
- background-color: #0088CC;
- color: #fff;
- }
-
- /* Use white icon set in selected rows */
- .treeTable tbody tr.selected [class^="icon-"],
- .treeTable tbody tr.droppable-in [class^="icon-"],
- .treeTable tbody tr.selected [class*=" icon-"],
- .treeTable tbody tr.droppable-in [class*=" icon-"],
- .treeTable tbody tr.parent.selected td:first-child:before,
- .treeTable tbody tr.parent.droppable-in td:first-child:before {
- background-image: url("../img/glyphicons-halflings-white.png") !important;
- }
-
- /* Remove cell backgrounds to make row background visible */
- .treeTable tbody tr.selected td, .treeTable tbody tr.droppable-in td,
- .treeTable tbody tr.selected th, .treeTable tbody tr.droppable-in th {
- background-color: transparent !important;
- }
-
- /* jQuery UI layout helpers
- * ========================
- * This way I don't have to require the full jQuery UI CSS to be loaded.
- * ------------------------------------------------------------------------- */
- .ui-helper-hidden { display: none; }
|