silverstripe-framework/javascript/tree/tree.css
Mateusz Uzdowski 7f2f5b79f0 MINOR: folders without children in trees now have the folder icon
git-svn-id: svn://svn.silverstripe.com/silverstripe/open/modules/sapphire/branches/2.4@97035 467b73ca-7a2a-4603-9d3b-597d59a354a9
2011-02-02 14:18:09 +13:00

160 lines
2.9 KiB
CSS

/*
* Default CSS for tree-view
*/
ul.tree{
width: auto;
padding-left: 0;
margin-left: 0;
}
ul.tree img {
border: none;
}
ul.tree, ul.tree ul {
padding-left: 0;
}
ul.tree ul {
margin-left: 16px;
}
ul.tree li.closed ul {
display: none;
}
ul.tree li {
list-style: none;
background: url(images/i-repeater.gif) repeat-y 1 0;
display: block;
width: auto;
}
ul.tree li.last {
list-style: none;
background-image: none;
}
/* Span-A: I/L/I glpyhs */
ul.tree span.a {
background: url(images/t.gif) no-repeat 0 50%;
display: block;
}
ul.tree .a.last {
background: url(images/l.gif) no-repeat 0 50%;
}
/* Span-B: Plus/Minus icon */
ul.tree span.b {
}
ul.tree span.a.children span.b {
display: inline-block;
background: url(images/minus.gif) no-repeat 0 50%;
cursor: pointer;
}
ul.tree li.closed span.a span.b, ul.tree span.a.unexpanded span.b {
display: inline-block;
background: url(images/plus.gif) no-repeat 0 50%;
cursor: pointer;
}
/* Span-C: Spacing and extending tree line below the icon */
ul.tree span.c {
margin-left: 16px;
}
ul.tree span.a.children span.c, ul.tree span.a.spanClosed span.c {
background: url(images/i-bottom.gif) no-repeat 0 50%;
}
ul.tree span.a.spanClosed span.c, ul.tree span.a.unexpanded span.c {
background-image: none;
}
/* Anchor tag: Page icon */
ul.tree span.c {
white-space: nowrap;
}
ul.tree a {
display: inline-block; /* IE needs this */
white-space: pre;
overflow: hidden;
padding: 3px 0 1px 19px;
line-height: 16px;
background: url(images/page-file.png) no-repeat 0 50%;
background-position: 0 50% !important;
text-decoration: none;
outline: none;
font-size: 11px;
}
ul.tree a * {
font-size: 11px;
}
ul.tree a:hover {
text-decoration: underline;
}
ul.tree span.a.spanClosed a, ul.tree span.a.Folder a {
background-image: url(images/page-closedfolder.png);
}
ul.tree span.a.children a {
background-image: url(images/page-openfolder.png);
}
/* Unformatted tree */
ul.tree.unformatted li {
background-image: none;
padding-left: 16px;
}
ul.tree.unformatted li li {
background-image: none;
padding-left: 0;
}
/*
Hover / Link tags
*/
ul.tree a:hover{
text-decoration : none;
}
/*
* Divs, by default store vertically aligned data
*/
/* As inside DIVs should be treated normally */
ul.tree div a {
padding: 0;
background-image: none;
min-height: 0;
height: auto;
}
ul.tree li a:link,
ul.tree li a:hover,
ul.tree li a:visited {
color: #111;
}
/*
* Drag and drop styling
*/
ul.tree div.droppable {
float: none;
margin: -7px 0px -7px 16px;
height: 10px;
font-size: 1px;
z-index: 1000;
}
html > body ul.tree div.droppable {
margin: -5px 0px -5px 16px;
}
ul.tree div.droppable.dragOver {
background: url(images/insertBetween.gif) no-repeat 50% 0;
}
ul.tree a.dragOver, ul.tree li.dragOver a, ul.tree li.dragOver li.dragOver a {
border: 3px solid #0074C6;
margin: -3px;
}
ul.tree li.dragOver li a {
border-style: none;
margin: 0;
}