examples/ext/resources/css/tree.css

   1 /*\r
   2  * Ext JS Library 1.1.1\r
   3  * Copyright(c) 2006-2007, Ext JS, LLC.\r
   4  * licensing@extjs.com\r
   5  * \r
   6  * http://www.extjs.com/license\r
   7  */\r
   8 \r
   9 .x-tree-icon, .x-tree-ec-icon, .x-tree-elbow-line, .x-tree-elbow, .x-tree-elbow-end, .x-tree-elbow-plus, .x-tree-elbow-minus, .x-tree-elbow-end-plus, .x-tree-elbow-end-minus{\r
  10         border: 0 none;\r
  11         height: 18px;\r
  12         margin: 0;\r
  13         padding: 0;\r
  14         vertical-align: middle;\r
  15         width: 16px;\r
  16     background-repeat: no-repeat;\r
  17 }\r
  18 .x-tree-node-collapsed .x-tree-node-icon, .x-tree-node-expanded .x-tree-node-icon, .x-tree-node-leaf .x-tree-node-icon{\r
  19         border: 0 none;\r
  20         height: 18px;\r
  21         margin: 0;\r
  22         padding: 0;\r
  23         vertical-align: middle;\r
  24         width: 16px;\r
  25         background-position:center;\r
  26     background-repeat: no-repeat;\r
  27 }\r
  28 \r
  29 /* some default icons for leaf/folder */\r
  30 .x-tree-node-collapsed .x-tree-node-icon{\r
  31         background-image:url(../images/default/tree/folder.gif);\r
  32 }\r
  33 .x-tree-node-expanded .x-tree-node-icon{\r
  34         background-image:url(../images/default/tree/folder-open.gif);\r
  35 }\r
  36 .x-tree-node-leaf .x-tree-node-icon{\r
  37         background-image:url(../images/default/tree/leaf.gif);\r
  38 }\r
  39 \r
  40 /* checkboxes */\r
  41 .ext-ie input.x-tree-node-cb {\r
  42     width:15px;\r
  43     height:15px;\r
  44 }\r
  45 input.x-tree-node-cb {\r
  46     margin-left:1px;\r
  47 }\r
  48 .ext-ie input.x-tree-node-cb {\r
  49     margin-left:0;\r
  50 }\r
  51 \r
  52 \r
  53 .x-tree-noicon .x-tree-node-icon{\r
  54         width:0; height:0;\r
  55 }\r
  56 /* loading icon */\r
  57 .x-tree-node-loading .x-tree-node-icon{\r
  58         background-image:url(../images/default/tree/loading.gif) !important;\r
  59 }\r
  60 .x-tree-node-loading a span{\r
  61          font-style: italic;\r
  62          color:#444444;\r
  63 }\r
  64 \r
  65 /* Line styles */\r
  66 .x-tree-lines .x-tree-elbow{\r
  67         background-image:url(../images/default/tree/elbow.gif);\r
  68 }\r
  69 .x-tree-lines .x-tree-elbow-plus{\r
  70         background-image:url(../images/default/tree/elbow-plus.gif);\r
  71 }\r
  72 .x-tree-lines .x-tree-elbow-minus{\r
  73         background-image:url(../images/default/tree/elbow-minus.gif);\r
  74 }\r
  75 .x-tree-lines .x-tree-elbow-end{\r
  76         background-image:url(../images/default/tree/elbow-end.gif);\r
  77 }\r
  78 .x-tree-lines .x-tree-elbow-end-plus{\r
  79         background-image:url(../images/default/tree/elbow-end-plus.gif);\r
  80 }\r
  81 .x-tree-lines .x-tree-elbow-end-minus{\r
  82         background-image:url(../images/default/tree/elbow-end-minus.gif);\r
  83 }\r
  84 .x-tree-lines .x-tree-elbow-line{\r
  85         background-image:url(../images/default/tree/elbow-line.gif);\r
  86 }\r
  87 \r
  88 /* No line styles */\r
  89 .x-tree-no-lines .x-tree-elbow{\r
  90         background:transparent;\r
  91 }\r
  92 .x-tree-no-lines .x-tree-elbow-plus{\r
  93         background-image:url(../images/default/tree/elbow-plus-nl.gif);\r
  94 }\r
  95 .x-tree-no-lines .x-tree-elbow-minus{\r
  96         background-image:url(../images/default/tree/elbow-minus-nl.gif);\r
  97 }\r
  98 .x-tree-no-lines .x-tree-elbow-end{\r
  99         background:transparent;\r
 100 }\r
 101 .x-tree-no-lines .x-tree-elbow-end-plus{\r
 102         background-image:url(../images/default/tree/elbow-end-plus-nl.gif);\r
 103 }\r
 104 .x-tree-no-lines .x-tree-elbow-end-minus{\r
 105         background-image:url(../images/default/tree/elbow-end-minus-nl.gif);\r
 106 }\r
 107 .x-tree-no-lines .x-tree-elbow-line{\r
 108         background:transparent;\r
 109 }\r
 110 \r
 111 .x-tree-elbow-plus, .x-tree-elbow-minus, .x-tree-elbow-end-plus, .x-tree-elbow-end-minus{\r
 112         cursor:pointer;\r
 113 }\r
 114 .ext-ie ul.x-tree-node-ct{\r
 115     font-size:0;\r
 116     line-height:0;\r
 117 }\r
 118 .x-tree-node{\r
 119         color: black;\r
 120         font: normal 11px arial, tahoma, helvetica, sans-serif;\r
 121         white-space: nowrap;\r
 122 }\r
 123 .x-tree-node a, .x-dd-drag-ghost a{\r
 124         text-decoration:none;\r
 125         color:black;\r
 126         -khtml-user-select:none;\r
 127         -moz-user-select:none;\r
 128     -kthml-user-focus:normal;\r
 129     -moz-user-focus:normal;\r
 130     -moz-outline: 0 none;\r
 131     outline:0 none;\r
 132 }\r
 133 .x-tree-node a span, .x-dd-drag-ghost a span{\r
 134         text-decoration:none;\r
 135         color:black;\r
 136         padding:1px 3px 1px 2px;\r
 137 }\r
 138 .x-tree-node .x-tree-node-disabled a span{\r
 139         color:gray !important;\r
 140 }\r
 141 .x-tree-node .x-tree-node-disabled .x-tree-node-icon{\r
 142         -moz-opacity: 0.5;\r
 143    opacity:.5;\r
 144    filter: alpha(opacity=50);\r
 145 }\r
 146 .x-tree-node .x-tree-node-inline-icon{\r
 147         background:transparent;\r
 148 }\r
 149 .x-tree-node a:hover, .x-dd-drag-ghost a:hover{\r
 150         text-decoration:none;\r
 151 }\r
 152 .x-tree-node div.x-tree-drag-insert-below{\r
 153          border-bottom:1px dotted #3366cc;\r
 154 }\r
 155 .x-tree-node div.x-tree-drag-insert-above{\r
 156          border-top:1px dotted #3366cc;\r
 157 }\r
 158 .x-tree-dd-underline .x-tree-node div.x-tree-drag-insert-below{\r
 159          border-bottom:0 none;\r
 160 }\r
 161 .x-tree-dd-underline .x-tree-node div.x-tree-drag-insert-above{\r
 162          border-top:0 none;\r
 163 }\r
 164 .x-tree-dd-underline .x-tree-node div.x-tree-drag-insert-below a{\r
 165          border-bottom:2px solid #3366cc;\r
 166 }\r
 167 .x-tree-dd-underline .x-tree-node div.x-tree-drag-insert-above a{\r
 168          border-top:2px solid #3366cc;\r
 169 }\r
 170 .x-tree-node .x-tree-drag-append a span{\r
 171          background:#dddddd;\r
 172          border:1px dotted gray;\r
 173 }\r
 174 .x-tree-node .x-tree-selected a span{\r
 175         background:#3366cc;\r
 176         color:white;\r
 177 }\r
 178 .x-dd-drag-ghost .x-tree-node-indent, .x-dd-drag-ghost .x-tree-ec-icon{\r
 179         display:none !important;\r
 180 }\r
 181 .x-tree-drop-ok-append .x-dd-drop-icon{\r
 182   background-image: url(../images/default/tree/drop-add.gif);\r
 183 }\r
 184 .x-tree-drop-ok-above .x-dd-drop-icon{\r
 185   background-image: url(../images/default/tree/drop-over.gif);\r
 186 }\r
 187 .x-tree-drop-ok-below .x-dd-drop-icon{\r
 188   background-image: url(../images/default/tree/drop-under.gif);\r
 189 }\r
 190 .x-tree-drop-ok-between .x-dd-drop-icon{\r
 191   background-image: url(../images/default/tree/drop-between.gif);\r
 192 }\r