File Tree CSS

file-tree-css.markdown

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.

index.html

<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>

style.scss

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;
      }
    }
  }
}

styles

<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" />