<header>
<h1>Pure <strong>CSS</strong> Tree</h1>
<p>...a folders tree view, without JS :P</p>
</header>
<ul id="compositions-list" class="pure-tree main-tree">
<li>
<input type="checkbox" id="trigger-views" checked="checked">
<label for="trigger-views">views</label>
<ul class="pure-tree">
<li class="pure-tree_link"><a href="" title="index.jade" target="_blank">index.html</a></li>
<li>
<input type="checkbox" id="trigger-layout">
<label for="trigger-layout">layout</label>
<ul class="pure-tree">
<li>
<input type="checkbox" id="trigger-base">
<label for="trigger-base">base</label>
<ul class="pure-tree">
<li class="pure-tree_link"><a href="" title="index.jade" target="_blank">index.html</a></li>
</ul>
</li>
<li>
<input type="checkbox" id="trigger-footer">
<label for="trigger-footer">footer</label>
<ul class="pure-tree">
<li class="pure-tree_link"><a href="" title="index.jade" target="_blank">index.html</a></li>
</ul>
</li>
</ul>
</li>
<li>
<input type="checkbox" id="trigger-partials">
<label for="trigger-partials">partials</label>
<ul class="pure-tree">
<li>
<input type="checkbox" id="trigger-header">
<label for="trigger-header">header</label>
<ul class="pure-tree">
<li class="pure-tree_link"><a href="" title="index.jade" target="_blank">index.html</a></li>
</ul>
</li>
<li>
<input type="checkbox" id="trigger-list">
<label for="trigger-list">list</label>
<ul class="pure-tree">
<li class="pure-tree_link"><a href="" title="index.jade" target="_blank">index.html</a></li>
</ul>
</li>
<li>
<input type="checkbox" id="trigger-message">
<label for="trigger-message">message</label>
<ul class="pure-tree">
<li class="pure-tree_link"><a href="" title="index.jade" target="_blank">index.html</a></li>
</ul>
</li>
<li>
<input type="checkbox" id="trigger-panel">
<label for="trigger-panel">panel</label>
<ul class="pure-tree">
<li class="pure-tree_link"><a href="" title="index.jade" target="_blank">index.html</a></li>
</ul>
</li>
<li>
<input type="checkbox" id="trigger-prompt">
<label for="trigger-prompt">prompt</label>
<ul class="pure-tree">
<li class="pure-tree_link"><a href="" title="index.jade" target="_blank">index.html</a></li>
</ul>
</li>
<li>
<input type="checkbox" id="trigger-sub-header">
<label for="trigger-sub-header">sub-header</label>
<ul class="pure-tree">
<li class="pure-tree_link"><a href="" title="index.jade" target="_blank">index.html</a></li>
</ul>
</li>
</ul>
</li>
<li>
<input type="checkbox" id="trigger-ui">
<label for="trigger-ui">ui</label>
<ul class="pure-tree">
<li>
<input type="checkbox" id="trigger-box-color">
<label for="trigger-box-color">box-color</label>
<ul class="pure-tree">
<li class="pure-tree_link"><a href="" title="index.jade" target="_blank">index.html</a></li>
</ul>
</li>
<li>
<input type="checkbox" id="trigger-button">
<label for="trigger-button">button</label>
<ul class="pure-tree">
<li class="pure-tree_link"><a href="" title="index.jade" target="_blank">index.html</a></li>
</ul>
</li>
<li>
<input type="checkbox" id="trigger-charts">
<label for="trigger-charts">charts</label>
<ul class="pure-tree">
<li>
<input type="checkbox" id="trigger-border">
<label for="trigger-border">border</label>
<ul class="pure-tree">
<li class="pure-tree_link"><a href="" title="index.jade" target="_blank">index.html</a></li>
</ul>
</li>
<li>
<input type="checkbox" id="trigger-progress">
<label for="trigger-progress">progress</label>
<ul class="pure-tree">
<li class="pure-tree_link"><a href="" title="index.jade" target="_blank">index.html</a></li>
</ul>
</li>
</ul>
</li>
<li>
<input type="checkbox" id="trigger-check">
<label for="trigger-check">check</label>
<ul class="pure-tree">
<li class="pure-tree_link"><a href="" title="index.jade" target="_blank">index.html</a></li>
</ul>
</li>
<li>
<input type="checkbox" id="trigger-dropdown">
<label for="trigger-dropdown">dropdown</label>
<ul class="pure-tree">
<li class="pure-tree_link"><a href="" title="index.jade" target="_blank">index.html</a></li>
</ul>
</li>
<li>
<input type="checkbox" id="trigger-input">
<label for="trigger-input">input</label>
<ul class="pure-tree">
<li class="pure-tree_link"><a href="" title="index.jade" target="_blank">index.html</a></li>
</ul>
</li>
<li>
<input type="checkbox" id="trigger-radio">
<label for="trigger-radio">radio</label>
<ul class="pure-tree">
<li class="pure-tree_link"><a href="" title="index.jade" target="_blank">index.html</a></li>
</ul>
</li>
<li>
<input type="checkbox" id="trigger-rating-stars">
<label for="trigger-rating-stars">rating-stars</label>
<ul class="pure-tree">
<li class="pure-tree_link"><a href="" title="index.jade" target="_blank">index.html</a></li>
</ul>
</li>
<li>
<input type="checkbox" id="trigger-textarea">
<label for="trigger-textarea">textarea</label>
<ul class="pure-tree">
<li class="pure-tree_link"><a href="" title="index.jade" target="_blank">index.html</a></li>
</ul>
</li>
<li>
<input type="checkbox" id="trigger-toggle">
<label for="trigger-toggle">toggle</label>
<ul class="pure-tree">
<li class="pure-tree_link"><a href="" title="index.jade" target="_blank">index.html</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
@import 'compass/reset';
@import 'compass/css3';
@import url(https://fonts.googleapis.com/css?family=Open+Sans:700,300);
@import url(http://weloveiconfonts.com/api/?family=fontawesome);
/* fontawesome */
[class*="fa-"]:before {
font-family: 'FontAwesome', sans-serif;
}
body
{
font-family: 'Open Sans', sans-serif;
font-size: 16px;
font-weight: 300;
line-height: 1em;
text-align: center;
color: #444444;
background-color: #d0d0d0;
}
h1
{
font-size: 2.5em;
margin: 2em 0 1em;
}
h2
{
margin-bottom: 3em;
}
em,
strong
{
font-weight: 700;
}
input
{
display: none;
}
header p
{
margin-bottom: 2em;
}
section
{
margin-bottom: 2em;
padding: 0;
&:last-of-type
{
margin-bottom: 0;
}
}
p
{
line-height: 1.5em;
}
.container
{
z-index: 1;
margin-bottom: 4em;
}
.pure-tree
{
text-align: left;
display: block;
&.main-tree
{
width: 30em;
display: inline-block;
}
&:not(.main-tree)
{
padding-left: 1.2em;
li
{
overflow: hidden;
height: 0;
display: block;
}
}
label
{
display: block;
cursor: pointer;
color: #717780;
border-bottom: 1px dashed #B0B9C5;
padding: 1.125em 1.125em 1.125em 0;
&:before
{
width: 1em;
height: 1em;
line-height: 1em;
display: inline-block;
font-family: 'FontAwesome', sans-serif;
content: "\f114";
padding-right: .75em;
}
&:hover
{
color: #434a58;
border-bottom-color: #434a58;
}
}
.pure-tree_link
{
a
{
padding: 1.500em 1.125em 0.750em 0;
display: block;
border-radius: .2em;
color: #717780;
text-decoration: none;
&:hover
{
color: #434a58;
}
}
}
&.nested
{
padding-left: 1.7em;
}
[type="checkbox"]
{
display: none;
&:checked + label
{
color: #434a58;
border-bottom-color: #434a58;
}
&:checked ~ ul > li
{
height: auto;
}
}
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.