1*342f926fSDavid Wangbody { 2*342f926fSDavid Wang margin: 30px; 3*342f926fSDavid Wang font-family: sans-serif; 4*342f926fSDavid Wang } 5*342f926fSDavid Wang 6*342f926fSDavid Wang#fontSizeWrapper { font-size: 16px; } 7*342f926fSDavid Wang 8*342f926fSDavid Wang#fontSize { 9*342f926fSDavid Wang width: 100px; 10*342f926fSDavid Wang font-size: 1em; 11*342f926fSDavid Wang } 12*342f926fSDavid Wang 13*342f926fSDavid Wang/* ————————————————————– 14*342f926fSDavid Wang Tree core styles 15*342f926fSDavid Wang*/ 16*342f926fSDavid Wang.tree { margin: 1em; } 17*342f926fSDavid Wang 18*342f926fSDavid Wang.tree input { 19*342f926fSDavid Wang position: absolute; 20*342f926fSDavid Wang clip: rect(0, 0, 0, 0); 21*342f926fSDavid Wang } 22*342f926fSDavid Wang 23*342f926fSDavid Wang.tree input ~ ul { display: none; } 24*342f926fSDavid Wang 25*342f926fSDavid Wang.tree input:checked ~ ul { display: block; } 26*342f926fSDavid Wang 27*342f926fSDavid Wang/* ————————————————————– 28*342f926fSDavid Wang Tree rows 29*342f926fSDavid Wang*/ 30*342f926fSDavid Wang.tree li { 31*342f926fSDavid Wang line-height: 1.2; 32*342f926fSDavid Wang position: relative; 33*342f926fSDavid Wang padding: 0 0 1em 1em; 34*342f926fSDavid Wang } 35*342f926fSDavid Wang 36*342f926fSDavid Wang.tree ul li { padding: 1em 0 0 1em; } 37*342f926fSDavid Wang 38*342f926fSDavid Wang.tree > li:last-child { padding-bottom: 0; } 39*342f926fSDavid Wang 40*342f926fSDavid Wang/* ————————————————————– 41*342f926fSDavid Wang Tree labels 42*342f926fSDavid Wang*/ 43*342f926fSDavid Wang.tree_label { 44*342f926fSDavid Wang position: relative; 45*342f926fSDavid Wang display: inline-block; 46*342f926fSDavid Wang background: #fff; 47*342f926fSDavid Wang } 48*342f926fSDavid Wang 49*342f926fSDavid Wanglabel.tree_label { cursor: pointer; } 50*342f926fSDavid Wang 51*342f926fSDavid Wanglabel.tree_label:hover { color: #666; } 52*342f926fSDavid Wang 53*342f926fSDavid Wang/* ————————————————————– 54*342f926fSDavid Wang Tree expanded icon 55*342f926fSDavid Wang*/ 56*342f926fSDavid Wanglabel.tree_label:before { 57*342f926fSDavid Wang background: #000; 58*342f926fSDavid Wang color: #fff; 59*342f926fSDavid Wang position: relative; 60*342f926fSDavid Wang z-index: 1; 61*342f926fSDavid Wang float: left; 62*342f926fSDavid Wang margin: 0 1em 0 -2em; 63*342f926fSDavid Wang width: 1em; 64*342f926fSDavid Wang height: 1em; 65*342f926fSDavid Wang border-radius: 1em; 66*342f926fSDavid Wang content: '+'; 67*342f926fSDavid Wang text-align: center; 68*342f926fSDavid Wang line-height: .9em; 69*342f926fSDavid Wang } 70*342f926fSDavid Wang 71*342f926fSDavid Wang:checked ~ label.tree_label:before { content: '–'; } 72*342f926fSDavid Wang 73*342f926fSDavid Wang/* ————————————————————– 74*342f926fSDavid Wang Tree branches 75*342f926fSDavid Wang*/ 76*342f926fSDavid Wang.tree li:before { 77*342f926fSDavid Wang position: absolute; 78*342f926fSDavid Wang top: 0; 79*342f926fSDavid Wang bottom: 0; 80*342f926fSDavid Wang left: -.5em; 81*342f926fSDavid Wang display: block; 82*342f926fSDavid Wang width: 0; 83*342f926fSDavid Wang border-left: 1px solid #777; 84*342f926fSDavid Wang content: ""; 85*342f926fSDavid Wang } 86*342f926fSDavid Wang 87*342f926fSDavid Wang.tree_label:after { 88*342f926fSDavid Wang position: absolute; 89*342f926fSDavid Wang top: 0; 90*342f926fSDavid Wang left: -1.5em; 91*342f926fSDavid Wang display: block; 92*342f926fSDavid Wang height: 0.5em; 93*342f926fSDavid Wang width: 1em; 94*342f926fSDavid Wang border-bottom: 1px solid #777; 95*342f926fSDavid Wang border-left: 1px solid #777; 96*342f926fSDavid Wang border-radius: 0 0 0 .3em; 97*342f926fSDavid Wang content: ''; 98*342f926fSDavid Wang } 99*342f926fSDavid Wang 100*342f926fSDavid Wanglabel.tree_label:after { border-bottom: 0; } 101*342f926fSDavid Wang 102*342f926fSDavid Wang:checked ~ label.tree_label:after { 103*342f926fSDavid Wang border-radius: 0 .3em 0 0; 104*342f926fSDavid Wang border-top: 1px solid #777; 105*342f926fSDavid Wang border-right: 1px solid #777; 106*342f926fSDavid Wang border-bottom: 0; 107*342f926fSDavid Wang border-left: 0; 108*342f926fSDavid Wang bottom: 0; 109*342f926fSDavid Wang top: 0.5em; 110*342f926fSDavid Wang height: auto; 111*342f926fSDavid Wang } 112*342f926fSDavid Wang 113*342f926fSDavid Wang.tree li:last-child:before { 114*342f926fSDavid Wang height: 1em; 115*342f926fSDavid Wang bottom: auto; 116*342f926fSDavid Wang } 117*342f926fSDavid Wang 118*342f926fSDavid Wang.tree > li:last-child:before { display: none; } 119*342f926fSDavid Wang 120*342f926fSDavid Wang.tree_custom { 121*342f926fSDavid Wang display: block; 122*342f926fSDavid Wang background: #eee; 123*342f926fSDavid Wang padding: 1em; 124*342f926fSDavid Wang border-radius: 0.3em; 125*342f926fSDavid Wang} 126