Homec4science
Diffusion SHRINE MedCo Fork (feature/sprint2) Browse

shrine-medco/tools/js/demos/steward/graph-horizontal.css
b00e009a5750feature/sprint2

Last Change
Raw File

graph-horizontal.css
View Options

.tree ul{
display:inline-block;
/*0position: relative; */
float: left;
clear: left;
margin:.25em;
padding:0;
/*background: pink;*/
}
/*
.tree ul:before{
content:"";
position: absolute;
z-index: 1;
top: .25em;
right:auto;
bottom:0;
left: 1.75em;
margin: auto;
border-right: dotted #C0C0C0 .1em;
width: 0;
height: 50%;
}*/
.tree>ul::before{
display:none
}
.test{
position: absolute;
z-index: 4;
top:0;
left:-.5em;
margin:.65em;
padding:0;
width:.8em;
height: .8em;
text-align:center;
line-height: .6em;
font-size: 1em;
background-color: white;
color: #C0C0C0;
border: 1px solid #94a0b4;
}
.tree ul>li{
display: block;
position: relative;
float: left;
clear: both;
right:auto;
padding-left: 1em;
width:auto;
text-align: center;
color:white;
/*background: gray;*/
}
/*ul>li>input{
display:block;
position: absolute;
float: left; z-index: 4;
margin:0 0 0 -1em; padding:0;
width:1em; height: 2em;
font-size: 1em;
opacity: 0;
cursor: pointer;
}
ul>li>input:checked~ul:before{
display: none;
}
ul>li>input:checked~ul:after{
content: "+"
}
ul>li>input:checked~ul *{
display: none;
}*/
.tree ul>li>a{
display: block;
position: relative; float: left;
z-index: 4;
margin:.25em;
padding:.25em;
background: white;
color: #C0C0C0;
border: 1px solid #94a0b4;
}
/*.tree ul>li>a:after{
content: "";
display: block;
position: absolute;
left:-1em;
top:0;
bottom:0;
margin: auto .25em auto .25em;
border-top: dotted black .1em;
width: .75em; height: 0;
}
ul>li:last-child:before{
content: "";
display: block;
position: absolute;
z-index: 2;
top:1em;
left:0;
bottom:-.25em;
width:.75em; height:auto;
/*background:lightblue;*/
/*}*/
.tree > ul{
position: relative;
font-family: "Georgia";
}
.tree > ul:before{
left:.5em;
}
.tree > ul:after{
display: none;
}
/*decoration*/
/*
ul,ul>li:last-child:before{
background: white;
}
ul>li{
background: transparent;
}*/
ul:after{
/*background: white;*/
color: blue;
border:solid gray 1px;
border-radius: .1em;
}
ul>li>a{
border-radius: .25em;
color: blue;
background: white;
}
.tree li span.test:hover,
.tree li span.test:hover + a,
.tree li span.test:hover + a + ul li a,
.tree li a:hover,
.tree li a:hover + ul li a {
background: rgba(50, 130, 136, .25) !important;
color: #efefef;
border: 1px solid #99C794 !important;
cursor: pointer;
z-index: 1000;
}
.tree li a:hover + ul li::after,
.tree li a:hover + ul li::before,
.tree li a:hover + ul::before,
.tree li a:hover + ul ul::before {
border-color: #99C794 !important;
}
c4science · Help