documon/template/assets/js/documon/menutree/MenuTree.css

A documentation system for mortals. Use with any language.

/*
Part of Documon.
Copyright (c) Michael Gieson.
www.documon.net
 */



/* -----------------------------------------------------------------
menu
----------------------------------------------------------------- */

/* if you need to position the menu, wrap it in a container */


.menu {
	position : absolute;
    margin-top : 0px; /* rather than left/top, we need to defeat the "menu ul" selector. */
    margin-left : -40px;
    font-size : 13px;
    line-height: 1.6em;
    cursor: default;
    /*overflow : hidden;   prevents horizontal scroll bar */
    min-width : 100%; /* allows the selected item's background to extend to the right after scroll */
    min-height : 100%; /* thanks https://stackoverflow.com/questions/36001590/css-width-100-limited-to-browser-window-it-doesnt-extend-to-right-scrolling-a */
}

.menu ul, .menu li {
    margin : 0;
    padding : 0;
    position : relative;
}

.menu ul {
	list-style: none;
    margin-left: 1.2em;  /* +1 for indentation, +0.5 for overall menu margin-left, -.2 to tighten up */
}

 /* Use a negative margin to push way off to the left 
 so highlighted (selected) item's background color extends 
 to the left-edge. Then use padding to re-compensate for
 the massive push. +0.5 to match the +0.5 overall menu margin-left

So if you want the overall menu to have more or less padding,
you'll have to +/- margin-left to both UL and LI. Because if
you were to add margin to the .menu class, the selected line 
will show a gap on the left.
 */

.menu li {
   	margin-left: -20em;
    padding-left: 20.5em;
    white-space:nowrap;
    /*width : 100%;*/
}

/*
.menu li:after {
	border-right : 10px solid #FF0000;
}


.menu li > span {
    width : 200%;
}
*/

/* alternating background line colors 
.menu li:nth-child(2n-1) {
	background-color : #f5f5f5;
}*/


.menu-current {
	background-color : #3f95fd;
}
.menu-current span, .menu-current i:before {
	color : #FFFFFF !important; /* must override existing forcefully */
}


.menu a {
    text-decoration : none;
    /* to center the text vertically hacky */
    color: #6D6D6D;
    cursor: default;
}

.menu-label {
    padding-left : 0.4em;
}
.classes-item ~ .menu-label, .properties-item ~ .menu-label, .events-item ~ .menu-label {
    padding-left : 0.2em;
}

/* For the properties, methods, events sub-sections parts */
.menu-label part {
	color: #B6B6B6;
    border-top: solid 1px #D9D9D9;
    text-transform: lowercase;
}


/* click to open section */
.menu-opener {
	width : 1em;
	font-size : 0.8em;
    color: #929292;
    margin-right : 0.2em;
    transition: transform 100ms ease-in-out;  /* property | duration | ease | delay */
}

/* a fake icon spacing so "classes" wthout parts doesn't shift-left */

.menu-no-opener {
	width : 1.2em; /* combine .menu-opener width + margin-right */
	font-size : 0.8em; /* sames as .menu-opener */
	content : ' ';
}

.menu-opener:hover {
	color: #000000;
}

.menu-closed {
    transform : rotate(0deg) translate(0, -0.2em); /* tx, ty */
}

.menu-closed:before {
    content: '\f04b'; /* fa-play: \f04b */
}

.menu-opened {
    transform : rotate(90deg) translate(-0.0em, 0.2em); /* tx, ty <-- but rotation makes it seem inverted! */
}
.menu-opened:before {
    /* Trying to account for differences between the arrow sizes. */
    content: '\f04b'; /* \25BE */
}

.menu-section-open {
	transform: scale(1);
}

.menu-section-close {
	transform: scale(0);
}


/*
http://fontawesome.io/cheatsheet/
 */
.menu i.packages-item, 
.menu i.classes-item, 
.menu i.properties-item, 
.menu i.events-item, 
.menu i.methods-item {
	width : 1.5em;
	text-align : center;
}

.menu i.packages:before,
.menu i.classes:before {
    color: #ECB51C;
    font-size: 1.33333333em;
    line-height: 0.75em;
    vertical-align: -15%;
    content: "\f07b"; /* folder: f07b, cubes: f1b3 */
}

.menu i.packages-item:before {
    color: #ECB51C;
    font-size: 1.33333333em;
    line-height: 0.75em;
    vertical-align: -15%;
    content: "\f07b"; /* folder: f07b, cube: f1b2 */
}

.menu i.classes:before {
    color: #46A2F9;
    font-size: 1.33333333em;
    line-height: 0.75em;
    vertical-align: -15%;
    content: "\f07b"; /* folder: f07b, cube: f1b2 */
}

.menu i.classes-item:before {
    color: #46A2F9;
    content: "\f016"; /* file solid: f15b, hollow: f016, with text lines hollow: f0f6, solid: f15c */
}

.menu i.properties:before {
    color: #2DB1B1;
    content: "\f02c"; /* dot-circle: f192, elipsis: f141, exchange: f0ec, tags:f02c */
}

.menu i.properties-item:before {
    color: #2DB1B1;
    content: "\f02b"; /* genderless: f22d, exchange: f0ec, vertical: f142, tag: f02b*/
}

.menu i.events:before {
    color: #C09735;
    content: "\f09e"; /* rss */
}

.menu i.events-item:before {
    color: #C09735;
    content: "\f1eb"; /* wifi */
}

.menu i.methods:before {
    color: #CA4CD8;
    content: "\f085"; /* cogs f085 */
}

.menu i.methods-item:before {
    color: #CA4CD8;
    content: "\f013"; /* gear f013  */
}


.menu i.more-folder:before {
    color: #7F7F7F;
    content: "\f07b"; /* file solid: f15b, hollow: f016, with text lines hollow: f0f6, solid: f15c */
}
.menu i.more-file:before {
    color: #7F7F7F;
    content: "\f016"; /* file solid: f15b, hollow: f016, with text lines hollow: f0f6, solid: f15c */
}

/*
properties	2DB1B1	468483
events		C09735	BC42CC
methods		D311DC 0391F9 B847E4	633372
 */