hy-checkbox/lib/Tree/tree.less

checkbox & radio ui components for react

/*
 * @Author: SiMeiyu 
 * @Date: 2017-07-04 10:08:27 
 */ 
@import "../../app/variables.less";

.@{ult-prefix}-tree {
  &-node {
    position: relative;
    font-size: @font-size-base;
    &-title {
      cursor: pointer;
      color: @tree-text-color;
      display: inline-block;
      &[href] {
        text-decoration: underline;
      }
      &:hover,
      &:active,
      &-selected {
        color: @primary;
      }
      &-selected {
        text-decoration: underline;
      }
    }
    &-line {
      position: absolute;
      display: block;
      left: @base-space;
      top: -6px;
      width: 12px;
      height: 16px;
      border-left: 1px dotted @border;
      border-bottom: 1px dotted @border;
    }
    &-checkbox {
      display: inline-block;
      width: 14px;
      height: 14px;
      border: 1px solid #bdbdbd;
      border-radius: @border-radius;
      margin-bottom: -2px;
      margin-right: @base-space / 2;
      cursor: pointer;
      &:hover {
        border-color: @primary-hover;
      }
      &-checked {
        border-color: @primary;
        background-color: @primary;
        position: relative;
        &::after {
            content: '';
            position: absolute;
            width: 6px;
            height: 4px;
            border-style: solid;
            border-width: 0 0 2px 2px;
            border-color: transparent transparent @white @white;
            border-radius: 1px;
            top: 2px;
            left: 2px;
            transform: rotate(-45deg);
        }
      }
    }
    &-switch {
      position: relative;
      display: inline-block;
      cursor: pointer;
      font-size: 13px;
      line-height: 1;
      margin-right: @base-space;
      margin-top: -1px;
      color: @text-title;
      &::before {
        width: @tree-switch-width;
        height: @tree-switch-width;
        border: 1px solid transparent;
      }
      &.icon-add, &.icon-minus {
        color: @tree-switch-color;
        background-color: @white;
        &::before {
          border-color: @border;
        }
      }
    }
    ul {
      padding-left: @tree-node-ul-left;  
      padding-top: 8px;  
      padding-bottom: 8px;  
    }
    &:not(:last-child) {
      .@{ult-prefix}-tree-line {
        position: relative;
        &::before {
          content: '';
          position: absolute;
          left: 8px;
          top: 0;
          width: 1px;
          height: 100%;
          border-left: 1px dotted @border;
        }
      }
    }
    &-leaf {
      padding-left: @tree-node-ul-left; 
    }
    &-parent {
      & + .@{ult-prefix}-tree-node-leaf {
        > .@{ult-prefix}-tree-node-line {
          height: 10px;
          top: 0;
        }
      }
    }
  }
  &-root > li:first-child {
    > .@{ult-prefix}-tree-node-line {
      border-left: none;
    }
  }
}