rsuite/CheckTree/styles/index.less

A suite of react components

@import '../../styles/common.less';
@import '../../internals/Picker/styles/index.less';
@import '../../Checkbox/styles/index.less';
@import '../../Tree/styles/toggle.less';
@import '../../Tree/styles/indent-line.less';

// Check Tree
// ----------------------

.rs-check-tree {
  height: 100%;
  flex: 1 1 auto;

  .rs-check-tree-node-content {
    .rs-check-item .rs-checkbox-checker {
      > label {
        text-align: left;
        position: relative;
        margin: 0;
        padding: 2px 2px 2px 38px;
      }

      .rs-checkbox-label {
        padding: 6px;
        width: auto;
      }
    }

    &:focus-visible {
      .rs-checkbox-label {
        .focus-ring();
      }
    }
  }

  // Uncheckable state
  .rs-check-tree-node-all-uncheckable .rs-check-item .rs-checkbox-checker > label {
    padding-left: 2px;
  }

  .rs-search-box {
    padding: 6px;
  }

  .rs-check-tree-empty {
    padding: 6px 12px;
    color: var(--rs-text-secondary);
  }

  &-view {
    max-height: 360px;
    overflow-y: auto;
  }

  &.rs-tree-virtualized &-view {
    overflow: hidden;
  }

  .rs-highlight-mark {
    padding: 0;
  }
}

// Only has the first level
.rs-check-tree-without-children .rs-check-item .rs-checkbox-checker {
  > label {
    padding-left: 32px; //text gap + checkbox space

    &::before {
      width: 28px;
      margin-left: -34px;
    }
  }

  .rs-checkbox-control {
    left: 0;
  }
}

.rs-check-tree-group {
  padding-left: 26px;
}

.rs-check-tree-node {
  position: relative;
  display: flex;
  align-items: center;

  .rs-check-item {
    display: inline-block;

    &:hover,
    &:focus,
    &-focus {
      background-color: transparent !important;

      .rs-checkbox-label {
        background-color: var(--rs-listbox-option-hover-bg);
        color: var(--rs-listbox-option-hover-text);
        border-radius: 6px;
      }
    }

    &.rs-checkbox-disabled {
      .rs-checkbox-label {
        color: var(--rs-text-disabled);
        background: none;
      }
    }
  }

  &:focus .rs-check-item .rs-checkbox-checker > label {
    .picker-item-hover();
  }

  .rs-check-item.rs-checkbox-checked .rs-checkbox-checker > label {
    .picker-item-active();
  }
}

// node children
.rs-check-tree-node-children {
  > .rs-check-tree-group {
    position: relative;
    display: none;

    .rs-check-tree-node-expanded& {
      display: block;
    }
  }
}

.rs-check-tree {
  &-node > .rs-check-tree-node-content .rs-checkbox-label {
    .ellipsis();

    display: inline-block;
    vertical-align: top;
  }
}