compass-jquery-plugin 0.3.1.1 → 0.3.2.pre.2

data/templates/dynatree/jquery/dynatree/crystal.scss

@@ -1,18 +1,22 @@
 // Generated by compass-jquery-plugin/gem-tasks/dynatree.rake
 
+/*******************************************************************************
+ * Tree container
+ */
+
 ul {
   &.dynatree-container {
-    font-family: "Lucida Grande", Verdana, Geneva, Arial, Helvetica, sans-serif;
-    font-size: 0.8em;
+    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 solid #8AB0CA;
-    -moz-border-radius: 4px;
-    -webkit-border-radius: 4px;
-    border-radius: 4px;
+    border: 1px dotted gray;
+    overflow: auto;
     ul {
-      padding: 0 0 0 16px; }
+      padding: 0 0 0 16px;
+      margin: 0; }
     li {
       list-style-image: none;
       list-style-position: outside;
@@ -24,159 +28,259 @@ ul {
       background-color: transparent;
       background-position: 0 0;
       background-repeat: repeat-y;
+      background-image: none;
+      /* no v-lines */
       margin: 0;
-      /*    padding:3px 0 3px 16px;*/
-      /*    padding:3px 0 3px 0;*/
-      padding: 1px 0 0 0; }
-    img {
-      width: 16px;
-      height: 16px;
-      margin-left: 3px;
-      vertical-align: top; }
-    a {
-      color: black;
-      text-decoration: none;
-      vertical-align: top;
-      margin: 0px;
-      margin-left: 3px;
-      border: 1px solid white;
-      &:hover {
-        text-decoration: underline; }
-      &:focus {
-        background-color: #EFEBDE; } } }
-  &.dynatree-disabled ul.dynatree-container {
-    opacity: 0.5;
-    background-color: silver; } }
+      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; }
+
+/*******************************************************************************
+ * Common icon definitions
+ */
 
 span {
-  &.dynatree-empty, &.dynatree-vline, &.dynatree-connector {
-    width: 16px;
-    height: 16px;
-    display: -moz-inline-box;
-    display: inline-block;
-    vertical-align: top;
-    background-repeat: no-repeat;
-    background-position: left; }
-  &.dynatree-vline {
-    background-image: image_url("jquery/dynatree/crystal/empty.png"); }
-  &.dynatree-expander {
-    width: 16px;
-    height: 16px;
-    display: -moz-inline-box;
-    display: inline-block;
-    vertical-align: top;
-    background-repeat: no-repeat;
-    background-position: left;
-    background-image: image_url("jquery/dynatree/crystal/collapsed.png");
-    &:hover {
-      background-image: image_url("jquery/dynatree/crystal/collapsed_hover.png"); } }
-  &.dynatree-icon {
+  &.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;
-    margin-left: 3px;
-    background-image: image_url("jquery/dynatree/crystal/document.png"); }
-  &.dynatree-checkbox, &.dynatree-radio, &.dynatree-drag-helper-img {
-    width: 16px;
-    height: 16px;
-    display: -moz-inline-box;
-    display: inline-block;
-    vertical-align: top;
-    background-repeat: no-repeat;
-    background-position: left;
-    margin-left: 3px;
-    background-image: image_url("jquery/dynatree/crystal/cbUnchecked.png"); } }
+    background-image: image_url("jquery/dynatree/crystal/icons.png");
+    background-position: 0 0; } }
 
 #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;
