lib/dijit/themes/claro/Tree.css

   1 /* Tree
   2  *
   3  * Styling Tree mostly means styling the TreeRow (dijitTreeRow)
   4  * There are 4 basic states to style:
   5  *
   6  * Tree Row:
   7  * 1. tree row (default styling):
   8  *              .dijitTreeRow - styles for each row of the tree
   9  *
  10  * 2. hovered tree row (mouse hover on a tree row)
  11  *              .dijitTreeRowHover - styles when mouse over on one row
  12  *
  13  * 3. active tree row (mouse down on a tree row)
  14  *              .dijitTreeRowActive - styles when mouse down on one row
  15  *
  16  * 4. selected tree row
  17  *              dijitTreeRowSelected - style when the row has been selected
  18  *
  19  * Tree Expando:
  20  *          dijitTreeExpando - the expando at the left of the text of each tree row
  21  *
  22  * Drag and Drop on TreeNodes: (insert line on dijitTreeContent node so it'll aligned w/ target element)
  23  *              .dijitTreeNode .dojoDndItemBefore/.dojoDndItemAfter - use border style simulate a separate line
  24  */
  25 .claro .dijitTreeNode {
  26   zoom: 1;
  27   /* force layout on IE (TODO: may not be needed anymore) */
  28
  29 }
  30 .claro .dijitTreeIsRoot {
  31   background-image: none;
  32 }
  33 /* Styling for basic tree node (unhovered, unselected)
  34  * Also use this styling when dropping between items on the tree (in other words, don't
  35  * use hover effect)
  36  */
  37 .claro .dijitTreeRow, .claro .dijitTreeNode .dojoDndItemBefore, .claro .dijitTreeNode .dojoDndItemAfter {
  38   /* so insert line shows up on IE when dropping after a target element */
  39
  40   padding: 4px 1px 2px 0;
  41   margin: 0 1px;
  42   /* replaced by border for selected/hovered row */
  43
  44   background-color: none;
  45   background-color: transparent;
  46   background-color: rgba(171, 214, 255, 0);
  47   background-position: 0 0;
  48   background-repeat: repeat-x;
  49   border-color: rgba(118, 157, 192, 0);
  50   border-width: 0;
  51   color: #000000;
  52   -webkit-transition-property: background-color, border-color;
  53   -moz-transition-property: background-color, border-color;
  54   transition-property: background-color, border-color;
  55   -webkit-transition-duration: 0.25s;
  56   -moz-transition-duration: 0.25s;
  57   transition-duration: 0.25s;
  58   -webkit-transition-timing-function: ease-out;
  59   -moz-transition-timing-function: ease-out;
  60   transition-timing-function: ease-out;
  61 }
  62 .claro .dijitTreeRowSelected {
  63   background-repeat: repeat-x;
  64   background-color: #cfe5fa;
  65   background-image: url("images/commonHighlight.png");
  66   padding: 3px 0 1px;
  67   margin: 0;
  68   border: solid 1px #759dc0;
  69   color: #000000;
  70 }
  71 .claro .dijitTreeRowHover {
  72   background-color: #abd6ff;
  73   background-image: url("images/commonHighlight.png");
  74   padding: 3px 0 1px;
  75   margin: 0;
  76   border: solid 1px #759dc0;
  77   color: #000000;
  78   -webkit-transition-duration: 0.25s;
  79   -moz-transition-duration: 0.25s;
  80   transition-duration: 0.25s;
  81 }
  82 .claro .dijitTreeRowActive {
  83   background-color: #7dbdfa;
  84   background-image: url("images/commonHighlight.png");
  85   background-position: 0 -177px;
  86   padding: 3px 0 1px;
  87   margin-left: 0;
  88   border: solid 1px #759dc0;
  89   color: #000000;
  90 }
  91 .dj_ie6 .claro .dijitTreeRow {
  92   background-image: none;
  93 }
  94 .claro .dijitTreeRowFocused {
  95   background-repeat: repeat;
  96 }
  97 /* expando (open/closed) icon */
  98 .claro .dijitTreeExpando {
  99   background-image: url("images/treeExpandImages.png");
 100   width: 16px;
 101   height: 16px;
 102   background-position: -35px 0;
 103   /* for dijitTreeExpandoOpened */
 104
 105 }
 106 .dj_ie6 .claro .dijitTreeExpando {
 107   background-image: url("images/treeExpandImages8bit.png");
 108 }
 109 .claro .dijitTreeRowHover .dijitTreeExpandoOpened {
 110   background-position: -53px 0;
 111 }
 112 .claro .dijitTreeExpandoClosed {
 113   background-position: 1px 0;
 114 }
 115 .claro .dijitTreeRowHover .dijitTreeExpandoClosed {
 116   background-position: -17px 0;
 117 }
 118 .claro .dijitTreeExpandoLeaf, .dj_ie6 .claro .dijitTreeExpandoLeaf {
 119   background-image: none;
 120 }
 121 .claro .dijitTreeExpandoLoading {
 122   background-image: url("images/loadingAnimation.gif");
 123 }
 124 /* Drag and Drop on TreeNodes
 125  * Put insert line on dijitTreeContent node so it's aligned w/
 126  * (ie, indented equally with) target element, even
 127  * though dijitTreeRowNode is the actual "drag object"
 128  */
 129 .claro .dijitTreeNode .dojoDndItemBefore .dijitTreeContent {
 130   border-top: 2px solid #759dc0;
 131 }
 132 .claro .dijitTreeNode .dojoDndItemAfter .dijitTreeContent {
 133   border-bottom: 2px solid #759dc0;
 134 }