@voplus/morpho-document 1.4.96 → 1.4.97

package/es/pages/VSubmit/VSubmitDefaultView/index.js

@@ -1,55 +1,55 @@
-import "./index.less";
-import React, { useEffect, useState } from "react";
-import { Reload, Sidebar } from "../../../controls/ToolBar/buttons";
-import { useVSubmit, useVSubmitStore } from "../data";
-import AsideContent from "@voplus/morpho-ui/es/components/layout/AsideContent";
-import DescriptionEditor from "../../../controls/DescriptionEditor";
-import DocumentHeader from "../../../components/DocumentHeader";
-import DocumentIconList from "../components/DocumentIconList";
-import DocumentTabs from "../../../components/DocumentTabs";
-import EmailRecipients from "../components/EmailRecipients";
-import { Scrollbars } from "react-custom-scrollbars";
-import { Skeleton } from "@voplus/antd";
-import { State } from "./state";
-import SubmitSections from "../components/SubmitSections";
-import ToolBar from "../../../controls/ToolBar/ToolBar2";
-import { observe } from "@voplus/morpho-ui";
-import { useParams } from "react-router";
-const VSubmitDefaultView = () => {
-    const [state] = useState(new State());
-    const params = useParams();
-    const id = params.id;
-    const [asideContext] = useState(AsideContent.createContext());
-    const vsubmit = useVSubmit(id, { reload: state.reload, includes: "tags" });
-    const documentStore = useVSubmitStore();
-    useEffect(() => {
-        asideContext.openAside(AsideElement, { span: 12 });
-    }, []);
-    const AsideElement = (React.createElement("div", { className: "page-default-view_aside" },
-        React.createElement(DocumentTabs, { id: id, docTab: false })));
-    return observe(() => (React.createElement(AsideContent, { context: asideContext },
-        React.createElement("div", { className: "vsubmit-defaul-view" },
-            React.createElement("header", null,
-                React.createElement(DocumentHeader, { id: id, size: "h2", tools: React.createElement(React.Fragment, null,
-                        React.createElement(ToolBar, { id: id },
-                            React.createElement(Reload, { action: onReLoad }),
-                            React.createElement(Sidebar, { action: () => asideContext.asideContent
-                                    ? asideContext.closeAside()
-                                    : asideContext.openAside(AsideElement, { span: 12 }) }))) }),
-                vsubmit.loading ? (React.createElement("div", { className: "submit-description" },
-                    React.createElement(Skeleton, { active: true }))) : (React.createElement(DescriptionEditor, { id: id, description: vsubmit.description, readonly: vsubmit.readonly, padding: "0 0 0.75rem 0" })),
-                React.createElement(EmailRecipients, null)),
-            vsubmit.loading || !state.reload ? (React.createElement("div", { style: { padding: "0 20px" } },
-                React.createElement(Skeleton, { active: true }))) : (React.createElement(Scrollbars, { autoHide: true },
-                React.createElement(DocumentIconList, { id: vsubmit.attachmentsId, size: "small", download: false }),
-                React.createElement(SubmitSections, { id: id })))))));
-    /** reload data */
-    function onReLoad() {
-        state.reload = false;
-        setTimeout(() => {
-            state.reload = true;
-        }, 100);
-    }
-};
-export default VSubmitDefaultView;
+import "./index.less";
+import React, { useEffect, useState } from "react";
+import { Reload, Sidebar } from "../../../controls/ToolBar/buttons";
+import { useVSubmit, useVSubmitStore } from "../data";
+import AsideContent from "@voplus/morpho-ui/es/components/layout/AsideContent";
+import DescriptionEditor from "../../../controls/DescriptionEditor";
+import DocumentHeader from "../../../components/DocumentHeader";
+import DocumentIconList from "../components/DocumentIconList";
+import DocumentTabs from "../../../components/DocumentTabs";
+import EmailRecipients from "../components/EmailRecipients";
+import { Scrollbars } from "react-custom-scrollbars";
+import { Skeleton } from "@voplus/antd";
+import { State } from "./state";
+import SubmitSections from "../components/SubmitSections";
+import ToolBar from "../../../controls/ToolBar/ToolBar2";
+import { observe } from "@voplus/morpho-ui";
+import { useParams } from "react-router";
+const VSubmitDefaultView = () => {
+    const [state] = useState(new State());
+    const params = useParams();
+    const id = params.id;
+    const [asideContext] = useState(AsideContent.createContext());
+    const vsubmit = useVSubmit(id, { reload: state.reload, includes: "tags" });
+    const documentStore = useVSubmitStore();
+    useEffect(() => {
+        asideContext.openAside(AsideElement, { span: 12 });
+    }, []);
+    const AsideElement = (React.createElement("div", { className: "page-default-view_aside" },
+        React.createElement(DocumentTabs, { id: id, docTab: false })));
+    return observe(() => (React.createElement(AsideContent, { context: asideContext },
+        React.createElement("div", { className: "vsubmit-defaul-view" },
+            React.createElement("header", null,
+                React.createElement(DocumentHeader, { id: id, size: "h2", tools: React.createElement(React.Fragment, null,
+                        React.createElement(ToolBar, { id: id },
+                            React.createElement(Reload, { action: onReLoad }),
+                            React.createElement(Sidebar, { action: () => asideContext.asideContent
+                                    ? asideContext.closeAside()
+                                    : asideContext.openAside(AsideElement, { span: 12 }) }))) }),
+                vsubmit.loading ? (React.createElement("div", { className: "submit-description" },
+                    React.createElement(Skeleton, { active: true }))) : (React.createElement(DescriptionEditor, { id: id, description: vsubmit.description, readonly: vsubmit.readonly, padding: "0 0 0.75rem 0" })),
+                React.createElement(EmailRecipients, null)),
+            vsubmit.loading || !state.reload ? (React.createElement("div", { style: { padding: "0 20px" } },
+                React.createElement(Skeleton, { active: true }))) : (React.createElement(Scrollbars, { autoHide: true },
+                React.createElement(DocumentIconList, { id: vsubmit.attachmentsId, size: "small", download: false }),
+                React.createElement(SubmitSections, { id: id })))))));
+    /** reload data */
+    function onReLoad() {
+        state.reload = false;
+        setTimeout(() => {
+            state.reload = true;
+        }, 100);
+    }
+};
+export default VSubmitDefaultView;
 //# sourceMappingURL=index.js.map

