// Generated by compass-jquery-plugin/gem-tasks/dynatree.rake /******************************************************************************* * Tree container */ ul { &.dynatree-container { font-family: tahoma, arial, helvetica; font-size: 10pt; /* font size should not be too big */ white-space: nowrap; padding: 3px; background-color: white; border: 1px dotted gray; overflow: auto; ul { padding: 0 0 0 16px; } li { list-style-image: none; list-style-position: outside; list-style-type: none; -moz-background-clip: border; -moz-background-inline-policy: continuous; -moz-background-origin: padding; background-attachment: scroll; background-color: transparent; background-position: 0 0; background-repeat: repeat-y; background-image: image_url("jquery/dynatree/xp/vline.png"); margin: 0; /* padding:3px 0 3px 16px;*/ /* padding:3px 0 3px 0;*/ padding: 1px 0 0 0; &.dynatree-lastsib { background-image: none; } } } &.dynatree-no-connector > li { background-image: none; } } /* Suppress lines for last child node */ /* Suppress lines if level is fixed expanded (option minExpandLevel) */ /* Style, when control is disabled */ .ui-dynatree-disabled ul.dynatree-container { opacity: 0.5; /* filter: alpha(opacity=50); /* Yields a css warning */ background-color: silver; } /******************************************************************************* * Default for custom icons */ /* ul.dynatree-container img { width: 16px; height: 16px; margin-left: 3px; vertical-align: top; border-style: none; } */ /******************************************************************************* * Common icon definitions */ span { &.dynatree-empty, &.dynatree-vline, &.dynatree-connector, &.dynatree-expander, &.dynatree-icon, &.dynatree-checkbox, &.dynatree-radio, &.dynatree-drag-helper-img { width: 16px; height: 16px; display: -moz-inline-box; /* @ FF 1+2 */ display: inline-block; /* Required to make a span sizeable */ vertical-align: top; background-repeat: no-repeat; background-position: left; } } #dynatree-drop-marker { width: 16px; height: 16px; display: -moz-inline-box; /* @ FF 1+2 */ display: inline-block; /* Required to make a span sizeable */ vertical-align: top; background-repeat: no-repeat; background-position: left; } /******************************************************************************* * Lines and connectors */ /* span.dynatree-empty { } span.dynatree-vline { background-image: image_url("jquery/dynatree/xp/ltL_ns.png"); } span.dynatree-connector { background-image: image_url("jquery/dynatree/xp/ltL_nes.png"); } .dynatree-lastsib span.dynatree-connector { background-image: image_url("jquery/dynatree/xp/ltL_ne.png"); } */ span { &.dynatree-connector { background-image: image_url("jquery/dynatree/xp/ltL_ne.png"); } &.dynatree-expander { background-image: image_url("jquery/dynatree/xp/ltP_nes.png"); cursor: pointer; } } /******************************************************************************* * Expander icon * Note: IE6 doesn't correctly evaluate multiples class names, * so we create combined class names that can be used in the CSS. * * Prefix: dynatree-exp- * 1st character: 'e': expanded, 'c': collapsed * 2nd character (optional): 'd': lazy (Delayed) * 3rd character (optional): 'l': Last sibling */ .dynatree-exp-cl span.dynatree-expander { background-image: image_url("jquery/dynatree/xp/ltP_ne.png"); } .dynatree-exp-cd span.dynatree-expander { background-image: image_url("jquery/dynatree/xp/ltD_nes.png"); } .dynatree-exp-cdl span.dynatree-expander { background-image: image_url("jquery/dynatree/xp/ltD_ne.png"); } .dynatree-exp-e span.dynatree-expander, .dynatree-exp-ed span.dynatree-expander { background-image: image_url("jquery/dynatree/xp/ltM_nes.png"); } .dynatree-exp-el span.dynatree-expander, .dynatree-exp-edl span.dynatree-expander { background-image: image_url("jquery/dynatree/xp/ltM_ne.png"); } .dynatree-loading span.dynatree-expander { background-image: image_url("jquery/dynatree/xp/ltWait.gif"); } /******************************************************************************* * Checkbox icon */ span.dynatree-checkbox { margin-left: 3px; background-image: image_url("jquery/dynatree/xp/cbUnchecked.png"); &:hover { background-image: image_url("jquery/dynatree/xp/cbUnchecked_hover.png"); } } .dynatree-partsel span.dynatree-checkbox { background-image: image_url("jquery/dynatree/xp/cbIntermediate.png"); &:hover { background-image: image_url("jquery/dynatree/xp/cbIntermediate_hover.png"); } } .dynatree-selected span.dynatree-checkbox { background-image: image_url("jquery/dynatree/xp/cbChecked.png"); &:hover { background-image: image_url("jquery/dynatree/xp/cbChecked_hover.png"); } } /******************************************************************************* * Radiobutton icon * This is a customization, that may be activated by overriding the 'checkbox' * class name as 'dynatree-radio' in the tree options. */ span.dynatree-radio { margin-left: 3px; background-image: image_url("jquery/dynatree/xp/rbUnchecked.png"); &:hover { background-image: image_url("jquery/dynatree/xp/rbUnchecked_hover.png"); } } .dynatree-partsel span.dynatree-radio { background-image: image_url("jquery/dynatree/xp/rbIntermediate.png"); &:hover { background-image: image_url("jquery/dynatree/xp/rbIntermediate_hover.png"); } } .dynatree-selected span.dynatree-radio { background-image: image_url("jquery/dynatree/xp/rbChecked.png"); &:hover { background-image: image_url("jquery/dynatree/xp/rbChecked_hover.png"); } } /******************************************************************************* * Node type icon * Note: IE6 doesn't correctly evaluate multiples class names, * so we create combined class names that can be used in the CSS. * * Prefix: dynatree-ico- * 1st character: 'e': expanded, 'c': collapsed * 2nd character (optional): 'f': folder */ span.dynatree-icon { margin-left: 3px; background-image: image_url("jquery/dynatree/xp/ltDoc.png"); } .dynatree-ico-cf span.dynatree-icon { background-image: image_url("jquery/dynatree/xp/ltFld.png"); } .dynatree-ico-ef span.dynatree-icon { background-image: image_url("jquery/dynatree/xp/ltFld_o.png"); } /* Status node icons */ .dynatree-statusnode-wait span.dynatree-icon { background-image: image_url("jquery/dynatree/xp/ltWait.gif"); } .dynatree-statusnode-error span.dynatree-icon { background-image: image_url("jquery/dynatree/xp/ltError.png"); } /******************************************************************************* * Node titles */ /* @Chrome: otherwise hit area of node titles is broken (issue 133) Removed again for issue 165; (133 couldn't be reproduced) */ span.dynatree-node { display: -moz-inline-box; /* @ FF 1+2 */ display: inline-block; /* Required to make a span sizeable */ } /* Remove blue color and underline from title links */ ul.dynatree-container a { color: black; /* inherit doesn't work on IE */ text-decoration: none; vertical-align: top; margin: 0px; margin-left: 3px; /* outline: 0; /* @ Firefox, prevent dotted border after click */ &:hover { /* text-decoration: underline; */ background: #F2F7FD; /* light blue */ border-color: #B8D6FB; /* darker light blue */ } } span { &.dynatree-node a { display: inline-block; /* Better alignment, when title contains
*/ /* vertical-align: top;*/ padding-left: 3px; padding-right: 3px; /* Otherwise italic font will be outside bounds */ /* line-height: 16px; /* should be the same as img height, in case 16 px */ } &.dynatree-folder a { font-weight: bold; } } ul.dynatree-container a:focus { background-color: #EFEBDE; /* gray */ } span { &.dynatree-focused a:link { background-color: #EFEBDE; /* gray */ } &.dynatree-has-children a, &.dynatree-expanded a {} &.dynatree-selected a { color: green; font-style: italic; } &.dynatree-active a { background-color: #3169C6 !important; color: white !important; /* @ IE6 */ } } /******************************************************************************* * Drag'n'drop support */ /*** Helper object ************************************************************/ div.dynatree-drag-helper a { border: 1px solid gray; background-color: white; padding-left: 5px; padding-right: 5px; opacity: 0.8; } span.dynatree-drag-helper-img { /* position: relative; left: -16px; */ } div { &.dynatree-drag-helper { /* border-color: green; background-color: red;*/ } &.dynatree-drop-accept span.dynatree-drag-helper-img { background-image: image_url("jquery/dynatree/xp/drop_accept.png"); } &.dynatree-drag-helper.dynatree-drop-reject { border-color: red; } &.dynatree-drop-reject span.dynatree-drag-helper-img { background-image: image_url("jquery/dynatree/xp/drop_reject.png"); } } /*** Drop marker icon *********************************************************/ #dynatree-drop-marker { width: 24px; position: absolute; background-image: image_url("jquery/dynatree/xp/drop_here.png"); &.dynatree-drop-after, &.dynatree-drop-before { width: 64px; background-image: image_url("jquery/dynatree/xp/drop_sibling_here.png"); } &.dynatree-drop-copy { background-image: image_url("jquery/dynatree/xp/copy_here.png"); } &.dynatree-drop-move { background-image: image_url("jquery/dynatree/xp/move_here.png"); } } /*** Source node while dragging ***********************************************/ span { &.dynatree-drag-source { /* border: 1px dotted gray; */ background-color: #e0e0e0; a { color: gray; } } &.dynatree-drop-target { /*border: 1px solid gray;*/ a { /*background-repeat: no-repeat; background-position: right; background-image: image_url("jquery/dynatree/xp/drop_child.png");*/ } &.dynatree-drop-accept a { /*border: 1px solid green;*/ background-color: #3169C6 !important; color: white !important; /* @ IE6 */ text-decoration: none; } &.dynatree-drop-reject { /*border: 1px solid red;*/ } &.dynatree-drop-after a { /*background-repeat: repeat-x; background-position: bottom; background-image: image_url("jquery/dynatree/xp/drop_append.png");*/ } } &.custom1 a { background-color: maroon; color: yellow; } } /*** Target node while dragging cursor is over it *****************************/ /******************************************************************************* * Custom node classes (sample) */