File: public/mdb/scss/free/_treeview.scss

// Treeview
.treeview {
  &.w-20 {
    width: 20rem;
  }
  .rotate {
    margin-top: .2rem;
    font-size: .8rem;
    vertical-align: text-top;
    cursor: pointer;
    user-select: none;
    transition: all .1s linear;
    &.down {
      transform: rotate(90deg);
    }
  }
  .nested {
    display: none;
  }
  .active {
    display: block;
  }
  ul {
    list-style-type: none;
  }
  .ic-w {
    width: 1.3rem;
  }
}

.treeview-animated {
  &.w-20 {
    width: 20rem;
  }
  ul {
    position: relative;
    padding-left: 1em;
    list-style: none;
  }

  .treeview-animated-list {
    li {
      padding: .2em 0 0 .2em;
    }

    .treeview-animated-items {

      .nested {
        &::before {
          position: absolute;
          left: 5px;
          display: block;
          width: 5px;
          height: 100%;
          content: "";
          background-color: #808080;
        }
      }

      .closed {
        display: block;
        padding: .2em .2em .2em .4em;
        margin-right: 0;
        border-top-left-radius: .3em;
        border-bottom-left-radius: .3em;

        &:hover {
          background-color: rgb(140, 185, 255);
        }

        .fa-angle-right {
          font-size: .8rem;
          transition: all .1s linear;

          &.down {
            position: relative;
            color: #f8f9fa;
            transform: rotate(90deg);
          }
        }
      }

      .open {
        background-color: rgb(50, 160, 255);
        transition: all .1s linear;

        &:hover {
          color: #f8f9fa;
          background-color: rgb(50, 160, 255);
        }

        span {
          color: #f8f9fa;
        }
      }
    }

    .treeview-animated-element {
      padding: .2em .2em .2em .6em;
      cursor: pointer;
      border-top-left-radius: 4px;
      border-bottom-left-radius: 4px;
      transition: all .1s linear;

      &:hover {
        background-color: rgb(140, 185, 255);
      }

      &.opened {
        color: #f8f9fa;
        background-color: rgb(50, 160, 255);

        &:hover {
          color: #f8f9fa;
          background-color: rgb(50, 160, 255);
        }
      }
    }
  }
}

.treeview-colorful {
  font-size: 16px;
  font-weight: 400;
  background: rgba(224, 127, 178, .2);

  &.w-20 {
    width: 20rem;
  }

  hr {
    border-color: #a2127a;
  }

  h6 {
    font-size: 1.4em;
    font-weight: 500;
    color: #a2127a;
  }

  ul {
    position: relative;
    padding-left: 0;
    list-style: none;
  }

  .treeview-colorful-list {

    ul {
      padding-left: 1em;
      margin-top: .1em;
      background: rgba(224, 127, 178, .2);
    }
  }

  .treeview-colorful-element {
    padding: .2em .2em .2em 1em;
    cursor: pointer;
    border: 2px solid transparent;
    border-right: 0 solid transparent;
    transition: all .1s linear;

    &:hover {
      background-color: #e07fb2;
    }

    &.opened {
      color: #ffac47;
      background-color: #a2127a;
      border: 2px solid #ffac47;
      border-right: 0 solid transparent;

      &:hover {
        color: #ffac47;
        background-color: #a2127a;
      }
    }

  }
  .treeview-colorful-items-header {
    display: block;
    padding: .4em;
    margin-right: 0;
    border-bottom: 2px solid transparent;
    transition: all .1s linear;

    &:hover {
      background-color: #e07fb2;
    }

    &.open {
      background-color: #a2127a;
      border-bottom: 2px solid #ffac47;
      transition: all .1s linear;

      span {
        color: #ffac47;
      }

      &:hover {
        color: #ffac47;
        background-color: #a2127a;
      }

      div:hover {
        background-color: #a2127a;
      }
    }

    .fa-angle-right {
      font-size: .8rem;
      transition: all .2s linear;
    }

    .fas {
      position: relative;
      color: #ffac47;
      transition: all .2s linear;
      transform: rotate(90deg);
    }

    .fa-minus-circle {
      position: relative;
      color: #ffac47;
      transition: all .2s linear;
      transform: rotate(180deg);
    }
  }
}