package/es/pages/VSubmit/VSubmitDefaultView/index.less

@@ -0,0 +1,17 @@
+@import "~@voplus/antd/es/style/themes/index.less";
+
+:global {
+	.vsubmit-defaul-view {
+		height: 100%;
+		display: flex;
+		flex-direction: column;
+		// background-color: #f5f5f5;
+		> header {
+			// box-shadow: 2px 2px 5px #e8e8e8;
+			background-color: @component-background;
+		}
+		.submit-description {
+			padding: 0 20px 10px 20px;
+		}
+	}
+}

package/es/pages/VSubmit/VSubmitDefaultView/state.d.ts

@@ -1,5 +1,5 @@
-export declare class State {
-    /** Enable of new Text  */
-    reload: boolean;
-    constructor();
-}
+export declare class State {
+    /** Enable of new Text  */
+    reload: boolean;
+    constructor();
+}

package/es/pages/VSubmit/VSubmitDefaultView/state.js

@@ -1,18 +1,18 @@
-import { __decorate } from "tslib";
-import { makeObservable, observable } from "mobx";
-export class State {
-    constructor() {
-        /** Enable of new Text  */
-        Object.defineProperty(this, "reload", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: true
-        });
-        makeObservable(this);
-    }
-}
-__decorate([
-    observable
-], State.prototype, "reload", void 0);
+import { __decorate } from "tslib";
+import { makeObservable, observable } from "mobx";
+export class State {
+    constructor() {
+        /** Enable of new Text  */
+        Object.defineProperty(this, "reload", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: true
+        });
+        makeObservable(this);
+    }
+}
+__decorate([
+    observable
+], State.prototype, "reload", void 0);
 //# sourceMappingURL=state.js.map

package/es/pages/VSubmit/VSubmitSubmitterView/index.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
-import "./index.less";
-declare const VSubmitSubmitterView: () => JSX.Element;
-export default VSubmitSubmitterView;
+/// <reference types="react" />
+import "./index.less";
+declare const VSubmitSubmitterView: () => JSX.Element;
+export default VSubmitSubmitterView;

package/es/pages/VSubmit/VSubmitSubmitterView/index.js

