@devtools-ds/tree
Version:
A versatile expanding `Tree` component, with full keyboard navigation following the [Tree View Design Pattern](https://www.w3.org/TR/wai-aria-practices/examples/treeview/treeview-2/treeview-2a.html).
1 lines • 4.2 kB
Source Map (JSON)
{"version":3,"sources":["../src/Tree.css","src/Tree.css","../src/<no source>"],"names":[],"mappings":"AAAA,mBACE,MAAA,KACA,YAAA,KCAkB,CDAlB,UAIF,mBACE,WAAA,KAIF,oBACE,OAAA,EACA,QAAA,EACA,WAAA,KAGA,wCACE,OAAA,QACA,YAAA,IACA,MAAA,KACA,QAAA,aACA,QAAA,EACA,aAAA,IAEA,8CACE,iBAAA,0BACA,MAAA,gCAGE,wEACE,MAAA,KAGF,0FACE,aAAA,YAAA,YAAA,YAAA,KAON,6EACE,iBAAA,0BACA,cAAA,qBAMN,oBACE,OAAA,EAAA,KAAA,EAAA,KACA,QAAA,aACA,MAAA,EACA,OAAA,EACA,aAAA,MACA,aAAA,KAAA,EAAA,KAAA,KACA,aAAA,YAAA,YAAA,YAAA,0BACA,eAAA,SAEA,sCACE,UAAA,eACA,OAAA,OAGF,kDAfF,oBAgBI,WAAA,MElEJ,mBAAA,aAAA,QAAA,aAAA,QAAA,aAAA,QAAA,wCAAA,aAAA,QAAA,aAAA,QAAA,aAAA,QAAA,cAAA,IAAA,uCAAA,aAAA,QAAA,aAAA,QAAA,aAAA","sourcesContent":[".tree {\n width: 100%;\n font-family: Menlo, monospace;\n}\n\n/* Indent each row in the tree */\n.item {\n list-style: outside none none;\n}\n\n/* Remove padding from the unordered list */\n.group {\n margin: 0;\n padding: 0;\n list-style: outside none none;\n\n /* Responsible for the highlight and focus colors in the row */\n .label {\n cursor: default;\n line-height: 1.5;\n width: 100%;\n display: inline-block;\n outline: none;\n padding-left: 5px;\n\n &:focus {\n background-color: @theme focusColor;\n color: @theme focusTextColor;\n\n &.focusWhite {\n * {\n color: white;\n }\n\n .arrow {\n border-color: transparent transparent transparent white;\n }\n }\n }\n }\n\n .label.hover {\n &:hover:not(:focus) {\n background-color: @theme hoverColor;\n border-radius: @theme hoverRadius;\n }\n }\n}\n\n/* The expand/collapse arrow character */\n.arrow {\n margin: 0 0.7em 0 0.1em;\n display: inline-block;\n width: 0;\n height: 0;\n border-style: solid;\n border-width: 0.4em 0 0.4em 0.4em;\n border-color: transparent transparent transparent @theme arrowColor;\n vertical-align: baseline;\n\n &.open {\n transform: rotateZ(90deg);\n bottom: -0.05em;\n }\n\n @media screen and (prefers-reduced-motion: reduce) {\n transition: none;\n }\n}\n",".Tree-tree-fbbbe38 {\n width: 100%;\n font-family: Menlo, monospace;\n}\n\n/* Indent each row in the tree */\n.Tree-item-353d6f3 {\n list-style: outside none none;\n}\n\n/* Remove padding from the unordered list */\n.Tree-group-d3c3d8a {\n margin: 0;\n padding: 0;\n list-style: outside none none;\n}\n/* Responsible for the highlight and focus colors in the row */\n.Tree-group-d3c3d8a .Tree-label-d819155 {\n cursor: default;\n line-height: 1.5;\n width: 100%;\n display: inline-block;\n outline: none;\n padding-left: 5px;\n }\n.Tree-group-d3c3d8a .Tree-label-d819155:focus {\n background-color: var(--focusColor, #007FEB);\n color: var(--focusTextColor, undefined);\n }\n.Tree-group-d3c3d8a .Tree-label-d819155:focus.Tree-focusWhite-f1e00c2 * {\n color: white;\n }\n.Tree-group-d3c3d8a .Tree-label-d819155:focus.Tree-focusWhite-f1e00c2 .Tree-arrow-03ab2e7 {\n border-color: transparent transparent transparent white;\n }\n.Tree-group-d3c3d8a .Tree-label-d819155.Tree-hover-3cc4e5d:hover:not(:focus) {\n background-color: var(--hoverColor, #F2FAFE);\n border-radius: var(--hoverRadius, 0px);\n }\n\n/* The expand/collapse arrow character */\n.Tree-arrow-03ab2e7 {\n margin: 0 0.7em 0 0.1em;\n display: inline-block;\n width: 0;\n height: 0;\n border-style: solid;\n border-width: 0.4em 0 0.4em 0.4em;\n border-color: transparent transparent transparent var(--arrowColor, #BEBEC0);\n vertical-align: baseline;\n}\n.Tree-arrow-03ab2e7.Tree-open-3f1a336 {\n transform: rotateZ(90deg);\n bottom: -0.05em;\n }\n@media screen and (prefers-reduced-motion: reduce) {\n.Tree-arrow-03ab2e7 {\n transition: none\n}\n }\n.Tree-dark-1b4aa00 {\n --focusColor: #235895;\n --hoverColor: #27272C;\n --arrowColor: #9D9D9E;\n}\n.Tree-chrome-bcbcac6.Tree-light-09174ee {\n --focusColor: #CFE8FC;\n --hoverColor: #EDF2FC;\n --arrowColor: #8E8E8E;\n --hoverRadius: 6px;\n}\n.Tree-chrome-bcbcac6.Tree-dark-1b4aa00 {\n --focusColor: #093D69;\n --hoverColor: #192538;\n --arrowColor: #B7B7B7;\n}\n\n/*# sourceMappingURL=Tree.css.map */",null]}