// 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) */
/*******************************************************************************/