@@ -1,32 +1,32 @@
-import "./index.less";
-import { useDocumentStore } from "@voplus/morpho-document-core";
-import DescriptionEditor from "../../../controls/DescriptionEditor";
-import DocumentHeader from "../../../components/DocumentHeader";
-import DocumentIconList from "../components/DocumentIconList";
-import MainContent from "@voplus/morpho-ui/es/components/layout/MainContent";
-import React from "react";
-import { Scrollbars } from "react-custom-scrollbars";
-import { Skeleton } from "@voplus/antd";
-import SubmitSections from "../components/SubmitSections";
-import { observe } from "@voplus/morpho-ui";
-import { useRouteMatch } from "react-router";
-import { useVSubmit } from "../data";
-const VSubmitSubmitterView = () => {
-    const match = useRouteMatch();
-    const id = match.params.id;
-    const submitter = useVSubmit(id, { reload: true });
-    const documentStore = useDocumentStore();
-    return observe(() => (React.createElement(MainContent, { className: "v-submit-submitter-view" },
-        React.createElement("div", { className: "v-submit-submitter_content" },
-            React.createElement("header", null,
-                React.createElement(DocumentHeader, { id: id, size: "h2", toolsVisible: false }),
-                submitter.loading ? (React.createElement("div", { className: "submitter-description" },
-                    React.createElement(Skeleton, { active: true }))) : (React.createElement(DescriptionEditor, { id: id, description: submitter.description, readonly: true, padding: "0 0 0.75rem 0" }))),
-            submitter.loading ? (React.createElement(Skeleton, { active: true })) : (React.createElement(Scrollbars, { autoHide: true },
-                React.createElement(DocumentIconList, { id: submitter.attachmentsId, size: "small", upload: true }),
-                React.createElement(SubmitSections, { id: id, readonly: true })))),
-        React.createElement("nav", null, submitter.loading ? (React.createElement(Skeleton, { active: true })) : null /*
-            <ChatView channelId={submitter.channelId || ""} />*/))));
-};
-export default VSubmitSubmitterView;
+import "./index.less";
+import { useDocumentStore } from "@voplus/morpho-document-core";
+import DescriptionEditor from "../../../controls/DescriptionEditor";
+import DocumentHeader from "../../../components/DocumentHeader";
+import DocumentIconList from "../components/DocumentIconList";
+import MainContent from "@voplus/morpho-ui/es/components/layout/MainContent";
+import React from "react";
+import { Scrollbars } from "react-custom-scrollbars";
+import { Skeleton } from "@voplus/antd";
+import SubmitSections from "../components/SubmitSections";
+import { observe } from "@voplus/morpho-ui";
+import { useRouteMatch } from "react-router";
+import { useVSubmit } from "../data";
+const VSubmitSubmitterView = () => {
+    const match = useRouteMatch();
+    const id = match.params.id;
+    const submitter = useVSubmit(id, { reload: true });
+    const documentStore = useDocumentStore();
+    return observe(() => (React.createElement(MainContent, { className: "v-submit-submitter-view" },
+        React.createElement("div", { className: "v-submit-submitter_content" },
+            React.createElement("header", null,
+                React.createElement(DocumentHeader, { id: id, size: "h2", toolsVisible: false }),
+                submitter.loading ? (React.createElement("div", { className: "submitter-description" },
+                    React.createElement(Skeleton, { active: true }))) : (React.createElement(DescriptionEditor, { id: id, description: submitter.description, readonly: true, padding: "0 0 0.75rem 0" }))),
+            submitter.loading ? (React.createElement(Skeleton, { active: true })) : (React.createElement(Scrollbars, { autoHide: true },
+                React.createElement(DocumentIconList, { id: submitter.attachmentsId, size: "small", upload: true }),
+                React.createElement(SubmitSections, { id: id, readonly: true })))),
+        React.createElement("nav", null, submitter.loading ? (React.createElement(Skeleton, { active: true })) : null /*
+            <ChatView channelId={submitter.channelId || ""} />*/))));
+};
+export default VSubmitSubmitterView;
 //# sourceMappingURL=index.js.map

package/es/pages/VSubmit/VSubmitSubmitterView/index.less

@@ -0,0 +1,33 @@
+@import "~@voplus/antd/es/style/themes/index.less";
+:global {
+	.v-submit-submitter-view {
+		overflow: hidden;
+		nav {
+			position: relative;
+			min-width: 380px;
+			width: 30rem;
+		}
+		.v-submit-submitter_content {
+			display: flex;
+			height: 100%;
+			flex-direction: column;
+			padding: unset !important;
+			overflow: hidden;
+			background-color:#ffffff;
+			header {
+				border-left: 1px solid #f2f2f2;
+				background: @component-background;
+				// box-shadow: 2px 2px 5px #e8e8e8;
+				.submitter-description {
+					padding: 0 20px 10px 20px;
+				}
+			}
+			.tag-view .add-tag-btn {
+				display: none;
+			}
+			.section-item {
+				background-color: #fff;
+			}
+		}
+	}
+}

