// Generated by compass-jquery-plugin/gem-tasks/dynatree.rake /*******************************************************************************/ /* Tree container */ /*******************************************************************************/ div.ui-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; 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.ui/dynatree.xp/vline.png"); margin: 0; /* padding:3px 0 3px 16px;*/ /* padding:3px 0 3px 0;*/ padding: 1px 0 0 0; } } /* Suppress vertical line, if we don't have connectors */ ul.ui-dynatree-no-connector >li, div.ui-dynatree-container li.ui-dynatree-lastsib { background-image: none; } /* Style, when control is disabled */ .ui-dynatree-disabled div.ui-dynatree-container { opacity: 0.5; /* filter: alpha(opacity=50); /* Yields a css warning */ background-color: silver; } /*******************************************************************************/ /* Default for custom icons */ /*******************************************************************************/ /*******************************************************************************/ /* Common icon definitions */ /*******************************************************************************/ span { &.ui-dynatree-empty, &.ui-dynatree-vline, &.ui-dynatree-connector, &.ui-dynatree-expander, &.ui-dynatree-icon, &.ui-dynatree-checkbox, &.ui-dynatree-radio { 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; } &.ui-dynatree-connector { background-image: image_url("jquery.ui/dynatree.xp/ltL_ne.png"); } &.ui-dynatree-expander { background-image: image_url("jquery.ui/dynatree.xp/ltP_nes.png"); cursor: pointer; } } /*******************************************************************************/ /* Lines and connectors */ /*******************************************************************************/ /*******************************************************************************/ /* 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: ui-dynatree-exp- */ /* 1st character: 'e': expanded, 'c': collapsed */ /* 2nd character (optional): 'd': lazy (Delayed) */ /* 3rd character (optional): 'l': Last sibling */ /*******************************************************************************/ .ui-dynatree-exp-cl span.ui-dynatree-expander { background-image: image_url("jquery.ui/dynatree.xp/ltP_ne.png"); } .ui-dynatree-exp-cd span.ui-dynatree-expander { background-image: image_url("jquery.ui/dynatree.xp/ltD_nes.png"); } .ui-dynatree-exp-cdl span.ui-dynatree-expander { background-image: image_url("jquery.ui/dynatree.xp/ltD_ne.png"); } .ui-dynatree-exp-e span.ui-dynatree-expander, .ui-dynatree-exp-ed span.ui-dynatree-expander { background-image: image_url("jquery.ui/dynatree.xp/ltM_nes.png"); } .ui-dynatree-exp-el span.ui-dynatree-expander, .ui-dynatree-exp-edl span.ui-dynatree-expander { background-image: image_url("jquery.ui/dynatree.xp/ltM_ne.png"); } /*******************************************************************************/ /* Checkbox icon */ /*******************************************************************************/ span.ui-dynatree-checkbox { margin-left: 3px; background-image: image_url("jquery.ui/dynatree.xp/cbUnchecked.png"); &:hover { background-image: image_url("jquery.ui/dynatree.xp/cbUnchecked_hover.png"); } } .ui-dynatree-partsel span.ui-dynatree-checkbox { background-image: image_url("jquery.ui/dynatree.xp/cbIntermediate.png"); &:hover { background-image: image_url("jquery.ui/dynatree.xp/cbIntermediate_hover.png"); } } .ui-dynatree-selected span.ui-dynatree-checkbox { background-image: image_url("jquery.ui/dynatree.xp/cbChecked.png"); &:hover { background-image: image_url("jquery.ui/dynatree.xp/cbChecked_hover.png"); } } /*******************************************************************************/ /* Radiobutton icon */ /* This is a customization, that may be activated by overriding the 'checkbox' */ /* class name as 'ui-dynatree-radio' in the tree options. */ /*******************************************************************************/ span.ui-dynatree-radio { margin-left: 3px; background-image: image_url("jquery.ui/dynatree.xp/rbUnchecked.png"); &:hover { background-image: image_url("jquery.ui/dynatree.xp/rbUnchecked_hover.png"); } } .ui-dynatree-partsel span.ui-dynatree-radio { background-image: image_url("jquery.ui/dynatree.xp/rbIntermediate.png"); &:hover { background-image: image_url("jquery.ui/dynatree.xp/rbIntermediate_hover.png"); } } .ui-dynatree-selected span.ui-dynatree-radio { background-image: image_url("jquery.ui/dynatree.xp/rbChecked.png"); &:hover { background-image: image_url("jquery.ui/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: ui-dynatree-ico- */ /* 1st character: 'e': expanded, 'c': collapsed */ /* 2nd character (optional): 'f': folder */ /*******************************************************************************/ span.ui-dynatree-icon { margin-left: 3px; background-image: image_url("jquery.ui/dynatree.xp/ltDoc.png"); } .ui-dynatree-ico-cf span.ui-dynatree-icon { background-image: image_url("jquery.ui/dynatree.xp/ltFld.png"); } .ui-dynatree-ico-ef span.ui-dynatree-icon { background-image: image_url("jquery.ui/dynatree.xp/ltFld_o.png"); } /* Status node icons */ .ui-dynatree-statusnode-wait span.ui-dynatree-icon { background-image: image_url("jquery.ui/dynatree.xp/ltWait.gif"); } .ui-dynatree-statusnode-error span.ui-dynatree-icon { background-image: image_url("jquery.ui/dynatree.xp/ltError.png"); } /*******************************************************************************/ /* Node titles */ /*******************************************************************************/ /* @Chrome: otherwise hit area of node titles is broken (issue 133) */ span { &.ui-dynatree-document, &.ui-dynatree-folder { display: -moz-inline-box; /* @ FF 1+2 */ display: inline-block; /* Required to make a span sizeable */ } } /* Remove blue color and underline from title links */ div.ui-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; } } span { &.ui-dynatree-document 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 */ } &.ui-dynatree-folder 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 */ font-weight: bold; } } div.ui-dynatree-container a:focus { background-color: #efebde; /* gray */ } span { &.ui-dynatree-focused a:link { background-color: #efebde; /* gray */ } &.ui-dynatree-has-children a, &.ui-dynatree-expanded a { } &.ui-dynatree-selected a { color: green; font-style: italic; } &.ui-dynatree-active a { background-color: #3169c6 !important; color: white !important; /* @ IE6 */ } &.custom1 a { background-color: maroon; color: yellow; } } /*******************************************************************************/ /* Custom node classes (sample) */ /*******************************************************************************/