Skip to content

Instantly share code, notes, and snippets.

@CodeMyUI

CodeMyUI/file-tree-css.markdown

Created January 12, 2020 22:51
Show Gist options
  • Save CodeMyUI/f6dc5437117e63df705c0cdef804ae8a to your computer and use it in GitHub Desktop.
Save CodeMyUI/f6dc5437117e63df705c0cdef804ae8a to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. CodeMyUI created this gist Jan 12, 2020.
    7 changes: 7 additions & 0 deletions file-tree-css.markdown
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,7 @@
    File Tree CSS
    -------------
    Saw a file tree structure online and had to create a SASS version for BootAdmin.org.

    A [Pen](https://codepen.io/sazzad/pen/gEEKQb) by [Sazzad](https://codepen.io/sazzad) on [CodePen](https://codepen.io).

    [License](https://codepen.io/sazzad/pen/gEEKQb/license).
    30 changes: 30 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,30 @@
    <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>
    80 changes: 80 additions & 0 deletions style.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,80 @@
    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;
    }
    }
    }
    }
    3 changes: 3 additions & 0 deletions styles
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,3 @@
    <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" />