package/es/pages/VSubmit/components/DocumentIcon/index.d.ts

@@ -1,12 +1,12 @@
-/// <reference types="react" />
-import "./index.less";
-declare const DocumentIcon: {
-    (props: {
-        id: string;
-        size?: "small" | "normal" | "large";
-    }): JSX.Element;
-    defaultProps: {
-        size: string;
-    };
-};
-export default DocumentIcon;
+/// <reference types="react" />
+import "./index.less";
+declare const DocumentIcon: {
+    (props: {
+        id: string;
+        size?: "small" | "normal" | "large";
+    }): JSX.Element;
+    defaultProps: {
+        size: string;
+    };
+};
+export default DocumentIcon;

package/es/pages/VSubmit/components/DocumentIcon/index.js

@@ -1,21 +1,21 @@
-import "./index.less";
-import React from "react";
-import { observe } from "@voplus/morpho-ui";
-import { useDocument } from "@voplus/morpho-document-core";
-import { useMetaStore } from "../../../../data/DocumentMetaStore";
-const DocumentIcon = (props) => {
-    const { id, size } = props;
-    const meta = useMetaStore();
-    const document = useDocument(id, {
-        reload: (d) => !d.tags,
-        includes: "tags,versions",
-    });
-    return observe(() => (React.createElement("div", { className: "document-icon-view" },
-        React.createElement("span", { className: `document-icon-${size}` }, meta.getIcon(document)),
-        React.createElement("span", { className: "document-icon-name", title: document.name }, document.name))));
-};
-DocumentIcon.defaultProps = {
-    size: "normal",
-};
-export default DocumentIcon;
+import "./index.less";
+import React from "react";
+import { observe } from "@voplus/morpho-ui";
+import { useDocument } from "@voplus/morpho-document-core";
+import { useMetaStore } from "../../../../data/DocumentMetaStore";
+const DocumentIcon = (props) => {
+    const { id, size } = props;
+    const meta = useMetaStore();
+    const document = useDocument(id, {
+        reload: (d) => !d.tags,
+        includes: "tags,versions",
+    });
+    return observe(() => (React.createElement("div", { className: "document-icon-view" },
+        React.createElement("span", { className: `document-icon-${size}` }, meta.getIcon(document)),
+        React.createElement("span", { className: "document-icon-name", title: document.name }, document.name))));
+};
+DocumentIcon.defaultProps = {
+    size: "normal",
+};
+export default DocumentIcon;
 //# sourceMappingURL=index.js.map

package/es/pages/VSubmit/components/DocumentIcon/index.less

@@ -0,0 +1,42 @@
+@import "~@voplus/antd/es/style/themes/default.less";
+:global {
+	.document-icon-view {
+		font-size: 13px;
+		margin-right: 20px;
+		> span {
+			display: block;
+			max-width: 7rem;
+			text-align: center;
+			// padding: 0 10px;
+		}
+		.document-icon-small {
+			font-size: 22px;
+			line-height: 22px;
+		}
+		.document-icon-normal {
+			font-size: 32px;
+			line-height: 32px;
+		}
+		.document-icon-large {
+			font-size: 44px;
+			line-height: 44px;
+		}
+		.document-icon-name {
+			position: relative;
+			max-height: 60px;
+			overflow: hidden;
+			word-break: break-all;
+			&:hover {
+				color: @primary-color;
+			}
+			&:after {
+				content: "...";
+				position: absolute;
+				font-weight: 500;
+				right: 0;
+				top: 40px;
+				height: 20px;
+			}
+		}
+	}
+}

package/es/pages/VSubmit/components/DocumentIconList/index.d.ts

@@ -1,20 +1,20 @@
-/// <reference types="react" />
-import "./index.less";
-declare const DocumentIconList: {
-    (props: {
-        id: string;
-        /** can  download */
-        download?: boolean;
-        /** can  upload */
-        upload?: boolean;
-        /** visible header */
-        header?: boolean;
-        /** size of icon */
-        size?: "small" | "normal" | "large";
-    }): JSX.Element;
-    defaultProps: {
-        upload: boolean;
-        header: boolean;
-    };
-};
-export default DocumentIconList;
+/// <reference types="react" />
+import "./index.less";
+declare const DocumentIconList: {
+    (props: {
+        id: string;
+        /** can  download */
+        download?: boolean;
+        /** can  upload */
+        upload?: boolean;
+        /** visible header */
+        header?: boolean;
+        /** size of icon */
+        size?: "small" | "normal" | "large";
+    }): JSX.Element;
+    defaultProps: {
+        upload: boolean;
+        header: boolean;
+    };
+};
+export default DocumentIconList;