+  background-image: image_url("jquery/dynatree/crystal/icons.png");
+  background-position: 0 0; }
+
+/** Used by 'icon' node option: */
+
+ul.dynatree-container img {
+  width: 16px;
+  height: 16px;
   margin-left: 3px;
-  background-image: image_url("jquery/dynatree/crystal/cbUnchecked.png"); }
+  vertical-align: top;
+  border-style: none; }
+
+/*******************************************************************************
+ * Lines and connectors
+ */
+
+/*
+span.dynatree-empty
+{
+}
+span.dynatree-vline
+{
+}
+*/
 
 span {
-  &.dynatree-checkbox:hover {
-    background-image: image_url("jquery/dynatree/crystal/cbUnchecked_hover.png"); }
-  &.dynatree-radio {
-    margin-left: 3px;
-    background-image: image_url("jquery/dynatree/crystal/rbUnchecked.png");
+  &.dynatree-connector {
+    background-image: none; }
+  &.dynatree-expander {
+    background-position: 0px -80px;
+    cursor: pointer;
     &:hover {
-      background-image: image_url("jquery/dynatree/crystal/rbUnchecked_hover.png"); } }
-  &.dynatree-document a, &.dynatree-folder a {
-    display: inline-block;
-    padding-left: 3px;
-    padding-right: 3px; }
-  &.dynatree-focused a:link {
-    background-color: #EFEBDE; }
-  &.dynatree-selected a {
-    color: green;
-    font-style: italic; }
-  &.dynatree-active a {
-    border: 1px solid #99DEFD;
-    background-color: #D8F0FA; }
-  &.custom1 {
-    a {
-      background-color: #ffffbb;
-      color: maroon; }
-    span.dynatree-icon {
-      background-image: image_url("jquery/dynatree/crystal/doc_with_children.png"); } }
-  &.custom2 {
-    a {
-      font-weight: bold;
-      background-color: silver;
-      color: navy; }
-    span.dynatree-icon {
-      background-image: image_url("jquery/dynatree/crystal/folder_page.png"); } } }
-
-.dynatree-expanded span.dynatree-expander {
-  background-image: image_url("jquery/dynatree/crystal/expanded.png");
+      background-position: -16px -80px; } } }
+
+/*
+.dynatree-lastsib span.dynatree-connector
+{
+}
+*/
+/*******************************************************************************
+ * 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, .dynatree-exp-cd span.dynatree-expander, .dynatree-exp-cdl span.dynatree-expander {}
+
+.dynatree-exp-e span.dynatree-expander, .dynatree-exp-ed span.dynatree-expander, .dynatree-exp-el span.dynatree-expander, .dynatree-exp-edl span.dynatree-expander {
+  background-position: -32px -80px; }
+
+.dynatree-exp-e span.dynatree-expander:hover, .dynatree-exp-ed span.dynatree-expander:hover, .dynatree-exp-el span.dynatree-expander:hover, .dynatree-exp-edl span.dynatree-expander:hover {
+  background-position: -48px -80px; }
+
+.dynatree-loading span.dynatree-expander {
+  background-position: 0 0;
+  background-image: image_url("jquery/dynatree/crystal/loading.gif"); }
+
+/*******************************************************************************
+ * Checkbox icon
+ */
+
+span.dynatree-checkbox {
+  margin-left: 3px;
+  background-position: 0px -32px;
   &:hover {
-    background-image: image_url("jquery/dynatree/crystal/expanded_hover.png"); } }
+    background-position: -16px -32px; } }
 
 .dynatree-partsel span.dynatree-checkbox {
-  background-image: image_url("jquery/dynatree/crystal/cbIntermediate.png");
+  background-position: -64px -32px;
   &:hover {
-    background-image: image_url("jquery/dynatree/crystal/cbIntermediate_hover.png"); } }
+    background-position: -80px -32px; } }
 
 .dynatree-selected span.dynatree-checkbox {
-  background-image: image_url("jquery/dynatree/crystal/cbChecked.png");
+  background-position: -32px -32px;
   &:hover {
-    background-image: image_url("jquery/dynatree/crystal/cbChecked_hover.png"); } }
+    background-position: -48px -32px; } }
+
+/*******************************************************************************
+ * 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-position: 0px -48px;
+  &:hover {
+    background-position: -16px -48px; } }
 
 .dynatree-partsel span.dynatree-radio {
-  background-image: image_url("jquery/dynatree/crystal/rbIntermediate.png");
+  background-position: -64px -48px;
   &:hover {
-    background-image: image_url("jquery/dynatree/crystal/rbIntermediate_hover.png"); } }
+    background-position: -80px -48px; } }
 
 .dynatree-selected span.dynatree-radio {
-  background-image: image_url("jquery/dynatree/crystal/rbChecked.png");
+  background-position: -32px -48px;
   &:hover {
-    background-image: image_url("jquery/dynatree/crystal/rbChecked_hover.png"); } }
+    background-position: -48px -48px; } }
+
+/*******************************************************************************
+ * 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-position: 0px 0px; }
+
+.dynatree-has-children span.dynatree-icon {
+  /*    background-position: 0px -16px; */ }
+
+.dynatree-ico-cf span.dynatree-icon {
+  background-position: 0px -16px; }
 
