beta-parity-react/ui/TreeNavigation/index.css

Beta Parity React Components

.tree-navigation{background-color:var(--par-color-bg-tree-navigation-item);font-family:IBM Plex Sans,Helvetica Neue,Arial,sans-serif;font-size:1rem;font-weight:400;line-height:1.375rem;position:sticky;top:0}.tree-navigation-list,.tree-navigation-sublist{list-style-type:none;margin:0}.tree-navigation-sublist .tree-navigation-item{margin-left:1.75rem}.tree-navigation-item{color:var(--par-color-text-tree-navigation-content-item-enabled);cursor:pointer;position:relative;transition-duration:.3s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-timing-function:cubic-bezier(0,0,.2,1)}.tree-navigation-item:is(.tree-navigation-subitem):before{position:absolute}.tree-navigation-item:is(.tree-navigation-subitem):before{left:-.5rem}.tree-navigation-item:is(.tree-navigation-subitem):before{top:0}.tree-navigation-item:is(.tree-navigation-subitem):before{height:100%}.tree-navigation-item:is(.tree-navigation-subitem):before{width:1px}.tree-navigation-item:is(.tree-navigation-subitem):before{background-color:var(--par-color-border-tree-navigation)}.tree-navigation-item:is(.tree-navigation-subitem):before{--tw-content:"";content:var(--tw-content)}.tree-navigation-item-content{border-radius:.375rem;position:relative;width:100%}.tree-navigation-item-content:hover{color:var(--par-color-text-tree-navigation-content-item-hovered)}.tree-navigation-item-content:active{color:var(--par-color-text-tree-navigation-content-item-pressed)}.tree-navigation-item-text{align-items:center;border-radius:.375rem;display:flex;gap:.5rem;height:2.5rem;padding-left:2.5rem;padding-right:1rem;transition-duration:.15s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-timing-function:cubic-bezier(0,0,.2,1);width:100%}.tree-navigation-item-text span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tree-navigation-item-text:focus-visible{outline-offset:-2px}.tree-navigation-item-active .active{background-color:var(--par-color-bg-tree-navigation-item-neutral-selected)!important;color:var(--par-color-text-tree-navigation-content-item-neutral-selected)!important}.tree-navigation.accent .tree-navigation-item-active .active{background-color:var(--par-color-bg-tree-navigation-item-accent-selected)!important;color:var(--par-color-text-tree-navigation-content-item-accent-selected)!important}.tree-navigation.accent .tree-navigation-item-active .active .tree-navigation-icon-button:hover{background-color:var(--par-color-bg-tree-navigation-button-accent-hovered)}.tree-navigation.accent .tree-navigation-item-active .active .tree-navigation-icon-button:active{background-color:transparent;color:var(--par-color-text-tree-navigation-content-item-accent-selected)}.tree-navigation-icon-button{height:1rem;left:.75rem;position:absolute;top:50%;width:1rem;--tw-translate-y:-50%;background-color:var(--par-color-bg-tree-navigation-item-icon-button);border-radius:.375rem;color:var(--par-color-text-tree-navigation-content-item-icon-button);overflow:hidden;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));transition-duration:.15s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-timing-function:cubic-bezier(0,0,.2,1)}.tree-navigation-icon-button:hover{background-color:var(--par-color-bg-tree-navigation-button-neutral-hovered)}.tree-navigation-icon-button:active{background-color:transparent;color:var(--par-color-text-tree-navigation-content-item-pressed)}.tree-navigation-icon-button:focus-visible{outline-offset:0}.tree-navigation-icon-button:has(.icon-minus){pointer-events:none}.tree-navigation-icon-button:has(.icon-expanded){--tw-rotate:90deg;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.tree-navigation-icon{height:1rem;width:1rem}.tree-navigation-sublist.animation-entering{opacity:0;transform:translateY(-10px)}.tree-navigation-sublist.animation-entered{opacity:1;transform:translateY(0)}.tree-navigation-sublist.animation-exiting{opacity:0;transform:translateY(-10px)}.tree-navigation-sublist.animation-exited{display:none;opacity:0}