.cl-tree { &-item { &__content { display: flex; align-items: center; height: 100%; position: relative; border-radius: $cl-border-radius; padding: 0 10rpx; box-sizing: border-box; &:active { background-color: $cl-color-active; } } &__expand { display: inline-flex; align-items: center; justify-content: center; height: 100%; .icon-caret { display: inline-block; transform: rotate(-90deg); transition: transform 0.3s; } } &__label { font-size: $cl-font-size; flex: 1; position: relative; padding: 0 50rpx 0 4rpx; } &__check { display: none; } &__children { overflow: hidden; transition: all 0.3s; } &.is-expand { & > .cl-tree-item__content .icon-caret { transform: rotate(0deg); } } &.is-checked { & > .cl-tree-item__content { color: $cl-color-primary; .cl-tree-item__check { display: block; } } } } } .cl-tree-select { padding: 10rpx; }