w-ui/packages/scroll-tree/src/scrolltree.less

A Vue.js 2.0 UI Toolkit for mobile

.wui-scroll-tree{
  width: 100%;
  height: 100%;
  overflow: hidden;

  .wui-scroll-tree-nav{
    min-height: 5000%;
    overflow: hidden;

    .wui-scroll-tree-container{
      display: flex;
      flex-direction: column;
      align-content: center;
      justify-content: flex-start;
      flex-wrap: wrap;
      backface-visibility: hidden;

      .w-tree-item{
        background-color: #eee;
        align-items: center;
        .node-title{
          align-items: center;
          padding: 10px;
        }
        .node-body{
          display: none;
          transition: all 1s linear;
          opacity: 0;

          .w-tree-item{
            .node-title{
              align-items: center;
              padding: 10px 10px 10px 20px;
              position: relative;
            }
            .node-title:before{
              content: ' ';
              width: 6px;
              height: 6px;
              background-color: #666;
              border-radius: 100%;
              position: absolute;
              left: 5px;
              top: 50%;
              transform: translateY(-50%);
            }
          }
          .w-tree-item.active{
            .node-title{
              align-items: center;
              background-color: #fff;
              color: dodgerblue;
            }
            .node-title:before{
              background-color: dodgerblue;
            }
          }
        }
      }
      .w-tree-item.active{
        .node-title{
          border-left: 2px dodgerblue solid;
          background-color: #fff;
        }
        .node-body{
          display: block;
          opacity: 1;

          .w-tree-item{
            .node-title{
              border: none
            }
          }
        }
      }
      
    }
  }
}