package/es/pages/VSubmit/components/DocumentIconList/index.js

@@ -1,55 +1,55 @@
-import "./index.less";
-import { Button, Empty, Tooltip, Upload } from "@voplus/antd";
-import React, { useState } from "react";
-import { faDownload, faUpload } from "@fortawesome/pro-light-svg-icons";
-import { useDocumentListEffect, useDocumentStore, useFileStore, } from "@voplus/morpho-document-core";
-import DocumentIcon from "../DocumentIcon";
-import { FontAwesomeIcon as FAIcon } from "@fortawesome/react-fontawesome";
-import { State } from "./state";
-import { observe } from "@voplus/morpho-ui";
-import { runInAction } from "mobx";
-import { saveAs } from "file-saver";
-import { useApplicationContext } from "@voplus/morpho-data";
-const DocumentIconList = (props) => {
-    const { id, download, upload, header, size } = props;
-    const [state] = useState(new State());
-    const { user } = useApplicationContext();
-    const store = useDocumentStore();
-    const fileStore = useFileStore();
-    useDocumentListEffect(null, (list) => {
-        runInAction(() => (state.list = list || []));
-    }, {
-        Filters: [{ c: "ParentNodeId", o: "=", l: "And", v1: id }],
-    });
-    return observe(() => (React.createElement("div", { className: "documents-icon-list-view" },
-        header && (React.createElement("div", { className: "attachments-header" },
-            React.createElement("div", { className: "attachments-title" }, "Attachments"))),
-        React.createElement("div", { className: "attachments-cards" },
-            React.createElement("div", { className: "attachments-download" }, download !== false && (React.createElement(Tooltip, { title: "Download" },
-                React.createElement(Button, { size: "small", shape: "circle", type: "primary", disabled: !(state.list && state.list.length), className: "download-btn", onClick: onDownload },
-                    React.createElement(FAIcon, { icon: faDownload }))))),
-            React.createElement(Upload.Dragger, { action: `https://${store.endpoint.host}/api/files/${props.id}`, headers: {
-                    Authorization: `Bearer ${user.info.accessToken}`,
-                }, fileList: state.fileList, showUploadList: state.fileList.length > 0, onChange: state.onUploading, disabled: !upload, openFileDialogOnClick: false, multiple: true }, !!(state.list && state.list.length) ? (state.list.map((d) => React.createElement(DocumentIcon, { key: d.id, id: d.id, size: size }))) : upload ? (React.createElement("div", { className: "ant-upload-hint" },
-                React.createElement(FAIcon, { icon: faUpload }),
-                "Drag file to this area to upload")) : (React.createElement(Empty, { image: Empty.PRESENTED_IMAGE_SIMPLE })))))));
-    /** download file */
-    function onDownload() {
-        for (const item of state.list) {
-            fileStore.download(item.id).then((blob) => {
-                if (blob) {
-                    const url = URL.createObjectURL(blob);
-                    if (url) {
-                        saveAs(url, item.name);
-                    }
-                }
-            });
-        }
-    }
-};
-DocumentIconList.defaultProps = {
-    upload: true,
-    header: true,
-};
-export default DocumentIconList;
+import "./index.less";
+import { Button, Empty, Tooltip, Upload } from "@voplus/antd";
+import React, { useState } from "react";
+import { faDownload, faUpload } from "@fortawesome/pro-light-svg-icons";
+import { useDocumentListEffect, useDocumentStore, useFileStore, } from "@voplus/morpho-document-core";
+import DocumentIcon from "../DocumentIcon";
+import { FontAwesomeIcon as FAIcon } from "@fortawesome/react-fontawesome";
+import { State } from "./state";
+import { observe } from "@voplus/morpho-ui";
+import { runInAction } from "mobx";
+import { saveAs } from "file-saver";
+import { useApplicationContext } from "@voplus/morpho-data";
+const DocumentIconList = (props) => {
+    const { id, download, upload, header, size } = props;
+    const [state] = useState(new State());
+    const { user } = useApplicationContext();
+    const store = useDocumentStore();
+    const fileStore = useFileStore();
+    useDocumentListEffect(null, (list) => {
+        runInAction(() => (state.list = list || []));
+    }, {
+        Filters: [{ c: "ParentNodeId", o: "=", l: "And", v1: id }],
+    });
+    return observe(() => (React.createElement("div", { className: "documents-icon-list-view" },
+        header && (React.createElement("div", { className: "attachments-header" },
+            React.createElement("div", { className: "attachments-title" }, "Attachments"))),
+        React.createElement("div", { className: "attachments-cards" },
+            React.createElement("div", { className: "attachments-download" }, download !== false && (React.createElement(Tooltip, { title: "Download" },
+                React.createElement(Button, { size: "small", shape: "circle", type: "primary", disabled: !(state.list && state.list.length), className: "download-btn", onClick: onDownload },
+                    React.createElement(FAIcon, { icon: faDownload }))))),
+            React.createElement(Upload.Dragger, { action: `https://${store.endpoint.host}/api/files/${props.id}`, headers: {
+                    Authorization: `Bearer ${user.info.accessToken}`,
+                }, fileList: state.fileList, showUploadList: state.fileList.length > 0, onChange: state.onUploading, disabled: !upload, openFileDialogOnClick: false, multiple: true }, !!(state.list && state.list.length) ? (state.list.map((d) => React.createElement(DocumentIcon, { key: d.id, id: d.id, size: size }))) : upload ? (React.createElement("div", { className: "ant-upload-hint" },
+                React.createElement(FAIcon, { icon: faUpload }),
+                "Drag file to this area to upload")) : (React.createElement(Empty, { image: Empty.PRESENTED_IMAGE_SIMPLE })))))));
+    /** download file */
+    function onDownload() {
+        for (const item of state.list) {
+            fileStore.download(item.id).then((blob) => {
+                if (blob) {
+                    const url = URL.createObjectURL(blob);
+                    if (url) {
+                        saveAs(url, item.name);
+                    }
+                }
+            });
+        }
+    }
+};
+DocumentIconList.defaultProps = {
+    upload: true,
+    header: true,
+};
+export default DocumentIconList;
 //# sourceMappingURL=index.js.map