-.dynatree-folder {
-  span.dynatree-icon {
-    background-image: image_url("jquery/dynatree/crystal/folder.png"); }
-  &.dynatree-expanded span.dynatree-icon {
-    background-image: image_url("jquery/dynatree/crystal/folder.png"); } }
+.dynatree-ico-ef span.dynatree-icon {
+  background-position: -64px -16px; }
+
+/* Status node icons */
 
 .dynatree-statusnode-wait span.dynatree-icon {
-  background-image: image_url("jquery/dynatree/crystal/ltWait.gif"); }
+  background-image: image_url("jquery/dynatree/crystal/loading.gif"); }
 
 .dynatree-statusnode-error span.dynatree-icon {
-  background-image: image_url("jquery/dynatree/crystal/ltError.png"); }
+  background-position: 0px -112px;
+  /*	background-image: url("ltError.gif");*/ }
+
+/*******************************************************************************
+ * 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 */
+  /* Set transparent border to prevent jumping when active node gets a border
+     (we can do this, because this theme doesn't use vertical lines)
+     */
+  border: 1px solid white;
+  /* Note: 'transparent' would not work in IE6 */
+  &: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 <br> */
+    /*	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; */
+    /* custom */ } }
+
+ul.dynatree-container a:focus {
+  background-color: #EFEBDE;
+  /* gray */ }
+
+span {
+  &.dynatree-focused a:link {
+    background-color: #EFEBDE;
+    /* gray */ }
+  &.dynatree-has-children a {
+    /*	font-style: oblique; /* custom: */ }
+  &.dynatree-expanded a {}
+  &.dynatree-selected a {
+    /*	color: green; */
+    font-style: italic; }
+  &.dynatree-active a {
+    border: 1px solid #99DEFD;
+    background-color: #D8F0FA; } }
+
+/*******************************************************************************
  * Drag'n'drop support
  */
-/* Helper object */
+
+/*** Helper object ************************************************************/
 
 div.dynatree-drag-helper a {
   border: 1px solid gray;
@@ -192,30 +296,31 @@ span.dynatree-drag-helper-img {
   */ }
 
 div {
-  &.dynatree-drag-helper.dynatree-drop-accept {
-    border-color: green; }
+  &.dynatree-drag-helper {
+    /*    border-color: green;
+    	background-color: red;*/ }
   &.dynatree-drop-accept span.dynatree-drag-helper-img {
-    background-image: image_url("jquery/dynatree/crystal/drop_accept.png"); }
+    background-position: -32px -112px; }
   &.dynatree-drag-helper.dynatree-drop-reject {
     border-color: red; }
   &.dynatree-drop-reject span.dynatree-drag-helper-img {
-    background-image: image_url("jquery/dynatree/crystal/drop_reject.png"); } }
+    background-position: -16px -112px; } }
 
 /*** Drop marker icon *********************************************************/
 
 #dynatree-drop-marker {
   width: 24px;
   position: absolute;
-  background-image: image_url("jquery/dynatree/crystal/drop_here.png");
+  background-position: 0 -128px;
   &.dynatree-drop-after, &.dynatree-drop-before {
     width: 64px;
-    background-image: image_url("jquery/dynatree/crystal/drop_sibling_here.png"); }
+    background-position: 0 -144px; }
   &.dynatree-drop-copy {
-    background-image: image_url("jquery/dynatree/crystal/copy_here.png"); }
+    background-position: -64px -128px; }
   &.dynatree-drop-move {
-    background-image: image_url("jquery/dynatree/crystal/move_here.png"); } }
+    background-position: -64px -128px; } }
 
-/* Source node while dragging */
+/*** Source node while dragging ***********************************************/
 
 span {
   &.dynatree-drag-source {
@@ -226,9 +331,9 @@ span {
   &.dynatree-drop-target {
     /*border: 1px solid gray;*/
     a {
-      /*background-repeat: no-repeat;*/
-      /*background-position: right;*/
-      /*background-image: image_url("jquery/dynatree/rystal/drop_child.png");*/ }
+      /*background-repeat: no-repeat;
+      background-position: right;
+      background-image: url("drop_child.gif");*/ }
     &.dynatree-drop-accept a {
       /*border: 1px solid green;*/
       background-color: #3169C6 !important;
@@ -240,6 +345,6 @@ span {
     &.dynatree-drop-after a {
       /*background-repeat: repeat-x;
       background-position: bottom;
-      background-image: image_url("jquery/dynatree/crystal/drop_append.png");*/ } } }
+      background-image: url("drop_append.gif");*/ } } }
 
-/* Target node while dragging cursor is over it */
+/*** Target node while dragging cursor is over it *****************************/