@opentiny/vue-theme/tree/index.css

An enterprise-class UI component library, support both Vue.js 2 and Vue.js 3, as well as PC and mobile.

.tiny-tree{--tv-Tree-padding-top:var(--tv-space-xl, 16px);--tv-Tree-padding-bottom:var(--tv-space-xl, 16px);--tv-Tree-text-color:var(--tv-color-text, #191919);--tv-Tree-selected-text-color:var(--tv-color-text-active, #1476ff);--tv-Tree-selected-font-weight:var(--tv-font-weight-bold, 600);--tv-Tree-disabled-text-color:var(--tv-color-text-disabled, #c2c2c2);--tv-Tree-text-line-height:var(--tv-line-height-number, 1.5);--tv-Tree-bg-color:var(--tv-color-bg-secondary, #ffffff);--tv-Tree-empty-text-color:var(--tv-color-text-secondary, #595959);--tv-Tree-empty-min-height:60px;--tv-Tree-node-content-current-bg-color:var(--tv-color-bg-secondary, #ffffff);--tv-Tree-node-content-hover-bg-color:var(--tv-color-bg-hover, #f5f5f5);--tv-Tree-node-label-font-size:var(--tv-font-size-default, 14px);--tv-Tree-node-label-margin-left:var(--tv-space-md, 8px);--tv-Tree-node-content-padding-right:var(--tv-space-xl, 16px);--tv-Tree-node-label-bg-color:var(--tv-color-bg-secondary, #ffffff);--tv-Tree-node-label-text-color:var(--tv-color-text-secondary, #595959);--tv-Tree-node-icon-font-size:var(--tv-font-size-default, 14px);--tv-Tree-node-loading-icon-color:var(--tv-color-icon-control, #191919);--tv-Tree-node-expand-icon-color:var(--tv-color-icon, #808080);--tv-Tree-node-collapse-icon-color:var(--tv-color-icon-control, #191919);--tv-Tree-node-operate-icon-font-size:var(--tv-font-size-lg, 16px);--tv-Tree-node-operate-icon-margin-left:var(--tv-space-sm, 4px);--tv-Tree-node-operate-icon-color:var(--tv-color-icon, #808080);--tv-Tree-node-checked-icon-color:var(--tv-color-icon-hover, #191919);--tv-Tree-node-padding-x:var(--tv-space-xl, 16px);--tv-Tree-node-highlight-bg-color:var(--tv-color-bg-active, #f5f5f5);--tv-Tree-node-content-height:32px;--tv-Tree-node-content-border-radius:0;--tv-Tree-node-menu-font-size:var(--tv-font-size-default, 14px);--tv-Tree-node-menu-font-color:var(--tv-color-text-secondary, #595959);--tv-Tree-node-menu-box-shadow:2px 2px 4px -2px #000000;--tv-Tree-node-indent:var(--tv-space-xl, 16px);--tv-Tree-node-guide-line-border-color:var(--tv-color-border-divider, #f0f0f0);--tv-Tree-node-guide-line-width:var(--tv-space-md, 8px);--tv-Tree-node-showline-icon-size:var(--tv-font-size-lg, 16px);--tv-Tree-bottom-divider-bg-color:var(--tv-color-border-divider, #f0f0f0);--tv-Tree-bottom-padding-horizontal:var(--tv-space-lg, 12px);--tv-Tree-bottom-padding-vertical:7px;--tv-Tree-bottom-text-margin-left:10px;--tv-Tree-small-node-content-height:28px;--tv-Tree-small-node-font-size:12px;--tv-Tree-plain-node-height:28px;--tv-Tree-plain-font-size:var(--tv-font-size-xl, 18px);--tv-Tree-plain-node-padding-left:var(--tv-space-lg, 12px);--tv-Tree-plain-node-border-radius:var(--tv-border-radius-xs, 2px);--tv-Tree-plain-node-auxi-icon-font-size:var(--tv-font-size-lg, 16px);--tv-Tree-plain-node-auxi-margin-left:24px;--tv-Tree-plain-node-auxi-text-color:var(--tv-color-text-secondary, #595959);position:relative;cursor:default;background:var(--tv-Tree-bg-color);color:var(--tv-Tree-text-color);line-height:var(--tv-Tree-text-line-height);padding-top:var(--tv-Tree-padding-top);padding-bottom:var(--tv-Tree-padding-bottom)}.tiny-tree .is-drop-inner{position:relative}.tiny-tree .is-drop-inner::before{pointer-events:none;border:2px solid var(--tv-Tree-node-checked-icon-color);content:' ';position:absolute;top:0;bottom:0;left:0;right:0}.tiny-tree__empty-block{position:relative;min-height:var(--tv-Tree-empty-min-height);text-align:center;width:100%;height:100%}.tiny-tree__empty-text{position:absolute;left:50%;top:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);color:var(--tv-Tree-empty-text-color)}.tiny-tree__drop-indicator{position:absolute;left:0;right:0;height:2px;background-color:var(--tv-Tree-node-checked-icon-color)}.tiny-tree.is-dragging .tiny-tree-node__content{cursor:move}.tiny-tree.is-dragging .tiny-tree-node__content *{pointer-events:none}.tiny-tree.is-dragging.is-drop-not-allow .tiny-tree-node__content{cursor:not-allowed}.tiny-tree--highlight-current .tiny-tree-node.is-current>.tiny-tree-node__content .tiny-tree-node__content-left,.tiny-tree--highlight-current .tiny-tree-node.is-current>.tiny-tree-node__content .tiny-tree-node__content-right{background-color:var(--tv-Tree-node-highlight-bg-color)}.tiny-tree__strict-bottom{border-top:1px solid var(--tv-Tree-bottom-divider-bg-color)}.tiny-tree__strict-bottom-content{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding:var(--tv-Tree-bottom-padding-vertical) var(--tv-Tree-bottom-padding-horizontal)}.tiny-tree__strict-bottom-content .tiny-switch.mini{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto}.tiny-tree__strict-bottom-content .tiny-tree__bottom-text{margin-left:var(--tv-Tree-bottom-text-margin-left)}.tiny-tree--small .tiny-tree-node__content{height:var(--tv-Tree-small-node-content-height)}.tiny-tree--small .tiny-tree-node__label{font-size:var(--tv-Tree-small-node-font-size)}.tiny-tree .tiny-tree__plain-node{font-size:var(--tv-Tree-plain-font-size);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-left:var(--tv-Tree-plain-node-padding-left);border-radius:var(--tv-Tree-plain-node-border-radius)}.tiny-tree .tiny-tree__plain-node:hover{background-color:var(--tv-Tree-node-content-hover-bg-color)}.tiny-tree .tiny-tree__plain-node-auxi,.tiny-tree .tiny-tree__plain-node-title{height:var(--tv-Tree-plain-node-height)}.tiny-tree .tiny-tree__plain-node-title>span+span{margin-left:8px}.tiny-tree .tiny-tree__plain-node-title-txt{margin-left:var(--tv-Tree-node-label-margin-left)}.tiny-tree .tiny-tree__plain-node-title{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:var(--tv-Tree-text-color);fill:var(--tv-Tree-text-color)}.tiny-tree .tiny-tree__plain-node-title .tiny-radio{margin-right:0}.tiny-tree .tiny-tree__plain-node-title .tiny-radio .tiny-radio__label{display:none}.tiny-tree .tiny-tree__plain-node-auxi{margin-left:var(--tv-Tree-plain-node-auxi-margin-left);display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-transform:translateY(-3px);transform:translateY(-3px);color:var(--tv-Tree-plain-node-auxi-text-color)}.tiny-tree .tiny-tree__plain-node-auxi>div{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tiny-tree .tiny-tree__plain-node-title-loc{font-size:var(--tv-Tree-plain-node-auxi-icon-font-size);cursor:pointer;-webkit-transform:translateY(-3px);transform:translateY(-3px)}.tiny-tree__del-popover{--tv-Tree-popover-warn-icon-font-size:var(--tv-font-size-lg, 16px);--tv-Tree-popover-warn-icon-bg-color:var(--tv-color-warn-icon, #ff8800);--tv-Tree-popover-warn-icon-margin-right:var(--tv-space-sm, 4px);--tv-Tree-popover-checkbox-margin-top:var(--tv-space-lg, 12px);--tv-Tree-popover-footer-margin-top:var(--tv-space-lg, 12px)}.tiny-tree__del-popover .tiny-tree__del-body{display:-webkit-box;display:-ms-flexbox;display:flex}.tiny-tree__del-popover .tiny-tree__del-body .tiny-tree__del-icon{margin-right:var(--tv-Tree-popover-warn-icon-margin-right)}.tiny-tree__del-popover .tiny-tree__del-body .tiny-tree__del-icon svg{font-size:var(--tv-Tree-popover-warn-icon-font-size);fill:var(--tv-Tree-popover-warn-icon-bg-color)}.tiny-tree__del-popover .tiny-tree__del-body .tiny-tree__del-checkbox{margin-top:var(--tv-Tree-popover-checkbox-margin-top)}.tiny-tree__del-popover .tiny-tree__del-footer{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end;margin-top:var(--tv-Tree-popover-footer-margin-top)}.tiny-tree-node{white-space:nowrap;outline:0}.tiny-tree-node.show-line .tiny-tree-node__children{overflow:visible!important;-webkit-transition:.3s opacity ease-in-out;transition:.3s opacity ease-in-out;position:relative}.tiny-tree-node.show-line .tiny-tree-node__children .tiny-tree-node__wrapper:not(:last-child)>.tiny-tree-node>.tiny-tree-node__children .tiny-tree-node__children-indent{height:100%;position:absolute;left:0}.tiny-tree-node.show-line .tiny-tree-node__children .tiny-tree-node__wrapper:not(:last-child)>.tiny-tree-node>.tiny-tree-node__children .tiny-tree-node__children-indent::before{content:'';position:absolute;top:calc(-1 * var(--tv-Tree-node-content-height)/ 2);left:calc(var(--tv-Tree-node-padding-x) + var(--tv-Tree-node-showline-icon-size)/ 2);height:100%;border-left:1px solid var(--tv-Tree-node-guide-line-border-color)}.tiny-tree-node.show-line .tiny-tree-node__children .tiny-tree-node__content .tiny-tree-node__content-indent{height:var(--tv-Tree-node-content-height)}.tiny-tree-node.show-line .tiny-tree-node__children .tiny-tree-node__content .tiny-tree-node__content-indent::before{content:'';position:absolute;left:calc(var(--tv-Tree-node-padding-x) + var(--tv-Tree-node-showline-icon-size)/ 2);top:0;width:var(--tv-Tree-node-guide-line-width);height:calc(var(--tv-Tree-node-content-height)/ 2);border-left:1px solid var(--tv-Tree-node-guide-line-border-color);border-bottom:1px solid var(--tv-Tree-node-guide-line-border-color)}.tiny-tree-node.show-line .tiny-tree-node__children>.tiny-tree-node__wrapper:not(:first-of-type)>.tiny-tree-node>.tiny-tree-node__content>.tiny-tree-node__content-indent::before{height:var(--tv-Tree-node-content-height);top:-50%}.tiny-tree-node.show-line .tiny-tree-node__expand-icon{font-size:var(--tv-Tree-node-showline-icon-size);color:var(--tv-Tree-node-expand-icon-color)}.tiny-tree-node.show-line .tiny-tree-node__expand-icon.expanded{-webkit-transform:rotate(0);transform:rotate(0);fill:var(--tv-Tree-node-collapse-icon-color);color:var(--tv-Tree-node-collapse-icon-color)}.tiny-tree-node.show-line.is-expanded .tiny-tree-node__children{opacity:1}.tiny-tree-node.show-line:not(is-expanded) .tiny-tree-node__children{opacity:0}.tiny-tree-node.is-current:not(.show-checkbox)>.tiny-tree-node__content>.tiny-tree-node__content-left{color:var(--tv-Tree-selected-text-color);font-weight:var(--tv-Tree-selected-font-weight)}.tiny-tree-node.is-drop-inner>.tiny-tree-node__content .tiny-tree-node__label{background-color:var(--tv-Tree-node-label-bg-color);color:var(--tv-Tree-node-label-text-color)}.tiny-tree-node.is-checked .tiny-tree-node__expand-icon,.tiny-tree-node.is-expanded .tiny-tree-node__expand-icon,.tiny-tree-node.is-indeterminate .tiny-tree-node__expand-icon{fill:var(--tv-Tree-node-expand-icon-color)}.tiny-tree-node.is-disabled>.tiny-tree-node__content{cursor:not-allowed}.tiny-tree-node.is-disabled>.tiny-tree-node__content .tiny-tree-node__label{color:var(--tv-Tree-disabled-text-color);font-weight:400}.tiny-tree-node__content{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;position:relative;height:var(--tv-Tree-node-content-height);cursor:pointer;border-radius:var(--tv-Tree-node-content-border-radius)}.tiny-tree-node__content:hover .tree-node-icon svg{fill:var(--tv-Tree-node-checked-icon-color);color:var(--tv-Tree-node-checked-icon-color)}.tiny-tree-node__content:hover .tiny-tree-node__content-left,.tiny-tree-node__content:hover .tiny-tree-node__content-right{background-color:var(--tv-Tree-node-content-hover-bg-color)}.tiny-tree-node__content .tiny-radio,.tiny-tree-node__content label.tiny-checkbox{margin:0 calc(var(--tv-Tree-node-label-margin-left)/ 2)}.tiny-tree-node__content .tiny-tree-node__label{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.tiny-tree-node .tiny-tree-node__content-left{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto;height:100%;overflow:hidden;padding:0 var(--tv-Tree-node-padding-x)}.tiny-tree-node .tiny-tree-node__content-left>svg{fill:var(--tv-Tree-node-operate-icon-color);font-size:var(--tv-Tree-node-operate-icon-font-size);margin-right:calc(var(--tv-Tree-node-label-margin-left)/ 2)}.tiny-tree-node .tiny-tree-node__content-left>svg:hover{fill:var(--tv-Tree-node-checked-icon-color)}.tiny-tree-node .tiny-tree-node__content-left .tiny-tree-node__edit-input input{height:calc(var(--tv-Tree-node-content-height) - 2px);font-size:var(--tv-Tree-node-label-font-size)}.tiny-tree-node .tiny-tree-node__content-right{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;height:100%;cursor:pointer}.tiny-tree-node .tiny-tree-node__content-right svg{fill:var(--tv-Tree-node-operate-icon-color);font-size:var(--tv-Tree-node-operate-icon-font-size);margin-right:var(--tv-Tree-node-operate-icon-margin-left);outline:2px solid transparent;outline-offset:2px}.tiny-tree-node .tiny-tree-node__content-right svg:hover{fill:var(--tv-Tree-node-checked-icon-color)}.tiny-tree-node .tree-node-icon{display:-webkit-box;display:-ms-flexbox;display:flex;margin-right:calc(var(--tv-Tree-node-label-margin-left)/ 2)}.tiny-tree-node__expand-icon{cursor:pointer;fill:var(--tv-Tree-node-expand-icon-color);font-size:var(--tv-Tree-node-icon-font-size);-webkit-transform:rotate(0);transform:rotate(0);-webkit-transition:-webkit-transform .3s ease-in-out;transition:-webkit-transform .3s ease-in-out;transition:transform .3s ease-in-out;transition:transform .3s ease-in-out,-webkit-transform .3s ease-in-out;-ms-flex-negative:0;flex-shrink:0}.tiny-tree-node__expand-icon.expanded{-webkit-transform:rotate(90deg);transform:rotate(90deg)}.tiny-tree-node__expand-icon.is-saas-theme{-webkit-transform:rotate(-90deg);transform:rotate(-90deg)}.tiny-tree-node__expand-icon.is-saas-theme.expanded{-webkit-transform:rotate(0);transform:rotate(0)}.tiny-tree-node__expand-icon.is-leaf{visibility:hidden}.tiny-tree-node__label{font-size:var(--tv-Tree-node-label-font-size);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.tiny-tree-node__loading{margin-right:4px;margin-left:var(--tv-Tree-node-label-margin-left)}.tiny-tree-node>.tiny-tree-node__children{overflow:hidden;background-color:transparent}.tiny-tree-node.is-expanded>.tiny-tree-node__children{display:block}.tiny-tree-node__menu{position:absolute;top:0;left:0;z-index:5000;font-size:var(--tv-Tree-node-menu-font-size);-webkit-box-shadow:var(--tv-Tree-node-menu-box-shadow);box-shadow:var(--tv-Tree-node-menu-box-shadow);padding:0 1px;color:var(--tv-Tree-node-menu-font-color);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.tiny-tree-node .tiny-checkbox .tiny-checkbox__label{padding-left:0}.tiny-tree-node__content-left__radio.tiny-radio .tiny-radio__label{display:none}.tiny-tree-node .collapse-transition{-webkit-transition:.3s height ease-in-out,.3s padding-top ease-in-out,.3s padding-bottom ease-in-out;transition:.3s height ease-in-out,.3s padding-top ease-in-out,.3s padding-bottom ease-in-out}@-webkit-keyframes loading-rotate{100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes loading-rotate{100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@-webkit-keyframes loading-dash{0%{stroke-dasharray:1,200;stroke-dashoffset:0}50%{stroke-dasharray:90,150;stroke-dashoffset:-40px}100%{stroke-dasharray:90,150;stroke-dashoffset:-120px}}@keyframes loading-dash{0%{stroke-dasharray:1,200;stroke-dashoffset:0}50%{stroke-dasharray:90,150;stroke-dashoffset:-40px}100%{stroke-dasharray:90,150;stroke-dashoffset:-120px}}