package/es/pages/VSubmit/components/DocumentIconList/index.less

@@ -0,0 +1,84 @@
+:global {
+	.documents-icon-list-view {
+		display: flex;
+		padding: 0 20px;
+		.attachments-header {
+			display: flex;
+			justify-content: space-between;
+			// align-items: center;
+			padding: 10px 0;
+			min-width: 110px;
+			.attachments-title {
+				color: #000;
+				font-size: 15px;
+				font-weight: 600;
+			}
+			.download-btn {
+				padding: 0;
+				height: 26px;
+				font-size: 18px;
+			}
+		}
+		.attachments-cards {
+			flex: 1;
+			display: flex;
+			flex-wrap: wrap;
+			// margin: 0 20px;
+			padding: 10px 0;
+			background-color: #fff;
+			position: relative;
+			> span {
+				display: flex;
+				width: 100%;
+				flex-direction: column-reverse;
+				// padding: 0 0.5rem;
+				.ant-upload-disabled {
+					cursor: auto !important;
+				}
+				.ant-upload.ant-upload-drag {
+					border: none;
+					background-color: transparent;
+					text-align: left;
+					.ant-upload {
+						padding: 0;
+						.ant-upload-drag-container {
+							display: flex;
+							flex-wrap: wrap;
+							.document-icon-card {
+								width: 18rem;
+								margin: 0.5rem;
+							}
+							.ant-upload-hint {
+								width: 100%;
+								padding: 1rem 0;
+								// margin: 0.25rem 0.75rem 0 0.75rem;
+								background-color: #fff;
+								.svg-inline--fa {
+									margin: 0 10px 0 0;
+								}
+							}
+							.ant-empty {
+								width: 100%;
+								padding: 10px 0;
+								margin: 0.25rem 0.5rem 0 0.5rem;
+								background-color: #fff;
+							}
+						}
+					}
+				}
+			}
+			.attachments-download{
+				position: absolute;
+				right: -6px;
+				top: 0;
+				// .download-btn {
+				// 	padding: 0;
+				// 	color: #000;
+				// 	border-color: #000;
+				// 	height: 26px;
+				// 	font-size: 18px;
+				// }
+			}
+		}
+	}
+}