Rev 8906 | Details | Compare with Previous | Last modification | View Log | RSS feed
| Rev | Author | Line No. | Line |
|---|---|---|---|
| 7670 | bpr | 1 | /* |
| 2 | * CSS for Standard tree layout |
||
| 3 | * Copyright (C) 2005 SilverStripe Limited |
||
| 4 | * Feel free to use this on your websites, but please leave this message in the fies |
||
| 5 | * http://www.silverstripe.com/blog |
||
| 6 | */ |
||
| 7 | |||
| 8 | ul.tree{ |
||
| 9 | width: auto; |
||
| 10 | padding-left : 0; |
||
| 11 | margin-left : 0; |
||
| 12 | } |
||
| 13 | |||
| 14 | ul.tree .selected{ |
||
| 15 | border:1px solid green; |
||
| 16 | border-radius:5px; |
||
| 17 | background-color: rgba(0,255,0,0.2); |
||
| 18 | padding:1px 2px; |
||
| 19 | } |
||
| 20 | /*ul.tree .selected:after{ |
||
| 21 | color:green; |
||
| 22 | padding-left:0.5em; |
||
| 23 | content:"\221a"; |
||
| 24 | }*/ |
||
| 25 | |||
| 26 | ul.tree img{border : none;} |
||
| 27 | |||
| 28 | |||
| 29 | ul.tree, ul.tree ul {padding-left: 0;} |
||
| 30 | |||
| 31 | ul.tree ul {margin-left: 16px;} |
||
| 32 | |||
| 33 | ul.tree li.closed ul {display: none;} |
||
| 34 | |||
| 35 | |||
| 36 | ul.tree li { |
||
| 37 | list-style: none; |
||
| 38 | background: url(i-repeater.gif) 0 0 repeat-y; |
||
| 39 | display: block; |
||
| 40 | width: auto; |
||
| 41 | margin:.5em 0 ; |
||
| 42 | line-height:1.5em; |
||
| 43 | /* background-color:#FFFFFF; */ |
||
| 44 | } |
||
| 45 | |||
| 46 | ul.tree li.last { |
||
| 47 | list-style: none; |
||
| 48 | background-image: none; |
||
| 49 | } |
||
| 50 | |||
| 51 | /* Span-A: I/L/I glpyhs */ |
||
| 52 | ul.tree span.a { |
||
| 53 | margin-top: -6px; |
||
| 54 | background: url(t.gif) 0 50% no-repeat; |
||
| 55 | display: block; |
||
| 56 | } |
||
| 57 | |||
| 8595 | obado | 58 | /*ul.tree span.a:visited, ul.tree span.a:active, ul.tree span.a:focus { |
| 7670 | bpr | 59 | background-color:yellow; |
| 8595 | obado | 60 | }*/ |
| 7670 | bpr | 61 | |
| 62 | ul.tree span.a.last { |
||
| 63 | background: url(l.gif) 0 50% no-repeat; |
||
| 64 | } |
||
| 65 | |||
| 66 | /* Span-B: Plus/Minus icon */ |
||
| 8906 | obado | 67 | /*ul.tree span.b { |
| 68 | }*/ |
||
| 7670 | bpr | 69 | ul.tree span.a.children span.b { |
| 70 | background: url(minus.gif) 0 50% no-repeat; |
||
| 71 | cursor: pointer; |
||
| 72 | } |
||
| 73 | ul.tree li.closed span.a.children span.b { |
||
| 74 | background: url(plus.gif) 0 50% no-repeat; |
||
| 75 | cursor: pointer; |
||
| 76 | } |
||
| 77 | |||
| 78 | /* Span-C: Spacing and extending tree line below the icon */ |
||
| 79 | ul.tree span.c { |
||
| 8595 | obado | 80 | display:inline-block; |
| 7670 | bpr | 81 | margin-left: 16px; |
| 8595 | obado | 82 | /*cursor: pointer;*/ |
| 7670 | bpr | 83 | } |
| 9061 | obado | 84 | /*ul.tree li:not(.children) span.c { |
| 8595 | obado | 85 | border-left:1px solid #DFDFDF; |
| 86 | border-bottom:1px solid #DFDFDF; |
||
| 87 | margin-bottom:2px; |
||
| 88 | padding-left:2px; |
||
| 89 | /*color:gray;*/ |
||
| 9061 | obado | 90 | /*padding:2px .5em; |
| 8595 | obado | 91 | border-radius:4px; |
| 9061 | obado | 92 | }*/ |
| 7670 | bpr | 93 | ul.tree span.a.children span.c { |
| 94 | background: url(i-bottom.gif) 0 50% no-repeat; |
||
| 8595 | obado | 95 | /*cursor: pointer;*/ |
| 7670 | bpr | 96 | } |
| 97 | ul.tree span.a.spanClosed span.c { |
||
| 98 | background-image: none; |
||
| 99 | } |
||
| 100 | |||
| 101 | /* Anchor tag: Page icon */ |
||
| 8906 | obado | 102 | ul.tree .tree_icon { |
| 9061 | obado | 103 | /*white-space: nowrap;*/ |
| 7670 | bpr | 104 | overflow: hidden; |
| 105 | padding: 0 0 0 18px; |
||
| 106 | /*line-height: 16px;*/ |
||
| 107 | background: url(page-file.png) 0 50% no-repeat; |
||
| 108 | } |
||
| 8906 | obado | 109 | |
| 110 | |||
| 111 | ul.tree span.a.children .tree_icon, |
||
| 112 | ul.tree span.a.children.spanClosed .tree_icon:hover { |
||
| 7670 | bpr | 113 | background-image: url(page-openfoldericon.png); |
| 114 | } |
||
| 8906 | obado | 115 | |
| 116 | ul.tree span.a.children.spanClosed .tree_icon, |
||
| 117 | ul.tree span.a.children .tree_icon:hover { |
||
| 7670 | bpr | 118 | background-image: url(page-foldericon.png); |
| 119 | } |
||
| 8906 | obado | 120 | ul.tree span.a.children .tree_icon:hover { |
| 121 | text-decoration: underline; |
||
| 122 | } |
||
| 7670 | bpr | 123 | |
| 124 | /* Unformatted tree */ |
||
| 125 | ul.tree.unformatted li { |
||
| 126 | background-image: none; |
||
| 127 | padding-left: 16px; |
||
| 128 | } |
||
| 129 | ul.tree.unformatted li li { |
||
| 130 | background-image: none; |
||
| 131 | padding-left: 0px; |
||
| 132 | } |
||
| 133 | |||
| 134 | /* |
||
| 135 | * Divs, by default store vertically aligned data |
||
| 136 | */ |
||
| 137 | |||
| 138 | ul.tree li div { |
||
| 139 | float: right; |
||
| 140 | clear: right; |
||
| 141 | height: 1em; |
||
| 142 | margin-top: -26px; |
||
| 143 | } |
||
| 144 | /* As inside DIVs should be treated normally */ |
||
| 8906 | obado | 145 | /*ul.tree div a { |
| 7670 | bpr | 146 | padding: 0; |
| 147 | background-image: none; |
||
| 148 | height: auto; |
||
| 8906 | obado | 149 | }*/ |
| 7670 | bpr | 150 | |
| 8906 | obado | 151 | /*ul.tree li a:link, ul.tree li a:hover, ul.tree li a:visited { |
| 7670 | bpr | 152 | color : #111; |
| 8906 | obado | 153 | }*/ |
| 7670 | bpr | 154 | |
| 155 | ul.tree li .over{ |
||
| 156 | background-color : pink; |
||
| 157 | } |