ant-design-x-vue-next/es/folder/style/index.mjs

Ant Design X for Vue — community continuation aligned with @ant-design/x

import "vue";
import "../../_util/cssinjs/StyleContext.mjs";
import "../../_util/cssinjs/theme/ThemeCache.mjs";
import "../../_util/warning.mjs";
import "../../_util/cssinjs/transformers/legacyLogicalProperties.mjs";
import { merge as t } from "../../_util/cssinjs-utils/util/statistic.mjs";
import { genStyleHooks as n } from "../../theme/genStyleUtils.mjs";
const o = (e) => {
  const { componentCls: r, antCls: i } = e;
  return {
    [r]: {
      height: "100%",
      width: "100%",
      background: e.colorBgDirectory,
      [`${i}-tree-node-content-wrapper`]: {
        display: "flex",
        paddingInline: 0
      },
      [`${i}-tree-node-content-wrapper-open,${i}-tree-node-content-wrapper-close`]: {
        display: "flex"
      },
      [`${i}-tree-node-content-wrapper-normal`]: {
        display: "flex"
      },
      [`${i}-tree-list`]: {
        paddingInline: e.padding,
        paddingBlock: e.paddingXS
      },
      [`${i}-tree-switcher`]: {
        width: "10px",
        "&:before": {
          width: "10px",
          height: "10px"
        }
      },
      [`${r}-container`]: {
        height: "100%",
        display: "flex",
        flexDirection: "row",
        width: "100%"
      },
      [`${r}-directory-tree`]: {
        height: "100%",
        display: "flex",
        flexDirection: "column",
        flexShrink: 0,
        overflow: "hidden"
      },
      [`${r}-directory-tree-title`]: {
        width: "100%",
        display: "flex",
        alignItems: "center"
      },
      [`${r}-directory-tree-content`]: {
        width: "100%",
        background: "transparent",
        height: "100%",
        borderRadius: "unset",
        display: "flex",
        overflow: "auto"
      },
      [`&${r}-rtl`]: {
        direction: "rtl"
      }
    }
  };
}, l = (e) => {
  const { componentCls: r, calc: i } = e;
  return {
    [r]: {
      [`${r}-preview`]: {
        width: "100%",
        background: e.colorBgContainer,
        flex: 1,
        height: "100%",
        display: "flex",
        flexDirection: "column",
        minWidth: 0
      },
      [`${r}-preview-title`]: {
        background: e.colorBgContainer,
        paddingInline: e.padding,
        paddingBlock: e.paddingXS,
        borderBottom: `1px solid ${e.colorBorderSecondary}`,
        display: "flex",
        justifyContent: "space-between",
        alignItems: "center"
      },
      [`${r}-preview-content`]: {
        overflow: "auto",
        flex: 1,
        background: e.colorBgContainer,
        paddingInline: e.padding,
        paddingBlock: e.paddingXS,
        pre: {
          margin: 0,
          background: "transparent",
          fontFamily: e.fontFamily,
          fontSize: e.fontSize,
          whiteSpace: "pre-wrap",
          wordBreak: "break-word"
        }
      },
      [`${r}-preview-loading-container`]: {
        display: "flex",
        justifyContent: "center",
        alignItems: "center",
        marginBlockStart: i(e.marginLG).mul(3).equal()
      },
      [`${r}-preview-empty-container`]: {
        marginBlockStart: i(e.marginLG).mul(3).equal()
      },
      [`${r}-directory-tree-item-title`]: {
        display: "flex",
        whiteSpace: "nowrap",
        paddingInlineEnd: e.padding
      }
    }
  };
}, a = (e) => ({
  colorBgDirectory: e.colorFillTertiary
}), w = n(
  "Folder",
  (e) => {
    const r = t(e, {});
    return [o(r), l(r)];
  },
  a
);
export {
  w as default,
  a as prepareComponentToken
};