mirror of
https://github.com/silverstripe/silverstripe-framework
synced 2024-08-27 21:15:40 +02:00
212 lines
4.2 KiB
CSS
212 lines
4.2 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;
|
|
}
|
|
|
|
ul.tree span.a {
|
|
cursor: pointer;
|
|
}
|
|
|
|
/*
|
|
* 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;
|
|
}
|
|
|
|
/**
|
|
* Multiselect
|
|
*/
|
|
ul.tree span.a.current {
|
|
font-weight: bold;
|
|
background-color: #EEEEFF !important;
|
|
border-top: 1px #CCCCFF solid;
|
|
border-bottom: 1px #CCCCFF solid;
|
|
/* these push the highlight out to the left of the window */
|
|
margin-left: -100px;
|
|
padding-left: 100px;
|
|
background-position: 100px 50%;
|
|
/*position: relative;*/
|
|
}
|
|
|
|
ul.tree span.a.loading span.b span.c a {
|
|
background-image: url(../../images/network-save.gif) !important;
|
|
margin-left: -3px;
|
|
padding-left: 21px;
|
|
background-position : 2px 2px;
|
|
}
|
|
|
|
ul.tree.multiselect span.a span.b a {
|
|
background-image: url(../../images/tickbox-unticked.gif) !important;
|
|
}
|
|
|
|
ul.tree.multiselect span.a.nodelete span.b a {
|
|
background-image: url(../../images/tickbox-canttick.gif) !important;
|
|
}
|
|
ul.tree.multiselect span.a.treeloading span.b a {
|
|
background-image: url(../../images/tickbox-greyedout.gif) !important;
|
|
}
|
|
ul.tree.multiselect span.a.failed span.b a {
|
|
background-image: url(../../images/tickbox-fail.gif) !important;
|
|
}
|
|
|
|
|
|
ul.tree.multiselect span.a.selected span.b span.c a {
|
|
background-image: url(../../images/tickbox-ticked.gif) !important;
|
|
}
|
|
|
|
/* Span-B: Plus/Minus icon */
|
|
ul.tree.multiselect li.selected span.a.children span.b,
|
|
ul.tree.multiselect li.selected span.a.unexpanded span.b {
|
|
background-image: none;
|
|
cursor: default;
|
|
} |