Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
File Tree CSS

File Tree CSS

Saw a file tree structure online and had to create a SASS version for BootAdmin.org.

A Pen by Sazzad on CodePen.

License.

<div class="tree">
<ul>
<li><i class="fa fa-folder-open"></i> Project
<ul>
<li><i class="fa fa-folder-open"></i> Opened Folder <span>- 15kb</span>
<ul>
<li><i class="fa fa-folder-open"></i> css
<ul>
<li><i class="fa fa-code"></i> CSS Files <span>- 3kb</span>
</li>
</ul>
</li>
<li><i class="fa fa-folder"></i> Folder close <span>- 10kb</span>
</li>
<li><i class="fab fa-html5"></i> index.html</li>
<li><i class="fa fa-picture-o"></i> favicon.ico</li>
</ul>
</li>
<li><i class="fa fa-folder"></i> Folder close <span>- 420kb</span>
</li>
</ul>
</li>
</ul>
</div>
<div class="mt-5 pl-3">
<strong>Note:</strong> Saw this online and had to create a SASS version for <a href="http://bootadmin.org">BootAdmin.org</a>.
</div>
body {
font-size: 1rem;
background: #f5f5f5;
}
.tree {
position: relative;
background: white;
margin-top: 20px;
padding: 30px;
font-family: 'Roboto Mono', monospace;
font-size: .85rem;
font-weight: 400;
line-height: 1.5;
color: #212529;
span {
font-size: 13px;
font-style: italic;
letter-spacing: .4px;
color: #a8a8a8;
}
.fa-folder-open, .fa-folder {
color: #007bff;
}
.fa-html5 {
color: #f21f10;
}
ul {
padding-left: 5px;
list-style: none;
li {
position: relative;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 15px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
&:before {
position: absolute;
top: 15px;
left: 0;
width: 10px;
height: 1px;
margin: auto;
content: '';
background-color: #666;
}
&:after {
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 1px;
height: 100%;
content: '';
background-color: #666;
}
&:last-child:after {
height: 15px;
}
}
a {
cursor: pointer;
&:hover {
text-decoration: none;
}
}
}
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.0/css/all.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.1/css/all.min.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.