@primer/react/dist/TreeView/TreeView-1bf45a33.css.map

An implementation of GitHub's Primer Design System using React

{"version":3,"sources":["../src/TreeView/TreeView.module.css.js"],"names":[],"mappings":"AAAA,yCAGE,eAAgB,CADhB,QAAS,CADT,SA8PF,CA7OE,0EAQE,YAAa,CADb,6CAgBF,CAbE,4FAEE,mFAMF,CARA,4FAEE,mFAMF,CAJE,8BAJF,4FAKI,+BAAgC,CAChC,mBAEJ,CARA,4FAKI,+BAAgC,CAChC,mBAEJ,CADE,CAGF,mGACE,sBACF,CAGF,mFACE,SAAU,CACV,mBAAoB,CACpB,sBAAuB,CAcvB,gDAAyC,CAFzC,oCAA6B,CAC7B,cAAe,CAVf,YAAa,CAQb,8CAAuC,CAKvC,wEAAyE,CADzE,kGAAmG,CALnG,6CAAwC,CARxC,iBAAkB,CAElB,UAAW,CAcX,gEAAmE,CACnE,+DAeF,CAbE,yFACE,mEAMF,CAJE,8BAHF,yFAII,6BAA8B,CAC9B,mBAEJ,CADE,CAGF,wBAjCF,mFAkCI,qBAAsB,CACtB,yBAEJ,CADE,CAGF,kHACE,oCACF,CAOA,gJAEE,4BAA6B,CAD7B,cAMF,CAHE,8BAJF,gJAKI,YAEJ,CADE,CAGF,uIACE,sEAwBF,CApBE,6IAaE,8CAAuC,CACvC,gDAAyC,CARzC,UAAW,CADX,aAAc,CAFd,sCAAmC,CAFnC,iBAAkB,CAClB,0CAAoC,CAEpC,YAeF,CAHE,8BAhBF,6IAiBI,8BAEJ,CADE,CAIJ,gFAWE,sBAAuB,CAHvB,kCAA2B,CAP3B,YAAa,CAQb,gBAAiB,CAPjB,WAAY,CAQZ,sBAAuB,CAHvB,yEAKF,CAEA,2FACE,mEACF,CAEA,mFAEE,4DAAqD,CADrD,yDAEF,CAEA,iFACE,YAAa,CAWb,oCAA+B,CAD/B,iBAAkB,CATlB,WAAY,CAQZ,+EAAkF,CAPlF,kCAA6B,CAM7B,mFAAsF,CAFtF,gFAMF,CAEA,qFACE,aAAc,CACd,OACF,CAEA,sHACE,eAAgB,CAChB,sBAAuB,CACvB,kBACF,CAEA,uHAEE,qBACF,CAEA,gFAOE,kBAAmB,CADnB,kCAA2B,CAL3B,YAAa,CAIb,uCAGF,CAEA,uFAEE,kCAA2B,CAD3B,YAAa,CAEb,uBAKF,CAHE,8FACE,aACF,CAGF,wFAEE,kCAA2B,CAD3B,YAAa,CAEb,wBACF,CAEA,8FACE,aACF,CAEA,mFAGE,mDAA2C,CAW3C,sEAA8D,CAZ9D,WAAY,CADZ,UAcF,CAEA,qBApOF,yCAqOI,6BA0BJ,CAxBI,qGAEE,oDACF,CACF,CAEA,mFAEE,8DAAuD,CADvD,YAEF,CAEA,oFAGE,UAAW,CAGX,WAAY,CACZ,eAAgB,CAHhB,SAAU,CAHV,iBAAkB,CAClB,SAAU,CAOV,kBAAsB,CAEtB,cAAe,CADf,kBAEF,CAGF,uDAEE,kBAAmB,CACnB,gBAAkB,CAFlB,YAAa,CAGb,WAyBF,CAvBE,wBANF,uDAOI,cAsBJ,CArBE,CAEA,yEACE,6BACF,CAEA,yEACE,6BACF,CAEA,yEACE,6BACF,CAEA,yEACE,6BACF,CAEA,yEACE,6BACF,CAGF,+CACE,wCACF","file":"TreeView-1bf45a33.css","sourcesContent":[".TreeViewRootUlStyles {\n  padding: 0;\n  margin: 0;\n  list-style: none;\n\n  /*\n   * WARNING: This is a performance optimization.\n   *\n   * We define styles for the tree items at the root level of the tree\n   * to avoid recomputing the styles for each item when the tree updates.\n   * We're sacrificing maintainability for performance because TreeView\n   * needs to be performant enough to handle large trees (thousands of items).\n   *\n   * This is intended to be a temporary solution until we can improve the\n   * performance of our styling patterns.\n   *\n   * Do NOT copy this pattern without understanding the tradeoffs.\n   */\n  .TreeViewItem {\n    /*\n     * `overflow-clip-margin` extends the paint clip edge by 8px so the current-item indicator\n     * (positioned at `left: -8px` of the row container) remains visible when a consumer applies\n     * `contain: paint` (or `contain: strict`, or `content-visibility: auto`) to this `<li>`. Has\n     * no effect when no paint containment is active, so default rendering is unchanged.\n     */\n    overflow-clip-margin: var(--base-size-8);\n    outline: none;\n\n    &:focus-visible > div,\n    &:global(.focus-visible) > div {\n      box-shadow: var(--boxShadow-thick) var(--fgColor-accent);\n\n      @media (forced-colors: active) {\n        outline: 2px solid HighlightText;\n        outline-offset: -2px;\n      }\n    }\n\n    &[data-has-leading-action] {\n      --has-leading-action: 1;\n    }\n  }\n\n  .TreeViewItemContainer {\n    --level: 1;\n    --toggle-width: 1rem;\n    --min-item-height: 2rem;\n\n    position: relative;\n    display: grid;\n    width: 100%;\n    /*\n     * Mirrors the `overflow-clip-margin` on `.TreeViewItem` so the indicator also stays\n     * visible when `containIntrinsicSize` is set on this row (which sets\n     * `content-visibility: auto` on this container and implies paint containment).\n     */\n    overflow-clip-margin: var(--base-size-8);\n    font-size: var(--text-body-size-medium);\n    color: var(--fgColor-default);\n    cursor: pointer;\n    border-radius: var(--borderRadius-medium);\n    grid-template-columns: var(--spacer-width) var(--leading-action-width) var(--toggle-width) 1fr auto;\n    grid-template-areas: 'spacer leadingAction toggle content trailingAction';\n\n    --leading-action-width: calc(var(--has-leading-action, 0) * 1.5rem);\n    --spacer-width: calc(calc(var(--level) - 1) * (var(--toggle-width) / 2));\n\n    &:hover {\n      background-color: var(--control-transparent-bgColor-hover);\n\n      @media (forced-colors: active) {\n        outline: 2px solid transparent;\n        outline-offset: -2px;\n      }\n    }\n\n    @media (pointer: coarse) {\n      --toggle-width: 1.5rem;\n      --min-item-height: 2.75rem;\n    }\n  }\n\n  &:where([data-omit-spacer='true']) .TreeViewItemContainer {\n    grid-template-columns: 0 0 0 1fr auto;\n  }\n\n  /*\n   * Suppress hover affordances on rows being used as skeleton loading placeholders.\n   * Marked positively via `data-loading` from `LoadingItem` so we avoid the broad\n   * invalidation cost of `:has(.TreeViewItemSkeleton)` across every row in large trees.\n   */\n  .TreeViewItem:where([data-loading]) > .TreeViewItemContainer:hover {\n    cursor: default;\n    background-color: transparent;\n\n    @media (forced-colors: active) {\n      outline: none;\n    }\n  }\n\n  .TreeViewItem[aria-current='true'] > .TreeViewItemContainer {\n    background-color: var(--control-transparent-bgColor-selected);\n\n    /* Current item indicator */\n    /* stylelint-disable-next-line selector-max-specificity */\n    &::after {\n      position: absolute;\n      top: calc(50% - var(--base-size-12));\n      left: calc(-1 * var(--base-size-8));\n      width: 0.25rem;\n      height: 1.5rem;\n      content: '';\n\n      /*\n       * Use fgColor accent for consistency across all themes. Using the \"correct\" variable,\n       * --bgColor-accent-emphasis, causes vrt failures for dark high contrast mode\n       */\n      /* stylelint-disable-next-line primer/colors */\n      background-color: var(--fgColor-accent);\n      border-radius: var(--borderRadius-medium);\n\n      @media (forced-colors: active) {\n        background-color: HighlightText;\n      }\n    }\n  }\n\n  .TreeViewItemToggle {\n    display: flex;\n    height: 100%;\n\n    /* The toggle should appear vertically centered for single-line items, but remain at the top for items that wrap\n    across more lines. */\n    /* stylelint-disable-next-line primer/spacing */\n    padding-top: calc(var(--min-item-height) / 2 - var(--base-size-12) / 2);\n    color: var(--fgColor-muted);\n    grid-area: toggle;\n    justify-content: center;\n    align-items: flex-start;\n  }\n\n  .TreeViewItemToggleHover:hover {\n    background-color: var(--control-transparent-bgColor-hover);\n  }\n\n  .TreeViewItemToggleEnd {\n    border-top-left-radius: var(--borderRadius-medium);\n    border-bottom-left-radius: var(--borderRadius-medium);\n  }\n\n  .TreeViewItemContent {\n    display: flex;\n    height: 100%;\n    padding: 0 var(--base-size-8);\n\n    /* The dynamic top and bottom padding to maintain the minimum item height for single line items */\n    /* stylelint-disable-next-line primer/spacing */\n    padding-top: calc((var(--min-item-height) - var(--custom-line-height, 1.3rem)) / 2);\n    /* stylelint-disable-next-line primer/spacing */\n    padding-bottom: calc((var(--min-item-height) - var(--custom-line-height, 1.3rem)) / 2);\n    line-height: var(--custom-line-height, var(--text-body-lineHeight-medium, 1.4285));\n    grid-area: content;\n    gap: var(--stack-gap-condensed);\n  }\n\n  .TreeViewItemContentText {\n    flex: 1 1 auto;\n    width: 0;\n  }\n\n  &:where([data-truncate-text='true']) .TreeViewItemContentText {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n\n  &:where([data-truncate-text='false']) .TreeViewItemContentText {\n    /* stylelint-disable-next-line declaration-property-value-keyword-no-deprecated */\n    word-break: break-word;\n  }\n\n  .TreeViewItemVisual {\n    display: flex;\n\n    /* The visual icons should appear vertically centered for single-line items, but remain at the top for items that wrap\n    across more lines. */\n    height: var(--custom-line-height, 1.3rem);\n    color: var(--fgColor-muted);\n    align-items: center;\n  }\n\n  .TreeViewItemLeadingAction {\n    display: flex;\n    color: var(--fgColor-muted);\n    grid-area: leadingAction;\n\n    & > button {\n      flex-shrink: 1;\n    }\n  }\n\n  .TreeViewItemTrailingAction {\n    display: flex;\n    color: var(--fgColor-muted);\n    grid-area: trailingAction;\n  }\n\n  .TreeViewItemTrailingActionButton {\n    flex-shrink: 1;\n  }\n\n  .TreeViewItemLevelLine {\n    width: 100%;\n    height: 100%;\n    border-right: var(--borderWidth-thin) solid;\n\n    /*\n     * `--tree-line-color` is set on the root `<ul>` and inherited down. On coarse pointers it\n     * stays unset and falls back to `muted` (lines always visible). On hover-capable devices it\n     * is initialized to `transparent` on the root and flipped to `muted` while the tree is\n     * hovered or focused, so the browser only has to propagate a single inherited custom\n     * property instead of re-matching `.TreeViewItemLevelLine` descendant selectors on every\n     * hover/focus change inside large trees.\n     */\n    /* stylelint-disable-next-line primer/colors -- private custom property, defaults to a Primer token */\n    border-color: var(--tree-line-color, var(--borderColor-muted));\n  }\n\n  @media (hover: hover) {\n    --tree-line-color: transparent;\n\n    &:hover,\n    &:focus-within {\n      --tree-line-color: var(--borderColor-muted);\n    }\n  }\n\n  .TreeViewDirectoryIcon {\n    display: grid;\n    color: var(--treeViewItem-leadingVisual-iconColor-rest);\n  }\n\n  .TreeViewVisuallyHidden {\n    position: absolute;\n    width: 1px;\n    height: 1px;\n    padding: 0;\n    /* stylelint-disable-next-line primer/spacing */\n    margin: -1px;\n    overflow: hidden;\n    /* stylelint-disable-next-line property-no-deprecated */\n    clip: rect(0, 0, 0, 0);\n    white-space: nowrap;\n    border-width: 0;\n  }\n}\n\n.TreeViewSkeletonItemContainerStyle {\n  display: flex;\n  align-items: center;\n  column-gap: 0.5rem;\n  height: 2rem;\n\n  @media (pointer: coarse) {\n    height: 2.75rem;\n  }\n\n  &:nth-of-type(5n + 1) {\n    --tree-item-loading-width: 67%;\n  }\n\n  &:nth-of-type(5n + 2) {\n    --tree-item-loading-width: 47%;\n  }\n\n  &:nth-of-type(5n + 3) {\n    --tree-item-loading-width: 73%;\n  }\n\n  &:nth-of-type(5n + 4) {\n    --tree-item-loading-width: 64%;\n  }\n\n  &:nth-of-type(5n + 5) {\n    --tree-item-loading-width: 50%;\n  }\n}\n\n.TreeItemSkeletonTextStyles {\n  width: var(--tree-item-loading-width, 67%);\n}\n"]}